diff --git a/src/components/Earn/Tab.tsx b/src/components/Earn/Tab.tsx index 349829be..bc4b7f16 100644 --- a/src/components/Earn/Tab.tsx +++ b/src/components/Earn/Tab.tsx @@ -1,7 +1,7 @@ import classNames from 'classnames' -import useAccountId from 'hooks/useAccountId' import { NavLink, useParams } from 'react-router-dom' +import useAccountId from 'hooks/useAccountId' import { getRoute } from 'utils/route' const underlineClasses = diff --git a/src/components/Trade/TradeModule/SwapForm/index.tsx b/src/components/Trade/TradeModule/SwapForm/index.tsx index 7c9c0b60..61725959 100644 --- a/src/components/Trade/TradeModule/SwapForm/index.tsx +++ b/src/components/Trade/TradeModule/SwapForm/index.tsx @@ -26,7 +26,7 @@ import { BNCoin } from 'types/classes/BNCoin' import { byDenom } from 'utils/array' import { defaultFee } from 'utils/constants' import { getCapLeftWithBuffer } from 'utils/generic' -import { BN, asyncThrottle } from 'utils/helpers' +import { asyncThrottle, BN } from 'utils/helpers' interface Props { buyAsset: Asset diff --git a/src/components/Wallet/WalletConnectedButton.tsx b/src/components/Wallet/WalletConnectedButton.tsx index c7319bfa..b437c374 100644 --- a/src/components/Wallet/WalletConnectedButton.tsx +++ b/src/components/Wallet/WalletConnectedButton.tsx @@ -65,7 +65,8 @@ export default function WalletConnectedButton() { if (!currentWallet) return disconnectWallet(currentWallet) useStore.setState({ client: undefined, address: undefined, accounts: null, balances: [] }) - if (focusComponent) + + if (focusComponent) { useStore.setState({ focusComponent: { component: , @@ -74,6 +75,8 @@ export default function WalletConnectedButton() { }, }, }) + } + navigate(getRoute(getPage(pathname))) } diff --git a/src/components/Wallet/WalletConnecting.tsx b/src/components/Wallet/WalletConnecting.tsx index 42c4947e..e37a163f 100644 --- a/src/components/Wallet/WalletConnecting.tsx +++ b/src/components/Wallet/WalletConnecting.tsx @@ -1,6 +1,6 @@ import { CosmWasmClient } from '@cosmjs/cosmwasm-stargate' import { useShuttle } from '@delphi-labs/shuttle-react' -import { useCallback, useEffect } from 'react' +import { useCallback, useEffect, useMemo } from 'react' import { CircularProgress } from 'components/CircularProgress' import FullOverlayContent from 'components/FullOverlayContent' @@ -30,11 +30,17 @@ const mapErrorMessages = (providerId: string, errorMessage: string) => { } export default function WalletConnecting(props: Props) { - const { recentWallet, connect, simulate, sign, broadcast } = useShuttle() + const { recentWallet, connect, simulate, sign, broadcast, mobileProviders, extensionProviders } = + useShuttle() + const providers = useMemo( + () => [...mobileProviders, ...extensionProviders], + [mobileProviders, extensionProviders], + ) const [isConnecting, setIsConnecting] = useToggle() const providerId = props.providerId ?? recentWallet?.providerId const isAutoConnect = props.autoConnect const client = useStore((s) => s.client) + const address = useStore((s) => s.address) const handleConnect = useCallback( (extensionProviderId: string) => { @@ -64,9 +70,7 @@ export default function WalletConnecting(props: Props) { }) } catch (error) { setIsConnecting(false) - if (isAutoConnect) return - if (error instanceof Error) { useStore.setState({ client: undefined, @@ -86,21 +90,22 @@ export default function WalletConnecting(props: Props) { } } } - setTimeout( - () => { - if (isConnecting) return - handleConnectAsync() - }, - isAutoConnect ? 1000 : 0, - ) + if (!isConnecting) handleConnectAsync() }, [broadcast, connect, client, isAutoConnect, isConnecting, setIsConnecting, sign, simulate], ) useEffect(() => { - if (isConnecting || !providerId) return - handleConnect(providerId) - }, [isConnecting, providerId, handleConnect]) + const provider = providers.find((p) => p.id === providerId) + if ( + !provider || + !provider.initialized || + isConnecting || + (recentWallet && recentWallet.account.address === address) + ) + return + handleConnect(provider.id) + }, [handleConnect, isConnecting, providerId, providers, recentWallet, address]) return ( s.address) - const client = useStore((s) => s.client) + const focusComponent = useStore((s) => s.focusComponent) useEffect(() => { - if (!currentWallet) { - useStore.setState({ address: undefined, accounts: null, client: undefined }) - return - } - - if (client) { - if (currentWallet.account.address !== address) - useStore.setState({ address: currentWallet.account.address }) - return - } - useStore.setState({ focusComponent: { component: } }) - }, [currentWallet, client, address]) - - // Redirect when switching wallets or on first connection - useEffect(() => { - if (!address || address === addressInUrl) return - navigate(getRoute(getPage(pathname), address)) - }, [address, addressInUrl, navigate, pathname]) + if (!currentWallet) return + if (currentWallet.account.address === address || focusComponent) return + useStore.setState({ + address: undefined, + client: undefined, + focusComponent: { + component: , + }, + }) + }, [currentWallet, address, focusComponent]) return address ? : } diff --git a/src/hooks/useAccountIds.tsx b/src/hooks/useAccountIds.tsx index 41f804e2..fffe385c 100644 --- a/src/hooks/useAccountIds.tsx +++ b/src/hooks/useAccountIds.tsx @@ -5,7 +5,7 @@ import getAccountIds from 'api/wallets/getAccountIds' export default function useAccountIds(address?: string) { return useSWR(`wallets/${address}/account-ids`, () => getAccountIds(address), { suspense: true, - fallback: [], + fallback: [] as string[], revalidateOnFocus: false, }) } diff --git a/src/utils/route.ts b/src/utils/route.ts index 7aa795d5..f651d04e 100644 --- a/src/utils/route.ts +++ b/src/utils/route.ts @@ -11,6 +11,8 @@ export function getRoute(page: Page, address?: string, accountId?: string | null if (accountId) { url.searchParams.append('accountId', accountId) + } else { + url.searchParams.delete('accountId') } return url.pathname + url.search