ensure client is updated with anchorprovider that has the wallet after connecting

components/modals/UserSetupModal.tsx

@@ -22,6 +22,7 @@ import { Wallet } from '@project-serum/anchor'
 import ActionTokenList from '../account/ActionTokenList'
 import { walletBalanceForToken } from './DepositModal'
 import { floorToDecimal } from '../../utils/numbers'
+import { handleWalletConnect } from '../wallet/WalletListener'
 
 const UserSetupModal = ({ isOpen, onClose }: ModalProps) => {
   const { t } = useTranslation()
@@ -56,9 +57,8 @@ const UserSetupModal = ({ isOpen, onClose }: ModalProps) => {
   }
 
   const connectWallet = async () => {
-    const actions = mangoStore.getState().actions
     if (wallet) {
-      actions.handleWalletConnect(wallet)
+      handleWalletConnect(wallet)
     }
   }
 

components/wallet/ConnectWalletButton.tsx

@@ -6,6 +6,7 @@ import { useTranslation } from 'next-i18next'
 import uniqBy from 'lodash/uniqBy'
 import WalletSelect from './WalletSelect'
 import mangoStore from '../../store/state'
+import { handleWalletConnect } from './WalletListener'
 
 export const ConnectWalletButton: React.FC = () => {
   const { wallet, wallets, select } = useWallet()
@@ -32,12 +33,11 @@ export const ConnectWalletButton: React.FC = () => {
 
   const handleConnect = useCallback(() => {
     const set = mangoStore.getState().set
-    const actions = mangoStore.getState().actions
     if (wallet) {
       set((state) => {
         state.mangoAccount.loading = true
       })
-      actions.handleWalletConnect(wallet)
+      handleWalletConnect(wallet)
     }
   }, [wallet])
 

components/wallet/WalletListener.tsx

@@ -1,39 +1,56 @@
 import { useEffect } from 'react'
-import { useWallet } from '@solana/wallet-adapter-react'
+import { useWallet, Wallet } from '@solana/wallet-adapter-react'
 import mangoStore from '../../store/state'
-import { Wallet } from '@project-serum/anchor'
+import { Wallet as AnchorWallet } from '@project-serum/anchor'
+import { notify } from '../../utils/notifications'
 
-const WalletListener = () => {
-  const { wallet, connected, disconnecting } = useWallet()
+export const handleWalletConnect = (wallet: Wallet) => {
+  if (!wallet) {
+    return
+  }
+  const actions = mangoStore.getState().actions
 
-  useEffect(() => {
-    const actions = mangoStore.getState().actions
-    const set = mangoStore.getState().set
-    const mangoAccounts = mangoStore.getState().mangoAccounts.accounts
-    const loadingMangoAccounts = mangoStore.getState().mangoAccounts.loading
-
-    const onConnect = async () => {
-      if (!wallet) return
-      await actions.fetchMangoAccounts(wallet.adapter as unknown as Wallet)
-      if (mangoAccounts.length) {
-        actions.fetchMangoAccount(
-          wallet.adapter as unknown as Wallet,
-          mangoAccounts[0].accountNum
-        )
-      } else {
-        set((s) => {
-          s.mangoAccount.loading = false
+  wallet?.adapter
+    ?.connect()
+    .then(async () => {
+      await actions.connectMangoClientWithWallet(wallet)
+      onConnectFetchWalletData(wallet)
+    })
+    .catch((e) => {
+      if (e.name.includes('WalletLoadError')) {
+        notify({
+          title: `${wallet.adapter.name} Error`,
+          type: 'error',
+          description: `Please install ${wallet.adapter.name} and then reload this page.`,
         })
       }
-      actions.fetchProfilePicture(wallet.adapter as unknown as Wallet)
-      actions.fetchWalletTokens(wallet.adapter as unknown as Wallet)
-    }
-    console.log('connected', connected)
+    })
+}
 
-    if (connected) {
-      onConnect()
-    }
-  }, [wallet, connected])
+const onConnectFetchWalletData = async (wallet: Wallet) => {
+  if (!wallet) return
+  const actions = mangoStore.getState().actions
+  const set = mangoStore.getState().set
+  const mangoAccounts = mangoStore.getState().mangoAccounts.accounts
+  await actions.fetchMangoAccounts(wallet.adapter as unknown as AnchorWallet)
+
+  if (mangoAccounts.length) {
+    actions.fetchMangoAccount(
+      wallet.adapter as unknown as AnchorWallet,
+      mangoAccounts[0].accountNum
+    )
+  } else {
+    set((s) => {
+      s.mangoAccount.loading = false
+    })
+  }
+
+  actions.fetchProfilePicture(wallet.adapter as unknown as AnchorWallet)
+  actions.fetchWalletTokens(wallet.adapter as unknown as AnchorWallet)
+}
+
+const WalletListener = () => {
+  const { disconnecting } = useWallet()
 
   useEffect(() => {
     const setStore = mangoStore.getState().set

store/state.ts

@@ -153,7 +153,7 @@ export type MangoStore = {
     fetchJupiterTokens: () => Promise<void>
     fetchTradeHistory: (mangoAccountPk: string) => Promise<void>
     fetchWalletTokens: (wallet: AnchorWallet) => Promise<void>
-    handleWalletConnect: (wallet: Wallet) => Promise<void>
+    connectMangoClientWithWallet: (wallet: Wallet) => Promise<void>
     reloadAccount: () => Promise<void>
     reloadGroup: () => Promise<void>
   }
@@ -478,17 +478,11 @@ const mangoStore = create<MangoStore>(
               })
             })
         },
-        handleWalletConnect: async (wallet: Wallet) => {
-          if (!wallet) {
-            return
-          }
-
+        connectMangoClientWithWallet: async (wallet: Wallet) => {
           try {
-            await wallet?.adapter?.connect()
-
             const provider = new AnchorProvider(
               connection,
-              wallet as unknown as AnchorWallet,
+              wallet.adapter as unknown as AnchorWallet,
               options
             )
             provider.opts.skipPreflight = true