Compare commits
6
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Bill He
|
54d7b070d8 | ||
|
Bill He
|
fcf50f1361 | ||
 BillandAleka Cheung
|
4a64d59546 | ||
 Jared Vu
|
3fc43e8a12 | ||
|
Jared Vu
|
c24a9229a6 | ||
|
aleka
|
90329d44d0 |
+3
-3
@@ -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.1.33",
|
||||
"@dydxprotocol/v4-client-js": "^1.0.11",
|
||||
"@dydxprotocol/v4-localization": "^1.1.5",
|
||||
"@dydxprotocol/v4-localization": "^1.1.6",
|
||||
"@ethersproject/providers": "^5.7.2",
|
||||
"@js-joda/core": "^5.5.3",
|
||||
"@radix-ui/react-accordion": "^1.1.2",
|
||||
@@ -111,7 +111,7 @@
|
||||
"reselect": "^4.1.8",
|
||||
"styled-components": "^5.3.11",
|
||||
"use-latest": "^1.2.1",
|
||||
"viem": "^1.12.2",
|
||||
"viem": "^1.20.0",
|
||||
"wagmi": "^1.4.12"
|
||||
},
|
||||
"devDependencies": {
|
||||
|
||||
Generated
+154
-99
@@ -1,5 +1,9 @@
|
||||
lockfileVersion: '6.0'
|
||||
|
||||
settings:
|
||||
autoInstallPeers: true
|
||||
excludeLinksFromLockfile: false
|
||||
|
||||
dependencies:
|
||||
'@0xsquid/sdk':
|
||||
specifier: ^1.10.0
|
||||
@@ -23,14 +27,14 @@ dependencies:
|
||||
specifier: ^0.31.0
|
||||
version: 0.31.0
|
||||
'@dydxprotocol/v4-abacus':
|
||||
specifier: ^1.1.32
|
||||
version: 1.1.32
|
||||
specifier: ^1.1.33
|
||||
version: 1.1.33
|
||||
'@dydxprotocol/v4-client-js':
|
||||
specifier: ^1.0.11
|
||||
version: 1.0.11
|
||||
'@dydxprotocol/v4-localization':
|
||||
specifier: ^1.1.5
|
||||
version: 1.1.5
|
||||
specifier: ^1.1.6
|
||||
version: 1.1.6
|
||||
'@ethersproject/providers':
|
||||
specifier: ^5.7.2
|
||||
version: 5.7.2
|
||||
@@ -239,11 +243,11 @@ dependencies:
|
||||
specifier: ^1.2.1
|
||||
version: 1.2.1(@types/react@18.2.14)(react@18.2.0)
|
||||
viem:
|
||||
specifier: ^1.12.2
|
||||
version: 1.12.2(typescript@5.1.3)
|
||||
specifier: ^1.20.0
|
||||
version: 1.20.0(typescript@5.1.3)
|
||||
wagmi:
|
||||
specifier: ^1.4.12
|
||||
version: 1.4.12(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)(typescript@5.1.3)(viem@1.12.2)
|
||||
version: 1.4.13(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)(typescript@5.1.3)(viem@1.20.0)
|
||||
|
||||
devDependencies:
|
||||
'@babel/core':
|
||||
@@ -388,12 +392,12 @@ packages:
|
||||
engines: {node: '>=0.10.0'}
|
||||
dev: true
|
||||
|
||||
/@adraffy/ens-normalize@1.9.2:
|
||||
resolution: {integrity: sha512-0h+FrQDqe2Wn+IIGFkTCd4aAwTJ+7834Ek1COohCyV26AXhwQ7WQaz+4F/nLOeVl/3BtWHOHLPsq46V8YB46Eg==}
|
||||
/@adraffy/ens-normalize@1.10.0:
|
||||
resolution: {integrity: sha512-nA9XHtlAkYfJxY7bce8DcN7eKxWWCWkU+1GR9d+U6MbNpfwQp8TI7vqOsBsMcHoT4mBu2kypKoSKnghEzOOq5Q==}
|
||||
dev: false
|
||||
|
||||
/@adraffy/ens-normalize@1.9.4:
|
||||
resolution: {integrity: sha512-UK0bHA7hh9cR39V+4gl2/NnBBjoXIxkuWAPCaY4X7fbH4L/azIi7ilWOCjMUYfpJgraLUAqkRi2BqrjME8Rynw==}
|
||||
/@adraffy/ens-normalize@1.9.2:
|
||||
resolution: {integrity: sha512-0h+FrQDqe2Wn+IIGFkTCd4aAwTJ+7834Ek1COohCyV26AXhwQ7WQaz+4F/nLOeVl/3BtWHOHLPsq46V8YB46Eg==}
|
||||
dev: false
|
||||
|
||||
/@ampproject/remapping@2.2.1:
|
||||
@@ -987,8 +991,8 @@ packages:
|
||||
resolution: {integrity: sha512-RpfLEtTlyIxeNPGKcokS+p3BZII/Q3bYxryFRglh5H3A3T8q9fsLYm72VYAMEOOIBLEa8o93kFLiBDUWKrwXZA==}
|
||||
dev: true
|
||||
|
||||
/@dydxprotocol/v4-abacus@1.1.32:
|
||||
resolution: {integrity: sha512-1KM3ILBg/YrdiVhCp/DXUgyCnJurxeYAIwL6+MWZisEGtdhPf9R7MNKUyVcTeNwEyiyxh4AzXNLRp3IPeHAsAw==}
|
||||
/@dydxprotocol/v4-abacus@1.1.33:
|
||||
resolution: {integrity: sha512-VlIOaOPR4ImSWGmKK3+M4VHdMDdTk7qI77Iopppq11qU7f8wdwk4OeedTSuAMxezKez2nCP3J/x3Da+FtrKRqg==}
|
||||
dev: false
|
||||
|
||||
/@dydxprotocol/v4-client-js@1.0.11:
|
||||
@@ -1019,8 +1023,8 @@ packages:
|
||||
- utf-8-validate
|
||||
dev: false
|
||||
|
||||
/@dydxprotocol/v4-localization@1.1.5:
|
||||
resolution: {integrity: sha512-Y25yuCLFaK3v/81B60lc3qthaWwJn1fNJuYQdOtgnmOhLNqI4YRryUncLkbjdB5xd4QODq5KZikP34pLKX9sgA==}
|
||||
/@dydxprotocol/v4-localization@1.1.6:
|
||||
resolution: {integrity: sha512-Bon6NSRU4/FqneAbnP2G28EAPr0hp4LhvAayX61o0O1PGkxnLzAHkXeFppdM0Zn0fOcp1S1MJ+gvz138ZDephQ==}
|
||||
dev: false
|
||||
|
||||
/@dydxprotocol/v4-proto@0.4.1:
|
||||
@@ -4886,7 +4890,7 @@ packages:
|
||||
resolution: {integrity: sha512-XJbEPuaVc7b9n23MqlF6c+ToYIS3f7P2Sel8f3cSBQ9WORE4xrSuvhMpK9fDSFqJ7by/brc+rmJR/5HViRr0/w==}
|
||||
dependencies:
|
||||
'@safe-global/safe-gateway-typescript-sdk': 3.9.0
|
||||
viem: 1.12.2(typescript@5.1.3)
|
||||
viem: 1.20.0(typescript@5.1.3)
|
||||
transitivePeerDependencies:
|
||||
- bufferutil
|
||||
- encoding
|
||||
@@ -5390,31 +5394,13 @@ packages:
|
||||
use-sync-external-store: 1.2.0(react@18.2.0)
|
||||
dev: false
|
||||
|
||||
/@tanstack/react-query-persist-client@4.32.6(@tanstack/react-query@4.32.6):
|
||||
/@tanstack/react-query-persist-client@4.32.6(@tanstack/react-query@4.36.1):
|
||||
resolution: {integrity: sha512-EmNnYpvFYpxS4j5WFeNmfVVBxqq4RDnEFDBZwNKRfb4pzukcx/hcWtwqFk7Qj0EI4Dk8QGl239MEYwJbAc83tQ==}
|
||||
peerDependencies:
|
||||
'@tanstack/react-query': ^4.32.6
|
||||
dependencies:
|
||||
'@tanstack/query-persist-client-core': 4.32.6
|
||||
'@tanstack/react-query': 4.32.6(react-dom@18.2.0)(react@18.2.0)
|
||||
dev: false
|
||||
|
||||
/@tanstack/react-query@4.32.6(react-dom@18.2.0)(react@18.2.0):
|
||||
resolution: {integrity: sha512-AITu/IKJJJXsHHeXNBy5bclu12t08usMCY0vFC2dh9SP/w6JAk5U9GwfjOIPj3p+ATADZvxQPe8UiCtMLNeQbg==}
|
||||
peerDependencies:
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
react-native: '*'
|
||||
peerDependenciesMeta:
|
||||
react-dom:
|
||||
optional: true
|
||||
react-native:
|
||||
optional: true
|
||||
dependencies:
|
||||
'@tanstack/query-core': 4.32.6
|
||||
react: 18.2.0
|
||||
react-dom: 18.2.0(react@18.2.0)
|
||||
use-sync-external-store: 1.2.0(react@18.2.0)
|
||||
'@tanstack/react-query': 4.36.1(react-dom@18.2.0)(react@18.2.0)
|
||||
dev: false
|
||||
|
||||
/@tanstack/react-query@4.36.1(react-dom@18.2.0)(react@18.2.0):
|
||||
@@ -5620,6 +5606,7 @@ packages:
|
||||
|
||||
/@types/node@20.3.1:
|
||||
resolution: {integrity: sha512-EhcH/wvidPy1WeML3TtYFGR83UzjxeWRen9V402T8aUGYsCHOmfoisV3ZSg03gAFIbLq8TnWOJ0f4cALtnSEUg==}
|
||||
dev: true
|
||||
|
||||
/@types/normalize-package-data@2.4.1:
|
||||
resolution: {integrity: sha512-Gj7cI7z+98M282Tqmp2K5EIsoouUEzbBJhQQzDE3jSIRk6r9gsz0oUokqIUR4u1R3dMHo0pDHM7sNOHyhulypw==}
|
||||
@@ -5681,12 +5668,6 @@ packages:
|
||||
'@types/node': 20.10.5
|
||||
dev: false
|
||||
|
||||
/@types/ws@8.5.6:
|
||||
resolution: {integrity: sha512-8B5EO9jLVCy+B58PLHvLDuOD8DRVMgQzq8d55SjLCOn9kqGyqOvy27exVaTio1q1nX5zLu8/6N0n2ThSxOM6tg==}
|
||||
dependencies:
|
||||
'@types/node': 20.3.1
|
||||
dev: false
|
||||
|
||||
/@typescript-eslint/eslint-plugin@5.60.0(@typescript-eslint/parser@5.60.0)(eslint@8.43.0)(typescript@5.1.3):
|
||||
resolution: {integrity: sha512-78B+anHLF1TI8Jn/cD0Q00TBYdMgjdOn980JfAVa9yw5sop8nyTfVOQAv6LWywkOGLclDBtv5z3oxN4w7jxyNg==}
|
||||
engines: {node: ^12.22.0 || ^14.17.0 || >=16.0.0}
|
||||
@@ -6183,8 +6164,8 @@ packages:
|
||||
pretty-format: 27.5.1
|
||||
dev: true
|
||||
|
||||
/@wagmi/connectors@3.1.10(@types/react@18.2.14)(react@18.2.0)(typescript@5.1.3)(viem@1.12.2):
|
||||
resolution: {integrity: sha512-ZLJC1QaeiZarkF07Cr9mOlVjPO1Lf5TBx+JKBms2y5fUIXlKrxCfQgO/gDCureboI+Us2X3IRI659+XacSGpbA==}
|
||||
/@wagmi/connectors@3.1.11(@types/react@18.2.14)(react@18.2.0)(typescript@5.1.3)(viem@1.20.0):
|
||||
resolution: {integrity: sha512-wzxp9f9PtSUFjDUP/QDjc1t7HON4D8wrVKsw35ejdO8hToDpx1gU9lwH/47Zo/1zExGezQc392sjoHSszYd7OA==}
|
||||
peerDependencies:
|
||||
typescript: '>=5.0.4'
|
||||
viem: '>=0.3.35'
|
||||
@@ -6195,14 +6176,14 @@ packages:
|
||||
'@coinbase/wallet-sdk': 3.7.1
|
||||
'@safe-global/safe-apps-provider': 0.18.1(typescript@5.1.3)
|
||||
'@safe-global/safe-apps-sdk': 8.1.0(typescript@5.1.3)
|
||||
'@walletconnect/ethereum-provider': 2.10.6(@types/react@18.2.14)(react@18.2.0)
|
||||
'@walletconnect/ethereum-provider': 2.11.0(@types/react@18.2.14)(react@18.2.0)
|
||||
'@walletconnect/legacy-provider': 2.0.0
|
||||
'@walletconnect/modal': 2.6.2(@types/react@18.2.14)(react@18.2.0)
|
||||
'@walletconnect/utils': 2.10.2
|
||||
'@walletconnect/utils': 2.11.0
|
||||
abitype: 0.8.7(typescript@5.1.3)
|
||||
eventemitter3: 4.0.7
|
||||
typescript: 5.1.3
|
||||
viem: 1.12.2(typescript@5.1.3)
|
||||
viem: 1.20.0(typescript@5.1.3)
|
||||
transitivePeerDependencies:
|
||||
- '@azure/app-configuration'
|
||||
- '@azure/cosmos'
|
||||
@@ -6225,8 +6206,8 @@ packages:
|
||||
- zod
|
||||
dev: false
|
||||
|
||||
/@wagmi/core@1.4.12(@types/react@18.2.14)(react@18.2.0)(typescript@5.1.3)(viem@1.12.2):
|
||||
resolution: {integrity: sha512-bLcYmmGgjtl3jAGo8X3Sm6oUwsdjbVxFMu9SWnwHdE4S9JdYeWM57dEhQgq8SYul2yQ7yY2/gimBf1Or0Ky3dQ==}
|
||||
/@wagmi/core@1.4.13(@types/react@18.2.14)(react@18.2.0)(typescript@5.1.3)(viem@1.20.0):
|
||||
resolution: {integrity: sha512-ytMCvXbBOgfDu9Qw67279wq/jNEe7EZLjLyekX7ROnvHRADqFr3lwZI6ih41UmtRZAmXAx8Ghyuqy154EjB5mQ==}
|
||||
peerDependencies:
|
||||
typescript: '>=5.0.4'
|
||||
viem: '>=0.3.35'
|
||||
@@ -6234,11 +6215,11 @@ packages:
|
||||
typescript:
|
||||
optional: true
|
||||
dependencies:
|
||||
'@wagmi/connectors': 3.1.10(@types/react@18.2.14)(react@18.2.0)(typescript@5.1.3)(viem@1.12.2)
|
||||
'@wagmi/connectors': 3.1.11(@types/react@18.2.14)(react@18.2.0)(typescript@5.1.3)(viem@1.20.0)
|
||||
abitype: 0.8.7(typescript@5.1.3)
|
||||
eventemitter3: 4.0.7
|
||||
typescript: 5.1.3
|
||||
viem: 1.12.2(typescript@5.1.3)
|
||||
viem: 1.20.0(typescript@5.1.3)
|
||||
zustand: 4.4.7(@types/react@18.2.14)(react@18.2.0)
|
||||
transitivePeerDependencies:
|
||||
- '@azure/app-configuration'
|
||||
@@ -6300,6 +6281,45 @@ packages:
|
||||
- utf-8-validate
|
||||
dev: false
|
||||
|
||||
/@walletconnect/core@2.11.0:
|
||||
resolution: {integrity: sha512-2Tjp5BCevI7dbmqo/OrCjX4tqgMqwJNQLlQAlphqPfvwlF9+tIu6pGcVbSN3U9zyXzWIZCeleqEaWUeSeET4Ew==}
|
||||
dependencies:
|
||||
'@walletconnect/heartbeat': 1.2.1
|
||||
'@walletconnect/jsonrpc-provider': 1.0.13
|
||||
'@walletconnect/jsonrpc-types': 1.0.3
|
||||
'@walletconnect/jsonrpc-utils': 1.0.8
|
||||
'@walletconnect/jsonrpc-ws-connection': 1.0.14
|
||||
'@walletconnect/keyvaluestorage': 1.1.1
|
||||
'@walletconnect/logger': 2.0.1
|
||||
'@walletconnect/relay-api': 1.0.9
|
||||
'@walletconnect/relay-auth': 1.0.4
|
||||
'@walletconnect/safe-json': 1.0.2
|
||||
'@walletconnect/time': 1.0.2
|
||||
'@walletconnect/types': 2.11.0
|
||||
'@walletconnect/utils': 2.11.0
|
||||
events: 3.3.0
|
||||
isomorphic-unfetch: 3.1.0
|
||||
lodash.isequal: 4.5.0
|
||||
uint8arrays: 3.1.1
|
||||
transitivePeerDependencies:
|
||||
- '@azure/app-configuration'
|
||||
- '@azure/cosmos'
|
||||
- '@azure/data-tables'
|
||||
- '@azure/identity'
|
||||
- '@azure/keyvault-secrets'
|
||||
- '@azure/storage-blob'
|
||||
- '@capacitor/preferences'
|
||||
- '@netlify/blobs'
|
||||
- '@planetscale/database'
|
||||
- '@react-native-async-storage/async-storage'
|
||||
- '@upstash/redis'
|
||||
- '@vercel/kv'
|
||||
- bufferutil
|
||||
- encoding
|
||||
- supports-color
|
||||
- utf-8-validate
|
||||
dev: false
|
||||
|
||||
/@walletconnect/crypto@1.0.3:
|
||||
resolution: {integrity: sha512-+2jdORD7XQs76I2Odgr3wwrtyuLUXD/kprNVsjWRhhhdO9Mt6WqVzOPu0/t7OHSmgal8k7SoBQzUc5hu/8zL/g==}
|
||||
dependencies:
|
||||
@@ -6325,18 +6345,18 @@ packages:
|
||||
tslib: 1.14.1
|
||||
dev: false
|
||||
|
||||
/@walletconnect/ethereum-provider@2.10.6(@types/react@18.2.14)(react@18.2.0):
|
||||
resolution: {integrity: sha512-bBQ+yUfxLv8VxNttgNKY7nED35gSVayO/BnLHbNKvyV1gpvSCla5mWB9MsXuQs70MK0g+/qtgRVSrOtdSubaNQ==}
|
||||
/@walletconnect/ethereum-provider@2.11.0(@types/react@18.2.14)(react@18.2.0):
|
||||
resolution: {integrity: sha512-YrTeHVjuSuhlUw7SQ6xBJXDuJ6iAC+RwINm9nVhoKYJSHAy3EVSJZOofMKrnecL0iRMtD29nj57mxAInIBRuZA==}
|
||||
dependencies:
|
||||
'@walletconnect/jsonrpc-http-connection': 1.0.7
|
||||
'@walletconnect/jsonrpc-provider': 1.0.13
|
||||
'@walletconnect/jsonrpc-types': 1.0.3
|
||||
'@walletconnect/jsonrpc-utils': 1.0.8
|
||||
'@walletconnect/modal': 2.6.2(@types/react@18.2.14)(react@18.2.0)
|
||||
'@walletconnect/sign-client': 2.10.6
|
||||
'@walletconnect/types': 2.10.6
|
||||
'@walletconnect/universal-provider': 2.10.6
|
||||
'@walletconnect/utils': 2.10.6
|
||||
'@walletconnect/sign-client': 2.11.0
|
||||
'@walletconnect/types': 2.11.0
|
||||
'@walletconnect/universal-provider': 2.11.0
|
||||
'@walletconnect/utils': 2.11.0
|
||||
events: 3.3.0
|
||||
transitivePeerDependencies:
|
||||
- '@azure/app-configuration'
|
||||
@@ -6604,20 +6624,17 @@ packages:
|
||||
- utf-8-validate
|
||||
dev: false
|
||||
|
||||
/@walletconnect/time@1.0.2:
|
||||
resolution: {integrity: sha512-uzdd9woDcJ1AaBZRhqy5rNC9laqWGErfc4dxA9a87mPdKOgWMD85mcFo9dIYIts/Jwocfwn07EC6EzclKubk/g==}
|
||||
dependencies:
|
||||
tslib: 1.14.1
|
||||
dev: false
|
||||
|
||||
/@walletconnect/types@2.10.2:
|
||||
resolution: {integrity: sha512-luNV+07Wdla4STi9AejseCQY31tzWKQ5a7C3zZZaRK/di+rFaAAb7YW04OP4klE7tw/mJRGPTlekZElmHxO8kQ==}
|
||||
/@walletconnect/sign-client@2.11.0:
|
||||
resolution: {integrity: sha512-H2ukscibBS+6WrzQWh+WyVBqO5z4F5et12JcwobdwgHnJSlqIoZxqnUYYWNCI5rUR5UKsKWaUyto4AE9N5dw4Q==}
|
||||
dependencies:
|
||||
'@walletconnect/core': 2.11.0
|
||||
'@walletconnect/events': 1.0.1
|
||||
'@walletconnect/heartbeat': 1.2.1
|
||||
'@walletconnect/jsonrpc-types': 1.0.3
|
||||
'@walletconnect/keyvaluestorage': 1.1.1
|
||||
'@walletconnect/jsonrpc-utils': 1.0.8
|
||||
'@walletconnect/logger': 2.0.1
|
||||
'@walletconnect/time': 1.0.2
|
||||
'@walletconnect/types': 2.11.0
|
||||
'@walletconnect/utils': 2.11.0
|
||||
events: 3.3.0
|
||||
transitivePeerDependencies:
|
||||
- '@azure/app-configuration'
|
||||
@@ -6632,7 +6649,16 @@ packages:
|
||||
- '@react-native-async-storage/async-storage'
|
||||
- '@upstash/redis'
|
||||
- '@vercel/kv'
|
||||
- bufferutil
|
||||
- encoding
|
||||
- supports-color
|
||||
- utf-8-validate
|
||||
dev: false
|
||||
|
||||
/@walletconnect/time@1.0.2:
|
||||
resolution: {integrity: sha512-uzdd9woDcJ1AaBZRhqy5rNC9laqWGErfc4dxA9a87mPdKOgWMD85mcFo9dIYIts/Jwocfwn07EC6EzclKubk/g==}
|
||||
dependencies:
|
||||
tslib: 1.14.1
|
||||
dev: false
|
||||
|
||||
/@walletconnect/types@2.10.6:
|
||||
@@ -6660,17 +6686,42 @@ packages:
|
||||
- supports-color
|
||||
dev: false
|
||||
|
||||
/@walletconnect/universal-provider@2.10.6:
|
||||
resolution: {integrity: sha512-CEivusqqoD31BhCTKp08DnrccfGjwD9MFjZs5BNRorDteRFE8zVm9LmP6DSiNJCw82ZajGlZThggLQ/BAATfwA==}
|
||||
/@walletconnect/types@2.11.0:
|
||||
resolution: {integrity: sha512-AB5b1lrEbCGHxqS2vqfCkIoODieH+ZAUp9rA1O2ftrhnqDJiJK983Df87JhYhECsQUBHHfALphA8ydER0q+9sw==}
|
||||
dependencies:
|
||||
'@walletconnect/events': 1.0.1
|
||||
'@walletconnect/heartbeat': 1.2.1
|
||||
'@walletconnect/jsonrpc-types': 1.0.3
|
||||
'@walletconnect/keyvaluestorage': 1.1.1
|
||||
'@walletconnect/logger': 2.0.1
|
||||
events: 3.3.0
|
||||
transitivePeerDependencies:
|
||||
- '@azure/app-configuration'
|
||||
- '@azure/cosmos'
|
||||
- '@azure/data-tables'
|
||||
- '@azure/identity'
|
||||
- '@azure/keyvault-secrets'
|
||||
- '@azure/storage-blob'
|
||||
- '@capacitor/preferences'
|
||||
- '@netlify/blobs'
|
||||
- '@planetscale/database'
|
||||
- '@react-native-async-storage/async-storage'
|
||||
- '@upstash/redis'
|
||||
- '@vercel/kv'
|
||||
- supports-color
|
||||
dev: false
|
||||
|
||||
/@walletconnect/universal-provider@2.11.0:
|
||||
resolution: {integrity: sha512-zgJv8jDvIMP4Qse/D9oIRXGdfoNqonsrjPZanQ/CHNe7oXGOBiQND2IIeX+tS0H7uNA0TPvctljCLiIN9nw4eA==}
|
||||
dependencies:
|
||||
'@walletconnect/jsonrpc-http-connection': 1.0.7
|
||||
'@walletconnect/jsonrpc-provider': 1.0.13
|
||||
'@walletconnect/jsonrpc-types': 1.0.3
|
||||
'@walletconnect/jsonrpc-utils': 1.0.8
|
||||
'@walletconnect/logger': 2.0.1
|
||||
'@walletconnect/sign-client': 2.10.6
|
||||
'@walletconnect/types': 2.10.6
|
||||
'@walletconnect/utils': 2.10.6
|
||||
'@walletconnect/sign-client': 2.11.0
|
||||
'@walletconnect/types': 2.11.0
|
||||
'@walletconnect/utils': 2.11.0
|
||||
events: 3.3.0
|
||||
transitivePeerDependencies:
|
||||
- '@azure/app-configuration'
|
||||
@@ -6691,8 +6742,8 @@ packages:
|
||||
- utf-8-validate
|
||||
dev: false
|
||||
|
||||
/@walletconnect/utils@2.10.2:
|
||||
resolution: {integrity: sha512-syxXRpc2yhSknMu3IfiBGobxOY7fLfLTJuw+ppKaeO6WUdZpIit3wfuGOcc0Ms3ZPFCrGfyGOoZsCvgdXtptRg==}
|
||||
/@walletconnect/utils@2.10.6:
|
||||
resolution: {integrity: sha512-oRsWWhN2+hi3aiDXrQEOfysz6FHQJGXLsNQPVt+WIBJplO6Szmdau9dbleD88u1iiT4GKPqE0R9FOYvvPm1H/w==}
|
||||
dependencies:
|
||||
'@stablelib/chacha20poly1305': 1.0.1
|
||||
'@stablelib/hkdf': 1.0.1
|
||||
@@ -6702,7 +6753,7 @@ packages:
|
||||
'@walletconnect/relay-api': 1.0.9
|
||||
'@walletconnect/safe-json': 1.0.2
|
||||
'@walletconnect/time': 1.0.2
|
||||
'@walletconnect/types': 2.10.2
|
||||
'@walletconnect/types': 2.10.6
|
||||
'@walletconnect/window-getters': 1.0.1
|
||||
'@walletconnect/window-metadata': 1.0.1
|
||||
detect-browser: 5.3.0
|
||||
@@ -6724,8 +6775,8 @@ packages:
|
||||
- supports-color
|
||||
dev: false
|
||||
|
||||
/@walletconnect/utils@2.10.6:
|
||||
resolution: {integrity: sha512-oRsWWhN2+hi3aiDXrQEOfysz6FHQJGXLsNQPVt+WIBJplO6Szmdau9dbleD88u1iiT4GKPqE0R9FOYvvPm1H/w==}
|
||||
/@walletconnect/utils@2.11.0:
|
||||
resolution: {integrity: sha512-hxkHPlTlDQILHfIKXlmzgNJau/YcSBC3XHUSuZuKZbNEw3duFT6h6pm3HT/1+j1a22IG05WDsNBuTCRkwss+BQ==}
|
||||
dependencies:
|
||||
'@stablelib/chacha20poly1305': 1.0.1
|
||||
'@stablelib/hkdf': 1.0.1
|
||||
@@ -6735,7 +6786,7 @@ packages:
|
||||
'@walletconnect/relay-api': 1.0.9
|
||||
'@walletconnect/safe-json': 1.0.2
|
||||
'@walletconnect/time': 1.0.2
|
||||
'@walletconnect/types': 2.10.6
|
||||
'@walletconnect/types': 2.11.0
|
||||
'@walletconnect/window-getters': 1.0.1
|
||||
'@walletconnect/window-metadata': 1.0.1
|
||||
detect-browser: 5.3.0
|
||||
@@ -10434,6 +10485,15 @@ packages:
|
||||
engines: {node: '>=12'}
|
||||
dev: true
|
||||
|
||||
/isomorphic-unfetch@3.1.0:
|
||||
resolution: {integrity: sha512-geDJjpoZ8N0kWexiwkX8F9NkTsXhetLPVbZFQ+JTW239QNOwvB0gniuR1Wc6f0AMTn7/mFGyXvHTifrCp/GH8Q==}
|
||||
dependencies:
|
||||
node-fetch: 2.6.12
|
||||
unfetch: 4.2.0
|
||||
transitivePeerDependencies:
|
||||
- encoding
|
||||
dev: false
|
||||
|
||||
/isomorphic-ws@4.0.1(ws@7.5.9):
|
||||
resolution: {integrity: sha512-BhBvN2MBpWTaSHdWRb/bwdZJ1WaehQ2L1KngkCkfLUGF0mAWAT1sQUQacEmQ0jXkFw/czDXPNQSL5u2/Krsz1w==}
|
||||
peerDependencies:
|
||||
@@ -10442,8 +10502,8 @@ packages:
|
||||
ws: 7.5.9
|
||||
dev: false
|
||||
|
||||
/isomorphic-ws@5.0.0(ws@8.13.0):
|
||||
resolution: {integrity: sha512-muId7Zzn9ywDsyXgTIafTry2sV3nySZeUDe6YedVd1Hvuuep5AsIlqK+XefWpYTyJG5e503F2xIuT2lcU6rCSw==}
|
||||
/isows@1.0.3(ws@8.13.0):
|
||||
resolution: {integrity: sha512-2cKei4vlmg2cxEjm3wVSqn8pcoRF/LX/wpifuuNquFO4SQmPwarClT+SUCA2lt+l581tTeZIPIZuIDo2jWN1fg==}
|
||||
peerDependencies:
|
||||
ws: '*'
|
||||
dependencies:
|
||||
@@ -11780,10 +11840,6 @@ packages:
|
||||
resolution: {integrity: sha512-bW9T/uJDPAJB2YNYEpWzE54U5O3MQidXsOyTfnbKYtTtFexRvGzb1waphBN4ZwP6EcIvYYEOwW0b72BpAqydTw==}
|
||||
dev: false
|
||||
|
||||
/node-fetch-native@1.6.1:
|
||||
resolution: {integrity: sha512-bW9T/uJDPAJB2YNYEpWzE54U5O3MQidXsOyTfnbKYtTtFexRvGzb1waphBN4ZwP6EcIvYYEOwW0b72BpAqydTw==}
|
||||
dev: false
|
||||
|
||||
/node-fetch@2.6.12:
|
||||
resolution: {integrity: sha512-C/fGU2E8ToujUivIO0H+tpQ6HWo4eEmchoPIoXtxCrVghxdKq+QOHqEZW7tuP3KlV3bC8FRMO5nMCC7Zm1VP6g==}
|
||||
engines: {node: 4.x || >=6.0.0}
|
||||
@@ -13819,6 +13875,10 @@ packages:
|
||||
pathe: 1.1.1
|
||||
dev: false
|
||||
|
||||
/unfetch@4.2.0:
|
||||
resolution: {integrity: sha512-F9p7yYCn6cIW9El1zi0HI6vqpeIvBsr3dSuRO6Xuppb1u5rXpCPmMvLSyECLhybr9isec8Ohl0hPekMVrEinDA==}
|
||||
dev: false
|
||||
|
||||
/unified@10.1.2:
|
||||
resolution: {integrity: sha512-pUSWAi/RAnVy1Pif2kAoeWNBa3JVrx0MId2LASj8G+7AiHWoKZNTomq6LG326T68U7/e263X6fTdcXIy7XnF7Q==}
|
||||
dependencies:
|
||||
@@ -14172,22 +14232,21 @@ packages:
|
||||
vfile-message: 3.1.4
|
||||
dev: true
|
||||
|
||||
/viem@1.12.2(typescript@5.1.3):
|
||||
resolution: {integrity: sha512-aCaUCyg72ES+jK4s6tVYOMnOt4if71RwzgiUAUpAuaCgvHFfh9DCnwuEfwkxEZLE2vafOsirgJ3fcn7nsDVQoQ==}
|
||||
/viem@1.20.0(typescript@5.1.3):
|
||||
resolution: {integrity: sha512-yPjV9pJr10xi28C/9LEvs5zdZNEMiru3Kz7nufghVYABJAfeSkoZQXb6b23n7MscS7c55JO5nmUI3xKkd9g6Yg==}
|
||||
peerDependencies:
|
||||
typescript: '>=5.0.4'
|
||||
peerDependenciesMeta:
|
||||
typescript:
|
||||
optional: true
|
||||
dependencies:
|
||||
'@adraffy/ens-normalize': 1.9.4
|
||||
'@adraffy/ens-normalize': 1.10.0
|
||||
'@noble/curves': 1.2.0
|
||||
'@noble/hashes': 1.3.2
|
||||
'@scure/bip32': 1.3.2
|
||||
'@scure/bip39': 1.2.1
|
||||
'@types/ws': 8.5.6
|
||||
abitype: 0.9.8(typescript@5.1.3)
|
||||
isomorphic-ws: 5.0.0(ws@8.13.0)
|
||||
isows: 1.0.3(ws@8.13.0)
|
||||
typescript: 5.1.3
|
||||
ws: 8.13.0
|
||||
transitivePeerDependencies:
|
||||
@@ -14357,8 +14416,8 @@ packages:
|
||||
- supports-color
|
||||
dev: true
|
||||
|
||||
/wagmi@1.4.12(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)(typescript@5.1.3)(viem@1.12.2):
|
||||
resolution: {integrity: sha512-QRxpjhdMlZmbYTfn9VQkQMKq+l3kwA1O7tF10vaykPrjbGX+IIlyn72ib9oqW9BfQO7n/Sf/mnVz1zbxRhGPWA==}
|
||||
/wagmi@1.4.13(@types/react@18.2.14)(react-dom@18.2.0)(react@18.2.0)(typescript@5.1.3)(viem@1.20.0):
|
||||
resolution: {integrity: sha512-AScVYFjqNt1wMgL99Bob7MLdhoTZ3XKiOZL5HVBdy4W1sh7QodA3gQ8IsmTuUrQ7oQaTxjiXEhwg7sWNrPBvJA==}
|
||||
peerDependencies:
|
||||
react: '>=17.0.0'
|
||||
typescript: '>=5.0.4'
|
||||
@@ -14368,14 +14427,14 @@ packages:
|
||||
optional: true
|
||||
dependencies:
|
||||
'@tanstack/query-sync-storage-persister': 4.32.6
|
||||
'@tanstack/react-query': 4.32.6(react-dom@18.2.0)(react@18.2.0)
|
||||
'@tanstack/react-query-persist-client': 4.32.6(@tanstack/react-query@4.32.6)
|
||||
'@wagmi/core': 1.4.12(@types/react@18.2.14)(react@18.2.0)(typescript@5.1.3)(viem@1.12.2)
|
||||
'@tanstack/react-query': 4.36.1(react-dom@18.2.0)(react@18.2.0)
|
||||
'@tanstack/react-query-persist-client': 4.32.6(@tanstack/react-query@4.36.1)
|
||||
'@wagmi/core': 1.4.13(@types/react@18.2.14)(react@18.2.0)(typescript@5.1.3)(viem@1.20.0)
|
||||
abitype: 0.8.7(typescript@5.1.3)
|
||||
react: 18.2.0
|
||||
typescript: 5.1.3
|
||||
use-sync-external-store: 1.2.0(react@18.2.0)
|
||||
viem: 1.12.2(typescript@5.1.3)
|
||||
viem: 1.20.0(typescript@5.1.3)
|
||||
transitivePeerDependencies:
|
||||
- '@azure/app-configuration'
|
||||
- '@azure/cosmos'
|
||||
@@ -14754,7 +14813,3 @@ packages:
|
||||
/zwitch@2.0.4:
|
||||
resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
|
||||
dev: true
|
||||
|
||||
settings:
|
||||
autoInstallPeers: true
|
||||
excludeLinksFromLockfile: false
|
||||
|
||||
+12
-12
@@ -579,8 +579,8 @@
|
||||
"endpoints": {
|
||||
"indexers": [
|
||||
{
|
||||
"api": "https://dydx-testnet.imperator.co",
|
||||
"socket": "wss://dydx-testnet.imperator.co"
|
||||
"api": "https://indexer.v4testnet.dydx.exchange",
|
||||
"socket": "wss://indexer.v4testnet.dydx.exchange"
|
||||
}
|
||||
],
|
||||
"validators": [
|
||||
@@ -734,8 +734,8 @@
|
||||
"endpoints": {
|
||||
"indexers": [
|
||||
{
|
||||
"api": "https://dydx-testnet.imperator.co",
|
||||
"socket": "wss://dydx-testnet.imperator.co"
|
||||
"api": "https://indexer.v4testnet.dydx.exchange",
|
||||
"socket": "wss://indexer.v4testnet.dydx.exchange"
|
||||
}
|
||||
],
|
||||
"validators": [
|
||||
@@ -810,8 +810,8 @@
|
||||
"endpoints": {
|
||||
"indexers": [
|
||||
{
|
||||
"api": "https://dydx-testnet.imperator.co",
|
||||
"socket": "wss://dydx-testnet.imperator.co"
|
||||
"api": "https://indexer.v4testnet.dydx.exchange",
|
||||
"socket": "wss://indexer.v4testnet.dydx.exchange"
|
||||
}
|
||||
],
|
||||
"validators": [
|
||||
@@ -886,8 +886,8 @@
|
||||
"endpoints": {
|
||||
"indexers": [
|
||||
{
|
||||
"api": "https://dydx-testnet.imperator.co",
|
||||
"socket": "wss://dydx-testnet.imperator.co"
|
||||
"api": "https://indexer.v4testnet.dydx.exchange",
|
||||
"socket": "wss://indexer.v4testnet.dydx.exchange"
|
||||
}
|
||||
],
|
||||
"validators": [
|
||||
@@ -962,8 +962,8 @@
|
||||
"endpoints": {
|
||||
"indexers": [
|
||||
{
|
||||
"api": "https://dydx-testnet.imperator.co",
|
||||
"socket": "wss://dydx-testnet.imperator.co"
|
||||
"api": "https://indexer.v4testnet.dydx.exchange",
|
||||
"socket": "wss://indexer.v4testnet.dydx.exchange"
|
||||
}
|
||||
],
|
||||
"validators": [
|
||||
@@ -1029,8 +1029,8 @@
|
||||
"endpoints": {
|
||||
"indexers": [
|
||||
{
|
||||
"api": "https://dydx-testnet.imperator.co",
|
||||
"socket": "wss://dydx-testnet.imperator.co"
|
||||
"api": "https://indexer.v4testnet.dydx.exchange",
|
||||
"socket": "wss://indexer.v4testnet.dydx.exchange"
|
||||
}
|
||||
],
|
||||
"validators": [
|
||||
|
||||
@@ -1,16 +0,0 @@
|
||||
import { forwardRef } from 'react';
|
||||
|
||||
type StyleProps = {
|
||||
className?: string;
|
||||
};
|
||||
|
||||
type ElementProps = {
|
||||
width: number | string;
|
||||
height: number | string;
|
||||
};
|
||||
|
||||
export const Canvas = forwardRef<HTMLCanvasElement, ElementProps & StyleProps>(
|
||||
({ className, width, height }, canvasRef) => (
|
||||
<canvas ref={canvasRef} className={className} width={width ?? 0} height={height ?? 0} />
|
||||
)
|
||||
);
|
||||
@@ -118,7 +118,6 @@ export const Tabs = <TabItemsValue extends string>({
|
||||
forceMount={forceMount}
|
||||
$hide={forceMount && currentItem?.value !== value}
|
||||
$withTransitions={withTransitions}
|
||||
asChild={asChild}
|
||||
>
|
||||
{content}
|
||||
</Styled.Content>
|
||||
|
||||
@@ -1,11 +0,0 @@
|
||||
import { useCalculateOrderbookData } from './useCalculateOrderbookData';
|
||||
import { useCenterOrderbook } from './useCenterOrderbook';
|
||||
import { useDrawOrderbook } from './useDrawOrderbook';
|
||||
import { useSpreadRowScrollListener } from './useSpreadRowScrollListener';
|
||||
|
||||
export {
|
||||
useCalculateOrderbookData,
|
||||
useCenterOrderbook,
|
||||
useDrawOrderbook,
|
||||
useSpreadRowScrollListener,
|
||||
};
|
||||
@@ -1,55 +0,0 @@
|
||||
import { useMemo } from 'react';
|
||||
import { useSelector, shallowEqual } from 'react-redux';
|
||||
import { OrderSide } from '@dydxprotocol/v4-client-js';
|
||||
|
||||
import { OrderbookLine } from '@/constants/abacus';
|
||||
|
||||
import { getCurrentMarketOrderbook } from '@/state/perpetualsSelectors';
|
||||
import { getSubaccountOpenOrdersBySideAndPrice } from '@/state/accountSelectors';
|
||||
|
||||
import type { RowData } from '@/views/Orderbook/OrderbookRow';
|
||||
|
||||
import { MustBigNumber } from '@/lib/numbers';
|
||||
|
||||
export const useCalculateOrderbookData = ({ maxRowsPerSide }: { maxRowsPerSide: number }) => {
|
||||
const orderbook = useSelector(getCurrentMarketOrderbook, shallowEqual);
|
||||
|
||||
const openOrdersBySideAndPrice =
|
||||
useSelector(getSubaccountOpenOrdersBySideAndPrice, shallowEqual) || {};
|
||||
|
||||
return useMemo(() => {
|
||||
const asks = (orderbook?.asks?.toArray() ?? [])
|
||||
.map(
|
||||
(row: OrderbookLine) =>
|
||||
({
|
||||
side: 'ask',
|
||||
mine: openOrdersBySideAndPrice[OrderSide.SELL]?.[row.price]?.size,
|
||||
...row,
|
||||
} as RowData)
|
||||
)
|
||||
.slice(0, maxRowsPerSide);
|
||||
|
||||
const bids = (orderbook?.bids?.toArray() ?? [])
|
||||
.map(
|
||||
(row: OrderbookLine) =>
|
||||
({
|
||||
side: 'bid',
|
||||
mine: openOrdersBySideAndPrice[OrderSide.BUY]?.[row.price]?.size,
|
||||
...row,
|
||||
} as RowData)
|
||||
)
|
||||
.slice(0, maxRowsPerSide);
|
||||
|
||||
const spread =
|
||||
asks[0] && bids[0] ? MustBigNumber(asks[0]?.price ?? 0).minus(bids[0]?.price ?? 0) : null;
|
||||
|
||||
const spreadPercent = orderbook?.spreadPercent;
|
||||
|
||||
const histogramRange = Math.max(
|
||||
Number(bids[bids.length - 1]?.depth),
|
||||
Number(asks[asks.length - 1]?.depth)
|
||||
);
|
||||
|
||||
return { asks, bids, spread, spreadPercent, histogramRange, hasOrderbook: !!orderbook };
|
||||
}, [orderbook, openOrdersBySideAndPrice]);
|
||||
};
|
||||
@@ -1,22 +0,0 @@
|
||||
import { type RefObject, useEffect } from 'react';
|
||||
|
||||
type ElementProps = {
|
||||
marketId: string;
|
||||
orderbookRef: RefObject<HTMLDivElement>;
|
||||
};
|
||||
|
||||
/**
|
||||
* @description Center Orderbook on load and market change
|
||||
* Assumed that the two sides are the same height
|
||||
*/
|
||||
export const useCenterOrderbook = ({ marketId, orderbookRef }: ElementProps) => {
|
||||
const orderbookEl = orderbookRef.current;
|
||||
const { clientHeight, scrollHeight } = orderbookEl ?? {};
|
||||
const shouldScroll = !!scrollHeight && !!clientHeight && scrollHeight > clientHeight;
|
||||
|
||||
useEffect(() => {
|
||||
if (orderbookEl && shouldScroll) {
|
||||
orderbookEl.scrollTo({ top: (scrollHeight - clientHeight) / 2 });
|
||||
}
|
||||
}, [shouldScroll, marketId]);
|
||||
};
|
||||
@@ -1,380 +0,0 @@
|
||||
import { useCallback, useEffect, useMemo, useRef } from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
|
||||
import type { Nullable } from '@/constants/abacus';
|
||||
import { SMALL_USD_DECIMALS, TOKEN_DECIMALS } from '@/constants/numbers';
|
||||
import { useLocaleSeparators } from '@/hooks/useLocaleSeparators';
|
||||
|
||||
import { getAppTheme } from '@/state/configsSelectors';
|
||||
|
||||
import { ROW_HEIGHT, ROW_PADDING_RIGHT, type RowData } from '@/views/Orderbook/OrderbookRow';
|
||||
|
||||
import { MustBigNumber } from '@/lib/numbers';
|
||||
import { log } from '@/lib/telemetry';
|
||||
import { Colors } from '@/styles/colors';
|
||||
|
||||
type ElementProps = {
|
||||
data: RowData[];
|
||||
histogramRange: number;
|
||||
hoveredRow?: number;
|
||||
stepSizeDecimals: Nullable<number>;
|
||||
tickSizeDecimals: Nullable<number>;
|
||||
};
|
||||
|
||||
type StyleProps = {
|
||||
histogramSide?: 'left' | 'right';
|
||||
};
|
||||
|
||||
export const useDrawOrderbook = ({
|
||||
data,
|
||||
histogramRange,
|
||||
stepSizeDecimals,
|
||||
tickSizeDecimals,
|
||||
histogramSide = 'right',
|
||||
hoveredRow,
|
||||
}: ElementProps & StyleProps) => {
|
||||
const theme = useSelector(getAppTheme);
|
||||
const canvasRef = useRef<HTMLCanvasElement>(null);
|
||||
const hoverCanvasRef = useRef<HTMLCanvasElement>(null);
|
||||
const canvas = canvasRef.current;
|
||||
const hoverCanvas = hoverCanvasRef.current;
|
||||
|
||||
/**
|
||||
* to === 'right' to === 'left'
|
||||
* |===================| |===================|
|
||||
* bar: a b c d
|
||||
* a = 0
|
||||
* b = depthBarWidth
|
||||
* c = canvasWidth - depthBarWidth
|
||||
* d = canvasWidth
|
||||
*
|
||||
*/
|
||||
const getXYValues = ({
|
||||
barWidth,
|
||||
canvasWidth,
|
||||
gradientMultiplier,
|
||||
}: {
|
||||
barWidth: number;
|
||||
canvasWidth: number;
|
||||
gradientMultiplier: number;
|
||||
}) => {
|
||||
const gradient = {
|
||||
x1: Math.floor(histogramSide === 'left' ? barWidth : canvasWidth - barWidth),
|
||||
x2: Math.floor(
|
||||
histogramSide === 'left'
|
||||
? 0 - (canvasWidth * gradientMultiplier - canvasWidth)
|
||||
: canvasWidth * gradientMultiplier
|
||||
),
|
||||
};
|
||||
const bar = {
|
||||
x1: Math.floor(histogramSide === 'left' ? 0 : canvasWidth - barWidth),
|
||||
x2: Math.floor(
|
||||
histogramSide === 'left' ? Math.min(barWidth, canvasWidth - 2) : canvasWidth - 2
|
||||
),
|
||||
};
|
||||
|
||||
return {
|
||||
bar,
|
||||
gradient,
|
||||
};
|
||||
};
|
||||
|
||||
const getYFromIndex = (idx: number, type: 'text' | 'bar' | 'rect') => {
|
||||
return (
|
||||
idx * ROW_HEIGHT +
|
||||
{
|
||||
text: ROW_HEIGHT / 2, // center of the row
|
||||
bar: 1, // 1px off the top and bottom so the histograms do not touch
|
||||
rect: 0,
|
||||
}[type]
|
||||
);
|
||||
};
|
||||
|
||||
// Get X value by column, colIdx starts at 0
|
||||
const getXByColumn = ({ canvasWidth, colIdx }: { canvasWidth: number; colIdx: number }) => {
|
||||
return Math.floor(((colIdx + 1) * canvasWidth) / 3);
|
||||
};
|
||||
|
||||
const drawBars = ({
|
||||
value,
|
||||
canvasWidth,
|
||||
ctx,
|
||||
gradientMultiplier,
|
||||
histogramAccentColor,
|
||||
idx,
|
||||
histogramSide,
|
||||
}: {
|
||||
value: Nullable<number>;
|
||||
canvasWidth: number;
|
||||
ctx: CanvasRenderingContext2D;
|
||||
gradientMultiplier: number;
|
||||
histogramAccentColor: string;
|
||||
idx: number;
|
||||
histogramSide: 'left' | 'right';
|
||||
}) => {
|
||||
const histogramBarWidth = canvasWidth - 2;
|
||||
const barWidth = value ? (value / histogramRange) * histogramBarWidth : 0;
|
||||
const { gradient, bar } = getXYValues({ barWidth, canvasWidth, gradientMultiplier });
|
||||
|
||||
let linearGradient;
|
||||
|
||||
try {
|
||||
linearGradient = ctx.createLinearGradient(
|
||||
gradient.x1,
|
||||
ROW_HEIGHT / 2,
|
||||
gradient.x2,
|
||||
ROW_HEIGHT / 2
|
||||
);
|
||||
|
||||
linearGradient.addColorStop(0, histogramAccentColor);
|
||||
linearGradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
|
||||
ctx.fillStyle = linearGradient;
|
||||
} catch (err) {
|
||||
log('Orderbook/createLinearGradient', err, {
|
||||
x1: gradient.x1,
|
||||
y1: ROW_HEIGHT / 2,
|
||||
x2: gradient.x2,
|
||||
y2: ROW_HEIGHT / 2,
|
||||
});
|
||||
|
||||
ctx.fillStyle = 'rgba(0, 0, 0, 0)';
|
||||
}
|
||||
|
||||
ctx.beginPath();
|
||||
|
||||
ctx.roundRect
|
||||
? ctx.roundRect?.(
|
||||
bar.x1,
|
||||
getYFromIndex(idx, 'bar'),
|
||||
bar.x2,
|
||||
ROW_HEIGHT - 2,
|
||||
histogramSide === 'right' ? [2, 0, 0, 2] : [0, 2, 2, 0]
|
||||
)
|
||||
: ctx.rect(bar.x1, getYFromIndex(idx, 'bar'), bar.x2, ROW_HEIGHT - 2);
|
||||
ctx.fill();
|
||||
};
|
||||
|
||||
const { decimal: LOCALE_DECIMAL_SEPARATOR } = useLocaleSeparators();
|
||||
|
||||
const formatOptions = {
|
||||
decimalSeparator: LOCALE_DECIMAL_SEPARATOR,
|
||||
};
|
||||
|
||||
const drawText = useCallback(
|
||||
({
|
||||
ctx,
|
||||
canvasWidth,
|
||||
idx,
|
||||
size,
|
||||
price,
|
||||
mine,
|
||||
animationType,
|
||||
}: {
|
||||
ctx: CanvasRenderingContext2D;
|
||||
canvasWidth: number;
|
||||
idx: number;
|
||||
size?: Nullable<number>;
|
||||
price?: Nullable<number>;
|
||||
mine?: Nullable<number>;
|
||||
animationType?: 'remove' | 'add';
|
||||
}) => {
|
||||
const y = getYFromIndex(idx, 'text');
|
||||
const rectY = getYFromIndex(idx, 'rect');
|
||||
|
||||
let startTime: number;
|
||||
let textColor: string = Colors[theme].text2;
|
||||
const animateColor = (timestamp: number) => {
|
||||
if (!startTime) startTime = timestamp;
|
||||
const animationTime = timestamp - startTime;
|
||||
|
||||
// Linear transition for demonstration purposes
|
||||
textColor = animationType
|
||||
? {
|
||||
add: Colors[theme].green,
|
||||
remove: Colors[theme].red,
|
||||
}[animationType]
|
||||
: Colors[theme].text2;
|
||||
|
||||
if (animationTime < 500) {
|
||||
// Continue the animation for 500ms (adjust as needed)
|
||||
requestAnimationFrame(animateColor);
|
||||
} else {
|
||||
textColor = Colors[theme].text2;
|
||||
}
|
||||
|
||||
if (animationType) {
|
||||
// TODO: Clear rect and redraw text
|
||||
// ctx.clearRect(0, rectY, canvasWidth, rectY + ROW_HEIGHT);
|
||||
}
|
||||
};
|
||||
|
||||
requestAnimationFrame(animateColor);
|
||||
|
||||
// Size text
|
||||
if (size) {
|
||||
ctx.fillStyle = textColor;
|
||||
ctx.fillText(
|
||||
MustBigNumber(size).toFormat(stepSizeDecimals ?? TOKEN_DECIMALS, formatOptions),
|
||||
getXByColumn({ canvasWidth, colIdx: 0 }) - ROW_PADDING_RIGHT,
|
||||
y
|
||||
);
|
||||
}
|
||||
|
||||
// Price text
|
||||
if (price) {
|
||||
ctx.fillStyle = textColor;
|
||||
ctx.fillText(
|
||||
MustBigNumber(price).toFormat(tickSizeDecimals ?? SMALL_USD_DECIMALS, formatOptions),
|
||||
getXByColumn({ canvasWidth, colIdx: 1 }) - ROW_PADDING_RIGHT,
|
||||
y
|
||||
);
|
||||
}
|
||||
|
||||
// Mine text
|
||||
if (mine) {
|
||||
ctx.fillStyle = Colors[theme].text2;
|
||||
ctx.fillText(
|
||||
MustBigNumber(mine).toFormat(stepSizeDecimals ?? TOKEN_DECIMALS, formatOptions),
|
||||
getXByColumn({ canvasWidth, colIdx: 2 }) - ROW_PADDING_RIGHT,
|
||||
y
|
||||
);
|
||||
}
|
||||
},
|
||||
[theme, LOCALE_DECIMAL_SEPARATOR, tickSizeDecimals, stepSizeDecimals]
|
||||
);
|
||||
|
||||
/**
|
||||
* Scale canvas using device pixel ratio to unblur drawn text
|
||||
* @returns adjusted canvas width used in coordinates for drawing
|
||||
**/
|
||||
const canvasWidth = useMemo(() => {
|
||||
const devicePixelRatio = window.devicePixelRatio || 1;
|
||||
|
||||
if (!canvas || !hoverCanvas) return 300 / devicePixelRatio;
|
||||
|
||||
const ctx = canvas.getContext('2d');
|
||||
const hoverCtx = hoverCanvas.getContext('2d');
|
||||
|
||||
const backingStoreRatio =
|
||||
// @ts-ignore
|
||||
ctx.webkitBackingStorePixelRatio ||
|
||||
// @ts-ignore
|
||||
ctx.mozBackingStorePixelRatio ||
|
||||
// @ts-ignore
|
||||
ctx.msBackingStorePixelRatio ||
|
||||
// @ts-ignore
|
||||
ctx.oBackingStorePixelRatio ||
|
||||
// @ts-ignore
|
||||
ctx.backingStorePixelRatio ||
|
||||
1;
|
||||
|
||||
const ratio = devicePixelRatio / backingStoreRatio;
|
||||
canvas.width = canvas.offsetWidth * ratio;
|
||||
canvas.height = canvas.offsetHeight * ratio;
|
||||
hoverCanvas.width = hoverCanvas.offsetWidth * ratio;
|
||||
hoverCanvas.height = hoverCanvas.offsetHeight * ratio;
|
||||
|
||||
if (hoverCtx) {
|
||||
hoverCtx.scale(ratio, ratio);
|
||||
}
|
||||
|
||||
if (ctx) {
|
||||
ctx.scale(ratio, ratio);
|
||||
ctx.font = `12.5px Satoshi`;
|
||||
ctx.textAlign = 'right';
|
||||
ctx.textBaseline = 'middle';
|
||||
ctx.imageSmoothingQuality = 'high';
|
||||
}
|
||||
|
||||
return canvas.width / ratio;
|
||||
}, [canvas, hoverCanvas]);
|
||||
|
||||
//Handle Row Hover
|
||||
const lastHoveredRowRef = useRef<number>();
|
||||
const lastHoveredRow = lastHoveredRowRef.current;
|
||||
useEffect(() => {
|
||||
const hoverCtx = hoverCanvas?.getContext('2d');
|
||||
|
||||
if (!!!hoverCtx) return;
|
||||
|
||||
if (hoveredRow !== lastHoveredRow) {
|
||||
const y = getYFromIndex(lastHoveredRow ?? 0, 'rect');
|
||||
hoverCtx.clearRect(0, y, canvasWidth, ROW_HEIGHT);
|
||||
lastHoveredRowRef.current = hoveredRow;
|
||||
}
|
||||
|
||||
if (hoveredRow !== undefined) {
|
||||
hoverCtx.fillStyle = 'rgba(255, 255, 255, 0.02)';
|
||||
hoverCtx.fillRect(0, hoveredRow * 20, canvasWidth, 20);
|
||||
}
|
||||
}, [lastHoveredRow, hoveredRow]);
|
||||
|
||||
// Row Removal Animation state
|
||||
const previousDataRef = useRef<{
|
||||
[key: string]: number;
|
||||
}>(Object.fromEntries(data.map((row: RowData) => [row.price, row.size])));
|
||||
|
||||
//Update histograms and row contents on data change
|
||||
useEffect(() => {
|
||||
const ctx = canvas?.getContext('2d');
|
||||
|
||||
if (!canvas || !ctx) return;
|
||||
|
||||
// Clear canvas before redraw
|
||||
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
|
||||
|
||||
// Draw histograms
|
||||
data.forEach(({ depth, mine, price, size, side }, idx) => {
|
||||
const histogramAccentColor =
|
||||
side === 'bid' ? `hsla(159, 67%, 39%, 0.15)` : `hsla(360, 73%, 61%, 0.15)`;
|
||||
|
||||
// Depth Bar
|
||||
drawBars({
|
||||
value: depth,
|
||||
canvasWidth,
|
||||
ctx,
|
||||
gradientMultiplier: 1.3,
|
||||
histogramAccentColor,
|
||||
idx,
|
||||
histogramSide,
|
||||
});
|
||||
|
||||
// Size Bar
|
||||
drawBars({
|
||||
value: size,
|
||||
canvasWidth,
|
||||
ctx,
|
||||
gradientMultiplier: 5,
|
||||
histogramAccentColor,
|
||||
idx,
|
||||
histogramSide,
|
||||
});
|
||||
|
||||
const isNew = !previousDataRef.current[price];
|
||||
const wasRemoved = previousDataRef.current[price] && !data.find((row) => row.price === price);
|
||||
|
||||
// Size, Price, Mine
|
||||
drawText({
|
||||
ctx,
|
||||
canvasWidth,
|
||||
idx,
|
||||
size,
|
||||
price,
|
||||
mine,
|
||||
animationType: isNew ? 'add' : wasRemoved ? 'remove' : undefined,
|
||||
});
|
||||
});
|
||||
|
||||
previousDataRef.current = Object.fromEntries(data.map((row: RowData) => [row.price, row.size]));
|
||||
}, [
|
||||
canvasWidth,
|
||||
data,
|
||||
drawText,
|
||||
histogramRange,
|
||||
stepSizeDecimals,
|
||||
tickSizeDecimals,
|
||||
histogramSide,
|
||||
]);
|
||||
|
||||
return { canvasRef, hoverCanvasRef };
|
||||
};
|
||||
@@ -1,39 +0,0 @@
|
||||
import { type RefObject, useEffect, useState, Dispatch } from 'react';
|
||||
|
||||
export const useSpreadRowScrollListener = ({
|
||||
orderbookRef,
|
||||
spreadRowRef,
|
||||
}: {
|
||||
orderbookRef: RefObject<HTMLDivElement>;
|
||||
spreadRowRef: RefObject<HTMLDivElement>;
|
||||
}) => {
|
||||
const [displaySide, setDisplaySide] = useState<string>();
|
||||
|
||||
useEffect(() => {
|
||||
const onScroll = () => {
|
||||
if (spreadRowRef.current && orderbookRef.current) {
|
||||
const { clientHeight } = orderbookRef.current;
|
||||
const parent = orderbookRef.current.getBoundingClientRect();
|
||||
const spread = spreadRowRef.current.getBoundingClientRect();
|
||||
const spreadTop = spread.top - parent.top;
|
||||
const spreadBottom = spread.bottom - parent.top;
|
||||
|
||||
if (spreadBottom > clientHeight) {
|
||||
setDisplaySide('bottom');
|
||||
} else if (spreadTop < 0) {
|
||||
setDisplaySide('top');
|
||||
} else {
|
||||
setDisplaySide(undefined);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
orderbookRef.current?.addEventListener('scroll', onScroll, false);
|
||||
|
||||
return () => {
|
||||
orderbookRef.current?.removeEventListener('scroll', onScroll, false);
|
||||
};
|
||||
}, [orderbookRef.current, spreadRowRef.current]);
|
||||
|
||||
return displaySide;
|
||||
};
|
||||
@@ -26,6 +26,8 @@ import {
|
||||
fantomTestnet,
|
||||
celo,
|
||||
celoAlfajores,
|
||||
scroll,
|
||||
kava,
|
||||
} from 'viem/chains';
|
||||
|
||||
import { alchemyProvider } from 'wagmi/providers/alchemy';
|
||||
@@ -78,6 +80,8 @@ export const WAGMI_SUPPORTED_CHAINS: Chain[] = [
|
||||
fantomTestnet,
|
||||
celo,
|
||||
celoAlfajores,
|
||||
scroll,
|
||||
kava,
|
||||
];
|
||||
|
||||
const { chains, publicClient, webSocketPublicClient } = configureChains(
|
||||
|
||||
@@ -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();
|
||||
@@ -71,7 +73,7 @@ const EstimatedRewards = () => {
|
||||
queryKey: `launch_incentives_rewards_${dydxAddress ?? ''}`,
|
||||
queryFn: async () => {
|
||||
if (!dydxAddress) return undefined;
|
||||
const resp = await fetch(`https://cloud.chaoslabs.co/query/api/dydx/points/${dydxAddress}`);
|
||||
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 +87,7 @@ const EstimatedRewards = () => {
|
||||
<Styled.Season>
|
||||
{stringGetter({
|
||||
key: STRING_KEYS.LAUNCH_INCENTIVES_SEASON_NUM,
|
||||
params: {
|
||||
SEASON_NUMBER: 1,
|
||||
},
|
||||
params: { SEASON_NUMBER },
|
||||
})}
|
||||
</Styled.Season>
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
import { useState } from 'react';
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import styled, { AnyStyledComponent } from 'styled-components';
|
||||
|
||||
import { TradeLayouts } from '@/constants/layout';
|
||||
import { STRING_KEYS } from '@/constants/localization';
|
||||
@@ -7,9 +9,11 @@ import { useStringGetter } from '@/hooks';
|
||||
|
||||
import { Tabs } from '@/components/Tabs';
|
||||
|
||||
import { Orderbook } from '@/views/Orderbook';
|
||||
import { Orderbook, orderbookMixins, OrderbookScrollBehavior } from '@/views/tables/Orderbook';
|
||||
import { LiveTrades } from '@/views/tables/LiveTrades';
|
||||
|
||||
import { getCurrentMarketId } from '@/state/perpetualsSelectors';
|
||||
|
||||
enum Tab {
|
||||
Orderbook = 'Orderbook',
|
||||
Trades = 'Trades',
|
||||
@@ -23,13 +27,22 @@ const HISTOGRAM_SIDES_BY_LAYOUT = {
|
||||
|
||||
export const VerticalPanel = ({ tradeLayout }: { tradeLayout: TradeLayouts }) => {
|
||||
const stringGetter = useStringGetter();
|
||||
|
||||
const [value, setValue] = useState(Tab.Orderbook);
|
||||
const [scrollBehavior, setScrollBehavior] = useState<OrderbookScrollBehavior>('snapToCenter');
|
||||
|
||||
const marketId = useSelector(getCurrentMarketId);
|
||||
|
||||
useEffect(() => {
|
||||
setScrollBehavior('snapToCenter');
|
||||
}, [marketId]);
|
||||
|
||||
return (
|
||||
<Tabs
|
||||
<Styled.Tabs
|
||||
fullWidthTabs
|
||||
value={value}
|
||||
onValueChange={(value: Tab) => {
|
||||
setScrollBehavior('snapToCenter');
|
||||
setValue(value);
|
||||
}}
|
||||
items={[
|
||||
@@ -37,7 +50,6 @@ export const VerticalPanel = ({ tradeLayout }: { tradeLayout: TradeLayouts }) =>
|
||||
content: <Orderbook histogramSide={HISTOGRAM_SIDES_BY_LAYOUT[tradeLayout]} />,
|
||||
label: stringGetter({ key: STRING_KEYS.ORDERBOOK_SHORT }),
|
||||
value: Tab.Orderbook,
|
||||
asChild: true,
|
||||
},
|
||||
{
|
||||
content: <LiveTrades histogramSide={HISTOGRAM_SIDES_BY_LAYOUT[tradeLayout]} />,
|
||||
@@ -45,7 +57,26 @@ export const VerticalPanel = ({ tradeLayout }: { tradeLayout: TradeLayouts }) =>
|
||||
value: Tab.Trades,
|
||||
},
|
||||
]}
|
||||
onWheel={() => setScrollBehavior('free')}
|
||||
withTransitions={false}
|
||||
isShowingOrderbook={value === Tab.Orderbook}
|
||||
scrollBehavior={scrollBehavior}
|
||||
// style={{
|
||||
// scrollSnapType: {
|
||||
// 'snapToCenter': 'y mandatory',
|
||||
// 'free': 'none',
|
||||
// 'snapToCenterUnlessHovered': 'none',
|
||||
// }[scrollBehavior],
|
||||
// }}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const Styled: Record<string, AnyStyledComponent> = {};
|
||||
|
||||
Styled.Tabs = styled(Tabs)<{
|
||||
isShowingOrderbook: boolean;
|
||||
scrollBehavior: OrderbookScrollBehavior;
|
||||
}>`
|
||||
${orderbookMixins.scrollArea}
|
||||
`;
|
||||
|
||||
@@ -114,8 +114,8 @@ export const MarketDetails: React.FC = () => {
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'base-initial-margin-fraction',
|
||||
label: stringGetter({ key: STRING_KEYS.BASE_INITIAL_MARGIN_FRACTION }),
|
||||
key: 'initial-margin-fraction',
|
||||
label: stringGetter({ key: STRING_KEYS.INITIAL_MARGIN_FRACTION }),
|
||||
tooltip: 'initial-margin-fraction',
|
||||
value: <Output useGrouping value={initialMarginFraction} type={OutputType.SmallPercent} />,
|
||||
},
|
||||
|
||||
@@ -1,317 +0,0 @@
|
||||
import { useCallback, useMemo, useRef, useState } from 'react';
|
||||
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
|
||||
import styled, { css } from 'styled-components';
|
||||
|
||||
import { Nullable } from '@/constants/abacus';
|
||||
import { STRING_KEYS } from '@/constants/localization';
|
||||
|
||||
import { useBreakpoints, useStringGetter } from '@/hooks';
|
||||
import {
|
||||
useCalculateOrderbookData,
|
||||
useCenterOrderbook,
|
||||
useDrawOrderbook,
|
||||
useSpreadRowScrollListener,
|
||||
} from '@/hooks/orderbook';
|
||||
|
||||
import { calculateCanViewAccount } from '@/state/accountCalculators';
|
||||
import { getCurrentMarketAssetData } from '@/state/assetsSelectors';
|
||||
import { getCurrentMarketConfig } from '@/state/perpetualsSelectors';
|
||||
import { setTradeFormInputs } from '@/state/inputs';
|
||||
import { getCurrentInput } from '@/state/inputsSelectors';
|
||||
|
||||
import { Canvas } from '@/components/Canvas';
|
||||
import { LoadingSpace } from '@/components/Loading/LoadingSpinner';
|
||||
import { Tag } from '@/components/Tag';
|
||||
|
||||
import { ROW_HEIGHT, Row, type RowData } from './Orderbook/OrderbookRow';
|
||||
import { SpreadRow } from './Orderbook/SpreadRow';
|
||||
import { Output, OutputType } from '@/components/Output';
|
||||
|
||||
const ORDERBOOK_MAX_ROWS_PER_SIDE = 35;
|
||||
|
||||
type ElementProps = {
|
||||
maxRowsPerSide?: number;
|
||||
layout?: 'vertical' | 'horizontal';
|
||||
};
|
||||
|
||||
type StyleProps = {
|
||||
hideHeader?: boolean;
|
||||
histogramSide?: 'left' | 'right';
|
||||
className?: string;
|
||||
};
|
||||
|
||||
const getEmptyRow = (side: 'bid' | 'ask') => ({
|
||||
side,
|
||||
size: undefined,
|
||||
price: undefined,
|
||||
offset: 0,
|
||||
depth: undefined,
|
||||
});
|
||||
|
||||
export const Orderbook = ({
|
||||
histogramSide,
|
||||
maxRowsPerSide = ORDERBOOK_MAX_ROWS_PER_SIDE,
|
||||
}: ElementProps & StyleProps) => {
|
||||
const dispatch = useDispatch();
|
||||
const stringGetter = useStringGetter();
|
||||
const { isTablet } = useBreakpoints();
|
||||
|
||||
const showMineColumn = useSelector(calculateCanViewAccount) && !isTablet;
|
||||
const currentInput = useSelector(getCurrentInput);
|
||||
const { id = '' } = useSelector(getCurrentMarketAssetData, shallowEqual) ?? {};
|
||||
const { stepSizeDecimals, tickSizeDecimals } =
|
||||
useSelector(getCurrentMarketConfig, shallowEqual) ?? {};
|
||||
|
||||
const { asks, bids, spread, spreadPercent, histogramRange, hasOrderbook } =
|
||||
useCalculateOrderbookData({
|
||||
maxRowsPerSide,
|
||||
});
|
||||
|
||||
const { askLevels, asksSlice, bidLevels, bidsSlice, numRows } = useMemo(() => {
|
||||
const bidsSlice = bids.slice(0, maxRowsPerSide).reverse();
|
||||
const asksSlice = asks.slice(0, maxRowsPerSide);
|
||||
|
||||
const numRows = maxRowsPerSide; // Math.max(bidsSlice.length, asksSlice.length);
|
||||
|
||||
if (asksSlice.length < numRows) {
|
||||
const emptyRows = new Array(numRows - asksSlice.length).fill(getEmptyRow('ask'));
|
||||
asksSlice.push(...emptyRows);
|
||||
}
|
||||
|
||||
if (bidsSlice.length < numRows) {
|
||||
const emptyRows = new Array(numRows - bidsSlice.length).fill(getEmptyRow('bid'));
|
||||
bidsSlice.unshift(...emptyRows);
|
||||
}
|
||||
|
||||
const askLevels = new Set(asksSlice.map(({ price }: { price: number }) => price));
|
||||
const bidLevels = new Set(bidsSlice.map(({ price }: { price: number }) => price));
|
||||
|
||||
return { askLevels, asksSlice, bidLevels, bidsSlice, numRows };
|
||||
}, [asks, bids]);
|
||||
|
||||
const orderbookRef = useRef<HTMLDivElement>(null);
|
||||
useCenterOrderbook({ orderbookRef, marketId: id });
|
||||
|
||||
/**
|
||||
* Display top or bottom spreadRow when center spreadRow is off screen
|
||||
*/
|
||||
const spreadRowRef = useRef<HTMLDivElement>(null);
|
||||
|
||||
const displaySide = useSpreadRowScrollListener({
|
||||
orderbookRef,
|
||||
spreadRowRef,
|
||||
});
|
||||
|
||||
/**
|
||||
* Row action and hover
|
||||
*/
|
||||
const onRowAction = useCallback(
|
||||
(price: Nullable<number>) => {
|
||||
if (currentInput === 'trade' && price) {
|
||||
dispatch(setTradeFormInputs({ limitPriceInput: price?.toString() }));
|
||||
}
|
||||
},
|
||||
[currentInput]
|
||||
);
|
||||
|
||||
const [hoveredRow, setHoveredRow] = useState<{
|
||||
idx: number;
|
||||
side: 'bid' | 'ask';
|
||||
}>();
|
||||
|
||||
const { canvasRef: asksCanvasRef, hoverCanvasRef: asksHoverRef } = useDrawOrderbook({
|
||||
data: asksSlice.reverse(),
|
||||
histogramRange,
|
||||
stepSizeDecimals,
|
||||
tickSizeDecimals,
|
||||
hoveredRow: hoveredRow?.side === 'ask' ? hoveredRow.idx : undefined,
|
||||
histogramSide,
|
||||
});
|
||||
|
||||
const { canvasRef: bidsCanvasRef, hoverCanvasRef: bidsHoverRef } = useDrawOrderbook({
|
||||
data: bidsSlice.reverse(),
|
||||
histogramRange,
|
||||
stepSizeDecimals,
|
||||
tickSizeDecimals,
|
||||
hoveredRow: hoveredRow?.side === 'bid' ? hoveredRow.idx : undefined,
|
||||
histogramSide,
|
||||
});
|
||||
|
||||
return (
|
||||
<$OrderbookContainer>
|
||||
<$OrderbookContent isLoading={!hasOrderbook}>
|
||||
<$Header>
|
||||
<span>
|
||||
{stringGetter({ key: STRING_KEYS.SIZE })} {id && <Tag>{id}</Tag>}
|
||||
</span>
|
||||
<span>
|
||||
{stringGetter({ key: STRING_KEYS.PRICE })} <Tag>USD</Tag>
|
||||
</span>
|
||||
<span>{showMineColumn && stringGetter({ key: STRING_KEYS.MINE })}</span>
|
||||
</$Header>
|
||||
{displaySide === 'top' && (
|
||||
<$SpreadRow
|
||||
side="top"
|
||||
spread={spread}
|
||||
spreadPercent={spreadPercent}
|
||||
tickSizeDecimals={tickSizeDecimals}
|
||||
/>
|
||||
)}
|
||||
<$OrderbookWrapper ref={orderbookRef}>
|
||||
{!hasOrderbook ? (
|
||||
<LoadingSpace id="orderbook" />
|
||||
) : (
|
||||
<>
|
||||
<$OrderbookSideContainer
|
||||
numRows={numRows}
|
||||
side="ask"
|
||||
onMouseLeave={() => setHoveredRow(undefined)}
|
||||
>
|
||||
<$OrderbookCanvas ref={asksCanvasRef} width="100%" height={numRows * ROW_HEIGHT} />
|
||||
<$HoverCanvas ref={asksHoverRef} width="100%" height={numRows * ROW_HEIGHT} />
|
||||
<$HoverRows>
|
||||
{asksSlice.map((row: RowData, idx) =>
|
||||
row.price ? (
|
||||
<$Row
|
||||
key={idx}
|
||||
title={`${row.price}`}
|
||||
onClick={() => onRowAction(row.price)}
|
||||
onMouseOver={(e) => setHoveredRow({ idx, side: 'ask' })}
|
||||
>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span>
|
||||
<Output
|
||||
type={OutputType.Fiat}
|
||||
value={row.price}
|
||||
fractionDigits={tickSizeDecimals}
|
||||
/>
|
||||
</span>
|
||||
</$Row>
|
||||
) : (
|
||||
<$Row key={idx} onMouseOver={(e) => setHoveredRow(undefined)} />
|
||||
)
|
||||
)}
|
||||
</$HoverRows>
|
||||
</$OrderbookSideContainer>
|
||||
|
||||
<SpreadRow
|
||||
ref={spreadRowRef}
|
||||
spread={spread}
|
||||
spreadPercent={spreadPercent}
|
||||
tickSizeDecimals={tickSizeDecimals}
|
||||
/>
|
||||
|
||||
<$OrderbookSideContainer
|
||||
numRows={numRows}
|
||||
side="bid"
|
||||
onMouseLeave={() => setHoveredRow(undefined)}
|
||||
>
|
||||
<$OrderbookCanvas ref={bidsCanvasRef} width="100%" height={numRows * ROW_HEIGHT} />
|
||||
<$HoverCanvas ref={bidsHoverRef} width="100%" height={numRows * ROW_HEIGHT} />
|
||||
<$HoverRows>
|
||||
{bidsSlice.map((row: RowData, idx) =>
|
||||
row.price ? (
|
||||
<$Row
|
||||
key={idx}
|
||||
title={`${row.price}`}
|
||||
onClick={() => onRowAction(row.price)}
|
||||
onMouseOver={(e) => setHoveredRow({ idx, side: 'bid' })}
|
||||
>
|
||||
<span></span>
|
||||
<span></span>
|
||||
<span>
|
||||
<Output
|
||||
type={OutputType.Fiat}
|
||||
value={row.price}
|
||||
fractionDigits={tickSizeDecimals}
|
||||
/>
|
||||
</span>
|
||||
</$Row>
|
||||
) : (
|
||||
<$Row key={idx} onMouseOver={(e) => setHoveredRow(undefined)} />
|
||||
)
|
||||
)}
|
||||
</$HoverRows>
|
||||
</$OrderbookSideContainer>
|
||||
</>
|
||||
)}
|
||||
</$OrderbookWrapper>
|
||||
{displaySide === 'bottom' && (
|
||||
<$SpreadRow
|
||||
side="bottom"
|
||||
spread={spread}
|
||||
spreadPercent={spreadPercent}
|
||||
tickSizeDecimals={tickSizeDecimals}
|
||||
/>
|
||||
)}
|
||||
</$OrderbookContent>
|
||||
</$OrderbookContainer>
|
||||
);
|
||||
};
|
||||
|
||||
const $OrderbookContainer = styled.div`
|
||||
display: flex;
|
||||
flex: 1 1 0%;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
`;
|
||||
|
||||
const $OrderbookContent = styled.div<{ isLoading?: boolean }>`
|
||||
max-height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
|
||||
${({ isLoading }) => isLoading && 'flex: 1;'}
|
||||
`;
|
||||
|
||||
const $Header = styled(Row)`
|
||||
height: 2rem;
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
color: var(--color-text-0);
|
||||
`;
|
||||
|
||||
const $OrderbookWrapper = styled.div`
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex: 1 1 0%;
|
||||
`;
|
||||
|
||||
const $OrderbookSideContainer = styled.div<{ numRows: number; side: 'bid' | 'ask' }>`
|
||||
${({ numRows }) => css`
|
||||
min-height: calc(${numRows} * 1.25rem);
|
||||
`}
|
||||
|
||||
${({ side }) => css`
|
||||
--accent-color: ${side === 'bid' ? 'var(--color-positive)' : 'var(--color-negative)'};
|
||||
`}
|
||||
position: relative;
|
||||
`;
|
||||
|
||||
const $OrderbookCanvas = styled(Canvas)`
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
|
||||
font-feature-settings: var(--fontFeature-monoNumbers);
|
||||
`;
|
||||
|
||||
const $HoverCanvas = styled($OrderbookCanvas)``;
|
||||
|
||||
const $HoverRows = styled.div`
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
`;
|
||||
|
||||
const $Row = styled(Row)<{ onClick?: () => void }>`
|
||||
${({ onClick }) => (onClick ? 'cursor: pointer;' : 'cursor: default;')}
|
||||
`;
|
||||
|
||||
const $SpreadRow = styled(SpreadRow)`
|
||||
position: absolute;
|
||||
`;
|
||||
@@ -1,26 +0,0 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { OrderbookLine } from '@/constants/abacus';
|
||||
export type RowData = OrderbookLine & { side: 'bid' | 'ask'; mine?: number };
|
||||
|
||||
export const ROW_HEIGHT = 20;
|
||||
export const ROW_PADDING_RIGHT = 8;
|
||||
|
||||
export const Row = styled.div`
|
||||
display: flex;
|
||||
flex-shrink: 0;
|
||||
align-items: center;
|
||||
height: ${ROW_HEIGHT}px;
|
||||
min-height: ${ROW_HEIGHT}px;
|
||||
|
||||
font: var(--font-mini-book);
|
||||
|
||||
position: relative;
|
||||
padding-right: 0.5rem;
|
||||
|
||||
> span {
|
||||
flex: 1 1 0%;
|
||||
text-align: right;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
`;
|
||||
@@ -1,61 +0,0 @@
|
||||
import { forwardRef } from 'react';
|
||||
import styled, { css } from 'styled-components';
|
||||
import BigNumber from 'bignumber.js';
|
||||
|
||||
import type { Nullable } from '@/constants/abacus';
|
||||
import { STRING_KEYS } from '@/constants/localization';
|
||||
import { useStringGetter } from '@/hooks';
|
||||
|
||||
import { Output, OutputType } from '@/components/Output';
|
||||
import { WithTooltip } from '@/components/WithTooltip';
|
||||
|
||||
import { Row } from './OrderbookRow';
|
||||
|
||||
type StyleProps = {
|
||||
side?: 'top' | 'bottom';
|
||||
};
|
||||
|
||||
type ElementProps = {
|
||||
spread: BigNumber | null;
|
||||
spreadPercent: Nullable<number>;
|
||||
tickSizeDecimals: Nullable<number>;
|
||||
};
|
||||
|
||||
export const SpreadRow = forwardRef<HTMLDivElement, StyleProps & ElementProps>(
|
||||
({ side, spread, spreadPercent, tickSizeDecimals }, ref) => {
|
||||
const stringGetter = useStringGetter();
|
||||
|
||||
return (
|
||||
<$SpreadRow ref={ref} side={side}>
|
||||
<span>
|
||||
<WithTooltip tooltip="spread">
|
||||
{stringGetter({ key: STRING_KEYS.ORDERBOOK_SPREAD })}
|
||||
</WithTooltip>
|
||||
</span>
|
||||
<span>
|
||||
<Output type={OutputType.Number} value={spread} fractionDigits={tickSizeDecimals} />
|
||||
</span>
|
||||
<span>
|
||||
<Output type={OutputType.Percent} value={spreadPercent} />
|
||||
</span>
|
||||
</$SpreadRow>
|
||||
);
|
||||
}
|
||||
);
|
||||
|
||||
const $SpreadRow = styled(Row)<{ side?: 'top' | 'bottom' }>`
|
||||
height: 2rem;
|
||||
border-top: 1px solid var(--color-border);
|
||||
border-bottom: 1px solid var(--color-border);
|
||||
|
||||
${({ side }) =>
|
||||
side &&
|
||||
{
|
||||
top: css`
|
||||
border-top: none;
|
||||
`,
|
||||
bottom: css`
|
||||
border-bottom: none;
|
||||
`,
|
||||
}[side]}
|
||||
`;
|
||||
@@ -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 (
|
||||
|
||||
Reference in New Issue
Block a user