feat: loading spinner when fetching signer balance

BoltzExchange · Nov 9, 2024 · 957f43c · 957f43c
1 parent f62ef91
commit 957f43c
Showing 1 changed file with 53 additions and 39 deletions.
diff --git a/src/components/LockupEvm.tsx b/src/components/LockupEvm.tsx
@@ -1,3 +1,4 @@
+import log from "loglevel";
 import { Show, createEffect, createSignal } from "solid-js";
 
 import { useGlobalContext } from "../context/Global";
@@ -7,6 +8,7 @@ import { HardwareSigner } from "../utils/hardware/HadwareSigner";
 import { prefix0x, satoshiToWei } from "../utils/rootstock";
 import ConnectWallet from "./ConnectWallet";
 import ContractTransaction from "./ContractTransaction";
+import LoadingSpinner from "./LoadingSpinner";
 
 const InsufficientBalance = () => {
     const { t } = useGlobalContext();
@@ -37,59 +39,71 @@ const LockupEvm = (props: {
 
     const value = () => satoshiToWei(props.amount);
 
-    const [signerBalance, setSignerBalance] = createSignal<bigint>(0n);
+    const [signerBalance, setSignerBalance] = createSignal<bigint>(undefined);
 
     // eslint-disable-next-line solid/reactivity
     createEffect(async () => {
         if (signer() === undefined) {
             return;
         }
 
-        setSignerBalance(
-            await signer().provider.getBalance(await signer().getAddress()),
+        const balance = await signer().provider.getBalance(
+            await signer().getAddress(),
         );
+        log.info("EVM signer balance", balance);
+        setSignerBalance(balance);
     });
 
     return (
         <Show
-            when={signer() === undefined || signerBalance() > value()}
-            fallback={<InsufficientBalance />}>
-            <ContractTransaction
-                /* eslint-disable-next-line solid/reactivity */
-                onClick={async () => {
-                    const contract = getEtherSwap();
-                    const tx = await contract.lock(
-                        prefix0x(props.preimageHash),
-                        props.claimAddress,
-                        props.timeoutBlockHeight,
-                        {
-                            value: value(),
-                        },
-                    );
-                    const currentSwap = await getSwap(props.swapId);
-                    currentSwap.lockupTx = tx.hash;
-                    currentSwap.signer = signer().address;
+            when={signerBalance() !== undefined}
+            fallback={
+                <Show
+                    when={signer() !== undefined}
+                    fallback={<ConnectWallet />}>
+                    <LoadingSpinner />
+                </Show>
+            }>
+            <Show
+                when={signer() === undefined || signerBalance() > value()}
+                fallback={<InsufficientBalance />}>
+                <ContractTransaction
+                    /* eslint-disable-next-line solid/reactivity */
+                    onClick={async () => {
+                        const contract = getEtherSwap();
+                        const tx = await contract.lock(
+                            prefix0x(props.preimageHash),
+                            props.claimAddress,
+                            props.timeoutBlockHeight,
+                            {
+                                value: value(),
+                            },
+                        );
+                        const currentSwap = await getSwap(props.swapId);
+                        currentSwap.lockupTx = tx.hash;
+                        currentSwap.signer = signer().address;
 
-                    if (customDerivationPathRdns.includes(signer().rdns)) {
-                        currentSwap.derivationPath = (
-                            providers()[signer().rdns]
-                                .provider as unknown as HardwareSigner
-                        ).getDerivationPath();
-                    }
+                        if (customDerivationPathRdns.includes(signer().rdns)) {
+                            currentSwap.derivationPath = (
+                                providers()[signer().rdns]
+                                    .provider as unknown as HardwareSigner
+                            ).getDerivationPath();
+                        }
 
-                    setSwap(currentSwap);
-                    await setSwapStorage(currentSwap);
-                }}
-                children={<ConnectWallet />}
-                address={{
-                    address: props.signerAddress,
-                    derivationPath: props.derivationPath,
-                }}
-                buttonText={t("send")}
-                promptText={t("transaction_prompt", { button: t("send") })}
-                waitingText={t("tx_in_mempool_subline")}
-                showHr={false}
-            />
+                        setSwap(currentSwap);
+                        await setSwapStorage(currentSwap);
+                    }}
+                    children={<ConnectWallet />}
+                    address={{
+                        address: props.signerAddress,
+                        derivationPath: props.derivationPath,
+                    }}
+                    buttonText={t("send")}
+                    promptText={t("transaction_prompt", { button: t("send") })}
+                    waitingText={t("tx_in_mempool_subline")}
+                    showHr={false}
+                />
+            </Show>
         </Show>
     );
 };