feat: markets page revamp (#442)

* feat: 💄 add new markets page header

* feat: 💄 add new market filter styles

* feat: ✨ add new component AssetTableCell

added new component AssetTableCell to replace MarketTableCell inside the markets table.

* feat: 💄 update oracle price cell style

* feat: 💄 change price and interest rate formatting

* feat: 💄 add  number output styles

added  number output styles for markets table columns.

* feat: ✨ add sparkline chart component

* feat: ✨ add daily sparkline inside market data

* feat: ✨ add price change chart

added price change chart inside markets table.

* feat: 💄 add new billboard style

* feat: ✨ expose getCandles and add limit

* fix: 💄 fix sparkline chart margin

* feat: 💄 add new billboard styles and data

* fix: 💄 fix sparkline chart overflow

* feat: ✨ add numia chain revenue service

* feat: ✨ implement getChainRevenue inside billboard

* refactor: ♻️ move markets stats inside a specific hook

* feat: 💄 add stats section layout

* fix: 💄 fix assetCell style

* feat: 💄 add stacked variant for AssetTableCell

* feat: ✨ add MarketsCompactTable setup

* fix: 💄 fix font size inside stacked variant

* feat: ✨ add listing and openInterest cells

added new cells inside MarketsCompactTable.

* feat: ✨ add market listing date

added market listing date inside the compact table.

* fix: 💄 fix MarketsCompactTable responsive behaviour

* feat: ✨ add fiat formatting

added fiat formatting for earned by stakers section.

* feat: ✨ add sorting prop

added sorting prop for MarketsCompactTable

* feat: ✨ add gainers/losers sorting

added markets stats sorting by gainers/losers.

* feat: ✨ add view all button

added view all button inside recently listed section.

* feat: ✨ add read more link

added read more link inside ExchangeBillboards component.

* feat: ✨ add learn more link

* feat: ✨ add global markets table filter

* fix: 💄 fix market compact table overflow

* refactor: ♻️ move markets stats inside a specific component

* refactor: 🔇 remove sparkline data log

* feat: ✨ add highlights toggle

* feat: ✨ improve markets losers search

* feat: ⬆️ upgrade @dydxprotocol/v4-localization

* feat: 💬 add translations

* feat: ✨ add formatZeroNumbers utility

* test: ✅ add tests for formatZeroNumbers utility

* feat: ✨ add compress zeros inside MarketsCompactTable

* feat: 💄 improve sub font size

* feat: ✨ remove daily sparkline chart

removed daily sparkline chart from markets table.

* feat: ✨ add currency auto check

added currency auto check inside formatZeroNumbers.

* feat: ✨ add punctuationSymbol return

added punctuationSymbol symbol inside formatZeroNumbers returns.

* feat: ✨ add CompressedNumberOutput component

* revert: ⏪ revert remove of daily sparkline chart

657ef20

* feat: 💬 add translations for input search

* feat: ✨ add MarketFilter compact layout

* fix: 🐛 fix AssetTableCell rendering

* feat: ✨ remove markets charts

removed 24h volume and open interest charts.

.env.example

@@ -9,6 +9,8 @@ VITE_ROUTER_TYPE=
 
 VITE_V3_TOKEN_ADDRESS=
 VITE_TOKEN_MIGRATION_URI=
+VITE_NUMIA_BASE_URL=
+VITE_MARKETS_EARNED_BY_STAKERS_LEARN_MORE_URL=
 
 AMPLITUDE_API_KEY=
 AMPLITUDE_SERVER_URL=

src/components/CompressedNumberOutput.tsx

@@ -0,0 +1,37 @@
+import styled, { AnyStyledComponent } from 'styled-components';
+
+import { formatZeroNumbers } from '@/lib/formatZeroNumbers';
+
+export type CompressedOutputProps = {
+  value: string;
+  compressZeros?: boolean;
+  className?: string;
+};
+
+export const CompressedNumberOutput = (props: CompressedOutputProps) => {
+  const { value, compressZeros, ...otherProps } = props;
+  const { significantDigits, decimalDigits, zeros, punctuationSymbol } = formatZeroNumbers(value);
+
+  if (compressZeros) {
+    return (
+      <div {...otherProps}>
+        {significantDigits}
+        {punctuationSymbol}
+        {Boolean(zeros) && (
+          <>
+            0<Styled.Sub title={value}>{zeros}</Styled.Sub>
+          </>
+        )}
+        {decimalDigits}
+      </div>
+    );
+  }
+
+  return value;
+};
+
+const Styled: Record<string, AnyStyledComponent> = {};
+
+Styled.Sub = styled.sub`
+  font-size: 0.85em;
+`;

src/components/Output.tsx

@@ -25,9 +25,11 @@ import { Tag } from '@/components/Tag';
 
 import { getSelectedLocale } from '@/state/localizationSelectors';
 
+import { formatZeroNumbers } from '@/lib/formatZeroNumbers';
 import { MustBigNumber, isNumber, type BigNumberish } from '@/lib/numbers';
 import { getStringsForDateTimeDiff, getTimestamp } from '@/lib/timeUtils';
 
+import { CompressedNumberOutput } from './CompressedNumberOutput';
 import { LoadingOutput } from './Loading/LoadingOutput';
 
 export enum OutputType {
@@ -62,6 +64,7 @@ type ElementProps = {
   slotRight?: React.ReactNode;
   useGrouping?: boolean;
   roundingMode?: BigNumber.RoundingMode;
+  compressZeros?: boolean;
   relativeTimeFormatOptions?: {
     format: 'long' | 'short' | 'narrow' | 'singleCharacter';
     resolution?: number;
@@ -90,6 +93,7 @@ export const Output = ({
   showSign = ShowSign.Negative,
   slotRight,
   useGrouping = true,
+  compressZeros = false,
   roundingMode = BigNumber.ROUND_HALF_UP,
   relativeTimeFormatOptions = {
     format: 'singleCharacter',
@@ -256,62 +260,103 @@ export const Output = ({
                   throw new Error('value must be a number for compact number output');
                 }
 
-                return Intl.NumberFormat(locale, {
-                  style: 'decimal',
-                  notation: 'compact',
-                  maximumSignificantDigits: 3,
-                })
-                  .format(Math.abs(value))
-                  .toLowerCase();
+                return (
+                  <CompressedNumberOutput
+                    value={Intl.NumberFormat(locale, {
+                      style: 'decimal',
+                      notation: 'compact',
+                      maximumSignificantDigits: 3,
+                    })
+                      .format(Math.abs(value))
+                      .toLowerCase()}
+                    compressZeros={compressZeros}
+                  />
+                );
               },
-              [OutputType.Number]: () =>
-                valueBN.toFormat(fractionDigits ?? 0, roundingMode, {
-                  ...format,
-                }),
-              [OutputType.Fiat]: () =>
-                valueBN.toFormat(fractionDigits ?? USD_DECIMALS, roundingMode, {
-                  ...format,
-                  prefix: '$',
-                }),
-              [OutputType.SmallFiat]: () =>
-                valueBN.toFormat(fractionDigits ?? SMALL_USD_DECIMALS, roundingMode, {
-                  ...format,
-                  prefix: '$',
-                }),
+              [OutputType.Number]: () => (
+                <CompressedNumberOutput
+                  value={valueBN.toFormat(fractionDigits ?? 0, roundingMode, {
+                    ...format,
+                  })}
+                  compressZeros={compressZeros}
+                />
+              ),
+              [OutputType.Fiat]: () => (
+                <CompressedNumberOutput
+                  value={valueBN.toFormat(fractionDigits ?? USD_DECIMALS, roundingMode, {
+                    ...format,
+                    prefix: '$',
+                  })}
+                  compressZeros={compressZeros}
+                />
+              ),
+              [OutputType.SmallFiat]: () => (
+                <CompressedNumberOutput
+                  value={valueBN.toFormat(fractionDigits ?? SMALL_USD_DECIMALS, roundingMode, {
+                    ...format,
+                    prefix: '$',
+                  })}
+                  compressZeros={compressZeros}
+                />
+              ),
               [OutputType.CompactFiat]: () => {
                 if (!isNumber(value)) {
                   throw new Error('value must be a number for compact fiat output');
                 }
-                return Intl.NumberFormat(locale, {
-                  style: 'currency',
-                  currency: 'USD',
-                  notation: 'compact',
-                  maximumSignificantDigits: 3,
-                })
-                  .format(Math.abs(value))
-                  .toLowerCase();
+
+                return (
+                  <CompressedNumberOutput
+                    value={Intl.NumberFormat(locale, {
+                      style: 'currency',
+                      currency: 'USD',
+                      notation: 'compact',
+                      maximumSignificantDigits: 3,
+                    })
+                      .format(Math.abs(value))
+                      .toLowerCase()}
+                    compressZeros={compressZeros}
+                  />
+                );
               },
-              [OutputType.Asset]: () =>
-                valueBN.toFormat(fractionDigits ?? TOKEN_DECIMALS, roundingMode, {
-                  ...format,
-                }),
-              [OutputType.Percent]: () =>
-                valueBN.times(100).toFormat(fractionDigits ?? PERCENT_DECIMALS, roundingMode, {
-                  ...format,
-                  suffix: '%',
-                }),
-              [OutputType.SmallPercent]: () =>
-                valueBN
-                  .times(100)
-                  .toFormat(fractionDigits ?? SMALL_PERCENT_DECIMALS, roundingMode, {
+              [OutputType.Asset]: () => (
+                <CompressedNumberOutput
+                  value={valueBN.toFormat(fractionDigits ?? TOKEN_DECIMALS, roundingMode, {
+                    ...format,
+                  })}
+                  compressZeros={compressZeros}
+                />
+              ),
+              [OutputType.Percent]: () => (
+                <CompressedNumberOutput
+                  value={valueBN
+                    .times(100)
+                    .toFormat(fractionDigits ?? PERCENT_DECIMALS, roundingMode, {
+                      ...format,
+                      suffix: '%',
+                    })}
+                  compressZeros={compressZeros}
+                />
+              ),
+              [OutputType.SmallPercent]: () => (
+                <CompressedNumberOutput
+                  value={valueBN
+                    .times(100)
+                    .toFormat(fractionDigits ?? SMALL_PERCENT_DECIMALS, roundingMode, {
+                      ...format,
+                      suffix: '%',
+                    })}
+                  compressZeros={compressZeros}
+                />
+              ),
+              [OutputType.Multiple]: () => (
+                <CompressedNumberOutput
+                  value={valueBN.toFormat(fractionDigits ?? LEVERAGE_DECIMALS, roundingMode, {
                     ...format,
-                    suffix: '%',
-                  }),
-              [OutputType.Multiple]: () =>
-                valueBN.toFormat(fractionDigits ?? LEVERAGE_DECIMALS, roundingMode, {
-                  ...format,
-                  suffix: '×',
-                }),
+                    suffix: '×',
+                  })}
+                  compressZeros={compressZeros}
+                />
+              ),
             }[type]()}
           {slotRight}
           {tag && <Styled.Tag>{tag}</Styled.Tag>}

src/components/SearchInput.tsx

@@ -20,7 +20,7 @@ export const SearchInput = ({ placeholder, onTextChange }: SearchInputProps) =>
 
   return (
     <Styled.Search>
-      <Icon iconName={IconName.Search} />
+      <Styled.Icon iconName={IconName.Search} />
       <Styled.Input
         autoFocus
         ref={inputRef}
@@ -48,13 +48,14 @@ const Styled: Record<string, AnyStyledComponent> = {};
 
 Styled.Search = styled.div`
   ${layoutMixins.row}
-  width: 100%;
+  width: auto;
   height: 2rem;
-  background-color: var(--color-layer-1);
+  background-color: var(--color-layer-3);
+  color: ${({ theme }) => theme.textTertiary};
   border-radius: 2.5rem;
   border: solid var(--border-width) var(--color-layer-6);
-  padding: 0 0.75rem;
-  gap: 0.5rem;
+  padding: 0 1rem;
+  gap: 0.375rem;
   justify-content: end;
 `;
 
@@ -67,6 +68,11 @@ Styled.IconButton = styled(IconButton)`
   --button-icon-size: 0.5rem;
   --button-border: none;
   --button-backgroundColor: transparent;
+  color: ${({ theme }) => theme.textSecondary};
   width: 1.5rem;
   height: 1.5rem;
 `;
+
+Styled.Icon = styled(Icon)`
+  color: ${({ theme }) => theme.textSecondary};
+`;

src/components/Table.tsx

@@ -43,6 +43,7 @@ import { Tag } from './Tag';
 
 export { ActionsTableCell } from './Table/ActionsTableCell';
 export { MarketTableCell } from './Table/MarketTableCell';
+export { AssetTableCell } from './Table/AssetTableCell';
 export { TableCell } from './Table/TableCell';
 export { TableColumnHeader } from './Table/TableColumnHeader';
 

src/components/Table/AssetTableCell.tsx

@@ -0,0 +1,58 @@
+import styled, { type AnyStyledComponent } from 'styled-components';
+
+import type { Asset } from '@/constants/abacus';
+
+import { breakpoints } from '@/styles';
+
+import { AssetIcon } from '@/components/AssetIcon';
+import { TableCell } from '@/components/Table';
+import { Tag } from '@/components/Tag';
+
+interface AssetTableCellProps {
+  asset?: Asset;
+  className?: string;
+  stacked?: boolean;
+}
+
+export const AssetTableCell = (props: AssetTableCellProps) => {
+  const { asset, stacked, className } = props;
+
+  return (
+    <TableCell
+      className={className}
+      slotLeft={<Styled.AssetIcon stacked={stacked} symbol={asset?.id} />}
+    >
+      <Styled.TableCellContent stacked={stacked}>
+        <Styled.Asset stacked={stacked}>{asset?.name}</Styled.Asset>
+        {stacked ? <Styled.AssetID>{asset?.id}</Styled.AssetID> : <Tag>{asset?.id}</Tag>}
+      </Styled.TableCellContent>
+    </TableCell>
+  );
+};
+
+const Styled: Record<string, AnyStyledComponent> = {};
+
+Styled.TableCellContent = styled.div<{ stacked?: boolean }>`
+  gap: ${({ stacked }) => (stacked ? '0.125rem' : '0.75rem')};
+  display: flex;
+  flex-direction: ${({ stacked }) => (stacked ? 'column' : 'row')};
+  align-items: ${({ stacked }) => (stacked ? 'flex-start' : 'center')};
+`;
+
+Styled.AssetIcon = styled(AssetIcon)<{ stacked?: boolean }>`
+  font-size: ${({ stacked }) => (stacked ? '1.5rem' : '2rem')};
+
+  @media ${breakpoints.tablet} {
+    font-size: ${({ stacked }) => (stacked ? '1.5rem' : '2.25rem')};
+  }
+`;
+
+Styled.AssetID = styled.span`
+  color: var(--color-text-0);
+  font: var(--font-mini-medium);
+`;
+
+Styled.Asset = styled.span<{ stacked?: boolean }>`
+  color: var(--color-text-1);
+  font: ${({ stacked }) => (stacked ? 'var(--font-small-medium)' : 'var(--font-medium-medium)')};
+`;