Compare commits
1
Commits
| Author | SHA1 | Date | |
|---|---|---|---|
 Bill He
|
3b8f9c8b90 |
+2
-2
@@ -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.0.30",
|
||||
"@dydxprotocol/v4-abacus": "^1.0.25",
|
||||
"@dydxprotocol/v4-client-js": "^1.0.0",
|
||||
"@dydxprotocol/v4-localization": "^1.0.8",
|
||||
"@dydxprotocol/v4-localization": "^1.0.5",
|
||||
"@ethersproject/providers": "^5.7.2",
|
||||
"@js-joda/core": "^5.5.3",
|
||||
"@radix-ui/react-checkbox": "^1.0.4",
|
||||
|
||||
Generated
+12
-12
@@ -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.0.30
|
||||
version: 1.0.30
|
||||
specifier: ^1.0.25
|
||||
version: 1.0.25
|
||||
'@dydxprotocol/v4-client-js':
|
||||
specifier: ^1.0.0
|
||||
version: 1.0.0
|
||||
'@dydxprotocol/v4-localization':
|
||||
specifier: ^1.0.8
|
||||
version: 1.0.8
|
||||
specifier: ^1.0.5
|
||||
version: 1.0.5
|
||||
'@ethersproject/providers':
|
||||
specifier: ^5.7.2
|
||||
version: 5.7.2
|
||||
@@ -984,8 +988,8 @@ packages:
|
||||
resolution: {integrity: sha512-RpfLEtTlyIxeNPGKcokS+p3BZII/Q3bYxryFRglh5H3A3T8q9fsLYm72VYAMEOOIBLEa8o93kFLiBDUWKrwXZA==}
|
||||
dev: true
|
||||
|
||||
/@dydxprotocol/v4-abacus@1.0.30:
|
||||
resolution: {integrity: sha512-zzJzNzMR3Stwv1Mu0XGUNlyo1V/ywo3yi3QSzE4mzUtXB+p5Shj5hRQCcwhHcNjLgp6a+T0BcRjBPa4QMETmwg==}
|
||||
/@dydxprotocol/v4-abacus@1.0.25:
|
||||
resolution: {integrity: sha512-DYueeM4MFeMLoucuzEU100oxM7mUYhlbyGuTkeE2gz8GX4hUZksH6osuh6fo5895cEAS2fmbOQbX+fNrai56jQ==}
|
||||
dev: false
|
||||
|
||||
/@dydxprotocol/v4-client-js@1.0.0:
|
||||
@@ -1016,8 +1020,8 @@ packages:
|
||||
- utf-8-validate
|
||||
dev: false
|
||||
|
||||
/@dydxprotocol/v4-localization@1.0.8:
|
||||
resolution: {integrity: sha512-h5CSkWHPct1BWmiwJBeX9vOauXSwlx8RK9ryOsaCipJWS4AnBni07p3/jj3L/HgmU1BZXwfcr2hBouXVxxZS8A==}
|
||||
/@dydxprotocol/v4-localization@1.0.5:
|
||||
resolution: {integrity: sha512-zZm3GFp/ORz9YjigQFVBlcWmaxYY+XEdIw8AWN5nEbsuiA2Jay+/OA7lO9+nV1J1p1T+TgLo9iczIHJsAo3IsA==}
|
||||
dev: false
|
||||
|
||||
/@dydxprotocol/v4-proto@0.4.1:
|
||||
@@ -14136,7 +14140,3 @@ packages:
|
||||
/zwitch@2.0.4:
|
||||
resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
|
||||
dev: true
|
||||
|
||||
settings:
|
||||
autoInstallPeers: true
|
||||
excludeLinksFromLockfile: false
|
||||
|
||||
@@ -1,61 +0,0 @@
|
||||
[
|
||||
{
|
||||
"chainId": "42161",
|
||||
"tokenAddress": "0xaf88d065e77c8cC2239327C5EDb3A432268e5831",
|
||||
"name": "Arbitrum"
|
||||
},
|
||||
{
|
||||
"chainId": "43114",
|
||||
"tokenAddress": "0xB97EF9Ef8734C71904D8002F8b6Bc66Dd9c48a6E",
|
||||
"name": "Avalanche"
|
||||
},
|
||||
{
|
||||
"chainId": "8453",
|
||||
"tokenAddress": "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913",
|
||||
"name": "Base"
|
||||
},
|
||||
{
|
||||
"chainId": "1",
|
||||
"tokenAddress": "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
|
||||
"name": "Ethereum"
|
||||
},
|
||||
{
|
||||
"chainId": "10",
|
||||
"tokenAddress": "0x0b2C639c533813f4Aa9D7837CAf62653d097Ff85",
|
||||
"name": "OP Mainnet"
|
||||
},
|
||||
{
|
||||
"chainId": "421613",
|
||||
"tokenAddress": "0xfd064a18f3bf249cf1f87fc203e90d8f650f2d63",
|
||||
"name": "Arbitrum Goerli"
|
||||
},
|
||||
{
|
||||
"chainId": "43113",
|
||||
"tokenAddress": "0x5425890298aed601595a70AB815c96711a31Bc65",
|
||||
"name": "Avalanche Fuji"
|
||||
},
|
||||
{
|
||||
"chainId": "84531",
|
||||
"tokenAddress": "0xf175520c52418dfe19c8098071a252da48cd1c19",
|
||||
"name": "Base Goerli"
|
||||
},
|
||||
{
|
||||
"chainId": "5",
|
||||
"tokenAddress": "0x07865c6E87B9F70255377e024ace6630C1Eaa37F",
|
||||
"name": "Ethereum Goerli"
|
||||
},
|
||||
{
|
||||
"chainId": "grand-1",
|
||||
"tokenAddress": "uusdc",
|
||||
"name": "Noble Testnet"
|
||||
},
|
||||
{
|
||||
"chainId": "420",
|
||||
"tokenAddress": "0xe05606174bac4a6364b31bd0eca4bf4dd368f8c6",
|
||||
"name": "OP Goerli"
|
||||
},
|
||||
{
|
||||
"chainId": "103",
|
||||
"name": "Solana Devnet"
|
||||
}
|
||||
]
|
||||
+7
-23
@@ -71,7 +71,6 @@
|
||||
"https://validator.v4dev.dydx.exchange"
|
||||
],
|
||||
"0xsquid": "https://testnet.api.0xsquid.com",
|
||||
"nobleValidator": "https://rpc.testnet.noble.strange.love",
|
||||
"faucet": "https://faucet.v4dev.dydx.exchange"
|
||||
},
|
||||
"links": {
|
||||
@@ -144,8 +143,7 @@
|
||||
"validators": [
|
||||
"http://54.92.118.111"
|
||||
],
|
||||
"0xsquid": "https://testnet.api.0xsquid.com",
|
||||
"nobleValidator": "https://rpc.testnet.noble.strange.love"
|
||||
"0xsquid": "https://testnet.api.0xsquid.com"
|
||||
},
|
||||
"links": {
|
||||
"tos": "https://dydx.exchange/v4-terms",
|
||||
@@ -217,8 +215,7 @@
|
||||
"validators": [
|
||||
"http://validator.v4dev4.dydx.exchange"
|
||||
],
|
||||
"0xsquid": "https://testnet.api.0xsquid.com",
|
||||
"nobleValidator": "https://rpc.testnet.noble.strange.love"
|
||||
"0xsquid": "https://testnet.api.0xsquid.com"
|
||||
},
|
||||
"links": {
|
||||
"tos": "https://dydx.exchange/v4-terms",
|
||||
@@ -290,8 +287,7 @@
|
||||
"validators": [
|
||||
"http://18.223.78.50"
|
||||
],
|
||||
"0xsquid": "https://testnet.api.0xsquid.com",
|
||||
"nobleValidator": "https://rpc.testnet.noble.strange.love"
|
||||
"0xsquid": "https://testnet.api.0xsquid.com"
|
||||
},
|
||||
"links": {
|
||||
"tos": "https://dydx.exchange/v4-terms",
|
||||
@@ -364,8 +360,7 @@
|
||||
"validators": [
|
||||
"https://validator.v4staging.dydx.exchange"
|
||||
],
|
||||
"0xsquid": "https://testnet.api.squidrouter.com",
|
||||
"nobleValidator": "https://rpc.testnet.noble.strange.love"
|
||||
"0xsquid": "https://testnet.api.squidrouter.com"
|
||||
},
|
||||
"links": {
|
||||
"tos": "https://dydx.exchange/v4-terms",
|
||||
@@ -411,7 +406,6 @@
|
||||
"dydxChainId": "dydxprotocol-testnet",
|
||||
"chainName": "dYdX Chain",
|
||||
"chainLogo": "dydx-chain.png",
|
||||
"squidIntegratorId": "dYdX-api",
|
||||
"isMainNet": false,
|
||||
"tokens": {
|
||||
"chain": {
|
||||
@@ -439,8 +433,7 @@
|
||||
"validators": [
|
||||
"https://validator.v4staging.dydx.exchange"
|
||||
],
|
||||
"0xsquid": "https://testnet.api.squidrouter.com",
|
||||
"nobleValidator": "https://rpc.testnet.noble.strange.love"
|
||||
"0xsquid": "https://testnet.api.squidrouter.com"
|
||||
},
|
||||
"links": {
|
||||
"tos": "https://dydx.exchange/v4-terms",
|
||||
@@ -512,8 +505,7 @@
|
||||
"validators": [
|
||||
"https://validator-uswest1.v4staging.dydx.exchange"
|
||||
],
|
||||
"0xsquid": "https://testnet.api.squidrouter.com",
|
||||
"nobleValidator": "https://rpc.testnet.noble.strange.love"
|
||||
"0xsquid": "https://testnet.api.squidrouter.com"
|
||||
},
|
||||
"links": {
|
||||
"tos": "https://dydx.exchange/v4-terms",
|
||||
@@ -591,7 +583,6 @@
|
||||
"https://dydx-rpc.liquify.com/api=8878132/dydx"
|
||||
],
|
||||
"0xsquid": "https://testnet.api.squidrouter.com",
|
||||
"nobleValidator": "https://rpc.testnet.noble.strange.love",
|
||||
"faucet": "https://faucet.v4testnet.dydx.exchange"
|
||||
},
|
||||
"links": {
|
||||
@@ -666,7 +657,6 @@
|
||||
"https://validator.v4testnet.dydx.exchange"
|
||||
],
|
||||
"0xsquid": "https://testnet.api.squidrouter.com",
|
||||
"nobleValidator": "https://rpc.testnet.noble.strange.love",
|
||||
"faucet": "https://faucet.v4testnet.dydx.exchange"
|
||||
},
|
||||
"links": {
|
||||
@@ -742,7 +732,6 @@
|
||||
"https://dydx-testnet.nodefleet.org"
|
||||
],
|
||||
"0xsquid": "https://testnet.api.squidrouter.com",
|
||||
"nobleValidator": "https://rpc.testnet.noble.strange.love",
|
||||
"faucet": "https://faucet.v4testnet.dydx.exchange"
|
||||
},
|
||||
"links": {
|
||||
@@ -818,7 +807,6 @@
|
||||
"https://test-dydx.kingnodes.com"
|
||||
],
|
||||
"0xsquid": "https://testnet.api.squidrouter.com",
|
||||
"nobleValidator": "https://rpc.testnet.noble.strange.love",
|
||||
"faucet": "https://faucet.v4testnet.dydx.exchange"
|
||||
},
|
||||
"links": {
|
||||
@@ -894,7 +882,6 @@
|
||||
"https://dydx-rpc.liquify.com/api=8878132/dydx"
|
||||
],
|
||||
"0xsquid": "https://testnet.api.squidrouter.com",
|
||||
"nobleValidator": "https://rpc.testnet.noble.strange.love",
|
||||
"faucet": "https://faucet.v4testnet.dydx.exchange"
|
||||
},
|
||||
"links": {
|
||||
@@ -970,7 +957,6 @@
|
||||
"https://dydx-testnet-rpc.polkachu.com/"
|
||||
],
|
||||
"0xsquid": "https://testnet.api.squidrouter.com",
|
||||
"nobleValidator": "https://rpc.testnet.noble.strange.love",
|
||||
"faucet": "https://faucet.v4testnet.dydx.exchange"
|
||||
},
|
||||
"links": {
|
||||
@@ -1037,7 +1023,6 @@
|
||||
"https://dydx-testnet-full-rpc.public.blastapi.io/"
|
||||
],
|
||||
"0xsquid": "https://testnet.api.squidrouter.com",
|
||||
"nobleValidator": "https://rpc.testnet.noble.strange.love",
|
||||
"faucet": "https://faucet.v4testnet.dydx.exchange"
|
||||
},
|
||||
"links": {
|
||||
@@ -1114,8 +1099,7 @@
|
||||
"[Validator endpoint 1",
|
||||
"[Validator endpoint n]"
|
||||
],
|
||||
"0xsquid": "[0xSquid endpoint for mainnet]",
|
||||
"nobleValidator": "[noble validator endpoint for mainnet]"
|
||||
"0xsquid": "[0xSquid endpoint for mainnet]"
|
||||
},
|
||||
"links": {
|
||||
"tos": "[HTTP link to TOS]",
|
||||
|
||||
@@ -199,7 +199,7 @@
|
||||
},
|
||||
"mobile": {
|
||||
"native": "trust:",
|
||||
"universal": ""
|
||||
"universal": "https://link.trustwallet.com"
|
||||
},
|
||||
"desktop": {
|
||||
"native": "",
|
||||
|
||||
@@ -1,390 +0,0 @@
|
||||
[
|
||||
{
|
||||
"constant": true,
|
||||
"inputs": [],
|
||||
"name": "name",
|
||||
"outputs": [{ "name": "", "type": "string" }],
|
||||
"payable": false,
|
||||
"stateMutability": "view",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"constant": false,
|
||||
"inputs": [{ "name": "_upgradedAddress", "type": "address" }],
|
||||
"name": "deprecate",
|
||||
"outputs": [],
|
||||
"payable": false,
|
||||
"stateMutability": "nonpayable",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"constant": false,
|
||||
"inputs": [
|
||||
{ "name": "_spender", "type": "address" },
|
||||
{ "name": "_value", "type": "uint256" }
|
||||
],
|
||||
"name": "approve",
|
||||
"outputs": [],
|
||||
"payable": false,
|
||||
"stateMutability": "nonpayable",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"constant": true,
|
||||
"inputs": [],
|
||||
"name": "deprecated",
|
||||
"outputs": [{ "name": "", "type": "bool" }],
|
||||
"payable": false,
|
||||
"stateMutability": "view",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"constant": false,
|
||||
"inputs": [{ "name": "_evilUser", "type": "address" }],
|
||||
"name": "addBlackList",
|
||||
"outputs": [],
|
||||
"payable": false,
|
||||
"stateMutability": "nonpayable",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"constant": true,
|
||||
"inputs": [],
|
||||
"name": "totalSupply",
|
||||
"outputs": [{ "name": "", "type": "uint256" }],
|
||||
"payable": false,
|
||||
"stateMutability": "view",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"constant": false,
|
||||
"inputs": [
|
||||
{ "name": "_from", "type": "address" },
|
||||
{ "name": "_to", "type": "address" },
|
||||
{ "name": "_value", "type": "uint256" }
|
||||
],
|
||||
"name": "transferFrom",
|
||||
"outputs": [],
|
||||
"payable": false,
|
||||
"stateMutability": "nonpayable",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"constant": true,
|
||||
"inputs": [],
|
||||
"name": "upgradedAddress",
|
||||
"outputs": [{ "name": "", "type": "address" }],
|
||||
"payable": false,
|
||||
"stateMutability": "view",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"constant": true,
|
||||
"inputs": [{ "name": "", "type": "address" }],
|
||||
"name": "balances",
|
||||
"outputs": [{ "name": "", "type": "uint256" }],
|
||||
"payable": false,
|
||||
"stateMutability": "view",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"constant": true,
|
||||
"inputs": [],
|
||||
"name": "decimals",
|
||||
"outputs": [{ "name": "", "type": "uint256" }],
|
||||
"payable": false,
|
||||
"stateMutability": "view",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"constant": true,
|
||||
"inputs": [],
|
||||
"name": "maximumFee",
|
||||
"outputs": [{ "name": "", "type": "uint256" }],
|
||||
"payable": false,
|
||||
"stateMutability": "view",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"constant": true,
|
||||
"inputs": [],
|
||||
"name": "_totalSupply",
|
||||
"outputs": [{ "name": "", "type": "uint256" }],
|
||||
"payable": false,
|
||||
"stateMutability": "view",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"constant": false,
|
||||
"inputs": [],
|
||||
"name": "unpause",
|
||||
"outputs": [],
|
||||
"payable": false,
|
||||
"stateMutability": "nonpayable",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"constant": true,
|
||||
"inputs": [{ "name": "_maker", "type": "address" }],
|
||||
"name": "getBlackListStatus",
|
||||
"outputs": [{ "name": "", "type": "bool" }],
|
||||
"payable": false,
|
||||
"stateMutability": "view",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"constant": true,
|
||||
"inputs": [
|
||||
{ "name": "", "type": "address" },
|
||||
{ "name": "", "type": "address" }
|
||||
],
|
||||
"name": "allowed",
|
||||
"outputs": [{ "name": "", "type": "uint256" }],
|
||||
"payable": false,
|
||||
"stateMutability": "view",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"constant": true,
|
||||
"inputs": [],
|
||||
"name": "paused",
|
||||
"outputs": [{ "name": "", "type": "bool" }],
|
||||
"payable": false,
|
||||
"stateMutability": "view",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"constant": true,
|
||||
"inputs": [{ "name": "who", "type": "address" }],
|
||||
"name": "balanceOf",
|
||||
"outputs": [{ "name": "", "type": "uint256" }],
|
||||
"payable": false,
|
||||
"stateMutability": "view",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"constant": false,
|
||||
"inputs": [],
|
||||
"name": "pause",
|
||||
"outputs": [],
|
||||
"payable": false,
|
||||
"stateMutability": "nonpayable",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"constant": true,
|
||||
"inputs": [],
|
||||
"name": "getOwner",
|
||||
"outputs": [{ "name": "", "type": "address" }],
|
||||
"payable": false,
|
||||
"stateMutability": "view",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"constant": true,
|
||||
"inputs": [],
|
||||
"name": "owner",
|
||||
"outputs": [{ "name": "", "type": "address" }],
|
||||
"payable": false,
|
||||
"stateMutability": "view",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"constant": true,
|
||||
"inputs": [],
|
||||
"name": "symbol",
|
||||
"outputs": [{ "name": "", "type": "string" }],
|
||||
"payable": false,
|
||||
"stateMutability": "view",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"constant": false,
|
||||
"inputs": [
|
||||
{ "name": "_to", "type": "address" },
|
||||
{ "name": "_value", "type": "uint256" }
|
||||
],
|
||||
"name": "transfer",
|
||||
"outputs": [],
|
||||
"payable": false,
|
||||
"stateMutability": "nonpayable",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"constant": false,
|
||||
"inputs": [
|
||||
{ "name": "newBasisPoints", "type": "uint256" },
|
||||
{ "name": "newMaxFee", "type": "uint256" }
|
||||
],
|
||||
"name": "setParams",
|
||||
"outputs": [],
|
||||
"payable": false,
|
||||
"stateMutability": "nonpayable",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"constant": false,
|
||||
"inputs": [{ "name": "amount", "type": "uint256" }],
|
||||
"name": "issue",
|
||||
"outputs": [],
|
||||
"payable": false,
|
||||
"stateMutability": "nonpayable",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"constant": false,
|
||||
"inputs": [{ "name": "amount", "type": "uint256" }],
|
||||
"name": "redeem",
|
||||
"outputs": [],
|
||||
"payable": false,
|
||||
"stateMutability": "nonpayable",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"constant": true,
|
||||
"inputs": [
|
||||
{ "name": "_owner", "type": "address" },
|
||||
{ "name": "_spender", "type": "address" }
|
||||
],
|
||||
"name": "allowance",
|
||||
"outputs": [{ "name": "remaining", "type": "uint256" }],
|
||||
"payable": false,
|
||||
"stateMutability": "view",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"constant": true,
|
||||
"inputs": [],
|
||||
"name": "basisPointsRate",
|
||||
"outputs": [{ "name": "", "type": "uint256" }],
|
||||
"payable": false,
|
||||
"stateMutability": "view",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"constant": true,
|
||||
"inputs": [{ "name": "", "type": "address" }],
|
||||
"name": "isBlackListed",
|
||||
"outputs": [{ "name": "", "type": "bool" }],
|
||||
"payable": false,
|
||||
"stateMutability": "view",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"constant": false,
|
||||
"inputs": [{ "name": "_clearedUser", "type": "address" }],
|
||||
"name": "removeBlackList",
|
||||
"outputs": [],
|
||||
"payable": false,
|
||||
"stateMutability": "nonpayable",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"constant": true,
|
||||
"inputs": [],
|
||||
"name": "MAX_UINT",
|
||||
"outputs": [{ "name": "", "type": "uint256" }],
|
||||
"payable": false,
|
||||
"stateMutability": "view",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"constant": false,
|
||||
"inputs": [{ "name": "newOwner", "type": "address" }],
|
||||
"name": "transferOwnership",
|
||||
"outputs": [],
|
||||
"payable": false,
|
||||
"stateMutability": "nonpayable",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"constant": false,
|
||||
"inputs": [{ "name": "_blackListedUser", "type": "address" }],
|
||||
"name": "destroyBlackFunds",
|
||||
"outputs": [],
|
||||
"payable": false,
|
||||
"stateMutability": "nonpayable",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"inputs": [
|
||||
{ "name": "_initialSupply", "type": "uint256" },
|
||||
{ "name": "_name", "type": "string" },
|
||||
{ "name": "_symbol", "type": "string" },
|
||||
{ "name": "_decimals", "type": "uint256" }
|
||||
],
|
||||
"payable": false,
|
||||
"stateMutability": "nonpayable",
|
||||
"type": "constructor"
|
||||
},
|
||||
{
|
||||
"anonymous": false,
|
||||
"inputs": [{ "indexed": false, "name": "amount", "type": "uint256" }],
|
||||
"name": "Issue",
|
||||
"type": "event"
|
||||
},
|
||||
{
|
||||
"anonymous": false,
|
||||
"inputs": [{ "indexed": false, "name": "amount", "type": "uint256" }],
|
||||
"name": "Redeem",
|
||||
"type": "event"
|
||||
},
|
||||
{
|
||||
"anonymous": false,
|
||||
"inputs": [{ "indexed": false, "name": "newAddress", "type": "address" }],
|
||||
"name": "Deprecate",
|
||||
"type": "event"
|
||||
},
|
||||
{
|
||||
"anonymous": false,
|
||||
"inputs": [
|
||||
{ "indexed": false, "name": "feeBasisPoints", "type": "uint256" },
|
||||
{ "indexed": false, "name": "maxFee", "type": "uint256" }
|
||||
],
|
||||
"name": "Params",
|
||||
"type": "event"
|
||||
},
|
||||
{
|
||||
"anonymous": false,
|
||||
"inputs": [
|
||||
{ "indexed": false, "name": "_blackListedUser", "type": "address" },
|
||||
{ "indexed": false, "name": "_balance", "type": "uint256" }
|
||||
],
|
||||
"name": "DestroyedBlackFunds",
|
||||
"type": "event"
|
||||
},
|
||||
{
|
||||
"anonymous": false,
|
||||
"inputs": [{ "indexed": false, "name": "_user", "type": "address" }],
|
||||
"name": "AddedBlackList",
|
||||
"type": "event"
|
||||
},
|
||||
{
|
||||
"anonymous": false,
|
||||
"inputs": [{ "indexed": false, "name": "_user", "type": "address" }],
|
||||
"name": "RemovedBlackList",
|
||||
"type": "event"
|
||||
},
|
||||
{
|
||||
"anonymous": false,
|
||||
"inputs": [
|
||||
{ "indexed": true, "name": "owner", "type": "address" },
|
||||
{ "indexed": true, "name": "spender", "type": "address" },
|
||||
{ "indexed": false, "name": "value", "type": "uint256" }
|
||||
],
|
||||
"name": "Approval",
|
||||
"type": "event"
|
||||
},
|
||||
{
|
||||
"anonymous": false,
|
||||
"inputs": [
|
||||
{ "indexed": true, "name": "from", "type": "address" },
|
||||
{ "indexed": true, "name": "to", "type": "address" },
|
||||
{ "indexed": false, "name": "value", "type": "uint256" }
|
||||
],
|
||||
"name": "Transfer",
|
||||
"type": "event"
|
||||
},
|
||||
{ "anonymous": false, "inputs": [], "name": "Pause", "type": "event" },
|
||||
{ "anonymous": false, "inputs": [], "name": "Unpause", "type": "event" }
|
||||
]
|
||||
@@ -122,7 +122,6 @@ Styled.Dialog = styled(Dialog)`
|
||||
|
||||
/* Net 0 sticky top inset (let stickyArea1 header stick to top) */
|
||||
--stickyArea0-topGap: calc(-1 * var(--stickyArea0-topHeight));
|
||||
overflow-x: clip;
|
||||
}
|
||||
`;
|
||||
|
||||
|
||||
@@ -44,6 +44,13 @@ export const ComboboxMenu = <MenuItemValue extends string, MenuGroupValue extend
|
||||
}: ComboboxMenuProps<MenuItemValue, MenuGroupValue>) => {
|
||||
const [highlightedCommand, setHighlightedCommand] = useState<MenuItemValue>();
|
||||
const [searchValue, setSearchValue] = useState('');
|
||||
// const inputRef = useRef<HTMLInputElement | null>(null);
|
||||
|
||||
// console.log({ commandValue: highlightedCommand });
|
||||
|
||||
// useEffect(() => {
|
||||
// inputRef?.current?.focus();
|
||||
// }, []);
|
||||
|
||||
return (
|
||||
<Styled.Command
|
||||
@@ -60,14 +67,11 @@ export const ComboboxMenu = <MenuItemValue extends string, MenuGroupValue extend
|
||||
{withSearch && (
|
||||
<Styled.Header $withStickyLayout={withStickyLayout}>
|
||||
<Styled.Input
|
||||
/**
|
||||
* Mobile Issue: Search Input will always trigger mobile keyboard drawer. There is no fix.
|
||||
* https://github.com/pacocoursey/cmdk/issues/127
|
||||
*/
|
||||
autoFocus
|
||||
// ref={inputRef}
|
||||
type="search"
|
||||
value={searchValue}
|
||||
onValueChange={setSearchValue}
|
||||
autoFocus
|
||||
placeholder={inputPlaceholder}
|
||||
/>
|
||||
</Styled.Header>
|
||||
@@ -254,7 +258,6 @@ Styled.Group = styled(Command.Group)<{ $withItemBorders?: boolean; $withStickyLa
|
||||
|
||||
> [cmdk-group-heading] {
|
||||
${layoutMixins.stickyHeader}
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
> [cmdk-group-items] {
|
||||
|
||||
@@ -10,7 +10,6 @@ import { layoutMixins } from '@/styles/layoutMixins';
|
||||
import { Button, ButtonProps } from './Button';
|
||||
import { Icon, IconName } from './Icon';
|
||||
import { IconButton } from './IconButton';
|
||||
import { WithTooltip } from './WithTooltip';
|
||||
|
||||
export type CopyButtonProps = {
|
||||
value?: string;
|
||||
@@ -41,17 +40,13 @@ export const CopyButton = ({
|
||||
<Styled.Icon copied={copied} iconName={copied ? IconName.Check : IconName.Copy} />
|
||||
</Styled.InlineRow>
|
||||
) : buttonType === 'icon' ? (
|
||||
<WithTooltip
|
||||
tooltipString={stringGetter({ key: copied ? STRING_KEYS.COPIED : STRING_KEYS.COPY })}
|
||||
>
|
||||
<Styled.IconButton
|
||||
{...buttonProps}
|
||||
copied={copied}
|
||||
action={ButtonAction.Base}
|
||||
iconName={copied ? IconName.Check : IconName.Copy}
|
||||
onClick={onCopy}
|
||||
/>
|
||||
</WithTooltip>
|
||||
<Styled.IconButton
|
||||
{...buttonProps}
|
||||
copied={copied}
|
||||
action={ButtonAction.Base}
|
||||
iconName={copied ? IconName.Check : IconName.Copy}
|
||||
onClick={onCopy}
|
||||
/>
|
||||
) : (
|
||||
<Button
|
||||
{...buttonProps}
|
||||
|
||||
@@ -53,7 +53,6 @@ import {
|
||||
OrderUntriggeredIcon,
|
||||
OverviewIcon,
|
||||
PencilIcon,
|
||||
PlayIcon,
|
||||
PositionsIcon,
|
||||
PriceChartIcon,
|
||||
PrivacyIcon,
|
||||
@@ -127,7 +126,6 @@ export enum IconName {
|
||||
OrderUntriggered = 'OrderUntriggered',
|
||||
Overview = 'Overview',
|
||||
Pencil = 'Pencil',
|
||||
Play = 'Play',
|
||||
Positions = 'Positions',
|
||||
PriceChart = 'PriceChart',
|
||||
Privacy = 'Privacy',
|
||||
@@ -200,7 +198,6 @@ const icons = {
|
||||
[IconName.OrderUntriggered]: OrderUntriggeredIcon,
|
||||
[IconName.Overview]: OverviewIcon,
|
||||
[IconName.Pencil]: PencilIcon,
|
||||
[IconName.Play]: PlayIcon,
|
||||
[IconName.Positions]: PositionsIcon,
|
||||
[IconName.PriceChart]: PriceChartIcon,
|
||||
[IconName.Privacy]: PrivacyIcon,
|
||||
|
||||
@@ -4,7 +4,6 @@ import { Root, Action, Close } from '@radix-ui/react-toast';
|
||||
|
||||
import { ButtonShape, ButtonSize } from '@/constants/buttons';
|
||||
import { popoverMixins } from '@/styles/popoverMixins';
|
||||
import { breakpoints } from '@/styles';
|
||||
|
||||
import { Notification, type NotificationProps } from '@/components/Notification';
|
||||
|
||||
@@ -77,7 +76,7 @@ export const Toast = ({
|
||||
<Close asChild>
|
||||
<$CloseButton
|
||||
iconName={IconName.Close}
|
||||
shape={ButtonShape.Circle}
|
||||
shape={ButtonShape.Square}
|
||||
size={ButtonSize.XSmall}
|
||||
onClick={(e: MouseEvent) => e.stopPropagation()}
|
||||
/>
|
||||
@@ -250,16 +249,12 @@ const $CloseButton = styled(IconButton)`
|
||||
right: 0;
|
||||
|
||||
border: solid var(--border-width) var(--color-border);
|
||||
border-radius: 50%;
|
||||
|
||||
${$Root}:hover & {
|
||||
display: block;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
@media ${breakpoints.mobile} {
|
||||
display: block;
|
||||
z-index: 2;
|
||||
}
|
||||
`;
|
||||
|
||||
const $Action = styled(Action)`
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
import styled from 'styled-components';
|
||||
|
||||
import { Provider, Viewport } from '@radix-ui/react-toast';
|
||||
|
||||
import styled from 'styled-components';
|
||||
import { layoutMixins } from '@/styles/layoutMixins';
|
||||
|
||||
type ElementProps = {
|
||||
@@ -13,9 +12,7 @@ type StyleProps = {
|
||||
className?: string;
|
||||
};
|
||||
|
||||
type ToastAreaProps = ElementProps & StyleProps;
|
||||
|
||||
export const ToastArea = ({ swipeDirection, children, className }: ToastAreaProps) => (
|
||||
export const ToastArea = ({ swipeDirection, children, className }: ElementProps & StyleProps) => (
|
||||
<$ToastArea className={className}>
|
||||
<Provider swipeDirection={swipeDirection}>
|
||||
{children}
|
||||
|
||||
@@ -12,6 +12,7 @@ export enum DialogTypes {
|
||||
OrderDetails = 'OrderDetails',
|
||||
Preferences = 'Preferences',
|
||||
RateLimit = 'RateLimit',
|
||||
Receive = 'Receive',
|
||||
RestrictedGeo = 'RestrictedGeo',
|
||||
RestrictedWallet = 'RestrictedWallet',
|
||||
Trade = 'Trade',
|
||||
|
||||
@@ -26,14 +26,3 @@ export enum FundingDirection {
|
||||
ToShort = 'ToShort',
|
||||
ToLong = 'ToLong',
|
||||
}
|
||||
|
||||
export const MARKETS_TO_DISPLAY = [
|
||||
'BTC-USD',
|
||||
'ETH-USD',
|
||||
'LINK-USD',
|
||||
'SOL-USD',
|
||||
'MATIC-USD',
|
||||
'ATOM-USD',
|
||||
'AVAX-USD',
|
||||
'APE-USD',
|
||||
];
|
||||
|
||||
@@ -4,7 +4,6 @@ import { StatusResponse } from '@0xsquid/sdk';
|
||||
export enum NotificationType {
|
||||
AbacusGenerated = 'AbacusGenerated',
|
||||
SquidTransfer = 'SquidTransfer',
|
||||
ReleaseUpdates = 'ReleaseUpdates',
|
||||
}
|
||||
|
||||
export enum NotificationComponentType {}
|
||||
|
||||
@@ -116,15 +116,3 @@ export enum MobilePlaceOrderSteps {
|
||||
PlacingOrder = 'PlacingOrder',
|
||||
Confirmation = 'Confirmation',
|
||||
}
|
||||
|
||||
export const CLEARED_TRADE_INPUTS = {
|
||||
limitPriceInput: '',
|
||||
triggerPriceInput: '',
|
||||
trailingPercentInput: '',
|
||||
};
|
||||
|
||||
export const CLEARED_SIZE_INPUTS = {
|
||||
amountInput: '',
|
||||
usdAmountInput: '',
|
||||
leverageInput: '',
|
||||
};
|
||||
|
||||
@@ -22,7 +22,6 @@ import { useShouldShowFooter } from './useShouldShowFooter';
|
||||
import { useSelectedNetwork } from './useSelectedNetwork';
|
||||
import { useStringGetter } from './useStringGetter';
|
||||
import { useSubaccount } from './useSubaccount';
|
||||
import { useTradeFormInputs } from './useTradeFormInputs';
|
||||
import { useURLConfigs } from './useURLConfigs';
|
||||
|
||||
export {
|
||||
@@ -50,6 +49,5 @@ export {
|
||||
useSelectedNetwork,
|
||||
useStringGetter,
|
||||
useSubaccount,
|
||||
useTradeFormInputs,
|
||||
useURLConfigs,
|
||||
};
|
||||
|
||||
@@ -23,7 +23,6 @@ export const useCurrentMarketId = () => {
|
||||
const selectedNetwork = useSelector(getSelectedNetwork);
|
||||
const marketIds = useSelector(getMarketIds, shallowEqual);
|
||||
const hasMarketIds = marketIds.length > 0;
|
||||
|
||||
const [lastViewedMarket, setLastViewedMarket] = useLocalStorage({
|
||||
key: LocalStorageKey.LastViewedMarket,
|
||||
defaultValue: DEFAULT_MARKETID,
|
||||
|
||||
@@ -1,14 +1,7 @@
|
||||
import { useMemo } from 'react';
|
||||
import { useSelector, shallowEqual } from 'react-redux';
|
||||
|
||||
import {
|
||||
MarketFilters,
|
||||
MARKET_FILTER_LABELS,
|
||||
type MarketData,
|
||||
MARKETS_TO_DISPLAY,
|
||||
} from '@/constants/markets';
|
||||
|
||||
import { testFlags } from '@/hooks/useTestFlags';
|
||||
import { MarketFilters, MARKET_FILTER_LABELS, type MarketData } from '@/constants/markets';
|
||||
|
||||
import { getAssets } from '@/state/assetsSelectors';
|
||||
import { getPerpetualMarkets } from '@/state/perpetualsSelectors';
|
||||
@@ -49,9 +42,7 @@ export const useMarketsData = (
|
||||
}, [allPerpetualMarkets, allAssets]);
|
||||
|
||||
const filteredMarkets = useMemo(() => {
|
||||
const filtered = markets
|
||||
.filter(filterFunctions[filter])
|
||||
.filter(({ id }) => (testFlags.displayAllMarkets ? true : MARKETS_TO_DISPLAY.includes(id)));
|
||||
const filtered = markets.filter(filterFunctions[filter]);
|
||||
|
||||
if (searchFilter) {
|
||||
return filtered.filter(
|
||||
|
||||
@@ -25,7 +25,6 @@ import {
|
||||
import { useSelectedNetwork, useStringGetter } from '@/hooks';
|
||||
import { useLocalNotifications } from '@/hooks/useLocalNotifications';
|
||||
|
||||
import { AssetIcon } from '@/components/AssetIcon';
|
||||
import { Icon, IconName } from '@/components/Icon';
|
||||
import { TradeNotification } from '@/views/notifications/TradeNotification';
|
||||
import { TransferStatusNotification } from '@/views/notifications/TransferStatusNotification';
|
||||
@@ -206,58 +205,9 @@ export const notificationTypes: NotificationTypeConfig[] = [
|
||||
return () => {};
|
||||
},
|
||||
},
|
||||
{
|
||||
type: NotificationType.ReleaseUpdates,
|
||||
useTrigger: ({ trigger }) => {
|
||||
const stringGetter = useStringGetter();
|
||||
|
||||
useEffect(() => {
|
||||
trigger(
|
||||
'rewards-and-full-trading-live',
|
||||
{
|
||||
icon: <AssetIcon symbol="DYDX" />,
|
||||
title: stringGetter({ key: 'NOTIFICATIONS.RELEASE_REWARDS_AND_FULL_TRADING.TITLE' }),
|
||||
body: stringGetter({
|
||||
key: 'NOTIFICATIONS.RELEASE_REWARDS_AND_FULL_TRADING.BODY',
|
||||
params: {
|
||||
BLOGPOST: (
|
||||
<$Link
|
||||
href="https://www.dydxopsdao.com/blog/deep-dive-full-trading"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{stringGetter({ key: STRING_KEYS.HERE })}
|
||||
</$Link>
|
||||
),
|
||||
// todo: update localization to flip the two
|
||||
DOS_BLOGPOST: (
|
||||
<$Link
|
||||
href="https://dydx.exchange/blog/v4-full-trading"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{stringGetter({ key: STRING_KEYS.HERE })}
|
||||
</$Link>
|
||||
),
|
||||
},
|
||||
}),
|
||||
toastSensitivity: 'foreground',
|
||||
},
|
||||
[]
|
||||
);
|
||||
}, [stringGetter]);
|
||||
},
|
||||
useNotificationAction: () => {
|
||||
return () => {};
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
const $Icon = styled.img`
|
||||
height: 1.5rem;
|
||||
width: 1.5rem;
|
||||
`;
|
||||
|
||||
const $Link = styled.a`
|
||||
--link-color: var(--color-text-2);
|
||||
`;
|
||||
|
||||
@@ -81,7 +81,6 @@ const useNotificationsContext = () => {
|
||||
setNotificationPreferences({
|
||||
[NotificationType.AbacusGenerated]: true,
|
||||
[NotificationType.SquidTransfer]: true,
|
||||
[NotificationType.ReleaseUpdates]: true,
|
||||
version: LOCAL_STORAGE_VERSIONS[LocalStorageKey.NotificationPreferences],
|
||||
});
|
||||
}
|
||||
|
||||
@@ -16,13 +16,6 @@ class TestFlags {
|
||||
get displayInitializingMarkets() {
|
||||
return !!this.queryParams.displayInitializingMarkets;
|
||||
}
|
||||
|
||||
/**
|
||||
* @description We are temporarily displaying a subset of ACTIVE markets, this flag will allow you to see all ACTIVE markets
|
||||
*/
|
||||
get displayAllMarkets() {
|
||||
return !!this.queryParams.displayAllMarkets;
|
||||
}
|
||||
}
|
||||
|
||||
export const testFlags = new TestFlags();
|
||||
|
||||
@@ -1,33 +0,0 @@
|
||||
import { getTradeFormInputs } from '@/state/inputsSelectors';
|
||||
import { useEffect } from 'react';
|
||||
import { shallowEqual, useSelector } from 'react-redux';
|
||||
|
||||
import { TradeInputField } from '@/constants/abacus';
|
||||
|
||||
import abacusStateManager from '@/lib/abacus';
|
||||
|
||||
export const useTradeFormInputs = () => {
|
||||
const tradeFormInputValues = useSelector(getTradeFormInputs, shallowEqual);
|
||||
const { limitPriceInput, triggerPriceInput, trailingPercentInput } = tradeFormInputValues;
|
||||
|
||||
useEffect(() => {
|
||||
const floatValue = parseFloat(triggerPriceInput);
|
||||
abacusStateManager.setTradeValue({
|
||||
value: floatValue,
|
||||
field: TradeInputField.triggerPrice,
|
||||
});
|
||||
}, [triggerPriceInput]);
|
||||
|
||||
useEffect(() => {
|
||||
const floatValue = parseFloat(limitPriceInput);
|
||||
abacusStateManager.setTradeValue({ value: floatValue, field: TradeInputField.limitPrice });
|
||||
}, [limitPriceInput]);
|
||||
|
||||
useEffect(() => {
|
||||
const floatValue = parseFloat(trailingPercentInput);
|
||||
abacusStateManager.setTradeValue({
|
||||
value: floatValue,
|
||||
field: TradeInputField.trailingPercent,
|
||||
});
|
||||
}, [trailingPercentInput]);
|
||||
};
|
||||
@@ -17,6 +17,7 @@ import { MobileSignInDialog } from '@/views/dialogs/MobileSignInDialog';
|
||||
import { OnboardingDialog } from '@/views/dialogs/OnboardingDialog';
|
||||
import { PreferencesDialog } from '@/views/dialogs/PreferencesDialog';
|
||||
import { RateLimitDialog } from '@/views/dialogs/RateLimitDialog';
|
||||
import { ReceiveDialog } from '@/views/dialogs/ReceiveDialog';
|
||||
import { RestrictedGeoDialog } from '@/views/dialogs/RestrictedGeoDialog';
|
||||
import { TradeDialog } from '@/views/dialogs/TradeDialog';
|
||||
import { TransferDialog } from '@/views/dialogs/TransferDialog';
|
||||
@@ -59,6 +60,7 @@ export const DialogManager = () => {
|
||||
[DialogTypes.OrderDetails]: <OrderDetailsDialog {...modalProps} />,
|
||||
[DialogTypes.Preferences]: <PreferencesDialog {...modalProps} />,
|
||||
[DialogTypes.RateLimit]: <RateLimitDialog {...modalProps} />,
|
||||
[DialogTypes.Receive]: <ReceiveDialog {...modalProps} />,
|
||||
[DialogTypes.RestrictedGeo]: <RestrictedGeoDialog {...modalProps} />,
|
||||
[DialogTypes.RestrictedWallet]: <RestrictedWalletDialog {...modalProps} />,
|
||||
[DialogTypes.Trade]: <TradeDialog {...modalProps} />,
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
import styled, { type AnyStyledComponent, css } from 'styled-components';
|
||||
|
||||
import { AbacusApiStatus } from '@/constants/abacus';
|
||||
import { ButtonSize, ButtonType } from '@/constants/buttons';
|
||||
import { ButtonSize } from '@/constants/buttons';
|
||||
import { STRING_KEYS } from '@/constants/localization';
|
||||
import { ENVIRONMENT_CONFIG_MAP, isDev } from '@/constants/networks';
|
||||
|
||||
@@ -55,12 +55,10 @@ export const FooterDesktop = () => {
|
||||
}
|
||||
>
|
||||
<Styled.FooterButton
|
||||
type={statusPage ? ButtonType.Link : ButtonType.Button}
|
||||
slotLeft={<Styled.StatusDot exchangeStatus={exchangeStatus} />}
|
||||
slotRight={statusPage && <LinkOutIcon />}
|
||||
size={ButtonSize.XSmall}
|
||||
state={{ isDisabled: !statusPage }}
|
||||
href={statusPage}
|
||||
>
|
||||
{label}
|
||||
</Styled.FooterButton>
|
||||
@@ -134,7 +132,7 @@ Styled.StatusDot = styled.div<{ exchangeStatus: ExchangeStatus }>`
|
||||
Styled.FooterButton = styled(Button)`
|
||||
--button-height: 1.5rem;
|
||||
--button-radius: 0.25rem;
|
||||
--button-backgroundColor: transparent;
|
||||
--button-backgroundColor: var(--color-layer-2);
|
||||
--button-border: none;
|
||||
--button-textColor: var(--color-text-0);
|
||||
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import styled, { type AnyStyledComponent } from 'styled-components';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
|
||||
import { ButtonAction, ButtonSize } from '@/constants/buttons';
|
||||
import { DialogTypes } from '@/constants/dialogs';
|
||||
import { STRING_KEYS } from '@/constants/localization';
|
||||
import { DEFAULT_MARKETID } from '@/constants/markets';
|
||||
@@ -10,8 +11,8 @@ import { useShouldShowFooter, useStringGetter } from '@/hooks';
|
||||
import { layoutMixins } from '@/styles/layoutMixins';
|
||||
|
||||
import { NavigationMenu } from '@/components/NavigationMenu';
|
||||
import { Icon, IconName } from '@/components/Icon';
|
||||
import { BellIcon, MarketsIcon, PortfolioIcon, ProfileIcon } from '@/icons';
|
||||
import { Icon } from '@/components/Icon';
|
||||
import { BellIcon, MarketsIcon, PlayIcon, PortfolioIcon, ProfileIcon, TradeIcon } from '@/icons';
|
||||
import { IconButton } from '@/components/IconButton';
|
||||
|
||||
import { calculateCanAccountTrade } from '@/state/accountCalculators';
|
||||
@@ -41,9 +42,11 @@ export const FooterMobile = () => {
|
||||
value: 'trade',
|
||||
label: stringGetter({ key: STRING_KEYS.TRADE }),
|
||||
slotBefore: (
|
||||
<Styled.StartIcon>
|
||||
<Icon iconName={IconName.Trade} />
|
||||
</Styled.StartIcon>
|
||||
<Styled.IconButton
|
||||
iconComponent={TradeIcon}
|
||||
size={ButtonSize.Large}
|
||||
action={ButtonAction.Primary}
|
||||
/>
|
||||
),
|
||||
href: `${AppRoute.Trade}/${marketId ?? DEFAULT_MARKETID}`,
|
||||
}
|
||||
@@ -51,9 +54,11 @@ export const FooterMobile = () => {
|
||||
value: 'onboarding',
|
||||
label: stringGetter({ key: STRING_KEYS.ONBOARDING }),
|
||||
slotBefore: (
|
||||
<Styled.StartIcon>
|
||||
<Icon iconName={IconName.Play} />
|
||||
</Styled.StartIcon>
|
||||
<Styled.IconButton
|
||||
iconComponent={PlayIcon}
|
||||
size={ButtonSize.Large}
|
||||
action={ButtonAction.Primary}
|
||||
/>
|
||||
),
|
||||
onClick: () => dispatch(openDialog({ type: DialogTypes.Onboarding })),
|
||||
},
|
||||
@@ -163,24 +168,3 @@ Styled.IconButton = styled(IconButton)`
|
||||
Styled.Icon = styled(Icon)`
|
||||
font-size: 1.5rem;
|
||||
`;
|
||||
|
||||
Styled.StartIcon = styled.div`
|
||||
display: inline-flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
margin-top: -0.25rem;
|
||||
|
||||
width: 3.5rem;
|
||||
height: 3.5rem;
|
||||
|
||||
color: var(--color-text-2);
|
||||
background-color: var(--color-accent);
|
||||
border: solid var(--border-width) var(--color-border-white);
|
||||
border-radius: 50%;
|
||||
|
||||
svg {
|
||||
width: 1.5rem;
|
||||
height: 1.5rem;
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -1,17 +1,15 @@
|
||||
import { useMemo, useState } from 'react';
|
||||
import { useMemo } from 'react';
|
||||
import styled, { css } from 'styled-components';
|
||||
|
||||
import { NotificationStatus } from '@/constants/notifications';
|
||||
import { ButtonShape, ButtonSize } from '@/constants/buttons';
|
||||
import { ButtonSize } from '@/constants/buttons';
|
||||
|
||||
import { useNotifications } from '@/hooks/useNotifications';
|
||||
import { useBreakpoints } from '@/hooks/useBreakpoints';
|
||||
import { ChevronLeftIcon } from '@/icons';
|
||||
import { breakpoints } from '@/styles';
|
||||
|
||||
import { Button } from '@/components/Button';
|
||||
import { Toast } from '@/components/Toast';
|
||||
import { ToastArea } from '@/components/ToastArea';
|
||||
import { ToggleButton } from '@/components/ToggleButton';
|
||||
|
||||
type StyleProps = {
|
||||
className?: string;
|
||||
@@ -20,8 +18,6 @@ type StyleProps = {
|
||||
const MAX_TOASTS = 10;
|
||||
|
||||
export const NotificationsToastArea = ({ className }: StyleProps) => {
|
||||
const [shouldStackNotifications, setshouldStackNotifications] = useState(true);
|
||||
|
||||
const {
|
||||
notifications,
|
||||
getKey,
|
||||
@@ -47,37 +43,20 @@ export const NotificationsToastArea = ({ className }: StyleProps) => {
|
||||
key: getKey(notification),
|
||||
displayData: getDisplayData(notification),
|
||||
}))
|
||||
.filter(
|
||||
({ displayData, notification }) =>
|
||||
displayData && notification.status < NotificationStatus.Unseen
|
||||
)
|
||||
.filter(({ displayData }) => displayData)
|
||||
.slice(-MAX_TOASTS)
|
||||
);
|
||||
}, [notifications, getKey, getDisplayData]);
|
||||
|
||||
if (isMenuOpen) return null;
|
||||
|
||||
const hasMultipleToasts = notificationMap.length > 1;
|
||||
|
||||
return (
|
||||
<StyledToastArea swipeDirection={isMobile ? 'up' : 'right'} className={className}>
|
||||
{hasMultipleToasts && (
|
||||
<StyledToggleButton
|
||||
shape={ButtonShape.Pill}
|
||||
size={ButtonSize.XSmall}
|
||||
isPressed={shouldStackNotifications}
|
||||
onPressedChange={() => setshouldStackNotifications(!shouldStackNotifications)}
|
||||
>
|
||||
<ChevronLeftIcon />
|
||||
</StyledToggleButton>
|
||||
)}
|
||||
|
||||
{notificationMap.map(({ notification, key, displayData }, idx) => (
|
||||
<StyledToast
|
||||
key={key}
|
||||
isStacked={shouldStackNotifications}
|
||||
isOpen={notification.status < NotificationStatus.Unseen}
|
||||
layer={notificationMap.length - 1 - idx}
|
||||
isOpen={notification.status < NotificationStatus.Unseen}
|
||||
notification={notification}
|
||||
slotIcon={displayData.icon}
|
||||
slotTitle={displayData.title}
|
||||
@@ -95,7 +74,7 @@ export const NotificationsToastArea = ({ className }: StyleProps) => {
|
||||
actionAltText={displayData.actionAltText}
|
||||
duration={displayData.toastDuration ?? Infinity}
|
||||
sensitivity={displayData.toastSensitivity}
|
||||
setIsOpen={(isOpen: boolean, isClosedFromTimeout?: boolean) => {
|
||||
setIsOpen={(isOpen, isClosedFromTimeout) => {
|
||||
if (!isOpen)
|
||||
if (isClosedFromTimeout)
|
||||
// Toast timer expired without user interaction
|
||||
@@ -118,58 +97,16 @@ const StyledToastArea = styled(ToastArea)`
|
||||
padding: 0.75rem 0.75rem 0.75rem 0;
|
||||
|
||||
mask-image: linear-gradient(to left, transparent, white 0.5rem);
|
||||
|
||||
@media ${breakpoints.mobile} {
|
||||
width: 100%;
|
||||
position: fixed;
|
||||
}
|
||||
`;
|
||||
|
||||
const StyledToast = styled(Toast)<{ isStacked?: boolean; layer: number }>`
|
||||
const StyledToast = styled(Toast)<{ layer: number }>`
|
||||
// Stacked toast
|
||||
${({ isStacked, layer }) =>
|
||||
isStacked
|
||||
? css`
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: calc(${layer} * 2px);
|
||||
right: calc(${layer} * -2px);
|
||||
`
|
||||
: css`
|
||||
margin-bottom: 0.75rem;
|
||||
`}
|
||||
`;
|
||||
|
||||
const StyledToggleButton = styled(ToggleButton)<{ isPressed: boolean }>`
|
||||
z-index: 2;
|
||||
pointer-events: auto;
|
||||
display: none;
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: calc(50% - 0.75rem);
|
||||
--button-width: 2rem;
|
||||
--button-height: 1rem;
|
||||
|
||||
${StyledToastArea}:hover & {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
> svg {
|
||||
width: 4px;
|
||||
margin-top: 1px;
|
||||
transform: rotate(-90deg);
|
||||
|
||||
${({ isPressed }) =>
|
||||
!isPressed &&
|
||||
css`
|
||||
transform: rotate(90deg);
|
||||
`}
|
||||
}
|
||||
|
||||
@media ${breakpoints.mobile} {
|
||||
display: flex;
|
||||
left: calc(50% - 2rem);
|
||||
--button-width: 4rem;
|
||||
--button-height: 2rem;
|
||||
}
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
${({ layer }) => css`
|
||||
right: calc(${layer} * -2px);
|
||||
top: calc(${layer} * 2px);
|
||||
`}
|
||||
`;
|
||||
|
||||
@@ -27,11 +27,11 @@ import {
|
||||
|
||||
import { DEFAULT_MARKETID } from '@/constants/markets';
|
||||
import { CURRENT_ABACUS_DEPLOYMENT, type DydxNetwork } from '@/constants/networks';
|
||||
import { CLEARED_SIZE_INPUTS, CLEARED_TRADE_INPUTS } from '@/constants/trade';
|
||||
|
||||
import type { RootStore } from '@/state/_store';
|
||||
import { setTradeFormInputs } from '@/state/inputs';
|
||||
import { getInputTradeOptions, getTransferInputs } from '@/state/inputsSelectors';
|
||||
|
||||
import { getInputTradeOptions } from '@/state/inputsSelectors';
|
||||
import { getTransferInputs } from '@/state/inputsSelectors';
|
||||
|
||||
import AbacusRest from './rest';
|
||||
import AbacusAnalytics from './analytics';
|
||||
@@ -43,7 +43,6 @@ import AbacusFormatter from './formatter';
|
||||
import AbacusThreading from './threading';
|
||||
import AbacusFileSystem from './filesystem';
|
||||
import { LocaleSeparators } from '../numbers';
|
||||
|
||||
class AbacusStateManager {
|
||||
private store: RootStore | undefined;
|
||||
private currentMarket: string | undefined;
|
||||
@@ -133,8 +132,6 @@ class AbacusStateManager {
|
||||
this.setTradeValue({ value: null, field: TradeInputField.limitPrice });
|
||||
}
|
||||
|
||||
this.store?.dispatch(setTradeFormInputs(CLEARED_TRADE_INPUTS));
|
||||
|
||||
if (shouldResetSize) {
|
||||
this.setTradeValue({ value: null, field: TradeInputField.size });
|
||||
this.setTradeValue({ value: null, field: TradeInputField.usdcSize });
|
||||
@@ -142,8 +139,6 @@ class AbacusStateManager {
|
||||
if (needsLeverage) {
|
||||
this.setTradeValue({ value: null, field: TradeInputField.leverage });
|
||||
}
|
||||
|
||||
this.store?.dispatch(setTradeFormInputs(CLEARED_SIZE_INPUTS));
|
||||
}
|
||||
};
|
||||
|
||||
|
||||
+34
-97
@@ -2,16 +2,12 @@ import styled, { AnyStyledComponent, css } from 'styled-components';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
import { useEnsName } from 'wagmi';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
||||
import { ButtonSize } from '@/constants/buttons';
|
||||
import { TransferInputField, TransferType } from '@/constants/abacus';
|
||||
|
||||
import { layoutMixins } from '@/styles/layoutMixins';
|
||||
|
||||
import { Details } from '@/components/Details';
|
||||
import { FillsTable, FillsTableColumnKey } from '@/views/tables/FillsTable';
|
||||
import { Icon, IconName } from '@/components/Icon';
|
||||
import { IconName } from '@/components/Icon';
|
||||
import { IconButton, type IconButtonProps } from '@/components/IconButton';
|
||||
import { Panel } from '@/components/Panel';
|
||||
import { Toolbar } from '@/components/Toolbar';
|
||||
@@ -20,22 +16,22 @@ import { OnboardingState } from '@/constants/account';
|
||||
import { DialogTypes } from '@/constants/dialogs';
|
||||
import { STRING_KEYS } from '@/constants/localization';
|
||||
import { AppRoute, PortfolioRoute, HistoryRoute } from '@/constants/routes';
|
||||
import { wallets } from '@/constants/wallets';
|
||||
import { wallets, WalletType } from '@/constants/wallets';
|
||||
import { useAccounts, useStringGetter, useTokenConfigs } from '@/hooks';
|
||||
|
||||
import { getOnboardingState } from '@/state/accountSelectors';
|
||||
import { openDialog } from '@/state/dialogs';
|
||||
|
||||
import abacusStateManager from '@/lib/abacus';
|
||||
import { isTruthy } from '@/lib/isTruthy';
|
||||
import { truncateAddress } from '@/lib/wallet';
|
||||
|
||||
import { layoutMixins } from '@/styles/layoutMixins';
|
||||
|
||||
const ENS_CHAIN_ID = 1; // Ethereum
|
||||
|
||||
const Profile = () => {
|
||||
const stringGetter = useStringGetter();
|
||||
const dispatch = useDispatch();
|
||||
const navigate = useNavigate();
|
||||
|
||||
const onboardingState = useSelector(getOnboardingState);
|
||||
const isConnected = onboardingState !== OnboardingState.Disconnected;
|
||||
@@ -50,48 +46,17 @@ const Profile = () => {
|
||||
|
||||
const actions = [
|
||||
{
|
||||
key: 'deposit',
|
||||
label: stringGetter({ key: STRING_KEYS.DEPOSIT }),
|
||||
icon: { iconName: IconName.Deposit },
|
||||
onClick: () => {
|
||||
dispatch(
|
||||
openDialog({
|
||||
type: DialogTypes.ManageFunds,
|
||||
dialogProps: {
|
||||
selectedTransferType: TransferType.deposit.rawValue,
|
||||
},
|
||||
})
|
||||
);
|
||||
},
|
||||
key: 'settings',
|
||||
label: stringGetter({ key: STRING_KEYS.SETTINGS }),
|
||||
icon: { iconName: IconName.Gear },
|
||||
href: AppRoute.Settings,
|
||||
},
|
||||
{
|
||||
key: 'withdraw',
|
||||
label: stringGetter({ key: STRING_KEYS.WITHDRAW }),
|
||||
icon: { iconName: IconName.Withdraw },
|
||||
isConnected && {
|
||||
key: 'transfers',
|
||||
label: stringGetter({ key: STRING_KEYS.MANAGE_FUNDS }),
|
||||
icon: { iconName: IconName.Transfer },
|
||||
onClick: () => {
|
||||
dispatch(
|
||||
openDialog({
|
||||
type: DialogTypes.ManageFunds,
|
||||
dialogProps: {
|
||||
selectedTransferType: TransferType.withdrawal.rawValue,
|
||||
},
|
||||
})
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'transfer',
|
||||
label: stringGetter({ key: STRING_KEYS.TRANSFER }),
|
||||
icon: { iconName: IconName.Send },
|
||||
onClick: () => {
|
||||
dispatch(
|
||||
openDialog({
|
||||
type: DialogTypes.ManageFunds,
|
||||
dialogProps: {
|
||||
selectedTransferType: TransferType.transferOut.rawValue,
|
||||
},
|
||||
})
|
||||
);
|
||||
dispatch(openDialog({ type: DialogTypes.ManageFunds }));
|
||||
},
|
||||
},
|
||||
isConnected
|
||||
@@ -104,9 +69,9 @@ const Profile = () => {
|
||||
},
|
||||
}
|
||||
: {
|
||||
key: 'connect',
|
||||
label: stringGetter({ key: STRING_KEYS.CONNECT }),
|
||||
icon: { iconName: IconName.Transfer },
|
||||
key: 'wallet',
|
||||
label: stringGetter({ key: STRING_KEYS.WALLET }),
|
||||
icon: { iconComponent: wallets[walletType || WalletType.OtherWallet].icon },
|
||||
onClick: () => {
|
||||
dispatch(openDialog({ type: DialogTypes.Onboarding }));
|
||||
},
|
||||
@@ -142,7 +107,12 @@ const Profile = () => {
|
||||
{actions.map(({ key, label, href, icon, onClick }) => {
|
||||
const action = (
|
||||
<>
|
||||
<Styled.ActionButton {...icon} size={ButtonSize.Large} onClick={onClick} />
|
||||
<Styled.ActionButton
|
||||
{...icon}
|
||||
size={ButtonSize.Large}
|
||||
onClick={onClick}
|
||||
isCloseIcon={icon.iconName === IconName.Close}
|
||||
/>
|
||||
<span>{label}</span>
|
||||
</>
|
||||
);
|
||||
@@ -155,26 +125,6 @@ const Profile = () => {
|
||||
);
|
||||
})}
|
||||
</Styled.Actions>
|
||||
<Styled.EqualGrid>
|
||||
<Styled.PanelButton
|
||||
slotHeader={
|
||||
<Styled.InlineRow>
|
||||
<Icon iconName={IconName.Gear} />
|
||||
{stringGetter({ key: STRING_KEYS.SETTINGS })}
|
||||
</Styled.InlineRow>
|
||||
}
|
||||
onClick={() => navigate(AppRoute.Settings)}
|
||||
/>
|
||||
<Styled.PanelButton
|
||||
slotHeader={
|
||||
<Styled.InlineRow>
|
||||
<Icon iconName={IconName.HelpCircle} />
|
||||
{stringGetter({ key: STRING_KEYS.HELP })}
|
||||
</Styled.InlineRow>
|
||||
}
|
||||
onClick={() => dispatch(openDialog({ type: DialogTypes.Help }))}
|
||||
/>
|
||||
</Styled.EqualGrid>
|
||||
|
||||
<Styled.EqualGrid>
|
||||
<Panel
|
||||
@@ -233,7 +183,7 @@ Styled.MobileProfileLayout = styled.div`
|
||||
${layoutMixins.contentContainerPage}
|
||||
|
||||
gap: 1rem;
|
||||
padding: 1.25rem 0.9rem;
|
||||
padding: 1.25rem;
|
||||
`;
|
||||
|
||||
Styled.Header = styled.header`
|
||||
@@ -298,21 +248,19 @@ Styled.Actions = styled(Toolbar)`
|
||||
}
|
||||
`;
|
||||
|
||||
Styled.ActionButton = styled(IconButton)<{ iconName?: IconName }>`
|
||||
Styled.ActionButton = styled(IconButton)<{ isCloseIcon?: boolean }>`
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
${({ iconName }) =>
|
||||
iconName === IconName.Close
|
||||
? css`
|
||||
--button-textColor: var(--color-negative);
|
||||
--button-icon-size: 0.75em;
|
||||
`
|
||||
: iconName === IconName.Transfer &&
|
||||
css`
|
||||
--button-icon-size: 1.25em;
|
||||
--button-textColor: var(--color-text-2);
|
||||
--button-backgroundColor: var(--color-accent);
|
||||
`}
|
||||
${({ isCloseIcon }) =>
|
||||
isCloseIcon &&
|
||||
css`
|
||||
--button-textColor: var(--color-negative);
|
||||
|
||||
svg {
|
||||
width: 0.875em;
|
||||
height: 0.875em;
|
||||
}
|
||||
`}
|
||||
`;
|
||||
|
||||
Styled.EqualGrid = styled.div`
|
||||
@@ -361,14 +309,3 @@ Styled.TablePanel = styled(Panel)`
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
Styled.InlineRow = styled.div`
|
||||
${layoutMixins.inlineRow}
|
||||
padding: 1rem;
|
||||
gap: 0.5rem;
|
||||
`;
|
||||
|
||||
Styled.PanelButton = styled(Panel)`
|
||||
--panel-paddingY: 0
|
||||
--panel-paddingX:0;
|
||||
`;
|
||||
|
||||
@@ -39,7 +39,7 @@ export const DYDXBalancePanel = () => {
|
||||
<AssetIcon symbol={chainTokenLabel} />
|
||||
{chainTokenLabel}
|
||||
</Styled.Title>
|
||||
<Styled.ActionButtons>
|
||||
<Styled.ReceiveAndTransferButtons>
|
||||
{!canAccountTrade ? (
|
||||
<OnboardingTriggerButton size={ButtonSize.Small} />
|
||||
) : (
|
||||
@@ -52,7 +52,7 @@ export const DYDXBalancePanel = () => {
|
||||
{stringGetter({ key: STRING_KEYS.TRANSFER })}
|
||||
</Button>
|
||||
)}
|
||||
</Styled.ActionButtons>
|
||||
</Styled.ReceiveAndTransferButtons>
|
||||
</Styled.Header>
|
||||
}
|
||||
>
|
||||
@@ -134,7 +134,7 @@ Styled.Title = styled.h3`
|
||||
}
|
||||
`;
|
||||
|
||||
Styled.ActionButtons = styled(Toolbar)`
|
||||
Styled.ReceiveAndTransferButtons = styled(Toolbar)`
|
||||
${layoutMixins.inlineRow}
|
||||
--stickyArea-topHeight: max-content;
|
||||
gap: 0.5rem;
|
||||
|
||||
@@ -7,12 +7,7 @@ import { layoutMixins } from '@/styles/layoutMixins';
|
||||
|
||||
import { TradeLayouts } from '@/constants/layout';
|
||||
|
||||
import {
|
||||
useBreakpoints,
|
||||
useCurrentMarketId,
|
||||
usePageTitlePriceUpdates,
|
||||
useTradeFormInputs,
|
||||
} from '@/hooks';
|
||||
import { useBreakpoints, useCurrentMarketId, usePageTitlePriceUpdates } from '@/hooks';
|
||||
|
||||
import { calculateCanAccountTrade } from '@/state/accountCalculators';
|
||||
import { getSelectedTradeLayout } from '@/state/layoutSelectors';
|
||||
@@ -42,7 +37,6 @@ const TradePage = () => {
|
||||
const [isHorizontalPanelOpen, setIsHorizontalPanelOpen] = useState(true);
|
||||
|
||||
usePageTitlePriceUpdates();
|
||||
useTradeFormInputs();
|
||||
|
||||
return isTablet ? (
|
||||
<Styled.TradeLayoutMobile>
|
||||
|
||||
+1
-15
@@ -1,5 +1,4 @@
|
||||
import { createSlice, type PayloadAction } from '@reduxjs/toolkit';
|
||||
import assign from 'lodash/assign';
|
||||
|
||||
import type {
|
||||
InputError,
|
||||
@@ -10,14 +9,9 @@ import type {
|
||||
TransferInputs,
|
||||
} from '@/constants/abacus';
|
||||
|
||||
import { CLEARED_SIZE_INPUTS, CLEARED_TRADE_INPUTS } from '@/constants/trade';
|
||||
|
||||
type TradeFormInputs = typeof CLEARED_TRADE_INPUTS & typeof CLEARED_SIZE_INPUTS;
|
||||
|
||||
export interface InputsState {
|
||||
current?: Nullable<string>;
|
||||
inputErrors?: Nullable<InputError[]>;
|
||||
tradeFormInputs: TradeFormInputs;
|
||||
tradeInputs?: Nullable<TradeInputs>;
|
||||
closePositionInputs?: Nullable<ClosePositionInputs>;
|
||||
transferInputs?: Nullable<TransferInputs>;
|
||||
@@ -26,10 +20,6 @@ export interface InputsState {
|
||||
const initialState: InputsState = {
|
||||
current: undefined,
|
||||
inputErrors: undefined,
|
||||
tradeFormInputs: {
|
||||
...CLEARED_TRADE_INPUTS,
|
||||
...CLEARED_SIZE_INPUTS,
|
||||
},
|
||||
tradeInputs: undefined,
|
||||
transferInputs: undefined,
|
||||
};
|
||||
@@ -50,11 +40,7 @@ export const inputsSlice = createSlice({
|
||||
transferInputs: transfer,
|
||||
};
|
||||
},
|
||||
|
||||
setTradeFormInputs: (state, action: PayloadAction<Partial<TradeFormInputs>>) => {
|
||||
state.tradeFormInputs = assign({}, state.tradeFormInputs, action.payload);
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const { setInputs, setTradeFormInputs } = inputsSlice.actions;
|
||||
export const { setInputs } = inputsSlice.actions;
|
||||
|
||||
@@ -120,8 +120,3 @@ export const useTradeFormData = () => {
|
||||
shallowEqual
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* @returns Tradeform Input states for display. Abacus inputs should track these values.
|
||||
*/
|
||||
export const getTradeFormInputs = (state: RootState) => state.inputs.tradeFormInputs;
|
||||
|
||||
@@ -151,8 +151,6 @@ export const formMixins: Record<
|
||||
--form-input-paddingY: 0.5rem;
|
||||
--form-input-paddingX: 1rem;
|
||||
|
||||
height: 100%;
|
||||
|
||||
label {
|
||||
--label-textColor: var(--color-text-0);
|
||||
}
|
||||
|
||||
@@ -2,9 +2,7 @@ import styled, { type AnyStyledComponent } from 'styled-components';
|
||||
import { shallowEqual, useSelector } from 'react-redux';
|
||||
|
||||
import { STRING_KEYS } from '@/constants/localization';
|
||||
import { MARKETS_TO_DISPLAY } from '@/constants/markets';
|
||||
import { useBreakpoints, useStringGetter } from '@/hooks';
|
||||
import { testFlags } from '@/hooks/useTestFlags';
|
||||
import { breakpoints } from '@/styles';
|
||||
import { layoutMixins } from '@/styles/layoutMixins';
|
||||
|
||||
@@ -34,7 +32,6 @@ export const ExchangeBillboards: React.FC<ExchangeBillboardsProps> = ({
|
||||
|
||||
Object.values(perpetualMarkets)
|
||||
.filter(Boolean)
|
||||
.filter(({ id }) => (testFlags.displayAllMarkets ? true : MARKETS_TO_DISPLAY.includes(id)))
|
||||
.forEach(({ oraclePrice, perpetual }) => {
|
||||
const { volume24H, trades24H, openInterest = 0 } = perpetual || {};
|
||||
volume24HUSDC += volume24H ?? 0;
|
||||
@@ -63,7 +60,7 @@ export const ExchangeBillboards: React.FC<ExchangeBillboardsProps> = ({
|
||||
},
|
||||
{
|
||||
key: 'trades',
|
||||
labelKey: isTablet ? STRING_KEYS.TRADES_24H : STRING_KEYS.TRADES,
|
||||
labelKey: STRING_KEYS.TRADES,
|
||||
value: totalTrades24H || undefined,
|
||||
type: isTablet ? OutputType.CompactNumber : OutputType.Number,
|
||||
subLabelKey: !isTablet && STRING_KEYS.TRADES_LABEL,
|
||||
|
||||
@@ -5,7 +5,7 @@ import { createSelector } from 'reselect';
|
||||
|
||||
import { TradeInputField } from '@/constants/abacus';
|
||||
import { TradeTypes } from '@/constants/trade';
|
||||
import { STRING_KEYS, StringKey } from '@/constants/localization';
|
||||
import { STRING_KEYS } from '@/constants/localization';
|
||||
import { useStringGetter } from '@/hooks';
|
||||
import { layoutMixins } from '@/styles/layoutMixins';
|
||||
|
||||
@@ -30,8 +30,7 @@ const useTradeTypeOptions = () => {
|
||||
const allTradeTypeItems = typeOptions?.toArray()?.map(({ type, stringKey }) => ({
|
||||
value: type,
|
||||
label: stringGetter({
|
||||
key:
|
||||
type === TradeTypes.TAKE_PROFIT ? STRING_KEYS.TAKE_PROFIT_LIMIT : (stringKey as StringKey),
|
||||
key: type === TradeTypes.TAKE_PROFIT ? STRING_KEYS.TAKE_PROFIT_LIMIT : stringKey,
|
||||
}),
|
||||
}));
|
||||
|
||||
|
||||
@@ -1,15 +1,12 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { useState } from 'react';
|
||||
import styled, { type AnyStyledComponent } from 'styled-components';
|
||||
|
||||
import { TransferInputField, TransferType } from '@/constants/abacus';
|
||||
import { isMainnet } from '@/constants/networks';
|
||||
import { layoutMixins } from '@/styles/layoutMixins';
|
||||
|
||||
import { DepositForm } from '@/views/forms/AccountManagementForms/DepositForm';
|
||||
import { TestnetDepositForm } from '@/views/forms/AccountManagementForms/TestnetDepositForm';
|
||||
|
||||
import abacusStateManager from '@/lib/abacus';
|
||||
|
||||
type ElementProps = {
|
||||
onDeposit?: () => void;
|
||||
};
|
||||
@@ -17,20 +14,6 @@ type ElementProps = {
|
||||
export const DepositDialogContent = ({ onDeposit }: ElementProps) => {
|
||||
const [showFaucet, setShowFaucet] = useState(!isMainnet);
|
||||
|
||||
useEffect(() => {
|
||||
abacusStateManager.setTransferValue({
|
||||
field: TransferInputField.type,
|
||||
value: TransferType.deposit.rawValue,
|
||||
});
|
||||
|
||||
return () => {
|
||||
abacusStateManager.setTransferValue({
|
||||
field: TransferInputField.type,
|
||||
value: null,
|
||||
});
|
||||
};
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<Styled.Content>
|
||||
{isMainnet || !showFaucet ? (
|
||||
|
||||
@@ -18,14 +18,13 @@ import abacusStateManager from '@/lib/abacus';
|
||||
import { DepositDialogContent } from './DepositDialog/DepositDialogContent';
|
||||
|
||||
type ElementProps = {
|
||||
selectedTransferType?: string;
|
||||
setIsOpen?: (open: boolean) => void;
|
||||
};
|
||||
|
||||
export const ManageFundsDialog = ({ setIsOpen, selectedTransferType }: ElementProps) => {
|
||||
export const ManageFundsDialog = ({ setIsOpen }: ElementProps) => {
|
||||
const stringGetter = useStringGetter();
|
||||
const { type } = useSelector(getTransferInputs, shallowEqual) || {};
|
||||
const currentType = type?.rawValue ?? selectedTransferType ?? TransferType.deposit.rawValue;
|
||||
const currentType = type?.rawValue ?? TransferType.deposit.rawValue;
|
||||
|
||||
const closeDialog = () => setIsOpen?.(false);
|
||||
|
||||
|
||||
@@ -7,7 +7,6 @@ import { STRING_KEYS } from '@/constants/localization';
|
||||
import { ButtonAction } from '@/constants/buttons';
|
||||
|
||||
import { layoutMixins } from '@/styles/layoutMixins';
|
||||
import { formMixins } from '@/styles/formMixins';
|
||||
|
||||
import { Button } from '@/components/Button';
|
||||
import { Link } from '@/components/Link';
|
||||
@@ -55,14 +54,14 @@ export const AcknowledgeTerms = ({ onClose, onContinue }: ElementProps) => {
|
||||
<li>{stringGetter({ key: STRING_KEYS.TOS_LINE5 })}</li>
|
||||
</ul>
|
||||
</Styled.TOS>
|
||||
<Styled.Footer>
|
||||
<Styled.Row>
|
||||
<Styled.Button onClick={onClose} action={ButtonAction.Base}>
|
||||
{stringGetter({ key: STRING_KEYS.CLOSE })}
|
||||
</Styled.Button>
|
||||
<Styled.Button onClick={onAcknowledgement} action={ButtonAction.Primary}>
|
||||
{stringGetter({ key: STRING_KEYS.I_AGREE })}
|
||||
</Styled.Button>
|
||||
</Styled.Footer>
|
||||
</Styled.Row>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -88,9 +87,8 @@ Styled.TOS = styled.section`
|
||||
}
|
||||
`;
|
||||
|
||||
Styled.Footer = styled.div`
|
||||
${formMixins.footer};
|
||||
${layoutMixins.row}
|
||||
Styled.Row = styled.div`
|
||||
${layoutMixins.row};
|
||||
|
||||
gap: 1rem;
|
||||
`;
|
||||
|
||||
@@ -8,7 +8,7 @@ import { STRING_KEYS } from '@/constants/localization';
|
||||
|
||||
import { Button } from '@/components/Button';
|
||||
|
||||
import { forceOpenDialog } from '@/state/dialogs';
|
||||
import { openDialog } from '@/state/dialogs';
|
||||
import { getOnboardingState } from '@/state/accountSelectors';
|
||||
import { OnboardingState } from '@/constants/account';
|
||||
|
||||
@@ -26,7 +26,7 @@ export const OnboardingTriggerButton = ({ size = ButtonSize.Small }: StyleProps)
|
||||
<Button
|
||||
action={ButtonAction.Primary}
|
||||
size={size}
|
||||
onClick={() => dispatch(forceOpenDialog({ type: DialogTypes.Onboarding }))}
|
||||
onClick={() => dispatch(openDialog({ type: DialogTypes.Onboarding }))}
|
||||
>
|
||||
{
|
||||
{
|
||||
|
||||
@@ -53,18 +53,6 @@ export const usePreferenceMenu = () => {
|
||||
),
|
||||
onSelect: () => toggleNotifPreference(NotificationType.SquidTransfer),
|
||||
},
|
||||
{
|
||||
value: NotificationType.ReleaseUpdates,
|
||||
label: "Release Updates",
|
||||
slotAfter: (
|
||||
<Switch
|
||||
name={NotificationType.ReleaseUpdates}
|
||||
checked={enabledNotifs[NotificationType.ReleaseUpdates]}
|
||||
onCheckedChange={(enabled: boolean) => null}
|
||||
/>
|
||||
),
|
||||
onSelect: () => toggleNotifPreference(NotificationType.ReleaseUpdates),
|
||||
}
|
||||
],
|
||||
}),
|
||||
[stringGetter, enabledNotifs]
|
||||
|
||||
@@ -0,0 +1,124 @@
|
||||
import { useState } from 'react';
|
||||
import styled, { type AnyStyledComponent } from 'styled-components';
|
||||
|
||||
import { STRING_KEYS } from '@/constants/localization';
|
||||
import { DydxChainAsset } from '@/constants/wallets';
|
||||
|
||||
import { formMixins } from '@/styles/formMixins';
|
||||
import { layoutMixins } from '@/styles/layoutMixins';
|
||||
import { useAccounts, useTokenConfigs, useStringGetter } from '@/hooks';
|
||||
|
||||
import { AssetIcon } from '@/components/AssetIcon';
|
||||
import { CopyButton } from '@/components/CopyButton';
|
||||
import { Dialog } from '@/components/Dialog';
|
||||
import { QrCode } from '@/components/QrCode';
|
||||
import { SelectItem, SelectMenu } from '@/components/SelectMenu';
|
||||
import { WithDetailsReceipt } from '@/components/WithDetailsReceipt';
|
||||
|
||||
import { truncateAddress } from '@/lib/wallet';
|
||||
|
||||
import { OnboardingTriggerButton } from './OnboardingTriggerButton';
|
||||
|
||||
type ElementProps = {
|
||||
selectedAsset?: DydxChainAsset;
|
||||
setIsOpen: (open: boolean) => void;
|
||||
};
|
||||
|
||||
export const ReceiveDialog = ({ selectedAsset = DydxChainAsset.CHAINTOKEN, setIsOpen }: ElementProps) => {
|
||||
const stringGetter = useStringGetter();
|
||||
const { dydxAddress } = useAccounts();
|
||||
const { chainTokenLabel, usdcLabel } = useTokenConfigs();
|
||||
|
||||
const [asset, setAsset] = useState(selectedAsset);
|
||||
|
||||
const assetOptions = [
|
||||
{
|
||||
value: DydxChainAsset.USDC,
|
||||
label: (
|
||||
<Styled.InlineRow>
|
||||
<AssetIcon symbol="USDC" /> {usdcLabel}
|
||||
</Styled.InlineRow>
|
||||
),
|
||||
},
|
||||
{
|
||||
value: DydxChainAsset.CHAINTOKEN,
|
||||
label: (
|
||||
<Styled.InlineRow>
|
||||
{/* TODO: conditionally display the native token assetIcon */}
|
||||
{/* <AssetIcon symbol="DYDX" /> */}
|
||||
{chainTokenLabel}
|
||||
</Styled.InlineRow>
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
return (
|
||||
<Styled.Dialog isOpen setIsOpen={setIsOpen} title={stringGetter({ key: STRING_KEYS.RECEIVE })}>
|
||||
<Styled.Content>
|
||||
<Styled.SelectMenu
|
||||
label={stringGetter({ key: STRING_KEYS.ASSET })}
|
||||
value={asset}
|
||||
onValueChange={setAsset}
|
||||
>
|
||||
{assetOptions.map(({ value, label }) => (
|
||||
<Styled.SelectItem key={value} value={value} label={label} />
|
||||
))}
|
||||
</Styled.SelectMenu>
|
||||
|
||||
{!dydxAddress ? (
|
||||
<OnboardingTriggerButton />
|
||||
) : (
|
||||
<>
|
||||
<Styled.WithDetailsReceipt
|
||||
side="bottom"
|
||||
detailItems={[
|
||||
{
|
||||
key: 'address',
|
||||
label: stringGetter({ key: STRING_KEYS.DYDX_CHAIN_ADDRESS }),
|
||||
value: truncateAddress(dydxAddress),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<QrCode hasLogo value={dydxAddress!} />
|
||||
</Styled.WithDetailsReceipt>
|
||||
<CopyButton value={dydxAddress} />
|
||||
</>
|
||||
)}
|
||||
</Styled.Content>
|
||||
</Styled.Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
const Styled: Record<string, AnyStyledComponent> = {};
|
||||
|
||||
Styled.Dialog = styled(Dialog)`
|
||||
--dialog-content-paddingTop: var(--default-border-width);
|
||||
--dialog-width: 20rem;
|
||||
`;
|
||||
|
||||
Styled.Content = styled.div`
|
||||
${formMixins.inputsColumn}
|
||||
gap: 1.25rem;
|
||||
`;
|
||||
|
||||
Styled.SelectMenu = styled(SelectMenu)`
|
||||
${formMixins.inputSelectMenu}
|
||||
--form-input-height: 3.5rem;
|
||||
`;
|
||||
|
||||
Styled.SelectItem = styled(SelectItem)`
|
||||
${formMixins.inputSelectMenuItem}
|
||||
`;
|
||||
|
||||
Styled.InlineRow = styled.span`
|
||||
${layoutMixins.inlineRow}
|
||||
height: 100%;
|
||||
|
||||
img {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
`;
|
||||
|
||||
Styled.WithDetailsReceipt = styled(WithDetailsReceipt)`
|
||||
border-radius: 0.75em;
|
||||
`;
|
||||
@@ -2,10 +2,9 @@ import { type FormEvent, useCallback, useEffect, useMemo, useState } from 'react
|
||||
import styled, { type AnyStyledComponent } from 'styled-components';
|
||||
import { type NumberFormatValues } from 'react-number-format';
|
||||
import { shallowEqual, useSelector } from 'react-redux';
|
||||
import { Abi, parseUnits } from 'viem';
|
||||
import { parseUnits } from 'viem';
|
||||
|
||||
import erc20 from '@/abi/erc20.json';
|
||||
import erc20_usdt from '@/abi/erc20_usdt.json';
|
||||
import { TransferInputField, TransferInputTokenResource, TransferType } from '@/constants/abacus';
|
||||
import { AlertType } from '@/constants/alerts';
|
||||
import { ButtonSize } from '@/constants/buttons';
|
||||
@@ -192,23 +191,15 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
|
||||
const sourceAmountBN = parseUnits(debouncedAmount, sourceToken.decimals);
|
||||
|
||||
if (sourceAmountBN > (allowance as bigint)) {
|
||||
const simulateApprove = async (abi: Abi) =>
|
||||
publicClientWagmi.simulateContract({
|
||||
account: evmAddress,
|
||||
address: sourceToken.address as EvmAddress,
|
||||
abi,
|
||||
functionName: 'approve',
|
||||
args: [requestPayload.targetAddress as EvmAddress, sourceAmountBN],
|
||||
});
|
||||
const { request } = await publicClientWagmi.simulateContract({
|
||||
account: evmAddress,
|
||||
address: sourceToken.address as EvmAddress,
|
||||
abi: erc20,
|
||||
functionName: 'approve',
|
||||
args: [requestPayload.targetAddress as EvmAddress, sourceAmountBN],
|
||||
});
|
||||
|
||||
let result;
|
||||
try {
|
||||
result = await simulateApprove(erc20 as Abi);
|
||||
} catch (e) {
|
||||
result = await simulateApprove(erc20_usdt as Abi);
|
||||
}
|
||||
|
||||
const approveTx = await signerWagmi.writeContract(result.request);
|
||||
const approveTx = await signerWagmi.writeContract(request);
|
||||
await publicClientWagmi.waitForTransactionReceipt({
|
||||
hash: approveTx,
|
||||
});
|
||||
|
||||
@@ -2,16 +2,14 @@ import { useState, type FormEvent, useEffect } from 'react';
|
||||
import { shallowEqual, useSelector } from 'react-redux';
|
||||
import styled, { type AnyStyledComponent } from 'styled-components';
|
||||
|
||||
import { ButtonAction, ButtonSize, ButtonType } from '@/constants/buttons';
|
||||
import { ButtonAction, ButtonType } from '@/constants/buttons';
|
||||
import { STRING_KEYS } from '@/constants/localization';
|
||||
import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
|
||||
import { useAccounts, useStringGetter, useSubaccount } from '@/hooks';
|
||||
import { formMixins } from '@/styles/formMixins';
|
||||
|
||||
import { OnboardingTriggerButton } from '@/views/dialogs/OnboardingTriggerButton';
|
||||
import { Button } from '@/components/Button';
|
||||
|
||||
import { calculateCanAccountTrade } from '@/state/accountCalculators';
|
||||
import { getSubaccount } from '@/state/accountSelectors';
|
||||
import { getSelectedNetwork } from '@/state/appSelectors';
|
||||
|
||||
@@ -28,7 +26,6 @@ export const TestnetDepositForm = ({ onDeposit, onError }: DepositFormProps) =>
|
||||
const { requestFaucetFunds } = useSubaccount();
|
||||
const subAccount = useSelector(getSubaccount, shallowEqual);
|
||||
const selectedNetwork = useSelector(getSelectedNetwork);
|
||||
const canAccountTrade = useSelector(calculateCanAccountTrade, shallowEqual);
|
||||
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
|
||||
@@ -75,13 +72,9 @@ export const TestnetDepositForm = ({ onDeposit, onError }: DepositFormProps) =>
|
||||
})}
|
||||
</p>
|
||||
<Styled.Footer>
|
||||
{!canAccountTrade ? (
|
||||
<OnboardingTriggerButton size={ButtonSize.Base} />
|
||||
) : (
|
||||
<Button action={ButtonAction.Primary} type={ButtonType.Submit} state={{ isLoading }}>
|
||||
{stringGetter({ key: STRING_KEYS.DEPOSIT_FUNDS })}
|
||||
</Button>
|
||||
)}
|
||||
<Button action={ButtonAction.Primary} type={ButtonType.Submit} state={{ isLoading }}>
|
||||
{stringGetter({ key: STRING_KEYS.DEPOSIT_FUNDS })}
|
||||
</Button>
|
||||
</Styled.Footer>
|
||||
</Styled.Form>
|
||||
);
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { type FormEvent, useState, Ref, useCallback, useEffect } from 'react';
|
||||
import { type FormEvent, useState, Ref, useCallback } from 'react';
|
||||
import styled, { AnyStyledComponent, css } from 'styled-components';
|
||||
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
|
||||
import { shallowEqual, useSelector } from 'react-redux';
|
||||
import type { NumberFormatValues, SourceInfo } from 'react-number-format';
|
||||
|
||||
import { AlertType } from '@/constants/alerts';
|
||||
@@ -37,8 +37,7 @@ import { WithTooltip } from '@/components/WithTooltip';
|
||||
|
||||
import { Orderbook } from '@/views/tables/Orderbook';
|
||||
|
||||
import { setTradeFormInputs } from '@/state/inputs';
|
||||
import { getCurrentInput, getTradeFormInputs, useTradeFormData } from '@/state/inputsSelectors';
|
||||
import { getCurrentInput, useTradeFormData } from '@/state/inputsSelectors';
|
||||
import { getCurrentMarketConfig } from '@/state/perpetualsSelectors';
|
||||
|
||||
import abacusStateManager from '@/lib/abacus';
|
||||
@@ -81,7 +80,6 @@ export const TradeForm = ({
|
||||
const [placeOrderError, setPlaceOrderError] = useState<string>();
|
||||
const [showOrderbook, setShowOrderbook] = useState(false);
|
||||
|
||||
const dispatch = useDispatch();
|
||||
const stringGetter = useStringGetter();
|
||||
const { placeOrder } = useSubaccount();
|
||||
|
||||
@@ -100,21 +98,18 @@ export const TradeForm = ({
|
||||
tradeErrors,
|
||||
} = useTradeFormData();
|
||||
|
||||
const { limitPrice, triggerPrice, trailingPercent } = price || {};
|
||||
const currentInput = useSelector(getCurrentInput);
|
||||
const { tickSizeDecimals, stepSizeDecimals } =
|
||||
useSelector(getCurrentMarketConfig, shallowEqual) || {};
|
||||
|
||||
const tradeFormInputValues = useSelector(getTradeFormInputs, shallowEqual);
|
||||
const { limitPriceInput, triggerPriceInput, trailingPercentInput } = tradeFormInputValues;
|
||||
|
||||
const needsAdvancedOptions =
|
||||
needsGoodUntil || timeInForceOptions || executionOptions || needsPostOnly || needsReduceOnly;
|
||||
|
||||
const tradeFormInputs: TradeBoxInputConfig[] = [];
|
||||
|
||||
const isInputFilled =
|
||||
Object.values(tradeFormInputValues).some((val) => val !== '') ||
|
||||
Object.values(price || {}).some((val) => !!val) ||
|
||||
Object.values(price || {}).some((val) => val != null) ||
|
||||
[size?.size, size?.usdcSize, size?.leverage].some((val) => val != null);
|
||||
|
||||
const hasInputErrors =
|
||||
@@ -202,10 +197,13 @@ export const TradeForm = ({
|
||||
<Tag>USD</Tag>
|
||||
</>
|
||||
),
|
||||
onChange: ({ value }: NumberFormatValues) => {
|
||||
dispatch(setTradeFormInputs({ triggerPriceInput: value }));
|
||||
onChange: ({ floatValue }: NumberFormatValues) => {
|
||||
abacusStateManager.setTradeValue({
|
||||
value: floatValue,
|
||||
field: TradeInputField.triggerPrice,
|
||||
});
|
||||
},
|
||||
value: triggerPriceInput ?? '',
|
||||
value: triggerPrice ?? '',
|
||||
decimals: tickSizeDecimals || USD_DECIMALS,
|
||||
});
|
||||
}
|
||||
@@ -222,10 +220,10 @@ export const TradeForm = ({
|
||||
<Tag>USD</Tag>
|
||||
</>
|
||||
),
|
||||
onChange: ({ value }: NumberFormatValues) => {
|
||||
dispatch(setTradeFormInputs({ limitPriceInput: value }));
|
||||
onChange: ({ floatValue }: NumberFormatValues) => {
|
||||
abacusStateManager.setTradeValue({ value: floatValue, field: TradeInputField.limitPrice });
|
||||
},
|
||||
value: limitPriceInput,
|
||||
value: limitPrice ?? '',
|
||||
decimals: tickSizeDecimals || USD_DECIMALS,
|
||||
});
|
||||
}
|
||||
@@ -239,10 +237,13 @@ export const TradeForm = ({
|
||||
{stringGetter({ key: STRING_KEYS.TRAILING_PERCENT })}
|
||||
</WithTooltip>
|
||||
),
|
||||
onChange: ({ value }: NumberFormatValues) => {
|
||||
dispatch(setTradeFormInputs({ trailingPercentInput: value }));
|
||||
onChange: ({ floatValue }: NumberFormatValues) => {
|
||||
abacusStateManager.setTradeValue({
|
||||
value: floatValue,
|
||||
field: TradeInputField.trailingPercent,
|
||||
});
|
||||
},
|
||||
value: trailingPercentInput ?? '',
|
||||
value: trailingPercent ?? '',
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@@ -30,8 +30,8 @@ import { getSelectedOrderSide, hasPositionSideChanged } from '@/lib/tradeData';
|
||||
import { LeverageSlider } from './LeverageSlider';
|
||||
|
||||
type ElementProps = {
|
||||
leverageInputValue: string;
|
||||
setLeverageInputValue: (value: string) => void;
|
||||
leverageInputValue: Nullable<number>;
|
||||
setLeverageInputValue: Dispatch<SetStateAction<Nullable<number>>>;
|
||||
};
|
||||
|
||||
export const MarketLeverageInput = ({
|
||||
@@ -66,7 +66,7 @@ export const MarketLeverageInput = ({
|
||||
const newLeverage = MustBigNumber(floatValue).toFixed();
|
||||
|
||||
if (value === '' || newLeverage === 'NaN' || !floatValue) {
|
||||
setLeverageInputValue('');
|
||||
setLeverageInputValue(null);
|
||||
abacusStateManager.setTradeValue({
|
||||
value: null,
|
||||
field: TradeInputField.leverage,
|
||||
@@ -84,7 +84,7 @@ export const MarketLeverageInput = ({
|
||||
? newLeverageBN.abs().negated()
|
||||
: newLeverageBN.abs();
|
||||
|
||||
setLeverageInputValue(newLeverageSignedBN.toString());
|
||||
setLeverageInputValue(newLeverageSignedBN.toNumber());
|
||||
|
||||
abacusStateManager.setTradeValue({
|
||||
value: newLeverageSignedBN.toFixed(LEVERAGE_DECIMALS),
|
||||
@@ -98,11 +98,11 @@ export const MarketLeverageInput = ({
|
||||
if (leveragePosition === PositionSide.None) return;
|
||||
|
||||
const inputValue = leverageInputValue || currentLeverage;
|
||||
const newInputValue = MustBigNumber(inputValue).negated().toFixed(LEVERAGE_DECIMALS);
|
||||
const newInputValue = MustBigNumber(inputValue).negated().toNumber();
|
||||
|
||||
setLeverageInputValue(newInputValue);
|
||||
abacusStateManager.setTradeValue({
|
||||
value: newInputValue,
|
||||
value: newInputValue.toFixed(LEVERAGE_DECIMALS),
|
||||
field: TradeInputField.leverage,
|
||||
});
|
||||
};
|
||||
|
||||
@@ -9,7 +9,6 @@ import { TRADE_TYPE_STRINGS, MobilePlaceOrderSteps } from '@/constants/trade';
|
||||
|
||||
import { useStringGetter, useTokenConfigs } from '@/hooks';
|
||||
|
||||
import { AssetIcon } from '@/components/AssetIcon';
|
||||
import { Button } from '@/components/Button';
|
||||
import { Output, OutputType, ShowSign } from '@/components/Output';
|
||||
import { WithDetailsReceipt } from '@/components/WithDetailsReceipt';
|
||||
@@ -78,11 +77,7 @@ export const PlaceOrderButtonAndReceipt = ({
|
||||
},
|
||||
{
|
||||
key: 'fee',
|
||||
label: (
|
||||
<WithTooltip tooltip="fee" side="right">
|
||||
{stringGetter({ key: STRING_KEYS.FEE })}
|
||||
</WithTooltip>
|
||||
),
|
||||
label: stringGetter({ key: STRING_KEYS.FEE }),
|
||||
value: <Output type={OutputType.Fiat} value={fee} useGrouping />,
|
||||
},
|
||||
{
|
||||
@@ -90,7 +85,7 @@ export const PlaceOrderButtonAndReceipt = ({
|
||||
label: (
|
||||
<>
|
||||
{stringGetter({ key: STRING_KEYS.MAXIMUM_REWARDS })}
|
||||
<AssetIcon symbol={chainTokenLabel} />
|
||||
{/* <AssetIcon symbol="DYDX" /> */}
|
||||
</>
|
||||
),
|
||||
value: (
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
|
||||
import { shallowEqual, useSelector } from 'react-redux';
|
||||
import styled, { AnyStyledComponent } from 'styled-components';
|
||||
|
||||
import { TradeInputField } from '@/constants/abacus';
|
||||
@@ -20,13 +20,8 @@ import { Icon, IconName } from '@/components/Icon';
|
||||
import { ToggleButton } from '@/components/ToggleButton';
|
||||
|
||||
import { getCurrentMarketAssetData } from '@/state/assetsSelectors';
|
||||
import { setTradeFormInputs } from '@/state/inputs';
|
||||
|
||||
import {
|
||||
getInputTradeSizeData,
|
||||
getInputTradeOptions,
|
||||
getTradeFormInputs,
|
||||
} from '@/state/inputsSelectors';
|
||||
import { getInputTradeSizeData, getInputTradeOptions } from '@/state/inputsSelectors';
|
||||
|
||||
import { getCurrentMarketConfig } from '@/state/perpetualsSelectors';
|
||||
|
||||
@@ -36,8 +31,12 @@ import { MustBigNumber } from '@/lib/numbers';
|
||||
import { MarketLeverageInput } from './MarketLeverageInput';
|
||||
|
||||
export const TradeSizeInputs = () => {
|
||||
const [sizeInputValue, setSizeInputValue] = useState<number | null>();
|
||||
const [usdcInputValue, setUsdcInputValue] = useState<number | null>();
|
||||
const [leverageInputValue, setLeverageInputValue] = useState<number | null>();
|
||||
|
||||
const [showUSDCInputOnTablet, setShowUSDCInputOnTablet] = useState(false);
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const stringGetter = useStringGetter();
|
||||
const { isTablet } = useBreakpoints();
|
||||
|
||||
@@ -51,27 +50,24 @@ export const TradeSizeInputs = () => {
|
||||
const { needsLeverage } = currentTradeInputOptions || {};
|
||||
const decimals = stepSizeDecimals || TOKEN_DECIMALS;
|
||||
|
||||
const { amountInput, usdAmountInput, leverageInput } = useSelector(
|
||||
getTradeFormInputs,
|
||||
shallowEqual
|
||||
);
|
||||
|
||||
// Update State variables if their inputs are not being source of calculations
|
||||
// Or if they have been reset to null
|
||||
useEffect(() => {
|
||||
if (lastEditedInput !== TradeSizeInput.Size || size == null) {
|
||||
dispatch(setTradeFormInputs({ amountInput: size ? size.toString() : '' }));
|
||||
// Abacus size already respects step size
|
||||
// using .toFixed to prevent trailing zeros and exponential notation
|
||||
setSizeInputValue(size);
|
||||
}
|
||||
if (lastEditedInput !== TradeSizeInput.Usdc || usdcSize == null) {
|
||||
dispatch(setTradeFormInputs({ usdAmountInput: usdcSize ? usdcSize.toString() : '' }));
|
||||
setUsdcInputValue(usdcSize);
|
||||
}
|
||||
if (lastEditedInput !== TradeSizeInput.Leverage || leverage == null) {
|
||||
dispatch(setTradeFormInputs({ leverageInput: leverage ? leverage.toString() : '' }));
|
||||
setLeverageInputValue(leverage);
|
||||
}
|
||||
}, [size, usdcSize, leverage, lastEditedInput]);
|
||||
|
||||
const onSizeInput = ({ value, floatValue }: { value: string; floatValue?: number }) => {
|
||||
dispatch(setTradeFormInputs({ amountInput: value }));
|
||||
setSizeInputValue(floatValue);
|
||||
const newAmount = MustBigNumber(floatValue).toFixed(decimals);
|
||||
|
||||
abacusStateManager.setTradeValue({
|
||||
@@ -81,7 +77,7 @@ export const TradeSizeInputs = () => {
|
||||
};
|
||||
|
||||
const onUSDCInput = ({ value, floatValue }: { value: string; floatValue?: number }) => {
|
||||
dispatch(setTradeFormInputs({ usdAmountInput: value }));
|
||||
setUsdcInputValue(floatValue);
|
||||
const newUsdcAmount = MustBigNumber(floatValue).toFixed();
|
||||
|
||||
abacusStateManager.setTradeValue({
|
||||
@@ -117,7 +113,7 @@ export const TradeSizeInputs = () => {
|
||||
}
|
||||
slotRight={isTablet && inputToggleButton}
|
||||
type={InputType.Number}
|
||||
value={amountInput || ''}
|
||||
value={sizeInputValue || ''}
|
||||
/>
|
||||
);
|
||||
|
||||
@@ -126,7 +122,7 @@ export const TradeSizeInputs = () => {
|
||||
id="trade-usdc"
|
||||
onInput={onUSDCInput}
|
||||
type={InputType.Currency}
|
||||
value={usdAmountInput || ''}
|
||||
value={usdcInputValue || ''}
|
||||
decimals={tickSizeDecimals || USD_DECIMALS}
|
||||
label={
|
||||
<>
|
||||
@@ -157,10 +153,8 @@ export const TradeSizeInputs = () => {
|
||||
|
||||
{needsLeverage && (
|
||||
<MarketLeverageInput
|
||||
leverageInputValue={leverageInput}
|
||||
setLeverageInputValue={(value: string) =>
|
||||
dispatch(setTradeFormInputs({ leverageInput: value }))
|
||||
}
|
||||
leverageInputValue={leverageInputValue}
|
||||
setLeverageInputValue={setLeverageInputValue}
|
||||
/>
|
||||
)}
|
||||
</Styled.Column>
|
||||
|
||||
@@ -119,10 +119,6 @@ export const TransferForm = ({
|
||||
|
||||
return () => {
|
||||
abacusStateManager.clearTransferInputValues();
|
||||
abacusStateManager.setTransferValue({
|
||||
field: TransferInputField.type,
|
||||
value: null,
|
||||
});
|
||||
};
|
||||
}, []);
|
||||
|
||||
|
||||
@@ -1,12 +1,12 @@
|
||||
import { memo } from 'react';
|
||||
import styled, { AnyStyledComponent, css } from 'styled-components';
|
||||
import styled, { AnyStyledComponent } from 'styled-components';
|
||||
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
|
||||
import type { Dispatch } from '@reduxjs/toolkit';
|
||||
|
||||
import { OnboardingState } from '@/constants/account';
|
||||
import { ButtonAction, ButtonShape, ButtonSize, ButtonType } from '@/constants/buttons';
|
||||
import { DialogTypes } from '@/constants/dialogs';
|
||||
import { STRING_KEYS, StringGetterFunction, TOOLTIP_STRING_KEYS } from '@/constants/localization';
|
||||
import { STRING_KEYS, TOOLTIP_STRING_KEYS } from '@/constants/localization';
|
||||
import { isMainnet } from '@/constants/networks';
|
||||
import { DydxChainAsset, wallets } from '@/constants/wallets';
|
||||
|
||||
@@ -40,6 +40,7 @@ import { layoutMixins } from '@/styles/layoutMixins';
|
||||
import { headerMixins } from '@/styles/headerMixins';
|
||||
import { MustBigNumber } from '@/lib/numbers';
|
||||
|
||||
|
||||
export const AccountMenu = () => {
|
||||
const stringGetter = useStringGetter();
|
||||
const { mintscanBase } = useURLConfigs();
|
||||
@@ -90,15 +91,13 @@ export const AccountMenu = () => {
|
||||
<Styled.Address>{truncateAddress(dydxAddress)}</Styled.Address>
|
||||
</Styled.Column>
|
||||
<Styled.CopyButton buttonType="icon" value={dydxAddress} shape={ButtonShape.Square} />
|
||||
<WithTooltip tooltipString={stringGetter({ key: STRING_KEYS.MINTSCAN })}>
|
||||
<Styled.IconButton
|
||||
action={ButtonAction.Base}
|
||||
href={`${mintscanBase}/account/${dydxAddress}`}
|
||||
iconName={IconName.LinkOut}
|
||||
shape={ButtonShape.Square}
|
||||
type={ButtonType.Link}
|
||||
/>
|
||||
</WithTooltip>
|
||||
<Styled.IconButton
|
||||
action={ButtonAction.Base}
|
||||
href={`${mintscanBase}/account/${dydxAddress}`}
|
||||
iconName={IconName.LinkOut}
|
||||
shape={ButtonShape.Square}
|
||||
type={ButtonType.Link}
|
||||
/>
|
||||
</Styled.AddressRow>
|
||||
<Styled.AddressRow>
|
||||
{walletType && (
|
||||
@@ -128,7 +127,6 @@ export const AccountMenu = () => {
|
||||
asset={DydxChainAsset.CHAINTOKEN}
|
||||
dispatch={dispatch}
|
||||
hasBalance={nativeTokenBalance.gt(0)}
|
||||
stringGetter={stringGetter}
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
@@ -150,7 +148,6 @@ export const AccountMenu = () => {
|
||||
asset={DydxChainAsset.USDC}
|
||||
dispatch={dispatch}
|
||||
hasBalance={MustBigNumber(usdcBalance).gt(0)}
|
||||
stringGetter={stringGetter}
|
||||
withOnboarding
|
||||
/>
|
||||
</div>
|
||||
@@ -170,12 +167,6 @@ export const AccountMenu = () => {
|
||||
onSelect: onRecoverKeys,
|
||||
separator: true,
|
||||
},
|
||||
{
|
||||
value: 'Preferences',
|
||||
icon: <Icon iconName={IconName.Gear} />,
|
||||
label: stringGetter({ key: STRING_KEYS.PREFERENCES }),
|
||||
onSelect: () => dispatch(openDialog({ type: DialogTypes.Preferences })),
|
||||
},
|
||||
...(onboardingState === OnboardingState.AccountConnected && hdKey
|
||||
? [
|
||||
!isMainnet && {
|
||||
@@ -193,6 +184,12 @@ export const AccountMenu = () => {
|
||||
},
|
||||
].filter(isTruthy)
|
||||
: []),
|
||||
{
|
||||
value: 'Preferences',
|
||||
icon: <Icon iconName={IconName.Gear} />,
|
||||
label: stringGetter({ key: STRING_KEYS.PREFERENCES }),
|
||||
onSelect: () => dispatch(openDialog({ type: DialogTypes.Preferences })),
|
||||
},
|
||||
{
|
||||
value: 'Disconnect',
|
||||
icon: <Icon iconName={IconName.BoxClose} />,
|
||||
@@ -220,48 +217,38 @@ const AssetActions = memo(
|
||||
dispatch,
|
||||
withOnboarding,
|
||||
hasBalance,
|
||||
stringGetter,
|
||||
}: {
|
||||
asset: DydxChainAsset;
|
||||
dispatch: Dispatch;
|
||||
withOnboarding?: boolean;
|
||||
hasBalance?: boolean;
|
||||
stringGetter: StringGetterFunction;
|
||||
}) => (
|
||||
<Styled.InlineRow>
|
||||
{[
|
||||
withOnboarding && {
|
||||
dialogType: DialogTypes.Deposit,
|
||||
iconName: IconName.Deposit,
|
||||
tooltipStringKey: STRING_KEYS.DEPOSIT,
|
||||
},
|
||||
withOnboarding &&
|
||||
hasBalance && {
|
||||
dialogType: DialogTypes.Withdraw,
|
||||
iconName: IconName.Withdraw,
|
||||
tooltipStringKey: STRING_KEYS.WITHDRAW,
|
||||
},
|
||||
withOnboarding && {
|
||||
dialogType: DialogTypes.Deposit,
|
||||
iconName: IconName.Deposit,
|
||||
},
|
||||
hasBalance && {
|
||||
dialogType: DialogTypes.Transfer,
|
||||
dialogProps: { selectedAsset: asset },
|
||||
iconName: IconName.Send,
|
||||
tooltipStringKey: STRING_KEYS.TRANSFER,
|
||||
},
|
||||
]
|
||||
.filter(isTruthy)
|
||||
.map(({ iconName, tooltipStringKey, dialogType, dialogProps }) => (
|
||||
<Styled.WithTooltip
|
||||
key={tooltipStringKey}
|
||||
tooltipString={stringGetter({ key: tooltipStringKey })}
|
||||
>
|
||||
<Styled.IconButton
|
||||
key={dialogType}
|
||||
action={ButtonAction.Base}
|
||||
shape={ButtonShape.Square}
|
||||
iconName={iconName}
|
||||
onClick={() => dispatch(openDialog({ type: dialogType, dialogProps }))}
|
||||
/>
|
||||
</Styled.WithTooltip>
|
||||
.map(({ iconName, dialogType, dialogProps }) => (
|
||||
<Styled.IconButton
|
||||
key={dialogType}
|
||||
action={ButtonAction.Base}
|
||||
shape={ButtonShape.Square}
|
||||
iconName={iconName}
|
||||
onClick={() => dispatch(openDialog({ type: dialogType, dialogProps }))}
|
||||
/>
|
||||
))}
|
||||
</Styled.InlineRow>
|
||||
)
|
||||
@@ -383,22 +370,12 @@ Styled.ConnectToChain = styled(Styled.Column)`
|
||||
}
|
||||
`;
|
||||
|
||||
Styled.IconButton = styled(IconButton)<{ iconName: IconName }>`
|
||||
Styled.IconButton = styled(IconButton)`
|
||||
--button-padding: 0 0.25rem;
|
||||
--button-border: solid var(--border-width) var(--color-layer-6);
|
||||
|
||||
${({ iconName }) =>
|
||||
[IconName.Withdraw, IconName.Deposit].includes(iconName) &&
|
||||
css`
|
||||
--button-icon-size: 1.375em;
|
||||
`}
|
||||
`;
|
||||
|
||||
Styled.CopyButton = styled(CopyButton)`
|
||||
--button-padding: 0 0.25rem;
|
||||
--button-border: solid var(--border-width) var(--color-layer-6);
|
||||
`;
|
||||
|
||||
Styled.WithTooltip = styled(WithTooltip)`
|
||||
--tooltip-backgroundColor: var(--color-layer-5);
|
||||
`;
|
||||
|
||||
@@ -67,8 +67,7 @@ export const MarketsTable = ({ className }: { className?: string }) => {
|
||||
<Styled.Output
|
||||
type={OutputType.Percent}
|
||||
value={MustBigNumber(priceChange24HPercent).abs()}
|
||||
isPositive={MustBigNumber(priceChange24HPercent).gt(0)}
|
||||
isNegative={MustBigNumber(priceChange24HPercent).isNegative()}
|
||||
isNegative={MustBigNumber(priceChange24H).isNegative()}
|
||||
/>
|
||||
</>
|
||||
)}
|
||||
@@ -109,7 +108,6 @@ export const MarketsTable = ({ className }: { className?: string }) => {
|
||||
<Styled.Output
|
||||
type={OutputType.Percent}
|
||||
value={MustBigNumber(priceChange24HPercent).abs()}
|
||||
isPositive={MustBigNumber(priceChange24HPercent).gt(0)}
|
||||
isNegative={MustBigNumber(priceChange24HPercent).isNegative()}
|
||||
/>
|
||||
)}
|
||||
@@ -130,25 +128,26 @@ export const MarketsTable = ({ className }: { className?: string }) => {
|
||||
<Styled.Output
|
||||
type={OutputType.SmallPercent}
|
||||
value={row.nextFundingRate}
|
||||
isPositive={MustBigNumber(row.nextFundingRate).gt(0)}
|
||||
isNegative={MustBigNumber(row.nextFundingRate).isNegative()}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
columnKey: 'openInterest',
|
||||
getCellValue: (row) => row.openInterestUSDC,
|
||||
getCellValue: (row) => row.openInterest,
|
||||
label: stringGetter({ key: STRING_KEYS.OPEN_INTEREST }),
|
||||
renderCell: (row) => (
|
||||
<TableCell stacked>
|
||||
<Output type={OutputType.Fiat} value={row.openInterestUSDC} />
|
||||
|
||||
<Output
|
||||
fractionDigits={LARGE_TOKEN_DECIMALS}
|
||||
type={OutputType.Number}
|
||||
value={row.openInterest}
|
||||
tag={row.asset?.id}
|
||||
/>
|
||||
<Output
|
||||
type={OutputType.Fiat}
|
||||
value={MustBigNumber(row.openInterest).times(MustBigNumber(row.oraclePrice))}
|
||||
/>
|
||||
</TableCell>
|
||||
),
|
||||
},
|
||||
@@ -156,7 +155,7 @@ export const MarketsTable = ({ className }: { className?: string }) => {
|
||||
columnKey: 'volume24H',
|
||||
getCellValue: (row) => row.volume24H,
|
||||
label: stringGetter({ key: STRING_KEYS.VOLUME_24H }),
|
||||
renderCell: (row) => <Output type={OutputType.Fiat} value={row.volume24H} />,
|
||||
renderCell: (row) => <Output type={OutputType.Number} value={row.volume24H} />,
|
||||
},
|
||||
{
|
||||
columnKey: 'trades24H',
|
||||
@@ -242,11 +241,6 @@ Styled.TabletPriceChange = styled(Styled.InlineRow)`
|
||||
font: var(--font-small-book);
|
||||
`;
|
||||
|
||||
Styled.Output = styled(Output)<{ isNegative?: boolean; isPositive?: boolean }>`
|
||||
color: ${({ isNegative, isPositive }) =>
|
||||
isNegative
|
||||
? `var(--color-negative)`
|
||||
: isPositive
|
||||
? `var(--color-positive)`
|
||||
: `var(--color-text-1)`};
|
||||
Styled.Output = styled(Output)<{ isNegative?: boolean }>`
|
||||
color: ${({ isNegative }) => (isNegative ? `var(--color-negative)` : `var(--color-positive)`)};
|
||||
`;
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
|
||||
import { shallowEqual, useSelector } from 'react-redux';
|
||||
import styled, { type AnyStyledComponent, css, keyframes } from 'styled-components';
|
||||
|
||||
import { OrderSide } from '@dydxprotocol/v4-client-js';
|
||||
@@ -9,13 +9,13 @@ import { STRING_KEYS } from '@/constants/localization';
|
||||
import { useBreakpoints, useStringGetter } from '@/hooks';
|
||||
|
||||
import { calculateCanViewAccount } from '@/state/accountCalculators';
|
||||
import { setTradeFormInputs } from '@/state/inputs';
|
||||
|
||||
import { getSubaccountOpenOrdersBySideAndPrice } from '@/state/accountSelectors';
|
||||
import { getCurrentMarketAssetData } from '@/state/assetsSelectors';
|
||||
import { getCurrentMarketConfig, getCurrentMarketOrderbook } from '@/state/perpetualsSelectors';
|
||||
import { getCurrentInput } from '@/state/inputsSelectors';
|
||||
|
||||
import abacusStateManager from '@/lib/abacus';
|
||||
import { MustBigNumber } from '@/lib/numbers';
|
||||
|
||||
import { Details } from '@/components/Details';
|
||||
@@ -208,6 +208,7 @@ const OrderbookTable = ({
|
||||
// Style props
|
||||
histogramSide={histogramSide}
|
||||
hideHeader={hideHeader}
|
||||
withFocusStickyRows
|
||||
style={{
|
||||
'--histogram-range': histogramRange,
|
||||
}}
|
||||
@@ -222,12 +223,11 @@ export const Orderbook = ({
|
||||
maxRowsPerSide = ORDERBOOK_MAX_ROWS_PER_SIDE,
|
||||
hideHeader = false,
|
||||
}: ElementProps & StyleProps) => {
|
||||
const dispatch = useDispatch();
|
||||
const stringGetter = useStringGetter();
|
||||
const { isTablet } = useBreakpoints();
|
||||
|
||||
const currentInput = useSelector(getCurrentInput);
|
||||
const { id = '' } = useSelector(getCurrentMarketAssetData, shallowEqual) ?? {};
|
||||
const { symbol = '' } = useSelector(getCurrentMarketAssetData, shallowEqual) ?? {};
|
||||
const { stepSizeDecimals, tickSizeDecimals } =
|
||||
useSelector(getCurrentMarketConfig, shallowEqual) ?? {};
|
||||
|
||||
@@ -274,16 +274,18 @@ export const Orderbook = ({
|
||||
|
||||
const onRowAction = useCallback(
|
||||
(key: string, row: RowData) => {
|
||||
if (currentInput === 'trade' && key !== 'spread' && row?.price) {
|
||||
dispatch(setTradeFormInputs({ limitPriceInput: row?.price?.toString() }));
|
||||
}
|
||||
if (currentInput === 'trade' && key !== 'spread' && row?.price)
|
||||
abacusStateManager.setTradeValue({
|
||||
value: row?.price,
|
||||
field: TradeInputField.limitPrice,
|
||||
});
|
||||
},
|
||||
[currentInput]
|
||||
);
|
||||
|
||||
const orderbookTableProps = {
|
||||
showMineColumn,
|
||||
symbol: id,
|
||||
symbol,
|
||||
stepSizeDecimals,
|
||||
tickSizeDecimals,
|
||||
histogramRange,
|
||||
@@ -508,21 +510,17 @@ Styled.OrderbookTable = styled(OrderbookTradesTable)<StyleProps>`
|
||||
content: '';
|
||||
}
|
||||
|
||||
${({ withFocusStickyRows }) =>
|
||||
withFocusStickyRows &&
|
||||
css`
|
||||
&:not(:active):is(:focus-visible, :focus-within) {
|
||||
${orderbookMixins.scrollSnapItem}
|
||||
z-index: 2;
|
||||
&:not(:active):is(:focus-visible, :focus-within) {
|
||||
${orderbookMixins.scrollSnapItem}
|
||||
z-index: 2;
|
||||
|
||||
&[data-side='bid'] {
|
||||
top: calc(var(--stickyArea-totalInsetTop) + var(--orderbook-spreadRowHeight));
|
||||
}
|
||||
&[data-side='ask'] {
|
||||
bottom: calc(var(--stickyArea-totalInsetBottom) + var(--orderbook-spreadRowHeight));
|
||||
}
|
||||
}
|
||||
`}
|
||||
&[data-side='bid'] {
|
||||
top: calc(var(--stickyArea-totalInsetTop) + var(--orderbook-spreadRowHeight));
|
||||
}
|
||||
&[data-side='ask'] {
|
||||
bottom: calc(var(--stickyArea-totalInsetBottom) + var(--orderbook-spreadRowHeight));
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
${Styled.HorizontalLayout} & {
|
||||
|
||||
Reference in New Issue
Block a user