Bump abacus, fix onboarding toAmount

package.json

@@ -41,7 +41,7 @@
     "@cosmjs/tendermint-rpc": "^0.31.0",
     "@dydxprotocol/v4-abacus": "^1.2.3",
     "@dydxprotocol/v4-client-js": "^1.0.11",
-    "@dydxprotocol/v4-localization": "^1.1.11",
+    "@dydxprotocol/v4-localization": "^1.1.6",
     "@ethersproject/providers": "^5.7.2",
     "@js-joda/core": "^5.5.3",
     "@radix-ui/react-accordion": "^1.1.2",

pnpm-lock.yaml

@@ -33,8 +33,8 @@ dependencies:
     specifier: ^1.0.11
     version: 1.0.11
   '@dydxprotocol/v4-localization':
-    specifier: ^1.1.11
-    version: 1.1.11
+    specifier: ^1.1.6
+    version: 1.1.6
   '@ethersproject/providers':
     specifier: ^5.7.2
     version: 5.7.2
@@ -1023,8 +1023,8 @@ packages:
       - utf-8-validate
     dev: false
 
-  /@dydxprotocol/v4-localization@1.1.11:
-    resolution: {integrity: sha512-ZHnyrWD1bEpvY1tctkcmSV6A5+hQSYBFwyjbiyOqepqDqrv24J5a3hlZU94lDyYf+7Sdk3alOvy9Z7Lpk59nvw==}
+  /@dydxprotocol/v4-localization@1.1.6:
+    resolution: {integrity: sha512-Bon6NSRU4/FqneAbnP2G28EAPr0hp4LhvAayX61o0O1PGkxnLzAHkXeFppdM0Zn0fOcp1S1MJ+gvz138ZDephQ==}
     dev: false
 
   /@dydxprotocol/v4-proto@0.4.1:

src/components/Icon.tsx

@@ -24,6 +24,7 @@ import {
   CoinsIcon,
   CommentIcon,
   CopyIcon,
+  CubeIcon,
   DepositIcon,
   DepthChartIcon,
   DiscordIcon,
@@ -98,6 +99,7 @@ export enum IconName {
   Coins = 'Coins',
   Comment = 'Comment',
   Copy = 'Copy',
+  Cube = 'Cube',
   Deposit = 'Deposit',
   DepthChart = 'DepthChart',
   Discord = 'Discord',
@@ -173,6 +175,7 @@ const icons = {
   [IconName.Coins]: CoinsIcon,
   [IconName.Comment]: CommentIcon,
   [IconName.Copy]: CopyIcon,
+  [IconName.Cube]: CubeIcon,
   [IconName.Deposit]: DepositIcon,
   [IconName.DepthChart]: DepthChartIcon,
   [IconName.Discord]: DiscordIcon,

src/components/visx/XYChartWithPointerEvents.tsx

@@ -1,33 +1,26 @@
-import React, { PropsWithChildren, useContext, useState } from 'react';
+import React, { useContext, useState } from 'react';
 
 import { Point } from '@visx/point';
 import { localPoint } from '@visx/event';
-import { XYChart, DataContext, type EventHandlerParams } from '@visx/xychart';
+import { XYChart, DataContext } from '@visx/xychart';
 import { getScaleBandwidth } from '@/components/visx/getScaleBandwidth';
 
 export const XYChartWithPointerEvents = ({
-  onPointerMove,
-  onPointerUp,
-  onPointerPressedChange,
-  ...props
+  onPointerMove, onPointerUp, onPointerPressedChange, ...props
 }: {
-  onPointerMove?: (point: Point | EventHandlerParams<object>) => void;
-  onPointerUp?: (point: Point | EventHandlerParams<object>) => void;
+  onPointerMove?: (point: Point) => void;
+  onPointerUp?: (point: Point) => void;
   onPointerPressedChange?: (isPointerPressed: boolean) => void;
-} & PropsWithChildren<Parameters<typeof XYChart>[0]>) => {
+} & React.PropsWithChildren<Parameters<typeof XYChart>>) => {
   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),
     });
 
