Add trailing blocks to NetworkStatus analytics event

Bump abacus, fix onboarding toAmount (#229 )
Update Funding Chart Tooltip (#225 )
2024-01-12 16:01:37 -05:00 · 2024-01-11 11:52:02 -08:00 · 2024-01-11 10:31:53 -08:00 · 2024-01-11 11:02:23 -05:00 · 2024-01-09 16:35:19 -08:00 · 2024-01-09 14:01:38 -08:00
40 changed files with 723 additions and 1234 deletions
@@ -39,9 +39,9 @@
    "@cosmjs/proto-signing": "^0.31.0",
    "@cosmjs/stargate": "^0.31.0",
    "@cosmjs/tendermint-rpc": "^0.31.0",
-    "@dydxprotocol/v4-abacus": "^1.1.33",
+    "@dydxprotocol/v4-abacus": "^1.2.3",
    "@dydxprotocol/v4-client-js": "^1.0.11",
-    "@dydxprotocol/v4-localization": "^1.1.12",
+    "@dydxprotocol/v4-localization": "^1.1.11",
    "@ethersproject/providers": "^5.7.2",
    "@js-joda/core": "^5.5.3",
    "@radix-ui/react-accordion": "^1.1.2",
@@ -1,5 +1,9 @@
 lockfileVersion: '6.0'

+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
 dependencies:
  '@0xsquid/sdk':
    specifier: ^1.10.0
@@ -23,14 +27,14 @@ dependencies:
    specifier: ^0.31.0
    version: 0.31.0
  '@dydxprotocol/v4-abacus':
-    specifier: ^1.1.33
-    version: 1.1.33
+    specifier: ^1.2.3
+    version: 1.2.3
  '@dydxprotocol/v4-client-js':
    specifier: ^1.0.11
    version: 1.0.11
  '@dydxprotocol/v4-localization':
-    specifier: ^1.1.12
-    version: 1.1.12
+    specifier: ^1.1.11
+    version: 1.1.11
  '@ethersproject/providers':
    specifier: ^5.7.2
    version: 5.7.2
@@ -987,8 +991,8 @@ packages:
    resolution: {integrity: sha512-RpfLEtTlyIxeNPGKcokS+p3BZII/Q3bYxryFRglh5H3A3T8q9fsLYm72VYAMEOOIBLEa8o93kFLiBDUWKrwXZA==}
    dev: true

-  /@dydxprotocol/v4-abacus@1.1.33:
-    resolution: {integrity: sha512-VlIOaOPR4ImSWGmKK3+M4VHdMDdTk7qI77Iopppq11qU7f8wdwk4OeedTSuAMxezKez2nCP3J/x3Da+FtrKRqg==}
+  /@dydxprotocol/v4-abacus@1.2.3:
+    resolution: {integrity: sha512-OHGhN4uQo/ikRjeGzf+wGblFvb0uRA916QvQXG4LixsJy7H7HAt7AeZr9LqTM/GqYJicMmZCUS3WIMqgZ20hKA==}
    dev: false

  /@dydxprotocol/v4-client-js@1.0.11:
@@ -1019,8 +1023,8 @@ packages:
      - utf-8-validate
    dev: false

-  /@dydxprotocol/v4-localization@1.1.12:
-    resolution: {integrity: sha512-Mn6Nuosb2nwvxWMviz4emzyoxIOOkI3XJjzateBbOv++tXPxnbLtCLFOU6mMdUk5ZwFnjgb5SEFypXH69cw+xg==}
+  /@dydxprotocol/v4-localization@1.1.11:
+    resolution: {integrity: sha512-ZHnyrWD1bEpvY1tctkcmSV6A5+hQSYBFwyjbiyOqepqDqrv24J5a3hlZU94lDyYf+7Sdk3alOvy9Z7Lpk59nvw==}
    dev: false

  /@dydxprotocol/v4-proto@0.4.1:
@@ -14809,7 +14813,3 @@ packages:
  /zwitch@2.0.4:
    resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
    dev: true
-
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false
@@ -39,7 +39,7 @@
   "environments": {
      "dydxprotocol-dev": {
         "name": "v4 Dev",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydxprotocol-testnet",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -113,7 +113,7 @@
      },
      "dydxprotocol-dev-2": {
         "name": "v4 Dev 2",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydxprotocol-testnet",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -186,7 +186,7 @@
      },
      "dydxprotocol-dev-4": {
         "name": "v4 Dev 4",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydxprotocol-testnet",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -259,7 +259,7 @@
      },
      "dydxprotocol-dev-5": {
         "name": "v4 Dev 5",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydxprotocol-testnet",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -332,7 +332,7 @@
      },
      "dydxprotocol-staging": {
         "name": "v4 Staging",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydxprotocol-testnet",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -407,7 +407,7 @@
      },
      "dydxprotocol-staging-forced-update": {
         "name": "v4 Staging Forced Update",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydxprotocol-testnet",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -480,7 +480,7 @@
      },
      "dydxprotocol-staging-west": {
         "name": "v4 Staging West",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydxprotocol-testnet",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -555,7 +555,7 @@
      },
      "dydxprotocol-testnet": {
         "name": "v4 Public Testnet",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydx-testnet-4",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -634,7 +634,7 @@
      },
      "dydxprotocol-testnet-dydx": {
         "name": "v4 Public Testnet/dYdX",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydx-testnet-4",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -710,7 +710,7 @@
      },
      "dydxprotocol-testnet-nodefleet": {
         "name": "v4 Public Testnet/nodefleet",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydx-testnet-4",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -786,7 +786,7 @@
      },
      "dydxprotocol-testnet-kingnodes": {
         "name": "v4 Public Testnet/KingNodes",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydx-testnet-4",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -862,7 +862,7 @@
      },
      "dydxprotocol-testnet-liquify": {
         "name": "v4 Public Testnet/Liquify",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydx-testnet-4",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -938,7 +938,7 @@
      },
      "dydxprotocol-testnet-polkachu": {
         "name": "v4 Public Testnet/Polkahcu",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydx-testnet-4",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -1005,7 +1005,7 @@
      },
      "dydxprotocol-testnet-bware": {
         "name": "v4 Public Testnet/BWare",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydx-testnet-4",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -23,4 +23,4 @@ Accordion.args = {
      content: 'Answer 2.',
    },
  ],
-};
+};
@@ -24,7 +24,6 @@ import {
  CoinsIcon,
  CommentIcon,
  CopyIcon,
-  CubeIcon,
  DepositIcon,
  DepthChartIcon,
  DiscordIcon,
@@ -99,7 +98,6 @@ export enum IconName {
  Coins = 'Coins',
  Comment = 'Comment',
  Copy = 'Copy',
-  Cube = 'Cube',
  Deposit = 'Deposit',
  DepthChart = 'DepthChart',
  Discord = 'Discord',
@@ -175,7 +173,6 @@ const icons = {
  [IconName.Coins]: CoinsIcon,
  [IconName.Comment]: CommentIcon,
  [IconName.Copy]: CopyIcon,
-  [IconName.Cube]: CubeIcon,
  [IconName.Deposit]: DepositIcon,
  [IconName.DepthChart]: DepthChartIcon,
  [IconName.Discord]: DiscordIcon,
@@ -65,9 +65,6 @@ type ElementProps = {
    resolution?: number;
    stripRelativeWords?: boolean;
  };
-  timeOptions?: {
-    useUTC?: boolean;
-  };
  tag?: React.ReactNode;
  withParentheses?: boolean;
  locale?: string;
@@ -92,7 +89,6 @@ export const Output = ({
  relativeTimeFormatOptions = {
    format: 'singleCharacter',
  },
-  timeOptions,
  tag,
  withParentheses,
  locale = navigator.language || 'en-US',
@@ -169,21 +165,16 @@ export const Output = ({
      if ((typeof value !== 'string' && typeof value !== 'number') || !value) return null;
      const date = new Date(value);
      const dateString = {
-        [OutputType.Date]: date.toLocaleString(selectedLocale, {
-          dateStyle: 'medium',
-          timeZone: timeOptions?.useUTC ? 'UTC' : undefined,
-        }),
+        [OutputType.Date]: date.toLocaleString(selectedLocale, { dateStyle: 'medium' }),
        [OutputType.DateTime]: date.toLocaleString(selectedLocale, {
          dateStyle: 'short',
          timeStyle: 'short',
-          timeZone: timeOptions?.useUTC ? 'UTC' : undefined,
        }),
        [OutputType.Time]: date.toLocaleString(selectedLocale, {
          hour12: false,
          hour: '2-digit',
          minute: '2-digit',
          second: '2-digit',
-          timeZone: timeOptions?.useUTC ? 'UTC' : undefined,
        }),
      }[type];

@@ -33,19 +33,17 @@ import {

 import { useAsyncList } from 'react-stately';

-import { useBreakpoints, useStringGetter } from '@/hooks';
+import { useBreakpoints } from '@/hooks';
 import { MediaQueryKeys } from '@/hooks/useBreakpoints';

+import { Checkbox } from '@/components/Checkbox';
+
 import { breakpoints } from '@/styles';
 import { layoutMixins } from '@/styles/layoutMixins';

-import { STRING_KEYS } from '@/constants/localization';
-import { CaretIcon } from '@/icons';
-
 import { Icon, IconName } from './Icon';
 import { Tag } from './Tag';
 import { MustBigNumber } from '@/lib/numbers';
-import { Button } from './Button';

 export { TableCell } from './Table/TableCell';
 export { TableColumnHeader } from './Table/TableColumnHeader';
@@ -94,7 +92,6 @@ type ElementProps<TableRowData extends object | CustomRowConfig, TableRowKey ext
  selectionBehavior?: 'replace' | 'toggle';
  onRowAction?: (key: TableRowKey, row: TableRowData) => void;
  slotEmpty?: React.ReactNode;
-  initialNumRowsToShow?: number;
  // collection: TableCollection<string>;
  // children: React.ReactNode;
 };
@@ -124,7 +121,6 @@ export const Table = <TableRowData extends object, TableRowKey extends Key>({
  selectionMode = 'single',
  selectionBehavior = 'toggle',
  slotEmpty,
-  initialNumRowsToShow = data.length,
  // shouldRowRender,

  // collection,
@@ -140,8 +136,6 @@ export const Table = <TableRowData extends object, TableRowKey extends Key>({
  style,
 }: ElementProps<TableRowData, TableRowKey> & StyleProps) => {
  const [selectedKeys, setSelectedKeys] = useState(new Set<TableRowKey>());
-  const [numRowsToShow, setNumRowsToShow] = useState(initialNumRowsToShow);
-  const stringGetter = useStringGetter();

  const currentBreakpoints = useBreakpoints();
  const shownColumns = columns.filter(
@@ -194,77 +188,67 @@ export const Table = <TableRowData extends object, TableRowKey extends Key>({
  const isEmpty = data.length === 0;

  return (
-    <>
-      <Styled.TableWrapper
-        className={className}
-        style={style}
-        isEmpty={isEmpty}
-        withGradientCardRows={withGradientCardRows}
-        withOuterBorder={withOuterBorder}
-      >
-        {!isEmpty ? (
-          <TableRoot
-            aria-label={label}
-            sortDescriptor={list.sortDescriptor}
-            onSortChange={list.sort}
-            selectedKeys={selectedKeys}
-            setSelectedKeys={setSelectedKeys}
-            selectionMode={selectionMode}
-            selectionBehavior={selectionBehavior}
-            getRowAttributes={getRowAttributes}
-            onRowAction={
-              onRowAction &&
-              ((key: TableRowKey) => onRowAction(key, data.find((row) => getRowKey(row) === key)!))
-            }
-            // shouldRowRender={shouldRowRender}
-            hideHeader={hideHeader}
-            withGradientCardRows={withGradientCardRows}
-            withFocusStickyRows={withFocusStickyRows}
-            withOuterBorder={withOuterBorder}
-            withInnerBorders={withInnerBorders}
-            withScrollSnapColumns={withScrollSnapColumns}
-            withScrollSnapRows={withScrollSnapRows}
-          >
-            <TableHeader columns={shownColumns}>
-              {(column) => (
-                <Column
-                  key={column.columnKey}
-                  childColumns={column.childColumns}
-                  allowsSorting={column.allowsSorting ?? true}
-                  allowsResizing={column.allowsResizing}
-                  width={column.width}
-                >
-                  {column.label}
-                  {column.tag && <Tag>{column.tag}</Tag>}
-                </Column>
-              )}
-            </TableHeader>
-
-            <TableBody items={list.items.slice(0, numRowsToShow)}>
-              {(item) => (
-                <Row key={getRowKey(item)}>
-                  {(columnKey) => (
-                    <Cell key={`${getRowKey(item)}-${columnKey}`}>
-                      {columns.find((column) => column.columnKey === columnKey)?.renderCell?.(item)}
-                    </Cell>
-                  )}
-                </Row>
-              )}
-            </TableBody>
-          </TableRoot>
-        ) : (
-          <Styled.Empty withOuterBorder={withOuterBorder}>{slotEmpty}</Styled.Empty>
-        )}
-      </Styled.TableWrapper>
-      {numRowsToShow !== undefined && numRowsToShow < data.length && (
-        <Styled.ViewMoreButton
-          onClick={() => setNumRowsToShow(data.length)}
-          slotRight={<CaretIcon />}
+    <Styled.TableWrapper
+      className={className}
+      style={style}
+      isEmpty={isEmpty}
+      withGradientCardRows={withGradientCardRows}
+      withOuterBorder={withOuterBorder}
+    >
+      {!isEmpty ? (
+        <TableRoot
+          aria-label={label}
+          sortDescriptor={list.sortDescriptor}
+          onSortChange={list.sort}
+          selectedKeys={selectedKeys}
+          setSelectedKeys={setSelectedKeys}
+          selectionMode={selectionMode}
+          selectionBehavior={selectionBehavior}
+          getRowAttributes={getRowAttributes}
+          onRowAction={
+            onRowAction &&
+            ((key: TableRowKey) => onRowAction(key, data.find((row) => getRowKey(row) === key)!))
+          }
+          // shouldRowRender={shouldRowRender}
+          hideHeader={hideHeader}
+          withGradientCardRows={withGradientCardRows}
+          withFocusStickyRows={withFocusStickyRows}
+          withOuterBorder={withOuterBorder}
+          withInnerBorders={withInnerBorders}
+          withScrollSnapColumns={withScrollSnapColumns}
+          withScrollSnapRows={withScrollSnapRows}
        >
-          {stringGetter({ key: STRING_KEYS.VIEW_MORE })}
-        </Styled.ViewMoreButton>
+          <TableHeader columns={shownColumns}>
+            {(column) => (
+              <Column
+                key={column.columnKey}
+                childColumns={column.childColumns}
+                allowsSorting={column.allowsSorting ?? true}
+                allowsResizing={column.allowsResizing}
+                width={column.width}
+              >
+                {column.label}
+                {column.tag && <Tag>{column.tag}</Tag>}
+              </Column>
+            )}
+          </TableHeader>
+
+          <TableBody items={list.items}>
+            {(item) => (
+              <Row key={getRowKey(item)}>
+                {(columnKey) => (
+                  <Cell key={`${getRowKey(item)}-${columnKey}`}>
+                    {columns.find((column) => column.columnKey === columnKey)?.renderCell?.(item)}
+                  </Cell>
+                )}
+              </Row>
+            )}
+          </TableBody>
+        </TableRoot>
+      ) : (
+        <Styled.Empty withOuterBorder={withOuterBorder}>{slotEmpty}</Styled.Empty>
      )}
-    </>
+    </Styled.TableWrapper>
  );
 };

@@ -938,8 +922,3 @@ Styled.Row = styled.div`
  ${layoutMixins.inlineRow}
  padding: var(--tableCell-padding);
 `;
-
-Styled.ViewMoreButton = styled(Button)`
-  --button-backgroundColor: var(--color-layer-2);
-  width: 100%;
-`;
@@ -1,26 +1,33 @@
-import React, { useContext, useState } from 'react';
+import React, { PropsWithChildren, useContext, useState } from 'react';

 import { Point } from '@visx/point';
 import { localPoint } from '@visx/event';
-import { XYChart, DataContext } from '@visx/xychart';
+import { XYChart, DataContext, type EventHandlerParams } from '@visx/xychart';
 import { getScaleBandwidth } from '@/components/visx/getScaleBandwidth';

 export const XYChartWithPointerEvents = ({
-  onPointerMove, onPointerUp, onPointerPressedChange, ...props
+  onPointerMove,
+  onPointerUp,
+  onPointerPressedChange,
+  ...props
 }: {
-  onPointerMove?: (point: Point) => void;
-  onPointerUp?: (point: Point) => void;
+  onPointerMove?: (point: Point | EventHandlerParams<object>) => void;
+  onPointerUp?: (point: Point | EventHandlerParams<object>) => void;
  onPointerPressedChange?: (isPointerPressed: boolean) => void;
-} & React.PropsWithChildren<Parameters<typeof XYChart>>) => {
+} & PropsWithChildren<Parameters<typeof XYChart>[0]>) => {
  const { xScale, yScale } = useContext(DataContext);
-
  const [lastPointerMoveEvent, setLastPointerMoveEvent] = useState<React.PointerEvent>();

  const pointerContainerPosition = lastPointerMoveEvent ? localPoint(lastPointerMoveEvent) : null;

-  const pointerChartPosition = xScale && yScale && pointerContainerPosition &&
+  const pointerChartPosition =
+    xScale &&
+    yScale &&
+    pointerContainerPosition &&
    new Point({
+      // @ts-expect-error invert supposedly doesn't exist on AxisScale
      x: xScale.invert(pointerContainerPosition?.x - getScaleBandwidth(xScale) / 2),
+      // @ts-expect-error invert supposedly doesn't exist on AxisScale
      y: yScale.invert(pointerContainerPosition?.y - getScaleBandwidth(yScale) / 2),
    });

@@ -29,15 +36,13 @@ export const XYChartWithPointerEvents = ({
      {...props}
      onPointerMove={({ event }) => {
        setLastPointerMoveEvent(event as React.PointerEvent);
-        if (pointerChartPosition)
-          onPointerMove?.(pointerChartPosition);
+        if (pointerChartPosition) onPointerMove?.(pointerChartPosition);
      }}
      onPointerOut={() => setLastPointerMoveEvent(undefined)}
      onPointerDown={() => onPointerPressedChange?.(true)}
      onPointerUp={() => {
        onPointerPressedChange?.(false);
-        if (pointerChartPosition)
-          onPointerUp?.(pointerChartPosition);
+        if (pointerChartPosition) onPointerUp?.(pointerChartPosition);
      }}
    >
      {props.children}
@@ -119,13 +119,6 @@ export const InputSelectionOption = Abacus.exchange.dydx.abacus.output.input.Sel
 // ------ Wallet ------ //
 export type Wallet = Abacus.exchange.dydx.abacus.output.Wallet;
 export type AccountBalance = Abacus.exchange.dydx.abacus.output.AccountBalance;
-export type TradingRewards = Abacus.exchange.dydx.abacus.output.TradingRewards;
-export type HistoricalTradingReward = Abacus.exchange.dydx.abacus.output.HistoricalTradingReward;
-export const HistoricaTradingRewardsPeriod =
-  Abacus.exchange.dydx.abacus.state.manager.HistoricaTradingRewardsPeriod;
-const historicalTradingRewardsPeriod = [...HistoricaTradingRewardsPeriod.values()] as const;
-export type HistoricaTradingRewardsPeriods = (typeof historicalTradingRewardsPeriod)[number];
-
 export type Subaccount = Abacus.exchange.dydx.abacus.output.Subaccount;
 export type SubaccountPosition = Abacus.exchange.dydx.abacus.output.SubaccountPosition;
 export type SubaccountOrder = Abacus.exchange.dydx.abacus.output.SubaccountOrder;
@@ -149,7 +142,7 @@ const historicalPnlPeriod = [...HistoricalPnlPeriod.values()] as const;
 export type HistoricalPnlPeriods = (typeof historicalPnlPeriod)[number];

 // ------ Transfer Items ------ //
-export const TransferInputField = Abacus.exchange.dydx.abacus.state.modal.TransferInputField;
+export const TransferInputField = Abacus.exchange.dydx.abacus.state.model.TransferInputField;
 const transferInputFields = [...TransferInputField.values()] as const;
 export type TransferInputFields = (typeof transferInputFields)[number];

@@ -158,7 +151,7 @@ const transferTypes = [...TransferType.values()] as const;
 export type TransferTypes = (typeof transferTypes)[number];

 // ------ Trade Items ------ //
-export const TradeInputField = Abacus.exchange.dydx.abacus.state.modal.TradeInputField;
+export const TradeInputField = Abacus.exchange.dydx.abacus.state.model.TradeInputField;
 const tradeInputFields = [...TradeInputField.values()] as const;
 export type TradeInputFields = (typeof tradeInputFields)[number];

@@ -169,7 +162,7 @@ export type TradeState<T> = {
 };

 export const ClosePositionInputField =
-  Abacus.exchange.dydx.abacus.state.modal.ClosePositionInputField;
+  Abacus.exchange.dydx.abacus.state.model.ClosePositionInputField;

 const closePositionInputFields = [...ClosePositionInputField.values()] as const;
 export type ClosePositionInputFields = (typeof closePositionInputFields)[number];
@@ -243,16 +236,6 @@ export const HISTORICAL_PNL_PERIODS: Record<
  [HistoricalPnlPeriod.Period90d.name]: HistoricalPnlPeriod.Period90d,
 };

-export const HISTORICAL_TRADING_REWARDS_PERIODS: Record<
-  KotlinIrEnumValues<typeof HistoricaTradingRewardsPeriod>,
-  HistoricaTradingRewardsPeriods
-> = {
-  [HistoricaTradingRewardsPeriod.MONTHLY.name]: HistoricaTradingRewardsPeriod.MONTHLY,
-  [HistoricaTradingRewardsPeriod.WEEKLY.name]: HistoricaTradingRewardsPeriod.WEEKLY,
-  [HistoricaTradingRewardsPeriod.DAILY.name]: HistoricaTradingRewardsPeriod.DAILY,
-  [HistoricaTradingRewardsPeriod.BLOCK.name]: HistoricaTradingRewardsPeriod.BLOCK,
-};
-
 export const ORDER_STATUS_STRINGS: Record<KotlinIrEnumValues<typeof AbacusOrderStatus>, string> = {
  [AbacusOrderStatus.open.name]: STRING_KEYS.OPEN_STATUS,
  [AbacusOrderStatus.open.rawValue]: STRING_KEYS.OPEN_STATUS,
@@ -96,6 +96,7 @@ export type AnalyticsEventData<T extends AnalyticsEvent> =
        elapsedTime?: number;
        blockHeight?: number;
        indexerBlockHeight?: number;
+        trailingBlocks?: number;
      }
    : // Navigation
    T extends AnalyticsEvent.NavigatePage
@@ -0,0 +1,40 @@
+import { OrderSide } from '@dydxprotocol/v4-client-js';
+import { FundingDirection } from './markets';
+
+// ------ Depth Chart ------ //
+export enum DepthChartSeries {
+  Asks = 'Asks',
+  Bids = 'Bids',
+  MidMarket = 'MidMarket',
+}
+
+export type DepthChartDatum = {
+  size: number;
+  price: number;
+  depth: number;
+  seriesKey: DepthChartSeries;
+};
+
+export type DepthChartPoint = {
+  side: OrderSide;
+  price: number;
+  size: number;
+};
+
+export const SERIES_KEY_FOR_ORDER_SIDE = {
+  [OrderSide.BUY]: DepthChartSeries.Bids,
+  [OrderSide.SELL]: DepthChartSeries.Asks,
+};
+
+// ------ Funding Chart ------ //
+export enum FundingRateResolution {
+  OneHour = 'OneHour',
+  EightHour = 'EightHour',
+  Annualized = 'Annualized',
+}
+
+export type FundingChartDatum = {
+  time: number;
+  fundingRate: number;
+  direction: FundingDirection;
+};
@@ -25,4 +25,5 @@ export const DEFAULT_MARKETID = 'ETH-USD';
 export enum FundingDirection {
  ToShort = 'ToShort',
  ToLong = 'ToLong',
+  None = 'None',
 }
@@ -97,7 +97,7 @@ export const useAnalytics = () => {
  }, []);

  // AnalyticsEvent.NetworkStatus
-  const { height, indexerHeight, status } = useApiState();
+  const { height, indexerHeight, status, trailingBlocks} = useApiState();

  useEffect(() => {
    if (status) {
@@ -114,6 +114,7 @@ export const useAnalytics = () => {
        elapsedTime: lastSuccessfulIndexerRpcQuery && Date.now() - lastSuccessfulIndexerRpcQuery,
        blockHeight: height ?? undefined,
        indexerBlockHeight: indexerHeight ?? undefined,
+        trailingBlocks: trailingBlocks ?? undefined
      });
    }
  }, [status]);
@@ -71,7 +71,7 @@ export const getIndexerHeight = (apiState: Nullable<AbacusApiState>) => {
 export const useApiState = () => {
  const stringGetter = useStringGetter();
  const apiState = useSelector(getApiState, shallowEqual);
-  const { haltedBlock, height, status, trailingBlocks } = apiState ?? {};
+  const { haltedBlock, height, status, trailingBlocks} = apiState ?? {};
  const statusErrorMessage = getStatusErrorMessage({ apiState, stringGetter });
  const indexerHeight = getIndexerHeight(apiState);

@@ -0,0 +1,44 @@
+import { useMemo } from 'react';
+import { shallowEqual, useSelector } from 'react-redux';
+
+import { DepthChartSeries, DepthChartDatum } from '@/constants/charts';
+
+import { getCurrentMarketOrderbook } from '@/state/perpetualsSelectors';
+
+import { MustBigNumber } from '@/lib/numbers';
+
+export const useOrderbookValuesForDepthChart = () => {
+  const orderbook = useSelector(getCurrentMarketOrderbook, shallowEqual);
+
+  return useMemo(() => {
+    const bids = (orderbook?.bids?.toArray() ?? [])
+      .filter(Boolean)
+      .map((datum) => ({ ...datum, seriesKey: DepthChartSeries.Bids } as DepthChartDatum));
+
+    const asks = (orderbook?.asks?.toArray() ?? [])
+      .filter(Boolean)
+      .map((datum) => ({ ...datum, seriesKey: DepthChartSeries.Asks } as DepthChartDatum));
+
+    const lowestBid = bids[bids.length - 1];
+    const highestBid = bids[0];
+    const lowestAsk = asks[0];
+    const highestAsk = asks[asks.length - 1];
+
+    const midMarketPrice = orderbook?.midPrice;
+    const spread = MustBigNumber(lowestAsk?.price ?? 0).minus(highestBid?.price ?? 0);
+    const spreadPercent = orderbook?.spreadPercent;
+
+    return {
+      bids,
+      asks,
+      lowestBid,
+      highestBid,
+      lowestAsk,
+      highestAsk,
+      midMarketPrice,
+      spread,
+      spreadPercent,
+      orderbook,
+    };
+  }, [orderbook]);
+};
@@ -1 +1 @@
-<svg fill="none" height="10" viewBox="0 0 15 10" width="15" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m.321829 1.09389c.200562-.192959.469529-.298401.747791-.29315.27827.00525.54307.120763.73621.32115l5.194 5.5132 5.19397-5.5132c.0944-.10408.2088-.188152.3363-.247234.1275-.059081.2655-.091968.406-.096713.1404-.004746.2804.018748.4116.069088s.2509.126504.3522.223979c.1012.09747.1818.21427.2371.34347.0552.12921.084.26819.0845.40871.0006.14052-.0271.27972-.0813.40936s-.1339.24707-.2344.34534l-5.94997 6.3c-.09795.10163-.21538.18245-.34527.23766-.1299.05521-.26959.08367-.41073.08367s-.28083-.02846-.41073-.08367c-.12989-.05521-.24732-.13603-.34527-.23766l-5.950001-6.3c-.192962-.20056-.29840394-.46953-.29315364-.74779.00525031-.27827.12076264-.54307.32115364-.73621z" fill="currentColor" fill-rule="evenodd"/></svg>
+<svg fill="none" height="10" viewBox="0 0 15 10" width="15" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m.321829 1.09389c.200562-.192959.469529-.298401.747791-.29315.27827.00525.54307.120763.73621.32115l5.194 5.5132 5.19397-5.5132c.0944-.10408.2088-.188152.3363-.247234.1275-.059081.2655-.091968.406-.096713.1404-.004746.2804.018748.4116.069088s.2509.126504.3522.223979c.1012.09747.1818.21427.2371.34347.0552.12921.084.26819.0845.40871.0006.14052-.0271.27972-.0813.40936s-.1339.24707-.2344.34534l-5.94997 6.3c-.09795.10163-.21538.18245-.34527.23766-.1299.05521-.26959.08367-.41073.08367s-.28083-.02846-.41073-.08367c-.12989-.05521-.24732-.13603-.34527-.23766l-5.950001-6.3c-.192962-.20056-.29840394-.46953-.29315364-.74779.00525031-.27827.12076264-.54307.32115364-.73621z" fill="currentColor" fill-rule="evenodd"/></svg>
@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.95513 1.00169C7.89506 1.00645 7.83628 1.02054 7.78124 1.04337L1.31971 3.71042C1.2243 3.74983 1.14329 3.81414 1.08653 3.89553C1.02977 3.97691 0.999705 4.07186 1 4.16883V11.8366C1.00078 11.9327 1.03135 12.0265 1.08805 12.1069C1.14474 12.1873 1.22517 12.2508 1.31971 12.2898L7.78124 14.9568C7.85011 14.9853 7.92463 15 8 15C8.07536 15 8.14989 14.9853 8.21876 14.9568L14.6803 12.2898C14.7748 12.2508 14.8552 12.1873 14.9119 12.1069C14.9686 12.0265 14.9992 11.9327 15 11.8366V4.16883C15.0003 4.07186 14.9702 3.97691 14.9134 3.89553C14.8567 3.81414 14.7756 3.74983 14.6803 3.71042L8.21876 1.04337C8.13605 1.00911 8.04538 0.994778 7.95513 1.00169ZM8 2.04351L13.1378 4.16883L8 6.28894L2.86219 4.16883L8 2.04351ZM2.07693 4.93457L7.46153 7.15886V13.7328L2.07693 11.5084V4.93457ZM13.923 4.93457V11.5084L8.53846 13.7328V7.15886L13.923 4.93457Z" fill="currentColor"/>
-</svg>
@@ -19,7 +19,6 @@ export { default as CoinMarketCapIcon } from './logos/coinmarketcap.svg';
 export { default as CoinsIcon } from './coins.svg';
 export { default as CommentIcon } from './comment.svg';
 export { default as CopyIcon } from './copy.svg';
-export { default as CubeIcon } from './cube.svg';
 export { default as DepositIcon } from './deposit.svg';
 export { default as DepthChartIcon } from './depth-chart.svg';
 export { default as DiscordIcon } from './discord.svg';
@@ -9,8 +9,6 @@ import type {
  TransferInputFields,
  HistoricalPnlPeriods,
  ParsingError,
-  HistoricaTradingRewardsPeriods,
-  HistoricaTradingRewardsPeriod,
 } from '@/constants/abacus';

 import {
@@ -220,12 +218,6 @@ class AbacusStateManager {
    this.stateManager.historicalPnlPeriod = period;
  };

-  setHistoricalTradingRewardPeriod = (
-    period: (typeof HistoricaTradingRewardsPeriod)[keyof typeof HistoricaTradingRewardsPeriod]
-  ) => {
-    this.stateManager.historicalTradingRewardPeriod = period;
-  };
-
  switchNetwork = (network: DydxNetwork) => {
    this.stateManager.environmentId = network;

@@ -270,16 +262,17 @@ class AbacusStateManager {
  ) => this.stateManager.cancelOrder(orderId, callback);

  cctpWithdraw = (
-    callback: (success: boolean, parsingError: Nullable<ParsingError>, data: string) => void
+    callback: (
+      success: boolean,
+      parsingError: Nullable<ParsingError>,
+      data: string,
+    ) => void
  ): void => this.stateManager.commitCCTPWithdraw(callback);

  // ------ Utils ------ //
  getHistoricalPnlPeriod = (): Nullable<HistoricalPnlPeriods> =>
    this.stateManager.historicalPnlPeriod;

-  getHistoricalTradingRewardPeriod = (): HistoricaTradingRewardsPeriods =>
-    this.stateManager.historicalTradingRewardPeriod;
-
  handleCandlesSubscription = ({
    channelId,
    subscribe,
@@ -29,7 +29,6 @@ import {
  setSubaccount,
  setTransfers,
  setWallet,
-  setTradingRewards,
 } from '@/state/account';

 import { setApiState } from '@/state/app';
@@ -97,12 +96,6 @@ class AbacusStateNotifier implements AbacusStateNotificationProtocol {
        }
      }

-      if (changes.has(Changes.tradingRewards)) {
-        if (updatedState.account?.tradingRewards) {
-          dispatch(setTradingRewards(updatedState.account?.tradingRewards));
-        }
-      }
-
      if (changes.has(Changes.configs)) {
        dispatch(setConfigs(updatedState.configs));
      }
@@ -1,4 +1,4 @@
-import { createConfig, configureChains, mainnet, Chain, Connector, usePublicClient } from 'wagmi';
+import { createConfig, configureChains, mainnet, Chain } from 'wagmi';
 import { goerli } from 'wagmi/chains';

 import {
@@ -28,6 +28,7 @@ import {
  celoAlfajores,
  scroll,
  kava,
+  sepolia,
 } from 'viem/chains';

 import { alchemyProvider } from 'wagmi/providers/alchemy';
@@ -55,7 +56,7 @@ import { isTruthy } from './isTruthy';
 export const WAGMI_SUPPORTED_CHAINS: Chain[] = [
  mainnet,
  goerli,
-
+  sepolia,
  arbitrum,
  arbitrumGoerli,
  avalanche,
@@ -26,13 +26,12 @@ import { useAccounts, useStringGetter, useTokenConfigs } from '@/hooks';
 import { getOnboardingState } from '@/state/accountSelectors';
 import { openDialog } from '@/state/dialogs';

+import abacusStateManager from '@/lib/abacus';
 import { isTruthy } from '@/lib/isTruthy';
 import { truncateAddress } from '@/lib/wallet';

 import { DYDXBalancePanel } from './rewards/DYDXBalancePanel';
 import { MigratePanel } from './rewards/MigratePanel';
-import { GovernancePanel } from './rewards/GovernancePanel';
-import { StakingPanel } from './rewards/StakingPanel';

 const ENS_CHAIN_ID = 1; // Ethereum

@@ -179,7 +178,7 @@ const Profile = () => {
          onClick={() => dispatch(openDialog({ type: DialogTypes.Help }))}
        />
      </Styled.EqualGrid>
-
+      
      <MigratePanel />
      <DYDXBalancePanel />

@@ -231,9 +230,6 @@ const Profile = () => {
          withInnerBorders={false}
        />
      </Styled.TablePanel>
-
-      <GovernancePanel />
-      <StakingPanel />
    </Styled.MobileProfileLayout>
  );
 };
@@ -247,7 +243,6 @@ Styled.MobileProfileLayout = styled.div`

  gap: 1rem;
  padding: 1.25rem 0.9rem;
-  max-width: 100vw;
 `;

 Styled.Header = styled.header`
@@ -342,7 +337,7 @@ Styled.Details = styled(Details)`

 Styled.RewardsPanel = styled(Panel)`
  align-self: flex-start;
-
+  
  &,
  > * {
    height: 100%;
@@ -118,7 +118,7 @@ export default () => {
                    },
                    {
                      value: PortfolioRoute.Positions,
-                      slotBefore: <Styled.Icon iconName={IconName.Cube} />,
+                      slotBefore: <Styled.Icon iconName={IconName.Positions} />,
                      label: stringGetter({ key: STRING_KEYS.POSITIONS }),
                      href: PortfolioRoute.Positions,
                    },
@@ -1,79 +0,0 @@
-import styled, { AnyStyledComponent } from 'styled-components';
-import { useDispatch } from 'react-redux';
-
-import { ButtonAction, ButtonSize } from '@/constants/buttons';
-import { STRING_KEYS } from '@/constants/localization';
-import { DialogTypes } from '@/constants/dialogs';
-
-import { useStringGetter, useURLConfigs } from '@/hooks';
-
-import { Panel } from '@/components/Panel';
-import { IconName } from '@/components/Icon';
-import { IconButton } from '@/components/IconButton';
-import { Link } from '@/components/Link';
-
-import { openDialog } from '@/state/dialogs';
-
-export const GovernancePanel = () => {
-  const stringGetter = useStringGetter();
-  const dispatch = useDispatch();
-  const { governanceLearnMore } = useURLConfigs();
-
-  return (
-    <Styled.Panel
-      slotHeaderContent={
-        <Styled.Title>{stringGetter({ key: STRING_KEYS.GOVERNANCE })}</Styled.Title>
-      }
-      slotRight={
-        <Styled.Arrow>
-          <Styled.IconButton
-            action={ButtonAction.Base}
-            iconName={IconName.Arrow}
-            size={ButtonSize.Small}
-          />
-        </Styled.Arrow>
-      }
-      onClick={() => dispatch(openDialog({ type: DialogTypes.ExternalNavKeplr }))}
-    >
-      <Styled.Description>
-        {stringGetter({ key: STRING_KEYS.GOVERNANCE_DESCRIPTION })}
-        <Link href={governanceLearnMore} onClick={(e) => e.stopPropagation()}>
-          {stringGetter({ key: STRING_KEYS.LEARN_MORE })} →
-        </Link>
-      </Styled.Description>
-    </Styled.Panel>
-  );
-};
-
-const Styled: Record<string, AnyStyledComponent> = {};
-
-Styled.Panel = styled(Panel)`
-  height: fit-content;
-`;
-
-Styled.Description = styled.div`
-  color: var(--color-text-0);
-  --link-color: var(--color-text-1);
-
-  a {
-    display: inline;
-    ::before {
-      content: ' ';
-    }
-  }
-`;
-
-Styled.IconButton = styled(IconButton)`
-  color: var(--color-text-0);
-  --color-border: var(--color-layer-6);
-`;
-
-Styled.Arrow = styled.div`
-  padding-right: 1.5rem;
-`;
-
-Styled.Title = styled.h3`
-  font: var(--font-medium-book);
-  color: var(--color-text-2);
-  margin-bottom: -1rem;
-`;
@@ -146,15 +146,14 @@ Styled.Title = styled.h3`
  color: var(--color-text-2);

  padding: var(--panel-paddingY) var(--panel-paddingX) 0;
-  margin-bottom: -0.5rem;
 `;

 Styled.MigrateAction = styled.div`
  ${layoutMixins.flexEqualColumns}
  align-items: center;
+  margin: 1rem;
  gap: 1rem;
  padding: 1rem;
-  margin: 1rem;
  width: 100%;

  background-color: var(--color-layer-2);
@@ -1,107 +0,0 @@
-import { useCallback, useState } from 'react';
-import styled, { AnyStyledComponent } from 'styled-components';
-import { shallowEqual, useSelector } from 'react-redux';
-
-import breakpoints from '@/styles/breakpoints';
-import { layoutMixins } from '@/styles/layoutMixins';
-import { useStringGetter } from '@/hooks';
-
-import {
-  HISTORICAL_TRADING_REWARDS_PERIODS,
-  HistoricaTradingRewardsPeriod,
-  HistoricaTradingRewardsPeriods,
-} from '@/constants/abacus';
-
-import { ComingSoon } from '@/components/ComingSoon';
-import { Panel } from '@/components/Panel';
-import { ToggleGroup } from '@/components/ToggleGroup';
-import { TradingRewardHistoryTable } from '@/views/tables/TradingRewardHistoryTable';
-
-import { getHistoricalTradingRewards } from '@/state/accountSelectors';
-import abacusStateManager from '@/lib/abacus';
-import { STRING_KEYS } from '@/constants/localization';
-
-export const RewardHistoryPanel = () => {
-  const stringGetter = useStringGetter();
-  const historicalTradingRewards = useSelector(getHistoricalTradingRewards, shallowEqual);
-
-  const [selectedPeriod, setSelectedPeriod] = useState<HistoricaTradingRewardsPeriods>(
-    abacusStateManager.getHistoricalTradingRewardPeriod() || HistoricaTradingRewardsPeriod.WEEKLY
-  );
-
-  const onSelectPeriod = useCallback(
-    (periodName: string) => {
-      setSelectedPeriod(
-        HISTORICAL_TRADING_REWARDS_PERIODS[
-          periodName as keyof typeof HISTORICAL_TRADING_REWARDS_PERIODS
-        ]
-      );
-    },
-    [setSelectedPeriod, selectedPeriod]
-  );
-
-  return (
-    <Panel
-      slotHeader={
-        <Styled.Header>
-          <Styled.Title>
-            <h3>{stringGetter({ key: STRING_KEYS.REWARD_HISTORY })}</h3>
-            <span>{stringGetter({ key: STRING_KEYS.REWARD_HISTORY_DESCRIPTION })}</span>
-          </Styled.Title>
-          <ToggleGroup
-            items={[
-              {
-                value: HistoricaTradingRewardsPeriod.MONTHLY.name,
-                label: stringGetter({ key: STRING_KEYS.MONTHLY }),
-              },
-              {
-                value: HistoricaTradingRewardsPeriod.WEEKLY.name,
-                label: stringGetter({ key: STRING_KEYS.WEEKLY }),
-              },
-              {
-                value: HistoricaTradingRewardsPeriod.DAILY.name,
-                label: stringGetter({ key: STRING_KEYS.DAILY }),
-              },
-            ]}
-            value={selectedPeriod.name}
-            onValueChange={onSelectPeriod}
-          />
-        </Styled.Header>
-      }
-    >
-      {historicalTradingRewards ? (
-        <TradingRewardHistoryTable period={selectedPeriod} />
-      ) : (
-        <ComingSoon />
-      )}
-    </Panel>
-  );
-};
-
-const Styled: Record<string, AnyStyledComponent> = {};
-
-Styled.Header = styled.div`
-  ${layoutMixins.spacedRow}
-
-  padding: 1rem 1rem 0;
-  margin-bottom: -0.5rem;
-
-  @media ${breakpoints.notTablet} {
-    padding: 1.25rem 1.5rem 0;
-  }
-`;
-
-Styled.Title = styled.div`
-  color: var(--color-text-0);
-  font: var(--font-small-book);
-
-  h3 {
-    font: var(--font-medium-book);
-    color: var(--color-text-2);
-  }
-`;
-
-Styled.Content = styled.div`
-  ${layoutMixins.flexColumn}
-  gap: 0.75rem;
-`;
@@ -30,16 +30,18 @@ export const RewardsHelpPanel = () => {
      <Accordion
        items={[
          {
-            header: stringGetter({ key: STRING_KEYS.FAQ_WHO_IS_ELIGIBLE_QUESTION }),
-            content: stringGetter({ key: STRING_KEYS.FAQ_WHO_IS_ELIGIBLE_ANSWER }),
+            header: 'Who is eligible for trading rewards?',
+            content: 'All traders are eligible for trading rewards.',
          },
          {
-            header: stringGetter({ key: STRING_KEYS.FAQ_HOW_DO_TRADING_REWARDS_WORK_QUESTION }),
-            content: stringGetter({ key: STRING_KEYS.FAQ_HOW_DO_TRADING_REWARDS_WORK_ANSWER }),
+            header: 'How do trading rewards work?',
+            content:
+              'Immediately after each fill, trading rewards are sent directly to the trader’s dYdX Chain address, based on the amount of fees paid by the trader.',
          },
          {
-            header: stringGetter({ key: STRING_KEYS.FAQ_HOW_DO_I_CLAIM_MY_REWARDS_QUESTION }),
-            content: stringGetter({ key: STRING_KEYS.FAQ_HOW_DO_I_CLAIM_MY_REWARDS_ANSWER }),
+            header: 'How do I claim my rewards?',
+            content:
+              'Each block, trading rewards are automatically sent directly to the trader’s dYdX Chain address.',
          },
        ]}
      />
@@ -1,11 +1,13 @@
 import styled, { AnyStyledComponent } from 'styled-components';
+import { useDispatch } from 'react-redux';
 import { useNavigate } from 'react-router-dom';

 import { STRING_KEYS } from '@/constants/localization';
 import { ButtonAction, ButtonSize } from '@/constants/buttons';
+import { DialogTypes } from '@/constants/dialogs';
 import { AppRoute } from '@/constants/routes';

-import { useBreakpoints, useStringGetter } from '@/hooks';
+import { useBreakpoints, useStringGetter, useURLConfigs } from '@/hooks';

 import { breakpoints } from '@/styles';
 import { layoutMixins } from '@/styles/layoutMixins';
@@ -14,21 +16,32 @@ import { BackButton } from '@/components/BackButton';
 import { Panel } from '@/components/Panel';
 import { IconName } from '@/components/Icon';
 import { IconButton } from '@/components/IconButton';
+import { Link } from '@/components/Link';
+
+import { openDialog } from '@/state/dialogs';

 import { DYDXBalancePanel } from './DYDXBalancePanel';
 import { MigratePanel } from './MigratePanel';
 import { LaunchIncentivesPanel } from './LaunchIncentivesPanel';
 import { RewardsHelpPanel } from './RewardsHelpPanel';
-import { TradingRewardsSummaryPanel } from './TradingRewardsSummaryPanel';
-import { RewardHistoryPanel } from './RewardHistoryPanel';
-import { GovernancePanel } from './GovernancePanel';
-import { StakingPanel } from './StakingPanel';

 const RewardsPage = () => {
+  const dispatch = useDispatch();
  const stringGetter = useStringGetter();
+  const { governanceLearnMore, stakingLearnMore } = useURLConfigs();
  const { isTablet, isNotTablet } = useBreakpoints();
  const navigate = useNavigate();

+  const panelArrow = (
+    <Styled.Arrow>
+      <Styled.IconButton
+        action={ButtonAction.Base}
+        iconName={IconName.Arrow}
+        size={ButtonSize.Small}
+      />
+    </Styled.Arrow>
+  );
+
  return (
    <Styled.Page>
      {isTablet && (
@@ -37,32 +50,50 @@ const RewardsPage = () => {
          {stringGetter({ key: STRING_KEYS.TRADING_REWARDS })}
        </Styled.MobileHeader>
      )}
-      <Styled.GridLayout>
-        {import.meta.env.VITE_V3_TOKEN_ADDRESS && isNotTablet && <Styled.MigratePanel />}
+      {import.meta.env.VITE_V3_TOKEN_ADDRESS && isNotTablet && <MigratePanel />}

-        {isTablet ? (
-          <Styled.LaunchIncentivesPanel />
-        ) : (
-          <>
-            <Styled.LaunchIncentivesPanel />
-            <Styled.DYDXBalancePanel />
-          </>
-        )}
+      {isTablet ? (
+        <LaunchIncentivesPanel />
+      ) : (
+        <Styled.PanelRowIncentivesAndBalance>
+          <LaunchIncentivesPanel />
+          <DYDXBalancePanel />
+        </Styled.PanelRowIncentivesAndBalance>
+      )}

-        <Styled.TradingRewardsColumn>
-          <TradingRewardsSummaryPanel />
-          {isTablet && <RewardsHelpPanel />}
-          <RewardHistoryPanel />
-        </Styled.TradingRewardsColumn>
+      <Styled.PanelRow>
+        <Styled.Panel
+          slotHeaderContent={
+            <Styled.Title>{stringGetter({ key: STRING_KEYS.GOVERNANCE })}</Styled.Title>
+          }
+          slotRight={panelArrow}
+          onClick={() => dispatch(openDialog({ type: DialogTypes.ExternalNavKeplr }))}
+        >
+          <Styled.Description>
+            {stringGetter({ key: STRING_KEYS.GOVERNANCE_DESCRIPTION })}
+            <Link href={governanceLearnMore} onClick={(e) => e.stopPropagation()}>
+              {stringGetter({ key: STRING_KEYS.LEARN_MORE })} →
+            </Link>
+          </Styled.Description>
+        </Styled.Panel>

-        {isNotTablet && (
-          <Styled.OtherColumn>
-            <GovernancePanel />
-            <StakingPanel />
-            <RewardsHelpPanel />
-          </Styled.OtherColumn>
-        )}
-      </Styled.GridLayout>
+        <Styled.Panel
+          slotHeaderContent={
+            <Styled.Title>{stringGetter({ key: STRING_KEYS.STAKING })}</Styled.Title>
+          }
+          slotRight={panelArrow}
+          onClick={() => dispatch(openDialog({ type: DialogTypes.ExternalNavKeplr }))}
+        >
+          <Styled.Description>
+            {stringGetter({ key: STRING_KEYS.STAKING_DESCRIPTION })}
+            <Link href={stakingLearnMore} onClick={(e) => e.stopPropagation()}>
+              {stringGetter({ key: STRING_KEYS.LEARN_MORE })} →
+            </Link>
+          </Styled.Description>
+        </Styled.Panel>
+      </Styled.PanelRow>
+
+      <RewardsHelpPanel />
    </Styled.Page>
  );
 };
@@ -73,6 +104,7 @@ const Styled: Record<string, AnyStyledComponent> = {};

 Styled.Page = styled.div`
  ${layoutMixins.contentContainerPage}
+  gap: 1.5rem;
  padding: 2rem;
  align-items: center;

@@ -97,64 +129,54 @@ Styled.MobileHeader = styled.header`
  ${layoutMixins.stickyHeader}
  z-index: 2;
  padding: 1.25rem 0;
+  margin-bottom: -1.5rem;

  font: var(--font-large-medium);
  color: var(--color-text-2);
  background-color: var(--color-layer-2);
 `;

-Styled.GridLayout = styled.div`
-  --gap: 1.5rem;
-  display: grid;
-  grid-template-columns: 2fr 1fr;
-  gap: var(--gap);
+Styled.Panel = styled(Panel)`
+  height: fit-content;
+`;

-  > * {
-    gap: var(--gap);
+Styled.Title = styled.h3`
+  font: var(--font-medium-book);
+  color: var(--color-text-2);
+  margin-bottom: -1rem;
+`;
+
+Styled.Description = styled.div`
+  color: var(--color-text-0);
+  --link-color: var(--color-text-1);
+
+  a {
+    display: inline;
+    ::before {
+      content: ' ';
+    }
  }
+`;

-  grid-template-areas:
-    'migrate migrate'
-    'incentives balance'
-    'rewards other';
+Styled.PanelRow = styled.div`
+  ${layoutMixins.gridEqualColumns}
+  gap: 1.5rem;

  @media ${breakpoints.tablet} {
-    --gap: 1rem;
+    grid-auto-flow: row;
    grid-template-columns: 1fr;
-    grid-template-areas:
-      'incentives'
-      'rewards';
  }
 `;

-Styled.MigratePanel = styled(MigratePanel)`
-  grid-area: migrate;
+Styled.PanelRowIncentivesAndBalance = styled(Styled.PanelRow)`
+  grid-template-columns: 2fr 1fr;
 `;

-Styled.LaunchIncentivesPanel = styled(LaunchIncentivesPanel)`
-  grid-area: incentives;
+Styled.IconButton = styled(IconButton)`
+  color: var(--color-text-0);
+  --color-border: var(--color-layer-6);
 `;

-Styled.DYDXBalancePanel = styled(DYDXBalancePanel)`
-  grid-area: balance;
-`;
-
-Styled.TradingRewardsColumn = styled.div`
-  grid-area: rewards;
-  ${layoutMixins.flexColumn}
-`;
-
-Styled.OtherColumn = styled.div`
-  grid-area: other;
-  ${layoutMixins.flexColumn}
-`;
-
-Styled.RewardHistoryHeader = styled.div`
-  h3 {
-    font: var(--font-medium-book);
-    color: var(--color-text-2);
-  }
-
-  padding: 1rem 1.5rem 0;
-  margin-bottom: -0.5rem;
+Styled.Arrow = styled.div`
+  padding: 1rem;
 `;
@@ -1,77 +0,0 @@
-import styled, { AnyStyledComponent } from 'styled-components';
-import { useDispatch } from 'react-redux';
-
-import { ButtonAction, ButtonSize } from '@/constants/buttons';
-import { STRING_KEYS } from '@/constants/localization';
-import { DialogTypes } from '@/constants/dialogs';
-
-import { useStringGetter, useURLConfigs } from '@/hooks';
-
-import { Panel } from '@/components/Panel';
-import { IconName } from '@/components/Icon';
-import { IconButton } from '@/components/IconButton';
-import { Link } from '@/components/Link';
-
-import { openDialog } from '@/state/dialogs';
-
-export const StakingPanel = () => {
-  const stringGetter = useStringGetter();
-  const dispatch = useDispatch();
-  const { stakingLearnMore } = useURLConfigs();
-
-  return (
-    <Styled.Panel
-      slotHeaderContent={<Styled.Title>{stringGetter({ key: STRING_KEYS.STAKING })}</Styled.Title>}
-      slotRight={
-        <Styled.Arrow>
-          <Styled.IconButton
-            action={ButtonAction.Base}
-            iconName={IconName.Arrow}
-            size={ButtonSize.Small}
-          />
-        </Styled.Arrow>
-      }
-      onClick={() => dispatch(openDialog({ type: DialogTypes.ExternalNavKeplr }))}
-    >
-      <Styled.Description>
-        {stringGetter({ key: STRING_KEYS.STAKING_DESCRIPTION })}
-        <Link href={stakingLearnMore} onClick={(e) => e.stopPropagation()}>
-          {stringGetter({ key: STRING_KEYS.LEARN_MORE })} →
-        </Link>
-      </Styled.Description>
-    </Styled.Panel>
-  );
-};
-
-const Styled: Record<string, AnyStyledComponent> = {};
-
-Styled.Panel = styled(Panel)`
-  height: fit-content;
-`;
-
-Styled.Description = styled.div`
-  color: var(--color-text-0);
-  --link-color: var(--color-text-1);
-
-  a {
-    display: inline;
-    ::before {
-      content: ' ';
-    }
-  }
-`;
-
-Styled.IconButton = styled(IconButton)`
-  color: var(--color-text-0);
-  --color-border: var(--color-layer-6);
-`;
-
-Styled.Arrow = styled.div`
-  padding-right: 1.5rem;
-`;
-
-Styled.Title = styled.h3`
-  font: var(--font-medium-book);
-  color: var(--color-text-2);
-  margin-bottom: -1rem;
-`;
@@ -1,133 +0,0 @@
-import styled, { AnyStyledComponent } from 'styled-components';
-import { shallowEqual, useSelector } from 'react-redux';
-
-import { STRING_KEYS } from '@/constants/localization';
-import { layoutMixins } from '@/styles/layoutMixins';
-import { useStringGetter, useTokenConfigs } from '@/hooks';
-
-import { AssetIcon } from '@/components/AssetIcon';
-import { ComingSoon } from '@/components/ComingSoon';
-import { Details } from '@/components/Details';
-import { Output, OutputType } from '@/components/Output';
-import { Panel } from '@/components/Panel';
-
-import { getHistoricalTradingRewards } from '@/state/accountSelectors';
-
-export const TradingRewardsSummaryPanel = () => {
-  const stringGetter = useStringGetter();
-  const historicalTradingRewards = useSelector(getHistoricalTradingRewards, shallowEqual);
-  const currentWeekTradingReward = historicalTradingRewards?.get('WEEKLY')?.firstOrNull();
-  const { chainTokenLabel } = useTokenConfigs();
-
-  return (
-    <Panel
-      slotHeader={
-        <Styled.Header>{stringGetter({ key: STRING_KEYS.TRADING_REWARDS_SUMMARY })}</Styled.Header>
-      }
-    >
-      <Styled.Content>
-        {currentWeekTradingReward ? (
-          <Styled.TradingRewardsDetails
-            layout="grid"
-            items={[
-              {
-                key: 'week',
-                label: (
-                  <Styled.Label>
-                    <h4>{stringGetter({ key: STRING_KEYS.THIS_WEEK })}</h4>
-                  </Styled.Label>
-                ),
-                value: (
-                  <Styled.Column>
-                    <Output
-                      slotRight={<Styled.AssetIcon symbol={chainTokenLabel} />}
-                      type={OutputType.Asset}
-                      value={currentWeekTradingReward.amount}
-                    />
-                    <Styled.TimePeriod>
-                      <Output
-                        type={OutputType.Date}
-                        value={currentWeekTradingReward.startedAtInMilliseconds}
-                        timeOptions={{ useUTC: true }}
-                      />
-                      →
-                      <Output
-                        type={OutputType.Date}
-                        value={currentWeekTradingReward.endedAtInMilliseconds}
-                        timeOptions={{ useUTC: true }}
-                      />
-                    </Styled.TimePeriod>
-                  </Styled.Column>
-                ),
-              },
-              // TODO(@aforaleka): add all-time when supported
-            ]}
-          />
-        ) : (
-          <ComingSoon />
-        )}
-      </Styled.Content>
-    </Panel>
-  );
-};
-
-const Styled: Record<string, AnyStyledComponent> = {};
-
-Styled.Header = styled.div`
-  padding: var(--panel-paddingY) var(--panel-paddingX) 0;
-  font: var(--font-medium-book);
-  color: var(--color-text-2);
-`;
-
-Styled.Content = styled.div`
-  ${layoutMixins.flexColumn}
-  gap: 0.75rem;
-`;
-
-Styled.TradingRewardsDetails = styled(Details)`
-  --details-item-backgroundColor: var(--color-layer-6);
-
-  grid-template-columns: 1fr; // TODO(@aforaleka): change to 1fr 1fr when all-time is supported
-  gap: 1rem;
-
-  > div {
-    gap: 0.5rem;
-    padding: 1rem;
-    border-radius: 0.75em;
-    background-color: var(--color-layer-5);
-  }
-
-  dt {
-    width: 100%;
-  }
-
-  output {
-    color: var(--color-text-2);
-    font: var(--font-large-book);
-  }
-`;
-
-Styled.Label = styled.div`
-  ${layoutMixins.spacedRow}
-
-  font: var(--font-base-book);
-  color: var(--color-text-1);
-`;
-
-Styled.TimePeriod = styled.div`
-  ${layoutMixins.inlineRow}
-
-  &, output {
-    color: var(--color-text-0);
-    font: var(--font-small-book);
-  }
-`;
-
-Styled.Column = styled.div`
-  ${layoutMixins.flexColumn}
-  gap: 0.33rem;
-`;
-
-Styled.AssetIcon = styled(AssetIcon)`
-  margin-left: 0.5ch;
-`;
@@ -13,7 +13,6 @@ import type {
  HistoricalPnlPeriods,
  SubAccountHistoricalPNLs,
  UsageRestriction,
-  TradingRewards,
 } from '@/constants/abacus';

 import { OnboardingGuard, OnboardingState } from '@/constants/account';
@@ -25,7 +24,6 @@ import { getLocalStorage } from '@/lib/localStorage';
 export type AccountState = {
  balances?: Record<string, AccountBalance>;
  stakingBalances?: Record<string, AccountBalance>;
-  tradingRewards?: TradingRewards;
  wallet?: Nullable<Wallet>;
  walletType?: WalletType;

@@ -181,9 +179,6 @@ export const accountSlice = createSlice({
    setStakingBalances: (state, action: PayloadAction<Record<string, AccountBalance>>) => {
      state.stakingBalances = action.payload;
    },
-    setTradingRewards: (state, action: PayloadAction<TradingRewards>) => {
-      state.tradingRewards = action.payload;
-    },
    addUncommittedOrderClientId: (state, action: PayloadAction<number>) => {
      state.uncommittedOrderClientIds.push(action.payload);
    },
@@ -211,7 +206,6 @@ export const {
  viewedOrders,
  setBalances,
  setStakingBalances,
-  setTradingRewards,
  addUncommittedOrderClientId,
  removeUncommittedOrderClientId,
 } = accountSlice.actions;
@@ -343,17 +343,6 @@ export const getBalances = (state: RootState) => state.account?.balances;
 * */
 export const getStakingBalances = (state: RootState) => state.account?.stakingBalances;

-/**
- * @returns account all time trading rewards
- */
-export const getTotalTradingRewards = (state: RootState) => state.account?.tradingRewards?.total;
-
-/**
- * @returns account trading rewards aggregated by period
- */
-export const getHistoricalTradingRewards = (state: RootState) =>
-  state.account?.tradingRewards?.historical;
-
 /**
 * @returns UsageRestriction of the current session
 */
@@ -26,7 +26,12 @@ export const calculateFundingRateHistory = createSelector(
    return data.map(({ effectiveAtMilliseconds, rate }) => ({
      time: effectiveAtMilliseconds,
      fundingRate: rate,
-      direction: rate < 0 ? FundingDirection.ToLong : FundingDirection.ToShort,
+      direction:
+        rate === 0
+          ? FundingDirection.None
+          : rate < 0
+          ? FundingDirection.ToLong
+          : FundingDirection.ToShort,
    }));
  }
 );
@@ -119,12 +119,6 @@ export const MarketDetails: React.FC = () => {
      tooltip: 'initial-margin-fraction',
      value: <Output useGrouping value={initialMarginFraction} type={OutputType.SmallPercent} />,
    },
-    {
-      key: 'base-position-notional',
-      label: stringGetter({ key: STRING_KEYS.BASE_POSITION_NOTIONAL }),
-      tooltip: 'base-position-notional',
-      value: <Output useGrouping value={basePositionNotional} type={OutputType.Number} />,
-    },
  ];

  return (
@@ -0,0 +1,220 @@
+import { useMemo } from 'react';
+import { OrderSide } from '@dydxprotocol/v4-client-js';
+import type { RenderTooltipParams } from '@visx/xychart/lib/components/Tooltip';
+import { shallowEqual, useSelector } from 'react-redux';
+
+import type { Nullable } from '@/constants/abacus';
+import {
+  DepthChartDatum,
+  DepthChartPoint,
+  DepthChartSeries,
+  SERIES_KEY_FOR_ORDER_SIDE,
+} from '@/constants/charts';
+import { STRING_KEYS } from '@/constants/localization';
+
+import { useStringGetter } from '@/hooks';
+import { useOrderbookValuesForDepthChart } from '@/hooks/useOrderbookValues';
+
+import { TooltipContent } from '@/components/visx/TooltipContent';
+import { Details } from '@/components/Details';
+import { Output, OutputType } from '@/components/Output';
+
+import { getCurrentMarketAssetData } from '@/state/assetsSelectors';
+
+import { MustBigNumber } from '@/lib/numbers';
+
+type DepthChartTooltipProps = {
+  chartPointAtPointer: DepthChartPoint;
+  isEditingOrder?: boolean;
+  stepSizeDecimals: Nullable<number>;
+  tickSizeDecimals: Nullable<number>;
+} & Pick<RenderTooltipParams<DepthChartDatum>, 'colorScale' | 'tooltipData'>;
+
+export const DepthChartTooltipContent = ({
+  chartPointAtPointer,
+  colorScale,
+  isEditingOrder,
+  stepSizeDecimals,
+  tickSizeDecimals,
+  tooltipData,
+}: DepthChartTooltipProps) => {
+  const { nearestDatum } = tooltipData || {};
+  const stringGetter = useStringGetter();
+  const { spread, spreadPercent, midMarketPrice } = useOrderbookValuesForDepthChart();
+  const { id = '' } = useSelector(getCurrentMarketAssetData, shallowEqual) ?? {};
+
+  const priceImpact = useMemo(() => {
+    if (nearestDatum) {
+      const depthChartSeries = nearestDatum.key as DepthChartSeries;
+
+      return {
+        [DepthChartSeries.Bids]: MustBigNumber(nearestDatum?.datum.price)
+          .minus(chartPointAtPointer.price)
+          .div(nearestDatum?.datum.price),
+        [DepthChartSeries.Asks]: MustBigNumber(chartPointAtPointer.price)
+          .minus(nearestDatum?.datum.price)
+          .div(chartPointAtPointer.price),
+        [DepthChartSeries.MidMarket]: undefined,
+      }[depthChartSeries];
+    }
+    return undefined;
+  }, [nearestDatum, chartPointAtPointer.price]);
+
+  if (!isEditingOrder && !nearestDatum?.datum) return null;
+
+  return (
+    <TooltipContent
+      accentColor={
+        nearestDatum?.key &&
+        colorScale?.(
+          isEditingOrder ? SERIES_KEY_FOR_ORDER_SIDE[chartPointAtPointer.side] : nearestDatum.key
+        )
+      }
+    >
+      <h4>
+        {isEditingOrder
+          ? stringGetter({ key: STRING_KEYS.RELEASE_TO_EDIT })
+          : nearestDatum &&
+            {
+              [DepthChartSeries.Bids]: stringGetter({ key: STRING_KEYS.BIDS }),
+              [DepthChartSeries.Asks]: stringGetter({ key: STRING_KEYS.ASKS }),
+              [DepthChartSeries.MidMarket]: stringGetter({ key: STRING_KEYS.MID_MARKET }),
+            }[nearestDatum.key]}
+      </h4>
+
+      <Details
+        layout="column"
+        items={
+          isEditingOrder
+            ? [
+                {
+                  key: 'side',
+                  label: stringGetter({ key: STRING_KEYS.SIDE }),
+                  value: (
+                    <Output
+                      type={OutputType.Text}
+                      value={
+                        {
+                          [OrderSide.BUY]: stringGetter({
+                            key: STRING_KEYS.BUY,
+                          }),
+                          [OrderSide.SELL]: stringGetter({
+                            key: STRING_KEYS.SELL,
+                          }),
+                        }[chartPointAtPointer.side]
+                      }
+                    />
+                  ),
+                },
+                {
+                  key: 'limitPrice',
+                  label: stringGetter({ key: STRING_KEYS.LIMIT_PRICE }),
+                  value: (
+                    <Output
+                      type={OutputType.Fiat}
+                      value={chartPointAtPointer.price}
+                      useGrouping={false}
+                    />
+                  ),
+                },
+                {
+                  key: 'size',
+                  label: stringGetter({ key: STRING_KEYS.AMOUNT }),
+                  value: (
+                    <Output
+                      type={OutputType.Asset}
+                      value={chartPointAtPointer.size}
+                      fractionDigits={stepSizeDecimals}
+                      tag={id}
+                      useGrouping={false}
+                    />
+                  ),
+                },
+              ]
+            : nearestDatum?.key === DepthChartSeries.MidMarket
+            ? [
+                {
+                  key: 'midMarketPrice',
+                  label: stringGetter({ key: STRING_KEYS.PRICE }),
+                  value: (
+                    <Output type={OutputType.Fiat} value={midMarketPrice} useGrouping={false} />
+                  ),
+                },
+                {
+                  key: 'spread',
+                  label: stringGetter({ key: STRING_KEYS.ORDERBOOK_SPREAD }),
+                  value: (
+                    <>
+                      <Output
+                        type={OutputType.Fiat}
+                        value={spread}
+                        fractionDigits={tickSizeDecimals}
+                        useGrouping={false}
+                      />
+                      <Output
+                        type={OutputType.SmallPercent}
+                        value={spreadPercent}
+                        withParentheses
+                      />
+                    </>
+                  ),
+                },
+              ]
+            : [
+                {
+                  key: 'price',
+                  label: stringGetter({ key: STRING_KEYS.PRICE }),
+                  value: (
+                    <>
+                      {nearestDatum &&
+                        {
+                          [DepthChartSeries.Bids]: '≥',
+                          [DepthChartSeries.Asks]: '≤',
+                        }[nearestDatum.key]}
+                      <Output
+                        type={OutputType.Fiat}
+                        value={nearestDatum?.datum.price}
+                        useGrouping={false}
+                      />
+                    </>
+                  ),
+                },
+                {
+                  key: 'depth',
+                  label: stringGetter({ key: STRING_KEYS.TOTAL_SIZE }),
+                  value: (
+                    <Output
+                      type={OutputType.Asset}
+                      value={nearestDatum?.datum.depth}
+                      fractionDigits={stepSizeDecimals}
+                      tag={id}
+                      useGrouping={false}
+                    />
+                  ),
+                },
+                {
+                  key: 'cost',
+                  label: stringGetter({ key: STRING_KEYS.TOTAL_COST }),
+                  value: (
+                    <Output
+                      useGrouping
+                      type={OutputType.Fiat}
+                      value={
+                        nearestDatum
+                          ? nearestDatum?.datum.price * nearestDatum?.datum.depth
+                          : undefined
+                      }
+                    />
+                  ),
+                },
+                {
+                  key: 'priceImpact',
+                  label: stringGetter({ key: STRING_KEYS.PRICE_IMPACT }),
+                  value: <Output useGrouping type={OutputType.Percent} value={priceImpact} />,
+                },
+              ]
+        }
+      />
+    </TooltipContent>
+  );
+};
@@ -1,14 +1,20 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import styled, { AnyStyledComponent, css, keyframes } from 'styled-components';
 import { useSelector, shallowEqual } from 'react-redux';
+import { OrderSide } from '@dydxprotocol/v4-client-js';

-import { StringGetterFunction, STRING_KEYS } from '@/constants/localization';
+import {
+  DepthChartDatum,
+  DepthChartPoint,
+  DepthChartSeries,
+  SERIES_KEY_FOR_ORDER_SIDE,
+} from '@/constants/charts';
+import { StringGetterFunction } from '@/constants/localization';

 import { useBreakpoints } from '@/hooks';
+import { useOrderbookValuesForDepthChart } from '@/hooks/useOrderbookValues';

-import { MustBigNumber } from '@/lib/numbers';
-
-import { getCurrentMarketConfig, getCurrentMarketOrderbook } from '@/state/perpetualsSelectors';
+import { getCurrentMarketConfig } from '@/state/perpetualsSelectors';
 import { getCurrentMarketAssetData } from '@/state/assetsSelectors';

 import { XYChartWithPointerEvents } from '@/components/visx/XYChartWithPointerEvents';
@@ -21,24 +27,25 @@ import {
  darkTheme,
  DataProvider,
  EventEmitterProvider,
+  type EventHandlerParams,
 } from '@visx/xychart';
 import { LinearGradient } from '@visx/gradient';
 import { curveStepAfter } from '@visx/curve';
-import type { Point } from '@visx/point';
+import { Point } from '@visx/point';
 import Tooltip from '@/components/visx/XYChartTooltipWithBounds';
-import { TooltipContent } from '@/components/visx/TooltipContent';
 import { AxisLabelOutput } from '@/components/visx/AxisLabelOutput';

-import { Details } from '@/components/Details';
 import { LoadingSpace } from '@/components/Loading/LoadingSpinner';
-import { Output, OutputType } from '@/components/Output';
+import { OutputType } from '@/components/Output';

-import { OrderSide } from '@dydxprotocol/v4-client-js';
+import { MustBigNumber } from '@/lib/numbers';
+
+import { DepthChartTooltipContent } from './Tooltip';

 // @ts-ignore
 const theme = buildChartTheme({
  ...darkTheme,
-  colors: ['var(--color-positive)', 'var(--color-negative)', 'white'], // categorical colors, mapped to series via `dataKey`s
+  colors: ['var(--color-positive)', 'var(--color-negative)', 'var(--color-layer-6)'], // categorical colors, mapped to series via `dataKey`s
 });

 const clamp = (n: number, min: number, max: number) => Math.max(min, Math.min(max, n));
@@ -58,30 +65,6 @@ const formatNumber = (n: number, selectedLocale: string, isCompact: boolean = n
    : formattedNumber;
 };

-enum DepthChartSeries {
-  Asks = 'Asks',
-  Bids = 'Bids',
-  MidMarket = 'MidMarket',
-}
-
-type DepthChartDatum = {
-  size: number;
-  price: number;
-  depth: number;
-  seriesKey: DepthChartSeries;
-};
-
-const seriesKeyForOrderSide = {
-  [OrderSide.BUY]: DepthChartSeries.Bids,
-  [OrderSide.SELL]: DepthChartSeries.Asks,
-};
-
-type DepthChartPoint = {
-  side: OrderSide;
-  price: number;
-  size: number;
-};
-
 export const DepthChart = ({
  onChartClick,
  stringGetter,
@@ -96,8 +79,6 @@ export const DepthChart = ({
  const { isMobile } = useBreakpoints();

  // Chart data
-
-  const orderbook = useSelector(getCurrentMarketOrderbook, shallowEqual);
  const { id = '' } = useSelector(getCurrentMarketAssetData, shallowEqual) ?? {};
  const { stepSizeDecimals, tickSizeDecimals } =
    useSelector(getCurrentMarketConfig, shallowEqual) ?? {};
@@ -112,43 +93,15 @@ export const DepthChart = ({
    midMarketPrice,
    spread,
    spreadPercent,
-  } = useMemo(() => {
-    const bids = (orderbook?.bids?.toArray() ?? [])
-      .filter(Boolean)
-      .map((datum) => ({ ...datum, seriesKey: DepthChartSeries.Bids } as DepthChartDatum));
-
-    const asks = (orderbook?.asks?.toArray() ?? [])
-      .filter(Boolean)
-      .map((datum) => ({ ...datum, seriesKey: DepthChartSeries.Asks } as DepthChartDatum));
-
-    const lowestBid = bids[bids.length - 1];
-    const highestBid = bids[0];
-    const lowestAsk = asks[0];
-    const highestAsk = asks[asks.length - 1];
-
-    const midMarketPrice = orderbook?.midPrice;
-    const spread = MustBigNumber(lowestAsk?.price ?? 0).minus(highestBid?.price ?? 0);
-    const spreadPercent = orderbook?.spreadPercent;
-
-    return {
-      bids,
-      asks,
-      lowestBid,
-      highestBid,
-      lowestAsk,
-      highestAsk,
-      midMarketPrice,
-      spread,
-      spreadPercent,
-    };
-  }, [orderbook]);
+    orderbook,
+  } = useOrderbookValuesForDepthChart();

  // Chart state

  const [isPointerPressed, setIsPointerPressed] = useState(false);
  const [chartPointAtPointer, setChartPointAtPointer] = useState<DepthChartPoint>();

-  const isEditingOrder = isPointerPressed && chartPointAtPointer;
+  const isEditingOrder = Boolean(isPointerPressed && chartPointAtPointer);

  const [zoomDomain, setZoomDomain] = useState<undefined | number>();

@@ -193,12 +146,24 @@ export const DepthChart = ({
  }, [orderbook, zoomDomain]);

  const getChartPoint = useCallback(
-    ({ x: price, y: size }: Point) =>
-      ({
-        side: price < midMarketPrice! ? OrderSide.BUY : OrderSide.SELL,
+    (point: Point | EventHandlerParams<object>) => {
+      let price, size;
+      if (point instanceof Point) {
+        const { x, y } = point as Point;
+        price = x;
+        size = y;
+      } else {
+        const { svgPoint: { x, y } = {} } = point as EventHandlerParams<object>;
+        price = x;
+        size = y;
+      }
+
+      return {
+        side: MustBigNumber(price).lt(midMarketPrice!) ? OrderSide.BUY : OrderSide.SELL,
        price,
        size,
-      } as DepthChartPoint),
+      } as DepthChartPoint;
+    },
    [midMarketPrice]
  );

@@ -256,7 +221,7 @@ export const DepthChart = ({
            }}
            onPointerUp={(point) => point && onChartClick?.(getChartPoint(point))}
            onPointerMove={(point) => point && setChartPointAtPointer(getChartPoint(point))}
-            onPointerPressedChange={setIsPointerPressed}
+            onPointerPressedChange={(isPointerPressed) => setIsPointerPressed(isPointerPressed)}
          >
            <Axis
              orientation="bottom"
@@ -363,7 +328,7 @@ export const DepthChart = ({
                <Styled.XAxisLabelOutput
                  type={OutputType.Fiat}
                  value={
-                    isEditingOrder
+                    isEditingOrder && chartPointAtPointer
                      ? chartPointAtPointer.price
                      : tooltipData!.nearestDatum?.datum.price
                  }
@@ -374,8 +339,8 @@ export const DepthChart = ({
                      [DepthChartSeries.Bids]: 'var(--color-positive)',
                      [DepthChartSeries.MidMarket]: 'var(--color-layer-6)',
                    }[
-                      isEditingOrder
-                        ? seriesKeyForOrderSide[chartPointAtPointer.side]
+                      isEditingOrder && chartPointAtPointer
+                        ? SERIES_KEY_FOR_ORDER_SIDE[chartPointAtPointer.side]
                        : (tooltipData!.nearestDatum?.key as DepthChartSeries)
                    ]
                  }
@@ -389,7 +354,7 @@ export const DepthChart = ({
                  <Styled.YAxisLabelOutput
                    type={OutputType.Asset}
                    value={
-                      isEditingOrder
+                      isEditingOrder && chartPointAtPointer
                        ? chartPointAtPointer.size
                        : tooltipData!.nearestDatum?.datum.depth
                    }
@@ -400,8 +365,8 @@ export const DepthChart = ({
                        [DepthChartSeries.Bids]: 'var(--color-positive)',
                        [DepthChartSeries.MidMarket]: 'var(--color-layer-6)',
                      }[
-                        isEditingOrder
-                          ? seriesKeyForOrderSide[chartPointAtPointer.side]
+                        isEditingOrder && chartPointAtPointer
+                          ? SERIES_KEY_FOR_ORDER_SIDE[chartPointAtPointer.side]
                          : (tooltipData!.nearestDatum?.key as DepthChartSeries)
                      ]
                    }
@@ -410,181 +375,22 @@ export const DepthChart = ({
              }
              snapTooltipToDatumX={!isEditingOrder}
              snapTooltipToDatumY={isEditingOrder ? false : isMobile}
-              renderTooltip={({ tooltipData, colorScale }) => {
-                const { nearestDatum } = tooltipData || {};
-
-                if (!isEditingOrder && !nearestDatum?.datum) return null;
-
-                return (
-                  <TooltipContent
-                    accentColor={colorScale?.(
-                      isEditingOrder
-                        ? seriesKeyForOrderSide[chartPointAtPointer.side]
-                        : nearestDatum.key
-                    )}
-                  >
-                    <h4>
-                      {isEditingOrder
-                        ? 'Release mouse to edit order'
-                        : {
-                            [DepthChartSeries.Bids]: 'Bids',
-                            [DepthChartSeries.Asks]: 'Asks',
-                            [DepthChartSeries.MidMarket]: 'Mid-Market',
-                          }[nearestDatum.key]}
-                    </h4>
-
-                    <Details
-                      layout="column"
-                      items={
-                        isEditingOrder
-                          ? [
-                              {
-                                key: 'side',
-                                label: stringGetter({ key: STRING_KEYS.SIDE }),
-                                value: (
-                                  <Output
-                                    type={OutputType.Text}
-                                    value={
-                                      {
-                                        [OrderSide.BUY]: stringGetter({
-                                          key: STRING_KEYS.BUY,
-                                        }),
-                                        [OrderSide.SELL]: stringGetter({
-                                          key: STRING_KEYS.SELL,
-                                        }),
-                                      }[chartPointAtPointer.side]
-                                    }
-                                  />
-                                ),
-                              },
-                              {
-                                key: 'limitPrice',
-                                label: stringGetter({ key: STRING_KEYS.LIMIT_PRICE }),
-                                value: (
-                                  <Output
-                                    type={OutputType.Fiat}
-                                    value={chartPointAtPointer.price}
-                                    useGrouping={false}
-                                  />
-                                ),
-                              },
-                              {
-                                key: 'size',
-                                label: stringGetter({ key: STRING_KEYS.AMOUNT }),
-                                value: (
-                                  <Output
-                                    type={OutputType.Asset}
-                                    value={chartPointAtPointer.size}
-                                    fractionDigits={stepSizeDecimals}
-                                    tag={id}
-                                    useGrouping={false}
-                                  />
-                                ),
-                              },
-                            ]
-                          : nearestDatum?.key === DepthChartSeries.MidMarket
-                          ? [
-                              {
-                                key: 'midMarketPrice',
-                                // label: stringGetter({ key: STRING_KEYS.ORDERBOOK_MID_MARKET_PRICE }),
-                                label: stringGetter({ key: STRING_KEYS.PRICE }),
-                                value: (
-                                  <Output
-                                    type={OutputType.Fiat}
-                                    value={midMarketPrice}
-                                    useGrouping={false}
-                                  />
-                                ),
-                              },
-                              {
-                                key: 'spread',
-                                label: stringGetter({ key: STRING_KEYS.ORDERBOOK_SPREAD }),
-                                value: (
-                                  <>
-                                    <Output
-                                      type={OutputType.Fiat}
-                                      value={spread}
-                                      fractionDigits={tickSizeDecimals}
-                                      useGrouping={false}
-                                    />
-                                    <Output
-                                      type={OutputType.SmallPercent}
-                                      value={spreadPercent}
-                                      withParentheses
-                                    />
-                                  </>
-                                ),
-                              },
-                            ]
-                          : [
-                              {
-                                key: 'price',
-                                label: stringGetter({ key: STRING_KEYS.PRICE }),
-                                value: (
-                                  <>
-                                    {nearestDatum &&
-                                      {
-                                        [DepthChartSeries.Bids]: '≥',
-                                        [DepthChartSeries.Asks]: '≤',
-                                      }[nearestDatum.key]}
-                                    <Output
-                                      type={OutputType.Fiat}
-                                      value={nearestDatum?.datum.price}
-                                      useGrouping={false}
-                                    />
-                                  </>
-                                ),
-                              },
-                              {
-                                key: 'depth',
-                                label: stringGetter({ key: STRING_KEYS.TOTAL_SIZE }),
-                                value: (
-                                  <Output
-                                    type={OutputType.Asset}
-                                    value={nearestDatum?.datum.depth}
-                                    fractionDigits={stepSizeDecimals}
-                                    tag={id}
-                                    useGrouping={false}
-                                  />
-                                ),
-                              },
-                              {
-                                key: 'cost',
-                                label: stringGetter({ key: STRING_KEYS.TOTAL_COST }),
-                                value: (
-                                  <Output
-                                    useGrouping
-                                    type={OutputType.Fiat}
-                                    value={nearestDatum?.datum.price * nearestDatum?.datum.depth}
-                                  />
-                                ),
-                              },
-                              {
-                                key: 'priceImpact',
-                                label: stringGetter({ key: STRING_KEYS.PRICE_IMPACT }),
-                                value: (
-                                  <Output
-                                    useGrouping
-                                    type={OutputType.Percent}
-                                    value={{
-                                      [DepthChartSeries.Asks]: () =>
-                                        MustBigNumber(nearestDatum.datum.price)
-                                          .minus(lowestAsk.price)
-                                          .div(nearestDatum.datum.price),
-                                      [DepthChartSeries.Bids]: () =>
-                                        MustBigNumber(highestBid.price)
-                                          .minus(nearestDatum.datum.price)
-                                          .div(highestBid.price),
-                                    }[nearestDatum.key]()}
-                                  />
-                                ),
-                              },
-                            ]
-                      }
-                    />
-                  </TooltipContent>
-                );
-              }}
+              renderTooltip={({ tooltipData, colorScale }) =>
+                chartPointAtPointer && (
+                  <DepthChartTooltipContent
+                    {...{
+                      tooltipData,
+                      colorScale,
+                      isEditingOrder,
+                      chartPointAtPointer,
+                      stringGetter,
+                      selectedLocale,
+                      stepSizeDecimals,
+                      tickSizeDecimals,
+                    }}
+                  />
+                )
+              }
            />
          </XYChartWithPointerEvents>
        </EventEmitterProvider>
@@ -0,0 +1,107 @@
+import type { RenderTooltipParams } from '@visx/xychart/lib/components/Tooltip';
+import { TooltipContent } from '@/components/visx/TooltipContent';
+
+import { FundingRateResolution, type FundingChartDatum } from '@/constants/charts';
+import { STRING_KEYS } from '@/constants/localization';
+import { FundingDirection } from '@/constants/markets';
+import { useStringGetter } from '@/hooks';
+
+import { Details, DetailsItem } from '@/components/Details';
+import { Output, OutputType, ShowSign } from '@/components/Output';
+
+type FundingChartTooltipProps = {
+  fundingRateView: FundingRateResolution;
+  latestDatum: FundingChartDatum;
+} & Pick<RenderTooltipParams<FundingChartDatum>, 'tooltipData'>;
+
+export const FundingChartTooltipContent = ({
+  fundingRateView,
+  latestDatum,
+  tooltipData,
+}: FundingChartTooltipProps) => {
+  const { nearestDatum } = tooltipData || {};
+  const stringGetter = useStringGetter();
+
+  const tooltipDatum = nearestDatum?.datum ?? latestDatum;
+  const isShowingCurrentFundingRate = tooltipDatum === latestDatum;
+
+  return (
+    <TooltipContent
+      accentColor={
+        {
+          [FundingDirection.ToLong]: 'var(--color-negative)',
+          [FundingDirection.ToShort]: 'var(--color-positive)',
+          [FundingDirection.None]: 'var(--color-layer-6)',
+        }[tooltipDatum.direction]
+      }
+    >
+      <h4>
+        {isShowingCurrentFundingRate
+          ? stringGetter({ key: STRING_KEYS.CURRENT_FUNDING_RATE })
+          : stringGetter({ key: STRING_KEYS.HISTORICAL_FUNDING_RATE })}
+      </h4>
+
+      <Details
+        layout="column"
+        items={
+          [
+            {
+              key: 'direction',
+              label: stringGetter({ key: STRING_KEYS.DIRECTION }),
+              value: (
+                <Output
+                  type={OutputType.Text}
+                  value={
+                    {
+                      [FundingDirection.ToLong]: `${stringGetter({
+                        key: STRING_KEYS.SHORT_POSITION_SHORT,
+                      })} → ${stringGetter({
+                        key: STRING_KEYS.LONG_POSITION_SHORT,
+                      })}`,
+                      [FundingDirection.ToShort]: `${stringGetter({
+                        key: STRING_KEYS.LONG_POSITION_SHORT,
+                      })} → ${stringGetter({
+                        key: STRING_KEYS.SHORT_POSITION_SHORT,
+                      })}`,
+                      [FundingDirection.None]: undefined,
+                    }[tooltipDatum.direction]
+                  }
+                />
+              ),
+            },
+            {
+              key: 'fundingRate',
+              label: stringGetter({
+                key: {
+                  [FundingRateResolution.OneHour]: STRING_KEYS.RATE_1H,
+                  [FundingRateResolution.EightHour]: STRING_KEYS.RATE_8H,
+                  [FundingRateResolution.Annualized]: STRING_KEYS.ANNUALIZED,
+                }[fundingRateView],
+              }),
+              value: (
+                <Output
+                  type={OutputType.SmallPercent}
+                  value={
+                    {
+                      [FundingRateResolution.OneHour]: tooltipDatum.fundingRate,
+                      [FundingRateResolution.EightHour]: tooltipDatum.fundingRate * 8,
+                      [FundingRateResolution.Annualized]: tooltipDatum.fundingRate * (24 * 365),
+                    }[fundingRateView]
+                  }
+                  showSign={ShowSign.Both}
+                />
+              ),
+            },
+            {
+              key: 'time',
+              label: isShowingCurrentFundingRate
+                ? 'Time Remaining'
+                : stringGetter({ key: STRING_KEYS.TIME }),
+              value: <Output type={OutputType.DateTime} value={tooltipDatum.time} />,
+            },
+          ].filter(Boolean) as Array<DetailsItem>
+        }
+      />
+    </TooltipContent>
+  );
+};
@@ -3,39 +3,27 @@ import { shallowEqual, useSelector } from 'react-redux';
 import styled, { type AnyStyledComponent, css } from 'styled-components';
 import { curveMonotoneX, curveStepAfter } from '@visx/curve';

-import { useBreakpoints, useStringGetter } from '@/hooks';
 import { ButtonSize } from '@/constants/buttons';
+import { FundingRateResolution, type FundingChartDatum } from '@/constants/charts';
 import { STRING_KEYS } from '@/constants/localization';
-import { SMALL_PERCENT_DECIMALS, TINY_PERCENT_DECIMALS } from '@/constants/numbers';
 import { FundingDirection } from '@/constants/markets';
+import { SMALL_PERCENT_DECIMALS, TINY_PERCENT_DECIMALS } from '@/constants/numbers';
+import { useBreakpoints, useStringGetter } from '@/hooks';

 import { breakpoints } from '@/styles';

-import { Details, DetailsItem } from '@/components/Details';
-import { Output, OutputType, ShowSign } from '@/components/Output';
+import { Output, OutputType } from '@/components/Output';
 import { LoadingSpace } from '@/components/Loading/LoadingSpinner';
 import { ToggleGroup } from '@/components/ToggleGroup';

 import { TimeSeriesChart } from '@/components/visx/TimeSeriesChart';
 import { AxisLabelOutput } from '@/components/visx/AxisLabelOutput';
-import { TooltipContent } from '@/components/visx/TooltipContent';
 import type { TooltipContextType } from '@visx/xychart';

 import { calculateFundingRateHistory } from '@/state/perpetualsCalculators';

 import { MustBigNumber } from '@/lib/numbers';
-
-enum FundingRateResolution {
-  OneHour = 'OneHour',
-  EightHour = 'EightHour',
-  Annualized = 'Annualized',
-}
-
-type FundingChartDatum = {
-  time: number;
-  fundingRate: number;
-  direction: FundingDirection;
-};
+import { FundingChartTooltipContent } from './Tooltip';

 const FUNDING_RATE_TIME_RESOLUTION = 60 * 60 * 1000; // 1 hour

@@ -116,114 +104,20 @@ export const FundingChart = ({ selectedLocale }: ElementProps) => {
              {
                [FundingDirection.ToLong]: 'var(--color-negative)',
                [FundingDirection.ToShort]: 'var(--color-positive)',
+                [FundingDirection.None]: 'var(--color-layer-6)',
              }[tooltipDatum.direction]
            }
          />
        );
      }}
-      renderTooltip={({ tooltipData }) => {
-        const { nearestDatum } = tooltipData || {};
-
-        const tooltipDatum = nearestDatum?.datum ?? latestDatum;
-        const isShowingCurrentFundingRate = tooltipDatum === latestDatum;
-
-        return (
-          <TooltipContent
-            accentColor={
-              {
-                [FundingDirection.ToLong]: 'var(--color-negative)',
-                [FundingDirection.ToShort]: 'var(--color-positive)',
-              }[tooltipDatum.direction]
-            }
-          >
-            <h4>
-              {isShowingCurrentFundingRate
-                ? stringGetter({ key: STRING_KEYS.CURRENT_FUNDING_RATE })
-                : stringGetter({ key: STRING_KEYS.HISTORICAL_FUNDING_RATE })}
-            </h4>
-
-            <Details
-              layout="column"
-              items={
-                [
-                  {
-                    key: 'direction',
-                    label: stringGetter({ key: STRING_KEYS.DIRECTION }),
-                    value: (
-                      <Output
-                        type={OutputType.Text}
-                        value={
-                          {
-                            [FundingDirection.ToLong]: `${stringGetter({
-                              key: STRING_KEYS.SHORT_POSITION_SHORT,
-                            })} → ${stringGetter({
-                              key: STRING_KEYS.LONG_POSITION_SHORT,
-                            })}`,
-                            [FundingDirection.ToShort]: `${stringGetter({
-                              key: STRING_KEYS.LONG_POSITION_SHORT,
-                            })} → ${stringGetter({
-                              key: STRING_KEYS.SHORT_POSITION_SHORT,
-                            })}`,
-                          }[tooltipDatum.direction]
-                        }
-                      />
-                    ),
-                  },
-                  {
-                    key: 'fundingRate1h',
-                    label: stringGetter({ key: STRING_KEYS.RATE_1H }),
-                    value: (
-                      <Output
-                        type={OutputType.SmallPercent}
-                        value={tooltipDatum.fundingRate}
-                        showSign={ShowSign.Both}
-                      />
-                    ),
-                  },
-                  {
-                    key: 'fundingRate8h',
-                    label: stringGetter({ key: STRING_KEYS.RATE_8H }),
-                    value: (
-                      <Output
-                        type={OutputType.SmallPercent}
-                        value={tooltipDatum.fundingRate * 8}
-                        // value={
-                        //   Math.sign(tooltipDatum.fundingRate) *
-                        //   ((Math.abs(tooltipDatum.fundingRate) + 1) ** 8 - 1)
-                        // }
-                        showSign={ShowSign.Both}
-                      />
-                    ),
-                  },
-                  {
-                    key: 'fundingRateAnnualized',
-                    label: stringGetter({ key: STRING_KEYS.ANNUALIZED }),
-                    value: (
-                      <Output
-                        type={OutputType.SmallPercent}
-                        value={tooltipDatum.fundingRate * (24 * 365)}
-                        // value={
-                        //   Math.sign(tooltipDatum.fundingRate) *
-                        //   ((Math.abs(tooltipDatum.fundingRate) + 1) ** (24 * 365) - 1)
-                        // }
-                        showSign={ShowSign.Both}
-                      />
-                    ),
-                  },
-                  {
-                    key: 'time',
-                    label: isShowingCurrentFundingRate
-                      ? 'Time Remaining'
-                      : stringGetter({ key: STRING_KEYS.TIME }),
-                    value: <Output type={OutputType.DateTime} value={tooltipDatum.time} />,
-                  },
-                ].filter(Boolean) as Array<DetailsItem>
-              }
-            />
-          </TooltipContent>
-        );
-      }}
-      onTooltipContext={setTooltipContext}
+      renderTooltip={({ tooltipData }) => (
+        <FundingChartTooltipContent
+          fundingRateView={fundingRateView}
+          tooltipData={tooltipData}
+          latestDatum={latestDatum}
+        />
+      )}
+      onTooltipContext={(tooltipContext) => setTooltipContext(tooltipContext)}
      minZoomDomain={FUNDING_RATE_TIME_RESOLUTION * 4}
      numGridLines={1}
      slotEmpty={<LoadingSpace id="funding-chart-loading" />}
@@ -290,6 +184,7 @@ Styled.FundingRateToggle = styled.div`
 Styled.CurrentFundingRate = styled.div<{ isShowing?: boolean }>`
  place-self: start center;
  padding: clamp(1.5rem, 9rem - 15%, 4rem);
+  pointer-events: none;

  font: var(--font-large-book);

@@ -108,20 +108,6 @@ export const DepositButtonAndReceipt = ({

  const totalFees = (summary?.bridgeFee || 0) + (summary?.gasFee || 0);

-  const { toAmount, toAmountMin } = useMemo(() => {
-    if (isCctp) {
-      return {
-        toAmount: summary?.toAmount,
-        toAmountMin: summary?.toAmountMin,
-      };
-    } else {
-      return {
-        toAmount: summary?.toAmount && formatUnits(BigInt(summary.toAmount), usdcDecimals),
-        toAmountMin: summary?.toAmountMin && formatUnits(BigInt(summary.toAmountMin), usdcDecimals),
-      };
-    }
-  }, [isCctp, summary]);
-
  const submitButtonReceipt = [
    {
      key: 'expected-deposit-amount',
@@ -130,7 +116,7 @@ export const DepositButtonAndReceipt = ({
          {stringGetter({ key: STRING_KEYS.EXPECTED_DEPOSIT_AMOUNT })} <Tag>{usdcLabel}</Tag>
        </span>
      ),
-      value: <Output type={OutputType.Fiat} fractionDigits={TOKEN_DECIMALS} value={toAmount} />,
+      value: <Output type={OutputType.Fiat} fractionDigits={TOKEN_DECIMALS} value={summary?.toAmount} />,
      subitems: [
        {
          key: 'minimum-deposit-amount',
@@ -140,7 +126,7 @@ export const DepositButtonAndReceipt = ({
            </span>
          ),
          value: (
-            <Output type={OutputType.Fiat} fractionDigits={TOKEN_DECIMALS} value={toAmountMin} />
+            <Output type={OutputType.Fiat} fractionDigits={TOKEN_DECIMALS} value={summary?.toAmountMin} />
          ),
          tooltip: 'minimum-deposit-amount',
        },
@@ -1,154 +0,0 @@
-import styled, { type AnyStyledComponent } from 'styled-components';
-import { shallowEqual, useSelector } from 'react-redux';
-
-import { HistoricaTradingRewardsPeriods } from '@/constants/abacus';
-import { STRING_KEYS, StringGetterFunction } from '@/constants/localization';
-import { useStringGetter, useTokenConfigs } from '@/hooks';
-import { layoutMixins } from '@/styles/layoutMixins';
-
-import { AssetIcon } from '@/components/AssetIcon';
-import { Output, OutputType } from '@/components/Output';
-import { Table, TableCell, type ColumnDef } from '@/components/Table';
-
-import { getHistoricalTradingRewards } from '@/state/accountSelectors';
-
-export enum TradingRewardHistoryTableColumnKey {
-  Event = 'Event',
-  Earned = 'Earned',
-}
-
-const getTradingRewardHistoryTableColumnDef = ({
-  key,
-  chainTokenLabel,
-  stringGetter,
-}: {
-  key: TradingRewardHistoryTableColumnKey;
-  chainTokenLabel: string;
-  stringGetter: StringGetterFunction;
-}): ColumnDef<any> => ({
-  ...(
-    {
-      [TradingRewardHistoryTableColumnKey.Event]: {
-        columnKey: TradingRewardHistoryTableColumnKey.Event,
-        getCellValue: (row) => row.startedAtInMilliseconds,
-        label: 'Event',
-        renderCell: ({ startedAtInMilliseconds, endedAtInMilliseconds }) => (
-          <TableCell stacked>
-            <Styled.Rewarded>{stringGetter({ key: STRING_KEYS.REWARDED })}</Styled.Rewarded>
-            <Styled.TimePeriod>
-              {stringGetter({
-                key: STRING_KEYS.FOR_TRADING,
-                params: {
-                  PERIOD: (
-                    <>
-                      <Output
-                        type={OutputType.Date}
-                        value={startedAtInMilliseconds}
-                        timeOptions={{ useUTC: true }}
-                      />
-                      →
-                      <Output
-                        type={OutputType.Date}
-                        value={endedAtInMilliseconds}
-                        timeOptions={{ useUTC: true }}
-                      />
-                    </>
-                  ),
-                },
-              })}
-            </Styled.TimePeriod>
-          </TableCell>
-        ),
-      },
-      [TradingRewardHistoryTableColumnKey.Earned]: {
-        columnKey: TradingRewardHistoryTableColumnKey.Earned,
-        getCellValue: (row) => row.amount,
-        label: stringGetter({ key: STRING_KEYS.EARNED }),
-        renderCell: ({ amount }) => (
-          <Output
-            type={OutputType.Asset}
-            value={amount}
-            slotRight={<Styled.AssetIcon symbol={chainTokenLabel} />}
-          />
-        ),
-      },
-    } as Record<TradingRewardHistoryTableColumnKey, ColumnDef<any>>
-  )[key],
-});
-
-type ElementProps = {
-  columnKeys?: TradingRewardHistoryTableColumnKey[];
-  period: HistoricaTradingRewardsPeriods;
-};
-
-type StyleProps = {
-  withOuterBorder?: boolean;
-  withInnerBorders?: boolean;
-};
-
-export const TradingRewardHistoryTable = ({
-  period,
-  columnKeys = Object.values(TradingRewardHistoryTableColumnKey),
-  withOuterBorder,
-  withInnerBorders = true,
-}: ElementProps & StyleProps) => {
-  const stringGetter = useStringGetter();
-  const historicalTradingRewards = useSelector(getHistoricalTradingRewards, shallowEqual);
-  const periodTradingRewards = historicalTradingRewards?.get(period.name) ?? [];
-  const { chainTokenLabel } = useTokenConfigs();
-
-  return (
-    <Styled.Table
-      label="Reward History"
-      data={periodTradingRewards}
-      getRowKey={(row: any) => row.startedAtInMilliseconds}
-      columns={columnKeys.map((key: TradingRewardHistoryTableColumnKey) =>
-        getTradingRewardHistoryTableColumnDef({
-          key,
-          chainTokenLabel,
-          stringGetter,
-        })
-      )}
-      selectionBehavior="replace"
-      withOuterBorder={withOuterBorder}
-      withInnerBorders={withInnerBorders}
-      initialNumRowsToShow={5}
-      withScrollSnapColumns
-      withScrollSnapRows
-    />
-  );
-};
-
-const Styled: Record<string, AnyStyledComponent> = {};
-
-Styled.Table = styled(Table)`
-  --tableCell-padding: 0.5rem 0;
-  --tableHeader-backgroundColor: var(--color-layer-3);
-  --tableRow-backgroundColor: var(--color-layer-3);
-
-  tbody {
-    font: var(--font-medium-book);
-  }
-`;
-
-Styled.Rewarded = styled.span`
-  color: var(--color-text-2);
-`;
-
-Styled.TimePeriod = styled.div`
-  ${layoutMixins.inlineRow}
-
-  && {
-    color: var(--color-text-0);
-    font: var(--font-base-book);
-  }
-
-  output {
-    color: var(--color-text-1);
-    font: var(--font-base-book);
-  }
-`;
-
-Styled.AssetIcon = styled(AssetIcon)`
-  margin-left: 0.5ch;
-`;
Author	SHA1	Message	Date
Adam Fraser	8a2cb2a296	Add trailing blocks to NetworkStatus analytics event	2024-01-12 16:01:37 -05:00
Bill	ad6aa1af49	Bump abacus, fix onboarding toAmount (#229 )	2024-01-11 11:52:02 -08:00
Jared Vu	55b2c3fb4a	Update Funding Chart Tooltip (#225 ) * 🚧 depth chart * ✨ Fixed types and shortened FundingRateTooltip * 💄 update depth chart color scale to use css var * 💄 use layer-6 instead of text-1 * 🌐 Add localization, fix nits	2024-01-11 10:31:53 -08:00
moo-onthelawn	83bcde00eb	TRCL-1623 Update Positions icon in nav sidebar (#226 ) * update icon * remove unused cube icon	2024-01-11 11:02:23 -05:00
Jared Vu	e8024b9337	Add Sepolia (#222 )	2024-01-09 16:35:19 -08:00
Jared Vu	8280e512bc	Remove BasePositionNotional DetailItem (#223 )	2024-01-09 14:01:38 -08:00