Use the vip-api endpoint

components/AccountSelect.tsx

@@ -14,6 +14,7 @@ type AccountSelectProps = {
   onSelectAccount: (x) => any
   getBalance?: (x) => any
   hideAddress?: boolean
+  symbols?: Array<{ [key: string]: string }>
 }
 
 const AccountSelect = ({
@@ -22,6 +23,7 @@ const AccountSelect = ({
   onSelectAccount,
   getBalance,
   hideAddress = false,
+  symbols,
 }: AccountSelectProps) => {
   const { getTokenIndex } = useMarketList()
   const mintDecimals = useMangoStore((s) => s.selectedMangoGroup.mintDecimals)
@@ -50,6 +52,14 @@ const AccountSelect = ({
     setLoading(false)
   }
 
+  const symbolsForAccounts = accounts.map((a) =>
+    getSymbolForTokenMintAddress(a.account.mint.toString())
+  )
+
+  const missingTokens = Object.keys(symbols)
+    .filter((sym) => !symbolsForAccounts.includes(sym))
+    .join(', ')
+
   return (
     <div className={`relative inline-block w-full`}>
       <div className="flex justify-between pb-2">
@@ -109,7 +119,7 @@ const AccountSelect = ({
                       </div>
                     </div>
                   ) : (
-                    'No wallet addresses found'
+                    'Select a token address'
                   )}
                   {open ? (
                     <ChevronUpIcon className="h-5 w-5 ml-2 text-th-primary" />
@@ -171,6 +181,13 @@ const AccountSelect = ({
                   </Listbox.Option>
                 )
               })}
+              {symbols && accounts.length !== 3 ? (
+                <Listbox.Option value="">
+                  <div className="flex items-center justify-center text-th-fgd-1 p-2">
+                    Wallet token addresses not found for: {missingTokens}
+                  </div>
+                </Listbox.Option>
+              ) : null}
             </Listbox.Options>
           </>
         )}

components/DepositModal.tsx

@@ -1,5 +1,8 @@
 import React, { useMemo, useState } from 'react'
-import { nativeToUi } from '@blockworks-foundation/mango-client/lib/utils'
+import {
+  nativeToUi,
+  sleep,
+} from '@blockworks-foundation/mango-client/lib/utils'
 import Modal from './Modal'
 import Input from './Input'
 import AccountSelect from './AccountSelect'
@@ -57,7 +60,6 @@ const DepositModal = ({ isOpen, onClose }) => {
     const marginAccount = useMangoStore.getState().selectedMarginAccount.current
     const mangoGroup = useMangoStore.getState().selectedMangoGroup.current
     const wallet = useMangoStore.getState().wallet.current
-    console.log('handleDeposit', wallet, walletAccounts)
 
     if (!marginAccount && mangoGroup) {
       initMarginAccountAndDeposit(
@@ -69,9 +71,9 @@ const DepositModal = ({ isOpen, onClose }) => {
         selectedAccount.publicKey,
         Number(inputAmount)
       )
-        .then((_response: Array<any>) => {
+        .then(async (_response: Array<any>) => {
+          await sleep(1000)
           actions.fetchWalletBalances()
-          actions.fetchMangoGroup()
           actions.fetchMarginAccounts()
           setSubmitting(false)
           onClose()
@@ -97,9 +99,9 @@ const DepositModal = ({ isOpen, onClose }) => {
         selectedAccount.publicKey,
         Number(inputAmount)
       )
-        .then((_response: string) => {
+        .then(async (_response: string) => {
+          await sleep(1000)
           actions.fetchWalletBalances()
-          actions.fetchMangoGroup()
           actions.fetchMarginAccounts()
           setSubmitting(false)
           onClose()
@@ -124,6 +126,7 @@ const DepositModal = ({ isOpen, onClose }) => {
       </Modal.Header>
       <div className={`pb-6 px-8`}>
         <AccountSelect
+          symbols={symbols}
           accounts={depositAccounts}
           selectedAccount={selectedAccount}
           onSelectAccount={handleAccountSelect}

components/FeeDiscountsTable.tsx

@@ -13,6 +13,9 @@ const FeeDiscountsTable = () => {
   const { totalSrm, rates } = useSrmAccount()
   const connected = useMangoStore((s) => s.wallet.connected)
   const contributedSrm = useMangoStore((s) => s.wallet.contributedSrm)
+  const selectedMarginAccount = useMangoStore(
+    (s) => s.selectedMarginAccount.current
+  )
 
   const handleCloseDeposit = useCallback(() => {
     setShowDeposit(false)
@@ -26,7 +29,7 @@ const FeeDiscountsTable = () => {
     <div
       className={`flex flex-col items-center bg-th-bkg-1 py-6 mt-4 rounded-md`}
     >
-      {connected ? (
+      {connected && selectedMarginAccount ? (
         <div className="mb-6">
           <div className="bg-th-bkg-2 p-6 rounded">
             <div className="text-th-fgd-4 text-center">

components/WithdrawModal.tsx

@@ -184,6 +184,7 @@ const WithdrawModal = ({ isOpen, onClose }) => {
           selectedAccount={selectedAccount}
           onSelectAccount={handleSetSelectedAccount}
           getBalance={getMaxForSelectedAccount}
+          symbols={symbols}
         />
         <div className="flex items-center jusitfy-between text-th-fgd-1 mt-4 p-2 rounded-md bg-th-bkg-3">
           <div className="flex items-center text-fgd-1 pr-4">

hooks/useWallet.tsx

@@ -93,8 +93,7 @@ export default function useWallet() {
   useEffect(() => {
     if (!wallet) return
     wallet.on('connect', async () => {
-      console.log('connected')
-
+      console.log('connected wallet')
       setMangoStore((state) => {
         state.wallet.connected = true
       })
@@ -106,16 +105,14 @@ export default function useWallet() {
           '...' +
           wallet.publicKey.toString().substr(-5),
       })
-
-      actions.fetchWalletBalances()
-      actions.fetchMangoSrmAccounts()
       // wait for margin account before fetching trade history
       await actions.fetchMarginAccounts()
+      actions.fetchWalletBalances()
+      actions.fetchMangoSrmAccounts()
       actions.fetchTradeHistory()
     })
     wallet.on('disconnect', () => {
-      console.log('on disconnect')
-
+      console.log('disconnecting wallet')
       setMangoStore((state) => {
         state.wallet.connected = false
         state.marginAccounts = []

stores/useMangoStore.tsx

@@ -18,7 +18,7 @@ import { notify } from '../utils/notifications'
 export const ENDPOINTS: EndpointInfo[] = [
   {
     name: 'mainnet-beta',
-    url: 'https://api.mainnet-beta.solana.com/',
+    url: 'https://vip-api.mainnet-beta.solana.com/',
     websocket: 'https://api.mainnet-beta.solana.com/',
     custom: false,
   },
@@ -229,8 +229,10 @@ const useMangoStore = create<MangoStore>((set, get) => ({
       const mangoClient = get().mangoClient
       const programId = IDS[cluster].mango_program_id
       const set = get().set
+      console.log('BEFORE-----------------------------------')
 
       if (!wallet?.publicKey || !wallet.publicKey) return
+      console.log('AFTER======--------------')
 
       return mangoClient
         .getMarginAccountsForOwner(
@@ -240,6 +242,8 @@ const useMangoStore = create<MangoStore>((set, get) => ({
           wallet
         )
         .then((marginAccounts) => {
+          console.log('HERE=========================================')
+
           if (marginAccounts.length > 0) {
             set((state) => {
               state.marginAccounts = marginAccounts

utils/mango.tsx

@@ -389,9 +389,12 @@ export async function borrowAndWithdraw(
   const tokenBalance = marginAccount.getUiDeposit(mangoGroup, tokenIndex)
   const borrowQuantity = withdrawQuantity - tokenBalance
 
-  const nativeBorrowQuantity = uiToNative(
-    borrowQuantity,
-    mangoGroup.mintDecimals[tokenIndex]
+  // uiToNative() uses Math.round causing
+  // errors so we use Math.floor here instead
+  const nativeBorrowQuantity = new BN(
+    Math.floor(
+      borrowQuantity * Math.pow(10, mangoGroup.mintDecimals[tokenIndex])
+    )
   )
 
   const borrowInstruction = makeBorrowInstruction(