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

@@ -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);
 

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,

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',