add transparency to button + destructive borders

small lint things
remove colors.css file
2024-01-24 12:56:20 -05:00 · 2024-01-24 11:21:55 -05:00 · 2024-01-23 18:17:12 -05:00 · 2024-01-23 17:19:31 -05:00 · 2024-01-23 15:21:34 -05:00 · 2024-01-23 13:54:08 -05:00
48 changed files with 314 additions and 1696 deletions
@@ -33,14 +33,14 @@
  "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",
+    "@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.2.5",
-    "@dydxprotocol/v4-client-js": "^1.0.17",
+    "@dydxprotocol/v4-client-js": "^1.0.11",
    "@dydxprotocol/v4-localization": "^1.1.11",
    "@ethersproject/providers": "^5.7.2",
    "@js-joda/core": "^5.5.3",
@@ -1,37 +1,33 @@
 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
  '@dydxprotocol/v4-client-js':
-    specifier: ^1.0.17
-    version: 1.0.17
+    specifier: ^1.0.11
+    version: 1.0.11
  '@dydxprotocol/v4-localization':
    specifier: ^1.1.11
    version: 1.1.11
@@ -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,8 +979,8 @@ 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:
@@ -1090,29 +991,28 @@ packages:
    resolution: {integrity: sha512-pB3Fv1bzJRUDp29kAN61daZ34gTSGrSTNh+/AP3TUB63/Q/gaXQVBf91xVcso4Hw23xM3FwIcrRK0cvOSWgXKg==}
    dev: false

-  /@dydxprotocol/v4-client-js@1.0.17:
-    resolution: {integrity: sha512-PbTKbzcS7VapuFRofkirUxkF9ThNS2tWYyr0asFOMUfebsQWMvTC1sYC/s1NZIiBeq3cFz9vKdZFbfsKi7Z1bw==}
+  /@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
@@ -1123,8 +1023,8 @@ packages:
    resolution: {integrity: sha512-ZHnyrWD1bEpvY1tctkcmSV6A5+hQSYBFwyjbiyOqepqDqrv24J5a3hlZU94lDyYf+7Sdk3alOvy9Z7Lpk59nvw==}
    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
@@ -7476,7 +7376,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 +7393,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 +8057,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 +9422,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:
@@ -14801,6 +14677,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 +14809,7 @@ packages:
  /zwitch@2.0.4:
    resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
    dev: true
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
@@ -1,7 +1,7 @@
 {
   "apps": {
      "ios": {
-         "scheme": "dydx-t-v4"
+         "scheme": "dydxv4"
      }
   },
   "deployments": {
@@ -215,11 +215,10 @@
               }
            ],
            "validators": [
-               "https://validator.v4dev4.dydx.exchange"
+               "http://validator.v4dev4.dydx.exchange"
            ],
            "0xsquid": "https://testnet.api.0xsquid.com",
-            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
-            "faucet": "https://faucet.v4dev4.dydx.exchange"
+            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/"
         },
         "links": {
            "tos": "https://dydx.exchange/v4-terms",
@@ -474,7 +473,7 @@
         "apps": {
            "ios": {
               "minimalVersion": "1.0",
-               "build": 40000,
+               "build":40000,
               "url": "https://apps.apple.com/app/dydx/id1564787350"
            }
         }
@@ -1,13 +0,0 @@
-import { forwardRef } from 'react';
-
-type CanvasProps = {
-  className?: string;
-  width: number | string;
-  height: number | string;
-};
-
-export const Canvas = forwardRef<HTMLCanvasElement, CanvasProps>(
-  ({ className, width, height }, canvasRef) => (
-    <canvas ref={canvasRef} className={className} width={width} height={height} />
-  )
-);
@@ -11,5 +11,6 @@ export const DetachedScrollableSection = styled.section`

 export const AttachedExpandingSection = styled.section`
  ${layoutMixins.contentSectionAttached}
+  ${layoutMixins.expandingColumnWithHeader}
  gap: var(--border-width);
 `;
@@ -14,7 +14,7 @@ export const DiffArrowStory: Story<DiffArrowProps> = (args) => (

 DiffArrowStory.argTypes = {
  direction: {
-    options: ['left', 'right', 'up', 'down'],
+    options: ['left', 'right'],
    control: { type: 'select' },
    defaultValue: 'right',
  },
@@ -10,7 +10,7 @@ type ElementProps = {

 type StyleProps = {
  className?: string;
-  direction?: 'right' | 'left' | 'up' | 'down';
+  direction?: 'right' | 'left';
 };

 export type DiffArrowProps = ElementProps & StyleProps;
@@ -57,11 +57,5 @@ Styled.DiffArrowContainer = styled.span<DiffArrowProps>`
      left: css`
        transform: scaleX(-1);
      `,
-      up: css`
-        transform: rotate(-90deg);
-      `,
-      down: css`
-        transform: rotate(90deg);
-      `
    }[direction || 'right'])}
 `;
@@ -44,7 +44,6 @@ import {
  MenuIcon,
  MigrateIcon,
  MintscanIcon,
-  MoonIcon,
  OrderbookIcon,
  OrderCanceledIcon,
  OrderFilledIcon,
@@ -67,7 +66,6 @@ import {
  ShowIcon,
  TogglesMenuIcon,
  StarIcon,
-  SunIcon,
  TerminalIcon,
  TradeIcon,
  TransferIcon,
@@ -121,7 +119,6 @@ export enum IconName {
  Menu = 'Menu',
  Migrate = 'Migrate',
  Mintscan = 'Mintscan',
-  Moon = 'Moon',
  Onboarding = 'Onboarding',
  Orderbook = 'OrderbookIcon',
  OrderCanceled = 'OrderCanceled',
@@ -144,7 +141,6 @@ export enum IconName {
  Share = 'Share',
  Show = 'Show',
  Star = 'Star',
-  Sun = 'Sun',
  Terminal = 'Terminal',
  TogglesMenu = 'TogglesMenu',
  Trade = 'Trade',
@@ -199,7 +195,6 @@ const icons = {
  [IconName.Menu]: MenuIcon,
  [IconName.Migrate]: MigrateIcon,
  [IconName.Mintscan]: MintscanIcon,
-  [IconName.Moon]: MoonIcon,
  [IconName.Orderbook]: OrderbookIcon,
  [IconName.OrderCanceled]: OrderCanceledIcon,
  [IconName.OrderFilled]: OrderFilledIcon,
@@ -221,7 +216,6 @@ const icons = {
  [IconName.Share]: ShareIcon,
  [IconName.Show]: ShowIcon,
  [IconName.Star]: StarIcon,
-  [IconName.Sun]: SunIcon,
  [IconName.Terminal]: TerminalIcon,
  [IconName.TogglesMenu]: TogglesMenuIcon,
  [IconName.Trade]: TradeIcon,
@@ -7,7 +7,7 @@ import { layoutMixins } from '@/styles/layoutMixins';
 import { breakpoints } from '@/styles';

 type PanelProps = {
-  slotHeaderContent?: React.ReactNode;
+  slotHeaderContent?: string;
  slotHeader?: React.ReactNode;
  slotRight?: React.ReactNode;
  children?: React.ReactNode;
@@ -33,20 +33,17 @@ import {

 import { useAsyncList } from 'react-stately';

-import { useBreakpoints, useStringGetter } from '@/hooks';
+import { useBreakpoints } from '@/hooks';
 import { MediaQueryKeys } from '@/hooks/useBreakpoints';

+import { Checkbox } from '@/components/Checkbox';
+
 import { breakpoints } from '@/styles';
 import { layoutMixins } from '@/styles/layoutMixins';
-import { CaretIcon } from '@/icons';
-
-import { STRING_KEYS } from '@/constants/localization';
-
-import { MustBigNumber } from '@/lib/numbers';

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

 export { TableCell } from './Table/TableCell';
 export { TableColumnHeader } from './Table/TableColumnHeader';
@@ -68,7 +65,7 @@ export type TableItem<TableRowData> = {
  onSelect?: (key: TableRowData) => void;
 };

-type ColumnDef<TableRowData extends object> = {
+export type ColumnDef<TableRowData extends object> = {
  columnKey: string;
  label: React.ReactNode;
  tag?: React.ReactNode;
@@ -83,7 +80,7 @@ type ColumnDef<TableRowData extends object> = {
  width?: ColumnSize;
 };

-export type ElementProps<TableRowData extends object | CustomRowConfig, TableRowKey extends Key> = {
+type ElementProps<TableRowData extends object | CustomRowConfig, TableRowKey extends Key> = {
  label?: string;
  columns: ColumnDef<TableRowData>[];
  data: TableRowData[];
@@ -95,7 +92,6 @@ export type ElementProps<TableRowData extends object | CustomRowConfig, TableRow
  selectionBehavior?: 'replace' | 'toggle';
  onRowAction?: (key: TableRowKey, row: TableRowData) => void;
  slotEmpty?: React.ReactNode;
-  initialNumRowsToShow?: number;
  // collection: TableCollection<string>;
  // children: React.ReactNode;
 };
@@ -125,7 +121,6 @@ export const Table = <TableRowData extends object, TableRowKey extends Key>({
  selectionMode = 'single',
  selectionBehavior = 'toggle',
  slotEmpty,
-  initialNumRowsToShow,
  // shouldRowRender,

  // collection,
@@ -141,8 +136,6 @@ export const Table = <TableRowData extends object, TableRowKey extends Key>({
  style,
 }: ElementProps<TableRowData, TableRowKey> & StyleProps) => {
  const [selectedKeys, setSelectedKeys] = useState(new Set<TableRowKey>());
-  const [numRowsToShow, setNumRowsToShow] = useState(initialNumRowsToShow);
-  const enableViewMore = numRowsToShow !== undefined;

  const currentBreakpoints = useBreakpoints();
  const shownColumns = columns.filter(
@@ -216,12 +209,6 @@ export const Table = <TableRowData extends object, TableRowKey extends Key>({
            onRowAction &&
            ((key: TableRowKey) => onRowAction(key, data.find((row) => getRowKey(row) === key)!))
          }
-          numColumns={shownColumns.length}
-          onViewMoreClick={
-            enableViewMore && numRowsToShow < data.length
-              ? () => setNumRowsToShow(data.length)
-              : undefined
-          }
          // shouldRowRender={shouldRowRender}
          hideHeader={hideHeader}
          withGradientCardRows={withGradientCardRows}
@@ -246,7 +233,7 @@ export const Table = <TableRowData extends object, TableRowKey extends Key>({
            )}
          </TableHeader>

-          <TableBody items={enableViewMore ? list.items.slice(0, numRowsToShow) : list.items}>
+          <TableBody items={list.items}>
            {(item) => (
              <Row key={getRowKey(item)}>
                {(columnKey) => (
@@ -280,8 +267,6 @@ const TableRoot = <TableRowData extends object | CustomRowConfig, TableRowKey ex
  onRowAction?: (key: TableRowKey) => void;
  // shouldRowRender?: (prevRowData: object, currentRowData: object) => boolean;
  children: CollectionChildren<TableRowData>;
-  numColumns: number;
-  onViewMoreClick?: () => void;

  hideHeader?: boolean;
  withGradientCardRows?: boolean;
@@ -291,7 +276,7 @@ const TableRoot = <TableRowData extends object | CustomRowConfig, TableRowKey ex
  withScrollSnapColumns?: boolean;
  withScrollSnapRows?: boolean;
 }) => {
-  const { selectionMode, selectionBehavior, numColumns, onViewMoreClick } = props;
+  const { selectionMode, selectionBehavior } = props;

  const state = useTableState<TableRowData>({
    ...props,
@@ -352,7 +337,6 @@ const TableRoot = <TableRowData extends object | CustomRowConfig, TableRowKey ex
      <TableBodyRowGroup
        withGradientCardRows={props.withGradientCardRows}
        withInnerBorders={props.withInnerBorders}
-        withOuterBorder={props.withOuterBorder}
      >
        {/* {Array.from(collection.getChildren!(collection.body.key), (row) => */}
        {[...collection.body.childNodes].map((row) =>
@@ -398,9 +382,6 @@ const TableRoot = <TableRowData extends object | CustomRowConfig, TableRowKey ex
            </TableRow>
          )
        )}
-        {onViewMoreClick ? (
-          <ViewMoreRow colSpan={numColumns} onClick={onViewMoreClick} />
-        ) : undefined}
      </TableBodyRowGroup>
    </Styled.Table>
  );
@@ -434,7 +415,6 @@ const TableBodyRowGroup = ({
  children,
  withGradientCardRows,
  withInnerBorders,
-  withOuterBorder,
 }: { children: React.ReactNode } & StyleProps) => {
  const { rowGroupProps } = useTableRowGroup();

@@ -443,7 +423,6 @@ const TableBodyRowGroup = ({
      {...rowGroupProps}
      withGradientCardRows={withGradientCardRows}
      withInnerBorders={withInnerBorders}
-      withOuterBorder={withOuterBorder}
    >
      {children}
    </Styled.Tbody>
@@ -510,23 +489,6 @@ const TableColumnHeader = <TableRowData extends object>({
  );
 };

-export const ViewMoreRow = ({ colSpan, onClick }: { colSpan: number; onClick: () => void }) => {
-  const stringGetter = useStringGetter();
-  return (
-    <Styled.Tr key="viewmore">
-      <Styled.Td
-        colSpan={colSpan}
-        onMouseDown={(e: MouseEvent) => e.preventDefault()}
-        onPointerDown={(e: MouseEvent) => e.preventDefault()}
-      >
-        <Styled.ViewMoreButton slotRight={<CaretIcon />} onClick={onClick}>
-          {stringGetter({ key: STRING_KEYS.VIEW_MORE })}
-        </Styled.ViewMoreButton>
-      </Styled.Td>
-    </Styled.Tr>
-  );
-};
-
 export const TableRow = <TableRowData extends object>({
  item,
  children,
@@ -698,7 +660,7 @@ Styled.Empty = styled.div<{ withOuterBorder: boolean }>`

  justify-items: center;
  align-content: center;
