Fix toAmount/toAmountMin on withdraw

TRCL-1979 Show open positions / orders in portfolio sidebar (#228 )
* add tags for open orders + positions * clean up, use new num selector function * update logic for open orders
2024-01-15 10:19:21 -08:00 · 2024-01-12 14:44:09 -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
43 changed files with 1429 additions and 4969 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.32",
+    "@dydxprotocol/v4-abacus": "^1.2.3",
    "@dydxprotocol/v4-client-js": "^1.0.11",
-    "@dydxprotocol/v4-localization": "^1.1.6",
+    "@dydxprotocol/v4-localization": "^1.1.11",
    "@ethersproject/providers": "^5.7.2",
    "@js-joda/core": "^5.5.3",
    "@radix-ui/react-accordion": "^1.1.2",
@@ -72,7 +72,6 @@
    "@reduxjs/toolkit": "^1.9.5",
    "@scure/bip32": "^1.3.0",
    "@scure/bip39": "^1.2.0",
-    "@tanstack/react-query": "^5.17.9",
    "@types/lodash": "^4.14.195",
    "@types/styled-components": "^5.1.26",
    "@visx/axis": "^3.1.0",
@@ -105,15 +104,15 @@
    "react-aria": "^3.25.0",
    "react-dom": "^18.2.0",
    "react-number-format": "^5.2.2",
+    "react-query": "^3.39.3",
    "react-redux": "^8.1.1",
    "react-router-dom": "^6.14.0",
    "react-stately": "^3.23.0",
    "reselect": "^4.1.8",
-    "stream-browserify": "^3.0.0",
    "styled-components": "^5.3.11",
    "use-latest": "^1.2.1",
-    "viem": "^2.0.0",
-    "wagmi": "^2.0.3"
+    "viem": "^1.20.0",
+    "wagmi": "^1.4.12"
  },
  "devDependencies": {
    "@babel/core": "^7.22.5",
@@ -1,8 +1,8 @@
 import { lazy, Suspense } from 'react';
 import { Navigate, Route, Routes } from 'react-router-dom';
 import styled, { AnyStyledComponent, css } from 'styled-components';
-import { WagmiProvider } from 'wagmi';
-import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { WagmiConfig } from 'wagmi';
+import { QueryClient, QueryClientProvider } from 'react-query';
 import { GrazProvider } from 'graz';

 import { AppRoute, DEFAULT_TRADE_ROUTE } from '@/constants/routes';
@@ -120,9 +120,9 @@ const wrapProvider = (Component: React.ComponentType<any>, props?: any) => {
 };

 const providers = [
-  wrapProvider(WagmiProvider, { config }),
  wrapProvider(QueryClientProvider, { client: queryClient }),
  wrapProvider(GrazProvider),
+  wrapProvider(WagmiConfig, { config }),
  wrapProvider(LocaleProvider),
  wrapProvider(RestrictionProvider),
  wrapProvider(DydxProvider),
@@ -0,0 +1,26 @@
+import type { Story } from '@ladle/react';
+
+import { Accordion as AccordionComponent, AccordionProps } from '@/components/Accordion';
+
+import { StoryWrapper } from '.ladle/components';
+
+export const Accordion: Story<AccordionProps> = (args) => {
+  return (
+    <StoryWrapper>
+      <AccordionComponent {...args} />
+    </StoryWrapper>
+  );
+};
+
+Accordion.args = {
+  items: [
+    {
+      header: 'Question 1?',
+      content: 'Answer 1.',
+    },
+    {
+      header: 'Question 2?',
+      content: 'Answer 2.',
+    },
+  ],
+};
@@ -3,6 +3,8 @@ import styled, { keyframes, type AnyStyledComponent } from 'styled-components';
 import { Root, Item, Header, Trigger, Content } from '@radix-ui/react-accordion';

 import { layoutMixins } from '@/styles/layoutMixins';
+import { breakpoints } from '@/styles';
+
 import { PlusIcon } from '@/icons';

 export type AccordionItem = {
@@ -10,7 +12,7 @@ export type AccordionItem = {
  content: React.ReactNode;
 };

-type AccordionProps = {
+export type AccordionProps = {
  items: AccordionItem[];
  className?: string;
 };
@@ -36,6 +38,13 @@ export const Accordion = ({ items, className }: AccordionProps) => (
 const Styled: Record<string, AnyStyledComponent> = {};

 Styled.Root = styled(Root)`
+  --accordion-paddingY: 1rem;
+  --accordion-paddingX: 1rem;
+
+  @media ${breakpoints.notTablet} {
+    --accordion-paddingX: 1.5rem;
+  }
+
  > *:not(:last-child) {
    border-bottom: var(--border-width) solid var(--border-color);
  }
@@ -67,7 +76,8 @@ Styled.Icon = styled.div`
 Styled.Trigger = styled(Trigger)`
  ${layoutMixins.spacedRow}
  width: 100%;
-  padding: 1rem 0.75rem;
+  padding: var(--accordion-paddingY) var(--accordion-paddingX);
+  gap: 0.5rem;

  color: var(--color-text-1);
  text-align: start;
@@ -91,7 +101,7 @@ Styled.Trigger = styled(Trigger)`

 Styled.Content = styled(Content)`
  overflow: hidden;
-  margin: 0 0.75rem 1rem;
+  margin: 0 var(--accordion-paddingX) var(--accordion-paddingY);

  color: var(--color-text-0);

@@ -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,
@@ -4,6 +4,7 @@ import { Link } from 'react-router-dom';
 import { Icon, IconName } from '@/components/Icon';

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

 type PanelProps = {
  slotHeaderContent?: string;
@@ -67,6 +68,12 @@ Styled.Panel = styled.section<{ onClick?: () => void }>`
  --panel-content-paddingY: var(--panel-paddingY);
  --panel-content-paddingX: var(--panel-paddingX);

+  @media ${breakpoints.notTablet} {
+    --panel-paddingX: 1.5rem;
+    --panel-paddingY: 1.25rem;
+    --panel-content-paddingY: 1rem;
+  }
+
  ${layoutMixins.row}

  background-color: var(--color-layer-3);
@@ -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}
@@ -142,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];

@@ -151,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];

@@ -162,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];
@@ -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',
 }
@@ -1,5 +0,0 @@
-export enum QueryKeys {
-  ACCOUNT_BALANCE = 'ACCOUNT_BALANCE',
-  LAUNCH_INCENTIVES = 'LAUNCH_INCENTIVES',
-  TRANSACTION_STATUS = 'TRANSACTION_STATUS',
-}
@@ -52,7 +52,7 @@ type WalletConnectionTypeConfig = {
  wagmiConnectorId?: string;
 };

