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.
dydxprotocol · May 3, 2024 · 8d4d86c · 8d4d86c
1 parent 9af68d3
commit 8d4d86c
Show file tree

Hide file tree

Showing 9 changed files with 347 additions and 367 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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;