From cb96bb1823a25d7c68b1c09d94cdef01cedf67b6 Mon Sep 17 00:00:00 2001
From: saml33 <slam.uke@gmail.com>
Date: Fri, 13 Jan 2023 12:43:20 +1100
Subject: [PATCH] allow tables to scroll horizontally

---
 components/shared/TableElements.tsx |   6 +-
 components/trade/TradeHistory.tsx   | 164 ++++++++++++++--------------
 2 files changed, 86 insertions(+), 84 deletions(-)

diff --git a/components/shared/TableElements.tsx b/components/shared/TableElements.tsx
index f4856774..b10b91d7 100644
--- a/components/shared/TableElements.tsx
+++ b/components/shared/TableElements.tsx
@@ -7,7 +7,11 @@ export const Table = ({
 }: {
   children: ReactNode
   className?: string
-}) => <table className={`m-0 min-w-full p-0 ${className}`}>{children}</table>
+}) => (
+  <div className="thin-scroll overflow-x-auto">
+    <table className={`m-0 min-w-full p-0 ${className}`}>{children}</table>
+  </div>
+)
 
 export const TrHead = ({
   children,
diff --git a/components/trade/TradeHistory.tsx b/components/trade/TradeHistory.tsx
index 9d6065e2..2e69833f 100644
--- a/components/trade/TradeHistory.tsx
+++ b/components/trade/TradeHistory.tsx
@@ -176,90 +176,88 @@ const TradeHistory = () => {
     (combinedTradeHistory.length || loadingTradeHistory) ? (
     <>
       {showTableView ? (
-        <div className="thin-scroll overflow-x-auto">
-          <Table>
-            <thead>
-              <TrHead>
-                <Th className="text-left">{t('market')}</Th>
-                <Th className="text-right">{t('trade:side')}</Th>
-                <Th className="text-right">{t('trade:size')}</Th>
-                <Th className="text-right">{t('price')}</Th>
-                <Th className="text-right">{t('value')}</Th>
-                <Th className="text-right">{t('fee')}</Th>
-                <Th className="text-right">{t('date')}</Th>
-              </TrHead>
-            </thead>
-            <tbody>
-              {combinedTradeHistory.map((trade: any, index: number) => {
-                let market
-                if ('market' in trade) {
-                  market = group.getSerum3MarketByExternalMarket(
-                    new PublicKey(trade.market)
-                  )
-                } else if ('perp_market' in trade) {
-                  market = group.getPerpMarketByName(trade.perp_market)
-                } else {
-                  market = selectedMarket
-                }
-                let makerTaker = trade.liquidity
-                if ('maker' in trade) {
-                  makerTaker = trade.maker ? 'Maker' : 'Taker'
-                  if (trade.taker === mangoAccount.publicKey.toString()) {
-                    makerTaker = 'Taker'
-                  }
-                }
-                const size = trade.size || trade.quantity
-                let fee
-                if (trade.fee_cost || trade.feeCost) {
-                  fee = trade.fee_cost || trade.feeCost
-                } else {
-                  fee =
-                    trade.maker === mangoAccount.publicKey.toString()
-                      ? trade.maker_fee
-                      : trade.taker_fee
-                }
-
-                return (
-                  <TrBody
-                    key={`${trade.signature || trade.marketIndex}${index}`}
-                    className="my-1 p-2"
-                  >
-                    <Td className="">
-                      <TableMarketName market={market} />
-                    </Td>
-                    <Td className="text-right">
-                      <SideBadge side={trade.side} />
-                    </Td>
-                    <Td className="text-right font-mono">{size}</Td>
-                    <Td className="text-right font-mono">
-                      {formatDecimal(trade.price)}
-                    </Td>
-                    <Td className="text-right font-mono">
-                      {formatFixedDecimals(trade.price * size, true, true)}
-                    </Td>
-                    <Td className="text-right">
-                      <span className="font-mono">{formatDecimal(fee)}</span>
-                      <p className="font-body text-xs text-th-fgd-4">
-                        {makerTaker}
-                      </p>
-                    </Td>
-
-                    <Td className="whitespace-nowrap text-right">
-                      {trade.block_datetime ? (
-                        <TableDateDisplay
-                          date={trade.block_datetime}
-                          showSeconds
-                        />
-                      ) : (
-                        'Recent'
-                      )}
-                    </Td>
-                  </TrBody>
+        <Table>
+          <thead>
+            <TrHead>
+              <Th className="text-left">{t('market')}</Th>
+              <Th className="text-right">{t('trade:side')}</Th>
+              <Th className="text-right">{t('trade:size')}</Th>
+              <Th className="text-right">{t('price')}</Th>
+              <Th className="text-right">{t('value')}</Th>
+              <Th className="text-right">{t('fee')}</Th>
+              <Th className="text-right">{t('date')}</Th>
+            </TrHead>
+          </thead>
+          <tbody>
+            {combinedTradeHistory.map((trade: any, index: number) => {
+              let market
+              if ('market' in trade) {
+                market = group.getSerum3MarketByExternalMarket(
+                  new PublicKey(trade.market)
                 )
-              })}
-            </tbody>
-          </Table>
-        </div>
+              } else if ('perp_market' in trade) {
+                market = group.getPerpMarketByName(trade.perp_market)
+              } else {
+                market = selectedMarket
+              }
+              let makerTaker = trade.liquidity
+              if ('maker' in trade) {
+                makerTaker = trade.maker ? 'Maker' : 'Taker'
+                if (trade.taker === mangoAccount.publicKey.toString()) {
+                  makerTaker = 'Taker'
+                }
+              }
+              const size = trade.size || trade.quantity
+              let fee
+              if (trade.fee_cost || trade.feeCost) {
+                fee = trade.fee_cost || trade.feeCost
+              } else {
+                fee =
+                  trade.maker === mangoAccount.publicKey.toString()
+                    ? trade.maker_fee
+                    : trade.taker_fee
+              }
+
+              return (
+                <TrBody
+                  key={`${trade.signature || trade.marketIndex}${index}`}
+                  className="my-1 p-2"
+                >
+                  <Td className="">
+                    <TableMarketName market={market} />
+                  </Td>
+                  <Td className="text-right">
+                    <SideBadge side={trade.side} />
+                  </Td>
+                  <Td className="text-right font-mono">{size}</Td>
+                  <Td className="text-right font-mono">
+                    {formatDecimal(trade.price)}
+                  </Td>
+                  <Td className="text-right font-mono">
+                    {formatFixedDecimals(trade.price * size, true, true)}
+                  </Td>
+                  <Td className="text-right">
+                    <span className="font-mono">{formatDecimal(fee)}</span>
+                    <p className="font-body text-xs text-th-fgd-4">
+                      {makerTaker}
+                    </p>
+                  </Td>
+
+                  <Td className="whitespace-nowrap text-right">
+                    {trade.block_datetime ? (
+                      <TableDateDisplay
+                        date={trade.block_datetime}
+                        showSeconds
+                      />
+                    ) : (
+                      'Recent'
+                    )}
+                  </Td>
+                </TrBody>
+              )
+            })}
+          </tbody>
+        </Table>
       ) : (
         <div>
           {combinedTradeHistory.map((trade: any, index: number) => {