diff --git a/.changeset/long-flowers-change.md b/.changeset/long-flowers-change.md new file mode 100644 index 000000000..9b05b9a43 --- /dev/null +++ b/.changeset/long-flowers-change.md @@ -0,0 +1,5 @@ +--- +"@skip-go/widget": patch +--- + +add loading state in useAutoSetAddress diff --git a/packages/widget/src/hooks/useAutoSetAddress.ts b/packages/widget/src/hooks/useAutoSetAddress.ts index a87a9ee38..505b75e16 100644 --- a/packages/widget/src/hooks/useAutoSetAddress.ts +++ b/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(); 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 }; }; diff --git a/packages/widget/src/pages/SwapExecutionPage/SwapExecutionButton.tsx b/packages/widget/src/pages/SwapExecutionPage/SwapExecutionButton.tsx index 74e22fb52..5643c780e 100644 --- a/packages/widget/src/pages/SwapExecutionPage/SwapExecutionButton.tsx +++ b/packages/widget/src/pages/SwapExecutionPage/SwapExecutionButton.tsx @@ -125,6 +125,9 @@ export const SwapExecutionButton: React.FC = ({ }} /> ); + case SwapExecutionState.pendingGettingAddresses: + return ; + default: return null; } diff --git a/packages/widget/src/pages/SwapExecutionPage/SwapExecutionPage.tsx b/packages/widget/src/pages/SwapExecutionPage/SwapExecutionPage.tsx index 2e49fefc8..8f3ce60aa 100644 --- a/packages/widget/src/pages/SwapExecutionPage/SwapExecutionPage.tsx +++ b/packages/widget/src/pages/SwapExecutionPage/SwapExecutionPage.tsx @@ -33,6 +33,7 @@ export enum SwapExecutionState { confirmed, validatingGasBalance, approving, + pendingGettingAddresses, } export const SwapExecutionPage = () => { @@ -40,7 +41,7 @@ export const SwapExecutionPage = () => { 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); diff --git a/packages/widget/src/pages/SwapExecutionPage/useSwapExecutionState.ts b/packages/widget/src/pages/SwapExecutionPage/useSwapExecutionState.ts index cb040e3dd..840deb8ad 100644 --- a/packages/widget/src/pages/SwapExecutionPage/useSwapExecutionState.ts +++ b/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,