-  padding: 4rem;
+  padding: 2rem;
  gap: 0.75em;

  color: var(--color-text-0);
@@ -906,18 +868,6 @@ Styled.Tbody = styled.tbody<StyleProps>`
      --stickyArea2-paddingLeft: var(--border-width);
      --stickyArea2-paddingRight: var(--border-width);

-      tr:first-of-type {
-        box-shadow: 0 calc(var(--border-width)) 0 0 var(--border-color);
-      }
-    `}
-
-  ${({ withOuterBorder }) =>
-    withOuterBorder &&
-    css`
-      tr:last-of-type:not(:only-of-type) {
-        box-shadow: 0 calc(-1 * var(--border-width)) 0 0 var(--border-color);
-      }
-
      tr:first-of-type {
        box-shadow: none;
      }
@@ -972,15 +922,3 @@ Styled.Row = styled.div`
  ${layoutMixins.inlineRow}
  padding: var(--tableCell-padding);
 `;
-
-Styled.ViewMoreButton = styled(Button)`
-  --button-backgroundColor: var(--color-layer-2);
-  --button-textColor: var(--color-text-1);
-
-  width: 100%;
-
-  svg {
-    width: 0.675rem;
-    margin-left: 0.5ch;
-  }
-`;
@@ -282,22 +282,13 @@ export const TRADE_TYPES: Record<
  [AbacusOrderType.takeProfitMarket.rawValue]: TradeTypes.TAKE_PROFIT_MARKET,

  [AbacusOrderType.liquidated.name]: null,
-  [AbacusOrderType.liquidated.rawValue]: null,
+  [AbacusOrderType.liquidation.name]: null,

  [AbacusOrderType.liquidation.name]: null,
  [AbacusOrderType.liquidation.rawValue]: null,

  [AbacusOrderType.trailingStop.name]: null,
  [AbacusOrderType.trailingStop.rawValue]: null,
-
-  [AbacusOrderType.offsetting.name]: null,
-  [AbacusOrderType.offsetting.rawValue]: null,
-
-  [AbacusOrderType.deleveraged.name]: null,
-  [AbacusOrderType.deleveraged.rawValue]: null,
-
-  [AbacusOrderType.finalSettlement.name]: null,
-  [AbacusOrderType.finalSettlement.rawValue]: null,
 };

 // Custom types involving Abacus
@@ -316,9 +307,3 @@ export type NetworkConfig = Partial<{
 }>;

 export type ConnectNetworkEvent = CustomEvent<Partial<NetworkConfig>>;
-
-export type PerpetualMarketOrderbookLevel = OrderbookLine & {
-  side?: 'ask' | 'bid';
-  mine: number;
-  key: string;
-};
@@ -1,15 +0,0 @@
-/**
- * @description Orderbook display constants
- */
-export const ORDERBOOK_MAX_ROWS_PER_SIDE = 30;
-export const ORDERBOOK_ANIMATION_DURATION = 400;
-
-/**
- * @description Orderbook pixel constants
- * @note ORDERBOOK_ROW_HEIGHT should be a divisor of ORDERBOOK_HEIGHT so that we do not have a partial row at the bottom
- * @note To change the Orderbook width, --orderbook-trades-width and ORDERBOOK_WIDTH must be changed to the same value
- */
-export const ORDERBOOK_HEIGHT = 800;
-export const ORDERBOOK_WIDTH = 300;
-export const ORDERBOOK_ROW_HEIGHT = 24;
-export const ORDERBOOK_ROW_PADDING_RIGHT = 8;
@@ -1,4 +0,0 @@
-export * from './useCenterOrderbook';
-export * from './useSpreadRowScrollListener';
-export * from './useDrawOrderbook';
-export * from './useOrderbookValues';
@@ -1,22 +0,0 @@
-import { useEffect, type RefObject } from 'react';
-
-type Props = {
-  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 }: Props) => {
-  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]);
-};
@@ -1,373 +0,0 @@
-import { useEffect, useMemo, useRef } from 'react';
-import { shallowEqual, useSelector } from 'react-redux';
-
-import type { PerpetualMarketOrderbookLevel } from '@/constants/abacus';
-import { SMALL_USD_DECIMALS, TOKEN_DECIMALS } from '@/constants/numbers';
-
-import {
-  ORDERBOOK_ANIMATION_DURATION,
-  ORDERBOOK_HEIGHT,
-  ORDERBOOK_ROW_HEIGHT,
-  ORDERBOOK_ROW_PADDING_RIGHT,
-  ORDERBOOK_WIDTH,
-} from '@/constants/orderbook';
-
-import { getCurrentMarketConfig, getCurrentMarketOrderbookMap } from '@/state/perpetualsSelectors';
-import { getAppTheme } from '@/state/configsSelectors';
-
-import { MustBigNumber } from '@/lib/numbers';
-
-import {
-  getHistogramXValues,
-  getRektFromIdx,
-  getXByColumn,
-  getYForElements,
-} from '@/lib/orderbookHelpers';
-import { useAppThemeContext } from '../useAppTheme';
-
-type ElementProps = {
-  data: Array<PerpetualMarketOrderbookLevel | undefined>;
-  histogramRange: number;
-  side: PerpetualMarketOrderbookLevel['side'];
-};
-
-type StyleProps = {
-  histogramSide: 'left' | 'right';
-};
-
-enum OrderbookRowAnimationType {
-  REMOVE,
-  NEW,
-  NONE,
-}
-
-export const useDrawOrderbook = ({
-  data,
-  histogramRange,
-  histogramSide,
-  side,
-}: ElementProps & StyleProps) => {
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-  const canvas = canvasRef.current;
-  const currentOrderbookMap = useSelector(getCurrentMarketOrderbookMap, shallowEqual);
-  const { stepSizeDecimals = TOKEN_DECIMALS, tickSizeDecimals = SMALL_USD_DECIMALS } =
-    useSelector(getCurrentMarketConfig, shallowEqual) || {};
-  const prevData = useRef<typeof data>(data);
-  const theme = useAppThemeContext();
-
-  /**
-   * Scale canvas using device pixel ratio to unblur drawn text
-   * @url https://stackoverflow.com/questions/15661339/how-do-i-fix-blurry-text-in-my-html5-canvas/65124939#65124939
-   * @returns adjusted canvas width/height/rowHeight used in coordinates for drawing
-   **/
-  const { canvasWidth, canvasHeight, rowHeight } = useMemo(() => {
-    const ratio = window.devicePixelRatio || 1;
-
-    if (!canvas) {
-      return {
-        canvasWidth: ORDERBOOK_WIDTH / devicePixelRatio,
-        canvasHeight: ORDERBOOK_HEIGHT / devicePixelRatio,
-        rowHeight: ORDERBOOK_ROW_HEIGHT / devicePixelRatio,
-      };
-    }
-
-    const ctx = canvas.getContext('2d');
-    canvas.width = canvas.offsetWidth * ratio;
-    canvas.height = canvas.offsetHeight * ratio;
-
-    if (ctx) {
-      ctx.scale(ratio, ratio);
-      ctx.font = '12px Satoshi';
-      ctx.textAlign = 'right';
-      ctx.textBaseline = 'middle';
-      ctx.imageSmoothingQuality = 'high';
-    }
-
-    return {
-      canvasWidth: canvas.width / ratio,
-      canvasHeight: canvas.height / ratio,
-      rowHeight: ORDERBOOK_ROW_HEIGHT,
-    };
-  }, [canvas]);
-
-  const drawBars = ({
-    barType,
-    ctx,
-    depthOrSizeValue,
-    gradientMultiplier,
-    histogramAccentColor,
-    histogramSide,
-    idx,
-  }: {
-    barType: 'depth' | 'size';
-    ctx: CanvasRenderingContext2D;
-    depthOrSizeValue: number;
-    gradientMultiplier: number;
-    histogramAccentColor: string;
-    histogramSide: 'left' | 'right';
-    idx: number;
-  }) => {
-    const { x1, x2, y1, y2 } = getRektFromIdx({
-      idx,
-      rowHeight,
-      canvasWidth,
-      canvasHeight,
-      side,
-    });
-
-    // X values
-    const maxHistogramBarWidth = x2 - x1 - (barType === 'size' ? 8 : 2);
-    const barWidth = depthOrSizeValue
-      ? Math.min((depthOrSizeValue / histogramRange) * maxHistogramBarWidth, maxHistogramBarWidth)
-      : 0;
-
-    const { gradient, bar } = getHistogramXValues({
-      barWidth,
-      canvasWidth,
-      gradientMultiplier,
-      histogramSide,
-    });
-
-    // Gradient
-    let linearGradient;
-
-    try {
-      linearGradient = ctx.createLinearGradient(gradient.x1, y1, gradient.x2, y2);
-      linearGradient.addColorStop(0, histogramAccentColor);
-      linearGradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
-      ctx.fillStyle = linearGradient;
-    } catch (err) {
-      ctx.fillStyle = 'rgba(0, 0, 0, 0)';
-    }
-
-    ctx.beginPath();
-
-    // Bar
-    const { bar: y } = getYForElements({ y: y1, rowHeight });
-
-    if (ctx.roundRect) {
-      ctx.roundRect(
-        bar.x1,
-        y,
-        bar.x2,
-        rowHeight - 2,
-        histogramSide === 'right' ? [2, 0, 0, 2] : [0, 2, 2, 0]
-      );
-    } else {
-      ctx.rect(bar.x1, y, bar.x2, rowHeight - 2);
-    }
-
-    ctx.fill();
-  };
-
-  const drawText = ({
-    animationType = OrderbookRowAnimationType.NONE,
-    ctx,
-    idx,
-    mine,
-    price,
-    size,
-  }: {
-    animationType?: OrderbookRowAnimationType;
-    ctx: CanvasRenderingContext2D;
-    idx: number;
-    mine?: number;
-    price?: number;
-    size?: number;
-  }) => {
-    const { y1 } = getRektFromIdx({
-      idx,
-      rowHeight,
-      canvasWidth,
-      canvasHeight,
-      side,
-    });
-
-    const { text: y } = getYForElements({ y: y1, rowHeight });
-
-    let textColor: string;
-    let updatedTextColor: string | undefined;
-
-    switch (animationType) {
-      case OrderbookRowAnimationType.REMOVE: {
-        textColor = theme.textSecondary;
-        break;
-      }
-
-      case OrderbookRowAnimationType.NEW: {
-        updatedTextColor = side === 'bid' ? theme.positive : theme.negative;
-        textColor = theme.textPrimary;
-        break;
-      }
-
-      default: {
-        textColor = theme.textPrimary;
-        break;
-      }
-    }
-
-    // Size text
-    if (size) {
-      ctx.fillStyle = updatedTextColor ?? textColor;
-      ctx.fillText(
-        MustBigNumber(size).toFixed(stepSizeDecimals ?? TOKEN_DECIMALS),
-        getXByColumn({ canvasWidth, colIdx: 0 }) - ORDERBOOK_ROW_PADDING_RIGHT,
-        y
-      );
-    }
-
-    // Price text
-    if (price) {
-      ctx.fillStyle = textColor;
-      ctx.fillText(
-        MustBigNumber(price).toFixed(tickSizeDecimals ?? SMALL_USD_DECIMALS),
-        getXByColumn({ canvasWidth, colIdx: 1 }) - ORDERBOOK_ROW_PADDING_RIGHT,
-        y
-      );
-    }
-
-    // Mine text
-    if (mine) {
-      ctx.fillStyle = textColor;
-      ctx.fillText(
-        MustBigNumber(mine).toFixed(stepSizeDecimals ?? TOKEN_DECIMALS),
-        getXByColumn({ canvasWidth, colIdx: 2 }) - ORDERBOOK_ROW_PADDING_RIGHT,
-        y
-      );
-    }
-  };
-
-  const drawOrderbookRow = ({
-    ctx,
-    idx,
-    rowToRender,
-    animationType = OrderbookRowAnimationType.NONE,
-  }: {
-    ctx: CanvasRenderingContext2D;
-    idx: number;
-    rowToRender?: PerpetualMarketOrderbookLevel;
-    animationType?: OrderbookRowAnimationType;
-  }) => {
-    if (!rowToRender) return;
-    const { depth, mine, price, size } = rowToRender;
-    const histogramAccentColor = side === 'bid' ? theme.positiveFaded : theme.negativeFaded;
-
-    // Depth Bar
-    if (depth) {
-      drawBars({
-        barType: 'depth',
-        ctx,
-        depthOrSizeValue: depth,
-        gradientMultiplier: 1.3,
-        histogramAccentColor,
-        histogramSide,
-        idx,
-      });
-    }
-
-    // Size Bar
-    drawBars({
-      barType: 'size',
-      ctx,
-      depthOrSizeValue: size,
-      gradientMultiplier: 5,
-      histogramAccentColor,
-      histogramSide,
-      idx,
-    });
-
-    // Size, Price, Mine
-    drawText({
-      animationType,
-      ctx,
-      idx,
-      mine,
-      price,
-      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);
-
-    // Animate row removal and update
-    const mapOfOrderbookPriceLevels =
-      side && currentOrderbookMap?.[side === 'ask' ? 'asks' : 'bids'];
-    const empty: number[] = [];
-    const removed: number[] = [];
-    const updated: number[] = [];
-
-    prevData.current.forEach((row, idx) => {
-      if (!row) {
-        empty.push(idx);
-        return;
-      }
-
-      if (mapOfOrderbookPriceLevels?.[row.price] === 0) {
-        removed.push(idx);
-        drawOrderbookRow({
-          ctx,
-          idx,
-          rowToRender: row,
-          animationType: OrderbookRowAnimationType.REMOVE,
-        });
-      } else if (mapOfOrderbookPriceLevels?.[row.price] === row?.size) {
-        drawOrderbookRow({
-          ctx,
-          idx,
-          rowToRender: data[idx],
-          animationType: OrderbookRowAnimationType.NONE,
-        });
-      } else {
-        updated.push(idx);
-        drawOrderbookRow({
-          ctx,
-          idx,
-          rowToRender: row,
-          animationType: OrderbookRowAnimationType.NEW,
-        });
-      }
-    });
-
-    setTimeout(() => {
-      [...empty, ...removed, ...updated].forEach((idx) => {
-        const { x1, y1, x2, y2 } = getRektFromIdx({
-          idx,
-          rowHeight,
-          canvasWidth,
-          canvasHeight,
-          side,
-        });
-
-        ctx.clearRect(x1, y1, x2 - x1, y2 - y1);
-        drawOrderbookRow({
-          ctx,
-          idx,
-          rowToRender: data[idx],
-        });
-      });
-    }, ORDERBOOK_ANIMATION_DURATION);
-
-    prevData.current = data;
-  }, [
-    canvasHeight,
-    canvasWidth,
-    rowHeight,
-    data,
-    histogramRange,
-    stepSizeDecimals,
-    tickSizeDecimals,
-    histogramSide,
-    side,
-    theme,
-    currentOrderbookMap,
-  ]);
-
-  return { canvasRef };
-};
@@ -1,126 +0,0 @@
-import { useMemo } from 'react';
-import { shallowEqual, useSelector } from 'react-redux';
-import { OrderSide } from '@dydxprotocol/v4-client-js';
-
-import { type PerpetualMarketOrderbookLevel } from '@/constants/abacus';
-import { DepthChartSeries, DepthChartDatum } from '@/constants/charts';
-
-import { getCurrentMarketOrderbook } from '@/state/perpetualsSelectors';
-import { getSubaccountOpenOrdersBySideAndPrice } from '@/state/accountSelectors';
-
-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: Array<PerpetualMarketOrderbookLevel | undefined> = (
-      orderbook?.asks?.toArray() ?? []
-    )
-      .map(
-        (row, idx: number) =>
-          ({
-            key: `ask-${idx}`,
-            side: 'ask',
-            mine: openOrdersBySideAndPrice[OrderSide.SELL]?.[row.price]?.size,
-            ...row,
-          } as PerpetualMarketOrderbookLevel)
-      )
-      .slice(0, maxRowsPerSide);
-
-    const bids: Array<PerpetualMarketOrderbookLevel | undefined> = (
-      orderbook?.bids?.toArray() ?? []
-    )
-      .map(
-        (row, idx: number) =>
-          ({
-            key: `bid-${idx}`,
-            side: 'bid',
-            mine: openOrdersBySideAndPrice[OrderSide.BUY]?.[row.price]?.size,
-            ...row,
-          } as PerpetualMarketOrderbookLevel)
-      )
-      .slice(0, maxRowsPerSide);
-
-    // Prevent the bid/ask sides from crossing by using the offsets.
-    // While the books are crossing...
-    while (asks[0] && bids[0] && bids[0]!.price >= asks[0].price) {
-      // Drop the order on the side with the lower offset.
-      // The offset of the other side is higher and so supercedes.
-      if (bids[0]!.offset === asks[0].offset) {
-        // If offsets are the same, give precedence to the larger size. In this case,
-        // one of the sizes *should* be zero, but we simply check for the larger size.
-        if (bids[0]!.size > asks[0].size) {
-          asks.shift();
-        } else {
-          bids.pop();
-        }
-      } else {
-        // Offsets are not equal. Give precedence to the larger offset.
-        if (bids[0]!.offset > asks[0].offset) {
-          asks.shift();
-        } else {
-          bids.pop();
-        }
-      }
-    }
-
-    const spread =
-      asks[0]?.price && bids[0]?.price ? MustBigNumber(asks[0].price).minus(bids[0].price) : null;
-
-    const spreadPercent = orderbook?.spreadPercent;
-
-    const histogramRange = Math.max(
-      isNaN(Number(bids[bids.length - 1]?.depth)) ? 0 : Number(bids[bids.length - 1]?.depth),
-      isNaN(Number(asks[asks.length - 1]?.depth)) ? 0 : Number(asks[asks.length - 1]?.depth)
-    );
-
-    return {
-      asks,
-      bids,
-      spread,
-      spreadPercent,
-      histogramRange,
-      hasOrderbook: !!orderbook,
-    };
-  }, [orderbook, openOrdersBySideAndPrice]);
-};
-
-export const useOrderbookValuesForDepthChart = () => {
-  const orderbook = useSelector(getCurrentMarketOrderbook, shallowEqual);
-
-  return useMemo(() => {
-    const bids = (orderbook?.bids?.toArray() ?? [])
-      .filter(Boolean)
-      .map((datum) => ({ ...datum, seriesKey: DepthChartSeries.Bids } as DepthChartDatum));
-
-    const asks = (orderbook?.asks?.toArray() ?? [])
-      .filter(Boolean)
-      .map((datum) => ({ ...datum, seriesKey: DepthChartSeries.Asks } as DepthChartDatum));
-
-    const lowestBid = bids[bids.length - 1];
-    const highestBid = bids[0];
-    const lowestAsk = asks[0];
-    const highestAsk = asks[asks.length - 1];
-
-    const midMarketPrice = orderbook?.midPrice;
-    const spread = MustBigNumber(lowestAsk?.price ?? 0).minus(highestBid?.price ?? 0);
-    const spreadPercent = orderbook?.spreadPercent;
-
-    return {
-      bids,
-      asks,
-      lowestBid,
-      highestBid,
-      lowestAsk,
-      highestAsk,
-      midMarketPrice,
-      spread,
-      spreadPercent,
-      orderbook,
-    };
-  }, [orderbook]);
-};
@@ -1,39 +0,0 @@
-import { type RefObject, useEffect, useState } 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;
-};
@@ -0,0 +1,44 @@
+import { useMemo } from 'react';
+import { shallowEqual, useSelector } from 'react-redux';
+
+import { DepthChartSeries, DepthChartDatum } from '@/constants/charts';
+
+import { getCurrentMarketOrderbook } from '@/state/perpetualsSelectors';
+
+import { MustBigNumber } from '@/lib/numbers';
+
+export const useOrderbookValuesForDepthChart = () => {
+  const orderbook = useSelector(getCurrentMarketOrderbook, shallowEqual);
+
+  return useMemo(() => {
+    const bids = (orderbook?.bids?.toArray() ?? [])
+      .filter(Boolean)
+      .map((datum) => ({ ...datum, seriesKey: DepthChartSeries.Bids } as DepthChartDatum));
+
+    const asks = (orderbook?.asks?.toArray() ?? [])
+      .filter(Boolean)
+      .map((datum) => ({ ...datum, seriesKey: DepthChartSeries.Asks } as DepthChartDatum));
+
+    const lowestBid = bids[bids.length - 1];
+    const highestBid = bids[0];
+    const lowestAsk = asks[0];
+    const highestAsk = asks[asks.length - 1];
+
+    const midMarketPrice = orderbook?.midPrice;
+    const spread = MustBigNumber(lowestAsk?.price ?? 0).minus(highestBid?.price ?? 0);
+    const spreadPercent = orderbook?.spreadPercent;
+
+    return {
+      bids,
+      asks,
+      lowestBid,
+      highestBid,
+      lowestAsk,
+      highestAsk,
+      midMarketPrice,
+      spread,
+      spreadPercent,
+      orderbook,
+    };
+  }, [orderbook]);
+};
@@ -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,7 +1,6 @@
 import { useCallback, useEffect, useState, useMemo } from 'react';
 import { useSelector } from 'react-redux';

-import { EvmDerivedAddresses } from '@/constants/account';
 import { LocalStorageKey } from '@/constants/localStorage';
 import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';

@@ -105,17 +104,11 @@ export const useWalletConnection = () => {
    [walletConnectConfig, walletType, walletConnectionType]
  );

-  const { connectAsync: connectWagmi } = useConnectWagmi({ connector: wagmiConnector });
+  const { connectAsync: connectWagmi } = useConnectWagmi({ connector: wagmiConnector })
  const { suggestAndConnect: connectGraz } = useConnectGraz();
-  const [evmDerivedAddresses] = useLocalStorage({
-    key: LocalStorageKey.EvmDerivedAddresses,
-    defaultValue: {} as EvmDerivedAddresses,
-  });

  const connectWallet = useCallback(
-    async ({ walletType, forceConnect }: { walletType?: WalletType; forceConnect?: boolean }) => {
-      if (!walletType) return { walletType, walletConnectionType };
-
+    async ({ walletType }: { walletType: WalletType }) => {
      const walletConnection = getWalletConnection({ walletType });

      try {
@@ -139,11 +132,7 @@ export const useWalletConnection = () => {
            });
          }
        } else {
-          const isAccountConnected = Boolean(
-            evmAddress && evmDerivedAddresses[evmAddress]?.encryptedSignature
-          );
-          // if account connected (via remember me), do not show wagmi popup until forceConnect
-          if (!isConnectedWagmi && (forceConnect || !isAccountConnected)) {
+          if (!isConnectedWagmi) {
            await connectWagmi({
              connector: resolveWagmiConnector({
                walletType,
@@ -239,12 +228,6 @@ export const useWalletConnection = () => {
    evmAddressWagmi,
    signerWagmi,
    publicClientWagmi,
-    isConnectedWagmi,
-    connectWallet: () =>
-      connectWallet({
-        walletType: selectedWalletType,
-        forceConnect: true,
-      }),

    // Wallet connection (Cosmos)
    dydxAddress,
@@ -39,7 +39,6 @@ export { default as MarketsIcon } from './markets.svg';
 export { default as MenuIcon } from './menu.svg';
 export { default as MigrateIcon } from './migrate.svg';
 export { default as MintscanIcon } from './logos/mintscan.svg';
-export { default as MoonIcon } from './moon.svg';
 export { default as OrderbookIcon } from './orderbook.svg';
 export { default as OverviewIcon } from './overview.svg';
 export { default as PencilIcon } from './pencil.svg';
@@ -57,7 +56,6 @@ export { default as SendIcon } from './send.svg';
 export { default as ShareIcon } from './share.svg';
 export { default as ShowIcon } from './show.svg';
 export { default as StarIcon } from './star.svg';
-export { default as SunIcon } from './sun.svg';
 export { default as TerminalIcon } from './terminal.svg';
 export { default as TogglesMenuIcon } from './toggles-menu.svg';
 export { default as TradeIcon } from './trade.svg';
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
-</svg>
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
-</svg>
@@ -8,7 +8,6 @@
  background-color: var(--color-layer-2);
  user-select: none;
  overflow: hidden;
-  --border: var(--default-border-width) solid var(--color-border);
 }

 body,
@@ -54,7 +53,7 @@ button:disabled {
  cursor: pointer;
 }

-:focus-visible {
+:focus-visible{
  outline: var(--color-accent) 1px solid;
  outline-offset: -1px;
  /* outline-offset: -2px; */
@@ -173,10 +173,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 +363,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 +413,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(
@@ -171,15 +171,6 @@ class AbacusStateManager {
    this.setTransferValue({ value: null, field: TransferInputField.usdcSize });
  };

-  resetInputState = () => {
-    this.clearTransferInputValues();
-    this.setTransferValue({
-      field: TransferInputField.type,
-      value: null,
-    });
-    this.clearTradeInputValues();
-  };
-
  // ------ Set Data ------ //
  setStore = (store: RootStore) => {
    this.store = store;
@@ -271,7 +262,11 @@ class AbacusStateManager {
  ) => this.stateManager.cancelOrder(orderId, callback);

  cctpWithdraw = (
-    callback: (success: boolean, parsingError: Nullable<ParsingError>, data: string) => void
+    callback: (
+      success: boolean,
+      parsingError: Nullable<ParsingError>,
+      data: string,
+    ) => void
  ): void => this.stateManager.commitCCTPWithdraw(callback);

  // ------ Utils ------ //
@@ -1,133 +0,0 @@
-//  ------ Canvas helper methods ------ //
-
-import type { MarketOrderbook, Nullable, PerpetualMarketOrderbookLevel } from '@/constants/abacus';
-
-/**
- * @returns top left x,y and bottom x,y from array idx
- */
-export const getRektFromIdx = ({
-  idx,
-  canvasWidth,
-  canvasHeight,
-  rowHeight,
-  side = 'bid',
-}: {
-  idx: number;
-  canvasWidth: number;
-  canvasHeight: number;
-  rowHeight: number;
-  side: PerpetualMarketOrderbookLevel['side'];
-}) => {
-  /**
-   * Does not change
-   */
-  const x1 = 0;
-  const x2 = Math.floor(canvasWidth);
-
-  /**
-   * Changes based on side
-   * Asks: The drawing should starts from the bottom of the orderbook
-   */
-  if (side === 'ask') {
-    const y1 = Math.floor(canvasHeight - (idx + 1) * rowHeight);
-    const y2 = Math.floor(y1 + rowHeight);
-    return { x1, x2, y1, y2 };
-  }
-
-  const y1 = Math.floor(idx * rowHeight);
-  const y2 = Math.floor(y1 + rowHeight);
-  return { x1, x2, y1, y2 };
-};
-
-/**
- * @returns y value for text and bar
- */
-export const getYForElements = ({ y, rowHeight }: { y: number; rowHeight: number }) => ({
-  text: Math.floor(y + rowHeight / 2),
-  bar: Math.floor(y + 1),
-});
-
-/**
- * @description X coordinate for text
- * @returns Get X value by column, colIdx starts at 0
- */
-export const getXByColumn = ({ canvasWidth, colIdx }: { canvasWidth: number; colIdx: number }) => {
-  return Math.floor(((colIdx + 1) * canvasWidth) / 3);
-};
-
-/**
- *         to === 'right'                to === 'left'
- *         |===================|         |===================|
- * bar:    a                   b         c                   d
- * a = 0
- * b = depthBarWidth
- * c = canvasWidth - depthBarWidth
- * d = canvasWidth
- *
- */
-export const getHistogramXValues = ({
-  barWidth,
-  canvasWidth,
-  gradientMultiplier,
-  histogramSide,
-}: {
-  barWidth: number;
-  canvasWidth: number;
-  gradientMultiplier: number;
-  histogramSide: 'left' | 'right';
-}) => {
-  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) : canvasWidth),
-  };
-
-  return {
-    bar,
-    gradient,
-  };
-};
-
-// ------ Orderbook helper methods ------ //
-export const processOrderbookToCreateMap = ({
-  orderbookMap,
-  newOrderbook,
-}: {
-  orderbookMap?: {
-    asks: Record<string, number>;
-    bids: Record<string, number>;
-  };
-  newOrderbook: Nullable<MarketOrderbook>;
-}) => {
-  // Create Orderbooks Map indexed by Price
-  const asks = newOrderbook?.asks?.toArray() ?? [];
-  const bids = newOrderbook?.bids?.toArray() ?? [];
-  const prevAsks = orderbookMap?.asks ?? {};
-  const prevBids = orderbookMap?.bids ?? {};
-  const newAsks = Object.fromEntries(asks.map((ask) => [ask.price, ask.size]) ?? {});
-  const newBids = Object.fromEntries(bids.map((bid) => [bid.price, bid.size]) ?? {});
-
-  Object.keys(prevAsks).forEach((price) => {
-    if (!newAsks[price] || newAsks[price] === 0) {
-      newAsks[price] = 0;
-    }
-  });
-
-  Object.keys(prevBids).forEach((price) => {
-    if (!newBids[price] || newBids[price] === 0) {
-      newBids[price] = 0;
-    }
-  });
-
-  return {
-    newAsks,
-    newBids,
-  };
-};
@@ -5,7 +5,7 @@ import { useEnsName } from 'wagmi';
 import { useNavigate } from 'react-router-dom';

 import { ButtonSize } from '@/constants/buttons';
-import { TransferType } from '@/constants/abacus';
+import { TransferInputField, TransferType } from '@/constants/abacus';

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

@@ -26,13 +26,12 @@ import { useAccounts, useStringGetter, useTokenConfigs } from '@/hooks';
 import { getOnboardingState } from '@/state/accountSelectors';
 import { openDialog } from '@/state/dialogs';

+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';
-import { GovernancePanel } from './rewards/GovernancePanel';
-import { StakingPanel } from './rewards/StakingPanel';

 const ENS_CHAIN_ID = 1; // Ethereum

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

@@ -231,9 +230,6 @@ const Profile = () => {
          withInnerBorders={false}
        />
      </Styled.TablePanel>
-
-      <GovernancePanel />
-      <StakingPanel />
    </Styled.MobileProfileLayout>
  );
 };
@@ -247,7 +243,6 @@ Styled.MobileProfileLayout = styled.div`

  gap: 1rem;
  padding: 1.25rem 0.9rem;
-  max-width: 100vw;
 `;

 Styled.Header = styled.header`
@@ -342,7 +337,7 @@ Styled.Details = styled(Details)`

 Styled.RewardsPanel = styled(Panel)`
  align-self: flex-start;
-
+  
  &,
  > * {
    height: 100%;
@@ -1,75 +0,0 @@
-import styled, { AnyStyledComponent } from 'styled-components';
-import { useDispatch } from 'react-redux';
-
-import { ButtonAction, ButtonSize } from '@/constants/buttons';
-import { STRING_KEYS } from '@/constants/localization';
-import { DialogTypes } from '@/constants/dialogs';
-
-import { useStringGetter, useURLConfigs } from '@/hooks';
-
-import { Panel } from '@/components/Panel';
-import { IconName } from '@/components/Icon';
-import { IconButton } from '@/components/IconButton';
-import { Link } from '@/components/Link';
-
-import { openDialog } from '@/state/dialogs';
-
-export const GovernancePanel = () => {
-  const stringGetter = useStringGetter();
-  const dispatch = useDispatch();
-  const { governanceLearnMore } = useURLConfigs();
-
-  return (
-    <Panel
-      slotHeaderContent={
-        <Styled.Title>{stringGetter({ key: STRING_KEYS.GOVERNANCE })}</Styled.Title>
-      }
-      slotRight={
-        <Styled.Arrow>
-          <Styled.IconButton
-            action={ButtonAction.Base}
-            iconName={IconName.Arrow}
-            size={ButtonSize.Small}
-          />
-        </Styled.Arrow>
-      }
-      onClick={() => dispatch(openDialog({ type: DialogTypes.ExternalNavKeplr }))}
-    >
-      <Styled.Description>
-        {stringGetter({ key: STRING_KEYS.GOVERNANCE_DESCRIPTION })}
-        <Link href={governanceLearnMore} onClick={(e) => e.stopPropagation()}>
-          {stringGetter({ key: STRING_KEYS.LEARN_MORE })} →
-        </Link>
-      </Styled.Description>
-    </Panel>
-  );
-};
-
-const Styled: Record<string, AnyStyledComponent> = {};
-
-Styled.Description = styled.div`
-  color: var(--color-text-0);
-  --link-color: var(--color-text-1);
-
-  a {
-    display: inline;
-    ::before {
-      content: ' ';
-    }
-  }
-`;
-
-Styled.IconButton = styled(IconButton)`
-  color: var(--color-text-0);
-  --color-border: var(--color-layer-6);
-`;
-
-Styled.Arrow = styled.div`
-  padding-right: 1.5rem;
-`;
-
-Styled.Title = styled.h3`
-  font: var(--font-medium-book);
-  color: var(--color-text-2);
-  margin-bottom: -1rem;
-`;
@@ -146,15 +146,14 @@ Styled.Title = styled.h3`
  color: var(--color-text-2);

  padding: var(--panel-paddingY) var(--panel-paddingX) 0;
-  margin-bottom: -0.5rem;
 `;

 Styled.MigrateAction = styled.div`
  ${layoutMixins.flexEqualColumns}
  align-items: center;
+  margin: 1rem;
  gap: 1rem;
  padding: 1rem;
-  margin: 1rem;
  width: 100%;

  background-color: var(--color-layer-2);
@@ -234,4 +233,4 @@ Styled.InlineRow = styled.div`
  ${layoutMixins.inlineRow}
  color: var(--color-text-0);
  --link-color: var(--color-text-1);
-`;
+`;
@@ -3,29 +3,45 @@ 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 } from '@/hooks';
+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';
+import { Link } from '@/components/Link';
+
+import { openDialog } from '@/state/dialogs';

 import { DYDXBalancePanel } from './DYDXBalancePanel';
 import { MigratePanel } from './MigratePanel';
 import { LaunchIncentivesPanel } from './LaunchIncentivesPanel';
 import { RewardsHelpPanel } from './RewardsHelpPanel';
-import { GovernancePanel } from './GovernancePanel';
-import { StakingPanel } from './StakingPanel';

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

+  const panelArrow = (
+    <Styled.Arrow>
+      <Styled.IconButton
+        action={ButtonAction.Base}
+        iconName={IconName.Arrow}
+        size={ButtonSize.Small}
+      />
+    </Styled.Arrow>
+  );
+
  return (
    <Styled.Page>
      {isTablet && (
@@ -45,12 +61,37 @@ const RewardsPage = () => {
        </Styled.PanelRowIncentivesAndBalance>
      )}

-      {isNotTablet && (
-        <Styled.PanelRow>
-          <GovernancePanel />
-          <StakingPanel />
-        </Styled.PanelRow>
-      )}
+      <Styled.PanelRow>
+        <Styled.Panel
+          slotHeaderContent={
+            <Styled.Title>{stringGetter({ key: STRING_KEYS.GOVERNANCE })}</Styled.Title>
+          }
+          slotRight={panelArrow}
+          onClick={() => dispatch(openDialog({ type: DialogTypes.ExternalNavKeplr }))}
+        >
+          <Styled.Description>
+            {stringGetter({ key: STRING_KEYS.GOVERNANCE_DESCRIPTION })}
+            <Link href={governanceLearnMore} onClick={(e) => e.stopPropagation()}>
+              {stringGetter({ key: STRING_KEYS.LEARN_MORE })} →
+            </Link>
+          </Styled.Description>
+        </Styled.Panel>
+
+        <Styled.Panel
+          slotHeaderContent={
+            <Styled.Title>{stringGetter({ key: STRING_KEYS.STAKING })}</Styled.Title>
+          }
+          slotRight={panelArrow}
+          onClick={() => dispatch(openDialog({ type: DialogTypes.ExternalNavKeplr }))}
+        >
+          <Styled.Description>
+            {stringGetter({ key: STRING_KEYS.STAKING_DESCRIPTION })}
+            <Link href={stakingLearnMore} onClick={(e) => e.stopPropagation()}>
+              {stringGetter({ key: STRING_KEYS.LEARN_MORE })} →
+            </Link>
+          </Styled.Description>
+        </Styled.Panel>
+      </Styled.PanelRow>

      <RewardsHelpPanel />
    </Styled.Page>
@@ -99,6 +140,24 @@ Styled.Panel = styled(Panel)`
  height: fit-content;
 `;

+Styled.Title = styled.h3`
+  font: var(--font-medium-book);
+  color: var(--color-text-2);
+  margin-bottom: -1rem;
+`;
+
+Styled.Description = styled.div`
+  color: var(--color-text-0);
+  --link-color: var(--color-text-1);
+
+  a {
+    display: inline;
+    ::before {
+      content: ' ';
+    }
+  }
+`;
+
 Styled.PanelRow = styled.div`
  ${layoutMixins.gridEqualColumns}
  gap: 1.5rem;
@@ -112,3 +171,12 @@ Styled.PanelRow = styled.div`
 Styled.PanelRowIncentivesAndBalance = styled(Styled.PanelRow)`
  grid-template-columns: 2fr 1fr;
 `;
+
+Styled.IconButton = styled(IconButton)`
+  color: var(--color-text-0);
+  --color-border: var(--color-layer-6);
+`;
+
+Styled.Arrow = styled.div`
+  padding: 1rem;
+`;
@@ -1,73 +0,0 @@
-import styled, { AnyStyledComponent } from 'styled-components';
-import { useDispatch } from 'react-redux';
-
-import { ButtonAction, ButtonSize } from '@/constants/buttons';
-import { STRING_KEYS } from '@/constants/localization';
-import { DialogTypes } from '@/constants/dialogs';
-
-import { useStringGetter, useURLConfigs } from '@/hooks';
-
-import { Panel } from '@/components/Panel';
-import { IconName } from '@/components/Icon';
-import { IconButton } from '@/components/IconButton';
-import { Link } from '@/components/Link';
-
-import { openDialog } from '@/state/dialogs';
-
-export const StakingPanel = () => {
-  const stringGetter = useStringGetter();
-  const dispatch = useDispatch();
-  const { stakingLearnMore } = useURLConfigs();
-
-  return (
-    <Panel
-      slotHeaderContent={<Styled.Title>{stringGetter({ key: STRING_KEYS.STAKING })}</Styled.Title>}
-      slotRight={
-        <Styled.Arrow>
-          <Styled.IconButton
-            action={ButtonAction.Base}
-            iconName={IconName.Arrow}
-            size={ButtonSize.Small}
-          />
-        </Styled.Arrow>
-      }
-      onClick={() => dispatch(openDialog({ type: DialogTypes.ExternalNavKeplr }))}
-    >
-      <Styled.Description>
-        {stringGetter({ key: STRING_KEYS.STAKING_DESCRIPTION })}
-        <Link href={stakingLearnMore} onClick={(e) => e.stopPropagation()}>
-          {stringGetter({ key: STRING_KEYS.LEARN_MORE })} →
-        </Link>
-      </Styled.Description>
-    </Panel>
-  );
-};
-
-const Styled: Record<string, AnyStyledComponent> = {};
-
-Styled.Description = styled.div`
-  color: var(--color-text-0);
-  --link-color: var(--color-text-1);
-
-  a {
-    display: inline;
-    ::before {
-      content: ' ';
-    }
-  }
-`;
-
-Styled.IconButton = styled(IconButton)`
-  color: var(--color-text-0);
-  --color-border: var(--color-layer-6);
-`;
-
-Styled.Arrow = styled.div`
-  padding-right: 1.5rem;
-`;
-
-Styled.Title = styled.h3`
-  font: var(--font-medium-book);
-  color: var(--color-text-2);
-  margin-bottom: -1rem;
-`;
@@ -1,4 +1,6 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+import styled, { AnyStyledComponent } from 'styled-components';

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

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

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

+import { getCurrentMarketId } from '@/state/perpetualsSelectors';
+
 enum Tab {
  Orderbook = 'Orderbook',
  Trades = 'Trades',
@@ -23,22 +27,29 @@ 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 (
-    <Tabs
+    <Styled.Tabs
      fullWidthTabs
      value={value}
      onValueChange={(value: Tab) => {
+        setScrollBehavior('snapToCenter');
        setValue(value);
      }}
      items={[
        {
-          asChild: true,
-          content: <CanvasOrderbook histogramSide={HISTOGRAM_SIDES_BY_LAYOUT[tradeLayout]} />,
+          content: <Orderbook histogramSide={HISTOGRAM_SIDES_BY_LAYOUT[tradeLayout]} />,
          label: stringGetter({ key: STRING_KEYS.ORDERBOOK_SHORT }),
          value: Tab.Orderbook,
-          forceMount: true,
        },
        {
          content: <LiveTrades histogramSide={HISTOGRAM_SIDES_BY_LAYOUT[tradeLayout]} />,
@@ -46,7 +57,26 @@ 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}
+`;
@@ -14,7 +14,6 @@ import { LocalStorageKey } from '@/constants/localStorage';
 import { DEFAULT_MARKETID } from '@/constants/markets';

 import { getLocalStorage } from '@/lib/localStorage';
-import { processOrderbookToCreateMap } from '@/lib/orderbookHelpers';

 interface CandleDataByMarket {
  data: Record<string, Candle[]>;
@@ -27,13 +26,6 @@ export interface PerpetualsState {
  liveTrades?: Record<string, MarketTrade[]>;
  markets?: Record<string, PerpetualMarket>;
  orderbooks?: Record<string, MarketOrderbook>;
-  orderbooksMap?: Record<
-    string,
-    {
-      asks: Record<string, number>;
-      bids: Record<string, number>;
-    }
-  >;
  historicalFundings: Record<string, MarketHistoricalFunding[]>;
 }

@@ -43,7 +35,6 @@ const initialState: PerpetualsState = {
  liveTrades: {},
  markets: undefined,
  orderbooks: undefined,
-  orderbooksMap: undefined,
  historicalFundings: {},
 };

@@ -105,24 +96,12 @@ export const perpetualsSlice = createSlice({
    setOrderbook: (
      state: PerpetualsState,
      action: PayloadAction<{ orderbook?: Nullable<MarketOrderbook>; marketId: string }>
-    ) => {
-      state.orderbooks = merge({}, state.orderbooks, {
+    ) => ({
+      ...state,
+      orderbooks: merge({}, state.orderbooks, {
        [action.payload.marketId]: action.payload.orderbook,
-      });
-
-      const { newAsks, newBids } = processOrderbookToCreateMap({
-        orderbookMap: state.orderbooksMap?.[action.payload.marketId],
-        newOrderbook: action.payload.orderbook,
-      });
-
-      state.orderbooksMap = {
-        ...(state.orderbooksMap ?? {}),
-        [action.payload.marketId]: {
-          asks: newAsks,
-          bids: newBids,
-        },
-      };
-    },
+      }),
+    }),
    setTvChartResolution: (
      state: PerpetualsState,
      action: PayloadAction<{ marketId: string; resolution: string }>
@@ -7,6 +7,7 @@ import { mapCandle } from '@/lib/tradingView/utils';
 import type { RootState } from './_store';

 /**
+ * @param state
 * @returns marketId of the market the user is currently viewing
 */
 export const getCurrentMarketId = (state: RootState) => state.perpetuals.currentMarketId;
@@ -20,6 +21,7 @@ export const getCurrentMarketAssetId = (state: RootState) => {
 };

 /**
+ * @param state
 * @returns Record of PerpetualMarket indexed by MarketId
 */
 export const getPerpetualMarkets = (state: RootState) => state.perpetuals.markets;
@@ -32,11 +34,13 @@ export const getMarketData = (marketId: string) => (state: RootState) =>
  getPerpetualMarkets(state)?.[marketId];

 /**
+ * @param state
 * @returns marketIds of all markets
 */
 export const getMarketIds = (state: RootState) => Object.keys(getPerpetualMarkets(state) ?? []);

 /**
+ * @param state
 * @returns PerpetualMarket data of the market the user is currently viewing
 */
 export const getCurrentMarketData = (state: RootState) => {
@@ -45,6 +49,7 @@ export const getCurrentMarketData = (state: RootState) => {
 };

 /**
+ * @param state
 * @returns MarketConfig data of the market the user is currently viewing
 */
 export const getCurrentMarketConfig = (state: RootState) => getCurrentMarketData(state)?.configs;
@@ -57,11 +62,13 @@ export const getMarketConfig = (marketId: string) => (state: RootState) =>
  getMarketData(marketId)(state)?.configs;

 /**
+ * @param state
 * @returns Record of list of MarketTrades indexed by marketId
 */
 export const getLiveTrades = (state: RootState) => state.perpetuals.liveTrades;

 /**
+ * @param state
 * @returns List of MarketTrades of the market the user is currently viewing
 */
 export const getCurrentMarketLiveTrades = (state: RootState) => {
@@ -71,11 +78,13 @@ export const getCurrentMarketLiveTrades = (state: RootState) => {
 };

 /**
+ * @param state
 * @returns Record of subscribed or previously subscribed Orderbook data, indexed by marketId.
 */
 export const getOrderbooks = (state: RootState) => state.perpetuals.orderbooks;

 /**
+ * @param state
 * @returns Orderbook data for the market the user is currently viewing
 */
 export const getCurrentMarketOrderbook = (state: RootState) => {
@@ -85,20 +94,13 @@ export const getCurrentMarketOrderbook = (state: RootState) => {
 };

 /**
- * @returns Orderbook data as a Map of price and size for the current market
- */
-export const getCurrentMarketOrderbookMap = (state: RootState) => {
-  const orderbookMap = state.perpetuals.orderbooksMap;
-  const currentMarketId = getCurrentMarketId(state);
-  return orderbookMap?.[currentMarketId || ''];
-};
-
-/**
+ * @param state
 * @returns Record of historical funding indexed by marketId.
 */
 export const getHistoricalFundings = (state: RootState) => state.perpetuals.historicalFundings;

 /**
+ * @param state
 * @returns Historical funding data for the market the user is currently viewing
 */
 export const getCurrentMarketHistoricalFundings = createSelector(
@@ -108,6 +110,7 @@ export const getCurrentMarketHistoricalFundings = createSelector(
 );

 /**
+ * @param state
 * @returns Mid market price for the market the user is currently viewing
 */
 export const getCurrentMarketMidMarketPrice = (state: RootState) => {
@@ -147,6 +150,7 @@ export const getSelectedResolutionForMarket = (marketId: string) => (state: Root
  state.perpetuals.candles?.[marketId]?.selectedResolution;

 /**
+ * @param state
 * @returns Current market's next funding rate
 */
 export const getCurrentMarketNextFundingRate = createSelector(
@@ -1,5 +1,5 @@
 import { AppTheme } from '@/state/configs';
-import type { ThemeColors } from '@/constants/styles/colors';
+import { ThemeColors } from '@/constants/styles/colors';
 import { ColorToken, OpacityToken } from '@/constants/styles/base';
 import { generateFadedColorVariant } from '@/lib/styles';

@@ -1,81 +0,0 @@
-import { forwardRef } from 'react';
-import styled, { AnyStyledComponent, css } from 'styled-components';
-
-import type { Nullable } from '@/constants/abacus';
-import { STRING_KEYS } from '@/constants/localization';
-import { TOKEN_DECIMALS } from '@/constants/numbers';
-import { ORDERBOOK_ROW_HEIGHT } from '@/constants/orderbook';
-import { useStringGetter } from '@/hooks';
-
-import { Output, OutputType } from '@/components/Output';
-import { WithTooltip } from '@/components/WithTooltip';
-
-type StyleProps = {
-  side?: 'top' | 'bottom';
-};
-
-type ElementProps = {
-  spread?: Nullable<number>;
-  spreadPercent?: Nullable<number>;
-  tickSizeDecimals?: Nullable<number>;
-};
-
-export const OrderbookRow = styled.div`
-  display: flex;
-  flex-shrink: 0;
-  align-items: center;
-  height: ${ORDERBOOK_ROW_HEIGHT}px;
-  min-height: ${ORDERBOOK_ROW_HEIGHT}px;
-  position: relative;
-  padding-right: 0.5rem;
-  font: var(--font-mini-book);
-
-  > span {
-    flex: 1 1 0%;
-    text-align: right;
-  }
-`;
-
-export const SpreadRow = forwardRef<HTMLDivElement, StyleProps & ElementProps>(
-  ({ side, spread, spreadPercent, tickSizeDecimals = TOKEN_DECIMALS }, ref) => {
-    const stringGetter = useStringGetter();
-
-    return (
-      <Styled.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>
-      </Styled.SpreadRow>
-    );
-  }
-);
-
-const Styled: Record<string, AnyStyledComponent> = {};
-
-Styled.SpreadRow = styled(OrderbookRow)<{ side?: 'top' | 'bottom' }>`
-  height: 2rem;
-  border-top: var(--border);
-  border-bottom: var(--border);
-  span {
-    margin-bottom: 2px;
-  }
-
-  ${({ side }) =>
-    side &&
-    {
-      top: css`
-        border-top: none;
-      `,
-      bottom: css`
-        border-bottom: none;
-      `,
-    }[side]}
-`;
@@ -1,284 +0,0 @@
-import { forwardRef, useCallback, useMemo, useRef } from 'react';
-import styled, { AnyStyledComponent, css } from 'styled-components';
-import { shallowEqual, useDispatch, useSelector } from 'react-redux';
-
-import { Nullable, type PerpetualMarketOrderbookLevel } from '@/constants/abacus';
-import { STRING_KEYS } from '@/constants/localization';
-import { ORDERBOOK_HEIGHT, ORDERBOOK_MAX_ROWS_PER_SIDE } from '@/constants/orderbook';
-import { useStringGetter } from '@/hooks';
-
-import {
-  useCalculateOrderbookData,
-  useCenterOrderbook,
-  useDrawOrderbook,
-  useSpreadRowScrollListener,
-} from '@/hooks/Orderbook';
-
-import { Canvas } from '@/components/Canvas';
-import { LoadingSpace } from '@/components/Loading/LoadingSpinner';
-import { Tag } from '@/components/Tag';
-
-import { getCurrentMarketAssetData } from '@/state/assetsSelectors';
-import { getCurrentMarketConfig, getCurrentMarketId } from '@/state/perpetualsSelectors';
-import { setTradeFormInputs } from '@/state/inputs';
-import { getCurrentInput } from '@/state/inputsSelectors';
-
-import { OrderbookRow, SpreadRow } from './OrderbookRow';
-
-type ElementProps = {
-  maxRowsPerSide?: number;
-  layout?: 'vertical' | 'horizontal';
-};
-
-type StyleProps = {
-  hideHeader?: boolean;
-  histogramSide?: 'left' | 'right';
-  className?: string;
-};
-
-export const CanvasOrderbook = forwardRef(
-  (
-    {
-      histogramSide = 'right',
-      maxRowsPerSide = ORDERBOOK_MAX_ROWS_PER_SIDE,
-    }: ElementProps & StyleProps,
-    ref
-  ) => {
-    const { asks, bids, hasOrderbook, histogramRange, spread, spreadPercent } =
-      useCalculateOrderbookData({
-        maxRowsPerSide,
-      });
-
-    const stringGetter = useStringGetter();
-    const currentMarket = useSelector(getCurrentMarketId) ?? '';
-    const currentMarketConfig = useSelector(getCurrentMarketConfig, shallowEqual);
-    const { id = '' } = useSelector(getCurrentMarketAssetData, shallowEqual) ?? {};
-
-    const { tickSizeDecimals = 2 } = currentMarketConfig ?? {};
-
-    /**
-     * Slice asks and bids to maxRowsPerSide using empty rows
-     */
-    const { asksSlice, bidsSlice } = useMemo(() => {
-      let asksSlice: Array<PerpetualMarketOrderbookLevel | undefined> = [];
-      const emptyAskRows =
-        asks.length < maxRowsPerSide
-          ? new Array<undefined>(maxRowsPerSide - asks.length).fill(undefined)
-          : [];
-      asksSlice = [...emptyAskRows, ...asks.reverse()];
-
-      let bidsSlice: Array<PerpetualMarketOrderbookLevel | undefined> = [];
-      const emptyBidRows =
-        bids.length < maxRowsPerSide
-          ? new Array<undefined>(maxRowsPerSide - bids.length).fill(undefined)
-          : [];
-      bidsSlice = [...bids, ...emptyBidRows];
-
-      return {
-        asksSlice,
-        bidsSlice,
-      };
-    }, [asks, bids]);
-
-    const orderbookRef = useRef<HTMLDivElement>(null);
-    useCenterOrderbook({ orderbookRef, marketId: currentMarket });
-
-    /**
-     * Display top or bottom spreadRow when center spreadRow is off screen
-     */
-    const spreadRowRef = useRef<HTMLDivElement>(null);
-
-    const displaySide = useSpreadRowScrollListener({
-      orderbookRef,
-      spreadRowRef,
-    });
-
-    /**
-     * Row action
-     */
-    const currentInput = useSelector(getCurrentInput);
-    const dispatch = useDispatch();
-    const onRowAction = useCallback(
-      (price: Nullable<number>) => {
-        if (currentInput === 'trade' && price) {
-          dispatch(setTradeFormInputs({ limitPriceInput: price?.toString() }));
-        }
-      },
-      [currentInput]
-    );
-
-    const { canvasRef: asksCanvasRef } = useDrawOrderbook({
-      data: [...asksSlice].reverse(),
-      histogramRange,
-      histogramSide,
-      side: 'ask',
-    });
-
-    const { canvasRef: bidsCanvasRef } = useDrawOrderbook({
-      data: bidsSlice,
-      histogramRange,
-      histogramSide,
-      side: 'bid',
-    });
-
-    return (
-      <Styled.OrderbookContainer ref={ref}>
-        <Styled.OrderbookContent $isLoading={!hasOrderbook}>
-          <Styled.Header>
-            <span>
-              {stringGetter({ key: STRING_KEYS.SIZE })} {id && <Tag>{id}</Tag>}
-            </span>
-            <span>
-              {stringGetter({ key: STRING_KEYS.PRICE })} <Tag>USD</Tag>
-            </span>
-            <span>{stringGetter({ key: STRING_KEYS.MINE })}</span>
-          </Styled.Header>
-
-          {displaySide === 'top' && (
-            <Styled.SpreadRow
-              side="top"
-              spread={spread}
-              spreadPercent={spreadPercent}
-              tickSizeDecimals={tickSizeDecimals}
-            />
-          )}
-
-          <Styled.OrderbookWrapper ref={orderbookRef}>
-            <Styled.OrderbookSideContainer $side="asks">
-              <Styled.HoverRows $bottom>
-                {asksSlice.map((row: PerpetualMarketOrderbookLevel | undefined, idx) =>
-                  row ? (
-                    <Styled.Row
-                      key={idx}
-                      title={`${row.price}`}
-                      onClick={() => {
-                        onRowAction(row.price);
-                      }}
-                    />
-                  ) : (
-                    <Styled.Row key={idx} />
-                  )
-                )}
-              </Styled.HoverRows>
-              <Styled.OrderbookCanvas ref={asksCanvasRef} width="100%" height="100%" />
-            </Styled.OrderbookSideContainer>
-
-            <SpreadRow
-              ref={spreadRowRef}
-              spread={spread?.toNumber()}
-              spreadPercent={spreadPercent}
-              tickSizeDecimals={tickSizeDecimals}
-            />
-
-            <Styled.OrderbookSideContainer $side="bids">
-              <Styled.HoverRows>
-                {bidsSlice.map((row: PerpetualMarketOrderbookLevel | undefined, idx) =>
-                  row ? (
-                    <Styled.Row
-                      key={idx}
-                      title={`${row.price}`}
-                      onClick={
-                        row?.price
-                          ? () => {
-                              onRowAction(row.price);
-                            }
-                          : undefined
-                      }
-                    />
-                  ) : (
-                    <Styled.Row key={idx} />
-                  )
-                )}
-              </Styled.HoverRows>
-              <Styled.OrderbookCanvas ref={bidsCanvasRef} width="100%" height="100%" />
-            </Styled.OrderbookSideContainer>
-          </Styled.OrderbookWrapper>
-          {displaySide === 'bottom' && (
-            <Styled.SpreadRow
-              side="bottom"
-              spread={spread}
-              spreadPercent={spreadPercent}
-              tickSizeDecimals={tickSizeDecimals}
-            />
-          )}
-        </Styled.OrderbookContent>
-        {!hasOrderbook && <LoadingSpace id="canvas-orderbook" />}
-      </Styled.OrderbookContainer>
-    );
-  }
-);
-
-const Styled: Record<string, AnyStyledComponent> = {};
-
-Styled.OrderbookContainer = styled.div`
-  display: flex;
-  flex: 1 1 0%;
-  flex-direction: column;
-  overflow: hidden;
-`;
-
-Styled.OrderbookContent = styled.div<{ $isLoading?: boolean }>`
-  max-height: 100%;
-  display: flex;
-  flex-direction: column;
-  position: relative;
-  ${({ $isLoading }) => $isLoading && 'flex: 1;'}
-`;
-
-Styled.Header = styled(OrderbookRow)`
-  height: 2rem;
-  border-bottom: var(--border);
-  color: var(--color-text-0);
-`;
-
-Styled.OrderbookWrapper = styled.div`
-  overflow-y: auto;
-  display: flex;
-  flex-direction: column;
-  flex: 1 1 0%;
-`;
-
-Styled.OrderbookSideContainer = styled.div<{ $side: 'bids' | 'asks' }>`
-  min-height: ${ORDERBOOK_HEIGHT}px;
-  ${({ $side }) => css`
-    --accent-color: ${$side === 'bids' ? 'var(--color-positive)' : 'var(--color-negative)'};
-  `}
-  position: relative;
-`;
-
-Styled.OrderbookCanvas = styled(Canvas)`
-  width: 100%;
-  height: 100%;
-  position: absolute;
-  top: 0;
-  right: 0;
-  pointer-events: none;
-  font-feature-settings: var(--fontFeature-monoNumbers);
-`;
-
-Styled.HoverRows = styled.div<{ $bottom?: boolean }>`
-  position: absolute;
-  width: 100%;
-
-  ${({ $bottom }) => $bottom && 'bottom: 0;'}
-`;
-
-Styled.Row = styled(OrderbookRow)<{ onClick?: () => void }>`
-  ${({ onClick }) =>
-    onClick
-      ? css`
-          cursor: pointer;
-
-          &:hover {
-            background-color: var(--color-layer-4);
-            filter: darkness(0.1);
-          }
-        `
-      : css`
-          cursor: default;
-        `}
-`;
-
-Styled.SpreadRow = styled(SpreadRow)`
-  position: absolute;
-`;
@@ -13,7 +13,7 @@ import {
 import { STRING_KEYS } from '@/constants/localization';

 import { useStringGetter } from '@/hooks';
-import { useOrderbookValuesForDepthChart } from '@/hooks/Orderbook/useOrderbookValues';
+import { useOrderbookValuesForDepthChart } from '@/hooks/useOrderbookValues';

 import { TooltipContent } from '@/components/visx/TooltipContent';
 import { Details } from '@/components/Details';
@@ -12,7 +12,7 @@ import {
 import { StringGetterFunction } from '@/constants/localization';

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

 import { getCurrentMarketConfig } from '@/state/perpetualsSelectors';
 import { getCurrentMarketAssetData } from '@/state/assetsSelectors';
@@ -83,8 +83,18 @@ export const DepthChart = ({
  const { stepSizeDecimals, tickSizeDecimals } =
    useSelector(getCurrentMarketConfig, shallowEqual) ?? {};

-  const { bids, asks, lowestBid, highestBid, lowestAsk, highestAsk, midMarketPrice, orderbook } =
-    useOrderbookValuesForDepthChart();
+  const {
+    bids,
+    asks,
+    lowestBid,
+    highestBid,
+    lowestAsk,
+    highestAsk,
+    midMarketPrice,
+    spread,
+    spreadPercent,
+    orderbook,
+  } = useOrderbookValuesForDepthChart();

  // Chart state

@@ -72,7 +72,6 @@ export const GenerateKeys = ({
      if (message) {
        log('GenerateKeys/switchNetwork', error, { walletErrorType });
        setError(message);
-        throw error;
      }
    }
  };
@@ -17,7 +17,6 @@ import type { EvmAddress } from '@/constants/wallets';
 import { useAccounts, useDebounce, useStringGetter, useSelectedNetwork } from '@/hooks';
 import { useAccountBalance, CHAIN_DEFAULT_TOKEN_ADDRESS } from '@/hooks/useAccountBalance';
 import { useLocalNotifications } from '@/hooks/useLocalNotifications';
-import { useWalletConnection } from '@/hooks/useWalletConnection';

 import { layoutMixins } from '@/styles/layoutMixins';
 import { formMixins } from '@/styles/formMixins';
@@ -121,7 +120,11 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
    });

    return () => {
-      abacusStateManager.resetInputState();
+      abacusStateManager.clearTransferInputValues();
+      abacusStateManager.setTransferValue({
+        field: TransferInputField.type,
+        value: null,
+      });
    };
  }, []);

@@ -365,8 +368,6 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
    return <LoadingSpace id="DepositForm" />;
  }

-  const [requireUserActionInWallet, setRequireUserActionInWallet] = useState(false);
-
  return (
    <Styled.Form onSubmit={onSubmit}>
      <ChainSelectMenu selectedChain={chainIdStr || undefined} onSelectChain={onSelectChain} />
@@ -385,11 +386,7 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
        />
      </Styled.WithDetailsReceipt>
      {errorMessage && <AlertMessage type={AlertType.Error}>{errorMessage}</AlertMessage>}
-      {requireUserActionInWallet && (
-        <AlertMessage type={AlertType.Warning}>
-          {stringGetter({ key: STRING_KEYS.CHECK_WALLET_FOR_REQUEST })}
-        </AlertMessage>
-      )}
+
      <Styled.Footer>
        <DepositButtonAndReceipt
          isDisabled={isDisabled}
@@ -398,8 +395,6 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
          setSlippage={onSetSlippage}
          slippage={slippage}
          sourceToken={sourceToken || undefined}
-          setRequireUserActionInWallet={setRequireUserActionInWallet}
-          setError={setError}
        />
      </Styled.Footer>
    </Styled.Form>
@@ -1,7 +1,8 @@
-import { type Dispatch, type SetStateAction, useState, type ReactNode, useEffect } from 'react';
+import { type Dispatch, type ReactNode, type SetStateAction, useState, useMemo } from 'react';
 import styled, { type AnyStyledComponent } from 'styled-components';
 import { shallowEqual, useSelector } from 'react-redux';
 import type { RouteData } from '@0xsquid/sdk';
+import { formatUnits } from 'viem';

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

@@ -11,7 +12,6 @@ import { NumberSign, TOKEN_DECIMALS } from '@/constants/numbers';

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

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

@@ -39,8 +39,7 @@ type ElementProps = {
  isLoading?: boolean;

  chainId?: string | number;
-  setError?: Dispatch<SetStateAction<Error | null>>;
-  setRequireUserActionInWallet: (val: boolean) => void;
+  setError?: Dispatch<SetStateAction<Error | undefined>>;
  slippage: number;
  slotError?: ReactNode;
  setSlippage: (slippage: number) => void;
@@ -58,7 +57,6 @@ export const DepositButtonAndReceipt = ({
  isDisabled,
  isLoading,
  slotError,
-  setRequireUserActionInWallet,
 }: ElementProps) => {
  const [showFeeBreakdown, setShowFeeBreakdown] = useState(false);
  const [isEditingSlippage, setIsEditingSlipapge] = useState(false);
@@ -66,24 +64,6 @@ export const DepositButtonAndReceipt = ({

  const canAccountTrade = useSelector(calculateCanAccountTrade, shallowEqual);

-  const { connectWallet, isConnectedWagmi } = useWalletConnection();
-
-  const connectWagmi = async () => {
-    try {
-      setRequireUserActionInWallet(false);
-      await connectWallet();
-      setRequireUserActionInWallet(false);
-    } catch (e) {
-      setRequireUserActionInWallet(true);
-    }
-  };
-
-  useEffect(() => {
-    if (!isConnectedWagmi && canAccountTrade) {
-      connectWagmi();
-    }
-  }, [isConnectedWagmi, canAccountTrade]);
-
  const {
    matchNetwork: switchNetwork,
    isSwitchingNetwork,
@@ -100,7 +80,7 @@ export const DepositButtonAndReceipt = ({
    useSelector(getSubaccountBuyingPower, shallowEqual) || {};

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

  const feeSubitems: DetailsItem[] = [];

@@ -136,9 +116,7 @@ export const DepositButtonAndReceipt = ({
          {stringGetter({ key: STRING_KEYS.EXPECTED_DEPOSIT_AMOUNT })} <Tag>{usdcLabel}</Tag>
        </span>
      ),
-      value: (
-        <Output type={OutputType.Fiat} fractionDigits={TOKEN_DECIMALS} value={summary?.toAmount} />
-      ),
+      value: <Output type={OutputType.Fiat} fractionDigits={TOKEN_DECIMALS} value={summary?.toAmount} />,
      subitems: [
        {
          key: 'minimum-deposit-amount',
@@ -148,11 +126,7 @@ export const DepositButtonAndReceipt = ({
            </span>
          ),
          value: (
-            <Output
-              type={OutputType.Fiat}
-              fractionDigits={TOKEN_DECIMALS}
-              value={summary?.toAmountMin}
-            />
+            <Output type={OutputType.Fiat} fractionDigits={TOKEN_DECIMALS} value={summary?.toAmountMin} />
          ),
          tooltip: 'minimum-deposit-amount',
        },
@@ -279,8 +253,6 @@ export const DepositButtonAndReceipt = ({
    >
      {!canAccountTrade ? (
        <OnboardingTriggerButton size={ButtonSize.Base} />
-      ) : !isConnectedWagmi ? (
-        <Button action={ButtonAction.Primary} onClick={connectWallet} state={{ isLoading: true }} />
      ) : !isMatchingNetwork ? (
        <Button
          action={ButtonAction.Primary}
@@ -101,7 +101,11 @@ export const WithdrawForm = () => {
    });

    return () => {
-      abacusStateManager.resetInputState();
+      abacusStateManager.clearTransferInputValues();
+      abacusStateManager.setTransferValue({
+        field: TransferInputField.type,
+        value: null,
+      });
    };
  }, []);

@@ -118,7 +118,11 @@ export const TransferForm = ({
    onChangeAsset(selectedAsset);

    return () => {
-      abacusStateManager.resetInputState();
+      abacusStateManager.clearTransferInputValues();
+      abacusStateManager.setTransferValue({
+        field: TransferInputField.type,
+        value: null,
+      });
    };
  }, []);

@@ -36,6 +36,8 @@ import { openDialog } from '@/state/dialogs';

 import { MustBigNumber } from '@/lib/numbers';
 import { getHydratedTradingData } from '@/lib/orders';
+import { tableMixins } from '@/styles/tableMixins';
+import { breakpoints } from '@/styles';

 const MOBILE_FILLS_PER_PAGE = 50;

@@ -163,7 +163,6 @@ Styled.SizeOutput = styled(Output)<StyleProps>`
 Styled.LiveTradesTable = styled(OrderbookTradesTable)<StyleProps>`
  tr {
    --histogram-bucket-size: 1;
-    background-color: var(--color-layer-2);

    &[data-side=${OrderSide.BUY}] {
      --accent-color: var(--color-positive);
@@ -1,11 +1,10 @@
-import { useCallback, useMemo } from 'react';
+import { useCallback, useEffect, useMemo, useState } from 'react';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 import styled, { type AnyStyledComponent, css, keyframes } from 'styled-components';

 import { OrderSide } from '@dydxprotocol/v4-client-js';
-import { type OrderbookLine } from '@/constants/abacus';
+import { type OrderbookLine, TradeInputField } from '@/constants/abacus';
 import { STRING_KEYS } from '@/constants/localization';
-import { ORDERBOOK_MAX_ROWS_PER_SIDE } from '@/constants/orderbook';

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

@@ -30,6 +29,8 @@ import { OrderbookTradesOutput, OrderbookTradesTable } from './OrderbookTradesTa
 import { breakpoints } from '@/styles';
 import { layoutMixins } from '@/styles/layoutMixins';

+const ORDERBOOK_MAX_ROWS_PER_SIDE = 35;
+
 type ElementProps = {
  maxRowsPerSide?: number;
  layout?: 'vertical' | 'horizontal';
Author	SHA1	Message	Date
mulan xia	e01f763481	add transparency to button + destructive borders	2024-01-24 12:56:20 -05:00
mulan xia	697b97233b	small lint things	2024-01-24 11:21:55 -05:00
mulan xia	16136c3617	remove colors.css file	2024-01-23 18:17:12 -05:00
mulan xia	13da52f31c	fix logo in light mode	2024-01-23 17:19:31 -05:00
mulan xia	1fd31497eb	move files, fix text colors	2024-01-23 15:21:34 -05:00
mulan xia	89c487c2b0	move usage style helper to lib/styles	2024-01-23 13:54:08 -05:00
mulan xia	6e531abf04	fix eol lint	2024-01-23 12:21:39 -05:00
mulan xia	b32a6c8c05	update to use tokens, small fixes	2024-01-23 11:32:56 -05:00
mulan xia	1e9209028e	fix lint error	2024-01-22 16:42:19 -05:00
mulan xia	2861286bdb	introduce tokens file + theme type	2024-01-22 16:28:37 -05:00