Bump abacus, fix onboarding toAmount

Add Sepolia (#222 )
Remove BasePositionNotional DetailItem (#223 )
2024-01-11 11:40:09 -08:00 · 2024-01-09 16:35:19 -08:00 · 2024-01-09 14:01:38 -08:00 · 2024-01-09 16:57:02 -05:00 · 2024-01-09 11:51:31 -08:00 · 2024-01-04 19:14:23 -08:00
29 changed files with 370 additions and 1162 deletions
@@ -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.32",
+    "@dydxprotocol/v4-abacus": "^1.2.3",
    "@dydxprotocol/v4-client-js": "^1.0.11",
-    "@dydxprotocol/v4-localization": "^1.1.5",
+    "@dydxprotocol/v4-localization": "^1.1.6",
    "@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.12.2",
+    "viem": "^1.20.0",
    "wagmi": "^1.4.12"
  },
  "devDependencies": {
@@ -1,5 +1,9 @@
 lockfileVersion: '6.0'

+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false
+
 dependencies:
  '@0xsquid/sdk':
    specifier: ^1.10.0
@@ -23,14 +27,14 @@ dependencies:
    specifier: ^0.31.0
    version: 0.31.0
  '@dydxprotocol/v4-abacus':
-    specifier: ^1.1.32
-    version: 1.1.32
+    specifier: ^1.2.3
+    version: 1.2.3
  '@dydxprotocol/v4-client-js':
    specifier: ^1.0.11
    version: 1.0.11
  '@dydxprotocol/v4-localization':
-    specifier: ^1.1.5
-    version: 1.1.5
+    specifier: ^1.1.6
+    version: 1.1.6
  '@ethersproject/providers':
    specifier: ^5.7.2
    version: 5.7.2
@@ -239,11 +243,11 @@ dependencies:
    specifier: ^1.2.1
    version: 1.2.1(@types/react@18.2.14)(react@18.2.0)
  viem:
-    specifier: ^1.12.2
-    version: 1.12.2(typescript@5.1.3)
+    specifier: ^1.20.0
+    version: 1.20.0(typescript@5.1.3)
  wagmi:
    specifier: ^1.4.12
-    version: 1.4.12(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)(typescript@5.1.3)(viem@1.12.2)
+    version: 1.4.13(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)(typescript@5.1.3)(viem@1.20.0)

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

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

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

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

-  /@dydxprotocol/v4-abacus@1.1.32:
-    resolution: {integrity: sha512-1KM3ILBg/YrdiVhCp/DXUgyCnJurxeYAIwL6+MWZisEGtdhPf9R7MNKUyVcTeNwEyiyxh4AzXNLRp3IPeHAsAw==}
+  /@dydxprotocol/v4-abacus@1.2.3:
+    resolution: {integrity: sha512-OHGhN4uQo/ikRjeGzf+wGblFvb0uRA916QvQXG4LixsJy7H7HAt7AeZr9LqTM/GqYJicMmZCUS3WIMqgZ20hKA==}
    dev: false

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

-  /@dydxprotocol/v4-localization@1.1.5:
-    resolution: {integrity: sha512-Y25yuCLFaK3v/81B60lc3qthaWwJn1fNJuYQdOtgnmOhLNqI4YRryUncLkbjdB5xd4QODq5KZikP34pLKX9sgA==}
+  /@dydxprotocol/v4-localization@1.1.6:
+    resolution: {integrity: sha512-Bon6NSRU4/FqneAbnP2G28EAPr0hp4LhvAayX61o0O1PGkxnLzAHkXeFppdM0Zn0fOcp1S1MJ+gvz138ZDephQ==}
    dev: false

  /@dydxprotocol/v4-proto@0.4.1:
@@ -4886,7 +4890,7 @@ packages:
    resolution: {integrity: sha512-XJbEPuaVc7b9n23MqlF6c+ToYIS3f7P2Sel8f3cSBQ9WORE4xrSuvhMpK9fDSFqJ7by/brc+rmJR/5HViRr0/w==}
    dependencies:
      '@safe-global/safe-gateway-typescript-sdk': 3.9.0
-      viem: 1.12.2(typescript@5.1.3)
+      viem: 1.20.0(typescript@5.1.3)
    transitivePeerDependencies:
      - bufferutil
      - encoding
@@ -5390,31 +5394,13 @@ packages:
      use-sync-external-store: 1.2.0(react@18.2.0)
    dev: false

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

-  /isomorphic-ws@5.0.0(ws@8.13.0):
-    resolution: {integrity: sha512-muId7Zzn9ywDsyXgTIafTry2sV3nySZeUDe6YedVd1Hvuuep5AsIlqK+XefWpYTyJG5e503F2xIuT2lcU6rCSw==}
+  /isows@1.0.3(ws@8.13.0):
+    resolution: {integrity: sha512-2cKei4vlmg2cxEjm3wVSqn8pcoRF/LX/wpifuuNquFO4SQmPwarClT+SUCA2lt+l581tTeZIPIZuIDo2jWN1fg==}
    peerDependencies:
      ws: '*'
    dependencies:
@@ -11780,10 +11840,6 @@ 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}
@@ -13819,6 +13875,10 @@ 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:
@@ -14172,22 +14232,21 @@ packages:
      vfile-message: 3.1.4
    dev: true

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

-  /wagmi@1.4.12(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)(typescript@5.1.3)(viem@1.12.2):
-    resolution: {integrity: sha512-QRxpjhdMlZmbYTfn9VQkQMKq+l3kwA1O7tF10vaykPrjbGX+IIlyn72ib9oqW9BfQO7n/Sf/mnVz1zbxRhGPWA==}
+  /wagmi@1.4.13(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)(typescript@5.1.3)(viem@1.20.0):
+    resolution: {integrity: sha512-AScVYFjqNt1wMgL99Bob7MLdhoTZ3XKiOZL5HVBdy4W1sh7QodA3gQ8IsmTuUrQ7oQaTxjiXEhwg7sWNrPBvJA==}
    peerDependencies:
      react: '>=17.0.0'
      typescript: '>=5.0.4'
@@ -14368,14 +14427,14 @@ packages:
        optional: true
    dependencies:
      '@tanstack/query-sync-storage-persister': 4.32.6
-      '@tanstack/react-query': 4.32.6(react-dom@18.2.0)(react@18.2.0)
-      '@tanstack/react-query-persist-client': 4.32.6(@tanstack/react-query@4.32.6)
-      '@wagmi/core': 1.4.12(@types/react@18.2.14)(react@18.2.0)(typescript@5.1.3)(viem@1.12.2)
+      '@tanstack/react-query': 4.36.1(react-dom@18.2.0)(react@18.2.0)
+      '@tanstack/react-query-persist-client': 4.32.6(@tanstack/react-query@4.36.1)
+      '@wagmi/core': 1.4.13(@types/react@18.2.14)(react@18.2.0)(typescript@5.1.3)(viem@1.20.0)
      abitype: 0.8.7(typescript@5.1.3)
      react: 18.2.0
      typescript: 5.1.3
      use-sync-external-store: 1.2.0(react@18.2.0)
-      viem: 1.12.2(typescript@5.1.3)
+      viem: 1.20.0(typescript@5.1.3)
    transitivePeerDependencies:
      - '@azure/app-configuration'
      - '@azure/cosmos'
@@ -14754,7 +14813,3 @@ packages:
  /zwitch@2.0.4:
    resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
    dev: true
-
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false
@@ -39,7 +39,7 @@
   "environments": {
      "dydxprotocol-dev": {
         "name": "v4 Dev",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydxprotocol-testnet",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -113,7 +113,7 @@
      },
      "dydxprotocol-dev-2": {
         "name": "v4 Dev 2",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydxprotocol-testnet",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -186,7 +186,7 @@
      },
      "dydxprotocol-dev-4": {
         "name": "v4 Dev 4",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydxprotocol-testnet",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -259,7 +259,7 @@
      },
      "dydxprotocol-dev-5": {
         "name": "v4 Dev 5",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydxprotocol-testnet",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -332,7 +332,7 @@
      },
      "dydxprotocol-staging": {
         "name": "v4 Staging",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydxprotocol-testnet",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -407,7 +407,7 @@
      },
      "dydxprotocol-staging-forced-update": {
         "name": "v4 Staging Forced Update",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydxprotocol-testnet",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -480,7 +480,7 @@
      },
      "dydxprotocol-staging-west": {
         "name": "v4 Staging West",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydxprotocol-testnet",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -555,7 +555,7 @@
      },
      "dydxprotocol-testnet": {
         "name": "v4 Public Testnet",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydx-testnet-4",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -579,8 +579,8 @@
         "endpoints": {
            "indexers": [
               {
-                  "api": "https://dydx-testnet.imperator.co",
-                  "socket": "wss://dydx-testnet.imperator.co"
+                  "api": "https://indexer.v4testnet.dydx.exchange",
+                  "socket": "wss://indexer.v4testnet.dydx.exchange"
               }
            ],
            "validators": [
@@ -634,7 +634,7 @@
      },
      "dydxprotocol-testnet-dydx": {
         "name": "v4 Public Testnet/dYdX",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydx-testnet-4",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -710,7 +710,7 @@
      },
      "dydxprotocol-testnet-nodefleet": {
         "name": "v4 Public Testnet/nodefleet",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydx-testnet-4",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -734,8 +734,8 @@
         "endpoints": {
            "indexers": [
               {
-                  "api": "https://dydx-testnet.imperator.co",
-                  "socket": "wss://dydx-testnet.imperator.co"
+                  "api": "https://indexer.v4testnet.dydx.exchange",
+                  "socket": "wss://indexer.v4testnet.dydx.exchange"
               }
            ],
            "validators": [
@@ -786,7 +786,7 @@
      },
      "dydxprotocol-testnet-kingnodes": {
         "name": "v4 Public Testnet/KingNodes",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydx-testnet-4",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -810,8 +810,8 @@
         "endpoints": {
            "indexers": [
               {
-                  "api": "https://dydx-testnet.imperator.co",
-                  "socket": "wss://dydx-testnet.imperator.co"
+                  "api": "https://indexer.v4testnet.dydx.exchange",
+                  "socket": "wss://indexer.v4testnet.dydx.exchange"
               }
            ],
            "validators": [
@@ -862,7 +862,7 @@
      },
      "dydxprotocol-testnet-liquify": {
         "name": "v4 Public Testnet/Liquify",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydx-testnet-4",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -886,8 +886,8 @@
         "endpoints": {
            "indexers": [
               {
-                  "api": "https://dydx-testnet.imperator.co",
-                  "socket": "wss://dydx-testnet.imperator.co"
+                  "api": "https://indexer.v4testnet.dydx.exchange",
+                  "socket": "wss://indexer.v4testnet.dydx.exchange"
               }
            ],
            "validators": [
@@ -938,7 +938,7 @@
      },
      "dydxprotocol-testnet-polkachu": {
         "name": "v4 Public Testnet/Polkahcu",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydx-testnet-4",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -962,8 +962,8 @@
         "endpoints": {
            "indexers": [
               {
-                  "api": "https://dydx-testnet.imperator.co",
-                  "socket": "wss://dydx-testnet.imperator.co"
+                  "api": "https://indexer.v4testnet.dydx.exchange",
+                  "socket": "wss://indexer.v4testnet.dydx.exchange"
               }
            ],
            "validators": [
@@ -1005,7 +1005,7 @@
      },
      "dydxprotocol-testnet-bware": {
         "name": "v4 Public Testnet/BWare",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydx-testnet-4",
         "chainName": "dYdX Chain",
         "chainLogo": "/dydx-chain.png",
@@ -1029,8 +1029,8 @@
         "endpoints": {
            "indexers": [
               {
-                  "api": "https://dydx-testnet.imperator.co",
-                  "socket": "wss://dydx-testnet.imperator.co"
+                  "api": "https://indexer.v4testnet.dydx.exchange",
+                  "socket": "wss://indexer.v4testnet.dydx.exchange"
               }
            ],
            "validators": [
@@ -0,0 +1,26 @@
+import type { Story } from '@ladle/react';
+
+import { Accordion as AccordionComponent, AccordionProps } from '@/components/Accordion';
+
+import { StoryWrapper } from '.ladle/components';
+
+export const Accordion: Story<AccordionProps> = (args) => {
+  return (
+    <StoryWrapper>
+      <AccordionComponent {...args} />
+    </StoryWrapper>
+  );
+};
+
+Accordion.args = {
+  items: [
+    {
+      header: 'Question 1?',
+      content: 'Answer 1.',
+    },
+    {
+      header: 'Question 2?',
+      content: 'Answer 2.',
+    },
+  ],
+};
@@ -3,6 +3,8 @@ import styled, { keyframes, type AnyStyledComponent } from 'styled-components';
 import { Root, Item, Header, Trigger, Content } from '@radix-ui/react-accordion';

 import { layoutMixins } from '@/styles/layoutMixins';
+import { breakpoints } from '@/styles';
+
 import { PlusIcon } from '@/icons';

 export type AccordionItem = {
@@ -10,7 +12,7 @@ export type AccordionItem = {
  content: React.ReactNode;
 };

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

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

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

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

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

@@ -1,16 +0,0 @@
-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} />
-  )
-);
@@ -4,6 +4,7 @@ import { Link } from 'react-router-dom';
 import { Icon, IconName } from '@/components/Icon';

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

 type PanelProps = {
  slotHeaderContent?: string;
@@ -67,6 +68,12 @@ Styled.Panel = styled.section<{ onClick?: () => void }>`
  --panel-content-paddingY: var(--panel-paddingY);
  --panel-content-paddingX: var(--panel-paddingX);

+  @media ${breakpoints.notTablet} {
+    --panel-paddingX: 1.5rem;
+    --panel-paddingY: 1.25rem;
+    --panel-content-paddingY: 1rem;
+  }
+
  ${layoutMixins.row}

  background-color: var(--color-layer-3);
@@ -118,7 +118,6 @@ export const Tabs = <TabItemsValue extends string>({
              forceMount={forceMount}
              $hide={forceMount && currentItem?.value !== value}
              $withTransitions={withTransitions}
-              asChild={asChild}
            >
              {content}
            </Styled.Content>
@@ -142,7 +142,7 @@ const historicalPnlPeriod = [...HistoricalPnlPeriod.values()] as const;
 export type HistoricalPnlPeriods = (typeof historicalPnlPeriod)[number];

 // ------ Transfer Items ------ //
-export const TransferInputField = Abacus.exchange.dydx.abacus.state.modal.TransferInputField;
+export const TransferInputField = Abacus.exchange.dydx.abacus.state.model.TransferInputField;
 const transferInputFields = [...TransferInputField.values()] as const;
 export type TransferInputFields = (typeof transferInputFields)[number];

@@ -151,7 +151,7 @@ const transferTypes = [...TransferType.values()] as const;
 export type TransferTypes = (typeof transferTypes)[number];

 // ------ Trade Items ------ //
-export const TradeInputField = Abacus.exchange.dydx.abacus.state.modal.TradeInputField;
+export const TradeInputField = Abacus.exchange.dydx.abacus.state.model.TradeInputField;
 const tradeInputFields = [...TradeInputField.values()] as const;
 export type TradeInputFields = (typeof tradeInputFields)[number];

@@ -162,7 +162,7 @@ export type TradeState<T> = {
 };

 export const ClosePositionInputField =
-  Abacus.exchange.dydx.abacus.state.modal.ClosePositionInputField;
+  Abacus.exchange.dydx.abacus.state.model.ClosePositionInputField;

 const closePositionInputFields = [...ClosePositionInputField.values()] as const;
 export type ClosePositionInputFields = (typeof closePositionInputFields)[number];
@@ -1,11 +0,0 @@
-import { useCalculateOrderbookData } from './useCalculateOrderbookData';
-import { useCenterOrderbook } from './useCenterOrderbook';
-import { useDrawOrderbook } from './useDrawOrderbook';
-import { useSpreadRowScrollListener } from './useSpreadRowScrollListener';
-
-export {
-  useCalculateOrderbookData,
-  useCenterOrderbook,
-  useDrawOrderbook,
-  useSpreadRowScrollListener,
-};
@@ -1,55 +0,0 @@
-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]);
-};
@@ -1,22 +0,0 @@
-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]);
-};
@@ -1,380 +0,0 @@
-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 };
-};
@@ -1,39 +0,0 @@
-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;
-};
@@ -1,3 +1 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M14 6L7.83335 10.5L2 6" stroke="currentColor" stroke-width="2.25" stroke-linecap="round"/>
-</svg>
+<svg fill="none" height="10" viewBox="0 0 15 10" width="15" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m.321829 1.09389c.200562-.192959.469529-.298401.747791-.29315.27827.00525.54307.120763.73621.32115l5.194 5.5132 5.19397-5.5132c.0944-.10408.2088-.188152.3363-.247234.1275-.059081.2655-.091968.406-.096713.1404-.004746.2804.018748.4116.069088s.2509.126504.3522.223979c.1012.09747.1818.21427.2371.34347.0552.12921.084.26819.0845.40871.0006.14052-.0271.27972-.0813.40936s-.1339.24707-.2344.34534l-5.94997 6.3c-.09795.10163-.21538.18245-.34527.23766-.1299.05521-.26959.08367-.41073.08367s-.28083-.02846-.41073-.08367c-.12989-.05521-.24732-.13603-.34527-.23766l-5.950001-6.3c-.192962-.20056-.29840394-.46953-.29315364-.74779.00525031-.27827.12076264-.54307.32115364-.73621z" fill="currentColor" fill-rule="evenodd"/></svg>
@@ -1,4 +1,4 @@
-import { createConfig, configureChains, mainnet, Chain, Connector, usePublicClient } from 'wagmi';
+import { createConfig, configureChains, mainnet, Chain } from 'wagmi';
 import { goerli } from 'wagmi/chains';

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

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

 const { chains, publicClient, webSocketPublicClient } = configureChains(
@@ -30,6 +30,9 @@ import abacusStateManager from '@/lib/abacus';
 import { isTruthy } from '@/lib/isTruthy';
 import { truncateAddress } from '@/lib/wallet';

+import { DYDXBalancePanel } from './rewards/DYDXBalancePanel';
+import { MigratePanel } from './rewards/MigratePanel';
+
 const ENS_CHAIN_ID = 1; // Ethereum

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

      <Styled.EqualGrid>
+        <Styled.RewardsPanel
+          slotHeaderContent="Trading Rewards"
+          href={`/${chainTokenLabel}`}
+          hasSeparator
+        >
+          <Styled.Details
+            items={[
+              {
+                key: 'week-rewards',
+                label: stringGetter({ key: STRING_KEYS.THIS_WEEK }),
+                value: '-',
+              },
+            ]}
+            layout="grid"
+          />
+        </Styled.RewardsPanel>
        <Panel
          slotHeaderContent={stringGetter({ key: STRING_KEYS.FEES })}
          href={`${AppRoute.Portfolio}/${PortfolioRoute.Fees}`}
@@ -191,19 +213,6 @@ const Profile = () => {
            layout="grid"
          />
        </Panel>
-        <Styled.RewardsPanel
-          slotHeaderContent={stringGetter({ key: STRING_KEYS.REWARDS })}
-          href={`/${chainTokenLabel}`}
-          hasSeparator
-        >
-          <Styled.Details
-            items={[
-              { key: 'maker', label: stringGetter({ key: STRING_KEYS.YOU_WILL_EARN }), value: '-' },
-              { key: 'taker', label: stringGetter({ key: STRING_KEYS.EPOCH_ENDS_IN }), value: '-' },
-            ]}
-            layout="grid"
-          />
-        </Styled.RewardsPanel>
      </Styled.EqualGrid>

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

 Styled.RewardsPanel = styled(Panel)`
+  align-self: flex-start;
+  
+  &,
+  > * {
+    height: 100%;
+  }
+
  dl {
    --details-grid-numColumns: 1;
  }
@@ -2,7 +2,6 @@ import type { ElementType } from 'react';
 import styled, { AnyStyledComponent } from 'styled-components';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';

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

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

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

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

-Styled.Panel = styled(Panel)`
-  --panel-paddingX: 1.5rem;
-
-  @media ${breakpoints.tablet} {
-    --panel-paddingY: 1.5rem;
-    --panel-content-paddingY: 1rem;
-  }
-`;
-
 Styled.Header = styled.div`
  ${layoutMixins.spacedRow}
  gap: 1rem;
@@ -24,6 +24,8 @@ import { openDialog } from '@/state/dialogs';

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

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

  const { data, isLoading } = useQuery({
    enabled: !!dydxAddress,
-    queryKey: `launch_incentives_rewards_${dydxAddress ?? ''}`,
+    queryKey: `launch_incentives_rewards_${dydxAddress ?? ''}_${SEASON_NUMBER}`,
    queryFn: async () => {
      if (!dydxAddress) return undefined;
-      const resp = await fetch(`https://cloud.chaoslabs.co/query/api/dydx/points/${dydxAddress}`);
+      const resp = await fetch(
+        `https://cloud.chaoslabs.co/query/api/dydx/points/${dydxAddress}?n=${SEASON_NUMBER}`
+      );
      return (await resp.json())?.incentivePoints;
    },
    onError: (error: Error) => log('LaunchIncentives/fetchPoints', error),
@@ -85,9 +89,7 @@ const EstimatedRewards = () => {
          <Styled.Season>
            {stringGetter({
              key: STRING_KEYS.LAUNCH_INCENTIVES_SEASON_NUM,
-              params: {
-                SEASON_NUMBER: 1,
-              },
+              params: { SEASON_NUMBER },
            })}
          </Styled.Season>
        </div>
@@ -151,15 +153,8 @@ const LaunchIncentivesContent = () => {
 const Styled: Record<string, AnyStyledComponent> = {};

 Styled.Panel = styled(Panel)`
-  --panel-paddingY: 1rem;
-  --panel-paddingX: 1.5rem;
-
  background-color: var(--color-layer-4);
  width: 100%;
-
-  @media ${breakpoints.tablet} {
-    --panel-paddingY: 1.5rem;
-  }
 `;

 Styled.ForV4 = styled.span`
@@ -223,7 +218,7 @@ Styled.Column = styled.div`
 Styled.EstimatedRewardsCard = styled.div`
  ${layoutMixins.spacedRow}
  padding: 1rem 1.25rem;
-  min-width: 21.25rem;
+  min-width: 19rem;
  height: calc(100% - calc(1.5rem * 2));
  margin: 1.5rem;

@@ -7,8 +7,6 @@ import { ButtonAction, ButtonSize, ButtonType } from '@/constants/buttons';

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

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

 import { Details } from '@/components/Details';
@@ -28,7 +26,7 @@ import { MustBigNumber } from '@/lib/numbers';
 const TOKEN_MIGRATION_LEARN_MORE_LINK =
  'https://www.dydx.foundation/blog/update-on-exploring-the-future-of-dydx';

-export const MigratePanel = () => {
+export const MigratePanel = ({ className }: { className?: string }) => {
  const { isNotTablet } = useBreakpoints();
  const stringGetter = useStringGetter();

@@ -45,6 +43,7 @@ export const MigratePanel = () => {

  return isNotTablet ? (
    <Styled.MigratePanel
+      className={className}
      slotHeader={<Styled.Title>{stringGetter({ key: STRING_KEYS.MIGRATE })}</Styled.Title>}
      slotRight={
        <Styled.MigrateAction>
@@ -74,6 +73,7 @@ export const MigratePanel = () => {
    </Styled.MigratePanel>
  ) : (
    <Styled.MigratePanel
+      className={className}
      slotHeader={
        <Styled.MobileMigrateHeader>
          <h3>
@@ -134,17 +134,11 @@ export const MigratePanel = () => {
 const Styled: Record<string, AnyStyledComponent> = {};

 Styled.MigratePanel = styled(Panel)`
-  --panel-paddingX: 1.5rem;
  width: 100%;

  background-image: url('/dots-background.svg');
  background-position: right;
  background-repeat: no-repeat;
-
-  @media ${breakpoints.tablet} {
-    --panel-paddingY: 1.5rem;
-    --panel-content-paddingY: 1rem;
-  }
 `;

 Styled.Title = styled.h3`
@@ -157,7 +151,7 @@ Styled.Title = styled.h3`
 Styled.MigrateAction = styled.div`
  ${layoutMixins.flexEqualColumns}
  align-items: center;
-  margin-right: 1rem;
+  margin: 1rem;
  gap: 1rem;
  padding: 1rem;
  width: 100%;
@@ -197,7 +191,7 @@ Styled.MobileMigrateHeader = styled.div`
  font: var(--font-small-book);
  color: var(--color-text-0);

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

  h3 {
    ${layoutMixins.inlineRow}
@@ -1,5 +1,6 @@
 import styled, { AnyStyledComponent } from 'styled-components';

+import { breakpoints } from '@/styles';
 import { STRING_KEYS } from '@/constants/localization';
 import { layoutMixins } from '@/styles/layoutMixins';
 import { useStringGetter } from '@/hooks';
@@ -51,6 +52,7 @@ export const RewardsHelpPanel = () => {
 const Styled: Record<string, AnyStyledComponent> = {};

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

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

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

+  @media ${breakpoints.notTablet} {
+    padding: 1.5rem 1.25rem;
+  }
+
  h3 {
    font: var(--font-medium-book);
    color: var(--color-text-2);
@@ -1,15 +1,18 @@
 import styled, { AnyStyledComponent } from 'styled-components';
 import { useDispatch } from 'react-redux';
+import { useNavigate } from 'react-router-dom';

 import { STRING_KEYS } from '@/constants/localization';
 import { ButtonAction, ButtonSize } from '@/constants/buttons';
 import { DialogTypes } from '@/constants/dialogs';
+import { AppRoute } from '@/constants/routes';

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

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

+import { BackButton } from '@/components/BackButton';
 import { Panel } from '@/components/Panel';
 import { IconName } from '@/components/Icon';
 import { IconButton } from '@/components/IconButton';
@@ -20,12 +23,14 @@ import { openDialog } from '@/state/dialogs';
 import { DYDXBalancePanel } from './DYDXBalancePanel';
 import { MigratePanel } from './MigratePanel';
 import { LaunchIncentivesPanel } from './LaunchIncentivesPanel';
+import { RewardsHelpPanel } from './RewardsHelpPanel';

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

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

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

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

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

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

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

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

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

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

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

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

 Styled.Description = styled.div`
@@ -1,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 { Orderbook } from '@/views/Orderbook';
+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,13 +27,22 @@ 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={[
@@ -37,7 +50,6 @@ 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]} />,
@@ -45,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}
+`;
@@ -114,17 +114,11 @@ export const MarketDetails: React.FC = () => {
      ),
    },
    {
-      key: 'base-initial-margin-fraction',
-      label: stringGetter({ key: STRING_KEYS.BASE_INITIAL_MARGIN_FRACTION }),
+      key: 'initial-margin-fraction',
+      label: stringGetter({ key: STRING_KEYS.INITIAL_MARGIN_FRACTION }),
      tooltip: 'initial-margin-fraction',
      value: <Output useGrouping value={initialMarginFraction} type={OutputType.SmallPercent} />,
    },
-    {
-      key: 'base-position-notional',
-      label: stringGetter({ key: STRING_KEYS.BASE_POSITION_NOTIONAL }),
-      tooltip: 'base-position-notional',
-      value: <Output useGrouping value={basePositionNotional} type={OutputType.Number} />,
-    },
  ];

  return (
@@ -1,317 +0,0 @@
-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;
-`;
@@ -1,26 +0,0 @@
-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;
-  }
-`;
@@ -1,61 +0,0 @@
-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]}
-`;
@@ -108,20 +108,6 @@ export const DepositButtonAndReceipt = ({

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

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

  return (
Author	SHA1	Message	Date
Bill He	48aa1a6676	Bump abacus, fix onboarding toAmount	2024-01-11 11:40:09 -08:00
Jared Vu	e8024b9337	Add Sepolia (#222 )	2024-01-09 16:35:19 -08:00
Jared Vu	8280e512bc	Remove BasePositionNotional DetailItem (#223 )	2024-01-09 14:01:38 -08:00
aleka	b2234cb969	reorganize rewards vs. profile, update panel and accordion styling (#221 ) * reorganize rewards vs. profile, update panel and accordion styling * feedback	2024-01-09 16:57:02 -05:00
Bill	4bcb1f64ac	Add Kava support for onboarding, and add token symbol to token select (#220 ) * Add Kava support for onboarding, and add token symbol to token select * bump abacus	2024-01-09 11:51:31 -08:00
BillandAleka Cheung	4a64d59546	Update launch incentives to season 2 (#218 ) * Update launch incentives to season 2 * update api url --------- Co-authored-by: Aleka Cheung <aforaleka@gmail.com>	2024-01-04 19:14:23 -08:00
Jared Vu	3fc43e8a12	Remove base from baseInitialMarginFraction (#209 )	2024-01-04 15:35:05 -08:00
Jared Vu	c24a9229a6	Imperator testnet indexer to be scaled down (#219 )	2024-01-04 15:34:18 -08:00
aleka	90329d44d0	update lock file (#217 )	2024-01-03 13:57:21 -08:00