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