Add trailing blocks to NetworkStatus analytics event

Bump abacus, fix onboarding toAmount (#229 )
Update Funding Chart Tooltip (#225 )
2024-01-12 16:01:37 -05:00 · 2024-01-11 11:52:02 -08:00 · 2024-01-11 10:31:53 -08:00 · 2024-01-11 11:02:23 -05:00 · 2024-01-09 16:35:19 -08:00 · 2024-01-09 14:01:38 -08:00
58 changed files with 1799 additions and 1176 deletions
@@ -39,11 +39,12 @@
    "@cosmjs/proto-signing": "^0.31.0",
    "@cosmjs/stargate": "^0.31.0",
    "@cosmjs/tendermint-rpc": "^0.31.0",
-    "@dydxprotocol/v4-abacus": "^1.1.24",
+    "@dydxprotocol/v4-abacus": "^1.2.3",
    "@dydxprotocol/v4-client-js": "^1.0.11",
-    "@dydxprotocol/v4-localization": "^1.0.19",
+    "@dydxprotocol/v4-localization": "^1.1.11",
    "@ethersproject/providers": "^5.7.2",
    "@js-joda/core": "^5.5.3",
+    "@radix-ui/react-accordion": "^1.1.2",
    "@radix-ui/react-checkbox": "^1.0.4",
    "@radix-ui/react-collapsible": "^1.0.3",
    "@radix-ui/react-dialog": "^1.0.4",
@@ -110,7 +111,7 @@
    "reselect": "^4.1.8",
    "styled-components": "^5.3.11",
    "use-latest": "^1.2.1",
-    "viem": "^1.12.2",
+    "viem": "^1.20.0",
    "wagmi": "^1.4.12"
  },
  "devDependencies": {
@@ -4,38 +4,9 @@
        "tokenAddress": "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
        "name": "Ethereum"
    },
-    {
-        "chainId": "421613",
-        "tokenAddress": "0xfd064a18f3bf249cf1f87fc203e90d8f650f2d63",
-        "name": "Arbitrum Goerli"
-    },
-    {
-        "chainId": "43113",
-        "tokenAddress": "0x5425890298aed601595a70AB815c96711a31Bc65",
-        "name": "Avalanche Fuji"
-    },
-    {
-        "chainId": "84531",
-        "tokenAddress": "0xf175520c52418dfe19c8098071a252da48cd1c19",
-        "name": "Base Goerli"
-    },
    {
        "chainId": "5",
        "tokenAddress": "0x07865c6E87B9F70255377e024ace6630C1Eaa37F",
        "name": "Ethereum Goerli"
-    },
-    {
-        "chainId": "grand-1",
-        "tokenAddress": "uusdc",
-        "name": "Noble Testnet"
-    },
-    {
-        "chainId": "420",
-        "tokenAddress": "0xe05606174bac4a6364b31bd0eca4bf4dd368f8c6",
-        "name": "OP Goerli"
-    },
-    {
-        "chainId": "103",
-        "name": "Solana Devnet"
    }
 ]
