sync accounts list with selected mango account

components/BorrowForm.tsx

@@ -10,7 +10,6 @@ import {
 import Decimal from 'decimal.js'
 import { useTranslation } from 'next-i18next'
 import Image from 'next/legacy/image'
-import { Wallet } from '@project-serum/anchor'
 import React, { useCallback, useMemo, useState } from 'react'
 import NumberFormat, {
   NumberFormatValues,
@@ -64,7 +63,7 @@ function BorrowForm({ onSuccess, token }: BorrowFormProps) {
   const [sizePercentage, setSizePercentage] = useState('')
   const { mangoTokens } = useJupiterMints()
   const { mangoAccount } = useMangoAccount()
-  const { connected, wallet } = useWallet()
+  const { connected, publicKey } = useWallet()
   const { handleConnect } = useEnhancedWallet()
 
   const bank = useMemo(() => {
@@ -130,7 +129,7 @@ function BorrowForm({ onSuccess, token }: BorrowFormProps) {
     const group = mangoStore.getState().group
     const mangoAccount = mangoStore.getState().mangoAccount.current
     const actions = mangoStore.getState().actions
-    if (!mangoAccount || !group) return
+    if (!mangoAccount || !group || !publicKey) return
     setSubmitting(true)
     try {
       const tx = await client.tokenWithdraw(
@@ -146,7 +145,7 @@ function BorrowForm({ onSuccess, token }: BorrowFormProps) {
         txid: tx,
       })
       await actions.reloadMangoAccount()
-      actions.fetchWalletTokens(wallet!.adapter as unknown as Wallet)
+      actions.fetchWalletTokens(publicKey)
       setSubmitting(false)
       onSuccess()
     } catch (e: any) {
@@ -159,7 +158,7 @@ function BorrowForm({ onSuccess, token }: BorrowFormProps) {
       })
       setSubmitting(false)
     }
-  }, [bank, inputAmount, onSuccess, wallet])
+  }, [bank, inputAmount, onSuccess, publicKey])
 
   const banks = useMemo(() => {
     if (mangoAccount) {

components/DepositForm.tsx

@@ -6,7 +6,6 @@ import {
   ExclamationCircleIcon,
   LinkIcon,
 } from '@heroicons/react/20/solid'
-import { Wallet } from '@project-serum/anchor'
 import { useWallet } from '@solana/wallet-adapter-react'
 import Decimal from 'decimal.js'
 import { useTranslation } from 'next-i18next'
@@ -121,7 +120,7 @@ function DepositForm({ onSuccess, token }: DepositFormProps) {
     return logoURI
   }, [bank?.mint, mangoTokens])
 
-  const { connected, wallet } = useWallet()
+  const { connected, publicKey } = useWallet()
   const walletTokens = mangoStore((s) => s.wallet.tokens)
 
   const tokenMax = useMemo(() => {
@@ -158,7 +157,7 @@ function DepositForm({ onSuccess, token }: DepositFormProps) {
     const actions = mangoStore.getState().actions
     const mangoAccount = mangoStore.getState().mangoAccount.current
 
-    if (!mangoAccount || !group || !bank) return
+    if (!mangoAccount || !group || !bank || !publicKey) return
 
     setSubmitting(true)
     try {
@@ -175,7 +174,7 @@ function DepositForm({ onSuccess, token }: DepositFormProps) {
       })
 
       await actions.reloadMangoAccount()
-      actions.fetchWalletTokens(wallet!.adapter as unknown as Wallet)
+      actions.fetchWalletTokens(publicKey)
       setSubmitting(false)
       onSuccess()
     } catch (e: any) {
@@ -188,7 +187,7 @@ function DepositForm({ onSuccess, token }: DepositFormProps) {
       console.error('Error depositing:', e)
       setSubmitting(false)
     }
-  }, [bank, wallet, inputAmount])
+  }, [bank, publicKey, inputAmount])
 
   // TODO extract into a shared hook for UserSetup.tsx
   const banks = useMemo(() => {

components/RepayForm.tsx

@@ -5,7 +5,6 @@ import {
   ExclamationCircleIcon,
   QuestionMarkCircleIcon,
 } from '@heroicons/react/20/solid'
-import { Wallet } from '@project-serum/anchor'
 import { useWallet } from '@solana/wallet-adapter-react'
 import Decimal from 'decimal.js'
 import { useTranslation } from 'next-i18next'
@@ -74,7 +73,7 @@ function RepayForm({ onSuccess, token }: RepayFormProps) {
     return logoURI
   }, [bank, mangoTokens])
 
-  const { connected, wallet } = useWallet()
+  const { connected, publicKey } = useWallet()
   const walletTokens = mangoStore((s) => s.wallet.tokens)
 
   const walletBalance = useMemo(() => {
@@ -124,7 +123,7 @@ function RepayForm({ onSuccess, token }: RepayFormProps) {
       const actions = mangoStore.getState().actions
       const mangoAccount = mangoStore.getState().mangoAccount.current
 
-      if (!mangoAccount || !group || !bank || !wallet) return
+      if (!mangoAccount || !group || !bank || !publicKey) return
       console.log('inputAmount: ', amount)
 
       setSubmitting(true)
@@ -142,7 +141,7 @@ function RepayForm({ onSuccess, token }: RepayFormProps) {
         })
 
         await actions.reloadMangoAccount()
-        actions.fetchWalletTokens(wallet.adapter as unknown as Wallet)
+        actions.fetchWalletTokens(publicKey)
         setSubmitting(false)
         onSuccess()
       } catch (e: any) {
@@ -156,7 +155,7 @@ function RepayForm({ onSuccess, token }: RepayFormProps) {
         setSubmitting(false)
       }
     },
-    [bank, wallet]
+    [bank, publicKey]
   )
 
   const banks = useMemo(() => {

components/account/AccountPage.tsx

@@ -39,6 +39,7 @@ import dayjs from 'dayjs'
 import { INITIAL_ANIMATION_SETTINGS } from '@components/settings/AnimationSettings'
 import { useViewport } from 'hooks/useViewport'
 import { breakpoints } from 'utils/theme'
+import useMangoGroup from 'hooks/useMangoGroup'
 
 export async function getStaticProps({ locale }: { locale: string }) {
   return {
@@ -55,7 +56,7 @@ export async function getStaticProps({ locale }: { locale: string }) {
 const AccountPage = () => {
   const { t } = useTranslation('common')
   // const { connected } = useWallet()
-  const group = mangoStore.getState().group
+  const { group } = useMangoGroup()
   const { mangoAccount, mangoAccountAddress } = useMangoAccount()
   const actions = mangoStore.getState().actions
   const loadPerformanceData = mangoStore(

components/modals/MangoAccountsListModal.tsx

@@ -96,6 +96,12 @@ const MangoAccountsListModal = ({
             ) : mangoAccounts.length ? (
               <div className="thin-scroll mt-4 max-h-[280px] space-y-2 overflow-y-auto">
                 {mangoAccounts.map((acc) => {
+                  if (
+                    mangoAccount &&
+                    acc.publicKey.equals(mangoAccount.publicKey)
+                  ) {
+                    acc = mangoAccount
+                  }
                   const accountValue = toUiDecimalsForQuote(
                     Number(acc.getEquity(group!))
                   ).toFixed(2)

components/modals/UserSetupModal.tsx

@@ -7,7 +7,6 @@ import {
   FireIcon,
   PencilIcon,
 } from '@heroicons/react/20/solid'
-import { Wallet } from '@project-serum/anchor'
 import { useWallet } from '@solana/wallet-adapter-react'
 import mangoStore from '@store/mangoStore'
 import Decimal from 'decimal.js'
@@ -59,7 +58,7 @@ const UserSetupModal = ({
 }) => {
   const { t } = useTranslation(['common', 'onboarding', 'swap'])
   const { group } = useMangoGroup()
-  const { connected, select, wallet, wallets } = useWallet()
+  const { connected, select, wallet, wallets, publicKey } = useWallet()
   const { mangoAccount } = useMangoAccount()
   const mangoAccountLoading = mangoStore((s) => s.mangoAccount.initialLoad)
   const [accountName, setAccountName] = useState('')
@@ -84,7 +83,7 @@ const UserSetupModal = ({
     const client = mangoStore.getState().client
     const group = mangoStore.getState().group
     const actions = mangoStore.getState().actions
-    if (!group || !wallet) return
+    if (!group || !publicKey) return
     setLoadingAccount(true)
     try {
       const tx = await client.createMangoAccount(
@@ -96,9 +95,9 @@ const UserSetupModal = ({
         8, // perpCount
         8 // perpOoCount
       )
-      actions.fetchMangoAccounts(wallet!.adapter as unknown as Wallet)
+      actions.fetchMangoAccounts(publicKey)
       if (tx) {
-        actions.fetchWalletTokens(wallet!.adapter as unknown as Wallet) // need to update sol balance after account rent
+        actions.fetchWalletTokens(publicKey) // need to update sol balance after account rent
         setShowSetupStep(3)
         notify({
           title: t('new-account-success'),
@@ -116,7 +115,7 @@ const UserSetupModal = ({
     } finally {
       setLoadingAccount(false)
     }
-  }, [accountName, wallet, t])
+  }, [accountName, publicKey, t])
 
   const handleDeposit = useCallback(async () => {
     const client = mangoStore.getState().client

components/wallet/ConnectedMenu.tsx

@@ -15,7 +15,6 @@ import { useViewport } from 'hooks/useViewport'
 import { breakpoints } from '../../utils/theme'
 import EditProfileModal from '@components/modals/EditProfileModal'
 import MangoAccountsListModal from '@components/modals/MangoAccountsListModal'
-import { Wallet as AnchorWallet } from '@project-serum/anchor'
 
 const ConnectedMenu = () => {
   const { t } = useTranslation('common')
@@ -33,10 +32,10 @@ const ConnectedMenu = () => {
   const isMobile = width ? width < breakpoints.md : false
 
   const onConnectFetchAccountData = async (wallet: Wallet) => {
-    if (!wallet) return
-    await actions.fetchMangoAccounts(wallet.adapter as unknown as AnchorWallet)
+    if (!wallet.adapter.publicKey) return
+    await actions.fetchMangoAccounts(wallet.adapter.publicKey)
     actions.fetchTourSettings(wallet.adapter.publicKey?.toString() as string)
-    actions.fetchWalletTokens(wallet.adapter as unknown as AnchorWallet)
+    actions.fetchWalletTokens(wallet.adapter.publicKey)
     actions.fetchTradeHistory()
   }
 

store/mangoStore.ts

@@ -319,7 +319,7 @@ export type MangoStore = {
     ) => Promise<void>
     fetchGroup: () => Promise<void>
     reloadMangoAccount: () => Promise<void>
-    fetchMangoAccounts: (wallet: Wallet) => Promise<void>
+    fetchMangoAccounts: (ownerPk: PublicKey) => Promise<void>
     fetchNfts: (connection: Connection, walletPk: PublicKey) => void
     fetchOpenOrders: (ma?: MangoAccount) => Promise<void>
     fetchPerpStats: () => void
@@ -331,7 +331,7 @@ export type MangoStore = {
     fetchTokenStats: () => void
     fetchTourSettings: (walletPk: string) => void
     fetchTradeHistory: () => Promise<void>
-    fetchWalletTokens: (wallet: Wallet) => Promise<void>
+    fetchWalletTokens: (walletPk: PublicKey) => Promise<void>
     connectMangoClientWithWallet: (wallet: WalletAdapter) => Promise<void>
     loadMarketFills: () => Promise<void>
     updateConnection: (url: string) => void
@@ -664,7 +664,7 @@ const mangoStore = create<MangoStore>()(
             })
           }
         },
-        fetchMangoAccounts: async (wallet) => {
+        fetchMangoAccounts: async (ownerPk: PublicKey) => {
           const set = get().set
           const actions = get().actions
           try {
@@ -676,7 +676,7 @@ const mangoStore = create<MangoStore>()(
 
             const mangoAccounts = await client.getMangoAccountsForOwner(
               group,
-              wallet.publicKey
+              ownerPk
             )
             const selectedAccountIsNotInAccountsList = mangoAccounts.find(
               (x) =>
@@ -889,14 +889,14 @@ const mangoStore = create<MangoStore>()(
             })
           }
         },
-        fetchWalletTokens: async (wallet: Wallet) => {
+        fetchWalletTokens: async (walletPk: PublicKey) => {
           const set = get().set
           const connection = get().connection
 
-          if (wallet.publicKey) {
+          if (walletPk) {
             const token = await getTokenAccountsByOwnerWithWrappedSol(
               connection,
-              wallet.publicKey
+              walletPk
             )
 
             set((state) => {