[FRE-1503] add loading state in useAutoSetAddress

.changeset/long-flowers-change.md

@@ -0,0 +1,5 @@
+---
+"@skip-go/widget": patch
+---
+
+add loading state in useAutoSetAddress

packages/widget/src/hooks/useAutoSetAddress.ts

@@ -24,6 +24,7 @@ export const useAutoSetAddress = () => {
   const requiredChainAddresses = route?.requiredChainAddresses;
   const { data: chains } = useAtomValue(skipChainsAtom);
   const sourceWallet = useAtomValue(walletsAtom);
+  const [isLoading, setIsLoading] = useState(true);
 
   const [currentSourceWallets, setCurrentSourceWallets] = useState<typeof sourceWallet>();
   const getAccount = useGetAccount();
@@ -45,6 +46,7 @@ export const useAutoSetAddress = () => {
 
   const connectRequiredChains = useCallback(
     async (openModal?: boolean) => {
+      setIsLoading(true);
       const createWallets = {
         [ChainType.Cosmos]: createCosmosWallets,
         [ChainType.EVM]: createEvmWallets,
@@ -108,6 +110,8 @@ export const useAutoSetAddress = () => {
           console.error(_error);
           if (!openModal) return;
           showSetAddressModal();
+        } finally {
+          setIsLoading(false);
         }
       });
     },
@@ -146,5 +150,5 @@ export const useAutoSetAddress = () => {
     sourceWallet.cosmos,
   ]);
 
-  return { connectRequiredChains };
+  return { connectRequiredChains, isLoading };
 };

packages/widget/src/pages/SwapExecutionPage/SwapExecutionButton.tsx

@@ -125,6 +125,9 @@ export const SwapExecutionButton: React.FC<SwapExecutionButtonProps> = ({
           }}
         />
       );
+    case SwapExecutionState.pendingGettingAddresses:
+      return <MainButton label="Getting addresses" loading />;
+
     default:
       return null;
   }

packages/widget/src/pages/SwapExecutionPage/SwapExecutionPage.tsx

@@ -33,14 +33,15 @@ export enum SwapExecutionState {
   confirmed,
   validatingGasBalance,
   approving,
+  pendingGettingAddresses,
 }
 
 export const SwapExecutionPage = () => {
   const setCurrentPage = useSetAtom(currentPageAtom);
   const { route, overallStatus, transactionDetailsArray, isValidatingGasBalance } =
     useAtomValue(swapExecutionStateAtom);
   const chainAddresses = useAtomValue(chainAddressesAtom);
-  const { connectRequiredChains } = useAutoSetAddress();
+  const { connectRequiredChains, isLoading } = useAutoSetAddress();
   const [simpleRoute, setSimpleRoute] = useState(true);
 
   const { mutate: submitExecuteRouteMutation } = useAtomValue(skipSubmitSwapExecutionAtom);
@@ -72,6 +73,7 @@ export const SwapExecutionPage = () => {
     overallStatus,
     isValidatingGasBalance,
     signaturesRemaining,
+    isLoading,
   });
 
   useHandleTransactionFailed(statusData?.isSettled && !statusData?.isSuccess);

packages/widget/src/pages/SwapExecutionPage/useSwapExecutionState.ts

@@ -11,6 +11,7 @@ type UseSwapExecutionStateParams = {
   overallStatus: SimpleStatus;
   isValidatingGasBalance?: { status: string };
   signaturesRemaining: number;
+  isLoading: boolean;
 };
 
 export function useSwapExecutionState({
@@ -19,8 +20,10 @@ export function useSwapExecutionState({
   overallStatus,
   isValidatingGasBalance,
   signaturesRemaining,
+  isLoading,
 }: UseSwapExecutionStateParams): SwapExecutionState {
   return useMemo(() => {
+    if (isLoading) return SwapExecutionState.pendingGettingAddresses;
     if (!chainAddresses) return SwapExecutionState.destinationAddressUnset;
     const requiredChainAddresses = route?.requiredChainAddresses;
     if (!requiredChainAddresses) return SwapExecutionState.destinationAddressUnset;
@@ -64,6 +67,7 @@ export function useSwapExecutionState({
 
     return SwapExecutionState.ready;
   }, [
+    isLoading,
     chainAddresses,
     route?.requiredChainAddresses,
     overallStatus,