Compare commits

..
Author SHA1 Message Date
jaredvu d6121de9fb updated lockfile 2024-01-03 13:55:47 -08:00
Bill 9a02bd3f1c remove testnet cctp chains (#216) 2024-01-03 12:55:58 -08:00
aleka adba11b462 add accordion component and rewards help panel (#214) 2024-01-03 14:20:30 -05:00
Jared Vu 29526b927f Update deposit and withdrawal receipts (#212)
* Update receipts

* Remove duplicate const

* Restore env

* format

* Try using raw

* Use 3 spaces T.T

* copy from main

* Update abacus, display proper toAmount and toAmountMin

* nits
2024-01-03 09:56:01 -08:00
Jared Vu 503e089efa temp hide fees for cctp route (#213) 2023-12-23 01:17:41 -08:00
Jared Vu c3495f462c Additional Withdraw/Deposit validation (#211)
* Add cctp amount check and price impact check

* 2.5% -> 2%
2023-12-22 17:31:32 -08:00
Billandjaredvu 6da6eeb2a4 Enable CCTP (#194)
* Enable CCTP

* Handle base64 encode

* Update localization package

---------

Co-authored-by: jaredvu <jaredvu@gmail.com>
2023-12-22 11:12:41 -08:00
mike-dydx 0cf3e81bd7 Create documentation.json (#205) 2023-12-21 15:08:08 -05:00
aleka f8cf1d364b update coinbase connect app name (#208) 2023-12-21 10:58:57 -08:00
Jared Vu 6f344c6b5d Update comparison function in Table (#207) 2023-12-21 10:53:56 -08:00
Jared Vu 133856afca Export secret phrase help article (#206)
* Update config with correct article link

* Remove auto-format of json
2023-12-21 10:49:52 -08:00
Jared Vu 33c543daaf Update bridgeFee in Withdraw/Deposit forms (#202)
* Update Withdraw form receipt

* Bump abacus 1.1.27

* pnpm-lock

* bump v4-localization
2023-12-19 23:36:13 -08:00
Jared Vu c77e727d2b TRCL-3406: firefox mobile position table row has stretched icon (#204)
* Fix PositionsTable assetIcon

* Mobile width of HelpDialog
2023-12-19 23:33:36 -08:00
Jared Vu b94538711d Lazy load Pages (#203)
* Lazy import pages

* Fix import order
2023-12-19 23:30:51 -08:00
Jared Vu b83479f45c Handle New Markets added by Gov (#201)
* Add celestia assets

* Handle symbol not yet added
2023-12-19 23:25:14 -08:00
Jared Vu 001aad3abc Navigate to the Markets page if the current marketId is not included in subscribed markets (#198)
* Navigate to markets if current url is invalid

* nits
2023-12-19 15:58:49 -08:00
Jared Vu f8db5e1ba0 Update abacus to 1.1.25: Good til time fix (#199) 2023-12-19 09:49:51 -08:00
Jared Vu f8bec0fb3d Update Withdraw form receipt (#200) 2023-12-19 09:49:37 -08:00
Bill 8bf23b7e9c bump abacus (#197) 2023-12-15 15:12:35 -08:00
Jared Vu 3f10e045f4 bump abacus & wagmi (#196) 2023-12-15 09:26:41 -08:00
Bill 71d1a0321b Do not block website if NobleClient cannot init, and other onboarding fixes (#193) 2023-12-13 08:11:19 -08:00
Bill 0f16396c8d Implement CCTP withdraw (#188)
* Implement CCTP withdraw

* bump packages

* address comments
2023-12-12 10:12:37 -08:00
Jared Vu 2709d79f59 Firefox issues (#190)
* remove row flicker on hover

* Fix border for AccountInfoConnectedState on mobile

* Remove sticky position to allow button click

* Fix: AccountInfo not displaying on mobile firefox

* Fix css var name

* Restore filter on Table row hover

* Remove PerspectiveArea. broken on firefox

* Symbol no longer exists on AbacusType

* HorizontalPanel: memoize tabConfig

* input: firefox cant click between chars
2023-12-12 08:37:50 -08:00
Bill ab0eec5d4f Update noble tesnet rpc (#192) 2023-12-12 11:35:21 -05:00
Jared Vu 4a044da38f Size inputs (#191)
* use formattedValue to update redux state

* Separate updateLeverage and onLeverageInput

* Remove console.log
2023-12-12 07:11:51 -08:00
Jared Vu fbbfbc6580 Bump v4-abacus and v4-localization (#189) 2023-12-08 15:41:07 -08:00
Rui 2714c2b084 Fix path to chainLogo (#187) 2023-12-07 13:03:44 -08:00
64 changed files with 2360 additions and 1418 deletions
+5 -4
View File
@@ -39,11 +39,12 @@
"@cosmjs/proto-signing": "^0.31.0", "@cosmjs/proto-signing": "^0.31.0",
"@cosmjs/stargate": "^0.31.0", "@cosmjs/stargate": "^0.31.0",
"@cosmjs/tendermint-rpc": "^0.31.0", "@cosmjs/tendermint-rpc": "^0.31.0",
"@dydxprotocol/v4-abacus": "^1.1.4", "@dydxprotocol/v4-abacus": "^1.1.32",
"@dydxprotocol/v4-client-js": "^1.0.6", "@dydxprotocol/v4-client-js": "^1.0.11",
"@dydxprotocol/v4-localization": "^1.0.17", "@dydxprotocol/v4-localization": "^1.1.5",
"@ethersproject/providers": "^5.7.2", "@ethersproject/providers": "^5.7.2",
"@js-joda/core": "^5.5.3", "@js-joda/core": "^5.5.3",
"@radix-ui/react-accordion": "^1.1.2",
"@radix-ui/react-checkbox": "^1.0.4", "@radix-ui/react-checkbox": "^1.0.4",
"@radix-ui/react-collapsible": "^1.0.3", "@radix-ui/react-collapsible": "^1.0.3",
"@radix-ui/react-dialog": "^1.0.4", "@radix-ui/react-dialog": "^1.0.4",
@@ -111,7 +112,7 @@
"styled-components": "^5.3.11", "styled-components": "^5.3.11",
"use-latest": "^1.2.1", "use-latest": "^1.2.1",
"viem": "^1.12.2", "viem": "^1.12.2",
"wagmi": "^1.4.5" "wagmi": "^1.4.12"
}, },
"devDependencies": { "devDependencies": {
"@babel/core": "^7.22.5", "@babel/core": "^7.22.5",
+1002 -388
View File
File diff suppressed because it is too large Load Diff
-49
View File
@@ -1,61 +1,12 @@
[ [
{
"chainId": "42161",
"tokenAddress": "0xff970a61a04b1ca14834a43f5de4533ebddb5cc8",
"name": "Arbitrum"
},
{
"chainId": "43114",
"tokenAddress": "0xB97EF9Ef8734C71904D8002F8b6Bc66Dd9c48a6E",
"name": "Avalanche"
},
{
"chainId": "8453",
"tokenAddress": "0x66627F389ae46D881773B7131139b2411980E09E",
"name": "Base"
},
{ {
"chainId": "1", "chainId": "1",
"tokenAddress": "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48", "tokenAddress": "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
"name": "Ethereum" "name": "Ethereum"
}, },
{
"chainId": "10",
"tokenAddress": "0x7F5c764cBc14f9669B88837ca1490cCa17c31607",
"name": "OP Mainnet"
},
{
"chainId": "421613",
"tokenAddress": "0xfd064a18f3bf249cf1f87fc203e90d8f650f2d63",
"name": "Arbitrum Goerli"
},
{
"chainId": "43113",
"tokenAddress": "0x5425890298aed601595a70AB815c96711a31Bc65",
"name": "Avalanche Fuji"
},
{
"chainId": "84531",
"tokenAddress": "0xf175520c52418dfe19c8098071a252da48cd1c19",
"name": "Base Goerli"
},
{ {
"chainId": "5", "chainId": "5",
"tokenAddress": "0x07865c6E87B9F70255377e024ace6630C1Eaa37F", "tokenAddress": "0x07865c6E87B9F70255377e024ace6630C1Eaa37F",
"name": "Ethereum Goerli" "name": "Ethereum Goerli"
},
{
"chainId": "grand-1",
"tokenAddress": "uusdc",
"name": "Noble Testnet"
},
{
"chainId": "420",
"tokenAddress": "0xe05606174bac4a6364b31bd0eca4bf4dd368f8c6",
"name": "OP Goerli"
},
{
"chainId": "103",
"name": "Solana Devnet"
} }
] ]
+16
View File
@@ -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"
}
]
}
+26 -26
View File
@@ -71,7 +71,7 @@
"https://validator.v4dev.dydx.exchange" "https://validator.v4dev.dydx.exchange"
], ],
"0xsquid": "https://testnet.api.0xsquid.com", "0xsquid": "https://testnet.api.0xsquid.com",
"nobleValidator": "https://rpc.testnet.noble.strange.love", "nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
"faucet": "https://faucet.v4dev.dydx.exchange" "faucet": "https://faucet.v4dev.dydx.exchange"
}, },
"links": { "links": {
@@ -89,7 +89,7 @@
"governanceLearnMore": "https://help.dydx.exchange", "governanceLearnMore": "https://help.dydx.exchange",
"stakingLearnMore": "https://help.dydx.exchange", "stakingLearnMore": "https://help.dydx.exchange",
"keplrDashboard": "https://testnet.keplr.app/", "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" "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
}, },
"wallets": { "wallets": {
@@ -145,7 +145,7 @@
"http://54.92.118.111" "http://54.92.118.111"
], ],
"0xsquid": "https://testnet.api.0xsquid.com", "0xsquid": "https://testnet.api.0xsquid.com",
"nobleValidator": "https://rpc.testnet.noble.strange.love" "nobleValidator": "https://noble-testnet-rpc.polkachu.com/"
}, },
"links": { "links": {
"tos": "https://dydx.exchange/v4-terms", "tos": "https://dydx.exchange/v4-terms",
@@ -162,7 +162,7 @@
"governanceLearnMore": "https://help.dydx.exchange", "governanceLearnMore": "https://help.dydx.exchange",
"stakingLearnMore": "https://help.dydx.exchange", "stakingLearnMore": "https://help.dydx.exchange",
"keplrDashboard": "https://testnet.keplr.app/", "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" "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
}, },
"wallets": { "wallets": {
@@ -218,7 +218,7 @@
"http://validator.v4dev4.dydx.exchange" "http://validator.v4dev4.dydx.exchange"
], ],
"0xsquid": "https://testnet.api.0xsquid.com", "0xsquid": "https://testnet.api.0xsquid.com",
"nobleValidator": "https://rpc.testnet.noble.strange.love" "nobleValidator": "https://noble-testnet-rpc.polkachu.com/"
}, },
"links": { "links": {
"tos": "https://dydx.exchange/v4-terms", "tos": "https://dydx.exchange/v4-terms",
@@ -235,7 +235,7 @@
"governanceLearnMore": "https://help.dydx.exchange", "governanceLearnMore": "https://help.dydx.exchange",
"stakingLearnMore": "https://help.dydx.exchange", "stakingLearnMore": "https://help.dydx.exchange",
"keplrDashboard": "https://testnet.keplr.app/", "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" "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
}, },
"wallets": { "wallets": {
@@ -291,7 +291,7 @@
"http://18.223.78.50" "http://18.223.78.50"
], ],
"0xsquid": "https://testnet.api.0xsquid.com", "0xsquid": "https://testnet.api.0xsquid.com",
"nobleValidator": "https://rpc.testnet.noble.strange.love" "nobleValidator": "https://noble-testnet-rpc.polkachu.com/"
}, },
"links": { "links": {
"tos": "https://dydx.exchange/v4-terms", "tos": "https://dydx.exchange/v4-terms",
@@ -308,7 +308,7 @@
"governanceLearnMore": "https://help.dydx.exchange", "governanceLearnMore": "https://help.dydx.exchange",
"stakingLearnMore": "https://help.dydx.exchange", "stakingLearnMore": "https://help.dydx.exchange",
"keplrDashboard": "https://testnet.keplr.app/", "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" "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
}, },
"wallets": { "wallets": {
@@ -365,7 +365,7 @@
"https://validator.v4staging.dydx.exchange" "https://validator.v4staging.dydx.exchange"
], ],
"0xsquid": "https://testnet.api.squidrouter.com", "0xsquid": "https://testnet.api.squidrouter.com",
"nobleValidator": "https://rpc.testnet.noble.strange.love" "nobleValidator": "https://noble-testnet-rpc.polkachu.com/"
}, },
"links": { "links": {
"tos": "https://dydx.exchange/v4-terms", "tos": "https://dydx.exchange/v4-terms",
@@ -383,7 +383,7 @@
"governanceLearnMore": "https://help.dydx.exchange", "governanceLearnMore": "https://help.dydx.exchange",
"stakingLearnMore": "https://help.dydx.exchange", "stakingLearnMore": "https://help.dydx.exchange",
"keplrDashboard": "https://testnet.keplr.app/", "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" "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
}, },
"wallets": { "wallets": {
@@ -440,7 +440,7 @@
"https://validator.v4staging.dydx.exchange" "https://validator.v4staging.dydx.exchange"
], ],
"0xsquid": "https://testnet.api.squidrouter.com", "0xsquid": "https://testnet.api.squidrouter.com",
"nobleValidator": "https://rpc.testnet.noble.strange.love" "nobleValidator": "https://noble-testnet-rpc.polkachu.com/"
}, },
"links": { "links": {
"tos": "https://dydx.exchange/v4-terms", "tos": "https://dydx.exchange/v4-terms",
@@ -513,7 +513,7 @@
"https://validator-uswest1.v4staging.dydx.exchange" "https://validator-uswest1.v4staging.dydx.exchange"
], ],
"0xsquid": "https://testnet.api.squidrouter.com", "0xsquid": "https://testnet.api.squidrouter.com",
"nobleValidator": "https://rpc.testnet.noble.strange.love" "nobleValidator": "https://noble-testnet-rpc.polkachu.com/"
}, },
"links": { "links": {
"tos": "https://dydx.exchange/v4-terms", "tos": "https://dydx.exchange/v4-terms",
@@ -531,7 +531,7 @@
"governanceLearnMore": "https://help.dydx.exchange", "governanceLearnMore": "https://help.dydx.exchange",
"stakingLearnMore": "https://help.dydx.exchange", "stakingLearnMore": "https://help.dydx.exchange",
"keplrDashboard": "https://testnet.keplr.app/", "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" "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
}, },
"wallets": { "wallets": {
@@ -591,7 +591,7 @@
"https://dydx-rpc.liquify.com/api=8878132/dydx" "https://dydx-rpc.liquify.com/api=8878132/dydx"
], ],
"0xsquid": "https://testnet.api.squidrouter.com", "0xsquid": "https://testnet.api.squidrouter.com",
"nobleValidator": "https://rpc.testnet.noble.strange.love", "nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
"faucet": "https://faucet.v4testnet.dydx.exchange" "faucet": "https://faucet.v4testnet.dydx.exchange"
}, },
"links": { "links": {
@@ -610,7 +610,7 @@
"governanceLearnMore": "https://help.dydx.exchange", "governanceLearnMore": "https://help.dydx.exchange",
"stakingLearnMore": "https://help.dydx.exchange", "stakingLearnMore": "https://help.dydx.exchange",
"keplrDashboard": "https://testnet.keplr.app/", "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" "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
}, },
"wallets": { "wallets": {
@@ -666,7 +666,7 @@
"https://validator.v4testnet.dydx.exchange" "https://validator.v4testnet.dydx.exchange"
], ],
"0xsquid": "https://testnet.api.squidrouter.com", "0xsquid": "https://testnet.api.squidrouter.com",
"nobleValidator": "https://rpc.testnet.noble.strange.love", "nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
"faucet": "https://faucet.v4testnet.dydx.exchange" "faucet": "https://faucet.v4testnet.dydx.exchange"
}, },
"links": { "links": {
@@ -686,7 +686,7 @@
"governanceLearnMore": "https://help.dydx.exchange", "governanceLearnMore": "https://help.dydx.exchange",
"stakingLearnMore": "https://help.dydx.exchange", "stakingLearnMore": "https://help.dydx.exchange",
"keplrDashboard": "https://testnet.keplr.app/", "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" "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
}, },
"wallets": { "wallets": {
@@ -742,7 +742,7 @@
"https://dydx-testnet.nodefleet.org" "https://dydx-testnet.nodefleet.org"
], ],
"0xsquid": "https://testnet.api.squidrouter.com", "0xsquid": "https://testnet.api.squidrouter.com",
"nobleValidator": "https://rpc.testnet.noble.strange.love", "nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
"faucet": "https://faucet.v4testnet.dydx.exchange" "faucet": "https://faucet.v4testnet.dydx.exchange"
}, },
"links": { "links": {
@@ -762,7 +762,7 @@
"governanceLearnMore": "https://help.dydx.exchange", "governanceLearnMore": "https://help.dydx.exchange",
"stakingLearnMore": "https://help.dydx.exchange", "stakingLearnMore": "https://help.dydx.exchange",
"keplrDashboard": "https://testnet.keplr.app/", "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" "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
}, },
"wallets": { "wallets": {
@@ -818,7 +818,7 @@
"https://test-dydx.kingnodes.com" "https://test-dydx.kingnodes.com"
], ],
"0xsquid": "https://testnet.api.squidrouter.com", "0xsquid": "https://testnet.api.squidrouter.com",
"nobleValidator": "https://rpc.testnet.noble.strange.love", "nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
"faucet": "https://faucet.v4testnet.dydx.exchange" "faucet": "https://faucet.v4testnet.dydx.exchange"
}, },
"links": { "links": {
@@ -838,7 +838,7 @@
"governanceLearnMore": "https://help.dydx.exchange", "governanceLearnMore": "https://help.dydx.exchange",
"stakingLearnMore": "https://help.dydx.exchange", "stakingLearnMore": "https://help.dydx.exchange",
"keplrDashboard": "https://testnet.keplr.app/", "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" "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
}, },
"wallets": { "wallets": {
@@ -894,7 +894,7 @@
"https://dydx-rpc.liquify.com/api=8878132/dydx" "https://dydx-rpc.liquify.com/api=8878132/dydx"
], ],
"0xsquid": "https://testnet.api.squidrouter.com", "0xsquid": "https://testnet.api.squidrouter.com",
"nobleValidator": "https://rpc.testnet.noble.strange.love", "nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
"faucet": "https://faucet.v4testnet.dydx.exchange" "faucet": "https://faucet.v4testnet.dydx.exchange"
}, },
"links": { "links": {
@@ -914,7 +914,7 @@
"governanceLearnMore": "https://help.dydx.exchange", "governanceLearnMore": "https://help.dydx.exchange",
"stakingLearnMore": "https://help.dydx.exchange", "stakingLearnMore": "https://help.dydx.exchange",
"keplrDashboard": "https://testnet.keplr.app/", "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" "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
}, },
"wallets": { "wallets": {
@@ -970,7 +970,7 @@
"https://dydx-testnet-rpc.polkachu.com/" "https://dydx-testnet-rpc.polkachu.com/"
], ],
"0xsquid": "https://testnet.api.squidrouter.com", "0xsquid": "https://testnet.api.squidrouter.com",
"nobleValidator": "https://rpc.testnet.noble.strange.love", "nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
"faucet": "https://faucet.v4testnet.dydx.exchange" "faucet": "https://faucet.v4testnet.dydx.exchange"
}, },
"links": { "links": {
@@ -1037,7 +1037,7 @@
"https://dydx-testnet-full-rpc.public.blastapi.io/" "https://dydx-testnet-full-rpc.public.blastapi.io/"
], ],
"0xsquid": "https://testnet.api.squidrouter.com", "0xsquid": "https://testnet.api.squidrouter.com",
"nobleValidator": "https://rpc.testnet.noble.strange.love", "nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
"faucet": "https://faucet.v4testnet.dydx.exchange" "faucet": "https://faucet.v4testnet.dydx.exchange"
}, },
"links": { "links": {
@@ -1126,7 +1126,7 @@
"blogs": "[HTTP link to blogs, can be null]", "blogs": "[HTTP link to blogs, can be null]",
"foundation": "[HTTP link to foundation, can be null]", "foundation": "[HTTP link to foundation, can be null]",
"initialMarginFractionLearnMore": "[HTTP link to initial margin fraction learn more, 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]", "documentation": "[HTTP link to documentation, can be null]",
"community": "[HTTP link to community, can be null]", "community": "[HTTP link to community, can be null]",
"help": "[HTTP link to help page, can be null]", "help": "[HTTP link to help page, can be null]",
+359 -453
View File
@@ -1,454 +1,360 @@
{ {
"1INCH-USD":{ "1INCH-USD": {
"name":"1inch", "name": "1inch",
"tags":[ "tags": ["Defi"],
"Defi" "websiteLink": "https://1inch.io/",
], "whitepaperLink": "https://github.com/1inch",
"websiteLink":"https://1inch.io/", "coinMarketCapsLink": "https://coinmarketcap.com/currencies/1inch/"
"whitepaperLink":"https://github.com/1inch", },
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/1inch/" "AAVE-USD": {
}, "name": "Aave",
"AAVE-USD":{ "tags": ["Defi"],
"name":"Aave", "websiteLink": "https://aave.com/",
"tags":[ "whitepaperLink": "https://github.com/aave/protocol-v2/blob/master/aave-v2-whitepaper.pdf",
"Defi" "coinMarketCapsLink": "https://coinmarketcap.com/currencies/aave/"
], },
"websiteLink":"https://aave.com/", "ADA-USD": {
"whitepaperLink":"https://github.com/aave/protocol-v2/blob/master/aave-v2-whitepaper.pdf", "name": "Cardano",
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/aave/" "tags": ["Layer 1"],
}, "websiteLink": "https://cardano.org/",
"ADA-USD":{ "whitepaperLink": "https://why.cardano.org/en/introduction/motivation/",
"name":"Cardano", "coinMarketCapsLink": "https://coinmarketcap.com/currencies/cardano/"
"tags":[ },
"Layer 1" "ALGO-USD": {
], "name": "Algorand",
"websiteLink":"https://cardano.org/", "tags": ["Layer 1"],
"whitepaperLink":"https://why.cardano.org/en/introduction/motivation/", "websiteLink": "https://algorand.com/",
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/cardano/" "whitepaperLink": "https://algorand.com/technology/white-papers",
}, "coinMarketCapsLink": "https://coinmarketcap.com/currencies/algorand/"
"ALGO-USD":{ },
"name":"Algorand", "APE-USD": {
"tags":[ "name": "ApeCoin",
"Layer 1" "tags": [],
], "websiteLink": "https://apecoin.com/",
"websiteLink":"https://algorand.com/", "whitepaperLink": "https://apecoin.com/about",
"whitepaperLink":"https://algorand.com/technology/white-papers", "coinMarketCapsLink": "https://coinmarketcap.com/currencies/apecoin-ape/"
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/algorand/" },
}, "APT-USD": {
"APE-USD":{ "name": "Aptos",
"name":"ApeCoin", "tags": ["Layer 1"],
"tags":[ "websiteLink": "https://aptoslabs.com/",
"whitepaperLink": "https://aptos.dev/aptos-white-paper/",
], "coinMarketCapsLink": "https://coinmarketcap.com/currencies/aptos/"
"websiteLink":"https://apecoin.com/", },
"whitepaperLink":"https://apecoin.com/about", "ARB-USD": {
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/apecoin-ape/" "name": "Arbitrum",
}, "tags": [],
"APT-USD":{ "websiteLink": "https://arbitrum.io/",
"name":"Aptos", "whitepaperLink": "https://github.com/OffchainLabs/nitro",
"tags":[ "coinMarketCapsLink": "https://coinmarketcap.com/currencies/arbitrum/"
"Layer 1" },
], "ATOM-USD": {
"websiteLink":"https://aptoslabs.com/", "name": "Cosmos",
"whitepaperLink":"https://aptos.dev/aptos-white-paper/", "tags": ["Layer 1"],
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/aptos/" "websiteLink": "https://cosmos.network/",
}, "whitepaperLink": "https://v1.cosmos.network/resources/whitepaper",
"ARB-USD":{ "coinMarketCapsLink": "https://coinmarketcap.com/currencies/cosmos/"
"name":"Arbitrum", },
"tags":[ "AVAX-USD": {
"name": "Avalanche",
], "tags": ["Layer 1"],
"websiteLink":"https://arbitrum.io/", "websiteLink": "https://www.avalabs.org/",
"whitepaperLink":"https://github.com/OffchainLabs/nitro", "whitepaperLink": "https://assets.website-files.com/5d80307810123f5ffbb34d6e/6008d7bbf8b10d1eb01e7e16_Avalanche%20Platform%20Whitepaper.pdf",
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/arbitrum/" "coinMarketCapsLink": "https://coinmarketcap.com/currencies/avalanche/"
}, },
"ATOM-USD":{ "BCH-USD": {
"name":"Cosmos", "name": "Bitcoin Cash",
"tags":[ "tags": ["Layer 1"],
"Layer 1" "websiteLink": "https://bitcoincash.org/",
], "whitepaperLink": "https://bitcoincash.org/",
"websiteLink":"https://cosmos.network/", "coinMarketCapsLink": "https://coinmarketcap.com/currencies/bitcoin-cash/"
"whitepaperLink":"https://v1.cosmos.network/resources/whitepaper", },
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/cosmos/" "BLUR-USD": {
}, "name": "Blur",
"AVAX-USD":{ "tags": [],
"name":"Avalanche", "websiteLink": "https://blur.io/",
"tags":[ "whitepaperLink": "https://docs.blur.foundation/",
"Layer 1" "coinMarketCapsLink": "https://coinmarketcap.com/currencies/blur-token/"
], },
"websiteLink":"https://www.avalabs.org/", "CELO-USD": {
"whitepaperLink":"https://assets.website-files.com/5d80307810123f5ffbb34d6e/6008d7bbf8b10d1eb01e7e16_Avalanche%20Platform%20Whitepaper.pdf", "name": "Celo",
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/avalanche/" "tags": [],
}, "websiteLink": "https://celo.org",
"BCH-USD":{ "whitepaperLink": "https://docs.celo.org",
"name":"Bitcoin Cash", "coinMarketCapsLink": "https://coinmarketcap.com/currencies/celo/"
"tags":[ },
"Layer 1" "BTC-USD": {
], "name": "Bitcoin",
"websiteLink":"https://bitcoincash.org/", "tags": ["Layer 1"],
"whitepaperLink":"https://bitcoincash.org/", "websiteLink": "https://bitcoin.org/",
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/bitcoin-cash/" "whitepaperLink": "https://bitcoin.org/bitcoin.pdf",
}, "coinMarketCapsLink": "https://coinmarketcap.com/currencies/bitcoin/"
"BLUR-USD":{ },
"name":"Blur", "COMP-USD": {
"tags":[ "name": "Compound",
"tags": ["Defi"],
], "websiteLink": "https://compound.finance/",
"websiteLink":"https://blur.io/", "whitepaperLink": "https://compound.finance/documents/Compound.Whitepaper.pdf",
"whitepaperLink":"https://docs.blur.foundation/", "coinMarketCapsLink": "https://coinmarketcap.com/currencies/compound/"
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/blur-token/" },
}, "CRV-USD": {
"CELO-USD":{ "name": "Curve",
"name":"Celo", "tags": ["Governance"],
"tags":[ "websiteLink": "https://curve.fi/",
"whitepaperLink": "https://curve.fi/whitepaper",
], "coinMarketCapsLink": "https://coinmarketcap.com/currencies/curve-dao-token/"
"websiteLink":"https://celo.org", },
"whitepaperLink":"https://docs.celo.org", "DOGE-USD": {
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/celo/" "name": "Dogecoin",
}, "tags": ["Layer 1"],
"BTC-USD":{ "websiteLink": "https://dogecoin.com/",
"name":"Bitcoin", "whitepaperLink": "https://github.com/dogecoin/dogecoin",
"tags":[ "coinMarketCapsLink": "https://coinmarketcap.com/currencies/dogecoin/"
"Layer 1" },
], "DOT-USD": {
"websiteLink":"https://bitcoin.org/", "name": "Polkadot",
"whitepaperLink":"https://bitcoin.org/bitcoin.pdf", "tags": ["Layer 1"],
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/bitcoin/" "websiteLink": "https://polkadot.network/",
}, "whitepaperLink": "https://polkadot.network/PolkaDotPaper.pdf",
"COMP-USD":{ "coinMarketCapsLink": "https://coinmarketcap.com/currencies/polkadot-new/"
"name":"Compound", },
"tags":[ "ENJ-USD": {
"Defi" "name": "Enjin",
], "tags": [],
"websiteLink":"https://compound.finance/", "websiteLink": "https://enjin.io/",
"whitepaperLink":"https://compound.finance/documents/Compound.Whitepaper.pdf", "whitepaperLink": "https://cdn.enjin.io/downloads/whitepapers/enjin-coin/en.pdf/",
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/compound/" "coinMarketCapsLink": "https://coinmarketcap.com/currencies/enjin-coin/"
}, },
"CRV-USD":{ "EOS-USD": {
"name":"Curve", "name": "EOS",
"tags":[ "tags": ["Layer 1"],
"Governance" "websiteLink": "https://eos.io/",
], "whitepaperLink": "https://github.com/EOSIO/Documentation/blob/master/TechnicalWhitePaper.md",
"websiteLink":"https://curve.fi/", "coinMarketCapsLink": "https://coinmarketcap.com/currencies/eos/"
"whitepaperLink":"https://curve.fi/whitepaper", },
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/curve-dao-token/" "ETC-USD": {
}, "name": "Ethereum Classic",
"DOGE-USD":{ "tags": ["Layer 1"],
"name":"Dogecoin", "websiteLink": "https://ethereumclassic.org/",
"tags":[ "whitepaperLink": "https://ethereumclassic.org/why-classic",
"Layer 1" "coinMarketCapsLink": "https://coinmarketcap.com/currencies/ethereum-classic/"
], },
"websiteLink":"https://dogecoin.com/", "ETH-USD": {
"whitepaperLink":"https://github.com/dogecoin/dogecoin", "name": "Ethereum",
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/dogecoin/" "tags": ["Layer 1"],
}, "websiteLink": "https://ethereum.org/",
"DOT-USD":{ "whitepaperLink": "https://ethereum.org/whitepaper/",
"name":"Polkadot", "coinMarketCapsLink": "https://coinmarketcap.com/currencies/ethereum/",
"tags":[ "displayStepSize": "0.001",
"Layer 1" "displayTickSize": "0.1"
], },
"websiteLink":"https://polkadot.network/", "FIL-USD": {
"whitepaperLink":"https://polkadot.network/PolkaDotPaper.pdf", "name": "Filecoin",
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/polkadot-new/" "tags": ["Layer 1"],
}, "websiteLink": "https://filecoin.io/",
"ENJ-USD":{ "whitepaperLink": "https://filecoin.io/filecoin.pdf",
"name":"Enjin", "coinMarketCapsLink": "https://coinmarketcap.com/currencies/filecoin/"
"tags":[ },
"HNT-USD": {
], "name": "Helium",
"websiteLink":"https://enjin.io/", "tags": ["Layer 1"],
"whitepaperLink":"https://cdn.enjin.io/downloads/whitepapers/enjin-coin/en.pdf/", "websiteLink": "https://www.helium.com",
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/enjin-coin/" "whitepaperLink": "http://whitepaper.helium.com",
}, "coinMarketCapsLink": "https://coinmarketcap.com/currencies/helium/"
"EOS-USD":{ },
"name":"EOS", "ICP-USD": {
"tags":[ "name": "Internet Computer",
"Layer 1" "tags": ["Layer 1"],
], "websiteLink": "https://dfinity.org",
"websiteLink":"https://eos.io/", "whitepaperLink": "https://dfinity.org/whitepaper.pdf",
"whitepaperLink":"https://github.com/EOSIO/Documentation/blob/master/TechnicalWhitePaper.md", "coinMarketCapsLink": "https://coinmarketcap.com/currencies/internet-computer/"
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/eos/" },
}, "LDO-USD": {
"ETC-USD":{ "name": "Lido DAO",
"name":"Ethereum Classic", "tags": ["Defi"],
"tags":[ "websiteLink": "https://lido.fi/",
"Layer 1" "whitepaperLink": "https://lido.fi/static/Lido:Ethereum-Liquid-Staking.pdf",
], "coinMarketCapsLink": "https://coinmarketcap.com/currencies/lido-dao/"
"websiteLink":"https://ethereumclassic.org/", },
"whitepaperLink":"https://ethereumclassic.org/why-classic", "LINK-USD": {
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/ethereum-classic/" "name": "Chainlink",
}, "tags": ["Defi"],
"ETH-USD":{ "websiteLink": "https://chain.link/",
"name":"Ethereum", "whitepaperLink": "https://link.smartcontract.com/whitepaper",
"tags":[ "coinMarketCapsLink": "https://coinmarketcap.com/currencies/chainlink/"
"Layer 1" },
], "LTC-USD": {
"websiteLink":"https://ethereum.org/", "name": "Litecoin",
"whitepaperLink":"https://ethereum.org/whitepaper/", "tags": ["Layer 1"],
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/ethereum/", "websiteLink": "https://litecoin.org/",
"displayStepSize":"0.001", "whitepaperLink": "https://litecoin.info/index.php/Main_Page",
"displayTickSize":"0.1" "coinMarketCapsLink": "https://coinmarketcap.com/currencies/litecoin/"
}, },
"FIL-USD":{ "MATIC-USD": {
"name":"Filecoin", "name": "Polygon",
"tags":[ "tags": ["Layer 2"],
"Layer 1" "websiteLink": "https://polygon.technology/",
], "whitepaperLink": "https://polygon.technology/lightpaper-polygon.pdf",
"websiteLink":"https://filecoin.io/", "coinMarketCapsLink": "https://coinmarketcap.com/currencies/polygon/"
"whitepaperLink":"https://filecoin.io/filecoin.pdf", },
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/filecoin/" "MKR-USD": {
}, "name": "Maker",
"HNT-USD":{ "tags": ["Governance"],
"name":"Helium", "websiteLink": "https://makerdao.com",
"tags":[ "whitepaperLink": "https://makerdao.com/whitepaper",
"Layer 1" "coinMarketCapsLink": "https://coinmarketcap.com/currencies/maker/"
], },
"websiteLink":"https://www.helium.com", "NEAR-USD": {
"whitepaperLink":"http://whitepaper.helium.com", "name": "NEAR Protocol",
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/helium/" "tags": ["Layer 1"],
}, "websiteLink": "https://near.org",
"ICP-USD":{ "whitepaperLink": "https://near.org/papers/the-official-near-white-paper/",
"name":"Internet Computer", "coinMarketCapsLink": "https://coinmarketcap.com/currencies/near-protocol/"
"tags":[ },
"Layer 1" "OP-USD": {
], "name": "Optimism",
"websiteLink":"https://dfinity.org", "tags": [],
"whitepaperLink":"https://dfinity.org/whitepaper.pdf", "websiteLink": "https://www.optimism.io/",
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/internet-computer/" "whitepaperLink": "https://github.com/ethereum-optimism",
}, "coinMarketCapsLink": "https://coinmarketcap.com/currencies/optimism-ethereum/"
"LDO-USD":{ },
"name":"Lido DAO", "PEPE-USD": {
"tags":[ "name": "Pepe",
"Defi" "tags": [],
], "websiteLink": "https://www.pepe.vip/",
"websiteLink":"https://lido.fi/", "coinMarketCapsLink": "https://coinmarketcap.com/currencies/pepe/"
"whitepaperLink":"https://lido.fi/static/Lido:Ethereum-Liquid-Staking.pdf", },
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/lido-dao/" "RUNE-USD": {
}, "name": "THORChain",
"LINK-USD":{ "tags": ["Layer 1"],
"name":"Chainlink", "websiteLink": "https://thorchain.org",
"tags":[ "whitepaperLink": "https://whitepaper.io/document/709/thorchain-whitepaper",
"Defi" "coinMarketCapsLink": "https://coinmarketcap.com/currencies/thorchain/"
], },
"websiteLink":"https://chain.link/", "SEI-USD": {
"whitepaperLink":"https://link.smartcontract.com/whitepaper", "name": "Sei",
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/chainlink/" "tags": ["Layer 1", "Defi"],
}, "websiteLink": "https://www.sei.io/",
"LTC-USD":{ "whitepaperLink": "https://github.com/sei-protocol/sei-chain/blob/3c9576fee3494ce039df684624f918dd8066ba3f/whitepaper/Sei_Whitepaper.pdf",
"name":"Litecoin", "coinMarketCapsLink": "https://coinmarketcap.com/currencies/sei/"
"tags":[ },
"Layer 1" "SHIB-USD": {
], "name": "Shiba Inu",
"websiteLink":"https://litecoin.org/", "tags": [],
"whitepaperLink":"https://litecoin.info/index.php/Main_Page", "websiteLink": "https://shibatoken.com/",
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/litecoin/" "whitepaperLink": "https://docs.shibatoken.com/",
}, "coinMarketCapsLink": "https://coinmarketcap.com/currencies/shiba-inu/"
"MATIC-USD":{ },
"name":"Polygon", "SNX-USD": {
"tags":[ "name": "Synthetix",
"Layer 2" "tags": ["Defi"],
], "websiteLink": "https://synthetix.io/",
"websiteLink":"https://polygon.technology/", "whitepaperLink": "https://docs.synthetix.io/litepaper",
"whitepaperLink":"https://polygon.technology/lightpaper-polygon.pdf", "coinMarketCapsLink": "https://coinmarketcap.com/currencies/synthetix-network-token/"
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/polygon/" },
}, "SOL-USD": {
"MKR-USD":{ "name": "Solana",
"name":"Maker", "tags": ["Layer 1"],
"tags":[ "websiteLink": "https://solana.com/",
"Governance" "whitepaperLink": "https://solana.com/solana-whitepaper.pdf",
], "coinMarketCapsLink": "https://coinmarketcap.com/currencies/solana/"
"websiteLink":"https://makerdao.com", },
"whitepaperLink":"https://makerdao.com/whitepaper", "SUI-USD": {
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/maker/" "name": "Sui",
}, "tags": ["Layer 1"],
"NEAR-USD":{ "websiteLink": "https://sui.io/",
"name":"NEAR Protocol", "whitepaperLink": "https://github.com/MystenLabs",
"tags":[ "coinMarketCapsLink": "https://coinmarketcap.com/currencies/sui/"
"Layer 1" },
], "SUSHI-USD": {
"websiteLink":"https://near.org", "name": "Sushi",
"whitepaperLink":"https://near.org/papers/the-official-near-white-paper/", "tags": ["Defi"],
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/near-protocol/" "websiteLink": "https://sushi.com/",
}, "whitepaperLink": "https://docs.sushi.com/",
"OP-USD":{ "coinMarketCapsLink": "https://coinmarketcap.com/currencies/sushiswap/"
"name":"Optimism", },
"tags":[ "TIA-USD": {
"name": "Celestia",
], "tags": ["Layer 1"],
"websiteLink":"https://www.optimism.io/", "websiteLink": "https://celestia.org/",
"whitepaperLink":"https://github.com/ethereum-optimism", "whitepaperLink": "https://arxiv.org/pdf/1905.09274.pdf",
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/optimism-ethereum/" "coinMarketCapsLink": "https://coinmarketcap.com/currencies/celestia/"
}, },
"PEPE-USD":{ "TRX-USD": {
"name":"Pepe", "name": "TRON",
"tags":[ "tags": ["Defi"],
"websiteLink": "https://tron.network/",
], "whitepaperLink": "https://tron.network/static/doc/white_paper_v_2_0.pdf",
"websiteLink":"https://www.pepe.vip/", "coinMarketCapsLink": "https://coinmarketcap.com/currencies/tron/"
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/pepe/" },
}, "UMA-USD": {
"RUNE-USD":{ "name": "UMA",
"name":"THORChain", "tags": ["Defi"],
"tags":[ "websiteLink": "https://umaproject.org/",
"Layer 1" "whitepaperLink": "https://github.com/UMAprotocol/whitepaper",
], "coinMarketCapsLink": "https://coinmarketcap.com/currencies/uma/"
"websiteLink":"https://thorchain.org", },
"whitepaperLink":"https://whitepaper.io/document/709/thorchain-whitepaper", "UNI-USD": {
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/thorchain/" "name": "Uniswap",
}, "tags": ["Defi"],
"SEI-USD":{ "websiteLink": "https://uniswap.org/",
"name":"Sei", "whitepaperLink": "https://uniswap.org/whitepaper-v3.pdf",
"tags":[ "coinMarketCapsLink": "https://coinmarketcap.com/currencies/uniswap/"
"Layer 1", },
"Defi" "WLD-USD": {
], "name": "Worldcoin",
"websiteLink":"https://www.sei.io/", "tags": [],
"whitepaperLink":"https://github.com/sei-protocol/sei-chain/blob/3c9576fee3494ce039df684624f918dd8066ba3f/whitepaper/Sei_Whitepaper.pdf", "websiteLink": "https://worldcoin.org/",
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/sei/" "whitepaperLink": "https://whitepaper.worldcoin.org/",
}, "coinMarketCapsLink": "https://coinmarketcap.com/currencies/worldcoin-org/"
"SHIB-USD":{ },
"name":"Shiba Inu", "XLM-USD": {
"tags":[ "name": "Stellar",
"tags": ["Layer 1"],
], "websiteLink": "https://www.stellar.org/",
"websiteLink":"https://shibatoken.com/", "whitepaperLink": "https://www.stellar.org/papers/stellar-consensus-protocol",
"whitepaperLink":"https://docs.shibatoken.com/", "coinMarketCapsLink": "https://coinmarketcap.com/currencies/stellar/"
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/shiba-inu/" },
}, "XMR-USD": {
"SNX-USD":{ "name": "Monero",
"name":"Synthetix", "tags": ["Layer 1"],
"tags":[ "websiteLink": "https://www.getmonero.org/",
"Defi" "whitepaperLink": "https://www.getmonero.org/resources/research-lab/",
], "coinMarketCapsLink": "https://coinmarketcap.com/currencies/monero/"
"websiteLink":"https://synthetix.io/", },
"whitepaperLink":"https://docs.synthetix.io/litepaper", "XRP-USD": {
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/synthetix-network-token/" "name": "Ripple",
}, "tags": ["Layer 1"],
"SOL-USD":{ "websiteLink": "https://ripple.com/currency/",
"name":"Solana", "whitepaperLink": "https://github.com/ripple",
"tags":[ "coinMarketCapsLink": "https://coinmarketcap.com/currencies/xrp/"
"Layer 1" },
], "XTZ-USD": {
"websiteLink":"https://solana.com/", "name": "Tezos",
"whitepaperLink":"https://solana.com/solana-whitepaper.pdf", "tags": ["Layer 1"],
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/solana/" "websiteLink": "https://tezos.com",
}, "whitepaperLink": "https://tezos.com/whitepaper.pdf",
"SUI-USD":{ "coinMarketCapsLink": "https://coinmarketcap.com/currencies/tezos/"
"name":"Sui", },
"tags":[ "YFI-USD": {
"Layer 1" "name": "Yearn",
], "tags": ["Defi"],
"websiteLink":"https://sui.io/", "websiteLink": "https://yearn.finance/",
"whitepaperLink":"https://github.com/MystenLabs", "whitepaperLink": "https://docs.yearn.finance/",
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/sui/" "coinMarketCapsLink": "https://coinmarketcap.com/currencies/yearn-finance/"
}, },
"SUSHI-USD":{ "ZEC-USD": {
"name":"Sushi", "name": "Zcash",
"tags":[ "tags": ["Layer 1"],
"Defi" "websiteLink": "https://z.cash/",
], "whitepaperLink": "https://z.cash/technology/",
"websiteLink":"https://sushi.com/", "coinMarketCapsLink": "https://coinmarketcap.com/currencies/zcash/"
"whitepaperLink":"https://docs.sushi.com/", },
"coinMarketCapsLink":"https://coinmarketcap.com/currencies/sushiswap/" "ZRX-USD": {
}, "name": "0x",
"TRX-USD":{ "tags": ["Defi"],
"name":"TRON", "websiteLink": "https://0x.org/",
"tags":[ "whitepaperLink": "https://0x.org/pdfs/0x_white_paper.pdf",
"Defi" "coinMarketCapsLink": "https://coinmarketcap.com/currencies/0x/"
], }
"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/"
}
}
Binary file not shown.

After

Width:  |  Height:  |  Size: 10 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 1.7 KiB

+13 -12
View File
@@ -1,4 +1,4 @@
import { Suspense } from 'react'; import { lazy, Suspense } from 'react';
import { Navigate, Route, Routes } from 'react-router-dom'; import { Navigate, Route, Routes } from 'react-router-dom';
import styled, { AnyStyledComponent, css } from 'styled-components'; import styled, { AnyStyledComponent, css } from 'styled-components';
import { WagmiConfig } from 'wagmi'; import { WagmiConfig } from 'wagmi';
@@ -25,16 +25,6 @@ import { SubaccountProvider } from '@/hooks/useSubaccount';
import { GuardedMobileRoute } from '@/components/GuardedMobileRoute'; 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 { HeaderDesktop } from '@/layout/Header/HeaderDesktop';
import { FooterDesktop } from '@/layout/Footer/FooterDesktop'; import { FooterDesktop } from '@/layout/Footer/FooterDesktop';
import { FooterMobile } from '@/layout/Footer/FooterMobile'; import { FooterMobile } from '@/layout/Footer/FooterMobile';
@@ -46,11 +36,22 @@ import { config } from '@/lib/wagmi';
import { breakpoints } from '@/styles'; import { breakpoints } from '@/styles';
import { layoutMixins } from '@/styles/layoutMixins'; import { layoutMixins } from '@/styles/layoutMixins';
import { LoadingSpace } from './components/Loading/LoadingSpinner';
import '@/styles/constants.css'; import '@/styles/constants.css';
import '@/styles/fonts.css'; import '@/styles/fonts.css';
import '@/styles/web3modal.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 queryClient = new QueryClient();
const Content = () => { const Content = () => {
@@ -69,7 +70,7 @@ const Content = () => {
{isNotTablet && <HeaderDesktop />} {isNotTablet && <HeaderDesktop />}
<Styled.Main> <Styled.Main>
<Suspense fallback={null}> <Suspense fallback={<LoadingSpace id="main" />}>
<Routes> <Routes>
<Route path={AppRoute.Trade}> <Route path={AppRoute.Trade}>
<Route path=":market" element={<TradePage />} /> <Route path=":market" element={<TradePage />} />
+119
View File
@@ -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);
}
`;
+8 -2
View File
@@ -45,6 +45,7 @@ const assetIcons = {
SOL: '/currencies/sol.png', SOL: '/currencies/sol.png',
SUI: '/currencies/sui.png', SUI: '/currencies/sui.png',
SUSHI: '/currencies/sushi.png', SUSHI: '/currencies/sushi.png',
TIA: '/currencies/tia.png',
TRX: '/currencies/trx.png', TRX: '/currencies/trx.png',
UMA: '/currencies/uma.png', UMA: '/currencies/uma.png',
UNI: '/currencies/uni.png', UNI: '/currencies/uni.png',
@@ -71,8 +72,13 @@ export const AssetIcon = ({
}: { }: {
symbol?: Nullable<string>; symbol?: Nullable<string>;
className?: 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> = {}; const Styled: Record<string, AnyStyledComponent> = {};
+7 -5
View File
@@ -31,10 +31,12 @@ type ElementProps<TabItemsValue> = {
}; };
type StyleProps = { type StyleProps = {
fullWidthTabs?: boolean;
className?: string; className?: string;
fullWidthTabs?: boolean;
}; };
export type CollapsibleTabsProps<TabItemsValue> = ElementProps<TabItemsValue> & StyleProps;
export const CollapsibleTabs = <TabItemsValue extends string>({ export const CollapsibleTabs = <TabItemsValue extends string>({
defaultValue, defaultValue,
items, items,
@@ -43,8 +45,9 @@ export const CollapsibleTabs = <TabItemsValue extends string>({
onOpenChange, onOpenChange,
fullWidthTabs, fullWidthTabs,
className, className,
}: ElementProps<TabItemsValue> & StyleProps) => { }: CollapsibleTabsProps<TabItemsValue>) => {
const [value, setValue] = useState(defaultValue); const [value, setValue] = useState(defaultValue);
const currentItem = items.find((item) => item.value === value); const currentItem = items.find((item) => item.value === value);
@@ -86,8 +89,8 @@ export const CollapsibleTabs = <TabItemsValue extends string>({
</Styled.Header> </Styled.Header>
<Styled.CollapsibleContent> <Styled.CollapsibleContent>
{items.map(({ value, content }) => ( {items.map(({ asChild, value, content }) => (
<Styled.TabsContent key={value} value={value}> <Styled.TabsContent key={value} asChild={asChild} value={value}>
{content} {content}
</Styled.TabsContent> </Styled.TabsContent>
))} ))}
@@ -219,7 +222,6 @@ Styled.Header = styled.header`
Styled.CollapsibleContent = styled(CollapsibleContent)` Styled.CollapsibleContent = styled(CollapsibleContent)`
${layoutMixins.stack} ${layoutMixins.stack}
${layoutMixins.perspectiveArea}
box-shadow: none; box-shadow: none;
`; `;
+3
View File
@@ -55,6 +55,7 @@ import {
OverviewIcon, OverviewIcon,
PencilIcon, PencilIcon,
PlayIcon, PlayIcon,
PlusIcon,
PositionsIcon, PositionsIcon,
PriceChartIcon, PriceChartIcon,
PrivacyIcon, PrivacyIcon,
@@ -130,6 +131,7 @@ export enum IconName {
Overview = 'Overview', Overview = 'Overview',
Pencil = 'Pencil', Pencil = 'Pencil',
Play = 'Play', Play = 'Play',
Plus = 'Plus',
Positions = 'Positions', Positions = 'Positions',
PriceChart = 'PriceChart', PriceChart = 'PriceChart',
Privacy = 'Privacy', Privacy = 'Privacy',
@@ -204,6 +206,7 @@ const icons = {
[IconName.Overview]: OverviewIcon, [IconName.Overview]: OverviewIcon,
[IconName.Pencil]: PencilIcon, [IconName.Pencil]: PencilIcon,
[IconName.Play]: PlayIcon, [IconName.Play]: PlayIcon,
[IconName.Plus]: PlusIcon,
[IconName.Positions]: PositionsIcon, [IconName.Positions]: PositionsIcon,
[IconName.PriceChart]: PriceChartIcon, [IconName.PriceChart]: PriceChartIcon,
[IconName.Privacy]: PrivacyIcon, [IconName.Privacy]: PrivacyIcon,
-1
View File
@@ -198,7 +198,6 @@ Styled.InputContainer = styled.div`
border-radius: inherit; border-radius: inherit;
input { input {
user-select: all;
flex: 1; flex: 1;
width: 100%; width: 100%;
} }
+2 -4
View File
@@ -43,6 +43,7 @@ import { layoutMixins } from '@/styles/layoutMixins';
import { Icon, IconName } from './Icon'; import { Icon, IconName } from './Icon';
import { Tag } from './Tag'; import { Tag } from './Tag';
import { MustBigNumber } from '@/lib/numbers';
export { TableCell } from './Table/TableCell'; export { TableCell } from './Table/TableCell';
export { TableColumnHeader } from './Table/TableColumnHeader'; export { TableColumnHeader } from './Table/TableColumnHeader';
@@ -161,10 +162,7 @@ export const Table = <TableRowData extends object, TableRowKey extends Key>({
? // String ? // String
collator.compare(first as string, second as string) collator.compare(first as string, second as string)
: // Number : // Number
Math.sign( MustBigNumber(first).comparedTo(MustBigNumber(second))) *
(parseInt(first as string) || (first as number)) -
(parseInt(second as string) || (second as number))
)) *
// Flip the direction if descending order is specified. // Flip the direction if descending order is specified.
(sortDirection === 'descending' ? -1 : 1) (sortDirection === 'descending' ? -1 : 1)
); );
+5 -2
View File
@@ -21,6 +21,7 @@ export type TabItem<TabItemsValue> = {
content?: React.ReactNode; content?: React.ReactNode;
subitems?: TabItem<TabItemsValue>[]; subitems?: TabItem<TabItemsValue>[];
customTrigger?: ReactNode; customTrigger?: ReactNode;
asChild?: boolean;
}; };
type ElementProps<TabItemsValue> = { type ElementProps<TabItemsValue> = {
@@ -41,6 +42,8 @@ type StyleProps = {
className?: string; className?: string;
}; };
export type TabsProps<TabItemsValue> = ElementProps<TabItemsValue> & StyleProps;
export const Tabs = <TabItemsValue extends string>({ export const Tabs = <TabItemsValue extends string>({
defaultValue, defaultValue,
value, value,
@@ -107,9 +110,10 @@ export const Tabs = <TabItemsValue extends string>({
sharedContent sharedContent
) : ( ) : (
<Styled.Stack> <Styled.Stack>
{items.map(({ value, content, forceMount }) => ( {items.map(({ asChild, value, content, forceMount }) => (
<Styled.Content <Styled.Content
key={value} key={value}
asChild={asChild}
value={value} value={value}
forceMount={forceMount} forceMount={forceMount}
$hide={forceMount && currentItem?.value !== value} $hide={forceMount && currentItem?.value !== value}
@@ -242,7 +246,6 @@ Styled.Trigger = styled(Trigger)<{ $withBorders?: boolean }>`
Styled.Stack = styled.div` Styled.Stack = styled.div`
${layoutMixins.stack} ${layoutMixins.stack}
${layoutMixins.perspectiveArea}
box-shadow: none; box-shadow: none;
`; `;
-36
View File
@@ -26,39 +26,3 @@ export enum FundingDirection {
ToShort = 'ToShort', ToShort = 'ToShort',
ToLong = 'ToLong', ToLong = 'ToLong',
} }
export const MARKETS_TO_DISPLAY = [
'BTC-USD',
'ETH-USD',
'LINK-USD',
'SOL-USD',
'MATIC-USD',
'ATOM-USD',
'AVAX-USD',
'APE-USD',
'XRP-USD',
'UNI-USD',
'ADA-USD',
'TRX-USD',
'OP-USD',
'MKR-USD',
'DOGE-USD',
'SHIB-USD',
'COMP-USD',
'LDO-USD',
'NEAR-USD',
'APT-USD',
'SUI-USD',
'DOT-USD',
'ETC-USD',
'ARB-USD',
'CRV-USD',
'BLUR-USD',
'FIL-USD',
'XLM-USD',
'PEPE-USD',
'WLD-USD',
'SEI-USD',
'LTC-USD',
'BCH-USD',
];
+6
View File
@@ -122,9 +122,15 @@ export type NotificationDisplayData = {
toastDuration?: number; toastDuration?: number;
}; };
export enum TransferNotificationTypes {
Withdrawal = 'withdrawal',
Deposit = 'deposit',
}
// Notification types // Notification types
export type TransferNotifcation = { export type TransferNotifcation = {
txHash: string; txHash: string;
type?: TransferNotificationTypes;
toChainId?: string; toChainId?: string;
fromChainId?: string; fromChainId?: string;
toAmount?: number; toAmount?: number;
+5
View File
@@ -10,6 +10,7 @@ export const LEVERAGE_DECIMALS = 2;
export const TOKEN_DECIMALS = 4; export const TOKEN_DECIMALS = 4;
export const LARGE_TOKEN_DECIMALS = 2; export const LARGE_TOKEN_DECIMALS = 2;
export const FEE_DECIMALS = 3; export const FEE_DECIMALS = 3;
export const FUNDING_DECIMALS = 6;
export const QUANTUM_MULTIPLIER = 1_000_000; export const QUANTUM_MULTIPLIER = 1_000_000;
@@ -18,3 +19,7 @@ export enum NumberSign {
Negative = 'Negative', Negative = 'Negative',
Neutral = 'Neutral', Neutral = 'Neutral',
} }
// Deposit/Withdraw
export const MAX_CCTP_TRANSFER_AMOUNT = 1_000_000;
export const MAX_PRICE_IMPACT = 0.02; // 2%
+4
View File
@@ -1,6 +1,10 @@
import { type TooltipStrings, TOOLTIP_STRING_KEYS } from '@/constants/localization'; import { type TooltipStrings, TOOLTIP_STRING_KEYS } from '@/constants/localization';
export const depositTooltips: TooltipStrings = { 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 }) => ({ swap: ({ stringGetter }) => ({
title: stringGetter({ key: TOOLTIP_STRING_KEYS.SWAP_TITLE }), title: stringGetter({ key: TOOLTIP_STRING_KEYS.SWAP_TITLE }),
body: stringGetter({ key: TOOLTIP_STRING_KEYS.SWAP_BODY }), body: stringGetter({ key: TOOLTIP_STRING_KEYS.SWAP_BODY }),
+4
View File
@@ -5,6 +5,10 @@ export const withdrawTooltips: TooltipStrings = {
title: stringGetter({ key: TOOLTIP_STRING_KEYS.FAST_WITHDRAW_FEE_TITLE }), title: stringGetter({ key: TOOLTIP_STRING_KEYS.FAST_WITHDRAW_FEE_TITLE }),
body: stringGetter({ key: TOOLTIP_STRING_KEYS.FAST_WITHDRAW_FEE_BODY }), 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 }) => ({ 'withdraw-types': ({ stringGetter }) => ({
title: stringGetter({ key: TOOLTIP_STRING_KEYS.WITHDRAW_TYPES_TITLE }), title: stringGetter({ key: TOOLTIP_STRING_KEYS.WITHDRAW_TYPES_TITLE }),
body: stringGetter({ key: TOOLTIP_STRING_KEYS.WITHDRAW_TYPES_BODY }), body: stringGetter({ key: TOOLTIP_STRING_KEYS.WITHDRAW_TYPES_BODY }),
+28 -11
View File
@@ -5,16 +5,15 @@ import { useMatch, useNavigate } from 'react-router-dom';
import { LocalStorageKey } from '@/constants/localStorage'; import { LocalStorageKey } from '@/constants/localStorage';
import { DEFAULT_MARKETID } from '@/constants/markets'; import { DEFAULT_MARKETID } from '@/constants/markets';
import { AppRoute } from '@/constants/routes'; import { AppRoute } from '@/constants/routes';
import { useLocalStorage } from '@/hooks/useLocalStorage';
import { getSelectedNetwork } from '@/state/appSelectors'; import { getSelectedNetwork } from '@/state/appSelectors';
import { closeDialogInTradeBox } from '@/state/dialogs'; import { closeDialogInTradeBox } from '@/state/dialogs';
import { setCurrentMarketId } from '@/state/perpetuals'; import { setCurrentMarketId } from '@/state/perpetuals';
import { getMarketIds } from '@/state/perpetualsSelectors';
import abacusStateManager from '@/lib/abacus'; import abacusStateManager from '@/lib/abacus';
import { useLocalStorage } from './useLocalStorage';
import { getMarketIds } from '@/state/perpetualsSelectors';
export const useCurrentMarketId = () => { export const useCurrentMarketId = () => {
const navigate = useNavigate(); const navigate = useNavigate();
const match = useMatch(`/${AppRoute.Trade}/:marketId`); const match = useMatch(`/${AppRoute.Trade}/:marketId`);
@@ -33,17 +32,35 @@ export const useCurrentMarketId = () => {
if (marketIds.length === 0) return marketId ?? lastViewedMarket; if (marketIds.length === 0) return marketId ?? lastViewedMarket;
if (!marketIds.includes(marketId ?? lastViewedMarket)) return DEFAULT_MARKETID; if (!marketIds.includes(marketId ?? lastViewedMarket)) return DEFAULT_MARKETID;
return marketId ?? lastViewedMarket; return marketId ?? lastViewedMarket;
}, [marketIds, marketId]); }, [hasMarketIds, marketId]);
useEffect(() => { useEffect(() => {
setLastViewedMarket(validId); // If v4_markets has not been subscribed to yet or marketId is not specified, default to validId
dispatch(setCurrentMarketId(validId)); if (!hasMarketIds || !marketId) {
dispatch(closeDialogInTradeBox()); setLastViewedMarket(validId);
dispatch(setCurrentMarketId(validId));
dispatch(closeDialogInTradeBox());
navigate(`${AppRoute.Trade}/${validId}`, { if (validId !== marketId) {
replace: true, navigate(`${AppRoute.Trade}/${validId}`, {
}); replace: true,
}, [validId]); });
}
} 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(() => { useEffect(() => {
// Check for marketIds otherwise Abacus will silently fail its isMarketValid check // Check for marketIds otherwise Abacus will silently fail its isMarketValid check
+2 -11
View File
@@ -1,14 +1,7 @@
import { useMemo } from 'react'; import { useMemo } from 'react';
import { useSelector, shallowEqual } from 'react-redux'; import { useSelector, shallowEqual } from 'react-redux';
import { import { MarketFilters, MARKET_FILTER_LABELS, type MarketData } from '@/constants/markets';
MarketFilters,
MARKET_FILTER_LABELS,
type MarketData,
MARKETS_TO_DISPLAY,
} from '@/constants/markets';
import { testFlags } from '@/lib/testFlags';
import { getAssets } from '@/state/assetsSelectors'; import { getAssets } from '@/state/assetsSelectors';
import { getPerpetualMarkets } from '@/state/perpetualsSelectors'; import { getPerpetualMarkets } from '@/state/perpetualsSelectors';
@@ -49,9 +42,7 @@ export const useMarketsData = (
}, [allPerpetualMarkets, allAssets]); }, [allPerpetualMarkets, allAssets]);
const filteredMarkets = useMemo(() => { const filteredMarkets = useMemo(() => {
const filtered = markets const filtered = markets.filter(filterFunctions[filter]);
.filter(filterFunctions[filter])
.filter(({ id }) => (testFlags.displayAllMarkets ? true : MARKETS_TO_DISPLAY.includes(id)));
if (searchFilter) { if (searchFilter) {
return filtered.filter( return filtered.filter(
+8 -7
View File
@@ -20,6 +20,7 @@ import {
type NotificationTypeConfig, type NotificationTypeConfig,
NotificationType, NotificationType,
DEFAULT_TOAST_AUTO_CLOSE_MS, DEFAULT_TOAST_AUTO_CLOSE_MS,
TransferNotificationTypes,
} from '@/constants/notifications'; } from '@/constants/notifications';
import { useSelectedNetwork, useStringGetter } from '@/hooks'; import { useSelectedNetwork, useStringGetter } from '@/hooks';
@@ -152,20 +153,20 @@ export const notificationTypes: NotificationTypeConfig[] = [
useEffect(() => { useEffect(() => {
for (const transfer of transferNotifications) { 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 isFinished = Boolean(status) && status?.squidTransactionStatus !== 'ongoing';
const icon = <Icon iconName={isFinished ? IconName.Transfer : IconName.Clock} />; const icon = <Icon iconName={isFinished ? IconName.Transfer : IconName.Clock} />;
const type = const transferType =
fromChainId === ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId type ?? fromChainId === ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId
? 'withdrawal' ? TransferNotificationTypes.Withdrawal
: 'deposit'; : TransferNotificationTypes.Deposit;
const title = stringGetter({ const title = stringGetter({
key: { key: {
deposit: isFinished ? STRING_KEYS.DEPOSIT : STRING_KEYS.DEPOSIT_IN_PROGRESS, deposit: isFinished ? STRING_KEYS.DEPOSIT : STRING_KEYS.DEPOSIT_IN_PROGRESS,
withdrawal: isFinished ? STRING_KEYS.WITHDRAW : STRING_KEYS.WITHDRAW_IN_PROGRESS, withdrawal: isFinished ? STRING_KEYS.WITHDRAW : STRING_KEYS.WITHDRAW_IN_PROGRESS,
}[type], }[transferType],
}); });
const toChainEta = status?.toChain?.chainData?.estimatedRouteDuration || 0; const toChainEta = status?.toChain?.chainData?.estimatedRouteDuration || 0;
@@ -190,7 +191,7 @@ export const notificationTypes: NotificationTypeConfig[] = [
slotIcon={icon} slotIcon={icon}
slotTitle={title} slotTitle={title}
transfer={transfer} transfer={transfer}
type={type} type={transferType}
triggeredAt={transfer.triggeredAt} triggeredAt={transfer.triggeredAt}
notification={notification} notification={notification}
/> />
+21 -3
View File
@@ -31,6 +31,7 @@ import { log } from '@/lib/telemetry';
import { useAccounts } from './useAccounts'; import { useAccounts } from './useAccounts';
import { useTokenConfigs } from './useTokenConfigs'; import { useTokenConfigs } from './useTokenConfigs';
import { useDydxClient } from './useDydxClient'; import { useDydxClient } from './useDydxClient';
import { hashFromTx } from '@/lib/hashfromTx';
type SubaccountContextType = ReturnType<typeof useSubaccountContext>; type SubaccountContextType = ReturnType<typeof useSubaccountContext>;
const SubaccountContext = createContext<SubaccountContextType>({} as SubaccountContextType); const SubaccountContext = createContext<SubaccountContextType>({} as SubaccountContextType);
@@ -293,12 +294,29 @@ export const useSubaccountContext = ({ localDydxWallet }: { localDydxWallet?: Lo
); );
const sendSquidWithdraw = useCallback( 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) { if (!subaccountClient) {
return; return;
} }
const tx = await sendSquidWithdrawFromSubaccount({ subaccountClient, amount, payload });
return await sendSquidWithdrawFromSubaccount({ subaccountClient, amount, payload }); return hashFromTx(tx?.hash);
}, },
[subaccountClient, sendSquidWithdrawFromSubaccount] [subaccountClient, sendSquidWithdrawFromSubaccount]
); );
+1
View File
@@ -44,6 +44,7 @@ export { default as OrderbookIcon } from './orderbook.svg';
export { default as OverviewIcon } from './overview.svg'; export { default as OverviewIcon } from './overview.svg';
export { default as PencilIcon } from './pencil.svg'; export { default as PencilIcon } from './pencil.svg';
export { default as PlayIcon } from './play.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 PortfolioIcon } from './portfolio.svg';
export { default as PositionsIcon } from './positions.svg'; export { default as PositionsIcon } from './positions.svg';
export { default as PriceChartIcon } from './price-chart.svg'; export { default as PriceChartIcon } from './price-chart.svg';
+1
View File
@@ -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

+116 -18
View File
@@ -2,6 +2,7 @@ import Abacus, { type Nullable } from '@dydxprotocol/v4-abacus';
import Long from 'long'; import Long from 'long';
import type { IndexedTx } from '@cosmjs/stargate'; import type { IndexedTx } from '@cosmjs/stargate';
import { GAS_MULTIPLIER, encodeJson } from '@dydxprotocol/v4-client-js'; import { GAS_MULTIPLIER, encodeJson } from '@dydxprotocol/v4-client-js';
import { EncodeObject } from '@cosmjs/proto-signing';
import { import {
CompositeClient, CompositeClient,
@@ -41,6 +42,7 @@ import { openDialog } from '@/state/dialogs';
import { StatefulOrderError } from '../errors'; import { StatefulOrderError } from '../errors';
import { bytesToBigInt } from '../numbers'; import { bytesToBigInt } from '../numbers';
import { log } from '../telemetry'; import { log } from '../telemetry';
import { hashFromTx } from '../hashfromTx';
class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol { class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
private compositeClient: CompositeClient | undefined; private compositeClient: CompositeClient | undefined;
@@ -63,9 +65,13 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
} }
setNobleWallet(nobleWallet: LocalWallet) { setNobleWallet(nobleWallet: LocalWallet) {
this.nobleWallet = nobleWallet; try {
if (this.nobleClient) { this.nobleWallet = nobleWallet;
this.nobleClient.connect(nobleWallet); if (this.nobleClient) {
this.nobleClient.connect(nobleWallet);
}
} catch (e) {
log('DydxChainTransactions/setNobleWallet', e);
} }
} }
@@ -112,10 +118,15 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
this.compositeClient = compositeClient; this.compositeClient = compositeClient;
if (nobleValidatorUrl) { try {
this.nobleClient = new NobleClient(nobleValidatorUrl); if (nobleValidatorUrl) {
if (this.nobleWallet) await this.nobleClient.connect(this.nobleWallet); 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 // Dispatch custom event to notify other parts of the app that the network has been connected
const customEvent = new CustomEvent('abacus:connectNetwork', { const customEvent = new CustomEvent('abacus:connectNetwork', {
detail: parsedParams, detail: parsedParams,
@@ -201,8 +212,8 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
timeInForce as OrderTimeInForce, timeInForce as OrderTimeInForce,
goodTilTimeInSeconds ?? 0, goodTilTimeInSeconds ?? 0,
execution as OrderExecution, execution as OrderExecution,
postOnly, postOnly ?? undefined,
reduceOnly, reduceOnly ?? undefined,
triggerPrice ?? undefined triggerPrice ?? undefined
); );
@@ -340,12 +351,7 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
} }
} }
async sendNobleIBC( async sendNobleIBC(params: { msgTypeUrl: string; msg: any }): Promise<string> {
params: {
msgTypeUrl: string,
msg: any,
}
): Promise<string> {
if (!this.nobleClient?.isConnected) { if (!this.nobleClient?.isConnected) {
throw new Error('Missing nobleClient or localWallet'); throw new Error('Missing nobleClient or localWallet');
} }
@@ -356,15 +362,16 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
value: params.msg, value: params.msg,
}; };
const fee = await this.nobleClient.simulateTransaction([ibcMsg]); const fee = await this.nobleClient.simulateTransaction([ibcMsg]);
// take out fee from amount before sweeping // take out fee from amount before sweeping
const amount = parseInt(ibcMsg.value.token.amount, 10) - const amount =
parseInt(ibcMsg.value.token.amount, 10) -
Math.floor(parseInt(fee.amount[0].amount, 10) * GAS_MULTIPLIER); Math.floor(parseInt(fee.amount[0].amount, 10) * GAS_MULTIPLIER);
if (amount <= 0) { if (amount <= 0) {
throw new Error('noble balance does not cover fees'); throw new Error('noble balance does not cover fees');
} }
ibcMsg.value.token.amount = amount.toString(); ibcMsg.value.token.amount = amount.toString();
const tx = await this.nobleClient.send([ibcMsg]); const tx = await this.nobleClient.send([ibcMsg]);
@@ -380,6 +387,86 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
} }
} }
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( async transaction(
type: TransactionTypes, type: TransactionTypes,
paramsInJson: Abacus.Nullable<string>, paramsInJson: Abacus.Nullable<string>,
@@ -414,6 +501,17 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
callback(result); callback(result);
break; 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: { default: {
break; break;
} }
+9 -2
View File
@@ -84,8 +84,7 @@ class AbacusStateManager {
); );
const appConfigs = AbacusAppConfig.Companion.forWeb; const appConfigs = AbacusAppConfig.Companion.forWeb;
if (!isMainnet || testFlags.withCCTP) appConfigs.squidVersion = AbacusAppConfig.SquidVersion.V2;
appConfigs.squidVersion = AbacusAppConfig.SquidVersion.V2DepositOnly;
this.stateManager = new AsyncAbacusStateManager( this.stateManager = new AsyncAbacusStateManager(
'', '',
@@ -262,6 +261,14 @@ class AbacusStateManager {
) => void ) => void
) => this.stateManager.cancelOrder(orderId, callback); ) => this.stateManager.cancelOrder(orderId, callback);
cctpWithdraw = (
callback: (
success: boolean,
parsingError: Nullable<ParsingError>,
data: string,
) => void
): void => this.stateManager.commitCCTPWithdraw(callback);
// ------ Utils ------ // // ------ Utils ------ //
getHistoricalPnlPeriod = (): Nullable<HistoricalPnlPeriods> => getHistoricalPnlPeriod = (): Nullable<HistoricalPnlPeriods> =>
this.stateManager.historicalPnlPeriod; this.stateManager.historicalPnlPeriod;
+3
View File
@@ -0,0 +1,3 @@
export const hashFromTx = (
txHash: string | Uint8Array
): string => `0x${Buffer.from(txHash).toString('hex')}`;
+2 -6
View File
@@ -5,13 +5,13 @@ class TestFlags {
this.queryParams = {}; this.queryParams = {};
const hash = window.location.hash; const hash = window.location.hash;
const queryIndex = hash.indexOf('?'); const queryIndex = hash.indexOf('?');
if (queryIndex === -1) return if (queryIndex === -1) return;
const queryParamsString = hash.substring(queryIndex + 1); const queryParamsString = hash.substring(queryIndex + 1);
const params = new URLSearchParams(queryParamsString); const params = new URLSearchParams(queryParamsString);
for (const [key, value] of params) { for (const [key, value] of params) {
this.queryParams[key] = value; this.queryParams[key] = value;
} }
} }
@@ -19,10 +19,6 @@ class TestFlags {
return !!this.queryParams.displayInitializingMarkets; return !!this.queryParams.displayInitializingMarkets;
} }
get displayAllMarkets() {
return !!this.queryParams.displayAllMarkets;
}
get withCCTP() { get withCCTP() {
return !!this.queryParams.withCCTP; return !!this.queryParams.withCCTP;
} }
+1 -1
View File
@@ -146,7 +146,7 @@ const getConnectors = (walletConnectConfig: WalletConnectConfig) => [
new CoinbaseWalletConnector({ new CoinbaseWalletConnector({
chains, chains,
options: { options: {
appName: 'wagmi', appName: 'dYdX',
reloadOnDisconnect: false, reloadOnDisconnect: false,
}, },
}), }),
+3 -1
View File
@@ -1,4 +1,6 @@
import { DialogPlacement } from '@/components/Dialog'; import { DialogPlacement } from '@/components/Dialog';
import { NotificationsMenu } from '@/views/menus/NotificationsMenu'; import { NotificationsMenu } from '@/views/menus/NotificationsMenu';
export const AlertsPage = () => <NotificationsMenu placement={DialogPlacement.Inline} />; const AlertsPage = () => <NotificationsMenu placement={DialogPlacement.Inline} />;
export default AlertsPage;
+3 -1
View File
@@ -2,7 +2,7 @@ import styled, { AnyStyledComponent } from 'styled-components';
import { articleMixins } from '@/styles/articleMixins'; import { articleMixins } from '@/styles/articleMixins';
export const PrivacyPolicyPage = () => ( const PrivacyPolicyPage = () => (
<Styled.Article> <Styled.Article>
<header> <header>
<h1>Privacy Policy</h1> <h1>Privacy Policy</h1>
@@ -10,6 +10,8 @@ export const PrivacyPolicyPage = () => (
</Styled.Article> </Styled.Article>
); );
export default PrivacyPolicyPage;
const Styled: Record<string, AnyStyledComponent> = {}; const Styled: Record<string, AnyStyledComponent> = {};
Styled.Article = styled.article` Styled.Article = styled.article`
+3 -1
View File
@@ -2,7 +2,7 @@ import styled, { AnyStyledComponent } from 'styled-components';
import { articleMixins } from '@/styles/articleMixins'; import { articleMixins } from '@/styles/articleMixins';
export const TermsOfUsePage = () => ( const TermsOfUsePage = () => (
<Styled.Article> <Styled.Article>
<header> <header>
<h1>Sample Terms of Use</h1> <h1>Sample Terms of Use</h1>
@@ -1076,6 +1076,8 @@ export const TermsOfUsePage = () => (
</Styled.Article> </Styled.Article>
); );
export default TermsOfUsePage;
const Styled: Record<string, AnyStyledComponent> = {}; const Styled: Record<string, AnyStyledComponent> = {};
Styled.Article = styled.article` Styled.Article = styled.article`
+58 -53
View File
@@ -1,17 +1,20 @@
import { lazy, Suspense } from 'react';
import { shallowEqual, useDispatch, useSelector } from 'react-redux'; import { shallowEqual, useDispatch, useSelector } from 'react-redux';
import styled, { type AnyStyledComponent } from 'styled-components'; import styled, { type AnyStyledComponent } from 'styled-components';
import { Navigate, Route, Routes } from 'react-router-dom'; import { Navigate, Route, Routes } from 'react-router-dom';
import { OnboardingState } from '@/constants/account'; import { OnboardingState } from '@/constants/account';
import { ButtonAction } from '@/constants/buttons';
import { DialogTypes } from '@/constants/dialogs'; import { DialogTypes } from '@/constants/dialogs';
import { STRING_KEYS } from '@/constants/localization'; import { STRING_KEYS } from '@/constants/localization';
import { HistoryRoute, PortfolioRoute } from '@/constants/routes'; import { HistoryRoute, PortfolioRoute } from '@/constants/routes';
import { useAccountBalance, useBreakpoints, useDocumentTitle, useStringGetter } from '@/hooks'; import { useAccountBalance, useBreakpoints, useDocumentTitle, useStringGetter } from '@/hooks';
import { layoutMixins } from '@/styles/layoutMixins';
import { FillsTable, FillsTableColumnKey } from '@/views/tables/FillsTable'; import { FillsTable, FillsTableColumnKey } from '@/views/tables/FillsTable';
import { FundingPaymentsTable } from '@/views/tables/FundingPaymentsTable'; import { FundingPaymentsTable } from '@/views/tables/FundingPaymentsTable';
import { TransferHistoryTable } from '@/views/tables/TransferHistoryTable'; import { TransferHistoryTable } from '@/views/tables/TransferHistoryTable';
import { Button } from '@/components/Button';
import { Icon, IconName } from '@/components/Icon'; import { Icon, IconName } from '@/components/Icon';
import { NavigationMenu } from '@/components/NavigationMenu'; import { NavigationMenu } from '@/components/NavigationMenu';
import { WithSidebar } from '@/components/WithSidebar'; import { WithSidebar } from '@/components/WithSidebar';
@@ -20,15 +23,15 @@ import { getOnboardingState, getSubaccount } from '@/state/accountSelectors';
import { openDialog } from '@/state/dialogs'; import { openDialog } from '@/state/dialogs';
import { PortfolioNavMobile } from './PortfolioNavMobile'; import { PortfolioNavMobile } from './PortfolioNavMobile';
import { Overview } from './Overview'; import { LoadingSpace } from '@/components/Loading/LoadingSpinner';
import { Positions } from './Positions';
import { Orders } from './Orders';
import { Fees } from './Fees';
import { History } from './History';
import { layoutMixins } from '@/styles/layoutMixins'; const Overview = lazy(() => import('./Overview').then((module) => ({ default: module.Overview })));
import { Button } from '@/components/Button'; const Positions = lazy(() =>
import { ButtonAction } from '@/constants/buttons'; 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 () => { export default () => {
const dispatch = useDispatch(); const dispatch = useDispatch();
@@ -44,49 +47,51 @@ export default () => {
useDocumentTitle(stringGetter({ key: STRING_KEYS.PORTFOLIO })); useDocumentTitle(stringGetter({ key: STRING_KEYS.PORTFOLIO }));
const routesComponent = ( const routesComponent = (
<Routes> <Suspense fallback={<LoadingSpace id="portfolio" />}>
<Route path={PortfolioRoute.Overview} element={<Overview />} /> <Routes>
<Route path={PortfolioRoute.Positions} element={<Positions />} /> <Route path={PortfolioRoute.Overview} element={<Overview />} />
<Route path={PortfolioRoute.Orders} element={<Orders />} /> <Route path={PortfolioRoute.Positions} element={<Positions />} />
<Route path={PortfolioRoute.Fees} element={<Fees />} /> <Route path={PortfolioRoute.Orders} element={<Orders />} />
<Route path={PortfolioRoute.History} element={<History />}> <Route path={PortfolioRoute.Fees} element={<Fees />} />
<Route index path="*" element={<Navigate to={HistoryRoute.Trades} />} /> <Route path={PortfolioRoute.History} element={<History />}>
<Route <Route index path="*" element={<Navigate to={HistoryRoute.Trades} />} />
path={HistoryRoute.Trades} <Route
element={ path={HistoryRoute.Trades}
<FillsTable element={
columnKeys={ <FillsTable
isTablet columnKeys={
? [ isTablet
FillsTableColumnKey.Time, ? [
FillsTableColumnKey.TypeAmount, FillsTableColumnKey.Time,
FillsTableColumnKey.PriceFee, FillsTableColumnKey.TypeAmount,
] FillsTableColumnKey.PriceFee,
: [ ]
FillsTableColumnKey.Time, : [
FillsTableColumnKey.Market, FillsTableColumnKey.Time,
FillsTableColumnKey.Side, FillsTableColumnKey.Market,
FillsTableColumnKey.AmountPrice, FillsTableColumnKey.Side,
FillsTableColumnKey.TotalFee, FillsTableColumnKey.AmountPrice,
FillsTableColumnKey.Type, FillsTableColumnKey.TotalFee,
FillsTableColumnKey.Liquidity, FillsTableColumnKey.Type,
] FillsTableColumnKey.Liquidity,
} ]
withOuterBorder={isNotTablet} }
/> withOuterBorder={isNotTablet}
} />
/> }
<Route />
path={HistoryRoute.Transfers} <Route
element={<TransferHistoryTable withOuterBorder={isNotTablet} />} path={HistoryRoute.Transfers}
/> element={<TransferHistoryTable withOuterBorder={isNotTablet} />}
<Route />
path={HistoryRoute.Payments} <Route
element={<FundingPaymentsTable withOuterBorder={isNotTablet} />} path={HistoryRoute.Payments}
/> element={<FundingPaymentsTable withOuterBorder={isNotTablet} />}
</Route> />
<Route path="*" element={<Navigate to={PortfolioRoute.Overview} replace />} /> </Route>
</Routes> <Route path="*" element={<Navigate to={PortfolioRoute.Overview} replace />} />
</Routes>
</Suspense>
); );
return isTablet ? ( return isTablet ? (
@@ -191,7 +196,7 @@ Styled.SideBar = styled.div`
Styled.Footer = styled.div` Styled.Footer = styled.div`
${layoutMixins.row} ${layoutMixins.row}
flex-wrap: wrap; flex-wrap: wrap;
padding: 1rem; padding: 1rem;
gap: 0.5rem; gap: 0.5rem;
+80
View File
@@ -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 traders 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 traders 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;
`;
+3 -1
View File
@@ -21,7 +21,7 @@ import { DYDXBalancePanel } from './DYDXBalancePanel';
import { MigratePanel } from './MigratePanel'; import { MigratePanel } from './MigratePanel';
import { LaunchIncentivesPanel } from './LaunchIncentivesPanel'; import { LaunchIncentivesPanel } from './LaunchIncentivesPanel';
export const RewardsPage = () => { const RewardsPage = () => {
const dispatch = useDispatch(); const dispatch = useDispatch();
const stringGetter = useStringGetter(); const stringGetter = useStringGetter();
const { governanceLearnMore, stakingLearnMore } = useURLConfigs(); const { governanceLearnMore, stakingLearnMore } = useURLConfigs();
@@ -84,6 +84,8 @@ export const RewardsPage = () => {
); );
}; };
export default RewardsPage;
const Styled: Record<string, AnyStyledComponent> = {}; const Styled: Record<string, AnyStyledComponent> = {};
Styled.Page = styled.div` Styled.Page = styled.div`
+3 -1
View File
@@ -25,7 +25,7 @@ import { useNetworks } from '@/views/menus/useNetworks';
import { SettingsHeader } from './SettingsHeader'; import { SettingsHeader } from './SettingsHeader';
import { ComingSoonSpace } from '@/components/ComingSoon'; import { ComingSoonSpace } from '@/components/ComingSoon';
export const SettingsPage = () => { const SettingsPage = () => {
const stringGetter = useStringGetter(); const stringGetter = useStringGetter();
const { pathname } = useLocation(); const { pathname } = useLocation();
const dispatch = useDispatch(); const dispatch = useDispatch();
@@ -105,3 +105,5 @@ export const SettingsPage = () => {
</> </>
); );
}; };
export default SettingsPage;
+130 -116
View File
@@ -1,8 +1,7 @@
import { useState } from 'react'; import { useMemo, useState } from 'react';
import { shallowEqual, useSelector } from 'react-redux'; import { shallowEqual, useSelector } from 'react-redux';
import styled, { type AnyStyledComponent } from 'styled-components'; import styled, { type AnyStyledComponent } from 'styled-components';
import { AbacusOrderStatus } from '@/constants/abacus';
import { STRING_KEYS } from '@/constants/localization'; import { STRING_KEYS } from '@/constants/localization';
import { useBreakpoints, useStringGetter } from '@/hooks'; import { useBreakpoints, useStringGetter } from '@/hooks';
@@ -28,7 +27,6 @@ import {
getCurrentMarketTradeInfoNumbers, getCurrentMarketTradeInfoNumbers,
getHasUnseenFillUpdates, getHasUnseenFillUpdates,
getHasUnseenOrderUpdates, getHasUnseenOrderUpdates,
getLatestOrderStatus,
getTradeInfoNumbers, getTradeInfoNumbers,
} from '@/state/accountSelectors'; } from '@/state/accountSelectors';
@@ -82,125 +80,141 @@ export const HorizontalPanel = ({ isOpen = true, setIsOpen }: ElementProps) => {
showCurrentMarket ? numOpenOrders : numTotalOpenOrders showCurrentMarket ? numOpenOrders : numTotalOpenOrders
); );
const tabItems = [ const tabItems = useMemo(
{ () => [
value: InfoSection.Position, {
label: stringGetter({ value: InfoSection.Position,
key: showCurrentMarket ? STRING_KEYS.POSITION : STRING_KEYS.POSITIONS, label: stringGetter({
}), key: showCurrentMarket ? STRING_KEYS.POSITION : STRING_KEYS.POSITIONS,
}),
tag: showCurrentMarket ? null : shortenNumberForDisplay(numTotalPositions), tag: showCurrentMarket ? null : shortenNumberForDisplay(numTotalPositions),
content: showCurrentMarket ? ( content: showCurrentMarket ? (
<PositionInfo showNarrowVariation={isTablet} /> <PositionInfo showNarrowVariation={isTablet} />
) : ( ) : (
<PositionsTable <PositionsTable
columnKeys={ columnKeys={
isTablet isTablet
? [ ? [
PositionsTableColumnKey.Details, PositionsTableColumnKey.Details,
PositionsTableColumnKey.IndexEntry, PositionsTableColumnKey.IndexEntry,
PositionsTableColumnKey.PnL, PositionsTableColumnKey.PnL,
] ]
: [ : [
PositionsTableColumnKey.Market, PositionsTableColumnKey.Market,
PositionsTableColumnKey.Side, PositionsTableColumnKey.Side,
PositionsTableColumnKey.Size, PositionsTableColumnKey.Size,
PositionsTableColumnKey.Leverage, PositionsTableColumnKey.Leverage,
PositionsTableColumnKey.LiquidationAndOraclePrice, PositionsTableColumnKey.LiquidationAndOraclePrice,
PositionsTableColumnKey.UnrealizedPnl, PositionsTableColumnKey.UnrealizedPnl,
PositionsTableColumnKey.RealizedPnl, PositionsTableColumnKey.RealizedPnl,
PositionsTableColumnKey.AverageOpenAndClose, PositionsTableColumnKey.AverageOpenAndClose,
] ]
} }
onNavigate={() => setView(PanelView.CurrentMarket)} onNavigate={() => setView(PanelView.CurrentMarket)}
/> />
), ),
}, },
{ {
value: InfoSection.Orders, asChild: true,
label: stringGetter({ key: STRING_KEYS.ORDERS }), value: InfoSection.Orders,
label: stringGetter({ key: STRING_KEYS.ORDERS }),
slotRight: isWaitingForOrderToIndex ? ( slotRight: isWaitingForOrderToIndex ? (
<Styled.LoadingSpinner /> <Styled.LoadingSpinner />
) : ( ) : (
ordersTagNumber && ( ordersTagNumber && (
<Tag type={TagType.Number} isHighlighted={hasUnseenOrderUpdates}> <Tag type={TagType.Number} isHighlighted={hasUnseenOrderUpdates}>
{ordersTagNumber} {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> </Tag>
) ),
),
content: ( content: (
<OrdersTable <FillsTable
currentMarket={showCurrentMarket ? currentMarketId : undefined} currentMarket={showCurrentMarket ? currentMarketId : undefined}
columnKeys={ columnKeys={
isTablet isTablet
? [OrdersTableColumnKey.StatusFill, OrdersTableColumnKey.PriceType] ? [
: [ FillsTableColumnKey.Time,
!showCurrentMarket && OrdersTableColumnKey.Market, FillsTableColumnKey.TypeAmount,
OrdersTableColumnKey.Status, FillsTableColumnKey.PriceFee,
OrdersTableColumnKey.Side, ]
OrdersTableColumnKey.AmountFill, : [
OrdersTableColumnKey.Price, !showCurrentMarket && FillsTableColumnKey.Market,
OrdersTableColumnKey.Trigger, FillsTableColumnKey.Time,
OrdersTableColumnKey.GoodTil, FillsTableColumnKey.Type,
!isAccountViewOnly && OrdersTableColumnKey.Actions, FillsTableColumnKey.Side,
].filter(isTruthy) FillsTableColumnKey.AmountTag,
} FillsTableColumnKey.Price,
/> FillsTableColumnKey.TotalFee,
), FillsTableColumnKey.Liquidity,
}, ].filter(isTruthy)
{ }
value: InfoSection.Fills, columnWidths={{
label: stringGetter({ key: STRING_KEYS.FILLS }), [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: shortenNumberForDisplay(
<Tag type={TagType.Number} isHighlighted={hasUnseenFillUpdates}> // showCurrentMarket ? numFundingPayments : numTotalFundingPayments
{fillsTagNumber} // ),
</Tag> // content: (
), // <FundingPaymentsTable currentMarket={showCurrentMarket ? currentMarket?.id : undefined} />
// ),
content: ( // },
<FillsTable ],
currentMarket={showCurrentMarket ? currentMarketId : undefined} [
columnKeys={ stringGetter,
isTablet currentMarketId,
? [ showCurrentMarket,
FillsTableColumnKey.Time, isTablet,
FillsTableColumnKey.TypeAmount, isWaitingForOrderToIndex,
FillsTableColumnKey.PriceFee, isAccountViewOnly,
] ordersTagNumber,
: [ fillsTagNumber,
!showCurrentMarket && FillsTableColumnKey.Market, hasUnseenFillUpdates,
FillsTableColumnKey.Time, hasUnseenOrderUpdates,
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} />
// ),
// },
];
return isTablet ? ( return isTablet ? (
<MobileTabs defaultValue={InfoSection.Position} items={tabItems} withBorders={false} /> <MobileTabs defaultValue={InfoSection.Position} items={tabItems} withBorders={false} />
-5
View File
@@ -877,11 +877,6 @@ export const layoutMixins: Record<
} }
`, `,
perspectiveArea: css`
perspective: 100rem;
transform-style: preserve-3d;
`,
absolute: css` absolute: css`
position: absolute; position: absolute;
top: 0; top: 0;
-1
View File
@@ -63,7 +63,6 @@ Styled.AccountInfoSectionContainer = styled.div<{ showAccountInfo?: boolean }>`
${layoutMixins.column} ${layoutMixins.column}
height: var(--account-info-section-height); height: var(--account-info-section-height);
min-height: var(--account-info-section-height); min-height: var(--account-info-section-height);
overflow-x: clip;
${({ showAccountInfo }) => ${({ showAccountInfo }) =>
!showAccountInfo && !showAccountInfo &&
@@ -203,7 +203,6 @@ const Styled: Record<string, AnyStyledComponent> = {};
Styled.Stack = styled.div` Styled.Stack = styled.div`
${layoutMixins.stack} ${layoutMixins.stack}
${layoutMixins.perspectiveArea}
`; `;
Styled.CornerButton = styled(Button)` Styled.CornerButton = styled(Button)`
@@ -293,7 +292,14 @@ Styled.TransferButtons = styled.div`
Styled.ConnectedAccountInfoContainer = styled.div<{ $showHeader?: boolean }>` Styled.ConnectedAccountInfoContainer = styled.div<{ $showHeader?: boolean }>`
${layoutMixins.column} ${layoutMixins.column}
${layoutMixins.withOuterAndInnerBorders}
@media ${breakpoints.notTablet} {
${layoutMixins.withOuterAndInnerBorders}
}
@media ${breakpoints.tablet} {
${layoutMixins.withInnerBorder}
}
${({ $showHeader }) => ${({ $showHeader }) =>
$showHeader && $showHeader &&
-3
View File
@@ -2,9 +2,7 @@ import styled, { type AnyStyledComponent } from 'styled-components';
import { shallowEqual, useSelector } from 'react-redux'; import { shallowEqual, useSelector } from 'react-redux';
import { STRING_KEYS } from '@/constants/localization'; import { STRING_KEYS } from '@/constants/localization';
import { MARKETS_TO_DISPLAY } from '@/constants/markets';
import { useBreakpoints, useStringGetter } from '@/hooks'; import { useBreakpoints, useStringGetter } from '@/hooks';
import { testFlags } from '@/lib/testFlags';
import { breakpoints } from '@/styles'; import { breakpoints } from '@/styles';
import { layoutMixins } from '@/styles/layoutMixins'; import { layoutMixins } from '@/styles/layoutMixins';
@@ -34,7 +32,6 @@ export const ExchangeBillboards: React.FC<ExchangeBillboardsProps> = ({
Object.values(perpetualMarkets) Object.values(perpetualMarkets)
.filter(Boolean) .filter(Boolean)
.filter(({ id }) => (testFlags.displayAllMarkets ? true : MARKETS_TO_DISPLAY.includes(id)))
.forEach(({ oraclePrice, perpetual }) => { .forEach(({ oraclePrice, perpetual }) => {
const { volume24H, trades24H, openInterest = 0 } = perpetual || {}; const { volume24H, trades24H, openInterest = 0 } = perpetual || {};
volume24HUSDC += volume24H ?? 0; volume24HUSDC += volume24H ?? 0;
-5
View File
@@ -213,13 +213,8 @@ Styled.MarketDetails = styled.div`
`; `;
Styled.Header = styled.header` Styled.Header = styled.header`
/* max-width: fit-content; */
${layoutMixins.column} ${layoutMixins.column}
gap: 1.25rem; gap: 1.25rem;
position: sticky;
bottom: 3rem;
`; `;
Styled.WrapRow = styled.div` Styled.WrapRow = styled.div`
+1 -7
View File
@@ -453,13 +453,6 @@ Styled.Actions = styled.footer`
> :last-child { > :last-child {
flex: 2; 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 }>` Styled.Output = styled(Output)<{ sign: NumberSign; smallText?: boolean; margin?: string }>`
@@ -514,6 +507,7 @@ Styled.PositionInfo = styled.div`
Styled.DetachedSection = styled(DetachedSection)` Styled.DetachedSection = styled(DetachedSection)`
padding: 0 1.5rem; padding: 0 1.5rem;
position: relative;
`; `;
Styled.DetachedScrollableSection = styled(DetachedScrollableSection)` Styled.DetachedScrollableSection = styled(DetachedScrollableSection)`
-1
View File
@@ -82,7 +82,6 @@ const Styled: Record<string, AnyStyledComponent> = {};
Styled.PriceChart = styled.div<{ isChartReady?: boolean }>` Styled.PriceChart = styled.div<{ isChartReady?: boolean }>`
${layoutMixins.stack} ${layoutMixins.stack}
${layoutMixins.perspectiveArea}
height: 100%; height: 100%;
@@ -94,7 +94,7 @@ export const FillDetailsDialog = ({ fillId, setIsOpen }: ElementProps) => {
return ( return (
<DetailsDialog <DetailsDialog
slotIcon={<Styled.AssetIcon symbol={asset.id} />} slotIcon={<Styled.AssetIcon symbol={asset?.id} />}
title={resources.typeStringKey && stringGetter({ key: resources.typeStringKey })} title={resources.typeStringKey && stringGetter({ key: resources.typeStringKey })}
items={detailItems} items={detailItems}
setIsOpen={setIsOpen} setIsOpen={setIsOpen}
@@ -194,7 +194,7 @@ export const OrderDetailsDialog = ({ orderId, setIsOpen }: ElementProps) => {
return ( return (
<DetailsDialog <DetailsDialog
slotIcon={<Styled.AssetIcon symbol={asset.id} />} slotIcon={<Styled.AssetIcon symbol={asset?.id} />}
title={!resources.typeStringKey ? '' : stringGetter({ key: resources.typeStringKey })} title={!resources.typeStringKey ? '' : stringGetter({ key: resources.typeStringKey })}
slotFooter={ slotFooter={
isAccountViewOnly ? null : isOrderStatusClearable(status) ? ( isAccountViewOnly ? null : isOrderStatusClearable(status) ? (
+5 -1
View File
@@ -8,6 +8,7 @@ import { ComboboxDialogMenu } from '@/components/ComboboxDialogMenu';
import { Icon, IconName } from '@/components/Icon'; import { Icon, IconName } from '@/components/Icon';
import { isTruthy } from '@/lib/isTruthy'; import { isTruthy } from '@/lib/isTruthy';
import { breakpoints } from '@/styles';
type ElementProps = { type ElementProps = {
setIsOpen: (open: boolean) => void; setIsOpen: (open: boolean) => void;
@@ -72,8 +73,11 @@ export const HelpDialog = ({ setIsOpen }: ElementProps) => {
const Styled: Record<string, AnyStyledComponent> = {}; const Styled: Record<string, AnyStyledComponent> = {};
Styled.ComboboxDialogMenu = styled(ComboboxDialogMenu)` Styled.ComboboxDialogMenu = styled(ComboboxDialogMenu)`
--dialog-width: var(--dialog-small-width);
--dialog-content-paddingTop: 1rem; --dialog-content-paddingTop: 1rem;
--dialog-content-paddingBottom: 1rem; --dialog-content-paddingBottom: 1rem;
--comboxDialogMenu-item-gap: 1rem; --comboxDialogMenu-item-gap: 1rem;
@media ${breakpoints.notMobile} {
--dialog-width: var(--dialog-small-width);
}
`; `;
@@ -18,11 +18,7 @@ type ElementProps = {
onSelectChain: (chain: string) => void; onSelectChain: (chain: string) => void;
}; };
export const ChainSelectMenu = ({ export const ChainSelectMenu = ({ label, selectedChain, onSelectChain }: ElementProps) => {
label,
selectedChain,
onSelectChain,
}: ElementProps) => {
const stringGetter = useStringGetter(); const stringGetter = useStringGetter();
const { type, depositOptions, withdrawalOptions, resources } = const { type, depositOptions, withdrawalOptions, resources } =
useSelector(getTransferInputs, shallowEqual) || {}; useSelector(getTransferInputs, shallowEqual) || {};
@@ -38,7 +34,7 @@ export const ChainSelectMenu = ({
slotBefore: <Styled.Img src={chain.iconUrl} alt="" />, slotBefore: <Styled.Img src={chain.iconUrl} alt="" />,
})); }));
const selectedOption = chains.find((item) => item.type === selectedChain); const selectedOption = chains.find((item) => item.type === selectedChain);
return ( return (
<SearchSelectMenu <SearchSelectMenu
@@ -81,4 +77,4 @@ Styled.ChainRow = styled.div`
gap: 0.5rem; gap: 0.5rem;
color: var(--color-text-2); color: var(--color-text-2);
font: var(--font-base-book); font: var(--font-base-book);
`; `;
@@ -10,9 +10,8 @@ import { TransferInputField, TransferInputTokenResource, TransferType } from '@/
import { AlertType } from '@/constants/alerts'; import { AlertType } from '@/constants/alerts';
import { ButtonSize } from '@/constants/buttons'; import { ButtonSize } from '@/constants/buttons';
import { STRING_KEYS } from '@/constants/localization'; import { STRING_KEYS } from '@/constants/localization';
import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks'; import { ENVIRONMENT_CONFIG_MAP, isMainnet } from '@/constants/networks';
import { NotificationStatus } from '@/constants/notifications'; import { MAX_CCTP_TRANSFER_AMOUNT, MAX_PRICE_IMPACT, NumberSign } from '@/constants/numbers';
import { NumberSign } from '@/constants/numbers';
import type { EvmAddress } from '@/constants/wallets'; import type { EvmAddress } from '@/constants/wallets';
import { useAccounts, useDebounce, useStringGetter, useSelectedNetwork } from '@/hooks'; import { useAccounts, useDebounce, useStringGetter, useSelectedNetwork } from '@/hooks';
@@ -253,7 +252,9 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
if (txHash) { if (txHash) {
addTransferNotification({ addTransferNotification({
txHash: txHash, txHash: txHash,
toChainId: !isCctp ? ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId : getNobleChainId(), toChainId: !isCctp
? ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId
: getNobleChainId(),
fromChainId: chainIdStr || undefined, fromChainId: chainIdStr || undefined,
toAmount: summary?.usdcSize || undefined, toAmount: summary?.usdcSize || undefined,
triggeredAt: Date.now(), triggeredAt: Date.now(),
@@ -324,6 +325,21 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
return stringGetter({ key: STRING_KEYS.DEPOSIT_MORE_THAN_BALANCE }); 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; return undefined;
}, [ }, [
error, error,
@@ -334,6 +350,7 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
fromAmount, fromAmount,
sourceToken, sourceToken,
stringGetter, stringGetter,
summary,
]); ]);
const isDisabled = 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 styled, { type AnyStyledComponent } from 'styled-components';
import { shallowEqual, useSelector } from 'react-redux'; import { shallowEqual, useSelector } from 'react-redux';
import type { RouteData } from '@0xsquid/sdk'; import type { RouteData } from '@0xsquid/sdk';
import { formatUnits } from 'viem';
import { import { ButtonAction, ButtonShape, ButtonSize, ButtonType } from '@/constants/buttons';
ButtonAction,
ButtonShape,
ButtonSize,
ButtonState,
ButtonType,
} from '@/constants/buttons';
import { TransferInputTokenResource } from '@/constants/abacus'; import { TransferInputTokenResource } from '@/constants/abacus';
import { STRING_KEYS } from '@/constants/localization'; 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 { useMatchingEvmNetwork } from '@/hooks/useMatchingEvmNetwork';
import { layoutMixins } from '@/styles/layoutMixins'; import { layoutMixins } from '@/styles/layoutMixins';
@@ -34,6 +29,7 @@ import { calculateCanAccountTrade } from '@/state/accountCalculators';
import { getSubaccountBuyingPower, getSubaccountEquity } from '@/state/accountSelectors'; import { getSubaccountBuyingPower, getSubaccountEquity } from '@/state/accountSelectors';
import { getTransferInputs } from '@/state/inputsSelectors'; import { getTransferInputs } from '@/state/inputsSelectors';
import { isTruthy } from '@/lib/isTruthy';
import { MustBigNumber } from '@/lib/numbers'; import { MustBigNumber } from '@/lib/numbers';
import { SlippageEditor } from '../SlippageEditor'; import { SlippageEditor } from '../SlippageEditor';
@@ -83,7 +79,8 @@ export const DepositButtonAndReceipt = ({
const { current: buyingPower, postOrder: newBuyingPower } = const { current: buyingPower, postOrder: newBuyingPower } =
useSelector(getSubaccountBuyingPower, shallowEqual) || {}; useSelector(getSubaccountBuyingPower, shallowEqual) || {};
const { summary, requestPayload } = useSelector(getTransferInputs, shallowEqual) || {}; const { isCctp, summary, requestPayload } = useSelector(getTransferInputs, shallowEqual) || {};
const { usdcDecimals, usdcLabel } = useTokenConfigs();
const feeSubitems: DetailsItem[] = []; const feeSubitems: DetailsItem[] = [];
@@ -98,7 +95,7 @@ export const DepositButtonAndReceipt = ({
if (typeof summary?.bridgeFee === 'number') { if (typeof summary?.bridgeFee === 'number') {
feeSubitems.push({ feeSubitems.push({
key: 'bridge-fees', 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} />, value: <Output type={OutputType.Fiat} value={summary?.bridgeFee} />,
}); });
} }
@@ -111,12 +108,68 @@ export const DepositButtonAndReceipt = ({
const totalFees = (summary?.bridgeFee || 0) + (summary?.gasFee || 0); 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 = [ 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', key: 'equity',
label: ( label: (
<span> <span>
{stringGetter({ key: STRING_KEYS.EQUITY })} <Tag>USDC</Tag> {stringGetter({ key: STRING_KEYS.EQUITY })} <Tag>{usdcLabel}</Tag>
</span> </span>
), ),
value: ( value: (
@@ -133,7 +186,7 @@ export const DepositButtonAndReceipt = ({
key: 'buying-power', key: 'buying-power',
label: ( label: (
<span> <span>
{stringGetter({ key: STRING_KEYS.BUYING_POWER })} <Tag>USDC</Tag> {stringGetter({ key: STRING_KEYS.BUYING_POWER })} <Tag>{usdcLabel}</Tag>
</span> </span>
), ),
value: ( value: (
@@ -146,18 +199,7 @@ export const DepositButtonAndReceipt = ({
/> />
), ),
}, },
{ !isCctp && {
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>
),
},
{
key: 'total-fees', key: 'total-fees',
label: <span>{stringGetter({ key: STRING_KEYS.TOTAL_FEES })}</span>, label: <span>{stringGetter({ key: STRING_KEYS.TOTAL_FEES })}</span>,
value: <Output type={OutputType.Fiat} value={totalFees} />, value: <Output type={OutputType.Fiat} value={totalFees} />,
@@ -165,7 +207,7 @@ export const DepositButtonAndReceipt = ({
}, },
{ {
key: 'slippage', key: 'slippage',
label: <span>{stringGetter({ key: STRING_KEYS.SLIPPAGE })}</span>, label: <span>{stringGetter({ key: STRING_KEYS.MAX_SLIPPAGE })}</span>,
value: ( value: (
<SlippageEditor <SlippageEditor
disabled disabled
@@ -178,22 +220,26 @@ export const DepositButtonAndReceipt = ({
{ {
key: 'estimatedRouteDuration', key: 'estimatedRouteDuration',
label: <span>{stringGetter({ key: STRING_KEYS.ESTIMATED_TIME })}</span>, label: <span>{stringGetter({ key: STRING_KEYS.ESTIMATED_TIME })}</span>,
value: typeof summary?.estimatedRouteDuration === 'number' && ( value: (
<Output <Output
type={OutputType.Text} type={OutputType.Text}
value={stringGetter({ value={
key: STRING_KEYS.X_MINUTES_LOWERCASED, typeof summary?.estimatedRouteDuration === 'number'
params: { ? stringGetter({
X: key: STRING_KEYS.X_MINUTES_LOWERCASED,
summary?.estimatedRouteDuration < 60 params: {
? '< 1' X:
: Math.round(summary?.estimatedRouteDuration / 60), summary?.estimatedRouteDuration < 60
}, ? '< 1'
})} : Math.round(summary?.estimatedRouteDuration / 60),
},
})
: null
}
/> />
), ),
}, },
]; ].filter(isTruthy);
const isFormValid = !isDisabled && !isEditingSlippage; const isFormValid = !isDisabled && !isEditingSlippage;
@@ -57,7 +57,6 @@ export const TokenSelectMenu = ({ selectedToken, onSelectToken }: ElementProps)
<Tag>{type === TransferType.deposit ? 'USDC' : selectedToken?.symbol}</Tag> <Tag>{type === TransferType.deposit ? 'USDC' : selectedToken?.symbol}</Tag>
</> </>
), ),
tooltip: 'swap',
}, },
]} ]}
> >
@@ -9,9 +9,9 @@ import { TransferInputField, TransferInputTokenResource, TransferType } from '@/
import { AlertType } from '@/constants/alerts'; import { AlertType } from '@/constants/alerts';
import { ButtonSize } from '@/constants/buttons'; import { ButtonSize } from '@/constants/buttons';
import { STRING_KEYS } from '@/constants/localization'; import { STRING_KEYS } from '@/constants/localization';
import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks'; import { ENVIRONMENT_CONFIG_MAP, isMainnet } from '@/constants/networks';
import { NotificationStatus } from '@/constants/notifications'; import { TransferNotificationTypes } from '@/constants/notifications';
import { NumberSign } from '@/constants/numbers'; import { MAX_CCTP_TRANSFER_AMOUNT, MAX_PRICE_IMPACT, NumberSign } from '@/constants/numbers';
import { import {
useAccounts, useAccounts,
@@ -45,6 +45,7 @@ import { getTransferInputs } from '@/state/inputsSelectors';
import abacusStateManager from '@/lib/abacus'; import abacusStateManager from '@/lib/abacus';
import { MustBigNumber } from '@/lib/numbers'; import { MustBigNumber } from '@/lib/numbers';
import { getNobleChainId } from '@/lib/squid';
import { TokenSelectMenu } from './TokenSelectMenu'; import { TokenSelectMenu } from './TokenSelectMenu';
import { WithdrawButtonAndReceipt } from './WithdrawForm/WithdrawButtonAndReceipt'; import { WithdrawButtonAndReceipt } from './WithdrawForm/WithdrawButtonAndReceipt';
@@ -66,7 +67,8 @@ export const WithdrawForm = () => {
resources, resources,
errors: routeErrors, errors: routeErrors,
errorMessage: routeErrorMessage, errorMessage: routeErrorMessage,
isCctp isCctp,
summary,
} = useSelector(getTransferInputs, shallowEqual) || {}; } = useSelector(getTransferInputs, shallowEqual) || {};
// User input // User input
@@ -74,7 +76,6 @@ export const WithdrawForm = () => {
const [slippage, setSlippage] = useState(isCctp ? 0 : 0.01); // 0.1% slippage const [slippage, setSlippage] = useState(isCctp ? 0 : 0.01); // 0.1% slippage
const debouncedAmount = useDebounce<string>(withdrawAmount, 500); const debouncedAmount = useDebounce<string>(withdrawAmount, 500);
const isValidAddress = toAddress && isAddress(toAddress); const isValidAddress = toAddress && isAddress(toAddress);
const toToken = useMemo( const toToken = useMemo(
@@ -167,16 +168,22 @@ export const WithdrawForm = () => {
}) })
); );
} else { } else {
const txHash = await sendSquidWithdraw(debouncedAmountBN.toNumber(), requestPayload.data); const txHash = await sendSquidWithdraw(
if (txHash?.hash) { debouncedAmountBN.toNumber(),
const hash = `0x${Buffer.from(txHash.hash).toString('hex')}`; requestPayload.data,
isCctp
);
if (txHash) {
addTransferNotification({ addTransferNotification({
txHash: hash, txHash: txHash,
fromChainId: ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId, type: TransferNotificationTypes.Withdrawal,
fromChainId: !isCctp
? ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId
: getNobleChainId(),
toChainId: chainIdStr || undefined, toChainId: chainIdStr || undefined,
toAmount: debouncedAmountBN.toNumber(), toAmount: debouncedAmountBN.toNumber(),
triggeredAt: Date.now(), triggeredAt: Date.now(),
notificationStatus: NotificationStatus.Triggered, isCctp,
}); });
abacusStateManager.clearTransferInputValues(); abacusStateManager.clearTransferInputValues();
setWithdrawAmount(''); setWithdrawAmount('');
@@ -282,10 +289,7 @@ export const WithdrawForm = () => {
const errorMessage = useMemo(() => { const errorMessage = useMemo(() => {
if (error) { if (error) {
return stringGetter({ return error;
key: STRING_KEYS.SOMETHING_WENT_WRONG_WITH_MESSAGE,
params: { ERROR_MESSAGE: error },
});
} }
if (routeErrors) { if (routeErrors) {
@@ -316,6 +320,21 @@ export const WithdrawForm = () => {
return stringGetter({ key: STRING_KEYS.WITHDRAW_MORE_THAN_FREE }); return stringGetter({ key: STRING_KEYS.WITHDRAW_MORE_THAN_FREE });
} }
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; return undefined;
}, [ }, [
error, error,
@@ -328,6 +347,7 @@ export const WithdrawForm = () => {
toAddress, toAddress,
sanctionedAddresses, sanctionedAddresses,
stringGetter, stringGetter,
summary,
]); ]);
const isDisabled = const isDisabled =
@@ -1,4 +1,4 @@
import { useState } from 'react'; import { useMemo, useState } from 'react';
import { shallowEqual, useSelector } from 'react-redux'; import { shallowEqual, useSelector } from 'react-redux';
import styled, { type AnyStyledComponent } from 'styled-components'; import styled, { type AnyStyledComponent } from 'styled-components';
import { formatUnits } from 'viem'; import { formatUnits } from 'viem';
@@ -6,14 +6,11 @@ import { formatUnits } from 'viem';
import { TransferInputTokenResource } from '@/constants/abacus'; import { TransferInputTokenResource } from '@/constants/abacus';
import { ButtonAction, ButtonShape, ButtonSize, ButtonType } from '@/constants/buttons'; import { ButtonAction, ButtonShape, ButtonSize, ButtonType } from '@/constants/buttons';
import { STRING_KEYS } from '@/constants/localization'; import { STRING_KEYS } from '@/constants/localization';
import { NumberSign } from '@/constants/numbers'; import { NumberSign, TOKEN_DECIMALS } from '@/constants/numbers';
import { formatSeconds } from '@/lib/timeUtils';
import { layoutMixins } from '@/styles/layoutMixins'; import { layoutMixins } from '@/styles/layoutMixins';
import { useStringGetter } from '@/hooks'; import { useStringGetter, useTokenConfigs } from '@/hooks';
import { useAccountBalance } from '@/hooks/useAccountBalance';
import { Button } from '@/components/Button'; import { Button } from '@/components/Button';
@@ -58,13 +55,9 @@ export const WithdrawButtonAndReceipt = ({
const stringGetter = useStringGetter(); const stringGetter = useStringGetter();
const { leverage } = useSelector(getSubaccount, shallowEqual) || {}; const { leverage } = useSelector(getSubaccount, shallowEqual) || {};
const { summary, requestPayload } = useSelector(getTransferInputs, shallowEqual) || {}; const { isCctp, summary, requestPayload } = useSelector(getTransferInputs, shallowEqual) || {};
const canAccountTrade = useSelector(calculateCanAccountTrade, shallowEqual); const canAccountTrade = useSelector(calculateCanAccountTrade, shallowEqual);
const { usdcLabel } = useTokenConfigs();
const toAmount =
summary?.toAmount &&
withdrawToken?.decimals &&
formatUnits(BigInt(summary.toAmount), withdrawToken?.decimals);
const feeSubitems: DetailsItem[] = []; const feeSubitems: DetailsItem[] = [];
@@ -89,9 +82,29 @@ export const WithdrawButtonAndReceipt = ({
const showSubitemsToggle = showFeeBreakdown const showSubitemsToggle = showFeeBreakdown
? stringGetter({ key: STRING_KEYS.HIDE_ALL_DETAILS }) ? stringGetter({ key: STRING_KEYS.HIDE_ALL_DETAILS })
: stringGetter({ key: STRING_KEYS.SHOW_ALL_DETAILS }); : stringGetter({ key: STRING_KEYS.SHOW_ALL_DETAILS });
const totalFees = (summary?.bridgeFee || 0) + (summary?.gasFee || 0); 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 &&
withdrawToken?.decimals &&
formatUnits(BigInt(summary.toAmount), withdrawToken.decimals),
toAmountMin:
summary?.toAmountMin &&
withdrawToken?.decimals &&
formatUnits(BigInt(summary.toAmountMin), withdrawToken.decimals),
};
}
}, [isCctp, summary, withdrawToken]);
const submitButtonReceipt = [ const submitButtonReceipt = [
{ {
key: 'total-fees', key: 'total-fees',
@@ -99,43 +112,12 @@ export const WithdrawButtonAndReceipt = ({
value: <Output type={OutputType.Fiat} value={totalFees} />, value: <Output type={OutputType.Fiat} value={totalFees} />,
subitems: feeSubitems, subitems: feeSubitems,
}, },
{
key: 'wallet',
label: (
<span>
{stringGetter({ key: STRING_KEYS.AMOUNT_RECEIVED })}{' '}
{withdrawToken && <Tag>{withdrawToken?.symbol}</Tag>}
</span>
),
value: (
<Styled.DiffOutput
type={OutputType.Asset}
value={'0'}
newValue={toAmount}
sign={NumberSign.Positive}
withDiff={Boolean(toAmount)}
/>
),
},
{
key: 'leverage',
label: <span>{stringGetter({ key: STRING_KEYS.ACCOUNT_LEVERAGE })}</span>,
value: (
<Styled.DiffOutput
type={OutputType.Multiple}
value={leverage?.current}
newValue={leverage?.postOrder}
sign={NumberSign.Negative}
withDiff={Boolean(leverage?.current && leverage.current !== leverage?.postOrder)}
/>
),
},
{ {
key: 'exchange-rate', key: 'exchange-rate',
label: <span>{stringGetter({ key: STRING_KEYS.EXCHANGE_RATE })}</span>, label: <span>{stringGetter({ key: STRING_KEYS.EXCHANGE_RATE })}</span>,
value: withdrawToken && typeof summary?.exchangeRate === 'number' && ( value: withdrawToken && typeof summary?.exchangeRate === 'number' && (
<Styled.ExchangeRate> <Styled.ExchangeRate>
<Output type={OutputType.Asset} value={1} fractionDigits={0} tag="USDC" /> <Output type={OutputType.Asset} value={1} fractionDigits={0} tag={usdcLabel} />
= =
<Output <Output
type={OutputType.Asset} type={OutputType.Asset}
@@ -146,19 +128,7 @@ export const WithdrawButtonAndReceipt = ({
), ),
}, },
{ {
key: 'slippage', key: 'estimated-route-duration',
label: <span>{stringGetter({ key: STRING_KEYS.SLIPPAGE })}</span>,
value: (
<SlippageEditor
disabled
slippage={slippage}
setIsEditing={setIsEditingSlipapge}
setSlippage={setSlippage}
/>
),
},
{
key: 'estimatedRouteDuration',
label: <span>{stringGetter({ key: STRING_KEYS.ESTIMATED_TIME })}</span>, label: <span>{stringGetter({ key: STRING_KEYS.ESTIMATED_TIME })}</span>,
value: typeof summary?.estimatedRouteDuration === 'number' && ( value: typeof summary?.estimatedRouteDuration === 'number' && (
<Output <Output
@@ -175,6 +145,56 @@ export const WithdrawButtonAndReceipt = ({
/> />
), ),
}, },
{
key: 'expected-amount-received',
label: (
<span>
{stringGetter({ key: STRING_KEYS.EXPECTED_AMOUNT_RECEIVED })}{' '}
{withdrawToken && <Tag>{withdrawToken?.symbol}</Tag>}
</span>
),
value: <Output type={OutputType.Asset} value={toAmount} fractionDigits={TOKEN_DECIMALS} />,
subitems: [
{
key: 'minimum-amount-received',
label: (
<span>
{stringGetter({ key: STRING_KEYS.MINIMUM_AMOUNT_RECEIVED })}{' '}
{withdrawToken && <Tag>{withdrawToken?.symbol}</Tag>}
</span>
),
value: (
<Output type={OutputType.Asset} value={toAmountMin} fractionDigits={TOKEN_DECIMALS} />
),
tooltip: 'minimum-amount-received',
},
],
},
{
key: 'slippage',
label: <span>{stringGetter({ key: STRING_KEYS.MAX_SLIPPAGE })}</span>,
value: (
<SlippageEditor
disabled
slippage={slippage}
setIsEditing={setIsEditingSlipapge}
setSlippage={setSlippage}
/>
),
},
{
key: 'leverage',
label: <span>{stringGetter({ key: STRING_KEYS.ACCOUNT_LEVERAGE })}</span>,
value: (
<Styled.DiffOutput
type={OutputType.Multiple}
value={leverage?.current}
newValue={leverage?.postOrder}
sign={NumberSign.Negative}
withDiff={Boolean(leverage?.current && leverage.current !== leverage?.postOrder)}
/>
),
},
]; ];
const isFormValid = !isDisabled && !isEditingSlippage; const isFormValid = !isDisabled && !isEditingSlippage;
+8 -7
View File
@@ -1,10 +1,10 @@
import { type Dispatch, type SetStateAction, useCallback, useMemo } from 'react'; import { useCallback, useMemo } from 'react';
import styled, { AnyStyledComponent, css } from 'styled-components'; import styled, { AnyStyledComponent, css } from 'styled-components';
import { Root, Thumb, Track } from '@radix-ui/react-slider'; import { Root, Thumb, Track } from '@radix-ui/react-slider';
import _ from 'lodash'; import _ from 'lodash';
import { OrderSide } from '@dydxprotocol/v4-client-js'; import { OrderSide } from '@dydxprotocol/v4-client-js';
import { type Nullable, TradeInputField } from '@/constants/abacus'; import { TradeInputField } from '@/constants/abacus';
import { PositionSide } from '@/constants/trade'; import { PositionSide } from '@/constants/trade';
import { MustBigNumber, type BigNumberish } from '@/lib/numbers'; import { MustBigNumber, type BigNumberish } from '@/lib/numbers';
@@ -12,11 +12,11 @@ import abacusStateManager from '@/lib/abacus';
type ElementProps = { type ElementProps = {
leverage?: BigNumberish | null; leverage?: BigNumberish | null;
leverageInputValue: Nullable<number>; leverageInputValue: string;
maxLeverage: BigNumberish | null; maxLeverage: BigNumberish | null;
orderSide: OrderSide; orderSide: OrderSide;
positionSide: PositionSide; positionSide: PositionSide;
setLeverageInputValue: Dispatch<SetStateAction<Nullable<number>>>; setLeverageInputValue: (value: string) => void;
}; };
type StyleProps = { className?: string }; type StyleProps = { className?: string };
@@ -33,6 +33,7 @@ export const LeverageSlider = ({
const leverageBN = MustBigNumber(leverage); const leverageBN = MustBigNumber(leverage);
const maxLeverageBN = MustBigNumber(maxLeverage); const maxLeverageBN = MustBigNumber(maxLeverage);
const leverageInputBN = MustBigNumber(leverageInputValue || leverage); const leverageInputBN = MustBigNumber(leverageInputValue || leverage);
const leverageInputNumber = isNaN(leverageInputBN.toNumber()) ? 0 : leverageInputBN.toNumber();
const sliderConfig = useMemo( const sliderConfig = useMemo(
() => ({ () => ({
@@ -79,12 +80,12 @@ export const LeverageSlider = ({
); );
const onSliderDrag = ([newLeverage]: number[]) => { const onSliderDrag = ([newLeverage]: number[]) => {
setLeverageInputValue(newLeverage); setLeverageInputValue(`${newLeverage}`);
debouncedSetAbacusLeverage(newLeverage); debouncedSetAbacusLeverage(newLeverage);
}; };
const onValueCommit = ([newLeverage]: number[]) => { const onValueCommit = ([newLeverage]: number[]) => {
setLeverageInputValue(newLeverage); setLeverageInputValue(`${newLeverage}`);
// Ensure Abacus is updated with the latest, committed value // Ensure Abacus is updated with the latest, committed value
debouncedSetAbacusLeverage.cancel(); debouncedSetAbacusLeverage.cancel();
@@ -102,7 +103,7 @@ export const LeverageSlider = ({
min={min} min={min}
max={max} max={max}
step={0.1} step={0.1}
value={[Math.min(Math.max(leverageInputBN.toNumber(), min), max)]} value={[Math.min(Math.max(leverageInputNumber, min), max)]}
onValueChange={onSliderDrag} onValueChange={onSliderDrag}
onValueCommit={onValueCommit} onValueCommit={onValueCommit}
> >
@@ -1,9 +1,8 @@
import type { Dispatch, SetStateAction } from 'react';
import { shallowEqual, useSelector } from 'react-redux'; import { shallowEqual, useSelector } from 'react-redux';
import styled, { AnyStyledComponent } from 'styled-components'; import styled, { AnyStyledComponent } from 'styled-components';
import { OrderSide } from '@dydxprotocol/v4-client-js'; import { OrderSide } from '@dydxprotocol/v4-client-js';
import { TradeInputField, Nullable } from '@/constants/abacus'; import { TradeInputField } from '@/constants/abacus';
import { ButtonShape } from '@/constants/buttons'; import { ButtonShape } from '@/constants/buttons';
import { STRING_KEYS } from '@/constants/localization'; import { STRING_KEYS } from '@/constants/localization';
import { LEVERAGE_DECIMALS } from '@/constants/numbers'; import { LEVERAGE_DECIMALS } from '@/constants/numbers';
@@ -62,21 +61,7 @@ export const MarketLeverageInput = ({
const leveragePosition = postOrderLeverage ? newPositionSide : currentPositionSide; const leveragePosition = postOrderLeverage ? newPositionSide : currentPositionSide;
const onLeverageInput = ({ value, floatValue }: { value: string; floatValue?: number }) => { const getSignedLeverage = (newLeverage: string | number) => {
const newLeverage = MustBigNumber(floatValue).toFixed();
if (value === '' || newLeverage === 'NaN' || !floatValue) {
setLeverageInputValue('');
abacusStateManager.setTradeValue({
value: null,
field: TradeInputField.leverage,
});
} else {
updateLeverage(floatValue);
}
};
const updateLeverage = (newLeverage: string | number) => {
const newLeverageBN = MustBigNumber(newLeverage); const newLeverageBN = MustBigNumber(newLeverage);
const newLeverageSignedBN = const newLeverageSignedBN =
leveragePosition === PositionSide.Short || leveragePosition === PositionSide.Short ||
@@ -84,10 +69,33 @@ export const MarketLeverageInput = ({
? newLeverageBN.abs().negated() ? newLeverageBN.abs().negated()
: newLeverageBN.abs(); : newLeverageBN.abs();
setLeverageInputValue(newLeverageSignedBN.toString()); return newLeverageSignedBN.toFixed(LEVERAGE_DECIMALS);
};
const onLeverageInput = ({
floatValue,
formattedValue,
}: {
floatValue?: number;
formattedValue: string;
}) => {
setLeverageInputValue(formattedValue);
const newLeverage = MustBigNumber(floatValue).toFixed();
abacusStateManager.setTradeValue({ abacusStateManager.setTradeValue({
value: newLeverageSignedBN.toFixed(LEVERAGE_DECIMALS), value:
formattedValue === '' || newLeverage === 'NaN' ? null : getSignedLeverage(formattedValue),
field: TradeInputField.leverage,
});
};
const updateLeverage = (newLeverage: string | number) => {
const newLeverageSigned = getSignedLeverage(newLeverage);
setLeverageInputValue(newLeverageSigned);
abacusStateManager.setTradeValue({
value: newLeverageSigned,
field: TradeInputField.leverage, field: TradeInputField.leverage,
}); });
}; };
@@ -130,7 +138,7 @@ export const MarketLeverageInput = ({
> >
<Styled.LeverageSlider <Styled.LeverageSlider
leverage={currentLeverage} leverage={currentLeverage}
leverageInputValue={leverageInputValue} leverageInputValue={getSignedLeverage(leverageInputValue)}
maxLeverage={maxLeverage} maxLeverage={maxLeverage}
orderSide={orderSide} orderSide={orderSide}
positionSide={currentPositionSide} positionSide={currentPositionSide}
@@ -77,7 +77,7 @@ export const TradeSizeInputs = () => {
floatValue?: number; floatValue?: number;
formattedValue: string; formattedValue: string;
}) => { }) => {
dispatch(setTradeFormInputs({ amountInput: MustBigNumber(floatValue).toString() })); dispatch(setTradeFormInputs({ amountInput: formattedValue }));
const newAmount = MustBigNumber(floatValue).toFixed(decimals); const newAmount = MustBigNumber(floatValue).toFixed(decimals);
abacusStateManager.setTradeValue({ abacusStateManager.setTradeValue({
@@ -93,7 +93,7 @@ export const TradeSizeInputs = () => {
floatValue?: number; floatValue?: number;
formattedValue: string; formattedValue: string;
}) => { }) => {
dispatch(setTradeFormInputs({ usdAmountInput: MustBigNumber(floatValue).toString() })); dispatch(setTradeFormInputs({ usdAmountInput: formattedValue }));
const newUsdcAmount = MustBigNumber(floatValue).toFixed(tickSizeDecimals || USD_DECIMALS); const newUsdcAmount = MustBigNumber(floatValue).toFixed(tickSizeDecimals || USD_DECIMALS);
abacusStateManager.setTradeValue({ abacusStateManager.setTradeValue({
@@ -12,10 +12,11 @@ import { LoadingSpinner } from '@/components/Loading/LoadingSpinner';
import { layoutMixins } from '@/styles/layoutMixins'; import { layoutMixins } from '@/styles/layoutMixins';
import { STRING_KEYS } from '@/constants/localization'; import { STRING_KEYS } from '@/constants/localization';
import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks'; import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
import { TransferNotificationTypes } from '@/constants/notifications';
type ElementProps = { type ElementProps = {
status?: StatusResponse; status?: StatusResponse;
type: 'withdrawal' | 'deposit'; type: TransferNotificationTypes;
}; };
type StyleProps = { type StyleProps = {
@@ -46,11 +47,13 @@ export const TransferStatusSteps = ({ className, status, type }: ElementProps &
{ {
label: stringGetter({ label: stringGetter({
key: key:
type === 'deposit' ? STRING_KEYS.INITIATED_DEPOSIT : STRING_KEYS.INITIATED_WITHDRAWAL, type === TransferNotificationTypes.Deposit
? STRING_KEYS.INITIATED_DEPOSIT
: STRING_KEYS.INITIATED_WITHDRAWAL,
}), }),
step: TransferStatusStep.FromChain, step: TransferStatusStep.FromChain,
link: link:
type === 'deposit' type === TransferNotificationTypes.Deposit
? status?.fromChain?.transactionUrl ? status?.fromChain?.transactionUrl
: routeStatus?.[0]?.chainId === dydxChainId && routeStatus[0].txHash : routeStatus?.[0]?.chainId === dydxChainId && routeStatus[0].txHash
? `${mintscanTxUrl?.replace('{tx_hash}', routeStatus[0].txHash.replace('0x', ''))}` ? `${mintscanTxUrl?.replace('{tx_hash}', routeStatus[0].txHash.replace('0x', ''))}`
@@ -63,14 +66,20 @@ export const TransferStatusSteps = ({ className, status, type }: ElementProps &
}, },
{ {
label: stringGetter({ label: stringGetter({
key: type === 'deposit' ? STRING_KEYS.DEPOSIT_TO_CHAIN : STRING_KEYS.WITHDRAW_TO_CHAIN, key:
type === TransferNotificationTypes.Deposit
? STRING_KEYS.DEPOSIT_TO_CHAIN
: STRING_KEYS.WITHDRAW_TO_CHAIN,
params: { params: {
CHAIN: type === 'deposit' ? 'dYdX' : status?.toChain?.chainData?.chainName, CHAIN:
type === TransferNotificationTypes.Deposit
? 'dYdX'
: status?.toChain?.chainData?.chainName,
}, },
}), }),
step: TransferStatusStep.ToChain, step: TransferStatusStep.ToChain,
link: link:
type === 'withdrawal' type === TransferNotificationTypes.Withdrawal
? status?.toChain?.transactionUrl ? status?.toChain?.transactionUrl
: currentStatus?.chainId === dydxChainId && currentStatus?.txHash : currentStatus?.chainId === dydxChainId && currentStatus?.txHash
? `${mintscanTxUrl?.replace('{tx_hash}', currentStatus.txHash.replace('0x', ''))}` ? `${mintscanTxUrl?.replace('{tx_hash}', currentStatus.txHash.replace('0x', ''))}`
@@ -5,7 +5,7 @@ import { useInterval, useStringGetter } from '@/hooks';
import { AlertType } from '@/constants/alerts'; import { AlertType } from '@/constants/alerts';
import { STRING_KEYS } from '@/constants/localization'; import { STRING_KEYS } from '@/constants/localization';
import { TransferNotifcation } from '@/constants/notifications'; import { TransferNotifcation, TransferNotificationTypes } from '@/constants/notifications';
import { formatSeconds } from '@/lib/timeUtils'; import { formatSeconds } from '@/lib/timeUtils';
@@ -22,7 +22,7 @@ import { layoutMixins } from '@/styles/layoutMixins';
import { TransferStatusSteps } from './TransferStatusSteps'; import { TransferStatusSteps } from './TransferStatusSteps';
type ElementProps = { type ElementProps = {
type: 'withdrawal' | 'deposit'; type: TransferNotificationTypes;
transfer: TransferNotifcation; transfer: TransferNotifcation;
triggeredAt?: number; triggeredAt?: number;
}; };
@@ -55,7 +55,7 @@ export const TransferStatusNotification = ({
useInterval({ callback: updateSecondsLeft }); useInterval({ callback: updateSecondsLeft });
const inProgressStatusString = const inProgressStatusString =
type === 'deposit' type === TransferNotificationTypes.Deposit
? secondsLeft > 0 ? secondsLeft > 0
? STRING_KEYS.DEPOSIT_STATUS ? STRING_KEYS.DEPOSIT_STATUS
: STRING_KEYS.DEPOSIT_STATUS_SHORTLY : STRING_KEYS.DEPOSIT_STATUS_SHORTLY
@@ -64,7 +64,7 @@ export const TransferStatusNotification = ({
: STRING_KEYS.WITHDRAW_STATUS_SHORTLY; : STRING_KEYS.WITHDRAW_STATUS_SHORTLY;
const statusString = const statusString =
type === 'deposit' type === TransferNotificationTypes.Deposit
? status?.squidTransactionStatus === 'success' ? status?.squidTransactionStatus === 'success'
? STRING_KEYS.DEPOSIT_COMPLETE ? STRING_KEYS.DEPOSIT_COMPLETE
: inProgressStatusString : inProgressStatusString
+3 -2
View File
@@ -4,7 +4,7 @@ import { useNavigate } from 'react-router-dom';
import { STRING_KEYS } from '@/constants/localization'; import { STRING_KEYS } from '@/constants/localization';
import { MarketFilters, type MarketData } from '@/constants/markets'; import { MarketFilters, type MarketData } from '@/constants/markets';
import { LARGE_TOKEN_DECIMALS } from '@/constants/numbers'; import { FUNDING_DECIMALS, LARGE_TOKEN_DECIMALS } from '@/constants/numbers';
import { AppRoute } from '@/constants/routes'; import { AppRoute } from '@/constants/routes';
import { useBreakpoints, useStringGetter } from '@/hooks'; import { useBreakpoints, useStringGetter } from '@/hooks';
@@ -128,7 +128,8 @@ export const MarketsTable = ({ className }: { className?: string }) => {
label: stringGetter({ key: STRING_KEYS.FUNDING_RATE_1H_SHORT }), label: stringGetter({ key: STRING_KEYS.FUNDING_RATE_1H_SHORT }),
renderCell: (row) => ( renderCell: (row) => (
<Styled.Output <Styled.Output
type={OutputType.SmallPercent} type={OutputType.Percent}
fractionDigits={FUNDING_DECIMALS}
value={row.nextFundingRate} value={row.nextFundingRate}
isPositive={MustBigNumber(row.nextFundingRate).gt(0)} isPositive={MustBigNumber(row.nextFundingRate).gt(0)}
isNegative={MustBigNumber(row.nextFundingRate).isNegative()} isNegative={MustBigNumber(row.nextFundingRate).isNegative()}
+2 -11
View File
@@ -230,14 +230,7 @@ const getOrdersTableColumnDef = ({
label: `${stringGetter({ key: STRING_KEYS.STATUS })} / ${stringGetter({ label: `${stringGetter({ key: STRING_KEYS.STATUS })} / ${stringGetter({
key: STRING_KEYS.FILL, key: STRING_KEYS.FILL,
})}`, })}`,
renderCell: ({ renderCell: ({ asset, createdAtMilliseconds, size, status, totalFilled, resources }) => {
asset,
createdAtMilliseconds,
size,
status,
totalFilled,
resources,
}) => {
const { statusIconColor, statusStringKey } = getStatusIconInfo({ const { statusIconColor, statusStringKey } = getStatusIconInfo({
status, status,
totalFilled, totalFilled,
@@ -345,9 +338,7 @@ export const OrdersTable = ({
if (hasUnseenOrderUpdates) dispatch(viewedOrders()); if (hasUnseenOrderUpdates) dispatch(viewedOrders());
}, [hasUnseenOrderUpdates]); }, [hasUnseenOrderUpdates]);
const symbol = currentMarket const symbol = currentMarket ? allAssets[allPerpetualMarkets[currentMarket]?.assetId]?.id : null;
? allAssets[allPerpetualMarkets[currentMarket]?.assetId]?.symbol
: null;
const ordersData = orders.map((order: SubaccountOrder) => const ordersData = orders.map((order: SubaccountOrder) =>
getHydratedTradingData({ getHydratedTradingData({
+1
View File
@@ -366,6 +366,7 @@ Styled.InlineRow = styled.div`
Styled.AssetIcon = styled(AssetIcon)` Styled.AssetIcon = styled(AssetIcon)`
${layoutMixins.inlineRow} ${layoutMixins.inlineRow}
min-width: unset;
font-size: 2.25rem; font-size: 2.25rem;
`; `;