Merge branch 'main' into canvas-orderbook

Merge remote-tracking branch 'origin/main' into canvas-orderbook
Animation attempt
2024-01-03 13:44:50 -08:00 · 2023-12-06 10:09:10 -08:00 · 2023-11-28 15:44:01 -08:00 · 2023-11-27 14:58:45 -08:00 · 2023-11-27 13:26:26 -08:00 · 2023-11-27 13:20:52 -08:00
62 changed files with 1728 additions and 1591 deletions
@@ -33,15 +33,15 @@
  "packageManager": "pnpm@8.6.6",
  "dependencies": {
    "@0xsquid/sdk": "^1.10.0",
-    "@cosmjs/amino": "^0.32.1",
-    "@cosmjs/crypto": "^0.32.1",
-    "@cosmjs/encoding": "^0.32.1",
-    "@cosmjs/proto-signing": "^0.32.1",
-    "@cosmjs/stargate": "^0.32.1",
-    "@cosmjs/tendermint-rpc": "^0.32.1",
-    "@dydxprotocol/v4-abacus": "^1.2.5",
-    "@dydxprotocol/v4-client-js": "^1.0.14",
-    "@dydxprotocol/v4-localization": "^1.1.11",
+    "@cosmjs/amino": "^0.31.0",
+    "@cosmjs/crypto": "^0.31.0",
+    "@cosmjs/encoding": "^0.31.0",
+    "@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-client-js": "^1.0.11",
+    "@dydxprotocol/v4-localization": "^1.1.5",
    "@ethersproject/providers": "^5.7.2",
    "@js-joda/core": "^5.5.3",
    "@radix-ui/react-accordion": "^1.1.2",
@@ -111,7 +111,7 @@
    "reselect": "^4.1.8",
    "styled-components": "^5.3.11",
    "use-latest": "^1.2.1",
-    "viem": "^1.20.0",
+    "viem": "^1.12.2",
    "wagmi": "^1.4.12"
  },
  "devDependencies": {
@@ -1,40 +1,36 @@
 lockfileVersion: '6.0'

-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false
-
 dependencies:
  '@0xsquid/sdk':
    specifier: ^1.10.0
    version: 1.10.0
  '@cosmjs/amino':
-    specifier: ^0.32.1
-    version: 0.32.2
+    specifier: ^0.31.0
+    version: 0.31.0
  '@cosmjs/crypto':
-    specifier: ^0.32.1
-    version: 0.32.2
+    specifier: ^0.31.0
+    version: 0.31.0
  '@cosmjs/encoding':
-    specifier: ^0.32.1
-    version: 0.32.2
+    specifier: ^0.31.0
+    version: 0.31.0
  '@cosmjs/proto-signing':
-    specifier: ^0.32.1
-    version: 0.32.2
+    specifier: ^0.31.0
+    version: 0.31.0
  '@cosmjs/stargate':
-    specifier: ^0.32.1
-    version: 0.32.2
+    specifier: ^0.31.0
+    version: 0.31.0
  '@cosmjs/tendermint-rpc':
-    specifier: ^0.32.1
-    version: 0.32.2
+    specifier: ^0.31.0
+    version: 0.31.0
  '@dydxprotocol/v4-abacus':
-    specifier: ^1.2.5
-    version: 1.2.5
+    specifier: ^1.1.32
+    version: 1.1.32
  '@dydxprotocol/v4-client-js':
-    specifier: ^1.0.14
-    version: 1.0.14
+    specifier: ^1.0.11
+    version: 1.0.11
  '@dydxprotocol/v4-localization':
-    specifier: ^1.1.11
-    version: 1.1.11
+    specifier: ^1.1.5
+    version: 1.1.5
  '@ethersproject/providers':
    specifier: ^5.7.2
    version: 5.7.2
@@ -243,11 +239,11 @@ dependencies:
    specifier: ^1.2.1
    version: 1.2.1(@types/react@18.2.14)(react@18.2.0)
  viem:
-    specifier: ^1.20.0
-    version: 1.20.0(typescript@5.1.3)
+    specifier: ^1.12.2
+    version: 1.12.2(typescript@5.1.3)
  wagmi:
    specifier: ^1.4.12
-    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)
+    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)

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

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

+  /@adraffy/ens-normalize@1.9.4:
+    resolution: {integrity: sha512-UK0bHA7hh9cR39V+4gl2/NnBBjoXIxkuWAPCaY4X7fbH4L/azIi7ilWOCjMUYfpJgraLUAqkRi2BqrjME8Rynw==}
+    dev: false
+
  /@ampproject/remapping@2.2.1:
    resolution: {integrity: sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==}
    engines: {node: '>=6.0.0'}
@@ -688,15 +684,6 @@ packages:
      '@cosmjs/utils': 0.31.0
    dev: false

-  /@cosmjs/amino@0.32.2:
-    resolution: {integrity: sha512-lcK5RCVm4OfdAooxKcF2+NwaDVVpghOq6o/A40c2mHXDUzUoRZ33VAHjVJ9Me6vOFxshrw/XEFn1f4KObntjYA==}
-    dependencies:
-      '@cosmjs/crypto': 0.32.2
-      '@cosmjs/encoding': 0.32.2
-      '@cosmjs/math': 0.32.2
-      '@cosmjs/utils': 0.32.2
-    dev: false
-
  /@cosmjs/cosmwasm-stargate@0.30.1:
    resolution: {integrity: sha512-W/6SLUCJAJGBN+sJLXouLZikVgmqDd9LCdlMzQaxczcCHTWeJAmRvOiZGSZaSy3shw/JN1qc6g6PKpvTVgj10A==}
    dependencies:
@@ -750,19 +737,7 @@ packages:
      '@cosmjs/encoding': 0.31.0
      '@cosmjs/math': 0.31.0
      '@cosmjs/utils': 0.31.0
-      '@noble/hashes': 1.3.3
-      bn.js: 5.2.1
-      elliptic: 6.5.4
-      libsodium-wrappers-sumo: 0.7.11
-    dev: false
-
-  /@cosmjs/crypto@0.32.2:
-    resolution: {integrity: sha512-RuxrYKzhrPF9g6NmU7VEq++Hn1vZJjqqJpZ9Tmw9lOYOV8BUsv+j/0BE86kmWi7xVJ7EwxiuxYsKuM8IR18CIA==}
-    dependencies:
-      '@cosmjs/encoding': 0.32.2
-      '@cosmjs/math': 0.32.2
-      '@cosmjs/utils': 0.32.2
-      '@noble/hashes': 1.3.3
+      '@noble/hashes': 1.3.1
      bn.js: 5.2.1
      elliptic: 6.5.4
      libsodium-wrappers-sumo: 0.7.11
@@ -792,8 +767,8 @@ packages:
      readonly-date: 1.0.0
    dev: false

-  /@cosmjs/encoding@0.32.2:
-    resolution: {integrity: sha512-WX7m1wLpA9V/zH0zRcz4EmgZdAv1F44g4dbXOgNj1eXZw1PIGR12p58OEkLN51Ha3S4DKRtCv5CkhK1KHEvQtg==}
+  /@cosmjs/encoding@0.31.1:
+    resolution: {integrity: sha512-IuxP6ewwX6vg9sUJ8ocJD92pkerI4lyG8J5ynAM3NaX3q+n+uMoPRSQXNeL9bnlrv01FF1kIm8if/f5F7ZPtkA==}
    dependencies:
      base64-js: 1.5.1
      bech32: 1.1.4
@@ -814,13 +789,6 @@ packages:
      xstream: 11.14.0
    dev: false

-  /@cosmjs/json-rpc@0.32.2:
-    resolution: {integrity: sha512-lan2lOgmz4yVE/HR8eCOSiII/1OudIulk8836koyIDCsPEpt6eKBuctnAD168vABGArKccLAo7Mr2gy9nrKrOQ==}
-    dependencies:
-      '@cosmjs/stream': 0.32.2
-      xstream: 11.14.0
-    dev: false
-
  /@cosmjs/launchpad@0.27.1:
    resolution: {integrity: sha512-DcFwGD/z5PK8CzO2sojDxa+Be9EIEtRZb2YawgVnw2Ht/p5FlNv+OVo8qlishpBdalXEN7FvQ1dVeDFEe9TuJw==}
    dependencies:
@@ -853,8 +821,8 @@ packages:
      bn.js: 5.2.1
    dev: false

-  /@cosmjs/math@0.32.2:
-    resolution: {integrity: sha512-b8+ruAAY8aKtVKWSft2IvtCVCUH1LigIlf9ALIiY8n9jtM4kMASiaRbQ/27etnSAInV88IaezKK9rQZrtxTjcw==}
+  /@cosmjs/math@0.31.1:
+    resolution: {integrity: sha512-kiuHV6m6DSB8/4UV1qpFhlc4ul8SgLXTGRlYkYiIIP4l0YNeJ+OpPYaOlEgx4Unk2mW3/O2FWYj7Jc93+BWXng==}
    dependencies:
      bn.js: 5.2.1
    dev: false
@@ -883,17 +851,6 @@ packages:
      long: 4.0.0
    dev: false

-  /@cosmjs/proto-signing@0.32.2:
-    resolution: {integrity: sha512-UV4WwkE3W3G3s7wwU9rizNcUEz2g0W8jQZS5J6/3fiN0mRPwtPKQ6EinPN9ASqcAJ7/VQH4/9EPOw7d6XQGnqw==}
-    dependencies:
-      '@cosmjs/amino': 0.32.2
-      '@cosmjs/crypto': 0.32.2
-      '@cosmjs/encoding': 0.32.2
-      '@cosmjs/math': 0.32.2
-      '@cosmjs/utils': 0.32.2
-      cosmjs-types: 0.9.0
-    dev: false
-
  /@cosmjs/socket@0.30.1:
    resolution: {integrity: sha512-r6MpDL+9N+qOS/D5VaxnPaMJ3flwQ36G+vPvYJsXArj93BjgyFB7BwWwXCQDzZ+23cfChPUfhbINOenr8N2Kow==}
    dependencies:
@@ -918,18 +875,6 @@ packages:
      - utf-8-validate
    dev: false

-  /@cosmjs/socket@0.32.2:
-    resolution: {integrity: sha512-Qc8jaw4uSBJm09UwPgkqe3g9TBFx4ZR9HkXpwT6Z9I+6kbLerXPR0Gy3NSJFSUgxIfTpO8O1yqoWAyf0Ay17Mw==}
-    dependencies:
-      '@cosmjs/stream': 0.32.2
-      isomorphic-ws: 4.0.1(ws@7.5.9)
-      ws: 7.5.9
-      xstream: 11.14.0
-    transitivePeerDependencies:
-      - bufferutil
-      - utf-8-validate
-    dev: false
-
  /@cosmjs/stargate@0.30.1:
    resolution: {integrity: sha512-RdbYKZCGOH8gWebO7r6WvNnQMxHrNXInY/gPHPzMjbQF6UatA6fNM2G2tdgS5j5u7FTqlCI10stNXrknaNdzog==}
    dependencies:
@@ -972,25 +917,6 @@ packages:
      - utf-8-validate
    dev: false

-  /@cosmjs/stargate@0.32.2:
-    resolution: {integrity: sha512-AsJa29fT7Jd4xt9Ai+HMqhyj7UQu7fyYKdXj/8+/9PD74xe6lZSYhQPcitUmMLJ1ckKPgXSk5Dd2LbsQT0IhZg==}
-    dependencies:
-      '@confio/ics23': 0.6.8
-      '@cosmjs/amino': 0.32.2
-      '@cosmjs/encoding': 0.32.2
-      '@cosmjs/math': 0.32.2
-      '@cosmjs/proto-signing': 0.32.2
-      '@cosmjs/stream': 0.32.2
-      '@cosmjs/tendermint-rpc': 0.32.2
-      '@cosmjs/utils': 0.32.2
-      cosmjs-types: 0.9.0
-      xstream: 11.14.0
-    transitivePeerDependencies:
-      - bufferutil
-      - debug
-      - utf-8-validate
-    dev: false
-
  /@cosmjs/stream@0.30.1:
    resolution: {integrity: sha512-Fg0pWz1zXQdoxQZpdHRMGvUH5RqS6tPv+j9Eh7Q953UjMlrwZVo0YFLC8OTf/HKVf10E4i0u6aM8D69Q6cNkgQ==}
    dependencies:
@@ -1003,12 +929,6 @@ packages:
      xstream: 11.14.0
    dev: false

-  /@cosmjs/stream@0.32.2:
-    resolution: {integrity: sha512-gpCufLfHAD8Zp1ZKge7AHbDf4RA0TZp66wZY6JaQR5bSiEF2Drjtp4mwXZPGejtaUMnaAgff3LrUzPJfKYdQwg==}
-    dependencies:
-      xstream: 11.14.0
-    dev: false
-
  /@cosmjs/tendermint-rpc@0.30.1:
    resolution: {integrity: sha512-Z3nCwhXSbPZJ++v85zHObeUggrEHVfm1u18ZRwXxFE9ZMl5mXTybnwYhczuYOl7KRskgwlB+rID0WYACxj4wdQ==}
    dependencies:
@@ -1047,25 +967,6 @@ packages:
      - utf-8-validate
    dev: false

-  /@cosmjs/tendermint-rpc@0.32.2:
-    resolution: {integrity: sha512-DXyJHDmcAfCix4H/7/dKR0UMdshP01KxJOXHdHxBCbLIpck94BsWD3B2ZTXwfA6sv98so9wOzhp7qGQa5malxg==}
-    dependencies:
-      '@cosmjs/crypto': 0.32.2
-      '@cosmjs/encoding': 0.32.2
-      '@cosmjs/json-rpc': 0.32.2
-      '@cosmjs/math': 0.32.2
-      '@cosmjs/socket': 0.32.2
-      '@cosmjs/stream': 0.32.2
-      '@cosmjs/utils': 0.32.2
-      axios: 1.6.5
-      readonly-date: 1.0.0
-      xstream: 11.14.0
-    transitivePeerDependencies:
-      - bufferutil
-      - debug
-      - utf-8-validate
-    dev: false
-
  /@cosmjs/utils@0.27.1:
    resolution: {integrity: sha512-VG7QPDiMUzVPxRdJahDV8PXxVdnuAHiIuG56hldV4yPnOz/si/DLNd7VAUUA5923b6jS1Hhev0Hr6AhEkcxBMg==}
    dev: false
@@ -1078,53 +979,52 @@ packages:
    resolution: {integrity: sha512-nNcycZWUYLNJlrIXgpcgVRqdl6BXjF4YlXdxobQWpW9Tikk61bEGeAFhDYtC0PwHlokCNw0KxWiHGJL4nL7Q5A==}
    dev: false

-  /@cosmjs/utils@0.32.2:
-    resolution: {integrity: sha512-Gg5t+eR7vPJMAmhkFt6CZrzPd0EKpAslWwk5rFVYZpJsM8JG5KT9XQ99hgNM3Ov6ScNoIWbXkpX27F6A9cXR4Q==}
+  /@cosmjs/utils@0.31.1:
+    resolution: {integrity: sha512-n4Se1wu4GnKwztQHNFfJvUeWcpvx3o8cWhSbNs9JQShEuB3nv3R5lqFBtDCgHZF/emFQAP+ZjF8bTfCs9UBGhA==}
    dev: false

  /@cush/relative@1.0.0:
    resolution: {integrity: sha512-RpfLEtTlyIxeNPGKcokS+p3BZII/Q3bYxryFRglh5H3A3T8q9fsLYm72VYAMEOOIBLEa8o93kFLiBDUWKrwXZA==}
    dev: true

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

