From 1427b557281522bf5185643f170f40d4ae3a5fb9 Mon Sep 17 00:00:00 2001
From: Jared Vu <jaredvu@gmail.com>
Date: Tue, 21 Nov 2023 19:10:23 -0500
Subject: [PATCH] MarketsTable: Sort OpenInterest by notional, Display 24h
 volume as fiat value (#158)

* Fix Sort by notional, Display fiat for volume

* OpenInterest notional on top
---
 src/layout/Footer/FooterDesktop.tsx |  2 +-
 src/views/ExchangeBillboards.tsx    |  2 +-
 src/views/tables/MarketsTable.tsx   | 10 ++++------
 3 files changed, 6 insertions(+), 8 deletions(-)

diff --git a/src/layout/Footer/FooterDesktop.tsx b/src/layout/Footer/FooterDesktop.tsx
index b3456be..7a5f6fe 100644
--- a/src/layout/Footer/FooterDesktop.tsx
+++ b/src/layout/Footer/FooterDesktop.tsx
@@ -132,7 +132,7 @@ Styled.StatusDot = styled.div<{ exchangeStatus: ExchangeStatus }>`
 Styled.FooterButton = styled(Button)`
   --button-height: 1.5rem;
   --button-radius: 0.25rem;
-  --button-backgroundColor: var(--color-layer-2);
+  --button-backgroundColor: transparent;
   --button-border: none;
   --button-textColor: var(--color-text-0);
 
diff --git a/src/views/ExchangeBillboards.tsx b/src/views/ExchangeBillboards.tsx
index ffac0ac..d6ce345 100644
--- a/src/views/ExchangeBillboards.tsx
+++ b/src/views/ExchangeBillboards.tsx
@@ -60,7 +60,7 @@ export const ExchangeBillboards: React.FC<ExchangeBillboardsProps> = ({
         },
         {
           key: 'trades',
-          labelKey: STRING_KEYS.TRADES,
+          labelKey: isTablet ? STRING_KEYS.TRADES_24H : STRING_KEYS.TRADES,
           value: totalTrades24H || undefined,
           type: isTablet ? OutputType.CompactNumber : OutputType.Number,
           subLabelKey: !isTablet && STRING_KEYS.TRADES_LABEL,
diff --git a/src/views/tables/MarketsTable.tsx b/src/views/tables/MarketsTable.tsx
index b7614b8..807fa45 100644
--- a/src/views/tables/MarketsTable.tsx
+++ b/src/views/tables/MarketsTable.tsx
@@ -134,20 +134,18 @@ export const MarketsTable = ({ className }: { className?: string }) => {
             },
             {
               columnKey: 'openInterest',
-              getCellValue: (row) => row.openInterest,
+              getCellValue: (row) => row.openInterestUSDC,
               label: stringGetter({ key: STRING_KEYS.OPEN_INTEREST }),
               renderCell: (row) => (
                 <TableCell stacked>
+                  <Output type={OutputType.Fiat} value={row.openInterestUSDC} />
+
                   <Output
                     fractionDigits={LARGE_TOKEN_DECIMALS}
                     type={OutputType.Number}
                     value={row.openInterest}
                     tag={row.asset?.id}
                   />
-                  <Output
-                    type={OutputType.Fiat}
-                    value={MustBigNumber(row.openInterest).times(MustBigNumber(row.oraclePrice))}
-                  />
                 </TableCell>
               ),
             },
@@ -155,7 +153,7 @@ export const MarketsTable = ({ className }: { className?: string }) => {
               columnKey: 'volume24H',
               getCellValue: (row) => row.volume24H,
               label: stringGetter({ key: STRING_KEYS.VOLUME_24H }),
-              renderCell: (row) => <Output type={OutputType.Number} value={row.volume24H} />,
+              renderCell: (row) => <Output type={OutputType.Fiat} value={row.volume24H} />,
             },
             {
               columnKey: 'trades24H',