fix no account form loading state

gear-tech · Nov 20, 2024 · 2d9a048 · 2d9a048
1 parent fb0b786
commit 2d9a048
Show file tree

Hide file tree

Showing 4 changed files with 17 additions and 7 deletions.
diff --git a/frontend/src/features/swap/components/ft-allowance-tip/ft-allowance-tip.tsx b/frontend/src/features/swap/components/ft-allowance-tip/ft-allowance-tip.tsx
@@ -13,11 +13,22 @@ type Props = {
   symbol: string | undefined;
   amount: string;
   isVaraNetwork: boolean;
+  isLoading: boolean;
 };
 
-function FTAllowanceTip({ allowance, decimals, symbol, amount, isVaraNetwork }: Props) {
-  const isLoading = isUndefined(allowance) || !decimals || !symbol;
-  if (isLoading) return <Skeleton width="14px" height="14px" borderRadius="50%" className={styles.skeleton} />;
+function FTAllowanceTip({ allowance, decimals, symbol, amount, isVaraNetwork, isLoading }: Props) {
+  const isEmpty = isUndefined(allowance) || !decimals || !symbol;
+
+  if (isLoading || isEmpty)
+    return (
+      <Skeleton
+        width="14px"
+        height="14px"
+        borderRadius="50%"
+        className={styles.skeleton}
+        disabled={!isLoading && isEmpty}
+      />
+    );
 
   const formattedAllowance = formatUnits(allowance, decimals);
   const contractName = isVaraNetwork ? 'VFT' : 'ERC20';

diff --git a/frontend/src/features/swap/components/swap-form/swap-form.tsx b/frontend/src/features/swap/components/swap-form/swap-form.tsx
@@ -131,6 +131,7 @@ function SwapForm({
               symbol={symbol}
               amount={amount}
               isVaraNetwork={isVaraNetwork}
+              isLoading={bridge.isLoading || allowance.isLoading}
             />
           </div>
         </footer>

diff --git a/frontend/src/features/swap/hooks/eth/use-eth-ft-balance.ts b/frontend/src/features/swap/hooks/eth/use-eth-ft-balance.ts
@@ -15,7 +15,7 @@ function useEthFTBalance(address: HexString | undefined, decimals: number | unde
   const ethAccount = useEthAccount();
 
   // TODO: logger
-  const { data, isPending } = useReadContract({
+  const { data, isLoading } = useReadContract({
     address,
     abi,
     functionName: FUNCTION_NAME.FUNGIBLE_TOKEN_BALANCE,
@@ -29,7 +29,6 @@ function useEthFTBalance(address: HexString | undefined, decimals: number | unde
 
   const value = data;
   const formattedValue = !isUndefined(value) && !isUndefined(decimals) ? formatUnits(value, decimals) : undefined;
-  const isLoading = ethAccount.isConnected && isPending;
 
   return { value, formattedValue, decimals, isLoading };
 }

diff --git a/frontend/src/features/swap/hooks/vara/use-vara-ft-balance.ts b/frontend/src/features/swap/hooks/vara/use-vara-ft-balance.ts
@@ -15,7 +15,7 @@ function useVaraFTBalance(address: HexString | undefined, decimals: number | und
     id: address,
   });
 
-  const { data, isPending } = useProgramQuery({
+  const { data, isLoading } = useProgramQuery({
     program,
     serviceName: SERVICE_NAME.VFT,
     functionName: QUERY_NAME.BALANCE,
@@ -25,7 +25,6 @@ function useVaraFTBalance(address: HexString | undefined, decimals: number | und
 
   const value = data;
   const formattedValue = !isUndefined(value) && !isUndefined(decimals) ? formatUnits(value, decimals) : undefined;
-  const isLoading = isPending;
 
   return { value, formattedValue, decimals, isLoading };
 }