-export const WALLET_CONNECTION_TYPES: Record<WalletConnectionType, WalletConnectionTypeConfig> = {
+export const walletConnectionTypes: Record<WalletConnectionType, WalletConnectionTypeConfig> = {
  [WalletConnectionType.CoinbaseWalletSdk]: {
    name: 'Coinbase Wallet SDK',
    wagmiConnectorId: 'coinbaseWallet',
@@ -110,7 +110,7 @@ export const WALLET_CONNECT_EXPLORER_RECOMMENDED_IDS = Object.values(
  WALLET_CONNECT_EXPLORER_RECOMMENDED_WALLETS
 );

-export type WalletConfig = {
+type WalletConfig = {
  type: WalletType;
  stringKey: string;
  icon: string;
@@ -274,17 +274,6 @@ export type WalletConnection = {
  provider?: ExternalProvider;
 };

-export type WalletConnectConfig = {
-  client: {
-    name: string;
-    description: string;
-    iconUrl: string;
-  };
-  v2: {
-    projectId: string;
-  };
-};
-
 // dYdX Chain wallets
 export const COSMOS_DERIVATION_PATH = "m/44'/118'/0'/0/0";

@@ -1,12 +1,11 @@
-import { useCallback, useEffect } from 'react';
+import { useCallback } from 'react';
 import { shallowEqual, useSelector } from 'react-redux';
-import { useBalance, useBlockNumber } from 'wagmi';
+import { useBalance } from 'wagmi';
 import { StargateClient } from '@cosmjs/stargate';
-import { useQuery, useQueryClient } from '@tanstack/react-query';
+import { useQuery } from 'react-query';
 import { formatUnits } from 'viem';

 import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
-import { QueryKeys } from '@/constants/queries';
 import { EvmAddress } from '@/constants/wallets';

 import { convertBech32Address } from '@/lib/addressUtils';
@@ -53,27 +52,15 @@ export const useAccountBalance = ({
  const evmChainId = Number(ENVIRONMENT_CONFIG_MAP[selectedNetwork].ethereumChainId);
  const stakingBalances = useSelector(getStakingBalances, shallowEqual);

-  const queryClient = useQueryClient();
-  const { data: blockNumber } = useBlockNumber({ watch: true });
-  const {
-    data: evmQuery,
-    status: evmBalanceStatus,
-    fetchStatus: evmBalanceFetchStatus,
-    queryKey,
-  } = useBalance({
-    query: {
-      enabled: Boolean(!isCosmosChain && addressOrDenom?.startsWith('0x')),
-    },
+  const evmQuery = useBalance({
+    enabled: Boolean(!isCosmosChain && addressOrDenom?.startsWith('0x')),
    address: evmAddress,
    chainId: typeof chainId === 'number' ? chainId : Number(evmChainId),
    token:
      addressOrDenom === CHAIN_DEFAULT_TOKEN_ADDRESS ? undefined : (addressOrDenom as EvmAddress),
+    watch: true,
  });

-  useEffect(() => {
-    queryClient.invalidateQueries({ queryKey });
-  }, [blockNumber]);
-
  const cosmosQueryFn = useCallback(async () => {
    if (dydxAddress && bech32AddrPrefix && rpc && addressOrDenom) {
      const address = convertBech32Address({
@@ -91,7 +78,7 @@ export const useAccountBalance = ({

  const cosmosQuery = useQuery({
    enabled: Boolean(isCosmosChain && dydxAddress && bech32AddrPrefix && rpc && addressOrDenom),
-    queryKey: [QueryKeys.ACCOUNT_BALANCE, chainId, addressOrDenom],
+    queryKey: `accountBalances_${chainId}_${addressOrDenom}`,
    queryFn: cosmosQueryFn,
    refetchOnWindowFocus: false,
    refetchOnMount: false,
@@ -100,11 +87,8 @@ export const useAccountBalance = ({
    staleTime: 10_000,
  });

-  const balance = isCosmosChain
-    ? cosmosQuery.data
-    : evmQuery
-    ? formatUnits(evmQuery?.value, evmQuery?.decimals)
-    : undefined;
+  const { formatted: evmBalance } = evmQuery.data || {};
+  const balance = isCosmosChain ? cosmosQuery.data : evmBalance;

  const nativeTokenCoinBalance = balances?.[chainTokenDenom];
  const nativeTokenBalance = MustBigNumber(nativeTokenCoinBalance?.amount);
@@ -120,7 +104,7 @@ export const useAccountBalance = ({
    nativeTokenBalance,
    nativeStakingBalance,
    usdcBalance,
-    queryStatus: isCosmosChain ? cosmosQuery.status : evmBalanceStatus,
-    isQueryFetching: isCosmosChain ? cosmosQuery.isFetching : evmBalanceFetchStatus === 'fetching',
+    queryStatus: isCosmosChain ? cosmosQuery.status : evmQuery.status,
+    isQueryFetching: isCosmosChain ? cosmosQuery.isFetching : evmQuery.fetchStatus === 'fetching',
  };
 };
@@ -39,6 +39,7 @@ const useAccountsContext = () => {
    walletConnectionType,
    selectWalletType,
    selectedWalletType,
+    selectedWalletError,
    evmAddress,
    signerWagmi,
    publicClientWagmi,
@@ -299,7 +300,9 @@ const useAccountsContext = () => {
    walletConnectionType,

    // Wallet selection
+    selectWalletType,
    selectedWalletType,
+    selectedWalletError,

    // Wallet connection (EVM)
    evmAddress,
@@ -1,9 +1,8 @@
 import { createContext, useContext, useCallback, useEffect, useMemo } from 'react';
-import { useQuery } from '@tanstack/react-query';
+import { useQuery } from 'react-query';

 import { LOCAL_STORAGE_VERSIONS, LocalStorageKey } from '@/constants/localStorage';
 import { type TransferNotifcation } from '@/constants/notifications';
-import { QueryKeys } from '@/constants/queries';
 import { useAccounts } from '@/hooks/useAccounts';

 import { fetchSquidStatus, STATUS_ERROR_GRACE_PERIOD } from '@/lib/squid';
@@ -69,8 +68,8 @@ const useLocalNotificationsContext = () => {
    [transferNotifications]
  );

-  const { data: newTransferNotifications } = useQuery({
-    queryKey: [QueryKeys.TRANSACTION_STATUS],
+  useQuery({
+    queryKey: 'getTransactionStatus',
    queryFn: async () => {
      const processTransferNotifications = async (transferNotifications: TransferNotifcation[]) => {
        const newTransferNotifications = await Promise.all(
@@ -85,11 +84,10 @@ const useLocalNotificationsContext = () => {
              status: currentStatus,
            } = transferNotification;

-            const hasErrors =
-              // @ts-ignore status.errors is not in the type definition but can be returned
-              // also error can some time come back as an empty object so we need to ignore for that
-              !!currentStatus?.errors ||
-              (currentStatus?.error && Object.keys(currentStatus.error).length !== 0);
+            // @ts-ignore status.errors is not in the type definition but can be returned
+            // also error can some time come back as an empty object so we need to ignore for that
+            const hasErrors = !!currentStatus?.errors || 
+                 (currentStatus?.error && Object.keys(currentStatus.error).length !== 0);

            if (
              !hasErrors &&
@@ -97,14 +95,11 @@ const useLocalNotificationsContext = () => {
                currentStatus?.squidTransactionStatus === 'ongoing')
            ) {
              try {
-                const status = await fetchSquidStatus(
-                  {
-                    transactionId: txHash,
-                    toChainId,
-                    fromChainId,
-                  },
-                  isCctp
-                );
+                const status = await fetchSquidStatus({
+                  transactionId: txHash,
+                  toChainId,
+                  fromChainId,
+                }, isCctp);

                if (status) {
                  transferNotification.status = status;
@@ -126,18 +121,12 @@ const useLocalNotificationsContext = () => {

        return newTransferNotifications;
      };
-
      const newTransferNotifications = await processTransferNotifications(transferNotifications);
-      return newTransferNotifications;
+      setTransferNotifications(newTransferNotifications);
    },
    refetchInterval: TRANSFER_STATUS_FETCH_INTERVAL,
  });

-  useEffect(() => {
-    if (!newTransferNotifications) return;
-    setTransferNotifications(newTransferNotifications);
-  }, [newTransferNotifications]);
-
  return {
    transferNotifications,
    addTransferNotification,
@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useMemo } from 'react';
-import { UseSwitchChainReturnType, useAccount, useSwitchChain } from 'wagmi';
+import { useNetwork, useSwitchNetwork } from 'wagmi';

 export const useMatchingEvmNetwork = ({
  chainId,
@@ -8,10 +8,10 @@ export const useMatchingEvmNetwork = ({
 }: {
  chainId?: string | number;
  switchAutomatically?: boolean;
-  onError?: Parameters<UseSwitchChainReturnType['switchChainAsync']>[1]['onError'];
+  onError?: (error: Error) => void;
 }) => {
-  const { chain } = useAccount();
-  const { switchChainAsync, isPending } = useSwitchChain();
+  const { chain } = useNetwork();
+  const { isLoading, switchNetworkAsync } = useSwitchNetwork({ onError });

  // If chainId is not a number, we can assume it is a non EVM compatible chain
  const isMatchingNetwork = useMemo(
@@ -21,14 +21,7 @@ export const useMatchingEvmNetwork = ({

  const matchNetwork = useCallback(async () => {
    if (!isMatchingNetwork) {
-      await switchChainAsync?.(
-        {
-          chainId: Number(chainId),
-        },
-        {
-          onError,
-        }
-      );
+      await switchNetworkAsync?.(Number(chainId));
    }
  }, [chainId, chain]);

@@ -41,6 +34,6 @@ export const useMatchingEvmNetwork = ({
  return {
    isMatchingNetwork,
    matchNetwork,
-    isSwitchingNetwork: isPending,
+    isSwitchingNetwork: isLoading,
  };
 };
@@ -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]);
+};
@@ -104,13 +104,12 @@ export const useWalletConnection = () => {
    [walletConnectConfig, walletType, walletConnectionType]
  );

-  const { connectAsync: connectWagmi } = useConnectWagmi();
+  const { connectAsync: connectWagmi } = useConnectWagmi({ connector: wagmiConnector })
  const { suggestAndConnect: connectGraz } = useConnectGraz();

  const connectWallet = useCallback(
    async ({ walletType }: { walletType: WalletType }) => {
      const walletConnection = getWalletConnection({ walletType });
-      console.log({ walletConnection });

      try {
        if (!walletConnection) {
@@ -134,17 +133,13 @@ export const useWalletConnection = () => {
          }
        } else {
          if (!isConnectedWagmi) {
-            const connector = resolveWagmiConnector({
-              walletType,
-              walletConnection,
-              walletConnectConfig,
+            await connectWagmi({
+              connector: resolveWagmiConnector({
+                walletType,
+                walletConnection,
+                walletConnectConfig,
+              }),
            });
-
-            if (connector) {
-              await connectWagmi({
-                connector,
-              });
-            }
          }
        }
      } catch (error) {
@@ -161,7 +156,7 @@ export const useWalletConnection = () => {
        walletConnectionType: walletConnection.type,
      };
    },
-    [isConnectedGraz, signerGraz, isConnectedWagmi, signerWagmi, walletConnectConfig]
+    [isConnectedGraz, signerGraz, isConnectedWagmi, signerWagmi]
  );

  const disconnectWallet = useCallback(async () => {
@@ -209,9 +204,10 @@ export const useWalletConnection = () => {
    })();
  }, [selectedWalletType, signerWagmi, signerGraz]);

-  const selectWalletType = (walletType: WalletType | undefined) => {
+  const selectWalletType = async (walletType: WalletType | undefined) => {
    if (selectedWalletType) {
      setSelectedWalletType(undefined);
+      await new Promise(requestAnimationFrame);
    }

    setSelectedWalletType(walletType);
@@ -1,3 +1 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M14 6L7.83335 10.5L2 6" stroke="currentColor" stroke-width="2.25" stroke-linecap="round"/>
-</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';
@@ -1,6 +1,7 @@
-import { createConfig, createConnector, http, usePublicClient } from 'wagmi';
+import { createConfig, configureChains, mainnet, Chain } from 'wagmi';
+import { goerli } from 'wagmi/chains';
+
 import {
-  type Chain,
  arbitrum,
  arbitrumGoerli,
  avalanche,
@@ -25,30 +26,34 @@ import {
  fantomTestnet,
  celo,
  celoAlfajores,
-  mainnet,
-  goerli,
+  scroll,
+  kava,
  sepolia,
-} from 'wagmi/chains';
+} from 'viem/chains';

-import { coinbaseWallet, injected, metaMask, walletConnect } from 'wagmi/connectors';
-import type { ExternalProvider } from '@ethersproject/providers';
+import { alchemyProvider } from 'wagmi/providers/alchemy';
+import { jsonRpcProvider } from 'wagmi/providers/jsonRpc';
+import { publicProvider } from 'wagmi/providers/public';
+
+import { CoinbaseWalletConnector } from 'wagmi/connectors/coinbaseWallet';
+import { InjectedConnector } from 'wagmi/connectors/injected';
+import { MetaMaskConnector } from 'wagmi/connectors/metaMask';
+import { WalletConnectConnector } from 'wagmi/connectors/walletConnect';

 import {
-  type WalletConnectConfig,
  type WalletConnection,
  WalletConnectionType,
-  WalletType,
-  WALLET_CONNECTION_TYPES,
+  type WalletType,
+  walletConnectionTypes,
  wallets,
  WALLET_CONNECT_EXPLORER_RECOMMENDED_IDS,
-  WalletConfig,
 } from '@/constants/wallets';

 import { isTruthy } from './isTruthy';
-import { log } from './telemetry';

 // Config
-const WAGMI_SUPPORTED_CHAINS: Parameters<typeof createConfig>[0]['chains'] = [
+
+export const WAGMI_SUPPORTED_CHAINS: Chain[] = [
  mainnet,
  goerli,
  sepolia,
@@ -76,106 +81,122 @@ const WAGMI_SUPPORTED_CHAINS: Parameters<typeof createConfig>[0]['chains'] = [
  fantomTestnet,
  celo,
  celoAlfajores,
+  scroll,
+  kava,
 ];

-export const config = createConfig({
-  chains: WAGMI_SUPPORTED_CHAINS,
-  transports: Object.fromEntries(
-    Object.values(WAGMI_SUPPORTED_CHAINS).map(({ id }) => [id, http()])
-  ),
-});
+const { chains, publicClient, webSocketPublicClient } = configureChains(
+  WAGMI_SUPPORTED_CHAINS,
+  [
+    import.meta.env.VITE_ALCHEMY_API_KEY &&
+      alchemyProvider({ apiKey: import.meta.env.VITE_ALCHEMY_API_KEY }),
+    jsonRpcProvider({
+      rpc: (chain) => ({ http: chain.rpcUrls.default.http[0] }),
+    }),
+    publicProvider(),
+  ].filter(isTruthy)
+);

-const createdInjectedConnectorWithProvider = ({ provider }: { provider: ExternalProvider }) => {
-  console.log(provider);
-  return injected({
-    target() {
-      return {
-        id: 'windowProvider',
-        name: 'Injected',
-        provider,
-      };
-    },
+const injectedConnectorOptions = {
+  chains,
+  options: {
+    name: 'Injected',
    shimDisconnect: true,
-  });
+    shimChainChangedDisconnect: false,
+  },
 };

-const getConnector = ({
-  walletConnectionType,
-  walletConnectConfig,
-}: {
-  walletConnectionType: WalletConnectionType;
-  walletConnectConfig: WalletConnectConfig;
-}) => {
-  console.log(walletConnectionType);
-  switch (walletConnectionType) {
-    case WalletConnectionType.WalletConnect2:
-      return [
-        walletConnect(
-          getConnectorInfoForWc2({
-            walletConnectConfig,
-          })
-        ),
-      ];
-    case WalletConnectionType.CoinbaseWalletSdk:
-      return [
-        coinbaseWallet({
-          appName: 'dYdX',
-          appLogoUrl: walletConnectConfig.client.iconUrl,
-          reloadOnDisconnect: false,
-          darkMode: true,
-        }),
-      ];
-    case WalletConnectionType.InjectedEip1193:
-      return injected({
-        target() {
-          return {
-            id: 'windowProvider',
-            name: 'Injected',
-            provider: window.ethereum,
-          };
-        },
-        shimDisconnect: true,
-      });
-    case WalletConnectionType.CosmosSigner:
-    default: {
-      return undefined;
-    }
-  }
+type WalletConnectConfig = {
+  client: {
+    name: string;
+    description: string;
+    iconUrl: string;
+  };
+  v2: {
+    projectId: string;
+  };
 };

-const getConnectorInfoForWc2 = ({
-  walletConnectId,
-  walletConnectConfig,
-}: {
-  walletConnectId?: string;
-  walletConnectConfig: WalletConnectConfig;
-}) => {
-  const explorerRecommendedWalletIds = walletConnectId
-    ? [walletConnectId]
-    : WALLET_CONNECT_EXPLORER_RECOMMENDED_IDS;
-
-  return {
-    projectId: walletConnectConfig.v2.projectId,
+const getWalletconnect2ConnectorOptions = (
+  config: WalletConnectConfig
+): ConstructorParameters<typeof WalletConnectConnector>[0] => ({
+  chains,
+  options: {
+    projectId: config.v2.projectId,
    metadata: {
-      name: walletConnectConfig.client.name,
-      description: walletConnectConfig.client.description,
+      name: config.client.name,
+      description: config.client.description,
      url: import.meta.env.VITE_BASE_URL,
-      icons: [walletConnectConfig.client.iconUrl],
+      icons: [config.client.iconUrl],
    },
    showQrModal: true,
    qrModalOptions: {
      themeMode: 'dark' as const,
      themeVariables: {
-        '--wcm-accent-color': 'var(--color-accent)',
+        '--wcm-accent-color': '#5973fe',
        '--wcm-font-family': 'var(--fontFamily-base)',
-        '--wcm-background-color': 'var(--color-accent)',
      },
-      explorerRecommendedWalletIds,
+      explorerRecommendedWalletIds: WALLET_CONNECT_EXPLORER_RECOMMENDED_IDS,
    },
-  };
+  },
+});
+
+const getConnectors = (walletConnectConfig: WalletConnectConfig) => [
+  new MetaMaskConnector({
+    chains,
+    options: {
+      shimDisconnect: true,
+    },
+  }),
+  new CoinbaseWalletConnector({
+    chains,
+    options: {
+      appName: 'dYdX',
+      reloadOnDisconnect: false,
+    },
+  }),
+  new WalletConnectConnector(getWalletconnect2ConnectorOptions(walletConnectConfig)),
+  new InjectedConnector(injectedConnectorOptions),
+];
+
+export const config = createConfig({
+  autoConnect: true,
+  // connectors,
+  publicClient,
+  webSocketPublicClient,
+});
+
+// Custom connectors
+
+import type { ExternalProvider } from '@ethersproject/providers';
+
+// Create a custom wagmi InjectedConnector using a specific injected EIP-1193 provider (instead of wagmi's default detection logic)
+const createInjectedConnectorWithProvider = (provider: ExternalProvider) =>
+  new (class extends InjectedConnector {
+    getProvider = async () =>
+      provider as unknown as Awaited<ReturnType<InjectedConnector['getProvider']>>;
+  })(injectedConnectorOptions) as InjectedConnector;
+
+const createWalletConnect2ConnectorWithId = (
+  walletconnectId: string,
+  walletConnectConfig: WalletConnectConfig
+) => {
+  const walletconnect2ConnectorOptions = getWalletconnect2ConnectorOptions(walletConnectConfig);
+  return new WalletConnectConnector({
+    ...walletconnect2ConnectorOptions,
+    options: {
+      ...walletconnect2ConnectorOptions.options,
+      qrModalOptions: {
+        ...walletconnect2ConnectorOptions.options.qrModalOptions,
+        explorerRecommendedWalletIds: [walletconnectId],
+        explorerExcludedWalletIds: 'ALL',
+      },
+    },
+  });
 };

 // Custom connector from wallet selection
+
 export const resolveWagmiConnector = ({
  walletType,
  walletConnection,
@@ -186,23 +207,13 @@ export const resolveWagmiConnector = ({
  walletConnectConfig: WalletConnectConfig;
 }) => {
  const walletConfig = wallets[walletType];
+  const walletConnectionConfig = walletConnectionTypes[walletConnection.type];

-  if (walletConnection.type === WalletConnectionType.InjectedEip1193 && walletConnection.provider) {
-    if (walletType === WalletType.MetaMask) {
-      return metaMask();
-    }
-    return createdInjectedConnectorWithProvider({ provider: walletConnection.provider });
-  } else if (
-    walletConnection.type === WalletConnectionType.WalletConnect2 &&
-    walletConfig.walletconnect2Id
-  ) {
-    return walletConnect(
-      getConnectorInfoForWc2({
-        walletConnectId: walletConfig.walletconnect2Id,
-        walletConnectConfig,
-      })
-    );
-  } else {
-    return getConnector({ walletConnectionType: walletConnection.type, walletConnectConfig });
-  }
+  return walletConnection.type === WalletConnectionType.InjectedEip1193 && walletConnection.provider
+    ? createInjectedConnectorWithProvider(walletConnection.provider)
+    : walletConnection.type === WalletConnectionType.WalletConnect2 && walletConfig.walletconnect2Id
+    ? createWalletConnect2ConnectorWithId(walletConfig.walletconnect2Id, walletConnectConfig)
+    : getConnectors(walletConnectConfig).find(
+        ({ id }: { id: string }) => id === walletConnectionConfig.wagmiConnectorId
+      );
 };
@@ -30,6 +30,9 @@ 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';
+
 const ENS_CHAIN_ID = 1; // Ethereum

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

      <Styled.EqualGrid>
+        <Styled.RewardsPanel
+          slotHeaderContent="Trading Rewards"
+          href={`/${chainTokenLabel}`}
+          hasSeparator
+        >
+          <Styled.Details
+            items={[
+              {
+                key: 'week-rewards',
+                label: stringGetter({ key: STRING_KEYS.THIS_WEEK }),
+                value: '-',
+              },
+            ]}
+            layout="grid"
+          />
+        </Styled.RewardsPanel>
        <Panel
          slotHeaderContent={stringGetter({ key: STRING_KEYS.FEES })}
          href={`${AppRoute.Portfolio}/${PortfolioRoute.Fees}`}
@@ -191,19 +213,6 @@ const Profile = () => {
            layout="grid"
          />
        </Panel>
-        <Styled.RewardsPanel
-          slotHeaderContent={stringGetter({ key: STRING_KEYS.REWARDS })}
-          href={`/${chainTokenLabel}`}
-          hasSeparator
-        >
-          <Styled.Details
-            items={[
-              { key: 'maker', label: stringGetter({ key: STRING_KEYS.YOU_WILL_EARN }), value: '-' },
-              { key: 'taker', label: stringGetter({ key: STRING_KEYS.EPOCH_ENDS_IN }), value: '-' },
-            ]}
-            layout="grid"
-          />
-        </Styled.RewardsPanel>
      </Styled.EqualGrid>

      <Styled.TablePanel
@@ -327,6 +336,13 @@ Styled.Details = styled(Details)`
 `;

 Styled.RewardsPanel = styled(Panel)`
+  align-self: flex-start;
+  
+  &,
+  > * {
+    height: 100%;
+  }
+
  dl {
    --details-grid-numColumns: 1;
  }
@@ -17,11 +17,14 @@ 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 } from '@/state/accountSelectors';
+import { getOnboardingState, getSubaccount, getTradeInfoNumbers } from '@/state/accountSelectors';
 import { openDialog } from '@/state/dialogs';

+import { shortenNumberForDisplay } from '@/lib/numbers';
+
 import { PortfolioNavMobile } from './PortfolioNavMobile';
 import { LoadingSpace } from '@/components/Loading/LoadingSpinner';

@@ -42,6 +45,10 @@ 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 }));
@@ -118,14 +125,28 @@ export default () => {
                    },
                    {
                      value: PortfolioRoute.Positions,
-                      slotBefore: <Styled.Icon iconName={IconName.Cube} />,
-                      label: stringGetter({ key: STRING_KEYS.POSITIONS }),
+                      slotBefore: <Styled.Icon iconName={IconName.Positions} />,
+                      label: (
+                        <>
+                          {stringGetter({ key: STRING_KEYS.POSITIONS })}
+                          {numPositions > 0 && (
+                            <Tag type={TagType.Number}> {numPositions} </Tag>
+                          )}
+                        </>
+                      ),
                      href: PortfolioRoute.Positions,
                    },
                    {
                      value: PortfolioRoute.Orders,
                      slotBefore: <Styled.Icon iconName={IconName.OrderPending} />,
-                      label: stringGetter({ key: STRING_KEYS.ORDERS }),
+                      label: (
+                        <>
+                          {stringGetter({ key: STRING_KEYS.ORDERS })}
+                          {numOrders > 0 && (
+                            <Tag type={TagType.Number}> {numOrders} </Tag>
+                          )}
+                        </>
+                      ),
                      href: PortfolioRoute.Orders,
                    },
                    {
@@ -2,7 +2,6 @@ import type { ElementType } from 'react';
 import styled, { AnyStyledComponent } from 'styled-components';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';

-import breakpoints from '@/styles/breakpoints';
 import { layoutMixins } from '@/styles/layoutMixins';
 import { useAccountBalance, useAccounts, useTokenConfigs, useStringGetter } from '@/hooks';

@@ -33,7 +32,7 @@ export const DYDXBalancePanel = () => {
  const { chainTokenLabel } = useTokenConfigs();

  return (
-    <Styled.Panel
+    <Panel
      slotHeader={
        <Styled.Header>
          <Styled.Title>
@@ -109,21 +108,12 @@ export const DYDXBalancePanel = () => {
          ]}
        />
      </Styled.Content>
-    </Styled.Panel>
+    </Panel>
  );
 };

 const Styled: Record<string, AnyStyledComponent> = {};

-Styled.Panel = styled(Panel)`
-  --panel-paddingX: 1.5rem;
-
-  @media ${breakpoints.tablet} {
-    --panel-paddingY: 1.5rem;
-    --panel-content-paddingY: 1rem;
-  }
-`;
-
 Styled.Header = styled.div`
  ${layoutMixins.spacedRow}
  gap: 1rem;
@@ -1,12 +1,11 @@
 import { useEffect } from 'react';
 import { useDispatch } from 'react-redux';
-import { useQuery } from '@tanstack/react-query';
+import { useQuery } from 'react-query';
 import styled, { AnyStyledComponent } from 'styled-components';

 import { STRING_KEYS } from '@/constants/localization';
 import { ButtonAction } from '@/constants/buttons';
 import { DialogTypes } from '@/constants/dialogs';
-import { QueryKeys } from '@/constants/queries';

 import breakpoints from '@/styles/breakpoints';
 import { useAccounts, useBreakpoints, useStringGetter } from '@/hooks';
@@ -69,9 +68,9 @@ const EstimatedRewards = () => {
  const stringGetter = useStringGetter();
  const { dydxAddress } = useAccounts();

-  const { data, isLoading, status, error } = useQuery({
+  const { data, isLoading } = useQuery({
    enabled: !!dydxAddress,
-    queryKey: [QueryKeys.LAUNCH_INCENTIVES, dydxAddress, SEASON_NUMBER],
+    queryKey: `launch_incentives_rewards_${dydxAddress ?? ''}_${SEASON_NUMBER}`,
    queryFn: async () => {
      if (!dydxAddress) return undefined;
      const resp = await fetch(
@@ -79,14 +78,9 @@ const EstimatedRewards = () => {
      );
      return (await resp.json())?.incentivePoints;
    },
+    onError: (error: Error) => log('LaunchIncentives/fetchPoints', error),
  });

-  useEffect(() => {
-    if (status === 'error') {
-      log('LaunchIncentives/fetchPoints', error);
-    }
-  }, [status]);
-
  return (
    <Styled.EstimatedRewardsCard>
      <Styled.EstimatedRewardsCardContent>
@@ -159,15 +153,8 @@ const LaunchIncentivesContent = () => {
 const Styled: Record<string, AnyStyledComponent> = {};

 Styled.Panel = styled(Panel)`
-  --panel-paddingY: 1rem;
-  --panel-paddingX: 1.5rem;
-
  background-color: var(--color-layer-4);
  width: 100%;
-
-  @media ${breakpoints.tablet} {
-    --panel-paddingY: 1.5rem;
-  }
 `;

 Styled.ForV4 = styled.span`
@@ -231,7 +218,7 @@ Styled.Column = styled.div`
 Styled.EstimatedRewardsCard = styled.div`
  ${layoutMixins.spacedRow}
  padding: 1rem 1.25rem;
-  min-width: 21.25rem;
+  min-width: 19rem;
  height: calc(100% - calc(1.5rem * 2));
  margin: 1.5rem;

@@ -7,8 +7,6 @@ import { ButtonAction, ButtonSize, ButtonType } from '@/constants/buttons';

 import { useAccountBalance, useBreakpoints, useStringGetter } from '@/hooks';

-import { breakpoints } from '@/styles';
-
 import { layoutMixins } from '@/styles/layoutMixins';

 import { Details } from '@/components/Details';
@@ -28,7 +26,7 @@ import { MustBigNumber } from '@/lib/numbers';
 const TOKEN_MIGRATION_LEARN_MORE_LINK =
  'https://www.dydx.foundation/blog/update-on-exploring-the-future-of-dydx';

-export const MigratePanel = () => {
+export const MigratePanel = ({ className }: { className?: string }) => {
  const { isNotTablet } = useBreakpoints();
  const stringGetter = useStringGetter();

@@ -45,6 +43,7 @@ export const MigratePanel = () => {

  return isNotTablet ? (
    <Styled.MigratePanel
+      className={className}
      slotHeader={<Styled.Title>{stringGetter({ key: STRING_KEYS.MIGRATE })}</Styled.Title>}
      slotRight={
        <Styled.MigrateAction>
@@ -74,6 +73,7 @@ export const MigratePanel = () => {
    </Styled.MigratePanel>
  ) : (
    <Styled.MigratePanel
+      className={className}
      slotHeader={
        <Styled.MobileMigrateHeader>
          <h3>
@@ -134,17 +134,11 @@ export const MigratePanel = () => {
 const Styled: Record<string, AnyStyledComponent> = {};

 Styled.MigratePanel = styled(Panel)`
-  --panel-paddingX: 1.5rem;
  width: 100%;

  background-image: url('/dots-background.svg');
  background-position: right;
  background-repeat: no-repeat;
-
-  @media ${breakpoints.tablet} {
-    --panel-paddingY: 1.5rem;
-    --panel-content-paddingY: 1rem;
-  }
 `;

 Styled.Title = styled.h3`
@@ -157,7 +151,7 @@ Styled.Title = styled.h3`
 Styled.MigrateAction = styled.div`
  ${layoutMixins.flexEqualColumns}
  align-items: center;
-  margin-right: 1rem;
+  margin: 1rem;
  gap: 1rem;
  padding: 1rem;
  width: 100%;
@@ -197,7 +191,7 @@ Styled.MobileMigrateHeader = styled.div`
  font: var(--font-small-book);
  color: var(--color-text-0);

-  padding: 1rem 1.5rem 0;
+  padding: 1rem 1rem 0;

  h3 {
    ${layoutMixins.inlineRow}
@@ -1,5 +1,6 @@
 import styled, { AnyStyledComponent } from 'styled-components';

+import { breakpoints } from '@/styles';
 import { STRING_KEYS } from '@/constants/localization';
 import { layoutMixins } from '@/styles/layoutMixins';
 import { useStringGetter } from '@/hooks';
@@ -51,6 +52,7 @@ export const RewardsHelpPanel = () => {
 const Styled: Record<string, AnyStyledComponent> = {};

 Styled.HelpCard = styled(Panel)`
+  --panel-content-paddingX: 0;
  --panel-content-paddingY: 0;
  width: 100%;
  height: max-content;
@@ -64,11 +66,15 @@ Styled.Header = styled.div`
  ${layoutMixins.spacedRow}
  gap: 1ch;

-  padding: 1.25rem 1.5rem;
+  padding: 1rem 1rem;
  border-bottom: var(--border-width) solid var(--border-color);

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

+  @media ${breakpoints.notTablet} {
+    padding: 1.5rem 1.25rem;
+  }
+
  h3 {
    font: var(--font-medium-book);
    color: var(--color-text-2);
@@ -1,15 +1,18 @@
 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, useURLConfigs } from '@/hooks';

 import { breakpoints } from '@/styles';
 import { layoutMixins } from '@/styles/layoutMixins';

+import { BackButton } from '@/components/BackButton';
 import { Panel } from '@/components/Panel';
 import { IconName } from '@/components/Icon';
 import { IconButton } from '@/components/IconButton';
@@ -20,12 +23,14 @@ import { openDialog } from '@/state/dialogs';
 import { DYDXBalancePanel } from './DYDXBalancePanel';
 import { MigratePanel } from './MigratePanel';
 import { LaunchIncentivesPanel } from './LaunchIncentivesPanel';
+import { RewardsHelpPanel } from './RewardsHelpPanel';

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

  const panelArrow = (
    <Styled.Arrow>
@@ -39,13 +44,16 @@ const RewardsPage = () => {

  return (
    <Styled.Page>
-      {import.meta.env.VITE_V3_TOKEN_ADDRESS && <MigratePanel />}
+      {isTablet && (
+        <Styled.MobileHeader>
+          <BackButton onClick={() => navigate(AppRoute.Profile)} />
+          {stringGetter({ key: STRING_KEYS.TRADING_REWARDS })}
+        </Styled.MobileHeader>
+      )}
+      {import.meta.env.VITE_V3_TOKEN_ADDRESS && isNotTablet && <MigratePanel />}

      {isTablet ? (
-        <>
-          <LaunchIncentivesPanel />
-          <DYDXBalancePanel />
-        </>
+        <LaunchIncentivesPanel />
      ) : (
        <Styled.PanelRowIncentivesAndBalance>
          <LaunchIncentivesPanel />
@@ -55,7 +63,9 @@ const RewardsPage = () => {

      <Styled.PanelRow>
        <Styled.Panel
-          slotHeader={<Styled.Title>{stringGetter({ key: STRING_KEYS.GOVERNANCE })}</Styled.Title>}
+          slotHeaderContent={
+            <Styled.Title>{stringGetter({ key: STRING_KEYS.GOVERNANCE })}</Styled.Title>
+          }
          slotRight={panelArrow}
          onClick={() => dispatch(openDialog({ type: DialogTypes.ExternalNavKeplr }))}
        >
@@ -68,7 +78,9 @@ const RewardsPage = () => {
        </Styled.Panel>

        <Styled.Panel
-          slotHeader={<Styled.Title>{stringGetter({ key: STRING_KEYS.STAKING })}</Styled.Title>}
+          slotHeaderContent={
+            <Styled.Title>{stringGetter({ key: STRING_KEYS.STAKING })}</Styled.Title>
+          }
          slotRight={panelArrow}
          onClick={() => dispatch(openDialog({ type: DialogTypes.ExternalNavKeplr }))}
        >
@@ -80,6 +92,8 @@ const RewardsPage = () => {
          </Styled.Description>
        </Styled.Panel>
      </Styled.PanelRow>
+
+      <RewardsHelpPanel />
    </Styled.Page>
  );
 };
@@ -95,33 +109,41 @@ Styled.Page = styled.div`
  align-items: center;

  > * {
-    --content-max-width: 70rem;
+    --content-max-width: 80rem;
    max-width: min(calc(100vw - 4rem), var(--content-max-width));
  }

  @media ${breakpoints.tablet} {
-    padding: 1.25rem;
+    --stickyArea-topHeight: var(--page-header-height-mobile);
+    padding: 0 1rem 1rem;

    > * {
-      max-width: calc(100vw - 2.5rem);
+      max-width: calc(100vw - 2rem);
      width: 100%;
    }
  }
 `;

-Styled.Panel = styled(Panel)`
-  --panel-paddingX: 1.5rem;
+Styled.MobileHeader = styled.header`
+  ${layoutMixins.contentSectionDetachedScrollable}
+  ${layoutMixins.stickyHeader}
+  z-index: 2;
+  padding: 1.25rem 0;
+  margin-bottom: -1.5rem;

-  @media ${breakpoints.tablet} {
-    --panel-paddingY: 1.5rem;
-    --panel-content-paddingY: 1rem;
-  }
+  font: var(--font-large-medium);
+  color: var(--color-text-2);
+  background-color: var(--color-layer-2);
+`;
+
+Styled.Panel = styled(Panel)`
+  height: fit-content;
 `;

 Styled.Title = styled.h3`
  font: var(--font-medium-book);
  color: var(--color-text-2);
-  padding: 1rem 1.5rem 0;
+  margin-bottom: -1rem;
 `;

 Styled.Description = styled.div`
@@ -1,10 +1,8 @@
 import { createSelector } from 'reselect';

-import { SubaccountPosition } from '@/constants/abacus';
 import { OnboardingState, OnboardingSteps } from '@/constants/account';

 import {
-  getExistingOpenPositions,
  getOnboardingGuards,
  getOnboardingState,
  getSubaccountId,
@@ -60,13 +58,8 @@ export const calculateIsAccountViewOnly = createSelector(
 );

 /**
- * @description calculate whether the subaccount has open positions
+ * @description calculate whether the subaccount has uncommitted positions
 */
-export const calculateHasOpenPositions = createSelector(
-  [getExistingOpenPositions],
-  (openPositions?: SubaccountPosition[]) => (openPositions?.length || 0) > 0
-);
-
 export const calculateHasUncommittedOrders = createSelector(
  [getUncommittedOrderClientIds],
  (uncommittedOrderClientIds: number[]) => uncommittedOrderClientIds.length > 0
@@ -2,6 +2,7 @@ import { OrderSide } from '@dydxprotocol/v4-client-js';
 import { createSelector } from 'reselect';

 import {
+  type AbacusOrderStatuses,
  type SubaccountOrder,
  type SubaccountFill,
  type SubaccountFundingPayment,
@@ -43,7 +44,6 @@ 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,6 +258,14 @@ 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
@@ -266,8 +274,7 @@ export const getTradeInfoNumbers = createSelector(
  [getExistingOpenPositions, getSubaccountOrders, getSubaccountFills, getSubaccountFundingPayments],
  (positions, orders, fills, fundingPayments) => ({
    numTotalPositions: positions?.length,
-    numTotalOpenOrders: orders?.filter((order) => order.status !== AbacusOrderStatus.cancelled)
-      .length,
+    numTotalOpenOrders: orders?.filter((order) => isOpenOrderStatus(order.status)).length,
    numTotalFills: fills?.length,
    numTotalFundingPayments: fundingPayments?.length,
  })
@@ -281,8 +288,7 @@ export const getCurrentMarketTradeInfoNumbers = createSelector(
  [getCurrentMarketOrders, getCurrentMarketFills, getCurrentMarketFundingPayments],
  (marketOrders, marketFills, marketFundingPayments) => {
    return {
-      numOpenOrders: marketOrders?.filter((order) => order.status !== AbacusOrderStatus.cancelled)
-        .length,
+      numOpenOrders: marketOrders?.filter((order) => isOpenOrderStatus(order.status)).length,
      numFills: marketFills?.length,
      numFundingPayments: marketFundingPayments?.length,
    };
@@ -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);

@@ -3,18 +3,19 @@ import styled, { AnyStyledComponent } from 'styled-components';
 import { useDispatch } from 'react-redux';

 import { AlertType } from '@/constants/alerts';
-import { ButtonAction, ButtonSize } from '@/constants/buttons';
 import { STRING_KEYS } from '@/constants/localization';
+
 import { WalletType, wallets } from '@/constants/wallets';
-import { useStringGetter, useURLConfigs } from '@/hooks';
-import { useDisplayedWallets } from '@/hooks/useDisplayedWallets';
-import { useWalletConnection } from '@/hooks/useWalletConnection';
+import { ButtonAction, ButtonSize } from '@/constants/buttons';

 import { AlertMessage } from '@/components/AlertMessage';
 import { Button } from '@/components/Button';
 import { Icon } from '@/components/Icon';
 import { Link } from '@/components/Link';

+import { useAccounts, useStringGetter, useURLConfigs } from '@/hooks';
+import { useDisplayedWallets } from '@/hooks/useDisplayedWallets';
+
 import { breakpoints } from '@/styles';
 import { layoutMixins } from '@/styles/layoutMixins';

@@ -24,7 +25,7 @@ export const ChooseWallet = () => {

  const displayedWallets = useDisplayedWallets();

-  const { selectWalletType, selectedWalletType, selectedWalletError } = useWalletConnection();
+  const { selectWalletType, selectedWalletType, selectedWalletError } = useAccounts();

  return (
    <>
@@ -86,7 +86,13 @@ export const GenerateKeys = ({
  ].includes(status);

  const signTypedData = getSignTypedData(selectedNetwork);
-  const { signTypedDataAsync } = useSignTypedData();
+  const { signTypedDataAsync } = useSignTypedData({
+    ...signTypedData,
+    domain: {
+      ...signTypedData.domain,
+      chainId,
+    },
+  });

  const staticEncryptionKey = import.meta.env.VITE_PK_ENCRYPTION_KEY;

@@ -97,13 +103,7 @@ export const GenerateKeys = ({
      // 1. First signature
      setStatus(EvmDerivedAccountStatus.Deriving);

-      const signature = await signTypedDataAsync({
-        ...signTypedData,
-        domain: {
-          ...signTypedData.domain,
-          chainId,
-        },
-      });
+      const signature = await signTypedDataAsync();
      const { wallet: dydxWallet } = await getWalletFromEvmSignature({ signature });

      // 2. Ensure signature is deterministic
@@ -121,13 +121,7 @@ export const GenerateKeys = ({
          setStatus(EvmDerivedAccountStatus.EnsuringDeterminism);

          // Second signature
-          const additionalSignature = await signTypedDataAsync({
-            ...signTypedData,
-            domain: {
-              ...signTypedData.domain,
-              chainId,
-            },
-          });
+          const additionalSignature = await signTypedDataAsync();

          if (signature !== additionalSignature) {
            throw new Error(
@@ -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',
        },
@@ -34,6 +34,7 @@ export const TokenSelectMenu = ({ selectedToken, onSelectToken }: ElementProps)
      selectedToken && onSelectToken(selectedToken);
    },
    slotBefore: <Styled.Img src={token.iconUrl} alt="" />,
+    tag: resources?.tokenResources?.get(token.type)?.symbol,
  }));

  return (
@@ -55,7 +55,7 @@ export const WithdrawButtonAndReceipt = ({
  const stringGetter = useStringGetter();

  const { leverage } = useSelector(getSubaccount, shallowEqual) || {};
-  const { isCctp, summary, requestPayload } = useSelector(getTransferInputs, shallowEqual) || {};
+  const { summary, requestPayload } = useSelector(getTransferInputs, shallowEqual) || {};
  const canAccountTrade = useSelector(calculateCanAccountTrade, shallowEqual);
  const { usdcLabel } = useTokenConfigs();

@@ -85,26 +85,6 @@ 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',
@@ -153,7 +133,7 @@ export const WithdrawButtonAndReceipt = ({
          {withdrawToken && <Tag>{withdrawToken?.symbol}</Tag>}
        </span>
      ),
-      value: <Output type={OutputType.Asset} value={toAmount} fractionDigits={TOKEN_DECIMALS} />,
+      value: <Output type={OutputType.Asset} value={summary?.toAmount} fractionDigits={TOKEN_DECIMALS} />,
      subitems: [
        {
          key: 'minimum-amount-received',
@@ -164,7 +144,7 @@ export const WithdrawButtonAndReceipt = ({
            </span>
          ),
          value: (
-            <Output type={OutputType.Asset} value={toAmountMin} fractionDigits={TOKEN_DECIMALS} />
+            <Output type={OutputType.Asset} value={summary?.toAmountMin} fractionDigits={TOKEN_DECIMALS} />
          ),
          tooltip: 'minimum-amount-received',
        },
Author	SHA1	Message	Date
Bill He	d03dfe359d	Fix toAmount/toAmountMin on withdraw	2024-01-15 10:19:21 -08:00
moo-onthelawn	f304bb069a	TRCL-1979 Show open positions / orders in portfolio sidebar (#228 ) * add tags for open orders + positions * clean up, use new num selector function * update logic for open orders	2024-01-12 14:44:09 -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
aleka	b2234cb969	reorganize rewards vs. profile, update panel and accordion styling (#221 ) * reorganize rewards vs. profile, update panel and accordion styling * feedback	2024-01-09 16:57:02 -05:00
Bill	4bcb1f64ac	Add Kava support for onboarding, and add token symbol to token select (#220 ) * Add Kava support for onboarding, and add token symbol to token select * bump abacus	2024-01-09 11:51:31 -08:00