mobile unsettled

components/shared/TabButtons.tsx

@@ -29,7 +29,7 @@ const TabButtons: FunctionComponent<TabButtonsProps> = ({
       {values.map(([label, count], i) => (
         <div className={fillWidth ? 'flex-1' : ''} key={label + i}>
           <button
-            className={`default-transition flex h-12 w-full items-center justify-center px-6 font-bold ${
+            className={`default-transition flex h-12 w-full items-center justify-center px-4 font-bold md:px-6 ${
               rounded ? 'rounded-md' : 'rounded-none'
             } ${showBorders ? 'border-r border-th-bkg-3' : ''} ${
               label === activeValue

components/trade/UnsettledTrades.tsx

@@ -8,6 +8,8 @@ import { useWallet } from '@solana/wallet-adapter-react'
 import { CheckIcon, LinkIcon } from '@heroicons/react/20/solid'
 import Tooltip from '@components/shared/Tooltip'
 import Loading from '@components/shared/Loading'
+import { useViewport } from 'hooks/useViewport'
+import { breakpoints } from 'utils/theme'
 
 const UnsettledTrades = ({
   unsettledSpotBalances,
@@ -19,6 +21,8 @@ const UnsettledTrades = ({
   const group = mangoStore((s) => s.group)
   // const jupiterTokens = mangoStore((s) => s.jupiterTokens)
   const [settleMktAddress, setSettleMktAddress] = useState<string>('')
+  const { width } = useViewport()
+  const showTableView = width ? width > breakpoints.md : false
 
   const handleSettleFunds = useCallback(async (mktAddress: string) => {
     const client = mangoStore.getState().client
@@ -58,6 +62,7 @@ const UnsettledTrades = ({
 
   return connected ? (
     Object.values(unsettledSpotBalances).flat().length ? (
+      showTableView ? (
         <table className="min-w-full">
           <thead>
             <tr>
@@ -117,6 +122,55 @@ const UnsettledTrades = ({
             )}
           </tbody>
         </table>
+      ) : (
+        <div className="pb-20">
+          {Object.entries(unsettledSpotBalances).map(
+            ([mktAddress, balance]) => {
+              const market = group.getSerum3MarketByPk(
+                new PublicKey(mktAddress)
+              )
+              const base = market?.name.split('/')[0]
+              const quote = market?.name.split('/')[1]
+
+              return (
+                <div
+                  key={mktAddress}
+                  className="flex items-center justify-between border-b border-th-bkg-3 p-4"
+                >
+                  <div className="flex items-center">
+                    <span>{market ? market.name : ''}</span>
+                  </div>
+                  <div className="flex items-center space-x-3">
+                    {unsettledSpotBalances[mktAddress].base ? (
+                      <span className="font-mono text-sm">
+                        {unsettledSpotBalances[mktAddress].base}{' '}
+                        <span className="font-body tracking-wide text-th-fgd-4">
+                          {base}
+                        </span>
+                      </span>
+                    ) : null}
+                    {unsettledSpotBalances[mktAddress].quote ? (
+                      <span className="font-mono text-sm">
+                        {unsettledSpotBalances[mktAddress].quote}{' '}
+                        <span className="font-body tracking-wide text-th-fgd-4">
+                          {quote}
+                        </span>
+                      </span>
+                    ) : null}
+                    <IconButton onClick={() => handleSettleFunds(mktAddress)}>
+                      {settleMktAddress === mktAddress ? (
+                        <Loading className="h-4 w-4" />
+                      ) : (
+                        <CheckIcon className="h-4 w-4" />
+                      )}
+                    </IconButton>
+                  </div>
+                </div>
+              )
+            }
+          )}
+        </div>
+      )
     ) : (
       <div className="flex flex-col items-center p-8">
         <p>{t('trade:no-unsettled')}</p>