fix: fixed account change and refresh issues (#498)

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 =

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

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: <WalletSelect />,
@@ -74,6 +75,8 @@ export default function WalletConnectedButton() {
           },
         },
       })
+    }
+
     navigate(getRoute(getPage(pathname)))
   }
 

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 (
     <FullOverlayContent

src/components/Wallet/index.tsx

@@ -1,40 +1,27 @@
 import { useEffect } from 'react'
-import { useLocation, useNavigate, useParams } from 'react-router-dom'
 
 import WalletConnectButton from 'components/Wallet/WalletConnectButton'
 import WalletConnectedButton from 'components/Wallet/WalletConnectedButton'
 import WalletConnecting from 'components/Wallet/WalletConnecting'
 import useCurrentWallet from 'hooks/useCurrentWallet'
 import useStore from 'store'
-import { getPage, getRoute } from 'utils/route'
 
 export default function Wallet() {
-  const navigate = useNavigate()
-  const { address: addressInUrl } = useParams()
-  const { pathname } = useLocation()
   const currentWallet = useCurrentWallet()
   const address = useStore((s) => 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: <WalletConnecting autoConnect /> } })
-  }, [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: <WalletConnecting autoConnect />,
+      },
+    })
+  }, [currentWallet, address, focusComponent])
 
   return address ? <WalletConnectedButton /> : <WalletConnectButton />
 }

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,
   })
 }

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