Add trailing blocks to NetworkStatus analytics event

* 🚧 depth chart

* ✨ Fixed types and shortened FundingRateTooltip

* 💄 update depth chart color scale to use css var

* 💄 use layer-6 instead of text-1

* 🌐 Add localization, fix nits

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.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.11",
     "@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": {

pnpm-lock.yaml

@@ -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
+    specifier: ^1.2.3
-    version: 1.1.32
+    version: 1.2.3
   '@dydxprotocol/v4-client-js':
     specifier: ^1.0.11
     version: 1.0.11
   '@dydxprotocol/v4-localization':
-    specifier: ^1.1.5
+    specifier: ^1.1.11
-    version: 1.1.5
+    version: 1.1.11
   '@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
+    specifier: ^1.20.0
-    version: 1.12.2(typescript@5.1.3)
+    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:
+  /@adraffy/ens-normalize@1.10.0:
-    resolution: {integrity: sha512-0h+FrQDqe2Wn+IIGFkTCd4aAwTJ+7834Ek1COohCyV26AXhwQ7WQaz+4F/nLOeVl/3BtWHOHLPsq46V8YB46Eg==}
+    resolution: {integrity: sha512-nA9XHtlAkYfJxY7bce8DcN7eKxWWCWkU+1GR9d+U6MbNpfwQp8TI7vqOsBsMcHoT4mBu2kypKoSKnghEzOOq5Q==}
     dev: false
 
-  /@adraffy/ens-normalize@1.9.4:
+  /@adraffy/ens-normalize@1.9.2:
-    resolution: {integrity: sha512-UK0bHA7hh9cR39V+4gl2/NnBBjoXIxkuWAPCaY4X7fbH4L/azIi7ilWOCjMUYfpJgraLUAqkRi2BqrjME8Rynw==}
+    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:
+  /@dydxprotocol/v4-abacus@1.2.3:
-    resolution: {integrity: sha512-1KM3ILBg/YrdiVhCp/DXUgyCnJurxeYAIwL6+MWZisEGtdhPf9R7MNKUyVcTeNwEyiyxh4AzXNLRp3IPeHAsAw==}
+    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:
+  /@dydxprotocol/v4-localization@1.1.11:
-    resolution: {integrity: sha512-Y25yuCLFaK3v/81B60lc3qthaWwJn1fNJuYQdOtgnmOhLNqI4YRryUncLkbjdB5xd4QODq5KZikP34pLKX9sgA==}
+    resolution: {integrity: sha512-ZHnyrWD1bEpvY1tctkcmSV6A5+hQSYBFwyjbiyOqepqDqrv24J5a3hlZU94lDyYf+7Sdk3alOvy9Z7Lpk59nvw==}
     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)
+      '@tanstack/react-query': 4.36.1(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):
@@ -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):
+  /@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-ZLJC1QaeiZarkF07Cr9mOlVjPO1Lf5TBx+JKBms2y5fUIXlKrxCfQgO/gDCureboI+Us2X3IRI659+XacSGpbA==}
+    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):
+  /@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-bLcYmmGgjtl3jAGo8X3Sm6oUwsdjbVxFMu9SWnwHdE4S9JdYeWM57dEhQgq8SYul2yQ7yY2/gimBf1Or0Ky3dQ==}
+    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):
+  /@walletconnect/ethereum-provider@2.11.0(@types/react@18.2.14)(react@18.2.0):
-    resolution: {integrity: sha512-bBQ+yUfxLv8VxNttgNKY7nED35gSVayO/BnLHbNKvyV1gpvSCla5mWB9MsXuQs70MK0g+/qtgRVSrOtdSubaNQ==}
+    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/sign-client': 2.11.0
-      '@walletconnect/types': 2.10.6
+      '@walletconnect/types': 2.11.0
-      '@walletconnect/universal-provider': 2.10.6
+      '@walletconnect/universal-provider': 2.11.0
-      '@walletconnect/utils': 2.10.6
+      '@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:
+  /@walletconnect/sign-client@2.11.0:
-    resolution: {integrity: sha512-uzdd9woDcJ1AaBZRhqy5rNC9laqWGErfc4dxA9a87mPdKOgWMD85mcFo9dIYIts/Jwocfwn07EC6EzclKubk/g==}
+    resolution: {integrity: sha512-H2ukscibBS+6WrzQWh+WyVBqO5z4F5et12JcwobdwgHnJSlqIoZxqnUYYWNCI5rUR5UKsKWaUyto4AE9N5dw4Q==}
-    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-types': 1.0.3
+      '@walletconnect/jsonrpc-utils': 1.0.8
-      '@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'
@@ -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:
+  /@walletconnect/types@2.11.0:
-    resolution: {integrity: sha512-CEivusqqoD31BhCTKp08DnrccfGjwD9MFjZs5BNRorDteRFE8zVm9LmP6DSiNJCw82ZajGlZThggLQ/BAATfwA==}
+    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/sign-client': 2.11.0
-      '@walletconnect/types': 2.10.6
+      '@walletconnect/types': 2.11.0
-      '@walletconnect/utils': 2.10.6
+      '@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:
+  /@walletconnect/utils@2.10.6:
-    resolution: {integrity: sha512-syxXRpc2yhSknMu3IfiBGobxOY7fLfLTJuw+ppKaeO6WUdZpIit3wfuGOcc0Ms3ZPFCrGfyGOoZsCvgdXtptRg==}
+    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:
+  /@walletconnect/utils@2.11.0:
-    resolution: {integrity: sha512-oRsWWhN2+hi3aiDXrQEOfysz6FHQJGXLsNQPVt+WIBJplO6Szmdau9dbleD88u1iiT4GKPqE0R9FOYvvPm1H/w==}
+    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):
+  /isows@1.0.3(ws@8.13.0):
-    resolution: {integrity: sha512-muId7Zzn9ywDsyXgTIafTry2sV3nySZeUDe6YedVd1Hvuuep5AsIlqK+XefWpYTyJG5e503F2xIuT2lcU6rCSw==}
+    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):
+  /viem@1.20.0(typescript@5.1.3):
-    resolution: {integrity: sha512-aCaUCyg72ES+jK4s6tVYOMnOt4if71RwzgiUAUpAuaCgvHFfh9DCnwuEfwkxEZLE2vafOsirgJ3fcn7nsDVQoQ==}
+    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):
+  /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-QRxpjhdMlZmbYTfn9VQkQMKq+l3kwA1O7tF10vaykPrjbGX+IIlyn72ib9oqW9BfQO7n/Sf/mnVz1zbxRhGPWA==}
+    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': 4.36.1(react-dom@18.2.0)(react@18.2.0)
-      '@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)
-      '@wagmi/core': 1.4.12(@types/react@18.2.14)(react@18.2.0)(typescript@5.1.3)(viem@1.12.2)
+      '@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

public/configs/env.json