-  /@dydxprotocol/v4-client-js@1.0.14:
-    resolution: {integrity: sha512-nIjj9OKuXb3n3rrihDPkBE6OIBxXNB7gf0NMsrG1Pc9O7M0yjpitTUgnfIzplf0XMrtmozWRYZhlLgBfJcIbBg==}
+  /@dydxprotocol/v4-client-js@1.0.11:
+    resolution: {integrity: sha512-rJNFGTO+HU1GQppXeRLKXNk4HWx/h+DjU2sUCieEv5mnRIMQpLw8dH/L+Uyhxx2oovccY1MaKB4Fr9IngdrF0A==}
    dependencies:
-      '@cosmjs/amino': 0.32.2
-      '@cosmjs/encoding': 0.32.2
-      '@cosmjs/math': 0.32.2
-      '@cosmjs/proto-signing': 0.32.2
-      '@cosmjs/stargate': 0.32.2
-      '@cosmjs/tendermint-rpc': 0.32.2
-      '@cosmjs/utils': 0.32.2
-      '@dydxprotocol/v4-proto': 3.0.0-dev.0
+      '@cosmjs/amino': 0.30.1
+      '@cosmjs/encoding': 0.31.1
+      '@cosmjs/math': 0.31.1
+      '@cosmjs/proto-signing': 0.30.1
+      '@cosmjs/stargate': 0.30.1
+      '@cosmjs/tendermint-rpc': 0.30.1
+      '@cosmjs/utils': 0.31.1
+      '@dydxprotocol/v4-proto': 0.4.1
      '@osmonauts/lcd': 0.6.0
      '@scure/bip32': 1.3.2
      '@scure/bip39': 1.2.1
      axios: 1.1.3
      bech32: 1.1.4
      bignumber.js: 9.1.1
-      cosmjs-types: 0.9.0
      ethereum-cryptography: 2.1.2
      ethers: 6.6.1
      long: 4.0.0
      protobufjs: 6.11.4
-      ws: 8.15.1(bufferutil@4.0.8)(utf-8-validate@5.0.10)
+      ws: 8.15.0
    transitivePeerDependencies:
      - bufferutil
      - debug
      - utf-8-validate
    dev: false

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

-  /@dydxprotocol/v4-proto@3.0.0-dev.0:
-    resolution: {integrity: sha512-hT6F/AgaTqv8Bwo7twpIhmjXvJE/Fx+3mmHHTuIXMeL6OhVtlOpcEQyHvBEAdh1VrNq/S7qWvdQD0fvC/UgKyA==}
+  /@dydxprotocol/v4-proto@0.4.1:
+    resolution: {integrity: sha512-2pBkokufWcxfIpiXE6QuQOBXUe154OTp6ojCIdOPW9TFLxzchoygxXnb5dL6rAQVNj9Qbg+hhXBllutt4m99dw==}
    dependencies:
      protobufjs: 6.11.4
    dev: false
@@ -4986,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.20.0(typescript@5.1.3)
+      viem: 1.12.2(typescript@5.1.3)
    transitivePeerDependencies:
      - bufferutil
      - encoding
@@ -5490,13 +5390,31 @@ 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.36.1):
+  /@tanstack/react-query-persist-client@4.32.6(@tanstack/react-query@4.32.6):
    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.36.1(react-dom@18.2.0)(react@18.2.0)
+      '@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)
    dev: false

  /@tanstack/react-query@4.36.1(react-dom@18.2.0)(react@18.2.0):
@@ -5702,7 +5620,6 @@ 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==}
@@ -5764,6 +5681,12 @@ 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}
@@ -6260,8 +6183,8 @@ packages:
      pretty-format: 27.5.1
    dev: true

-  /@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==}
+  /@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==}
    peerDependencies:
      typescript: '>=5.0.4'
      viem: '>=0.3.35'
@@ -6272,14 +6195,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.11.0(@types/react@18.2.14)(react@18.2.0)
+      '@walletconnect/ethereum-provider': 2.10.6(@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.11.0
+      '@walletconnect/utils': 2.10.2
      abitype: 0.8.7(typescript@5.1.3)
      eventemitter3: 4.0.7
      typescript: 5.1.3
-      viem: 1.20.0(typescript@5.1.3)
+      viem: 1.12.2(typescript@5.1.3)
    transitivePeerDependencies:
      - '@azure/app-configuration'
      - '@azure/cosmos'
@@ -6302,8 +6225,8 @@ packages:
      - zod
    dev: false

-  /@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==}
+  /@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==}
    peerDependencies:
      typescript: '>=5.0.4'
      viem: '>=0.3.35'
@@ -6311,11 +6234,11 @@ packages:
      typescript:
        optional: true
    dependencies:
-      '@wagmi/connectors': 3.1.11(@types/react@18.2.14)(react@18.2.0)(typescript@5.1.3)(viem@1.20.0)
+      '@wagmi/connectors': 3.1.10(@types/react@18.2.14)(react@18.2.0)(typescript@5.1.3)(viem@1.12.2)
      abitype: 0.8.7(typescript@5.1.3)
      eventemitter3: 4.0.7
      typescript: 5.1.3
-      viem: 1.20.0(typescript@5.1.3)
+      viem: 1.12.2(typescript@5.1.3)
      zustand: 4.4.7(@types/react@18.2.14)(react@18.2.0)
    transitivePeerDependencies:
      - '@azure/app-configuration'
@@ -6377,45 +6300,6 @@ 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:
@@ -6441,18 +6325,18 @@ packages:
      tslib: 1.14.1
    dev: false

-  /@walletconnect/ethereum-provider@2.11.0(@types/react@18.2.14)(react@18.2.0):
-    resolution: {integrity: sha512-YrTeHVjuSuhlUw7SQ6xBJXDuJ6iAC+RwINm9nVhoKYJSHAy3EVSJZOofMKrnecL0iRMtD29nj57mxAInIBRuZA==}
+  /@walletconnect/ethereum-provider@2.10.6(@types/react@18.2.14)(react@18.2.0):
+    resolution: {integrity: sha512-bBQ+yUfxLv8VxNttgNKY7nED35gSVayO/BnLHbNKvyV1gpvSCla5mWB9MsXuQs70MK0g+/qtgRVSrOtdSubaNQ==}
    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.11.0
-      '@walletconnect/types': 2.11.0
-      '@walletconnect/universal-provider': 2.11.0
-      '@walletconnect/utils': 2.11.0
+      '@walletconnect/sign-client': 2.10.6
+      '@walletconnect/types': 2.10.6
+      '@walletconnect/universal-provider': 2.10.6
+      '@walletconnect/utils': 2.10.6
      events: 3.3.0
    transitivePeerDependencies:
      - '@azure/app-configuration'
@@ -6720,17 +6604,20 @@ packages:
      - utf-8-validate
    dev: false

-  /@walletconnect/sign-client@2.11.0:
-    resolution: {integrity: sha512-H2ukscibBS+6WrzQWh+WyVBqO5z4F5et12JcwobdwgHnJSlqIoZxqnUYYWNCI5rUR5UKsKWaUyto4AE9N5dw4Q==}
+  /@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==}
    dependencies:
-      '@walletconnect/core': 2.11.0
      '@walletconnect/events': 1.0.1
      '@walletconnect/heartbeat': 1.2.1
-      '@walletconnect/jsonrpc-utils': 1.0.8
+      '@walletconnect/jsonrpc-types': 1.0.3
+      '@walletconnect/keyvaluestorage': 1.1.1
      '@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'
@@ -6745,16 +6632,7 @@ 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:
@@ -6782,42 +6660,17 @@ packages:
      - supports-color
    dev: false

-  /@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==}
+  /@walletconnect/universal-provider@2.10.6:
+    resolution: {integrity: sha512-CEivusqqoD31BhCTKp08DnrccfGjwD9MFjZs5BNRorDteRFE8zVm9LmP6DSiNJCw82ZajGlZThggLQ/BAATfwA==}
    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.11.0
-      '@walletconnect/types': 2.11.0
-      '@walletconnect/utils': 2.11.0
+      '@walletconnect/sign-client': 2.10.6
+      '@walletconnect/types': 2.10.6
+      '@walletconnect/utils': 2.10.6
      events: 3.3.0
    transitivePeerDependencies:
      - '@azure/app-configuration'
@@ -6838,8 +6691,8 @@ packages:
      - utf-8-validate
    dev: false

-  /@walletconnect/utils@2.10.6:
-    resolution: {integrity: sha512-oRsWWhN2+hi3aiDXrQEOfysz6FHQJGXLsNQPVt+WIBJplO6Szmdau9dbleD88u1iiT4GKPqE0R9FOYvvPm1H/w==}
+  /@walletconnect/utils@2.10.2:
+    resolution: {integrity: sha512-syxXRpc2yhSknMu3IfiBGobxOY7fLfLTJuw+ppKaeO6WUdZpIit3wfuGOcc0Ms3ZPFCrGfyGOoZsCvgdXtptRg==}
    dependencies:
      '@stablelib/chacha20poly1305': 1.0.1
      '@stablelib/hkdf': 1.0.1
@@ -6849,7 +6702,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.10.2
      '@walletconnect/window-getters': 1.0.1
      '@walletconnect/window-metadata': 1.0.1
      detect-browser: 5.3.0
@@ -6871,8 +6724,8 @@ packages:
      - supports-color
    dev: false

-  /@walletconnect/utils@2.11.0:
-    resolution: {integrity: sha512-hxkHPlTlDQILHfIKXlmzgNJau/YcSBC3XHUSuZuKZbNEw3duFT6h6pm3HT/1+j1a22IG05WDsNBuTCRkwss+BQ==}
+  /@walletconnect/utils@2.10.6:
+    resolution: {integrity: sha512-oRsWWhN2+hi3aiDXrQEOfysz6FHQJGXLsNQPVt+WIBJplO6Szmdau9dbleD88u1iiT4GKPqE0R9FOYvvPm1H/w==}
    dependencies:
      '@stablelib/chacha20poly1305': 1.0.1
      '@stablelib/hkdf': 1.0.1
@@ -6882,7 +6735,7 @@ packages:
      '@walletconnect/relay-api': 1.0.9
      '@walletconnect/safe-json': 1.0.2
      '@walletconnect/time': 1.0.2
-      '@walletconnect/types': 2.11.0
+      '@walletconnect/types': 2.10.6
      '@walletconnect/window-getters': 1.0.1
      '@walletconnect/window-metadata': 1.0.1
      detect-browser: 5.3.0
@@ -7476,7 +7329,7 @@ packages:
  /axios@0.21.4:
    resolution: {integrity: sha512-ut5vewkiu8jjGBdqpM44XxjuCjq9LAKeHVmoVfHVzy8eHgxxq8SbAVQNovDA8mVi05kP0Ea/n/UzcSHcTJQfNg==}
    dependencies:
-      follow-redirects: 1.15.5
+      follow-redirects: 1.15.2
    transitivePeerDependencies:
      - debug
    dev: false
@@ -7493,17 +7346,7 @@ packages:
  /axios@1.1.3:
    resolution: {integrity: sha512-00tXVRwKx/FZr/IDVFt4C+f9FYairX517WoGCL6dpOntqLkZofjhu43F/Xl44UOpqa+9sLFDrG/XAnFsUYgkDA==}
    dependencies:
-      follow-redirects: 1.15.5
-      form-data: 4.0.0
-      proxy-from-env: 1.1.0
-    transitivePeerDependencies:
-      - debug
-    dev: false
-
-  /axios@1.6.5:
-    resolution: {integrity: sha512-Ii012v05KEVuUoFWmMW/UQv9aRIc3ZwkWDcM+h5Il8izZCtRVpDUfwpoFf7eOtajT3QiGR4yDUx7lPqHJULgbg==}
-    dependencies:
-      follow-redirects: 1.15.5
+      follow-redirects: 1.15.2
      form-data: 4.0.0
      proxy-from-env: 1.1.0
    transitivePeerDependencies:
@@ -8167,10 +8010,6 @@ packages:
      protobufjs: 6.11.4
    dev: false

-  /cosmjs-types@0.9.0:
-    resolution: {integrity: sha512-MN/yUe6mkJwHnCFfsNPeCfXVhyxHYW6c/xDUzrSbBycYzw++XvWDMJArXp2pLdgD6FQ8DW79vkPjeNKVrXaHeQ==}
-    dev: false
-
  /cosmos-directory-client@0.0.6:
    resolution: {integrity: sha512-WIdaQ8uW1vIbYvNnAVunkC6yxTrneJC7VQ5UUQ0kuw8b0C0A39KTIpoQHCfc8tV7o9vF4niwRhdXEdfAgQEsQQ==}
    dependencies:
@@ -9536,16 +9375,6 @@ packages:
        optional: true
    dev: false

-  /follow-redirects@1.15.5:
-    resolution: {integrity: sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==}
-    engines: {node: '>=4.0'}
-    peerDependencies:
-      debug: '*'
-    peerDependenciesMeta:
-      debug:
-        optional: true
-    dev: false
-
  /for-each@0.3.3:
    resolution: {integrity: sha512-jqYfLp7mo9vIyQf8ykW2v7A+2N4QjeCeI5+Dz9XraiO1ign81wjiH7Fb9vSOWvQfNtmSa4H2RoQTrrXivdUZmw==}
    dependencies:
@@ -10605,15 +10434,6 @@ 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:
@@ -10622,8 +10442,8 @@ packages:
      ws: 7.5.9
    dev: false

-  /isows@1.0.3(ws@8.13.0):
-    resolution: {integrity: sha512-2cKei4vlmg2cxEjm3wVSqn8pcoRF/LX/wpifuuNquFO4SQmPwarClT+SUCA2lt+l581tTeZIPIZuIDo2jWN1fg==}
+  /isomorphic-ws@5.0.0(ws@8.13.0):
+    resolution: {integrity: sha512-muId7Zzn9ywDsyXgTIafTry2sV3nySZeUDe6YedVd1Hvuuep5AsIlqK+XefWpYTyJG5e503F2xIuT2lcU6rCSw==}
    peerDependencies:
      ws: '*'
    dependencies:
@@ -11960,6 +11780,10 @@ packages:
    resolution: {integrity: sha512-bW9T/uJDPAJB2YNYEpWzE54U5O3MQidXsOyTfnbKYtTtFexRvGzb1waphBN4ZwP6EcIvYYEOwW0b72BpAqydTw==}
    dev: false

+  /node-fetch-native@1.6.1:
+    resolution: {integrity: sha512-bW9T/uJDPAJB2YNYEpWzE54U5O3MQidXsOyTfnbKYtTtFexRvGzb1waphBN4ZwP6EcIvYYEOwW0b72BpAqydTw==}
+    dev: false
+
  /node-fetch@2.6.12:
    resolution: {integrity: sha512-C/fGU2E8ToujUivIO0H+tpQ6HWo4eEmchoPIoXtxCrVghxdKq+QOHqEZW7tuP3KlV3bC8FRMO5nMCC7Zm1VP6g==}
    engines: {node: 4.x || >=6.0.0}
@@ -13995,10 +13819,6 @@ packages:
      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:
@@ -14352,21 +14172,22 @@ packages:
      vfile-message: 3.1.4
    dev: true

-  /viem@1.20.0(typescript@5.1.3):
-    resolution: {integrity: sha512-yPjV9pJr10xi28C/9LEvs5zdZNEMiru3Kz7nufghVYABJAfeSkoZQXb6b23n7MscS7c55JO5nmUI3xKkd9g6Yg==}
+  /viem@1.12.2(typescript@5.1.3):
+    resolution: {integrity: sha512-aCaUCyg72ES+jK4s6tVYOMnOt4if71RwzgiUAUpAuaCgvHFfh9DCnwuEfwkxEZLE2vafOsirgJ3fcn7nsDVQoQ==}
    peerDependencies:
      typescript: '>=5.0.4'
    peerDependenciesMeta:
      typescript:
        optional: true
    dependencies:
