feat: ✨ add listing and openInterest cells

added new cells inside MarketsCompactTable.
nabla-studio · Apr 9, 2024 · f108b54 · f108b54
1 parent ba9c895
commit f108b54
Show file tree

Hide file tree

Showing 2 changed files with 78 additions and 2 deletions.
diff --git a/src/pages/markets/Markets.tsx b/src/pages/markets/Markets.tsx
@@ -3,6 +3,7 @@ import styled, { AnyStyledComponent } from 'styled-components';
 
 import { ButtonAction } from '@/constants/buttons';
 import { STRING_KEYS } from '@/constants/localization';
+import { MarketFilters } from '@/constants/markets';
 import { AppRoute, MarketsRoute } from '@/constants/routes';
 
 import { useDocumentTitle, useStringGetter } from '@/hooks';
@@ -14,6 +15,7 @@ import { layoutMixins } from '@/styles/layoutMixins';
 import { Button } from '@/components/Button';
 import { ContentSectionHeader } from '@/components/ContentSectionHeader';
 import { ExchangeBillboards } from '@/views/ExchangeBillboards';
+import { MarketsCompactTable } from '@/views/tables/MarketsCompactTable';
 import { MarketsTable } from '@/views/tables/MarketsTable';
 
 const Markets = () => {
@@ -41,6 +43,12 @@ const Markets = () => {
         />
         <Styled.StatsSection>
           <Styled.ExchangeBillboards />
+          <Styled.MarketsStats>
+            <MarketsCompactTable filters={MarketFilters.NEW} />
+          </Styled.MarketsStats>
+          <Styled.MarketsStats>
+            <MarketsCompactTable />
+          </Styled.MarketsStats>
         </Styled.StatsSection>
       </Styled.HeaderSection>
 
@@ -88,7 +96,7 @@ Styled.HeaderSection = styled.section`
 
 Styled.StatsSection = styled.section`
   display: grid;
-  grid-template-columns: repeat(3, 1fr);
+  grid-template-columns: repeat(3, minmax(0, 1fr));
   gap: 1rem;
 
   @media ${breakpoints.desktopSmall} {
@@ -101,6 +109,11 @@ Styled.StatsSection = styled.section`
   }
 `;
 
+Styled.MarketsStats = styled.div`
+  background: var(--color-layer-3);
+  border-radius: 0.625rem;
+`;
+
 Styled.ExchangeBillboards = styled(ExchangeBillboards)`
   ${layoutMixins.contentSectionDetachedScrollable}
 `;

diff --git a/src/views/tables/MarketsCompactTable.tsx b/src/views/tables/MarketsCompactTable.tsx
@@ -16,6 +16,7 @@ import { layoutMixins } from '@/styles/layoutMixins';
 import { tradeViewMixins } from '@/styles/tradeViewMixins';
 
 import { Button } from '@/components/Button';
+import { Icon, IconName } from '@/components/Icon';
 import { Output, OutputType } from '@/components/Output';
 import { type ColumnDef, AssetTableCell, Table, TableCell } from '@/components/Table';
 import { TriangleIndicator } from '@/components/TriangleIndicator';
@@ -33,7 +34,6 @@ export const MarketsCompactTable = (props: PropsWithChildren<MarketsCompactTable
   const { isTablet } = useBreakpoints();
   const navigate = useNavigate();
 
-  // TODO: Pass filters here for `New`
   const { filteredMarkets } = useMarketsData(filters);
 
   const columns = useMemo<ColumnDef<MarketData>[]>(
@@ -80,6 +80,37 @@ export const MarketsCompactTable = (props: PropsWithChildren<MarketsCompactTable
             </TableCell>
           ),
         },
+        filters === MarketFilters.NEW
+          ? {
+              columnKey: 'listing',
+              getCellValue: (row) => row.isNew,
+              renderCell: ({ asset }) => (
+                <Styled.DetailsCell>
+                  <Styled.RecentlyListed>
+                    <span>Listed</span>
+                    <span>14 hrs ago</span>
+                  </Styled.RecentlyListed>
+                  <Icon iconName={IconName.ChevronRight} />
+                </Styled.DetailsCell>
+              ),
+            }
+          : {
+              columnKey: 'openInterest',
+              getCellValue: (row) => row.isNew,
+              renderCell: ({ asset, openInterestUSDC, openInterest }) => (
+                <Styled.DetailsCell>
+                  <Styled.RecentlyListed>
+                    <Styled.NumberOutput type={OutputType.CompactFiat} value={openInterestUSDC} />
+                    <Styled.NumberOutput
+                      type={OutputType.CompactNumber}
+                      value={openInterest}
+                      slotRight={` ${asset.id}`}
+                    />
+                  </Styled.RecentlyListed>
+                  <Icon iconName={IconName.ChevronRight} />
+                </Styled.DetailsCell>
+              ),
+            },
       ] as ColumnDef<MarketData>[],
     [stringGetter, isTablet]
   );
@@ -190,3 +221,35 @@ Styled.MarketNotFound = styled.div`
     color: var(--color-accent);
   }
 `;
+
+Styled.DetailsCell = styled(TableCell)`
+  ${layoutMixins.row}
+  gap: 0.75rem;
+
+  & > svg {
+    opacity: 0.4;
+  }
+`;
+
+Styled.RecentlyListed = styled.div`
+  ${layoutMixins.column}
+  gap: 0.125rem;
+
+  & > span,
+  & > output {
+    text-align: right;
+    justify-content: flex-end;
+  }
+
+  & > span:first-child,
+  & > output:last-child {
+    color: var(--color-text-0);
+    font: var(--font-mini-medium);
+  }
+
+  & > span:last-child,
+  & > output:first-child {
+    color: var(--color-text-1);
+    font: var(--font-small-medium);
+  }
+`;