Compare commits
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
d6121de9fb | ||
|
|
9a02bd3f1c | ||
|
|
adba11b462 | ||
|
|
29526b927f | ||
|
|
503e089efa | ||
|
|
c3495f462c | ||
|
|
6da6eeb2a4 | ||
|
|
0cf3e81bd7 | ||
|
|
f8cf1d364b | ||
|
|
6f344c6b5d | ||
|
|
133856afca | ||
|
|
33c543daaf | ||
|
|
c77e727d2b | ||
|
|
b94538711d | ||
|
|
b83479f45c | ||
|
|
001aad3abc | ||
|
|
f8db5e1ba0 | ||
|
|
f8bec0fb3d | ||
|
|
8bf23b7e9c | ||
|
|
3f10e045f4 | ||
|
|
71d1a0321b | ||
|
|
0f16396c8d | ||
|
|
2709d79f59 | ||
|
|
ab0eec5d4f | ||
|
|
4a044da38f | ||
|
|
fbbfbc6580 | ||
|
|
2714c2b084 | ||
|
|
9979bc8a16 | ||
|
|
a958a59ea2 | ||
|
|
2bf9e66da5 | ||
|
|
2980144e40 | ||
|
|
5387fe8632 | ||
|
|
1132ea3bbd | ||
|
|
9188e08a4f | ||
|
|
941ef7f9dd | ||
|
|
b1ffa2e219 | ||
|
|
91ea68dc53 | ||
|
|
cf79528d05 | ||
|
|
ef81f9da57 | ||
|
|
60d59cd211 | ||
|
|
19d38378f3 | ||
|
|
15a64232c0 | ||
|
|
28d3be0370 | ||
|
|
90ff9ccc5a | ||
|
|
33516422e7 | ||
|
|
eb31610a38 | ||
|
|
b0e1655018 | ||
|
|
b4cc5f87ec | ||
|
|
549ae558e7 | ||
|
|
5b06110e2d | ||
|
|
e3da2ee4b1 | ||
|
|
6b38d68b09 | ||
|
|
1dedc93a56 | ||
|
|
1427b55728 | ||
|
|
20521b5b3f | ||
|
|
532df49a06 | ||
|
|
fb65db633a | ||
|
|
279ef6b4f9 |
@@ -39,11 +39,12 @@
|
||||
"@cosmjs/proto-signing": "^0.31.0",
|
||||
"@cosmjs/stargate": "^0.31.0",
|
||||
"@cosmjs/tendermint-rpc": "^0.31.0",
|
||||
"@dydxprotocol/v4-abacus": "^1.0.25",
|
||||
"@dydxprotocol/v4-client-js": "^1.0.0",
|
||||
"@dydxprotocol/v4-localization": "^1.0.5",
|
||||
"@dydxprotocol/v4-abacus": "^1.1.32",
|
||||
"@dydxprotocol/v4-client-js": "^1.0.11",
|
||||
"@dydxprotocol/v4-localization": "^1.1.5",
|
||||
"@ethersproject/providers": "^5.7.2",
|
||||
"@js-joda/core": "^5.5.3",
|
||||
"@radix-ui/react-accordion": "^1.1.2",
|
||||
"@radix-ui/react-checkbox": "^1.0.4",
|
||||
"@radix-ui/react-collapsible": "^1.0.3",
|
||||
"@radix-ui/react-dialog": "^1.0.4",
|
||||
@@ -111,7 +112,7 @@
|
||||
"styled-components": "^5.3.11",
|
||||
"use-latest": "^1.2.1",
|
||||
"viem": "^1.12.2",
|
||||
"wagmi": "^1.4.5"
|
||||
"wagmi": "^1.4.12"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.22.5",
|
||||
|
||||
@@ -0,0 +1,12 @@
|
||||
[
|
||||
{
|
||||
"chainId": "1",
|
||||
"tokenAddress": "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
|
||||
"name": "Ethereum"
|
||||
},
|
||||
{
|
||||
"chainId": "5",
|
||||
"tokenAddress": "0x07865c6E87B9F70255377e024ace6630C1Eaa37F",
|
||||
"name": "Ethereum Goerli"
|
||||
}
|
||||
]
|
||||
@@ -0,0 +1,16 @@
|
||||
{
|
||||
"tradingRewardsFAQs": [
|
||||
{
|
||||
"questionLocalizationKey": "APP.TRADING_REWARDS.FAQ_WHO_IS_ELIGIBLE_QUESTION",
|
||||
"answerLocalizationKey": "APP.TRADING_REWARDS.FAQ_WHO_IS_ELIGIBLE_ANSWER"
|
||||
},
|
||||
{
|
||||
"questionLocalizationKey": "APP.TRADING_REWARDS.FAQ_HOW_DO_TRADING_REWARDS_WORK_QUESTION",
|
||||
"answerLocalizationKey": "APP.TRADING_REWARDS.FAQ_HOW_DO_TRADING_REWARDS_WORK_ANSWER"
|
||||
},
|
||||
{
|
||||
"questionLocalizationKey": "APP.TRADING_REWARDS.FAQ_HOW_DO_I_CLAIM_MY_REWARDS_QUESTION",
|
||||
"answerLocalizationKey": "APP.TRADING_REWARDS.FAQ_HOW_DO_I_CLAIM_MY_REWARDS_ANSWER"
|
||||
}
|
||||
]
|
||||
}
|
||||
@@ -42,7 +42,7 @@
|
||||
"ethereumChainId": "5",
|
||||
"dydxChainId": "dydxprotocol-testnet",
|
||||
"chainName": "dYdX Chain",
|
||||
"chainLogo": "dydx-chain.png",
|
||||
"chainLogo": "/dydx-chain.png",
|
||||
"squidIntegratorId": "dYdX-api",
|
||||
"isMainNet": false,
|
||||
"tokens": {
|
||||
@@ -71,6 +71,7 @@
|
||||
"https://validator.v4dev.dydx.exchange"
|
||||
],
|
||||
"0xsquid": "https://testnet.api.0xsquid.com",
|
||||
"nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
|
||||
"faucet": "https://faucet.v4dev.dydx.exchange"
|
||||
},
|
||||
"links": {
|
||||
@@ -88,7 +89,7 @@
|
||||
"governanceLearnMore": "https://help.dydx.exchange",
|
||||
"stakingLearnMore": "https://help.dydx.exchange",
|
||||
"keplrDashboard": "https://testnet.keplr.app/",
|
||||
"accountExportLearnMore": "https://help.dydx.exchange",
|
||||
"accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
|
||||
"walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
|
||||
},
|
||||
"wallets": {
|
||||
@@ -115,7 +116,7 @@
|
||||
"ethereumChainId": "5",
|
||||
"dydxChainId": "dydxprotocol-testnet",
|
||||
"chainName": "dYdX Chain",
|
||||
"chainLogo": "dydx-chain.png",
|
||||
"chainLogo": "/dydx-chain.png",
|
||||
"squidIntegratorId": "dYdX-api",
|
||||
"isMainNet": false,
|
||||
"tokens": {
|
||||
@@ -143,7 +144,8 @@
|
||||
"validators": [
|
||||
"http://54.92.118.111"
|
||||
],
|
||||
"0xsquid": "https://testnet.api.0xsquid.com"
|
||||
"0xsquid": "https://testnet.api.0xsquid.com",
|
||||
"nobleValidator": "https://noble-testnet-rpc.polkachu.com/"
|
||||
},
|
||||
"links": {
|
||||
"tos": "https://dydx.exchange/v4-terms",
|
||||
@@ -160,7 +162,7 @@
|
||||
"governanceLearnMore": "https://help.dydx.exchange",
|
||||
"stakingLearnMore": "https://help.dydx.exchange",
|
||||
"keplrDashboard": "https://testnet.keplr.app/",
|
||||
"accountExportLearnMore": "https://help.dydx.exchange",
|
||||
"accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
|
||||
"walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
|
||||
},
|
||||
"wallets": {
|
||||
@@ -187,7 +189,7 @@
|
||||
"ethereumChainId": "5",
|
||||
"dydxChainId": "dydxprotocol-testnet",
|
||||
"chainName": "dYdX Chain",
|
||||
"chainLogo": "dydx-chain.png",
|
||||
"chainLogo": "/dydx-chain.png",
|
||||
"squidIntegratorId": "dYdX-api",
|
||||
"isMainNet": false,
|
||||
"tokens": {
|
||||
@@ -215,7 +217,8 @@
|
||||
"validators": [
|
||||
"http://validator.v4dev4.dydx.exchange"
|
||||
],
|
||||
"0xsquid": "https://testnet.api.0xsquid.com"
|
||||
"0xsquid": "https://testnet.api.0xsquid.com",
|
||||
"nobleValidator": "https://noble-testnet-rpc.polkachu.com/"
|
||||
},
|
||||
"links": {
|
||||
"tos": "https://dydx.exchange/v4-terms",
|
||||
@@ -232,7 +235,7 @@
|
||||
"governanceLearnMore": "https://help.dydx.exchange",
|
||||
"stakingLearnMore": "https://help.dydx.exchange",
|
||||
"keplrDashboard": "https://testnet.keplr.app/",
|
||||
"accountExportLearnMore": "https://help.dydx.exchange",
|
||||
"accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
|
||||
"walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
|
||||
},
|
||||
"wallets": {
|
||||
@@ -259,7 +262,7 @@
|
||||
"ethereumChainId": "5",
|
||||
"dydxChainId": "dydxprotocol-testnet",
|
||||
"chainName": "dYdX Chain",
|
||||
"chainLogo": "dydx-chain.png",
|
||||
"chainLogo": "/dydx-chain.png",
|
||||
"squidIntegratorId": "dYdX-api",
|
||||
"isMainNet": false,
|
||||
"tokens": {
|
||||
@@ -287,7 +290,8 @@
|
||||
"validators": [
|
||||
"http://18.223.78.50"
|
||||
],
|
||||
"0xsquid": "https://testnet.api.0xsquid.com"
|
||||
"0xsquid": "https://testnet.api.0xsquid.com",
|
||||
"nobleValidator": "https://noble-testnet-rpc.polkachu.com/"
|
||||
},
|
||||
"links": {
|
||||
"tos": "https://dydx.exchange/v4-terms",
|
||||
@@ -304,7 +308,7 @@
|
||||
"governanceLearnMore": "https://help.dydx.exchange",
|
||||
"stakingLearnMore": "https://help.dydx.exchange",
|
||||
"keplrDashboard": "https://testnet.keplr.app/",
|
||||
"accountExportLearnMore": "https://help.dydx.exchange",
|
||||
"accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
|
||||
"walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
|
||||
},
|
||||
"wallets": {
|
||||
@@ -331,7 +335,7 @@
|
||||
"ethereumChainId": "5",
|
||||
"dydxChainId": "dydxprotocol-testnet",
|
||||
"chainName": "dYdX Chain",
|
||||
"chainLogo": "dydx-chain.png",
|
||||
"chainLogo": "/dydx-chain.png",
|
||||
"squidIntegratorId": "dYdX-api",
|
||||
"isMainNet": false,
|
||||
"tokens": {
|
||||
@@ -360,7 +364,8 @@
|
||||
"validators": [
|
||||
"https://validator.v4staging.dydx.exchange"
|
||||
],
|
||||
"0xsquid": "https://testnet.api.squidrouter.com"
|
||||
"0xsquid": "https://testnet.api.squidrouter.com",
|
||||
"nobleValidator": "https://noble-testnet-rpc.polkachu.com/"
|
||||
},
|
||||
"links": {
|
||||
"tos": "https://dydx.exchange/v4-terms",
|
||||
@@ -378,7 +383,7 @@
|
||||
"governanceLearnMore": "https://help.dydx.exchange",
|
||||
"stakingLearnMore": "https://help.dydx.exchange",
|
||||
"keplrDashboard": "https://testnet.keplr.app/",
|
||||
"accountExportLearnMore": "https://help.dydx.exchange",
|
||||
"accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
|
||||
"walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
|
||||
},
|
||||
"wallets": {
|
||||
@@ -405,7 +410,8 @@
|
||||
"ethereumChainId": "5",
|
||||
"dydxChainId": "dydxprotocol-testnet",
|
||||
"chainName": "dYdX Chain",
|
||||
"chainLogo": "dydx-chain.png",
|
||||
"chainLogo": "/dydx-chain.png",
|
||||
"squidIntegratorId": "dYdX-api",
|
||||
"isMainNet": false,
|
||||
"tokens": {
|
||||
"chain": {
|
||||
@@ -433,7 +439,8 @@
|
||||
"validators": [
|
||||
"https://validator.v4staging.dydx.exchange"
|
||||
],
|
||||
"0xsquid": "https://testnet.api.squidrouter.com"
|
||||
"0xsquid": "https://testnet.api.squidrouter.com",
|
||||
"nobleValidator": "https://noble-testnet-rpc.polkachu.com/"
|
||||
},
|
||||
"links": {
|
||||
"tos": "https://dydx.exchange/v4-terms",
|
||||
@@ -476,7 +483,7 @@
|
||||
"ethereumChainId": "5",
|
||||
"dydxChainId": "dydxprotocol-testnet",
|
||||
"chainName": "dYdX Chain",
|
||||
"chainLogo": "dydx-chain.png",
|
||||
"chainLogo": "/dydx-chain.png",
|
||||
"squidIntegratorId": "dYdX-api",
|
||||
"isMainNet": false,
|
||||
"tokens": {
|
||||
@@ -505,7 +512,8 @@
|
||||
"validators": [
|
||||
"https://validator-uswest1.v4staging.dydx.exchange"
|
||||
],
|
||||
"0xsquid": "https://testnet.api.squidrouter.com"
|
||||
"0xsquid": "https://testnet.api.squidrouter.com",
|
||||
"nobleValidator": "https://noble-testnet-rpc.polkachu.com/"
|
||||
},
|
||||
"links": {
|
||||
"tos": "https://dydx.exchange/v4-terms",
|
||||
@@ -523,7 +531,7 @@
|
||||
"governanceLearnMore": "https://help.dydx.exchange",
|
||||
"stakingLearnMore": "https://help.dydx.exchange",
|
||||
"keplrDashboard": "https://testnet.keplr.app/",
|
||||
"accountExportLearnMore": "https://help.dydx.exchange",
|
||||
"accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
|
||||
"walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
|
||||
},
|
||||
"wallets": {
|
||||
@@ -550,7 +558,7 @@
|
||||
"ethereumChainId": "5",
|
||||
"dydxChainId": "dydx-testnet-4",
|
||||
"chainName": "dYdX Chain",
|
||||
"chainLogo": "dydx-chain.png",
|
||||
"chainLogo": "/dydx-chain.png",
|
||||
"squidIntegratorId": "dYdX-api",
|
||||
"isMainNet": false,
|
||||
"tokens": {
|
||||
@@ -583,6 +591,7 @@
|
||||
"https://dydx-rpc.liquify.com/api=8878132/dydx"
|
||||
],
|
||||
"0xsquid": "https://testnet.api.squidrouter.com",
|
||||
"nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
|
||||
"faucet": "https://faucet.v4testnet.dydx.exchange"
|
||||
},
|
||||
"links": {
|
||||
@@ -601,7 +610,7 @@
|
||||
"governanceLearnMore": "https://help.dydx.exchange",
|
||||
"stakingLearnMore": "https://help.dydx.exchange",
|
||||
"keplrDashboard": "https://testnet.keplr.app/",
|
||||
"accountExportLearnMore": "https://help.dydx.exchange",
|
||||
"accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
|
||||
"walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
|
||||
},
|
||||
"wallets": {
|
||||
@@ -628,7 +637,7 @@
|
||||
"ethereumChainId": "5",
|
||||
"dydxChainId": "dydx-testnet-4",
|
||||
"chainName": "dYdX Chain",
|
||||
"chainLogo": "dydx-chain.png",
|
||||
"chainLogo": "/dydx-chain.png",
|
||||
"squidIntegratorId": "dYdX-api",
|
||||
"isMainNet": false,
|
||||
"tokens": {
|
||||
@@ -657,6 +666,7 @@
|
||||
"https://validator.v4testnet.dydx.exchange"
|
||||
],
|
||||
"0xsquid": "https://testnet.api.squidrouter.com",
|
||||
"nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
|
||||
"faucet": "https://faucet.v4testnet.dydx.exchange"
|
||||
},
|
||||
"links": {
|
||||
@@ -676,7 +686,7 @@
|
||||
"governanceLearnMore": "https://help.dydx.exchange",
|
||||
"stakingLearnMore": "https://help.dydx.exchange",
|
||||
"keplrDashboard": "https://testnet.keplr.app/",
|
||||
"accountExportLearnMore": "https://help.dydx.exchange",
|
||||
"accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
|
||||
"walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
|
||||
},
|
||||
"wallets": {
|
||||
@@ -703,7 +713,7 @@
|
||||
"ethereumChainId": "5",
|
||||
"dydxChainId": "dydx-testnet-4",
|
||||
"chainName": "dYdX Chain",
|
||||
"chainLogo": "dydx-chain.png",
|
||||
"chainLogo": "/dydx-chain.png",
|
||||
"squidIntegratorId": "dYdX-api",
|
||||
"isMainNet": false,
|
||||
"tokens": {
|
||||
@@ -732,6 +742,7 @@
|
||||
"https://dydx-testnet.nodefleet.org"
|
||||
],
|
||||
"0xsquid": "https://testnet.api.squidrouter.com",
|
||||
"nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
|
||||
"faucet": "https://faucet.v4testnet.dydx.exchange"
|
||||
},
|
||||
"links": {
|
||||
@@ -751,7 +762,7 @@
|
||||
"governanceLearnMore": "https://help.dydx.exchange",
|
||||
"stakingLearnMore": "https://help.dydx.exchange",
|
||||
"keplrDashboard": "https://testnet.keplr.app/",
|
||||
"accountExportLearnMore": "https://help.dydx.exchange",
|
||||
"accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
|
||||
"walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
|
||||
},
|
||||
"wallets": {
|
||||
@@ -778,7 +789,7 @@
|
||||
"ethereumChainId": "5",
|
||||
"dydxChainId": "dydx-testnet-4",
|
||||
"chainName": "dYdX Chain",
|
||||
"chainLogo": "dydx-chain.png",
|
||||
"chainLogo": "/dydx-chain.png",
|
||||
"squidIntegratorId": "dYdX-api",
|
||||
"isMainNet": false,
|
||||
"tokens": {
|
||||
@@ -807,6 +818,7 @@
|
||||
"https://test-dydx.kingnodes.com"
|
||||
],
|
||||
"0xsquid": "https://testnet.api.squidrouter.com",
|
||||
"nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
|
||||
"faucet": "https://faucet.v4testnet.dydx.exchange"
|
||||
},
|
||||
"links": {
|
||||
@@ -826,7 +838,7 @@
|
||||
"governanceLearnMore": "https://help.dydx.exchange",
|
||||
"stakingLearnMore": "https://help.dydx.exchange",
|
||||
"keplrDashboard": "https://testnet.keplr.app/",
|
||||
"accountExportLearnMore": "https://help.dydx.exchange",
|
||||
"accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
|
||||
"walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
|
||||
},
|
||||
"wallets": {
|
||||
@@ -853,7 +865,7 @@
|
||||
"ethereumChainId": "5",
|
||||
"dydxChainId": "dydx-testnet-4",
|
||||
"chainName": "dYdX Chain",
|
||||
"chainLogo": "dydx-chain.png",
|
||||
"chainLogo": "/dydx-chain.png",
|
||||
"squidIntegratorId": "dYdX-api",
|
||||
"isMainNet": false,
|
||||
"tokens": {
|
||||
@@ -882,6 +894,7 @@
|
||||
"https://dydx-rpc.liquify.com/api=8878132/dydx"
|
||||
],
|
||||
"0xsquid": "https://testnet.api.squidrouter.com",
|
||||
"nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
|
||||
"faucet": "https://faucet.v4testnet.dydx.exchange"
|
||||
},
|
||||
"links": {
|
||||
@@ -901,7 +914,7 @@
|
||||
"governanceLearnMore": "https://help.dydx.exchange",
|
||||
"stakingLearnMore": "https://help.dydx.exchange",
|
||||
"keplrDashboard": "https://testnet.keplr.app/",
|
||||
"accountExportLearnMore": "https://help.dydx.exchange",
|
||||
"accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
|
||||
"walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
|
||||
},
|
||||
"wallets": {
|
||||
@@ -928,7 +941,7 @@
|
||||
"ethereumChainId": "5",
|
||||
"dydxChainId": "dydx-testnet-4",
|
||||
"chainName": "dYdX Chain",
|
||||
"chainLogo": "dydx-chain.png",
|
||||
"chainLogo": "/dydx-chain.png",
|
||||
"squidIntegratorId": "dYdX-api",
|
||||
"isMainNet": false,
|
||||
"tokens": {
|
||||
@@ -957,6 +970,7 @@
|
||||
"https://dydx-testnet-rpc.polkachu.com/"
|
||||
],
|
||||
"0xsquid": "https://testnet.api.squidrouter.com",
|
||||
"nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
|
||||
"faucet": "https://faucet.v4testnet.dydx.exchange"
|
||||
},
|
||||
"links": {
|
||||
@@ -994,7 +1008,7 @@
|
||||
"ethereumChainId": "5",
|
||||
"dydxChainId": "dydx-testnet-4",
|
||||
"chainName": "dYdX Chain",
|
||||
"chainLogo": "dydx-chain.png",
|
||||
"chainLogo": "/dydx-chain.png",
|
||||
"squidIntegratorId": "dYdX-api",
|
||||
"isMainNet": false,
|
||||
"tokens": {
|
||||
@@ -1023,6 +1037,7 @@
|
||||
"https://dydx-testnet-full-rpc.public.blastapi.io/"
|
||||
],
|
||||
"0xsquid": "https://testnet.api.squidrouter.com",
|
||||
"nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
|
||||
"faucet": "https://faucet.v4testnet.dydx.exchange"
|
||||
},
|
||||
"links": {
|
||||
@@ -1069,7 +1084,7 @@
|
||||
"ethereumChainId": "1",
|
||||
"dydxChainId": "[mainnet chain id]",
|
||||
"chainName": "dYdX Chain",
|
||||
"chainLogo": "dydx-chain.png",
|
||||
"chainLogo": "/dydx-chain.png",
|
||||
"squidIntegratorId": "[mainnet squid integrator id]",
|
||||
"isMainNet": true,
|
||||
"tokens": {
|
||||
@@ -1099,7 +1114,8 @@
|
||||
"[Validator endpoint 1",
|
||||
"[Validator endpoint n]"
|
||||
],
|
||||
"0xsquid": "[0xSquid endpoint for mainnet]"
|
||||
"0xsquid": "[0xSquid endpoint for mainnet]",
|
||||
"nobleValidator": "[noble validator endpoint for mainnet]"
|
||||
},
|
||||
"links": {
|
||||
"tos": "[HTTP link to TOS]",
|
||||
@@ -1110,7 +1126,7 @@
|
||||
"blogs": "[HTTP link to blogs, can be null]",
|
||||
"foundation": "[HTTP link to foundation, can be null]",
|
||||
"initialMarginFractionLearnMore": "[HTTP link to initial margin fraction learn more, can be null]",
|
||||
"reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
|
||||
"reduceOnlyLearnMore": "[HTTP link to reduce-only learn more, can be null]",
|
||||
"documentation": "[HTTP link to documentation, can be null]",
|
||||
"community": "[HTTP link to community, can be null]",
|
||||
"help": "[HTTP link to help page, can be null]",
|
||||
|
||||
@@ -1,454 +1,360 @@
|
||||
{
|
||||
"1INCH-USD":{
|
||||
"name":"1inch",
|
||||
"tags":[
|
||||
"Defi"
|
||||
],
|
||||
"websiteLink":"https://1inch.io/",
|
||||
"whitepaperLink":"https://github.com/1inch",
|
||||
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/1inch/"
|
||||
},
|
||||
"AAVE-USD":{
|
||||
"name":"Aave",
|
||||
"tags":[
|
||||
"Defi"
|
||||
],
|
||||
"websiteLink":"https://aave.com/",
|
||||
"whitepaperLink":"https://github.com/aave/protocol-v2/blob/master/aave-v2-whitepaper.pdf",
|
||||
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/aave/"
|
||||
},
|
||||
"ADA-USD":{
|
||||
"name":"Cardano",
|
||||
"tags":[
|
||||
"Layer 1"
|
||||
],
|
||||
"websiteLink":"https://cardano.org/",
|
||||
"whitepaperLink":"https://why.cardano.org/en/introduction/motivation/",
|
||||
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/cardano/"
|
||||
},
|
||||
"ALGO-USD":{
|
||||
"name":"Algorand",
|
||||
"tags":[
|
||||
"Layer 1"
|
||||
],
|
||||
"websiteLink":"https://algorand.com/",
|
||||
"whitepaperLink":"https://algorand.com/technology/white-papers",
|
||||
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/algorand/"
|
||||
},
|
||||
"APE-USD":{
|
||||
"name":"ApeCoin",
|
||||
"tags":[
|
||||
|
||||
],
|
||||
"websiteLink":"https://apecoin.com/",
|
||||
"whitepaperLink":"https://apecoin.com/about",
|
||||
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/apecoin-ape/"
|
||||
},
|
||||
"APT-USD":{
|
||||
"name":"Aptos",
|
||||
"tags":[
|
||||
"Layer 1"
|
||||
],
|
||||
"websiteLink":"https://aptoslabs.com/",
|
||||
"whitepaperLink":"https://aptos.dev/aptos-white-paper/",
|
||||
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/aptos/"
|
||||
},
|
||||
"ARB-USD":{
|
||||
"name":"Arbitrum",
|
||||
"tags":[
|
||||
|
||||
],
|
||||
"websiteLink":"https://arbitrum.io/",
|
||||
"whitepaperLink":"https://github.com/OffchainLabs/nitro",
|
||||
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/arbitrum/"
|
||||
},
|
||||
"ATOM-USD":{
|
||||
"name":"Cosmos",
|
||||
"tags":[
|
||||
"Layer 1"
|
||||
],
|
||||
"websiteLink":"https://cosmos.network/",
|
||||
"whitepaperLink":"https://v1.cosmos.network/resources/whitepaper",
|
||||
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/cosmos/"
|
||||
},
|
||||
"AVAX-USD":{
|
||||
"name":"Avalanche",
|
||||
"tags":[
|
||||
"Layer 1"
|
||||
],
|
||||
"websiteLink":"https://www.avalabs.org/",
|
||||
"whitepaperLink":"https://assets.website-files.com/5d80307810123f5ffbb34d6e/6008d7bbf8b10d1eb01e7e16_Avalanche%20Platform%20Whitepaper.pdf",
|
||||
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/avalanche/"
|
||||
},
|
||||
"BCH-USD":{
|
||||
"name":"Bitcoin Cash",
|
||||
"tags":[
|
||||
"Layer 1"
|
||||
],
|
||||
"websiteLink":"https://bitcoincash.org/",
|
||||
"whitepaperLink":"https://bitcoincash.org/",
|
||||
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/bitcoin-cash/"
|
||||
},
|
||||
"BLUR-USD":{
|
||||
"name":"Blur",
|
||||
"tags":[
|
||||
|
||||
],
|
||||
"websiteLink":"https://blur.io/",
|
||||
"whitepaperLink":"https://docs.blur.foundation/",
|
||||
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/blur-token/"
|
||||
},
|
||||
"CELO-USD":{
|
||||
"name":"Celo",
|
||||
"tags":[
|
||||
|
||||
],
|
||||
"websiteLink":"https://celo.org",
|
||||
"whitepaperLink":"https://docs.celo.org",
|
||||
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/celo/"
|
||||
},
|
||||
"BTC-USD":{
|
||||
"name":"Bitcoin",
|
||||
"tags":[
|
||||
"Layer 1"
|
||||
],
|
||||
"websiteLink":"https://bitcoin.org/",
|
||||
"whitepaperLink":"https://bitcoin.org/bitcoin.pdf",
|
||||
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/bitcoin/"
|
||||
},
|
||||
"COMP-USD":{
|
||||
"name":"Compound",
|
||||
"tags":[
|
||||
"Defi"
|
||||
],
|
||||
"websiteLink":"https://compound.finance/",
|
||||
"whitepaperLink":"https://compound.finance/documents/Compound.Whitepaper.pdf",
|
||||
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/compound/"
|
||||
},
|
||||
"CRV-USD":{
|
||||
"name":"Curve",
|
||||
"tags":[
|
||||
"Governance"
|
||||
],
|
||||
"websiteLink":"https://curve.fi/",
|
||||
"whitepaperLink":"https://curve.fi/whitepaper",
|
||||
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/curve-dao-token/"
|
||||
},
|
||||
"DOGE-USD":{
|
||||
"name":"Dogecoin",
|
||||
"tags":[
|
||||
"Layer 1"
|
||||
],
|
||||
"websiteLink":"https://dogecoin.com/",
|
||||
"whitepaperLink":"https://github.com/dogecoin/dogecoin",
|
||||
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/dogecoin/"
|
||||
},
|
||||
"DOT-USD":{
|
||||
"name":"Polkadot",
|
||||
"tags":[
|
||||
"Layer 1"
|
||||
],
|
||||
"websiteLink":"https://polkadot.network/",
|
||||
"whitepaperLink":"https://polkadot.network/PolkaDotPaper.pdf",
|
||||
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/polkadot-new/"
|
||||
},
|
||||
"ENJ-USD":{
|
||||
"name":"Enjin",
|
||||
"tags":[
|
||||
|
||||
],
|
||||
"websiteLink":"https://enjin.io/",
|
||||
"whitepaperLink":"https://cdn.enjin.io/downloads/whitepapers/enjin-coin/en.pdf/",
|
||||
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/enjin-coin/"
|
||||
},
|
||||
"EOS-USD":{
|
||||
"name":"EOS",
|
||||
"tags":[
|
||||
"Layer 1"
|
||||
],
|
||||
"websiteLink":"https://eos.io/",
|
||||
"whitepaperLink":"https://github.com/EOSIO/Documentation/blob/master/TechnicalWhitePaper.md",
|
||||
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/eos/"
|
||||
},
|
||||
"ETC-USD":{
|
||||
"name":"Ethereum Classic",
|
||||
"tags":[
|
||||
"Layer 1"
|
||||
],
|
||||
"websiteLink":"https://ethereumclassic.org/",
|
||||
"whitepaperLink":"https://ethereumclassic.org/why-classic",
|
||||
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/ethereum-classic/"
|
||||
},
|
||||
"ETH-USD":{
|
||||
"name":"Ethereum",
|
||||
"tags":[
|
||||
"Layer 1"
|
||||
],
|
||||
"websiteLink":"https://ethereum.org/",
|
||||
"whitepaperLink":"https://ethereum.org/whitepaper/",
|
||||
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/ethereum/",
|
||||
"displayStepSize":"0.001",
|
||||
"displayTickSize":"0.1"
|
||||
},
|
||||
"FIL-USD":{
|
||||
"name":"Filecoin",
|
||||
"tags":[
|
||||
"Layer 1"
|
||||
],
|
||||
"websiteLink":"https://filecoin.io/",
|
||||
"whitepaperLink":"https://filecoin.io/filecoin.pdf",
|
||||
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/filecoin/"
|
||||
},
|
||||
"HNT-USD":{
|
||||
"name":"Helium",
|
||||
"tags":[
|
||||
"Layer 1"
|
||||
],
|
||||
"websiteLink":"https://www.helium.com",
|
||||
"whitepaperLink":"http://whitepaper.helium.com",
|
||||
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/helium/"
|
||||
},
|
||||
"ICP-USD":{
|
||||
"name":"Internet Computer",
|
||||
"tags":[
|
||||
"Layer 1"
|
||||
],
|
||||
"websiteLink":"https://dfinity.org",
|
||||
"whitepaperLink":"https://dfinity.org/whitepaper.pdf",
|
||||
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/internet-computer/"
|
||||
},
|
||||
"LDO-USD":{
|
||||
"name":"Lido DAO",
|
||||
"tags":[
|
||||
"Defi"
|
||||
],
|
||||
"websiteLink":"https://lido.fi/",
|
||||
"whitepaperLink":"https://lido.fi/static/Lido:Ethereum-Liquid-Staking.pdf",
|
||||
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/lido-dao/"
|
||||
},
|
||||
"LINK-USD":{
|
||||
"name":"Chainlink",
|
||||
"tags":[
|
||||
"Defi"
|
||||
],
|
||||
"websiteLink":"https://chain.link/",
|
||||
"whitepaperLink":"https://link.smartcontract.com/whitepaper",
|
||||
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/chainlink/"
|
||||
},
|
||||
"LTC-USD":{
|
||||
"name":"Litecoin",
|
||||
"tags":[
|
||||
"Layer 1"
|
||||
],
|
||||
"websiteLink":"https://litecoin.org/",
|
||||
"whitepaperLink":"https://litecoin.info/index.php/Main_Page",
|
||||
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/litecoin/"
|
||||
},
|
||||
"MATIC-USD":{
|
||||
"name":"Polygon",
|
||||
"tags":[
|
||||
"Layer 2"
|
||||
],
|
||||
"websiteLink":"https://polygon.technology/",
|
||||
"whitepaperLink":"https://polygon.technology/lightpaper-polygon.pdf",
|
||||
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/polygon/"
|
||||
},
|
||||
"MKR-USD":{
|
||||
"name":"Maker",
|
||||
"tags":[
|
||||
"Governance"
|
||||
],
|
||||
"websiteLink":"https://makerdao.com",
|
||||
"whitepaperLink":"https://makerdao.com/whitepaper",
|
||||
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/maker/"
|
||||
},
|
||||
"NEAR-USD":{
|
||||
"name":"NEAR Protocol",
|
||||
"tags":[
|
||||
"Layer 1"
|
||||
],
|
||||
"websiteLink":"https://near.org",
|
||||
"whitepaperLink":"https://near.org/papers/the-official-near-white-paper/",
|
||||
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/near-protocol/"
|
||||
},
|
||||
"OP-USD":{
|
||||
"name":"Optimism",
|
||||
"tags":[
|
||||
|
||||
],
|
||||
"websiteLink":"https://www.optimism.io/",
|
||||
"whitepaperLink":"https://github.com/ethereum-optimism",
|
||||
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/optimism-ethereum/"
|
||||
},
|
||||
"PEPE-USD":{
|
||||
"name":"Pepe",
|
||||
"tags":[
|
||||
|
||||
],
|
||||
"websiteLink":"https://www.pepe.vip/",
|
||||
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/pepe/"
|
||||
},
|
||||
"RUNE-USD":{
|
||||
"name":"THORChain",
|
||||
"tags":[
|
||||
"Layer 1"
|
||||
],
|
||||
"websiteLink":"https://thorchain.org",
|
||||
"whitepaperLink":"https://whitepaper.io/document/709/thorchain-whitepaper",
|
||||
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/thorchain/"
|
||||
},
|
||||
"SEI-USD":{
|
||||
"name":"Sei",
|
||||
"tags":[
|
||||
"Layer 1",
|
||||
"Defi"
|
||||
],
|
||||
"websiteLink":"https://www.sei.io/",
|
||||
"whitepaperLink":"https://github.com/sei-protocol/sei-chain/blob/3c9576fee3494ce039df684624f918dd8066ba3f/whitepaper/Sei_Whitepaper.pdf",
|
||||
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/sei/"
|
||||
},
|
||||
"SHIB-USD":{
|
||||
"name":"Shiba Inu",
|
||||
"tags":[
|
||||
|
||||
],
|
||||
"websiteLink":"https://shibatoken.com/",
|
||||
"whitepaperLink":"https://docs.shibatoken.com/",
|
||||
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/shiba-inu/"
|
||||
},
|
||||
"SNX-USD":{
|
||||
"name":"Synthetix",
|
||||
"tags":[
|
||||
"Defi"
|
||||
],
|
||||
"websiteLink":"https://synthetix.io/",
|
||||
"whitepaperLink":"https://docs.synthetix.io/litepaper",
|
||||
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/synthetix-network-token/"
|
||||
},
|
||||
"SOL-USD":{
|
||||
"name":"Solana",
|
||||
"tags":[
|
||||
"Layer 1"
|
||||
],
|
||||
"websiteLink":"https://solana.com/",
|
||||
"whitepaperLink":"https://solana.com/solana-whitepaper.pdf",
|
||||
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/solana/"
|
||||
},
|
||||
"SUI-USD":{
|
||||
"name":"Sui",
|
||||
"tags":[
|
||||
"Layer 1"
|
||||
],
|
||||
"websiteLink":"https://sui.io/",
|
||||
"whitepaperLink":"https://github.com/MystenLabs",
|
||||
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/sui/"
|
||||
},
|
||||
"SUSHI-USD":{
|
||||
"name":"Sushi",
|
||||
"tags":[
|
||||
"Defi"
|
||||
],
|
||||
"websiteLink":"https://sushi.com/",
|
||||
"whitepaperLink":"https://docs.sushi.com/",
|
||||
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/sushiswap/"
|
||||
},
|
||||
"TRX-USD":{
|
||||
"name":"TRON",
|
||||
"tags":[
|
||||
"Defi"
|
||||
],
|
||||
"websiteLink":"https://tron.network/",
|
||||
"whitepaperLink":"https://tron.network/static/doc/white_paper_v_2_0.pdf",
|
||||
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/tron/"
|
||||
},
|
||||
"UMA-USD":{
|
||||
"name":"UMA",
|
||||
"tags":[
|
||||
"Defi"
|
||||
],
|
||||
"websiteLink":"https://umaproject.org/",
|
||||
"whitepaperLink":"https://github.com/UMAprotocol/whitepaper",
|
||||
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/uma/"
|
||||
},
|
||||
"UNI-USD":{
|
||||
"name":"Uniswap",
|
||||
"tags":[
|
||||
"Defi"
|
||||
],
|
||||
"websiteLink":"https://uniswap.org/",
|
||||
"whitepaperLink":"https://uniswap.org/whitepaper-v3.pdf",
|
||||
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/uniswap/"
|
||||
},
|
||||
"WLD-USD":{
|
||||
"name":"Worldcoin",
|
||||
"tags":[
|
||||
|
||||
],
|
||||
"websiteLink":"https://worldcoin.org/",
|
||||
"whitepaperLink":"https://whitepaper.worldcoin.org/",
|
||||
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/worldcoin-org/"
|
||||
},
|
||||
"XLM-USD":{
|
||||
"name":"Stellar",
|
||||
"tags":[
|
||||
"Layer 1"
|
||||
],
|
||||
"websiteLink":"https://www.stellar.org/",
|
||||
"whitepaperLink":"https://www.stellar.org/papers/stellar-consensus-protocol",
|
||||
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/stellar/"
|
||||
},
|
||||
"XMR-USD":{
|
||||
"name":"Monero",
|
||||
"tags":[
|
||||
"Layer 1"
|
||||
],
|
||||
"websiteLink":"https://www.getmonero.org/",
|
||||
"whitepaperLink":"https://www.getmonero.org/resources/research-lab/",
|
||||
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/monero/"
|
||||
},
|
||||
"XRP-USD":{
|
||||
"name":"Ripple",
|
||||
"tags":[
|
||||
"Layer 1"
|
||||
],
|
||||
"websiteLink":"https://ripple.com/currency/",
|
||||
"whitepaperLink":"https://github.com/ripple",
|
||||
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/xrp/"
|
||||
},
|
||||
"XTZ-USD":{
|
||||
"name":"Tezos",
|
||||
"tags":[
|
||||
"Layer 1"
|
||||
],
|
||||
"websiteLink":"https://tezos.com",
|
||||
"whitepaperLink":"https://tezos.com/whitepaper.pdf",
|
||||
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/tezos/"
|
||||
},
|
||||
"YFI-USD":{
|
||||
"name":"Yearn",
|
||||
"tags":[
|
||||
"Defi"
|
||||
],
|
||||
"websiteLink":"https://yearn.finance/",
|
||||
"whitepaperLink":"https://docs.yearn.finance/",
|
||||
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/yearn-finance/"
|
||||
},
|
||||
"ZEC-USD":{
|
||||
"name":"Zcash",
|
||||
"tags":[
|
||||
"Layer 1"
|
||||
],
|
||||
"websiteLink":"https://z.cash/",
|
||||
"whitepaperLink":"https://z.cash/technology/",
|
||||
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/zcash/"
|
||||
},
|
||||
"ZRX-USD":{
|
||||
"name":"0x",
|
||||
"tags":[
|
||||
"Defi"
|
||||
],
|
||||
"websiteLink":"https://0x.org/",
|
||||
"whitepaperLink":"https://0x.org/pdfs/0x_white_paper.pdf",
|
||||
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/0x/"
|
||||
}
|
||||
}
|
||||
"1INCH-USD": {
|
||||
"name": "1inch",
|
||||
"tags": ["Defi"],
|
||||
"websiteLink": "https://1inch.io/",
|
||||
"whitepaperLink": "https://github.com/1inch",
|
||||
"coinMarketCapsLink": "https://coinmarketcap.com/currencies/1inch/"
|
||||
},
|
||||
"AAVE-USD": {
|
||||
"name": "Aave",
|
||||
"tags": ["Defi"],
|
||||
"websiteLink": "https://aave.com/",
|
||||
"whitepaperLink": "https://github.com/aave/protocol-v2/blob/master/aave-v2-whitepaper.pdf",
|
||||
"coinMarketCapsLink": "https://coinmarketcap.com/currencies/aave/"
|
||||
},
|
||||
"ADA-USD": {
|
||||
"name": "Cardano",
|
||||
"tags": ["Layer 1"],
|
||||
"websiteLink": "https://cardano.org/",
|
||||
"whitepaperLink": "https://why.cardano.org/en/introduction/motivation/",
|
||||
"coinMarketCapsLink": "https://coinmarketcap.com/currencies/cardano/"
|
||||
},
|
||||
"ALGO-USD": {
|
||||
"name": "Algorand",
|
||||
"tags": ["Layer 1"],
|
||||
"websiteLink": "https://algorand.com/",
|
||||
"whitepaperLink": "https://algorand.com/technology/white-papers",
|
||||
"coinMarketCapsLink": "https://coinmarketcap.com/currencies/algorand/"
|
||||
},
|
||||
"APE-USD": {
|
||||
"name": "ApeCoin",
|
||||
"tags": [],
|
||||
"websiteLink": "https://apecoin.com/",
|
||||
"whitepaperLink": "https://apecoin.com/about",
|
||||
"coinMarketCapsLink": "https://coinmarketcap.com/currencies/apecoin-ape/"
|
||||
},
|
||||
"APT-USD": {
|
||||
"name": "Aptos",
|
||||
"tags": ["Layer 1"],
|
||||
"websiteLink": "https://aptoslabs.com/",
|
||||
"whitepaperLink": "https://aptos.dev/aptos-white-paper/",
|
||||
"coinMarketCapsLink": "https://coinmarketcap.com/currencies/aptos/"
|
||||
},
|
||||
"ARB-USD": {
|
||||
"name": "Arbitrum",
|
||||
"tags": [],
|
||||
"websiteLink": "https://arbitrum.io/",
|
||||
"whitepaperLink": "https://github.com/OffchainLabs/nitro",
|
||||
"coinMarketCapsLink": "https://coinmarketcap.com/currencies/arbitrum/"
|
||||
},
|
||||
"ATOM-USD": {
|
||||
"name": "Cosmos",
|
||||
"tags": ["Layer 1"],
|
||||
"websiteLink": "https://cosmos.network/",
|
||||
"whitepaperLink": "https://v1.cosmos.network/resources/whitepaper",
|
||||
"coinMarketCapsLink": "https://coinmarketcap.com/currencies/cosmos/"
|
||||
},
|
||||
"AVAX-USD": {
|
||||
"name": "Avalanche",
|
||||
"tags": ["Layer 1"],
|
||||
"websiteLink": "https://www.avalabs.org/",
|
||||
"whitepaperLink": "https://assets.website-files.com/5d80307810123f5ffbb34d6e/6008d7bbf8b10d1eb01e7e16_Avalanche%20Platform%20Whitepaper.pdf",
|
||||
"coinMarketCapsLink": "https://coinmarketcap.com/currencies/avalanche/"
|
||||
},
|
||||
"BCH-USD": {
|
||||
"name": "Bitcoin Cash",
|
||||
"tags": ["Layer 1"],
|
||||
"websiteLink": "https://bitcoincash.org/",
|
||||
"whitepaperLink": "https://bitcoincash.org/",
|
||||
"coinMarketCapsLink": "https://coinmarketcap.com/currencies/bitcoin-cash/"
|
||||
},
|
||||
"BLUR-USD": {
|
||||
"name": "Blur",
|
||||
"tags": [],
|
||||
"websiteLink": "https://blur.io/",
|
||||
"whitepaperLink": "https://docs.blur.foundation/",
|
||||
"coinMarketCapsLink": "https://coinmarketcap.com/currencies/blur-token/"
|
||||
},
|
||||
"CELO-USD": {
|
||||
"name": "Celo",
|
||||
"tags": [],
|
||||
"websiteLink": "https://celo.org",
|
||||
"whitepaperLink": "https://docs.celo.org",
|
||||
"coinMarketCapsLink": "https://coinmarketcap.com/currencies/celo/"
|
||||
},
|
||||
"BTC-USD": {
|
||||
"name": "Bitcoin",
|
||||
"tags": ["Layer 1"],
|
||||
"websiteLink": "https://bitcoin.org/",
|
||||
"whitepaperLink": "https://bitcoin.org/bitcoin.pdf",
|
||||
"coinMarketCapsLink": "https://coinmarketcap.com/currencies/bitcoin/"
|
||||
},
|
||||
"COMP-USD": {
|
||||
"name": "Compound",
|
||||
"tags": ["Defi"],
|
||||
"websiteLink": "https://compound.finance/",
|
||||
"whitepaperLink": "https://compound.finance/documents/Compound.Whitepaper.pdf",
|
||||
"coinMarketCapsLink": "https://coinmarketcap.com/currencies/compound/"
|
||||
},
|
||||
"CRV-USD": {
|
||||
"name": "Curve",
|
||||
"tags": ["Governance"],
|
||||
"websiteLink": "https://curve.fi/",
|
||||
"whitepaperLink": "https://curve.fi/whitepaper",
|
||||
"coinMarketCapsLink": "https://coinmarketcap.com/currencies/curve-dao-token/"
|
||||
},
|
||||
"DOGE-USD": {
|
||||
"name": "Dogecoin",
|
||||
"tags": ["Layer 1"],
|
||||
"websiteLink": "https://dogecoin.com/",
|
||||
"whitepaperLink": "https://github.com/dogecoin/dogecoin",
|
||||
"coinMarketCapsLink": "https://coinmarketcap.com/currencies/dogecoin/"
|
||||
},
|
||||
"DOT-USD": {
|
||||
"name": "Polkadot",
|
||||
"tags": ["Layer 1"],
|
||||
"websiteLink": "https://polkadot.network/",
|
||||
"whitepaperLink": "https://polkadot.network/PolkaDotPaper.pdf",
|
||||
"coinMarketCapsLink": "https://coinmarketcap.com/currencies/polkadot-new/"
|
||||
},
|
||||
"ENJ-USD": {
|
||||
"name": "Enjin",
|
||||
"tags": [],
|
||||
"websiteLink": "https://enjin.io/",
|
||||
"whitepaperLink": "https://cdn.enjin.io/downloads/whitepapers/enjin-coin/en.pdf/",
|
||||
"coinMarketCapsLink": "https://coinmarketcap.com/currencies/enjin-coin/"
|
||||
},
|
||||
"EOS-USD": {
|
||||
"name": "EOS",
|
||||
"tags": ["Layer 1"],
|
||||
"websiteLink": "https://eos.io/",
|
||||
"whitepaperLink": "https://github.com/EOSIO/Documentation/blob/master/TechnicalWhitePaper.md",
|
||||
"coinMarketCapsLink": "https://coinmarketcap.com/currencies/eos/"
|
||||
},
|
||||
"ETC-USD": {
|
||||
"name": "Ethereum Classic",
|
||||
"tags": ["Layer 1"],
|
||||
"websiteLink": "https://ethereumclassic.org/",
|
||||
"whitepaperLink": "https://ethereumclassic.org/why-classic",
|
||||
"coinMarketCapsLink": "https://coinmarketcap.com/currencies/ethereum-classic/"
|
||||
},
|
||||
"ETH-USD": {
|
||||
"name": "Ethereum",
|
||||
"tags": ["Layer 1"],
|
||||
"websiteLink": "https://ethereum.org/",
|
||||
"whitepaperLink": "https://ethereum.org/whitepaper/",
|
||||
"coinMarketCapsLink": "https://coinmarketcap.com/currencies/ethereum/",
|
||||
"displayStepSize": "0.001",
|
||||
"displayTickSize": "0.1"
|
||||
},
|
||||
"FIL-USD": {
|
||||
"name": "Filecoin",
|
||||
"tags": ["Layer 1"],
|
||||
"websiteLink": "https://filecoin.io/",
|
||||
"whitepaperLink": "https://filecoin.io/filecoin.pdf",
|
||||
"coinMarketCapsLink": "https://coinmarketcap.com/currencies/filecoin/"
|
||||
},
|
||||
"HNT-USD": {
|
||||
"name": "Helium",
|
||||
"tags": ["Layer 1"],
|
||||
"websiteLink": "https://www.helium.com",
|
||||
"whitepaperLink": "http://whitepaper.helium.com",
|
||||
"coinMarketCapsLink": "https://coinmarketcap.com/currencies/helium/"
|
||||
},
|
||||
"ICP-USD": {
|
||||
"name": "Internet Computer",
|
||||
"tags": ["Layer 1"],
|
||||
"websiteLink": "https://dfinity.org",
|
||||
"whitepaperLink": "https://dfinity.org/whitepaper.pdf",
|
||||
"coinMarketCapsLink": "https://coinmarketcap.com/currencies/internet-computer/"
|
||||
},
|
||||
"LDO-USD": {
|
||||
"name": "Lido DAO",
|
||||
"tags": ["Defi"],
|
||||
"websiteLink": "https://lido.fi/",
|
||||
"whitepaperLink": "https://lido.fi/static/Lido:Ethereum-Liquid-Staking.pdf",
|
||||
"coinMarketCapsLink": "https://coinmarketcap.com/currencies/lido-dao/"
|
||||
},
|
||||
"LINK-USD": {
|
||||
"name": "Chainlink",
|
||||
"tags": ["Defi"],
|
||||
"websiteLink": "https://chain.link/",
|
||||
"whitepaperLink": "https://link.smartcontract.com/whitepaper",
|
||||
"coinMarketCapsLink": "https://coinmarketcap.com/currencies/chainlink/"
|
||||
},
|
||||
"LTC-USD": {
|
||||
"name": "Litecoin",
|
||||
"tags": ["Layer 1"],
|
||||
"websiteLink": "https://litecoin.org/",
|
||||
"whitepaperLink": "https://litecoin.info/index.php/Main_Page",
|
||||
"coinMarketCapsLink": "https://coinmarketcap.com/currencies/litecoin/"
|
||||
},
|
||||
"MATIC-USD": {
|
||||
"name": "Polygon",
|
||||
"tags": ["Layer 2"],
|
||||
"websiteLink": "https://polygon.technology/",
|
||||
"whitepaperLink": "https://polygon.technology/lightpaper-polygon.pdf",
|
||||
"coinMarketCapsLink": "https://coinmarketcap.com/currencies/polygon/"
|
||||
},
|
||||
"MKR-USD": {
|
||||
"name": "Maker",
|
||||
"tags": ["Governance"],
|
||||
"websiteLink": "https://makerdao.com",
|
||||
"whitepaperLink": "https://makerdao.com/whitepaper",
|
||||
"coinMarketCapsLink": "https://coinmarketcap.com/currencies/maker/"
|
||||
},
|
||||
"NEAR-USD": {
|
||||
"name": "NEAR Protocol",
|
||||
"tags": ["Layer 1"],
|
||||
"websiteLink": "https://near.org",
|
||||
"whitepaperLink": "https://near.org/papers/the-official-near-white-paper/",
|
||||
"coinMarketCapsLink": "https://coinmarketcap.com/currencies/near-protocol/"
|
||||
},
|
||||
"OP-USD": {
|
||||
"name": "Optimism",
|
||||
"tags": [],
|
||||
"websiteLink": "https://www.optimism.io/",
|
||||
"whitepaperLink": "https://github.com/ethereum-optimism",
|
||||
"coinMarketCapsLink": "https://coinmarketcap.com/currencies/optimism-ethereum/"
|
||||
},
|
||||
"PEPE-USD": {
|
||||
"name": "Pepe",
|
||||
"tags": [],
|
||||
"websiteLink": "https://www.pepe.vip/",
|
||||
"coinMarketCapsLink": "https://coinmarketcap.com/currencies/pepe/"
|
||||
},
|
||||
"RUNE-USD": {
|
||||
"name": "THORChain",
|
||||
"tags": ["Layer 1"],
|
||||
"websiteLink": "https://thorchain.org",
|
||||
"whitepaperLink": "https://whitepaper.io/document/709/thorchain-whitepaper",
|
||||
"coinMarketCapsLink": "https://coinmarketcap.com/currencies/thorchain/"
|
||||
},
|
||||
"SEI-USD": {
|
||||
"name": "Sei",
|
||||
"tags": ["Layer 1", "Defi"],
|
||||
"websiteLink": "https://www.sei.io/",
|
||||
"whitepaperLink": "https://github.com/sei-protocol/sei-chain/blob/3c9576fee3494ce039df684624f918dd8066ba3f/whitepaper/Sei_Whitepaper.pdf",
|
||||
"coinMarketCapsLink": "https://coinmarketcap.com/currencies/sei/"
|
||||
},
|
||||
"SHIB-USD": {
|
||||
"name": "Shiba Inu",
|
||||
"tags": [],
|
||||
"websiteLink": "https://shibatoken.com/",
|
||||
"whitepaperLink": "https://docs.shibatoken.com/",
|
||||
"coinMarketCapsLink": "https://coinmarketcap.com/currencies/shiba-inu/"
|
||||
},
|
||||
"SNX-USD": {
|
||||
"name": "Synthetix",
|
||||
"tags": ["Defi"],
|
||||
"websiteLink": "https://synthetix.io/",
|
||||
"whitepaperLink": "https://docs.synthetix.io/litepaper",
|
||||
"coinMarketCapsLink": "https://coinmarketcap.com/currencies/synthetix-network-token/"
|
||||
},
|
||||
"SOL-USD": {
|
||||
"name": "Solana",
|
||||
"tags": ["Layer 1"],
|
||||
"websiteLink": "https://solana.com/",
|
||||
"whitepaperLink": "https://solana.com/solana-whitepaper.pdf",
|
||||
"coinMarketCapsLink": "https://coinmarketcap.com/currencies/solana/"
|
||||
},
|
||||
"SUI-USD": {
|
||||
"name": "Sui",
|
||||
"tags": ["Layer 1"],
|
||||
"websiteLink": "https://sui.io/",
|
||||
"whitepaperLink": "https://github.com/MystenLabs",
|
||||
"coinMarketCapsLink": "https://coinmarketcap.com/currencies/sui/"
|
||||
},
|
||||
"SUSHI-USD": {
|
||||
"name": "Sushi",
|
||||
"tags": ["Defi"],
|
||||
"websiteLink": "https://sushi.com/",
|
||||
"whitepaperLink": "https://docs.sushi.com/",
|
||||
"coinMarketCapsLink": "https://coinmarketcap.com/currencies/sushiswap/"
|
||||
},
|
||||
"TIA-USD": {
|
||||
"name": "Celestia",
|
||||
"tags": ["Layer 1"],
|
||||
"websiteLink": "https://celestia.org/",
|
||||
"whitepaperLink": "https://arxiv.org/pdf/1905.09274.pdf",
|
||||
"coinMarketCapsLink": "https://coinmarketcap.com/currencies/celestia/"
|
||||
},
|
||||
"TRX-USD": {
|
||||
"name": "TRON",
|
||||
"tags": ["Defi"],
|
||||
"websiteLink": "https://tron.network/",
|
||||
"whitepaperLink": "https://tron.network/static/doc/white_paper_v_2_0.pdf",
|
||||
"coinMarketCapsLink": "https://coinmarketcap.com/currencies/tron/"
|
||||
},
|
||||
"UMA-USD": {
|
||||
"name": "UMA",
|
||||
"tags": ["Defi"],
|
||||
"websiteLink": "https://umaproject.org/",
|
||||
"whitepaperLink": "https://github.com/UMAprotocol/whitepaper",
|
||||
"coinMarketCapsLink": "https://coinmarketcap.com/currencies/uma/"
|
||||
},
|
||||
"UNI-USD": {
|
||||
"name": "Uniswap",
|
||||
"tags": ["Defi"],
|
||||
"websiteLink": "https://uniswap.org/",
|
||||
"whitepaperLink": "https://uniswap.org/whitepaper-v3.pdf",
|
||||
"coinMarketCapsLink": "https://coinmarketcap.com/currencies/uniswap/"
|
||||
},
|
||||
"WLD-USD": {
|
||||
"name": "Worldcoin",
|
||||
"tags": [],
|
||||
"websiteLink": "https://worldcoin.org/",
|
||||
"whitepaperLink": "https://whitepaper.worldcoin.org/",
|
||||
"coinMarketCapsLink": "https://coinmarketcap.com/currencies/worldcoin-org/"
|
||||
},
|
||||
"XLM-USD": {
|
||||
"name": "Stellar",
|
||||
"tags": ["Layer 1"],
|
||||
"websiteLink": "https://www.stellar.org/",
|
||||
"whitepaperLink": "https://www.stellar.org/papers/stellar-consensus-protocol",
|
||||
"coinMarketCapsLink": "https://coinmarketcap.com/currencies/stellar/"
|
||||
},
|
||||
"XMR-USD": {
|
||||
"name": "Monero",
|
||||
"tags": ["Layer 1"],
|
||||
"websiteLink": "https://www.getmonero.org/",
|
||||
"whitepaperLink": "https://www.getmonero.org/resources/research-lab/",
|
||||
"coinMarketCapsLink": "https://coinmarketcap.com/currencies/monero/"
|
||||
},
|
||||
"XRP-USD": {
|
||||
"name": "Ripple",
|
||||
"tags": ["Layer 1"],
|
||||
"websiteLink": "https://ripple.com/currency/",
|
||||
"whitepaperLink": "https://github.com/ripple",
|
||||
"coinMarketCapsLink": "https://coinmarketcap.com/currencies/xrp/"
|
||||
},
|
||||
"XTZ-USD": {
|
||||
"name": "Tezos",
|
||||
"tags": ["Layer 1"],
|
||||
"websiteLink": "https://tezos.com",
|
||||
"whitepaperLink": "https://tezos.com/whitepaper.pdf",
|
||||
"coinMarketCapsLink": "https://coinmarketcap.com/currencies/tezos/"
|
||||
},
|
||||
"YFI-USD": {
|
||||
"name": "Yearn",
|
||||
"tags": ["Defi"],
|
||||
"websiteLink": "https://yearn.finance/",
|
||||
"whitepaperLink": "https://docs.yearn.finance/",
|
||||
"coinMarketCapsLink": "https://coinmarketcap.com/currencies/yearn-finance/"
|
||||
},
|
||||
"ZEC-USD": {
|
||||
"name": "Zcash",
|
||||
"tags": ["Layer 1"],
|
||||
"websiteLink": "https://z.cash/",
|
||||
"whitepaperLink": "https://z.cash/technology/",
|
||||
"coinMarketCapsLink": "https://coinmarketcap.com/currencies/zcash/"
|
||||
},
|
||||
"ZRX-USD": {
|
||||
"name": "0x",
|
||||
"tags": ["Defi"],
|
||||
"websiteLink": "https://0x.org/",
|
||||
"whitepaperLink": "https://0x.org/pdfs/0x_white_paper.pdf",
|
||||
"coinMarketCapsLink": "https://coinmarketcap.com/currencies/0x/"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -199,7 +199,7 @@
|
||||
},
|
||||
"mobile": {
|
||||
"native": "trust:",
|
||||
"universal": "https://link.trustwallet.com"
|
||||
"universal": ""
|
||||
},
|
||||
"desktop": {
|
||||
"native": "",
|
||||
|
||||
|
After Width: | Height: | Size: 10 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 300 KiB |
|
After Width: | Height: | Size: 9.6 KiB |
|
After Width: | Height: | Size: 481 KiB |
@@ -1,4 +1,4 @@
|
||||
import { Suspense } from 'react';
|
||||
import { lazy, Suspense } from 'react';
|
||||
import { Navigate, Route, Routes } from 'react-router-dom';
|
||||
import styled, { AnyStyledComponent, css } from 'styled-components';
|
||||
import { WagmiConfig } from 'wagmi';
|
||||
@@ -22,21 +22,9 @@ import { NotificationsProvider } from '@/hooks/useNotifications';
|
||||
import { LocalNotificationsProvider } from '@/hooks/useLocalNotifications';
|
||||
import { RestrictionProvider } from '@/hooks/useRestrictions';
|
||||
import { SubaccountProvider } from '@/hooks/useSubaccount';
|
||||
import { SquidProvider } from '@/hooks/useSquid';
|
||||
import { TestFlagsProvider } from '@/hooks/useTestFlags';
|
||||
|
||||
import { GuardedMobileRoute } from '@/components/GuardedMobileRoute';
|
||||
|
||||
import MarketsPage from '@/pages/markets/Markets';
|
||||
import PortfolioPage from '@/pages/portfolio/Portfolio';
|
||||
import { AlertsPage } from '@/pages/AlertsPage';
|
||||
import ProfilePage from '@/pages/Profile';
|
||||
import { SettingsPage } from '@/pages/settings/Settings';
|
||||
import TradePage from '@/pages/trade/Trade';
|
||||
import { RewardsPage } from '@/pages/rewards/RewardsPage';
|
||||
import { TermsOfUsePage } from '@/pages/TermsOfUsePage';
|
||||
import { PrivacyPolicyPage } from '@/pages/PrivacyPolicyPage';
|
||||
|
||||
import { HeaderDesktop } from '@/layout/Header/HeaderDesktop';
|
||||
import { FooterDesktop } from '@/layout/Footer/FooterDesktop';
|
||||
import { FooterMobile } from '@/layout/Footer/FooterMobile';
|
||||
@@ -48,11 +36,22 @@ import { config } from '@/lib/wagmi';
|
||||
|
||||
import { breakpoints } from '@/styles';
|
||||
import { layoutMixins } from '@/styles/layoutMixins';
|
||||
import { LoadingSpace } from './components/Loading/LoadingSpinner';
|
||||
|
||||
import '@/styles/constants.css';
|
||||
import '@/styles/fonts.css';
|
||||
import '@/styles/web3modal.css';
|
||||
|
||||
const MarketsPage = lazy(() => import('@/pages/markets/Markets'));
|
||||
const PortfolioPage = lazy(() => import('@/pages/portfolio/Portfolio'));
|
||||
const AlertsPage = lazy(() => import('@/pages/AlertsPage'));
|
||||
const ProfilePage = lazy(() => import('@/pages/Profile'));
|
||||
const SettingsPage = lazy(() => import('@/pages/settings/Settings'));
|
||||
const TradePage = lazy(() => import('@/pages/trade/Trade'));
|
||||
const RewardsPage = lazy(() => import('@/pages/rewards/RewardsPage'));
|
||||
const TermsOfUsePage = lazy(() => import('@/pages/TermsOfUsePage'));
|
||||
const PrivacyPolicyPage = lazy(() => import('@/pages/PrivacyPolicyPage'));
|
||||
|
||||
const queryClient = new QueryClient();
|
||||
|
||||
const Content = () => {
|
||||
@@ -71,7 +70,7 @@ const Content = () => {
|
||||
{isNotTablet && <HeaderDesktop />}
|
||||
|
||||
<Styled.Main>
|
||||
<Suspense fallback={null}>
|
||||
<Suspense fallback={<LoadingSpace id="main" />}>
|
||||
<Routes>
|
||||
<Route path={AppRoute.Trade}>
|
||||
<Route path=":market" element={<TradePage />} />
|
||||
@@ -124,13 +123,11 @@ const providers = [
|
||||
wrapProvider(QueryClientProvider, { client: queryClient }),
|
||||
wrapProvider(GrazProvider),
|
||||
wrapProvider(WagmiConfig, { config }),
|
||||
wrapProvider(TestFlagsProvider),
|
||||
wrapProvider(LocaleProvider),
|
||||
wrapProvider(RestrictionProvider),
|
||||
wrapProvider(DydxProvider),
|
||||
wrapProvider(AccountsProvider),
|
||||
wrapProvider(SubaccountProvider),
|
||||
wrapProvider(SquidProvider),
|
||||
wrapProvider(LocalNotificationsProvider),
|
||||
wrapProvider(NotificationsProvider),
|
||||
wrapProvider(DialogAreaProvider),
|
||||
|
||||
@@ -0,0 +1,390 @@
|
||||
[
|
||||
{
|
||||
"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" }
|
||||
]
|
||||
@@ -0,0 +1,119 @@
|
||||
import styled, { keyframes, type AnyStyledComponent } from 'styled-components';
|
||||
|
||||
import { Root, Item, Header, Trigger, Content } from '@radix-ui/react-accordion';
|
||||
|
||||
import { layoutMixins } from '@/styles/layoutMixins';
|
||||
import { PlusIcon } from '@/icons';
|
||||
|
||||
export type AccordionItem = {
|
||||
header: React.ReactNode;
|
||||
content: React.ReactNode;
|
||||
};
|
||||
|
||||
type AccordionProps = {
|
||||
items: AccordionItem[];
|
||||
className?: string;
|
||||
};
|
||||
|
||||
export const Accordion = ({ items, className }: AccordionProps) => (
|
||||
<Styled.Root className={className} type="single" collapsible>
|
||||
{items.map(({ header, content }, idx) => (
|
||||
<Styled.Item key={idx} value={idx.toString()}>
|
||||
<Header>
|
||||
<Styled.Trigger>
|
||||
{header}
|
||||
<Styled.Icon>
|
||||
<PlusIcon />
|
||||
</Styled.Icon>
|
||||
</Styled.Trigger>
|
||||
</Header>
|
||||
<Styled.Content>{content}</Styled.Content>
|
||||
</Styled.Item>
|
||||
))}
|
||||
</Styled.Root>
|
||||
);
|
||||
|
||||
const Styled: Record<string, AnyStyledComponent> = {};
|
||||
|
||||
Styled.Root = styled(Root)`
|
||||
> *:not(:last-child) {
|
||||
border-bottom: var(--border-width) solid var(--border-color);
|
||||
}
|
||||
`;
|
||||
|
||||
Styled.Item = styled(Item)``;
|
||||
|
||||
Styled.Icon = styled.div`
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
width: 2.25rem;
|
||||
height: 2.25rem;
|
||||
|
||||
--color-border: var(--color-layer-6);
|
||||
color: var(--color-text-1);
|
||||
background-color: var(--color-layer-5);
|
||||
border: solid var(--border-width) var(--color-border);
|
||||
border-radius: 50%;
|
||||
font: var(--font-small-book);
|
||||
|
||||
svg {
|
||||
height: 1.125em;
|
||||
width: 1.125em;
|
||||
}
|
||||
`;
|
||||
|
||||
Styled.Trigger = styled(Trigger)`
|
||||
${layoutMixins.spacedRow}
|
||||
width: 100%;
|
||||
padding: 1rem 0.75rem;
|
||||
|
||||
color: var(--color-text-1);
|
||||
text-align: start;
|
||||
|
||||
&:hover {
|
||||
${Styled.Icon} {
|
||||
color: var(--color-text-2);
|
||||
filter: brightness(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
svg {
|
||||
color: var(--color-text-0);
|
||||
transition: transform 0.3s var(--ease-out-expo);
|
||||
}
|
||||
|
||||
&[data-state='open'] svg {
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
`;
|
||||
|
||||
Styled.Content = styled(Content)`
|
||||
overflow: hidden;
|
||||
margin: 0 0.75rem 1rem;
|
||||
|
||||
color: var(--color-text-0);
|
||||
|
||||
&[data-state='open'] {
|
||||
animation: ${keyframes`
|
||||
from {
|
||||
height: 0;
|
||||
}
|
||||
to {
|
||||
height: var(--radix-accordion-content-height);
|
||||
}
|
||||
`} 0.3s var(--ease-out-expo);
|
||||
}
|
||||
|
||||
&[data-state='closed'] {
|
||||
animation: ${keyframes`
|
||||
from {
|
||||
height: var(--radix-accordion-content-height);
|
||||
}
|
||||
to {
|
||||
height: 0;
|
||||
}
|
||||
`} 0.1s var(--ease-in-expo);
|
||||
}
|
||||
`;
|
||||
@@ -45,6 +45,7 @@ const assetIcons = {
|
||||
SOL: '/currencies/sol.png',
|
||||
SUI: '/currencies/sui.png',
|
||||
SUSHI: '/currencies/sushi.png',
|
||||
TIA: '/currencies/tia.png',
|
||||
TRX: '/currencies/trx.png',
|
||||
UMA: '/currencies/uma.png',
|
||||
UNI: '/currencies/uni.png',
|
||||
@@ -71,8 +72,13 @@ export const AssetIcon = ({
|
||||
}: {
|
||||
symbol?: Nullable<string>;
|
||||
className?: string;
|
||||
}) =>
|
||||
isAssetSymbol(symbol) ? <Styled.Img src={assetIcons[symbol]} className={className} /> : null;
|
||||
}) => (
|
||||
<Styled.Img
|
||||
src={isAssetSymbol(symbol) ? assetIcons[symbol] : '/currencies/unavailable.png'}
|
||||
className={className}
|
||||
alt={symbol}
|
||||
/>
|
||||
);
|
||||
|
||||
const Styled: Record<string, AnyStyledComponent> = {};
|
||||
|
||||
|
||||
@@ -61,7 +61,7 @@ export const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonPr
|
||||
|
||||
return (
|
||||
<StyledBaseButton
|
||||
disabled={state[ButtonState.Disabled]}
|
||||
disabled={state[ButtonState.Disabled] || state[ButtonState.Loading]}
|
||||
{...{ ref, action, size, shape, state, ...otherProps }}
|
||||
>
|
||||
{
|
||||
|
||||
@@ -31,10 +31,12 @@ type ElementProps<TabItemsValue> = {
|
||||
};
|
||||
|
||||
type StyleProps = {
|
||||
fullWidthTabs?: boolean;
|
||||
className?: string;
|
||||
fullWidthTabs?: boolean;
|
||||
};
|
||||
|
||||
export type CollapsibleTabsProps<TabItemsValue> = ElementProps<TabItemsValue> & StyleProps;
|
||||
|
||||
export const CollapsibleTabs = <TabItemsValue extends string>({
|
||||
defaultValue,
|
||||
items,
|
||||
@@ -43,8 +45,9 @@ export const CollapsibleTabs = <TabItemsValue extends string>({
|
||||
onOpenChange,
|
||||
|
||||
fullWidthTabs,
|
||||
|
||||
className,
|
||||
}: ElementProps<TabItemsValue> & StyleProps) => {
|
||||
}: CollapsibleTabsProps<TabItemsValue>) => {
|
||||
const [value, setValue] = useState(defaultValue);
|
||||
|
||||
const currentItem = items.find((item) => item.value === value);
|
||||
@@ -86,8 +89,8 @@ export const CollapsibleTabs = <TabItemsValue extends string>({
|
||||
</Styled.Header>
|
||||
|
||||
<Styled.CollapsibleContent>
|
||||
{items.map(({ value, content }) => (
|
||||
<Styled.TabsContent key={value} value={value}>
|
||||
{items.map(({ asChild, value, content }) => (
|
||||
<Styled.TabsContent key={value} asChild={asChild} value={value}>
|
||||
{content}
|
||||
</Styled.TabsContent>
|
||||
))}
|
||||
@@ -219,7 +222,6 @@ Styled.Header = styled.header`
|
||||
|
||||
Styled.CollapsibleContent = styled(CollapsibleContent)`
|
||||
${layoutMixins.stack}
|
||||
${layoutMixins.perspectiveArea}
|
||||
|
||||
box-shadow: none;
|
||||
`;
|
||||
|
||||
@@ -122,6 +122,7 @@ 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,13 +44,6 @@ 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
|
||||
@@ -67,11 +60,14 @@ export const ComboboxMenu = <MenuItemValue extends string, MenuGroupValue extend
|
||||
{withSearch && (
|
||||
<Styled.Header $withStickyLayout={withStickyLayout}>
|
||||
<Styled.Input
|
||||
// ref={inputRef}
|
||||
/**
|
||||
* Mobile Issue: Search Input will always trigger mobile keyboard drawer. There is no fix.
|
||||
* https://github.com/pacocoursey/cmdk/issues/127
|
||||
*/
|
||||
autoFocus
|
||||
type="search"
|
||||
value={searchValue}
|
||||
onValueChange={setSearchValue}
|
||||
autoFocus
|
||||
placeholder={inputPlaceholder}
|
||||
/>
|
||||
</Styled.Header>
|
||||
@@ -258,6 +254,7 @@ Styled.Group = styled(Command.Group)<{ $withItemBorders?: boolean; $withStickyLa
|
||||
|
||||
> [cmdk-group-heading] {
|
||||
${layoutMixins.stickyHeader}
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
> [cmdk-group-items] {
|
||||
|
||||
@@ -10,6 +10,7 @@ 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;
|
||||
@@ -40,13 +41,17 @@ export const CopyButton = ({
|
||||
<Styled.Icon copied={copied} iconName={copied ? IconName.Check : IconName.Copy} />
|
||||
</Styled.InlineRow>
|
||||
) : buttonType === 'icon' ? (
|
||||
<Styled.IconButton
|
||||
{...buttonProps}
|
||||
copied={copied}
|
||||
action={ButtonAction.Base}
|
||||
iconName={copied ? IconName.Check : IconName.Copy}
|
||||
onClick={onCopy}
|
||||
/>
|
||||
<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>
|
||||
) : (
|
||||
<Button
|
||||
{...buttonProps}
|
||||
|
||||
@@ -38,6 +38,7 @@ import {
|
||||
HelpCircleIcon,
|
||||
HideIcon,
|
||||
HistoryIcon,
|
||||
LeaderboardIcon,
|
||||
LinkOutIcon,
|
||||
LockIcon,
|
||||
LogoShortIcon,
|
||||
@@ -53,6 +54,8 @@ import {
|
||||
OrderUntriggeredIcon,
|
||||
OverviewIcon,
|
||||
PencilIcon,
|
||||
PlayIcon,
|
||||
PlusIcon,
|
||||
PositionsIcon,
|
||||
PriceChartIcon,
|
||||
PrivacyIcon,
|
||||
@@ -110,6 +113,7 @@ export enum IconName {
|
||||
HelpCircle = 'HelpCircle',
|
||||
Hide = 'Hide',
|
||||
History = 'History',
|
||||
Leaderboard = 'Leaderboard',
|
||||
LinkOut = 'LinkOut',
|
||||
Lock = 'Lock',
|
||||
LogoShort = 'LogoShort',
|
||||
@@ -126,6 +130,8 @@ export enum IconName {
|
||||
OrderUntriggered = 'OrderUntriggered',
|
||||
Overview = 'Overview',
|
||||
Pencil = 'Pencil',
|
||||
Play = 'Play',
|
||||
Plus = 'Plus',
|
||||
Positions = 'Positions',
|
||||
PriceChart = 'PriceChart',
|
||||
Privacy = 'Privacy',
|
||||
@@ -183,6 +189,7 @@ const icons = {
|
||||
[IconName.HelpCircle]: HelpCircleIcon,
|
||||
[IconName.Hide]: HideIcon,
|
||||
[IconName.History]: HistoryIcon,
|
||||
[IconName.Leaderboard]: LeaderboardIcon,
|
||||
[IconName.LinkOut]: LinkOutIcon,
|
||||
[IconName.Lock]: LockIcon,
|
||||
[IconName.LogoShort]: LogoShortIcon,
|
||||
@@ -198,6 +205,8 @@ const icons = {
|
||||
[IconName.OrderUntriggered]: OrderUntriggeredIcon,
|
||||
[IconName.Overview]: OverviewIcon,
|
||||
[IconName.Pencil]: PencilIcon,
|
||||
[IconName.Play]: PlayIcon,
|
||||
[IconName.Plus]: PlusIcon,
|
||||
[IconName.Positions]: PositionsIcon,
|
||||
[IconName.PriceChart]: PriceChartIcon,
|
||||
[IconName.Privacy]: PrivacyIcon,
|
||||
|
||||
@@ -10,7 +10,7 @@ import {
|
||||
USD_DECIMALS,
|
||||
} from '@/constants/numbers';
|
||||
|
||||
import { BIG_NUMBERS, MustBigNumber } from '@/lib/numbers';
|
||||
import { BIG_NUMBERS } from '@/lib/numbers';
|
||||
import { useLocaleSeparators } from '@/hooks';
|
||||
|
||||
export enum InputType {
|
||||
@@ -29,31 +29,38 @@ type StyleProps = {
|
||||
type ElementProps = {
|
||||
type?: InputType;
|
||||
value?: string | number | null;
|
||||
|
||||
allowNegative?: boolean;
|
||||
decimals?: number;
|
||||
disabled?: boolean;
|
||||
id?: string;
|
||||
max?: number;
|
||||
onBlur?: () => void;
|
||||
onChange?:
|
||||
| Dispatch<SetStateAction<string>>
|
||||
| React.ReactEventHandler<HTMLInputElement>
|
||||
| ((values: NumberFormatValues, e: SourceInfo) => void);
|
||||
onFocus?: () => void;
|
||||
onInput?: ({
|
||||
value,
|
||||
floatValue,
|
||||
formattedValue,
|
||||
}: {
|
||||
value: string;
|
||||
floatValue?: number;
|
||||
formattedValue: string;
|
||||
}) => void;
|
||||
placeholder?: string;
|
||||
};
|
||||
|
||||
export type InputProps = ElementProps & StyleProps;
|
||||
type ConditionalProps =
|
||||
| {
|
||||
allowNegative?: boolean;
|
||||
decimals?: number;
|
||||
max?: number;
|
||||
onChange?: (values: NumberFormatValues, e: SourceInfo) => void;
|
||||
onInput?: ({
|
||||
value,
|
||||
floatValue,
|
||||
formattedValue,
|
||||
}: {
|
||||
value: string;
|
||||
floatValue?: number;
|
||||
formattedValue: string;
|
||||
}) => void;
|
||||
}
|
||||
| {
|
||||
allowNegative?: never;
|
||||
decimals?: never;
|
||||
max?: never;
|
||||
onChange?: Dispatch<SetStateAction<string>> | React.ReactEventHandler<HTMLInputElement>;
|
||||
onInput?: (e: SyntheticInputEvent) => void;
|
||||
};
|
||||
|
||||
export type InputProps = ElementProps & StyleProps & ConditionalProps;
|
||||
|
||||
export const Input = forwardRef<HTMLInputElement, InputProps>(
|
||||
(
|
||||
@@ -129,6 +136,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
|
||||
placeholder={placeholder}
|
||||
value={value}
|
||||
// Other
|
||||
data-1p-ignore // prevent 1Password fill
|
||||
{...otherProps}
|
||||
/>
|
||||
) : (
|
||||
@@ -137,6 +145,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
|
||||
ref={ref as React.Ref<typeof NumericFormat<unknown>>}
|
||||
id={id}
|
||||
// NumericFormat
|
||||
valueIsNumericString
|
||||
allowNegative={allowNegative}
|
||||
decimalScale={decimals}
|
||||
decimalSeparator={LOCALE_DECIMAL_SEPARATOR}
|
||||
@@ -160,7 +169,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
|
||||
? undefined
|
||||
: Number(formattedValue.replace(',', '.'));
|
||||
|
||||
onInput?.({ value, floatValue, formattedValue });
|
||||
onInput?.({ value, floatValue, formattedValue, ...e });
|
||||
}}
|
||||
// Native
|
||||
disabled={disabled}
|
||||
@@ -168,6 +177,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
|
||||
value={formattedValue}
|
||||
autoComplete="off"
|
||||
autoCorrect="off"
|
||||
data-1p-ignore // prevent 1Password fill
|
||||
{...otherProps}
|
||||
/>
|
||||
)}
|
||||
@@ -188,7 +198,6 @@ Styled.InputContainer = styled.div`
|
||||
border-radius: inherit;
|
||||
|
||||
input {
|
||||
user-select: all;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@@ -43,6 +43,7 @@ import { layoutMixins } from '@/styles/layoutMixins';
|
||||
|
||||
import { Icon, IconName } from './Icon';
|
||||
import { Tag } from './Tag';
|
||||
import { MustBigNumber } from '@/lib/numbers';
|
||||
|
||||
export { TableCell } from './Table/TableCell';
|
||||
export { TableColumnHeader } from './Table/TableColumnHeader';
|
||||
@@ -161,10 +162,7 @@ export const Table = <TableRowData extends object, TableRowKey extends Key>({
|
||||
? // String
|
||||
collator.compare(first as string, second as string)
|
||||
: // Number
|
||||
Math.sign(
|
||||
(parseInt(first as string) || (first as number)) -
|
||||
(parseInt(second as string) || (second as number))
|
||||
)) *
|
||||
MustBigNumber(first).comparedTo(MustBigNumber(second))) *
|
||||
// Flip the direction if descending order is specified.
|
||||
(sortDirection === 'descending' ? -1 : 1)
|
||||
);
|
||||
|
||||
@@ -21,6 +21,7 @@ export type TabItem<TabItemsValue> = {
|
||||
content?: React.ReactNode;
|
||||
subitems?: TabItem<TabItemsValue>[];
|
||||
customTrigger?: ReactNode;
|
||||
asChild?: boolean;
|
||||
};
|
||||
|
||||
type ElementProps<TabItemsValue> = {
|
||||
@@ -41,6 +42,8 @@ type StyleProps = {
|
||||
className?: string;
|
||||
};
|
||||
|
||||
export type TabsProps<TabItemsValue> = ElementProps<TabItemsValue> & StyleProps;
|
||||
|
||||
export const Tabs = <TabItemsValue extends string>({
|
||||
defaultValue,
|
||||
value,
|
||||
@@ -107,9 +110,10 @@ export const Tabs = <TabItemsValue extends string>({
|
||||
sharedContent
|
||||
) : (
|
||||
<Styled.Stack>
|
||||
{items.map(({ value, content, forceMount }) => (
|
||||
{items.map(({ asChild, value, content, forceMount }) => (
|
||||
<Styled.Content
|
||||
key={value}
|
||||
asChild={asChild}
|
||||
value={value}
|
||||
forceMount={forceMount}
|
||||
$hide={forceMount && currentItem?.value !== value}
|
||||
@@ -242,7 +246,6 @@ Styled.Trigger = styled(Trigger)<{ $withBorders?: boolean }>`
|
||||
|
||||
Styled.Stack = styled.div`
|
||||
${layoutMixins.stack}
|
||||
${layoutMixins.perspectiveArea}
|
||||
|
||||
box-shadow: none;
|
||||
`;
|
||||
|
||||
@@ -4,6 +4,7 @@ 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';
|
||||
|
||||
@@ -76,7 +77,7 @@ export const Toast = ({
|
||||
<Close asChild>
|
||||
<$CloseButton
|
||||
iconName={IconName.Close}
|
||||
shape={ButtonShape.Square}
|
||||
shape={ButtonShape.Circle}
|
||||
size={ButtonSize.XSmall}
|
||||
onClick={(e: MouseEvent) => e.stopPropagation()}
|
||||
/>
|
||||
@@ -249,12 +250,16 @@ 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,6 +1,7 @@
|
||||
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 = {
|
||||
@@ -12,7 +13,9 @@ type StyleProps = {
|
||||
className?: string;
|
||||
};
|
||||
|
||||
export const ToastArea = ({ swipeDirection, children, className }: ElementProps & StyleProps) => (
|
||||
type ToastAreaProps = ElementProps & StyleProps;
|
||||
|
||||
export const ToastArea = ({ swipeDirection, children, className }: ToastAreaProps) => (
|
||||
<$ToastArea className={className}>
|
||||
<Provider swipeDirection={swipeDirection}>
|
||||
{children}
|
||||
|
||||
@@ -3,6 +3,7 @@ export enum DialogTypes {
|
||||
Deposit = 'Deposit',
|
||||
DisconnectWallet = 'DisconnectWallet',
|
||||
ExchangeOffline = 'ExchangeOffline',
|
||||
ExternalLink = 'ExternalLink',
|
||||
FillDetails = 'FillDetails',
|
||||
Help = 'Help',
|
||||
ExternalNavKeplr = 'ExternalNavKeplr',
|
||||
@@ -12,7 +13,6 @@ export enum DialogTypes {
|
||||
OrderDetails = 'OrderDetails',
|
||||
Preferences = 'Preferences',
|
||||
RateLimit = 'RateLimit',
|
||||
Receive = 'Receive',
|
||||
RestrictedGeo = 'RestrictedGeo',
|
||||
RestrictedWallet = 'RestrictedWallet',
|
||||
Trade = 'Trade',
|
||||
|
||||
@@ -22,6 +22,7 @@ export enum LocalStorageKey {
|
||||
SelectedTheme = 'dydx.SelectedTheme',
|
||||
SelectedTradeLayout = 'dydx.SelectedTradeLayout',
|
||||
TradingViewChartConfig = 'dydx.TradingViewChartConfig',
|
||||
HasSeenLaunchIncentives = 'dydx.HasSeenLaunchIncentives',
|
||||
}
|
||||
|
||||
export const LOCAL_STORAGE_VERSIONS = {
|
||||
|
||||
@@ -4,6 +4,7 @@ import { StatusResponse } from '@0xsquid/sdk';
|
||||
export enum NotificationType {
|
||||
AbacusGenerated = 'AbacusGenerated',
|
||||
SquidTransfer = 'SquidTransfer',
|
||||
ReleaseUpdates = 'ReleaseUpdates',
|
||||
}
|
||||
|
||||
export enum NotificationComponentType {}
|
||||
@@ -121,13 +122,20 @@ export type NotificationDisplayData = {
|
||||
toastDuration?: number;
|
||||
};
|
||||
|
||||
export enum TransferNotificationTypes {
|
||||
Withdrawal = 'withdrawal',
|
||||
Deposit = 'deposit',
|
||||
}
|
||||
|
||||
// Notification types
|
||||
export type TransferNotifcation = {
|
||||
txHash: string;
|
||||
type?: TransferNotificationTypes;
|
||||
toChainId?: string;
|
||||
fromChainId?: string;
|
||||
toAmount?: number;
|
||||
triggeredAt?: number;
|
||||
isCctp?: boolean;
|
||||
errorCount?: number;
|
||||
status?: StatusResponse;
|
||||
};
|
||||
|
||||
@@ -10,6 +10,7 @@ export const LEVERAGE_DECIMALS = 2;
|
||||
export const TOKEN_DECIMALS = 4;
|
||||
export const LARGE_TOKEN_DECIMALS = 2;
|
||||
export const FEE_DECIMALS = 3;
|
||||
export const FUNDING_DECIMALS = 6;
|
||||
|
||||
export const QUANTUM_MULTIPLIER = 1_000_000;
|
||||
|
||||
@@ -18,3 +19,7 @@ export enum NumberSign {
|
||||
Negative = 'Negative',
|
||||
Neutral = 'Neutral',
|
||||
}
|
||||
|
||||
// Deposit/Withdraw
|
||||
export const MAX_CCTP_TRANSFER_AMOUNT = 1_000_000;
|
||||
export const MAX_PRICE_IMPACT = 0.02; // 2%
|
||||
|
||||
@@ -1,6 +1,10 @@
|
||||
import { type TooltipStrings, TOOLTIP_STRING_KEYS } from '@/constants/localization';
|
||||
|
||||
export const depositTooltips: TooltipStrings = {
|
||||
'minimum-deposit-amount': ({ stringGetter }) => ({
|
||||
title: stringGetter({ key: TOOLTIP_STRING_KEYS.MINIMUM_DEPOSIT_AMOUNT_TITLE }),
|
||||
body: stringGetter({ key: TOOLTIP_STRING_KEYS.MINIMUM_DEPOSIT_AMOUNT_BODY }),
|
||||
}),
|
||||
swap: ({ stringGetter }) => ({
|
||||
title: stringGetter({ key: TOOLTIP_STRING_KEYS.SWAP_TITLE }),
|
||||
body: stringGetter({ key: TOOLTIP_STRING_KEYS.SWAP_BODY }),
|
||||
|
||||
@@ -5,6 +5,10 @@ export const withdrawTooltips: TooltipStrings = {
|
||||
title: stringGetter({ key: TOOLTIP_STRING_KEYS.FAST_WITHDRAW_FEE_TITLE }),
|
||||
body: stringGetter({ key: TOOLTIP_STRING_KEYS.FAST_WITHDRAW_FEE_BODY }),
|
||||
}),
|
||||
'minimum-amount-received': ({ stringGetter }) => ({
|
||||
title: stringGetter({ key: TOOLTIP_STRING_KEYS.MINIMUM_AMOUNT_RECEIVED_TITLE }),
|
||||
body: stringGetter({ key: TOOLTIP_STRING_KEYS.MINIMUM_AMOUNT_RECEIVED_BODY }),
|
||||
}),
|
||||
'withdraw-types': ({ stringGetter }) => ({
|
||||
title: stringGetter({ key: TOOLTIP_STRING_KEYS.WITHDRAW_TYPES_TITLE }),
|
||||
body: stringGetter({ key: TOOLTIP_STRING_KEYS.WITHDRAW_TYPES_BODY }),
|
||||
|
||||
@@ -116,3 +116,15 @@ export enum MobilePlaceOrderSteps {
|
||||
PlacingOrder = 'PlacingOrder',
|
||||
Confirmation = 'Confirmation',
|
||||
}
|
||||
|
||||
export const CLEARED_TRADE_INPUTS = {
|
||||
limitPriceInput: '',
|
||||
triggerPriceInput: '',
|
||||
trailingPercentInput: '',
|
||||
};
|
||||
|
||||
export const CLEARED_SIZE_INPUTS = {
|
||||
amountInput: '',
|
||||
usdAmountInput: '',
|
||||
leverageInput: '',
|
||||
};
|
||||
|
||||
@@ -22,6 +22,7 @@ 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 {
|
||||
@@ -49,5 +50,6 @@ export {
|
||||
useSelectedNetwork,
|
||||
useStringGetter,
|
||||
useSubaccount,
|
||||
useTradeFormInputs,
|
||||
useURLConfigs,
|
||||
};
|
||||
|
||||
@@ -2,7 +2,7 @@ import { useCallback, useContext, createContext, useEffect, useState, useMemo }
|
||||
|
||||
import { useDispatch } from 'react-redux';
|
||||
import { AES, enc } from 'crypto-js';
|
||||
import { LocalWallet, type Subaccount } from '@dydxprotocol/v4-client-js';
|
||||
import { NOBLE_BECH32_PREFIX, LocalWallet, type Subaccount } from '@dydxprotocol/v4-client-js';
|
||||
|
||||
import { OnboardingGuard, OnboardingState, type EvmDerivedAddresses } from '@/constants/account';
|
||||
import { DialogTypes } from '@/constants/dialogs';
|
||||
@@ -219,6 +219,16 @@ const useAccountsContext = () => {
|
||||
else abacusStateManager.attemptDisconnectAccount();
|
||||
}, [localDydxWallet]);
|
||||
|
||||
useEffect(() => {
|
||||
const setNobleWallet = async () => {
|
||||
if (hdKey?.mnemonic) {
|
||||
const nobleWallet = await LocalWallet.fromMnemonic(hdKey.mnemonic, NOBLE_BECH32_PREFIX);
|
||||
abacusStateManager.setNobleWallet(nobleWallet);
|
||||
}
|
||||
};
|
||||
setNobleWallet();
|
||||
}, [hdKey?.mnemonic]);
|
||||
|
||||
// clear subaccounts when no dydxAddress is set
|
||||
useEffect(() => {
|
||||
(async () => {
|
||||
|
||||
@@ -5,16 +5,15 @@ import { useMatch, useNavigate } from 'react-router-dom';
|
||||
import { LocalStorageKey } from '@/constants/localStorage';
|
||||
import { DEFAULT_MARKETID } from '@/constants/markets';
|
||||
import { AppRoute } from '@/constants/routes';
|
||||
import { useLocalStorage } from '@/hooks/useLocalStorage';
|
||||
|
||||
import { getSelectedNetwork } from '@/state/appSelectors';
|
||||
import { closeDialogInTradeBox } from '@/state/dialogs';
|
||||
import { setCurrentMarketId } from '@/state/perpetuals';
|
||||
import { getMarketIds } from '@/state/perpetualsSelectors';
|
||||
|
||||
import abacusStateManager from '@/lib/abacus';
|
||||
|
||||
import { useLocalStorage } from './useLocalStorage';
|
||||
import { getMarketIds } from '@/state/perpetualsSelectors';
|
||||
|
||||
export const useCurrentMarketId = () => {
|
||||
const navigate = useNavigate();
|
||||
const match = useMatch(`/${AppRoute.Trade}/:marketId`);
|
||||
@@ -23,6 +22,7 @@ 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,
|
||||
@@ -32,17 +32,35 @@ export const useCurrentMarketId = () => {
|
||||
if (marketIds.length === 0) return marketId ?? lastViewedMarket;
|
||||
if (!marketIds.includes(marketId ?? lastViewedMarket)) return DEFAULT_MARKETID;
|
||||
return marketId ?? lastViewedMarket;
|
||||
}, [marketIds, marketId]);
|
||||
}, [hasMarketIds, marketId]);
|
||||
|
||||
useEffect(() => {
|
||||
setLastViewedMarket(validId);
|
||||
dispatch(setCurrentMarketId(validId));
|
||||
dispatch(closeDialogInTradeBox());
|
||||
// If v4_markets has not been subscribed to yet or marketId is not specified, default to validId
|
||||
if (!hasMarketIds || !marketId) {
|
||||
setLastViewedMarket(validId);
|
||||
dispatch(setCurrentMarketId(validId));
|
||||
dispatch(closeDialogInTradeBox());
|
||||
|
||||
navigate(`${AppRoute.Trade}/${validId}`, {
|
||||
replace: true,
|
||||
});
|
||||
}, [validId]);
|
||||
if (validId !== marketId) {
|
||||
navigate(`${AppRoute.Trade}/${validId}`, {
|
||||
replace: true,
|
||||
});
|
||||
}
|
||||
} else {
|
||||
// If v4_markets has been subscribed to, check if marketId is valid
|
||||
if (!marketIds.includes(marketId)) {
|
||||
// If marketId is not valid (i.e. final settlement), navigate to markets page
|
||||
navigate(AppRoute.Markets, {
|
||||
replace: true,
|
||||
});
|
||||
} else {
|
||||
// If marketId is valid, set currentMarketId
|
||||
setLastViewedMarket(marketId);
|
||||
dispatch(setCurrentMarketId(marketId));
|
||||
dispatch(closeDialogInTradeBox());
|
||||
}
|
||||
}
|
||||
}, [hasMarketIds, marketId]);
|
||||
|
||||
useEffect(() => {
|
||||
// Check for marketIds otherwise Abacus will silently fail its isMarketValid check
|
||||
|
||||
@@ -1,11 +1,11 @@
|
||||
import { createContext, useContext, useCallback, useEffect, useMemo } from 'react';
|
||||
import { useQuery } from 'react-query';
|
||||
import type { StatusResponse } from '@0xsquid/sdk';
|
||||
|
||||
import { LOCAL_STORAGE_VERSIONS, LocalStorageKey } from '@/constants/localStorage';
|
||||
import { type TransferNotifcation } from '@/constants/notifications';
|
||||
import { useAccounts } from '@/hooks/useAccounts';
|
||||
import { STATUS_ERROR_GRACE_PERIOD, useSquid } from '@/hooks/useSquid';
|
||||
|
||||
import { fetchSquidStatus, STATUS_ERROR_GRACE_PERIOD } from '@/lib/squid';
|
||||
|
||||
import { useLocalStorage } from './useLocalStorage';
|
||||
|
||||
@@ -68,8 +68,6 @@ const useLocalNotificationsContext = () => {
|
||||
[transferNotifications]
|
||||
);
|
||||
|
||||
const squid = useSquid();
|
||||
|
||||
useQuery({
|
||||
queryKey: 'getTransactionStatus',
|
||||
queryFn: async () => {
|
||||
@@ -81,23 +79,27 @@ const useLocalNotificationsContext = () => {
|
||||
toChainId,
|
||||
fromChainId,
|
||||
triggeredAt,
|
||||
isCctp,
|
||||
errorCount,
|
||||
status: currentStatus,
|
||||
} = transferNotification;
|
||||
|
||||
// @ts-ignore status.errors is not in the type definition but can be returned
|
||||
// also error can some time come back as an empty object so we need to ignore for that
|
||||
const hasErrors = !!currentStatus?.errors ||
|
||||
(currentStatus?.error && Object.keys(currentStatus.error).length !== 0);
|
||||
|
||||
if (
|
||||
// @ts-ignore status.errors is not in the type definition but can be returned
|
||||
!currentStatus?.errors &&
|
||||
!currentStatus?.error &&
|
||||
!hasErrors &&
|
||||
(!currentStatus?.squidTransactionStatus ||
|
||||
currentStatus?.squidTransactionStatus === 'ongoing')
|
||||
) {
|
||||
try {
|
||||
const status = await squid?.getStatus({
|
||||
const status = await fetchSquidStatus({
|
||||
transactionId: txHash,
|
||||
toChainId,
|
||||
fromChainId,
|
||||
});
|
||||
}, isCctp);
|
||||
|
||||
if (status) {
|
||||
transferNotification.status = status;
|
||||
|
||||
@@ -20,11 +20,13 @@ import {
|
||||
type NotificationTypeConfig,
|
||||
NotificationType,
|
||||
DEFAULT_TOAST_AUTO_CLOSE_MS,
|
||||
TransferNotificationTypes,
|
||||
} from '@/constants/notifications';
|
||||
|
||||
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';
|
||||
@@ -151,20 +153,20 @@ export const notificationTypes: NotificationTypeConfig[] = [
|
||||
|
||||
useEffect(() => {
|
||||
for (const transfer of transferNotifications) {
|
||||
const { fromChainId, status, txHash, toAmount } = transfer;
|
||||
const { fromChainId, status, txHash, toAmount, type } = transfer;
|
||||
const isFinished = Boolean(status) && status?.squidTransactionStatus !== 'ongoing';
|
||||
const icon = <Icon iconName={isFinished ? IconName.Transfer : IconName.Clock} />;
|
||||
|
||||
const type =
|
||||
fromChainId === ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId
|
||||
? 'withdrawal'
|
||||
: 'deposit';
|
||||
const transferType =
|
||||
type ?? fromChainId === ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId
|
||||
? TransferNotificationTypes.Withdrawal
|
||||
: TransferNotificationTypes.Deposit;
|
||||
|
||||
const title = stringGetter({
|
||||
key: {
|
||||
deposit: isFinished ? STRING_KEYS.DEPOSIT : STRING_KEYS.DEPOSIT_IN_PROGRESS,
|
||||
withdrawal: isFinished ? STRING_KEYS.WITHDRAW : STRING_KEYS.WITHDRAW_IN_PROGRESS,
|
||||
}[type],
|
||||
}[transferType],
|
||||
});
|
||||
|
||||
const toChainEta = status?.toChain?.chainData?.estimatedRouteDuration || 0;
|
||||
@@ -189,7 +191,7 @@ export const notificationTypes: NotificationTypeConfig[] = [
|
||||
slotIcon={icon}
|
||||
slotTitle={title}
|
||||
transfer={transfer}
|
||||
type={type}
|
||||
type={transferType}
|
||||
triggeredAt={transfer.triggeredAt}
|
||||
notification={notification}
|
||||
/>
|
||||
@@ -205,9 +207,57 @@ 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: {
|
||||
DOS_BLOGPOST: (
|
||||
<$Link
|
||||
href="https://www.dydxopsdao.com/blog/deep-dive-full-trading"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
{stringGetter({ key: STRING_KEYS.HERE })}
|
||||
</$Link>
|
||||
),
|
||||
TRADING_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,6 +81,7 @@ const useNotificationsContext = () => {
|
||||
setNotificationPreferences({
|
||||
[NotificationType.AbacusGenerated]: true,
|
||||
[NotificationType.SquidTransfer]: true,
|
||||
[NotificationType.ReleaseUpdates]: true,
|
||||
version: LOCAL_STORAGE_VERSIONS[LocalStorageKey.NotificationPreferences],
|
||||
});
|
||||
}
|
||||
|
||||
@@ -1,50 +0,0 @@
|
||||
import { createContext, useContext, useEffect, useMemo, useState } from 'react';
|
||||
import { useSelector } from 'react-redux';
|
||||
import { Squid } from '@0xsquid/sdk';
|
||||
|
||||
import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
|
||||
|
||||
import { getSelectedNetwork } from '@/state/appSelectors';
|
||||
|
||||
export const NATIVE_TOKEN_ADDRESS = '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE';
|
||||
|
||||
export const STATUS_ERROR_GRACE_PERIOD = 300_000;
|
||||
|
||||
const useSquidContext = () => {
|
||||
const selectedNetwork = useSelector(getSelectedNetwork);
|
||||
const [_, setInitialized] = useState(false);
|
||||
|
||||
const initializeClient = async () => {
|
||||
setInitialized(false);
|
||||
if (!squid) return;
|
||||
await squid.init();
|
||||
setInitialized(true);
|
||||
};
|
||||
|
||||
const squid = useMemo(
|
||||
() =>
|
||||
new Squid({
|
||||
baseUrl: ENVIRONMENT_CONFIG_MAP[selectedNetwork]?.endpoints['0xsquid'],
|
||||
integratorId: ENVIRONMENT_CONFIG_MAP[selectedNetwork]?.squidIntegratorId,
|
||||
}),
|
||||
[selectedNetwork]
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (squid) {
|
||||
initializeClient();
|
||||
}
|
||||
}, [squid]);
|
||||
|
||||
return squid;
|
||||
};
|
||||
|
||||
type SquidContextType = ReturnType<typeof useSquidContext>;
|
||||
const SquidContext = createContext<SquidContextType | undefined>(undefined);
|
||||
SquidContext.displayName = '0xSquid';
|
||||
|
||||
export const SquidProvider = ({ ...props }) => (
|
||||
<SquidContext.Provider value={useSquidContext()} {...props} />
|
||||
);
|
||||
|
||||
export const useSquid = () => useContext(SquidContext);
|
||||
@@ -31,6 +31,7 @@ import { log } from '@/lib/telemetry';
|
||||
import { useAccounts } from './useAccounts';
|
||||
import { useTokenConfigs } from './useTokenConfigs';
|
||||
import { useDydxClient } from './useDydxClient';
|
||||
import { hashFromTx } from '@/lib/hashfromTx';
|
||||
|
||||
type SubaccountContextType = ReturnType<typeof useSubaccountContext>;
|
||||
const SubaccountContext = createContext<SubaccountContextType>({} as SubaccountContextType);
|
||||
@@ -293,12 +294,29 @@ export const useSubaccountContext = ({ localDydxWallet }: { localDydxWallet?: Lo
|
||||
);
|
||||
|
||||
const sendSquidWithdraw = useCallback(
|
||||
async (amount: number, payload: string) => {
|
||||
async (amount: number, payload: string, isCctp?: boolean) => {
|
||||
|
||||
const cctpWithdraw = () => {
|
||||
return new Promise<string>((resolve, reject) =>
|
||||
abacusStateManager.cctpWithdraw((success, error, data) => {
|
||||
const parsedData = JSON.parse(data);
|
||||
if (success && parsedData?.code == 0) {
|
||||
resolve(parsedData?.transactionHash);
|
||||
} else {
|
||||
reject(error);
|
||||
}
|
||||
})
|
||||
)
|
||||
}
|
||||
if (isCctp) {
|
||||
return await cctpWithdraw();
|
||||
}
|
||||
|
||||
if (!subaccountClient) {
|
||||
return;
|
||||
}
|
||||
|
||||
return await sendSquidWithdrawFromSubaccount({ subaccountClient, amount, payload });
|
||||
const tx = await sendSquidWithdrawFromSubaccount({ subaccountClient, amount, payload });
|
||||
return hashFromTx(tx?.hash);
|
||||
},
|
||||
[subaccountClient, sendSquidWithdrawFromSubaccount]
|
||||
);
|
||||
|
||||
@@ -1,46 +0,0 @@
|
||||
import { createContext, useContext, useEffect, useState } from 'react';
|
||||
import { useLocation } from 'react-router-dom';
|
||||
import queryString from 'query-string';
|
||||
|
||||
class TestFlags {
|
||||
public queryParams: queryString.ParsedQuery<string>;
|
||||
|
||||
constructor() {
|
||||
this.queryParams = {};
|
||||
}
|
||||
|
||||
setQueryParams(flags: queryString.ParsedQuery<string>) {
|
||||
this.queryParams = flags;
|
||||
}
|
||||
|
||||
get displayInitializingMarkets() {
|
||||
return !!this.queryParams.displayInitializingMarkets;
|
||||
}
|
||||
}
|
||||
|
||||
export const testFlags = new TestFlags();
|
||||
|
||||
const useTestFlagsContext = () => {
|
||||
const [queryParams, setQueryParams] = useState<queryString.ParsedQuery<string>>({});
|
||||
const location = useLocation();
|
||||
|
||||
useEffect(() => {
|
||||
const parsedQueryParams = queryString.parse(location.search.substring(-1));
|
||||
testFlags.setQueryParams(parsedQueryParams);
|
||||
setQueryParams(parsedQueryParams);
|
||||
}, []);
|
||||
|
||||
return {
|
||||
...queryParams,
|
||||
};
|
||||
};
|
||||
|
||||
type TestFlagsContextType = ReturnType<typeof useTestFlagsContext>;
|
||||
const TestFlagsContext = createContext<TestFlagsContextType>({} as TestFlagsContextType);
|
||||
TestFlagsContext.displayName = 'TestFlags';
|
||||
|
||||
export const TestFlagsProvider = ({ ...props }) => (
|
||||
<TestFlagsContext.Provider value={useTestFlagsContext()} {...props} />
|
||||
);
|
||||
|
||||
export const useTestFlags = () => useContext(TestFlagsContext);
|
||||
@@ -0,0 +1,30 @@
|
||||
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(() => {
|
||||
abacusStateManager.setTradeValue({
|
||||
value: triggerPriceInput,
|
||||
field: TradeInputField.triggerPrice,
|
||||
});
|
||||
}, [triggerPriceInput]);
|
||||
|
||||
useEffect(() => {
|
||||
abacusStateManager.setTradeValue({ value: limitPriceInput, field: TradeInputField.limitPrice });
|
||||
}, [limitPriceInput]);
|
||||
|
||||
useEffect(() => {
|
||||
abacusStateManager.setTradeValue({
|
||||
value: trailingPercentInput,
|
||||
field: TradeInputField.trailingPercent,
|
||||
});
|
||||
}, [trailingPercentInput]);
|
||||
};
|
||||
@@ -32,6 +32,7 @@ export { default as GiftboxIcon } from './giftbox.svg';
|
||||
export { default as HelpCircleIcon } from './help-circle.svg';
|
||||
export { default as HideIcon } from './hide.svg';
|
||||
export { default as HistoryIcon } from './history.svg';
|
||||
export { default as LeaderboardIcon } from './leaderboard.svg';
|
||||
export { default as LinkOutIcon } from './link-out.svg';
|
||||
export { default as LockIcon } from './lock.svg';
|
||||
export { default as LogoShortIcon } from './logo-short';
|
||||
@@ -43,6 +44,7 @@ export { default as OrderbookIcon } from './orderbook.svg';
|
||||
export { default as OverviewIcon } from './overview.svg';
|
||||
export { default as PencilIcon } from './pencil.svg';
|
||||
export { default as PlayIcon } from './play.svg';
|
||||
export { default as PlusIcon } from './plus.svg';
|
||||
export { default as PortfolioIcon } from './portfolio.svg';
|
||||
export { default as PositionsIcon } from './positions.svg';
|
||||
export { default as PriceChartIcon } from './price-chart.svg';
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
<svg width="13" height="14" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M0.0996094 2.60156C0.0996094 2.07113 0.310323 1.56242 0.685396 1.18735C1.06047 0.812276 1.56918 0.601563 2.09961 0.601562H10.8996C11.43 0.601563 11.9387 0.812276 12.3138 1.18735C12.6889 1.56242 12.8996 2.07113 12.8996 2.60156C12.8996 3.132 12.6889 3.6407 12.3138 4.01578C11.9387 4.39085 11.43 4.60156 10.8996 4.60156H2.09961C1.56918 4.60156 1.06047 4.39085 0.685396 4.01578C0.310323 3.6407 0.0996094 3.132 0.0996094 2.60156ZM0.699609 6.26796C0.540479 6.26796 0.387867 6.33118 0.275345 6.4437C0.162823 6.55622 0.0996094 6.70883 0.0996094 6.86796C0.0996094 7.02709 0.162823 7.1797 0.275345 7.29223C0.387867 7.40475 0.540479 7.46796 0.699609 7.46796H12.2996C12.4587 7.46796 12.6114 7.40475 12.7239 7.29223C12.8364 7.1797 12.8996 7.02709 12.8996 6.86796C12.8996 6.70883 12.8364 6.55622 12.7239 6.4437C12.6114 6.33118 12.4587 6.26796 12.2996 6.26796H0.699609ZM0.699609 9.13196C0.540479 9.13196 0.387867 9.19518 0.275345 9.3077C0.162823 9.42022 0.0996094 9.57283 0.0996094 9.73196C0.0996094 9.89109 0.162823 10.0437 0.275345 10.1562C0.387867 10.2687 0.540479 10.332 0.699609 10.332H12.2996C12.4587 10.332 12.6114 10.2687 12.7239 10.1562C12.8364 10.0437 12.8996 9.89109 12.8996 9.73196C12.8996 9.57283 12.8364 9.42022 12.7239 9.3077C12.6114 9.19518 12.4587 9.13196 12.2996 9.13196H0.699609ZM0.699609 12.0016C0.540479 12.0016 0.387867 12.0648 0.275345 12.1773C0.162823 12.2898 0.0996094 12.4424 0.0996094 12.6016C0.0996094 12.7607 0.162823 12.9133 0.275345 13.0258C0.387867 13.1383 0.540479 13.2016 0.699609 13.2016H12.2996C12.4587 13.2016 12.6114 13.1383 12.7239 13.0258C12.8364 12.9133 12.8996 12.7607 12.8996 12.6016C12.8996 12.4424 12.8364 12.2898 12.7239 12.1773C12.6114 12.0648 12.4587 12.0016 12.2996 12.0016H0.699609Z" fill="currentColor"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
@@ -0,0 +1 @@
|
||||
<svg fill="none" height="12" viewBox="0 0 12 12" width="12" xmlns="http://www.w3.org/2000/svg"><path d="m6.75.75c0-.198912-.07902-.389678-.21967-.53033-.14065-.1406525-.33142-.21967-.53033-.21967s-.38968.0790175-.53033.21967c-.14065.140652-.21967.331418-.21967.53033v4.5h-4.5c-.198912 0-.389678.07902-.53033.21967-.1406525.14065-.21967.33142-.21967.53033s.0790175.38968.21967.53033c.140652.14065.331418.21967.53033.21967h4.5v4.5c0 .1989.07902.3897.21967.5303.14065.1407.33142.2197.53033.2197s.38968-.079.53033-.2197c.14065-.1406.21967-.3314.21967-.5303v-4.5h4.5c.1989 0 .3897-.07902.5303-.21967.1407-.14065.2197-.33142.2197-.53033s-.079-.38968-.2197-.53033c-.1406-.14065-.3314-.21967-.5303-.21967h-4.5z" fill="currentColor"/></svg>
|
||||
|
After Width: | Height: | Size: 731 B |
@@ -11,13 +11,13 @@ import { DepositDialog } from '@/views/dialogs/DepositDialog';
|
||||
import { DisconnectDialog } from '@/views/dialogs/DisconnectDialog';
|
||||
import { ExchangeOfflineDialog } from '@/views/dialogs/ExchangeOfflineDialog';
|
||||
import { HelpDialog } from '@/views/dialogs/HelpDialog';
|
||||
import { ExternalLinkDialog } from '@/views/dialogs/ExternalLinkDialog';
|
||||
import { ExternalNavKeplrDialog } from '@/views/dialogs/ExternalNavKeplrDialog';
|
||||
import { MnemonicExportDialog } from '@/views/dialogs/MnemonicExportDialog';
|
||||
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';
|
||||
@@ -54,13 +54,13 @@ export const DialogManager = () => {
|
||||
[DialogTypes.FillDetails]: <FillDetailsDialog {...modalProps} />,
|
||||
[DialogTypes.Help]: <HelpDialog {...modalProps} />,
|
||||
[DialogTypes.ExternalNavKeplr]: <ExternalNavKeplrDialog {...modalProps} />,
|
||||
[DialogTypes.ExternalLink]: <ExternalLinkDialog {...modalProps} />,
|
||||
[DialogTypes.MnemonicExport]: <MnemonicExportDialog {...modalProps} />,
|
||||
[DialogTypes.MobileSignIn]: <MobileSignInDialog {...modalProps} />,
|
||||
[DialogTypes.Onboarding]: <OnboardingDialog {...modalProps} />,
|
||||
[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 } from '@/constants/buttons';
|
||||
import { ButtonSize, ButtonType } from '@/constants/buttons';
|
||||
import { STRING_KEYS } from '@/constants/localization';
|
||||
import { ENVIRONMENT_CONFIG_MAP, isDev } from '@/constants/networks';
|
||||
|
||||
@@ -55,10 +55,12 @@ 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>
|
||||
@@ -132,7 +134,7 @@ Styled.StatusDot = styled.div<{ exchangeStatus: ExchangeStatus }>`
|
||||
Styled.FooterButton = styled(Button)`
|
||||
--button-height: 1.5rem;
|
||||
--button-radius: 0.25rem;
|
||||
--button-backgroundColor: var(--color-layer-2);
|
||||
--button-backgroundColor: transparent;
|
||||
--button-border: none;
|
||||
--button-textColor: var(--color-text-0);
|
||||
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
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';
|
||||
@@ -11,8 +10,8 @@ import { useShouldShowFooter, useStringGetter } from '@/hooks';
|
||||
import { layoutMixins } from '@/styles/layoutMixins';
|
||||
|
||||
import { NavigationMenu } from '@/components/NavigationMenu';
|
||||
import { Icon } from '@/components/Icon';
|
||||
import { BellIcon, MarketsIcon, PlayIcon, PortfolioIcon, ProfileIcon, TradeIcon } from '@/icons';
|
||||
import { Icon, IconName } from '@/components/Icon';
|
||||
import { BellIcon, MarketsIcon, PortfolioIcon, ProfileIcon } from '@/icons';
|
||||
import { IconButton } from '@/components/IconButton';
|
||||
|
||||
import { calculateCanAccountTrade } from '@/state/accountCalculators';
|
||||
@@ -42,11 +41,9 @@ export const FooterMobile = () => {
|
||||
value: 'trade',
|
||||
label: stringGetter({ key: STRING_KEYS.TRADE }),
|
||||
slotBefore: (
|
||||
<Styled.IconButton
|
||||
iconComponent={TradeIcon}
|
||||
size={ButtonSize.Large}
|
||||
action={ButtonAction.Primary}
|
||||
/>
|
||||
<Styled.StartIcon>
|
||||
<Icon iconName={IconName.Trade} />
|
||||
</Styled.StartIcon>
|
||||
),
|
||||
href: `${AppRoute.Trade}/${marketId ?? DEFAULT_MARKETID}`,
|
||||
}
|
||||
@@ -54,11 +51,9 @@ export const FooterMobile = () => {
|
||||
value: 'onboarding',
|
||||
label: stringGetter({ key: STRING_KEYS.ONBOARDING }),
|
||||
slotBefore: (
|
||||
<Styled.IconButton
|
||||
iconComponent={PlayIcon}
|
||||
size={ButtonSize.Large}
|
||||
action={ButtonAction.Primary}
|
||||
/>
|
||||
<Styled.StartIcon>
|
||||
<Icon iconName={IconName.Play} />
|
||||
</Styled.StartIcon>
|
||||
),
|
||||
onClick: () => dispatch(openDialog({ type: DialogTypes.Onboarding })),
|
||||
},
|
||||
@@ -168,3 +163,24 @@ 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,6 +1,6 @@
|
||||
import styled, { type AnyStyledComponent } from 'styled-components';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { useDispatch } from 'react-redux';
|
||||
import { useDispatch, useSelector } from 'react-redux';
|
||||
|
||||
import { ButtonShape } from '@/constants/buttons';
|
||||
import { DialogTypes } from '@/constants/dialogs';
|
||||
@@ -8,6 +8,10 @@ import { STRING_KEYS } from '@/constants/localization';
|
||||
import { AppRoute } from '@/constants/routes';
|
||||
import { LogoShortIcon, BellStrokeIcon } from '@/icons';
|
||||
|
||||
import { headerMixins } from '@/styles/headerMixins';
|
||||
import { layoutMixins } from '@/styles/layoutMixins';
|
||||
import breakpoints from '@/styles/breakpoints';
|
||||
|
||||
import { useTokenConfigs, useStringGetter, useURLConfigs } from '@/hooks';
|
||||
|
||||
import { Icon, IconName } from '@/components/Icon';
|
||||
@@ -21,10 +25,7 @@ import { NotificationsMenu } from '@/views/menus/NotificationsMenu';
|
||||
import { LanguageSelector } from '@/views/menus/LanguageSelector';
|
||||
|
||||
import { openDialog } from '@/state/dialogs';
|
||||
|
||||
import { headerMixins } from '@/styles/headerMixins';
|
||||
import { layoutMixins } from '@/styles/layoutMixins';
|
||||
import breakpoints from '@/styles/breakpoints';
|
||||
import { getHasSeenLaunchIncentives } from '@/state/configsSelectors';
|
||||
|
||||
export const HeaderDesktop = () => {
|
||||
const stringGetter = useStringGetter();
|
||||
@@ -32,6 +33,8 @@ export const HeaderDesktop = () => {
|
||||
const dispatch = useDispatch();
|
||||
const { chainTokenLabel } = useTokenConfigs();
|
||||
|
||||
const hasSeenLaunchIncentives = useSelector(getHasSeenLaunchIncentives);
|
||||
|
||||
const navItems = [
|
||||
{
|
||||
group: 'navigation',
|
||||
@@ -55,6 +58,7 @@ export const HeaderDesktop = () => {
|
||||
value: chainTokenLabel,
|
||||
label: chainTokenLabel,
|
||||
href: `/${chainTokenLabel}`,
|
||||
slotAfter: !hasSeenLaunchIncentives && <Styled.UnreadIndicator />,
|
||||
},
|
||||
{
|
||||
value: 'MORE',
|
||||
@@ -238,3 +242,10 @@ Styled.IconButton = styled(IconButton)<{ size?: string }>`
|
||||
--button-icon-size: 1rem;
|
||||
--button-padding: 0 0.5em;
|
||||
`;
|
||||
|
||||
Styled.UnreadIndicator = styled.div`
|
||||
width: 0.4375rem;
|
||||
height: 0.4375rem;
|
||||
border-radius: 50%;
|
||||
background-color: var(--color-accent);
|
||||
`;
|
||||
|
||||
@@ -1,15 +1,17 @@
|
||||
import { useMemo } from 'react';
|
||||
import { useMemo, useState } from 'react';
|
||||
import styled, { css } from 'styled-components';
|
||||
|
||||
import { NotificationStatus } from '@/constants/notifications';
|
||||
import { ButtonSize } from '@/constants/buttons';
|
||||
|
||||
import { ButtonShape, 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;
|
||||
@@ -18,6 +20,8 @@ type StyleProps = {
|
||||
const MAX_TOASTS = 10;
|
||||
|
||||
export const NotificationsToastArea = ({ className }: StyleProps) => {
|
||||
const [shouldStackNotifications, setshouldStackNotifications] = useState(true);
|
||||
|
||||
const {
|
||||
notifications,
|
||||
getKey,
|
||||
@@ -43,20 +47,37 @@ export const NotificationsToastArea = ({ className }: StyleProps) => {
|
||||
key: getKey(notification),
|
||||
displayData: getDisplayData(notification),
|
||||
}))
|
||||
.filter(({ displayData }) => displayData)
|
||||
.filter(
|
||||
({ displayData, notification }) =>
|
||||
displayData && notification.status < NotificationStatus.Unseen
|
||||
)
|
||||
.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}
|
||||
layer={notificationMap.length - 1 - idx}
|
||||
isStacked={shouldStackNotifications}
|
||||
isOpen={notification.status < NotificationStatus.Unseen}
|
||||
layer={notificationMap.length - 1 - idx}
|
||||
notification={notification}
|
||||
slotIcon={displayData.icon}
|
||||
slotTitle={displayData.title}
|
||||
@@ -74,7 +95,7 @@ export const NotificationsToastArea = ({ className }: StyleProps) => {
|
||||
actionAltText={displayData.actionAltText}
|
||||
duration={displayData.toastDuration ?? Infinity}
|
||||
sensitivity={displayData.toastSensitivity}
|
||||
setIsOpen={(isOpen, isClosedFromTimeout) => {
|
||||
setIsOpen={(isOpen: boolean, isClosedFromTimeout?: boolean) => {
|
||||
if (!isOpen)
|
||||
if (isClosedFromTimeout)
|
||||
// Toast timer expired without user interaction
|
||||
@@ -97,16 +118,58 @@ 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)<{ layer: number }>`
|
||||
const StyledToast = styled(Toast)<{ isStacked?: boolean; 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: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
${({ layer }) => css`
|
||||
right: calc(${layer} * -2px);
|
||||
top: calc(${layer} * 2px);
|
||||
`}
|
||||
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;
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
import Abacus, { type Nullable } from '@dydxprotocol/v4-abacus';
|
||||
import Long from 'long';
|
||||
import type { IndexedTx } from '@cosmjs/stargate';
|
||||
import { encodeJson } from '@dydxprotocol/v4-client-js';
|
||||
import { GAS_MULTIPLIER, encodeJson } from '@dydxprotocol/v4-client-js';
|
||||
import { EncodeObject } from '@cosmjs/proto-signing';
|
||||
|
||||
import {
|
||||
CompositeClient,
|
||||
@@ -9,6 +10,7 @@ import {
|
||||
type LocalWallet,
|
||||
Network,
|
||||
NetworkOptimizer,
|
||||
NobleClient,
|
||||
SubaccountClient,
|
||||
ValidatorConfig,
|
||||
OrderType,
|
||||
@@ -40,11 +42,14 @@ import { openDialog } from '@/state/dialogs';
|
||||
import { StatefulOrderError } from '../errors';
|
||||
import { bytesToBigInt } from '../numbers';
|
||||
import { log } from '../telemetry';
|
||||
import { hashFromTx } from '../hashfromTx';
|
||||
|
||||
class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
|
||||
private compositeClient: CompositeClient | undefined;
|
||||
private nobleClient: NobleClient | undefined;
|
||||
private store: RootStore | undefined;
|
||||
private localWallet: LocalWallet | undefined;
|
||||
private nobleWallet: LocalWallet | undefined;
|
||||
|
||||
constructor() {
|
||||
this.compositeClient = undefined;
|
||||
@@ -59,6 +64,17 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
|
||||
this.localWallet = localWallet;
|
||||
}
|
||||
|
||||
setNobleWallet(nobleWallet: LocalWallet) {
|
||||
try {
|
||||
this.nobleWallet = nobleWallet;
|
||||
if (this.nobleClient) {
|
||||
this.nobleClient.connect(nobleWallet);
|
||||
}
|
||||
} catch (e) {
|
||||
log('DydxChainTransactions/setNobleWallet', e);
|
||||
}
|
||||
}
|
||||
|
||||
async connectNetwork(
|
||||
paramsInJson: Nullable<string>,
|
||||
callback: (p0: Nullable<string>) => void
|
||||
@@ -70,6 +86,7 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
|
||||
websocketUrl,
|
||||
validatorUrl,
|
||||
chainId,
|
||||
nobleValidatorUrl,
|
||||
USDC_DENOM,
|
||||
USDC_DECIMALS,
|
||||
USDC_GAS_DENOM,
|
||||
@@ -101,6 +118,15 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
|
||||
|
||||
this.compositeClient = compositeClient;
|
||||
|
||||
try {
|
||||
if (nobleValidatorUrl) {
|
||||
this.nobleClient = new NobleClient(nobleValidatorUrl);
|
||||
if (this.nobleWallet) await this.nobleClient.connect(this.nobleWallet);
|
||||
}
|
||||
} catch (e) {
|
||||
log('DydxChainTransactions/connectNetwork/NobleClient', e);
|
||||
}
|
||||
|
||||
// Dispatch custom event to notify other parts of the app that the network has been connected
|
||||
const customEvent = new CustomEvent('abacus:connectNetwork', {
|
||||
detail: parsedParams,
|
||||
@@ -186,8 +212,8 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
|
||||
timeInForce as OrderTimeInForce,
|
||||
goodTilTimeInSeconds ?? 0,
|
||||
execution as OrderExecution,
|
||||
postOnly,
|
||||
reduceOnly,
|
||||
postOnly ?? undefined,
|
||||
reduceOnly ?? undefined,
|
||||
triggerPrice ?? undefined
|
||||
);
|
||||
|
||||
@@ -325,6 +351,122 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
|
||||
}
|
||||
}
|
||||
|
||||
async sendNobleIBC(params: { msgTypeUrl: string; msg: any }): Promise<string> {
|
||||
if (!this.nobleClient?.isConnected) {
|
||||
throw new Error('Missing nobleClient or localWallet');
|
||||
}
|
||||
|
||||
try {
|
||||
const ibcMsg = {
|
||||
typeUrl: params.msgTypeUrl, // '/ibc.applications.transfer.v1.MsgTransfer',
|
||||
value: params.msg,
|
||||
};
|
||||
const fee = await this.nobleClient.simulateTransaction([ibcMsg]);
|
||||
|
||||
// take out fee from amount before sweeping
|
||||
const amount =
|
||||
parseInt(ibcMsg.value.token.amount, 10) -
|
||||
Math.floor(parseInt(fee.amount[0].amount, 10) * GAS_MULTIPLIER);
|
||||
|
||||
if (amount <= 0) {
|
||||
throw new Error('noble balance does not cover fees');
|
||||
}
|
||||
|
||||
ibcMsg.value.token.amount = amount.toString();
|
||||
const tx = await this.nobleClient.send([ibcMsg]);
|
||||
|
||||
const parsedTx = this.parseToPrimitives(tx);
|
||||
|
||||
return JSON.stringify(parsedTx);
|
||||
} catch (error) {
|
||||
log('DydxChainTransactions/sendNobleIBC', error);
|
||||
|
||||
return JSON.stringify({
|
||||
error,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async withdrawToNobleIBC(params: {
|
||||
subaccountNumber: number;
|
||||
amount: string;
|
||||
ibcPayload: string;
|
||||
}): Promise<string> {
|
||||
if (!this.compositeClient || !this.localWallet) {
|
||||
throw new Error('Missing compositeClient or localWallet');
|
||||
}
|
||||
|
||||
const { subaccountNumber, amount, ibcPayload } = params ?? {};
|
||||
const parsedIbcPayload: {
|
||||
msgTypeUrl: string;
|
||||
msg: any;
|
||||
} = ibcPayload ? JSON.parse(atob(ibcPayload)) : undefined;
|
||||
|
||||
try {
|
||||
const msg = this.compositeClient.withdrawFromSubaccountMessage(
|
||||
new SubaccountClient(this.localWallet, subaccountNumber),
|
||||
parseFloat(amount).toFixed(this.compositeClient.validatorClient.config.denoms.USDC_DECIMALS)
|
||||
);
|
||||
const ibcMsg: EncodeObject = {
|
||||
typeUrl: parsedIbcPayload.msgTypeUrl,
|
||||
value: parsedIbcPayload.msg,
|
||||
};
|
||||
|
||||
const tx = await this.compositeClient.send(
|
||||
this.localWallet,
|
||||
() => Promise.resolve([msg, ibcMsg]),
|
||||
false
|
||||
);
|
||||
|
||||
return JSON.stringify({
|
||||
txHash: hashFromTx(tx?.hash),
|
||||
});
|
||||
} catch (error) {
|
||||
log('DydxChainTransactions/withdrawToNobleIBC', error);
|
||||
|
||||
return JSON.stringify({
|
||||
error,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async cctpWithdraw(params: { typeUrl: string; value: any }): Promise<string> {
|
||||
if (!this.nobleClient?.isConnected) {
|
||||
throw new Error('Missing nobleClient or localWallet');
|
||||
}
|
||||
|
||||
try {
|
||||
const ibcMsg = {
|
||||
typeUrl: params.typeUrl, // '/circle.cctp.v1.MsgDepositForBurn',
|
||||
value: params.value,
|
||||
};
|
||||
const fee = await this.nobleClient.simulateTransaction([ibcMsg]);
|
||||
|
||||
// take out fee from amount before sweeping
|
||||
const amount =
|
||||
parseInt(ibcMsg.value.amount, 10) -
|
||||
Math.floor(parseInt(fee.amount[0].amount, 10) * GAS_MULTIPLIER);
|
||||
|
||||
if (amount <= 0) {
|
||||
throw new Error('noble balance does not cover fees');
|
||||
}
|
||||
|
||||
ibcMsg.value.amount = amount.toString();
|
||||
|
||||
const tx = await this.nobleClient.send([ibcMsg]);
|
||||
|
||||
const parsedTx = this.parseToPrimitives(tx);
|
||||
|
||||
return JSON.stringify(parsedTx);
|
||||
} catch (error) {
|
||||
log('DydxChainTransactions/cctpWithdraw', error);
|
||||
|
||||
return JSON.stringify({
|
||||
error,
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
async transaction(
|
||||
type: TransactionTypes,
|
||||
paramsInJson: Abacus.Nullable<string>,
|
||||
@@ -354,6 +496,22 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
|
||||
callback(result);
|
||||
break;
|
||||
}
|
||||
case TransactionType.SendNobleIBC: {
|
||||
const result = await this.sendNobleIBC(params);
|
||||
callback(result);
|
||||
break;
|
||||
}
|
||||
case TransactionType.WithdrawToNobleIBC: {
|
||||
const result = await this.withdrawToNobleIBC(params);
|
||||
callback(result);
|
||||
break;
|
||||
}
|
||||
case TransactionType.CctpWithdraw: {
|
||||
const result = await this.cctpWithdraw(params);
|
||||
callback(result);
|
||||
break;
|
||||
break;
|
||||
}
|
||||
default: {
|
||||
break;
|
||||
}
|
||||
@@ -441,6 +599,13 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
|
||||
const parseDelegations = this.parseToPrimitives(delegations);
|
||||
callback(JSON.stringify(parseDelegations));
|
||||
break;
|
||||
case QueryType.GetNobleBalance:
|
||||
if (this.nobleClient?.isConnected) {
|
||||
const nobleBalance = await this.nobleClient.getAccountBalance('uusdc');
|
||||
const parsedNobleBalance = this.parseToPrimitives(nobleBalance);
|
||||
callback(JSON.stringify(parsedNobleBalance));
|
||||
}
|
||||
break;
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
||||
@@ -26,12 +26,14 @@ import {
|
||||
} from '@/constants/abacus';
|
||||
|
||||
import { DEFAULT_MARKETID } from '@/constants/markets';
|
||||
import { CURRENT_ABACUS_DEPLOYMENT, type DydxNetwork } from '@/constants/networks';
|
||||
import { CURRENT_ABACUS_DEPLOYMENT, type DydxNetwork, isMainnet } 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 { testFlags } from '@/lib/testFlags';
|
||||
|
||||
import AbacusRest from './rest';
|
||||
import AbacusAnalytics from './analytics';
|
||||
@@ -43,6 +45,7 @@ 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;
|
||||
@@ -80,10 +83,13 @@ class AbacusStateManager {
|
||||
this.abacusFormatter
|
||||
);
|
||||
|
||||
const appConfigs = AbacusAppConfig.Companion.forWeb;
|
||||
appConfigs.squidVersion = AbacusAppConfig.SquidVersion.V2;
|
||||
|
||||
this.stateManager = new AsyncAbacusStateManager(
|
||||
'',
|
||||
CURRENT_ABACUS_DEPLOYMENT,
|
||||
AbacusAppConfig.Companion.forWeb,
|
||||
appConfigs,
|
||||
ioImplementations,
|
||||
uiImplementations,
|
||||
// @ts-ignore
|
||||
@@ -132,6 +138,8 @@ 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 });
|
||||
@@ -139,6 +147,8 @@ class AbacusStateManager {
|
||||
if (needsLeverage) {
|
||||
this.setTradeValue({ value: null, field: TradeInputField.leverage });
|
||||
}
|
||||
|
||||
this.store?.dispatch(setTradeFormInputs(CLEARED_SIZE_INPUTS));
|
||||
}
|
||||
};
|
||||
|
||||
@@ -175,6 +185,12 @@ class AbacusStateManager {
|
||||
}
|
||||
};
|
||||
|
||||
setNobleWallet = (nobleWallet?: LocalWallet) => {
|
||||
if (nobleWallet) {
|
||||
this.chainTransactions.setNobleWallet(nobleWallet);
|
||||
}
|
||||
};
|
||||
|
||||
setTransfersSourceAddress = (evmAddress: string) => {
|
||||
this.stateManager.sourceAddress = evmAddress;
|
||||
};
|
||||
@@ -218,18 +234,6 @@ class AbacusStateManager {
|
||||
this.abacusFormatter.setLocaleSeparators({ group, decimal });
|
||||
};
|
||||
|
||||
setTransferStatus = ({
|
||||
hash,
|
||||
fromChainId,
|
||||
toChainId,
|
||||
}: {
|
||||
hash: string;
|
||||
fromChainId?: string;
|
||||
toChainId?: string;
|
||||
}) => {
|
||||
this.stateManager.transferStatus(hash, fromChainId, toChainId);
|
||||
};
|
||||
|
||||
// ------ Transactions ------ //
|
||||
|
||||
placeOrder = (
|
||||
@@ -257,6 +261,14 @@ class AbacusStateManager {
|
||||
) => void
|
||||
) => this.stateManager.cancelOrder(orderId, callback);
|
||||
|
||||
cctpWithdraw = (
|
||||
callback: (
|
||||
success: boolean,
|
||||
parsingError: Nullable<ParsingError>,
|
||||
data: string,
|
||||
) => void
|
||||
): void => this.stateManager.commitCCTPWithdraw(callback);
|
||||
|
||||
// ------ Utils ------ //
|
||||
getHistoricalPnlPeriod = (): Nullable<HistoricalPnlPeriods> =>
|
||||
this.stateManager.historicalPnlPeriod;
|
||||
|
||||
@@ -10,7 +10,7 @@ import {
|
||||
} from '@/constants/websocket';
|
||||
|
||||
import { lastSuccessfulWebsocketRequestByOrigin } from '@/hooks/useAnalytics';
|
||||
import { testFlags } from '@/hooks/useTestFlags';
|
||||
import { testFlags } from '@/lib/testFlags';
|
||||
|
||||
import { subscriptionsByChannelId } from '@/lib/tradingView/dydxfeed/cache';
|
||||
import { mapCandle } from '@/lib/tradingView/utils';
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
export const hashFromTx = (
|
||||
txHash: string | Uint8Array
|
||||
): string => `0x${Buffer.from(txHash).toString('hex')}`;
|
||||
@@ -0,0 +1,48 @@
|
||||
import { isMainnet } from '@/constants/networks';
|
||||
import { GetStatus, StatusResponse } from '@0xsquid/sdk';
|
||||
|
||||
export const NATIVE_TOKEN_ADDRESS = '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE';
|
||||
|
||||
export const STATUS_ERROR_GRACE_PERIOD = 300_000;
|
||||
|
||||
const getSquidStatusUrl = (isV2: boolean) => {
|
||||
if (isV2) {
|
||||
return isMainnet
|
||||
? 'https://v2.api.squidrouter.com/v2/status'
|
||||
: 'https://testnet.v2.api.squidrouter.com/v2/status';
|
||||
}
|
||||
return isMainnet
|
||||
? 'https://api.squidrouter.com/v1/status'
|
||||
: 'https://testnet.api.squidrouter.com/v1/status';
|
||||
};
|
||||
|
||||
export const fetchSquidStatus = async (
|
||||
params: GetStatus,
|
||||
isV2?: boolean,
|
||||
integratorId?: string
|
||||
): Promise<StatusResponse> => {
|
||||
const parsedParams: { [key: string]: string } = {
|
||||
transactionId: params.transactionId,
|
||||
fromChainId: String(params.fromChainId),
|
||||
toChainId: String(params.toChainId),
|
||||
};
|
||||
if (isV2) parsedParams.bridgeType = 'cctp';
|
||||
const url = `${getSquidStatusUrl(!!isV2)}?${new URLSearchParams(parsedParams).toString()}`;
|
||||
|
||||
const response = await fetch(url, {
|
||||
headers: {
|
||||
"x-integrator-id": integratorId || 'dYdX-api'
|
||||
},
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
const error = await response.json();
|
||||
throw new Error(error);
|
||||
}
|
||||
|
||||
return response.json();
|
||||
};
|
||||
|
||||
export const getNobleChainId = () => {
|
||||
return isMainnet ? 'noble-1' : 'grand-1';
|
||||
}
|
||||
@@ -0,0 +1,27 @@
|
||||
class TestFlags {
|
||||
public queryParams: { [key: string]: string };
|
||||
|
||||
constructor() {
|
||||
this.queryParams = {};
|
||||
const hash = window.location.hash;
|
||||
const queryIndex = hash.indexOf('?');
|
||||
if (queryIndex === -1) return;
|
||||
|
||||
const queryParamsString = hash.substring(queryIndex + 1);
|
||||
const params = new URLSearchParams(queryParamsString);
|
||||
|
||||
for (const [key, value] of params) {
|
||||
this.queryParams[key] = value;
|
||||
}
|
||||
}
|
||||
|
||||
get displayInitializingMarkets() {
|
||||
return !!this.queryParams.displayInitializingMarkets;
|
||||
}
|
||||
|
||||
get withCCTP() {
|
||||
return !!this.queryParams.withCCTP;
|
||||
}
|
||||
}
|
||||
|
||||
export const testFlags = new TestFlags();
|
||||
@@ -146,7 +146,7 @@ const getConnectors = (walletConnectConfig: WalletConnectConfig) => [
|
||||
new CoinbaseWalletConnector({
|
||||
chains,
|
||||
options: {
|
||||
appName: 'wagmi',
|
||||
appName: 'dYdX',
|
||||
reloadOnDisconnect: false,
|
||||
},
|
||||
}),
|
||||
|
||||
@@ -1,4 +1,6 @@
|
||||
import { DialogPlacement } from '@/components/Dialog';
|
||||
import { NotificationsMenu } from '@/views/menus/NotificationsMenu';
|
||||
|
||||
export const AlertsPage = () => <NotificationsMenu placement={DialogPlacement.Inline} />;
|
||||
const AlertsPage = () => <NotificationsMenu placement={DialogPlacement.Inline} />;
|
||||
|
||||
export default AlertsPage;
|
||||
|
||||
@@ -2,7 +2,7 @@ import styled, { AnyStyledComponent } from 'styled-components';
|
||||
|
||||
import { articleMixins } from '@/styles/articleMixins';
|
||||
|
||||
export const PrivacyPolicyPage = () => (
|
||||
const PrivacyPolicyPage = () => (
|
||||
<Styled.Article>
|
||||
<header>
|
||||
<h1>Privacy Policy</h1>
|
||||
@@ -10,6 +10,8 @@ export const PrivacyPolicyPage = () => (
|
||||
</Styled.Article>
|
||||
);
|
||||
|
||||
export default PrivacyPolicyPage;
|
||||
|
||||
const Styled: Record<string, AnyStyledComponent> = {};
|
||||
|
||||
Styled.Article = styled.article`
|
||||
|
||||
@@ -2,12 +2,16 @@ 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 { IconName } from '@/components/Icon';
|
||||
import { Icon, IconName } from '@/components/Icon';
|
||||
import { IconButton, type IconButtonProps } from '@/components/IconButton';
|
||||
import { Panel } from '@/components/Panel';
|
||||
import { Toolbar } from '@/components/Toolbar';
|
||||
@@ -16,22 +20,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, WalletType } from '@/constants/wallets';
|
||||
import { wallets } 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;
|
||||
@@ -46,17 +50,48 @@ const Profile = () => {
|
||||
|
||||
const actions = [
|
||||
{
|
||||
key: 'settings',
|
||||
label: stringGetter({ key: STRING_KEYS.SETTINGS }),
|
||||
icon: { iconName: IconName.Gear },
|
||||
href: AppRoute.Settings,
|
||||
},
|
||||
isConnected && {
|
||||
key: 'transfers',
|
||||
label: stringGetter({ key: STRING_KEYS.MANAGE_FUNDS }),
|
||||
icon: { iconName: IconName.Transfer },
|
||||
key: 'deposit',
|
||||
label: stringGetter({ key: STRING_KEYS.DEPOSIT }),
|
||||
icon: { iconName: IconName.Deposit },
|
||||
onClick: () => {
|
||||
dispatch(openDialog({ type: DialogTypes.ManageFunds }));
|
||||
dispatch(
|
||||
openDialog({
|
||||
type: DialogTypes.ManageFunds,
|
||||
dialogProps: {
|
||||
selectedTransferType: TransferType.deposit.rawValue,
|
||||
},
|
||||
})
|
||||
);
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'withdraw',
|
||||
label: stringGetter({ key: STRING_KEYS.WITHDRAW }),
|
||||
icon: { iconName: IconName.Withdraw },
|
||||
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,
|
||||
},
|
||||
})
|
||||
);
|
||||
},
|
||||
},
|
||||
isConnected
|
||||
@@ -69,9 +104,9 @@ const Profile = () => {
|
||||
},
|
||||
}
|
||||
: {
|
||||
key: 'wallet',
|
||||
label: stringGetter({ key: STRING_KEYS.WALLET }),
|
||||
icon: { iconComponent: wallets[walletType || WalletType.OtherWallet].icon },
|
||||
key: 'connect',
|
||||
label: stringGetter({ key: STRING_KEYS.CONNECT }),
|
||||
icon: { iconName: IconName.Transfer },
|
||||
onClick: () => {
|
||||
dispatch(openDialog({ type: DialogTypes.Onboarding }));
|
||||
},
|
||||
@@ -107,12 +142,7 @@ const Profile = () => {
|
||||
{actions.map(({ key, label, href, icon, onClick }) => {
|
||||
const action = (
|
||||
<>
|
||||
<Styled.ActionButton
|
||||
{...icon}
|
||||
size={ButtonSize.Large}
|
||||
onClick={onClick}
|
||||
isCloseIcon={icon.iconName === IconName.Close}
|
||||
/>
|
||||
<Styled.ActionButton {...icon} size={ButtonSize.Large} onClick={onClick} />
|
||||
<span>{label}</span>
|
||||
</>
|
||||
);
|
||||
@@ -125,6 +155,26 @@ 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
|
||||
@@ -183,7 +233,7 @@ Styled.MobileProfileLayout = styled.div`
|
||||
${layoutMixins.contentContainerPage}
|
||||
|
||||
gap: 1rem;
|
||||
padding: 1.25rem;
|
||||
padding: 1.25rem 0.9rem;
|
||||
`;
|
||||
|
||||
Styled.Header = styled.header`
|
||||
@@ -248,19 +298,21 @@ Styled.Actions = styled(Toolbar)`
|
||||
}
|
||||
`;
|
||||
|
||||
Styled.ActionButton = styled(IconButton)<{ isCloseIcon?: boolean }>`
|
||||
Styled.ActionButton = styled(IconButton)<{ iconName?: IconName }>`
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
${({ isCloseIcon }) =>
|
||||
isCloseIcon &&
|
||||
css`
|
||||
--button-textColor: var(--color-negative);
|
||||
|
||||
svg {
|
||||
width: 0.875em;
|
||||
height: 0.875em;
|
||||
}
|
||||
`}
|
||||
${({ 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);
|
||||
`}
|
||||
`;
|
||||
|
||||
Styled.EqualGrid = styled.div`
|
||||
@@ -309,3 +361,14 @@ 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;
|
||||
`;
|
||||
|
||||
@@ -2,7 +2,7 @@ import styled, { AnyStyledComponent } from 'styled-components';
|
||||
|
||||
import { articleMixins } from '@/styles/articleMixins';
|
||||
|
||||
export const TermsOfUsePage = () => (
|
||||
const TermsOfUsePage = () => (
|
||||
<Styled.Article>
|
||||
<header>
|
||||
<h1>Sample Terms of Use</h1>
|
||||
@@ -1076,6 +1076,8 @@ export const TermsOfUsePage = () => (
|
||||
</Styled.Article>
|
||||
);
|
||||
|
||||
export default TermsOfUsePage;
|
||||
|
||||
const Styled: Record<string, AnyStyledComponent> = {};
|
||||
|
||||
Styled.Article = styled.article`
|
||||
|
||||
@@ -1,17 +1,20 @@
|
||||
import { lazy, Suspense } from 'react';
|
||||
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
|
||||
import styled, { type AnyStyledComponent } from 'styled-components';
|
||||
import { Navigate, Route, Routes } from 'react-router-dom';
|
||||
|
||||
import { OnboardingState } from '@/constants/account';
|
||||
import { ButtonAction } from '@/constants/buttons';
|
||||
import { DialogTypes } from '@/constants/dialogs';
|
||||
import { STRING_KEYS } from '@/constants/localization';
|
||||
import { HistoryRoute, PortfolioRoute } from '@/constants/routes';
|
||||
|
||||
import { useAccountBalance, useBreakpoints, useDocumentTitle, useStringGetter } from '@/hooks';
|
||||
import { layoutMixins } from '@/styles/layoutMixins';
|
||||
|
||||
import { FillsTable, FillsTableColumnKey } from '@/views/tables/FillsTable';
|
||||
import { FundingPaymentsTable } from '@/views/tables/FundingPaymentsTable';
|
||||
import { TransferHistoryTable } from '@/views/tables/TransferHistoryTable';
|
||||
import { Button } from '@/components/Button';
|
||||
import { Icon, IconName } from '@/components/Icon';
|
||||
import { NavigationMenu } from '@/components/NavigationMenu';
|
||||
import { WithSidebar } from '@/components/WithSidebar';
|
||||
@@ -20,15 +23,15 @@ import { getOnboardingState, getSubaccount } from '@/state/accountSelectors';
|
||||
import { openDialog } from '@/state/dialogs';
|
||||
|
||||
import { PortfolioNavMobile } from './PortfolioNavMobile';
|
||||
import { Overview } from './Overview';
|
||||
import { Positions } from './Positions';
|
||||
import { Orders } from './Orders';
|
||||
import { Fees } from './Fees';
|
||||
import { History } from './History';
|
||||
import { LoadingSpace } from '@/components/Loading/LoadingSpinner';
|
||||
|
||||
import { layoutMixins } from '@/styles/layoutMixins';
|
||||
import { Button } from '@/components/Button';
|
||||
import { ButtonAction } from '@/constants/buttons';
|
||||
const Overview = lazy(() => import('./Overview').then((module) => ({ default: module.Overview })));
|
||||
const Positions = lazy(() =>
|
||||
import('./Positions').then((module) => ({ default: module.Positions }))
|
||||
);
|
||||
const Orders = lazy(() => import('./Orders').then((module) => ({ default: module.Orders })));
|
||||
const Fees = lazy(() => import('./Fees').then((module) => ({ default: module.Fees })));
|
||||
const History = lazy(() => import('./History').then((module) => ({ default: module.History })));
|
||||
|
||||
export default () => {
|
||||
const dispatch = useDispatch();
|
||||
@@ -44,49 +47,51 @@ export default () => {
|
||||
useDocumentTitle(stringGetter({ key: STRING_KEYS.PORTFOLIO }));
|
||||
|
||||
const routesComponent = (
|
||||
<Routes>
|
||||
<Route path={PortfolioRoute.Overview} element={<Overview />} />
|
||||
<Route path={PortfolioRoute.Positions} element={<Positions />} />
|
||||
<Route path={PortfolioRoute.Orders} element={<Orders />} />
|
||||
<Route path={PortfolioRoute.Fees} element={<Fees />} />
|
||||
<Route path={PortfolioRoute.History} element={<History />}>
|
||||
<Route index path="*" element={<Navigate to={HistoryRoute.Trades} />} />
|
||||
<Route
|
||||
path={HistoryRoute.Trades}
|
||||
element={
|
||||
<FillsTable
|
||||
columnKeys={
|
||||
isTablet
|
||||
? [
|
||||
FillsTableColumnKey.Time,
|
||||
FillsTableColumnKey.TypeAmount,
|
||||
FillsTableColumnKey.PriceFee,
|
||||
]
|
||||
: [
|
||||
FillsTableColumnKey.Time,
|
||||
FillsTableColumnKey.Market,
|
||||
FillsTableColumnKey.Side,
|
||||
FillsTableColumnKey.AmountPrice,
|
||||
FillsTableColumnKey.TotalFee,
|
||||
FillsTableColumnKey.Type,
|
||||
FillsTableColumnKey.Liquidity,
|
||||
]
|
||||
}
|
||||
withOuterBorder={isNotTablet}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path={HistoryRoute.Transfers}
|
||||
element={<TransferHistoryTable withOuterBorder={isNotTablet} />}
|
||||
/>
|
||||
<Route
|
||||
path={HistoryRoute.Payments}
|
||||
element={<FundingPaymentsTable withOuterBorder={isNotTablet} />}
|
||||
/>
|
||||
</Route>
|
||||
<Route path="*" element={<Navigate to={PortfolioRoute.Overview} replace />} />
|
||||
</Routes>
|
||||
<Suspense fallback={<LoadingSpace id="portfolio" />}>
|
||||
<Routes>
|
||||
<Route path={PortfolioRoute.Overview} element={<Overview />} />
|
||||
<Route path={PortfolioRoute.Positions} element={<Positions />} />
|
||||
<Route path={PortfolioRoute.Orders} element={<Orders />} />
|
||||
<Route path={PortfolioRoute.Fees} element={<Fees />} />
|
||||
<Route path={PortfolioRoute.History} element={<History />}>
|
||||
<Route index path="*" element={<Navigate to={HistoryRoute.Trades} />} />
|
||||
<Route
|
||||
path={HistoryRoute.Trades}
|
||||
element={
|
||||
<FillsTable
|
||||
columnKeys={
|
||||
isTablet
|
||||
? [
|
||||
FillsTableColumnKey.Time,
|
||||
FillsTableColumnKey.TypeAmount,
|
||||
FillsTableColumnKey.PriceFee,
|
||||
]
|
||||
: [
|
||||
FillsTableColumnKey.Time,
|
||||
FillsTableColumnKey.Market,
|
||||
FillsTableColumnKey.Side,
|
||||
FillsTableColumnKey.AmountPrice,
|
||||
FillsTableColumnKey.TotalFee,
|
||||
FillsTableColumnKey.Type,
|
||||
FillsTableColumnKey.Liquidity,
|
||||
]
|
||||
}
|
||||
withOuterBorder={isNotTablet}
|
||||
/>
|
||||
}
|
||||
/>
|
||||
<Route
|
||||
path={HistoryRoute.Transfers}
|
||||
element={<TransferHistoryTable withOuterBorder={isNotTablet} />}
|
||||
/>
|
||||
<Route
|
||||
path={HistoryRoute.Payments}
|
||||
element={<FundingPaymentsTable withOuterBorder={isNotTablet} />}
|
||||
/>
|
||||
</Route>
|
||||
<Route path="*" element={<Navigate to={PortfolioRoute.Overview} replace />} />
|
||||
</Routes>
|
||||
</Suspense>
|
||||
);
|
||||
|
||||
return isTablet ? (
|
||||
@@ -191,7 +196,7 @@ Styled.SideBar = styled.div`
|
||||
Styled.Footer = styled.div`
|
||||
${layoutMixins.row}
|
||||
flex-wrap: wrap;
|
||||
|
||||
|
||||
padding: 1rem;
|
||||
|
||||
gap: 0.5rem;
|
||||
|
||||
@@ -2,6 +2,7 @@ import type { ElementType } from 'react';
|
||||
import styled, { AnyStyledComponent } from 'styled-components';
|
||||
import { shallowEqual, useDispatch, useSelector } from 'react-redux';
|
||||
|
||||
import breakpoints from '@/styles/breakpoints';
|
||||
import { layoutMixins } from '@/styles/layoutMixins';
|
||||
import { useAccountBalance, useAccounts, useTokenConfigs, useStringGetter } from '@/hooks';
|
||||
|
||||
@@ -39,7 +40,7 @@ export const DYDXBalancePanel = () => {
|
||||
<AssetIcon symbol={chainTokenLabel} />
|
||||
{chainTokenLabel}
|
||||
</Styled.Title>
|
||||
<Styled.ReceiveAndTransferButtons>
|
||||
<Styled.ActionButtons>
|
||||
{!canAccountTrade ? (
|
||||
<OnboardingTriggerButton size={ButtonSize.Small} />
|
||||
) : (
|
||||
@@ -52,7 +53,7 @@ export const DYDXBalancePanel = () => {
|
||||
{stringGetter({ key: STRING_KEYS.TRANSFER })}
|
||||
</Button>
|
||||
)}
|
||||
</Styled.ReceiveAndTransferButtons>
|
||||
</Styled.ActionButtons>
|
||||
</Styled.Header>
|
||||
}
|
||||
>
|
||||
@@ -116,12 +117,17 @@ const Styled: Record<string, AnyStyledComponent> = {};
|
||||
|
||||
Styled.Panel = styled(Panel)`
|
||||
--panel-paddingX: 1.5rem;
|
||||
|
||||
@media ${breakpoints.tablet} {
|
||||
--panel-paddingY: 1.5rem;
|
||||
--panel-content-paddingY: 1rem;
|
||||
}
|
||||
`;
|
||||
|
||||
Styled.Header = styled.div`
|
||||
${layoutMixins.spacedRow}
|
||||
gap: 1rem;
|
||||
padding: 1rem 1.5rem 0;
|
||||
padding: var(--panel-paddingY) var(--panel-paddingX) 0;
|
||||
`;
|
||||
|
||||
Styled.Title = styled.h3`
|
||||
@@ -134,7 +140,7 @@ Styled.Title = styled.h3`
|
||||
}
|
||||
`;
|
||||
|
||||
Styled.ReceiveAndTransferButtons = styled(Toolbar)`
|
||||
Styled.ActionButtons = styled(Toolbar)`
|
||||
${layoutMixins.inlineRow}
|
||||
--stickyArea-topHeight: max-content;
|
||||
gap: 0.5rem;
|
||||
|
||||
@@ -0,0 +1,296 @@
|
||||
import { useEffect } from 'react';
|
||||
import { useDispatch } from 'react-redux';
|
||||
import { useQuery } from 'react-query';
|
||||
import styled, { AnyStyledComponent } from 'styled-components';
|
||||
|
||||
import { STRING_KEYS } from '@/constants/localization';
|
||||
import { ButtonAction } from '@/constants/buttons';
|
||||
import { DialogTypes } from '@/constants/dialogs';
|
||||
|
||||
import breakpoints from '@/styles/breakpoints';
|
||||
import { useAccounts, useBreakpoints, useStringGetter } from '@/hooks';
|
||||
|
||||
import { layoutMixins } from '@/styles/layoutMixins';
|
||||
|
||||
import { Panel } from '@/components/Panel';
|
||||
import { Button } from '@/components/Button';
|
||||
|
||||
import { Output, OutputType } from '@/components/Output';
|
||||
import { Icon, IconName } from '@/components/Icon';
|
||||
import { Tag, TagSize } from '@/components/Tag';
|
||||
|
||||
import { markLaunchIncentivesSeen } from '@/state/configs';
|
||||
import { openDialog } from '@/state/dialogs';
|
||||
|
||||
import { log } from '@/lib/telemetry';
|
||||
|
||||
export const LaunchIncentivesPanel = () => {
|
||||
const { isNotTablet } = useBreakpoints();
|
||||
const dispatch = useDispatch();
|
||||
|
||||
useEffect(() => {
|
||||
dispatch(markLaunchIncentivesSeen());
|
||||
}, []);
|
||||
|
||||
return isNotTablet ? (
|
||||
<Styled.Panel slotHeader={<LaunchIncentivesTitle />} slotRight={<EstimatedRewards />}>
|
||||
<LaunchIncentivesContent />
|
||||
</Styled.Panel>
|
||||
) : (
|
||||
<Styled.Panel>
|
||||
<Styled.Column>
|
||||
<EstimatedRewards />
|
||||
<LaunchIncentivesTitle />
|
||||
<LaunchIncentivesContent />
|
||||
</Styled.Column>
|
||||
</Styled.Panel>
|
||||
);
|
||||
};
|
||||
|
||||
const LaunchIncentivesTitle = () => {
|
||||
const stringGetter = useStringGetter();
|
||||
return (
|
||||
<Styled.Title>
|
||||
{stringGetter({
|
||||
key: STRING_KEYS.LAUNCH_INCENTIVES_TITLE,
|
||||
params: {
|
||||
FOR_V4: <Styled.ForV4>{stringGetter({ key: STRING_KEYS.FOR_V4 })}</Styled.ForV4>,
|
||||
},
|
||||
})}
|
||||
<Styled.NewTag size={TagSize.Medium}>{stringGetter({ key: STRING_KEYS.NEW })}</Styled.NewTag>
|
||||
</Styled.Title>
|
||||
);
|
||||
};
|
||||
|
||||
const EstimatedRewards = () => {
|
||||
const stringGetter = useStringGetter();
|
||||
const { dydxAddress } = useAccounts();
|
||||
|
||||
const { data, isLoading } = useQuery({
|
||||
enabled: !!dydxAddress,
|
||||
queryKey: `launch_incentives_rewards_${dydxAddress ?? ''}`,
|
||||
queryFn: async () => {
|
||||
if (!dydxAddress) return undefined;
|
||||
const resp = await fetch(`https://cloud.chaoslabs.co/query/api/dydx/points/${dydxAddress}`);
|
||||
return (await resp.json())?.incentivePoints;
|
||||
},
|
||||
onError: (error: Error) => log('LaunchIncentives/fetchPoints', error),
|
||||
});
|
||||
|
||||
return (
|
||||
<Styled.EstimatedRewardsCard>
|
||||
<Styled.EstimatedRewardsCardContent>
|
||||
<div>
|
||||
<span>{stringGetter({ key: STRING_KEYS.ESTIMATED_REWARDS })}</span>
|
||||
<Styled.Season>
|
||||
{stringGetter({
|
||||
key: STRING_KEYS.LAUNCH_INCENTIVES_SEASON_NUM,
|
||||
params: {
|
||||
SEASON_NUMBER: 1,
|
||||
},
|
||||
})}
|
||||
</Styled.Season>
|
||||
</div>
|
||||
|
||||
<Styled.Points>
|
||||
<Output type={OutputType.Number} value={data} isLoading={isLoading} fractionDigits={2} />
|
||||
{data !== undefined && stringGetter({ key: STRING_KEYS.POINTS })}
|
||||
</Styled.Points>
|
||||
</Styled.EstimatedRewardsCardContent>
|
||||
|
||||
<Styled.Image src="/rewards-stars.svg" />
|
||||
</Styled.EstimatedRewardsCard>
|
||||
);
|
||||
};
|
||||
|
||||
const LaunchIncentivesContent = () => {
|
||||
const stringGetter = useStringGetter();
|
||||
const dispatch = useDispatch();
|
||||
|
||||
return (
|
||||
<Styled.Column>
|
||||
<Styled.Description>
|
||||
{stringGetter({ key: STRING_KEYS.LAUNCH_INCENTIVES_DESCRIPTION })}{' '}
|
||||
</Styled.Description>
|
||||
<Styled.ChaosLabsLogo src="/logos/chaos-labs.svg" />
|
||||
<Styled.ButtonRow>
|
||||
<Styled.AboutButton
|
||||
action={ButtonAction.Base}
|
||||
onClick={() => {
|
||||
dispatch(
|
||||
openDialog({
|
||||
type: DialogTypes.ExternalLink,
|
||||
dialogProps: { link: 'https://dydx.exchange/blog/v4-full-trading' },
|
||||
})
|
||||
);
|
||||
}}
|
||||
slotRight={<Styled.LinkOutIcon iconName={IconName.LinkOut} />}
|
||||
>
|
||||
{stringGetter({ key: STRING_KEYS.ABOUT })}
|
||||
</Styled.AboutButton>
|
||||
<Styled.Button
|
||||
action={ButtonAction.Primary}
|
||||
onClick={() => {
|
||||
dispatch(
|
||||
openDialog({
|
||||
type: DialogTypes.ExternalLink,
|
||||
dialogProps: { link: 'https://community.chaoslabs.xyz/dydx-v4/risk/leaderboard' },
|
||||
})
|
||||
);
|
||||
}}
|
||||
slotRight={<Styled.LinkOutIcon iconName={IconName.LinkOut} />}
|
||||
slotLeft={<Icon iconName={IconName.Leaderboard} />}
|
||||
>
|
||||
{stringGetter({ key: STRING_KEYS.LEADERBOARD })}
|
||||
</Styled.Button>
|
||||
</Styled.ButtonRow>
|
||||
</Styled.Column>
|
||||
);
|
||||
};
|
||||
|
||||
const Styled: Record<string, AnyStyledComponent> = {};
|
||||
|
||||
Styled.Panel = styled(Panel)`
|
||||
--panel-paddingY: 1rem;
|
||||
--panel-paddingX: 1.5rem;
|
||||
|
||||
background-color: var(--color-layer-4);
|
||||
width: 100%;
|
||||
|
||||
@media ${breakpoints.tablet} {
|
||||
--panel-paddingY: 1.5rem;
|
||||
}
|
||||
`;
|
||||
|
||||
Styled.ForV4 = styled.span`
|
||||
color: var(--color-text-0);
|
||||
`;
|
||||
|
||||
Styled.Title = styled.h3`
|
||||
${layoutMixins.inlineRow}
|
||||
font: var(--font-medium-book);
|
||||
color: var(--color-text-2);
|
||||
|
||||
@media ${breakpoints.notTablet} {
|
||||
padding: var(--panel-paddingY) var(--panel-paddingX) 0;
|
||||
}
|
||||
`;
|
||||
|
||||
Styled.Description = styled.div`
|
||||
color: var(--color-text-0);
|
||||
--link-color: var(--color-text-1);
|
||||
|
||||
a {
|
||||
display: inline;
|
||||
text-decoration: underline;
|
||||
text-underline-offset: 0.25rem;
|
||||
|
||||
::before {
|
||||
content: ' ';
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
Styled.ButtonRow = styled.div`
|
||||
${layoutMixins.inlineRow}
|
||||
gap: 0.75rem;
|
||||
margin-top: 0.5rem;
|
||||
|
||||
a:last-child {
|
||||
--button-width: 100%;
|
||||
}
|
||||
`;
|
||||
|
||||
Styled.Button = styled(Button)`
|
||||
--button-padding: 0 1rem;
|
||||
`;
|
||||
|
||||
Styled.LinkOutIcon = styled(Icon)`
|
||||
color: var(--color-text-1);
|
||||
`;
|
||||
|
||||
Styled.AboutButton = styled(Styled.Button)`
|
||||
--button-textColor: var(--color-text-2);
|
||||
--button-backgroundColor: var(--color-layer-6);
|
||||
--button-border: solid var(--border-width) var(--color-layer-7);
|
||||
`;
|
||||
|
||||
Styled.Column = styled.div`
|
||||
${layoutMixins.flexColumn}
|
||||
gap: 0.5rem;
|
||||
`;
|
||||
|
||||
Styled.EstimatedRewardsCard = styled.div`
|
||||
${layoutMixins.spacedRow}
|
||||
padding: 1rem 1.25rem;
|
||||
min-width: 21.25rem;
|
||||
height: calc(100% - calc(1.5rem * 2));
|
||||
margin: 1.5rem;
|
||||
|
||||
background-color: var(--color-layer-5);
|
||||
background-image: url('/dots-background.svg');
|
||||
background-size: cover;
|
||||
|
||||
border-radius: 0.75rem;
|
||||
border: solid var(--border-width) var(--color-layer-6);
|
||||
color: var(--color-text-1);
|
||||
|
||||
@media ${breakpoints.tablet} {
|
||||
margin: 0 0 0.5rem;
|
||||
}
|
||||
`;
|
||||
|
||||
Styled.EstimatedRewardsCardContent = styled.div`
|
||||
${layoutMixins.flexColumn}
|
||||
gap: 1rem;
|
||||
height: 100%;
|
||||
justify-content: space-between;
|
||||
|
||||
div {
|
||||
${layoutMixins.flexColumn}
|
||||
gap: 0.15rem;
|
||||
font: var(--font-medium-book);
|
||||
|
||||
:first-child {
|
||||
color: var(--color-text-2);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
Styled.BackgroundDots = styled.img`
|
||||
position: absolute;
|
||||
`;
|
||||
|
||||
Styled.Season = styled.span`
|
||||
font: var(--font-small-book);
|
||||
color: var(--color-text-1);
|
||||
`;
|
||||
|
||||
Styled.Points = styled.span`
|
||||
${layoutMixins.inlineRow}
|
||||
gap: 0.25rem;
|
||||
font: var(--font-large-book);
|
||||
color: var(--color-text-0);
|
||||
|
||||
output {
|
||||
color: var(--color-text-2);
|
||||
}
|
||||
`;
|
||||
|
||||
Styled.Image = styled.img`
|
||||
position: relative;
|
||||
float: right;
|
||||
|
||||
width: 5.25rem;
|
||||
height: auto;
|
||||
`;
|
||||
|
||||
Styled.ChaosLabsLogo = styled.img`
|
||||
height: 1.25rem;
|
||||
align-self: start;
|
||||
`;
|
||||
|
||||
Styled.NewTag = styled(Tag)`
|
||||
color: var(--color-accent);
|
||||
background-color: var(--color-accent-faded);
|
||||
`;
|
||||
@@ -7,6 +7,8 @@ import { ButtonAction, ButtonSize, ButtonType } from '@/constants/buttons';
|
||||
|
||||
import { useAccountBalance, useBreakpoints, useStringGetter } from '@/hooks';
|
||||
|
||||
import { breakpoints } from '@/styles';
|
||||
|
||||
import { layoutMixins } from '@/styles/layoutMixins';
|
||||
|
||||
import { Details } from '@/components/Details';
|
||||
@@ -134,13 +136,22 @@ const Styled: Record<string, AnyStyledComponent> = {};
|
||||
Styled.MigratePanel = styled(Panel)`
|
||||
--panel-paddingX: 1.5rem;
|
||||
width: 100%;
|
||||
|
||||
background-image: url('/dots-background.svg');
|
||||
background-position: right;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
@media ${breakpoints.tablet} {
|
||||
--panel-paddingY: 1.5rem;
|
||||
--panel-content-paddingY: 1rem;
|
||||
}
|
||||
`;
|
||||
|
||||
Styled.Title = styled.h3`
|
||||
font: var(--font-medium-book);
|
||||
color: var(--color-text-2);
|
||||
|
||||
padding: 1rem 1.5rem 0;
|
||||
padding: var(--panel-paddingY) var(--panel-paddingX) 0;
|
||||
`;
|
||||
|
||||
Styled.MigrateAction = styled.div`
|
||||
@@ -164,6 +175,13 @@ Styled.Token = styled(Output)`
|
||||
Styled.Description = styled.div`
|
||||
color: var(--color-text-0);
|
||||
--link-color: var(--color-text-1);
|
||||
|
||||
a {
|
||||
display: inline;
|
||||
::before {
|
||||
content: ' ';
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
Styled.Column = styled.div`
|
||||
|
||||
@@ -0,0 +1,80 @@
|
||||
import styled, { AnyStyledComponent } from 'styled-components';
|
||||
|
||||
import { STRING_KEYS } from '@/constants/localization';
|
||||
import { layoutMixins } from '@/styles/layoutMixins';
|
||||
import { useStringGetter } from '@/hooks';
|
||||
|
||||
import { Accordion } from '@/components/Accordion';
|
||||
import { Link } from '@/components/Link';
|
||||
import { Panel } from '@/components/Panel';
|
||||
|
||||
const REWARDS_LEARN_MORE_LINK = ''; // to be configured
|
||||
|
||||
export const RewardsHelpPanel = () => {
|
||||
const stringGetter = useStringGetter();
|
||||
|
||||
return (
|
||||
<Styled.HelpCard
|
||||
slotHeader={
|
||||
<Styled.Header>
|
||||
<h3>{stringGetter({ key: STRING_KEYS.HELP })}</h3>
|
||||
{REWARDS_LEARN_MORE_LINK && (
|
||||
<Link withIcon href={REWARDS_LEARN_MORE_LINK}>
|
||||
{stringGetter({ key: STRING_KEYS.LEARN_MORE })}
|
||||
</Link>
|
||||
)}
|
||||
</Styled.Header>
|
||||
}
|
||||
>
|
||||
<Accordion
|
||||
items={[
|
||||
{
|
||||
header: 'Who is eligible for trading rewards?',
|
||||
content: 'All traders are eligible for trading rewards.',
|
||||
},
|
||||
{
|
||||
header: 'How do trading rewards work?',
|
||||
content:
|
||||
'Immediately after each fill, trading rewards are sent directly to the trader’s dYdX Chain address, based on the amount of fees paid by the trader.',
|
||||
},
|
||||
{
|
||||
header: 'How do I claim my rewards?',
|
||||
content:
|
||||
'Each block, trading rewards are automatically sent directly to the trader’s dYdX Chain address.',
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</Styled.HelpCard>
|
||||
);
|
||||
};
|
||||
|
||||
const Styled: Record<string, AnyStyledComponent> = {};
|
||||
|
||||
Styled.HelpCard = styled(Panel)`
|
||||
--panel-content-paddingY: 0;
|
||||
width: 100%;
|
||||
height: max-content;
|
||||
padding: 0;
|
||||
gap: 0;
|
||||
|
||||
text-align: start;
|
||||
`;
|
||||
|
||||
Styled.Header = styled.div`
|
||||
${layoutMixins.spacedRow}
|
||||
gap: 1ch;
|
||||
|
||||
padding: 1.25rem 1.5rem;
|
||||
border-bottom: var(--border-width) solid var(--border-color);
|
||||
|
||||
font: var(--font-small-book);
|
||||
|
||||
h3 {
|
||||
font: var(--font-medium-book);
|
||||
color: var(--color-text-2);
|
||||
}
|
||||
`;
|
||||
|
||||
Styled.Link = styled(Link)`
|
||||
display: inline-flex;
|
||||
`;
|
||||
@@ -19,8 +19,9 @@ import { openDialog } from '@/state/dialogs';
|
||||
|
||||
import { DYDXBalancePanel } from './DYDXBalancePanel';
|
||||
import { MigratePanel } from './MigratePanel';
|
||||
import { LaunchIncentivesPanel } from './LaunchIncentivesPanel';
|
||||
|
||||
export const RewardsPage = () => {
|
||||
const RewardsPage = () => {
|
||||
const dispatch = useDispatch();
|
||||
const stringGetter = useStringGetter();
|
||||
const { governanceLearnMore, stakingLearnMore } = useURLConfigs();
|
||||
@@ -39,9 +40,20 @@ export const RewardsPage = () => {
|
||||
return (
|
||||
<Styled.Page>
|
||||
{import.meta.env.VITE_V3_TOKEN_ADDRESS && <MigratePanel />}
|
||||
<Styled.PanelRow>
|
||||
{isTablet && <DYDXBalancePanel />}
|
||||
|
||||
{isTablet ? (
|
||||
<>
|
||||
<LaunchIncentivesPanel />
|
||||
<DYDXBalancePanel />
|
||||
</>
|
||||
) : (
|
||||
<Styled.PanelRowIncentivesAndBalance>
|
||||
<LaunchIncentivesPanel />
|
||||
<DYDXBalancePanel />
|
||||
</Styled.PanelRowIncentivesAndBalance>
|
||||
)}
|
||||
|
||||
<Styled.PanelRow>
|
||||
<Styled.Panel
|
||||
slotHeader={<Styled.Title>{stringGetter({ key: STRING_KEYS.GOVERNANCE })}</Styled.Title>}
|
||||
slotRight={panelArrow}
|
||||
@@ -67,13 +79,13 @@ export const RewardsPage = () => {
|
||||
</Link>
|
||||
</Styled.Description>
|
||||
</Styled.Panel>
|
||||
|
||||
{isNotTablet && <DYDXBalancePanel />}
|
||||
</Styled.PanelRow>
|
||||
</Styled.Page>
|
||||
);
|
||||
};
|
||||
|
||||
export default RewardsPage;
|
||||
|
||||
const Styled: Record<string, AnyStyledComponent> = {};
|
||||
|
||||
Styled.Page = styled.div`
|
||||
@@ -99,6 +111,11 @@ Styled.Page = styled.div`
|
||||
|
||||
Styled.Panel = styled(Panel)`
|
||||
--panel-paddingX: 1.5rem;
|
||||
|
||||
@media ${breakpoints.tablet} {
|
||||
--panel-paddingY: 1.5rem;
|
||||
--panel-content-paddingY: 1rem;
|
||||
}
|
||||
`;
|
||||
|
||||
Styled.Title = styled.h3`
|
||||
@@ -110,20 +127,29 @@ Styled.Title = styled.h3`
|
||||
Styled.Description = styled.div`
|
||||
color: var(--color-text-0);
|
||||
--link-color: var(--color-text-1);
|
||||
|
||||
a {
|
||||
display: inline;
|
||||
::before {
|
||||
content: ' ';
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
Styled.PanelRow = styled.div`
|
||||
${layoutMixins.gridEqualColumns}
|
||||
gap: 1.5rem;
|
||||
|
||||
align-items: flex-start;
|
||||
|
||||
@media ${breakpoints.tablet} {
|
||||
grid-auto-flow: row;
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
`;
|
||||
|
||||
Styled.PanelRowIncentivesAndBalance = styled(Styled.PanelRow)`
|
||||
grid-template-columns: 2fr 1fr;
|
||||
`;
|
||||
|
||||
Styled.IconButton = styled(IconButton)`
|
||||
color: var(--color-text-0);
|
||||
--color-border: var(--color-layer-6);
|
||||
|
||||
@@ -25,7 +25,7 @@ import { useNetworks } from '@/views/menus/useNetworks';
|
||||
import { SettingsHeader } from './SettingsHeader';
|
||||
import { ComingSoonSpace } from '@/components/ComingSoon';
|
||||
|
||||
export const SettingsPage = () => {
|
||||
const SettingsPage = () => {
|
||||
const stringGetter = useStringGetter();
|
||||
const { pathname } = useLocation();
|
||||
const dispatch = useDispatch();
|
||||
@@ -105,3 +105,5 @@ export const SettingsPage = () => {
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default SettingsPage;
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
import { useState } from 'react';
|
||||
import { useMemo, useState } from 'react';
|
||||
import { shallowEqual, useSelector } from 'react-redux';
|
||||
import styled, { type AnyStyledComponent } from 'styled-components';
|
||||
|
||||
import { AbacusOrderStatus } from '@/constants/abacus';
|
||||
import { STRING_KEYS } from '@/constants/localization';
|
||||
|
||||
import { useBreakpoints, useStringGetter } from '@/hooks';
|
||||
@@ -28,7 +27,6 @@ import {
|
||||
getCurrentMarketTradeInfoNumbers,
|
||||
getHasUnseenFillUpdates,
|
||||
getHasUnseenOrderUpdates,
|
||||
getLatestOrderStatus,
|
||||
getTradeInfoNumbers,
|
||||
} from '@/state/accountSelectors';
|
||||
|
||||
@@ -82,125 +80,141 @@ export const HorizontalPanel = ({ isOpen = true, setIsOpen }: ElementProps) => {
|
||||
showCurrentMarket ? numOpenOrders : numTotalOpenOrders
|
||||
);
|
||||
|
||||
const tabItems = [
|
||||
{
|
||||
value: InfoSection.Position,
|
||||
label: stringGetter({
|
||||
key: showCurrentMarket ? STRING_KEYS.POSITION : STRING_KEYS.POSITIONS,
|
||||
}),
|
||||
const tabItems = useMemo(
|
||||
() => [
|
||||
{
|
||||
value: InfoSection.Position,
|
||||
label: stringGetter({
|
||||
key: showCurrentMarket ? STRING_KEYS.POSITION : STRING_KEYS.POSITIONS,
|
||||
}),
|
||||
|
||||
tag: showCurrentMarket ? null : shortenNumberForDisplay(numTotalPositions),
|
||||
tag: showCurrentMarket ? null : shortenNumberForDisplay(numTotalPositions),
|
||||
|
||||
content: showCurrentMarket ? (
|
||||
<PositionInfo showNarrowVariation={isTablet} />
|
||||
) : (
|
||||
<PositionsTable
|
||||
columnKeys={
|
||||
isTablet
|
||||
? [
|
||||
PositionsTableColumnKey.Details,
|
||||
PositionsTableColumnKey.IndexEntry,
|
||||
PositionsTableColumnKey.PnL,
|
||||
]
|
||||
: [
|
||||
PositionsTableColumnKey.Market,
|
||||
PositionsTableColumnKey.Side,
|
||||
PositionsTableColumnKey.Size,
|
||||
PositionsTableColumnKey.Leverage,
|
||||
PositionsTableColumnKey.LiquidationAndOraclePrice,
|
||||
PositionsTableColumnKey.UnrealizedPnl,
|
||||
PositionsTableColumnKey.RealizedPnl,
|
||||
PositionsTableColumnKey.AverageOpenAndClose,
|
||||
]
|
||||
}
|
||||
onNavigate={() => setView(PanelView.CurrentMarket)}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
value: InfoSection.Orders,
|
||||
label: stringGetter({ key: STRING_KEYS.ORDERS }),
|
||||
content: showCurrentMarket ? (
|
||||
<PositionInfo showNarrowVariation={isTablet} />
|
||||
) : (
|
||||
<PositionsTable
|
||||
columnKeys={
|
||||
isTablet
|
||||
? [
|
||||
PositionsTableColumnKey.Details,
|
||||
PositionsTableColumnKey.IndexEntry,
|
||||
PositionsTableColumnKey.PnL,
|
||||
]
|
||||
: [
|
||||
PositionsTableColumnKey.Market,
|
||||
PositionsTableColumnKey.Side,
|
||||
PositionsTableColumnKey.Size,
|
||||
PositionsTableColumnKey.Leverage,
|
||||
PositionsTableColumnKey.LiquidationAndOraclePrice,
|
||||
PositionsTableColumnKey.UnrealizedPnl,
|
||||
PositionsTableColumnKey.RealizedPnl,
|
||||
PositionsTableColumnKey.AverageOpenAndClose,
|
||||
]
|
||||
}
|
||||
onNavigate={() => setView(PanelView.CurrentMarket)}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
asChild: true,
|
||||
value: InfoSection.Orders,
|
||||
label: stringGetter({ key: STRING_KEYS.ORDERS }),
|
||||
|
||||
slotRight: isWaitingForOrderToIndex ? (
|
||||
<Styled.LoadingSpinner />
|
||||
) : (
|
||||
ordersTagNumber && (
|
||||
<Tag type={TagType.Number} isHighlighted={hasUnseenOrderUpdates}>
|
||||
{ordersTagNumber}
|
||||
slotRight: isWaitingForOrderToIndex ? (
|
||||
<Styled.LoadingSpinner />
|
||||
) : (
|
||||
ordersTagNumber && (
|
||||
<Tag type={TagType.Number} isHighlighted={hasUnseenOrderUpdates}>
|
||||
{ordersTagNumber}
|
||||
</Tag>
|
||||
)
|
||||
),
|
||||
|
||||
content: (
|
||||
<OrdersTable
|
||||
currentMarket={showCurrentMarket ? currentMarketId : undefined}
|
||||
columnKeys={
|
||||
isTablet
|
||||
? [OrdersTableColumnKey.StatusFill, OrdersTableColumnKey.PriceType]
|
||||
: [
|
||||
!showCurrentMarket && OrdersTableColumnKey.Market,
|
||||
OrdersTableColumnKey.Status,
|
||||
OrdersTableColumnKey.Side,
|
||||
OrdersTableColumnKey.AmountFill,
|
||||
OrdersTableColumnKey.Price,
|
||||
OrdersTableColumnKey.Trigger,
|
||||
OrdersTableColumnKey.GoodTil,
|
||||
!isAccountViewOnly && OrdersTableColumnKey.Actions,
|
||||
].filter(isTruthy)
|
||||
}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
asChild: true,
|
||||
value: InfoSection.Fills,
|
||||
label: stringGetter({ key: STRING_KEYS.FILLS }),
|
||||
|
||||
slotRight: fillsTagNumber && (
|
||||
<Tag type={TagType.Number} isHighlighted={hasUnseenFillUpdates}>
|
||||
{fillsTagNumber}
|
||||
</Tag>
|
||||
)
|
||||
),
|
||||
),
|
||||
|
||||
content: (
|
||||
<OrdersTable
|
||||
currentMarket={showCurrentMarket ? currentMarketId : undefined}
|
||||
columnKeys={
|
||||
isTablet
|
||||
? [OrdersTableColumnKey.StatusFill, OrdersTableColumnKey.PriceType]
|
||||
: [
|
||||
!showCurrentMarket && OrdersTableColumnKey.Market,
|
||||
OrdersTableColumnKey.Status,
|
||||
OrdersTableColumnKey.Side,
|
||||
OrdersTableColumnKey.AmountFill,
|
||||
OrdersTableColumnKey.Price,
|
||||
OrdersTableColumnKey.Trigger,
|
||||
OrdersTableColumnKey.GoodTil,
|
||||
!isAccountViewOnly && OrdersTableColumnKey.Actions,
|
||||
].filter(isTruthy)
|
||||
}
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
value: InfoSection.Fills,
|
||||
label: stringGetter({ key: STRING_KEYS.FILLS }),
|
||||
content: (
|
||||
<FillsTable
|
||||
currentMarket={showCurrentMarket ? currentMarketId : undefined}
|
||||
columnKeys={
|
||||
isTablet
|
||||
? [
|
||||
FillsTableColumnKey.Time,
|
||||
FillsTableColumnKey.TypeAmount,
|
||||
FillsTableColumnKey.PriceFee,
|
||||
]
|
||||
: [
|
||||
!showCurrentMarket && FillsTableColumnKey.Market,
|
||||
FillsTableColumnKey.Time,
|
||||
FillsTableColumnKey.Type,
|
||||
FillsTableColumnKey.Side,
|
||||
FillsTableColumnKey.AmountTag,
|
||||
FillsTableColumnKey.Price,
|
||||
FillsTableColumnKey.TotalFee,
|
||||
FillsTableColumnKey.Liquidity,
|
||||
].filter(isTruthy)
|
||||
}
|
||||
columnWidths={{
|
||||
[FillsTableColumnKey.TypeAmount]: '100%',
|
||||
}}
|
||||
/>
|
||||
),
|
||||
},
|
||||
// TODO - TRCL-1693 - re-enable when funding payments are supported
|
||||
// {
|
||||
// value: InfoSection.Payments,
|
||||
// label: stringGetter({ key: STRING_KEYS.PAYMENTS }),
|
||||
|
||||
slotRight: fillsTagNumber && (
|
||||
<Tag type={TagType.Number} isHighlighted={hasUnseenFillUpdates}>
|
||||
{fillsTagNumber}
|
||||
</Tag>
|
||||
),
|
||||
|
||||
content: (
|
||||
<FillsTable
|
||||
currentMarket={showCurrentMarket ? currentMarketId : undefined}
|
||||
columnKeys={
|
||||
isTablet
|
||||
? [
|
||||
FillsTableColumnKey.Time,
|
||||
FillsTableColumnKey.TypeAmount,
|
||||
FillsTableColumnKey.PriceFee,
|
||||
]
|
||||
: [
|
||||
!showCurrentMarket && FillsTableColumnKey.Market,
|
||||
FillsTableColumnKey.Time,
|
||||
FillsTableColumnKey.Type,
|
||||
FillsTableColumnKey.Side,
|
||||
FillsTableColumnKey.AmountTag,
|
||||
FillsTableColumnKey.Price,
|
||||
FillsTableColumnKey.TotalFee,
|
||||
FillsTableColumnKey.Liquidity,
|
||||
].filter(isTruthy)
|
||||
}
|
||||
columnWidths={{
|
||||
[FillsTableColumnKey.TypeAmount]: '100%',
|
||||
}}
|
||||
/>
|
||||
),
|
||||
},
|
||||
// TODO - TRCL-1693 - re-enable when funding payments are supported
|
||||
// {
|
||||
// value: InfoSection.Payments,
|
||||
// label: stringGetter({ key: STRING_KEYS.PAYMENTS }),
|
||||
|
||||
// tag: shortenNumberForDisplay(
|
||||
// showCurrentMarket ? numFundingPayments : numTotalFundingPayments
|
||||
// ),
|
||||
// content: (
|
||||
// <FundingPaymentsTable currentMarket={showCurrentMarket ? currentMarket?.id : undefined} />
|
||||
// ),
|
||||
// },
|
||||
];
|
||||
// tag: shortenNumberForDisplay(
|
||||
// showCurrentMarket ? numFundingPayments : numTotalFundingPayments
|
||||
// ),
|
||||
// content: (
|
||||
// <FundingPaymentsTable currentMarket={showCurrentMarket ? currentMarket?.id : undefined} />
|
||||
// ),
|
||||
// },
|
||||
],
|
||||
[
|
||||
stringGetter,
|
||||
currentMarketId,
|
||||
showCurrentMarket,
|
||||
isTablet,
|
||||
isWaitingForOrderToIndex,
|
||||
isAccountViewOnly,
|
||||
ordersTagNumber,
|
||||
fillsTagNumber,
|
||||
hasUnseenFillUpdates,
|
||||
hasUnseenOrderUpdates,
|
||||
]
|
||||
);
|
||||
|
||||
return isTablet ? (
|
||||
<MobileTabs defaultValue={InfoSection.Position} items={tabItems} withBorders={false} />
|
||||
|
||||
@@ -7,7 +7,12 @@ import { layoutMixins } from '@/styles/layoutMixins';
|
||||
|
||||
import { TradeLayouts } from '@/constants/layout';
|
||||
|
||||
import { useBreakpoints, useCurrentMarketId, usePageTitlePriceUpdates } from '@/hooks';
|
||||
import {
|
||||
useBreakpoints,
|
||||
useCurrentMarketId,
|
||||
usePageTitlePriceUpdates,
|
||||
useTradeFormInputs,
|
||||
} from '@/hooks';
|
||||
|
||||
import { calculateCanAccountTrade } from '@/state/accountCalculators';
|
||||
import { getSelectedTradeLayout } from '@/state/layoutSelectors';
|
||||
@@ -37,6 +42,7 @@ const TradePage = () => {
|
||||
const [isHorizontalPanelOpen, setIsHorizontalPanelOpen] = useState(true);
|
||||
|
||||
usePageTitlePriceUpdates();
|
||||
useTradeFormInputs();
|
||||
|
||||
return isTablet ? (
|
||||
<Styled.TradeLayoutMobile>
|
||||
|
||||
@@ -17,6 +17,7 @@ export interface ConfigsState {
|
||||
feeTiers?: kollections.List<FeeTier>;
|
||||
feeDiscounts?: FeeDiscount[];
|
||||
network?: NetworkConfigs;
|
||||
hasSeenLaunchIncentives: boolean;
|
||||
}
|
||||
|
||||
const DOCUMENT_THEME_MAP = {
|
||||
@@ -43,6 +44,10 @@ const initialState: ConfigsState = {
|
||||
feeDiscounts: undefined,
|
||||
feeTiers: undefined,
|
||||
network: undefined,
|
||||
hasSeenLaunchIncentives: getLocalStorage({
|
||||
key: LocalStorageKey.HasSeenLaunchIncentives,
|
||||
defaultValue: false,
|
||||
}),
|
||||
};
|
||||
|
||||
changeTheme(initialState.appTheme);
|
||||
@@ -60,7 +65,11 @@ export const configsSlice = createSlice({
|
||||
...state,
|
||||
...action.payload,
|
||||
}),
|
||||
markLaunchIncentivesSeen: (state: ConfigsState) => {
|
||||
setLocalStorage({ key: LocalStorageKey.HasSeenLaunchIncentives, value: true });
|
||||
state.hasSeenLaunchIncentives = true;
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const { setAppTheme, setConfigs } = configsSlice.actions;
|
||||
export const { setAppTheme, setConfigs, markLaunchIncentivesSeen } = configsSlice.actions;
|
||||
|
||||
@@ -5,3 +5,6 @@ export const getAppTheme = (state: RootState) => state.configs.appTheme;
|
||||
export const getFeeTiers = (state: RootState) => state.configs.feeTiers?.toArray();
|
||||
|
||||
export const getFeeDiscounts = (state: RootState) => state.configs.feeDiscounts;
|
||||
|
||||
export const getHasSeenLaunchIncentives = (state: RootState) =>
|
||||
state.configs.hasSeenLaunchIncentives;
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
import { createSlice, type PayloadAction } from '@reduxjs/toolkit';
|
||||
import assign from 'lodash/assign';
|
||||
|
||||
import type {
|
||||
InputError,
|
||||
@@ -9,9 +10,14 @@ 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>;
|
||||
@@ -20,6 +26,10 @@ export interface InputsState {
|
||||
const initialState: InputsState = {
|
||||
current: undefined,
|
||||
inputErrors: undefined,
|
||||
tradeFormInputs: {
|
||||
...CLEARED_TRADE_INPUTS,
|
||||
...CLEARED_SIZE_INPUTS,
|
||||
},
|
||||
tradeInputs: undefined,
|
||||
transferInputs: undefined,
|
||||
};
|
||||
@@ -37,10 +47,17 @@ export const inputsSlice = createSlice({
|
||||
inputErrors: errors?.toArray(),
|
||||
tradeInputs: trade,
|
||||
closePositionInputs: closePosition,
|
||||
transferInputs: transfer,
|
||||
transferInputs: {
|
||||
...transfer,
|
||||
isCctp: !!transfer?.isCctp,
|
||||
} as Nullable<TransferInputs>,
|
||||
};
|
||||
},
|
||||
|
||||
setTradeFormInputs: (state, action: PayloadAction<Partial<TradeFormInputs>>) => {
|
||||
state.tradeFormInputs = assign({}, state.tradeFormInputs, action.payload);
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
export const { setInputs } = inputsSlice.actions;
|
||||
export const { setInputs, setTradeFormInputs } = inputsSlice.actions;
|
||||
|
||||
@@ -120,3 +120,8 @@ export const useTradeFormData = () => {
|
||||
shallowEqual
|
||||
);
|
||||
};
|
||||
|
||||
/**
|
||||
* @returns Tradeform Input states for display. Abacus inputs should track these values.
|
||||
*/
|
||||
export const getTradeFormInputs = (state: RootState) => state.inputs.tradeFormInputs;
|
||||
|
||||
@@ -116,6 +116,7 @@
|
||||
|
||||
--color-gradient-positive: hsla(158, 49%, 48%, 0.16);
|
||||
--color-gradient-negative: hsla(0, 100%, 66%, 0.16);
|
||||
--color-accent-faded: hsla(var(--theme-classic-hue-purple), 100%, 70%, 0.16);
|
||||
|
||||
--color-risk-low: var(--theme-classic-color-green);
|
||||
--color-risk-medium: var(--theme-classic-color-yellow);
|
||||
|
||||
@@ -151,6 +151,8 @@ export const formMixins: Record<
|
||||
--form-input-paddingY: 0.5rem;
|
||||
--form-input-paddingX: 1rem;
|
||||
|
||||
height: 100%;
|
||||
|
||||
label {
|
||||
--label-textColor: var(--color-text-0);
|
||||
}
|
||||
|
||||
@@ -877,11 +877,6 @@ export const layoutMixins: Record<
|
||||
}
|
||||
`,
|
||||
|
||||
perspectiveArea: css`
|
||||
perspective: 100rem;
|
||||
transform-style: preserve-3d;
|
||||
`,
|
||||
|
||||
absolute: css`
|
||||
position: absolute;
|
||||
top: 0;
|
||||
|
||||
@@ -63,7 +63,6 @@ Styled.AccountInfoSectionContainer = styled.div<{ showAccountInfo?: boolean }>`
|
||||
${layoutMixins.column}
|
||||
height: var(--account-info-section-height);
|
||||
min-height: var(--account-info-section-height);
|
||||
overflow-x: clip;
|
||||
|
||||
${({ showAccountInfo }) =>
|
||||
!showAccountInfo &&
|
||||
|
||||
@@ -203,7 +203,6 @@ const Styled: Record<string, AnyStyledComponent> = {};
|
||||
|
||||
Styled.Stack = styled.div`
|
||||
${layoutMixins.stack}
|
||||
${layoutMixins.perspectiveArea}
|
||||
`;
|
||||
|
||||
Styled.CornerButton = styled(Button)`
|
||||
@@ -293,7 +292,14 @@ Styled.TransferButtons = styled.div`
|
||||
|
||||
Styled.ConnectedAccountInfoContainer = styled.div<{ $showHeader?: boolean }>`
|
||||
${layoutMixins.column}
|
||||
${layoutMixins.withOuterAndInnerBorders}
|
||||
|
||||
@media ${breakpoints.notTablet} {
|
||||
${layoutMixins.withOuterAndInnerBorders}
|
||||
}
|
||||
|
||||
@media ${breakpoints.tablet} {
|
||||
${layoutMixins.withInnerBorder}
|
||||
}
|
||||
|
||||
${({ $showHeader }) =>
|
||||
$showHeader &&
|
||||
|
||||
@@ -60,7 +60,7 @@ export const ExchangeBillboards: React.FC<ExchangeBillboardsProps> = ({
|
||||
},
|
||||
{
|
||||
key: 'trades',
|
||||
labelKey: STRING_KEYS.TRADES,
|
||||
labelKey: isTablet ? STRING_KEYS.TRADES_24H : STRING_KEYS.TRADES,
|
||||
value: totalTrades24H || undefined,
|
||||
type: isTablet ? OutputType.CompactNumber : OutputType.Number,
|
||||
subLabelKey: !isTablet && STRING_KEYS.TRADES_LABEL,
|
||||
|
||||
@@ -213,13 +213,8 @@ Styled.MarketDetails = styled.div`
|
||||
`;
|
||||
|
||||
Styled.Header = styled.header`
|
||||
/* max-width: fit-content; */
|
||||
|
||||
${layoutMixins.column}
|
||||
gap: 1.25rem;
|
||||
|
||||
position: sticky;
|
||||
bottom: 3rem;
|
||||
`;
|
||||
|
||||
Styled.WrapRow = styled.div`
|
||||
|
||||
@@ -453,13 +453,6 @@ Styled.Actions = styled.footer`
|
||||
> :last-child {
|
||||
flex: 2;
|
||||
}
|
||||
|
||||
position: sticky;
|
||||
bottom: clamp(0.5rem, 7.5%, 2rem);
|
||||
|
||||
@media ${breakpoints.tablet} {
|
||||
bottom: 0;
|
||||
}
|
||||
`;
|
||||
|
||||
Styled.Output = styled(Output)<{ sign: NumberSign; smallText?: boolean; margin?: string }>`
|
||||
@@ -514,6 +507,7 @@ Styled.PositionInfo = styled.div`
|
||||
|
||||
Styled.DetachedSection = styled(DetachedSection)`
|
||||
padding: 0 1.5rem;
|
||||
position: relative;
|
||||
`;
|
||||
|
||||
Styled.DetachedScrollableSection = styled(DetachedScrollableSection)`
|
||||
|
||||
@@ -5,7 +5,7 @@ import { createSelector } from 'reselect';
|
||||
|
||||
import { TradeInputField } from '@/constants/abacus';
|
||||
import { TradeTypes } from '@/constants/trade';
|
||||
import { STRING_KEYS } from '@/constants/localization';
|
||||
import { STRING_KEYS, StringKey } from '@/constants/localization';
|
||||
import { useStringGetter } from '@/hooks';
|
||||
import { layoutMixins } from '@/styles/layoutMixins';
|
||||
|
||||
@@ -30,7 +30,8 @@ const useTradeTypeOptions = () => {
|
||||
const allTradeTypeItems = typeOptions?.toArray()?.map(({ type, stringKey }) => ({
|
||||
value: type,
|
||||
label: stringGetter({
|
||||
key: type === TradeTypes.TAKE_PROFIT ? STRING_KEYS.TAKE_PROFIT_LIMIT : stringKey,
|
||||
key:
|
||||
type === TradeTypes.TAKE_PROFIT ? STRING_KEYS.TAKE_PROFIT_LIMIT : (stringKey as StringKey),
|
||||
}),
|
||||
}));
|
||||
|
||||
|
||||
@@ -82,7 +82,6 @@ const Styled: Record<string, AnyStyledComponent> = {};
|
||||
|
||||
Styled.PriceChart = styled.div<{ isChartReady?: boolean }>`
|
||||
${layoutMixins.stack}
|
||||
${layoutMixins.perspectiveArea}
|
||||
|
||||
height: 100%;
|
||||
|
||||
|
||||
@@ -1,12 +1,15 @@
|
||||
import { useState } from 'react';
|
||||
import { useEffect, 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;
|
||||
};
|
||||
@@ -14,6 +17,20 @@ 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 ? (
|
||||
|
||||
@@ -94,7 +94,7 @@ export const FillDetailsDialog = ({ fillId, setIsOpen }: ElementProps) => {
|
||||
|
||||
return (
|
||||
<DetailsDialog
|
||||
slotIcon={<Styled.AssetIcon symbol={asset.id} />}
|
||||
slotIcon={<Styled.AssetIcon symbol={asset?.id} />}
|
||||
title={resources.typeStringKey && stringGetter({ key: resources.typeStringKey })}
|
||||
items={detailItems}
|
||||
setIsOpen={setIsOpen}
|
||||
|
||||
@@ -194,7 +194,7 @@ export const OrderDetailsDialog = ({ orderId, setIsOpen }: ElementProps) => {
|
||||
|
||||
return (
|
||||
<DetailsDialog
|
||||
slotIcon={<Styled.AssetIcon symbol={asset.id} />}
|
||||
slotIcon={<Styled.AssetIcon symbol={asset?.id} />}
|
||||
title={!resources.typeStringKey ? '' : stringGetter({ key: resources.typeStringKey })}
|
||||
slotFooter={
|
||||
isAccountViewOnly ? null : isOrderStatusClearable(status) ? (
|
||||
|
||||
@@ -0,0 +1,46 @@
|
||||
import styled, { type AnyStyledComponent } from 'styled-components';
|
||||
|
||||
import { ButtonAction, ButtonType } from '@/constants/buttons';
|
||||
import { STRING_KEYS } from '@/constants/localization';
|
||||
import { useStringGetter } from '@/hooks';
|
||||
|
||||
import { Button } from '@/components/Button';
|
||||
import { Dialog } from '@/components/Dialog';
|
||||
|
||||
import { layoutMixins } from '@/styles/layoutMixins';
|
||||
|
||||
type ElementProps = {
|
||||
link: string;
|
||||
linkDescription?: string;
|
||||
setIsOpen: (open: boolean) => void;
|
||||
};
|
||||
|
||||
export const ExternalLinkDialog = ({ setIsOpen, link, linkDescription }: ElementProps) => {
|
||||
const stringGetter = useStringGetter();
|
||||
return (
|
||||
<Dialog
|
||||
isOpen
|
||||
setIsOpen={setIsOpen}
|
||||
title={stringGetter({ key: STRING_KEYS.LEAVING_WEBSITE })}
|
||||
description={
|
||||
linkDescription ?? stringGetter({ key: STRING_KEYS.LEAVING_WEBSITE_DESCRIPTION })
|
||||
}
|
||||
>
|
||||
<Styled.Content>
|
||||
<p>{stringGetter({ key: STRING_KEYS.LEAVING_WEBSITE_DISCLAIMER })}.</p>
|
||||
<Button type={ButtonType.Link} action={ButtonAction.Primary} href={link}>
|
||||
{stringGetter({ key: STRING_KEYS.CONTINUE })}
|
||||
</Button>
|
||||
</Styled.Content>
|
||||
</Dialog>
|
||||
);
|
||||
};
|
||||
|
||||
const Styled: Record<string, AnyStyledComponent> = {};
|
||||
|
||||
Styled.Content = styled.div`
|
||||
${layoutMixins.flexColumn}
|
||||
gap: 1rem;
|
||||
|
||||
font: var(--font-base-book);
|
||||
`;
|
||||
@@ -8,6 +8,7 @@ import { ComboboxDialogMenu } from '@/components/ComboboxDialogMenu';
|
||||
import { Icon, IconName } from '@/components/Icon';
|
||||
|
||||
import { isTruthy } from '@/lib/isTruthy';
|
||||
import { breakpoints } from '@/styles';
|
||||
|
||||
type ElementProps = {
|
||||
setIsOpen: (open: boolean) => void;
|
||||
@@ -72,8 +73,11 @@ export const HelpDialog = ({ setIsOpen }: ElementProps) => {
|
||||
const Styled: Record<string, AnyStyledComponent> = {};
|
||||
|
||||
Styled.ComboboxDialogMenu = styled(ComboboxDialogMenu)`
|
||||
--dialog-width: var(--dialog-small-width);
|
||||
--dialog-content-paddingTop: 1rem;
|
||||
--dialog-content-paddingBottom: 1rem;
|
||||
--comboxDialogMenu-item-gap: 1rem;
|
||||
|
||||
@media ${breakpoints.notMobile} {
|
||||
--dialog-width: var(--dialog-small-width);
|
||||
}
|
||||
`;
|
||||
|
||||
@@ -18,13 +18,14 @@ import abacusStateManager from '@/lib/abacus';
|
||||
import { DepositDialogContent } from './DepositDialog/DepositDialogContent';
|
||||
|
||||
type ElementProps = {
|
||||
selectedTransferType?: string;
|
||||
setIsOpen?: (open: boolean) => void;
|
||||
};
|
||||
|
||||
export const ManageFundsDialog = ({ setIsOpen }: ElementProps) => {
|
||||
export const ManageFundsDialog = ({ setIsOpen, selectedTransferType }: ElementProps) => {
|
||||
const stringGetter = useStringGetter();
|
||||
const { type } = useSelector(getTransferInputs, shallowEqual) || {};
|
||||
const currentType = type?.rawValue ?? TransferType.deposit.rawValue;
|
||||
const currentType = type?.rawValue ?? selectedTransferType ?? TransferType.deposit.rawValue;
|
||||
|
||||
const closeDialog = () => setIsOpen?.(false);
|
||||
|
||||
|
||||
@@ -7,6 +7,7 @@ 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';
|
||||
@@ -54,14 +55,14 @@ export const AcknowledgeTerms = ({ onClose, onContinue }: ElementProps) => {
|
||||
<li>{stringGetter({ key: STRING_KEYS.TOS_LINE5 })}</li>
|
||||
</ul>
|
||||
</Styled.TOS>
|
||||
<Styled.Row>
|
||||
<Styled.Footer>
|
||||
<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.Row>
|
||||
</Styled.Footer>
|
||||
</>
|
||||
);
|
||||
};
|
||||
@@ -87,8 +88,9 @@ Styled.TOS = styled.section`
|
||||
}
|
||||
`;
|
||||
|
||||
Styled.Row = styled.div`
|
||||
${layoutMixins.row};
|
||||
Styled.Footer = styled.div`
|
||||
${formMixins.footer};
|
||||
${layoutMixins.row}
|
||||
|
||||
gap: 1rem;
|
||||
`;
|
||||
|
||||
@@ -8,7 +8,7 @@ import { STRING_KEYS } from '@/constants/localization';
|
||||
|
||||
import { Button } from '@/components/Button';
|
||||
|
||||
import { openDialog } from '@/state/dialogs';
|
||||
import { forceOpenDialog } 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(openDialog({ type: DialogTypes.Onboarding }))}
|
||||
onClick={() => dispatch(forceOpenDialog({ type: DialogTypes.Onboarding }))}
|
||||
>
|
||||
{
|
||||
{
|
||||
|
||||
@@ -53,6 +53,18 @@ 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]
|
||||
|
||||
@@ -1,124 +0,0 @@
|
||||
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;
|
||||
`;
|
||||
@@ -18,11 +18,7 @@ type ElementProps = {
|
||||
onSelectChain: (chain: string) => void;
|
||||
};
|
||||
|
||||
export const ChainSelectMenu = ({
|
||||
label,
|
||||
selectedChain,
|
||||
onSelectChain,
|
||||
}: ElementProps) => {
|
||||
export const ChainSelectMenu = ({ label, selectedChain, onSelectChain }: ElementProps) => {
|
||||
const stringGetter = useStringGetter();
|
||||
const { type, depositOptions, withdrawalOptions, resources } =
|
||||
useSelector(getTransferInputs, shallowEqual) || {};
|
||||
@@ -38,7 +34,7 @@ export const ChainSelectMenu = ({
|
||||
slotBefore: <Styled.Img src={chain.iconUrl} alt="" />,
|
||||
}));
|
||||
|
||||
const selectedOption = chains.find((item) => item.type === selectedChain);
|
||||
const selectedOption = chains.find((item) => item.type === selectedChain);
|
||||
|
||||
return (
|
||||
<SearchSelectMenu
|
||||
@@ -81,4 +77,4 @@ Styled.ChainRow = styled.div`
|
||||
gap: 0.5rem;
|
||||
color: var(--color-text-2);
|
||||
font: var(--font-base-book);
|
||||
`;
|
||||
`;
|
||||
|
||||
@@ -2,22 +2,21 @@ 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 { parseUnits } from 'viem';
|
||||
import { Abi, 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';
|
||||
import { STRING_KEYS } from '@/constants/localization';
|
||||
import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
|
||||
import { NotificationStatus } from '@/constants/notifications';
|
||||
import { NumberSign } from '@/constants/numbers';
|
||||
import { ENVIRONMENT_CONFIG_MAP, isMainnet } from '@/constants/networks';
|
||||
import { MAX_CCTP_TRANSFER_AMOUNT, MAX_PRICE_IMPACT, NumberSign } from '@/constants/numbers';
|
||||
import type { EvmAddress } from '@/constants/wallets';
|
||||
|
||||
import { useAccounts, useDebounce, useStringGetter, useSelectedNetwork } from '@/hooks';
|
||||
import { useAccountBalance, CHAIN_DEFAULT_TOKEN_ADDRESS } from '@/hooks/useAccountBalance';
|
||||
import { useLocalNotifications } from '@/hooks/useLocalNotifications';
|
||||
import { NATIVE_TOKEN_ADDRESS, useSquid } from '@/hooks/useSquid';
|
||||
|
||||
import { layoutMixins } from '@/styles/layoutMixins';
|
||||
import { formMixins } from '@/styles/formMixins';
|
||||
@@ -37,6 +36,7 @@ import { getTransferInputs } from '@/state/inputsSelectors';
|
||||
|
||||
import abacusStateManager from '@/lib/abacus';
|
||||
import { MustBigNumber } from '@/lib/numbers';
|
||||
import { getNobleChainId, NATIVE_TOKEN_ADDRESS } from '@/lib/squid';
|
||||
import { log } from '@/lib/telemetry';
|
||||
import { parseWalletError } from '@/lib/wallet';
|
||||
|
||||
@@ -68,6 +68,7 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
|
||||
summary,
|
||||
errors: routeErrors,
|
||||
errorMessage: routeErrorMessage,
|
||||
isCctp,
|
||||
} = useSelector(getTransferInputs, shallowEqual) || {};
|
||||
const chainId = chainIdStr ? parseInt(chainIdStr) : undefined;
|
||||
|
||||
@@ -83,7 +84,7 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
|
||||
);
|
||||
|
||||
const [fromAmount, setFromAmount] = useState('');
|
||||
const [slippage, setSlippage] = useState(0.01); // 1% slippage
|
||||
const [slippage, setSlippage] = useState(isCctp ? 0 : 0.01); // 1% slippage
|
||||
const debouncedAmount = useDebounce<string>(fromAmount, 500);
|
||||
|
||||
// Async Data
|
||||
@@ -98,6 +99,8 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
|
||||
const debouncedAmountBN = MustBigNumber(debouncedAmount);
|
||||
const balanceBN = MustBigNumber(balance);
|
||||
|
||||
useEffect(() => setSlippage(isCctp ? 0 : 0.01), [isCctp]);
|
||||
|
||||
useEffect(() => {
|
||||
const hasInvalidInput =
|
||||
debouncedAmountBN.isNaN() || debouncedAmountBN.lte(0) || debouncedAmountBN.gt(balanceBN);
|
||||
@@ -191,15 +194,23 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
|
||||
const sourceAmountBN = parseUnits(debouncedAmount, sourceToken.decimals);
|
||||
|
||||
if (sourceAmountBN > (allowance as bigint)) {
|
||||
const { request } = await publicClientWagmi.simulateContract({
|
||||
account: evmAddress,
|
||||
address: sourceToken.address as EvmAddress,
|
||||
abi: erc20,
|
||||
functionName: 'approve',
|
||||
args: [requestPayload.targetAddress as EvmAddress, sourceAmountBN],
|
||||
});
|
||||
const simulateApprove = async (abi: Abi) =>
|
||||
publicClientWagmi.simulateContract({
|
||||
account: evmAddress,
|
||||
address: sourceToken.address as EvmAddress,
|
||||
abi,
|
||||
functionName: 'approve',
|
||||
args: [requestPayload.targetAddress as EvmAddress, sourceAmountBN],
|
||||
});
|
||||
|
||||
const approveTx = await signerWagmi.writeContract(request);
|
||||
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);
|
||||
await publicClientWagmi.waitForTransactionReceipt({
|
||||
hash: approveTx,
|
||||
});
|
||||
@@ -241,11 +252,13 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
|
||||
if (txHash) {
|
||||
addTransferNotification({
|
||||
txHash: txHash,
|
||||
toChainId: ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId,
|
||||
toChainId: !isCctp
|
||||
? ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId
|
||||
: getNobleChainId(),
|
||||
fromChainId: chainIdStr || undefined,
|
||||
toAmount: summary?.usdcSize || undefined,
|
||||
triggeredAt: Date.now(),
|
||||
notificationStatus: NotificationStatus.Triggered,
|
||||
isCctp,
|
||||
});
|
||||
abacusStateManager.clearTransferInputValues();
|
||||
setFromAmount('');
|
||||
@@ -312,6 +325,21 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
|
||||
return stringGetter({ key: STRING_KEYS.DEPOSIT_MORE_THAN_BALANCE });
|
||||
}
|
||||
|
||||
if (isCctp) {
|
||||
if (MustBigNumber(debouncedAmountBN).gte(MAX_CCTP_TRANSFER_AMOUNT)) {
|
||||
return stringGetter({
|
||||
key: STRING_KEYS.MAX_CCTP_TRANSFER_LIMIT_EXCEEDED,
|
||||
params: {
|
||||
MAX_CCTP_TRANSFER_AMOUNT: MAX_CCTP_TRANSFER_AMOUNT,
|
||||
},
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
if (isMainnet && MustBigNumber(summary?.aggregatePriceImpact).gte(MAX_PRICE_IMPACT)) {
|
||||
return stringGetter({ key: STRING_KEYS.PRICE_IMPACT_TOO_HIGH });
|
||||
}
|
||||
|
||||
return undefined;
|
||||
}, [
|
||||
error,
|
||||
@@ -322,6 +350,7 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
|
||||
fromAmount,
|
||||
sourceToken,
|
||||
stringGetter,
|
||||
summary,
|
||||
]);
|
||||
|
||||
const isDisabled =
|
||||
|
||||
@@ -1,21 +1,16 @@
|
||||
import { type Dispatch, type SetStateAction, useState, type ReactNode } from 'react';
|
||||
import { type Dispatch, type ReactNode, type SetStateAction, useState, useMemo } from 'react';
|
||||
import styled, { type AnyStyledComponent } from 'styled-components';
|
||||
import { shallowEqual, useSelector } from 'react-redux';
|
||||
import type { RouteData } from '@0xsquid/sdk';
|
||||
import { formatUnits } from 'viem';
|
||||
|
||||
import {
|
||||
ButtonAction,
|
||||
ButtonShape,
|
||||
ButtonSize,
|
||||
ButtonState,
|
||||
ButtonType,
|
||||
} from '@/constants/buttons';
|
||||
import { ButtonAction, ButtonShape, ButtonSize, ButtonType } from '@/constants/buttons';
|
||||
|
||||
import { TransferInputTokenResource } from '@/constants/abacus';
|
||||
import { STRING_KEYS } from '@/constants/localization';
|
||||
import { NumberSign } from '@/constants/numbers';
|
||||
import { NumberSign, TOKEN_DECIMALS } from '@/constants/numbers';
|
||||
|
||||
import { useStringGetter } from '@/hooks';
|
||||
import { useStringGetter, useTokenConfigs } from '@/hooks';
|
||||
import { useMatchingEvmNetwork } from '@/hooks/useMatchingEvmNetwork';
|
||||
|
||||
import { layoutMixins } from '@/styles/layoutMixins';
|
||||
@@ -34,6 +29,7 @@ import { calculateCanAccountTrade } from '@/state/accountCalculators';
|
||||
import { getSubaccountBuyingPower, getSubaccountEquity } from '@/state/accountSelectors';
|
||||
import { getTransferInputs } from '@/state/inputsSelectors';
|
||||
|
||||
import { isTruthy } from '@/lib/isTruthy';
|
||||
import { MustBigNumber } from '@/lib/numbers';
|
||||
|
||||
import { SlippageEditor } from '../SlippageEditor';
|
||||
@@ -83,7 +79,8 @@ export const DepositButtonAndReceipt = ({
|
||||
const { current: buyingPower, postOrder: newBuyingPower } =
|
||||
useSelector(getSubaccountBuyingPower, shallowEqual) || {};
|
||||
|
||||
const { summary, requestPayload } = useSelector(getTransferInputs, shallowEqual) || {};
|
||||
const { isCctp, summary, requestPayload } = useSelector(getTransferInputs, shallowEqual) || {};
|
||||
const { usdcDecimals, usdcLabel } = useTokenConfigs();
|
||||
|
||||
const feeSubitems: DetailsItem[] = [];
|
||||
|
||||
@@ -98,7 +95,7 @@ export const DepositButtonAndReceipt = ({
|
||||
if (typeof summary?.bridgeFee === 'number') {
|
||||
feeSubitems.push({
|
||||
key: 'bridge-fees',
|
||||
label: <span>Bridge Fee</span>,
|
||||
label: <span>{stringGetter({ key: STRING_KEYS.BRIDGE_FEE })}</span>,
|
||||
value: <Output type={OutputType.Fiat} value={summary?.bridgeFee} />,
|
||||
});
|
||||
}
|
||||
@@ -109,12 +106,70 @@ export const DepositButtonAndReceipt = ({
|
||||
? stringGetter({ key: STRING_KEYS.HIDE_ALL_DETAILS })
|
||||
: stringGetter({ key: STRING_KEYS.SHOW_ALL_DETAILS });
|
||||
|
||||
const totalFees = (summary?.bridgeFee || 0) + (summary?.gasFee || 0);
|
||||
|
||||
const { toAmount, toAmountMin } = useMemo(() => {
|
||||
if (isCctp) {
|
||||
return {
|
||||
toAmount: summary?.toAmount,
|
||||
toAmountMin: summary?.toAmountMin,
|
||||
};
|
||||
} else {
|
||||
return {
|
||||
toAmount: summary?.toAmount && formatUnits(BigInt(summary.toAmount), usdcDecimals),
|
||||
toAmountMin: summary?.toAmountMin && formatUnits(BigInt(summary.toAmountMin), usdcDecimals),
|
||||
};
|
||||
}
|
||||
}, [isCctp, summary]);
|
||||
|
||||
const submitButtonReceipt = [
|
||||
{
|
||||
key: 'expected-deposit-amount',
|
||||
label: (
|
||||
<span>
|
||||
{stringGetter({ key: STRING_KEYS.EXPECTED_DEPOSIT_AMOUNT })} <Tag>{usdcLabel}</Tag>
|
||||
</span>
|
||||
),
|
||||
value: <Output type={OutputType.Fiat} fractionDigits={TOKEN_DECIMALS} value={toAmount} />,
|
||||
subitems: [
|
||||
{
|
||||
key: 'minimum-deposit-amount',
|
||||
label: (
|
||||
<span>
|
||||
{stringGetter({ key: STRING_KEYS.MINIMUM_DEPOSIT_AMOUNT })} <Tag>{usdcLabel}</Tag>
|
||||
</span>
|
||||
),
|
||||
value: (
|
||||
<Output type={OutputType.Fiat} fractionDigits={TOKEN_DECIMALS} value={toAmountMin} />
|
||||
),
|
||||
tooltip: 'minimum-deposit-amount',
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
key: 'exchange-rate',
|
||||
label: <span>{stringGetter({ key: STRING_KEYS.EXCHANGE_RATE })}</span>,
|
||||
value:
|
||||
typeof summary?.exchangeRate === 'number' ? (
|
||||
<Styled.ExchangeRate>
|
||||
<Output
|
||||
type={OutputType.Asset}
|
||||
value={1}
|
||||
fractionDigits={0}
|
||||
tag={sourceToken?.symbol}
|
||||
/>
|
||||
=
|
||||
<Output type={OutputType.Asset} value={summary?.exchangeRate} tag={usdcLabel} />
|
||||
</Styled.ExchangeRate>
|
||||
) : (
|
||||
<Output type={OutputType.Asset} />
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'equity',
|
||||
label: (
|
||||
<span>
|
||||
{stringGetter({ key: STRING_KEYS.EQUITY })} <Tag>USDC</Tag>
|
||||
{stringGetter({ key: STRING_KEYS.EQUITY })} <Tag>{usdcLabel}</Tag>
|
||||
</span>
|
||||
),
|
||||
value: (
|
||||
@@ -131,7 +186,7 @@ export const DepositButtonAndReceipt = ({
|
||||
key: 'buying-power',
|
||||
label: (
|
||||
<span>
|
||||
{stringGetter({ key: STRING_KEYS.BUYING_POWER })} <Tag>USDC</Tag>
|
||||
{stringGetter({ key: STRING_KEYS.BUYING_POWER })} <Tag>{usdcLabel}</Tag>
|
||||
</span>
|
||||
),
|
||||
value: (
|
||||
@@ -144,28 +199,15 @@ export const DepositButtonAndReceipt = ({
|
||||
/>
|
||||
),
|
||||
},
|
||||
{
|
||||
key: 'exchange-rate',
|
||||
label: <span>{stringGetter({ key: STRING_KEYS.EXCHANGE_RATE })}</span>,
|
||||
value: typeof summary?.exchangeRate === 'number' && (
|
||||
<Styled.ExchangeRate>
|
||||
<Output type={OutputType.Asset} value={1} fractionDigits={0} tag={sourceToken?.symbol} />
|
||||
=
|
||||
<Output type={OutputType.Asset} value={summary?.exchangeRate} tag="USDC" />
|
||||
</Styled.ExchangeRate>
|
||||
),
|
||||
},
|
||||
{
|
||||
!isCctp && {
|
||||
key: 'total-fees',
|
||||
label: <span>{stringGetter({ key: STRING_KEYS.TOTAL_FEES })}</span>,
|
||||
value: typeof summary?.bridgeFee === 'number' && typeof summary?.gasFee === 'number' && (
|
||||
<Output type={OutputType.Fiat} value={summary?.bridgeFee + summary?.gasFee} />
|
||||
),
|
||||
value: <Output type={OutputType.Fiat} value={totalFees} />,
|
||||
subitems: feeSubitems,
|
||||
},
|
||||
{
|
||||
key: 'slippage',
|
||||
label: <span>{stringGetter({ key: STRING_KEYS.SLIPPAGE })}</span>,
|
||||
label: <span>{stringGetter({ key: STRING_KEYS.MAX_SLIPPAGE })}</span>,
|
||||
value: (
|
||||
<SlippageEditor
|
||||
disabled
|
||||
@@ -178,17 +220,26 @@ export const DepositButtonAndReceipt = ({
|
||||
{
|
||||
key: 'estimatedRouteDuration',
|
||||
label: <span>{stringGetter({ key: STRING_KEYS.ESTIMATED_TIME })}</span>,
|
||||
value: typeof summary?.estimatedRouteDuration === 'number' && (
|
||||
value: (
|
||||
<Output
|
||||
type={OutputType.Text}
|
||||
value={stringGetter({
|
||||
key: STRING_KEYS.X_MINUTES_LOWERCASED,
|
||||
params: { X: Math.round(summary?.estimatedRouteDuration / 60) },
|
||||
})}
|
||||
value={
|
||||
typeof summary?.estimatedRouteDuration === 'number'
|
||||
? stringGetter({
|
||||
key: STRING_KEYS.X_MINUTES_LOWERCASED,
|
||||
params: {
|
||||
X:
|
||||
summary?.estimatedRouteDuration < 60
|
||||
? '< 1'
|
||||
: Math.round(summary?.estimatedRouteDuration / 60),
|
||||
},
|
||||
})
|
||||
: null
|
||||
}
|
||||
/>
|
||||
),
|
||||
},
|
||||
];
|
||||
].filter(isTruthy);
|
||||
|
||||
const isFormValid = !isDisabled && !isEditingSlippage;
|
||||
|
||||
|
||||
@@ -2,14 +2,16 @@ import { useState, type FormEvent, useEffect } from 'react';
|
||||
import { shallowEqual, useSelector } from 'react-redux';
|
||||
import styled, { type AnyStyledComponent } from 'styled-components';
|
||||
|
||||
import { ButtonAction, ButtonType } from '@/constants/buttons';
|
||||
import { ButtonAction, ButtonSize, 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';
|
||||
|
||||
@@ -26,6 +28,7 @@ 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);
|
||||
|
||||
@@ -72,9 +75,13 @@ export const TestnetDepositForm = ({ onDeposit, onError }: DepositFormProps) =>
|
||||
})}
|
||||
</p>
|
||||
<Styled.Footer>
|
||||
<Button action={ButtonAction.Primary} type={ButtonType.Submit} state={{ isLoading }}>
|
||||
{stringGetter({ key: STRING_KEYS.DEPOSIT_FUNDS })}
|
||||
</Button>
|
||||
{!canAccountTrade ? (
|
||||
<OnboardingTriggerButton size={ButtonSize.Base} />
|
||||
) : (
|
||||
<Button action={ButtonAction.Primary} type={ButtonType.Submit} state={{ isLoading }}>
|
||||
{stringGetter({ key: STRING_KEYS.DEPOSIT_FUNDS })}
|
||||
</Button>
|
||||
)}
|
||||
</Styled.Footer>
|
||||
</Styled.Form>
|
||||
);
|
||||
|
||||