@@ -0,0 +1,16 @@
+{
+    "tradingRewardsFAQs": [
+        {
+            "questionLocalizationKey": "APP.TRADING_REWARDS.FAQ_WHO_IS_ELIGIBLE_QUESTION",
+            "answerLocalizationKey": "APP.TRADING_REWARDS.FAQ_WHO_IS_ELIGIBLE_ANSWER"
+        },
+        {
+            "questionLocalizationKey": "APP.TRADING_REWARDS.FAQ_HOW_DO_TRADING_REWARDS_WORK_QUESTION",
+            "answerLocalizationKey": "APP.TRADING_REWARDS.FAQ_HOW_DO_TRADING_REWARDS_WORK_ANSWER"
+        },
+        {
+            "questionLocalizationKey": "APP.TRADING_REWARDS.FAQ_HOW_DO_I_CLAIM_MY_REWARDS_QUESTION",
+            "answerLocalizationKey": "APP.TRADING_REWARDS.FAQ_HOW_DO_I_CLAIM_MY_REWARDS_ANSWER"
+        }
+    ]
+}
@@ -39,7 +39,7 @@
   "environments": {
      "dydxprotocol-dev": {
         "name": "v4 Dev",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydxprotocol-testnet",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -89,7 +89,7 @@
            "governanceLearnMore": "https://help.dydx.exchange",
            "stakingLearnMore": "https://help.dydx.exchange",
            "keplrDashboard": "https://testnet.keplr.app/",
-            "accountExportLearnMore": "https://help.dydx.exchange",
+            "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
            "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
         },
         "wallets": {
@@ -113,7 +113,7 @@
      },
      "dydxprotocol-dev-2": {
         "name": "v4 Dev 2",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydxprotocol-testnet",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -162,7 +162,7 @@
            "governanceLearnMore": "https://help.dydx.exchange",
            "stakingLearnMore": "https://help.dydx.exchange",
            "keplrDashboard": "https://testnet.keplr.app/",
-            "accountExportLearnMore": "https://help.dydx.exchange",
+            "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
            "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
         },
         "wallets": {
@@ -186,7 +186,7 @@
      },
      "dydxprotocol-dev-4": {
         "name": "v4 Dev 4",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydxprotocol-testnet",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -235,7 +235,7 @@
            "governanceLearnMore": "https://help.dydx.exchange",
            "stakingLearnMore": "https://help.dydx.exchange",
            "keplrDashboard": "https://testnet.keplr.app/",
-            "accountExportLearnMore": "https://help.dydx.exchange",
+            "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
            "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
         },
         "wallets": {
@@ -259,7 +259,7 @@
      },
      "dydxprotocol-dev-5": {
         "name": "v4 Dev 5",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydxprotocol-testnet",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -308,7 +308,7 @@
            "governanceLearnMore": "https://help.dydx.exchange",
            "stakingLearnMore": "https://help.dydx.exchange",
            "keplrDashboard": "https://testnet.keplr.app/",
-            "accountExportLearnMore": "https://help.dydx.exchange",
+            "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
            "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
         },
         "wallets": {
@@ -332,7 +332,7 @@
      },
      "dydxprotocol-staging": {
         "name": "v4 Staging",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydxprotocol-testnet",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -383,7 +383,7 @@
            "governanceLearnMore": "https://help.dydx.exchange",
            "stakingLearnMore": "https://help.dydx.exchange",
            "keplrDashboard": "https://testnet.keplr.app/",
-            "accountExportLearnMore": "https://help.dydx.exchange",
+            "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
            "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
         },
         "wallets": {
@@ -407,7 +407,7 @@
      },
      "dydxprotocol-staging-forced-update": {
         "name": "v4 Staging Forced Update",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydxprotocol-testnet",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -480,7 +480,7 @@
      },
      "dydxprotocol-staging-west": {
         "name": "v4 Staging West",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydxprotocol-testnet",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -531,7 +531,7 @@
            "governanceLearnMore": "https://help.dydx.exchange",
            "stakingLearnMore": "https://help.dydx.exchange",
            "keplrDashboard": "https://testnet.keplr.app/",
-            "accountExportLearnMore": "https://help.dydx.exchange",
+            "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
            "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
         },
         "wallets": {
@@ -555,7 +555,7 @@
      },
      "dydxprotocol-testnet": {
         "name": "v4 Public Testnet",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydx-testnet-4",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -579,8 +579,8 @@
         "endpoints": {
            "indexers": [
               {
-                  "api": "https://dydx-testnet.imperator.co",
-                  "socket": "wss://dydx-testnet.imperator.co"
+                  "api": "https://indexer.v4testnet.dydx.exchange",
+                  "socket": "wss://indexer.v4testnet.dydx.exchange"
               }
            ],
            "validators": [
@@ -610,7 +610,7 @@
            "governanceLearnMore": "https://help.dydx.exchange",
            "stakingLearnMore": "https://help.dydx.exchange",
            "keplrDashboard": "https://testnet.keplr.app/",
-            "accountExportLearnMore": "https://help.dydx.exchange",
+            "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
            "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
         },
         "wallets": {
@@ -634,7 +634,7 @@
      },
      "dydxprotocol-testnet-dydx": {
         "name": "v4 Public Testnet/dYdX",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydx-testnet-4",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -686,7 +686,7 @@
            "governanceLearnMore": "https://help.dydx.exchange",
            "stakingLearnMore": "https://help.dydx.exchange",
            "keplrDashboard": "https://testnet.keplr.app/",
-            "accountExportLearnMore": "https://help.dydx.exchange",
+            "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
            "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
         },
         "wallets": {
@@ -710,7 +710,7 @@
      },
      "dydxprotocol-testnet-nodefleet": {
         "name": "v4 Public Testnet/nodefleet",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydx-testnet-4",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -734,8 +734,8 @@
         "endpoints": {
            "indexers": [
               {
-                  "api": "https://dydx-testnet.imperator.co",
-                  "socket": "wss://dydx-testnet.imperator.co"
+                  "api": "https://indexer.v4testnet.dydx.exchange",
+                  "socket": "wss://indexer.v4testnet.dydx.exchange"
               }
            ],
            "validators": [
@@ -762,7 +762,7 @@
            "governanceLearnMore": "https://help.dydx.exchange",
            "stakingLearnMore": "https://help.dydx.exchange",
            "keplrDashboard": "https://testnet.keplr.app/",
-            "accountExportLearnMore": "https://help.dydx.exchange",
+            "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
            "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
         },
         "wallets": {
@@ -786,7 +786,7 @@
      },
      "dydxprotocol-testnet-kingnodes": {
         "name": "v4 Public Testnet/KingNodes",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydx-testnet-4",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -810,8 +810,8 @@
         "endpoints": {
            "indexers": [
               {
-                  "api": "https://dydx-testnet.imperator.co",
-                  "socket": "wss://dydx-testnet.imperator.co"
+                  "api": "https://indexer.v4testnet.dydx.exchange",
+                  "socket": "wss://indexer.v4testnet.dydx.exchange"
               }
            ],
            "validators": [
@@ -838,7 +838,7 @@
            "governanceLearnMore": "https://help.dydx.exchange",
            "stakingLearnMore": "https://help.dydx.exchange",
            "keplrDashboard": "https://testnet.keplr.app/",
-            "accountExportLearnMore": "https://help.dydx.exchange",
+            "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
            "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
         },
         "wallets": {
@@ -862,7 +862,7 @@
      },
      "dydxprotocol-testnet-liquify": {
         "name": "v4 Public Testnet/Liquify",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydx-testnet-4",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -886,8 +886,8 @@
         "endpoints": {
            "indexers": [
               {
-                  "api": "https://dydx-testnet.imperator.co",
-                  "socket": "wss://dydx-testnet.imperator.co"
+                  "api": "https://indexer.v4testnet.dydx.exchange",
+                  "socket": "wss://indexer.v4testnet.dydx.exchange"
               }
            ],
            "validators": [
@@ -914,7 +914,7 @@
            "governanceLearnMore": "https://help.dydx.exchange",
            "stakingLearnMore": "https://help.dydx.exchange",
            "keplrDashboard": "https://testnet.keplr.app/",
-            "accountExportLearnMore": "https://help.dydx.exchange",
+            "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
            "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
         },
         "wallets": {
@@ -938,7 +938,7 @@
      },
      "dydxprotocol-testnet-polkachu": {
         "name": "v4 Public Testnet/Polkahcu",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydx-testnet-4",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -962,8 +962,8 @@
         "endpoints": {
            "indexers": [
               {
-                  "api": "https://dydx-testnet.imperator.co",
-                  "socket": "wss://dydx-testnet.imperator.co"
+                  "api": "https://indexer.v4testnet.dydx.exchange",
+                  "socket": "wss://indexer.v4testnet.dydx.exchange"
               }
            ],
            "validators": [
@@ -1005,7 +1005,7 @@
      },
      "dydxprotocol-testnet-bware": {
         "name": "v4 Public Testnet/BWare",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydx-testnet-4",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -1029,8 +1029,8 @@
         "endpoints": {
            "indexers": [
               {
-                  "api": "https://dydx-testnet.imperator.co",
-                  "socket": "wss://dydx-testnet.imperator.co"
+                  "api": "https://indexer.v4testnet.dydx.exchange",
+                  "socket": "wss://indexer.v4testnet.dydx.exchange"
               }
            ],
            "validators": [
@@ -1126,7 +1126,7 @@
            "blogs": "[HTTP link to blogs, can be null]",
            "foundation": "[HTTP link to foundation, can be null]",
            "initialMarginFractionLearnMore": "[HTTP link to initial margin fraction learn more, can be null]",
-            "reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
+            "reduceOnlyLearnMore": "[HTTP link to reduce-only learn more, can be null]",
            "documentation": "[HTTP link to documentation, can be null]",
            "community": "[HTTP link to community, can be null]",
            "help": "[HTTP link to help page, can be null]",
@@ -1,4 +1,4 @@
-import { Suspense } from 'react';
+import { lazy, Suspense } from 'react';
 import { Navigate, Route, Routes } from 'react-router-dom';
 import styled, { AnyStyledComponent, css } from 'styled-components';
 import { WagmiConfig } from 'wagmi';
@@ -25,16 +25,6 @@ import { SubaccountProvider } from '@/hooks/useSubaccount';

 import { GuardedMobileRoute } from '@/components/GuardedMobileRoute';

-import MarketsPage from '@/pages/markets/Markets';
-import PortfolioPage from '@/pages/portfolio/Portfolio';
-import { AlertsPage } from '@/pages/AlertsPage';
-import ProfilePage from '@/pages/Profile';
-import { SettingsPage } from '@/pages/settings/Settings';
-import TradePage from '@/pages/trade/Trade';
-import { RewardsPage } from '@/pages/rewards/RewardsPage';
-import { TermsOfUsePage } from '@/pages/TermsOfUsePage';
-import { PrivacyPolicyPage } from '@/pages/PrivacyPolicyPage';
-
 import { HeaderDesktop } from '@/layout/Header/HeaderDesktop';
 import { FooterDesktop } from '@/layout/Footer/FooterDesktop';
 import { FooterMobile } from '@/layout/Footer/FooterMobile';
@@ -46,11 +36,22 @@ import { config } from '@/lib/wagmi';

 import { breakpoints } from '@/styles';
 import { layoutMixins } from '@/styles/layoutMixins';
+import { LoadingSpace } from './components/Loading/LoadingSpinner';

 import '@/styles/constants.css';
 import '@/styles/fonts.css';
 import '@/styles/web3modal.css';

+const MarketsPage = lazy(() => import('@/pages/markets/Markets'));
+const PortfolioPage = lazy(() => import('@/pages/portfolio/Portfolio'));
+const AlertsPage = lazy(() => import('@/pages/AlertsPage'));
+const ProfilePage = lazy(() => import('@/pages/Profile'));
+const SettingsPage = lazy(() => import('@/pages/settings/Settings'));
+const TradePage = lazy(() => import('@/pages/trade/Trade'));
+const RewardsPage = lazy(() => import('@/pages/rewards/RewardsPage'));
+const TermsOfUsePage = lazy(() => import('@/pages/TermsOfUsePage'));
+const PrivacyPolicyPage = lazy(() => import('@/pages/PrivacyPolicyPage'));
+
 const queryClient = new QueryClient();

 const Content = () => {
@@ -69,7 +70,7 @@ const Content = () => {
      {isNotTablet && <HeaderDesktop />}

      <Styled.Main>
-        <Suspense fallback={null}>
+        <Suspense fallback={<LoadingSpace id="main" />}>
          <Routes>
            <Route path={AppRoute.Trade}>
              <Route path=":market" element={<TradePage />} />
@@ -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.',
+    },
+  ],
+};
@@ -0,0 +1,129 @@
+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 = {
+  header: React.ReactNode;
+  content: React.ReactNode;
+};
+
+export type AccordionProps = {
+  items: AccordionItem[];
+  className?: string;
+};
+
+export const Accordion = ({ items, className }: AccordionProps) => (
+  <Styled.Root className={className} type="single" collapsible>
+    {items.map(({ header, content }, idx) => (
+      <Styled.Item key={idx} value={idx.toString()}>
+        <Header>
+          <Styled.Trigger>
+            {header}
+            <Styled.Icon>
+              <PlusIcon />
+            </Styled.Icon>
+          </Styled.Trigger>
+        </Header>
+        <Styled.Content>{content}</Styled.Content>
+      </Styled.Item>
+    ))}
+  </Styled.Root>
+);
+
+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);
+  }
+`;
+
+Styled.Item = styled(Item)``;
+
+Styled.Icon = styled.div`
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+
+  width: 2.25rem;
+  height: 2.25rem;
+
+  --color-border: var(--color-layer-6);
+  color: var(--color-text-1);
+  background-color: var(--color-layer-5);
+  border: solid var(--border-width) var(--color-border);
+  border-radius: 50%;
+  font: var(--font-small-book);
+
+  svg {
+    height: 1.125em;
+    width: 1.125em;
+  }
+`;
+
+Styled.Trigger = styled(Trigger)`
+  ${layoutMixins.spacedRow}
+  width: 100%;
+  padding: var(--accordion-paddingY) var(--accordion-paddingX);
+  gap: 0.5rem;
+
+  color: var(--color-text-1);
+  text-align: start;
+
+  &:hover {
+    ${Styled.Icon} {
+      color: var(--color-text-2);
+      filter: brightness(1.1);
+    }
+  }
+
+  svg {
+    color: var(--color-text-0);
+    transition: transform 0.3s var(--ease-out-expo);
+  }
+
+  &[data-state='open'] svg {
+    transform: rotate(45deg);
+  }
+`;
+
+Styled.Content = styled(Content)`
+  overflow: hidden;
+  margin: 0 var(--accordion-paddingX) var(--accordion-paddingY);
+
+  color: var(--color-text-0);
+
+  &[data-state='open'] {
+    animation: ${keyframes`
+      from {
+        height: 0;
+      }
+      to {
+        height: var(--radix-accordion-content-height);
+      }
+    `} 0.3s var(--ease-out-expo);
+  }
+
+  &[data-state='closed'] {
+    animation: ${keyframes`
+      from {
+        height: var(--radix-accordion-content-height);
+      }
+      to {
+        height: 0;
+      }
+    `} 0.1s var(--ease-in-expo);
+  }
+`;
@@ -24,7 +24,6 @@ import {
  CoinsIcon,
  CommentIcon,
  CopyIcon,
-  CubeIcon,
  DepositIcon,
  DepthChartIcon,
  DiscordIcon,
@@ -55,6 +54,7 @@ import {
  OverviewIcon,
  PencilIcon,
  PlayIcon,
+  PlusIcon,
  PositionsIcon,
  PriceChartIcon,
  PrivacyIcon,
@@ -98,7 +98,6 @@ export enum IconName {
  Coins = 'Coins',
  Comment = 'Comment',
  Copy = 'Copy',
-  Cube = 'Cube',
  Deposit = 'Deposit',
  DepthChart = 'DepthChart',
  Discord = 'Discord',
@@ -130,6 +129,7 @@ export enum IconName {
  Overview = 'Overview',
  Pencil = 'Pencil',
  Play = 'Play',
+  Plus = 'Plus',
  Positions = 'Positions',
  PriceChart = 'PriceChart',
  Privacy = 'Privacy',
@@ -173,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,
@@ -204,6 +203,7 @@ const icons = {
  [IconName.Overview]: OverviewIcon,
  [IconName.Pencil]: PencilIcon,
  [IconName.Play]: PlayIcon,
+  [IconName.Plus]: PlusIcon,
  [IconName.Positions]: PositionsIcon,
  [IconName.PriceChart]: PriceChartIcon,
  [IconName.Privacy]: PrivacyIcon,
@@ -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);
@@ -43,6 +43,7 @@ import { layoutMixins } from '@/styles/layoutMixins';

 import { Icon, IconName } from './Icon';
 import { Tag } from './Tag';
+import { MustBigNumber } from '@/lib/numbers';

 export { TableCell } from './Table/TableCell';
 export { TableColumnHeader } from './Table/TableColumnHeader';
@@ -161,10 +162,7 @@ export const Table = <TableRowData extends object, TableRowKey extends Key>({
        ? // String
          collator.compare(first as string, second as string)
        : // Number
-          Math.sign(
-            (parseInt(first as string) || (first as number)) -
-              (parseInt(second as string) || (second as number))
-          )) *
+          MustBigNumber(first).comparedTo(MustBigNumber(second))) *
      // Flip the direction if descending order is specified.
      (sortDirection === 'descending' ? -1 : 1)
    );
@@ -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];
@@ -96,6 +96,7 @@ export type AnalyticsEventData<T extends AnalyticsEvent> =
        elapsedTime?: number;
        blockHeight?: number;
        indexerBlockHeight?: number;
+        trailingBlocks?: number;
      }
    : // Navigation
    T extends AnalyticsEvent.NavigatePage
@@ -0,0 +1,40 @@
+import { OrderSide } from '@dydxprotocol/v4-client-js';
+import { FundingDirection } from './markets';
+
+// ------ Depth Chart ------ //
+export enum DepthChartSeries {
+  Asks = 'Asks',
+  Bids = 'Bids',
+  MidMarket = 'MidMarket',
+}
+
+export type DepthChartDatum = {
+  size: number;
+  price: number;
+  depth: number;
+  seriesKey: DepthChartSeries;
+};
+
+export type DepthChartPoint = {
+  side: OrderSide;
+  price: number;
+  size: number;
+};
+
+export const SERIES_KEY_FOR_ORDER_SIDE = {
+  [OrderSide.BUY]: DepthChartSeries.Bids,
+  [OrderSide.SELL]: DepthChartSeries.Asks,
+};
+
+// ------ Funding Chart ------ //
+export enum FundingRateResolution {
+  OneHour = 'OneHour',
+  EightHour = 'EightHour',
+  Annualized = 'Annualized',
+}
+
+export type FundingChartDatum = {
+  time: number;
+  fundingRate: number;
+  direction: FundingDirection;
+};
@@ -25,4 +25,5 @@ export const DEFAULT_MARKETID = 'ETH-USD';
 export enum FundingDirection {
  ToShort = 'ToShort',
  ToLong = 'ToLong',
+  None = 'None',
 }
@@ -10,6 +10,7 @@ export const LEVERAGE_DECIMALS = 2;
 export const TOKEN_DECIMALS = 4;
 export const LARGE_TOKEN_DECIMALS = 2;
 export const FEE_DECIMALS = 3;
+export const FUNDING_DECIMALS = 6;

 export const QUANTUM_MULTIPLIER = 1_000_000;

@@ -18,3 +19,7 @@ export enum NumberSign {
  Negative = 'Negative',
  Neutral = 'Neutral',
 }
+
+// Deposit/Withdraw
+export const MAX_CCTP_TRANSFER_AMOUNT = 1_000_000;
+export const MAX_PRICE_IMPACT = 0.02; // 2%
@@ -1,6 +1,10 @@
 import { type TooltipStrings, TOOLTIP_STRING_KEYS } from '@/constants/localization';

 export const depositTooltips: TooltipStrings = {
+  'minimum-deposit-amount': ({ stringGetter }) => ({
+    title: stringGetter({ key: TOOLTIP_STRING_KEYS.MINIMUM_DEPOSIT_AMOUNT_TITLE }),
+    body: stringGetter({ key: TOOLTIP_STRING_KEYS.MINIMUM_DEPOSIT_AMOUNT_BODY }),
+  }),
  swap: ({ stringGetter }) => ({
    title: stringGetter({ key: TOOLTIP_STRING_KEYS.SWAP_TITLE }),
    body: stringGetter({ key: TOOLTIP_STRING_KEYS.SWAP_BODY }),
@@ -5,6 +5,10 @@ export const withdrawTooltips: TooltipStrings = {
    title: stringGetter({ key: TOOLTIP_STRING_KEYS.FAST_WITHDRAW_FEE_TITLE }),
    body: stringGetter({ key: TOOLTIP_STRING_KEYS.FAST_WITHDRAW_FEE_BODY }),
  }),
+  'minimum-amount-received': ({ stringGetter }) => ({
+    title: stringGetter({ key: TOOLTIP_STRING_KEYS.MINIMUM_AMOUNT_RECEIVED_TITLE }),
+    body: stringGetter({ key: TOOLTIP_STRING_KEYS.MINIMUM_AMOUNT_RECEIVED_BODY }),
+  }),
  'withdraw-types': ({ stringGetter }) => ({
    title: stringGetter({ key: TOOLTIP_STRING_KEYS.WITHDRAW_TYPES_TITLE }),
    body: stringGetter({ key: TOOLTIP_STRING_KEYS.WITHDRAW_TYPES_BODY }),
@@ -97,7 +97,7 @@ export const useAnalytics = () => {
  }, []);

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

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

@@ -5,16 +5,15 @@ import { useMatch, useNavigate } from 'react-router-dom';
 import { LocalStorageKey } from '@/constants/localStorage';
 import { DEFAULT_MARKETID } from '@/constants/markets';
 import { AppRoute } from '@/constants/routes';
+import { useLocalStorage } from '@/hooks/useLocalStorage';

 import { getSelectedNetwork } from '@/state/appSelectors';
 import { closeDialogInTradeBox } from '@/state/dialogs';
 import { setCurrentMarketId } from '@/state/perpetuals';
+import { getMarketIds } from '@/state/perpetualsSelectors';

 import abacusStateManager from '@/lib/abacus';

-import { useLocalStorage } from './useLocalStorage';
-import { getMarketIds } from '@/state/perpetualsSelectors';
-
 export const useCurrentMarketId = () => {
  const navigate = useNavigate();
  const match = useMatch(`/${AppRoute.Trade}/:marketId`);
@@ -33,17 +32,35 @@ export const useCurrentMarketId = () => {
    if (marketIds.length === 0) return marketId ?? lastViewedMarket;
    if (!marketIds.includes(marketId ?? lastViewedMarket)) return DEFAULT_MARKETID;
    return marketId ?? lastViewedMarket;
-  }, [marketIds, marketId]);
+  }, [hasMarketIds, marketId]);

  useEffect(() => {
-    setLastViewedMarket(validId);
-    dispatch(setCurrentMarketId(validId));
-    dispatch(closeDialogInTradeBox());
+    // If v4_markets has not been subscribed to yet or marketId is not specified, default to validId
+    if (!hasMarketIds || !marketId) {
+      setLastViewedMarket(validId);
+      dispatch(setCurrentMarketId(validId));
+      dispatch(closeDialogInTradeBox());

-    navigate(`${AppRoute.Trade}/${validId}`, {
-      replace: true,
-    });
-  }, [validId]);
+      if (validId !== marketId) {
+        navigate(`${AppRoute.Trade}/${validId}`, {
+          replace: true,
+        });
+      }
+    } else {
+      // If v4_markets has been subscribed to, check if marketId is valid
+      if (!marketIds.includes(marketId)) {
+        // If marketId is not valid (i.e. final settlement), navigate to markets page
+        navigate(AppRoute.Markets, {
+          replace: true,
+        });
+      } else {
+        // If marketId is valid, set currentMarketId
+        setLastViewedMarket(marketId);
+        dispatch(setCurrentMarketId(marketId));
+        dispatch(closeDialogInTradeBox());
+      }
+    }
+  }, [hasMarketIds, marketId]);

  useEffect(() => {
    // Check for marketIds otherwise Abacus will silently fail its isMarketValid check
@@ -157,8 +157,8 @@ export const notificationTypes: NotificationTypeConfig[] = [
          const isFinished = Boolean(status) && status?.squidTransactionStatus !== 'ongoing';
          const icon = <Icon iconName={isFinished ? IconName.Transfer : IconName.Clock} />;

-          const transferType = type ??
-            fromChainId === ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId
+          const transferType =
+            type ?? fromChainId === ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId
              ? TransferNotificationTypes.Withdrawal
              : TransferNotificationTypes.Deposit;

@@ -0,0 +1,44 @@
+import { useMemo } from 'react';
+import { shallowEqual, useSelector } from 'react-redux';
+
+import { DepthChartSeries, DepthChartDatum } from '@/constants/charts';
+
+import { getCurrentMarketOrderbook } from '@/state/perpetualsSelectors';
+
+import { MustBigNumber } from '@/lib/numbers';
+
+export const useOrderbookValuesForDepthChart = () => {
+  const orderbook = useSelector(getCurrentMarketOrderbook, shallowEqual);
+
+  return useMemo(() => {
+    const bids = (orderbook?.bids?.toArray() ?? [])
+      .filter(Boolean)
+      .map((datum) => ({ ...datum, seriesKey: DepthChartSeries.Bids } as DepthChartDatum));
+
+    const asks = (orderbook?.asks?.toArray() ?? [])
+      .filter(Boolean)
+      .map((datum) => ({ ...datum, seriesKey: DepthChartSeries.Asks } as DepthChartDatum));
+
+    const lowestBid = bids[bids.length - 1];
+    const highestBid = bids[0];
+    const lowestAsk = asks[0];
+    const highestAsk = asks[asks.length - 1];
+
+    const midMarketPrice = orderbook?.midPrice;
+    const spread = MustBigNumber(lowestAsk?.price ?? 0).minus(highestBid?.price ?? 0);
+    const spreadPercent = orderbook?.spreadPercent;
+
+    return {
+      bids,
+      asks,
+      lowestBid,
+      highestBid,
+      lowestAsk,
+      highestAsk,
+      midMarketPrice,
+      spread,
+      spreadPercent,
+      orderbook,
+    };
+  }, [orderbook]);
+};
@@ -1,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';
@@ -44,6 +43,7 @@ export { default as OrderbookIcon } from './orderbook.svg';
 export { default as OverviewIcon } from './overview.svg';
 export { default as PencilIcon } from './pencil.svg';
 export { default as PlayIcon } from './play.svg';
+export { default as PlusIcon } from './plus.svg';
 export { default as PortfolioIcon } from './portfolio.svg';
 export { default as PositionsIcon } from './positions.svg';
 export { default as PriceChartIcon } from './price-chart.svg';
@@ -0,0 +1 @@
+<svg fill="none" height="12" viewBox="0 0 12 12" width="12" xmlns="http://www.w3.org/2000/svg"><path d="m6.75.75c0-.198912-.07902-.389678-.21967-.53033-.14065-.1406525-.33142-.21967-.53033-.21967s-.38968.0790175-.53033.21967c-.14065.140652-.21967.331418-.21967.53033v4.5h-4.5c-.198912 0-.389678.07902-.53033.21967-.1406525.14065-.21967.33142-.21967.53033s.0790175.38968.21967.53033c.140652.14065.331418.21967.53033.21967h4.5v4.5c0 .1989.07902.3897.21967.5303.14065.1407.33142.2197.53033.2197s.38968-.079.53033-.2197c.14065-.1406.21967-.3314.21967-.5303v-4.5h4.5c.1989 0 .3897-.07902.5303-.21967.1407-.14065.2197-.33142.2197-.53033s-.079-.38968-.2197-.53033c-.1406-.14065-.3314-.21967-.5303-.21967h-4.5z" fill="currentColor"/></svg>
@@ -212,8 +212,8 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
        timeInForce as OrderTimeInForce,
        goodTilTimeInSeconds ?? 0,
        execution as OrderExecution,
-        postOnly,
-        reduceOnly,
+        postOnly ?? undefined,
+        reduceOnly ?? undefined,
        triggerPrice ?? undefined
      );

@@ -351,12 +351,7 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
    }
  }

-  async sendNobleIBC(
-    params: {
-      msgTypeUrl: string,
-      msg: any,
-    }
-  ): Promise<string> {
+  async sendNobleIBC(params: { msgTypeUrl: string; msg: any }): Promise<string> {
    if (!this.nobleClient?.isConnected) {
      throw new Error('Missing nobleClient or localWallet');
    }
@@ -367,15 +362,16 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
        value: params.msg,
      };
      const fee = await this.nobleClient.simulateTransaction([ibcMsg]);
-  
+
      // take out fee from amount before sweeping
-      const amount = parseInt(ibcMsg.value.token.amount, 10) -
+      const amount =
+        parseInt(ibcMsg.value.token.amount, 10) -
        Math.floor(parseInt(fee.amount[0].amount, 10) * GAS_MULTIPLIER);
-  
+
      if (amount <= 0) {
        throw new Error('noble balance does not cover fees');
      }
-  
+
      ibcMsg.value.token.amount = amount.toString();
      const tx = await this.nobleClient.send([ibcMsg]);

@@ -391,23 +387,21 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
    }
  }

-  async withdrawToNobleIBC(
-    params: {
-      subaccountNumber: number,
-      amount: string,
-      ibcPayload: string,
-    }
-  ): Promise<string> {
+  async withdrawToNobleIBC(params: {
+    subaccountNumber: number;
+    amount: string;
+    ibcPayload: string;
+  }): Promise<string> {
    if (!this.compositeClient || !this.localWallet) {
      throw new Error('Missing compositeClient or localWallet');
    }

    const { subaccountNumber, amount, ibcPayload } = params ?? {};
    const parsedIbcPayload: {
-      msgTypeUrl: string,
-      msg: any,
-    } = ibcPayload ? JSON.parse(ibcPayload) : undefined;
-  
+      msgTypeUrl: string;
+      msg: any;
+    } = ibcPayload ? JSON.parse(atob(ibcPayload)) : undefined;
+
    try {
      const msg = this.compositeClient.withdrawFromSubaccountMessage(
        new SubaccountClient(this.localWallet, subaccountNumber),
@@ -425,7 +419,7 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
      );

      return JSON.stringify({
-        txHash: hashFromTx(tx?.hash)
+        txHash: hashFromTx(tx?.hash),
      });
    } catch (error) {
      log('DydxChainTransactions/withdrawToNobleIBC', error);
@@ -436,10 +430,7 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
    }
  }

-  async cctpWithdraw(params: {
-    typeUrl: string,
-    value: any,
-  }): Promise<string> {
+  async cctpWithdraw(params: { typeUrl: string; value: any }): Promise<string> {
    if (!this.nobleClient?.isConnected) {
      throw new Error('Missing nobleClient or localWallet');
    }
@@ -450,17 +441,18 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
        value: params.value,
      };
      const fee = await this.nobleClient.simulateTransaction([ibcMsg]);
-  
+
      // take out fee from amount before sweeping
-      const amount = parseInt(ibcMsg.value.amount, 10) -
+      const amount =
+        parseInt(ibcMsg.value.amount, 10) -
        Math.floor(parseInt(fee.amount[0].amount, 10) * GAS_MULTIPLIER);
-  
+
      if (amount <= 0) {
        throw new Error('noble balance does not cover fees');
      }
-  
+
      ibcMsg.value.amount = amount.toString();
-  
+
      const tx = await this.nobleClient.send([ibcMsg]);

      const parsedTx = this.parseToPrimitives(tx);
@@ -84,8 +84,7 @@ class AbacusStateManager {
    );

    const appConfigs = AbacusAppConfig.Companion.forWeb;
-    if (!isMainnet || testFlags.withCCTP)
-      appConfigs.squidVersion = AbacusAppConfig.SquidVersion.V2;
+    appConfigs.squidVersion = AbacusAppConfig.SquidVersion.V2;

    this.stateManager = new AsyncAbacusStateManager(
      '',
@@ -1,4 +1,4 @@
-import { createConfig, configureChains, mainnet, Chain, Connector, usePublicClient } from 'wagmi';
+import { createConfig, configureChains, mainnet, Chain } from 'wagmi';
 import { goerli } from 'wagmi/chains';

 import {
@@ -26,6 +26,9 @@ import {
  fantomTestnet,
  celo,
  celoAlfajores,
+  scroll,
+  kava,
+  sepolia,
 } from 'viem/chains';

 import { alchemyProvider } from 'wagmi/providers/alchemy';
@@ -53,7 +56,7 @@ import { isTruthy } from './isTruthy';
 export const WAGMI_SUPPORTED_CHAINS: Chain[] = [
  mainnet,
  goerli,
-
+  sepolia,
  arbitrum,
  arbitrumGoerli,
  avalanche,
@@ -78,6 +81,8 @@ export const WAGMI_SUPPORTED_CHAINS: Chain[] = [
  fantomTestnet,
  celo,
  celoAlfajores,
+  scroll,
+  kava,
 ];

 const { chains, publicClient, webSocketPublicClient } = configureChains(
@@ -146,7 +151,7 @@ const getConnectors = (walletConnectConfig: WalletConnectConfig) => [
  new CoinbaseWalletConnector({
    chains,
    options: {
-      appName: 'wagmi',
+      appName: 'dYdX',
      reloadOnDisconnect: false,
    },
  }),
@@ -1,4 +1,6 @@
 import { DialogPlacement } from '@/components/Dialog';
 import { NotificationsMenu } from '@/views/menus/NotificationsMenu';

-export const AlertsPage = () => <NotificationsMenu placement={DialogPlacement.Inline} />;
+const AlertsPage = () => <NotificationsMenu placement={DialogPlacement.Inline} />;
+
+export default AlertsPage;
@@ -2,7 +2,7 @@ import styled, { AnyStyledComponent } from 'styled-components';

 import { articleMixins } from '@/styles/articleMixins';

-export const PrivacyPolicyPage = () => (
+const PrivacyPolicyPage = () => (
  <Styled.Article>
    <header>
      <h1>Privacy Policy</h1>
@@ -10,6 +10,8 @@ export const PrivacyPolicyPage = () => (
  </Styled.Article>
 );

+export default PrivacyPolicyPage;
+
 const Styled: Record<string, AnyStyledComponent> = {};

 Styled.Article = styled.article`
@@ -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;
  }
@@ -2,7 +2,7 @@ import styled, { AnyStyledComponent } from 'styled-components';

 import { articleMixins } from '@/styles/articleMixins';

-export const TermsOfUsePage = () => (
+const TermsOfUsePage = () => (
  <Styled.Article>
    <header>
      <h1>Sample Terms of Use</h1>
@@ -1076,6 +1076,8 @@ export const TermsOfUsePage = () => (
  </Styled.Article>
 );

+export default TermsOfUsePage;
+
 const Styled: Record<string, AnyStyledComponent> = {};

 Styled.Article = styled.article`
@@ -1,17 +1,20 @@
+import { lazy, Suspense } from 'react';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 import styled, { type AnyStyledComponent } from 'styled-components';
 import { Navigate, Route, Routes } from 'react-router-dom';

 import { OnboardingState } from '@/constants/account';
+import { ButtonAction } from '@/constants/buttons';
 import { DialogTypes } from '@/constants/dialogs';
 import { STRING_KEYS } from '@/constants/localization';
 import { HistoryRoute, PortfolioRoute } from '@/constants/routes';
-
 import { useAccountBalance, useBreakpoints, useDocumentTitle, useStringGetter } from '@/hooks';
+import { layoutMixins } from '@/styles/layoutMixins';

 import { FillsTable, FillsTableColumnKey } from '@/views/tables/FillsTable';
 import { FundingPaymentsTable } from '@/views/tables/FundingPaymentsTable';
 import { TransferHistoryTable } from '@/views/tables/TransferHistoryTable';
+import { Button } from '@/components/Button';
 import { Icon, IconName } from '@/components/Icon';
 import { NavigationMenu } from '@/components/NavigationMenu';
 import { WithSidebar } from '@/components/WithSidebar';
@@ -20,15 +23,15 @@ import { getOnboardingState, getSubaccount } from '@/state/accountSelectors';
 import { openDialog } from '@/state/dialogs';

 import { PortfolioNavMobile } from './PortfolioNavMobile';
-import { Overview } from './Overview';
-import { Positions } from './Positions';
-import { Orders } from './Orders';
-import { Fees } from './Fees';
-import { History } from './History';
+import { LoadingSpace } from '@/components/Loading/LoadingSpinner';

-import { layoutMixins } from '@/styles/layoutMixins';
-import { Button } from '@/components/Button';
-import { ButtonAction } from '@/constants/buttons';
+const Overview = lazy(() => import('./Overview').then((module) => ({ default: module.Overview })));
+const Positions = lazy(() =>
+  import('./Positions').then((module) => ({ default: module.Positions }))
+);
+const Orders = lazy(() => import('./Orders').then((module) => ({ default: module.Orders })));
+const Fees = lazy(() => import('./Fees').then((module) => ({ default: module.Fees })));
+const History = lazy(() => import('./History').then((module) => ({ default: module.History })));

 export default () => {
  const dispatch = useDispatch();
@@ -44,49 +47,51 @@ export default () => {
  useDocumentTitle(stringGetter({ key: STRING_KEYS.PORTFOLIO }));

  const routesComponent = (
-    <Routes>
-      <Route path={PortfolioRoute.Overview} element={<Overview />} />
-      <Route path={PortfolioRoute.Positions} element={<Positions />} />
-      <Route path={PortfolioRoute.Orders} element={<Orders />} />
-      <Route path={PortfolioRoute.Fees} element={<Fees />} />
-      <Route path={PortfolioRoute.History} element={<History />}>
-        <Route index path="*" element={<Navigate to={HistoryRoute.Trades} />} />
-        <Route
-          path={HistoryRoute.Trades}
-          element={
-            <FillsTable
-              columnKeys={
-                isTablet
-                  ? [
-                      FillsTableColumnKey.Time,
-                      FillsTableColumnKey.TypeAmount,
-                      FillsTableColumnKey.PriceFee,
-                    ]
-                  : [
-                      FillsTableColumnKey.Time,
-                      FillsTableColumnKey.Market,
-                      FillsTableColumnKey.Side,
-                      FillsTableColumnKey.AmountPrice,
-                      FillsTableColumnKey.TotalFee,
-                      FillsTableColumnKey.Type,
-                      FillsTableColumnKey.Liquidity,
-                    ]
-              }
-              withOuterBorder={isNotTablet}
-            />
-          }
-        />
-        <Route
-          path={HistoryRoute.Transfers}
-          element={<TransferHistoryTable withOuterBorder={isNotTablet} />}
-        />
-        <Route
-          path={HistoryRoute.Payments}
-          element={<FundingPaymentsTable withOuterBorder={isNotTablet} />}
-        />
-      </Route>
-      <Route path="*" element={<Navigate to={PortfolioRoute.Overview} replace />} />
-    </Routes>
+    <Suspense fallback={<LoadingSpace id="portfolio" />}>
+      <Routes>
+        <Route path={PortfolioRoute.Overview} element={<Overview />} />
+        <Route path={PortfolioRoute.Positions} element={<Positions />} />
+        <Route path={PortfolioRoute.Orders} element={<Orders />} />
+        <Route path={PortfolioRoute.Fees} element={<Fees />} />
+        <Route path={PortfolioRoute.History} element={<History />}>
+          <Route index path="*" element={<Navigate to={HistoryRoute.Trades} />} />
+          <Route
+            path={HistoryRoute.Trades}
+            element={
+              <FillsTable
+                columnKeys={
+                  isTablet
+                    ? [
+                        FillsTableColumnKey.Time,
+                        FillsTableColumnKey.TypeAmount,
+                        FillsTableColumnKey.PriceFee,
+                      ]
+                    : [
+                        FillsTableColumnKey.Time,
+                        FillsTableColumnKey.Market,
+                        FillsTableColumnKey.Side,
+                        FillsTableColumnKey.AmountPrice,
+                        FillsTableColumnKey.TotalFee,
+                        FillsTableColumnKey.Type,
+                        FillsTableColumnKey.Liquidity,
+                      ]
+                }
+                withOuterBorder={isNotTablet}
+              />
+            }
+          />
+          <Route
+            path={HistoryRoute.Transfers}
+            element={<TransferHistoryTable withOuterBorder={isNotTablet} />}
+          />
+          <Route
+            path={HistoryRoute.Payments}
+            element={<FundingPaymentsTable withOuterBorder={isNotTablet} />}
+          />
+        </Route>
+        <Route path="*" element={<Navigate to={PortfolioRoute.Overview} replace />} />
+      </Routes>
+    </Suspense>
  );

  return isTablet ? (
@@ -113,7 +118,7 @@ export default () => {
                    },
                    {
                      value: PortfolioRoute.Positions,
-                      slotBefore: <Styled.Icon iconName={IconName.Cube} />,
+                      slotBefore: <Styled.Icon iconName={IconName.Positions} />,
                      label: stringGetter({ key: STRING_KEYS.POSITIONS }),
                      href: PortfolioRoute.Positions,
                    },
@@ -191,7 +196,7 @@ Styled.SideBar = styled.div`
 Styled.Footer = styled.div`
  ${layoutMixins.row}
  flex-wrap: wrap;
-  
+
  padding: 1rem;

  gap: 0.5rem;
@@ -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;
@@ -24,6 +24,8 @@ import { openDialog } from '@/state/dialogs';

 import { log } from '@/lib/telemetry';

+const SEASON_NUMBER = 2;
+
 export const LaunchIncentivesPanel = () => {
  const { isNotTablet } = useBreakpoints();
  const dispatch = useDispatch();
@@ -68,10 +70,12 @@ const EstimatedRewards = () => {

  const { data, isLoading } = useQuery({
    enabled: !!dydxAddress,
-    queryKey: `launch_incentives_rewards_${dydxAddress ?? ''}`,
+    queryKey: `launch_incentives_rewards_${dydxAddress ?? ''}_${SEASON_NUMBER}`,
    queryFn: async () => {
      if (!dydxAddress) return undefined;
-      const resp = await fetch(`https://cloud.chaoslabs.co/query/api/dydx/points/${dydxAddress}`);
+      const resp = await fetch(
+        `https://cloud.chaoslabs.co/query/api/dydx/points/${dydxAddress}?n=${SEASON_NUMBER}`
+      );
      return (await resp.json())?.incentivePoints;
    },
    onError: (error: Error) => log('LaunchIncentives/fetchPoints', error),
@@ -85,9 +89,7 @@ const EstimatedRewards = () => {
          <Styled.Season>
            {stringGetter({
              key: STRING_KEYS.LAUNCH_INCENTIVES_SEASON_NUM,
-              params: {
-                SEASON_NUMBER: 1,
-              },
+              params: { SEASON_NUMBER },
            })}
          </Styled.Season>
        </div>
@@ -151,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`
@@ -223,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}
@@ -0,0 +1,86 @@
+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';
+
+import { Accordion } from '@/components/Accordion';
+import { Link } from '@/components/Link';
+import { Panel } from '@/components/Panel';
+
+const REWARDS_LEARN_MORE_LINK = ''; // to be configured
+
+export const RewardsHelpPanel = () => {
+  const stringGetter = useStringGetter();
+
+  return (
+    <Styled.HelpCard
+      slotHeader={
+        <Styled.Header>
+          <h3>{stringGetter({ key: STRING_KEYS.HELP })}</h3>
+          {REWARDS_LEARN_MORE_LINK && (
+            <Link withIcon href={REWARDS_LEARN_MORE_LINK}>
+              {stringGetter({ key: STRING_KEYS.LEARN_MORE })}
+            </Link>
+          )}
+        </Styled.Header>
+      }
+    >
+      <Accordion
+        items={[
+          {
+            header: 'Who is eligible for trading rewards?',
+            content: 'All traders are eligible for trading rewards.',
+          },
+          {
+            header: 'How do trading rewards work?',
+            content:
+              'Immediately after each fill, trading rewards are sent directly to the trader’s dYdX Chain address, based on the amount of fees paid by the trader.',
+          },
+          {
+            header: 'How do I claim my rewards?',
+            content:
+              'Each block, trading rewards are automatically sent directly to the trader’s dYdX Chain address.',
+          },
+        ]}
+      />
+    </Styled.HelpCard>
+  );
+};
+
+const Styled: Record<string, AnyStyledComponent> = {};
+
+Styled.HelpCard = styled(Panel)`
+  --panel-content-paddingX: 0;
+  --panel-content-paddingY: 0;
+  width: 100%;
+  height: max-content;
+  padding: 0;
+  gap: 0;
+
+  text-align: start;
+`;
+
+Styled.Header = styled.div`
+  ${layoutMixins.spacedRow}
+  gap: 1ch;
+
+  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);
+  }
+`;
+
+Styled.Link = styled(Link)`
+  display: inline-flex;
+`;
@@ -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';

-export const RewardsPage = () => {
+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 @@ export 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 @@ export 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 @@ export 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,10 +92,14 @@ export const RewardsPage = () => {
          </Styled.Description>
        </Styled.Panel>
      </Styled.PanelRow>
+
+      <RewardsHelpPanel />
    </Styled.Page>
  );
 };

+export default RewardsPage;
+
 const Styled: Record<string, AnyStyledComponent> = {};

 Styled.Page = styled.div`
@@ -93,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`
@@ -25,7 +25,7 @@ import { useNetworks } from '@/views/menus/useNetworks';
 import { SettingsHeader } from './SettingsHeader';
 import { ComingSoonSpace } from '@/components/ComingSoon';

-export const SettingsPage = () => {
+const SettingsPage = () => {
  const stringGetter = useStringGetter();
  const { pathname } = useLocation();
  const dispatch = useDispatch();
@@ -105,3 +105,5 @@ export const SettingsPage = () => {
    </>
  );
 };
+
+export default SettingsPage;
@@ -83,7 +83,6 @@ export const HorizontalPanel = ({ isOpen = true, setIsOpen }: ElementProps) => {
  const tabItems = useMemo(
    () => [
      {
-        asChild: true,
        value: InfoSection.Position,
        label: stringGetter({
          key: showCurrentMarket ? STRING_KEYS.POSITION : STRING_KEYS.POSITIONS,
@@ -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,
    }));
  }
 );
@@ -114,17 +114,11 @@ export const MarketDetails: React.FC = () => {
      ),
    },
    {
-      key: 'base-initial-margin-fraction',
-      label: stringGetter({ key: STRING_KEYS.BASE_INITIAL_MARGIN_FRACTION }),
+      key: 'initial-margin-fraction',
+      label: stringGetter({ key: STRING_KEYS.INITIAL_MARGIN_FRACTION }),
      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);

@@ -8,6 +8,7 @@ import { ComboboxDialogMenu } from '@/components/ComboboxDialogMenu';
 import { Icon, IconName } from '@/components/Icon';

 import { isTruthy } from '@/lib/isTruthy';
+import { breakpoints } from '@/styles';

 type ElementProps = {
  setIsOpen: (open: boolean) => void;
@@ -72,8 +73,11 @@ export const HelpDialog = ({ setIsOpen }: ElementProps) => {
 const Styled: Record<string, AnyStyledComponent> = {};

 Styled.ComboboxDialogMenu = styled(ComboboxDialogMenu)`
-  --dialog-width: var(--dialog-small-width);
  --dialog-content-paddingTop: 1rem;
  --dialog-content-paddingBottom: 1rem;
  --comboxDialogMenu-item-gap: 1rem;
+
+  @media ${breakpoints.notMobile} {
+    --dialog-width: var(--dialog-small-width);
+  }
 `;
@@ -18,11 +18,7 @@ type ElementProps = {
  onSelectChain: (chain: string) => void;
 };

-export const ChainSelectMenu = ({
-  label,
-  selectedChain,
-  onSelectChain,
-}: ElementProps) => {
+export const ChainSelectMenu = ({ label, selectedChain, onSelectChain }: ElementProps) => {
  const stringGetter = useStringGetter();
  const { type, depositOptions, withdrawalOptions, resources } =
    useSelector(getTransferInputs, shallowEqual) || {};
@@ -38,7 +34,7 @@ export const ChainSelectMenu = ({
    slotBefore: <Styled.Img src={chain.iconUrl} alt="" />,
  }));

-  const selectedOption = chains.find((item) => item.type === selectedChain); 
+  const selectedOption = chains.find((item) => item.type === selectedChain);

  return (
    <SearchSelectMenu
@@ -81,4 +77,4 @@ Styled.ChainRow = styled.div`
  gap: 0.5rem;
  color: var(--color-text-2);
  font: var(--font-base-book);
-`;
+`;
@@ -10,9 +10,8 @@ import { TransferInputField, TransferInputTokenResource, TransferType } from '@/
 import { AlertType } from '@/constants/alerts';
 import { ButtonSize } from '@/constants/buttons';
 import { STRING_KEYS } from '@/constants/localization';
-import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
-import { NotificationStatus } from '@/constants/notifications';
-import { NumberSign } from '@/constants/numbers';
+import { ENVIRONMENT_CONFIG_MAP, isMainnet } from '@/constants/networks';
+import { MAX_CCTP_TRANSFER_AMOUNT, MAX_PRICE_IMPACT, NumberSign } from '@/constants/numbers';
 import type { EvmAddress } from '@/constants/wallets';

 import { useAccounts, useDebounce, useStringGetter, useSelectedNetwork } from '@/hooks';
@@ -253,7 +252,9 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
        if (txHash) {
          addTransferNotification({
            txHash: txHash,
-            toChainId: !isCctp ? ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId : getNobleChainId(),
+            toChainId: !isCctp
+              ? ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId
+              : getNobleChainId(),
            fromChainId: chainIdStr || undefined,
            toAmount: summary?.usdcSize || undefined,
            triggeredAt: Date.now(),
@@ -324,6 +325,21 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
      return stringGetter({ key: STRING_KEYS.DEPOSIT_MORE_THAN_BALANCE });
    }

+    if (isCctp) {
+      if (MustBigNumber(debouncedAmountBN).gte(MAX_CCTP_TRANSFER_AMOUNT)) {
+        return stringGetter({
+          key: STRING_KEYS.MAX_CCTP_TRANSFER_LIMIT_EXCEEDED,
+          params: {
+            MAX_CCTP_TRANSFER_AMOUNT: MAX_CCTP_TRANSFER_AMOUNT,
+          },
+        });
+      }
+    }
+
+    if (isMainnet && MustBigNumber(summary?.aggregatePriceImpact).gte(MAX_PRICE_IMPACT)) {
+      return stringGetter({ key: STRING_KEYS.PRICE_IMPACT_TOO_HIGH });
+    }
+
    return undefined;
  }, [
    error,
@@ -334,6 +350,7 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
    fromAmount,
    sourceToken,
    stringGetter,
+    summary,
  ]);

  const isDisabled =
@@ -1,21 +1,16 @@
-import { type Dispatch, type SetStateAction, useState, type ReactNode } from 'react';
+import { type Dispatch, type ReactNode, type SetStateAction, useState, useMemo } from 'react';
 import styled, { type AnyStyledComponent } from 'styled-components';
 import { shallowEqual, useSelector } from 'react-redux';
 import type { RouteData } from '@0xsquid/sdk';
+import { formatUnits } from 'viem';

-import {
-  ButtonAction,
-  ButtonShape,
-  ButtonSize,
-  ButtonState,
-  ButtonType,
-} from '@/constants/buttons';
+import { ButtonAction, ButtonShape, ButtonSize, ButtonType } from '@/constants/buttons';

 import { TransferInputTokenResource } from '@/constants/abacus';
 import { STRING_KEYS } from '@/constants/localization';
-import { NumberSign } from '@/constants/numbers';
+import { NumberSign, TOKEN_DECIMALS } from '@/constants/numbers';

-import { useStringGetter } from '@/hooks';
+import { useStringGetter, useTokenConfigs } from '@/hooks';
 import { useMatchingEvmNetwork } from '@/hooks/useMatchingEvmNetwork';

 import { layoutMixins } from '@/styles/layoutMixins';
@@ -34,6 +29,7 @@ import { calculateCanAccountTrade } from '@/state/accountCalculators';
 import { getSubaccountBuyingPower, getSubaccountEquity } from '@/state/accountSelectors';
 import { getTransferInputs } from '@/state/inputsSelectors';

+import { isTruthy } from '@/lib/isTruthy';
 import { MustBigNumber } from '@/lib/numbers';

 import { SlippageEditor } from '../SlippageEditor';
@@ -83,7 +79,8 @@ export const DepositButtonAndReceipt = ({
  const { current: buyingPower, postOrder: newBuyingPower } =
    useSelector(getSubaccountBuyingPower, shallowEqual) || {};

-  const { summary, requestPayload } = useSelector(getTransferInputs, shallowEqual) || {};
+  const { isCctp, summary, requestPayload } = useSelector(getTransferInputs, shallowEqual) || {};
+  const { usdcDecimals, usdcLabel } = useTokenConfigs();

  const feeSubitems: DetailsItem[] = [];

@@ -98,7 +95,7 @@ export const DepositButtonAndReceipt = ({
  if (typeof summary?.bridgeFee === 'number') {
    feeSubitems.push({
      key: 'bridge-fees',
-      label: <span>Bridge Fee</span>,
+      label: <span>{stringGetter({ key: STRING_KEYS.BRIDGE_FEE })}</span>,
      value: <Output type={OutputType.Fiat} value={summary?.bridgeFee} />,
    });
  }
@@ -112,11 +109,53 @@ export const DepositButtonAndReceipt = ({
  const totalFees = (summary?.bridgeFee || 0) + (summary?.gasFee || 0);

  const submitButtonReceipt = [
+    {
+      key: 'expected-deposit-amount',
+      label: (
+        <span>
+          {stringGetter({ key: STRING_KEYS.EXPECTED_DEPOSIT_AMOUNT })} <Tag>{usdcLabel}</Tag>
+        </span>
+      ),
+      value: <Output type={OutputType.Fiat} fractionDigits={TOKEN_DECIMALS} value={summary?.toAmount} />,
+      subitems: [
+        {
+          key: 'minimum-deposit-amount',
+          label: (
+            <span>
+              {stringGetter({ key: STRING_KEYS.MINIMUM_DEPOSIT_AMOUNT })} <Tag>{usdcLabel}</Tag>
+            </span>
+          ),
+          value: (
+            <Output type={OutputType.Fiat} fractionDigits={TOKEN_DECIMALS} value={summary?.toAmountMin} />
+          ),
+          tooltip: 'minimum-deposit-amount',
+        },
+      ],
+    },
+    {
+      key: 'exchange-rate',
+      label: <span>{stringGetter({ key: STRING_KEYS.EXCHANGE_RATE })}</span>,
+      value:
+        typeof summary?.exchangeRate === 'number' ? (
+          <Styled.ExchangeRate>
+            <Output
+              type={OutputType.Asset}
+              value={1}
+              fractionDigits={0}
+              tag={sourceToken?.symbol}
+            />
+            =
+            <Output type={OutputType.Asset} value={summary?.exchangeRate} tag={usdcLabel} />
+          </Styled.ExchangeRate>
+        ) : (
+          <Output type={OutputType.Asset} />
+        ),
+    },
    {
      key: 'equity',
      label: (
        <span>
-          {stringGetter({ key: STRING_KEYS.EQUITY })} <Tag>USDC</Tag>
+          {stringGetter({ key: STRING_KEYS.EQUITY })} <Tag>{usdcLabel}</Tag>
        </span>
      ),
      value: (
@@ -133,7 +172,7 @@ export const DepositButtonAndReceipt = ({
      key: 'buying-power',
      label: (
        <span>
-          {stringGetter({ key: STRING_KEYS.BUYING_POWER })} <Tag>USDC</Tag>
+          {stringGetter({ key: STRING_KEYS.BUYING_POWER })} <Tag>{usdcLabel}</Tag>
        </span>
      ),
      value: (
@@ -146,18 +185,7 @@ export const DepositButtonAndReceipt = ({
        />
      ),
    },
-    {
-      key: 'exchange-rate',
-      label: <span>{stringGetter({ key: STRING_KEYS.EXCHANGE_RATE })}</span>,
-      value: typeof summary?.exchangeRate === 'number' && (
-        <Styled.ExchangeRate>
-          <Output type={OutputType.Asset} value={1} fractionDigits={0} tag={sourceToken?.symbol} />
-          =
-          <Output type={OutputType.Asset} value={summary?.exchangeRate} tag="USDC" />
-        </Styled.ExchangeRate>
-      ),
-    },
-    {
+    !isCctp && {
      key: 'total-fees',
      label: <span>{stringGetter({ key: STRING_KEYS.TOTAL_FEES })}</span>,
      value: <Output type={OutputType.Fiat} value={totalFees} />,
@@ -165,7 +193,7 @@ export const DepositButtonAndReceipt = ({
    },
    {
      key: 'slippage',
-      label: <span>{stringGetter({ key: STRING_KEYS.SLIPPAGE })}</span>,
+      label: <span>{stringGetter({ key: STRING_KEYS.MAX_SLIPPAGE })}</span>,
      value: (
        <SlippageEditor
          disabled
@@ -178,22 +206,26 @@ export const DepositButtonAndReceipt = ({
    {
      key: 'estimatedRouteDuration',
      label: <span>{stringGetter({ key: STRING_KEYS.ESTIMATED_TIME })}</span>,
-      value: typeof summary?.estimatedRouteDuration === 'number' && (
+      value: (
        <Output
          type={OutputType.Text}
-          value={stringGetter({
-            key: STRING_KEYS.X_MINUTES_LOWERCASED,
-            params: {
-              X:
-                summary?.estimatedRouteDuration < 60
-                  ? '< 1'
-                  : Math.round(summary?.estimatedRouteDuration / 60),
-            },
-          })}
+          value={
+            typeof summary?.estimatedRouteDuration === 'number'
+              ? stringGetter({
+                  key: STRING_KEYS.X_MINUTES_LOWERCASED,
+                  params: {
+                    X:
+                      summary?.estimatedRouteDuration < 60
+                        ? '< 1'
+                        : Math.round(summary?.estimatedRouteDuration / 60),
+                  },
+                })
+              : null
+          }
        />
      ),
    },
-  ];
+  ].filter(isTruthy);

  const isFormValid = !isDisabled && !isEditingSlippage;

@@ -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 (
@@ -9,9 +9,9 @@ import { TransferInputField, TransferInputTokenResource, TransferType } from '@/
 import { AlertType } from '@/constants/alerts';
 import { ButtonSize } from '@/constants/buttons';
 import { STRING_KEYS } from '@/constants/localization';
-import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
-import { NotificationStatus, TransferNotificationTypes } from '@/constants/notifications';
-import { NumberSign } from '@/constants/numbers';
+import { ENVIRONMENT_CONFIG_MAP, isMainnet } from '@/constants/networks';
+import { TransferNotificationTypes } from '@/constants/notifications';
+import { MAX_CCTP_TRANSFER_AMOUNT, MAX_PRICE_IMPACT, NumberSign } from '@/constants/numbers';

 import {
  useAccounts,
@@ -67,7 +67,8 @@ export const WithdrawForm = () => {
    resources,
    errors: routeErrors,
    errorMessage: routeErrorMessage,
-    isCctp
+    isCctp,
+    summary,
  } = useSelector(getTransferInputs, shallowEqual) || {};

  // User input
@@ -75,7 +76,6 @@ export const WithdrawForm = () => {
  const [slippage, setSlippage] = useState(isCctp ? 0 : 0.01); // 0.1% slippage
  const debouncedAmount = useDebounce<string>(withdrawAmount, 500);

-
  const isValidAddress = toAddress && isAddress(toAddress);

  const toToken = useMemo(
@@ -168,12 +168,18 @@ export const WithdrawForm = () => {
            })
          );
        } else {
-          const txHash = await sendSquidWithdraw(debouncedAmountBN.toNumber(), requestPayload.data, isCctp);
+          const txHash = await sendSquidWithdraw(
+            debouncedAmountBN.toNumber(),
+            requestPayload.data,
+            isCctp
+          );
          if (txHash) {
            addTransferNotification({
              txHash: txHash,
              type: TransferNotificationTypes.Withdrawal,
-              fromChainId: !isCctp ? ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId : getNobleChainId(),
+              fromChainId: !isCctp
+                ? ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId
+                : getNobleChainId(),
              toChainId: chainIdStr || undefined,
              toAmount: debouncedAmountBN.toNumber(),
              triggeredAt: Date.now(),
@@ -283,10 +289,7 @@ export const WithdrawForm = () => {

  const errorMessage = useMemo(() => {
    if (error) {
-      return stringGetter({
-        key: STRING_KEYS.SOMETHING_WENT_WRONG_WITH_MESSAGE,
-        params: { ERROR_MESSAGE: error },
-      });
+      return error;
    }

    if (routeErrors) {
@@ -317,6 +320,21 @@ export const WithdrawForm = () => {
      return stringGetter({ key: STRING_KEYS.WITHDRAW_MORE_THAN_FREE });
    }

+    if (isCctp) {
+      if (MustBigNumber(debouncedAmountBN).gte(MAX_CCTP_TRANSFER_AMOUNT)) {
+        return stringGetter({
+          key: STRING_KEYS.MAX_CCTP_TRANSFER_LIMIT_EXCEEDED,
+          params: {
+            MAX_CCTP_TRANSFER_AMOUNT: MAX_CCTP_TRANSFER_AMOUNT,
+          },
+        });
+      }
+    }
+
+    if (isMainnet && MustBigNumber(summary?.aggregatePriceImpact).gte(MAX_PRICE_IMPACT)) {
+      return stringGetter({ key: STRING_KEYS.PRICE_IMPACT_TOO_HIGH });
+    }
+
    return undefined;
  }, [
    error,
@@ -329,6 +347,7 @@ export const WithdrawForm = () => {
    toAddress,
    sanctionedAddresses,
    stringGetter,
+    summary,
  ]);

  const isDisabled =
@@ -1,4 +1,4 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { shallowEqual, useSelector } from 'react-redux';
 import styled, { type AnyStyledComponent } from 'styled-components';
 import { formatUnits } from 'viem';
@@ -6,14 +6,11 @@ import { formatUnits } from 'viem';
 import { TransferInputTokenResource } from '@/constants/abacus';
 import { ButtonAction, ButtonShape, ButtonSize, ButtonType } from '@/constants/buttons';
 import { STRING_KEYS } from '@/constants/localization';
-import { NumberSign } from '@/constants/numbers';
-
-import { formatSeconds } from '@/lib/timeUtils';
+import { NumberSign, TOKEN_DECIMALS } from '@/constants/numbers';

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

-import { useStringGetter } from '@/hooks';
-import { useAccountBalance } from '@/hooks/useAccountBalance';
+import { useStringGetter, useTokenConfigs } from '@/hooks';

 import { Button } from '@/components/Button';

@@ -58,13 +55,9 @@ export const WithdrawButtonAndReceipt = ({
  const stringGetter = useStringGetter();

  const { leverage } = useSelector(getSubaccount, shallowEqual) || {};
-  const { summary, requestPayload } = useSelector(getTransferInputs, shallowEqual) || {};
+  const { isCctp, summary, requestPayload } = useSelector(getTransferInputs, shallowEqual) || {};
  const canAccountTrade = useSelector(calculateCanAccountTrade, shallowEqual);
-
-  const toAmount =
-    summary?.toAmount &&
-    withdrawToken?.decimals &&
-    formatUnits(BigInt(summary.toAmount), withdrawToken?.decimals);
+  const { usdcLabel } = useTokenConfigs();

  const feeSubitems: DetailsItem[] = [];

@@ -89,9 +82,29 @@ export const WithdrawButtonAndReceipt = ({
  const showSubitemsToggle = showFeeBreakdown
    ? stringGetter({ key: STRING_KEYS.HIDE_ALL_DETAILS })
    : stringGetter({ key: STRING_KEYS.SHOW_ALL_DETAILS });
-  
+
  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',
@@ -99,43 +112,12 @@ export const WithdrawButtonAndReceipt = ({
      value: <Output type={OutputType.Fiat} value={totalFees} />,
      subitems: feeSubitems,
    },
-    {
-      key: 'wallet',
-      label: (
-        <span>
-          {stringGetter({ key: STRING_KEYS.AMOUNT_RECEIVED })}{' '}
-          {withdrawToken && <Tag>{withdrawToken?.symbol}</Tag>}
-        </span>
-      ),
-      value: (
-        <Styled.DiffOutput
-          type={OutputType.Asset}
-          value={'0'}
-          newValue={toAmount}
-          sign={NumberSign.Positive}
-          withDiff={Boolean(toAmount)}
-        />
-      ),
-    },
-    {
-      key: 'leverage',
-      label: <span>{stringGetter({ key: STRING_KEYS.ACCOUNT_LEVERAGE })}</span>,
-      value: (
-        <Styled.DiffOutput
-          type={OutputType.Multiple}
-          value={leverage?.current}
-          newValue={leverage?.postOrder}
-          sign={NumberSign.Negative}
-          withDiff={Boolean(leverage?.current && leverage.current !== leverage?.postOrder)}
-        />
-      ),
-    },
    {
      key: 'exchange-rate',
      label: <span>{stringGetter({ key: STRING_KEYS.EXCHANGE_RATE })}</span>,
      value: withdrawToken && typeof summary?.exchangeRate === 'number' && (
        <Styled.ExchangeRate>
-          <Output type={OutputType.Asset} value={1} fractionDigits={0} tag="USDC" />
+          <Output type={OutputType.Asset} value={1} fractionDigits={0} tag={usdcLabel} />
          =
          <Output
            type={OutputType.Asset}
@@ -146,19 +128,7 @@ export const WithdrawButtonAndReceipt = ({
      ),
    },
    {
-      key: 'slippage',
-      label: <span>{stringGetter({ key: STRING_KEYS.SLIPPAGE })}</span>,
-      value: (
-        <SlippageEditor
-          disabled
-          slippage={slippage}
-          setIsEditing={setIsEditingSlipapge}
-          setSlippage={setSlippage}
-        />
-      ),
-    },
-    {
-      key: 'estimatedRouteDuration',
+      key: 'estimated-route-duration',
      label: <span>{stringGetter({ key: STRING_KEYS.ESTIMATED_TIME })}</span>,
      value: typeof summary?.estimatedRouteDuration === 'number' && (
        <Output
@@ -175,6 +145,56 @@ export const WithdrawButtonAndReceipt = ({
        />
      ),
    },
+    {
+      key: 'expected-amount-received',
+      label: (
+        <span>
+          {stringGetter({ key: STRING_KEYS.EXPECTED_AMOUNT_RECEIVED })}{' '}
+          {withdrawToken && <Tag>{withdrawToken?.symbol}</Tag>}
+        </span>
+      ),
+      value: <Output type={OutputType.Asset} value={toAmount} fractionDigits={TOKEN_DECIMALS} />,
+      subitems: [
+        {
+          key: 'minimum-amount-received',
+          label: (
+            <span>
+              {stringGetter({ key: STRING_KEYS.MINIMUM_AMOUNT_RECEIVED })}{' '}
+              {withdrawToken && <Tag>{withdrawToken?.symbol}</Tag>}
+            </span>
+          ),
+          value: (
+            <Output type={OutputType.Asset} value={toAmountMin} fractionDigits={TOKEN_DECIMALS} />
+          ),
+          tooltip: 'minimum-amount-received',
+        },
+      ],
+    },
+    {
+      key: 'slippage',
+      label: <span>{stringGetter({ key: STRING_KEYS.MAX_SLIPPAGE })}</span>,
+      value: (
+        <SlippageEditor
+          disabled
+          slippage={slippage}
+          setIsEditing={setIsEditingSlipapge}
+          setSlippage={setSlippage}
+        />
+      ),
+    },
+    {
+      key: 'leverage',
+      label: <span>{stringGetter({ key: STRING_KEYS.ACCOUNT_LEVERAGE })}</span>,
+      value: (
+        <Styled.DiffOutput
+          type={OutputType.Multiple}
+          value={leverage?.current}
+          newValue={leverage?.postOrder}
+          sign={NumberSign.Negative}
+          withDiff={Boolean(leverage?.current && leverage.current !== leverage?.postOrder)}
+        />
+      ),
+    },
  ];

  const isFormValid = !isDisabled && !isEditingSlippage;
@@ -4,7 +4,7 @@ import { useNavigate } from 'react-router-dom';

 import { STRING_KEYS } from '@/constants/localization';
 import { MarketFilters, type MarketData } from '@/constants/markets';
-import { LARGE_TOKEN_DECIMALS } from '@/constants/numbers';
+import { FUNDING_DECIMALS, LARGE_TOKEN_DECIMALS } from '@/constants/numbers';
 import { AppRoute } from '@/constants/routes';

 import { useBreakpoints, useStringGetter } from '@/hooks';
@@ -128,7 +128,8 @@ export const MarketsTable = ({ className }: { className?: string }) => {
              label: stringGetter({ key: STRING_KEYS.FUNDING_RATE_1H_SHORT }),
              renderCell: (row) => (
                <Styled.Output
-                  type={OutputType.SmallPercent}
+                  type={OutputType.Percent}
+                  fractionDigits={FUNDING_DECIMALS}
                  value={row.nextFundingRate}
                  isPositive={MustBigNumber(row.nextFundingRate).gt(0)}
                  isNegative={MustBigNumber(row.nextFundingRate).isNegative()}
@@ -366,6 +366,7 @@ Styled.InlineRow = styled.div`

 Styled.AssetIcon = styled(AssetIcon)`
  ${layoutMixins.inlineRow}
+  min-width: unset;
  font-size: 2.25rem;
 `;
Author	SHA1	Message	Date
Adam Fraser	8a2cb2a296	Add trailing blocks to NetworkStatus analytics event	2024-01-12 16:01:37 -05:00
Bill	ad6aa1af49	Bump abacus, fix onboarding toAmount (#229 )	2024-01-11 11:52:02 -08:00
Jared Vu	55b2c3fb4a	Update Funding Chart Tooltip (#225 ) * 🚧 depth chart * ✨ Fixed types and shortened FundingRateTooltip * 💄 update depth chart color scale to use css var * 💄 use layer-6 instead of text-1 * 🌐 Add localization, fix nits	2024-01-11 10:31:53 -08:00
moo-onthelawn	83bcde00eb	TRCL-1623 Update Positions icon in nav sidebar (#226 ) * update icon * remove unused cube icon	2024-01-11 11:02:23 -05:00
Jared Vu	e8024b9337	Add Sepolia (#222 )	2024-01-09 16:35:19 -08:00
Jared Vu	8280e512bc	Remove BasePositionNotional DetailItem (#223 )	2024-01-09 14:01:38 -08:00
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
BillandAleka Cheung	4a64d59546	Update launch incentives to season 2 (#218 ) * Update launch incentives to season 2 * update api url --------- Co-authored-by: Aleka Cheung <aforaleka@gmail.com>	2024-01-04 19:14:23 -08:00
Jared Vu	3fc43e8a12	Remove base from baseInitialMarginFraction (#209 )	2024-01-04 15:35:05 -08:00
Jared Vu	c24a9229a6	Imperator testnet indexer to be scaled down (#219 )	2024-01-04 15:34:18 -08:00
aleka	90329d44d0	update lock file (#217 )	2024-01-03 13:57:21 -08:00
Bill	9a02bd3f1c	remove testnet cctp chains (#216 )	2024-01-03 12:55:58 -08:00
aleka	adba11b462	add accordion component and rewards help panel (#214 )	2024-01-03 14:20:30 -05:00
Jared Vu	29526b927f	Update deposit and withdrawal receipts (#212 ) * Update receipts * Remove duplicate const * Restore env * format * Try using raw * Use 3 spaces T.T * copy from main * Update abacus, display proper toAmount and toAmountMin * nits	2024-01-03 09:56:01 -08:00
Jared Vu	503e089efa	temp hide fees for cctp route (#213 )	2023-12-23 01:17:41 -08:00
Jared Vu	c3495f462c	Additional Withdraw/Deposit validation (#211 ) * Add cctp amount check and price impact check * 2.5% -> 2%	2023-12-22 17:31:32 -08:00
Billandjaredvu	6da6eeb2a4	Enable CCTP (#194 ) * Enable CCTP * Handle base64 encode * Update localization package --------- Co-authored-by: jaredvu <jaredvu@gmail.com>	2023-12-22 11:12:41 -08:00
mike-dydx	0cf3e81bd7	Create documentation.json (#205 )	2023-12-21 15:08:08 -05:00
aleka	f8cf1d364b	update coinbase connect app name (#208 )	2023-12-21 10:58:57 -08:00
Jared Vu	6f344c6b5d	Update comparison function in Table (#207 )	2023-12-21 10:53:56 -08:00
Jared Vu	133856afca	Export secret phrase help article (#206 ) * Update config with correct article link * Remove auto-format of json	2023-12-21 10:49:52 -08:00
Jared Vu	33c543daaf	Update bridgeFee in Withdraw/Deposit forms (#202 ) * Update Withdraw form receipt * Bump abacus 1.1.27 * pnpm-lock * bump v4-localization	2023-12-19 23:36:13 -08:00
Jared Vu	c77e727d2b	TRCL-3406: firefox mobile position table row has stretched icon (#204 ) * Fix PositionsTable assetIcon * Mobile width of HelpDialog	2023-12-19 23:33:36 -08:00
Jared Vu	b94538711d	Lazy load Pages (#203 ) * Lazy import pages * Fix import order	2023-12-19 23:30:51 -08:00
Jared Vu	b83479f45c	Handle New Markets added by Gov (#201 ) * Add celestia assets * Handle symbol not yet added	2023-12-19 23:25:14 -08:00
Jared Vu	001aad3abc	Navigate to the Markets page if the current marketId is not included in subscribed markets (#198 ) * Navigate to markets if current url is invalid * nits	2023-12-19 15:58:49 -08:00
Jared Vu	f8db5e1ba0	Update abacus to 1.1.25: Good til time fix (#199 )	2023-12-19 09:49:51 -08:00
Jared Vu	f8bec0fb3d	Update Withdraw form receipt (#200 )	2023-12-19 09:49:37 -08:00
				`@@ -0,0 +1 @@`
				<svg fill="none" height="12" viewBox="0 0 12 12" width="12" xmlns="http://www.w3.org/2000/svg"><path d="m6.75.75c0-.198912-.07902-.389678-.21967-.53033-.14065-.1406525-.33142-.21967-.53033-.21967s-.38968.0790175-.53033.21967c-.14065.140652-.21967.331418-.21967.53033v4.5h-4.5c-.198912 0-.389678.07902-.53033.21967-.1406525.14065-.21967.33142-.21967.53033s.0790175.38968.21967.53033c.140652.14065.331418.21967.53033.21967h4.5v4.5c0 .1989.07902.3897.21967.5303.14065.1407.33142.2197.53033.2197s.38968-.079.53033-.2197c.14065-.1406.21967-.3314.21967-.5303v-4.5h4.5c.1989 0 .3897-.07902.5303-.21967.1407-.14065.2197-.33142.2197-.53033s-.079-.38968-.2197-.53033c-.1406-.14065-.3314-.21967-.5303-.21967h-4.5z" fill="currentColor"/></svg>