-      '@adraffy/ens-normalize': 1.10.0
+      '@adraffy/ens-normalize': 1.9.4
      '@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)
-      isows: 1.0.3(ws@8.13.0)
+      isomorphic-ws: 5.0.0(ws@8.13.0)
      typescript: 5.1.3
      ws: 8.13.0
    transitivePeerDependencies:
@@ -14536,8 +14357,8 @@ packages:
      - supports-color
    dev: true

-  /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==}
+  /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==}
    peerDependencies:
      react: '>=17.0.0'
      typescript: '>=5.0.4'
@@ -14547,14 +14368,14 @@ packages:
        optional: true
    dependencies:
      '@tanstack/query-sync-storage-persister': 4.32.6
-      '@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)
+      '@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)
      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.20.0(typescript@5.1.3)
+      viem: 1.12.2(typescript@5.1.3)
    transitivePeerDependencies:
      - '@azure/app-configuration'
      - '@azure/cosmos'
@@ -14801,6 +14622,19 @@ packages:
        optional: true
    dev: false

+  /ws@8.15.0:
+    resolution: {integrity: sha512-H/Z3H55mrcrgjFwI+5jKavgXvwQLtfPCUEp6pi35VhoB0pfcHnSoyuTzkBEZpzq49g1193CUEwIvmsjcotenYw==}
+    engines: {node: '>=10.0.0'}
+    peerDependencies:
+      bufferutil: ^4.0.1
+      utf-8-validate: '>=5.0.2'
+    peerDependenciesMeta:
+      bufferutil:
+        optional: true
+      utf-8-validate:
+        optional: true
+    dev: false
+
  /ws@8.15.1(bufferutil@4.0.8)(utf-8-validate@5.0.10):
    resolution: {integrity: sha512-W5OZiCjXEmk0yZ66ZN82beM5Sz7l7coYxpRkzS+p9PP+ToQry8szKh+61eNktr7EA9DOwvFGhfC605jDHbP6QQ==}
    engines: {node: '>=10.0.0'}