@@ -36,13 +29,15 @@ 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}

src/constants/charts.ts

@@ -1,40 +0,0 @@
-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;
-};

src/constants/markets.ts

@@ -25,5 +25,4 @@ export const DEFAULT_MARKETID = 'ETH-USD';
 export enum FundingDirection {
   ToShort = 'ToShort',
   ToLong = 'ToLong',
-  None = 'None',
 }

src/hooks/useOrderbookValues.ts

@@ -1,44 +0,0 @@
-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]);
-};

src/icons/cube.svg

@@ -0,0 +1,3 @@
+<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>

src/icons/index.ts

@@ -19,6 +19,7 @@ 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';

src/pages/portfolio/Portfolio.tsx

@@ -17,14 +17,11 @@ import { TransferHistoryTable } from '@/views/tables/TransferHistoryTable';
 import { Button } from '@/components/Button';
 import { Icon, IconName } from '@/components/Icon';
 import { NavigationMenu } from '@/components/NavigationMenu';
-import { Tag, TagType } from '@/components/Tag';
 import { WithSidebar } from '@/components/WithSidebar';
 
-import { getOnboardingState, getSubaccount, getTradeInfoNumbers } from '@/state/accountSelectors';
+import { getOnboardingState, getSubaccount } from '@/state/accountSelectors';
 import { openDialog } from '@/state/dialogs';
 
-import { shortenNumberForDisplay } from '@/lib/numbers';
-
 import { PortfolioNavMobile } from './PortfolioNavMobile';
 import { LoadingSpace } from '@/components/Loading/LoadingSpinner';
 
