filter and sort token list

components/TokenList.tsx

@@ -1,33 +1,66 @@
 import { Bank, MangoAccount } from '@blockworks-foundation/mango-v4'
 import { Transition } from '@headlessui/react'
 import { ChevronDownIcon, DotsHorizontalIcon } from '@heroicons/react/solid'
+import { useWallet } from '@solana/wallet-adapter-react'
 import { useTranslation } from 'next-i18next'
 import Image from 'next/image'
-import { Fragment, useState } from 'react'
+import { Fragment, useEffect, useMemo, useState } from 'react'
 import { useViewport } from '../hooks/useViewport'
 
 import mangoStore from '../store/state'
 import { formatDecimal, numberFormat } from '../utils/numbers'
 import { breakpoints } from '../utils/theme'
+import Switch from './forms/Switch'
 import BorrowModal from './modals/BorrowModal'
 import DepositModal from './modals/DepositModal'
 import WithdrawModal from './modals/WithdrawModal'
-import Button, { IconButton, LinkButton } from './shared/Button'
+import { IconButton, LinkButton } from './shared/Button'
 import ContentBox from './shared/ContentBox'
 import { UpTriangle } from './shared/DirectionTriangles'
 import IconDropMenu from './shared/IconDropMenu'
 
 const TokenList = () => {
   const { t } = useTranslation('common')
+  const { connected } = useWallet()
   const [showTokenDetails, setShowTokenDetails] = useState('')
+  const [showZeroBalances, setShowZeroBalances] = useState(true)
   const mangoAccount = mangoStore((s) => s.mangoAccount)
   const group = mangoStore((s) => s.group)
   const { width } = useViewport()
   const showTableView = width ? width > breakpoints.md : false
 
-  const banks = group?.banksMap
+  const banks = useMemo(() => {
-    ? Array.from(group?.banksMap, ([key, value]) => ({ key, value }))
+    if (group?.banksMap) {
-    : []
+      const rawBanks = Array.from(group?.banksMap, ([key, value]) => ({
+        key,
+        value,
+      }))
+      return mangoAccount
+        ? showZeroBalances
+          ? rawBanks.sort(
+              (a, b) =>
+                Math.abs(mangoAccount?.getUi(b.value) * Number(b.value.price)) -
+                Math.abs(mangoAccount?.getUi(a.value) * Number(a.value.price))
+            )
+          : rawBanks
+              .filter((b) => mangoAccount?.getUi(b.value) !== 0)
+              .sort(
+                (a, b) =>
+                  Math.abs(
+                    mangoAccount?.getUi(b.value) * Number(b.value.price)
+                  ) -
+                  Math.abs(mangoAccount?.getUi(a.value) * Number(a.value.price))
+              )
+        : rawBanks
+    }
+    return []
+  }, [showZeroBalances, group, mangoAccount])
+
+  useEffect(() => {
+    if (!connected) {
+      setShowZeroBalances(true)
+    }
+  }, [connected])
 
   const handleShowTokenDetails = (name: string) => {
     showTokenDetails ? setShowTokenDetails('') : setShowTokenDetails(name)
@@ -35,7 +68,17 @@ const TokenList = () => {
 
   return (
     <ContentBox hideBorder hidePadding>
-      <h2>{t('tokens')}</h2>
+      <div className="flex items-center justify-between">
+        <h2>{t('tokens')}</h2>
+        <Switch
+          className="text-th-fgd-3"
+          checked={showZeroBalances}
+          disabled={!mangoAccount}
+          onChange={() => setShowZeroBalances(!showZeroBalances)}
+        >
+          {t('show-zero-balances')}
+        </Switch>
+      </div>
       {showTableView ? (
         <table className="min-w-full">
           <thead>
@@ -319,23 +362,20 @@ const ActionsMenu = ({
         >
           {t('deposit')}
         </LinkButton>
-        {mangoAccount && mangoAccount.getUi(bank) > 0 ? (
+        <LinkButton
-          <LinkButton
+          className="w-full text-left"
-            className="w-full text-left"
+          disabled={!mangoAccount}
-            disabled={!mangoAccount}
+          onClick={() => handleShowActionModals(bank.name, 'withdraw')}
-            onClick={() => handleShowActionModals(bank.name, 'withdraw')}
+        >
-          >
+          {t('withdraw')}
-            {t('withdraw')}
+        </LinkButton>
-          </LinkButton>
+        <LinkButton
-        ) : (
+          className="w-full text-left"
-          <LinkButton
+          disabled={!mangoAccount}
-            className="w-full text-left"
+          onClick={() => handleShowActionModals(bank.name, 'borrow')}
-            disabled={!mangoAccount}
+        >
-            onClick={() => handleShowActionModals(bank.name, 'borrow')}
+          {t('borrow')}
-          >
+        </LinkButton>
-            {t('borrow')}
-          </LinkButton>
-        )}
         <LinkButton
           className="w-full text-left"
           disabled={!mangoAccount}

components/TradeSimplePage.tsx

@@ -9,7 +9,7 @@ const TradeSimplePage = () => {
   const outputTokenInfo = mangoStore((s) => s.outputTokenInfo)
 
   return (
-    <div className="grid grid-cols-12 gap-6">
+    <div className="grid grid-cols-12 gap-x-6 gap-y-8">
       <div className="col-span-12 space-y-12 md:col-span-6 lg:col-span-8">
         <SwapTokenChart
           inputTokenId={inputTokenInfo?.extensions?.coingeckoId}

components/forms/Switch.tsx

@@ -5,6 +5,7 @@ interface SwitchProps {
   className?: string
   onChange: (x: boolean) => void
   children: ReactNode
+  disabled?: boolean
 }
 
 const Switch: FunctionComponent<SwitchProps> = ({
@@ -12,6 +13,7 @@ const Switch: FunctionComponent<SwitchProps> = ({
   className = '',
   children,
   onChange,
+  disabled,
 }) => {
   const handleClick = () => {
     onChange(!checked)
@@ -26,10 +28,11 @@ const Switch: FunctionComponent<SwitchProps> = ({
           checked ? 'bg-th-primary' : 'bg-th-bkg-button'
         } relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full 
         border-2 border-transparent transition-colors duration-200 ease-in-out 
-        focus:outline-none`}
+        focus:outline-none ${disabled ? 'opacity-60' : ''}`}
         role="switch"
         aria-checked={checked}
         onClick={handleClick}
+        disabled={disabled}
       >
         <span className="sr-only">{children}</span>
         <span

public/locales/en/common.json

@@ -36,6 +36,7 @@
    "select-token": "Select Token",
    "sell": "Sell",
    "settings": "Settings",
+   "show-zero-balances": "Show Zero Balances",
    "spanish": "Español",
    "stats": "Stats",
    "theme": "Theme",

public/locales/es/common.json

@@ -36,6 +36,7 @@
    "select-token": "Select Token",
    "sell": "Sell",
    "settings": "Settings",
+   "show-zero-balances": "Show Zero Balances",
    "spanish": "Español",
    "stats": "Stats",
    "theme": "Theme",

public/locales/zh/common.json

@@ -36,6 +36,7 @@
     "select-token": "Select Token",
     "sell": "Sell",
     "settings": "Settings",
+    "show-zero-balances": "Show Zero Balances",
     "spanish": "Español",
     "stats": "Stats",
     "theme": "Theme",

public/locales/zh_tw/common.json

@@ -36,6 +36,7 @@
   "select-token": "Select Token",
   "sell": "Sell",
   "settings": "Settings",
+  "show-zero-balances": "Show Zero Balances",
   "spanish": "Español",
   "stats": "Stats",
   "theme": "Theme",