sort deposit withdraw tokens by usdc value

components/account/ActionTokenList.tsx

@@ -16,33 +16,39 @@ const ActionTokenList = ({
   sortByKey,
   showBorrowRates,
   showDepositRates,
+  valueKey,
 }: {
   banks: BankParams[]
   onSelect: (x: string) => void
-  sortByKey: 'maxAmount' | 'walletBalance' | 'accountBalance'
+  sortByKey: 'maxAmount' | 'walletBalanceValue' | 'accountBalanceValue'
   showBorrowRates?: boolean
   showDepositRates?: boolean
+  valueKey: 'maxAmount' | 'walletBalance' | 'accountBalance'
 }) => {
   const mangoAccount = mangoStore((s) => s.mangoAccount.current)
 
   return mangoAccount ? (
     <>
       <div className="space-y-2">
-        {banks?.length
-          ? banks
-              .filter((b: BankParams) => !!b)
-              .sort((a: any, b: any) => b[sortByKey] - a[sortByKey])
-              .map((bank: any) => (
-                <ActionTokenItem
-                  bank={bank.value[0]}
-                  customValue={bank[sortByKey]}
-                  key={bank.value[0].name}
-                  onSelect={onSelect}
-                  showBorrowRates={showBorrowRates}
-                  showDepositRates={showDepositRates}
-                />
-              ))
-          : null}
+        {banks?.length ? (
+          banks
+            .filter((b: BankParams) => !!b)
+            .sort((a: any, b: any) => b[sortByKey] - a[sortByKey])
+            .map((bank: any) => (
+              <ActionTokenItem
+                bank={bank.value[0]}
+                customValue={bank[valueKey]}
+                key={bank.value[0].name}
+                onSelect={onSelect}
+                showBorrowRates={showBorrowRates}
+                showDepositRates={showDepositRates}
+              />
+            ))
+        ) : (
+          <div className="mt-4 rounded border border-th-bkg-2 py-3 text-center text-th-fgd-4">
+            Nothing to select
+          </div>
+        )}
       </div>
     </>
   ) : null

components/modals/BorrowModal.tsx

@@ -178,6 +178,7 @@ function BorrowModal({ isOpen, onClose, token }: ModalCombinedProps) {
           onSelect={handleSelectToken}
           showBorrowRates
           sortByKey="maxAmount"
+          valueKey="maxAmount"
         />
       </EnterBottomExitBottom>
       <FadeInFadeOut

components/modals/DepositModal.tsx

@@ -142,6 +142,7 @@ function DepositModal({ isOpen, onClose, token }: ModalCombinedProps) {
     onClose()
   }
 
+  // TODO extract into a shared hook for UserSetupModal.tsx
   const banks = useMemo(() => {
     const banks = group?.banksMapByName
       ? Array.from(group?.banksMapByName, ([key, value]) => {
@@ -153,6 +154,7 @@ function DepositModal({ isOpen, onClose, token }: ModalCombinedProps) {
               walletBalance.maxAmount,
               walletBalance.maxDecimals
             ),
+            walletBalanceValue: walletBalance.maxAmount * value[0]?.uiPrice,
           }
         })
       : []
@@ -182,7 +184,8 @@ function DepositModal({ isOpen, onClose, token }: ModalCombinedProps) {
             banks={banks}
             onSelect={handleSelectToken}
             showDepositRates
-            sortByKey="walletBalance"
+            sortByKey="walletBalanceValue"
+            valueKey="walletBalance"
           />
         </EnterBottomExitBottom>
         <FadeInFadeOut

components/modals/UserSetupModal.tsx

@@ -147,8 +147,9 @@ const UserSetupModal = ({ isOpen, onClose }: ModalProps) => {
     }
   }, [mangoAccount, showSetupStep, onClose])
 
+  // TODO extract into a shared hook for DepositModal.tsx
   const banks = useMemo(() => {
-    return group?.banksMapByName
+    const banks = group?.banksMapByName
       ? Array.from(group?.banksMapByName, ([key, value]) => {
           const walletBalance = walletBalanceForToken(walletTokens, key)
           return {
@@ -158,9 +159,11 @@ const UserSetupModal = ({ isOpen, onClose }: ModalProps) => {
               walletBalance.maxAmount,
               walletBalance.maxDecimals
             ),
+            walletBalanceValue: walletBalance.maxAmount * value[0]?.uiPrice,
           }
         })
       : []
+    return banks.filter((b) => b.walletBalance > 0)
   }, [group?.banksMapByName, walletTokens])
 
   return (
@@ -426,7 +429,8 @@ const UserSetupModal = ({ isOpen, onClose }: ModalProps) => {
                       banks={banks}
                       onSelect={setDepositToken}
                       showDepositRates
-                      sortByKey="walletBalance"
+                      sortByKey="walletBalanceValue"
+                      valueKey="walletBalance"
                     />
                   </div>
                 ) : null}

components/modals/WithdrawModal.tsx

@@ -118,6 +118,10 @@ function WithdrawModal({ isOpen, onClose, token }: ModalCombinedProps) {
               key,
               value,
               accountBalance: accountBalance ? accountBalance : 0,
+              accountBalanceValue:
+                accountBalance && value[0]?.uiPrice
+                  ? accountBalance * value[0]?.uiPrice
+                  : 0,
             }
           })
         : []
@@ -145,7 +149,8 @@ function WithdrawModal({ isOpen, onClose, token }: ModalCombinedProps) {
           <ActionTokenList
             banks={withdrawBank}
             onSelect={handleSelectToken}
-            sortByKey="accountBalance"
+            sortByKey="accountBalanceValue"
+            valueKey="accountBalance"
           />
         </EnterBottomExitBottom>
         <FadeInFadeOut