mobile trade balances

components/trade/TradeBalances.tsx

@@ -1,9 +1,11 @@
 import { QuestionMarkCircleIcon } from '@heroicons/react/20/solid'
 import mangoStore from '@store/mangoStore'
+import { useViewport } from 'hooks/useViewport'
 import { useTranslation } from 'next-i18next'
 import Image from 'next/image'
 import { useMemo } from 'react'
 import { formatDecimal } from 'utils/numbers'
+import { breakpoints } from 'utils/theme'
 
 const Balances = () => {
   const { t } = useTranslation(['common', 'trade'])
@@ -11,6 +13,8 @@ const Balances = () => {
   const spotBalances = mangoStore((s) => s.mangoAccount.spotBalances)
   const group = mangoStore((s) => s.group)
   const jupiterTokens = mangoStore((s) => s.jupiterTokens)
+  const { width } = useViewport()
+  const showTableView = width ? width > breakpoints.md : false
 
   const banks = useMemo(() => {
     if (group) {
@@ -41,7 +45,7 @@ const Balances = () => {
     return []
   }, [group, mangoAccount])
 
-  return (
+  return showTableView ? (
     <table className="min-w-full">
       <thead>
         <tr>
@@ -97,6 +101,61 @@ const Balances = () => {
         })}
       </tbody>
     </table>
+  ) : (
+    <>
+      {banks.map(({ key, value }) => {
+        const bank = value[0]
+
+        let logoURI
+        if (jupiterTokens.length) {
+          logoURI = jupiterTokens.find(
+            (t) => t.address === bank.mint.toString()
+          )!.logoURI
+        }
+
+        return (
+          <div
+            className="flex items-center justify-between border-t border-th-bkg-3 p-4"
+            key={key}
+          >
+            <div className="flex items-center">
+              <div className="mr-2.5 flex flex-shrink-0 items-center">
+                {logoURI ? (
+                  <Image alt="" width="20" height="20" src={logoURI} />
+                ) : (
+                  <QuestionMarkCircleIcon className="h-7 w-7 text-th-fgd-3" />
+                )}
+              </div>
+              <span>{bank.name}</span>
+            </div>
+            <div className="text-right">
+              <p className="mb-0.5 font-mono text-sm text-th-fgd-1">
+                {mangoAccount
+                  ? formatDecimal(
+                      mangoAccount.getTokenBalanceUi(bank),
+                      bank.mintDecimals
+                    )
+                  : 0}
+              </p>
+              <div className="flex space-x-3">
+                <p className="text-xs text-th-fgd-4">
+                  {t('trade:in-orders')}:{' '}
+                  <span className="font-mono text-th-fgd-3">
+                    {spotBalances[bank.mint.toString()]?.inOrders || 0.0}
+                  </span>
+                </p>
+                <p className="text-xs text-th-fgd-4">
+                  {t('trade:unsettled')}:{' '}
+                  <span className="font-mono text-th-fgd-3">
+                    {spotBalances[bank.mint.toString()]?.unsettled || 0.0}
+                  </span>
+                </p>
+              </div>
+            </div>
+          </div>
+        )
+      })}
+    </>
   )
 }
 

components/trade/UnsettledTrades.tsx

@@ -1,6 +1,6 @@
 import mangoStore from '@store/mangoStore'
 import { useTranslation } from 'next-i18next'
-import { useCallback, useMemo, useState } from 'react'
+import { useCallback, useState } from 'react'
 import { PublicKey } from '@solana/web3.js'
 import { IconButton } from '@components/shared/Button'
 import { notify } from 'utils/notifications'
@@ -73,7 +73,6 @@ const UnsettledTrades = ({
               const market = group.getSerum3MarketByPk(
                 new PublicKey(mktAddress)
               )
-              console.log('market', mktAddress)
               const base = market?.name.split('/')[0]
               const quote = market?.name.split('/')[1]