add sol balance hook

components/UserSetup.tsx

@@ -15,6 +15,7 @@ import { useWallet } from '@solana/wallet-adapter-react'
 import mangoStore from '@store/mangoStore'
 import Decimal from 'decimal.js'
 import useLocalStorageState from 'hooks/useLocalStorageState'
+import useSolBalance from 'hooks/useSolBalance'
 import { useTranslation } from 'next-i18next'
 import Image from 'next/image'
 import {
@@ -65,14 +66,7 @@ const UserSetup = ({ onClose }: { onClose: () => void }) => {
   const [, setIsOnboarded] = useLocalStorageState(IS_ONBOARDED_KEY)
   const [showMaxSolWarning, setShowMaxSolWarning] = useState(false)
   const { handleConnect } = useEnhancedWallet()
-
+  const solBalance = useSolBalance()
-  const solBalance = useMemo(() => {
-    return (
-      walletTokens.find((t) =>
-        t.mint.equals(TokenInstructions.WRAPPED_SOL_MINT)
-      )?.uiAmount || 0
-    )
-  }, [walletTokens])
 
   useEffect(() => {
     const maxSolDeposit = solBalance - MIN_SOL_BALANCE

components/account/CreateAccountForm.tsx

@@ -12,6 +12,7 @@ import { MangoAccount } from '@blockworks-foundation/mango-v4'
 import { ArrowLeftIcon } from '@heroicons/react/20/solid'
 import { TokenInstructions } from '@project-serum/serum'
 import { MIN_SOL_BALANCE } from 'utils/constants'
+import useSolBalance from 'hooks/useSolBalance'
 
 const getNextAccountNumber = (accounts: MangoAccount[]): number => {
   if (accounts.length > 1) {
@@ -39,15 +40,7 @@ const CreateAccountForm = ({
   const [loading, setLoading] = useState(false)
   const [name, setName] = useState('')
   const { wallet } = useWallet()
-  const walletTokens = mangoStore((s) => s.wallet.tokens)
+  const solBalance = useSolBalance()
-
-  const solBalance = useMemo(() => {
-    return (
-      walletTokens.find((t) =>
-        t.mint.equals(TokenInstructions.WRAPPED_SOL_MINT)
-      )?.uiAmount || 0
-    )
-  }, [walletTokens])
 
   const handleNewAccount = async () => {
     const client = mangoStore.getState().client

components/modals/DepositModal.tsx

@@ -34,6 +34,7 @@ import MaxAmountButton from '@components/shared/MaxAmountButton'
 import Tooltip from '@components/shared/Tooltip'
 import HealthImpactTokenChange from '@components/HealthImpactTokenChange'
 import { TokenInstructions } from '@project-serum/serum'
+import useSolBalance from 'hooks/useSolBalance'
 
 interface DepositModalProps {
   token?: string
@@ -92,14 +93,7 @@ function DepositModal({ isOpen, onClose, token }: ModalCombinedProps) {
 
   const { wallet } = useWallet()
   const walletTokens = mangoStore((s) => s.wallet.tokens)
-
+  const solBalance = useSolBalance()
-  const solBalance = useMemo(() => {
-    return (
-      walletTokens.find((t) =>
-        t.mint.equals(TokenInstructions.WRAPPED_SOL_MINT)
-      )?.uiAmount || 0
-    )
-  }, [walletTokens])
 
   useEffect(() => {
     const maxSolDeposit = solBalance - MIN_SOL_BALANCE

components/shared/Notification.tsx

@@ -19,6 +19,7 @@ import {
 import useLocalStorageState from 'hooks/useLocalStorageState'
 import { EXPLORERS } from 'pages/settings'
 import { useTranslation } from 'next-i18next'
+import useSolBalance from 'hooks/useSolBalance'
 
 const setMangoStore = mangoStore.getState().set
 
@@ -32,6 +33,7 @@ const NotificationList = () => {
     'bottom-left'
   )
   const [mounted, setMounted] = useState(false)
+  const solBalance = useSolBalance()
 
   // if a notification is shown with {"InstructionError":[0,{"Custom":1}]} then
   // add a notification letting the user know they may not have enough SOL
@@ -43,9 +45,6 @@ const NotificationList = () => {
       const notEnoughSolNotification = notifications.find(
         (n) => n.title && n.title.includes(notEnoughSoLMessage)
       )
-      const solBalance = walletTokens.find((t) =>
-        t.mint.equals(TokenInstructions.WRAPPED_SOL_MINT)
-      )?.uiAmount
 
       if (
         !notEnoughSolNotification &&
@@ -59,7 +58,7 @@ const NotificationList = () => {
         })
       }
     }
-  }, [notifications, walletTokens])
+  }, [notifications, walletTokens, solBalance])
 
   const clearAll = useCallback(() => {
     setMangoStore((s) => {

hooks/useSolBalance.tsx

@@ -0,0 +1,15 @@
+import { TokenInstructions } from '@project-serum/serum'
+import mangoStore from '@store/mangoStore'
+import { useMemo } from 'react'
+
+export default function useSolBalance() {
+  const walletTokens = mangoStore((s) => s.wallet.tokens)
+  const solBalance = useMemo(() => {
+    return (
+      walletTokens.find((t) =>
+        t.mint.equals(TokenInstructions.WRAPPED_SOL_MINT)
+      )?.uiAmount || 0
+    )
+  }, [walletTokens])
+  return solBalance
+}