From 8d4d86cbb8e09dceb6c6e2082130edf0eded08df Mon Sep 17 00:00:00 2001
From: Jared Vu <jaredvu@gmail.com>
Date: Fri, 3 May 2024 09:59:33 -0700
Subject: [PATCH] refactor(market-revamp): sum staking rewards, update compact
 tables, reduce sparkline api call (#498)

* refactor(market-styles): refactor Styled object

* refactor(output): add slotLeft

* refact(markets-revamp): use abacus sparklines, update compact tables, etc.
---
 src/components/Output.tsx                 |   4 +
 src/hooks/useMarketsData.ts               |   7 +-
 src/hooks/usePerpetualMarketSparklines.ts |   9 +-
 src/hooks/usePerpetualMarketsStats.ts     |  14 +-
 src/pages/markets/Markets.tsx             | 110 ++++-----
 src/views/ExchangeBillboards.tsx          | 141 +++++------
 src/views/MarketsStats.tsx                | 140 +++++------
 src/views/tables/MarketsCompactTable.tsx  | 281 +++++++++++-----------
 src/views/tables/MarketsTable.tsx         |   8 +-
 9 files changed, 347 insertions(+), 367 deletions(-)

diff --git a/src/components/Output.tsx b/src/components/Output.tsx
index 6a9b82135..6c54b14ec 100644
--- a/src/components/Output.tsx
+++ b/src/components/Output.tsx
@@ -60,6 +60,7 @@ type ElementProps = {
   isLoading?: boolean;
   fractionDigits?: number | null;
   showSign?: ShowSign;
+  slotLeft?: React.ReactNode;
   slotRight?: React.ReactNode;
   useGrouping?: boolean;
   roundingMode?: BigNumber.RoundingMode;
@@ -90,6 +91,7 @@ export const Output = ({
   isLoading,
   fractionDigits,
   showSign = ShowSign.Negative,
+  slotLeft,
   slotRight,
   useGrouping = true,
   withSubscript = false,
@@ -122,6 +124,7 @@ export const Output = ({
           title={`${value ?? ''}${tag ? ` ${tag}` : ''}`}
           className={className}
         >
+          {slotLeft}
           {value?.toString() ?? null}
 
           {tag && <Tag>{tag}</Tag>}
@@ -251,6 +254,7 @@ export const Output = ({
           withParentheses={withParentheses}
           withBaseFont={withBaseFont}
         >
+          {slotLeft}
           {sign && <Styled.Sign>{sign}</Styled.Sign>}
           {hasValue &&
             {
diff --git a/src/hooks/useMarketsData.ts b/src/hooks/useMarketsData.ts
index 6c58dace5..2c1e00c7d 100644
--- a/src/hooks/useMarketsData.ts
+++ b/src/hooks/useMarketsData.ts
@@ -53,10 +53,6 @@ export const useMarketsData = (
   const allPerpetualMarkets = useSelector(getPerpetualMarkets, shallowEqual) || {};
   const allAssets = useSelector(getAssets, shallowEqual) || {};
   const sevenDaysSparklineData = usePerpetualMarketSparklines();
-  const oneDaySparklineData = usePerpetualMarketSparklines({
-    period: 'ONE_DAY',
-    refetchInterval: undefined,
-  });
 
   const markets = useMemo(() => {
     return Object.values(allPerpetualMarkets)
@@ -86,13 +82,12 @@ export const useMarketsData = (
           tickSizeDecimals: marketData.configs?.tickSizeDecimals,
           isNew,
           listingDate,
-          oneDaySparkline: oneDaySparklineData?.[marketData.id] ?? [],
           ...marketData,
           ...marketData.perpetual,
           ...marketData.configs,
         };
       }) as MarketData[];
-  }, [allPerpetualMarkets, allAssets, oneDaySparklineData, sevenDaysSparklineData]);
+  }, [allPerpetualMarkets, allAssets, sevenDaysSparklineData]);
 
   const filteredMarkets = useMemo(() => {
     const filtered = markets.filter(filterFunctions[filter]);
diff --git a/src/hooks/usePerpetualMarketSparklines.ts b/src/hooks/usePerpetualMarketSparklines.ts
index 7276d413a..28aade0de 100644
--- a/src/hooks/usePerpetualMarketSparklines.ts
+++ b/src/hooks/usePerpetualMarketSparklines.ts
@@ -9,22 +9,19 @@ import { useDydxClient } from './useDydxClient';
 
 const POLLING_MS = timeUnits.hour;
 export const SEVEN_DAY_SPARKLINE_ENTRIES = 42;
-/**
- * Number of elements returned by the service in case the period is one day, specifically the timeframe is one hour
- */
 export const ONE_DAY_SPARKLINE_ENTRIES = 24;
 
-interface UsePerpetualMarketSparklinesProps {
+type UsePerpetualMarketSparklinesProps = {
   period?: 'ONE_DAY' | 'SEVEN_DAYS';
   refetchInterval?: number;
-}
+};
 
 export const usePerpetualMarketSparklines = (props: UsePerpetualMarketSparklinesProps = {}) => {
   const { period = 'SEVEN_DAYS', refetchInterval = POLLING_MS } = props;
   const { getPerpetualMarketSparklines, compositeClient } = useDydxClient();
 
   const { data } = useQuery<PerpetualMarketSparklineResponse | undefined>({
-    enabled: !!compositeClient,
+    enabled: Boolean(compositeClient),
     queryKey: ['perpetualMarketSparklines', period],
     queryFn: () => {
       try {
diff --git a/src/hooks/usePerpetualMarketsStats.ts b/src/hooks/usePerpetualMarketsStats.ts
index 8e6971df4..330c5489c 100644
--- a/src/hooks/usePerpetualMarketsStats.ts
+++ b/src/hooks/usePerpetualMarketsStats.ts
@@ -38,7 +38,11 @@ export const usePerpetualMarketsStats = () => {
     refetchOnWindowFocus: false,
   });
 
-  const feeEarned = useMemo(() => data?.[0].total, [data]);
+  const feesEarned = useMemo(() => {
+    if (!data) return null;
+
+    return data.reduce((acc, { total }) => acc + total, 0);
+  }, [data]);
 
   const stats = useMemo(() => {
     let volume24HUSDC = 0;
@@ -53,11 +57,11 @@ export const usePerpetualMarketsStats = () => {
     return {
       volume24HUSDC,
       openInterestUSDC,
-      feeEarned,
+      feesEarned,
     };
-  }, [markets, feeEarned]);
+  }, [markets, feesEarned]);
 
-  const feeEarnedChart = useMemo(
+  const feesEarnedChart = useMemo(
     () =>
       data?.map((point, x) => ({
         x: x + 1,
@@ -68,6 +72,6 @@ export const usePerpetualMarketsStats = () => {
 
   return {
     stats,
-    feeEarnedChart,
+    feesEarnedChart,
   };
 };
diff --git a/src/pages/markets/Markets.tsx b/src/pages/markets/Markets.tsx
index 771b23f99..4b44ecbd5 100644
--- a/src/pages/markets/Markets.tsx
+++ b/src/pages/markets/Markets.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 
 import { useNavigate } from 'react-router-dom';
-import styled, { AnyStyledComponent } from 'styled-components';
+import styled from 'styled-components';
 
 import { ButtonAction } from '@/constants/buttons';
 import { STRING_KEYS } from '@/constants/localization';
@@ -57,71 +57,65 @@ const Markets = () => {
   );
 };
 
-const Styled: Record<string, AnyStyledComponent> = {};
-
-Styled.Page = styled.div`
-  ${layoutMixins.contentContainerPage}
-`;
-
-Styled.ContentSectionHeader = styled(ContentSectionHeader)`
-  margin-top: 1rem;
-  margin-bottom: 0.25rem;
-
-  h3 {
-    font: var(--font-extra-medium);
-  }
-
-  @media ${breakpoints.tablet} {
-    margin-top: 0;
-    padding: 1.25rem 1.5rem 0;
+const Styled = {
+  Page: styled.div`
+    ${layoutMixins.contentContainerPage}
+  `,
+  ContentSectionHeader: styled(ContentSectionHeader)`
+    margin-top: 1rem;
+    margin-bottom: 0.25rem;
 
     h3 {
       font: var(--font-extra-medium);
     }
-  }
-`;
 
-Styled.HeaderSection = styled.section`
-  ${layoutMixins.contentSectionDetached}
+    @media ${breakpoints.tablet} {
+      margin-top: 0;
+      padding: 1.25rem 1.5rem 0;
+
+      h3 {
+        font: var(--font-extra-medium);
+      }
+    }
+  `,
+  HeaderSection: styled.section`
+    ${layoutMixins.contentSectionDetached}
 
-  margin-bottom: 2rem;
+    margin-bottom: 2rem;
 
-  @media ${breakpoints.tablet} {
-    ${layoutMixins.flexColumn}
+    @media ${breakpoints.tablet} {
+      ${layoutMixins.flexColumn}
+      gap: 1rem;
+
+      margin-bottom: 1rem;
+    }
+  `,
+  MarketsTable: styled(MarketsTable)`
+    ${layoutMixins.contentSectionAttached}
+  `,
+  MarketsStats: styled(MarketsStats)<{
+    showHighlights?: boolean;
+  }>`
+    ${({ showHighlights }) => !showHighlights && 'display: none;'}
+  `,
+  Highlights: styled.label`
+    align-items: center;
     gap: 1rem;
+    margin-bottom: 1.25rem;
+    display: none;
+    cursor: pointer;
 
-    margin-bottom: 1rem;
-  }
-`;
-
-Styled.MarketsTable = styled(MarketsTable)`
-  ${layoutMixins.contentSectionAttached}
-`;
-
-Styled.MarketsStats = styled(MarketsStats)<{
-  showHighlights?: boolean;
-}>`
-  ${({ showHighlights }) => !showHighlights && 'display: none;'}
-`;
-
-Styled.Highlights = styled.label`
-  align-items: center;
-  gap: 1rem;
-  margin-bottom: 1.25rem;
-  display: none;
-  cursor: pointer;
-
-  @media ${breakpoints.desktopSmall} {
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
-
-  @media ${breakpoints.tablet} {
-    padding-left: 1.5rem;
-    padding-right: 1.5rem;
-    margin-bottom: 0;
-    display: flex;
-  }
-`;
+    @media ${breakpoints.desktopSmall} {
+      padding-left: 1rem;
+      padding-right: 1rem;
+    }
 
+    @media ${breakpoints.tablet} {
+      padding-left: 1.5rem;
+      padding-right: 1.5rem;
+      margin-bottom: 0;
+      display: flex;
+    }
+  `,
+};
 export default Markets;
diff --git a/src/views/ExchangeBillboards.tsx b/src/views/ExchangeBillboards.tsx
index 1c5478d57..4d4cf9594 100644
--- a/src/views/ExchangeBillboards.tsx
+++ b/src/views/ExchangeBillboards.tsx
@@ -1,4 +1,4 @@
-import styled, { type AnyStyledComponent } from 'styled-components';
+import styled from 'styled-components';
 
 import { ButtonAction, ButtonSize, ButtonType } from '@/constants/buttons';
 import { STRING_KEYS } from '@/constants/localization';
@@ -23,8 +23,8 @@ export const ExchangeBillboards: React.FC<ExchangeBillboardsProps> = ({ classNam
   const { chainTokenLabel } = useTokenConfigs();
 
   const {
-    stats: { volume24HUSDC, openInterestUSDC, feeEarned },
-    feeEarnedChart,
+    stats: { volume24HUSDC, openInterestUSDC, feesEarned },
+    feesEarnedChart,
   } = usePerpetualMarketsStats();
 
   return (
@@ -50,14 +50,26 @@ export const ExchangeBillboards: React.FC<ExchangeBillboardsProps> = ({ classNam
           key: 'fee-earned-stakers',
           labelKey: STRING_KEYS.EARNED_BY_STAKERS,
           tagKey: STRING_KEYS._24H,
-          value: feeEarned,
+          value: feesEarned,
           type: OutputType.CompactFiat,
-          chartData: feeEarnedChart,
+          chartData: feesEarnedChart,
           linkLabelKey: STRING_KEYS.LEARN_MORE_ARROW,
           link: `${chainTokenLabel}/${TokenRoute.StakingRewards}`,
+          slotLeft: '~',
         },
       ].map(
-        ({ key, labelKey, tagKey, value, fractionDigits, type, chartData, link, linkLabelKey }) => (
+        ({
+          key,
+          labelKey,
+          tagKey,
+          value,
+          fractionDigits,
+          type,
+          chartData,
+          link,
+          linkLabelKey,
+          slotLeft,
+        }) => (
           <Styled.BillboardContainer key={key}>
             <Styled.BillboardStat>
               <Styled.BillboardTitle>
@@ -66,10 +78,11 @@ export const ExchangeBillboards: React.FC<ExchangeBillboardsProps> = ({ classNam
               </Styled.BillboardTitle>
               <Styled.Output
                 useGrouping
+                withBaseFont
                 fractionDigits={fractionDigits}
                 type={type}
                 value={value}
-                withBaseFont
+                slotLeft={slotLeft}
               />
               {link && linkLabelKey ? (
                 <Styled.BillboardLink
@@ -101,63 +114,57 @@ export const ExchangeBillboards: React.FC<ExchangeBillboardsProps> = ({ classNam
   );
 };
 
-const Styled: Record<string, AnyStyledComponent> = {};
-
-Styled.MarketBillboardsWrapper = styled.div`
-  ${layoutMixins.column}
-
-  gap: 1rem;
-`;
-
-Styled.BillboardContainer = styled.div`
-  ${layoutMixins.row}
-  flex: 1;
-  justify-content: space-between;
-
-  background-color: var(--color-layer-3);
-  padding: 1.5rem;
-  border-radius: 0.625rem;
-`;
-
-Styled.BillboardChart = styled.div`
-  width: 130px;
-  height: 40px;
-`;
-
-Styled.BillboardLink = styled(Button)`
-  --button-textColor: var(--color-accent);
-  --button-height: unset;
-  --button-padding: 0;
-  justify-content: flex-start;
-`;
-
-Styled.BillboardTitle = styled.div`
-  ${layoutMixins.row}
-
-  gap: 0.375rem;
-`;
-
-Styled.BillboardStat = styled.div`
-  ${layoutMixins.column}
-
-  gap: 0.5rem;
-
-  label {
-    color: var(--color-text-0);
-    font: var(--font-base-medium);
-  }
-
-  output {
-    color: var(--color-text-1);
-    font: var(--font-large-medium);
-  }
-`;
-
-Styled.Output = styled(Output)`
-  font: var(--font-extra-book);
-  color: var(--color-text-2);
-
-  @media ${breakpoints.tablet} {
-    font: var(--font-base-book);
-  }
-`;
+const Styled = {
+  MarketBillboardsWrapper: styled.div`
+    ${layoutMixins.column}
+
+    gap: 1rem;
+  `,
+  BillboardContainer: styled.div`
+    ${layoutMixins.row}
+    flex: 1;
+    justify-content: space-between;
+
+    background-color: var(--color-layer-3);
+    padding: 1.5rem;
+    border-radius: 0.625rem;
+  `,
+  BillboardChart: styled.div`
+    width: 130px;
+    height: 40px;
+  `,
+  BillboardLink: styled(Button)`
+    --button-textColor: var(--color-accent);
+    --button-height: unset;
+    --button-padding: 0;
+    justify-content: flex-start;
+  `,
+  BillboardTitle: styled.div`
+    ${layoutMixins.row}
+
+    gap: 0.375rem;
+  `,
+  BillboardStat: styled.div`
+    ${layoutMixins.column}
+
+    gap: 0.5rem;
+
+    label {
+      color: var(--color-text-0);
+      font: var(--font-base-medium);
+    }
+
+    output {
+      color: var(--color-text-1);
+      font: var(--font-large-medium);
+    }
+  `,
+  Output: styled(Output)`
+    font: var(--font-extra-book);
+    color: var(--color-text-2);
+
+    @media ${breakpoints.tablet} {
+      font: var(--font-base-book);
+    }
+  `,
+};
diff --git a/src/views/MarketsStats.tsx b/src/views/MarketsStats.tsx
index ac489b4d5..4894f3d7c 100644
--- a/src/views/MarketsStats.tsx
+++ b/src/views/MarketsStats.tsx
@@ -1,9 +1,8 @@
 import { useState } from 'react';
 
 import { useDispatch } from 'react-redux';
-import styled, { AnyStyledComponent } from 'styled-components';
+import styled from 'styled-components';
 
-import { ButtonAction, ButtonType } from '@/constants/buttons';
 import { STRING_KEYS } from '@/constants/localization';
 import { MarketFilters, MarketSorting } from '@/constants/markets';
 
@@ -12,7 +11,6 @@ import { useStringGetter } from '@/hooks';
 import { breakpoints } from '@/styles';
 import { layoutMixins } from '@/styles/layoutMixins';
 
-import { Button } from '@/components/Button';
 import { Tag } from '@/components/Tag';
 import { ToggleGroup } from '@/components/ToggleGroup';
 
@@ -40,16 +38,10 @@ export const MarketsStats = (props: MarketsStatsProps) => {
       <Styled.ExchangeBillboards />
       <Styled.Section>
         <Styled.SectionHeader>
-          <h4>{stringGetter({ key: STRING_KEYS.RECENTLY_LISTED })}</h4>
-          <Styled.NewTag>{stringGetter({ key: STRING_KEYS.NEW })}</Styled.NewTag>
-
-          <Styled.ViewAll
-            type={ButtonType.Link}
-            action={ButtonAction.Navigation}
-            onClick={setNewFilter}
-          >
-            {stringGetter({ key: STRING_KEYS.VIEW })} →
-          </Styled.ViewAll>
+          <Styled.RecentlyListed>
+            {stringGetter({ key: STRING_KEYS.RECENTLY_LISTED })}
+            <Styled.NewTag>{stringGetter({ key: STRING_KEYS.NEW })}</Styled.NewTag>
+          </Styled.RecentlyListed>
         </Styled.SectionHeader>
         <MarketsCompactTable filters={MarketFilters.NEW} />
       </Styled.Section>
@@ -81,66 +73,62 @@ export const MarketsStats = (props: MarketsStatsProps) => {
   );
 };
 
-const Styled: Record<string, AnyStyledComponent> = {};
-
-Styled.MarketsStats = styled.section`
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 1rem;
-
-  @media ${breakpoints.desktopSmall} {
-    padding-left: 1rem;
-    padding-right: 1rem;
-  }
-
-  @media ${breakpoints.tablet} {
-    ${layoutMixins.column}
-  }
-`;
-
-Styled.Section = styled.div`
-  background: var(--color-layer-3);
-  border-radius: 0.625rem;
-`;
-
-Styled.ViewAll = styled(Button)`
-  --button-textColor: var(--color-accent);
-  margin-left: auto;
-`;
-
-Styled.NewTag = styled(Tag)`
-  background-color: var(--color-accent-faded);
-  color: var(--color-accent);
-  text-transform: uppercase;
-`;
-
-Styled.ToggleGroupContainer = styled.div`
-  ${layoutMixins.row}
-  margin-left: auto;
-
-  & button {
-    --button-toggle-off-backgroundColor: var(--color-layer-3);
-    --button-toggle-off-textColor: var(--color-text-1);
-    --border-color: var(--color-layer-6);
-    --button-height: 1.75rem;
-    --button-padding: 0 0.75rem;
-    --button-font: var(--font-mini-book);
-  }
-`;
-
-Styled.SectionHeader = styled.div`
-  ${layoutMixins.row}
-
-  justify-content: space-between;
-  padding: 1.125rem 1.5rem;
-  gap: 0.375rem;
-
-  & h4 {
-    font: var(--font-base-medium);
-    color: var(--color-text-2);
-  }
-`;
-
-Styled.ExchangeBillboards = styled(ExchangeBillboards)`
-  ${layoutMixins.contentSectionDetachedScrollable}
-`;
+const Styled = {
+  MarketsStats: styled.section`
+    display: grid;
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+    gap: 1rem;
+
+    @media ${breakpoints.desktopSmall} {
+      padding-left: 1rem;
+      padding-right: 1rem;
+    }
+
+    @media ${breakpoints.tablet} {
+      ${layoutMixins.column}
+    }
+  `,
+  Section: styled.div`
+    background: var(--color-layer-3);
+    border-radius: 0.625rem;
+  `,
+  RecentlyListed: styled.h4`
+    display: flex;
+    align-items: center;
+    gap: 0.375rem;
+  `,
+  NewTag: styled(Tag)`
+    background-color: var(--color-accent-faded);
+    color: var(--color-accent);
+    text-transform: uppercase;
+  `,
+  ToggleGroupContainer: styled.div`
+    ${layoutMixins.row}
+    margin-left: auto;
+
+    & button {
+      --button-toggle-off-backgroundColor: var(--color-layer-3);
+      --button-toggle-off-textColor: var(--color-text-1);
+      --border-color: var(--color-layer-6);
+      --button-height: 1.75rem;
+      --button-padding: 0 0.75rem;
+      --button-font: var(--font-mini-book);
+    }
+  `,
+  SectionHeader: styled.div`
+    ${layoutMixins.row}
+
+    justify-content: space-between;
+    padding: 1.125rem 1.5rem;
+    gap: 0.375rem;
+    height: 4rem;
+
+    & h4 {
+      font: var(--font-base-medium);
+      color: var(--color-text-2);
+    }
+  `,
+  ExchangeBillboards: styled(ExchangeBillboards)`
+    ${layoutMixins.contentSectionDetachedScrollable}
+  `,
+};
diff --git a/src/views/tables/MarketsCompactTable.tsx b/src/views/tables/MarketsCompactTable.tsx
index 5e228b053..9eb05d662 100644
--- a/src/views/tables/MarketsCompactTable.tsx
+++ b/src/views/tables/MarketsCompactTable.tsx
@@ -1,12 +1,11 @@
 import { PropsWithChildren, useMemo } from 'react';
 
 import { useNavigate } from 'react-router-dom';
-import styled, { type AnyStyledComponent } from 'styled-components';
+import styled, { AnyStyledComponent } from 'styled-components';
 
-import { ButtonAction, ButtonSize } from '@/constants/buttons';
 import { STRING_KEYS } from '@/constants/localization';
 import { MarketFilters, MarketSorting, type MarketData } from '@/constants/markets';
-import { AppRoute, MarketsRoute } from '@/constants/routes';
+import { AppRoute } from '@/constants/routes';
 
 import { useBreakpoints, useStringGetter } from '@/hooks';
 import { useMarketsData } from '@/hooks/useMarketsData';
@@ -15,8 +14,8 @@ import { breakpoints } from '@/styles';
 import { layoutMixins } from '@/styles/layoutMixins';
 import { tradeViewMixins } from '@/styles/tradeViewMixins';
 
-import { Button } from '@/components/Button';
 import { Icon, IconName } from '@/components/Icon';
+import { LoadingSpace } from '@/components/Loading/LoadingSpinner';
 import { Output, OutputType } from '@/components/Output';
 import { AssetTableCell, Table, TableCell, type ColumnDef } from '@/components/Table';
 import { TriangleIndicator } from '@/components/TriangleIndicator';
@@ -29,8 +28,11 @@ interface MarketsCompactTableProps {
   sorting?: MarketSorting;
 }
 
-export const MarketsCompactTable = (props: PropsWithChildren<MarketsCompactTableProps>) => {
-  const { className, filters, sorting } = props;
+export const MarketsCompactTable = ({
+  className,
+  filters,
+  sorting,
+}: PropsWithChildren<MarketsCompactTableProps>) => {
   const stringGetter = useStringGetter();
   const { isTablet } = useBreakpoints();
   const navigate = useNavigate();
@@ -43,11 +45,15 @@ export const MarketsCompactTable = (props: PropsWithChildren<MarketsCompactTable
         {
           columnKey: 'market',
           getCellValue: (row) => row.market,
+          allowsSorting: false,
+          label: stringGetter({ key: STRING_KEYS.MARKET }),
           renderCell: ({ asset }) => <AssetTableCell stacked asset={asset} />,
         },
         {
-          columnKey: 'price',
+          columnKey: 'oraclePrice',
           getCellValue: (row) => row.oraclePrice,
+          allowsSorting: false,
+          label: stringGetter({ key: STRING_KEYS.ORACLE_PRICE }),
           renderCell: ({
             oraclePrice,
             priceChange24H,
@@ -86,6 +92,7 @@ export const MarketsCompactTable = (props: PropsWithChildren<MarketsCompactTable
           ? {
               columnKey: 'listing',
               getCellValue: (row) => row.isNew,
+              allowsSorting: false,
               renderCell: ({ listingDate }) => (
                 <Styled.DetailsCell>
                   <Styled.RecentlyListed>
@@ -106,7 +113,9 @@ export const MarketsCompactTable = (props: PropsWithChildren<MarketsCompactTable
             }
           : {
               columnKey: 'openInterest',
-              getCellValue: (row) => row.isNew,
+              allowsSorting: false,
+              getCellValue: (row) => row.openInterestUSDC,
+              label: stringGetter({ key: STRING_KEYS.OPEN_INTEREST }),
               renderCell: ({ asset, openInterestUSDC, openInterest }) => (
                 <Styled.DetailsCell>
                   <Styled.RecentlyListed>
@@ -156,187 +165,169 @@ export const MarketsCompactTable = (props: PropsWithChildren<MarketsCompactTable
   return (
     <Styled.Table
       withInnerBorders
-      hideHeader
       data={sortedMarkets.slice(0, 5)}
       getRowKey={(row: MarketData) => row.market}
       label="Markets"
       onRowAction={(market: string) =>
         navigate(`${AppRoute.Trade}/${market}`, { state: { from: AppRoute.Markets } })
       }
-      defaultSortDescriptor={{
-        column: 'volume24H',
-        direction: 'descending',
-      }}
       columns={columns}
       className={className}
       slotEmpty={
         <Styled.MarketNotFound>
-          <p>{stringGetter({ key: STRING_KEYS.NO_RECENTLY_LISTED_MARKETS })}</p>
-          <Button
-            onClick={() => navigate(`${AppRoute.Markets}/${MarketsRoute.New}`)}
-            size={ButtonSize.Small}
-            action={ButtonAction.Navigation}
-          >
-            {stringGetter({ key: STRING_KEYS.ADD_NEW_MARKET })}
-          </Button>
+          {filters === MarketFilters.NEW ? (
+            <p>{stringGetter({ key: STRING_KEYS.NO_RECENTLY_LISTED_MARKETS })}</p>
+          ) : (
+            <LoadingSpace id="compact-markets-table" />
+          )}
         </Styled.MarketNotFound>
       }
     />
   );
 };
 
-const Styled: Record<string, AnyStyledComponent> = {};
+const Styled = {
+  Table: styled(Table)`
+    ${tradeViewMixins.horizontalTable}
+    --tableCell-padding: 0.625rem 1.5rem;
+    --tableRow-backgroundColor: var(--color-layer-3);
+    --tableHeader-backgroundColor: var(--color-layer-3);
+    border-bottom-right-radius: 0.625rem;
+    border-bottom-left-radius: 0.625rem;
+
+    & table {
+      --stickyArea1-background: var(--color-layer-5);
+    }
 
-Styled.Table = styled(Table)`
-  ${tradeViewMixins.horizontalTable}
-  --tableCell-padding: 0.625rem 1.5rem;
-  --tableRow-backgroundColor: var(--color-layer-3);
-  --tableHeader-backgroundColor: var(--color-layer-3);
-  border-bottom-right-radius: 0.625rem;
-  border-bottom-left-radius: 0.625rem;
+    & tr:last-child {
+      box-shadow: none;
+    }
 
-  & table {
-    --stickyArea1-background: var(--color-layer-5);
-  }
+    & tbody:after {
+      content: none;
+    }
 
-  & tr > td:nth-child(1) {
-    --tableCell-padding: 0.625rem 0.625rem 0.625rem 1.5rem;
-  }
+    & > div {
+      padding: 1rem;
+    }
 
-  & tr > td:nth-child(2) {
-    --tableCell-padding: 0.625rem 0;
-  }
+    @media ${breakpoints.desktopSmall} {
+      --tableCell-padding: 0.5rem 0.5rem;
 
-  & tr > td:nth-child(3) {
-    --tableCell-padding: 0.625rem 1.5rem 0.625rem 0.625rem;
-  }
+      & tr > td:nth-child(1) {
+        --tableCell-padding: 0.5rem 0.5rem;
+      }
 
-  & tr:last-child {
-    box-shadow: none;
-  }
+      & tr > td:nth-child(2) {
+        --tableCell-padding: 0.5rem 0;
+      }
 
-  & tbody:after {
-    content: none;
-  }
+      & tr > td:nth-child(3) {
+        --tableCell-padding: 0.5rem 0.5rem;
+      }
+    }
 
-  & > div {
-    padding: 1rem;
-  }
+    @media ${breakpoints.tablet} {
+      table {
+        max-width: 100vw;
+      }
 
-  @media ${breakpoints.desktopSmall} {
-    --tableCell-padding: 0.5rem 0.5rem;
+      & tr > td:nth-child(1) {
+        --tableCell-padding: 0.5rem 0.625rem 0.5rem 1rem;
+      }
 
-    & tr > td:nth-child(1) {
-      --tableCell-padding: 0.5rem 0.5rem;
-    }
+      & tr > td:nth-child(2) {
+        --tableCell-padding: 0.5rem 0;
+      }
 
-    & tr > td:nth-child(2) {
-      --tableCell-padding: 0.5rem 0;
+      & tr > td:nth-child(3) {
+        --tableCell-padding: 0.5rem 1rem 0.5rem 0.625rem;
+      }
     }
+  ` as AnyStyledComponent, // TODO: Remove cast when Table component is refactored
 
-    & tr > td:nth-child(3) {
-      --tableCell-padding: 0.5rem 0.5rem;
-    }
-  }
+  TabletOutput: styled(Output)`
+    font: var(--font-small-medium);
+    color: var(--color-text-1);
+  `,
 
-  @media ${breakpoints.tablet} {
-    table {
-      max-width: 100vw;
-    }
+  InlineRow: styled.div`
+    ${layoutMixins.inlineRow}
+  `,
 
-    & tr > td:nth-child(1) {
-      --tableCell-padding: 0.5rem 0.625rem 0.5rem 1rem;
-    }
+  TabletPriceChange: styled.div`
+    ${layoutMixins.inlineRow}
 
-    & tr > td:nth-child(2) {
-      --tableCell-padding: 0.5rem 0;
+    & output {
+      font: var(--font-mini-medium);
     }
-
-    & tr > td:nth-child(3) {
-      --tableCell-padding: 0.5rem 1rem 0.5rem 0.625rem;
+  `,
+
+  Output: styled(Output)<{ isNegative?: boolean; isPositive?: boolean }>`
+    color: ${({ isNegative, isPositive }) =>
+      isNegative
+        ? `var(--color-negative)`
+        : isPositive
+        ? `var(--color-positive)`
+        : `var(--color-text-1)`};
+    font: var(--font-base-medium);
+  `,
+
+  MarketNotFound: styled.div`
+    ${layoutMixins.column}
+    justify-content: center;
+    align-items: center;
+    text-align: center;
+    padding: 0;
+
+    & p {
+      color: var(--color-text-0);
+      font: var(--font-base-medium);
     }
-  }
-`;
 
-Styled.TabletOutput = styled(Output)`
-  font: var(--font-small-medium);
-  color: var(--color-text-1);
-`;
+    & button {
+      color: var(--color-accent);
+    }
+  `,
 
-Styled.InlineRow = styled.div`
-  ${layoutMixins.inlineRow}
-`;
+  DetailsCell: styled(TableCell)`
+    ${layoutMixins.row}
+    gap: 0.75rem;
 
-Styled.TabletPriceChange = styled(Styled.InlineRow)`
-  & output {
-    font: var(--font-mini-medium);
-  }
-`;
-
-Styled.Output = styled(Output)<{ isNegative?: boolean; isPositive?: boolean }>`
-  color: ${({ isNegative, isPositive }) =>
-    isNegative
-      ? `var(--color-negative)`
-      : isPositive
-      ? `var(--color-positive)`
-      : `var(--color-text-1)`};
-  font: var(--font-base-medium);
-`;
-
-Styled.MarketNotFound = styled.div`
-  ${layoutMixins.column}
-  justify-content: center;
-  align-items: center;
-  text-align: center;
-  padding: 0;
-
-  & p {
-    color: var(--color-text-0);
-    font: var(--font-base-medium);
-  }
-
-  & button {
-    color: var(--color-accent);
-  }
-`;
+    & > svg {
+      opacity: 0.4;
+    }
+  `,
 
-Styled.DetailsCell = styled(TableCell)`
-  ${layoutMixins.row}
-  gap: 0.75rem;
+  RecentlyListed: styled.div`
+    ${layoutMixins.column}
+    gap: 0.125rem;
 
-  & > svg {
-    opacity: 0.4;
-  }
-`;
+    & > span,
+    & > output {
+      text-align: right;
+      justify-content: flex-end;
+    }
 
-Styled.RecentlyListed = styled.div`
-  ${layoutMixins.column}
-  gap: 0.125rem;
+    & > span:first-child {
+      color: var(--color-text-0);
+      font: var(--font-mini-medium);
+    }
 
-  & > span,
-  & > output {
-    text-align: right;
-    justify-content: flex-end;
-  }
+    & > span:last-child,
+    & > output:first-child {
+      color: var(--color-text-1);
+      font: var(--font-small-medium);
+    }
+  `,
 
-  & > span:first-child {
+  InterestOutput: styled(Output)`
     color: var(--color-text-0);
     font: var(--font-mini-medium);
-  }
+  `,
 
-  & > span:last-child,
-  & > output:first-child {
+  RelativeTimeOutput: styled(Output)`
     color: var(--color-text-1);
     font: var(--font-small-medium);
-  }
-`;
-
-Styled.InterestOutput = styled(Output)`
-  color: var(--color-text-0);
-  font: var(--font-mini-medium);
-`;
-
-Styled.RelativeTimeOutput = styled(Output)`
-  color: var(--color-text-1);
-  font: var(--font-small-medium);
-`;
+  `,
+};
diff --git a/src/views/tables/MarketsTable.tsx b/src/views/tables/MarketsTable.tsx
index 51e9c30c8..627527150 100644
--- a/src/views/tables/MarketsTable.tsx
+++ b/src/views/tables/MarketsTable.tsx
@@ -20,7 +20,7 @@ import { tradeViewMixins } from '@/styles/tradeViewMixins';
 
 import { Button } from '@/components/Button';
 import { Output, OutputType } from '@/components/Output';
-import { type ColumnDef, AssetTableCell, Table, TableCell } from '@/components/Table';
+import { AssetTableCell, Table, TableCell, type ColumnDef } from '@/components/Table';
 import { Toolbar } from '@/components/Toolbar';
 import { TriangleIndicator } from '@/components/TriangleIndicator';
 import { SparklineChart } from '@/components/visx/SparklineChart';
@@ -111,12 +111,12 @@ export const MarketsTable = ({ className }: { className?: string }) => {
             },
             {
               columnKey: 'priceChange24HChart',
-              getCellValue: (row) => row.oneDaySparkline,
+              getCellValue: (row) => row.priceChange24HPercent,
               label: stringGetter({ key: STRING_KEYS.LAST_24H }),
-              renderCell: ({ oneDaySparkline, priceChange24HPercent }) => (
+              renderCell: ({ line, priceChange24HPercent }) => (
                 <div style={{ width: 50, height: 50 }}>
                   <SparklineChart
-                    data={(oneDaySparkline ?? []).map((datum, index) => ({
+                    data={(line?.toArray() ?? []).map((datum, index) => ({
                       x: index + 1,
                       y: parseFloat(datum.toString()),
                     }))}