@@ -14920,3 +14754,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": "11155111",
+         "ethereumChainId": "5",
         "dydxChainId": "dydxprotocol-testnet",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -113,7 +113,7 @@
      },
      "dydxprotocol-dev-2": {
         "name": "v4 Dev 2",
-         "ethereumChainId": "11155111",
+         "ethereumChainId": "5",
         "dydxChainId": "dydxprotocol-testnet",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -186,7 +186,7 @@
      },
      "dydxprotocol-dev-4": {
         "name": "v4 Dev 4",
-         "ethereumChainId": "11155111",
+         "ethereumChainId": "5",
         "dydxChainId": "dydxprotocol-testnet",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -259,7 +259,7 @@
      },
      "dydxprotocol-dev-5": {
         "name": "v4 Dev 5",
-         "ethereumChainId": "11155111",
+         "ethereumChainId": "5",
         "dydxChainId": "dydxprotocol-testnet",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -332,7 +332,7 @@
      },
      "dydxprotocol-staging": {
         "name": "v4 Staging",
-         "ethereumChainId": "11155111",
+         "ethereumChainId": "5",
         "dydxChainId": "dydxprotocol-testnet",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -407,7 +407,7 @@
      },
      "dydxprotocol-staging-forced-update": {
         "name": "v4 Staging Forced Update",
-         "ethereumChainId": "11155111",
+         "ethereumChainId": "5",
         "dydxChainId": "dydxprotocol-testnet",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -480,7 +480,7 @@
      },
      "dydxprotocol-staging-west": {
         "name": "v4 Staging West",
-         "ethereumChainId": "11155111",
+         "ethereumChainId": "5",
         "dydxChainId": "dydxprotocol-testnet",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -555,7 +555,7 @@
      },
      "dydxprotocol-testnet": {
         "name": "v4 Public Testnet",
-         "ethereumChainId": "11155111",
+         "ethereumChainId": "5",
         "dydxChainId": "dydx-testnet-4",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -579,8 +579,8 @@
         "endpoints": {
            "indexers": [
               {
-                  "api": "https://indexer.v4testnet.dydx.exchange",
-                  "socket": "wss://indexer.v4testnet.dydx.exchange"
+                  "api": "https://dydx-testnet.imperator.co",
+                  "socket": "wss://dydx-testnet.imperator.co"
               }
            ],
            "validators": [
@@ -634,7 +634,7 @@
      },
      "dydxprotocol-testnet-dydx": {
         "name": "v4 Public Testnet/dYdX",
-         "ethereumChainId": "11155111",
+         "ethereumChainId": "5",
         "dydxChainId": "dydx-testnet-4",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -710,7 +710,7 @@
      },
      "dydxprotocol-testnet-nodefleet": {
         "name": "v4 Public Testnet/nodefleet",
-         "ethereumChainId": "11155111",
+         "ethereumChainId": "5",
         "dydxChainId": "dydx-testnet-4",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -734,8 +734,8 @@
         "endpoints": {
            "indexers": [
               {
-                  "api": "https://indexer.v4testnet.dydx.exchange",
-                  "socket": "wss://indexer.v4testnet.dydx.exchange"
+                  "api": "https://dydx-testnet.imperator.co",
+                  "socket": "wss://dydx-testnet.imperator.co"
               }
            ],
            "validators": [
@@ -786,7 +786,7 @@
      },
      "dydxprotocol-testnet-kingnodes": {
         "name": "v4 Public Testnet/KingNodes",
-         "ethereumChainId": "11155111",
+         "ethereumChainId": "5",
         "dydxChainId": "dydx-testnet-4",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -810,8 +810,8 @@
         "endpoints": {
            "indexers": [
               {
-                  "api": "https://indexer.v4testnet.dydx.exchange",
-                  "socket": "wss://indexer.v4testnet.dydx.exchange"
+                  "api": "https://dydx-testnet.imperator.co",
+                  "socket": "wss://dydx-testnet.imperator.co"
               }
            ],
            "validators": [
@@ -862,7 +862,7 @@
      },
      "dydxprotocol-testnet-liquify": {
         "name": "v4 Public Testnet/Liquify",
-         "ethereumChainId": "11155111",
+         "ethereumChainId": "5",
         "dydxChainId": "dydx-testnet-4",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -886,8 +886,8 @@
         "endpoints": {
            "indexers": [
               {
-                  "api": "https://indexer.v4testnet.dydx.exchange",
-                  "socket": "wss://indexer.v4testnet.dydx.exchange"
+                  "api": "https://dydx-testnet.imperator.co",
+                  "socket": "wss://dydx-testnet.imperator.co"
               }
            ],
            "validators": [
@@ -938,7 +938,7 @@
      },
      "dydxprotocol-testnet-polkachu": {
         "name": "v4 Public Testnet/Polkahcu",
-         "ethereumChainId": "11155111",
+         "ethereumChainId": "5",
         "dydxChainId": "dydx-testnet-4",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -962,8 +962,8 @@
         "endpoints": {
            "indexers": [
               {
-                  "api": "https://indexer.v4testnet.dydx.exchange",
-                  "socket": "wss://indexer.v4testnet.dydx.exchange"
+                  "api": "https://dydx-testnet.imperator.co",
+                  "socket": "wss://dydx-testnet.imperator.co"
               }
            ],
            "validators": [
@@ -1005,7 +1005,7 @@
      },
      "dydxprotocol-testnet-bware": {
         "name": "v4 Public Testnet/BWare",
-         "ethereumChainId": "11155111",
+         "ethereumChainId": "5",
         "dydxChainId": "dydx-testnet-4",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -1029,8 +1029,8 @@
         "endpoints": {
            "indexers": [
               {
-                  "api": "https://indexer.v4testnet.dydx.exchange",
-                  "socket": "wss://indexer.v4testnet.dydx.exchange"
+                  "api": "https://dydx-testnet.imperator.co",
+                  "socket": "wss://dydx-testnet.imperator.co"
               }
            ],
            "validators": [
@@ -1,230 +0,0 @@
-<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>
@@ -1,26 +0,0 @@
-import type { Story } from '@ladle/react';
-
-import { Accordion as AccordionComponent, AccordionProps } from '@/components/Accordion';
-
-import { StoryWrapper } from '.ladle/components';
-
-export const Accordion: Story<AccordionProps> = (args) => {
-  return (
-    <StoryWrapper>
-      <AccordionComponent {...args} />
-    </StoryWrapper>
-  );
-};
-
-Accordion.args = {
-  items: [
-    {
-      header: 'Question 1?',
-      content: 'Answer 1.',
-    },
-    {
-      header: 'Question 2?',
-      content: 'Answer 2.',
-    },
-  ],
-};
@@ -3,8 +3,6 @@ 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 = {
@@ -12,7 +10,7 @@ export type AccordionItem = {
  content: React.ReactNode;
 };

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

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

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

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

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

@@ -0,0 +1,16 @@
+import { forwardRef } from 'react';
+
+type StyleProps = {
+  className?: string;
+};
+
+type ElementProps = {
+  width: number | string;
+  height: number | string;
+};
+
+export const Canvas = forwardRef<HTMLCanvasElement, ElementProps & StyleProps>(
+  ({ className, width, height }, canvasRef) => (
+    <canvas ref={canvasRef} className={className} width={width ?? 0} height={height ?? 0} />
+  )
+);
@@ -24,6 +24,7 @@ import {
  CoinsIcon,
  CommentIcon,
  CopyIcon,
+  CubeIcon,
  DepositIcon,
  DepthChartIcon,
  DiscordIcon,
@@ -59,7 +60,6 @@ import {
  PriceChartIcon,
  PrivacyIcon,
  QrIcon,
-  RewardStarIcon,
  SearchIcon,
  SendIcon,
  ShareIcon,
@@ -99,6 +99,7 @@ export enum IconName {
  Coins = 'Coins',
  Comment = 'Comment',
  Copy = 'Copy',
+  Cube = 'Cube',
  Deposit = 'Deposit',
  DepthChart = 'DepthChart',
  Discord = 'Discord',
@@ -135,7 +136,6 @@ export enum IconName {
  PriceChart = 'PriceChart',
  Privacy = 'Privacy',
  Qr = 'Qr',
-  RewardStar = 'RewardStar',
  Search = 'Search',
  Send = 'Send',
  Share = 'Share',
@@ -175,6 +175,7 @@ const icons = {
  [IconName.Coins]: CoinsIcon,
  [IconName.Comment]: CommentIcon,
  [IconName.Copy]: CopyIcon,
+  [IconName.Cube]: CubeIcon,
  [IconName.Deposit]: DepositIcon,
  [IconName.DepthChart]: DepthChartIcon,
  [IconName.Discord]: DiscordIcon,
@@ -210,7 +211,6 @@ const icons = {
  [IconName.PriceChart]: PriceChartIcon,
  [IconName.Privacy]: PrivacyIcon,
  [IconName.Qr]: QrIcon,
-  [IconName.RewardStar]: RewardStarIcon,
  [IconName.Search]: SearchIcon,
  [IconName.Send]: SendIcon,
  [IconName.Share]: ShareIcon,
@@ -4,7 +4,6 @@ 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;
@@ -68,12 +67,6 @@ 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);
@@ -118,6 +118,7 @@ export const Tabs = <TabItemsValue extends string>({
              forceMount={forceMount}
              $hide={forceMount && currentItem?.value !== value}
              $withTransitions={withTransitions}
+              asChild={asChild}
            >
              {content}
            </Styled.Content>
@@ -27,8 +27,9 @@ 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;
@@ -1,33 +1,26 @@
-import React, { PropsWithChildren, useContext, useState } from 'react';
+import React, { useContext, useState } from 'react';

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

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

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

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

@@ -36,13 +29,15 @@ export const XYChartWithPointerEvents = ({
      {...props}
      onPointerMove={({ event }) => {
        setLastPointerMoveEvent(event as React.PointerEvent);
-        if (pointerChartPosition) onPointerMove?.(pointerChartPosition);
+        if (pointerChartPosition)
+          onPointerMove?.(pointerChartPosition);
      }}
      onPointerOut={() => setLastPointerMoveEvent(undefined)}
      onPointerDown={() => onPointerPressedChange?.(true)}
      onPointerUp={() => {
        onPointerPressedChange?.(false);
-        if (pointerChartPosition) onPointerUp?.(pointerChartPosition);
+        if (pointerChartPosition)
+          onPointerUp?.(pointerChartPosition);
      }}
    >
      {props.children}
@@ -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.model.TransferInputField;
+export const TransferInputField = Abacus.exchange.dydx.abacus.state.modal.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.model.TradeInputField;
+export const TradeInputField = Abacus.exchange.dydx.abacus.state.modal.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.model.ClosePositionInputField;
+  Abacus.exchange.dydx.abacus.state.modal.ClosePositionInputField;

 const closePositionInputFields = [...ClosePositionInputField.values()] as const;
 export type ClosePositionInputFields = (typeof closePositionInputFields)[number];
@@ -96,7 +96,6 @@ export type AnalyticsEventData<T extends AnalyticsEvent> =
        elapsedTime?: number;
        blockHeight?: number;
        indexerBlockHeight?: number;
-        trailingBlocks?: number;
      }
    : // Navigation
    T extends AnalyticsEvent.NavigatePage
@@ -1,40 +0,0 @@
-import { OrderSide } from '@dydxprotocol/v4-client-js';
-import { FundingDirection } from './markets';
-
-// ------ Depth Chart ------ //
-export enum DepthChartSeries {
-  Asks = 'Asks',
-  Bids = 'Bids',
-  MidMarket = 'MidMarket',
-}
-
-export type DepthChartDatum = {
-  size: number;
-  price: number;
-  depth: number;
-  seriesKey: DepthChartSeries;
-};
-
-export type DepthChartPoint = {
-  side: OrderSide;
-  price: number;
-  size: number;
-};
-
-export const SERIES_KEY_FOR_ORDER_SIDE = {
-  [OrderSide.BUY]: DepthChartSeries.Bids,
-  [OrderSide.SELL]: DepthChartSeries.Asks,
-};
-
-// ------ Funding Chart ------ //
-export enum FundingRateResolution {
-  OneHour = 'OneHour',
-  EightHour = 'EightHour',
-  Annualized = 'Annualized',
-}
-
-export type FundingChartDatum = {
-  time: number;
-  fundingRate: number;
-  direction: FundingDirection;
-};
@@ -25,5 +25,4 @@ export const DEFAULT_MARKETID = 'ETH-USD';
 export enum FundingDirection {
  ToShort = 'ToShort',
  ToLong = 'ToLong',
-  None = 'None',
 }
@@ -87,8 +87,6 @@ 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,11 @@
+import { useCalculateOrderbookData } from './useCalculateOrderbookData';
+import { useCenterOrderbook } from './useCenterOrderbook';
+import { useDrawOrderbook } from './useDrawOrderbook';
+import { useSpreadRowScrollListener } from './useSpreadRowScrollListener';
+
+export {
+  useCalculateOrderbookData,
+  useCenterOrderbook,
+  useDrawOrderbook,
+  useSpreadRowScrollListener,
+};
@@ -0,0 +1,55 @@
+import { useMemo } from 'react';
+import { useSelector, shallowEqual } from 'react-redux';
+import { OrderSide } from '@dydxprotocol/v4-client-js';
+
+import { OrderbookLine } from '@/constants/abacus';
+
+import { getCurrentMarketOrderbook } from '@/state/perpetualsSelectors';
+import { getSubaccountOpenOrdersBySideAndPrice } from '@/state/accountSelectors';
+
+import type { RowData } from '@/views/Orderbook/OrderbookRow';
+
+import { MustBigNumber } from '@/lib/numbers';
+
+export const useCalculateOrderbookData = ({ maxRowsPerSide }: { maxRowsPerSide: number }) => {
+  const orderbook = useSelector(getCurrentMarketOrderbook, shallowEqual);
+
+  const openOrdersBySideAndPrice =
+    useSelector(getSubaccountOpenOrdersBySideAndPrice, shallowEqual) || {};
+
+  return useMemo(() => {
+    const asks = (orderbook?.asks?.toArray() ?? [])
+      .map(
+        (row: OrderbookLine) =>
+          ({
+            side: 'ask',
+            mine: openOrdersBySideAndPrice[OrderSide.SELL]?.[row.price]?.size,
+            ...row,
+          } as RowData)
+      )
+      .slice(0, maxRowsPerSide);
+
+    const bids = (orderbook?.bids?.toArray() ?? [])
+      .map(
+        (row: OrderbookLine) =>
+          ({
+            side: 'bid',
+            mine: openOrdersBySideAndPrice[OrderSide.BUY]?.[row.price]?.size,
+            ...row,
+          } as RowData)
+      )
+      .slice(0, maxRowsPerSide);
+
+    const spread =
+      asks[0] && bids[0] ? MustBigNumber(asks[0]?.price ?? 0).minus(bids[0]?.price ?? 0) : null;
+
+    const spreadPercent = orderbook?.spreadPercent;
+
+    const histogramRange = Math.max(
+      Number(bids[bids.length - 1]?.depth),
+      Number(asks[asks.length - 1]?.depth)
+    );
+
+    return { asks, bids, spread, spreadPercent, histogramRange, hasOrderbook: !!orderbook };
+  }, [orderbook, openOrdersBySideAndPrice]);
+};
@@ -0,0 +1,22 @@
+import { type RefObject, useEffect } from 'react';
+
+type ElementProps = {
+  marketId: string;
+  orderbookRef: RefObject<HTMLDivElement>;
+};
+
+/**
+ * @description Center Orderbook on load and market change
+ * Assumed that the two sides are the same height
+ */
+export const useCenterOrderbook = ({ marketId, orderbookRef }: ElementProps) => {
+  const orderbookEl = orderbookRef.current;
+  const { clientHeight, scrollHeight } = orderbookEl ?? {};
+  const shouldScroll = !!scrollHeight && !!clientHeight && scrollHeight > clientHeight;
+
+  useEffect(() => {
+    if (orderbookEl && shouldScroll) {
+      orderbookEl.scrollTo({ top: (scrollHeight - clientHeight) / 2 });
+    }
+  }, [shouldScroll, marketId]);
+};
@@ -0,0 +1,380 @@
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useSelector } from 'react-redux';
+
+import type { Nullable } from '@/constants/abacus';
+import { SMALL_USD_DECIMALS, TOKEN_DECIMALS } from '@/constants/numbers';
+import { useLocaleSeparators } from '@/hooks/useLocaleSeparators';
+
+import { getAppTheme } from '@/state/configsSelectors';
+
+import { ROW_HEIGHT, ROW_PADDING_RIGHT, type RowData } from '@/views/Orderbook/OrderbookRow';
+
+import { MustBigNumber } from '@/lib/numbers';
+import { log } from '@/lib/telemetry';
+import { Colors } from '@/styles/colors';
+
+type ElementProps = {
+  data: RowData[];
+  histogramRange: number;
+  hoveredRow?: number;
+  stepSizeDecimals: Nullable<number>;
+  tickSizeDecimals: Nullable<number>;
+};
+
+type StyleProps = {
+  histogramSide?: 'left' | 'right';
+};
+
+export const useDrawOrderbook = ({
+  data,
+  histogramRange,
+  stepSizeDecimals,
+  tickSizeDecimals,
+  histogramSide = 'right',
+  hoveredRow,
+}: ElementProps & StyleProps) => {
+  const theme = useSelector(getAppTheme);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const hoverCanvasRef = useRef<HTMLCanvasElement>(null);
+  const canvas = canvasRef.current;
+  const hoverCanvas = hoverCanvasRef.current;
+
+  /**
+   *         to === 'right'                to === 'left'
+   *         |===================|         |===================|
+   * bar:    a                   b         c                   d
+   * a = 0
+   * b = depthBarWidth
+   * c = canvasWidth - depthBarWidth
+   * d = canvasWidth
+   *
+   */
+  const getXYValues = ({
+    barWidth,
+    canvasWidth,
+    gradientMultiplier,
+  }: {
+    barWidth: number;
+    canvasWidth: number;
+    gradientMultiplier: number;
+  }) => {
+    const gradient = {
+      x1: Math.floor(histogramSide === 'left' ? barWidth : canvasWidth - barWidth),
+      x2: Math.floor(
+        histogramSide === 'left'
+          ? 0 - (canvasWidth * gradientMultiplier - canvasWidth)
+          : canvasWidth * gradientMultiplier
+      ),
+    };
+    const bar = {
+      x1: Math.floor(histogramSide === 'left' ? 0 : canvasWidth - barWidth),
+      x2: Math.floor(
+        histogramSide === 'left' ? Math.min(barWidth, canvasWidth - 2) : canvasWidth - 2
+      ),
+    };
+
+    return {
+      bar,
+      gradient,
+    };
+  };
+
+  const getYFromIndex = (idx: number, type: 'text' | 'bar' | 'rect') => {
+    return (
+      idx * ROW_HEIGHT +
+      {
+        text: ROW_HEIGHT / 2, // center of the row
+        bar: 1, // 1px off the top and bottom so the histograms do not touch
+        rect: 0,
+      }[type]
+    );
+  };
+
+  // Get X value by column, colIdx starts at 0
+  const getXByColumn = ({ canvasWidth, colIdx }: { canvasWidth: number; colIdx: number }) => {
+    return Math.floor(((colIdx + 1) * canvasWidth) / 3);
+  };
+
+  const drawBars = ({
+    value,
+    canvasWidth,
+    ctx,
+    gradientMultiplier,
+    histogramAccentColor,
+    idx,
+    histogramSide,
+  }: {
+    value: Nullable<number>;
+    canvasWidth: number;
+    ctx: CanvasRenderingContext2D;
+    gradientMultiplier: number;
+    histogramAccentColor: string;
+    idx: number;
+    histogramSide: 'left' | 'right';
+  }) => {
+    const histogramBarWidth = canvasWidth - 2;
+    const barWidth = value ? (value / histogramRange) * histogramBarWidth : 0;
+    const { gradient, bar } = getXYValues({ barWidth, canvasWidth, gradientMultiplier });
+
+    let linearGradient;
+
+    try {
+      linearGradient = ctx.createLinearGradient(
+        gradient.x1,
+        ROW_HEIGHT / 2,
+        gradient.x2,
+        ROW_HEIGHT / 2
+      );
+
+      linearGradient.addColorStop(0, histogramAccentColor);
+      linearGradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
+      ctx.fillStyle = linearGradient;
+    } catch (err) {
+      log('Orderbook/createLinearGradient', err, {
+        x1: gradient.x1,
+        y1: ROW_HEIGHT / 2,
+        x2: gradient.x2,
+        y2: ROW_HEIGHT / 2,
+      });
+
+      ctx.fillStyle = 'rgba(0, 0, 0, 0)';
+    }
+
+    ctx.beginPath();
+
+    ctx.roundRect
+      ? ctx.roundRect?.(
+          bar.x1,
+          getYFromIndex(idx, 'bar'),
+          bar.x2,
+          ROW_HEIGHT - 2,
+          histogramSide === 'right' ? [2, 0, 0, 2] : [0, 2, 2, 0]
+        )
+      : ctx.rect(bar.x1, getYFromIndex(idx, 'bar'), bar.x2, ROW_HEIGHT - 2);
+    ctx.fill();
+  };
+
+  const { decimal: LOCALE_DECIMAL_SEPARATOR } = useLocaleSeparators();
+
+  const formatOptions = {
+    decimalSeparator: LOCALE_DECIMAL_SEPARATOR,
+  };
+
+  const drawText = useCallback(
+    ({
+      ctx,
+      canvasWidth,
+      idx,
+      size,
+      price,
+      mine,
+      animationType,
+    }: {
+      ctx: CanvasRenderingContext2D;
+      canvasWidth: number;
+      idx: number;
+      size?: Nullable<number>;
+      price?: Nullable<number>;
+      mine?: Nullable<number>;
+      animationType?: 'remove' | 'add';
+    }) => {
+      const y = getYFromIndex(idx, 'text');
+      const rectY = getYFromIndex(idx, 'rect');
+
+      let startTime: number;
+      let textColor: string = Colors[theme].text2;
+      const animateColor = (timestamp: number) => {
+        if (!startTime) startTime = timestamp;
+        const animationTime = timestamp - startTime;
+
+        // Linear transition for demonstration purposes
+        textColor = animationType
+          ? {
+              add: Colors[theme].green,
+              remove: Colors[theme].red,
+            }[animationType]
+          : Colors[theme].text2;
+
+        if (animationTime < 500) {
+          // Continue the animation for 500ms (adjust as needed)
+          requestAnimationFrame(animateColor);
+        } else {
+          textColor = Colors[theme].text2;
+        }
+
+        if (animationType) {
+          // TODO: Clear rect and redraw text
+          // ctx.clearRect(0, rectY, canvasWidth, rectY + ROW_HEIGHT);
+        }
+      };
+
+      requestAnimationFrame(animateColor);
+
+      // Size text
+      if (size) {
+        ctx.fillStyle = textColor;
+        ctx.fillText(
+          MustBigNumber(size).toFormat(stepSizeDecimals ?? TOKEN_DECIMALS, formatOptions),
+          getXByColumn({ canvasWidth, colIdx: 0 }) - ROW_PADDING_RIGHT,
+          y
+        );
+      }
+
+      // Price text
+      if (price) {
+        ctx.fillStyle = textColor;
+        ctx.fillText(
+          MustBigNumber(price).toFormat(tickSizeDecimals ?? SMALL_USD_DECIMALS, formatOptions),
+          getXByColumn({ canvasWidth, colIdx: 1 }) - ROW_PADDING_RIGHT,
+          y
+        );
+      }
+
+      // Mine text
+      if (mine) {
+        ctx.fillStyle = Colors[theme].text2;
+        ctx.fillText(
+          MustBigNumber(mine).toFormat(stepSizeDecimals ?? TOKEN_DECIMALS, formatOptions),
+          getXByColumn({ canvasWidth, colIdx: 2 }) - ROW_PADDING_RIGHT,
+          y
+        );
+      }
+    },
+    [theme, LOCALE_DECIMAL_SEPARATOR, tickSizeDecimals, stepSizeDecimals]
+  );
+
+  /**
+   * Scale canvas using device pixel ratio to unblur drawn text
+   * @returns adjusted canvas width used in coordinates for drawing
+   **/
+  const canvasWidth = useMemo(() => {
+    const devicePixelRatio = window.devicePixelRatio || 1;
+
+    if (!canvas || !hoverCanvas) return 300 / devicePixelRatio;
+
+    const ctx = canvas.getContext('2d');
+    const hoverCtx = hoverCanvas.getContext('2d');
+
+    const backingStoreRatio =
+      // @ts-ignore
+      ctx.webkitBackingStorePixelRatio ||
+      // @ts-ignore
+      ctx.mozBackingStorePixelRatio ||
+      // @ts-ignore
+      ctx.msBackingStorePixelRatio ||
+      // @ts-ignore
+      ctx.oBackingStorePixelRatio ||
+      // @ts-ignore
+      ctx.backingStorePixelRatio ||
+      1;
+
+    const ratio = devicePixelRatio / backingStoreRatio;
+    canvas.width = canvas.offsetWidth * ratio;
+    canvas.height = canvas.offsetHeight * ratio;
+    hoverCanvas.width = hoverCanvas.offsetWidth * ratio;
+    hoverCanvas.height = hoverCanvas.offsetHeight * ratio;
+
+    if (hoverCtx) {
+      hoverCtx.scale(ratio, ratio);
+    }
+
+    if (ctx) {
+      ctx.scale(ratio, ratio);
+      ctx.font = `12.5px Satoshi`;
+      ctx.textAlign = 'right';
+      ctx.textBaseline = 'middle';
+      ctx.imageSmoothingQuality = 'high';
+    }
+
+    return canvas.width / ratio;
+  }, [canvas, hoverCanvas]);
+
+  //Handle Row Hover
+  const lastHoveredRowRef = useRef<number>();
+  const lastHoveredRow = lastHoveredRowRef.current;
+  useEffect(() => {
+    const hoverCtx = hoverCanvas?.getContext('2d');
+
+    if (!!!hoverCtx) return;
+
+    if (hoveredRow !== lastHoveredRow) {
+      const y = getYFromIndex(lastHoveredRow ?? 0, 'rect');
+      hoverCtx.clearRect(0, y, canvasWidth, ROW_HEIGHT);
+      lastHoveredRowRef.current = hoveredRow;
+    }
+
+    if (hoveredRow !== undefined) {
+      hoverCtx.fillStyle = 'rgba(255, 255, 255, 0.02)';
+      hoverCtx.fillRect(0, hoveredRow * 20, canvasWidth, 20);
+    }
+  }, [lastHoveredRow, hoveredRow]);
+
+  // Row Removal Animation state
+  const previousDataRef = useRef<{
+    [key: string]: number;
+  }>(Object.fromEntries(data.map((row: RowData) => [row.price, row.size])));
+
+  //Update histograms and row contents on data change
+  useEffect(() => {
+    const ctx = canvas?.getContext('2d');
+
+    if (!canvas || !ctx) return;
+
+    // Clear canvas before redraw
+    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+
+    // Draw histograms
+    data.forEach(({ depth, mine, price, size, side }, idx) => {
+      const histogramAccentColor =
+        side === 'bid' ? `hsla(159, 67%, 39%,  0.15)` : `hsla(360, 73%, 61%,  0.15)`;
+
+      // Depth Bar
+      drawBars({
+        value: depth,
+        canvasWidth,
+        ctx,
+        gradientMultiplier: 1.3,
+        histogramAccentColor,
+        idx,
+        histogramSide,
+      });
+
+      // Size Bar
+      drawBars({
+        value: size,
+        canvasWidth,
+        ctx,
+        gradientMultiplier: 5,
+        histogramAccentColor,
+        idx,
+        histogramSide,
+      });
+
+      const isNew = !previousDataRef.current[price];
+      const wasRemoved = previousDataRef.current[price] && !data.find((row) => row.price === price);
+
+      // Size, Price, Mine
+      drawText({
+        ctx,
+        canvasWidth,
+        idx,
+        size,
+        price,
+        mine,
+        animationType: isNew ? 'add' : wasRemoved ? 'remove' : undefined,
+      });
+    });
+
+    previousDataRef.current = Object.fromEntries(data.map((row: RowData) => [row.price, row.size]));
+  }, [
+    canvasWidth,
+    data,
+    drawText,
+    histogramRange,
+    stepSizeDecimals,
+    tickSizeDecimals,
+    histogramSide,
+  ]);
+
+  return { canvasRef, hoverCanvasRef };
+};
@@ -0,0 +1,39 @@
+import { type RefObject, useEffect, useState, Dispatch } from 'react';
+
+export const useSpreadRowScrollListener = ({
+  orderbookRef,
+  spreadRowRef,
+}: {
+  orderbookRef: RefObject<HTMLDivElement>;
+  spreadRowRef: RefObject<HTMLDivElement>;
+}) => {
+  const [displaySide, setDisplaySide] = useState<string>();
+
+  useEffect(() => {
+    const onScroll = () => {
+      if (spreadRowRef.current && orderbookRef.current) {
+        const { clientHeight } = orderbookRef.current;
+        const parent = orderbookRef.current.getBoundingClientRect();
+        const spread = spreadRowRef.current.getBoundingClientRect();
+        const spreadTop = spread.top - parent.top;
+        const spreadBottom = spread.bottom - parent.top;
+
+        if (spreadBottom > clientHeight) {
+          setDisplaySide('bottom');
+        } else if (spreadTop < 0) {
+          setDisplaySide('top');
+        } else {
+          setDisplaySide(undefined);
+        }
+      }
+    };
+
+    orderbookRef.current?.addEventListener('scroll', onScroll, false);
+
+    return () => {
+      orderbookRef.current?.removeEventListener('scroll', onScroll, false);
+    };
+  }, [orderbookRef.current, spreadRowRef.current]);
+
+  return displaySide;
+};
@@ -97,7 +97,7 @@ export const useAnalytics = () => {
  }, []);

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

  useEffect(() => {
    if (status) {
@@ -114,7 +114,6 @@ 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);

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

@@ -81,7 +80,6 @@ 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}
@@ -95,29 +93,6 @@ 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,
@@ -127,7 +102,6 @@ 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]
              );
@@ -223,7 +197,6 @@ export const notificationTypes: NotificationTypeConfig[] = [
                />
              ),
              toastSensitivity: 'foreground',
-              groupKey: NotificationType.SquidTransfer,
            },
            [isFinished]
          );
@@ -269,7 +242,6 @@ export const notificationTypes: NotificationTypeConfig[] = [
              },
            }),
            toastSensitivity: 'foreground',
-            groupKey: NotificationType.ReleaseUpdates,
          },
          []
        );
@@ -1,44 +0,0 @@
-import { useMemo } from 'react';
-import { shallowEqual, useSelector } from 'react-redux';
-
-import { DepthChartSeries, DepthChartDatum } from '@/constants/charts';
-
-import { getCurrentMarketOrderbook } from '@/state/perpetualsSelectors';
-
-import { MustBigNumber } from '@/lib/numbers';
-
-export const useOrderbookValuesForDepthChart = () => {
-  const orderbook = useSelector(getCurrentMarketOrderbook, shallowEqual);
-
-  return useMemo(() => {
-    const bids = (orderbook?.bids?.toArray() ?? [])
-      .filter(Boolean)
-      .map((datum) => ({ ...datum, seriesKey: DepthChartSeries.Bids } as DepthChartDatum));
-
-    const asks = (orderbook?.asks?.toArray() ?? [])
-      .filter(Boolean)
-      .map((datum) => ({ ...datum, seriesKey: DepthChartSeries.Asks } as DepthChartDatum));
-
-    const lowestBid = bids[bids.length - 1];
-    const highestBid = bids[0];
-    const lowestAsk = asks[0];
-    const highestAsk = asks[asks.length - 1];
-
-    const midMarketPrice = orderbook?.midPrice;
-    const spread = MustBigNumber(lowestAsk?.price ?? 0).minus(highestBid?.price ?? 0);
-    const spreadPercent = orderbook?.spreadPercent;
-
-    return {
-      bids,
-      asks,
-      lowestBid,
-      highestBid,
-      lowestAsk,
-      highestAsk,
-      midMarketPrice,
-      spread,
-      spreadPercent,
-      orderbook,
-    };
-  }, [orderbook]);
-};
@@ -198,13 +198,7 @@ export const useSubaccountContext = ({ localDydxWallet }: { localDydxWallet?: Lo
          );
          const ibcMsg: EncodeObject = {
            typeUrl: transaction.msgTypeUrl,
-            value: {
-              ...transaction.msg,
-              timeoutTimestamp: transaction.msg.timeoutTimestamp
-                // Squid returns timeoutTimestamp as Long, but the signer expects BigInt
-                ? BigInt(Long.fromValue(transaction.msg.timeoutTimestamp).toString())
-                : undefined,
-            },
+            value: transaction.msg,
          };

          return await compositeClient.send(
@@ -1 +1,3 @@
-<svg fill="none" height="10" viewBox="0 0 15 10" width="15" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m.321829 1.09389c.200562-.192959.469529-.298401.747791-.29315.27827.00525.54307.120763.73621.32115l5.194 5.5132 5.19397-5.5132c.0944-.10408.2088-.188152.3363-.247234.1275-.059081.2655-.091968.406-.096713.1404-.004746.2804.018748.4116.069088s.2509.126504.3522.223979c.1012.09747.1818.21427.2371.34347.0552.12921.084.26819.0845.40871.0006.14052-.0271.27972-.0813.40936s-.1339.24707-.2344.34534l-5.94997 6.3c-.09795.10163-.21538.18245-.34527.23766-.1299.05521-.26959.08367-.41073.08367s-.28083-.02846-.41073-.08367c-.12989-.05521-.24732-.13603-.34527-.23766l-5.950001-6.3c-.192962-.20056-.29840394-.46953-.29315364-.74779.00525031-.27827.12076264-.54307.32115364-.73621z" fill="currentColor" fill-rule="evenodd"/></svg>
+<svg 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>
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.95513 1.00169C7.89506 1.00645 7.83628 1.02054 7.78124 1.04337L1.31971 3.71042C1.2243 3.74983 1.14329 3.81414 1.08653 3.89553C1.02977 3.97691 0.999705 4.07186 1 4.16883V11.8366C1.00078 11.9327 1.03135 12.0265 1.08805 12.1069C1.14474 12.1873 1.22517 12.2508 1.31971 12.2898L7.78124 14.9568C7.85011 14.9853 7.92463 15 8 15C8.07536 15 8.14989 14.9853 8.21876 14.9568L14.6803 12.2898C14.7748 12.2508 14.8552 12.1873 14.9119 12.1069C14.9686 12.0265 14.9992 11.9327 15 11.8366V4.16883C15.0003 4.07186 14.9702 3.97691 14.9134 3.89553C14.8567 3.81414 14.7756 3.74983 14.6803 3.71042L8.21876 1.04337C8.13605 1.00911 8.04538 0.994778 7.95513 1.00169ZM8 2.04351L13.1378 4.16883L8 6.28894L2.86219 4.16883L8 2.04351ZM2.07693 4.93457L7.46153 7.15886V13.7328L2.07693 11.5084V4.93457ZM13.923 4.93457V11.5084L8.53846 13.7328V7.15886L13.923 4.93457Z" fill="currentColor"/>
+</svg>
@@ -19,6 +19,7 @@ export { default as CoinMarketCapIcon } from './logos/coinmarketcap.svg';
 export { default as CoinsIcon } from './coins.svg';
 export { default as CommentIcon } from './comment.svg';
 export { default as CopyIcon } from './copy.svg';
+export { default as CubeIcon } from './cube.svg';
 export { default as DepositIcon } from './deposit.svg';
 export { default as DepthChartIcon } from './depth-chart.svg';
 export { default as DiscordIcon } from './discord.svg';
@@ -50,7 +51,6 @@ 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,11 +1,7 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import styled, { css } from 'styled-components';

-import {
-  type Notification,
-  type NotificationDisplayData,
-  NotificationStatus,
-} from '@/constants/notifications';
+import { NotificationStatus } from '@/constants/notifications';
 import { ButtonShape, ButtonSize } from '@/constants/buttons';
 import { useNotifications } from '@/hooks/useNotifications';
 import { useBreakpoints } from '@/hooks/useBreakpoints';
@@ -17,31 +13,54 @@ 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;
 };

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

-  const { markUnseen, markSeen, onNotificationAction } = useNotifications();
+  const {
+    notifications,
+    getKey,
+    getDisplayData,
+    markUnseen,
+    markSeen,
+    isMenuOpen,
+    onNotificationAction,
+  } = useNotifications();
+
  const { isMobile } = useBreakpoints();
-  const hasMultipleToasts = notifications.length > 1;
+  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;

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

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

-const StyledToastArea = styled(ToastArea)<{ size: number }>`
-  position: relative;
-  ${({ size }) =>
-    size &&
-    css`
-      padding-bottom: calc(${size - 1} * 2px);
-    `}
+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 StyledToast = styled(Toast)<{ isStacked?: boolean; layer: number }>`
@@ -108,7 +133,7 @@ const StyledToast = styled(Toast)<{ isStacked?: boolean; layer: number }>`
          position: absolute;
          left: 0;
          top: calc(${layer} * 2px);
-          right: 0;
+          right: calc(${layer} * -2px);
        `
      : css`
          margin-bottom: 0.75rem;
@@ -120,7 +145,7 @@ const StyledToggleButton = styled(ToggleButton)<{ isPressed: boolean }>`
  pointer-events: auto;
  display: none;
  position: absolute;
-  top: -0.5rem;
+  top: 4px;
  left: calc(50% - 0.75rem);
  --button-width: 2rem;
  --button-height: 1rem;
@@ -1,71 +0,0 @@
-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,10 +56,6 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
    this.store = undefined;
  }

-  get isNobleClientConnected(): boolean {
-    return this.nobleClient?.isConnected ?? false;
-  }
-
  setStore(store: RootStore): void {
    this.store = store;
  }
@@ -173,10 +169,6 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
      return parsedObj as T;
    }

-    if (typeof x === 'bigint') {
-      return x.toString() as T;
-    }
-
    throw new Error(`Unsupported data type: ${typeof x}`);
  }

@@ -367,13 +359,7 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
    try {
      const ibcMsg = {
        typeUrl: params.msgTypeUrl, // '/ibc.applications.transfer.v1.MsgTransfer',
-        value: {
-          ...params.msg,
-          timeoutTimestamp: params.msg.timeoutTimestamp
-            // Squid returns timeoutTimestamp as Long, but the signer expects BigInt
-            ? BigInt(Long.fromValue(params.msg.timeoutTimestamp).toString())
-            : undefined,
-        },
+        value: params.msg,
      };
      const fee = await this.nobleClient.simulateTransaction([ibcMsg]);

@@ -423,13 +409,7 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
      );
      const ibcMsg: EncodeObject = {
        typeUrl: parsedIbcPayload.msgTypeUrl,
-        value: {
-          ...parsedIbcPayload.msg,
-          timeoutTimestamp: parsedIbcPayload.msg.timeoutTimestamp
-            // Squid returns timeoutTimestamp as Long, but the signer expects BigInt
-            ? BigInt(Long.fromValue(parsedIbcPayload.msg.timeoutTimestamp).toString())
-            : undefined,
-        },
+        value: parsedIbcPayload.msg,
      };

      const tx = await this.compositeClient.send(
@@ -11,16 +11,16 @@ class TestFlags {
    const params = new URLSearchParams(queryParamsString);

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

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

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

@@ -1,4 +1,4 @@
-import { createConfig, configureChains, mainnet, Chain } from 'wagmi';
+import { createConfig, configureChains, mainnet, Chain, Connector, usePublicClient } from 'wagmi';
 import { goerli } from 'wagmi/chains';

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

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

 const { chains, publicClient, webSocketPublicClient } = configureChains(
@@ -30,9 +30,6 @@ 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 = () => {
@@ -178,27 +175,8 @@ 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}`}
@@ -213,6 +191,19 @@ 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
@@ -336,13 +327,6 @@ Styled.Details = styled(Details)`
 `;

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

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

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

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

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

  useDocumentTitle(stringGetter({ key: STRING_KEYS.PORTFOLIO }));
@@ -125,28 +118,14 @@ export default () => {
                    },
                    {
                      value: PortfolioRoute.Positions,
-                      slotBefore: <Styled.Icon iconName={IconName.Positions} />,
-                      label: (
-                        <>
-                          {stringGetter({ key: STRING_KEYS.POSITIONS })}
-                          {numPositions > 0 && (
-                            <Tag type={TagType.Number}> {numPositions} </Tag>
-                          )}
-                        </>
-                      ),
+                      slotBefore: <Styled.Icon iconName={IconName.Cube} />,
+                      label: stringGetter({ key: STRING_KEYS.POSITIONS }),
                      href: PortfolioRoute.Positions,
                    },
                    {
                      value: PortfolioRoute.Orders,
                      slotBefore: <Styled.Icon iconName={IconName.OrderPending} />,
-                      label: (
-                        <>
-                          {stringGetter({ key: STRING_KEYS.ORDERS })}
-                          {numOrders > 0 && (
-                            <Tag type={TagType.Number}> {numOrders} </Tag>
-                          )}
-                        </>
-                      ),
+                      label: stringGetter({ key: STRING_KEYS.ORDERS }),
                      href: PortfolioRoute.Orders,
                    },
                    {
@@ -2,6 +2,7 @@ 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';

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

  return (
-    <Panel
+    <Styled.Panel
      slotHeader={
        <Styled.Header>
          <Styled.Title>
@@ -108,12 +109,21 @@ export const DYDXBalancePanel = () => {
          ]}
        />
      </Styled.Content>
-    </Panel>
+    </Styled.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,8 +24,6 @@ import { openDialog } from '@/state/dialogs';

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

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

  const { data, isLoading } = useQuery({
    enabled: !!dydxAddress,
-    queryKey: `launch_incentives_rewards_${dydxAddress ?? ''}_${SEASON_NUMBER}`,
+    queryKey: `launch_incentives_rewards_${dydxAddress ?? ''}`,
    queryFn: async () => {
      if (!dydxAddress) return undefined;
-      const resp = await fetch(
-        `https://cloud.chaoslabs.co/query/api/dydx/points/${dydxAddress}?n=${SEASON_NUMBER}`
-      );
+      const resp = await fetch(`https://cloud.chaoslabs.co/query/api/dydx/points/${dydxAddress}`);
      return (await resp.json())?.incentivePoints;
    },
    onError: (error: Error) => log('LaunchIncentives/fetchPoints', error),
@@ -89,7 +85,9 @@ const EstimatedRewards = () => {
          <Styled.Season>
            {stringGetter({
              key: STRING_KEYS.LAUNCH_INCENTIVES_SEASON_NUM,
-              params: { SEASON_NUMBER },
+              params: {
+                SEASON_NUMBER: 1,
+              },
            })}
          </Styled.Season>
        </div>
@@ -153,8 +151,15 @@ 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`
@@ -218,7 +223,7 @@ Styled.Column = styled.div`
 Styled.EstimatedRewardsCard = styled.div`
  ${layoutMixins.spacedRow}
  padding: 1rem 1.25rem;
-  min-width: 19rem;
+  min-width: 21.25rem;
  height: calc(100% - calc(1.5rem * 2));
  margin: 1.5rem;

@@ -7,6 +7,8 @@ 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';
@@ -26,7 +28,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 = ({ className }: { className?: string }) => {
+export const MigratePanel = () => {
  const { isNotTablet } = useBreakpoints();
  const stringGetter = useStringGetter();

@@ -43,7 +45,6 @@ export const MigratePanel = ({ className }: { className?: string }) => {

  return isNotTablet ? (
    <Styled.MigratePanel
-      className={className}
      slotHeader={<Styled.Title>{stringGetter({ key: STRING_KEYS.MIGRATE })}</Styled.Title>}
      slotRight={
        <Styled.MigrateAction>
@@ -73,7 +74,6 @@ export const MigratePanel = ({ className }: { className?: string }) => {
    </Styled.MigratePanel>
  ) : (
    <Styled.MigratePanel
-      className={className}
      slotHeader={
        <Styled.MobileMigrateHeader>
          <h3>
@@ -134,11 +134,17 @@ export const MigratePanel = ({ className }: { className?: string }) => {
 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`
@@ -151,7 +157,7 @@ Styled.Title = styled.h3`
 Styled.MigrateAction = styled.div`
  ${layoutMixins.flexEqualColumns}
  align-items: center;
-  margin: 1rem;
+  margin-right: 1rem;
  gap: 1rem;
  padding: 1rem;
  width: 100%;
@@ -191,7 +197,7 @@ Styled.MobileMigrateHeader = styled.div`
  font: var(--font-small-book);
  color: var(--color-text-0);

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

  h3 {
    ${layoutMixins.inlineRow}
@@ -1,6 +1,5 @@
 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';
@@ -52,7 +51,6 @@ export const RewardsHelpPanel = () => {
 const Styled: Record<string, AnyStyledComponent> = {};

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

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

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

-  @media ${breakpoints.notTablet} {
-    padding: 1.5rem 1.25rem;
-  }
-
  h3 {
    font: var(--font-medium-book);
    color: var(--color-text-2);
@@ -1,18 +1,15 @@
 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';
@@ -23,14 +20,12 @@ 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>
@@ -44,16 +39,13 @@ const RewardsPage = () => {

  return (
    <Styled.Page>
-      {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 />}
+      {import.meta.env.VITE_V3_TOKEN_ADDRESS && <MigratePanel />}

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

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

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

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

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

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

-Styled.MobileHeader = styled.header`
-  ${layoutMixins.contentSectionDetachedScrollable}
-  ${layoutMixins.stickyHeader}
-  z-index: 2;
-  padding: 1.25rem 0;
-  margin-bottom: -1.5rem;
-
-  font: var(--font-large-medium);
-  color: var(--color-text-2);
-  background-color: var(--color-layer-2);
-`;
-
 Styled.Panel = styled(Panel)`
-  height: fit-content;
+  --panel-paddingX: 1.5rem;
+
+  @media ${breakpoints.tablet} {
+    --panel-paddingY: 1.5rem;
+    --panel-content-paddingY: 1rem;
+  }
 `;

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

 Styled.Description = styled.div`
@@ -1,6 +1,4 @@
-import { useEffect, useState } from 'react';
-import { useSelector } from 'react-redux';
-import styled, { AnyStyledComponent } from 'styled-components';
+import { useState } from 'react';

 import { TradeLayouts } from '@/constants/layout';
 import { STRING_KEYS } from '@/constants/localization';
@@ -9,11 +7,9 @@ import { useStringGetter } from '@/hooks';

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

-import { Orderbook, orderbookMixins, OrderbookScrollBehavior } from '@/views/tables/Orderbook';
+import { Orderbook } from '@/views/Orderbook';
 import { LiveTrades } from '@/views/tables/LiveTrades';

-import { getCurrentMarketId } from '@/state/perpetualsSelectors';
-
 enum Tab {
  Orderbook = 'Orderbook',
  Trades = 'Trades',
@@ -27,22 +23,13 @@ const HISTOGRAM_SIDES_BY_LAYOUT = {

 export const VerticalPanel = ({ tradeLayout }: { tradeLayout: TradeLayouts }) => {
  const stringGetter = useStringGetter();
-
  const [value, setValue] = useState(Tab.Orderbook);
-  const [scrollBehavior, setScrollBehavior] = useState<OrderbookScrollBehavior>('snapToCenter');
-
-  const marketId = useSelector(getCurrentMarketId);
-
-  useEffect(() => {
-    setScrollBehavior('snapToCenter');
-  }, [marketId]);

  return (
-    <Styled.Tabs
+    <Tabs
      fullWidthTabs
      value={value}
      onValueChange={(value: Tab) => {
-        setScrollBehavior('snapToCenter');
        setValue(value);
      }}
      items={[
@@ -50,6 +37,7 @@ export const VerticalPanel = ({ tradeLayout }: { tradeLayout: TradeLayouts }) =>
          content: <Orderbook histogramSide={HISTOGRAM_SIDES_BY_LAYOUT[tradeLayout]} />,
          label: stringGetter({ key: STRING_KEYS.ORDERBOOK_SHORT }),
          value: Tab.Orderbook,
+          asChild: true,
        },
        {
          content: <LiveTrades histogramSide={HISTOGRAM_SIDES_BY_LAYOUT[tradeLayout]} />,
@@ -57,26 +45,7 @@ export const VerticalPanel = ({ tradeLayout }: { tradeLayout: TradeLayouts }) =>
          value: Tab.Trades,
        },
      ]}
-      onWheel={() => setScrollBehavior('free')}
      withTransitions={false}
-      isShowingOrderbook={value === Tab.Orderbook}
-      scrollBehavior={scrollBehavior}
-      // style={{
-      //   scrollSnapType: {
-      //     'snapToCenter': 'y mandatory',
-      //     'free': 'none',
-      //     'snapToCenterUnlessHovered': 'none',
-      //   }[scrollBehavior],
-      // }}
    />
  );
 };
-
-const Styled: Record<string, AnyStyledComponent> = {};
-
-Styled.Tabs = styled(Tabs)<{
-  isShowingOrderbook: boolean;
-  scrollBehavior: OrderbookScrollBehavior;
-}>`
-  ${orderbookMixins.scrollArea}
-`;
@@ -1,8 +1,10 @@
 import { createSelector } from 'reselect';

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

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

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

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

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

-/**
- * @param state
- * @returns boolean on whether an order status is considered open
- */
-const isOpenOrderStatus = (status: AbacusOrderStatuses) => {
-  return status !== AbacusOrderStatus.filled && status !== AbacusOrderStatus.cancelled;
-};
-
 /**
 * @param state
 * @returns Total numbers of the subaccount's open positions, open orders and fills
@@ -274,7 +266,8 @@ export const getTradeInfoNumbers = createSelector(
  [getExistingOpenPositions, getSubaccountOrders, getSubaccountFills, getSubaccountFundingPayments],
  (positions, orders, fills, fundingPayments) => ({
    numTotalPositions: positions?.length,
-    numTotalOpenOrders: orders?.filter((order) => isOpenOrderStatus(order.status)).length,
+    numTotalOpenOrders: orders?.filter((order) => order.status !== AbacusOrderStatus.cancelled)
+      .length,
    numTotalFills: fills?.length,
    numTotalFundingPayments: fundingPayments?.length,
  })
@@ -288,7 +281,8 @@ export const getCurrentMarketTradeInfoNumbers = createSelector(
  [getCurrentMarketOrders, getCurrentMarketFills, getCurrentMarketFundingPayments],
  (marketOrders, marketFills, marketFundingPayments) => {
    return {
-      numOpenOrders: marketOrders?.filter((order) => isOpenOrderStatus(order.status)).length,
+      numOpenOrders: marketOrders?.filter((order) => order.status !== AbacusOrderStatus.cancelled)
+        .length,
      numFills: marketFills?.length,
      numFundingPayments: marketFundingPayments?.length,
    };
@@ -26,12 +26,7 @@ export const calculateFundingRateHistory = createSelector(
    return data.map(({ effectiveAtMilliseconds, rate }) => ({
      time: effectiveAtMilliseconds,
      fundingRate: rate,
-      direction:
-        rate === 0
-          ? FundingDirection.None
-          : rate < 0
-          ? FundingDirection.ToLong
-          : FundingDirection.ToShort,
+      direction: rate < 0 ? FundingDirection.ToLong : FundingDirection.ToShort,
    }));
  }
 );
@@ -29,6 +29,7 @@ export const MarketDetails: React.FC = () => {
  if (!configs) return null;

  const {
+    basePositionNotional,
    tickSize,
    stepSize,
    initialMarginFraction,
@@ -113,11 +114,17 @@ export const MarketDetails: React.FC = () => {
      ),
    },
    {
-      key: 'initial-margin-fraction',
-      label: stringGetter({ key: STRING_KEYS.INITIAL_MARGIN_FRACTION }),
+      key: 'base-initial-margin-fraction',
+      label: stringGetter({ key: STRING_KEYS.BASE_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,317 @@
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { shallowEqual, useDispatch, useSelector } from 'react-redux';
+import styled, { css } from 'styled-components';
+
+import { Nullable } from '@/constants/abacus';
+import { STRING_KEYS } from '@/constants/localization';
+
+import { useBreakpoints, useStringGetter } from '@/hooks';
+import {
+  useCalculateOrderbookData,
+  useCenterOrderbook,
+  useDrawOrderbook,
+  useSpreadRowScrollListener,
+} from '@/hooks/orderbook';
+
+import { calculateCanViewAccount } from '@/state/accountCalculators';
+import { getCurrentMarketAssetData } from '@/state/assetsSelectors';
+import { getCurrentMarketConfig } from '@/state/perpetualsSelectors';
+import { setTradeFormInputs } from '@/state/inputs';
+import { getCurrentInput } from '@/state/inputsSelectors';
+
+import { Canvas } from '@/components/Canvas';
+import { LoadingSpace } from '@/components/Loading/LoadingSpinner';
+import { Tag } from '@/components/Tag';
+
+import { ROW_HEIGHT, Row, type RowData } from './Orderbook/OrderbookRow';
+import { SpreadRow } from './Orderbook/SpreadRow';
+import { Output, OutputType } from '@/components/Output';
+
+const ORDERBOOK_MAX_ROWS_PER_SIDE = 35;
+
+type ElementProps = {
+  maxRowsPerSide?: number;
+  layout?: 'vertical' | 'horizontal';
+};
+
+type StyleProps = {
+  hideHeader?: boolean;
+  histogramSide?: 'left' | 'right';
+  className?: string;
+};
+
+const getEmptyRow = (side: 'bid' | 'ask') => ({
+  side,
+  size: undefined,
+  price: undefined,
+  offset: 0,
+  depth: undefined,
+});
+
+export const Orderbook = ({
+  histogramSide,
+  maxRowsPerSide = ORDERBOOK_MAX_ROWS_PER_SIDE,
+}: ElementProps & StyleProps) => {
+  const dispatch = useDispatch();
+  const stringGetter = useStringGetter();
+  const { isTablet } = useBreakpoints();
+
+  const showMineColumn = useSelector(calculateCanViewAccount) && !isTablet;
+  const currentInput = useSelector(getCurrentInput);
+  const { id = '' } = useSelector(getCurrentMarketAssetData, shallowEqual) ?? {};
+  const { stepSizeDecimals, tickSizeDecimals } =
+    useSelector(getCurrentMarketConfig, shallowEqual) ?? {};
+
+  const { asks, bids, spread, spreadPercent, histogramRange, hasOrderbook } =
+    useCalculateOrderbookData({
+      maxRowsPerSide,
+    });
+
+  const { askLevels, asksSlice, bidLevels, bidsSlice, numRows } = useMemo(() => {
+    const bidsSlice = bids.slice(0, maxRowsPerSide).reverse();
+    const asksSlice = asks.slice(0, maxRowsPerSide);
+
+    const numRows = maxRowsPerSide; // Math.max(bidsSlice.length, asksSlice.length);
+
+    if (asksSlice.length < numRows) {
+      const emptyRows = new Array(numRows - asksSlice.length).fill(getEmptyRow('ask'));
+      asksSlice.push(...emptyRows);
+    }
+
+    if (bidsSlice.length < numRows) {
+      const emptyRows = new Array(numRows - bidsSlice.length).fill(getEmptyRow('bid'));
+      bidsSlice.unshift(...emptyRows);
+    }
+
+    const askLevels = new Set(asksSlice.map(({ price }: { price: number }) => price));
+    const bidLevels = new Set(bidsSlice.map(({ price }: { price: number }) => price));
+
+    return { askLevels, asksSlice, bidLevels, bidsSlice, numRows };
+  }, [asks, bids]);
+
+  const orderbookRef = useRef<HTMLDivElement>(null);
+  useCenterOrderbook({ orderbookRef, marketId: id });
+
+  /**
+   * Display top or bottom spreadRow when center spreadRow is off screen
+   */
+  const spreadRowRef = useRef<HTMLDivElement>(null);
+
+  const displaySide = useSpreadRowScrollListener({
+    orderbookRef,
+    spreadRowRef,
+  });
+
+  /**
+   * Row action and hover
+   */
+  const onRowAction = useCallback(
+    (price: Nullable<number>) => {
+      if (currentInput === 'trade' && price) {
+        dispatch(setTradeFormInputs({ limitPriceInput: price?.toString() }));
+      }
+    },
+    [currentInput]
+  );
+
+  const [hoveredRow, setHoveredRow] = useState<{
+    idx: number;
+    side: 'bid' | 'ask';
+  }>();
+
+  const { canvasRef: asksCanvasRef, hoverCanvasRef: asksHoverRef } = useDrawOrderbook({
+    data: asksSlice.reverse(),
+    histogramRange,
+    stepSizeDecimals,
+    tickSizeDecimals,
+    hoveredRow: hoveredRow?.side === 'ask' ? hoveredRow.idx : undefined,
+    histogramSide,
+  });
+
+  const { canvasRef: bidsCanvasRef, hoverCanvasRef: bidsHoverRef } = useDrawOrderbook({
+    data: bidsSlice.reverse(),
+    histogramRange,
+    stepSizeDecimals,
+    tickSizeDecimals,
+    hoveredRow: hoveredRow?.side === 'bid' ? hoveredRow.idx : undefined,
+    histogramSide,
+  });
+
+  return (
+    <$OrderbookContainer>
+      <$OrderbookContent isLoading={!hasOrderbook}>
+        <$Header>
+          <span>
+            {stringGetter({ key: STRING_KEYS.SIZE })} {id && <Tag>{id}</Tag>}
+          </span>
+          <span>
+            {stringGetter({ key: STRING_KEYS.PRICE })} <Tag>USD</Tag>
+          </span>
+          <span>{showMineColumn && stringGetter({ key: STRING_KEYS.MINE })}</span>
+        </$Header>
+        {displaySide === 'top' && (
+          <$SpreadRow
+            side="top"
+            spread={spread}
+            spreadPercent={spreadPercent}
+            tickSizeDecimals={tickSizeDecimals}
+          />
+        )}
+        <$OrderbookWrapper ref={orderbookRef}>
+          {!hasOrderbook ? (
+            <LoadingSpace id="orderbook" />
+          ) : (
+            <>
+              <$OrderbookSideContainer
+                numRows={numRows}
+                side="ask"
+                onMouseLeave={() => setHoveredRow(undefined)}
+              >
+                <$OrderbookCanvas ref={asksCanvasRef} width="100%" height={numRows * ROW_HEIGHT} />
+                <$HoverCanvas ref={asksHoverRef} width="100%" height={numRows * ROW_HEIGHT} />
+                <$HoverRows>
+                  {asksSlice.map((row: RowData, idx) =>
+                    row.price ? (
+                      <$Row
+                        key={idx}
+                        title={`${row.price}`}
+                        onClick={() => onRowAction(row.price)}
+                        onMouseOver={(e) => setHoveredRow({ idx, side: 'ask' })}
+                      >
+                        <span></span>
+                        <span></span>
+                        <span>
+                          <Output
+                            type={OutputType.Fiat}
+                            value={row.price}
+                            fractionDigits={tickSizeDecimals}
+                          />
+                        </span>
+                      </$Row>
+                    ) : (
+                      <$Row key={idx} onMouseOver={(e) => setHoveredRow(undefined)} />
+                    )
+                  )}
+                </$HoverRows>
+              </$OrderbookSideContainer>
+
+              <SpreadRow
+                ref={spreadRowRef}
+                spread={spread}
+                spreadPercent={spreadPercent}
+                tickSizeDecimals={tickSizeDecimals}
+              />
+
+              <$OrderbookSideContainer
+                numRows={numRows}
+                side="bid"
+                onMouseLeave={() => setHoveredRow(undefined)}
+              >
+                <$OrderbookCanvas ref={bidsCanvasRef} width="100%" height={numRows * ROW_HEIGHT} />
+                <$HoverCanvas ref={bidsHoverRef} width="100%" height={numRows * ROW_HEIGHT} />
+                <$HoverRows>
+                  {bidsSlice.map((row: RowData, idx) =>
+                    row.price ? (
+                      <$Row
+                        key={idx}
+                        title={`${row.price}`}
+                        onClick={() => onRowAction(row.price)}
+                        onMouseOver={(e) => setHoveredRow({ idx, side: 'bid' })}
+                      >
+                        <span></span>
+                        <span></span>
+                        <span>
+                          <Output
+                            type={OutputType.Fiat}
+                            value={row.price}
+                            fractionDigits={tickSizeDecimals}
+                          />
+                        </span>
+                      </$Row>
+                    ) : (
+                      <$Row key={idx} onMouseOver={(e) => setHoveredRow(undefined)} />
+                    )
+                  )}
+                </$HoverRows>
+              </$OrderbookSideContainer>
+            </>
+          )}
+        </$OrderbookWrapper>
+        {displaySide === 'bottom' && (
+          <$SpreadRow
+            side="bottom"
+            spread={spread}
+            spreadPercent={spreadPercent}
+            tickSizeDecimals={tickSizeDecimals}
+          />
+        )}
+      </$OrderbookContent>
+    </$OrderbookContainer>
+  );
+};
+
+const $OrderbookContainer = styled.div`
+  display: flex;
+  flex: 1 1 0%;
+  flex-direction: column;
+  overflow: hidden;
+`;
+
+const $OrderbookContent = styled.div<{ isLoading?: boolean }>`
+  max-height: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+
+  ${({ isLoading }) => isLoading && 'flex: 1;'}
+`;
+
+const $Header = styled(Row)`
+  height: 2rem;
+  border-bottom: 1px solid var(--color-border);
+  color: var(--color-text-0);
+`;
+
+const $OrderbookWrapper = styled.div`
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 0%;
+`;
+
+const $OrderbookSideContainer = styled.div<{ numRows: number; side: 'bid' | 'ask' }>`
+  ${({ numRows }) => css`
+    min-height: calc(${numRows} * 1.25rem);
+  `}
+
+  ${({ side }) => css`
+    --accent-color: ${side === 'bid' ? 'var(--color-positive)' : 'var(--color-negative)'};
+  `}
+  position: relative;
+`;
+
+const $OrderbookCanvas = styled(Canvas)`
+  width: 100%;
+  height: 100%;
+
+  position: absolute;
+  top: 0;
+  right: 0;
+
+  font-feature-settings: var(--fontFeature-monoNumbers);
+`;
+
+const $HoverCanvas = styled($OrderbookCanvas)``;
+
+const $HoverRows = styled.div`
+  position: absolute;
+  width: 100%;
+`;
+
+const $Row = styled(Row)<{ onClick?: () => void }>`
+  ${({ onClick }) => (onClick ? 'cursor: pointer;' : 'cursor: default;')}
+`;
+
+const $SpreadRow = styled(SpreadRow)`
+  position: absolute;
+`;
@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+
+import { OrderbookLine } from '@/constants/abacus';
+export type RowData = OrderbookLine & { side: 'bid' | 'ask'; mine?: number };
+
+export const ROW_HEIGHT = 20;
+export const ROW_PADDING_RIGHT = 8;
+
+export const Row = styled.div`
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  height: ${ROW_HEIGHT}px;
+  min-height: ${ROW_HEIGHT}px;
+
+  font: var(--font-mini-book);
+
+  position: relative;
+  padding-right: 0.5rem;
+
+  > span {
+    flex: 1 1 0%;
+    text-align: right;
+    padding-bottom: 2px;
+  }
+`;
@@ -0,0 +1,61 @@
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import BigNumber from 'bignumber.js';
+
+import type { Nullable } from '@/constants/abacus';
+import { STRING_KEYS } from '@/constants/localization';
+import { useStringGetter } from '@/hooks';
+
+import { Output, OutputType } from '@/components/Output';
+import { WithTooltip } from '@/components/WithTooltip';
+
+import { Row } from './OrderbookRow';
+
+type StyleProps = {
+  side?: 'top' | 'bottom';
+};
+
+type ElementProps = {
+  spread: BigNumber | null;
+  spreadPercent: Nullable<number>;
+  tickSizeDecimals: Nullable<number>;
+};
+
+export const SpreadRow = forwardRef<HTMLDivElement, StyleProps & ElementProps>(
+  ({ side, spread, spreadPercent, tickSizeDecimals }, ref) => {
+    const stringGetter = useStringGetter();
+
+    return (
+      <$SpreadRow ref={ref} side={side}>
+        <span>
+          <WithTooltip tooltip="spread">
+            {stringGetter({ key: STRING_KEYS.ORDERBOOK_SPREAD })}
+          </WithTooltip>
+        </span>
+        <span>
+          <Output type={OutputType.Number} value={spread} fractionDigits={tickSizeDecimals} />
+        </span>
+        <span>
+          <Output type={OutputType.Percent} value={spreadPercent} />
+        </span>
+      </$SpreadRow>
+    );
+  }
+);
+
+const $SpreadRow = styled(Row)<{ side?: 'top' | 'bottom' }>`
+  height: 2rem;
+  border-top: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--color-border);
+
+  ${({ side }) =>
+    side &&
+    {
+      top: css`
+        border-top: none;
+      `,
+      bottom: css`
+        border-bottom: none;
+      `,
+    }[side]}
+`;
@@ -1,20 +1,14 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import styled, { AnyStyledComponent, css, keyframes } from 'styled-components';
 import { useSelector, shallowEqual } from 'react-redux';
-import { OrderSide } from '@dydxprotocol/v4-client-js';

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

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

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

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

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

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

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

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

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

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

  // Chart state

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

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

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

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

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

@@ -221,7 +256,7 @@ export const DepthChart = ({
            }}
            onPointerUp={(point) => point && onChartClick?.(getChartPoint(point))}
            onPointerMove={(point) => point && setChartPointAtPointer(getChartPoint(point))}
-            onPointerPressedChange={(isPointerPressed) => setIsPointerPressed(isPointerPressed)}
+            onPointerPressedChange={setIsPointerPressed}
          >
            <Axis
              orientation="bottom"
@@ -328,7 +363,7 @@ export const DepthChart = ({
                <Styled.XAxisLabelOutput
                  type={OutputType.Fiat}
                  value={
-                    isEditingOrder && chartPointAtPointer
+                    isEditingOrder
                      ? chartPointAtPointer.price
                      : tooltipData!.nearestDatum?.datum.price
                  }
@@ -339,8 +374,8 @@ export const DepthChart = ({
                      [DepthChartSeries.Bids]: 'var(--color-positive)',
                      [DepthChartSeries.MidMarket]: 'var(--color-layer-6)',
                    }[
-                      isEditingOrder && chartPointAtPointer
-                        ? SERIES_KEY_FOR_ORDER_SIDE[chartPointAtPointer.side]
+                      isEditingOrder
+                        ? seriesKeyForOrderSide[chartPointAtPointer.side]
                        : (tooltipData!.nearestDatum?.key as DepthChartSeries)
                    ]
                  }
@@ -354,7 +389,7 @@ export const DepthChart = ({
                  <Styled.YAxisLabelOutput
                    type={OutputType.Asset}
                    value={
-                      isEditingOrder && chartPointAtPointer
+                      isEditingOrder
                        ? chartPointAtPointer.size
                        : tooltipData!.nearestDatum?.datum.depth
                    }
@@ -365,8 +400,8 @@ export const DepthChart = ({
                        [DepthChartSeries.Bids]: 'var(--color-positive)',
                        [DepthChartSeries.MidMarket]: 'var(--color-layer-6)',
                      }[
-                        isEditingOrder && chartPointAtPointer
-                          ? SERIES_KEY_FOR_ORDER_SIDE[chartPointAtPointer.side]
+                        isEditingOrder
+                          ? seriesKeyForOrderSide[chartPointAtPointer.side]
                          : (tooltipData!.nearestDatum?.key as DepthChartSeries)
                      ]
                    }
@@ -375,22 +410,181 @@ export const DepthChart = ({
              }
              snapTooltipToDatumX={!isEditingOrder}
              snapTooltipToDatumY={isEditingOrder ? false : isMobile}
-              renderTooltip={({ tooltipData, colorScale }) =>
-                chartPointAtPointer && (
-                  <DepthChartTooltipContent
-                    {...{
-                      tooltipData,
-                      colorScale,
-                      isEditingOrder,
-                      chartPointAtPointer,
-                      stringGetter,
-                      selectedLocale,
-                      stepSizeDecimals,
-                      tickSizeDecimals,
-                    }}
-                  />
-                )
-              }
+              renderTooltip={({ tooltipData, colorScale }) => {
+                const { nearestDatum } = tooltipData || {};
+
+                if (!isEditingOrder && !nearestDatum?.datum) return null;
+
+                return (
+                  <TooltipContent
+                    accentColor={colorScale?.(
+                      isEditingOrder
+                        ? seriesKeyForOrderSide[chartPointAtPointer.side]
+                        : nearestDatum.key
+                    )}
+                  >
+                    <h4>
+                      {isEditingOrder
+                        ? 'Release mouse to edit order'
+                        : {
+                            [DepthChartSeries.Bids]: 'Bids',
+                            [DepthChartSeries.Asks]: 'Asks',
+                            [DepthChartSeries.MidMarket]: 'Mid-Market',
+                          }[nearestDatum.key]}
+                    </h4>
+
+                    <Details
+                      layout="column"
+                      items={
+                        isEditingOrder
+                          ? [
+                              {
+                                key: 'side',
+                                label: stringGetter({ key: STRING_KEYS.SIDE }),
+                                value: (
+                                  <Output
+                                    type={OutputType.Text}
+                                    value={
+                                      {
+                                        [OrderSide.BUY]: stringGetter({
+                                          key: STRING_KEYS.BUY,
+                                        }),
+                                        [OrderSide.SELL]: stringGetter({
+                                          key: STRING_KEYS.SELL,
+                                        }),
+                                      }[chartPointAtPointer.side]
+                                    }
+                                  />
+                                ),
+                              },
+                              {
+                                key: 'limitPrice',
+                                label: stringGetter({ key: STRING_KEYS.LIMIT_PRICE }),
+                                value: (
+                                  <Output
+                                    type={OutputType.Fiat}
+                                    value={chartPointAtPointer.price}
+                                    useGrouping={false}
+                                  />
+                                ),
+                              },
+                              {
+                                key: 'size',
+                                label: stringGetter({ key: STRING_KEYS.AMOUNT }),
+                                value: (
+                                  <Output
+                                    type={OutputType.Asset}
+                                    value={chartPointAtPointer.size}
+                                    fractionDigits={stepSizeDecimals}
+                                    tag={id}
+                                    useGrouping={false}
+                                  />
+                                ),
+                              },
+                            ]
+                          : nearestDatum?.key === DepthChartSeries.MidMarket
+                          ? [
+                              {
+                                key: 'midMarketPrice',
+                                // label: stringGetter({ key: STRING_KEYS.ORDERBOOK_MID_MARKET_PRICE }),
+                                label: stringGetter({ key: STRING_KEYS.PRICE }),
+                                value: (
+                                  <Output
+                                    type={OutputType.Fiat}
+                                    value={midMarketPrice}
+                                    useGrouping={false}
+                                  />
+                                ),
+                              },
+                              {
+                                key: 'spread',
+                                label: stringGetter({ key: STRING_KEYS.ORDERBOOK_SPREAD }),
+                                value: (
+                                  <>
+                                    <Output
+                                      type={OutputType.Fiat}
+                                      value={spread}
+                                      fractionDigits={tickSizeDecimals}
+                                      useGrouping={false}
+                                    />
+                                    <Output
+                                      type={OutputType.SmallPercent}
+                                      value={spreadPercent}
+                                      withParentheses
+                                    />
+                                  </>
+                                ),
+                              },
+                            ]
+                          : [
+                              {
+                                key: 'price',
+                                label: stringGetter({ key: STRING_KEYS.PRICE }),
+                                value: (
+                                  <>
+                                    {nearestDatum &&
+                                      {
+                                        [DepthChartSeries.Bids]: '≥',
+                                        [DepthChartSeries.Asks]: '≤',
+                                      }[nearestDatum.key]}
+                                    <Output
+                                      type={OutputType.Fiat}
+                                      value={nearestDatum?.datum.price}
+                                      useGrouping={false}
+                                    />
+                                  </>
+                                ),
+                              },
+                              {
+                                key: 'depth',
+                                label: stringGetter({ key: STRING_KEYS.TOTAL_SIZE }),
+                                value: (
+                                  <Output
+                                    type={OutputType.Asset}
+                                    value={nearestDatum?.datum.depth}
+                                    fractionDigits={stepSizeDecimals}
+                                    tag={id}
+                                    useGrouping={false}
+                                  />
+                                ),
+                              },
+                              {
+                                key: 'cost',
+                                label: stringGetter({ key: STRING_KEYS.TOTAL_COST }),
+                                value: (
+                                  <Output
+                                    useGrouping
+                                    type={OutputType.Fiat}
+                                    value={nearestDatum?.datum.price * nearestDatum?.datum.depth}
+                                  />
+                                ),
+                              },
+                              {
+                                key: 'priceImpact',
+                                label: stringGetter({ key: STRING_KEYS.PRICE_IMPACT }),
+                                value: (
+                                  <Output
+                                    useGrouping
+                                    type={OutputType.Percent}
+                                    value={{
+                                      [DepthChartSeries.Asks]: () =>
+                                        MustBigNumber(nearestDatum.datum.price)
+                                          .minus(lowestAsk.price)
+                                          .div(nearestDatum.datum.price),
+                                      [DepthChartSeries.Bids]: () =>
+                                        MustBigNumber(highestBid.price)
+                                          .minus(nearestDatum.datum.price)
+                                          .div(highestBid.price),
+                                    }[nearestDatum.key]()}
+                                  />
+                                ),
+                              },
+                            ]
+                      }
+                    />
+                  </TooltipContent>
+                );
+              }}
            />
          </XYChartWithPointerEvents>
        </EventEmitterProvider>
@@ -1,220 +0,0 @@
-import { useMemo } from 'react';
-import { OrderSide } from '@dydxprotocol/v4-client-js';
-import type { RenderTooltipParams } from '@visx/xychart/lib/components/Tooltip';
-import { shallowEqual, useSelector } from 'react-redux';
-
-import type { Nullable } from '@/constants/abacus';
-import {
-  DepthChartDatum,
-  DepthChartPoint,
-  DepthChartSeries,
-  SERIES_KEY_FOR_ORDER_SIDE,
-} from '@/constants/charts';
-import { STRING_KEYS } from '@/constants/localization';
-
-import { useStringGetter } from '@/hooks';
-import { useOrderbookValuesForDepthChart } from '@/hooks/useOrderbookValues';
-
-import { TooltipContent } from '@/components/visx/TooltipContent';
-import { Details } from '@/components/Details';
-import { Output, OutputType } from '@/components/Output';
-
-import { getCurrentMarketAssetData } from '@/state/assetsSelectors';
-
-import { MustBigNumber } from '@/lib/numbers';
-
-type DepthChartTooltipProps = {
-  chartPointAtPointer: DepthChartPoint;
-  isEditingOrder?: boolean;
-  stepSizeDecimals: Nullable<number>;
-  tickSizeDecimals: Nullable<number>;
-} & Pick<RenderTooltipParams<DepthChartDatum>, 'colorScale' | 'tooltipData'>;
-
-export const DepthChartTooltipContent = ({
-  chartPointAtPointer,
-  colorScale,
-  isEditingOrder,
-  stepSizeDecimals,
-  tickSizeDecimals,
-  tooltipData,
-}: DepthChartTooltipProps) => {
-  const { nearestDatum } = tooltipData || {};
-  const stringGetter = useStringGetter();
-  const { spread, spreadPercent, midMarketPrice } = useOrderbookValuesForDepthChart();
-  const { id = '' } = useSelector(getCurrentMarketAssetData, shallowEqual) ?? {};
-
-  const priceImpact = useMemo(() => {
-    if (nearestDatum) {
-      const depthChartSeries = nearestDatum.key as DepthChartSeries;
-
-      return {
-        [DepthChartSeries.Bids]: MustBigNumber(nearestDatum?.datum.price)
-          .minus(chartPointAtPointer.price)
-          .div(nearestDatum?.datum.price),
-        [DepthChartSeries.Asks]: MustBigNumber(chartPointAtPointer.price)
-          .minus(nearestDatum?.datum.price)
-          .div(chartPointAtPointer.price),
-        [DepthChartSeries.MidMarket]: undefined,
-      }[depthChartSeries];
-    }
-    return undefined;
-  }, [nearestDatum, chartPointAtPointer.price]);
-
-  if (!isEditingOrder && !nearestDatum?.datum) return null;
-
-  return (
-    <TooltipContent
-      accentColor={
-        nearestDatum?.key &&
-        colorScale?.(
-          isEditingOrder ? SERIES_KEY_FOR_ORDER_SIDE[chartPointAtPointer.side] : nearestDatum.key
-        )
-      }
-    >
-      <h4>
-        {isEditingOrder
-          ? stringGetter({ key: STRING_KEYS.RELEASE_TO_EDIT })
-          : nearestDatum &&
-            {
-              [DepthChartSeries.Bids]: stringGetter({ key: STRING_KEYS.BIDS }),
-              [DepthChartSeries.Asks]: stringGetter({ key: STRING_KEYS.ASKS }),
-              [DepthChartSeries.MidMarket]: stringGetter({ key: STRING_KEYS.MID_MARKET }),
-            }[nearestDatum.key]}
-      </h4>
-
-      <Details
-        layout="column"
-        items={
-          isEditingOrder
-            ? [
-                {
-                  key: 'side',
-                  label: stringGetter({ key: STRING_KEYS.SIDE }),
-                  value: (
-                    <Output
-                      type={OutputType.Text}
-                      value={
-                        {
-                          [OrderSide.BUY]: stringGetter({
-                            key: STRING_KEYS.BUY,
-                          }),
-                          [OrderSide.SELL]: stringGetter({
-                            key: STRING_KEYS.SELL,
-                          }),
-                        }[chartPointAtPointer.side]
-                      }
-                    />
-                  ),
-                },
-                {
-                  key: 'limitPrice',
-                  label: stringGetter({ key: STRING_KEYS.LIMIT_PRICE }),
-                  value: (
-                    <Output
-                      type={OutputType.Fiat}
-                      value={chartPointAtPointer.price}
-                      useGrouping={false}
-                    />
-                  ),
-                },
-                {
-                  key: 'size',
-                  label: stringGetter({ key: STRING_KEYS.AMOUNT }),
-                  value: (
-                    <Output
-                      type={OutputType.Asset}
-                      value={chartPointAtPointer.size}
-                      fractionDigits={stepSizeDecimals}
-                      tag={id}
-                      useGrouping={false}
-                    />
-                  ),
-                },
-              ]
-            : nearestDatum?.key === DepthChartSeries.MidMarket
-            ? [
-                {
-                  key: 'midMarketPrice',
-                  label: stringGetter({ key: STRING_KEYS.PRICE }),
-                  value: (
-                    <Output type={OutputType.Fiat} value={midMarketPrice} useGrouping={false} />
-                  ),
-                },
-                {
-                  key: 'spread',
-                  label: stringGetter({ key: STRING_KEYS.ORDERBOOK_SPREAD }),
-                  value: (
-                    <>
-                      <Output
-                        type={OutputType.Fiat}
-                        value={spread}
-                        fractionDigits={tickSizeDecimals}
-                        useGrouping={false}
-                      />
-                      <Output
-                        type={OutputType.SmallPercent}
-                        value={spreadPercent}
-                        withParentheses
-                      />
-                    </>
-                  ),
-                },
-              ]
-            : [
-                {
-                  key: 'price',
-                  label: stringGetter({ key: STRING_KEYS.PRICE }),
-                  value: (
-                    <>
-                      {nearestDatum &&
-                        {
-                          [DepthChartSeries.Bids]: '≥',
-                          [DepthChartSeries.Asks]: '≤',
-                        }[nearestDatum.key]}
-                      <Output
-                        type={OutputType.Fiat}
-                        value={nearestDatum?.datum.price}
-                        useGrouping={false}
-                      />
-                    </>
-                  ),
-                },
-                {
-                  key: 'depth',
-                  label: stringGetter({ key: STRING_KEYS.TOTAL_SIZE }),
-                  value: (
-                    <Output
-                      type={OutputType.Asset}
-                      value={nearestDatum?.datum.depth}
-                      fractionDigits={stepSizeDecimals}
-                      tag={id}
-                      useGrouping={false}
-                    />
-                  ),
-                },
-                {
-                  key: 'cost',
-                  label: stringGetter({ key: STRING_KEYS.TOTAL_COST }),
-                  value: (
-                    <Output
-                      useGrouping
-                      type={OutputType.Fiat}
-                      value={
-                        nearestDatum
-                          ? nearestDatum?.datum.price * nearestDatum?.datum.depth
-                          : undefined
-                      }
-                    />
-                  ),
-                },
-                {
-                  key: 'priceImpact',
-                  label: stringGetter({ key: STRING_KEYS.PRICE_IMPACT }),
-                  value: <Output useGrouping type={OutputType.Percent} value={priceImpact} />,
-                },
-              ]
-        }
-      />
-    </TooltipContent>
-  );
-};
@@ -3,27 +3,39 @@ import { shallowEqual, useSelector } from 'react-redux';
 import styled, { type AnyStyledComponent, css } from 'styled-components';
 import { curveMonotoneX, curveStepAfter } from '@visx/curve';

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

 import { breakpoints } from '@/styles';

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

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

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

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

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

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

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

@@ -1,107 +0,0 @@
-import type { RenderTooltipParams } from '@visx/xychart/lib/components/Tooltip';
-import { TooltipContent } from '@/components/visx/TooltipContent';
-
-import { FundingRateResolution, type FundingChartDatum } from '@/constants/charts';
-import { STRING_KEYS } from '@/constants/localization';
-import { FundingDirection } from '@/constants/markets';
-import { useStringGetter } from '@/hooks';
-
-import { Details, DetailsItem } from '@/components/Details';
-import { Output, OutputType, ShowSign } from '@/components/Output';
-
-type FundingChartTooltipProps = {
-  fundingRateView: FundingRateResolution;
-  latestDatum: FundingChartDatum;
-} & Pick<RenderTooltipParams<FundingChartDatum>, 'tooltipData'>;
-
-export const FundingChartTooltipContent = ({
-  fundingRateView,
-  latestDatum,
-  tooltipData,
-}: FundingChartTooltipProps) => {
-  const { nearestDatum } = tooltipData || {};
-  const stringGetter = useStringGetter();
-
-  const tooltipDatum = nearestDatum?.datum ?? latestDatum;
-  const isShowingCurrentFundingRate = tooltipDatum === latestDatum;
-
-  return (
-    <TooltipContent
-      accentColor={
-        {
-          [FundingDirection.ToLong]: 'var(--color-negative)',
-          [FundingDirection.ToShort]: 'var(--color-positive)',
-          [FundingDirection.None]: 'var(--color-layer-6)',
-        }[tooltipDatum.direction]
-      }
-    >
-      <h4>
-        {isShowingCurrentFundingRate
-          ? stringGetter({ key: STRING_KEYS.CURRENT_FUNDING_RATE })
-          : stringGetter({ key: STRING_KEYS.HISTORICAL_FUNDING_RATE })}
-      </h4>
-
-      <Details
-        layout="column"
-        items={
-          [
-            {
-              key: 'direction',
-              label: stringGetter({ key: STRING_KEYS.DIRECTION }),
-              value: (
-                <Output
-                  type={OutputType.Text}
-                  value={
-                    {
-                      [FundingDirection.ToLong]: `${stringGetter({
-                        key: STRING_KEYS.SHORT_POSITION_SHORT,
-                      })} → ${stringGetter({
-                        key: STRING_KEYS.LONG_POSITION_SHORT,
-                      })}`,
-                      [FundingDirection.ToShort]: `${stringGetter({
-                        key: STRING_KEYS.LONG_POSITION_SHORT,
-                      })} → ${stringGetter({
-                        key: STRING_KEYS.SHORT_POSITION_SHORT,
-                      })}`,
-                      [FundingDirection.None]: undefined,
-                    }[tooltipDatum.direction]
-                  }
-                />
-              ),
-            },
-            {
-              key: 'fundingRate',
-              label: stringGetter({
-                key: {
-                  [FundingRateResolution.OneHour]: STRING_KEYS.RATE_1H,
-                  [FundingRateResolution.EightHour]: STRING_KEYS.RATE_8H,
-                  [FundingRateResolution.Annualized]: STRING_KEYS.ANNUALIZED,
-                }[fundingRateView],
-              }),
-              value: (
-                <Output
-                  type={OutputType.SmallPercent}
-                  value={
-                    {
-                      [FundingRateResolution.OneHour]: tooltipDatum.fundingRate,
-                      [FundingRateResolution.EightHour]: tooltipDatum.fundingRate * 8,
-                      [FundingRateResolution.Annualized]: tooltipDatum.fundingRate * (24 * 365),
-                    }[fundingRateView]
-                  }
-                  showSign={ShowSign.Both}
-                />
-              ),
-            },
-            {
-              key: 'time',
-              label: isShowingCurrentFundingRate
-                ? 'Time Remaining'
-                : stringGetter({ key: STRING_KEYS.TIME }),
-              value: <Output type={OutputType.DateTime} value={tooltipDatum.time} />,
-            },
-          ].filter(Boolean) as Array<DetailsItem>
-        }
-      />
-    </TooltipContent>
-  );
-};
@@ -235,10 +235,6 @@ 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,6 +108,20 @@ 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',
@@ -116,7 +130,7 @@ export const DepositButtonAndReceipt = ({
          {stringGetter({ key: STRING_KEYS.EXPECTED_DEPOSIT_AMOUNT })} <Tag>{usdcLabel}</Tag>
        </span>
      ),
-      value: <Output type={OutputType.Fiat} fractionDigits={TOKEN_DECIMALS} value={summary?.toAmount} />,
+      value: <Output type={OutputType.Fiat} fractionDigits={TOKEN_DECIMALS} value={toAmount} />,
      subitems: [
        {
          key: 'minimum-deposit-amount',
@@ -126,7 +140,7 @@ export const DepositButtonAndReceipt = ({
            </span>
          ),
          value: (
-            <Output type={OutputType.Fiat} fractionDigits={TOKEN_DECIMALS} value={summary?.toAmountMin} />
+            <Output type={OutputType.Fiat} fractionDigits={TOKEN_DECIMALS} value={toAmountMin} />
          ),
          tooltip: 'minimum-deposit-amount',
        },
@@ -34,7 +34,6 @@ 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,10 +148,6 @@ 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 { summary, requestPayload } = useSelector(getTransferInputs, shallowEqual) || {};
+  const { isCctp, summary, requestPayload } = useSelector(getTransferInputs, shallowEqual) || {};
  const canAccountTrade = useSelector(calculateCanAccountTrade, shallowEqual);
  const { usdcLabel } = useTokenConfigs();

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

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

+  const { toAmount, toAmountMin } = useMemo(() => {
+    if (isCctp) {
+      return {
+        toAmount: summary?.toAmount,
+        toAmountMin: summary?.toAmountMin,
+      };
+    } else {
+      return {
+        toAmount:
+          summary?.toAmount &&
+          withdrawToken?.decimals &&
+          formatUnits(BigInt(summary.toAmount), withdrawToken.decimals),
+        toAmountMin:
+          summary?.toAmountMin &&
+          withdrawToken?.decimals &&
+          formatUnits(BigInt(summary.toAmountMin), withdrawToken.decimals),
+      };
+    }
+  }, [isCctp, summary, withdrawToken]);
+
  const submitButtonReceipt = [
    {
      key: 'total-fees',
@@ -133,7 +153,7 @@ export const WithdrawButtonAndReceipt = ({
          {withdrawToken && <Tag>{withdrawToken?.symbol}</Tag>}
        </span>
      ),
-      value: <Output type={OutputType.Asset} value={summary?.toAmount} fractionDigits={TOKEN_DECIMALS} />,
+      value: <Output type={OutputType.Asset} value={toAmount} fractionDigits={TOKEN_DECIMALS} />,
      subitems: [
        {
          key: 'minimum-amount-received',
@@ -144,7 +164,7 @@ export const WithdrawButtonAndReceipt = ({
            </span>
          ),
          value: (
-            <Output type={OutputType.Asset} value={summary?.toAmountMin} fractionDigits={TOKEN_DECIMALS} />
+            <Output type={OutputType.Asset} value={toAmountMin} fractionDigits={TOKEN_DECIMALS} />
          ),
          tooltip: 'minimum-amount-received',
        },
@@ -10,9 +10,6 @@ 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,
@@ -38,8 +35,10 @@ 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();
@@ -179,7 +178,7 @@ export const AccountMenu = () => {
        },
        ...(onboardingState === OnboardingState.AccountConnected && hdKey
          ? [
-              (!isMainnet || testFlags.showMobileSignInOption) && {
+              !isMainnet && {
                value: 'MobileQrSignIn',
                icon: <Icon iconName={IconName.Qr} />,
                label: stringGetter({ key: STRING_KEYS.TITLE_SIGN_INTO_MOBILE }),
@@ -1,78 +0,0 @@
-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
jaredvu	29a894e124	Merge branch 'main' into canvas-orderbook	2024-01-03 13:44:50 -08:00
jaredvu	4a4014d837	Merge remote-tracking branch 'origin/main' into canvas-orderbook	2023-12-06 10:09:10 -08:00
jaredvu	7c48058cd3	Animation attempt	2023-11-28 15:44:01 -08:00
jaredvu	2e51502abe	Use 100% for canvas width	2023-11-27 14:58:45 -08:00
jaredvu	def6874de9	useDrawOrderbookHistograms -> useDrawOrderbook	2023-11-27 13:26:26 -08:00
jaredvu	e475a24732	Histogram side handling	2023-11-27 13:20:52 -08:00
jaredvu	01a1678edd	Merge remote-tracking branch 'origin/main' into canvas-orderbook	2023-11-27 13:07:22 -08:00
jaredvu	8da8408a0a	hard code height/width to avoid scaling issues	2023-11-27 10:18:35 -08:00
jaredvu	8bae419297	restore setting width from ref	2023-11-27 09:52:58 -08:00
jaredvu	a54653242e	Update drawnText color on theme change	2023-11-26 17:31:08 -08:00
jaredvu	fad4284ed5	Add log for createLinearGradient	2023-11-26 17:00:06 -08:00
jaredvu	19a377a9e5	remove clientHeight from dep list	2023-11-26 15:02:38 -08:00
jaredvu	ca9501e3cc	Fix orderbook centering	2023-11-26 14:55:53 -08:00
jaredvu	1407c9a460	Orderbook Row: Handle locale change	2023-11-26 14:32:20 -08:00
jaredvu	d96b07b394	Unset hoveredRow if unapplicable	2023-11-26 13:43:51 -08:00
jaredvu	c76b71143b	Add hoverCanvas. Optimize Clearing for canvas	2023-11-26 13:32:54 -08:00
jaredvu	a2dfda3481	Consolidate draw methods, improve scrollListener	2023-11-25 14:20:56 -08:00
jaredvu	e3462b6514	Create new Orderbook component rendered by canvas	2023-11-25 02:27:16 -08:00