@@ -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",
+                  "api": "https://indexer.v4testnet.dydx.exchange",
-                  "socket": "wss://dydx-testnet.imperator.co"
+                  "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",
+                  "api": "https://indexer.v4testnet.dydx.exchange",
-                  "socket": "wss://dydx-testnet.imperator.co"
+                  "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",
+                  "api": "https://indexer.v4testnet.dydx.exchange",
-                  "socket": "wss://dydx-testnet.imperator.co"
+                  "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",
+                  "api": "https://indexer.v4testnet.dydx.exchange",
-                  "socket": "wss://dydx-testnet.imperator.co"
+                  "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",
+                  "api": "https://indexer.v4testnet.dydx.exchange",
-                  "socket": "wss://dydx-testnet.imperator.co"
+                  "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",
+                  "api": "https://indexer.v4testnet.dydx.exchange",
-                  "socket": "wss://dydx-testnet.imperator.co"
+                  "socket": "wss://indexer.v4testnet.dydx.exchange"
                }
             ],
             "validators": [

src/components/Accordion.stories.tsx

@@ -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.',
+    },
+  ],
+};

src/components/Accordion.tsx

@@ -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);
 

src/components/Icon.tsx

@@ -24,7 +24,6 @@ import {
   CoinsIcon,
   CommentIcon,
   CopyIcon,
-  CubeIcon,
   DepositIcon,
   DepthChartIcon,
   DiscordIcon,
@@ -99,7 +98,6 @@ export enum IconName {
   Coins = 'Coins',
   Comment = 'Comment',
   Copy = 'Copy',
-  Cube = 'Cube',
   Deposit = 'Deposit',
   DepthChart = 'DepthChart',
   Discord = 'Discord',
@@ -175,7 +173,6 @@ const icons = {
   [IconName.Coins]: CoinsIcon,
   [IconName.Comment]: CommentIcon,
   [IconName.Copy]: CopyIcon,
-  [IconName.Cube]: CubeIcon,
   [IconName.Deposit]: DepositIcon,
   [IconName.DepthChart]: DepthChartIcon,
   [IconName.Discord]: DiscordIcon,

src/components/Panel.tsx

@@ -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);

src/components/visx/XYChartWithPointerEvents.tsx

@@ -1,26 +1,33 @@
-import React, { useContext, useState } from 'react';
+import React, { PropsWithChildren, useContext, useState } from 'react';
 
 import { Point } from '@visx/point';
 import { localPoint } from '@visx/event';
-import { XYChart, DataContext } from '@visx/xychart';
+import { XYChart, DataContext, type EventHandlerParams } from '@visx/xychart';
 import { getScaleBandwidth } from '@/components/visx/getScaleBandwidth';
 
 export const XYChartWithPointerEvents = ({
-  onPointerMove, onPointerUp, onPointerPressedChange, ...props
+  onPointerMove,
+  onPointerUp,
+  onPointerPressedChange,
+  ...props
 }: {
-  onPointerMove?: (point: Point) => void;
+  onPointerMove?: (point: Point | EventHandlerParams<object>) => void;
-  onPointerUp?: (point: Point) => void;
+  onPointerUp?: (point: Point | EventHandlerParams<object>) => void;
   onPointerPressedChange?: (isPointerPressed: boolean) => void;
-} & React.PropsWithChildren<Parameters<typeof XYChart>>) => {
+} & PropsWithChildren<Parameters<typeof XYChart>[0]>) => {
   const { xScale, yScale } = useContext(DataContext);
-
   const [lastPointerMoveEvent, setLastPointerMoveEvent] = useState<React.PointerEvent>();
 
   const pointerContainerPosition = lastPointerMoveEvent ? localPoint(lastPointerMoveEvent) : null;
 
-  const pointerChartPosition = xScale && yScale && pointerContainerPosition &&
+  const pointerChartPosition =
+    xScale &&
+    yScale &&
+    pointerContainerPosition &&
     new Point({
+      // @ts-expect-error invert supposedly doesn't exist on AxisScale
       x: xScale.invert(pointerContainerPosition?.x - getScaleBandwidth(xScale) / 2),
+      // @ts-expect-error invert supposedly doesn't exist on AxisScale
       y: yScale.invert(pointerContainerPosition?.y - getScaleBandwidth(yScale) / 2),
     });
 
@@ -29,15 +36,13 @@ export const XYChartWithPointerEvents = ({
       {...props}
       onPointerMove={({ event }) => {
         setLastPointerMoveEvent(event as React.PointerEvent);
-        if (pointerChartPosition)
+        if (pointerChartPosition) onPointerMove?.(pointerChartPosition);
-          onPointerMove?.(pointerChartPosition);
       }}
       onPointerOut={() => setLastPointerMoveEvent(undefined)}
       onPointerDown={() => onPointerPressedChange?.(true)}
       onPointerUp={() => {
         onPointerPressedChange?.(false);
-        if (pointerChartPosition)
+        if (pointerChartPosition) onPointerUp?.(pointerChartPosition);
-          onPointerUp?.(pointerChartPosition);
       }}
     >
       {props.children}

src/constants/abacus.ts

@@ -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];

src/constants/analytics.ts

@@ -96,6 +96,7 @@ export type AnalyticsEventData<T extends AnalyticsEvent> =
         elapsedTime?: number;
         blockHeight?: number;
         indexerBlockHeight?: number;
+        trailingBlocks?: number;
       }
     : // Navigation
     T extends AnalyticsEvent.NavigatePage

src/constants/charts.ts

@@ -0,0 +1,40 @@
+import { OrderSide } from '@dydxprotocol/v4-client-js';
+import { FundingDirection } from './markets';
+
+// ------ Depth Chart ------ //
+export enum DepthChartSeries {
+  Asks = 'Asks',
+  Bids = 'Bids',
+  MidMarket = 'MidMarket',
+}
+
+export type DepthChartDatum = {
+  size: number;
+  price: number;
+  depth: number;
+  seriesKey: DepthChartSeries;
+};
+
+export type DepthChartPoint = {
+  side: OrderSide;
+  price: number;
+  size: number;
+};
+
+export const SERIES_KEY_FOR_ORDER_SIDE = {
+  [OrderSide.BUY]: DepthChartSeries.Bids,
+  [OrderSide.SELL]: DepthChartSeries.Asks,
+};
+
+// ------ Funding Chart ------ //
+export enum FundingRateResolution {
+  OneHour = 'OneHour',
+  EightHour = 'EightHour',
+  Annualized = 'Annualized',
+}
+
+export type FundingChartDatum = {
+  time: number;
+  fundingRate: number;
+  direction: FundingDirection;
+};

src/constants/markets.ts

@@ -25,4 +25,5 @@ export const DEFAULT_MARKETID = 'ETH-USD';
 export enum FundingDirection {
   ToShort = 'ToShort',
   ToLong = 'ToLong',
+  None = 'None',
 }

src/hooks/useAnalytics.ts

@@ -97,7 +97,7 @@ export const useAnalytics = () => {
   }, []);
 
   // AnalyticsEvent.NetworkStatus
-  const { height, indexerHeight, status } = useApiState();
+  const { height, indexerHeight, status, trailingBlocks} = useApiState();
 
   useEffect(() => {
     if (status) {
@@ -114,6 +114,7 @@ export const useAnalytics = () => {
         elapsedTime: lastSuccessfulIndexerRpcQuery && Date.now() - lastSuccessfulIndexerRpcQuery,
         blockHeight: height ?? undefined,
         indexerBlockHeight: indexerHeight ?? undefined,
+        trailingBlocks: trailingBlocks ?? undefined
       });
     }
   }, [status]);

