add a useMangoAccount hook

components/MangoProvider.tsx

@@ -4,6 +4,7 @@ import useInterval from '@components/shared/useInterval'
 import { PublicKey } from '@solana/web3.js'
 import { useRouter } from 'next/router'
 import { MangoAccount } from '@blockworks-foundation/mango-v4'
+import useMangoAccount from 'hooks/useMangoAccount'
 
 const rehydrateStore = async () => {
   const actions = mangoStore.getState().actions
@@ -16,7 +17,7 @@ const rehydrateStore = async () => {
 
 const HydrateStore = () => {
   const actions = mangoStore((s) => s.actions)
-  const mangoAccount = mangoStore((s) => s.mangoAccount.current)
+  const { mangoAccount } = useMangoAccount()
   const jupiterTokens = mangoStore((s) => s.jupiterTokens)
 
   useInterval(() => {

components/SideNav.tsx

@@ -22,12 +22,13 @@ import { HealthType } from '@blockworks-foundation/mango-v4'
 import { useWallet } from '@solana/wallet-adapter-react'
 import mangoStore from '@store/mangoStore'
 import HealthHeart from './account/HealthHeart'
+import useMangoAccount from 'hooks/useMangoAccount'
 
 const SideNav = ({ collapsed }: { collapsed: boolean }) => {
   const { t } = useTranslation('common')
   const { connected } = useWallet()
   const group = mangoStore.getState().group
-  const mangoAccount = mangoStore((s) => s.mangoAccount.current)
+  const { mangoAccount } = useMangoAccount()
   const router = useRouter()
   const { pathname } = router
 
@@ -173,7 +174,7 @@ const SideNav = ({ collapsed }: { collapsed: boolean }) => {
         </div>
       </div>
     </div>
-  );
+  )
 }
 
 export default SideNav
@@ -204,8 +205,8 @@ const MenuItem = ({
         shallow={true}
         className={`default-transition flex cursor-pointer px-4 focus:text-th-primary focus:outline-none md:hover:text-th-primary ${
           active ? 'text-th-primary' : 'text-th-fgd-1'
-        } ${hideIconBg ? 'py-1' : 'py-1.5 xl:py-2'}`}>
-
+        } ${hideIconBg ? 'py-1' : 'py-1.5 xl:py-2'}`}
+      >
         <div className="flex w-full items-center justify-between">
           <div className="flex items-center">
             <div
@@ -234,10 +235,9 @@ const MenuItem = ({
             <ArrowTopRightOnSquareIcon className="h-4 w-4" />
           ) : null}
         </div>
-
       </Link>
     </Tooltip>
-  );
+  )
 }
 
 export const ExpandableMenuItem = ({

components/TokenList.tsx

@@ -29,12 +29,13 @@ import IconDropMenu from './shared/IconDropMenu'
 import Tooltip from './shared/Tooltip'
 import { formatTokenSymbol } from 'utils/tokens'
 import RepayModal from './modals/RepayModal'
+import useMangoAccount from 'hooks/useMangoAccount'
 
 const TokenList = () => {
   const { t } = useTranslation(['common', 'token', 'trade'])
   const { connected } = useWallet()
   const [showZeroBalances, setShowZeroBalances] = useState(true)
-  const mangoAccount = mangoStore((s) => s.mangoAccount.current)
+  const { mangoAccount } = useMangoAccount()
   const spotBalances = mangoStore((s) => s.mangoAccount.spotBalances)
   const group = mangoStore((s) => s.group)
   const jupiterTokens = mangoStore((s) => s.jupiterTokens)
@@ -264,7 +265,7 @@ const MobileTokenListItem = ({ bank }: { bank: Bank }) => {
   const [showTokenDetails, setShowTokenDetails] = useState(false)
   const jupiterTokens = mangoStore((s) => s.jupiterTokens)
   const spotBalances = mangoStore((s) => s.mangoAccount.spotBalances)
-  const mangoAccount = mangoStore((s) => s.mangoAccount.current)
+  const { mangoAccount } = useMangoAccount()
   const totalInterestData = mangoStore(
     (s) => s.mangoAccount.stats.interestTotals.data
   )

components/TopBar.tsx

@@ -15,10 +15,11 @@ import MangoAccountsListModal from './modals/MangoAccountsListModal'
 import { useRouter } from 'next/router'
 import UserSetup from './UserSetup'
 import SolanaTps from './SolanaTps'
+import useMangoAccount from 'hooks/useMangoAccount'
 
 const TopBar = () => {
   const { t } = useTranslation('common')
-  const mangoAccount = mangoStore((s) => s.mangoAccount.current)
+  const { mangoAccount } = useMangoAccount()
   const { connected } = useWallet()
   const [isOnboarded, setIsOnboarded] = useLocalStorageState(IS_ONBOARDED_KEY)
   const [showUserSetup, setShowUserSetup] = useState(false)

components/UserSetup.tsx

@@ -14,6 +14,7 @@ import { useWallet } from '@solana/wallet-adapter-react'
 import mangoStore from '@store/mangoStore'
 import Decimal from 'decimal.js'
 import useLocalStorageState from 'hooks/useLocalStorageState'
+import useMangoAccount from 'hooks/useMangoAccount'
 import useSolBalance from 'hooks/useSolBalance'
 import { useTranslation } from 'next-i18next'
 import Image from 'next/image'
@@ -48,7 +49,7 @@ const UserSetup = ({ onClose }: { onClose: () => void }) => {
   const { t } = useTranslation(['common', 'onboarding', 'swap'])
   const group = mangoStore((s) => s.group)
   const { connected, select, wallet, wallets } = useWallet()
-  const mangoAccount = mangoStore((s) => s.mangoAccount.current)
+  const { mangoAccount } = useMangoAccount()
   const mangoAccountLoading = mangoStore((s) => s.mangoAccount.initialLoad)
   const [accountName, setAccountName] = useState('')
   const [loadingAccount, setLoadingAccount] = useState(false)

components/account/AccountActions.tsx

@@ -23,11 +23,12 @@ import { abbreviateAddress } from 'utils/formatting'
 import { HealthType, ZERO_I80F48 } from '@blockworks-foundation/mango-v4'
 import RepayModal from '@components/modals/RepayModal'
 import DelegateModal from '@components/modals/DelegateModal'
+import useMangoAccount from 'hooks/useMangoAccount'
 
 const AccountActions = () => {
   const { t } = useTranslation(['common', 'close-account'])
   const group = mangoStore((s) => s.group)
-  const mangoAccount = mangoStore((s) => s.mangoAccount.current)
+  const { mangoAccount } = useMangoAccount()
   const [showCloseAccountModal, setShowCloseAccountModal] = useState(false)
   const [showDepositModal, setShowDepositModal] = useState(false)
   const [showEditAccountModal, setShowEditAccountModal] = useState(false)

components/account/AccountPage.tsx

@@ -27,7 +27,7 @@ import { Transition } from '@headlessui/react'
 import AccountTabs from './AccountTabs'
 import SheenLoader from '../shared/SheenLoader'
 import AccountChart from './AccountChart'
-import useMangoAccount from '../shared/useMangoAccount'
+import useMangoAccount from '../../hooks/useMangoAccount'
 import Change from '../shared/Change'
 import Tooltip from '@components/shared/Tooltip'
 import { IS_ONBOARDED_KEY } from 'utils/constants'

components/account/AccountTabs.tsx

@@ -6,6 +6,7 @@ import SwapHistoryTable from '../swap/SwapHistoryTable'
 import ActivityFeed from './ActivityFeed'
 import UnsettledTrades from '@components/trade/UnsettledTrades'
 import { useUnsettledSpotBalances } from 'hooks/useUnsettledSpotBalances'
+import useMangoAccount from 'hooks/useMangoAccount'
 
 const TABS = [
   'balances',
@@ -17,7 +18,7 @@ const TABS = [
 const AccountTabs = () => {
   const [activeTab, setActiveTab] = useState('balances')
   const actions = mangoStore((s) => s.actions)
-  const mangoAccount = mangoStore((s) => s.mangoAccount.current)
+  const { mangoAccount } = useMangoAccount()
 
   const tabsWithCount: [string, number][] = useMemo(() => {
     return TABS.map((t) => [t, 0])

components/account/ActionTokenList.tsx

@@ -1,5 +1,6 @@
 import { Bank } from '@blockworks-foundation/mango-v4'
 import mangoStore from '@store/mangoStore'
+import useMangoAccount from 'hooks/useMangoAccount'
 import ActionTokenItem from './ActionTokenItem'
 
 type BankParams = {
@@ -29,7 +30,7 @@ const ActionTokenList = ({
   showDepositRates?: boolean
   valueKey: 'maxAmount' | 'walletBalance' | 'accountBalance' | 'borrowAmount'
 }) => {
-  const mangoAccount = mangoStore((s) => s.mangoAccount.current)
+  const { mangoAccount } = useMangoAccount()
 
   return mangoAccount ? (
     <>

components/account/ActivityFeed.tsx

@@ -16,6 +16,7 @@ import { useWallet } from '@solana/wallet-adapter-react'
 import mangoStore, { LiquidationFeedItem } from '@store/mangoStore'
 import dayjs from 'dayjs'
 import useLocalStorageState from 'hooks/useLocalStorageState'
+import useMangoAccount from 'hooks/useMangoAccount'
 import { useViewport } from 'hooks/useViewport'
 import { useTranslation } from 'next-i18next'
 import Image from 'next/legacy/image'
@@ -60,7 +61,7 @@ const ActivityFeed = () => {
   const activityFeed = mangoStore((s) => s.activityFeed.feed)
   const initialLoad = mangoStore((s) => s.activityFeed.initialLoad)
   const actions = mangoStore((s) => s.actions)
-  const mangoAccount = mangoStore((s) => s.mangoAccount.current)
+  const { mangoAccount } = useMangoAccount()
   const [showActivityDetail, setShowActivityDetail] = useState(null)
   const [filters, setFilters] = useState<Filters>(DEFAULT_FILTERS)
   const [advancedFilters, setAdvancedFilters] = useState<AdvancedFilters>(
@@ -152,7 +153,7 @@ const ActivityFilters = ({
   const { t } = useTranslation(['common', 'activity'])
   const actions = mangoStore((s) => s.actions)
   const loadActivityFeed = mangoStore((s) => s.activityFeed.loading)
-  const mangoAccount = mangoStore((s) => s.mangoAccount.current)
+  const { mangoAccount } = useMangoAccount()
   const [showAdvancedFiltersModal, setShowAdvancedFiltersModal] =
     useState(false)
   const { width } = useViewport()

components/account/ActivityFeedTable.tsx

@@ -12,6 +12,7 @@ import { useWallet } from '@solana/wallet-adapter-react'
 import mangoStore, { LiquidationFeedItem } from '@store/mangoStore'
 import dayjs from 'dayjs'
 import useLocalStorageState from 'hooks/useLocalStorageState'
+import useMangoAccount from 'hooks/useMangoAccount'
 import { useViewport } from 'hooks/useViewport'
 import { useTranslation } from 'next-i18next'
 import Image from 'next/legacy/image'
@@ -31,7 +32,7 @@ const ActivityFeedTable = ({
   params: string
 }) => {
   const { t } = useTranslation(['common', 'activity'])
-  const mangoAccount = mangoStore((s) => s.mangoAccount.current)
+  const { mangoAccount } = useMangoAccount()
   const actions = mangoStore((s) => s.actions)
   const loadActivityFeed = mangoStore((s) => s.activityFeed.loading)
   const [offset, setOffset] = useState(0)

components/account/MangoAccountSummary.tsx

@@ -11,12 +11,13 @@ import WithdrawModal from '../modals/WithdrawModal'
 import { useTranslation } from 'next-i18next'
 import { ArrowDownTrayIcon } from '@heroicons/react/20/solid'
 import { useWallet } from '@solana/wallet-adapter-react'
+import useMangoAccount from 'hooks/useMangoAccount'
 
 const MangoAccountSummary = () => {
   const { t } = useTranslation('common')
   const { connected } = useWallet()
   const group = mangoStore.getState().group
-  const mangoAccount = mangoStore((s) => s.mangoAccount.current)
+  const { mangoAccount } = useMangoAccount()
   const [showDepositModal, setShowDepositModal] = useState(false)
   const [showWithdrawModal, setShowWithdrawModal] = useState(false)
 

components/modals/AccountNameModal.tsx

@@ -8,10 +8,11 @@ import { ChangeEvent, useState } from 'react'
 import BounceLoader from '../shared/BounceLoader'
 import Input from '../forms/Input'
 import Label from '../forms/Label'
+import useMangoAccount from 'hooks/useMangoAccount'
 
 const AccountNameModal = ({ isOpen, onClose }: ModalProps) => {
   const { t } = useTranslation('common')
-  const mangoAccount = mangoStore((s) => s.mangoAccount.current)
+  const { mangoAccount } = useMangoAccount()
   const [loading, setLoading] = useState(false)
   const [name, setName] = useState(mangoAccount?.name || '')
 

components/modals/BorrowModal.tsx

@@ -27,6 +27,7 @@ import { getMaxWithdrawForBank } from '../swap/useTokenMax'
 import MaxAmountButton from '@components/shared/MaxAmountButton'
 import HealthImpactTokenChange from '@components/HealthImpactTokenChange'
 import Tooltip from '@components/shared/Tooltip'
+import useMangoAccount from 'hooks/useMangoAccount'
 
 interface BorrowModalProps {
   token?: string
@@ -45,6 +46,7 @@ function BorrowModal({ isOpen, onClose, token }: ModalCombinedProps) {
   const [showTokenList, setShowTokenList] = useState(false)
   const [sizePercentage, setSizePercentage] = useState('')
   const jupiterTokens = mangoStore((s) => s.jupiterTokens)
+  const { mangoAccount } = useMangoAccount()
 
   const bank = useMemo(() => {
     const group = mangoStore.getState().group
@@ -61,8 +63,6 @@ function BorrowModal({ isOpen, onClose, token }: ModalCombinedProps) {
     return logoURI
   }, [jupiterTokens, bank])
 
-  const mangoAccount = mangoStore((s) => s.mangoAccount.current)
-
   const tokenMax = useMemo(() => {
     const group = mangoStore.getState().group
     if (!group || !bank || !mangoAccount) return new Decimal(0)

components/modals/CreateAccountModal.tsx

@@ -1,16 +1,15 @@
 import { ModalProps } from '../../types/modal'
 import Modal from '../shared/Modal'
 import CreateAccountForm from '@components/account/CreateAccountForm'
-import mangoStore from '@store/mangoStore'
 import { useRouter } from 'next/router'
+import useMangoAccount from 'hooks/useMangoAccount'
 
 const CreateAccountModal = ({ isOpen, onClose }: ModalProps) => {
-  const mangoAccount = mangoStore((s) => s.mangoAccount.current)
+  const { mangoAccount } = useMangoAccount()
   const router = useRouter()
-  const { asPath } = useRouter()
 
   const handleClose = () => {
-    if (asPath !== '/') {
+    if (router.asPath !== '/') {
       router.push('/')
     }
     onClose()

components/modals/DelegateModal.tsx

@@ -8,12 +8,11 @@ import { ChangeEvent, useState } from 'react'
 import Input from '../forms/Input'
 import Label from '../forms/Label'
 import { PublicKey } from '@solana/web3.js'
+import useMangoAccount from 'hooks/useMangoAccount'
 
 const DelegateModal = ({ isOpen, onClose }: ModalProps) => {
   const { t } = useTranslation('common')
-  const mangoAccount = mangoStore((s) => s.mangoAccount.current)
-  const [loading, setLoading] = useState(false)
-  console.log('mad', mangoAccount?.delegate?.toString())
+  const { mangoAccount } = useMangoAccount()
 
   const [delegateAddress, setDelegateAddress] = useState(
     mangoAccount?.delegate?.toString() !== '11111111111111111111111111111111'
@@ -40,7 +39,6 @@ const DelegateModal = ({ isOpen, onClose }: ModalProps) => {
       })
     }
 
-    setLoading(true)
     try {
       const tx = await client.editMangoAccount(
         group,
@@ -48,8 +46,6 @@ const DelegateModal = ({ isOpen, onClose }: ModalProps) => {
         undefined,
         delegateAddress ? new PublicKey(delegateAddress) : undefined
       )
-
-      setLoading(false)
       onClose()
       notify({
         title: t('account-update-success'),
@@ -58,7 +54,6 @@ const DelegateModal = ({ isOpen, onClose }: ModalProps) => {
       })
       await actions.reloadMangoAccount()
     } catch (e: any) {
-      setLoading(false)
       notify({
         title: t('account-update-failed'),
         txid: e?.signature,

components/modals/MangoAccountsListModal.tsx

@@ -17,6 +17,7 @@ import { formatFixedDecimals } from 'utils/numbers'
 import CreateAccountForm from '@components/account/CreateAccountForm'
 import { EnterRightExitLeft } from '@components/shared/Transitions'
 import { useRouter } from 'next/router'
+import useMangoAccount from 'hooks/useMangoAccount'
 
 const MangoAccountsListModal = ({
   isOpen,
@@ -26,7 +27,7 @@ const MangoAccountsListModal = ({
   onClose: () => void
 }) => {
   const { t } = useTranslation('common')
-  const mangoAccount = mangoStore((s) => s.mangoAccount.current)
+  const { mangoAccount } = useMangoAccount()
   const mangoAccounts = mangoStore((s) => s.mangoAccounts)
   const actions = mangoStore((s) => s.actions)
   const group = mangoStore((s) => s.group)

components/modals/RepayModal.tsx

@@ -28,6 +28,7 @@ import HealthImpactTokenChange from '@components/HealthImpactTokenChange'
 import { walletBalanceForToken } from './DepositModal'
 import SolBalanceWarnings from '@components/shared/SolBalanceWarnings'
 import useSolBalance from 'hooks/useSolBalance'
+import useMangoAccount from 'hooks/useMangoAccount'
 
 interface RepayModalProps {
   token?: string
@@ -38,7 +39,7 @@ type ModalCombinedProps = RepayModalProps & ModalProps
 function RepayModal({ isOpen, onClose, token }: ModalCombinedProps) {
   const { t } = useTranslation('common')
   const group = mangoStore((s) => s.group)
-  const mangoAccount = mangoStore((s) => s.mangoAccount.current)
+  const { mangoAccount } = useMangoAccount()
   const [inputAmount, setInputAmount] = useState('')
   const [submitting, setSubmitting] = useState(false)
   const [selectedToken, setSelectedToken] = useState(token)

components/modals/WithdrawModal.tsx

@@ -27,6 +27,7 @@ import { withValueLimit } from '../swap/SwapForm'
 import { getMaxWithdrawForBank } from '../swap/useTokenMax'
 import MaxAmountButton from '@components/shared/MaxAmountButton'
 import HealthImpactTokenChange from '@components/HealthImpactTokenChange'
+import useMangoAccount from 'hooks/useMangoAccount'
 
 interface WithdrawModalProps {
   token?: string
@@ -45,6 +46,7 @@ function WithdrawModal({ isOpen, onClose, token }: ModalCombinedProps) {
   const [showTokenList, setShowTokenList] = useState(false)
   const [sizePercentage, setSizePercentage] = useState('')
   const jupiterTokens = mangoStore((s) => s.jupiterTokens)
+  const { mangoAccount } = useMangoAccount()
 
   const bank = useMemo(() => {
     const group = mangoStore.getState().group
@@ -61,8 +63,6 @@ function WithdrawModal({ isOpen, onClose, token }: ModalCombinedProps) {
     return logoURI
   }, [bank?.mint, jupiterTokens])
 
-  const mangoAccount = mangoStore((s) => s.mangoAccount.current)
-
   const tokenMax = useMemo(() => {
     if (!bank || !mangoAccount || !group) return new Decimal(0)
     const amount = getMaxWithdrawForBank(group, bank, mangoAccount)

components/shared/BalancesTable.tsx

@@ -2,6 +2,7 @@ import { Bank, Serum3Market } from '@blockworks-foundation/mango-v4'
 import { QuestionMarkCircleIcon } from '@heroicons/react/20/solid'
 import mangoStore from '@store/mangoStore'
 import Decimal from 'decimal.js'
+import useMangoAccount from 'hooks/useMangoAccount'
 import { useViewport } from 'hooks/useViewport'
 import { useTranslation } from 'next-i18next'
 import Image from 'next/legacy/image'
@@ -14,7 +15,7 @@ import { LinkButton } from './Button'
 
 const BalancesTable = () => {
   const { t } = useTranslation(['common', 'trade'])
-  const mangoAccount = mangoStore((s) => s.mangoAccount.current)
+  const { mangoAccount } = useMangoAccount()
   const spotBalances = mangoStore((s) => s.mangoAccount.spotBalances)
   const group = mangoStore((s) => s.group)
   const jupiterTokens = mangoStore((s) => s.jupiterTokens)
@@ -199,7 +200,7 @@ const BalancesTable = () => {
 export default BalancesTable
 
 const Balance = ({ bank }: { bank: Bank }) => {
-  const mangoAccount = mangoStore((s) => s.mangoAccount.current)
+  const { mangoAccount } = useMangoAccount()
   const selectedMarket = mangoStore((s) => s.selectedMarket.current)
   const { asPath } = useRouter()
 

components/shared/HealthImpact.tsx

@@ -4,6 +4,7 @@ import { useTranslation } from 'next-i18next'
 import { useMemo } from 'react'
 import mangoStore from '@store/mangoStore'
 import Tooltip from './Tooltip'
+import useMangoAccount from 'hooks/useMangoAccount'
 
 const HealthImpact = ({
   maintProjectedHealth,
@@ -14,7 +15,7 @@ const HealthImpact = ({
 }) => {
   const { t } = useTranslation('common')
   const group = mangoStore.getState().group
-  const mangoAccount = mangoStore((s) => s.mangoAccount.current)
+  const { mangoAccount } = useMangoAccount()
 
   const currentMaintHealth = useMemo(() => {
     if (!group || !mangoAccount) return 0

components/swap/LeverageSlider.tsx

@@ -1,4 +1,5 @@
 import Decimal from 'decimal.js'
+import useMangoAccount from 'hooks/useMangoAccount'
 import { ChangeEvent, useEffect, useMemo, useRef, useState } from 'react'
 import mangoStore from '../../store/mangoStore'
 import { getTokenInMax, useTokenMax } from './useTokenMax'
@@ -75,7 +76,7 @@ export const SwapLeverageSlider = ({
   onChange: (x: string) => void
   useMargin: boolean
 }) => {
-  const mangoAccount = mangoStore((s) => s.mangoAccount.current)
+  const { mangoAccount } = useMangoAccount()
   const { amountWithBorrow } = useTokenMax(useMargin)
 
   return (

components/swap/SwapForm.tsx

@@ -36,6 +36,7 @@ import { useTokenMax } from './useTokenMax'
 import MaxAmountButton from '@components/shared/MaxAmountButton'
 import HealthImpact from '@components/shared/HealthImpact'
 import { useWallet } from '@solana/wallet-adapter-react'
+import useMangoAccount from 'hooks/useMangoAccount'
 
 const MAX_DIGITS = 11
 export const withValueLimit = (values: NumberFormatValues): boolean => {
@@ -58,11 +59,11 @@ const SwapForm = () => {
   const set = mangoStore.getState().set
   const useMargin = mangoStore((s) => s.swap.margin)
   const slippage = mangoStore((s) => s.swap.slippage)
-  const mangoAccount = mangoStore((s) => s.mangoAccount.current)
   const inputTokenInfo = mangoStore((s) => s.swap.inputTokenInfo)
   const outputTokenInfo = mangoStore((s) => s.swap.outputTokenInfo)
   const jupiterTokens = mangoStore((s) => s.jupiterTokens)
   const [debouncedAmountIn] = useDebounce(amountInFormValue, 300)
+  const { mangoAccount } = useMangoAccount()
   const { connected } = useWallet()
 
   const amountIn: Decimal | null = useMemo(() => {

components/swap/SwapFormTokenList.tsx

@@ -13,6 +13,7 @@ import { useTranslation } from 'next-i18next'
 import { floorToDecimal } from '../../utils/numbers'
 import Decimal from 'decimal.js'
 import { getTokenInMax } from './useTokenMax'
+import useMangoAccount from 'hooks/useMangoAccount'
 
 const generateSearchTerm = (item: Token, searchValue: string) => {
   const normalizedSearchValue = searchValue.toLowerCase()
@@ -104,8 +105,8 @@ const SwapFormTokenList = ({
   // const jupiterTokens = mangoStore((s) => s.jupiterTokens)
   const inputBank = mangoStore((s) => s.swap.inputBank)
   const outputBank = mangoStore((s) => s.swap.outputBank)
-  const mangoAccount = mangoStore((s) => s.mangoAccount.current)
   const group = mangoStore((s) => s.group)
+  const { mangoAccount } = useMangoAccount()
 
   // const popularTokens = useMemo(() => {
   //   return tokens.filter((token) => {

components/swap/SwapHistoryTable.tsx

@@ -25,6 +25,7 @@ import { PREFERRED_EXPLORER_KEY } from 'utils/constants'
 import { EXPLORERS } from 'pages/settings'
 import Tooltip from '@components/shared/Tooltip'
 import { formatTokenSymbol } from 'utils/tokens'
+import useMangoAccount from 'hooks/useMangoAccount'
 
 const SwapHistoryTable = ({
   swapHistory,
@@ -35,7 +36,7 @@ const SwapHistoryTable = ({
 }) => {
   const { t } = useTranslation(['common', 'settings'])
   const jupiterTokens = mangoStore((s) => s.jupiterTokens)
-  const mangoAccount = mangoStore((s) => s.mangoAccount.current)
+  const { mangoAccount } = useMangoAccount()
   const [showSwapDetails, setSwapDetails] = useState('')
   const { width } = useViewport()
   const showTableView = width ? width > breakpoints.md : false

components/swap/SwapInfoTabs.tsx

@@ -5,11 +5,12 @@ import UnsettledTrades from '../trade/UnsettledTrades'
 import mangoStore from '@store/mangoStore'
 import SwapHistoryTable from './SwapHistoryTable'
 import { useUnsettledSpotBalances } from 'hooks/useUnsettledSpotBalances'
+import useMangoAccount from 'hooks/useMangoAccount'
 
 const SwapInfoTabs = () => {
   const [selectedTab, setSelectedTab] = useState('balances')
   const openOrders = mangoStore((s) => s.mangoAccount.openOrders)
-  const mangoAccount = mangoStore((s) => s.mangoAccount.current)
+  const { mangoAccount } = useMangoAccount()
   const swapHistory = mangoStore((s) => s.mangoAccount.stats.swapHistory.data)
   const loading = mangoStore((s) => s.mangoAccount.stats.swapHistory.loading)
   const unsettledSpotBalances = useUnsettledSpotBalances()

components/swap/useTokenMax.tsx

@@ -3,7 +3,7 @@ import Decimal from 'decimal.js'
 import { useMemo } from 'react'
 import mangoStore from '@store/mangoStore'
 import { floorToDecimal } from '../../utils/numbers'
-import useMangoAccount from '../shared/useMangoAccount'
+import useMangoAccount from '../../hooks/useMangoAccount'
 
 export const getMaxWithdrawForBank = (
   group: Group,

components/trade/OpenOrders.tsx

@@ -15,6 +15,7 @@ import { useWallet } from '@solana/wallet-adapter-react'
 import { PublicKey } from '@solana/web3.js'
 import mangoStore from '@store/mangoStore'
 import Decimal from 'decimal.js'
+import useMangoAccount from 'hooks/useMangoAccount'
 import { useViewport } from 'hooks/useViewport'
 import { useTranslation } from 'next-i18next'
 import { useCallback, useState } from 'react'
@@ -25,7 +26,7 @@ import MarketLogos from './MarketLogos'
 
 const OpenOrders = () => {
   const { t } = useTranslation(['common', 'trade'])
-  const mangoAccount = mangoStore((s) => s.mangoAccount.current)
+  const { mangoAccount } = useMangoAccount()
   const openOrders = mangoStore((s) => s.mangoAccount.openOrders)
   const [cancelId, setCancelId] = useState<string>('')
   const { width } = useViewport()

components/trade/PerpButtonGroup.tsx

@@ -1,14 +1,14 @@
 import { PerpMarket } from '@blockworks-foundation/mango-v4'
 import ButtonGroup from '@components/forms/ButtonGroup'
 import mangoStore from '@store/mangoStore'
+import useMangoAccount from 'hooks/useMangoAccount'
 import { useCallback, useMemo, useState } from 'react'
 import { notify } from 'utils/notifications'
 
 const PerpButtonGroup = () => {
   const side = mangoStore((s) => s.tradeForm.side)
   const selectedMarket = mangoStore((s) => s.selectedMarket.current)
-  const mangoAccount = mangoStore((s) => s.mangoAccount.current)
-  const tradeForm = mangoStore((s) => s.tradeForm)
+  const { mangoAccount } = useMangoAccount()
   const [sizePercentage, setSizePercentage] = useState('')
 
   const leverageMax = useMemo(() => {

components/trade/PerpSlider.tsx

@@ -2,13 +2,14 @@ import { PerpMarket, Serum3Market } from '@blockworks-foundation/mango-v4'
 import LeverageSlider from '@components/swap/LeverageSlider'
 import mangoStore from '@store/mangoStore'
 import Decimal from 'decimal.js'
+import useMangoAccount from 'hooks/useMangoAccount'
 import { useCallback, useMemo } from 'react'
 import { notify } from 'utils/notifications'
 
 const PerpSlider = () => {
   const side = mangoStore((s) => s.tradeForm.side)
   const selectedMarket = mangoStore((s) => s.selectedMarket.current)
-  const mangoAccount = mangoStore((s) => s.mangoAccount.current)
+  const { mangoAccount } = useMangoAccount()
   const tradeForm = mangoStore((s) => s.tradeForm)
 
   const leverageMax = useMemo(() => {

components/trade/SpotButtonGroup.tsx

@@ -1,14 +1,14 @@
 import { Serum3Market } from '@blockworks-foundation/mango-v4'
 import ButtonGroup from '@components/forms/ButtonGroup'
 import mangoStore from '@store/mangoStore'
+import useMangoAccount from 'hooks/useMangoAccount'
 import { useCallback, useMemo, useState } from 'react'
 import { notify } from 'utils/notifications'
 
 const SpotButtonGroup = () => {
   const side = mangoStore((s) => s.tradeForm.side)
   const selectedMarket = mangoStore((s) => s.selectedMarket.current)
-  const mangoAccount = mangoStore((s) => s.mangoAccount.current)
-  const tradeForm = mangoStore((s) => s.tradeForm)
+  const { mangoAccount } = useMangoAccount()
   const [sizePercentage, setSizePercentage] = useState('')
 
   const leverageMax = useMemo(() => {

components/trade/SpotSlider.tsx

@@ -1,13 +1,14 @@
 import { Serum3Market } from '@blockworks-foundation/mango-v4'
 import LeverageSlider from '@components/swap/LeverageSlider'
 import mangoStore from '@store/mangoStore'
+import useMangoAccount from 'hooks/useMangoAccount'
 import { useCallback, useMemo } from 'react'
 import { notify } from 'utils/notifications'
 
 const SpotSlider = () => {
   const side = mangoStore((s) => s.tradeForm.side)
   const selectedMarket = mangoStore((s) => s.selectedMarket.current)
-  const mangoAccount = mangoStore((s) => s.mangoAccount.current)
+  const { mangoAccount } = useMangoAccount()
   const tradeForm = mangoStore((s) => s.tradeForm)
 
   const leverageMax = useMemo(() => {

components/trade/UnsettledTrades.tsx

@@ -4,13 +4,13 @@ import { useCallback, useState } from 'react'
 import { PublicKey } from '@solana/web3.js'
 import { IconButton } from '@components/shared/Button'
 import { notify } from 'utils/notifications'
-import { useWallet } from '@solana/wallet-adapter-react'
 import { CheckIcon, LinkIcon } from '@heroicons/react/20/solid'
 import Tooltip from '@components/shared/Tooltip'
 import Loading from '@components/shared/Loading'
 import { useViewport } from 'hooks/useViewport'
 import { breakpoints } from 'utils/theme'
 import MarketLogos from './MarketLogos'
+import useMangoAccount from 'hooks/useMangoAccount'
 
 const UnsettledTrades = ({
   unsettledSpotBalances,
@@ -18,7 +18,7 @@ const UnsettledTrades = ({
   unsettledSpotBalances: any
 }) => {
   const { t } = useTranslation(['common', 'trade'])
-  const mangoAccount = mangoStore((s) => s.mangoAccount.current)
+  const { mangoAccount } = useMangoAccount()
   const group = mangoStore((s) => s.group)
   // const jupiterTokens = mangoStore((s) => s.jupiterTokens)
   const [settleMktAddress, setSettleMktAddress] = useState<string>('')

pages/token/[token].tsx

@@ -25,6 +25,7 @@ import Tooltip from '@components/shared/Tooltip'
 import ChartRangeButtons from '@components/shared/ChartRangeButtons'
 import dynamic from 'next/dynamic'
 import { LISTED_TOKENS } from 'utils/tokens'
+import useMangoAccount from 'hooks/useMangoAccount'
 const PriceChart = dynamic(() => import('@components/token/PriceChart'), {
   ssr: false,
 })
@@ -74,7 +75,7 @@ const Token: NextPage = () => {
   const router = useRouter()
   const { token } = router.query
   const group = mangoStore((s) => s.group)
-  const mangoAccount = mangoStore((s) => s.mangoAccount.current)
+  const { mangoAccount } = useMangoAccount()
   const jupiterTokens = mangoStore((s) => s.jupiterTokens)
   const coingeckoPrices = mangoStore((s) => s.coingeckoPrices.data)
   const [chartData, setChartData] = useState<{ prices: any[] } | null>(null)