isAwaitingWalletResponse

babylonlabs-io · Sep 15, 2024 · 2cacee5 · 2cacee5
1 parent f40c0e7
commit 2cacee5
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 24 deletions.
diff --git a/src/app/components/Delegations/Delegations.tsx b/src/app/components/Delegations/Delegations.tsx
@@ -57,7 +57,8 @@ export const Delegations: React.FC<DelegationsProps> = ({
   const [txID, setTxID] = useState("");
   const [modalMode, setModalMode] = useState<MODE>();
   const { showError } = useError();
-  const [disableModalClose, setDisableModalClose] = useState(false);
+  const [isAwaitingWalletResponse, setisAwaitingWalletResponse] =
+    useState(false);
 
   // Local storage state for intermediate delegations (withdrawing, unbonding)
   const intermediateDelegationsLocalStorageKey =
@@ -110,7 +111,7 @@ export const Delegations: React.FC<DelegationsProps> = ({
   const handleUnbond = async (id: string) => {
     try {
       // Prevent the modal from closing
-      setDisableModalClose(true);
+      setisAwaitingWalletResponse(true);
       // Sign the unbonding transaction
       const { delegation } = await signUnbondingTx(
         id,
@@ -133,7 +134,7 @@ export const Delegations: React.FC<DelegationsProps> = ({
       setModalOpen(false);
       setTxID("");
       setModalMode(undefined);
-      setDisableModalClose(false);
+      setisAwaitingWalletResponse(false);
     }
   };
 
@@ -142,7 +143,7 @@ export const Delegations: React.FC<DelegationsProps> = ({
   const handleWithdraw = async (id: string) => {
     try {
       // Prevent the modal from closing
-      setDisableModalClose(true);
+      setisAwaitingWalletResponse(true);
       // Sign the withdrawal transaction
       const { delegation } = await signWithdrawalTx(
         id,
@@ -168,7 +169,7 @@ export const Delegations: React.FC<DelegationsProps> = ({
       setModalOpen(false);
       setTxID("");
       setModalMode(undefined);
-      setDisableModalClose(false);
+      setisAwaitingWalletResponse(false);
     }
   };
 
@@ -306,7 +307,7 @@ export const Delegations: React.FC<DelegationsProps> = ({
               : handleWithdraw(txID);
           }}
           mode={modalMode}
-          disableModalClose={disableModalClose}
+          isAwaitingWalletResponse={isAwaitingWalletResponse}
         />
       )}
     </div>

diff --git a/src/app/components/Modals/GeneralModal.tsx b/src/app/components/Modals/GeneralModal.tsx
@@ -8,7 +8,7 @@ interface GeneralModalProps {
   small?: boolean;
   children: ReactNode;
   className?: string;
-  disableModalClose?: boolean;
+  isAwaitingWalletResponse?: boolean;
   closeOnEsc?: boolean;
 }
 
@@ -18,7 +18,7 @@ export const GeneralModal: React.FC<GeneralModalProps> = ({
   children,
   small,
   className = "",
-  disableModalClose,
+  isAwaitingWalletResponse,
   closeOnEsc = true,
 }) => {
   const modalRef = useRef(null);
@@ -51,7 +51,7 @@ export const GeneralModal: React.FC<GeneralModalProps> = ({
       showCloseIcon={false}
       blockScroll={false}
       closeOnEsc={closeOnEsc}
-      closeOnOverlayClick={!disableModalClose}
+      closeOnOverlayClick={!isAwaitingWalletResponse}
     >
       {children}
     </Modal>

diff --git a/src/app/components/Modals/PreviewModal.tsx b/src/app/components/Modals/PreviewModal.tsx
@@ -21,7 +21,7 @@ interface PreviewModalProps {
   unbondingTimeBlocks: number;
   confirmationDepth: number;
   unbondingFeeSat: number;
-  disableModalClose: boolean;
+  isAwaitingWalletResponse: boolean;
 }
 
 export const PreviewModal: React.FC<PreviewModalProps> = ({
@@ -36,7 +36,7 @@ export const PreviewModal: React.FC<PreviewModalProps> = ({
   feeRate,
   confirmationDepth,
   unbondingFeeSat,
-  disableModalClose,
+  isAwaitingWalletResponse,
 }) => {
   const cardStyles =
     "card border bg-base-300 p-4 text-sm dark:border-0 dark:bg-base-200";
@@ -47,14 +47,14 @@ export const PreviewModal: React.FC<PreviewModalProps> = ({
     <GeneralModal
       open={open}
       onClose={onClose}
-      disableModalClose={disableModalClose}
+      isAwaitingWalletResponse={isAwaitingWalletResponse}
       closeOnEsc={false}
     >
       <div className="mb-4 flex items-center justify-between">
         <h3 className="font-bold">Preview</h3>
         <button
           className="btn btn-circle btn-ghost btn-sm"
-          onClick={() => !disableModalClose && onClose(false)}
+          onClick={() => !isAwaitingWalletResponse && onClose(false)}
         >
           <IoMdClose size={24} />
         </button>
@@ -121,7 +121,7 @@ export const PreviewModal: React.FC<PreviewModalProps> = ({
           &quot;Pending&quot; stake is only accessible through the device it was
           created.
         </p>
-        {disableModalClose ? (
+        {isAwaitingWalletResponse ? (
           <LoadingView text="Loading..." noBorder />
         ) : (
           <div className="flex gap-4">

diff --git a/src/app/components/Modals/UnbondWithdrawModal.tsx b/src/app/components/Modals/UnbondWithdrawModal.tsx
@@ -20,7 +20,7 @@ interface PreviewModalProps {
   onClose: (value: boolean) => void;
   onProceed: () => void;
   mode: MODE;
-  disableModalClose: boolean;
+  isAwaitingWalletResponse: boolean;
 }
 
 export const UnbondWithdrawModal: React.FC<PreviewModalProps> = ({
@@ -30,7 +30,7 @@ export const UnbondWithdrawModal: React.FC<PreviewModalProps> = ({
   onClose,
   onProceed,
   mode,
-  disableModalClose,
+  isAwaitingWalletResponse,
 }) => {
   const { coinName, networkName } = getNetworkConfig();
 
@@ -67,21 +67,21 @@ export const UnbondWithdrawModal: React.FC<PreviewModalProps> = ({
       open={open}
       onClose={onClose}
       closeOnEsc={false}
-      disableModalClose={disableModalClose}
+      isAwaitingWalletResponse={isAwaitingWalletResponse}
       small
     >
       <div className="mb-4 flex items-center justify-between">
         <h3 className="font-bold">{title}</h3>
         <button
           className="btn btn-circle btn-ghost btn-sm"
-          onClick={() => !disableModalClose && onClose(false)}
+          onClick={() => !isAwaitingWalletResponse && onClose(false)}
         >
           <IoMdClose size={24} />
         </button>
       </div>
       <div className="flex flex-col gap-4">
         <p className="text-left dark:text-neutral-content">{content}</p>
-        {disableModalClose ? (
+        {isAwaitingWalletResponse ? (
           <LoadingView text="Loading..." noBorder />
         ) : (
           <div className="flex gap-4">

diff --git a/src/app/components/Staking/Staking.tsx b/src/app/components/Staking/Staking.tsx
@@ -91,7 +91,8 @@ export const Staking: React.FC<StakingProps> = ({
     useState<FinalityProvider[]>();
   // Selected fee rate, comes from the user input
   const [selectedFeeRate, setSelectedFeeRate] = useState(0);
-  const [disableModalClose, setDisableModalClose] = useState(false);
+  const [isAwaitingWalletResponse, setIsAwaitingWalletResponse] =
+    useState(false);
   const [previewModalOpen, setPreviewModalOpen] = useState(false);
   const [resetFormInputs, setResetFormInputs] = useState(false);
   const [feedbackModal, setFeedbackModal] = useState<{
@@ -227,7 +228,7 @@ export const Staking: React.FC<StakingProps> = ({
   ]);
 
   const handleResetState = () => {
-    setDisableModalClose(false);
+    setIsAwaitingWalletResponse(false);
     setFinalityProvider(undefined);
     setStakingAmountSat(0);
     setStakingTimeBlocks(0);
@@ -246,7 +247,7 @@ export const Staking: React.FC<StakingProps> = ({
   const handleSign = async () => {
     try {
       // Prevent the modal from closing
-      setDisableModalClose(true);
+      setIsAwaitingWalletResponse(true);
       // Initial validation
       if (!btcWallet) throw new Error("Wallet is not connected");
       if (!address) throw new Error("Address is not set");
@@ -297,7 +298,7 @@ export const Staking: React.FC<StakingProps> = ({
         },
       });
     } finally {
-      setDisableModalClose(false);
+      setIsAwaitingWalletResponse(false);
     }
   };
 
@@ -665,7 +666,7 @@ export const Staking: React.FC<StakingProps> = ({
                 feeRate={feeRate}
                 unbondingTimeBlocks={unbondingTime}
                 unbondingFeeSat={unbondingFeeSat}
-                disableModalClose={disableModalClose}
+                isAwaitingWalletResponse={isAwaitingWalletResponse}
               />
             )}
           </div>