add notification when sol balance is low and when connecting wallet; disable connect button until walletadapter is loaded

components/EmptyState.tsx

@@ -1,4 +1,5 @@
 import { FunctionComponent, ReactNode } from 'react'
+import useMangoStore from '../stores/useMangoStore'
 import Button from './Button'
 
 interface EmptyStateProps {
@@ -16,6 +17,8 @@ const EmptyState: FunctionComponent<EmptyStateProps> = ({
   desc,
   title,
 }) => {
+  const wallet = useMangoStore((s) => s.wallet.current)
+
   return (
     <div className="flex flex-col items-center text-th-fgd-1 px-4 pb-2 rounded-lg">
       <div className="w-6 h-6 mb-1 text-th-primary">{icon}</div>
@@ -30,7 +33,7 @@ const EmptyState: FunctionComponent<EmptyStateProps> = ({
         </p>
       ) : null}
       {buttonText && onClickButton ? (
-        <Button className="mt-2" onClick={onClickButton}>
+        <Button className="mt-2" onClick={onClickButton} disabled={!wallet}>
           {buttonText}
         </Button>
       ) : null}

components/FloatingElement.tsx

@@ -50,7 +50,7 @@ const FloatingElement: FunctionComponent<FloatingElementProps> = ({
               <EmptyState
                 buttonText="Connect"
                 icon={<LinkIcon />}
-                onClickButton={() => wallet.connect()}
+                onClickButton={() => (wallet ? wallet.connect() : null)}
                 title="Connect Wallet"
               />
             </div>

components/NewAccount.tsx

@@ -74,11 +74,12 @@ const NewAccount: FunctionComponent<NewAccountProps> = ({
 
         onAccountCreation(response)
       })
-      .catch((err) => {
+      .catch((e) => {
         setSubmitting(false)
-        console.error(err)
+        console.error(e)
         notify({
           title: 'Could not perform init margin account and deposit operation',
+          description: e.message,
           type: 'error',
         })
         onAccountCreation()

components/Notification.tsx

@@ -6,10 +6,43 @@ import {
   XCircleIcon,
 } from '@heroicons/react/outline'
 import useMangoStore from '../stores/useMangoStore'
+import { notify } from '../utils/notifications'
 
 const NotificationList = () => {
   const setMangoStore = useMangoStore((s) => s.set)
   const notifications = useMangoStore((s) => s.notifications)
+  const walletTokens = useMangoStore((s) => s.wallet.tokens)
+
+  // if a notification is shown with {"InstructionError":[0,{"Custom":1}]} then
+  // add a notification letting the user know they may not have enough SOL
+  useEffect(() => {
+    if (notifications.length) {
+      const notEnoughSoLMessage =
+        'You may not have enough SOL for this transaction'
+      const customErrorNotification = notifications.find(
+        (n) => n.description && n.description.includes('"Custom":1')
+      )
+      const notEnoughSolNotification = notifications.find(
+        (n) => n.title && n.title.includes(notEnoughSoLMessage)
+      )
+      const solBalance = walletTokens.find(
+        (t) => t.config.symbol === 'SOL'
+      )?.uiBalance
+
+      if (
+        customErrorNotification &&
+        solBalance < 0.04 &&
+        !notEnoughSolNotification
+      ) {
+        notify({
+          title: notEnoughSoLMessage,
+          type: 'info',
+        })
+      }
+      console.log('notifications', notifications)
+      console.log('walletTokens', walletTokens)
+    }
+  }, [notifications, walletTokens])
 
   useEffect(() => {
     if (notifications.length > 0) {
@@ -61,10 +94,10 @@ const Notification = ({ type, title, description, txid }) => {
             <CheckCircleIcon className={`text-th-green h-7 w-7 mr-1`} />
           ) : null}
           {type === 'info' && (
-            <XCircleIcon className={`text-th-primary h-7 w-7 mr-1`} />
+            <InformationCircleIcon className={`text-th-primary h-7 w-7 mr-1`} />
           )}
           {type === 'error' && (
-            <InformationCircleIcon className={`text-th-red h-7 w-7 mr-1`} />
+            <XCircleIcon className={`text-th-red h-7 w-7 mr-1`} />
           )}
         </div>
         <div className={`ml-2 w-0 flex-1`}>

components/TradeForm.tsx

@@ -292,7 +292,7 @@ export default function TradeForm() {
         type: 'error',
       })
     } finally {
-      sleep(500).then(() => {
+      sleep(1000).then(() => {
         actions.fetchMangoAccounts()
         actions.updateOpenOrders()
       })

hooks/useOrderbook.tsx

@@ -15,7 +15,7 @@ export function useAccountData(publicKey) {
 }
 
 function decodeBook(market, accInfo: AccountInfo<Buffer>): number[][] {
-  if (market && accInfo) {
+  if (market && accInfo?.data) {
     const depth = 20
     if (market instanceof Market) {
       const book = SpotOrderBook.decode(market, accInfo.data)

hooks/useWallet.tsx

@@ -96,7 +96,10 @@ export default function useWallet() {
         state.wallet.connected = true
       })
       // set connected before fetching data
-
+      notify({
+        title: 'Connecting wallet...',
+        type: 'info',
+      })
       await actions.fetchMangoAccounts()
       actions.fetchTradeHistory()
       actions.fetchWalletTokens()

stores/useMangoStore.tsx

@@ -248,14 +248,15 @@ const useMangoStore = create<MangoStore>((set, get) => ({
       }
     },
     async fetchMangoAccounts() {
+      const set = get().set
       const mangoGroup = get().selectedMangoGroup.current
       const wallet = get().wallet.current
-      const set = get().set
+      const walletPk = wallet?.publicKey
 
-      if (!wallet?.publicKey || !wallet.publicKey) return
+      if (!walletPk) return
 
       return mangoClient
-        .getMangoAccountsForOwner(mangoGroup, wallet.publicKey, true)
+        .getMangoAccountsForOwner(mangoGroup, walletPk, true)
         .then((mangoAccounts) => {
           if (mangoAccounts.length > 0) {
             const sortedAccounts = mangoAccounts