TRCL-3497 Use color tokens in app + tradingView widget (#240 )

* update to use tokens, small fixes * fix eol lint * move usage style helper to lib/styles * move files, fix text colors * fix logo in light mode * remove colors.css file * small lint things * add transparency to button + destructive borders
fix lint error
2024-01-24 16:40:25 -05:00 · 2024-01-22 16:42:19 -05:00 · 2024-01-22 16:28:37 -05:00 · 2024-01-22 09:55:26 -08:00 · 2024-01-17 16:22:17 -08:00 · 2024-01-17 15:52:02 -08:00
72 changed files with 2125 additions and 1171 deletions
@@ -5,29 +5,35 @@ import styled from 'styled-components';

 import { store } from '@/state/_store';

+import { GlobalStyle } from '@/styles/globalStyle';
+
 import { SelectMenu, SelectItem } from '@/components/SelectMenu';

+import { AppThemeProvider } from '@/hooks/useAppTheme';
+
+import { AppTheme, setAppTheme } from '@/state/configs';
 import { setLocaleLoaded } from '@/state/localization';

 import '@/index.css';
 import './ladle.css';

 export const StoryWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const [theme, setTheme] = useState('Default theme');
+  const [theme, setTheme] = useState(AppTheme.Classic);

  useEffect(() => {
+    store.dispatch(setAppTheme(theme));
    switch (theme) {
-      case 'Dark theme': {
+      case AppTheme.Dark: {
        document?.documentElement?.classList.remove('theme-light');
        document?.documentElement?.classList.add('theme-dark');
        break;
      }
-      case 'Light theme': {
+      case AppTheme.Light: {
        document?.documentElement?.classList.remove('theme-dark');
        document?.documentElement?.classList.add('theme-light');
        break;
      }
-      default: {
+      case AppTheme.Classic: {
        document?.documentElement?.classList.remove('theme-dark', 'theme-light');
        break;
      }
@@ -48,15 +54,15 @@ export const StoryWrapper: React.FC<{ children: React.ReactNode }> = ({ children
        >
          {[
            {
-              value: 'Default theme',
+              value: AppTheme.Classic,
              label: 'Default theme',
            },
            {
-              value: 'Dark theme',
+              value: AppTheme.Dark,
              label: 'Dark theme',
            },
            {
-              value: 'Light theme',
+              value: AppTheme.Light,
              label: 'Light theme',
            },
          ].map(({ value, label }) => (
@@ -69,8 +75,11 @@ export const StoryWrapper: React.FC<{ children: React.ReactNode }> = ({ children
        </SelectMenu>
      </StoryHeader>
      <hr />
-      <StoryContent>{children}</StoryContent>
-    </Provider>
+      <AppThemeProvider>
+        <GlobalStyle />
+        <StoryContent>{children}</StoryContent>
+      </AppThemeProvider>
+      </Provider>
  );
 };

@@ -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.32",
+    "@dydxprotocol/v4-abacus": "^1.2.5",
    "@dydxprotocol/v4-client-js": "^1.0.11",
-    "@dydxprotocol/v4-localization": "^1.1.5",
+    "@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": {
@@ -1,9 +1,5 @@
 lockfileVersion: '6.0'

-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false
-
 dependencies:
  '@0xsquid/sdk':
    specifier: ^1.10.0
@@ -27,20 +23,23 @@ dependencies:
    specifier: ^0.31.0
    version: 0.31.0
  '@dydxprotocol/v4-abacus':
-    specifier: ^1.1.32
-    version: 1.1.32
+    specifier: ^1.2.5
+    version: 1.2.5
  '@dydxprotocol/v4-client-js':
    specifier: ^1.0.11
    version: 1.0.11
  '@dydxprotocol/v4-localization':
-    specifier: ^1.1.5
-    version: 1.1.5
+    specifier: ^1.1.11
+    version: 1.1.11
  '@ethersproject/providers':
    specifier: ^5.7.2
    version: 5.7.2
  '@js-joda/core':
    specifier: ^5.5.3
    version: 5.5.3
+  '@radix-ui/react-accordion':
+    specifier: ^1.1.2
+    version: 1.1.2(@types/react-dom@18.2.6)(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)
  '@radix-ui/react-checkbox':
    specifier: ^1.0.4
    version: 1.0.4(@types/react-dom@18.2.6)(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)
@@ -240,11 +239,11 @@ dependencies:
    specifier: ^1.2.1
    version: 1.2.1(@types/react@18.2.14)(react@18.2.0)
  viem:
-    specifier: ^1.12.2
-    version: 1.12.2(typescript@5.1.3)
+    specifier: ^1.20.0
+    version: 1.20.0(typescript@5.1.3)
  wagmi:
    specifier: ^1.4.12
-    version: 1.4.12(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)(typescript@5.1.3)(viem@1.12.2)
+    version: 1.4.13(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)(typescript@5.1.3)(viem@1.20.0)

 devDependencies:
  '@babel/core':
@@ -389,12 +388,12 @@ packages:
    engines: {node: '>=0.10.0'}
    dev: true

-  /@adraffy/ens-normalize@1.9.2:
-    resolution: {integrity: sha512-0h+FrQDqe2Wn+IIGFkTCd4aAwTJ+7834Ek1COohCyV26AXhwQ7WQaz+4F/nLOeVl/3BtWHOHLPsq46V8YB46Eg==}
+  /@adraffy/ens-normalize@1.10.0:
+    resolution: {integrity: sha512-nA9XHtlAkYfJxY7bce8DcN7eKxWWCWkU+1GR9d+U6MbNpfwQp8TI7vqOsBsMcHoT4mBu2kypKoSKnghEzOOq5Q==}
    dev: false

-  /@adraffy/ens-normalize@1.9.4:
-    resolution: {integrity: sha512-UK0bHA7hh9cR39V+4gl2/NnBBjoXIxkuWAPCaY4X7fbH4L/azIi7ilWOCjMUYfpJgraLUAqkRi2BqrjME8Rynw==}
+  /@adraffy/ens-normalize@1.9.2:
+    resolution: {integrity: sha512-0h+FrQDqe2Wn+IIGFkTCd4aAwTJ+7834Ek1COohCyV26AXhwQ7WQaz+4F/nLOeVl/3BtWHOHLPsq46V8YB46Eg==}
    dev: false

  /@ampproject/remapping@2.2.1:
@@ -988,8 +987,8 @@ packages:
    resolution: {integrity: sha512-RpfLEtTlyIxeNPGKcokS+p3BZII/Q3bYxryFRglh5H3A3T8q9fsLYm72VYAMEOOIBLEa8o93kFLiBDUWKrwXZA==}
    dev: true

-  /@dydxprotocol/v4-abacus@1.1.32:
-    resolution: {integrity: sha512-1KM3ILBg/YrdiVhCp/DXUgyCnJurxeYAIwL6+MWZisEGtdhPf9R7MNKUyVcTeNwEyiyxh4AzXNLRp3IPeHAsAw==}
+  /@dydxprotocol/v4-abacus@1.2.5:
+    resolution: {integrity: sha512-pB3Fv1bzJRUDp29kAN61daZ34gTSGrSTNh+/AP3TUB63/Q/gaXQVBf91xVcso4Hw23xM3FwIcrRK0cvOSWgXKg==}
    dev: false

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

-  /@dydxprotocol/v4-localization@1.1.5:
-    resolution: {integrity: sha512-Y25yuCLFaK3v/81B60lc3qthaWwJn1fNJuYQdOtgnmOhLNqI4YRryUncLkbjdB5xd4QODq5KZikP34pLKX9sgA==}
+  /@dydxprotocol/v4-localization@1.1.11:
+    resolution: {integrity: sha512-ZHnyrWD1bEpvY1tctkcmSV6A5+hQSYBFwyjbiyOqepqDqrv24J5a3hlZU94lDyYf+7Sdk3alOvy9Z7Lpk59nvw==}
    dev: false

  /@dydxprotocol/v4-proto@0.4.1:
@@ -2320,6 +2319,35 @@ packages:
      '@babel/runtime': 7.22.10
    dev: false

+  /@radix-ui/react-accordion@1.1.2(@types/react-dom@18.2.6)(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-fDG7jcoNKVjSK6yfmuAs0EnPDro0WMXIhMtXdTBWqEioVW206ku+4Lw07e+13lUkFkpoEQ2PdeMIAGpdqEAmDg==}
+    peerDependencies:
+      '@types/react': '*'
+      '@types/react-dom': '*'
+      react: ^16.8 || ^17.0 || ^18.0
+      react-dom: ^16.8 || ^17.0 || ^18.0
+    peerDependenciesMeta:
+      '@types/react':
+        optional: true
+      '@types/react-dom':
+        optional: true
+    dependencies:
+      '@babel/runtime': 7.22.10
+      '@radix-ui/primitive': 1.0.1
+      '@radix-ui/react-collapsible': 1.0.3(@types/react-dom@18.2.6)(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-collection': 1.0.3(@types/react-dom@18.2.6)(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.14)(react@18.2.0)
+      '@radix-ui/react-context': 1.0.1(@types/react@18.2.14)(react@18.2.0)
+      '@radix-ui/react-direction': 1.0.1(@types/react@18.2.14)(react@18.2.0)
+      '@radix-ui/react-id': 1.0.1(@types/react@18.2.14)(react@18.2.0)
+      '@radix-ui/react-primitive': 1.0.3(@types/react-dom@18.2.6)(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)
+      '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.14)(react@18.2.0)
+      '@types/react': 18.2.14
+      '@types/react-dom': 18.2.6
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
  /@radix-ui/react-arrow@1.0.3(@types/react-dom@18.2.6)(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0):
    resolution: {integrity: sha512-wSP+pHsB/jQRaL6voubsQ/ZlrGBHHrOjmBnr19hxYgtS0WvAFwZhK2WP/YY5yF9uKECCEEDGxuLxq1NBK51wFA==}
    peerDependencies:
@@ -4858,7 +4886,7 @@ packages:
    resolution: {integrity: sha512-XJbEPuaVc7b9n23MqlF6c+ToYIS3f7P2Sel8f3cSBQ9WORE4xrSuvhMpK9fDSFqJ7by/brc+rmJR/5HViRr0/w==}
    dependencies:
      '@safe-global/safe-gateway-typescript-sdk': 3.9.0
-      viem: 1.12.2(typescript@5.1.3)
+      viem: 1.20.0(typescript@5.1.3)
    transitivePeerDependencies:
      - bufferutil
      - encoding
@@ -5362,31 +5390,13 @@ packages:
      use-sync-external-store: 1.2.0(react@18.2.0)
    dev: false

-  /@tanstack/react-query-persist-client@4.32.6(@tanstack/react-query@4.32.6):
+  /@tanstack/react-query-persist-client@4.32.6(@tanstack/react-query@4.36.1):
    resolution: {integrity: sha512-EmNnYpvFYpxS4j5WFeNmfVVBxqq4RDnEFDBZwNKRfb4pzukcx/hcWtwqFk7Qj0EI4Dk8QGl239MEYwJbAc83tQ==}
    peerDependencies:
      '@tanstack/react-query': ^4.32.6
    dependencies:
      '@tanstack/query-persist-client-core': 4.32.6
-      '@tanstack/react-query': 4.32.6(react-dom@18.2.0)(react@18.2.0)
-    dev: false
-
-  /@tanstack/react-query@4.32.6(react-dom@18.2.0)(react@18.2.0):
-    resolution: {integrity: sha512-AITu/IKJJJXsHHeXNBy5bclu12t08usMCY0vFC2dh9SP/w6JAk5U9GwfjOIPj3p+ATADZvxQPe8UiCtMLNeQbg==}
-    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
-      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-      react-native: '*'
-    peerDependenciesMeta:
-      react-dom:
-        optional: true
-      react-native:
-        optional: true
-    dependencies:
-      '@tanstack/query-core': 4.32.6
-      react: 18.2.0
-      react-dom: 18.2.0(react@18.2.0)
-      use-sync-external-store: 1.2.0(react@18.2.0)
+      '@tanstack/react-query': 4.36.1(react-dom@18.2.0)(react@18.2.0)
    dev: false

  /@tanstack/react-query@4.36.1(react-dom@18.2.0)(react@18.2.0):
@@ -5592,6 +5602,7 @@ packages:

  /@types/node@20.3.1:
    resolution: {integrity: sha512-EhcH/wvidPy1WeML3TtYFGR83UzjxeWRen9V402T8aUGYsCHOmfoisV3ZSg03gAFIbLq8TnWOJ0f4cALtnSEUg==}
+    dev: true

  /@types/normalize-package-data@2.4.1:
    resolution: {integrity: sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==}
@@ -5653,12 +5664,6 @@ packages:
      '@types/node': 20.10.5
    dev: false

-  /@types/ws@8.5.6:
-    resolution: {integrity: sha512-8B5EO9jLVCy+B58PLHvLDuOD8DRVMgQzq8d55SjLCOn9kqGyqOvy27exVaTio1q1nX5zLu8/6N0n2ThSxOM6tg==}
-    dependencies:
-      '@types/node': 20.3.1
-    dev: false
-
  /@typescript-eslint/eslint-plugin@5.60.0(@typescript-eslint/parser@5.60.0)(eslint@8.43.0)(typescript@5.1.3):
    resolution: {integrity: sha512-78B+anHLF1TI8Jn/cD0Q00TBYdMgjdOn980JfAVa9yw5sop8nyTfVOQAv6LWywkOGLclDBtv5z3oxN4w7jxyNg==}
    engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -6155,8 +6160,8 @@ packages:
      pretty-format: 27.5.1
    dev: true

-  /@wagmi/connectors@3.1.10(@types/react@18.2.14)(react@18.2.0)(typescript@5.1.3)(viem@1.12.2):
-    resolution: {integrity: sha512-ZLJC1QaeiZarkF07Cr9mOlVjPO1Lf5TBx+JKBms2y5fUIXlKrxCfQgO/gDCureboI+Us2X3IRI659+XacSGpbA==}
+  /@wagmi/connectors@3.1.11(@types/react@18.2.14)(react@18.2.0)(typescript@5.1.3)(viem@1.20.0):
+    resolution: {integrity: sha512-wzxp9f9PtSUFjDUP/QDjc1t7HON4D8wrVKsw35ejdO8hToDpx1gU9lwH/47Zo/1zExGezQc392sjoHSszYd7OA==}
    peerDependencies:
      typescript: '>=5.0.4'
      viem: '>=0.3.35'
@@ -6167,14 +6172,14 @@ packages:
      '@coinbase/wallet-sdk': 3.7.1
      '@safe-global/safe-apps-provider': 0.18.1(typescript@5.1.3)
      '@safe-global/safe-apps-sdk': 8.1.0(typescript@5.1.3)
-      '@walletconnect/ethereum-provider': 2.10.6(@types/react@18.2.14)(react@18.2.0)
+      '@walletconnect/ethereum-provider': 2.11.0(@types/react@18.2.14)(react@18.2.0)
      '@walletconnect/legacy-provider': 2.0.0
      '@walletconnect/modal': 2.6.2(@types/react@18.2.14)(react@18.2.0)
-      '@walletconnect/utils': 2.10.2
+      '@walletconnect/utils': 2.11.0
      abitype: 0.8.7(typescript@5.1.3)
      eventemitter3: 4.0.7
      typescript: 5.1.3
-      viem: 1.12.2(typescript@5.1.3)
+      viem: 1.20.0(typescript@5.1.3)
    transitivePeerDependencies:
      - '@azure/app-configuration'
      - '@azure/cosmos'
@@ -6197,8 +6202,8 @@ packages:
      - zod
    dev: false

-  /@wagmi/core@1.4.12(@types/react@18.2.14)(react@18.2.0)(typescript@5.1.3)(viem@1.12.2):
-    resolution: {integrity: sha512-bLcYmmGgjtl3jAGo8X3Sm6oUwsdjbVxFMu9SWnwHdE4S9JdYeWM57dEhQgq8SYul2yQ7yY2/gimBf1Or0Ky3dQ==}
+  /@wagmi/core@1.4.13(@types/react@18.2.14)(react@18.2.0)(typescript@5.1.3)(viem@1.20.0):
+    resolution: {integrity: sha512-ytMCvXbBOgfDu9Qw67279wq/jNEe7EZLjLyekX7ROnvHRADqFr3lwZI6ih41UmtRZAmXAx8Ghyuqy154EjB5mQ==}
    peerDependencies:
      typescript: '>=5.0.4'
      viem: '>=0.3.35'
@@ -6206,11 +6211,11 @@ packages:
      typescript:
        optional: true
    dependencies:
-      '@wagmi/connectors': 3.1.10(@types/react@18.2.14)(react@18.2.0)(typescript@5.1.3)(viem@1.12.2)
+      '@wagmi/connectors': 3.1.11(@types/react@18.2.14)(react@18.2.0)(typescript@5.1.3)(viem@1.20.0)
      abitype: 0.8.7(typescript@5.1.3)
      eventemitter3: 4.0.7
      typescript: 5.1.3
-      viem: 1.12.2(typescript@5.1.3)
+      viem: 1.20.0(typescript@5.1.3)
      zustand: 4.4.7(@types/react@18.2.14)(react@18.2.0)
    transitivePeerDependencies:
      - '@azure/app-configuration'
@@ -6272,6 +6277,45 @@ packages:
      - utf-8-validate
    dev: false

+  /@walletconnect/core@2.11.0:
+    resolution: {integrity: sha512-2Tjp5BCevI7dbmqo/OrCjX4tqgMqwJNQLlQAlphqPfvwlF9+tIu6pGcVbSN3U9zyXzWIZCeleqEaWUeSeET4Ew==}
+    dependencies:
+      '@walletconnect/heartbeat': 1.2.1
+      '@walletconnect/jsonrpc-provider': 1.0.13
+      '@walletconnect/jsonrpc-types': 1.0.3
+      '@walletconnect/jsonrpc-utils': 1.0.8
+      '@walletconnect/jsonrpc-ws-connection': 1.0.14
+      '@walletconnect/keyvaluestorage': 1.1.1
+      '@walletconnect/logger': 2.0.1
+      '@walletconnect/relay-api': 1.0.9
+      '@walletconnect/relay-auth': 1.0.4
+      '@walletconnect/safe-json': 1.0.2
+      '@walletconnect/time': 1.0.2
+      '@walletconnect/types': 2.11.0
+      '@walletconnect/utils': 2.11.0
+      events: 3.3.0
+      isomorphic-unfetch: 3.1.0
+      lodash.isequal: 4.5.0
+      uint8arrays: 3.1.1
+    transitivePeerDependencies:
+      - '@azure/app-configuration'
+      - '@azure/cosmos'
+      - '@azure/data-tables'
+      - '@azure/identity'
+      - '@azure/keyvault-secrets'
+      - '@azure/storage-blob'
+      - '@capacitor/preferences'
+      - '@netlify/blobs'
+      - '@planetscale/database'
+      - '@react-native-async-storage/async-storage'
+      - '@upstash/redis'
+      - '@vercel/kv'
+      - bufferutil
+      - encoding
+      - supports-color
+      - utf-8-validate
+    dev: false
+
  /@walletconnect/crypto@1.0.3:
    resolution: {integrity: sha512-+2jdORD7XQs76I2Odgr3wwrtyuLUXD/kprNVsjWRhhhdO9Mt6WqVzOPu0/t7OHSmgal8k7SoBQzUc5hu/8zL/g==}
    dependencies:
@@ -6297,18 +6341,18 @@ packages:
      tslib: 1.14.1
    dev: false

-  /@walletconnect/ethereum-provider@2.10.6(@types/react@18.2.14)(react@18.2.0):
-    resolution: {integrity: sha512-bBQ+yUfxLv8VxNttgNKY7nED35gSVayO/BnLHbNKvyV1gpvSCla5mWB9MsXuQs70MK0g+/qtgRVSrOtdSubaNQ==}
+  /@walletconnect/ethereum-provider@2.11.0(@types/react@18.2.14)(react@18.2.0):
+    resolution: {integrity: sha512-YrTeHVjuSuhlUw7SQ6xBJXDuJ6iAC+RwINm9nVhoKYJSHAy3EVSJZOofMKrnecL0iRMtD29nj57mxAInIBRuZA==}
    dependencies:
      '@walletconnect/jsonrpc-http-connection': 1.0.7
      '@walletconnect/jsonrpc-provider': 1.0.13
      '@walletconnect/jsonrpc-types': 1.0.3
      '@walletconnect/jsonrpc-utils': 1.0.8
      '@walletconnect/modal': 2.6.2(@types/react@18.2.14)(react@18.2.0)
-      '@walletconnect/sign-client': 2.10.6
-      '@walletconnect/types': 2.10.6
-      '@walletconnect/universal-provider': 2.10.6
-      '@walletconnect/utils': 2.10.6
+      '@walletconnect/sign-client': 2.11.0
+      '@walletconnect/types': 2.11.0
+      '@walletconnect/universal-provider': 2.11.0
+      '@walletconnect/utils': 2.11.0
      events: 3.3.0
    transitivePeerDependencies:
      - '@azure/app-configuration'
@@ -6576,20 +6620,17 @@ packages:
      - utf-8-validate
    dev: false

-  /@walletconnect/time@1.0.2:
-    resolution: {integrity: sha512-uzdd9woDcJ1AaBZRhqy5rNC9laqWGErfc4dxA9a87mPdKOgWMD85mcFo9dIYIts/Jwocfwn07EC6EzclKubk/g==}
-    dependencies:
-      tslib: 1.14.1
-    dev: false
-
-  /@walletconnect/types@2.10.2:
-    resolution: {integrity: sha512-luNV+07Wdla4STi9AejseCQY31tzWKQ5a7C3zZZaRK/di+rFaAAb7YW04OP4klE7tw/mJRGPTlekZElmHxO8kQ==}
+  /@walletconnect/sign-client@2.11.0:
+    resolution: {integrity: sha512-H2ukscibBS+6WrzQWh+WyVBqO5z4F5et12JcwobdwgHnJSlqIoZxqnUYYWNCI5rUR5UKsKWaUyto4AE9N5dw4Q==}
    dependencies:
+      '@walletconnect/core': 2.11.0
      '@walletconnect/events': 1.0.1
      '@walletconnect/heartbeat': 1.2.1
-      '@walletconnect/jsonrpc-types': 1.0.3
-      '@walletconnect/keyvaluestorage': 1.1.1
+      '@walletconnect/jsonrpc-utils': 1.0.8
      '@walletconnect/logger': 2.0.1
+      '@walletconnect/time': 1.0.2
+      '@walletconnect/types': 2.11.0
+      '@walletconnect/utils': 2.11.0
      events: 3.3.0
    transitivePeerDependencies:
      - '@azure/app-configuration'
@@ -6604,7 +6645,16 @@ packages:
      - '@react-native-async-storage/async-storage'
      - '@upstash/redis'
      - '@vercel/kv'
+      - bufferutil
+      - encoding
      - supports-color
+      - utf-8-validate
+    dev: false
+
+  /@walletconnect/time@1.0.2:
+    resolution: {integrity: sha512-uzdd9woDcJ1AaBZRhqy5rNC9laqWGErfc4dxA9a87mPdKOgWMD85mcFo9dIYIts/Jwocfwn07EC6EzclKubk/g==}
+    dependencies:
+      tslib: 1.14.1
    dev: false

  /@walletconnect/types@2.10.6:
@@ -6632,17 +6682,42 @@ packages:
      - supports-color
    dev: false

-  /@walletconnect/universal-provider@2.10.6:
-    resolution: {integrity: sha512-CEivusqqoD31BhCTKp08DnrccfGjwD9MFjZs5BNRorDteRFE8zVm9LmP6DSiNJCw82ZajGlZThggLQ/BAATfwA==}
+  /@walletconnect/types@2.11.0:
+    resolution: {integrity: sha512-AB5b1lrEbCGHxqS2vqfCkIoODieH+ZAUp9rA1O2ftrhnqDJiJK983Df87JhYhECsQUBHHfALphA8ydER0q+9sw==}
+    dependencies:
+      '@walletconnect/events': 1.0.1
+      '@walletconnect/heartbeat': 1.2.1
+      '@walletconnect/jsonrpc-types': 1.0.3
+      '@walletconnect/keyvaluestorage': 1.1.1
+      '@walletconnect/logger': 2.0.1
+      events: 3.3.0
+    transitivePeerDependencies:
+      - '@azure/app-configuration'
+      - '@azure/cosmos'
+      - '@azure/data-tables'
+      - '@azure/identity'
+      - '@azure/keyvault-secrets'
+      - '@azure/storage-blob'
+      - '@capacitor/preferences'
+      - '@netlify/blobs'
+      - '@planetscale/database'
+      - '@react-native-async-storage/async-storage'
+      - '@upstash/redis'
+      - '@vercel/kv'
+      - supports-color
+    dev: false
+
+  /@walletconnect/universal-provider@2.11.0:
+    resolution: {integrity: sha512-zgJv8jDvIMP4Qse/D9oIRXGdfoNqonsrjPZanQ/CHNe7oXGOBiQND2IIeX+tS0H7uNA0TPvctljCLiIN9nw4eA==}
    dependencies:
      '@walletconnect/jsonrpc-http-connection': 1.0.7
      '@walletconnect/jsonrpc-provider': 1.0.13
      '@walletconnect/jsonrpc-types': 1.0.3
      '@walletconnect/jsonrpc-utils': 1.0.8
      '@walletconnect/logger': 2.0.1
-      '@walletconnect/sign-client': 2.10.6
-      '@walletconnect/types': 2.10.6
-      '@walletconnect/utils': 2.10.6
+      '@walletconnect/sign-client': 2.11.0
+      '@walletconnect/types': 2.11.0
+      '@walletconnect/utils': 2.11.0
      events: 3.3.0
    transitivePeerDependencies:
      - '@azure/app-configuration'
@@ -6663,8 +6738,8 @@ packages:
      - utf-8-validate
    dev: false

-  /@walletconnect/utils@2.10.2:
-    resolution: {integrity: sha512-syxXRpc2yhSknMu3IfiBGobxOY7fLfLTJuw+ppKaeO6WUdZpIit3wfuGOcc0Ms3ZPFCrGfyGOoZsCvgdXtptRg==}
+  /@walletconnect/utils@2.10.6:
+    resolution: {integrity: sha512-oRsWWhN2+hi3aiDXrQEOfysz6FHQJGXLsNQPVt+WIBJplO6Szmdau9dbleD88u1iiT4GKPqE0R9FOYvvPm1H/w==}
    dependencies:
      '@stablelib/chacha20poly1305': 1.0.1
      '@stablelib/hkdf': 1.0.1
@@ -6674,7 +6749,7 @@ packages:
      '@walletconnect/relay-api': 1.0.9
      '@walletconnect/safe-json': 1.0.2
      '@walletconnect/time': 1.0.2
-      '@walletconnect/types': 2.10.2
+      '@walletconnect/types': 2.10.6
      '@walletconnect/window-getters': 1.0.1
      '@walletconnect/window-metadata': 1.0.1
      detect-browser: 5.3.0
@@ -6696,8 +6771,8 @@ packages:
      - supports-color
    dev: false

-  /@walletconnect/utils@2.10.6:
-    resolution: {integrity: sha512-oRsWWhN2+hi3aiDXrQEOfysz6FHQJGXLsNQPVt+WIBJplO6Szmdau9dbleD88u1iiT4GKPqE0R9FOYvvPm1H/w==}
+  /@walletconnect/utils@2.11.0:
+    resolution: {integrity: sha512-hxkHPlTlDQILHfIKXlmzgNJau/YcSBC3XHUSuZuKZbNEw3duFT6h6pm3HT/1+j1a22IG05WDsNBuTCRkwss+BQ==}
    dependencies:
      '@stablelib/chacha20poly1305': 1.0.1
      '@stablelib/hkdf': 1.0.1
@@ -6707,7 +6782,7 @@ packages:
      '@walletconnect/relay-api': 1.0.9
      '@walletconnect/safe-json': 1.0.2
      '@walletconnect/time': 1.0.2
-      '@walletconnect/types': 2.10.6
+      '@walletconnect/types': 2.11.0
      '@walletconnect/window-getters': 1.0.1
      '@walletconnect/window-metadata': 1.0.1
      detect-browser: 5.3.0
@@ -10406,6 +10481,15 @@ packages:
    engines: {node: '>=12'}
    dev: true

+  /isomorphic-unfetch@3.1.0:
+    resolution: {integrity: sha512-geDJjpoZ8N0kWexiwkX8F9NkTsXhetLPVbZFQ+JTW239QNOwvB0gniuR1Wc6f0AMTn7/mFGyXvHTifrCp/GH8Q==}
+    dependencies:
+      node-fetch: 2.6.12
+      unfetch: 4.2.0
+    transitivePeerDependencies:
+      - encoding
+    dev: false
+
  /isomorphic-ws@4.0.1(ws@7.5.9):
    resolution: {integrity: sha512-BhBvN2MBpWTaSHdWRb/bwdZJ1WaehQ2L1KngkCkfLUGF0mAWAT1sQUQacEmQ0jXkFw/czDXPNQSL5u2/Krsz1w==}
    peerDependencies:
@@ -10414,8 +10498,8 @@ packages:
      ws: 7.5.9
    dev: false

-  /isomorphic-ws@5.0.0(ws@8.13.0):
-    resolution: {integrity: sha512-muId7Zzn9ywDsyXgTIafTry2sV3nySZeUDe6YedVd1Hvuuep5AsIlqK+XefWpYTyJG5e503F2xIuT2lcU6rCSw==}
+  /isows@1.0.3(ws@8.13.0):
+    resolution: {integrity: sha512-2cKei4vlmg2cxEjm3wVSqn8pcoRF/LX/wpifuuNquFO4SQmPwarClT+SUCA2lt+l581tTeZIPIZuIDo2jWN1fg==}
    peerDependencies:
      ws: '*'
    dependencies:
@@ -11748,10 +11832,6 @@ packages:
    engines: {node: '>=10.5.0'}
    dev: true

-  /node-fetch-native@1.4.1:
-    resolution: {integrity: sha512-NsXBU0UgBxo2rQLOeWNZqS3fvflWePMECr8CoSWoSTqCqGbVVsvl9vZu1HfQicYN0g5piV9Gh8RTEvo/uP752w==}
-    dev: false
-
  /node-fetch-native@1.6.1:
    resolution: {integrity: sha512-bW9T/uJDPAJB2YNYEpWzE54U5O3MQidXsOyTfnbKYtTtFexRvGzb1waphBN4ZwP6EcIvYYEOwW0b72BpAqydTw==}
    dev: false
@@ -11899,7 +11979,7 @@ packages:
    resolution: {integrity: sha512-s1ZCMmQWXy4b5K/TW9i/DtiN8Ku+xCiHcjQ6/J/nDdssirrQNOoB165Zu8EqLMA2lln1JUth9a0aW9Ap2ctrUg==}
    dependencies:
      destr: 2.0.2
-      node-fetch-native: 1.4.1
+      node-fetch-native: 1.6.1
      ufo: 1.3.2
    dev: false

@@ -13787,10 +13867,14 @@ packages:
      consola: 3.2.3
      defu: 6.1.3
      mime: 3.0.0
-      node-fetch-native: 1.4.1
+      node-fetch-native: 1.6.1
      pathe: 1.1.1
    dev: false

+  /unfetch@4.2.0:
+    resolution: {integrity: sha512-F9p7yYCn6cIW9El1zi0HI6vqpeIvBsr3dSuRO6Xuppb1u5rXpCPmMvLSyECLhybr9isec8Ohl0hPekMVrEinDA==}
+    dev: false
+
  /unified@10.1.2:
    resolution: {integrity: sha512-pUSWAi/RAnVy1Pif2kAoeWNBa3JVrx0MId2LASj8G+7AiHWoKZNTomq6LG326T68U7/e263X6fTdcXIy7XnF7Q==}
    dependencies:
@@ -13910,7 +13994,7 @@ packages:
      listhen: 1.5.5
      lru-cache: 10.1.0
      mri: 1.2.0
-      node-fetch-native: 1.4.1
+      node-fetch-native: 1.6.1
      ofetch: 1.3.3
      ufo: 1.3.2
    transitivePeerDependencies:
@@ -14144,22 +14228,21 @@ packages:
      vfile-message: 3.1.4
    dev: true

-  /viem@1.12.2(typescript@5.1.3):
-    resolution: {integrity: sha512-aCaUCyg72ES+jK4s6tVYOMnOt4if71RwzgiUAUpAuaCgvHFfh9DCnwuEfwkxEZLE2vafOsirgJ3fcn7nsDVQoQ==}
+  /viem@1.20.0(typescript@5.1.3):
+    resolution: {integrity: sha512-yPjV9pJr10xi28C/9LEvs5zdZNEMiru3Kz7nufghVYABJAfeSkoZQXb6b23n7MscS7c55JO5nmUI3xKkd9g6Yg==}
    peerDependencies:
      typescript: '>=5.0.4'
    peerDependenciesMeta:
      typescript:
        optional: true
    dependencies:
-      '@adraffy/ens-normalize': 1.9.4
+      '@adraffy/ens-normalize': 1.10.0
      '@noble/curves': 1.2.0
      '@noble/hashes': 1.3.2
      '@scure/bip32': 1.3.2
      '@scure/bip39': 1.2.1
-      '@types/ws': 8.5.6
      abitype: 0.9.8(typescript@5.1.3)
-      isomorphic-ws: 5.0.0(ws@8.13.0)
+      isows: 1.0.3(ws@8.13.0)
      typescript: 5.1.3
      ws: 8.13.0
    transitivePeerDependencies:
@@ -14329,8 +14412,8 @@ packages:
      - supports-color
    dev: true

-  /wagmi@1.4.12(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)(typescript@5.1.3)(viem@1.12.2):
-    resolution: {integrity: sha512-QRxpjhdMlZmbYTfn9VQkQMKq+l3kwA1O7tF10vaykPrjbGX+IIlyn72ib9oqW9BfQO7n/Sf/mnVz1zbxRhGPWA==}
+  /wagmi@1.4.13(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)(typescript@5.1.3)(viem@1.20.0):
+    resolution: {integrity: sha512-AScVYFjqNt1wMgL99Bob7MLdhoTZ3XKiOZL5HVBdy4W1sh7QodA3gQ8IsmTuUrQ7oQaTxjiXEhwg7sWNrPBvJA==}
    peerDependencies:
      react: '>=17.0.0'
      typescript: '>=5.0.4'
@@ -14340,14 +14423,14 @@ packages:
        optional: true
    dependencies:
      '@tanstack/query-sync-storage-persister': 4.32.6
-      '@tanstack/react-query': 4.32.6(react-dom@18.2.0)(react@18.2.0)
-      '@tanstack/react-query-persist-client': 4.32.6(@tanstack/react-query@4.32.6)
-      '@wagmi/core': 1.4.12(@types/react@18.2.14)(react@18.2.0)(typescript@5.1.3)(viem@1.12.2)
+      '@tanstack/react-query': 4.36.1(react-dom@18.2.0)(react@18.2.0)
+      '@tanstack/react-query-persist-client': 4.32.6(@tanstack/react-query@4.36.1)
+      '@wagmi/core': 1.4.13(@types/react@18.2.14)(react@18.2.0)(typescript@5.1.3)(viem@1.20.0)
      abitype: 0.8.7(typescript@5.1.3)
      react: 18.2.0
      typescript: 5.1.3
      use-sync-external-store: 1.2.0(react@18.2.0)
-      viem: 1.12.2(typescript@5.1.3)
+      viem: 1.20.0(typescript@5.1.3)
    transitivePeerDependencies:
      - '@azure/app-configuration'
      - '@azure/cosmos'
@@ -14726,3 +14809,7 @@ packages:
  /zwitch@2.0.4:
    resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
    dev: true
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
@@ -39,7 +39,7 @@
   "environments": {
      "dydxprotocol-dev": {
         "name": "v4 Dev",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydxprotocol-testnet",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -113,7 +113,7 @@
      },
      "dydxprotocol-dev-2": {
         "name": "v4 Dev 2",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydxprotocol-testnet",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -186,7 +186,7 @@
      },
      "dydxprotocol-dev-4": {
         "name": "v4 Dev 4",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydxprotocol-testnet",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -259,7 +259,7 @@
      },
      "dydxprotocol-dev-5": {
         "name": "v4 Dev 5",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydxprotocol-testnet",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -332,7 +332,7 @@
      },
      "dydxprotocol-staging": {
         "name": "v4 Staging",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydxprotocol-testnet",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -407,7 +407,7 @@
      },
      "dydxprotocol-staging-forced-update": {
         "name": "v4 Staging Forced Update",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydxprotocol-testnet",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -480,7 +480,7 @@
      },
      "dydxprotocol-staging-west": {
         "name": "v4 Staging West",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydxprotocol-testnet",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -555,7 +555,7 @@
      },
      "dydxprotocol-testnet": {
         "name": "v4 Public Testnet",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydx-testnet-4",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -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": [
@@ -634,7 +634,7 @@
      },
      "dydxprotocol-testnet-dydx": {
         "name": "v4 Public Testnet/dYdX",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydx-testnet-4",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -710,7 +710,7 @@
      },
      "dydxprotocol-testnet-nodefleet": {
         "name": "v4 Public Testnet/nodefleet",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydx-testnet-4",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -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": [
@@ -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": [
@@ -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": [
@@ -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": [
@@ -0,0 +1,230 @@
+<svg width="254" height="77" viewBox="0 0 254 77" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 1258">
+<g id="Ellipse 9" opacity="0.4" filter="url(#filter0_f_20300_14972)">
+<ellipse cx="86.5425" cy="-3.91219" rx="116.542" ry="20.0878" fill="#7774FF"/>
+</g>
+<g id="Ellipse 10" opacity="0.3" filter="url(#filter1_f_20300_14972)">
+<circle cx="74.5734" cy="4.63007" r="1.00507" fill="#9A9AFF"/>
+</g>
+<g id="Ellipse 12" opacity="0.3" filter="url(#filter2_f_20300_14972)">
+<circle cx="82.1105" cy="7.64179" r="1.00507" fill="#9A9AFF"/>
+</g>
+<g id="Ellipse 22" opacity="0.3" filter="url(#filter3_f_20300_14972)">
+<circle cx="116.785" cy="4.63007" r="1.00507" fill="#9A9AFF"/>
+</g>
+<g id="Ellipse 11" opacity="0.3" filter="url(#filter4_f_20300_14972)">
+<circle cx="64.774" cy="8.90488" r="0.502536" fill="#9A9AFF"/>
+</g>
+<g id="Ellipse 18" opacity="0.3" filter="url(#filter5_f_20300_14972)">
+<circle cx="96.4322" cy="3.87363" r="0.502536" fill="#9A9AFF"/>
+</g>
+<g id="Ellipse 20" opacity="0.3" filter="url(#filter6_f_20300_14972)">
+<circle cx="76.0807" cy="14.9361" r="0.502536" fill="#9A9AFF"/>
+</g>
+<g id="Ellipse 21" opacity="0.3" filter="url(#filter7_f_20300_14972)">
+<circle cx="104.725" cy="4.87754" r="0.502536" fill="#9A9AFF"/>
+</g>
+<g id="Ellipse 23" opacity="0.3" filter="url(#filter8_f_20300_14972)">
+<circle cx="114.021" cy="7.13925" r="0.502536" fill="#9A9AFF"/>
+</g>
+<g id="Ellipse 24" opacity="0.3" filter="url(#filter9_f_20300_14972)">
+<circle cx="109.75" cy="15.4361" r="0.502536" fill="#9A9AFF"/>
+</g>
+<g id="Ellipse 25" opacity="0.3" filter="url(#filter10_f_20300_14972)">
+<circle cx="119.801" cy="12.6705" r="0.502536" fill="#9A9AFF"/>
+</g>
+<g id="Ellipse 27" opacity="0.3" filter="url(#filter11_f_20300_14972)">
+<circle cx="94.0885" cy="11.0182" r="0.502536" fill="#9A9AFF"/>
+</g>
+<g id="Ellipse 30" opacity="0.3" filter="url(#filter12_f_20300_14972)">
+<circle cx="154.475" cy="11.6666" r="0.502536" fill="#9A9AFF"/>
+</g>
+<g id="Ellipse 29" opacity="0.3" filter="url(#filter13_f_20300_14972)">
+<circle cx="146.435" cy="8.90488" r="0.502536" fill="#9A9AFF"/>
+</g>
+<g id="Ellipse 15" opacity="0.3" filter="url(#filter14_f_20300_14972)">
+<circle cx="24.0103" cy="4.44785" r="0.502536" fill="#9A9AFF"/>
+</g>
+<g id="Ellipse 33" opacity="0.3" filter="url(#filter15_f_20300_14972)">
+<circle cx="-1.05899" cy="13.6783" r="0.502536" fill="#9A9AFF"/>
+</g>
+<g id="Ellipse 16" opacity="0.3" filter="url(#filter16_f_20300_14972)">
+<circle cx="17.441" cy="16.4908" r="0.502536" fill="#9A9AFF"/>
+</g>
+<g id="Ellipse 35" opacity="0.3" filter="url(#filter17_f_20300_14972)">
+<circle cx="36.0553" cy="6.63535" r="0.502536" fill="#9A9AFF"/>
+</g>
+<g id="Ellipse 32" opacity="0.3" filter="url(#filter18_f_20300_14972)">
+<circle cx="10.8707" cy="14.2994" r="0.502536" fill="#9A9AFF"/>
+</g>
+<g id="Ellipse 13" opacity="0.3" filter="url(#filter19_f_20300_14972)">
+<circle cx="55.7274" cy="9.65615" r="0.753803" fill="#9A9AFF"/>
+</g>
+<g id="Ellipse 19" opacity="0.3" filter="url(#filter20_f_20300_14972)">
+<circle cx="87.3886" cy="20.7108" r="0.753803" fill="#9A9AFF"/>
+</g>
+<g id="Ellipse 26" opacity="0.3" filter="url(#filter21_f_20300_14972)">
+<circle cx="123.82" cy="15.1874" r="0.753803" fill="#9A9AFF"/>
+</g>
+<g id="Ellipse 36" opacity="0.3" filter="url(#filter22_f_20300_14972)">
+<circle cx="134.876" cy="14.4335" r="0.753803" fill="#9A9AFF"/>
+</g>
+<g id="Ellipse 28" opacity="0.3" filter="url(#filter23_f_20300_14972)">
+<circle cx="129.6" cy="6.38662" r="0.753803" fill="#9A9AFF"/>
+</g>
+<g id="Ellipse 14" opacity="0.3" filter="url(#filter24_f_20300_14972)">
+<circle cx="41.6571" cy="14.9335" r="0.753803" fill="#9A9AFF"/>
+</g>
+<g id="Ellipse 31" opacity="0.3" filter="url(#filter25_f_20300_14972)">
+<circle cx="4.21767" cy="17.9491" r="0.753803" fill="#9A9AFF"/>
+</g>
+<g id="Ellipse 34" opacity="0.3" filter="url(#filter26_f_20300_14972)">
+<circle cx="12.2177" cy="6.88662" r="0.753803" fill="#9A9AFF"/>
+</g>
+<g id="Ellipse 17" opacity="0.3" filter="url(#filter27_f_20300_14972)">
+<circle cx="50.2001" cy="3.6249" r="0.753803" fill="#9A9AFF"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_f_20300_14972" x="-94" y="-88" width="361.085" height="168.176" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="32" result="effect1_foregroundBlur_20300_14972"/>
+</filter>
+<filter id="filter1_f_20300_14972" x="72.5633" y="2.61993" width="4.01991" height="4.02186" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.502536" result="effect1_foregroundBlur_20300_14972"/>
+</filter>
+<filter id="filter2_f_20300_14972" x="80.6029" y="6.13418" width="3.01484" height="3.01679" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.251268" result="effect1_foregroundBlur_20300_14972"/>
+</filter>
+<filter id="filter3_f_20300_14972" x="115.278" y="3.12246" width="3.01484" height="3.01679" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.251268" result="effect1_foregroundBlur_20300_14972"/>
+</filter>
+<filter id="filter4_f_20300_14972" x="63.2664" y="7.39727" width="3.01502" height="3.01405" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.502536" result="effect1_foregroundBlur_20300_14972"/>
+</filter>
+<filter id="filter5_f_20300_14972" x="94.9246" y="2.36602" width="3.01502" height="3.01405" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.502536" result="effect1_foregroundBlur_20300_14972"/>
+</filter>
+<filter id="filter6_f_20300_14972" x="74.5731" y="13.4285" width="3.01502" height="3.01405" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.502536" result="effect1_foregroundBlur_20300_14972"/>
+</filter>
+<filter id="filter7_f_20300_14972" x="103.218" y="3.36993" width="3.01502" height="3.01405" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.502536" result="effect1_foregroundBlur_20300_14972"/>
+</filter>
+<filter id="filter8_f_20300_14972" x="112.513" y="5.63165" width="3.01502" height="3.01405" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.502536" result="effect1_foregroundBlur_20300_14972"/>
+</filter>
+<filter id="filter9_f_20300_14972" x="108.242" y="13.9285" width="3.01502" height="3.01405" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.502536" result="effect1_foregroundBlur_20300_14972"/>
+</filter>
+<filter id="filter10_f_20300_14972" x="118.294" y="11.1629" width="3.01502" height="3.01405" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.502536" result="effect1_foregroundBlur_20300_14972"/>
+</filter>
+<filter id="filter11_f_20300_14972" x="92.5809" y="9.51055" width="3.01502" height="3.01405" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.502536" result="effect1_foregroundBlur_20300_14972"/>
+</filter>
+<filter id="filter12_f_20300_14972" x="153.47" y="10.6615" width="2.00995" height="2.00898" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.251268" result="effect1_foregroundBlur_20300_14972"/>
+</filter>
+<filter id="filter13_f_20300_14972" x="144.928" y="7.39727" width="3.01502" height="3.01405" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.502536" result="effect1_foregroundBlur_20300_14972"/>
+</filter>
+<filter id="filter14_f_20300_14972" x="22.5027" y="2.94024" width="3.01502" height="3.01405" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.502536" result="effect1_foregroundBlur_20300_14972"/>
+</filter>
+<filter id="filter15_f_20300_14972" x="-2.56659" y="12.1707" width="3.01502" height="3.01405" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.502536" result="effect1_foregroundBlur_20300_14972"/>
+</filter>
+<filter id="filter16_f_20300_14972" x="15.9334" y="14.9832" width="3.01502" height="3.01405" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.502536" result="effect1_foregroundBlur_20300_14972"/>
+</filter>
+<filter id="filter17_f_20300_14972" x="35.0502" y="5.63028" width="2.00995" height="2.00898" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.251268" result="effect1_foregroundBlur_20300_14972"/>
+</filter>
+<filter id="filter18_f_20300_14972" x="9.86563" y="13.2943" width="2.00995" height="2.00898" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.251268" result="effect1_foregroundBlur_20300_14972"/>
+</filter>
+<filter id="filter19_f_20300_14972" x="53.9686" y="7.89727" width="3.51795" height="3.51795" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.502536" result="effect1_foregroundBlur_20300_14972"/>
+</filter>
+<filter id="filter20_f_20300_14972" x="85.6297" y="18.952" width="3.51795" height="3.51795" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.502536" result="effect1_foregroundBlur_20300_14972"/>
+</filter>
+<filter id="filter21_f_20300_14972" x="122.061" y="13.4285" width="3.51795" height="3.51795" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.502536" result="effect1_foregroundBlur_20300_14972"/>
+</filter>
+<filter id="filter22_f_20300_14972" x="133.117" y="12.6746" width="3.51795" height="3.51795" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.502536" result="effect1_foregroundBlur_20300_14972"/>
+</filter>
+<filter id="filter23_f_20300_14972" x="127.842" y="4.62774" width="3.51795" height="3.51795" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.502536" result="effect1_foregroundBlur_20300_14972"/>
+</filter>
+<filter id="filter24_f_20300_14972" x="39.8982" y="13.1746" width="3.51795" height="3.51795" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.502536" result="effect1_foregroundBlur_20300_14972"/>
+</filter>
+<filter id="filter25_f_20300_14972" x="2.4588" y="16.1902" width="3.51795" height="3.51795" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.502536" result="effect1_foregroundBlur_20300_14972"/>
+</filter>
+<filter id="filter26_f_20300_14972" x="10.4588" y="5.12774" width="3.51795" height="3.51795" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.502536" result="effect1_foregroundBlur_20300_14972"/>
+</filter>
+<filter id="filter27_f_20300_14972" x="48.4412" y="1.86602" width="3.51795" height="3.51795" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.502536" result="effect1_foregroundBlur_20300_14972"/>
+</filter>
+</defs>
+</svg>
@@ -16,6 +16,7 @@ import {
 } from '@/hooks';
 import { DydxProvider } from '@/hooks/useDydxClient';
 import { AccountsProvider } from '@/hooks/useAccounts';
+import { AppThemeProvider } from '@/hooks/useAppTheme';
 import { DialogAreaProvider, useDialogArea } from '@/hooks/useDialogArea';
 import { LocaleProvider } from '@/hooks/useLocaleSeparators';
 import { NotificationsProvider } from '@/hooks/useNotifications';
@@ -35,6 +36,7 @@ import { GlobalCommandDialog } from '@/views/dialogs/GlobalCommandDialog';
 import { config } from '@/lib/wagmi';

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

@@ -66,49 +68,52 @@ const Content = () => {
  const { chainTokenLabel } = useTokenConfigs();

  return (
-    <Styled.Content isShowingHeader={isShowingHeader} isShowingFooter={isShowingFooter}>
-      {isNotTablet && <HeaderDesktop />}
+    <>
+      <GlobalStyle />
+      <Styled.Content isShowingHeader={isShowingHeader} isShowingFooter={isShowingFooter}>
+        {isNotTablet && <HeaderDesktop />}

-      <Styled.Main>
-        <Suspense fallback={<LoadingSpace id="main" />}>
-          <Routes>
-            <Route path={AppRoute.Trade}>
-              <Route path=":market" element={<TradePage />} />
-              <Route path={AppRoute.Trade} element={<TradePage />} />
-            </Route>
+        <Styled.Main>
+          <Suspense fallback={<LoadingSpace id="main" />}>
+            <Routes>
+              <Route path={AppRoute.Trade}>
+                <Route path=":market" element={<TradePage />} />
+                <Route path={AppRoute.Trade} element={<TradePage />} />
+              </Route>

-            <Route path={AppRoute.Markets} element={<MarketsPage />} />
-            <Route path={`/${chainTokenLabel}`} element={<RewardsPage />} />
-            {isTablet && (
-              <>
-                <Route path={AppRoute.Alerts} element={<AlertsPage />} />
-                <Route path={AppRoute.Profile} element={<ProfilePage />} />
-                <Route path={`${AppRoute.Settings}/*`} element={<SettingsPage />} />
-              </>
-            )}
+              <Route path={AppRoute.Markets} element={<MarketsPage />} />
+              <Route path={`/${chainTokenLabel}`} element={<RewardsPage />} />
+              {isTablet && (
+                <>
+                  <Route path={AppRoute.Alerts} element={<AlertsPage />} />
+                  <Route path={AppRoute.Profile} element={<ProfilePage />} />
+                  <Route path={`${AppRoute.Settings}/*`} element={<SettingsPage />} />
+                </>
+              )}

-            <Route element={<GuardedMobileRoute />}>
-              <Route path={`${AppRoute.Portfolio}/*`} element={<PortfolioPage />} />
-            </Route>
+              <Route element={<GuardedMobileRoute />}>
+                <Route path={`${AppRoute.Portfolio}/*`} element={<PortfolioPage />} />
+              </Route>

-            <Route path={AppRoute.Terms} element={<TermsOfUsePage />} />
-            <Route path={AppRoute.Privacy} element={<PrivacyPolicyPage />} />
+              <Route path={AppRoute.Terms} element={<TermsOfUsePage />} />
+              <Route path={AppRoute.Privacy} element={<PrivacyPolicyPage />} />

-            <Route path="*" element={<Navigate to={DEFAULT_TRADE_ROUTE} replace />} />
-          </Routes>
-        </Suspense>
-      </Styled.Main>
+              <Route path="*" element={<Navigate to={DEFAULT_TRADE_ROUTE} replace />} />
+            </Routes>
+          </Suspense>
+        </Styled.Main>

-      {isTablet ? <FooterMobile /> : <FooterDesktop />}
+        {isTablet ? <FooterMobile /> : <FooterDesktop />}

-      <Styled.NotificationsToastArea />
+        <Styled.NotificationsToastArea />

-      <Styled.DialogArea ref={setDialogArea}>
-        <DialogManager />
-      </Styled.DialogArea>
+        <Styled.DialogArea ref={setDialogArea}>
+          <DialogManager />
+        </Styled.DialogArea>

-      <GlobalCommandDialog />
-    </Styled.Content>
+        <GlobalCommandDialog />
+      </Styled.Content>
+    </>
  );
 };

@@ -131,6 +136,7 @@ const providers = [
  wrapProvider(LocalNotificationsProvider),
  wrapProvider(NotificationsProvider),
  wrapProvider(DialogAreaProvider),
+  wrapProvider(AppThemeProvider),
 ];

 const App = () => {
@@ -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,10 +54,12 @@ import {
  OverviewIcon,
  PencilIcon,
  PlayIcon,
+  PlusIcon,
  PositionsIcon,
  PriceChartIcon,
  PrivacyIcon,
  QrIcon,
+  RewardStarIcon,
  SearchIcon,
  SendIcon,
  ShareIcon,
@@ -98,7 +99,6 @@ export enum IconName {
  Coins = 'Coins',
  Comment = 'Comment',
  Copy = 'Copy',
-  Cube = 'Cube',
  Deposit = 'Deposit',
  DepthChart = 'DepthChart',
  Discord = 'Discord',
@@ -130,10 +130,12 @@ export enum IconName {
  Overview = 'Overview',
  Pencil = 'Pencil',
  Play = 'Play',
+  Plus = 'Plus',
  Positions = 'Positions',
  PriceChart = 'PriceChart',
  Privacy = 'Privacy',
  Qr = 'Qr',
+  RewardStar = 'RewardStar',
  Search = 'Search',
  Send = 'Send',
  Share = 'Share',
@@ -173,7 +175,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,10 +205,12 @@ const icons = {
  [IconName.Overview]: OverviewIcon,
  [IconName.Pencil]: PencilIcon,
  [IconName.Play]: PlayIcon,
+  [IconName.Plus]: PlusIcon,
  [IconName.Positions]: PositionsIcon,
  [IconName.PriceChart]: PriceChartIcon,
  [IconName.Privacy]: PrivacyIcon,
  [IconName.Qr]: QrIcon,
+  [IconName.RewardStar]: RewardStarIcon,
  [IconName.Search]: SearchIcon,
  [IconName.Send]: SendIcon,
  [IconName.Share]: ShareIcon,
@@ -1,11 +1,11 @@
 import styled, { type AnyStyledComponent } from 'styled-components';

 import { RiskLevels } from '@/constants/abacus';
-import { UsageColorFromRiskLevel } from '@/styles/colors';

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

 import { abacusHelper } from '@/lib/abacus';
+import { UsageColorFromRiskLevel } from '@/lib/styles';

 type ElementProps = {
  value: number;
@@ -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);
@@ -47,7 +47,7 @@ Styled.Root = styled(Root)`
  --switch-thumb-backgroundColor: var(--color-layer-6);

  --switch-active-backgroundColor: var(--color-accent);
-  --switch-active-thumb-backgroundColor: var(--color-white);
+  --switch-active-thumb-backgroundColor: ${({ theme }) => theme.switchThumbActiveBackground};

  position: relative;
  width: var(--switch-width);
@@ -27,9 +27,8 @@ export const ToastArea = ({ swipeDirection, children, className }: ToastAreaProp
 const $ToastArea = styled.aside`
  // Params
  --toasts-gap: 0.5rem;
-
+  
  // Rules
-  ${layoutMixins.scrollArea}
  z-index: 1;

  pointer-events: none;
@@ -2,9 +2,9 @@ import styled, { type AnyStyledComponent } from 'styled-components';

 import { type RiskLevels } from '@/constants/abacus';

-import { UsageColorFromRiskLevel } from '@/styles/colors';
-
 import { abacusHelper } from '@/lib/abacus';
+import { UsageColorFromRiskLevel } from '@/lib/styles';
+
 type ElementProps = {
  value: number;
 };
@@ -110,12 +110,7 @@ Styled.Abbr = styled.abbr`

 Styled.Content = styled(Content)`
  --tooltip-backgroundColor: var(--color-layer-4);
-  --tooltip-backgroundColor: hsl(
-    var(--layer-base-hue),
-    var(--layer-base-saturation),
-    calc(var(--layer-base-lightness) + 4%),
-    0.66
-  );
+  --tooltip-backgroundColor: ${({ theme }) => theme.tooltipBackground};

  ${popoverMixins.popover}
  --popover-backgroundColor: var(--tooltip-backgroundColor);
@@ -27,12 +27,7 @@ Styled.TooltipContent = styled.aside<{ accentColor?: string }>`

  ${popoverMixins.popover}
  --popover-radius: 0.5rem;
-  --popover-background-color: hsl(
-    var(--layer-base-hue),
-    var(--layer-base-saturation),
-    calc(var(--layer-base-lightness)),
-    0.9
-  );
+  --popover-background-color: ${({ theme }) => theme.popoverBackground};
  --popover-backdrop-filter: saturate(120%) blur(12px);

  display: grid;
@@ -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',
 }
@@ -87,6 +87,8 @@ export type NotificationDisplayData = {
  slotTitleLeft?: React.ReactNode;
  slotTitleRight?: React.ReactNode;

+  groupKey: string; // Grouping key toast notification stacking
+
  // Overrides title/body for Notification in NotificationMenu
  renderCustomBody?: ({
    isToast,
@@ -0,0 +1,70 @@
+export enum ColorToken {
+  Black = '#000000',
+  White = '#FFFFFF',
+
+  LightGray0 = '#FAFAFA',
+  LightGray1 = '#F7F8FA',
+  LightGray2 = '#FAFAFD',
+  LightGray3 = '#F5F5F5',
+  LightGray4 = '#EDF0F2',
+  LightGray5 = '#EDEDED',
+  LightGray6 = '#E9ECEE',
+  LightGray7 = '#E6E6E6',
+  LightGray8 = '#DBDBDB',
+  LightGray9 = '#D5DADF',
+  LightGray10 = '#D1D9E0',
+
+  MediumGray0 = '#CACACE',
+  MediumGray1 = '#C2CBD3',
+
+  DarkGray0 = '#888891',
+  DarkGray1 = '#737373',
+  DarkGray2 = '#56565C',
+  DarkGray3 = '#4B4B4B',
+  DarkGray4 = '#494950',
+  DarkGray5 = '#3B3B3F',
+  DarkGray6 = '#303033',
+  DarkGray7 = '#313135',
+  DarkGray8 = '#292929',
+  DarkGray9 = '#23232F',
+  DarkGray10 = '#212124',
+  DarkGray11 = '#18181B',
+  DarkGray12 = '#181818',
+  DarkGray13 = '#0C0C0D',
+
+  GrayBlue0 = '#464659',
+  GrayBlue1 = '#38384D',
+  GrayBlue2 = '#303045',
+  GrayBlue3 = '#29293D',
+  GrayBlue4 = '#212131',
+  GrayBlue5 = '#181825',
+  GrayBlue6 = '#101018',
+  GrayBlue7 = '#08080C',
+
+  GrayPurple0 = '#DFDADF',
+  GrayPurple1 = '#C8C7D8',
+  GrayPurple2 = '#807E98',
+
+  Purple0 = '#7774FF',
+  Purple1 = '#6966FF',
+
+  Green0 = '#1AFFB9',
+  Green1 = '#3ED9A4',
+  Green2 = '#2CCC98',
+  Green3 = '#3EB68A',
+
+  Yellow0 = '#FFCC48',
+  Yellow1 = '#FFB647',
+
+  Red0 = '#FF5C5C',
+  Red1 = '#E76565',
+  Red2 = '#E45555',
+}
+
+/** Maps opacity to corresponding hex value */
+export enum OpacityToken {
+  Opacity16 = '29',
+  Opacity20 = '33',
+  Opacity66 = 'A8',
+  Opacity90 = 'E6',
+}
@@ -0,0 +1,77 @@
+export type ThemeColors = LayerColors &
+  BorderColors &
+  TextColors &
+  GradientColors &
+  AccentColors &
+  StatusColors &
+  DirectionalColors &
+  RiskColors &
+  IconColors &
+  ComponentColors;
+
+type LayerColors = {
+  layer0: string;
+  layer1: string;
+  layer2: string;
+  layer3: string;
+  layer4: string;
+  layer5: string;
+  layer6: string;
+  layer7: string;
+};
+
+type BorderColors = {
+  borderDefault: string;
+  borderDestructive: string;
+  borderButton: string;
+};
+
+type TextColors = {
+  textPrimary: string;
+  textSecondary: string;
+  textTertiary: string;
+};
+
+type GradientColors = {
+  gradientBase0: string;
+  gradientBase1: string;
+};
+
+type AccentColors = {
+  accent: string;
+  accentFaded: string;
+  favorite: string;
+};
+
+type StatusColors = {
+  success: string;
+  warning: string;
+  error: string;
+};
+
+type DirectionalColors = {
+  positive: string;
+  negative: string;
+  positiveFaded: string;
+  negativeFaded: string;
+};
+
+type RiskColors = {
+  riskLow: string;
+  riskMedium: string;
+  riskHigh: string;
+};
+
+type IconColors = {
+  logoFill: string;
+  profileYellow: string;
+  profileRed: string;
+};
+
+type ComponentColors = {
+  inputBackground: string;
+  popoverBackground: string;
+  switchThumbActiveBackground: string;
+  toggleBackground: string;
+  tooltipBackground: string;
+};
@@ -4,7 +4,6 @@ import { useSelector } from 'react-redux';
 import type { IChartingLibraryWidget, ThemeName } from 'public/tradingview/charting_library';

 import { AppTheme } from '@/state/configs';
-
 import { getAppTheme } from '@/state/configsSelectors';

 import { getWidgetOverrides } from '@/lib/tradingView/utils';
@@ -29,7 +28,7 @@ export const useTradingViewTheme = ({
  tvWidget: (IChartingLibraryWidget & { _id?: string; _ready?: boolean }) | null;
  isWidgetReady?: boolean;
 }) => {
-  const appTheme = useSelector(getAppTheme);
+  const appTheme: AppTheme = useSelector(getAppTheme);

  useEffect(() => {
    if (tvWidget && isWidgetReady) {
@@ -97,7 +97,7 @@ export const useAnalytics = () => {
  }, []);

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

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

@@ -0,0 +1,16 @@
+import { useSelector } from 'react-redux';
+import { ThemeProvider } from 'styled-components';
+
+import { AppTheme } from '@/state/configs';
+import { getAppTheme } from '@/state/configsSelectors';
+
+import { Themes } from '@/styles/themes';
+
+export const AppThemeProvider = ({ ...props }) => {
+    return <ThemeProvider theme={useAppThemeContext()} {...props} />
+};
+
+export const useAppThemeContext = () => {
+    const theme: AppTheme = useSelector(getAppTheme);
+    return Themes[theme];
+}
@@ -28,6 +28,7 @@ import { useLocalNotifications } from '@/hooks/useLocalNotifications';

 import { AssetIcon } from '@/components/AssetIcon';
 import { Icon, IconName } from '@/components/Icon';
+import { BlockRewardNotification } from '@/views/notifications/BlockRewardNotification';
 import { TradeNotification } from '@/views/notifications/TradeNotification';
 import { TransferStatusNotification } from '@/views/notifications/TransferStatusNotification';

@@ -80,6 +81,7 @@ export const notificationTypes: NotificationTypeConfig[] = [
                  body: abacusNotif.text ? stringGetter({ key: abacusNotif.text, params }) : '',
                  toastDuration: DEFAULT_TOAST_AUTO_CLOSE_MS,
                  toastSensitivity: 'foreground',
+                  groupKey: abacusNotificationType,
                  renderCustomBody: ({ isToast, notification }) => (
                    <TradeNotification
                      isToast={isToast}
@@ -93,6 +95,29 @@ export const notificationTypes: NotificationTypeConfig[] = [
              );
              break;
            }
+            case 'blockReward': {
+              trigger(
+                abacusNotif.id,
+                {
+                  icon: abacusNotif.image && <$Icon src={abacusNotif.image} alt="" />,
+                  title: stringGetter({ key: abacusNotif.title }),
+                  body: abacusNotif.text ? stringGetter({ key: abacusNotif.text, params }) : '',
+                  toastDuration: DEFAULT_TOAST_AUTO_CLOSE_MS,
+                  toastSensitivity: 'foreground',
+                  groupKey: abacusNotificationType,
+                  renderCustomBody: ({ isToast, notification }) => (
+                    <BlockRewardNotification
+                      isToast={isToast}
+                      data={parsedData}
+                      notification={notification}
+                    />
+                  ),
+                },
+                [abacusNotif.updateTimeInMilliseconds, abacusNotif.data],
+                true
+              );
+              break;
+            }
            default:
              trigger(
                abacusNotif.id,
@@ -102,6 +127,7 @@ export const notificationTypes: NotificationTypeConfig[] = [
                  body: abacusNotif.text ? stringGetter({ key: abacusNotif.text, params }) : '',
                  toastDuration: DEFAULT_TOAST_AUTO_CLOSE_MS,
                  toastSensitivity: 'foreground',
+                  groupKey: abacusNotificationType,
                },
                [abacusNotif.updateTimeInMilliseconds, abacusNotif.data]
              );
@@ -197,6 +223,7 @@ export const notificationTypes: NotificationTypeConfig[] = [
                />
              ),
              toastSensitivity: 'foreground',
+              groupKey: NotificationType.SquidTransfer,
            },
            [isFinished]
          );
@@ -242,6 +269,7 @@ export const notificationTypes: NotificationTypeConfig[] = [
              },
            }),
            toastSensitivity: 'foreground',
+            groupKey: NotificationType.ReleaseUpdates,
          },
          []
        );
@@ -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,12 +43,14 @@ 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';
 export { default as PrivacyIcon } from './privacy.svg';
 export { default as ProfileIcon } from './profile.svg';
 export { default as QrIcon } from './qr.svg';
+export { default as RewardStarIcon } from './reward-star.svg';
 export { default as SearchIcon } from './search.svg';
 export { default as SendIcon } from './send.svg';
 export { default as ShareIcon } from './share.svg';
@@ -1,45 +1,52 @@
-const LogoShortIcon: React.FC<{ id?: string }> = ({ id }: { id?: string }) => (
-  <svg
-    width="135"
-    height="145"
-    viewBox="0 0 135 145"
-    fill="none"
-    xmlns="http://www.w3.org/2000/svg"
-  >
-    <path d="M100.986 0L0 144.988H31.0048L132.514 0H100.986Z" fill="white" />
-    <path
-      d="M34.2346 0L63.9475 42.7232L48.4451 66.0268L2.58386 0H34.2346Z"
-      fill={`url(#${id ? `${id}_logo_gradient_0` : 'paint0_linear'})`}
-    />
-    <path
-      d="M103.995 145L71.0526 97.7455L86.555 75.0893L135 145H103.995Z"
-      fill={`url(#${id ? `${id}_logo_gradient_1` : 'paint1_linear'})`}
-    />
-    <defs>
-      <linearGradient
-        id={id ? `${id}_logo_gradient_0` : 'paint0_linear'}
-        x1="27.1293"
-        y1="9.0625"
-        x2="69.773"
-        y2="60.4324"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop stopColor="white" />
-        <stop offset="1" stopColor="white" stopOpacity="0.55" />
-      </linearGradient>
-      <linearGradient
-        id={id ? `${id}_logo_gradient_1` : 'paint1_linear'}
-        x1="111.1"
-        y1="133.996"
-        x2="58.6959"
-        y2="63.4999"
-        gradientUnits="userSpaceOnUse"
-      >
-        <stop stopColor="#6966FF" />
-        <stop offset="1" stopColor="#6966FF" stopOpacity="0.36" />
-      </linearGradient>
-    </defs>
-  </svg>
-);
+import { useAppThemeContext } from '@/hooks/useAppTheme';
+
+const LogoShortIcon: React.FC<{ id?: string }> = ({ id }: { id?: string }) => {
+  const theme = useAppThemeContext();
+  const fill = theme.logoFill;
+
+  return (
+    <svg
+      width="135"
+      height="145"
+      viewBox="0 0 135 145"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path d="M100.986 0L0 144.988H31.0048L132.514 0H100.986Z" fill={fill} />
+      <path
+        d="M34.2346 0L63.9475 42.7232L48.4451 66.0268L2.58386 0H34.2346Z"
+        fill={`url(#${id ? `${id}_logo_gradient_0` : 'paint0_linear'})`}
+      />
+      <path
+        d="M103.995 145L71.0526 97.7455L86.555 75.0893L135 145H103.995Z"
+        fill={`url(#${id ? `${id}_logo_gradient_1` : 'paint1_linear'})`}
+      />
+      <defs>
+        <linearGradient
+          id={id ? `${id}_logo_gradient_0` : 'paint0_linear'}
+          x1="27.1293"
+          y1="9.0625"
+          x2="69.773"
+          y2="60.4324"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor={fill} />
+          <stop offset="1" stopColor={fill} stopOpacity="0.55" />
+        </linearGradient>
+        <linearGradient
+          id={id ? `${id}_logo_gradient_1` : 'paint1_linear'}
+          x1="111.1"
+          y1="133.996"
+          x2="58.6959"
+          y2="63.4999"
+          gradientUnits="userSpaceOnUse"
+        >
+          <stop stopColor="#6966FF" />
+          <stop offset="1" stopColor="#6966FF" stopOpacity="0.36" />
+        </linearGradient>
+      </defs>
+    </svg>
+  );
+};

 export default LogoShortIcon;
@@ -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>
@@ -1,6 +1,5 @@
@import 'styles/fonts.css';
@import 'styles/text.css';
-@import 'styles/colors.css';
@import 'styles/animations.css';

 :root {
@@ -1,7 +1,11 @@
-import { useMemo, useState } from 'react';
+import { useState } from 'react';
 import styled, { css } from 'styled-components';

-import { NotificationStatus } from '@/constants/notifications';
+import {
+  type Notification,
+  type NotificationDisplayData,
+  NotificationStatus,
+} from '@/constants/notifications';
 import { ButtonShape, ButtonSize } from '@/constants/buttons';
 import { useNotifications } from '@/hooks/useNotifications';
 import { useBreakpoints } from '@/hooks/useBreakpoints';
@@ -13,54 +17,31 @@ import { Toast } from '@/components/Toast';
 import { ToastArea } from '@/components/ToastArea';
 import { ToggleButton } from '@/components/ToggleButton';

+type ElementProps = {
+  notifications: {
+    notification: Notification<any, any>;
+    key: string;
+    displayData: NotificationDisplayData;
+  }[];
+};
+
 type StyleProps = {
  className?: string;
 };

-const MAX_TOASTS = 10;
-
-export const NotificationsToastArea = ({ className }: StyleProps) => {
+export const NotificationStack = ({ notifications, className }: ElementProps & StyleProps) => {
  const [shouldStackNotifications, setshouldStackNotifications] = useState(true);

-  const {
-    notifications,
-    getKey,
-    getDisplayData,
-    markUnseen,
-    markSeen,
-    isMenuOpen,
-    onNotificationAction,
-  } = useNotifications();
-
+  const { markUnseen, markSeen, onNotificationAction } = useNotifications();
  const { isMobile } = useBreakpoints();
-  const notificationMap = useMemo(() => {
-    return (
-      Object.values(notifications)
-        // Sort by time of first trigger
-        .sort(
-          (n1, n2) =>
-            n1.timestamps[NotificationStatus.Triggered]! -
-            n2.timestamps[NotificationStatus.Triggered]!
-        )
-        .map((notification) => ({
-          notification,
-          key: getKey(notification),
-          displayData: getDisplayData(notification),
-        }))
-        .filter(
-          ({ displayData, notification }) =>
-            displayData && notification.status < NotificationStatus.Unseen
-        )
-        .slice(-MAX_TOASTS)
-    );
-  }, [notifications, getKey, getDisplayData]);
-
-  if (isMenuOpen) return null;
-
-  const hasMultipleToasts = notificationMap.length > 1;
+  const hasMultipleToasts = notifications.length > 1;

  return (
-    <StyledToastArea swipeDirection={isMobile ? 'up' : 'right'} className={className}>
+    <StyledToastArea
+      swipeDirection={isMobile ? 'up' : 'right'}
+      className={className}
+      size={notifications.length}
+    >
      {hasMultipleToasts && (
        <StyledToggleButton
          shape={ButtonShape.Pill}
@@ -72,12 +53,12 @@ export const NotificationsToastArea = ({ className }: StyleProps) => {
        </StyledToggleButton>
      )}

-      {notificationMap.map(({ notification, key, displayData }, idx) => (
+      {notifications.map(({ notification, key, displayData }, idx) => (
        <StyledToast
          key={key}
-          isStacked={shouldStackNotifications}
+          isStacked={idx > 0 && shouldStackNotifications}
          isOpen={notification.status < NotificationStatus.Unseen}
-          layer={notificationMap.length - 1 - idx}
+          layer={idx}
          notification={notification}
          slotIcon={displayData.icon}
          slotTitle={displayData.title}
@@ -110,19 +91,13 @@ export const NotificationsToastArea = ({ className }: StyleProps) => {
  );
 };

-const StyledToastArea = styled(ToastArea)`
-  position: absolute;
-  width: min(17.5rem, 100%);
-  inset: 0 0 0 auto;
-
-  padding: 0.75rem 0.75rem 0.75rem 0;
-
-  mask-image: linear-gradient(to left, transparent, white 0.5rem);
-
-  @media ${breakpoints.mobile} {
-    width: 100%;
-    position: fixed;
-  }
+const StyledToastArea = styled(ToastArea)<{ size: number }>`
+  position: relative;
+  ${({ size }) =>
+    size &&
+    css`
+      padding-bottom: calc(${size - 1} * 2px);
+    `}
 `;

 const StyledToast = styled(Toast)<{ isStacked?: boolean; layer: number }>`
@@ -133,7 +108,7 @@ const StyledToast = styled(Toast)<{ isStacked?: boolean; layer: number }>`
          position: absolute;
          left: 0;
          top: calc(${layer} * 2px);
-          right: calc(${layer} * -2px);
+          right: 0;
        `
      : css`
          margin-bottom: 0.75rem;
@@ -145,7 +120,7 @@ const StyledToggleButton = styled(ToggleButton)<{ isPressed: boolean }>`
  pointer-events: auto;
  display: none;
  position: absolute;
-  top: 4px;
+  top: -0.5rem;
  left: calc(50% - 0.75rem);
  --button-width: 2rem;
  --button-height: 1rem;
@@ -0,0 +1,71 @@
+import { useMemo } from 'react';
+import { groupBy } from 'lodash';
+import styled from 'styled-components';
+
+import { breakpoints } from '@/styles';
+import { layoutMixins } from '@/styles/layoutMixins';
+
+import { NotificationStatus } from '@/constants/notifications';
+import { useNotifications } from '@/hooks/useNotifications';
+
+import { NotificationStack } from './NotifcationStack';
+
+type StyleProps = {
+  className?: string;
+};
+
+const MAX_TOASTS = 10;
+
+export const NotificationsToastArea = ({ className }: StyleProps) => {
+  const { notifications, getKey, getDisplayData, isMenuOpen } = useNotifications();
+
+  const notificationMapByType = useMemo(() => {
+    const notificationMap = Object.values(notifications)
+      // Sort by time of first trigger
+      .sort(
+        (n1, n2) =>
+          n1.timestamps[NotificationStatus.Triggered]! -
+          n2.timestamps[NotificationStatus.Triggered]!
+      )
+      .map((notification) => ({
+        notification,
+        key: getKey(notification),
+        displayData: getDisplayData(notification),
+      }))
+      .filter(
+        ({ displayData, notification }) =>
+          displayData && notification.status < NotificationStatus.Unseen
+      )
+      .slice(-MAX_TOASTS);
+    return groupBy(notificationMap, (notification) => notification.displayData?.groupKey);
+  }, [notifications, getKey, getDisplayData]);
+
+  if (isMenuOpen) return null;
+
+  return (
+    <StyledToastArea className={className}>
+      {Object.keys(notificationMapByType).map((groupKey) => (
+        <NotificationStack notifications={notificationMapByType[groupKey]} key={groupKey} />
+      ))}
+    </StyledToastArea>
+  );
+};
+
+const StyledToastArea = styled.div`
+  ${layoutMixins.scrollArea}
+
+  position: absolute;
+  width: min(17.5rem, 100%);
+  inset: 0 0 0 auto;
+
+  padding: 0.75rem 0.75rem 0.75rem 0;
+
+  mask-image: linear-gradient(to left, transparent, white 0.5rem);
+
+  pointer-events: none;
+
+  @media ${breakpoints.mobile} {
+    width: 100%;
+    position: fixed;
+  }
+`;
@@ -56,6 +56,10 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
    this.store = undefined;
  }

+  get isNobleClientConnected(): boolean {
+    return this.nobleClient?.isConnected ?? false;
+  }
+
  setStore(store: RootStore): void {
    this.store = store;
  }
@@ -0,0 +1,20 @@
+import { css } from 'styled-components';
+
+import { type RiskLevels } from '@/constants/abacus';
+
+export const UsageColorFromRiskLevel = (riskLevel: RiskLevels) =>
+  ({
+    low: css`
+      color: var(--color-risk-low);
+    `,
+    medium: css`
+      color: var(--color-risk-medium);
+    `,
+    high: css`
+      color: var(--color-risk-high);
+    `,
+  }[riskLevel.name]);
+
+export const generateFadedColorVariant = (colorHex: string, opacityHex: string) => {
+  return `${colorHex}${opacityHex}`;
+};
@@ -11,16 +11,16 @@ class TestFlags {
    const params = new URLSearchParams(queryParamsString);

    for (const [key, value] of params) {
-      this.queryParams[key] = value;
+      this.queryParams[key.toLowerCase()] = value;
    }
  }

  get displayInitializingMarkets() {
-    return !!this.queryParams.displayInitializingMarkets;
+    return !!this.queryParams.displayinitializingmarkets;
  }

-  get withCCTP() {
-    return !!this.queryParams.withCCTP;
+  get showMobileSignInOption() {
+    return !!this.queryParams.mobilesignin;
  }
 }

@@ -1,11 +1,9 @@
-import Color from 'color';
-import isEmpty from 'lodash/isEmpty';
-
 import { Candle, TradingViewBar, TradingViewSymbol } from '@/constants/candles';
-import { Colors } from '@/styles/colors';

 import { AppTheme } from '@/state/configs';

+import { Themes } from '@/styles/themes';
+
 export const mapCandle = ({
  startedAt,
  open,
@@ -49,42 +47,42 @@ export const getHistorySlice = ({
  return bars.filter(({ time }) => time >= fromMs);
 };

-export const getWidgetOverrides = (theme: AppTheme) => {
-  const colors = Colors[theme];
+export const getWidgetOverrides = (appTheme: AppTheme) => {
+  const theme = Themes[appTheme];

  return {
    overrides: {
-      'paneProperties.background': Color(colors.layer2).hex(),
-      'paneProperties.horzGridProperties.color': Color(colors.layer3).hex(),
-      'paneProperties.vertGridProperties.color': Color(colors.layer3).hex(),
+      'paneProperties.background': theme.layer2,
+      'paneProperties.horzGridProperties.color': theme.layer3,
+      'paneProperties.vertGridProperties.color': theme.layer3,
      'paneProperties.crossHairProperties.style': 1,
      'paneProperties.legendProperties.showBarChange': false,
      'paneProperties.backgroundType': 'solid',

      'mainSeriesProperties.style': 1,
-      'mainSeriesProperties.candleStyle.upColor': Color(colors.positive).hex(),
-      'mainSeriesProperties.candleStyle.borderUpColor': Color(colors.positive).hex(),
-      'mainSeriesProperties.candleStyle.wickUpColor': Color(colors.positive).hex(),
-      'mainSeriesProperties.candleStyle.downColor': Color(colors.negative).hex(),
-      'mainSeriesProperties.candleStyle.borderDownColor': Color(colors.negative).hex(),
-      'mainSeriesProperties.candleStyle.wickDownColor': Color(colors.negative).hex(),
+      'mainSeriesProperties.candleStyle.upColor': theme.positive,
+      'mainSeriesProperties.candleStyle.borderUpColor': theme.positive,
+      'mainSeriesProperties.candleStyle.wickUpColor': theme.positive,
+      'mainSeriesProperties.candleStyle.downColor': theme.negative,
+      'mainSeriesProperties.candleStyle.borderDownColor': theme.negative,
+      'mainSeriesProperties.candleStyle.wickDownColor': theme.negative,
      'mainSeriesProperties.statusViewStyle.symbolTextSource': 'ticker',

-      'scalesProperties.textColor': Color(colors.text1).hex(),
-      'scalesProperties.backgroundColor': Color(colors.layer2).hex(),
-      'scalesProperties.lineColor': Color(colors.layer3).hex(),
+      'scalesProperties.textColor': theme.textPrimary,
+      'scalesProperties.backgroundColor': theme.layer2,
+      'scalesProperties.lineColor': theme.layer3,
    },
    studies_overrides: {
-      'volume.volume.color.0': Color(colors.negative).hex(),
-      'volume.volume.color.1': Color(colors.positive).hex(),
+      'volume.volume.color.0': theme.negative,
+      'volume.volume.color.1': theme.positive,
      'volume.volume ma.visible': false,
-      'relative strength index.plot.color': Color(colors.accent).hex(),
+      'relative strength index.plot.color': theme.accent,
      'relative strength index.plot.linewidth': 1.5,
      'relative strength index.hlines background.color': '#134A9F',
    },
    loading_screen: {
-      backgroundColor: Color(colors.layer2).hex(),
-      foregroundColor: Color(colors.layer2).hex(),
+      backgroundColor: theme.layer2,
+      foregroundColor: theme.layer2,
    },
  };
 };
@@ -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(
@@ -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
@@ -250,8 +259,8 @@ Styled.ProfileIcon = styled.div`
  border-radius: 50%;
  background: linear-gradient(
    135deg,
-    var(--theme-classic-color-yellow) 0%,
-    var(--theme-classic-color-red) 100%
+    ${({ theme }) => theme.profileYellow} 0%,
+    ${({ theme }) => theme.profileRed} 100%
  );
 `;

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

 Styled.RewardsPanel = styled(Panel)`
+  align-self: flex-start;
+  
+  &,
+  > * {
+    height: 100%;
+  }
+
  dl {
    --details-grid-numColumns: 1;
  }
@@ -17,11 +17,14 @@ import { TransferHistoryTable } from '@/views/tables/TransferHistoryTable';
 import { Button } from '@/components/Button';
 import { Icon, IconName } from '@/components/Icon';
 import { NavigationMenu } from '@/components/NavigationMenu';
+import { Tag, TagType } from '@/components/Tag';
 import { WithSidebar } from '@/components/WithSidebar';

-import { getOnboardingState, getSubaccount } from '@/state/accountSelectors';
+import { getOnboardingState, getSubaccount, getTradeInfoNumbers } from '@/state/accountSelectors';
 import { openDialog } from '@/state/dialogs';

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

@@ -42,6 +45,10 @@ export default () => {
  const { freeCollateral } = useSelector(getSubaccount, shallowEqual) || {};
  const { nativeTokenBalance } = useAccountBalance();

+  const { numTotalPositions, numTotalOpenOrders } = useSelector(getTradeInfoNumbers, shallowEqual) || {};
+  const numPositions = shortenNumberForDisplay(numTotalPositions);
+  const numOrders = shortenNumberForDisplay(numTotalOpenOrders);
+
  const usdcBalance = freeCollateral?.current || 0;

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

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

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

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

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

-Styled.Panel = styled(Panel)`
-  --panel-paddingX: 1.5rem;
-
-  @media ${breakpoints.tablet} {
-    --panel-paddingY: 1.5rem;
-    --panel-content-paddingY: 1rem;
-  }
-`;
-
 Styled.Header = styled.div`
  ${layoutMixins.spacedRow}
  gap: 1rem;
@@ -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';

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 import {
+  type AbacusOrderStatuses,
  type SubaccountOrder,
  type SubaccountFill,
  type SubaccountFundingPayment,
@@ -43,7 +44,6 @@ export const getSubaccountBuyingPower = (state: RootState) => state.account.suba
 export const getSubaccountEquity = (state: RootState) => state.account.subaccount?.equity;

 export const getSubaccountHistoricalPnl = (state: RootState) => state.account?.historicalPnl;
-
 /**
 * @param state
 * @returns list of a subaccount's open positions. Each item in the list is an open position in a different market.
@@ -258,6 +258,14 @@ export const getCurrentMarketFundingPayments = createSelector(
    !currentMarketId ? [] : marketFundingPayments[currentMarketId]
 );

+/**
+ * @param state
+ * @returns boolean on whether an order status is considered open
+ */
+const isOpenOrderStatus = (status: AbacusOrderStatuses) => {
+  return status !== AbacusOrderStatus.filled && status !== AbacusOrderStatus.cancelled;
+};
+
 /**
 * @param state
 * @returns Total numbers of the subaccount's open positions, open orders and fills
@@ -266,8 +274,7 @@ export const getTradeInfoNumbers = createSelector(
  [getExistingOpenPositions, getSubaccountOrders, getSubaccountFills, getSubaccountFundingPayments],
  (positions, orders, fills, fundingPayments) => ({
    numTotalPositions: positions?.length,
-    numTotalOpenOrders: orders?.filter((order) => order.status !== AbacusOrderStatus.cancelled)
-      .length,
+    numTotalOpenOrders: orders?.filter((order) => isOpenOrderStatus(order.status)).length,
    numTotalFills: fills?.length,
    numTotalFundingPayments: fundingPayments?.length,
  })
@@ -281,8 +288,7 @@ export const getCurrentMarketTradeInfoNumbers = createSelector(
  [getCurrentMarketOrders, getCurrentMarketFills, getCurrentMarketFundingPayments],
  (marketOrders, marketFills, marketFundingPayments) => {
    return {
-      numOpenOrders: marketOrders?.filter((order) => order.status !== AbacusOrderStatus.cancelled)
-        .length,
+      numOpenOrders: marketOrders?.filter((order) => isOpenOrderStatus(order.status)).length,
      numFills: marketFills?.length,
      numFundingPayments: marketFundingPayments?.length,
    };
@@ -26,7 +26,12 @@ export const calculateFundingRateHistory = createSelector(
    return data.map(({ effectiveAtMilliseconds, rate }) => ({
      time: effectiveAtMilliseconds,
      fundingRate: rate,
-      direction: rate < 0 ? FundingDirection.ToLong : FundingDirection.ToShort,
+      direction:
+        rate === 0
+          ? FundingDirection.None
+          : rate < 0
+          ? FundingDirection.ToLong
+          : FundingDirection.ToShort,
    }));
  }
 );
@@ -1,180 +0,0 @@
-:root {
-  /* Parameters */
-
-  /*
-    --layer-base-hue
-    --layer-base-saturation
-    --layer-base-lightness
-
-    --color-text-0
-    --color-text-1
-    --color-text-2
-
-    --color-accent
-    --color-positive
-    --color-negative
-    --color-success
-    --color-warning
-    --color-error
-    --color-favorite
-  */
-
-  /* Computed: Layers */
-
-  --color-layer-0: hsl(
-    var(--layer-base-hue),
-    var(--layer-base-saturation),
-    calc(var(--layer-base-lightness) - 12%)
-  );
-
-  --color-layer-1: hsl(
-    var(--layer-base-hue),
-    var(--layer-base-saturation),
-    calc(var(--layer-base-lightness) - 8%)
-  );
-
-  --color-layer-2: hsl(
-    var(--layer-base-hue),
-    var(--layer-base-saturation),
-    calc(var(--layer-base-lightness) - 4%)
-  );
-
-  --color-layer-3: hsl(
-    var(--layer-base-hue),
-    var(--layer-base-saturation),
-    var(--layer-base-lightness)
-  );
-
-  --color-layer-4: hsl(
-    var(--layer-base-hue),
-    var(--layer-base-saturation),
-    calc(var(--layer-base-lightness) + 4%)
-  );
-
-  --color-layer-5: hsl(
-    var(--layer-base-hue),
-    calc(var(--layer-base-saturation) - 2%),
-    calc(var(--layer-base-lightness) + 7%)
-  );
-
-  --color-layer-6: hsl(
-    var(--layer-base-hue),
-    calc(var(--layer-base-saturation) - 4%),
-    calc(var(--layer-base-lightness) + 10%)
-  );
-
-  --color-layer-7: hsla(var(--layer-base-hue), 0%, 100%, 0.07);
-
-  --color-gradient-base-0: hsl(
-    var(--layer-base-hue),
-    calc(var(--layer-base-saturation) - 5%),
-    var(--layer-base-lightness)
-  );
-
-  --color-gradient-base-1: hsl(
-    var(--layer-base-hue),
-    calc(var(--layer-base-saturation) - 1%),
-    calc(var(--layer-base-lightness) + 7%)
-  );
-
-  /* Computed: Borders */
-
-  --color-border: var(--color-layer-5);
-  --color-border-white: hsla(0, 0%, 100%, 0.2);
-  --color-border-red: hsla(360, 73%, 61%, 0.2);
-}
-
-/* Theme: Classic (default) */
-:root {
-  /* Constants */
-
-  --theme-classic-hue-purple: 240;
-  --theme-classic-color-green: hsl(159, 67%, 39%);
-  --theme-classic-color-yellow: hsl(36, 100%, 64%);
-  --theme-classic-color-red: hsl(360, 73%, 61%);
-
-  /* Parameters */
-
-  --layer-base-hue: var(--theme-classic-hue-purple);
-  --layer-base-saturation: 20%;
-  --layer-base-lightness: 16%;
-
-  --color-text-0: hsl(245, 11%, 55%);
-  --color-text-1: hsl(244, 18%, 81%);
-  --color-text-2: hsl(240, 43%, 99%);
-
-  --color-accent: hsl(var(--theme-classic-hue-purple), 100%, 70%);
-  --color-positive: var(--theme-classic-color-green);
-  --color-negative: var(--theme-classic-color-red);
-  --color-success: var(--theme-classic-color-green);
-  --color-warning: var(--theme-classic-color-yellow);
-  --color-error: var(--theme-classic-color-red);
-  --color-favorite: var(--theme-classic-color-yellow);
-
-  --color-white: #fff;
-  --color-black: #000;
-
-  --color-gradient-positive: hsla(158, 49%, 48%, 0.16);
-  --color-gradient-negative: hsla(0, 100%, 66%, 0.16);
-  --color-accent-faded: hsla(var(--theme-classic-hue-purple), 100%, 70%, 0.16);
-
-  --color-risk-low: var(--theme-classic-color-green);
-  --color-risk-medium: var(--theme-classic-color-yellow);
-  --color-risk-high: var(--theme-classic-color-red);
-}
-
-/* Theme: Light */
-:root.theme-light {
-  /* Constants */
-
-  --theme-light-hue-purple: 234;
-  --theme-light-color-green: hsl(159, 67%, 39%);
-  --theme-light-color-yellow: hsl(36, 100%, 64%);
-  --theme-light-color-red: hsl(360, 73%, 61%);
-
-  /* Parameters */
-
-  --layer-base-hue: var(--theme-light-hue-purple);
-  --layer-base-saturation: 0%;
-  --layer-base-lightness: 86%;
-
-  --color-text-0: hsl(0, 0%, 55%);
-  --color-text-1: hsl(0, 0%, 40%);
-  --color-text-2: hsl(0, 0%, 5%);
-
-  --color-accent: hsl(var(--theme-light-hue-purple), 100%, 70%);
-  --color-positive: var(--theme-light-color-green);
-  --color-negative: var(--theme-light-color-red);
-  --color-success: var(--theme-light-color-green);
-  --color-warning: var(--theme-light-color-yellow);
-  --color-error: var(--theme-light-color-red);
-  --color-favorite: var(--theme-light-color-yellow);
-}
-
-/* Theme: Dark */
-:root.theme-dark {
-  /* Constants */
-
-  --theme-dark-hue-purple: 240;
-  --theme-dark-color-green: hsl(159, 67%, 39%);
-  --theme-dark-color-yellow: hsl(36, 100%, 64%);
-  --theme-dark-color-red: hsl(360, 73%, 61%);
-
-  /* Parameters */
-
-  --layer-base-hue: 0;
-  --layer-base-saturation: 0%;
-  --layer-base-lightness: 16%;
-
-  --color-text-0: hsl(0, 0%, 47%);
-  --color-text-1: hsl(0, 0%, 67%);
-  --color-text-2: hsl(0, 0%, 100%);
-
-  --color-accent: hsl(var(--theme-dark-hue-purple), 100%, 70%);
-  --color-positive: var(--theme-dark-color-green);
-  --color-negative: var(--theme-dark-color-red);
-  --color-success: var(--theme-dark-color-green);
-  --color-warning: var(--theme-dark-color-yellow);
-  --color-error: var(--theme-dark-color-red);
-  --color-favorite: var(--theme-dark-color-yellow);
-}
@@ -1,125 +0,0 @@
-import { css } from 'styled-components';
-
-import { type RiskLevels } from '@/constants/abacus';
-
-import { AppTheme } from '@/state/configs';
-
-const BaseElements = {
-  [AppTheme.Classic]: {
-    hue: 240,
-    saturation: 20,
-    lightness: 16,
-  },
-  [AppTheme.Dark]: {
-    hue: 0,
-    saturation: 0,
-    lightness: 16,
-  },
-  [AppTheme.Light]: {
-    hue: 234,
-    saturation: 0,
-    lightness: 86,
-  },
-};
-
-const LayerColors = ({ theme }: { theme: AppTheme }) => {
-  const { hue, saturation, lightness } = BaseElements[theme];
-
-  return {
-    layer0: `hsl(${hue}, ${saturation}%, ${lightness - 12}%)`,
-    layer1: `hsl(${hue}, ${saturation}%, ${lightness - 8}%)`,
-    layer2: `hsl(${hue}, ${saturation}%, ${lightness - 4}%)`,
-    layer3: `hsl(${hue}, ${saturation}%, ${lightness}%)`,
-    layer4: `hsl(${hue}, ${saturation}%, ${lightness + 4}%)`,
-    layer5: `hsl(${hue}, ${saturation - 2}%, ${lightness + 7}%)`,
-    layer6: `hsl(${hue}, ${saturation - 4}%, ${lightness + 10}%)`,
-  };
-};
-
-const AccentColor = ({ theme }: { theme: AppTheme }) => {
-  const purpleHue = {
-    Classic: 240,
-    Dark: 240,
-    Light: 234,
-  }[theme];
-
-  return {
-    accent: `hsl(${purpleHue}, 100%, 70%)`,
-  };
-};
-
-export const Colors = {
-  [AppTheme.Classic]: {
-    ...LayerColors({ theme: AppTheme.Classic }),
-    text0: 'hsl(245, 11%, 55%)',
-    text1: 'hsl(244, 18%, 81%)',
-    text2: 'hsl(240, 43%, 99%)',
-
-    ...AccentColor({ theme: AppTheme.Classic }),
-    green: 'hsl(159, 67%, 39%)',
-    yellow: 'hsl(36, 100%, 64%)',
-    red: 'hsl(360, 73%, 61%)',
-
-    positive: 'hsl(159, 67%, 39%)',
-    negative: 'hsl(360, 73%, 61%)',
-
-    success: 'hsl(159, 67%, 39%)',
-    warning: 'hsl(36, 100%, 64%)',
-    error: 'hsl(360, 73%, 61%)',
-
-    favorite: 'hsl(36, 100%, 64%)',
-  },
-  [AppTheme.Dark]: {
-    ...LayerColors({ theme: AppTheme.Dark }),
-    text0: 'hsl(0, 0%, 47%)',
-    text1: 'hsl(0, 0%, 67%)',
-    text2: 'hsl(0, 0%, 100%)',
-
-    ...AccentColor({ theme: AppTheme.Dark }),
-    green: 'hsl(159, 67%, 39%)',
-    yellow: 'hsl(36, 100%, 64%)',
-    red: 'hsl(360, 73%, 61%)',
-
-    positive: 'hsl(159, 67%, 39%)',
-    negative: 'hsl(360, 73%, 61%)',
-
-    success: 'hsl(159, 67%, 39%)',
-    warning: 'hsl(36, 100%, 64%)',
-    error: 'hsl(360, 73%, 61%)',
-
-    favorite: 'hsl(36, 100%, 64%)',
-  },
-  [AppTheme.Light]: {
-    ...LayerColors({ theme: AppTheme.Light }),
-    text0: 'hsl(0, 0%, 55%)',
-    text1: 'hsl(0, 0%, 40%)',
-    text2: 'hsl(0, 0%, 5%)',
-
-    ...AccentColor({ theme: AppTheme.Light }),
-    green: 'hsl(159, 67%, 39%)',
-    yellow: 'hsl(36, 100%, 64%)',
-    red: 'hsl(360, 73%, 61%)',
-
-    positive: 'hsl(159, 67%, 39%)',
-    negative: 'hsl(360, 73%, 61%)',
-
-    success: 'hsl(159, 67%, 39%)',
-    warning: 'hsl(36, 100%, 64%)',
-    error: 'hsl(360, 73%, 61%)',
-
-    favorite: 'hsl(36, 100%, 64%)',
-  },
-};
-
-export const UsageColorFromRiskLevel = (riskLevel: RiskLevels) =>
-  ({
-    low: css`
-      color: var(--color-risk-low);
-    `,
-    medium: css`
-      color: var(--color-risk-medium);
-    `,
-    high: css`
-      color: var(--color-risk-high);
-    `,
-  }[riskLevel.name]);
@@ -21,7 +21,7 @@ export const formMixins: Record<
    --input-radius: 0.5em;
    --input-height: var(--form-input-height);
    --input-width: 100%;
-    --input-backgroundColor: var(--color-layer-4);
+    --input-backgroundColor: ${({ theme }) => theme.inputBackground};
    --input-borderColor: var(--color-layer-6);

    ${layoutMixins.row}
@@ -0,0 +1,42 @@
+import { createGlobalStyle } from 'styled-components';
+
+export const GlobalStyle = createGlobalStyle`
+  :root {
+    --color-layer-0: ${({ theme }) => theme.layer0};
+    --color-layer-1: ${({ theme }) => theme.layer1};
+    --color-layer-2: ${({ theme }) => theme.layer2};
+    --color-layer-3: ${({ theme }) => theme.layer3};
+    --color-layer-4: ${({ theme }) => theme.layer4};
+    --color-layer-5: ${({ theme }) => theme.layer5};
+    --color-layer-6: ${({ theme }) => theme.layer6};
+    --color-layer-7: ${({ theme }) => theme.layer7};
+
+    --color-border: ${({ theme }) => theme.borderDefault};
+    --color-border-white: ${({ theme }) => theme.borderButton};
+    --color-border-red: ${({ theme }) => theme.borderDestructive};
+
+    --color-text-0: ${({ theme }) => theme.textTertiary};
+    --color-text-1: ${({ theme }) => theme.textSecondary};
+    --color-text-2: ${({ theme }) => theme.textPrimary};
+
+    --color-gradient-base-0: ${({ theme }) => theme.gradientBase0};
+    --color-gradient-base-1: ${({ theme }) => theme.gradientBase1};
+
+    --color-accent: ${({ theme }) => theme.accent};
+    --color-accent-faded: ${({ theme }) => theme.accentFaded};
+    --color-favorite: ${({ theme }) => theme.favorite};
+
+    --color-success: ${({ theme }) => theme.success};
+    --color-warning: ${({ theme }) => theme.warning};
+    --color-error: ${({ theme }) => theme.error};
+
+    --color-positive: ${({ theme }) => theme.positive};
+    --color-negative: ${({ theme }) => theme.negative};
+    --color-gradient-positive: ${({ theme }) => theme.positiveFaded};
+    --color-gradient-negative: ${({ theme }) => theme.negativeFaded};
+
+    --color-risk-low: ${({ theme }) => theme.riskLow};
+    --color-risk-medium: ${({ theme }) => theme.riskMedium};
+    --color-risk-high: ${({ theme }) => theme.riskHigh};
+  }
+`;
@@ -0,0 +1,157 @@
+import { AppTheme } from '@/state/configs';
+import { ThemeColors } from '@/constants/styles/colors';
+import { ColorToken, OpacityToken } from '@/constants/styles/base';
+import { generateFadedColorVariant } from '@/lib/styles';
+
+const ClassicTheme: ThemeColors = {
+  layer0: ColorToken.GrayBlue7,
+  layer1: ColorToken.GrayBlue6,
+  layer2: ColorToken.GrayBlue5,
+  layer3: ColorToken.GrayBlue4,
+  layer4: ColorToken.GrayBlue3,
+  layer5: ColorToken.GrayBlue2,
+  layer6: ColorToken.GrayBlue1,
+  layer7: ColorToken.GrayBlue0,
+
+  borderDefault: ColorToken.GrayBlue2,
+  borderDestructive: generateFadedColorVariant(ColorToken.Red2, OpacityToken.Opacity20),
+  borderButton: generateFadedColorVariant(ColorToken.White, OpacityToken.Opacity20),
+
+  textPrimary: ColorToken.LightGray2,
+  textSecondary: ColorToken.GrayPurple1,
+  textTertiary: ColorToken.GrayPurple2,
+
+  gradientBase0: ColorToken.DarkGray9,
+  gradientBase1: ColorToken.GrayBlue2,
+
+  accent: ColorToken.Purple1,
+  accentFaded: generateFadedColorVariant(ColorToken.Purple1, OpacityToken.Opacity16),
+  favorite: ColorToken.Yellow0,
+
+  success: ColorToken.Green1,
+  warning: ColorToken.Yellow0,
+  error: ColorToken.Red2,
+
+  positive: ColorToken.Green1,
+  negative: ColorToken.Red2,
+  positiveFaded: generateFadedColorVariant(ColorToken.Green1, OpacityToken.Opacity16),
+  negativeFaded: generateFadedColorVariant(ColorToken.Red2, OpacityToken.Opacity16),
+
+  riskLow: ColorToken.Green1,
+  riskMedium: ColorToken.Yellow0,
+  riskHigh: ColorToken.Red2,
+
+  logoFill: ColorToken.White,
+  profileYellow: ColorToken.Yellow1,
+  profileRed: ColorToken.Red2,
+
+  inputBackground: ColorToken.GrayBlue3,
+  popoverBackground: generateFadedColorVariant(ColorToken.GrayBlue4, OpacityToken.Opacity90),
+  switchThumbActiveBackground: ColorToken.White,
+  toggleBackground: ColorToken.GrayBlue3,
+  tooltipBackground: generateFadedColorVariant(ColorToken.GrayBlue3, OpacityToken.Opacity66),
+};
+
+const DarkTheme: ThemeColors = {
+  layer0: ColorToken.Black,
+  layer1: ColorToken.DarkGray11,
+  layer2: ColorToken.DarkGray13,
+  layer3: ColorToken.DarkGray10,
+  layer4: ColorToken.DarkGray6,
+  layer5: ColorToken.DarkGray5,
+  layer6: ColorToken.DarkGray4,
+  layer7: ColorToken.DarkGray2,
+
+  borderDefault: ColorToken.DarkGray4,
+  borderDestructive: generateFadedColorVariant(ColorToken.Red0, OpacityToken.Opacity20),
+  borderButton: generateFadedColorVariant(ColorToken.White, OpacityToken.Opacity20),
+
+  textPrimary: ColorToken.LightGray0,
+  textSecondary: ColorToken.MediumGray0,
+  textTertiary: ColorToken.DarkGray0,
+
+  gradientBase0: ColorToken.DarkGray8,
+  gradientBase1: ColorToken.DarkGray5,
+
+  accent: ColorToken.Purple0,
+  accentFaded: generateFadedColorVariant(ColorToken.Purple0, OpacityToken.Opacity16),
+  favorite: ColorToken.Yellow0,
+
+  success: ColorToken.Green0,
+  warning: ColorToken.Yellow0,
+  error: ColorToken.Red0,
+
+  positive: ColorToken.Green0,
+  negative: ColorToken.Red0,
+  positiveFaded: generateFadedColorVariant(ColorToken.Green0, OpacityToken.Opacity16),
+  negativeFaded: generateFadedColorVariant(ColorToken.Red0, OpacityToken.Opacity16),
+
+  riskLow: ColorToken.Green0,
+  riskMedium: ColorToken.Yellow0,
+  riskHigh: ColorToken.Red0,
+
+  logoFill: ColorToken.White,
+  profileYellow: ColorToken.Yellow1,
+  profileRed: ColorToken.Red2,
+
+  inputBackground: ColorToken.DarkGray6,
+  popoverBackground: generateFadedColorVariant(ColorToken.DarkGray8, OpacityToken.Opacity90),
+  switchThumbActiveBackground: ColorToken.White,
+  toggleBackground: ColorToken.DarkGray6,
+  tooltipBackground: generateFadedColorVariant(ColorToken.DarkGray6, OpacityToken.Opacity66),
+};
+
+const LightTheme: ThemeColors = {
+  layer0: ColorToken.White,
+  layer1: ColorToken.LightGray6,
+  layer2: ColorToken.White,
+  layer3: ColorToken.LightGray1,
+  layer4: ColorToken.White,
+  layer5: ColorToken.LightGray4,
+  layer6: ColorToken.LightGray9,
+  layer7: ColorToken.MediumGray1,
+
+  borderDefault: ColorToken.LightGray10,
+  borderDestructive: generateFadedColorVariant(ColorToken.Red1, OpacityToken.Opacity20),
+  borderButton: generateFadedColorVariant(ColorToken.Black, OpacityToken.Opacity20),
+
+  textPrimary: ColorToken.DarkGray12,
+  textSecondary: ColorToken.DarkGray3,
+  textTertiary: ColorToken.DarkGray1,
+
+  gradientBase0: ColorToken.LightGray8,
+  gradientBase1: ColorToken.LightGray5,
+
+  accent: ColorToken.Purple0,
+  accentFaded: generateFadedColorVariant(ColorToken.Purple0, OpacityToken.Opacity16),
+  favorite: ColorToken.Yellow0,
+
+  success: ColorToken.Green2,
+  warning: ColorToken.Yellow0,
+  error: ColorToken.Red1,
+
+  positive: ColorToken.Green2,
+  negative: ColorToken.Red1,
+  positiveFaded: generateFadedColorVariant(ColorToken.Green2, OpacityToken.Opacity16),
+  negativeFaded: generateFadedColorVariant(ColorToken.Red1, OpacityToken.Opacity16),
+
+  riskLow: ColorToken.Green2,
+  riskMedium: ColorToken.Yellow0,
+  riskHigh: ColorToken.Red1,
+
+  logoFill: ColorToken.Black,
+  profileYellow: ColorToken.Yellow1,
+  profileRed: ColorToken.Red2,
+
+  inputBackground: ColorToken.White,
+  popoverBackground: generateFadedColorVariant(ColorToken.LightGray8, OpacityToken.Opacity90),
+  switchThumbActiveBackground: ColorToken.White,
+  toggleBackground: ColorToken.LightGray4,
+  tooltipBackground: generateFadedColorVariant(ColorToken.LightGray7, OpacityToken.Opacity66),
+};
+
+export const Themes = {
+  [AppTheme.Classic]: ClassicTheme,
+  [AppTheme.Dark]: DarkTheme,
+  [AppTheme.Light]: LightTheme,
+};
@@ -29,7 +29,6 @@ export const MarketDetails: React.FC = () => {
  if (!configs) return null;

  const {
-    basePositionNotional,
    tickSize,
    stepSize,
    initialMarginFraction,
@@ -114,17 +113,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);

@@ -235,6 +235,10 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
          throw new Error('Missing request payload');
        }

+        if (isCctp && !abacusStateManager.chainTransactions.isNobleClientConnected) {
+          throw new Error('Noble RPC endpoint unaccessible');
+        }
+
        setIsLoading(true);

        await validateTokenApproval();
@@ -108,20 +108,6 @@ export const DepositButtonAndReceipt = ({

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

-  const { toAmount, toAmountMin } = useMemo(() => {
-    if (isCctp) {
-      return {
-        toAmount: summary?.toAmount,
-        toAmountMin: summary?.toAmountMin,
-      };
-    } else {
-      return {
-        toAmount: summary?.toAmount && formatUnits(BigInt(summary.toAmount), usdcDecimals),
-        toAmountMin: summary?.toAmountMin && formatUnits(BigInt(summary.toAmountMin), usdcDecimals),
-      };
-    }
-  }, [isCctp, summary]);
-
  const submitButtonReceipt = [
    {
      key: 'expected-deposit-amount',
@@ -130,7 +116,7 @@ export const DepositButtonAndReceipt = ({
          {stringGetter({ key: STRING_KEYS.EXPECTED_DEPOSIT_AMOUNT })} <Tag>{usdcLabel}</Tag>
        </span>
      ),
-      value: <Output type={OutputType.Fiat} fractionDigits={TOKEN_DECIMALS} value={toAmount} />,
+      value: <Output type={OutputType.Fiat} fractionDigits={TOKEN_DECIMALS} value={summary?.toAmount} />,
      subitems: [
        {
          key: 'minimum-deposit-amount',
@@ -140,7 +126,7 @@ export const DepositButtonAndReceipt = ({
            </span>
          ),
          value: (
-            <Output type={OutputType.Fiat} fractionDigits={TOKEN_DECIMALS} value={toAmountMin} />
+            <Output type={OutputType.Fiat} fractionDigits={TOKEN_DECIMALS} value={summary?.toAmountMin} />
          ),
          tooltip: 'minimum-deposit-amount',
        },
@@ -34,6 +34,7 @@ export const TokenSelectMenu = ({ selectedToken, onSelectToken }: ElementProps)
      selectedToken && onSelectToken(selectedToken);
    },
    slotBefore: <Styled.Img src={token.iconUrl} alt="" />,
+    tag: resources?.tokenResources?.get(token.type)?.symbol,
  }));

  return (
@@ -148,6 +148,10 @@ export const WithdrawForm = () => {
          throw new Error('Invalid request payload');
        }

+        if (isCctp && !abacusStateManager.chainTransactions.isNobleClientConnected) {
+          throw new Error('Noble RPC endpoint unaccessible');
+        }
+
        setIsLoading(true);
        setError(undefined);

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

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

@@ -85,26 +85,6 @@ export const WithdrawButtonAndReceipt = ({

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

-  const { toAmount, toAmountMin } = useMemo(() => {
-    if (isCctp) {
-      return {
-        toAmount: summary?.toAmount,
-        toAmountMin: summary?.toAmountMin,
-      };
-    } else {
-      return {
-        toAmount:
-          summary?.toAmount &&
-          withdrawToken?.decimals &&
-          formatUnits(BigInt(summary.toAmount), withdrawToken.decimals),
-        toAmountMin:
-          summary?.toAmountMin &&
-          withdrawToken?.decimals &&
-          formatUnits(BigInt(summary.toAmountMin), withdrawToken.decimals),
-      };
-    }
-  }, [isCctp, summary, withdrawToken]);
-
  const submitButtonReceipt = [
    {
      key: 'total-fees',
@@ -153,7 +133,7 @@ export const WithdrawButtonAndReceipt = ({
          {withdrawToken && <Tag>{withdrawToken?.symbol}</Tag>}
        </span>
      ),
-      value: <Output type={OutputType.Asset} value={toAmount} fractionDigits={TOKEN_DECIMALS} />,
+      value: <Output type={OutputType.Asset} value={summary?.toAmount} fractionDigits={TOKEN_DECIMALS} />,
      subitems: [
        {
          key: 'minimum-amount-received',
@@ -164,7 +144,7 @@ export const WithdrawButtonAndReceipt = ({
            </span>
          ),
          value: (
-            <Output type={OutputType.Asset} value={toAmountMin} fractionDigits={TOKEN_DECIMALS} />
+            <Output type={OutputType.Asset} value={summary?.toAmountMin} fractionDigits={TOKEN_DECIMALS} />
          ),
          tooltip: 'minimum-amount-received',
        },
@@ -44,6 +44,7 @@ export const TradeSideToggle = memo(() => {
 const ToggleContainer = styled(ToggleGroup)<{ value: OrderSide }>`
  --toggle-radius: 0.5em;
  --toggle-color: var(--color-negative);
+  --toggle-background: ${({ theme }) => theme.toggleBackground};

  ${({ value }) =>
    value === OrderSide.BUY &&
@@ -52,7 +53,7 @@ const ToggleContainer = styled(ToggleGroup)<{ value: OrderSide }>`
    `}

  border-radius: var(--toggle-radius);
-  background-color: var(--color-layer-4);
+  background-color: var(--toggle-background);
  position: relative;

  > button {
@@ -10,6 +10,9 @@ import { STRING_KEYS, StringGetterFunction, TOOLTIP_STRING_KEYS } from '@/consta
 import { isMainnet } from '@/constants/networks';
 import { DydxChainAsset, wallets } from '@/constants/wallets';

+import { layoutMixins } from '@/styles/layoutMixins';
+import { headerMixins } from '@/styles/headerMixins';
+
 import {
  useAccounts,
  useBreakpoints,
@@ -35,10 +38,8 @@ import { getOnboardingState, getSubaccount } from '@/state/accountSelectors';

 import { isTruthy } from '@/lib/isTruthy';
 import { truncateAddress } from '@/lib/wallet';
-
-import { layoutMixins } from '@/styles/layoutMixins';
-import { headerMixins } from '@/styles/headerMixins';
 import { MustBigNumber } from '@/lib/numbers';
+import { testFlags } from '@/lib/testFlags';

 export const AccountMenu = () => {
  const stringGetter = useStringGetter();
@@ -178,7 +179,7 @@ export const AccountMenu = () => {
        },
        ...(onboardingState === OnboardingState.AccountConnected && hdKey
          ? [
-              !isMainnet && {
+              (!isMainnet || testFlags.showMobileSignInOption) && {
                value: 'MobileQrSignIn',
                icon: <Icon iconName={IconName.Qr} />,
                label: stringGetter({ key: STRING_KEYS.TITLE_SIGN_INTO_MOBILE }),
@@ -0,0 +1,78 @@
+import styled, { type AnyStyledComponent } from 'styled-components';
+
+import { STRING_KEYS } from '@/constants/localization';
+import { useStringGetter } from '@/hooks';
+
+import { Details } from '@/components/Details';
+import { Notification, NotificationProps } from '@/components/Notification';
+import { Output, OutputType } from '@/components/Output';
+import { Icon, IconName } from '@/components/Icon';
+
+type ElementProps = {
+  data: {
+    BLOCK_REWARD_AMOUNT: string;
+    BLOCK_REWARD_HEIGHT: string;
+    BLOCK_REWARD_TIME_MILLISECONDS: string;
+    TOKEN_NAME: string;
+  };
+};
+
+export type BlockRewardNotificationProps = NotificationProps & ElementProps;
+
+export const BlockRewardNotification = ({
+  isToast,
+  data,
+  notification,
+}: BlockRewardNotificationProps) => {
+  const stringGetter = useStringGetter();
+  const { BLOCK_REWARD_AMOUNT, TOKEN_NAME } = data;
+
+  return (
+    <Styled.Notification
+      isToast={isToast}
+      notification={notification}
+      slotIcon={<Icon iconName={IconName.RewardStar} />}
+      slotTitle={stringGetter({ key: STRING_KEYS.TRADING_REWARD_RECEIVED })}
+      slotCustomContent={
+        <Styled.Details
+          items={[
+            {
+              key: 'block_reward',
+              label: stringGetter({ key: STRING_KEYS.BLOCK_REWARD }),
+              value: (
+                <Styled.Output
+                  type={OutputType.Asset}
+                  value={BLOCK_REWARD_AMOUNT}
+                  tag={TOKEN_NAME}
+                />
+              ),
+            },
+          ]}
+        />
+      }
+    />
+  );
+};
+
+const Styled: Record<string, AnyStyledComponent> = {};
+
+Styled.Details = styled(Details)`
+  --details-item-height: 1.5rem;
+
+  dd {
+    color: var(--color-text-2);
+  }
+`;
+
+Styled.Notification = styled(Notification)`
+  background-image: url('/dots-background-2.svg');
+  background-size: cover;
+`;
+
+Styled.Output = styled(Output)`
+  &:before {
+    content: '+';
+    color: var(--color-positive);
+    margin-right: 0.5ch;
+  }
+`;
Author	SHA1	Message	Date
moo-onthelawn	87731097b8	TRCL-3497 Use color tokens in app + tradingView widget (#240 ) * update to use tokens, small fixes * fix eol lint * move usage style helper to lib/styles * move files, fix text colors * fix logo in light mode * remove colors.css file * small lint things * add transparency to button + destructive borders	2024-01-24 16:40:25 -05:00
mulan xia	1e9209028e	fix lint error	2024-01-22 16:42:19 -05:00
mulan xia	2861286bdb	introduce tokens file + theme type	2024-01-22 16:28:37 -05:00
Bill	e93850484b	CCTP deposit/withdraw to throw error if nobleClient is not initialized (#215 ) * CCTP deposit/withdraw to throw error if nobleClient is not initialized * update error str	2024-01-22 09:55:26 -08:00
aleka	521b6d6135	test flag for sign in option (#236 )	2024-01-17 16:22:17 -08:00
aleka	94772bf4dc	bump abacus to remove base position notional (#235 )	2024-01-17 15:52:02 -08:00
Adam Fraser	149f21e7e0	Add trailing blocks to NetworkStatus analytics event (#230 )	2024-01-17 10:34:04 -05:00
aleka	0a3ef3a7ab	bump abacus (#233 )	2024-01-17 10:33:29 -05:00
Bill	fef9935883	Support notification for trading rewards (#224 ) * Support notification for trading rewards * bump abacus * Stack notifications based on notification type * address comments	2024-01-16 10:19:48 -08:00
Bill	c7a5b706e1	Fix toAmount/toAmountMin on withdraw (#232 )	2024-01-15 10:31:23 -08:00
moo-onthelawn	f304bb069a	TRCL-1979 Show open positions / orders in portfolio sidebar (#228 ) * add tags for open orders + positions * clean up, use new num selector function * update logic for open orders	2024-01-12 14:44:09 -05:00
Bill	ad6aa1af49	Bump abacus, fix onboarding toAmount (#229 )	2024-01-11 11:52:02 -08:00
Jared Vu	55b2c3fb4a	Update Funding Chart Tooltip (#225 ) * 🚧 depth chart * ✨ Fixed types and shortened FundingRateTooltip * 💄 update depth chart color scale to use css var * 💄 use layer-6 instead of text-1 * 🌐 Add localization, fix nits	2024-01-11 10:31:53 -08:00
moo-onthelawn	83bcde00eb	TRCL-1623 Update Positions icon in nav sidebar (#226 ) * update icon * remove unused cube icon	2024-01-11 11:02:23 -05:00
Jared Vu	e8024b9337	Add Sepolia (#222 )	2024-01-09 16:35:19 -08:00
Jared Vu	8280e512bc	Remove BasePositionNotional DetailItem (#223 )	2024-01-09 14:01:38 -08:00
aleka	b2234cb969	reorganize rewards vs. profile, update panel and accordion styling (#221 ) * reorganize rewards vs. profile, update panel and accordion styling * feedback	2024-01-09 16:57:02 -05:00
Bill	4bcb1f64ac	Add Kava support for onboarding, and add token symbol to token select (#220 ) * Add Kava support for onboarding, and add token symbol to token select * bump abacus	2024-01-09 11:51:31 -08:00
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
				`@@ -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>