Merge branch 'main' into canvas-orderbook

package.json

@@ -39,9 +39,9 @@
     "@cosmjs/proto-signing": "^0.31.0",
     "@cosmjs/stargate": "^0.31.0",
     "@cosmjs/tendermint-rpc": "^0.31.0",
-    "@dydxprotocol/v4-abacus": "^1.1.33",
+    "@dydxprotocol/v4-abacus": "^1.1.32",
     "@dydxprotocol/v4-client-js": "^1.0.11",
-    "@dydxprotocol/v4-localization": "^1.1.6",
+    "@dydxprotocol/v4-localization": "^1.1.5",
     "@ethersproject/providers": "^5.7.2",
     "@js-joda/core": "^5.5.3",
     "@radix-ui/react-accordion": "^1.1.2",
@@ -111,7 +111,7 @@
     "reselect": "^4.1.8",
     "styled-components": "^5.3.11",
     "use-latest": "^1.2.1",
-    "viem": "^1.20.0",
+    "viem": "^1.12.2",
     "wagmi": "^1.4.12"
   },
   "devDependencies": {

pnpm-lock.yaml

@@ -1,9 +1,5 @@
 lockfileVersion: '6.0'
 
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false
-
 dependencies:
   '@0xsquid/sdk':
     specifier: ^1.10.0
@@ -27,14 +23,14 @@ dependencies:
     specifier: ^0.31.0
     version: 0.31.0
   '@dydxprotocol/v4-abacus':
-    specifier: ^1.1.33
+    specifier: ^1.1.32
-    version: 1.1.33
+    version: 1.1.32
   '@dydxprotocol/v4-client-js':
     specifier: ^1.0.11
     version: 1.0.11
   '@dydxprotocol/v4-localization':
-    specifier: ^1.1.6
+    specifier: ^1.1.5
-    version: 1.1.6
+    version: 1.1.5
   '@ethersproject/providers':
     specifier: ^5.7.2
     version: 5.7.2
@@ -243,11 +239,11 @@ dependencies:
     specifier: ^1.2.1
     version: 1.2.1(@types/react@18.2.14)(react@18.2.0)
   viem:
-    specifier: ^1.20.0
+    specifier: ^1.12.2
-    version: 1.20.0(typescript@5.1.3)
+    version: 1.12.2(typescript@5.1.3)
   wagmi:
     specifier: ^1.4.12
-    version: 1.4.13(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)(typescript@5.1.3)(viem@1.20.0)
+    version: 1.4.12(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)(typescript@5.1.3)(viem@1.12.2)
 
 devDependencies:
   '@babel/core':
@@ -392,14 +388,14 @@ packages:
     engines: {node: '>=0.10.0'}
     dev: true
 
-  /@adraffy/ens-normalize@1.10.0:
-    resolution: {integrity: sha512-nA9XHtlAkYfJxY7bce8DcN7eKxWWCWkU+1GR9d+U6MbNpfwQp8TI7vqOsBsMcHoT4mBu2kypKoSKnghEzOOq5Q==}
-    dev: false
-
   /@adraffy/ens-normalize@1.9.2:
     resolution: {integrity: sha512-0h+FrQDqe2Wn+IIGFkTCd4aAwTJ+7834Ek1COohCyV26AXhwQ7WQaz+4F/nLOeVl/3BtWHOHLPsq46V8YB46Eg==}
     dev: false
 
+  /@adraffy/ens-normalize@1.9.4:
+    resolution: {integrity: sha512-UK0bHA7hh9cR39V+4gl2/NnBBjoXIxkuWAPCaY4X7fbH4L/azIi7ilWOCjMUYfpJgraLUAqkRi2BqrjME8Rynw==}
+    dev: false
+
   /@ampproject/remapping@2.2.1:
     resolution: {integrity: sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==}
     engines: {node: '>=6.0.0'}
@@ -991,8 +987,8 @@ packages:
     resolution: {integrity: sha512-RpfLEtTlyIxeNPGKcokS+p3BZII/Q3bYxryFRglh5H3A3T8q9fsLYm72VYAMEOOIBLEa8o93kFLiBDUWKrwXZA==}
     dev: true
 
-  /@dydxprotocol/v4-abacus@1.1.33:
+  /@dydxprotocol/v4-abacus@1.1.32:
-    resolution: {integrity: sha512-VlIOaOPR4ImSWGmKK3+M4VHdMDdTk7qI77Iopppq11qU7f8wdwk4OeedTSuAMxezKez2nCP3J/x3Da+FtrKRqg==}
+    resolution: {integrity: sha512-1KM3ILBg/YrdiVhCp/DXUgyCnJurxeYAIwL6+MWZisEGtdhPf9R7MNKUyVcTeNwEyiyxh4AzXNLRp3IPeHAsAw==}
     dev: false
 
   /@dydxprotocol/v4-client-js@1.0.11:
@@ -1023,8 +1019,8 @@ packages:
       - utf-8-validate
     dev: false
 
-  /@dydxprotocol/v4-localization@1.1.6:
+  /@dydxprotocol/v4-localization@1.1.5:
-    resolution: {integrity: sha512-Bon6NSRU4/FqneAbnP2G28EAPr0hp4LhvAayX61o0O1PGkxnLzAHkXeFppdM0Zn0fOcp1S1MJ+gvz138ZDephQ==}
+    resolution: {integrity: sha512-Y25yuCLFaK3v/81B60lc3qthaWwJn1fNJuYQdOtgnmOhLNqI4YRryUncLkbjdB5xd4QODq5KZikP34pLKX9sgA==}
     dev: false
 
   /@dydxprotocol/v4-proto@0.4.1:
@@ -4890,7 +4886,7 @@ packages:
     resolution: {integrity: sha512-XJbEPuaVc7b9n23MqlF6c+ToYIS3f7P2Sel8f3cSBQ9WORE4xrSuvhMpK9fDSFqJ7by/brc+rmJR/5HViRr0/w==}
     dependencies:
       '@safe-global/safe-gateway-typescript-sdk': 3.9.0
-      viem: 1.20.0(typescript@5.1.3)
+      viem: 1.12.2(typescript@5.1.3)
     transitivePeerDependencies:
       - bufferutil
       - encoding
@@ -5394,13 +5390,31 @@ packages:
       use-sync-external-store: 1.2.0(react@18.2.0)
     dev: false
 
-  /@tanstack/react-query-persist-client@4.32.6(@tanstack/react-query@4.36.1):
+  /@tanstack/react-query-persist-client@4.32.6(@tanstack/react-query@4.32.6):
     resolution: {integrity: sha512-EmNnYpvFYpxS4j5WFeNmfVVBxqq4RDnEFDBZwNKRfb4pzukcx/hcWtwqFk7Qj0EI4Dk8QGl239MEYwJbAc83tQ==}
     peerDependencies:
       '@tanstack/react-query': ^4.32.6
     dependencies:
       '@tanstack/query-persist-client-core': 4.32.6
-      '@tanstack/react-query': 4.36.1(react-dom@18.2.0)(react@18.2.0)
+      '@tanstack/react-query': 4.32.6(react-dom@18.2.0)(react@18.2.0)
+    dev: false
+
+  /@tanstack/react-query@4.32.6(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-AITu/IKJJJXsHHeXNBy5bclu12t08usMCY0vFC2dh9SP/w6JAk5U9GwfjOIPj3p+ATADZvxQPe8UiCtMLNeQbg==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-native: '*'
+    peerDependenciesMeta:
+      react-dom:
+        optional: true
+      react-native:
+        optional: true
+    dependencies:
+      '@tanstack/query-core': 4.32.6
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+      use-sync-external-store: 1.2.0(react@18.2.0)
     dev: false
 
   /@tanstack/react-query@4.36.1(react-dom@18.2.0)(react@18.2.0):
@@ -5606,7 +5620,6 @@ packages:
 
   /@types/node@20.3.1:
     resolution: {integrity: sha512-EhcH/wvidPy1WeML3TtYFGR83UzjxeWRen9V402T8aUGYsCHOmfoisV3ZSg03gAFIbLq8TnWOJ0f4cALtnSEUg==}
-    dev: true
 
   /@types/normalize-package-data@2.4.1:
     resolution: {integrity: sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==}
@@ -5668,6 +5681,12 @@ packages:
       '@types/node': 20.10.5
     dev: false
 
+  /@types/ws@8.5.6:
+    resolution: {integrity: sha512-8B5EO9jLVCy+B58PLHvLDuOD8DRVMgQzq8d55SjLCOn9kqGyqOvy27exVaTio1q1nX5zLu8/6N0n2ThSxOM6tg==}
+    dependencies:
+      '@types/node': 20.3.1
+    dev: false
+
   /@typescript-eslint/eslint-plugin@5.60.0(@typescript-eslint/parser@5.60.0)(eslint@8.43.0)(typescript@5.1.3):
     resolution: {integrity: sha512-78B+anHLF1TI8Jn/cD0Q00TBYdMgjdOn980JfAVa9yw5sop8nyTfVOQAv6LWywkOGLclDBtv5z3oxN4w7jxyNg==}
     engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
@@ -6164,8 +6183,8 @@ packages:
       pretty-format: 27.5.1
     dev: true
 
-  /@wagmi/connectors@3.1.11(@types/react@18.2.14)(react@18.2.0)(typescript@5.1.3)(viem@1.20.0):
+  /@wagmi/connectors@3.1.10(@types/react@18.2.14)(react@18.2.0)(typescript@5.1.3)(viem@1.12.2):
-    resolution: {integrity: sha512-wzxp9f9PtSUFjDUP/QDjc1t7HON4D8wrVKsw35ejdO8hToDpx1gU9lwH/47Zo/1zExGezQc392sjoHSszYd7OA==}
+    resolution: {integrity: sha512-ZLJC1QaeiZarkF07Cr9mOlVjPO1Lf5TBx+JKBms2y5fUIXlKrxCfQgO/gDCureboI+Us2X3IRI659+XacSGpbA==}
     peerDependencies:
       typescript: '>=5.0.4'
       viem: '>=0.3.35'
@@ -6176,14 +6195,14 @@ packages:
       '@coinbase/wallet-sdk': 3.7.1
       '@safe-global/safe-apps-provider': 0.18.1(typescript@5.1.3)
       '@safe-global/safe-apps-sdk': 8.1.0(typescript@5.1.3)
-      '@walletconnect/ethereum-provider': 2.11.0(@types/react@18.2.14)(react@18.2.0)
+      '@walletconnect/ethereum-provider': 2.10.6(@types/react@18.2.14)(react@18.2.0)
       '@walletconnect/legacy-provider': 2.0.0
       '@walletconnect/modal': 2.6.2(@types/react@18.2.14)(react@18.2.0)
-      '@walletconnect/utils': 2.11.0
+      '@walletconnect/utils': 2.10.2
       abitype: 0.8.7(typescript@5.1.3)
       eventemitter3: 4.0.7
       typescript: 5.1.3
-      viem: 1.20.0(typescript@5.1.3)
+      viem: 1.12.2(typescript@5.1.3)
     transitivePeerDependencies:
       - '@azure/app-configuration'
       - '@azure/cosmos'
@@ -6206,8 +6225,8 @@ packages:
       - zod
     dev: false
 
-  /@wagmi/core@1.4.13(@types/react@18.2.14)(react@18.2.0)(typescript@5.1.3)(viem@1.20.0):
+  /@wagmi/core@1.4.12(@types/react@18.2.14)(react@18.2.0)(typescript@5.1.3)(viem@1.12.2):
-    resolution: {integrity: sha512-ytMCvXbBOgfDu9Qw67279wq/jNEe7EZLjLyekX7ROnvHRADqFr3lwZI6ih41UmtRZAmXAx8Ghyuqy154EjB5mQ==}
+    resolution: {integrity: sha512-bLcYmmGgjtl3jAGo8X3Sm6oUwsdjbVxFMu9SWnwHdE4S9JdYeWM57dEhQgq8SYul2yQ7yY2/gimBf1Or0Ky3dQ==}
     peerDependencies:
       typescript: '>=5.0.4'
       viem: '>=0.3.35'
@@ -6215,11 +6234,11 @@ packages:
       typescript:
         optional: true
     dependencies:
-      '@wagmi/connectors': 3.1.11(@types/react@18.2.14)(react@18.2.0)(typescript@5.1.3)(viem@1.20.0)
+      '@wagmi/connectors': 3.1.10(@types/react@18.2.14)(react@18.2.0)(typescript@5.1.3)(viem@1.12.2)
       abitype: 0.8.7(typescript@5.1.3)
       eventemitter3: 4.0.7
       typescript: 5.1.3
-      viem: 1.20.0(typescript@5.1.3)
+      viem: 1.12.2(typescript@5.1.3)
       zustand: 4.4.7(@types/react@18.2.14)(react@18.2.0)
     transitivePeerDependencies:
       - '@azure/app-configuration'
@@ -6281,45 +6300,6 @@ packages:
       - utf-8-validate
     dev: false
 
-  /@walletconnect/core@2.11.0:
-    resolution: {integrity: sha512-2Tjp5BCevI7dbmqo/OrCjX4tqgMqwJNQLlQAlphqPfvwlF9+tIu6pGcVbSN3U9zyXzWIZCeleqEaWUeSeET4Ew==}
-    dependencies:
-      '@walletconnect/heartbeat': 1.2.1
-      '@walletconnect/jsonrpc-provider': 1.0.13
-      '@walletconnect/jsonrpc-types': 1.0.3
-      '@walletconnect/jsonrpc-utils': 1.0.8
-      '@walletconnect/jsonrpc-ws-connection': 1.0.14
-      '@walletconnect/keyvaluestorage': 1.1.1
-      '@walletconnect/logger': 2.0.1
-      '@walletconnect/relay-api': 1.0.9
-      '@walletconnect/relay-auth': 1.0.4
-      '@walletconnect/safe-json': 1.0.2
-      '@walletconnect/time': 1.0.2
-      '@walletconnect/types': 2.11.0
-      '@walletconnect/utils': 2.11.0
-      events: 3.3.0
-      isomorphic-unfetch: 3.1.0
-      lodash.isequal: 4.5.0
-      uint8arrays: 3.1.1
-    transitivePeerDependencies:
-      - '@azure/app-configuration'
-      - '@azure/cosmos'
-      - '@azure/data-tables'
-      - '@azure/identity'
-      - '@azure/keyvault-secrets'
-      - '@azure/storage-blob'
-      - '@capacitor/preferences'
-      - '@netlify/blobs'
-      - '@planetscale/database'
-      - '@react-native-async-storage/async-storage'
-      - '@upstash/redis'
-      - '@vercel/kv'
-      - bufferutil
-      - encoding
-      - supports-color
-      - utf-8-validate
-    dev: false
-
   /@walletconnect/crypto@1.0.3:
     resolution: {integrity: sha512-+2jdORD7XQs76I2Odgr3wwrtyuLUXD/kprNVsjWRhhhdO9Mt6WqVzOPu0/t7OHSmgal8k7SoBQzUc5hu/8zL/g==}
     dependencies:
@@ -6345,18 +6325,18 @@ packages:
       tslib: 1.14.1
     dev: false
 
-  /@walletconnect/ethereum-provider@2.11.0(@types/react@18.2.14)(react@18.2.0):
+  /@walletconnect/ethereum-provider@2.10.6(@types/react@18.2.14)(react@18.2.0):
-    resolution: {integrity: sha512-YrTeHVjuSuhlUw7SQ6xBJXDuJ6iAC+RwINm9nVhoKYJSHAy3EVSJZOofMKrnecL0iRMtD29nj57mxAInIBRuZA==}
+    resolution: {integrity: sha512-bBQ+yUfxLv8VxNttgNKY7nED35gSVayO/BnLHbNKvyV1gpvSCla5mWB9MsXuQs70MK0g+/qtgRVSrOtdSubaNQ==}
     dependencies:
       '@walletconnect/jsonrpc-http-connection': 1.0.7
       '@walletconnect/jsonrpc-provider': 1.0.13
       '@walletconnect/jsonrpc-types': 1.0.3
       '@walletconnect/jsonrpc-utils': 1.0.8
       '@walletconnect/modal': 2.6.2(@types/react@18.2.14)(react@18.2.0)
-      '@walletconnect/sign-client': 2.11.0
+      '@walletconnect/sign-client': 2.10.6
-      '@walletconnect/types': 2.11.0
+      '@walletconnect/types': 2.10.6
-      '@walletconnect/universal-provider': 2.11.0
+      '@walletconnect/universal-provider': 2.10.6
-      '@walletconnect/utils': 2.11.0
+      '@walletconnect/utils': 2.10.6
       events: 3.3.0
     transitivePeerDependencies:
       - '@azure/app-configuration'
@@ -6624,17 +6604,20 @@ packages:
       - utf-8-validate
     dev: false
 
-  /@walletconnect/sign-client@2.11.0:
+  /@walletconnect/time@1.0.2:
-    resolution: {integrity: sha512-H2ukscibBS+6WrzQWh+WyVBqO5z4F5et12JcwobdwgHnJSlqIoZxqnUYYWNCI5rUR5UKsKWaUyto4AE9N5dw4Q==}
+    resolution: {integrity: sha512-uzdd9woDcJ1AaBZRhqy5rNC9laqWGErfc4dxA9a87mPdKOgWMD85mcFo9dIYIts/Jwocfwn07EC6EzclKubk/g==}
+    dependencies:
+      tslib: 1.14.1
+    dev: false
+
+  /@walletconnect/types@2.10.2:
+    resolution: {integrity: sha512-luNV+07Wdla4STi9AejseCQY31tzWKQ5a7C3zZZaRK/di+rFaAAb7YW04OP4klE7tw/mJRGPTlekZElmHxO8kQ==}
     dependencies:
-      '@walletconnect/core': 2.11.0
       '@walletconnect/events': 1.0.1
       '@walletconnect/heartbeat': 1.2.1
-      '@walletconnect/jsonrpc-utils': 1.0.8
+      '@walletconnect/jsonrpc-types': 1.0.3
+      '@walletconnect/keyvaluestorage': 1.1.1
       '@walletconnect/logger': 2.0.1
-      '@walletconnect/time': 1.0.2
-      '@walletconnect/types': 2.11.0
-      '@walletconnect/utils': 2.11.0
       events: 3.3.0
     transitivePeerDependencies:
       - '@azure/app-configuration'
@@ -6649,16 +6632,7 @@ packages:
       - '@react-native-async-storage/async-storage'
       - '@upstash/redis'
       - '@vercel/kv'
-      - bufferutil
-      - encoding
       - supports-color
-      - utf-8-validate
-    dev: false
-
-  /@walletconnect/time@1.0.2:
-    resolution: {integrity: sha512-uzdd9woDcJ1AaBZRhqy5rNC9laqWGErfc4dxA9a87mPdKOgWMD85mcFo9dIYIts/Jwocfwn07EC6EzclKubk/g==}
-    dependencies:
-      tslib: 1.14.1
     dev: false
 
   /@walletconnect/types@2.10.6:
@@ -6686,42 +6660,17 @@ packages:
       - supports-color
     dev: false
 
-  /@walletconnect/types@2.11.0:
+  /@walletconnect/universal-provider@2.10.6:
-    resolution: {integrity: sha512-AB5b1lrEbCGHxqS2vqfCkIoODieH+ZAUp9rA1O2ftrhnqDJiJK983Df87JhYhECsQUBHHfALphA8ydER0q+9sw==}
+    resolution: {integrity: sha512-CEivusqqoD31BhCTKp08DnrccfGjwD9MFjZs5BNRorDteRFE8zVm9LmP6DSiNJCw82ZajGlZThggLQ/BAATfwA==}
-    dependencies:
-      '@walletconnect/events': 1.0.1
-      '@walletconnect/heartbeat': 1.2.1
-      '@walletconnect/jsonrpc-types': 1.0.3
-      '@walletconnect/keyvaluestorage': 1.1.1
-      '@walletconnect/logger': 2.0.1
-      events: 3.3.0
-    transitivePeerDependencies:
-      - '@azure/app-configuration'
-      - '@azure/cosmos'
-      - '@azure/data-tables'
-      - '@azure/identity'
-      - '@azure/keyvault-secrets'
-      - '@azure/storage-blob'
-      - '@capacitor/preferences'
-      - '@netlify/blobs'
-      - '@planetscale/database'
-      - '@react-native-async-storage/async-storage'
-      - '@upstash/redis'
-      - '@vercel/kv'
-      - supports-color
-    dev: false
-
-  /@walletconnect/universal-provider@2.11.0:
-    resolution: {integrity: sha512-zgJv8jDvIMP4Qse/D9oIRXGdfoNqonsrjPZanQ/CHNe7oXGOBiQND2IIeX+tS0H7uNA0TPvctljCLiIN9nw4eA==}
     dependencies:
       '@walletconnect/jsonrpc-http-connection': 1.0.7
       '@walletconnect/jsonrpc-provider': 1.0.13
       '@walletconnect/jsonrpc-types': 1.0.3
       '@walletconnect/jsonrpc-utils': 1.0.8
       '@walletconnect/logger': 2.0.1
-      '@walletconnect/sign-client': 2.11.0
+      '@walletconnect/sign-client': 2.10.6
-      '@walletconnect/types': 2.11.0
+      '@walletconnect/types': 2.10.6
-      '@walletconnect/utils': 2.11.0
+      '@walletconnect/utils': 2.10.6
       events: 3.3.0
     transitivePeerDependencies:
       - '@azure/app-configuration'
@@ -6742,8 +6691,8 @@ packages:
       - utf-8-validate
     dev: false
 
-  /@walletconnect/utils@2.10.6:
+  /@walletconnect/utils@2.10.2:
-    resolution: {integrity: sha512-oRsWWhN2+hi3aiDXrQEOfysz6FHQJGXLsNQPVt+WIBJplO6Szmdau9dbleD88u1iiT4GKPqE0R9FOYvvPm1H/w==}
+    resolution: {integrity: sha512-syxXRpc2yhSknMu3IfiBGobxOY7fLfLTJuw+ppKaeO6WUdZpIit3wfuGOcc0Ms3ZPFCrGfyGOoZsCvgdXtptRg==}
     dependencies:
       '@stablelib/chacha20poly1305': 1.0.1
       '@stablelib/hkdf': 1.0.1
@@ -6753,7 +6702,7 @@ packages:
       '@walletconnect/relay-api': 1.0.9
       '@walletconnect/safe-json': 1.0.2
       '@walletconnect/time': 1.0.2
-      '@walletconnect/types': 2.10.6
+      '@walletconnect/types': 2.10.2
       '@walletconnect/window-getters': 1.0.1
       '@walletconnect/window-metadata': 1.0.1
       detect-browser: 5.3.0
@@ -6775,8 +6724,8 @@ packages:
       - supports-color
     dev: false
 
-  /@walletconnect/utils@2.11.0:
+  /@walletconnect/utils@2.10.6:
-    resolution: {integrity: sha512-hxkHPlTlDQILHfIKXlmzgNJau/YcSBC3XHUSuZuKZbNEw3duFT6h6pm3HT/1+j1a22IG05WDsNBuTCRkwss+BQ==}
+    resolution: {integrity: sha512-oRsWWhN2+hi3aiDXrQEOfysz6FHQJGXLsNQPVt+WIBJplO6Szmdau9dbleD88u1iiT4GKPqE0R9FOYvvPm1H/w==}
     dependencies:
       '@stablelib/chacha20poly1305': 1.0.1
       '@stablelib/hkdf': 1.0.1
@@ -6786,7 +6735,7 @@ packages:
       '@walletconnect/relay-api': 1.0.9
       '@walletconnect/safe-json': 1.0.2
       '@walletconnect/time': 1.0.2
-      '@walletconnect/types': 2.11.0
+      '@walletconnect/types': 2.10.6
       '@walletconnect/window-getters': 1.0.1
       '@walletconnect/window-metadata': 1.0.1
       detect-browser: 5.3.0
@@ -10485,15 +10434,6 @@ packages:
     engines: {node: '>=12'}
     dev: true
 
-  /isomorphic-unfetch@3.1.0:
-    resolution: {integrity: sha512-geDJjpoZ8N0kWexiwkX8F9NkTsXhetLPVbZFQ+JTW239QNOwvB0gniuR1Wc6f0AMTn7/mFGyXvHTifrCp/GH8Q==}
-    dependencies:
-      node-fetch: 2.6.12
-      unfetch: 4.2.0
-    transitivePeerDependencies:
-      - encoding
-    dev: false
-
   /isomorphic-ws@4.0.1(ws@7.5.9):
     resolution: {integrity: sha512-BhBvN2MBpWTaSHdWRb/bwdZJ1WaehQ2L1KngkCkfLUGF0mAWAT1sQUQacEmQ0jXkFw/czDXPNQSL5u2/Krsz1w==}
     peerDependencies:
@@ -10502,8 +10442,8 @@ packages:
       ws: 7.5.9
     dev: false
 
-  /isows@1.0.3(ws@8.13.0):
+  /isomorphic-ws@5.0.0(ws@8.13.0):
-    resolution: {integrity: sha512-2cKei4vlmg2cxEjm3wVSqn8pcoRF/LX/wpifuuNquFO4SQmPwarClT+SUCA2lt+l581tTeZIPIZuIDo2jWN1fg==}
+    resolution: {integrity: sha512-muId7Zzn9ywDsyXgTIafTry2sV3nySZeUDe6YedVd1Hvuuep5AsIlqK+XefWpYTyJG5e503F2xIuT2lcU6rCSw==}
     peerDependencies:
       ws: '*'
     dependencies:
@@ -11840,6 +11780,10 @@ packages:
     resolution: {integrity: sha512-bW9T/uJDPAJB2YNYEpWzE54U5O3MQidXsOyTfnbKYtTtFexRvGzb1waphBN4ZwP6EcIvYYEOwW0b72BpAqydTw==}
     dev: false
 
+  /node-fetch-native@1.6.1:
+    resolution: {integrity: sha512-bW9T/uJDPAJB2YNYEpWzE54U5O3MQidXsOyTfnbKYtTtFexRvGzb1waphBN4ZwP6EcIvYYEOwW0b72BpAqydTw==}
+    dev: false
+
   /node-fetch@2.6.12:
     resolution: {integrity: sha512-C/fGU2E8ToujUivIO0H+tpQ6HWo4eEmchoPIoXtxCrVghxdKq+QOHqEZW7tuP3KlV3bC8FRMO5nMCC7Zm1VP6g==}
     engines: {node: 4.x || >=6.0.0}
@@ -13875,10 +13819,6 @@ packages:
       pathe: 1.1.1
     dev: false
 
-  /unfetch@4.2.0:
-    resolution: {integrity: sha512-F9p7yYCn6cIW9El1zi0HI6vqpeIvBsr3dSuRO6Xuppb1u5rXpCPmMvLSyECLhybr9isec8Ohl0hPekMVrEinDA==}
-    dev: false
-
   /unified@10.1.2:
     resolution: {integrity: sha512-pUSWAi/RAnVy1Pif2kAoeWNBa3JVrx0MId2LASj8G+7AiHWoKZNTomq6LG326T68U7/e263X6fTdcXIy7XnF7Q==}
     dependencies:
@@ -14232,21 +14172,22 @@ packages:
       vfile-message: 3.1.4
     dev: true
 
-  /viem@1.20.0(typescript@5.1.3):
+  /viem@1.12.2(typescript@5.1.3):
-    resolution: {integrity: sha512-yPjV9pJr10xi28C/9LEvs5zdZNEMiru3Kz7nufghVYABJAfeSkoZQXb6b23n7MscS7c55JO5nmUI3xKkd9g6Yg==}
+    resolution: {integrity: sha512-aCaUCyg72ES+jK4s6tVYOMnOt4if71RwzgiUAUpAuaCgvHFfh9DCnwuEfwkxEZLE2vafOsirgJ3fcn7nsDVQoQ==}
     peerDependencies:
       typescript: '>=5.0.4'
     peerDependenciesMeta:
       typescript:
         optional: true
     dependencies:
-      '@adraffy/ens-normalize': 1.10.0
+      '@adraffy/ens-normalize': 1.9.4
       '@noble/curves': 1.2.0
       '@noble/hashes': 1.3.2
       '@scure/bip32': 1.3.2
       '@scure/bip39': 1.2.1
+      '@types/ws': 8.5.6
       abitype: 0.9.8(typescript@5.1.3)
-      isows: 1.0.3(ws@8.13.0)
+      isomorphic-ws: 5.0.0(ws@8.13.0)
       typescript: 5.1.3
       ws: 8.13.0
     transitivePeerDependencies:
@@ -14416,8 +14357,8 @@ packages:
       - supports-color
     dev: true
 
-  /wagmi@1.4.13(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)(typescript@5.1.3)(viem@1.20.0):
+  /wagmi@1.4.12(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)(typescript@5.1.3)(viem@1.12.2):
-    resolution: {integrity: sha512-AScVYFjqNt1wMgL99Bob7MLdhoTZ3XKiOZL5HVBdy4W1sh7QodA3gQ8IsmTuUrQ7oQaTxjiXEhwg7sWNrPBvJA==}
+    resolution: {integrity: sha512-QRxpjhdMlZmbYTfn9VQkQMKq+l3kwA1O7tF10vaykPrjbGX+IIlyn72ib9oqW9BfQO7n/Sf/mnVz1zbxRhGPWA==}
     peerDependencies:
       react: '>=17.0.0'
       typescript: '>=5.0.4'
@@ -14427,14 +14368,14 @@ packages:
         optional: true
     dependencies:
       '@tanstack/query-sync-storage-persister': 4.32.6
-      '@tanstack/react-query': 4.36.1(react-dom@18.2.0)(react@18.2.0)
+      '@tanstack/react-query': 4.32.6(react-dom@18.2.0)(react@18.2.0)
-      '@tanstack/react-query-persist-client': 4.32.6(@tanstack/react-query@4.36.1)
+      '@tanstack/react-query-persist-client': 4.32.6(@tanstack/react-query@4.32.6)
-      '@wagmi/core': 1.4.13(@types/react@18.2.14)(react@18.2.0)(typescript@5.1.3)(viem@1.20.0)
+      '@wagmi/core': 1.4.12(@types/react@18.2.14)(react@18.2.0)(typescript@5.1.3)(viem@1.12.2)
       abitype: 0.8.7(typescript@5.1.3)
       react: 18.2.0
       typescript: 5.1.3
       use-sync-external-store: 1.2.0(react@18.2.0)
-      viem: 1.20.0(typescript@5.1.3)
+      viem: 1.12.2(typescript@5.1.3)
     transitivePeerDependencies:
       - '@azure/app-configuration'
       - '@azure/cosmos'
@@ -14813,3 +14754,7 @@ packages:
   /zwitch@2.0.4:
     resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
     dev: true
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false

public/configs/env.json

@@ -579,8 +579,8 @@
          "endpoints": {
             "indexers": [
                {
-                  "api": "https://indexer.v4testnet.dydx.exchange",
+                  "api": "https://dydx-testnet.imperator.co",
-                  "socket": "wss://indexer.v4testnet.dydx.exchange"
+                  "socket": "wss://dydx-testnet.imperator.co"
                }
             ],
             "validators": [
@@ -734,8 +734,8 @@
          "endpoints": {
             "indexers": [
                {
-                  "api": "https://indexer.v4testnet.dydx.exchange",
+                  "api": "https://dydx-testnet.imperator.co",
-                  "socket": "wss://indexer.v4testnet.dydx.exchange"
+                  "socket": "wss://dydx-testnet.imperator.co"
                }
             ],
             "validators": [
@@ -810,8 +810,8 @@
          "endpoints": {
             "indexers": [
                {
-                  "api": "https://indexer.v4testnet.dydx.exchange",
+                  "api": "https://dydx-testnet.imperator.co",
-                  "socket": "wss://indexer.v4testnet.dydx.exchange"
+                  "socket": "wss://dydx-testnet.imperator.co"
                }
             ],
             "validators": [
@@ -886,8 +886,8 @@
          "endpoints": {
             "indexers": [
                {
-                  "api": "https://indexer.v4testnet.dydx.exchange",
+                  "api": "https://dydx-testnet.imperator.co",
-                  "socket": "wss://indexer.v4testnet.dydx.exchange"
+                  "socket": "wss://dydx-testnet.imperator.co"
                }
             ],
             "validators": [
@@ -962,8 +962,8 @@
          "endpoints": {
             "indexers": [
                {
-                  "api": "https://indexer.v4testnet.dydx.exchange",
+                  "api": "https://dydx-testnet.imperator.co",
-                  "socket": "wss://indexer.v4testnet.dydx.exchange"
+                  "socket": "wss://dydx-testnet.imperator.co"
                }
             ],
             "validators": [
@@ -1029,8 +1029,8 @@
          "endpoints": {
             "indexers": [
                {
-                  "api": "https://indexer.v4testnet.dydx.exchange",
+                  "api": "https://dydx-testnet.imperator.co",
-                  "socket": "wss://indexer.v4testnet.dydx.exchange"
+                  "socket": "wss://dydx-testnet.imperator.co"
                }
             ],
             "validators": [

src/components/Canvas.tsx

@@ -0,0 +1,16 @@
+import { forwardRef } from 'react';
+
+type StyleProps = {
+  className?: string;
+};
+
+type ElementProps = {
+  width: number | string;
+  height: number | string;
+};
+
+export const Canvas = forwardRef<HTMLCanvasElement, ElementProps & StyleProps>(
+  ({ className, width, height }, canvasRef) => (
+    <canvas ref={canvasRef} className={className} width={width ?? 0} height={height ?? 0} />
+  )
+);

src/components/Tabs.tsx

@@ -118,6 +118,7 @@ export const Tabs = <TabItemsValue extends string>({
               forceMount={forceMount}
               $hide={forceMount && currentItem?.value !== value}
               $withTransitions={withTransitions}
+              asChild={asChild}
             >
               {content}
             </Styled.Content>

src/hooks/orderbook/index.ts

@@ -0,0 +1,11 @@
+import { useCalculateOrderbookData } from './useCalculateOrderbookData';
+import { useCenterOrderbook } from './useCenterOrderbook';
+import { useDrawOrderbook } from './useDrawOrderbook';
+import { useSpreadRowScrollListener } from './useSpreadRowScrollListener';
+
+export {
+  useCalculateOrderbookData,
+  useCenterOrderbook,
+  useDrawOrderbook,
+  useSpreadRowScrollListener,
+};

src/hooks/orderbook/useCalculateOrderbookData.ts

@@ -0,0 +1,55 @@
+import { useMemo } from 'react';
+import { useSelector, shallowEqual } from 'react-redux';
+import { OrderSide } from '@dydxprotocol/v4-client-js';
+
+import { OrderbookLine } from '@/constants/abacus';
+
+import { getCurrentMarketOrderbook } from '@/state/perpetualsSelectors';
+import { getSubaccountOpenOrdersBySideAndPrice } from '@/state/accountSelectors';
+
+import type { RowData } from '@/views/Orderbook/OrderbookRow';
+
+import { MustBigNumber } from '@/lib/numbers';
+
+export const useCalculateOrderbookData = ({ maxRowsPerSide }: { maxRowsPerSide: number }) => {
+  const orderbook = useSelector(getCurrentMarketOrderbook, shallowEqual);
+
+  const openOrdersBySideAndPrice =
+    useSelector(getSubaccountOpenOrdersBySideAndPrice, shallowEqual) || {};
+
+  return useMemo(() => {
+    const asks = (orderbook?.asks?.toArray() ?? [])
+      .map(
+        (row: OrderbookLine) =>
+          ({
+            side: 'ask',
+            mine: openOrdersBySideAndPrice[OrderSide.SELL]?.[row.price]?.size,
+            ...row,
+          } as RowData)
+      )
+      .slice(0, maxRowsPerSide);
+
+    const bids = (orderbook?.bids?.toArray() ?? [])
+      .map(
+        (row: OrderbookLine) =>
+          ({
+            side: 'bid',
+            mine: openOrdersBySideAndPrice[OrderSide.BUY]?.[row.price]?.size,
+            ...row,
+          } as RowData)
+      )
+      .slice(0, maxRowsPerSide);
+
+    const spread =
+      asks[0] && bids[0] ? MustBigNumber(asks[0]?.price ?? 0).minus(bids[0]?.price ?? 0) : null;
+
+    const spreadPercent = orderbook?.spreadPercent;
+
+    const histogramRange = Math.max(
+      Number(bids[bids.length - 1]?.depth),
+      Number(asks[asks.length - 1]?.depth)
+    );
+
+    return { asks, bids, spread, spreadPercent, histogramRange, hasOrderbook: !!orderbook };
+  }, [orderbook, openOrdersBySideAndPrice]);
+};

src/hooks/orderbook/useCenterOrderbook.ts

@@ -0,0 +1,22 @@
+import { type RefObject, useEffect } from 'react';
+
+type ElementProps = {
+  marketId: string;
+  orderbookRef: RefObject<HTMLDivElement>;
+};
+
+/**
+ * @description Center Orderbook on load and market change
+ * Assumed that the two sides are the same height
+ */
+export const useCenterOrderbook = ({ marketId, orderbookRef }: ElementProps) => {
+  const orderbookEl = orderbookRef.current;
+  const { clientHeight, scrollHeight } = orderbookEl ?? {};
+  const shouldScroll = !!scrollHeight && !!clientHeight && scrollHeight > clientHeight;
+
+  useEffect(() => {
+    if (orderbookEl && shouldScroll) {
+      orderbookEl.scrollTo({ top: (scrollHeight - clientHeight) / 2 });
+    }
+  }, [shouldScroll, marketId]);
+};

src/hooks/orderbook/useDrawOrderbook.ts

@@ -0,0 +1,380 @@
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useSelector } from 'react-redux';
+
+import type { Nullable } from '@/constants/abacus';
+import { SMALL_USD_DECIMALS, TOKEN_DECIMALS } from '@/constants/numbers';
+import { useLocaleSeparators } from '@/hooks/useLocaleSeparators';
+
+import { getAppTheme } from '@/state/configsSelectors';
+
+import { ROW_HEIGHT, ROW_PADDING_RIGHT, type RowData } from '@/views/Orderbook/OrderbookRow';
+
+import { MustBigNumber } from '@/lib/numbers';
+import { log } from '@/lib/telemetry';
+import { Colors } from '@/styles/colors';
+
+type ElementProps = {
+  data: RowData[];
+  histogramRange: number;
+  hoveredRow?: number;
+  stepSizeDecimals: Nullable<number>;
+  tickSizeDecimals: Nullable<number>;
+};
+
+type StyleProps = {
+  histogramSide?: 'left' | 'right';
+};
+
+export const useDrawOrderbook = ({
+  data,
+  histogramRange,
+  stepSizeDecimals,
+  tickSizeDecimals,
+  histogramSide = 'right',
+  hoveredRow,
+}: ElementProps & StyleProps) => {
+  const theme = useSelector(getAppTheme);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const hoverCanvasRef = useRef<HTMLCanvasElement>(null);
+  const canvas = canvasRef.current;
+  const hoverCanvas = hoverCanvasRef.current;
+
+  /**
+   *         to === 'right'                to === 'left'
+   *         |===================|         |===================|
+   * bar:    a                   b         c                   d
+   * a = 0
+   * b = depthBarWidth
+   * c = canvasWidth - depthBarWidth
+   * d = canvasWidth
+   *
+   */
+  const getXYValues = ({
+    barWidth,
+    canvasWidth,
+    gradientMultiplier,
+  }: {
+    barWidth: number;
+    canvasWidth: number;
+    gradientMultiplier: number;
+  }) => {
+    const gradient = {
+      x1: Math.floor(histogramSide === 'left' ? barWidth : canvasWidth - barWidth),
+      x2: Math.floor(
+        histogramSide === 'left'
+          ? 0 - (canvasWidth * gradientMultiplier - canvasWidth)
+          : canvasWidth * gradientMultiplier
+      ),
+    };
+    const bar = {
+      x1: Math.floor(histogramSide === 'left' ? 0 : canvasWidth - barWidth),
+      x2: Math.floor(
+        histogramSide === 'left' ? Math.min(barWidth, canvasWidth - 2) : canvasWidth - 2
+      ),
+    };
+
+    return {
+      bar,
+      gradient,
+    };
+  };
+
+  const getYFromIndex = (idx: number, type: 'text' | 'bar' | 'rect') => {
+    return (
+      idx * ROW_HEIGHT +
+      {
+        text: ROW_HEIGHT / 2, // center of the row
+        bar: 1, // 1px off the top and bottom so the histograms do not touch
+        rect: 0,
+      }[type]
+    );
+  };
+
+  // Get X value by column, colIdx starts at 0
+  const getXByColumn = ({ canvasWidth, colIdx }: { canvasWidth: number; colIdx: number }) => {
+    return Math.floor(((colIdx + 1) * canvasWidth) / 3);
+  };
+
+  const drawBars = ({
+    value,
+    canvasWidth,
+    ctx,
+    gradientMultiplier,
+    histogramAccentColor,
+    idx,
+    histogramSide,
+  }: {
+    value: Nullable<number>;
+    canvasWidth: number;
+    ctx: CanvasRenderingContext2D;
+    gradientMultiplier: number;
+    histogramAccentColor: string;
+    idx: number;
+    histogramSide: 'left' | 'right';
+  }) => {
+    const histogramBarWidth = canvasWidth - 2;
+    const barWidth = value ? (value / histogramRange) * histogramBarWidth : 0;
+    const { gradient, bar } = getXYValues({ barWidth, canvasWidth, gradientMultiplier });
+
+    let linearGradient;
+
+    try {
+      linearGradient = ctx.createLinearGradient(
+        gradient.x1,
+        ROW_HEIGHT / 2,
+        gradient.x2,
+        ROW_HEIGHT / 2
+      );
+
+      linearGradient.addColorStop(0, histogramAccentColor);
+      linearGradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
+      ctx.fillStyle = linearGradient;
+    } catch (err) {
+      log('Orderbook/createLinearGradient', err, {
+        x1: gradient.x1,
+        y1: ROW_HEIGHT / 2,
+        x2: gradient.x2,
+        y2: ROW_HEIGHT / 2,
+      });
+
+      ctx.fillStyle = 'rgba(0, 0, 0, 0)';
+    }
+
+    ctx.beginPath();
+
+    ctx.roundRect
+      ? ctx.roundRect?.(
+          bar.x1,
+          getYFromIndex(idx, 'bar'),
+          bar.x2,
+          ROW_HEIGHT - 2,
+          histogramSide === 'right' ? [2, 0, 0, 2] : [0, 2, 2, 0]
+        )
+      : ctx.rect(bar.x1, getYFromIndex(idx, 'bar'), bar.x2, ROW_HEIGHT - 2);
+    ctx.fill();
+  };
+
+  const { decimal: LOCALE_DECIMAL_SEPARATOR } = useLocaleSeparators();
+
+  const formatOptions = {
+    decimalSeparator: LOCALE_DECIMAL_SEPARATOR,
+  };
+
+  const drawText = useCallback(
+    ({
+      ctx,
+      canvasWidth,
+      idx,
+      size,
+      price,
+      mine,
+      animationType,
+    }: {
+      ctx: CanvasRenderingContext2D;
+      canvasWidth: number;
+      idx: number;
+      size?: Nullable<number>;
+      price?: Nullable<number>;
+      mine?: Nullable<number>;
+      animationType?: 'remove' | 'add';
+    }) => {
+      const y = getYFromIndex(idx, 'text');
+      const rectY = getYFromIndex(idx, 'rect');
+
+      let startTime: number;
+      let textColor: string = Colors[theme].text2;
+      const animateColor = (timestamp: number) => {
+        if (!startTime) startTime = timestamp;
+        const animationTime = timestamp - startTime;
+
+        // Linear transition for demonstration purposes
+        textColor = animationType
+          ? {
+              add: Colors[theme].green,
+              remove: Colors[theme].red,
+            }[animationType]
+          : Colors[theme].text2;
+
+        if (animationTime < 500) {
+          // Continue the animation for 500ms (adjust as needed)
+          requestAnimationFrame(animateColor);
+        } else {
+          textColor = Colors[theme].text2;
+        }
+
+        if (animationType) {
+          // TODO: Clear rect and redraw text
+          // ctx.clearRect(0, rectY, canvasWidth, rectY + ROW_HEIGHT);
+        }
+      };
+
+      requestAnimationFrame(animateColor);
+
+      // Size text
+      if (size) {
+        ctx.fillStyle = textColor;
+        ctx.fillText(
+          MustBigNumber(size).toFormat(stepSizeDecimals ?? TOKEN_DECIMALS, formatOptions),
+          getXByColumn({ canvasWidth, colIdx: 0 }) - ROW_PADDING_RIGHT,
+          y
+        );
+      }
+
+      // Price text
+      if (price) {
+        ctx.fillStyle = textColor;
+        ctx.fillText(
+          MustBigNumber(price).toFormat(tickSizeDecimals ?? SMALL_USD_DECIMALS, formatOptions),
+          getXByColumn({ canvasWidth, colIdx: 1 }) - ROW_PADDING_RIGHT,
+          y
+        );
+      }
+
+      // Mine text
+      if (mine) {
+        ctx.fillStyle = Colors[theme].text2;
+        ctx.fillText(
+          MustBigNumber(mine).toFormat(stepSizeDecimals ?? TOKEN_DECIMALS, formatOptions),
+          getXByColumn({ canvasWidth, colIdx: 2 }) - ROW_PADDING_RIGHT,
+          y
+        );
+      }
+    },
+    [theme, LOCALE_DECIMAL_SEPARATOR, tickSizeDecimals, stepSizeDecimals]
+  );
+
+  /**
+   * Scale canvas using device pixel ratio to unblur drawn text
+   * @returns adjusted canvas width used in coordinates for drawing
+   **/
+  const canvasWidth = useMemo(() => {
+    const devicePixelRatio = window.devicePixelRatio || 1;
+
+    if (!canvas || !hoverCanvas) return 300 / devicePixelRatio;
+
+    const ctx = canvas.getContext('2d');
+    const hoverCtx = hoverCanvas.getContext('2d');
+
+    const backingStoreRatio =
+      // @ts-ignore
+      ctx.webkitBackingStorePixelRatio ||
+      // @ts-ignore
+      ctx.mozBackingStorePixelRatio ||
+      // @ts-ignore
+      ctx.msBackingStorePixelRatio ||
+      // @ts-ignore
+      ctx.oBackingStorePixelRatio ||
+      // @ts-ignore
+      ctx.backingStorePixelRatio ||
+      1;
+
+    const ratio = devicePixelRatio / backingStoreRatio;
+    canvas.width = canvas.offsetWidth * ratio;
+    canvas.height = canvas.offsetHeight * ratio;
+    hoverCanvas.width = hoverCanvas.offsetWidth * ratio;
+    hoverCanvas.height = hoverCanvas.offsetHeight * ratio;
+
+    if (hoverCtx) {
+      hoverCtx.scale(ratio, ratio);
+    }
+
+    if (ctx) {
+      ctx.scale(ratio, ratio);
+      ctx.font = `12.5px Satoshi`;
+      ctx.textAlign = 'right';
+      ctx.textBaseline = 'middle';
+      ctx.imageSmoothingQuality = 'high';
+    }
+
+    return canvas.width / ratio;
+  }, [canvas, hoverCanvas]);
+
+  //Handle Row Hover
+  const lastHoveredRowRef = useRef<number>();
+  const lastHoveredRow = lastHoveredRowRef.current;
+  useEffect(() => {
+    const hoverCtx = hoverCanvas?.getContext('2d');
+
+    if (!!!hoverCtx) return;
+
+    if (hoveredRow !== lastHoveredRow) {
+      const y = getYFromIndex(lastHoveredRow ?? 0, 'rect');
+      hoverCtx.clearRect(0, y, canvasWidth, ROW_HEIGHT);
+      lastHoveredRowRef.current = hoveredRow;
+    }
+
+    if (hoveredRow !== undefined) {
+      hoverCtx.fillStyle = 'rgba(255, 255, 255, 0.02)';
+      hoverCtx.fillRect(0, hoveredRow * 20, canvasWidth, 20);
+    }
+  }, [lastHoveredRow, hoveredRow]);
+
+  // Row Removal Animation state
+  const previousDataRef = useRef<{
+    [key: string]: number;
+  }>(Object.fromEntries(data.map((row: RowData) => [row.price, row.size])));
+
+  //Update histograms and row contents on data change
+  useEffect(() => {
+    const ctx = canvas?.getContext('2d');
+
+    if (!canvas || !ctx) return;
+
+    // Clear canvas before redraw
+    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+
+    // Draw histograms
+    data.forEach(({ depth, mine, price, size, side }, idx) => {
+      const histogramAccentColor =
+        side === 'bid' ? `hsla(159, 67%, 39%,  0.15)` : `hsla(360, 73%, 61%,  0.15)`;
+
+      // Depth Bar
+      drawBars({
+        value: depth,
+        canvasWidth,
+        ctx,
+        gradientMultiplier: 1.3,
+        histogramAccentColor,
+        idx,
+        histogramSide,
+      });
+
+      // Size Bar
+      drawBars({
+        value: size,
+        canvasWidth,
+        ctx,
+        gradientMultiplier: 5,
+        histogramAccentColor,
+        idx,
+        histogramSide,
+      });
+
+      const isNew = !previousDataRef.current[price];
+      const wasRemoved = previousDataRef.current[price] && !data.find((row) => row.price === price);
+
+      // Size, Price, Mine
+      drawText({
+        ctx,
+        canvasWidth,
+        idx,
+        size,
+        price,
+        mine,
+        animationType: isNew ? 'add' : wasRemoved ? 'remove' : undefined,
+      });
+    });
+
+    previousDataRef.current = Object.fromEntries(data.map((row: RowData) => [row.price, row.size]));
+  }, [
+    canvasWidth,
+    data,
+    drawText,
+    histogramRange,
+    stepSizeDecimals,
+    tickSizeDecimals,
+    histogramSide,
+  ]);
+
+  return { canvasRef, hoverCanvasRef };
+};

src/hooks/orderbook/useSpreadRowScrollListener.ts

@@ -0,0 +1,39 @@
+import { type RefObject, useEffect, useState, Dispatch } from 'react';
+
+export const useSpreadRowScrollListener = ({
+  orderbookRef,
+  spreadRowRef,
+}: {
+  orderbookRef: RefObject<HTMLDivElement>;
+  spreadRowRef: RefObject<HTMLDivElement>;
+}) => {
+  const [displaySide, setDisplaySide] = useState<string>();
+
+  useEffect(() => {
+    const onScroll = () => {
+      if (spreadRowRef.current && orderbookRef.current) {
+        const { clientHeight } = orderbookRef.current;
+        const parent = orderbookRef.current.getBoundingClientRect();
+        const spread = spreadRowRef.current.getBoundingClientRect();
+        const spreadTop = spread.top - parent.top;
+        const spreadBottom = spread.bottom - parent.top;
+
+        if (spreadBottom > clientHeight) {
+          setDisplaySide('bottom');
+        } else if (spreadTop < 0) {
+          setDisplaySide('top');
+        } else {
+          setDisplaySide(undefined);
+        }
+      }
+    };
+
+    orderbookRef.current?.addEventListener('scroll', onScroll, false);
+
+    return () => {
+      orderbookRef.current?.removeEventListener('scroll', onScroll, false);
+    };
+  }, [orderbookRef.current, spreadRowRef.current]);
+
+  return displaySide;
+};

src/lib/wagmi.ts

@@ -26,8 +26,6 @@ import {
   fantomTestnet,
   celo,
   celoAlfajores,
-  scroll,
-  kava,
 } from 'viem/chains';
 
 import { alchemyProvider } from 'wagmi/providers/alchemy';
@@ -80,8 +78,6 @@ export const WAGMI_SUPPORTED_CHAINS: Chain[] = [
   fantomTestnet,
   celo,
   celoAlfajores,
-  scroll,
-  kava,
 ];
 
 const { chains, publicClient, webSocketPublicClient } = configureChains(

src/pages/rewards/LaunchIncentivesPanel.tsx

@@ -24,8 +24,6 @@ import { openDialog } from '@/state/dialogs';
 
 import { log } from '@/lib/telemetry';
 
-const SEASON_NUMBER = 2;
-
 export const LaunchIncentivesPanel = () => {
   const { isNotTablet } = useBreakpoints();
   const dispatch = useDispatch();
@@ -73,7 +71,7 @@ const EstimatedRewards = () => {
     queryKey: `launch_incentives_rewards_${dydxAddress ?? ''}`,
     queryFn: async () => {
       if (!dydxAddress) return undefined;
-      const resp = await fetch(`https://cloud.chaoslabs.co/query/api/dydx/points/${dydxAddress}?n=${SEASON_NUMBER}`);
+      const resp = await fetch(`https://cloud.chaoslabs.co/query/api/dydx/points/${dydxAddress}`);
       return (await resp.json())?.incentivePoints;
     },
     onError: (error: Error) => log('LaunchIncentives/fetchPoints', error),
@@ -87,7 +85,9 @@ const EstimatedRewards = () => {
           <Styled.Season>
             {stringGetter({
               key: STRING_KEYS.LAUNCH_INCENTIVES_SEASON_NUM,
-              params: { SEASON_NUMBER },
+              params: {
+                SEASON_NUMBER: 1,
+              },
             })}
           </Styled.Season>
         </div>

src/pages/trade/VerticalPanel.tsx

@@ -1,6 +1,4 @@
-import { useEffect, useState } from 'react';
+import { 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';
@@ -9,11 +7,9 @@ import { useStringGetter } from '@/hooks';
 
 import { Tabs } from '@/components/Tabs';
 
-import { Orderbook, orderbookMixins, OrderbookScrollBehavior } from '@/views/tables/Orderbook';
+import { Orderbook } from '@/views/Orderbook';
 import { LiveTrades } from '@/views/tables/LiveTrades';
 
-import { getCurrentMarketId } from '@/state/perpetualsSelectors';
-
 enum Tab {
   Orderbook = 'Orderbook',
   Trades = 'Trades',
@@ -27,22 +23,13 @@ const HISTOGRAM_SIDES_BY_LAYOUT = {
 
 export const VerticalPanel = ({ tradeLayout }: { tradeLayout: TradeLayouts }) => {
   const stringGetter = useStringGetter();
-
   const [value, setValue] = useState(Tab.Orderbook);
-  const [scrollBehavior, setScrollBehavior] = useState<OrderbookScrollBehavior>('snapToCenter');
-
-  const marketId = useSelector(getCurrentMarketId);
-
-  useEffect(() => {
-    setScrollBehavior('snapToCenter');
-  }, [marketId]);
 
   return (
-    <Styled.Tabs
+    <Tabs
       fullWidthTabs
       value={value}
       onValueChange={(value: Tab) => {
-        setScrollBehavior('snapToCenter');
         setValue(value);
       }}
       items={[
@@ -50,6 +37,7 @@ export const VerticalPanel = ({ tradeLayout }: { tradeLayout: TradeLayouts }) =>
           content: <Orderbook histogramSide={HISTOGRAM_SIDES_BY_LAYOUT[tradeLayout]} />,
           label: stringGetter({ key: STRING_KEYS.ORDERBOOK_SHORT }),
           value: Tab.Orderbook,
+          asChild: true,
         },
         {
           content: <LiveTrades histogramSide={HISTOGRAM_SIDES_BY_LAYOUT[tradeLayout]} />,
@@ -57,26 +45,7 @@ export const VerticalPanel = ({ tradeLayout }: { tradeLayout: TradeLayouts }) =>
           value: Tab.Trades,
         },
       ]}
-      onWheel={() => setScrollBehavior('free')}
       withTransitions={false}
-      isShowingOrderbook={value === Tab.Orderbook}
-      scrollBehavior={scrollBehavior}
-      // style={{
-      //   scrollSnapType: {
-      //     'snapToCenter': 'y mandatory',
-      //     'free': 'none',
-      //     'snapToCenterUnlessHovered': 'none',
-      //   }[scrollBehavior],
-      // }}
     />
   );
 };
-
-const Styled: Record<string, AnyStyledComponent> = {};
-
-Styled.Tabs = styled(Tabs)<{
-  isShowingOrderbook: boolean;
-  scrollBehavior: OrderbookScrollBehavior;
-}>`
-  ${orderbookMixins.scrollArea}
-`;

src/views/MarketDetails.tsx

@@ -114,8 +114,8 @@ export const MarketDetails: React.FC = () => {
       ),
     },
     {
-      key: 'initial-margin-fraction',
+      key: 'base-initial-margin-fraction',
-      label: stringGetter({ key: STRING_KEYS.INITIAL_MARGIN_FRACTION }),
+      label: stringGetter({ key: STRING_KEYS.BASE_INITIAL_MARGIN_FRACTION }),
       tooltip: 'initial-margin-fraction',
       value: <Output useGrouping value={initialMarginFraction} type={OutputType.SmallPercent} />,
     },

src/views/Orderbook.tsx

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

src/views/Orderbook/OrderbookRow.tsx

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+
+import { OrderbookLine } from '@/constants/abacus';
+export type RowData = OrderbookLine & { side: 'bid' | 'ask'; mine?: number };
+
+export const ROW_HEIGHT = 20;
+export const ROW_PADDING_RIGHT = 8;
+
+export const Row = styled.div`
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  height: ${ROW_HEIGHT}px;
+  min-height: ${ROW_HEIGHT}px;
+
+  font: var(--font-mini-book);
+
+  position: relative;
+  padding-right: 0.5rem;
+
+  > span {
+    flex: 1 1 0%;
+    text-align: right;
+    padding-bottom: 2px;
+  }
+`;

src/views/Orderbook/SpreadRow.tsx

@@ -0,0 +1,61 @@
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import BigNumber from 'bignumber.js';
+
+import type { Nullable } from '@/constants/abacus';
+import { STRING_KEYS } from '@/constants/localization';
+import { useStringGetter } from '@/hooks';
+
+import { Output, OutputType } from '@/components/Output';
+import { WithTooltip } from '@/components/WithTooltip';
+
+import { Row } from './OrderbookRow';
+
+type StyleProps = {
+  side?: 'top' | 'bottom';
+};
+
+type ElementProps = {
+  spread: BigNumber | null;
+  spreadPercent: Nullable<number>;
+  tickSizeDecimals: Nullable<number>;
+};
+
+export const SpreadRow = forwardRef<HTMLDivElement, StyleProps & ElementProps>(
+  ({ side, spread, spreadPercent, tickSizeDecimals }, ref) => {
+    const stringGetter = useStringGetter();
+
+    return (
+      <$SpreadRow ref={ref} side={side}>
+        <span>
+          <WithTooltip tooltip="spread">
+            {stringGetter({ key: STRING_KEYS.ORDERBOOK_SPREAD })}
+          </WithTooltip>
+        </span>
+        <span>
+          <Output type={OutputType.Number} value={spread} fractionDigits={tickSizeDecimals} />
+        </span>
+        <span>
+          <Output type={OutputType.Percent} value={spreadPercent} />
+        </span>
+      </$SpreadRow>
+    );
+  }
+);
+
+const $SpreadRow = styled(Row)<{ side?: 'top' | 'bottom' }>`
+  height: 2rem;
+  border-top: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--color-border);
+
+  ${({ side }) =>
+    side &&
+    {
+      top: css`
+        border-top: none;
+      `,
+      bottom: css`
+        border-bottom: none;
+      `,
+    }[side]}
+`;

src/views/forms/AccountManagementForms/TokenSelectMenu.tsx

@@ -34,7 +34,6 @@ export const TokenSelectMenu = ({ selectedToken, onSelectToken }: ElementProps)
       selectedToken && onSelectToken(selectedToken);
     },
     slotBefore: <Styled.Img src={token.iconUrl} alt="" />,
-    tag: resources?.tokenResources?.get(token.type)?.symbol,
   }));
 
   return (