src/hooks/useApiState.ts

@@ -71,7 +71,7 @@ export const getIndexerHeight = (apiState: Nullable<AbacusApiState>) => {
 export const useApiState = () => {
   const stringGetter = useStringGetter();
   const apiState = useSelector(getApiState, shallowEqual);
-  const { haltedBlock, height, status, trailingBlocks } = apiState ?? {};
+  const { haltedBlock, height, status, trailingBlocks} = apiState ?? {};
   const statusErrorMessage = getStatusErrorMessage({ apiState, stringGetter });
   const indexerHeight = getIndexerHeight(apiState);
 

src/hooks/useOrderbookValues.ts

@@ -0,0 +1,44 @@
+import { useMemo } from 'react';
+import { shallowEqual, useSelector } from 'react-redux';
+
+import { DepthChartSeries, DepthChartDatum } from '@/constants/charts';
+
+import { getCurrentMarketOrderbook } from '@/state/perpetualsSelectors';
+
+import { MustBigNumber } from '@/lib/numbers';
+
+export const useOrderbookValuesForDepthChart = () => {
+  const orderbook = useSelector(getCurrentMarketOrderbook, shallowEqual);
+
+  return useMemo(() => {
+    const bids = (orderbook?.bids?.toArray() ?? [])
+      .filter(Boolean)
+      .map((datum) => ({ ...datum, seriesKey: DepthChartSeries.Bids } as DepthChartDatum));
+
+    const asks = (orderbook?.asks?.toArray() ?? [])
+      .filter(Boolean)
+      .map((datum) => ({ ...datum, seriesKey: DepthChartSeries.Asks } as DepthChartDatum));
+
+    const lowestBid = bids[bids.length - 1];
+    const highestBid = bids[0];
+    const lowestAsk = asks[0];
+    const highestAsk = asks[asks.length - 1];
+
+    const midMarketPrice = orderbook?.midPrice;
+    const spread = MustBigNumber(lowestAsk?.price ?? 0).minus(highestBid?.price ?? 0);
+    const spreadPercent = orderbook?.spreadPercent;
+
+    return {
+      bids,
+      asks,
+      lowestBid,
+      highestBid,
+      lowestAsk,
+      highestAsk,
+      midMarketPrice,
+      spread,
+      spreadPercent,
+      orderbook,
+    };
+  }, [orderbook]);
+};

src/icons/caret-down.svg

@@ -1,3 +1 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/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>
-  <path d="M14 6L7.83335 10.5L2 6" stroke="currentColor" stroke-width="2.25" stroke-linecap="round"/>
-</svg>

src/icons/cube.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.95513 1.00169C7.89506 1.00645 7.83628 1.02054 7.78124 1.04337L1.31971 3.71042C1.2243 3.74983 1.14329 3.81414 1.08653 3.89553C1.02977 3.97691 0.999705 4.07186 1 4.16883V11.8366C1.00078 11.9327 1.03135 12.0265 1.08805 12.1069C1.14474 12.1873 1.22517 12.2508 1.31971 12.2898L7.78124 14.9568C7.85011 14.9853 7.92463 15 8 15C8.07536 15 8.14989 14.9853 8.21876 14.9568L14.6803 12.2898C14.7748 12.2508 14.8552 12.1873 14.9119 12.1069C14.9686 12.0265 14.9992 11.9327 15 11.8366V4.16883C15.0003 4.07186 14.9702 3.97691 14.9134 3.89553C14.8567 3.81414 14.7756 3.74983 14.6803 3.71042L8.21876 1.04337C8.13605 1.00911 8.04538 0.994778 7.95513 1.00169ZM8 2.04351L13.1378 4.16883L8 6.28894L2.86219 4.16883L8 2.04351ZM2.07693 4.93457L7.46153 7.15886V13.7328L2.07693 11.5084V4.93457ZM13.923 4.93457V11.5084L8.53846 13.7328V7.15886L13.923 4.93457Z" fill="currentColor"/>
-</svg>

src/icons/index.ts

@@ -19,7 +19,6 @@ export { default as CoinMarketCapIcon } from './logos/coinmarketcap.svg';
 export { default as CoinsIcon } from './coins.svg';
 export { default as CommentIcon } from './comment.svg';
 export { default as CopyIcon } from './copy.svg';
-export { default as CubeIcon } from './cube.svg';
 export { default as DepositIcon } from './deposit.svg';
 export { default as DepthChartIcon } from './depth-chart.svg';
 export { default as DiscordIcon } from './discord.svg';

src/lib/wagmi.ts

@@ -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(

src/pages/Profile.tsx

@@ -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;
   }

src/pages/portfolio/Portfolio.tsx

@@ -118,7 +118,7 @@ export default () => {
                     },
                     {
                       value: PortfolioRoute.Positions,
-                      slotBefore: <Styled.Icon iconName={IconName.Cube} />,
+                      slotBefore: <Styled.Icon iconName={IconName.Positions} />,
                       label: stringGetter({ key: STRING_KEYS.POSITIONS }),
                       href: PortfolioRoute.Positions,
                     },

src/pages/rewards/DYDXBalancePanel.tsx

@@ -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;

src/pages/rewards/LaunchIncentivesPanel.tsx

@@ -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: {
+              params: { SEASON_NUMBER },
-                SEASON_NUMBER: 1,
-              },
             })}
           </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;
 

src/pages/rewards/MigratePanel.tsx

@@ -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}

src/pages/rewards/RewardsHelpPanel.tsx

@@ -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);

src/pages/rewards/RewardsPage.tsx

@@ -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 />
-          <LaunchIncentivesPanel />
-          <DYDXBalancePanel />
-        </>
       ) : (
         <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)`
+Styled.MobileHeader = styled.header`
-  --panel-paddingX: 1.5rem;
+  ${layoutMixins.contentSectionDetachedScrollable}
+  ${layoutMixins.stickyHeader}
+  z-index: 2;
+  padding: 1.25rem 0;
+  margin-bottom: -1.5rem;
 