@@ -45,10 +42,6 @@ export default () => {
   const { freeCollateral } = useSelector(getSubaccount, shallowEqual) || {};
   const { nativeTokenBalance } = useAccountBalance();
 
-  const { numTotalPositions, numTotalOpenOrders } = useSelector(getTradeInfoNumbers, shallowEqual) || {};
-  const numPositions = shortenNumberForDisplay(numTotalPositions);
-  const numOrders = shortenNumberForDisplay(numTotalOpenOrders);
-
   const usdcBalance = freeCollateral?.current || 0;
 
   useDocumentTitle(stringGetter({ key: STRING_KEYS.PORTFOLIO }));
@@ -125,28 +118,14 @@ export default () => {
                     },
                     {
                       value: PortfolioRoute.Positions,
-                      slotBefore: <Styled.Icon iconName={IconName.Positions} />,
-                      label: (
-                        <>
-                          {stringGetter({ key: STRING_KEYS.POSITIONS })}
-                          {numPositions > 0 && (
-                            <Tag type={TagType.Number}> {numPositions} </Tag>
-                          )}
-                        </>
-                      ),
+                      slotBefore: <Styled.Icon iconName={IconName.Cube} />,
+                      label: stringGetter({ key: STRING_KEYS.POSITIONS }),
                       href: PortfolioRoute.Positions,
                     },
                     {
                       value: PortfolioRoute.Orders,
                       slotBefore: <Styled.Icon iconName={IconName.OrderPending} />,
-                      label: (
-                        <>
-                          {stringGetter({ key: STRING_KEYS.ORDERS })}
-                          {numOrders > 0 && (
-                            <Tag type={TagType.Number}> {numOrders} </Tag>
-                          )}
-                        </>
-                      ),
+                      label: stringGetter({ key: STRING_KEYS.ORDERS }),
                       href: PortfolioRoute.Orders,
                     },
                     {

src/state/accountCalculators.ts

@@ -1,8 +1,10 @@
 import { createSelector } from 'reselect';
 
+import { SubaccountPosition } from '@/constants/abacus';
 import { OnboardingState, OnboardingSteps } from '@/constants/account';
 
 import {
+  getExistingOpenPositions,
   getOnboardingGuards,
   getOnboardingState,
   getSubaccountId,
@@ -58,8 +60,13 @@ export const calculateIsAccountViewOnly = createSelector(
 );
 
 /**
- * @description calculate whether the subaccount has uncommitted positions
+ * @description calculate whether the subaccount has open positions
  */
+export const calculateHasOpenPositions = createSelector(
+  [getExistingOpenPositions],
+  (openPositions?: SubaccountPosition[]) => (openPositions?.length || 0) > 0
+);
+
 export const calculateHasUncommittedOrders = createSelector(
   [getUncommittedOrderClientIds],
   (uncommittedOrderClientIds: number[]) => uncommittedOrderClientIds.length > 0

src/state/accountSelectors.ts

@@ -2,7 +2,6 @@ import { OrderSide } from '@dydxprotocol/v4-client-js';
 import { createSelector } from 'reselect';
 
 import {
-  type AbacusOrderStatuses,
   type SubaccountOrder,
   type SubaccountFill,
   type SubaccountFundingPayment,
@@ -44,6 +43,7 @@ export const getSubaccountBuyingPower = (state: RootState) => state.account.suba
 export const getSubaccountEquity = (state: RootState) => state.account.subaccount?.equity;
 
 export const getSubaccountHistoricalPnl = (state: RootState) => state.account?.historicalPnl;
+
 /**
  * @param state
  * @returns list of a subaccount's open positions. Each item in the list is an open position in a different market.
@@ -258,14 +258,6 @@ export const getCurrentMarketFundingPayments = createSelector(
     !currentMarketId ? [] : marketFundingPayments[currentMarketId]
 );
 
-/**
- * @param state
- * @returns boolean on whether an order status is considered open
- */
-const isOpenOrderStatus = (status: AbacusOrderStatuses) => {
-  return status !== AbacusOrderStatus.filled && status !== AbacusOrderStatus.cancelled;
-};
-
 /**
  * @param state
  * @returns Total numbers of the subaccount's open positions, open orders and fills
@@ -274,7 +266,8 @@ export const getTradeInfoNumbers = createSelector(
   [getExistingOpenPositions, getSubaccountOrders, getSubaccountFills, getSubaccountFundingPayments],
   (positions, orders, fills, fundingPayments) => ({
     numTotalPositions: positions?.length,
-    numTotalOpenOrders: orders?.filter((order) => isOpenOrderStatus(order.status)).length,
+    numTotalOpenOrders: orders?.filter((order) => order.status !== AbacusOrderStatus.cancelled)
+      .length,
     numTotalFills: fills?.length,
     numTotalFundingPayments: fundingPayments?.length,
   })
@@ -288,7 +281,8 @@ export const getCurrentMarketTradeInfoNumbers = createSelector(
   [getCurrentMarketOrders, getCurrentMarketFills, getCurrentMarketFundingPayments],
   (marketOrders, marketFills, marketFundingPayments) => {
     return {
-      numOpenOrders: marketOrders?.filter((order) => isOpenOrderStatus(order.status)).length,
+      numOpenOrders: marketOrders?.filter((order) => order.status !== AbacusOrderStatus.cancelled)
+        .length,
       numFills: marketFills?.length,
       numFundingPayments: marketFundingPayments?.length,
     };

src/state/perpetualsCalculators.ts

@@ -26,12 +26,7 @@ export const calculateFundingRateHistory = createSelector(
     return data.map(({ effectiveAtMilliseconds, rate }) => ({
       time: effectiveAtMilliseconds,
       fundingRate: rate,
-      direction:
-        rate === 0
-          ? FundingDirection.None
-          : rate < 0
-          ? FundingDirection.ToLong
-          : FundingDirection.ToShort,
+      direction: rate < 0 ? FundingDirection.ToLong : FundingDirection.ToShort,
     }));
   }
 );

src/views/charts/DepthChart.tsx

@@ -1,20 +1,14 @@
 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 {
-  DepthChartDatum,
-  DepthChartPoint,
-  DepthChartSeries,
-  SERIES_KEY_FOR_ORDER_SIDE,
-} from '@/constants/charts';
-import { StringGetterFunction } from '@/constants/localization';
+import { StringGetterFunction, STRING_KEYS } from '@/constants/localization';
 
 import { useBreakpoints } from '@/hooks';
-import { useOrderbookValuesForDepthChart } from '@/hooks/useOrderbookValues';
 
-import { getCurrentMarketConfig } from '@/state/perpetualsSelectors';
+import { MustBigNumber } from '@/lib/numbers';
+
+import { getCurrentMarketConfig, getCurrentMarketOrderbook } from '@/state/perpetualsSelectors';
 import { getCurrentMarketAssetData } from '@/state/assetsSelectors';
 
 import { XYChartWithPointerEvents } from '@/components/visx/XYChartWithPointerEvents';
@@ -27,25 +21,24 @@ import {
   darkTheme,
   DataProvider,
   EventEmitterProvider,
-  type EventHandlerParams,
 } from '@visx/xychart';
 import { LinearGradient } from '@visx/gradient';
 import { curveStepAfter } from '@visx/curve';
-import { Point } from '@visx/point';
+import type { 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 { OutputType } from '@/components/Output';
+import { Output, OutputType } from '@/components/Output';
 
-import { MustBigNumber } from '@/lib/numbers';
-
-import { DepthChartTooltipContent } from './Tooltip';
+import { OrderSide } from '@dydxprotocol/v4-client-js';
 
 // @ts-ignore
 const theme = buildChartTheme({
   ...darkTheme,
-  colors: ['var(--color-positive)', 'var(--color-negative)', 'var(--color-layer-6)'], // categorical colors, mapped to series via `dataKey`s
+  colors: ['var(--color-positive)', 'var(--color-negative)', 'white'], // categorical colors, mapped to series via `dataKey`s
 });
 
 const clamp = (n: number, min: number, max: number) => Math.max(min, Math.min(max, n));
@@ -65,6 +58,30 @@ 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,
@@ -79,6 +96,8 @@ export const DepthChart = ({
   const { isMobile } = useBreakpoints();
 
   // Chart data
+
+  const orderbook = useSelector(getCurrentMarketOrderbook, shallowEqual);
   const { id = '' } = useSelector(getCurrentMarketAssetData, shallowEqual) ?? {};
   const { stepSizeDecimals, tickSizeDecimals } =
     useSelector(getCurrentMarketConfig, shallowEqual) ?? {};
@@ -93,15 +112,43 @@ export const DepthChart = ({
     midMarketPrice,
     spread,
     spreadPercent,
-    orderbook,
-  } = useOrderbookValuesForDepthChart();
+  } = 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]);
 
   // Chart state
 
   const [isPointerPressed, setIsPointerPressed] = useState(false);
   const [chartPointAtPointer, setChartPointAtPointer] = useState<DepthChartPoint>();
 
-  const isEditingOrder = Boolean(isPointerPressed && chartPointAtPointer);
+  const isEditingOrder = isPointerPressed && chartPointAtPointer;
 
   const [zoomDomain, setZoomDomain] = useState<undefined | number>();
 
@@ -146,24 +193,12 @@ export const DepthChart = ({
   }, [orderbook, zoomDomain]);
 
   const getChartPoint = useCallback(
-    (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,
+    ({ x: price, y: size }: Point) =>
+      ({
+        side: price < midMarketPrice! ? OrderSide.BUY : OrderSide.SELL,
         price,
         size,
-      } as DepthChartPoint;
-    },
+      } as DepthChartPoint),
     [midMarketPrice]
   );
 
@@ -221,7 +256,7 @@ export const DepthChart = ({
             }}
             onPointerUp={(point) => point && onChartClick?.(getChartPoint(point))}
             onPointerMove={(point) => point && setChartPointAtPointer(getChartPoint(point))}
-            onPointerPressedChange={(isPointerPressed) => setIsPointerPressed(isPointerPressed)}
+            onPointerPressedChange={setIsPointerPressed}
           >
             <Axis
               orientation="bottom"
@@ -328,7 +363,7 @@ export const DepthChart = ({
                 <Styled.XAxisLabelOutput
                   type={OutputType.Fiat}
                   value={
-                    isEditingOrder && chartPointAtPointer
+                    isEditingOrder
                       ? chartPointAtPointer.price
                       : tooltipData!.nearestDatum?.datum.price
                   }
@@ -339,8 +374,8 @@ export const DepthChart = ({
                       [DepthChartSeries.Bids]: 'var(--color-positive)',
                       [DepthChartSeries.MidMarket]: 'var(--color-layer-6)',
                     }[
-                      isEditingOrder && chartPointAtPointer
-                        ? SERIES_KEY_FOR_ORDER_SIDE[chartPointAtPointer.side]
+                      isEditingOrder
+                        ? seriesKeyForOrderSide[chartPointAtPointer.side]
                         : (tooltipData!.nearestDatum?.key as DepthChartSeries)
                     ]
                   }
@@ -354,7 +389,7 @@ export const DepthChart = ({
                   <Styled.YAxisLabelOutput
                     type={OutputType.Asset}
                     value={
-                      isEditingOrder && chartPointAtPointer
+                      isEditingOrder
                         ? chartPointAtPointer.size
                         : tooltipData!.nearestDatum?.datum.depth
                     }
@@ -365,8 +400,8 @@ export const DepthChart = ({
                         [DepthChartSeries.Bids]: 'var(--color-positive)',
                         [DepthChartSeries.MidMarket]: 'var(--color-layer-6)',
                       }[
-                        isEditingOrder && chartPointAtPointer
-                          ? SERIES_KEY_FOR_ORDER_SIDE[chartPointAtPointer.side]
+                        isEditingOrder
+                          ? seriesKeyForOrderSide[chartPointAtPointer.side]
                           : (tooltipData!.nearestDatum?.key as DepthChartSeries)
                       ]
                     }
@@ -375,22 +410,181 @@ export const DepthChart = ({
               }
               snapTooltipToDatumX={!isEditingOrder}
               snapTooltipToDatumY={isEditingOrder ? false : isMobile}
-              renderTooltip={({ tooltipData, colorScale }) =>
-                chartPointAtPointer && (
-                  <DepthChartTooltipContent
-                    {...{
-                      tooltipData,
-                      colorScale,
-                      isEditingOrder,
-                      chartPointAtPointer,
-                      stringGetter,
-                      selectedLocale,
-                      stepSizeDecimals,
-                      tickSizeDecimals,
-                    }}
-                  />
-                )
-              }
+              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>
+                );
+              }}
             />
           </XYChartWithPointerEvents>
         </EventEmitterProvider>

src/views/charts/DepthChart/Tooltip.tsx

@@ -1,220 +0,0 @@
-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>
-  );
-};

src/views/charts/FundingChart.tsx

@@ -3,27 +3,39 @@ import { shallowEqual, useSelector } from 'react-redux';
 import styled, { type AnyStyledComponent, css } from 'styled-components';
 import { curveMonotoneX, curveStepAfter } from '@visx/curve';
 
-import { ButtonSize } from '@/constants/buttons';
-import { FundingRateResolution, type FundingChartDatum } from '@/constants/charts';
-import { STRING_KEYS } from '@/constants/localization';
-import { FundingDirection } from '@/constants/markets';
-import { SMALL_PERCENT_DECIMALS, TINY_PERCENT_DECIMALS } from '@/constants/numbers';
 import { useBreakpoints, useStringGetter } from '@/hooks';
+import { ButtonSize } from '@/constants/buttons';
+import { STRING_KEYS } from '@/constants/localization';
+import { SMALL_PERCENT_DECIMALS, TINY_PERCENT_DECIMALS } from '@/constants/numbers';
+import { FundingDirection } from '@/constants/markets';
 
 import { breakpoints } from '@/styles';
 
-import { Output, OutputType } from '@/components/Output';
+import { Details, DetailsItem } from '@/components/Details';
+import { Output, OutputType, ShowSign } 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';
-import { FundingChartTooltipContent } from './Tooltip';
+
+enum FundingRateResolution {
+  OneHour = 'OneHour',
+  EightHour = 'EightHour',
+  Annualized = 'Annualized',
+}
+
+type FundingChartDatum = {
+  time: number;
+  fundingRate: number;
+  direction: FundingDirection;
+};
 
 const FUNDING_RATE_TIME_RESOLUTION = 60 * 60 * 1000; // 1 hour
 
@@ -104,20 +116,114 @@ 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 }) => (
-        <FundingChartTooltipContent
-          fundingRateView={fundingRateView}
-          tooltipData={tooltipData}
-          latestDatum={latestDatum}
-        />
-      )}
-      onTooltipContext={(tooltipContext) => setTooltipContext(tooltipContext)}
+      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}
       minZoomDomain={FUNDING_RATE_TIME_RESOLUTION * 4}
       numGridLines={1}
       slotEmpty={<LoadingSpace id="funding-chart-loading" />}
@@ -184,7 +290,6 @@ 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);
 

src/views/charts/FundingChart/Tooltip.tsx

@@ -1,107 +0,0 @@
-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>
-  );
-};

src/views/forms/AccountManagementForms/WithdrawForm/WithdrawButtonAndReceipt.tsx

@@ -55,7 +55,7 @@ export const WithdrawButtonAndReceipt = ({
   const stringGetter = useStringGetter();
 
   const { leverage } = useSelector(getSubaccount, shallowEqual) || {};
-  const { summary, requestPayload } = useSelector(getTransferInputs, shallowEqual) || {};
+  const { isCctp, summary, requestPayload } = useSelector(getTransferInputs, shallowEqual) || {};
   const canAccountTrade = useSelector(calculateCanAccountTrade, shallowEqual);
   const { usdcLabel } = useTokenConfigs();
 
@@ -85,6 +85,26 @@ export const WithdrawButtonAndReceipt = ({
 
   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 &&
+          withdrawToken?.decimals &&
+          formatUnits(BigInt(summary.toAmount), withdrawToken.decimals),
+        toAmountMin:
+          summary?.toAmountMin &&
+          withdrawToken?.decimals &&
+          formatUnits(BigInt(summary.toAmountMin), withdrawToken.decimals),
+      };
+    }
+  }, [isCctp, summary, withdrawToken]);
+
   const submitButtonReceipt = [
     {
       key: 'total-fees',
@@ -133,7 +153,7 @@ export const WithdrawButtonAndReceipt = ({
           {withdrawToken && <Tag>{withdrawToken?.symbol}</Tag>}
         </span>
       ),
-      value: <Output type={OutputType.Asset} value={summary?.toAmount} fractionDigits={TOKEN_DECIMALS} />,
+      value: <Output type={OutputType.Asset} value={toAmount} fractionDigits={TOKEN_DECIMALS} />,
       subitems: [
         {
           key: 'minimum-amount-received',
@@ -144,7 +164,7 @@ export const WithdrawButtonAndReceipt = ({
             </span>
           ),
           value: (
-            <Output type={OutputType.Asset} value={summary?.toAmountMin} fractionDigits={TOKEN_DECIMALS} />
+            <Output type={OutputType.Asset} value={toAmountMin} fractionDigits={TOKEN_DECIMALS} />
           ),
           tooltip: 'minimum-amount-received',
         },