-  @media ${breakpoints.tablet} {
+  font: var(--font-large-medium);
-    --panel-paddingY: 1.5rem;
+  color: var(--color-text-2);
-    --panel-content-paddingY: 1rem;
+  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`

src/state/perpetualsCalculators.ts

@@ -26,7 +26,12 @@ export const calculateFundingRateHistory = createSelector(
     return data.map(({ effectiveAtMilliseconds, rate }) => ({
       time: effectiveAtMilliseconds,
       fundingRate: rate,
-      direction: rate < 0 ? FundingDirection.ToLong : FundingDirection.ToShort,
+      direction:
+        rate === 0
+          ? FundingDirection.None
+          : rate < 0
+          ? FundingDirection.ToLong
+          : FundingDirection.ToShort,
     }));
   }
 );

src/views/MarketDetails.tsx

@@ -114,17 +114,11 @@ export const MarketDetails: React.FC = () => {
       ),
     },
     {
-      key: 'base-initial-margin-fraction',
+      key: 'initial-margin-fraction',
-      label: stringGetter({ key: STRING_KEYS.BASE_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 (

src/views/charts/DepthChart/Tooltip.tsx

@@ -0,0 +1,220 @@
+import { useMemo } from 'react';
+import { OrderSide } from '@dydxprotocol/v4-client-js';
+import type { RenderTooltipParams } from '@visx/xychart/lib/components/Tooltip';
+import { shallowEqual, useSelector } from 'react-redux';
+
+import type { Nullable } from '@/constants/abacus';
+import {
+  DepthChartDatum,
+  DepthChartPoint,
+  DepthChartSeries,
+  SERIES_KEY_FOR_ORDER_SIDE,
+} from '@/constants/charts';
+import { STRING_KEYS } from '@/constants/localization';
+
+import { useStringGetter } from '@/hooks';
+import { useOrderbookValuesForDepthChart } from '@/hooks/useOrderbookValues';
+
+import { TooltipContent } from '@/components/visx/TooltipContent';
+import { Details } from '@/components/Details';
+import { Output, OutputType } from '@/components/Output';
+
+import { getCurrentMarketAssetData } from '@/state/assetsSelectors';
+
+import { MustBigNumber } from '@/lib/numbers';
+
+type DepthChartTooltipProps = {
+  chartPointAtPointer: DepthChartPoint;
+  isEditingOrder?: boolean;
+  stepSizeDecimals: Nullable<number>;
+  tickSizeDecimals: Nullable<number>;
+} & Pick<RenderTooltipParams<DepthChartDatum>, 'colorScale' | 'tooltipData'>;
+
+export const DepthChartTooltipContent = ({
+  chartPointAtPointer,
+  colorScale,
+  isEditingOrder,
+  stepSizeDecimals,
+  tickSizeDecimals,
+  tooltipData,
+}: DepthChartTooltipProps) => {
+  const { nearestDatum } = tooltipData || {};
+  const stringGetter = useStringGetter();
+  const { spread, spreadPercent, midMarketPrice } = useOrderbookValuesForDepthChart();
+  const { id = '' } = useSelector(getCurrentMarketAssetData, shallowEqual) ?? {};
+
+  const priceImpact = useMemo(() => {
+    if (nearestDatum) {
+      const depthChartSeries = nearestDatum.key as DepthChartSeries;
+
+      return {
+        [DepthChartSeries.Bids]: MustBigNumber(nearestDatum?.datum.price)
+          .minus(chartPointAtPointer.price)
+          .div(nearestDatum?.datum.price),
+        [DepthChartSeries.Asks]: MustBigNumber(chartPointAtPointer.price)
+          .minus(nearestDatum?.datum.price)
+          .div(chartPointAtPointer.price),
+        [DepthChartSeries.MidMarket]: undefined,
+      }[depthChartSeries];
+    }
+    return undefined;
+  }, [nearestDatum, chartPointAtPointer.price]);
+
+  if (!isEditingOrder && !nearestDatum?.datum) return null;
+
+  return (
+    <TooltipContent
+      accentColor={
+        nearestDatum?.key &&
+        colorScale?.(
+          isEditingOrder ? SERIES_KEY_FOR_ORDER_SIDE[chartPointAtPointer.side] : nearestDatum.key
+        )
+      }
+    >
+      <h4>
+        {isEditingOrder
+          ? stringGetter({ key: STRING_KEYS.RELEASE_TO_EDIT })
+          : nearestDatum &&
+            {
+              [DepthChartSeries.Bids]: stringGetter({ key: STRING_KEYS.BIDS }),
+              [DepthChartSeries.Asks]: stringGetter({ key: STRING_KEYS.ASKS }),
+              [DepthChartSeries.MidMarket]: stringGetter({ key: STRING_KEYS.MID_MARKET }),
+            }[nearestDatum.key]}
+      </h4>
+
+      <Details
+        layout="column"
+        items={
+          isEditingOrder
+            ? [
+                {
+                  key: 'side',
+                  label: stringGetter({ key: STRING_KEYS.SIDE }),
+                  value: (
+                    <Output
+                      type={OutputType.Text}
+                      value={
+                        {
+                          [OrderSide.BUY]: stringGetter({
+                            key: STRING_KEYS.BUY,
+                          }),
+                          [OrderSide.SELL]: stringGetter({
+                            key: STRING_KEYS.SELL,
+                          }),
+                        }[chartPointAtPointer.side]
+                      }
+                    />
+                  ),
+                },
+                {
+                  key: 'limitPrice',
+                  label: stringGetter({ key: STRING_KEYS.LIMIT_PRICE }),
+                  value: (
+                    <Output
+                      type={OutputType.Fiat}
+                      value={chartPointAtPointer.price}
+                      useGrouping={false}
+                    />
+                  ),
+                },
+                {
+                  key: 'size',
+                  label: stringGetter({ key: STRING_KEYS.AMOUNT }),
+                  value: (
+                    <Output
+                      type={OutputType.Asset}
+                      value={chartPointAtPointer.size}
+                      fractionDigits={stepSizeDecimals}
+                      tag={id}
+                      useGrouping={false}
+                    />
+                  ),
+                },
+              ]
+            : nearestDatum?.key === DepthChartSeries.MidMarket
+            ? [
+                {
+                  key: 'midMarketPrice',
+                  label: stringGetter({ key: STRING_KEYS.PRICE }),
+                  value: (
+                    <Output type={OutputType.Fiat} value={midMarketPrice} useGrouping={false} />
+                  ),
+                },
+                {
+                  key: 'spread',
+                  label: stringGetter({ key: STRING_KEYS.ORDERBOOK_SPREAD }),
+                  value: (
+                    <>
+                      <Output
+                        type={OutputType.Fiat}
+                        value={spread}
+                        fractionDigits={tickSizeDecimals}
+                        useGrouping={false}
+                      />
+                      <Output
+                        type={OutputType.SmallPercent}
+                        value={spreadPercent}
+                        withParentheses
+                      />
+                    </>
+                  ),
+                },
+              ]
+            : [
+                {
+                  key: 'price',
+                  label: stringGetter({ key: STRING_KEYS.PRICE }),
+                  value: (
+                    <>
+                      {nearestDatum &&
+                        {
+                          [DepthChartSeries.Bids]: '≥',
+                          [DepthChartSeries.Asks]: '≤',
+                        }[nearestDatum.key]}
+                      <Output
+                        type={OutputType.Fiat}
+                        value={nearestDatum?.datum.price}
+                        useGrouping={false}
+                      />
+                    </>
+                  ),
+                },
+                {
+                  key: 'depth',
+                  label: stringGetter({ key: STRING_KEYS.TOTAL_SIZE }),
+                  value: (
+                    <Output
+                      type={OutputType.Asset}
+                      value={nearestDatum?.datum.depth}
+                      fractionDigits={stepSizeDecimals}
+                      tag={id}
+                      useGrouping={false}
+                    />
+                  ),
+                },
+                {
+                  key: 'cost',
+                  label: stringGetter({ key: STRING_KEYS.TOTAL_COST }),
+                  value: (
+                    <Output
+                      useGrouping
+                      type={OutputType.Fiat}
+                      value={
+                        nearestDatum
+                          ? nearestDatum?.datum.price * nearestDatum?.datum.depth
+                          : undefined
+                      }
+                    />
+                  ),
+                },
+                {
+                  key: 'priceImpact',
+                  label: stringGetter({ key: STRING_KEYS.PRICE_IMPACT }),
+                  value: <Output useGrouping type={OutputType.Percent} value={priceImpact} />,
+                },
+              ]
+        }
+      />
+    </TooltipContent>
+  );
+};

src/views/charts/DepthChart/index.tsx

@@ -1,14 +1,20 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import styled, { AnyStyledComponent, css, keyframes } from 'styled-components';
 import { useSelector, shallowEqual } from 'react-redux';
+import { OrderSide } from '@dydxprotocol/v4-client-js';
 
-import { StringGetterFunction, STRING_KEYS } from '@/constants/localization';
+import {
+  DepthChartDatum,
+  DepthChartPoint,
+  DepthChartSeries,
+  SERIES_KEY_FOR_ORDER_SIDE,
+} from '@/constants/charts';
+import { StringGetterFunction } from '@/constants/localization';
 
 import { useBreakpoints } from '@/hooks';
+import { useOrderbookValuesForDepthChart } from '@/hooks/useOrderbookValues';
 
-import { MustBigNumber } from '@/lib/numbers';
+import { getCurrentMarketConfig } from '@/state/perpetualsSelectors';
-
-import { getCurrentMarketConfig, getCurrentMarketOrderbook } from '@/state/perpetualsSelectors';
 import { getCurrentMarketAssetData } from '@/state/assetsSelectors';
 
 import { XYChartWithPointerEvents } from '@/components/visx/XYChartWithPointerEvents';
@@ -21,24 +27,25 @@ import {
   darkTheme,
   DataProvider,
   EventEmitterProvider,
+  type EventHandlerParams,
 } from '@visx/xychart';
 import { LinearGradient } from '@visx/gradient';
 import { curveStepAfter } from '@visx/curve';
-import type { Point } from '@visx/point';
+import { Point } from '@visx/point';
 import Tooltip from '@/components/visx/XYChartTooltipWithBounds';
-import { TooltipContent } from '@/components/visx/TooltipContent';
 import { AxisLabelOutput } from '@/components/visx/AxisLabelOutput';
 
-import { Details } from '@/components/Details';
 import { LoadingSpace } from '@/components/Loading/LoadingSpinner';
-import { Output, OutputType } from '@/components/Output';
+import { OutputType } from '@/components/Output';
 
-import { OrderSide } from '@dydxprotocol/v4-client-js';
+import { MustBigNumber } from '@/lib/numbers';
+
+import { DepthChartTooltipContent } from './Tooltip';
 
 // @ts-ignore
 const theme = buildChartTheme({
   ...darkTheme,
-  colors: ['var(--color-positive)', 'var(--color-negative)', 'white'], // categorical colors, mapped to series via `dataKey`s
+  colors: ['var(--color-positive)', 'var(--color-negative)', 'var(--color-layer-6)'], // categorical colors, mapped to series via `dataKey`s
 });
 
 const clamp = (n: number, min: number, max: number) => Math.max(min, Math.min(max, n));
@@ -58,30 +65,6 @@ const formatNumber = (n: number, selectedLocale: string, isCompact: boolean = n
     : formattedNumber;
 };
 
-enum DepthChartSeries {
-  Asks = 'Asks',
-  Bids = 'Bids',
-  MidMarket = 'MidMarket',
-}
-
-type DepthChartDatum = {
-  size: number;
-  price: number;
-  depth: number;
-  seriesKey: DepthChartSeries;
-};
-
-const seriesKeyForOrderSide = {
-  [OrderSide.BUY]: DepthChartSeries.Bids,
-  [OrderSide.SELL]: DepthChartSeries.Asks,
-};
-
-type DepthChartPoint = {
-  side: OrderSide;
-  price: number;
-  size: number;
-};
-
 export const DepthChart = ({
   onChartClick,
   stringGetter,
@@ -96,8 +79,6 @@ export const DepthChart = ({
   const { isMobile } = useBreakpoints();
 
   // Chart data
-
-  const orderbook = useSelector(getCurrentMarketOrderbook, shallowEqual);
   const { id = '' } = useSelector(getCurrentMarketAssetData, shallowEqual) ?? {};
   const { stepSizeDecimals, tickSizeDecimals } =
     useSelector(getCurrentMarketConfig, shallowEqual) ?? {};
@@ -112,43 +93,15 @@ export const DepthChart = ({
     midMarketPrice,
     spread,
     spreadPercent,
-  } = useMemo(() => {
+    orderbook,
-    const bids = (orderbook?.bids?.toArray() ?? [])
+  } = useOrderbookValuesForDepthChart();
-      .filter(Boolean)
-      .map((datum) => ({ ...datum, seriesKey: DepthChartSeries.Bids } as DepthChartDatum));
-
-    const asks = (orderbook?.asks?.toArray() ?? [])
-      .filter(Boolean)
-      .map((datum) => ({ ...datum, seriesKey: DepthChartSeries.Asks } as DepthChartDatum));
-
-    const lowestBid = bids[bids.length - 1];
-    const highestBid = bids[0];
-    const lowestAsk = asks[0];
-    const highestAsk = asks[asks.length - 1];
-
-    const midMarketPrice = orderbook?.midPrice;
-    const spread = MustBigNumber(lowestAsk?.price ?? 0).minus(highestBid?.price ?? 0);
-    const spreadPercent = orderbook?.spreadPercent;
-
-    return {
-      bids,
-      asks,
-      lowestBid,
-      highestBid,
-      lowestAsk,
-      highestAsk,
-      midMarketPrice,
-      spread,
-      spreadPercent,
-    };
-  }, [orderbook]);
 
   // Chart state
 
   const [isPointerPressed, setIsPointerPressed] = useState(false);
   const [chartPointAtPointer, setChartPointAtPointer] = useState<DepthChartPoint>();
 
-  const isEditingOrder = isPointerPressed && chartPointAtPointer;
+  const isEditingOrder = Boolean(isPointerPressed && chartPointAtPointer);
 
   const [zoomDomain, setZoomDomain] = useState<undefined | number>();
 
@@ -193,12 +146,24 @@ export const DepthChart = ({
   }, [orderbook, zoomDomain]);
 
   const getChartPoint = useCallback(
-    ({ x: price, y: size }: Point) =>
+    (point: Point | EventHandlerParams<object>) => {
-      ({
+      let price, size;
-        side: price < midMarketPrice! ? OrderSide.BUY : OrderSide.SELL,
+      if (point instanceof Point) {
+        const { x, y } = point as Point;
+        price = x;
+        size = y;
+      } else {
+        const { svgPoint: { x, y } = {} } = point as EventHandlerParams<object>;
+        price = x;
+        size = y;
+      }
+
+      return {
+        side: MustBigNumber(price).lt(midMarketPrice!) ? OrderSide.BUY : OrderSide.SELL,
         price,
         size,
-      } as DepthChartPoint),
+      } as DepthChartPoint;
+    },
     [midMarketPrice]
   );
 
@@ -256,7 +221,7 @@ export const DepthChart = ({
             }}
             onPointerUp={(point) => point && onChartClick?.(getChartPoint(point))}
             onPointerMove={(point) => point && setChartPointAtPointer(getChartPoint(point))}
-            onPointerPressedChange={setIsPointerPressed}
+            onPointerPressedChange={(isPointerPressed) => setIsPointerPressed(isPointerPressed)}
           >
             <Axis
               orientation="bottom"
@@ -363,7 +328,7 @@ export const DepthChart = ({
                 <Styled.XAxisLabelOutput
                   type={OutputType.Fiat}
                   value={
-                    isEditingOrder
+                    isEditingOrder && chartPointAtPointer
                       ? chartPointAtPointer.price
                       : tooltipData!.nearestDatum?.datum.price
                   }
@@ -374,8 +339,8 @@ export const DepthChart = ({
                       [DepthChartSeries.Bids]: 'var(--color-positive)',
                       [DepthChartSeries.MidMarket]: 'var(--color-layer-6)',
                     }[
-                      isEditingOrder
+                      isEditingOrder && chartPointAtPointer
-                        ? seriesKeyForOrderSide[chartPointAtPointer.side]
+                        ? SERIES_KEY_FOR_ORDER_SIDE[chartPointAtPointer.side]
                         : (tooltipData!.nearestDatum?.key as DepthChartSeries)
                     ]
                   }
@@ -389,7 +354,7 @@ export const DepthChart = ({
                   <Styled.YAxisLabelOutput
                     type={OutputType.Asset}
                     value={
-                      isEditingOrder
+                      isEditingOrder && chartPointAtPointer
                         ? chartPointAtPointer.size
                         : tooltipData!.nearestDatum?.datum.depth
                     }
@@ -400,8 +365,8 @@ export const DepthChart = ({
                         [DepthChartSeries.Bids]: 'var(--color-positive)',
                         [DepthChartSeries.MidMarket]: 'var(--color-layer-6)',
                       }[
-                        isEditingOrder
+                        isEditingOrder && chartPointAtPointer
-                          ? seriesKeyForOrderSide[chartPointAtPointer.side]
+                          ? SERIES_KEY_FOR_ORDER_SIDE[chartPointAtPointer.side]
                           : (tooltipData!.nearestDatum?.key as DepthChartSeries)
                       ]
                     }
@@ -410,181 +375,22 @@ export const DepthChart = ({
               }
               snapTooltipToDatumX={!isEditingOrder}
               snapTooltipToDatumY={isEditingOrder ? false : isMobile}
-              renderTooltip={({ tooltipData, colorScale }) => {
+              renderTooltip={({ tooltipData, colorScale }) =>
-                const { nearestDatum } = tooltipData || {};
+                chartPointAtPointer && (
-
+                  <DepthChartTooltipContent
-                if (!isEditingOrder && !nearestDatum?.datum) return null;
+                    {...{
-
+                      tooltipData,
-                return (
+                      colorScale,
-                  <TooltipContent
+                      isEditingOrder,
-                    accentColor={colorScale?.(
+                      chartPointAtPointer,
-                      isEditingOrder
+                      stringGetter,
-                        ? seriesKeyForOrderSide[chartPointAtPointer.side]
+                      selectedLocale,
-                        : nearestDatum.key
+                      stepSizeDecimals,
-                    )}
+                      tickSizeDecimals,
-                  >
+                    }}
-                    <h4>
+                  />
-                      {isEditingOrder
+                )
-                        ? 'Release mouse to edit order'
+              }
-                        : {
-                            [DepthChartSeries.Bids]: 'Bids',
-                            [DepthChartSeries.Asks]: 'Asks',
-                            [DepthChartSeries.MidMarket]: 'Mid-Market',
-                          }[nearestDatum.key]}
-                    </h4>
-
-                    <Details
-                      layout="column"
-                      items={
-                        isEditingOrder
-                          ? [
-                              {
-                                key: 'side',
-                                label: stringGetter({ key: STRING_KEYS.SIDE }),
-                                value: (
-                                  <Output
-                                    type={OutputType.Text}
-                                    value={
-                                      {
-                                        [OrderSide.BUY]: stringGetter({
-                                          key: STRING_KEYS.BUY,
-                                        }),
-                                        [OrderSide.SELL]: stringGetter({
-                                          key: STRING_KEYS.SELL,
-                                        }),
-                                      }[chartPointAtPointer.side]
-                                    }
-                                  />
-                                ),
-                              },
-                              {
-                                key: 'limitPrice',
-                                label: stringGetter({ key: STRING_KEYS.LIMIT_PRICE }),
-                                value: (
-                                  <Output
-                                    type={OutputType.Fiat}
-                                    value={chartPointAtPointer.price}
-                                    useGrouping={false}
-                                  />
-                                ),
-                              },
-                              {
-                                key: 'size',
-                                label: stringGetter({ key: STRING_KEYS.AMOUNT }),
-                                value: (
-                                  <Output
-                                    type={OutputType.Asset}
-                                    value={chartPointAtPointer.size}
-                                    fractionDigits={stepSizeDecimals}
-                                    tag={id}
-                                    useGrouping={false}
-                                  />
-                                ),
-                              },
-                            ]
-                          : nearestDatum?.key === DepthChartSeries.MidMarket
-                          ? [
-                              {
-                                key: 'midMarketPrice',
-                                // label: stringGetter({ key: STRING_KEYS.ORDERBOOK_MID_MARKET_PRICE }),
-                                label: stringGetter({ key: STRING_KEYS.PRICE }),
-                                value: (
-                                  <Output
-                                    type={OutputType.Fiat}
-                                    value={midMarketPrice}
-                                    useGrouping={false}
-                                  />
-                                ),
-                              },
-                              {
-                                key: 'spread',
-                                label: stringGetter({ key: STRING_KEYS.ORDERBOOK_SPREAD }),
-                                value: (
-                                  <>
-                                    <Output
-                                      type={OutputType.Fiat}
-                                      value={spread}
-                                      fractionDigits={tickSizeDecimals}
-                                      useGrouping={false}
-                                    />
-                                    <Output
-                                      type={OutputType.SmallPercent}
-                                      value={spreadPercent}
-                                      withParentheses
-                                    />
-                                  </>
-                                ),
-                              },
-                            ]
-                          : [
-                              {
-                                key: 'price',
-                                label: stringGetter({ key: STRING_KEYS.PRICE }),
-                                value: (
-                                  <>
-                                    {nearestDatum &&
-                                      {
-                                        [DepthChartSeries.Bids]: '≥',
-                                        [DepthChartSeries.Asks]: '≤',
-                                      }[nearestDatum.key]}
-                                    <Output
-                                      type={OutputType.Fiat}
-                                      value={nearestDatum?.datum.price}
-                                      useGrouping={false}
-                                    />
-                                  </>
-                                ),
-                              },
-                              {
-                                key: 'depth',
-                                label: stringGetter({ key: STRING_KEYS.TOTAL_SIZE }),
-                                value: (
-                                  <Output
-                                    type={OutputType.Asset}
-                                    value={nearestDatum?.datum.depth}
-                                    fractionDigits={stepSizeDecimals}
-                                    tag={id}
-                                    useGrouping={false}
-                                  />
-                                ),
-                              },
-                              {
-                                key: 'cost',
-                                label: stringGetter({ key: STRING_KEYS.TOTAL_COST }),
-                                value: (
-                                  <Output
-                                    useGrouping
-                                    type={OutputType.Fiat}
-                                    value={nearestDatum?.datum.price * nearestDatum?.datum.depth}
-                                  />
-                                ),
-                              },
-                              {
-                                key: 'priceImpact',
-                                label: stringGetter({ key: STRING_KEYS.PRICE_IMPACT }),
-                                value: (
-                                  <Output
-                                    useGrouping
-                                    type={OutputType.Percent}
-                                    value={{
-                                      [DepthChartSeries.Asks]: () =>
-                                        MustBigNumber(nearestDatum.datum.price)
-                                          .minus(lowestAsk.price)
-                                          .div(nearestDatum.datum.price),
-                                      [DepthChartSeries.Bids]: () =>
-                                        MustBigNumber(highestBid.price)
-                                          .minus(nearestDatum.datum.price)
-                                          .div(highestBid.price),
-                                    }[nearestDatum.key]()}
-                                  />
-                                ),
-                              },
-                            ]
-                      }
-                    />
-                  </TooltipContent>
-                );
-              }}
             />
           </XYChartWithPointerEvents>
         </EventEmitterProvider>

src/views/charts/FundingChart/Tooltip.tsx

@@ -0,0 +1,107 @@
+import type { RenderTooltipParams } from '@visx/xychart/lib/components/Tooltip';
+import { TooltipContent } from '@/components/visx/TooltipContent';
+
+import { FundingRateResolution, type FundingChartDatum } from '@/constants/charts';
+import { STRING_KEYS } from '@/constants/localization';
+import { FundingDirection } from '@/constants/markets';
+import { useStringGetter } from '@/hooks';
+
+import { Details, DetailsItem } from '@/components/Details';
+import { Output, OutputType, ShowSign } from '@/components/Output';
+
+type FundingChartTooltipProps = {
+  fundingRateView: FundingRateResolution;
+  latestDatum: FundingChartDatum;
+} & Pick<RenderTooltipParams<FundingChartDatum>, 'tooltipData'>;
+
+export const FundingChartTooltipContent = ({
+  fundingRateView,
+  latestDatum,
+  tooltipData,
+}: FundingChartTooltipProps) => {
+  const { nearestDatum } = tooltipData || {};
+  const stringGetter = useStringGetter();
+
+  const tooltipDatum = nearestDatum?.datum ?? latestDatum;
+  const isShowingCurrentFundingRate = tooltipDatum === latestDatum;
+
+  return (
+    <TooltipContent
+      accentColor={
+        {
+          [FundingDirection.ToLong]: 'var(--color-negative)',
+          [FundingDirection.ToShort]: 'var(--color-positive)',
+          [FundingDirection.None]: 'var(--color-layer-6)',
+        }[tooltipDatum.direction]
+      }
+    >
+      <h4>
+        {isShowingCurrentFundingRate
+          ? stringGetter({ key: STRING_KEYS.CURRENT_FUNDING_RATE })
+          : stringGetter({ key: STRING_KEYS.HISTORICAL_FUNDING_RATE })}
+      </h4>
+
+      <Details
+        layout="column"
+        items={
+          [
+            {
+              key: 'direction',
+              label: stringGetter({ key: STRING_KEYS.DIRECTION }),
+              value: (
+                <Output
+                  type={OutputType.Text}
+                  value={
+                    {
+                      [FundingDirection.ToLong]: `${stringGetter({
+                        key: STRING_KEYS.SHORT_POSITION_SHORT,
+                      })} → ${stringGetter({
+                        key: STRING_KEYS.LONG_POSITION_SHORT,
+                      })}`,
+                      [FundingDirection.ToShort]: `${stringGetter({
+                        key: STRING_KEYS.LONG_POSITION_SHORT,
+                      })} → ${stringGetter({
+                        key: STRING_KEYS.SHORT_POSITION_SHORT,
+                      })}`,
+                      [FundingDirection.None]: undefined,
+                    }[tooltipDatum.direction]
+                  }
+                />
+              ),
+            },
+            {
+              key: 'fundingRate',
+              label: stringGetter({
+                key: {
+                  [FundingRateResolution.OneHour]: STRING_KEYS.RATE_1H,
+                  [FundingRateResolution.EightHour]: STRING_KEYS.RATE_8H,
+                  [FundingRateResolution.Annualized]: STRING_KEYS.ANNUALIZED,
+                }[fundingRateView],
+              }),
+              value: (
+                <Output
+                  type={OutputType.SmallPercent}
+                  value={
+                    {
+                      [FundingRateResolution.OneHour]: tooltipDatum.fundingRate,
+                      [FundingRateResolution.EightHour]: tooltipDatum.fundingRate * 8,
+                      [FundingRateResolution.Annualized]: tooltipDatum.fundingRate * (24 * 365),
+                    }[fundingRateView]
+                  }
+                  showSign={ShowSign.Both}
+                />
+              ),
+            },
+            {
+              key: 'time',
+              label: isShowingCurrentFundingRate
+                ? 'Time Remaining'
+                : stringGetter({ key: STRING_KEYS.TIME }),
+              value: <Output type={OutputType.DateTime} value={tooltipDatum.time} />,
+            },
+          ].filter(Boolean) as Array<DetailsItem>
+        }
+      />
+    </TooltipContent>
+  );
+};

src/views/charts/FundingChart/index.tsx

@@ -3,39 +3,27 @@ import { shallowEqual, useSelector } from 'react-redux';
 import styled, { type AnyStyledComponent, css } from 'styled-components';
 import { curveMonotoneX, curveStepAfter } from '@visx/curve';
 
-import { useBreakpoints, useStringGetter } from '@/hooks';
 import { ButtonSize } from '@/constants/buttons';
+import { FundingRateResolution, type FundingChartDatum } from '@/constants/charts';
 import { STRING_KEYS } from '@/constants/localization';
-import { SMALL_PERCENT_DECIMALS, TINY_PERCENT_DECIMALS } from '@/constants/numbers';
 import { FundingDirection } from '@/constants/markets';
+import { SMALL_PERCENT_DECIMALS, TINY_PERCENT_DECIMALS } from '@/constants/numbers';
+import { useBreakpoints, useStringGetter } from '@/hooks';
 
 import { breakpoints } from '@/styles';
 
-import { Details, DetailsItem } from '@/components/Details';
+import { Output, OutputType } from '@/components/Output';
-import { Output, OutputType, ShowSign } from '@/components/Output';
 import { LoadingSpace } from '@/components/Loading/LoadingSpinner';
 import { ToggleGroup } from '@/components/ToggleGroup';
 
 import { TimeSeriesChart } from '@/components/visx/TimeSeriesChart';
 import { AxisLabelOutput } from '@/components/visx/AxisLabelOutput';
-import { TooltipContent } from '@/components/visx/TooltipContent';
 import type { TooltipContextType } from '@visx/xychart';
 
 import { calculateFundingRateHistory } from '@/state/perpetualsCalculators';
 
 import { MustBigNumber } from '@/lib/numbers';
-
+import { FundingChartTooltipContent } from './Tooltip';
-enum FundingRateResolution {
-  OneHour = 'OneHour',
-  EightHour = 'EightHour',
-  Annualized = 'Annualized',
-}
-
-type FundingChartDatum = {
-  time: number;
-  fundingRate: number;
-  direction: FundingDirection;
-};
 
 const FUNDING_RATE_TIME_RESOLUTION = 60 * 60 * 1000; // 1 hour
 
@@ -116,114 +104,20 @@ export const FundingChart = ({ selectedLocale }: ElementProps) => {
               {
                 [FundingDirection.ToLong]: 'var(--color-negative)',
                 [FundingDirection.ToShort]: 'var(--color-positive)',
+                [FundingDirection.None]: 'var(--color-layer-6)',
               }[tooltipDatum.direction]
             }
           />
         );
       }}
-      renderTooltip={({ tooltipData }) => {
+      renderTooltip={({ tooltipData }) => (
-        const { nearestDatum } = tooltipData || {};
+        <FundingChartTooltipContent
-
+          fundingRateView={fundingRateView}
-        const tooltipDatum = nearestDatum?.datum ?? latestDatum;
+          tooltipData={tooltipData}
-        const isShowingCurrentFundingRate = tooltipDatum === latestDatum;
+          latestDatum={latestDatum}
-
+        />
-        return (
+      )}
-          <TooltipContent
+      onTooltipContext={(tooltipContext) => setTooltipContext(tooltipContext)}
-            accentColor={
-              {
-                [FundingDirection.ToLong]: 'var(--color-negative)',
-                [FundingDirection.ToShort]: 'var(--color-positive)',
-              }[tooltipDatum.direction]
-            }
-          >
-            <h4>
-              {isShowingCurrentFundingRate
-                ? stringGetter({ key: STRING_KEYS.CURRENT_FUNDING_RATE })
-                : stringGetter({ key: STRING_KEYS.HISTORICAL_FUNDING_RATE })}
-            </h4>
-
-            <Details
-              layout="column"
-              items={
-                [
-                  {
-                    key: 'direction',
-                    label: stringGetter({ key: STRING_KEYS.DIRECTION }),
-                    value: (
-                      <Output
-                        type={OutputType.Text}
-                        value={
-                          {
-                            [FundingDirection.ToLong]: `${stringGetter({
-                              key: STRING_KEYS.SHORT_POSITION_SHORT,
-                            })} → ${stringGetter({
-                              key: STRING_KEYS.LONG_POSITION_SHORT,
-                            })}`,
-                            [FundingDirection.ToShort]: `${stringGetter({
-                              key: STRING_KEYS.LONG_POSITION_SHORT,
-                            })} → ${stringGetter({
-                              key: STRING_KEYS.SHORT_POSITION_SHORT,
-                            })}`,
-                          }[tooltipDatum.direction]
-                        }
-                      />
-                    ),
-                  },
-                  {
-                    key: 'fundingRate1h',
-                    label: stringGetter({ key: STRING_KEYS.RATE_1H }),
-                    value: (
-                      <Output
-                        type={OutputType.SmallPercent}
-                        value={tooltipDatum.fundingRate}
-                        showSign={ShowSign.Both}
-                      />
-                    ),
-                  },
-                  {
-                    key: 'fundingRate8h',
-                    label: stringGetter({ key: STRING_KEYS.RATE_8H }),
-                    value: (
-                      <Output
-                        type={OutputType.SmallPercent}
-                        value={tooltipDatum.fundingRate * 8}
-                        // value={
-                        //   Math.sign(tooltipDatum.fundingRate) *
-                        //   ((Math.abs(tooltipDatum.fundingRate) + 1) ** 8 - 1)
-                        // }
-                        showSign={ShowSign.Both}
-                      />
-                    ),
-                  },
-                  {
-                    key: 'fundingRateAnnualized',
-                    label: stringGetter({ key: STRING_KEYS.ANNUALIZED }),
-                    value: (
-                      <Output
-                        type={OutputType.SmallPercent}
-                        value={tooltipDatum.fundingRate * (24 * 365)}
-                        // value={
-                        //   Math.sign(tooltipDatum.fundingRate) *
-                        //   ((Math.abs(tooltipDatum.fundingRate) + 1) ** (24 * 365) - 1)
-                        // }
-                        showSign={ShowSign.Both}
-                      />
-                    ),
-                  },
-                  {
-                    key: 'time',
-                    label: isShowingCurrentFundingRate
-                      ? 'Time Remaining'
-                      : stringGetter({ key: STRING_KEYS.TIME }),
-                    value: <Output type={OutputType.DateTime} value={tooltipDatum.time} />,
-                  },
-                ].filter(Boolean) as Array<DetailsItem>
-              }
-            />
-          </TooltipContent>
-        );
-      }}
-      onTooltipContext={setTooltipContext}
       minZoomDomain={FUNDING_RATE_TIME_RESOLUTION * 4}
       numGridLines={1}
       slotEmpty={<LoadingSpace id="funding-chart-loading" />}
@@ -290,6 +184,7 @@ Styled.FundingRateToggle = styled.div`
 Styled.CurrentFundingRate = styled.div<{ isShowing?: boolean }>`
   place-self: start center;
   padding: clamp(1.5rem, 9rem - 15%, 4rem);
+  pointer-events: none;
 
   font: var(--font-large-book);
 

src/views/forms/AccountManagementForms/DepositForm/DepositButtonAndReceipt.tsx

@@ -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',
         },

src/views/forms/AccountManagementForms/TokenSelectMenu.tsx

@@ -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 (