Merge branch 'main' into canvas-orderbook

* 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

package.json

@@ -39,11 +39,12 @@
     "@cosmjs/proto-signing": "^0.31.0",
     "@cosmjs/stargate": "^0.31.0",
     "@cosmjs/tendermint-rpc": "^0.31.0",
-    "@dydxprotocol/v4-abacus": "^1.0.24",
+    "@dydxprotocol/v4-abacus": "^1.1.32",
-    "@dydxprotocol/v4-client-js": "^1.0.0",
+    "@dydxprotocol/v4-client-js": "^1.0.11",
-    "@dydxprotocol/v4-localization": "^1.0.5",
+    "@dydxprotocol/v4-localization": "^1.1.5",
     "@ethersproject/providers": "^5.7.2",
     "@js-joda/core": "^5.5.3",
+    "@radix-ui/react-accordion": "^1.1.2",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-collapsible": "^1.0.3",
     "@radix-ui/react-dialog": "^1.0.4",
@@ -111,7 +112,7 @@
     "styled-components": "^5.3.11",
     "use-latest": "^1.2.1",
     "viem": "^1.12.2",
-    "wagmi": "^1.4.5"
+    "wagmi": "^1.4.12"
   },
   "devDependencies": {
     "@babel/core": "^7.22.5",

public/configs/cctp.json

@@ -0,0 +1,12 @@
+[
+    {
+        "chainId": "1",
+        "tokenAddress": "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
+        "name": "Ethereum"
+    },
+    {
+        "chainId": "5",
+        "tokenAddress": "0x07865c6E87B9F70255377e024ace6630C1Eaa37F",
+        "name": "Ethereum Goerli"
+    }
+]

public/configs/documentation.json

@@ -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"
+        }
+    ]
+}

public/configs/env.json

@@ -42,7 +42,7 @@
          "ethereumChainId": "5",
          "dydxChainId": "dydxprotocol-testnet",
          "chainName": "dYdX Chain",
-         "chainLogo": "dydx-chain.png",
+         "chainLogo": "/dydx-chain.png",
          "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
@@ -71,6 +71,7 @@
                "https://validator.v4dev.dydx.exchange"
             ],
             "0xsquid": "https://testnet.api.0xsquid.com",
+            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
             "faucet": "https://faucet.v4dev.dydx.exchange"
          },
          "links": {
@@ -88,7 +89,7 @@
             "governanceLearnMore": "https://help.dydx.exchange",
             "stakingLearnMore": "https://help.dydx.exchange",
             "keplrDashboard": "https://testnet.keplr.app/",
-            "accountExportLearnMore": "https://help.dydx.exchange",
+            "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
             "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
          },
          "wallets": {
@@ -115,7 +116,7 @@
          "ethereumChainId": "5",
          "dydxChainId": "dydxprotocol-testnet",
          "chainName": "dYdX Chain",
-         "chainLogo": "dydx-chain.png",
+         "chainLogo": "/dydx-chain.png",
          "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
@@ -143,7 +144,8 @@
             "validators": [
                "http://54.92.118.111"
             ],
-            "0xsquid": "https://testnet.api.0xsquid.com"
+            "0xsquid": "https://testnet.api.0xsquid.com",
+            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/"
          },
          "links": {
             "tos": "https://dydx.exchange/v4-terms",
@@ -160,7 +162,7 @@
             "governanceLearnMore": "https://help.dydx.exchange",
             "stakingLearnMore": "https://help.dydx.exchange",
             "keplrDashboard": "https://testnet.keplr.app/",
-            "accountExportLearnMore": "https://help.dydx.exchange",
+            "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
             "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
          },
          "wallets": {
@@ -187,7 +189,7 @@
          "ethereumChainId": "5",
          "dydxChainId": "dydxprotocol-testnet",
          "chainName": "dYdX Chain",
-         "chainLogo": "dydx-chain.png",
+         "chainLogo": "/dydx-chain.png",
          "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
@@ -215,7 +217,8 @@
             "validators": [
                "http://validator.v4dev4.dydx.exchange"
             ],
-            "0xsquid": "https://testnet.api.0xsquid.com"
+            "0xsquid": "https://testnet.api.0xsquid.com",
+            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/"
          },
          "links": {
             "tos": "https://dydx.exchange/v4-terms",
@@ -232,7 +235,7 @@
             "governanceLearnMore": "https://help.dydx.exchange",
             "stakingLearnMore": "https://help.dydx.exchange",
             "keplrDashboard": "https://testnet.keplr.app/",
-            "accountExportLearnMore": "https://help.dydx.exchange",
+            "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
             "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
          },
          "wallets": {
@@ -259,7 +262,7 @@
          "ethereumChainId": "5",
          "dydxChainId": "dydxprotocol-testnet",
          "chainName": "dYdX Chain",
-         "chainLogo": "dydx-chain.png",
+         "chainLogo": "/dydx-chain.png",
          "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
@@ -287,7 +290,8 @@
             "validators": [
                "http://18.223.78.50"
             ],
-            "0xsquid": "https://testnet.api.0xsquid.com"
+            "0xsquid": "https://testnet.api.0xsquid.com",
+            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/"
          },
          "links": {
             "tos": "https://dydx.exchange/v4-terms",
@@ -304,7 +308,7 @@
             "governanceLearnMore": "https://help.dydx.exchange",
             "stakingLearnMore": "https://help.dydx.exchange",
             "keplrDashboard": "https://testnet.keplr.app/",
-            "accountExportLearnMore": "https://help.dydx.exchange",
+            "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
             "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
          },
          "wallets": {
@@ -331,7 +335,7 @@
          "ethereumChainId": "5",
          "dydxChainId": "dydxprotocol-testnet",
          "chainName": "dYdX Chain",
-         "chainLogo": "dydx-chain.png",
+         "chainLogo": "/dydx-chain.png",
          "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
@@ -360,7 +364,8 @@
             "validators": [
                "https://validator.v4staging.dydx.exchange"
             ],
-            "0xsquid": "https://testnet.api.squidrouter.com"
+            "0xsquid": "https://testnet.api.squidrouter.com",
+            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/"
          },
          "links": {
             "tos": "https://dydx.exchange/v4-terms",
@@ -378,7 +383,7 @@
             "governanceLearnMore": "https://help.dydx.exchange",
             "stakingLearnMore": "https://help.dydx.exchange",
             "keplrDashboard": "https://testnet.keplr.app/",
-            "accountExportLearnMore": "https://help.dydx.exchange",
+            "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
             "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
          },
          "wallets": {
@@ -405,7 +410,8 @@
          "ethereumChainId": "5",
          "dydxChainId": "dydxprotocol-testnet",
          "chainName": "dYdX Chain",
-         "chainLogo": "dydx-chain.png",
+         "chainLogo": "/dydx-chain.png",
+         "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
             "chain": {
@@ -433,7 +439,8 @@
             "validators": [
                "https://validator.v4staging.dydx.exchange"
             ],
-            "0xsquid": "https://testnet.api.squidrouter.com"
+            "0xsquid": "https://testnet.api.squidrouter.com",
+            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/"
          },
          "links": {
             "tos": "https://dydx.exchange/v4-terms",
@@ -476,7 +483,7 @@
          "ethereumChainId": "5",
          "dydxChainId": "dydxprotocol-testnet",
          "chainName": "dYdX Chain",
-         "chainLogo": "dydx-chain.png",
+         "chainLogo": "/dydx-chain.png",
          "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
@@ -505,7 +512,8 @@
             "validators": [
                "https://validator-uswest1.v4staging.dydx.exchange"
             ],
-            "0xsquid": "https://testnet.api.squidrouter.com"
+            "0xsquid": "https://testnet.api.squidrouter.com",
+            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/"
          },
          "links": {
             "tos": "https://dydx.exchange/v4-terms",
@@ -523,7 +531,7 @@
             "governanceLearnMore": "https://help.dydx.exchange",
             "stakingLearnMore": "https://help.dydx.exchange",
             "keplrDashboard": "https://testnet.keplr.app/",
-            "accountExportLearnMore": "https://help.dydx.exchange",
+            "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
             "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
          },
          "wallets": {
@@ -550,7 +558,7 @@
          "ethereumChainId": "5",
          "dydxChainId": "dydx-testnet-4",
          "chainName": "dYdX Chain",
-         "chainLogo": "dydx-chain.png",
+         "chainLogo": "/dydx-chain.png",
          "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
@@ -583,6 +591,7 @@
                "https://dydx-rpc.liquify.com/api=8878132/dydx"
             ],
             "0xsquid": "https://testnet.api.squidrouter.com",
+            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
             "faucet": "https://faucet.v4testnet.dydx.exchange"
          },
          "links": {
@@ -601,7 +610,7 @@
             "governanceLearnMore": "https://help.dydx.exchange",
             "stakingLearnMore": "https://help.dydx.exchange",
             "keplrDashboard": "https://testnet.keplr.app/",
-            "accountExportLearnMore": "https://help.dydx.exchange",
+            "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
             "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
          },
          "wallets": {
@@ -628,7 +637,7 @@
          "ethereumChainId": "5",
          "dydxChainId": "dydx-testnet-4",
          "chainName": "dYdX Chain",
-         "chainLogo": "dydx-chain.png",
+         "chainLogo": "/dydx-chain.png",
          "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
@@ -657,6 +666,7 @@
                "https://validator.v4testnet.dydx.exchange"
             ],
             "0xsquid": "https://testnet.api.squidrouter.com",
+            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
             "faucet": "https://faucet.v4testnet.dydx.exchange"
          },
          "links": {
@@ -676,7 +686,7 @@
             "governanceLearnMore": "https://help.dydx.exchange",
             "stakingLearnMore": "https://help.dydx.exchange",
             "keplrDashboard": "https://testnet.keplr.app/",
-            "accountExportLearnMore": "https://help.dydx.exchange",
+            "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
             "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
          },
          "wallets": {
@@ -703,7 +713,7 @@
          "ethereumChainId": "5",
          "dydxChainId": "dydx-testnet-4",
          "chainName": "dYdX Chain",
-         "chainLogo": "dydx-chain.png",
+         "chainLogo": "/dydx-chain.png",
          "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
@@ -732,6 +742,7 @@
                "https://dydx-testnet.nodefleet.org"
             ],
             "0xsquid": "https://testnet.api.squidrouter.com",
+            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
             "faucet": "https://faucet.v4testnet.dydx.exchange"
          },
          "links": {
@@ -751,7 +762,7 @@
             "governanceLearnMore": "https://help.dydx.exchange",
             "stakingLearnMore": "https://help.dydx.exchange",
             "keplrDashboard": "https://testnet.keplr.app/",
-            "accountExportLearnMore": "https://help.dydx.exchange",
+            "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
             "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
          },
          "wallets": {
@@ -778,7 +789,7 @@
          "ethereumChainId": "5",
          "dydxChainId": "dydx-testnet-4",
          "chainName": "dYdX Chain",
-         "chainLogo": "dydx-chain.png",
+         "chainLogo": "/dydx-chain.png",
          "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
@@ -807,6 +818,7 @@
                "https://test-dydx.kingnodes.com"
             ],
             "0xsquid": "https://testnet.api.squidrouter.com",
+            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
             "faucet": "https://faucet.v4testnet.dydx.exchange"
          },
          "links": {
@@ -826,7 +838,7 @@
             "governanceLearnMore": "https://help.dydx.exchange",
             "stakingLearnMore": "https://help.dydx.exchange",
             "keplrDashboard": "https://testnet.keplr.app/",
-            "accountExportLearnMore": "https://help.dydx.exchange",
+            "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
             "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
          },
          "wallets": {
@@ -853,7 +865,7 @@
          "ethereumChainId": "5",
          "dydxChainId": "dydx-testnet-4",
          "chainName": "dYdX Chain",
-         "chainLogo": "dydx-chain.png",
+         "chainLogo": "/dydx-chain.png",
          "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
@@ -882,6 +894,7 @@
                "https://dydx-rpc.liquify.com/api=8878132/dydx"
             ],
             "0xsquid": "https://testnet.api.squidrouter.com",
+            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
             "faucet": "https://faucet.v4testnet.dydx.exchange"
          },
          "links": {
@@ -901,7 +914,7 @@
             "governanceLearnMore": "https://help.dydx.exchange",
             "stakingLearnMore": "https://help.dydx.exchange",
             "keplrDashboard": "https://testnet.keplr.app/",
-            "accountExportLearnMore": "https://help.dydx.exchange",
+            "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
             "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
          },
          "wallets": {
@@ -928,7 +941,7 @@
          "ethereumChainId": "5",
          "dydxChainId": "dydx-testnet-4",
          "chainName": "dYdX Chain",
-         "chainLogo": "dydx-chain.png",
+         "chainLogo": "/dydx-chain.png",
          "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
@@ -957,6 +970,7 @@
                "https://dydx-testnet-rpc.polkachu.com/"
             ],
             "0xsquid": "https://testnet.api.squidrouter.com",
+            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
             "faucet": "https://faucet.v4testnet.dydx.exchange"
          },
          "links": {
@@ -994,7 +1008,7 @@
          "ethereumChainId": "5",
          "dydxChainId": "dydx-testnet-4",
          "chainName": "dYdX Chain",
-         "chainLogo": "dydx-chain.png",
+         "chainLogo": "/dydx-chain.png",
          "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
@@ -1023,6 +1037,7 @@
                "https://dydx-testnet-full-rpc.public.blastapi.io/"
             ],
             "0xsquid": "https://testnet.api.squidrouter.com",
+            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
             "faucet": "https://faucet.v4testnet.dydx.exchange"
          },
          "links": {
@@ -1069,7 +1084,7 @@
          "ethereumChainId": "1",
          "dydxChainId": "[mainnet chain id]",
          "chainName": "dYdX Chain",
-         "chainLogo": "dydx-chain.png",
+         "chainLogo": "/dydx-chain.png",
          "squidIntegratorId": "[mainnet squid integrator id]",
          "isMainNet": true,
          "tokens": {
@@ -1099,7 +1114,8 @@
                "[Validator endpoint 1",
                "[Validator endpoint n]"
             ],
-            "0xsquid": "[0xSquid endpoint for mainnet]"
+            "0xsquid": "[0xSquid endpoint for mainnet]",
+            "nobleValidator": "[noble validator endpoint for mainnet]"
          },
          "links": {
             "tos": "[HTTP link to TOS]",
@@ -1110,7 +1126,7 @@
             "blogs": "[HTTP link to blogs, can be null]",
             "foundation": "[HTTP link to foundation, can be null]",
             "initialMarginFractionLearnMore": "[HTTP link to initial margin fraction learn more, can be null]",
-            "reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
+            "reduceOnlyLearnMore": "[HTTP link to reduce-only learn more, can be null]",
             "documentation": "[HTTP link to documentation, can be null]",
             "community": "[HTTP link to community, can be null]",
             "help": "[HTTP link to help page, can be null]",

public/configs/markets.json

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

public/configs/wallets.json

@@ -199,7 +199,7 @@
     },
     "mobile": {
       "native": "trust:",
-      "universal": "https://link.trustwallet.com"
+      "universal": ""
     },
     "desktop": {
       "native": "",

src/App.tsx

@@ -1,4 +1,4 @@
-import { Suspense } from 'react';
+import { lazy, Suspense } from 'react';
 import { Navigate, Route, Routes } from 'react-router-dom';
 import styled, { AnyStyledComponent, css } from 'styled-components';
 import { WagmiConfig } from 'wagmi';
@@ -22,21 +22,9 @@ import { NotificationsProvider } from '@/hooks/useNotifications';
 import { LocalNotificationsProvider } from '@/hooks/useLocalNotifications';
 import { RestrictionProvider } from '@/hooks/useRestrictions';
 import { SubaccountProvider } from '@/hooks/useSubaccount';
-import { SquidProvider } from '@/hooks/useSquid';
-import { TestFlagsProvider } from '@/hooks/useTestFlags';
 
 import { GuardedMobileRoute } from '@/components/GuardedMobileRoute';
 
-import MarketsPage from '@/pages/markets/Markets';
-import PortfolioPage from '@/pages/portfolio/Portfolio';
-import { AlertsPage } from '@/pages/AlertsPage';
-import ProfilePage from '@/pages/Profile';
-import { SettingsPage } from '@/pages/settings/Settings';
-import TradePage from '@/pages/trade/Trade';
-import { RewardsPage } from '@/pages/rewards/RewardsPage';
-import { TermsOfUsePage } from '@/pages/TermsOfUsePage';
-import { PrivacyPolicyPage } from '@/pages/PrivacyPolicyPage';
-
 import { HeaderDesktop } from '@/layout/Header/HeaderDesktop';
 import { FooterDesktop } from '@/layout/Footer/FooterDesktop';
 import { FooterMobile } from '@/layout/Footer/FooterMobile';
@@ -48,11 +36,22 @@ import { config } from '@/lib/wagmi';
 
 import { breakpoints } from '@/styles';
 import { layoutMixins } from '@/styles/layoutMixins';
+import { LoadingSpace } from './components/Loading/LoadingSpinner';
 
 import '@/styles/constants.css';
 import '@/styles/fonts.css';
 import '@/styles/web3modal.css';
 
+const MarketsPage = lazy(() => import('@/pages/markets/Markets'));
+const PortfolioPage = lazy(() => import('@/pages/portfolio/Portfolio'));
+const AlertsPage = lazy(() => import('@/pages/AlertsPage'));
+const ProfilePage = lazy(() => import('@/pages/Profile'));
+const SettingsPage = lazy(() => import('@/pages/settings/Settings'));
+const TradePage = lazy(() => import('@/pages/trade/Trade'));
+const RewardsPage = lazy(() => import('@/pages/rewards/RewardsPage'));
+const TermsOfUsePage = lazy(() => import('@/pages/TermsOfUsePage'));
+const PrivacyPolicyPage = lazy(() => import('@/pages/PrivacyPolicyPage'));
+
 const queryClient = new QueryClient();
 
 const Content = () => {
@@ -71,7 +70,7 @@ const Content = () => {
       {isNotTablet && <HeaderDesktop />}
 
       <Styled.Main>
-        <Suspense fallback={null}>
+        <Suspense fallback={<LoadingSpace id="main" />}>
           <Routes>
             <Route path={AppRoute.Trade}>
               <Route path=":market" element={<TradePage />} />
@@ -124,13 +123,11 @@ const providers = [
   wrapProvider(QueryClientProvider, { client: queryClient }),
   wrapProvider(GrazProvider),
   wrapProvider(WagmiConfig, { config }),
-  wrapProvider(TestFlagsProvider),
   wrapProvider(LocaleProvider),
   wrapProvider(RestrictionProvider),
   wrapProvider(DydxProvider),
   wrapProvider(AccountsProvider),
   wrapProvider(SubaccountProvider),
-  wrapProvider(SquidProvider),
   wrapProvider(LocalNotificationsProvider),
   wrapProvider(NotificationsProvider),
   wrapProvider(DialogAreaProvider),

src/abi/erc20_usdt.json

@@ -0,0 +1,390 @@
+[
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "name",
+    "outputs": [{ "name": "", "type": "string" }],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [{ "name": "_upgradedAddress", "type": "address" }],
+    "name": "deprecate",
+    "outputs": [],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      { "name": "_spender", "type": "address" },
+      { "name": "_value", "type": "uint256" }
+    ],
+    "name": "approve",
+    "outputs": [],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "deprecated",
+    "outputs": [{ "name": "", "type": "bool" }],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [{ "name": "_evilUser", "type": "address" }],
+    "name": "addBlackList",
+    "outputs": [],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "totalSupply",
+    "outputs": [{ "name": "", "type": "uint256" }],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      { "name": "_from", "type": "address" },
+      { "name": "_to", "type": "address" },
+      { "name": "_value", "type": "uint256" }
+    ],
+    "name": "transferFrom",
+    "outputs": [],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "upgradedAddress",
+    "outputs": [{ "name": "", "type": "address" }],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [{ "name": "", "type": "address" }],
+    "name": "balances",
+    "outputs": [{ "name": "", "type": "uint256" }],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "decimals",
+    "outputs": [{ "name": "", "type": "uint256" }],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "maximumFee",
+    "outputs": [{ "name": "", "type": "uint256" }],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "_totalSupply",
+    "outputs": [{ "name": "", "type": "uint256" }],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [],
+    "name": "unpause",
+    "outputs": [],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [{ "name": "_maker", "type": "address" }],
+    "name": "getBlackListStatus",
+    "outputs": [{ "name": "", "type": "bool" }],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [
+      { "name": "", "type": "address" },
+      { "name": "", "type": "address" }
+    ],
+    "name": "allowed",
+    "outputs": [{ "name": "", "type": "uint256" }],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "paused",
+    "outputs": [{ "name": "", "type": "bool" }],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [{ "name": "who", "type": "address" }],
+    "name": "balanceOf",
+    "outputs": [{ "name": "", "type": "uint256" }],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [],
+    "name": "pause",
+    "outputs": [],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "getOwner",
+    "outputs": [{ "name": "", "type": "address" }],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "owner",
+    "outputs": [{ "name": "", "type": "address" }],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "symbol",
+    "outputs": [{ "name": "", "type": "string" }],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      { "name": "_to", "type": "address" },
+      { "name": "_value", "type": "uint256" }
+    ],
+    "name": "transfer",
+    "outputs": [],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [
+      { "name": "newBasisPoints", "type": "uint256" },
+      { "name": "newMaxFee", "type": "uint256" }
+    ],
+    "name": "setParams",
+    "outputs": [],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [{ "name": "amount", "type": "uint256" }],
+    "name": "issue",
+    "outputs": [],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [{ "name": "amount", "type": "uint256" }],
+    "name": "redeem",
+    "outputs": [],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [
+      { "name": "_owner", "type": "address" },
+      { "name": "_spender", "type": "address" }
+    ],
+    "name": "allowance",
+    "outputs": [{ "name": "remaining", "type": "uint256" }],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "basisPointsRate",
+    "outputs": [{ "name": "", "type": "uint256" }],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [{ "name": "", "type": "address" }],
+    "name": "isBlackListed",
+    "outputs": [{ "name": "", "type": "bool" }],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [{ "name": "_clearedUser", "type": "address" }],
+    "name": "removeBlackList",
+    "outputs": [],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": true,
+    "inputs": [],
+    "name": "MAX_UINT",
+    "outputs": [{ "name": "", "type": "uint256" }],
+    "payable": false,
+    "stateMutability": "view",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [{ "name": "newOwner", "type": "address" }],
+    "name": "transferOwnership",
+    "outputs": [],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "constant": false,
+    "inputs": [{ "name": "_blackListedUser", "type": "address" }],
+    "name": "destroyBlackFunds",
+    "outputs": [],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "function"
+  },
+  {
+    "inputs": [
+      { "name": "_initialSupply", "type": "uint256" },
+      { "name": "_name", "type": "string" },
+      { "name": "_symbol", "type": "string" },
+      { "name": "_decimals", "type": "uint256" }
+    ],
+    "payable": false,
+    "stateMutability": "nonpayable",
+    "type": "constructor"
+  },
+  {
+    "anonymous": false,
+    "inputs": [{ "indexed": false, "name": "amount", "type": "uint256" }],
+    "name": "Issue",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [{ "indexed": false, "name": "amount", "type": "uint256" }],
+    "name": "Redeem",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [{ "indexed": false, "name": "newAddress", "type": "address" }],
+    "name": "Deprecate",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      { "indexed": false, "name": "feeBasisPoints", "type": "uint256" },
+      { "indexed": false, "name": "maxFee", "type": "uint256" }
+    ],
+    "name": "Params",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      { "indexed": false, "name": "_blackListedUser", "type": "address" },
+      { "indexed": false, "name": "_balance", "type": "uint256" }
+    ],
+    "name": "DestroyedBlackFunds",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [{ "indexed": false, "name": "_user", "type": "address" }],
+    "name": "AddedBlackList",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [{ "indexed": false, "name": "_user", "type": "address" }],
+    "name": "RemovedBlackList",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      { "indexed": true, "name": "owner", "type": "address" },
+      { "indexed": true, "name": "spender", "type": "address" },
+      { "indexed": false, "name": "value", "type": "uint256" }
+    ],
+    "name": "Approval",
+    "type": "event"
+  },
+  {
+    "anonymous": false,
+    "inputs": [
+      { "indexed": true, "name": "from", "type": "address" },
+      { "indexed": true, "name": "to", "type": "address" },
+      { "indexed": false, "name": "value", "type": "uint256" }
+    ],
+    "name": "Transfer",
+    "type": "event"
+  },
+  { "anonymous": false, "inputs": [], "name": "Pause", "type": "event" },
+  { "anonymous": false, "inputs": [], "name": "Unpause", "type": "event" }
+]

src/components/Accordion.tsx

@@ -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);
+  }
+`;

src/components/AssetIcon.tsx

@@ -45,6 +45,7 @@ const assetIcons = {
   SOL: '/currencies/sol.png',
   SUI: '/currencies/sui.png',
   SUSHI: '/currencies/sushi.png',
+  TIA: '/currencies/tia.png',
   TRX: '/currencies/trx.png',
   UMA: '/currencies/uma.png',
   UNI: '/currencies/uni.png',
@@ -71,8 +72,13 @@ export const AssetIcon = ({
 }: {
   symbol?: Nullable<string>;
   className?: string;
-}) =>
+}) => (
-  isAssetSymbol(symbol) ? <Styled.Img src={assetIcons[symbol]} className={className} /> : null;
+  <Styled.Img
+    src={isAssetSymbol(symbol) ? assetIcons[symbol] : '/currencies/unavailable.png'}
+    className={className}
+    alt={symbol}
+  />
+);
 
 const Styled: Record<string, AnyStyledComponent> = {};
 

src/components/Button.tsx

@@ -61,7 +61,7 @@ export const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonPr
 
     return (
       <StyledBaseButton
-        disabled={state[ButtonState.Disabled]}
+        disabled={state[ButtonState.Disabled] || state[ButtonState.Loading]}
         {...{ ref, action, size, shape, state, ...otherProps }}
       >
         {

src/components/Canvas.tsx

@@ -0,0 +1,16 @@
+import { forwardRef } from 'react';
+
+type StyleProps = {
+  className?: string;
+};
+
+type ElementProps = {
+  width: number | string;
+  height: number | string;
+};
+
+export const Canvas = forwardRef<HTMLCanvasElement, ElementProps & StyleProps>(
+  ({ className, width, height }, canvasRef) => (
+    <canvas ref={canvasRef} className={className} width={width ?? 0} height={height ?? 0} />
+  )
+);

src/components/CollapsibleTabs.tsx

@@ -31,10 +31,12 @@ type ElementProps<TabItemsValue> = {
 };
 
 type StyleProps = {
-  fullWidthTabs?: boolean;
   className?: string;
+  fullWidthTabs?: boolean;
 };
 
+export type CollapsibleTabsProps<TabItemsValue> = ElementProps<TabItemsValue> & StyleProps;
+
 export const CollapsibleTabs = <TabItemsValue extends string>({
   defaultValue,
   items,
@@ -43,8 +45,9 @@ export const CollapsibleTabs = <TabItemsValue extends string>({
   onOpenChange,
 
   fullWidthTabs,
+
   className,
-}: ElementProps<TabItemsValue> & StyleProps) => {
+}: CollapsibleTabsProps<TabItemsValue>) => {
   const [value, setValue] = useState(defaultValue);
 
   const currentItem = items.find((item) => item.value === value);
@@ -86,8 +89,8 @@ export const CollapsibleTabs = <TabItemsValue extends string>({
         </Styled.Header>
 
         <Styled.CollapsibleContent>
-          {items.map(({ value, content }) => (
+          {items.map(({ asChild, value, content }) => (
-            <Styled.TabsContent key={value} value={value}>
+            <Styled.TabsContent key={value} asChild={asChild} value={value}>
               {content}
             </Styled.TabsContent>
           ))}
@@ -219,7 +222,6 @@ Styled.Header = styled.header`
 
 Styled.CollapsibleContent = styled(CollapsibleContent)`
   ${layoutMixins.stack}
-  ${layoutMixins.perspectiveArea}
 
   box-shadow: none;
 `;

src/components/ComboboxDialogMenu.tsx

@@ -122,6 +122,7 @@ Styled.Dialog = styled(Dialog)`
 
     /* Net 0 sticky top inset (let stickyArea1 header stick to top) */
     --stickyArea0-topGap: calc(-1 * var(--stickyArea0-topHeight));
+    overflow-x: clip;
   }
 `;
 

src/components/ComboboxMenu.tsx

@@ -44,13 +44,6 @@ export const ComboboxMenu = <MenuItemValue extends string, MenuGroupValue extend
 }: ComboboxMenuProps<MenuItemValue, MenuGroupValue>) => {
   const [highlightedCommand, setHighlightedCommand] = useState<MenuItemValue>();
   const [searchValue, setSearchValue] = useState('');
-  // const inputRef = useRef<HTMLInputElement | null>(null);
-
-  // console.log({ commandValue: highlightedCommand });
-
-  // useEffect(() => {
-  //   inputRef?.current?.focus();
-  // }, []);
 
   return (
     <Styled.Command
@@ -67,11 +60,14 @@ export const ComboboxMenu = <MenuItemValue extends string, MenuGroupValue extend
       {withSearch && (
         <Styled.Header $withStickyLayout={withStickyLayout}>
           <Styled.Input
-            // ref={inputRef}
+            /**
+             * Mobile Issue: Search Input will always trigger mobile keyboard drawer. There is no fix.
+             * https://github.com/pacocoursey/cmdk/issues/127
+             */
+            autoFocus
             type="search"
             value={searchValue}
             onValueChange={setSearchValue}
-            autoFocus
             placeholder={inputPlaceholder}
           />
         </Styled.Header>
@@ -258,6 +254,7 @@ Styled.Group = styled(Command.Group)<{ $withItemBorders?: boolean; $withStickyLa
 
       > [cmdk-group-heading] {
         ${layoutMixins.stickyHeader}
+        z-index: 2;
       }
 
       > [cmdk-group-items] {

src/components/CopyButton.tsx

@@ -10,6 +10,7 @@ import { layoutMixins } from '@/styles/layoutMixins';
 import { Button, ButtonProps } from './Button';
 import { Icon, IconName } from './Icon';
 import { IconButton } from './IconButton';
+import { WithTooltip } from './WithTooltip';
 
 export type CopyButtonProps = {
   value?: string;
@@ -40,13 +41,17 @@ export const CopyButton = ({
       <Styled.Icon copied={copied} iconName={copied ? IconName.Check : IconName.Copy} />
     </Styled.InlineRow>
   ) : buttonType === 'icon' ? (
-    <Styled.IconButton
+    <WithTooltip
-      {...buttonProps}
+      tooltipString={stringGetter({ key: copied ? STRING_KEYS.COPIED : STRING_KEYS.COPY })}
-      copied={copied}
+    >
-      action={ButtonAction.Base}
+      <Styled.IconButton
-      iconName={copied ? IconName.Check : IconName.Copy}
+        {...buttonProps}
-      onClick={onCopy}
+        copied={copied}
-    />
+        action={ButtonAction.Base}
+        iconName={copied ? IconName.Check : IconName.Copy}
+        onClick={onCopy}
+      />
+    </WithTooltip>
   ) : (
     <Button
       {...buttonProps}

src/components/Icon.tsx

@@ -38,6 +38,7 @@ import {
   HelpCircleIcon,
   HideIcon,
   HistoryIcon,
+  LeaderboardIcon,
   LinkOutIcon,
   LockIcon,
   LogoShortIcon,
@@ -53,6 +54,8 @@ import {
   OrderUntriggeredIcon,
   OverviewIcon,
   PencilIcon,
+  PlayIcon,
+  PlusIcon,
   PositionsIcon,
   PriceChartIcon,
   PrivacyIcon,
@@ -110,6 +113,7 @@ export enum IconName {
   HelpCircle = 'HelpCircle',
   Hide = 'Hide',
   History = 'History',
+  Leaderboard = 'Leaderboard',
   LinkOut = 'LinkOut',
   Lock = 'Lock',
   LogoShort = 'LogoShort',
@@ -126,6 +130,8 @@ export enum IconName {
   OrderUntriggered = 'OrderUntriggered',
   Overview = 'Overview',
   Pencil = 'Pencil',
+  Play = 'Play',
+  Plus = 'Plus',
   Positions = 'Positions',
   PriceChart = 'PriceChart',
   Privacy = 'Privacy',
@@ -183,6 +189,7 @@ const icons = {
   [IconName.HelpCircle]: HelpCircleIcon,
   [IconName.Hide]: HideIcon,
   [IconName.History]: HistoryIcon,
+  [IconName.Leaderboard]: LeaderboardIcon,
   [IconName.LinkOut]: LinkOutIcon,
   [IconName.Lock]: LockIcon,
   [IconName.LogoShort]: LogoShortIcon,
@@ -198,6 +205,8 @@ const icons = {
   [IconName.OrderUntriggered]: OrderUntriggeredIcon,
   [IconName.Overview]: OverviewIcon,
   [IconName.Pencil]: PencilIcon,
+  [IconName.Play]: PlayIcon,
+  [IconName.Plus]: PlusIcon,
   [IconName.Positions]: PositionsIcon,
   [IconName.PriceChart]: PriceChartIcon,
   [IconName.Privacy]: PrivacyIcon,

src/components/Input.tsx

@@ -10,7 +10,7 @@ import {
   USD_DECIMALS,
 } from '@/constants/numbers';
 
-import { BIG_NUMBERS, MustBigNumber } from '@/lib/numbers';
+import { BIG_NUMBERS } from '@/lib/numbers';
 import { useLocaleSeparators } from '@/hooks';
 
 export enum InputType {
@@ -29,31 +29,38 @@ type StyleProps = {
 type ElementProps = {
   type?: InputType;
   value?: string | number | null;
-
-  allowNegative?: boolean;
-  decimals?: number;
   disabled?: boolean;
   id?: string;
-  max?: number;
   onBlur?: () => void;
-  onChange?:
-    | Dispatch<SetStateAction<string>>
-    | React.ReactEventHandler<HTMLInputElement>
-    | ((values: NumberFormatValues, e: SourceInfo) => void);
   onFocus?: () => void;
-  onInput?: ({
-    value,
-    floatValue,
-    formattedValue,
-  }: {
-    value: string;
-    floatValue?: number;
-    formattedValue: string;
-  }) => void;
   placeholder?: string;
 };
 
-export type InputProps = ElementProps & StyleProps;
+type ConditionalProps =
+  | {
+      allowNegative?: boolean;
+      decimals?: number;
+      max?: number;
+      onChange?: (values: NumberFormatValues, e: SourceInfo) => void;
+      onInput?: ({
+        value,
+        floatValue,
+        formattedValue,
+      }: {
+        value: string;
+        floatValue?: number;
+        formattedValue: string;
+      }) => void;
+    }
+  | {
+      allowNegative?: never;
+      decimals?: never;
+      max?: never;
+      onChange?: Dispatch<SetStateAction<string>> | React.ReactEventHandler<HTMLInputElement>;
+      onInput?: (e: SyntheticInputEvent) => void;
+    };
+
+export type InputProps = ElementProps & StyleProps & ConditionalProps;
 
 export const Input = forwardRef<HTMLInputElement, InputProps>(
   (
@@ -129,6 +136,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
             placeholder={placeholder}
             value={value}
             // Other
+            data-1p-ignore // prevent 1Password fill
             {...otherProps}
           />
         ) : (
@@ -137,6 +145,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
             ref={ref as React.Ref<typeof NumericFormat<unknown>>}
             id={id}
             // NumericFormat
+            valueIsNumericString
             allowNegative={allowNegative}
             decimalScale={decimals}
             decimalSeparator={LOCALE_DECIMAL_SEPARATOR}
@@ -160,7 +169,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
                 ? undefined
                 : Number(formattedValue.replace(',', '.'));
 
-              onInput?.({ value, floatValue, formattedValue });
+              onInput?.({ value, floatValue, formattedValue, ...e });
             }}
             // Native
             disabled={disabled}
@@ -168,6 +177,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
             value={formattedValue}
             autoComplete="off"
             autoCorrect="off"
+            data-1p-ignore // prevent 1Password fill
             {...otherProps}
           />
         )}
@@ -188,7 +198,6 @@ Styled.InputContainer = styled.div`
   border-radius: inherit;
 
   input {
-    user-select: all;
     flex: 1;
     width: 100%;
   }

src/components/Table.tsx

@@ -43,6 +43,7 @@ import { layoutMixins } from '@/styles/layoutMixins';
 
 import { Icon, IconName } from './Icon';
 import { Tag } from './Tag';
+import { MustBigNumber } from '@/lib/numbers';
 
 export { TableCell } from './Table/TableCell';
 export { TableColumnHeader } from './Table/TableColumnHeader';
@@ -161,10 +162,7 @@ export const Table = <TableRowData extends object, TableRowKey extends Key>({
         ? // String
           collator.compare(first as string, second as string)
         : // Number
-          Math.sign(
+          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.
       (sortDirection === 'descending' ? -1 : 1)
     );

src/components/Tabs.tsx

@@ -21,6 +21,7 @@ export type TabItem<TabItemsValue> = {
   content?: React.ReactNode;
   subitems?: TabItem<TabItemsValue>[];
   customTrigger?: ReactNode;
+  asChild?: boolean;
 };
 
 type ElementProps<TabItemsValue> = {
@@ -41,6 +42,8 @@ type StyleProps = {
   className?: string;
 };
 
+export type TabsProps<TabItemsValue> = ElementProps<TabItemsValue> & StyleProps;
+
 export const Tabs = <TabItemsValue extends string>({
   defaultValue,
   value,
@@ -107,13 +110,15 @@ export const Tabs = <TabItemsValue extends string>({
         sharedContent
       ) : (
         <Styled.Stack>
-          {items.map(({ value, content, forceMount }) => (
+          {items.map(({ asChild, value, content, forceMount }) => (
             <Styled.Content
               key={value}
+              asChild={asChild}
               value={value}
               forceMount={forceMount}
               $hide={forceMount && currentItem?.value !== value}
               $withTransitions={withTransitions}
+              asChild={asChild}
             >
               {content}
             </Styled.Content>
@@ -242,7 +247,6 @@ Styled.Trigger = styled(Trigger)<{ $withBorders?: boolean }>`
 
 Styled.Stack = styled.div`
   ${layoutMixins.stack}
-  ${layoutMixins.perspectiveArea}
 
   box-shadow: none;
 `;

src/components/Toast.tsx

@@ -4,6 +4,7 @@ import { Root, Action, Close } from '@radix-ui/react-toast';
 
 import { ButtonShape, ButtonSize } from '@/constants/buttons';
 import { popoverMixins } from '@/styles/popoverMixins';
+import { breakpoints } from '@/styles';
 
 import { Notification, type NotificationProps } from '@/components/Notification';
 
@@ -76,7 +77,7 @@ export const Toast = ({
       <Close asChild>
         <$CloseButton
           iconName={IconName.Close}
-          shape={ButtonShape.Square}
+          shape={ButtonShape.Circle}
           size={ButtonSize.XSmall}
           onClick={(e: MouseEvent) => e.stopPropagation()}
         />
@@ -249,12 +250,16 @@ const $CloseButton = styled(IconButton)`
   right: 0;
 
   border: solid var(--border-width) var(--color-border);
-  border-radius: 50%;
 
   ${$Root}:hover & {
     display: block;
     z-index: 2;
   }
+
+  @media ${breakpoints.mobile} {
+    display: block;
+    z-index: 2;
+  }
 `;
 
 const $Action = styled(Action)`

src/components/ToastArea.tsx

@@ -1,6 +1,7 @@
+import styled from 'styled-components';
+
 import { Provider, Viewport } from '@radix-ui/react-toast';
 
-import styled from 'styled-components';
 import { layoutMixins } from '@/styles/layoutMixins';
 
 type ElementProps = {
@@ -12,7 +13,9 @@ type StyleProps = {
   className?: string;
 };
 
-export const ToastArea = ({ swipeDirection, children, className }: ElementProps & StyleProps) => (
+type ToastAreaProps = ElementProps & StyleProps;
+
+export const ToastArea = ({ swipeDirection, children, className }: ToastAreaProps) => (
   <$ToastArea className={className}>
     <Provider swipeDirection={swipeDirection}>
       {children}

src/constants/dialogs.ts

@@ -3,6 +3,7 @@ export enum DialogTypes {
   Deposit = 'Deposit',
   DisconnectWallet = 'DisconnectWallet',
   ExchangeOffline = 'ExchangeOffline',
+  ExternalLink = 'ExternalLink',
   FillDetails = 'FillDetails',
   Help = 'Help',
   ExternalNavKeplr = 'ExternalNavKeplr',
@@ -12,7 +13,6 @@ export enum DialogTypes {
   OrderDetails = 'OrderDetails',
   Preferences = 'Preferences',
   RateLimit = 'RateLimit',
-  Receive = 'Receive',
   RestrictedGeo = 'RestrictedGeo',
   RestrictedWallet = 'RestrictedWallet',
   Trade = 'Trade',

src/constants/localStorage.ts

@@ -22,6 +22,7 @@ export enum LocalStorageKey {
   SelectedTheme = 'dydx.SelectedTheme',
   SelectedTradeLayout = 'dydx.SelectedTradeLayout',
   TradingViewChartConfig = 'dydx.TradingViewChartConfig',
+  HasSeenLaunchIncentives = 'dydx.HasSeenLaunchIncentives',
 }
 
 export const LOCAL_STORAGE_VERSIONS = {

src/constants/notifications.ts

@@ -4,6 +4,7 @@ import { StatusResponse } from '@0xsquid/sdk';
 export enum NotificationType {
   AbacusGenerated = 'AbacusGenerated',
   SquidTransfer = 'SquidTransfer',
+  ReleaseUpdates = 'ReleaseUpdates',
 }
 
 export enum NotificationComponentType {}
@@ -121,13 +122,20 @@ export type NotificationDisplayData = {
   toastDuration?: number;
 };
 
+export enum TransferNotificationTypes {
+  Withdrawal = 'withdrawal',
+  Deposit = 'deposit',
+}
+
 // Notification types
 export type TransferNotifcation = {
   txHash: string;
+  type?: TransferNotificationTypes;
   toChainId?: string;
   fromChainId?: string;
   toAmount?: number;
   triggeredAt?: number;
+  isCctp?: boolean;
   errorCount?: number;
   status?: StatusResponse;
 };

src/constants/numbers.ts

@@ -10,6 +10,7 @@ export const LEVERAGE_DECIMALS = 2;
 export const TOKEN_DECIMALS = 4;
 export const LARGE_TOKEN_DECIMALS = 2;
 export const FEE_DECIMALS = 3;
+export const FUNDING_DECIMALS = 6;
 
 export const QUANTUM_MULTIPLIER = 1_000_000;
 
@@ -18,3 +19,7 @@ export enum NumberSign {
   Negative = 'Negative',
   Neutral = 'Neutral',
 }
+
+// Deposit/Withdraw
+export const MAX_CCTP_TRANSFER_AMOUNT = 1_000_000;
+export const MAX_PRICE_IMPACT = 0.02; // 2%

src/constants/tooltips/deposit.ts

@@ -1,6 +1,10 @@
 import { type TooltipStrings, TOOLTIP_STRING_KEYS } from '@/constants/localization';
 
 export const depositTooltips: TooltipStrings = {
+  'minimum-deposit-amount': ({ stringGetter }) => ({
+    title: stringGetter({ key: TOOLTIP_STRING_KEYS.MINIMUM_DEPOSIT_AMOUNT_TITLE }),
+    body: stringGetter({ key: TOOLTIP_STRING_KEYS.MINIMUM_DEPOSIT_AMOUNT_BODY }),
+  }),
   swap: ({ stringGetter }) => ({
     title: stringGetter({ key: TOOLTIP_STRING_KEYS.SWAP_TITLE }),
     body: stringGetter({ key: TOOLTIP_STRING_KEYS.SWAP_BODY }),

src/constants/tooltips/withdraw.ts

@@ -5,6 +5,10 @@ export const withdrawTooltips: TooltipStrings = {
     title: stringGetter({ key: TOOLTIP_STRING_KEYS.FAST_WITHDRAW_FEE_TITLE }),
     body: stringGetter({ key: TOOLTIP_STRING_KEYS.FAST_WITHDRAW_FEE_BODY }),
   }),
+  'minimum-amount-received': ({ stringGetter }) => ({
+    title: stringGetter({ key: TOOLTIP_STRING_KEYS.MINIMUM_AMOUNT_RECEIVED_TITLE }),
+    body: stringGetter({ key: TOOLTIP_STRING_KEYS.MINIMUM_AMOUNT_RECEIVED_BODY }),
+  }),
   'withdraw-types': ({ stringGetter }) => ({
     title: stringGetter({ key: TOOLTIP_STRING_KEYS.WITHDRAW_TYPES_TITLE }),
     body: stringGetter({ key: TOOLTIP_STRING_KEYS.WITHDRAW_TYPES_BODY }),

src/constants/trade.ts

@@ -116,3 +116,15 @@ export enum MobilePlaceOrderSteps {
   PlacingOrder = 'PlacingOrder',
   Confirmation = 'Confirmation',
 }
+
+export const CLEARED_TRADE_INPUTS = {
+  limitPriceInput: '',
+  triggerPriceInput: '',
+  trailingPercentInput: '',
+};
+
+export const CLEARED_SIZE_INPUTS = {
+  amountInput: '',
+  usdAmountInput: '',
+  leverageInput: '',
+};

src/hooks/index.ts

@@ -22,6 +22,7 @@ import { useShouldShowFooter } from './useShouldShowFooter';
 import { useSelectedNetwork } from './useSelectedNetwork';
 import { useStringGetter } from './useStringGetter';
 import { useSubaccount } from './useSubaccount';
+import { useTradeFormInputs } from './useTradeFormInputs';
 import { useURLConfigs } from './useURLConfigs';
 
 export {
@@ -49,5 +50,6 @@ export {
   useSelectedNetwork,
   useStringGetter,
   useSubaccount,
+  useTradeFormInputs,
   useURLConfigs,
 };

src/hooks/orderbook/index.ts

@@ -0,0 +1,11 @@
+import { useCalculateOrderbookData } from './useCalculateOrderbookData';
+import { useCenterOrderbook } from './useCenterOrderbook';
+import { useDrawOrderbook } from './useDrawOrderbook';
+import { useSpreadRowScrollListener } from './useSpreadRowScrollListener';
+
+export {
+  useCalculateOrderbookData,
+  useCenterOrderbook,
+  useDrawOrderbook,
+  useSpreadRowScrollListener,
+};

src/hooks/orderbook/useCalculateOrderbookData.ts

@@ -0,0 +1,55 @@
+import { useMemo } from 'react';
+import { useSelector, shallowEqual } from 'react-redux';
+import { OrderSide } from '@dydxprotocol/v4-client-js';
+
+import { OrderbookLine } from '@/constants/abacus';
+
+import { getCurrentMarketOrderbook } from '@/state/perpetualsSelectors';
+import { getSubaccountOpenOrdersBySideAndPrice } from '@/state/accountSelectors';
+
+import type { RowData } from '@/views/Orderbook/OrderbookRow';
+
+import { MustBigNumber } from '@/lib/numbers';
+
+export const useCalculateOrderbookData = ({ maxRowsPerSide }: { maxRowsPerSide: number }) => {
+  const orderbook = useSelector(getCurrentMarketOrderbook, shallowEqual);
+
+  const openOrdersBySideAndPrice =
+    useSelector(getSubaccountOpenOrdersBySideAndPrice, shallowEqual) || {};
+
+  return useMemo(() => {
+    const asks = (orderbook?.asks?.toArray() ?? [])
+      .map(
+        (row: OrderbookLine) =>
+          ({
+            side: 'ask',
+            mine: openOrdersBySideAndPrice[OrderSide.SELL]?.[row.price]?.size,
+            ...row,
+          } as RowData)
+      )
+      .slice(0, maxRowsPerSide);
+
+    const bids = (orderbook?.bids?.toArray() ?? [])
+      .map(
+        (row: OrderbookLine) =>
+          ({
+            side: 'bid',
+            mine: openOrdersBySideAndPrice[OrderSide.BUY]?.[row.price]?.size,
+            ...row,
+          } as RowData)
+      )
+      .slice(0, maxRowsPerSide);
+
+    const spread =
+      asks[0] && bids[0] ? MustBigNumber(asks[0]?.price ?? 0).minus(bids[0]?.price ?? 0) : null;
+
+    const spreadPercent = orderbook?.spreadPercent;
+
+    const histogramRange = Math.max(
+      Number(bids[bids.length - 1]?.depth),
+      Number(asks[asks.length - 1]?.depth)
+    );
+
+    return { asks, bids, spread, spreadPercent, histogramRange, hasOrderbook: !!orderbook };
+  }, [orderbook, openOrdersBySideAndPrice]);
+};

src/hooks/orderbook/useCenterOrderbook.ts

@@ -0,0 +1,22 @@
+import { type RefObject, useEffect } from 'react';
+
+type ElementProps = {
+  marketId: string;
+  orderbookRef: RefObject<HTMLDivElement>;
+};
+
+/**
+ * @description Center Orderbook on load and market change
+ * Assumed that the two sides are the same height
+ */
+export const useCenterOrderbook = ({ marketId, orderbookRef }: ElementProps) => {
+  const orderbookEl = orderbookRef.current;
+  const { clientHeight, scrollHeight } = orderbookEl ?? {};
+  const shouldScroll = !!scrollHeight && !!clientHeight && scrollHeight > clientHeight;
+
+  useEffect(() => {
+    if (orderbookEl && shouldScroll) {
+      orderbookEl.scrollTo({ top: (scrollHeight - clientHeight) / 2 });
+    }
+  }, [shouldScroll, marketId]);
+};

src/hooks/orderbook/useDrawOrderbook.ts

@@ -0,0 +1,380 @@
+import { useCallback, useEffect, useMemo, useRef } from 'react';
+import { useSelector } from 'react-redux';
+
+import type { Nullable } from '@/constants/abacus';
+import { SMALL_USD_DECIMALS, TOKEN_DECIMALS } from '@/constants/numbers';
+import { useLocaleSeparators } from '@/hooks/useLocaleSeparators';
+
+import { getAppTheme } from '@/state/configsSelectors';
+
+import { ROW_HEIGHT, ROW_PADDING_RIGHT, type RowData } from '@/views/Orderbook/OrderbookRow';
+
+import { MustBigNumber } from '@/lib/numbers';
+import { log } from '@/lib/telemetry';
+import { Colors } from '@/styles/colors';
+
+type ElementProps = {
+  data: RowData[];
+  histogramRange: number;
+  hoveredRow?: number;
+  stepSizeDecimals: Nullable<number>;
+  tickSizeDecimals: Nullable<number>;
+};
+
+type StyleProps = {
+  histogramSide?: 'left' | 'right';
+};
+
+export const useDrawOrderbook = ({
+  data,
+  histogramRange,
+  stepSizeDecimals,
+  tickSizeDecimals,
+  histogramSide = 'right',
+  hoveredRow,
+}: ElementProps & StyleProps) => {
+  const theme = useSelector(getAppTheme);
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+  const hoverCanvasRef = useRef<HTMLCanvasElement>(null);
+  const canvas = canvasRef.current;
+  const hoverCanvas = hoverCanvasRef.current;
+
+  /**
+   *         to === 'right'                to === 'left'
+   *         |===================|         |===================|
+   * bar:    a                   b         c                   d
+   * a = 0
+   * b = depthBarWidth
+   * c = canvasWidth - depthBarWidth
+   * d = canvasWidth
+   *
+   */
+  const getXYValues = ({
+    barWidth,
+    canvasWidth,
+    gradientMultiplier,
+  }: {
+    barWidth: number;
+    canvasWidth: number;
+    gradientMultiplier: number;
+  }) => {
+    const gradient = {
+      x1: Math.floor(histogramSide === 'left' ? barWidth : canvasWidth - barWidth),
+      x2: Math.floor(
+        histogramSide === 'left'
+          ? 0 - (canvasWidth * gradientMultiplier - canvasWidth)
+          : canvasWidth * gradientMultiplier
+      ),
+    };
+    const bar = {
+      x1: Math.floor(histogramSide === 'left' ? 0 : canvasWidth - barWidth),
+      x2: Math.floor(
+        histogramSide === 'left' ? Math.min(barWidth, canvasWidth - 2) : canvasWidth - 2
+      ),
+    };
+
+    return {
+      bar,
+      gradient,
+    };
+  };
+
+  const getYFromIndex = (idx: number, type: 'text' | 'bar' | 'rect') => {
+    return (
+      idx * ROW_HEIGHT +
+      {
+        text: ROW_HEIGHT / 2, // center of the row
+        bar: 1, // 1px off the top and bottom so the histograms do not touch
+        rect: 0,
+      }[type]
+    );
+  };
+
+  // Get X value by column, colIdx starts at 0
+  const getXByColumn = ({ canvasWidth, colIdx }: { canvasWidth: number; colIdx: number }) => {
+    return Math.floor(((colIdx + 1) * canvasWidth) / 3);
+  };
+
+  const drawBars = ({
+    value,
+    canvasWidth,
+    ctx,
+    gradientMultiplier,
+    histogramAccentColor,
+    idx,
+    histogramSide,
+  }: {
+    value: Nullable<number>;
+    canvasWidth: number;
+    ctx: CanvasRenderingContext2D;
+    gradientMultiplier: number;
+    histogramAccentColor: string;
+    idx: number;
+    histogramSide: 'left' | 'right';
+  }) => {
+    const histogramBarWidth = canvasWidth - 2;
+    const barWidth = value ? (value / histogramRange) * histogramBarWidth : 0;
+    const { gradient, bar } = getXYValues({ barWidth, canvasWidth, gradientMultiplier });
+
+    let linearGradient;
+
+    try {
+      linearGradient = ctx.createLinearGradient(
+        gradient.x1,
+        ROW_HEIGHT / 2,
+        gradient.x2,
+        ROW_HEIGHT / 2
+      );
+
+      linearGradient.addColorStop(0, histogramAccentColor);
+      linearGradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
+      ctx.fillStyle = linearGradient;
+    } catch (err) {
+      log('Orderbook/createLinearGradient', err, {
+        x1: gradient.x1,
+        y1: ROW_HEIGHT / 2,
+        x2: gradient.x2,
+        y2: ROW_HEIGHT / 2,
+      });
+
+      ctx.fillStyle = 'rgba(0, 0, 0, 0)';
+    }
+
+    ctx.beginPath();
+
+    ctx.roundRect
+      ? ctx.roundRect?.(
+          bar.x1,
+          getYFromIndex(idx, 'bar'),
+          bar.x2,
+          ROW_HEIGHT - 2,
+          histogramSide === 'right' ? [2, 0, 0, 2] : [0, 2, 2, 0]
+        )
+      : ctx.rect(bar.x1, getYFromIndex(idx, 'bar'), bar.x2, ROW_HEIGHT - 2);
+    ctx.fill();
+  };
+
+  const { decimal: LOCALE_DECIMAL_SEPARATOR } = useLocaleSeparators();
+
+  const formatOptions = {
+    decimalSeparator: LOCALE_DECIMAL_SEPARATOR,
+  };
+
+  const drawText = useCallback(
+    ({
+      ctx,
+      canvasWidth,
+      idx,
+      size,
+      price,
+      mine,
+      animationType,
+    }: {
+      ctx: CanvasRenderingContext2D;
+      canvasWidth: number;
+      idx: number;
+      size?: Nullable<number>;
+      price?: Nullable<number>;
+      mine?: Nullable<number>;
+      animationType?: 'remove' | 'add';
+    }) => {
+      const y = getYFromIndex(idx, 'text');
+      const rectY = getYFromIndex(idx, 'rect');
+
+      let startTime: number;
+      let textColor: string = Colors[theme].text2;
+      const animateColor = (timestamp: number) => {
+        if (!startTime) startTime = timestamp;
+        const animationTime = timestamp - startTime;
+
+        // Linear transition for demonstration purposes
+        textColor = animationType
+          ? {
+              add: Colors[theme].green,
+              remove: Colors[theme].red,
+            }[animationType]
+          : Colors[theme].text2;
+
+        if (animationTime < 500) {
+          // Continue the animation for 500ms (adjust as needed)
+          requestAnimationFrame(animateColor);
+        } else {
+          textColor = Colors[theme].text2;
+        }
+
+        if (animationType) {
+          // TODO: Clear rect and redraw text
+          // ctx.clearRect(0, rectY, canvasWidth, rectY + ROW_HEIGHT);
+        }
+      };
+
+      requestAnimationFrame(animateColor);
+
+      // Size text
+      if (size) {
+        ctx.fillStyle = textColor;
+        ctx.fillText(
+          MustBigNumber(size).toFormat(stepSizeDecimals ?? TOKEN_DECIMALS, formatOptions),
+          getXByColumn({ canvasWidth, colIdx: 0 }) - ROW_PADDING_RIGHT,
+          y
+        );
+      }
+
+      // Price text
+      if (price) {
+        ctx.fillStyle = textColor;
+        ctx.fillText(
+          MustBigNumber(price).toFormat(tickSizeDecimals ?? SMALL_USD_DECIMALS, formatOptions),
+          getXByColumn({ canvasWidth, colIdx: 1 }) - ROW_PADDING_RIGHT,
+          y
+        );
+      }
+
+      // Mine text
+      if (mine) {
+        ctx.fillStyle = Colors[theme].text2;
+        ctx.fillText(
+          MustBigNumber(mine).toFormat(stepSizeDecimals ?? TOKEN_DECIMALS, formatOptions),
+          getXByColumn({ canvasWidth, colIdx: 2 }) - ROW_PADDING_RIGHT,
+          y
+        );
+      }
+    },
+    [theme, LOCALE_DECIMAL_SEPARATOR, tickSizeDecimals, stepSizeDecimals]
+  );
+
+  /**
+   * Scale canvas using device pixel ratio to unblur drawn text
+   * @returns adjusted canvas width used in coordinates for drawing
+   **/
+  const canvasWidth = useMemo(() => {
+    const devicePixelRatio = window.devicePixelRatio || 1;
+
+    if (!canvas || !hoverCanvas) return 300 / devicePixelRatio;
+
+    const ctx = canvas.getContext('2d');
+    const hoverCtx = hoverCanvas.getContext('2d');
+
+    const backingStoreRatio =
+      // @ts-ignore
+      ctx.webkitBackingStorePixelRatio ||
+      // @ts-ignore
+      ctx.mozBackingStorePixelRatio ||
+      // @ts-ignore
+      ctx.msBackingStorePixelRatio ||
+      // @ts-ignore
+      ctx.oBackingStorePixelRatio ||
+      // @ts-ignore
+      ctx.backingStorePixelRatio ||
+      1;
+
+    const ratio = devicePixelRatio / backingStoreRatio;
+    canvas.width = canvas.offsetWidth * ratio;
+    canvas.height = canvas.offsetHeight * ratio;
+    hoverCanvas.width = hoverCanvas.offsetWidth * ratio;
+    hoverCanvas.height = hoverCanvas.offsetHeight * ratio;
+
+    if (hoverCtx) {
+      hoverCtx.scale(ratio, ratio);
+    }
+
+    if (ctx) {
+      ctx.scale(ratio, ratio);
+      ctx.font = `12.5px Satoshi`;
+      ctx.textAlign = 'right';
+      ctx.textBaseline = 'middle';
+      ctx.imageSmoothingQuality = 'high';
+    }
+
+    return canvas.width / ratio;
+  }, [canvas, hoverCanvas]);
+
+  //Handle Row Hover
+  const lastHoveredRowRef = useRef<number>();
+  const lastHoveredRow = lastHoveredRowRef.current;
+  useEffect(() => {
+    const hoverCtx = hoverCanvas?.getContext('2d');
+
+    if (!!!hoverCtx) return;
+
+    if (hoveredRow !== lastHoveredRow) {
+      const y = getYFromIndex(lastHoveredRow ?? 0, 'rect');
+      hoverCtx.clearRect(0, y, canvasWidth, ROW_HEIGHT);
+      lastHoveredRowRef.current = hoveredRow;
+    }
+
+    if (hoveredRow !== undefined) {
+      hoverCtx.fillStyle = 'rgba(255, 255, 255, 0.02)';
+      hoverCtx.fillRect(0, hoveredRow * 20, canvasWidth, 20);
+    }
+  }, [lastHoveredRow, hoveredRow]);
+
+  // Row Removal Animation state
+  const previousDataRef = useRef<{
+    [key: string]: number;
+  }>(Object.fromEntries(data.map((row: RowData) => [row.price, row.size])));
+
+  //Update histograms and row contents on data change
+  useEffect(() => {
+    const ctx = canvas?.getContext('2d');
+
+    if (!canvas || !ctx) return;
+
+    // Clear canvas before redraw
+    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+
+    // Draw histograms
+    data.forEach(({ depth, mine, price, size, side }, idx) => {
+      const histogramAccentColor =
+        side === 'bid' ? `hsla(159, 67%, 39%,  0.15)` : `hsla(360, 73%, 61%,  0.15)`;
+
+      // Depth Bar
+      drawBars({
+        value: depth,
+        canvasWidth,
+        ctx,
+        gradientMultiplier: 1.3,
+        histogramAccentColor,
+        idx,
+        histogramSide,
+      });
+
+      // Size Bar
+      drawBars({
+        value: size,
+        canvasWidth,
+        ctx,
+        gradientMultiplier: 5,
+        histogramAccentColor,
+        idx,
+        histogramSide,
+      });
+
+      const isNew = !previousDataRef.current[price];
+      const wasRemoved = previousDataRef.current[price] && !data.find((row) => row.price === price);
+
+      // Size, Price, Mine
+      drawText({
+        ctx,
+        canvasWidth,
+        idx,
+        size,
+        price,
+        mine,
+        animationType: isNew ? 'add' : wasRemoved ? 'remove' : undefined,
+      });
+    });
+
+    previousDataRef.current = Object.fromEntries(data.map((row: RowData) => [row.price, row.size]));
+  }, [
+    canvasWidth,
+    data,
+    drawText,
+    histogramRange,
+    stepSizeDecimals,
+    tickSizeDecimals,
+    histogramSide,
+  ]);
+
+  return { canvasRef, hoverCanvasRef };
+};

src/hooks/orderbook/useSpreadRowScrollListener.ts

@@ -0,0 +1,39 @@
+import { type RefObject, useEffect, useState, Dispatch } from 'react';
+
+export const useSpreadRowScrollListener = ({
+  orderbookRef,
+  spreadRowRef,
+}: {
+  orderbookRef: RefObject<HTMLDivElement>;
+  spreadRowRef: RefObject<HTMLDivElement>;
+}) => {
+  const [displaySide, setDisplaySide] = useState<string>();
+
+  useEffect(() => {
+    const onScroll = () => {
+      if (spreadRowRef.current && orderbookRef.current) {
+        const { clientHeight } = orderbookRef.current;
+        const parent = orderbookRef.current.getBoundingClientRect();
+        const spread = spreadRowRef.current.getBoundingClientRect();
+        const spreadTop = spread.top - parent.top;
+        const spreadBottom = spread.bottom - parent.top;
+
+        if (spreadBottom > clientHeight) {
+          setDisplaySide('bottom');
+        } else if (spreadTop < 0) {
+          setDisplaySide('top');
+        } else {
+          setDisplaySide(undefined);
+        }
+      }
+    };
+
+    orderbookRef.current?.addEventListener('scroll', onScroll, false);
+
+    return () => {
+      orderbookRef.current?.removeEventListener('scroll', onScroll, false);
+    };
+  }, [orderbookRef.current, spreadRowRef.current]);
+
+  return displaySide;
+};

src/hooks/useAccounts.tsx

@@ -2,7 +2,7 @@ import { useCallback, useContext, createContext, useEffect, useState, useMemo }
 
 import { useDispatch } from 'react-redux';
 import { AES, enc } from 'crypto-js';
-import { LocalWallet, type Subaccount } from '@dydxprotocol/v4-client-js';
+import { NOBLE_BECH32_PREFIX, LocalWallet, type Subaccount } from '@dydxprotocol/v4-client-js';
 
 import { OnboardingGuard, OnboardingState, type EvmDerivedAddresses } from '@/constants/account';
 import { DialogTypes } from '@/constants/dialogs';
@@ -219,6 +219,16 @@ const useAccountsContext = () => {
     else abacusStateManager.attemptDisconnectAccount();
   }, [localDydxWallet]);
 
+  useEffect(() => {
+    const setNobleWallet = async () => {
+      if (hdKey?.mnemonic) {
+        const nobleWallet = await LocalWallet.fromMnemonic(hdKey.mnemonic, NOBLE_BECH32_PREFIX);
+        abacusStateManager.setNobleWallet(nobleWallet);
+      }
+    };
+    setNobleWallet();
+  }, [hdKey?.mnemonic]);
+
   // clear subaccounts when no dydxAddress is set
   useEffect(() => {
     (async () => {

src/hooks/useCurrentMarketId.ts

@@ -5,16 +5,15 @@ import { useMatch, useNavigate } from 'react-router-dom';
 import { LocalStorageKey } from '@/constants/localStorage';
 import { DEFAULT_MARKETID } from '@/constants/markets';
 import { AppRoute } from '@/constants/routes';
+import { useLocalStorage } from '@/hooks/useLocalStorage';
 
 import { getSelectedNetwork } from '@/state/appSelectors';
 import { closeDialogInTradeBox } from '@/state/dialogs';
 import { setCurrentMarketId } from '@/state/perpetuals';
+import { getMarketIds } from '@/state/perpetualsSelectors';
 
 import abacusStateManager from '@/lib/abacus';
 
-import { useLocalStorage } from './useLocalStorage';
-import { getMarketIds } from '@/state/perpetualsSelectors';
-
 export const useCurrentMarketId = () => {
   const navigate = useNavigate();
   const match = useMatch(`/${AppRoute.Trade}/:marketId`);
@@ -22,6 +21,8 @@ export const useCurrentMarketId = () => {
   const dispatch = useDispatch();
   const selectedNetwork = useSelector(getSelectedNetwork);
   const marketIds = useSelector(getMarketIds, shallowEqual);
+  const hasMarketIds = marketIds.length > 0;
+
   const [lastViewedMarket, setLastViewedMarket] = useLocalStorage({
     key: LocalStorageKey.LastViewedMarket,
     defaultValue: DEFAULT_MARKETID,
@@ -31,22 +32,40 @@ export const useCurrentMarketId = () => {
     if (marketIds.length === 0) return marketId ?? lastViewedMarket;
     if (!marketIds.includes(marketId ?? lastViewedMarket)) return DEFAULT_MARKETID;
     return marketId ?? lastViewedMarket;
-  }, [marketIds, marketId]);
+  }, [hasMarketIds, marketId]);
 
   useEffect(() => {
-    setLastViewedMarket(validId);
+    // 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(() => {
     // Check for marketIds otherwise Abacus will silently fail its isMarketValid check
     if (marketIds) {
       abacusStateManager.setMarket(marketId ?? DEFAULT_MARKETID);
     }
-  }, [selectedNetwork, marketIds, marketId]);
+  }, [selectedNetwork, hasMarketIds, marketId]);
 };

src/hooks/useLocalNotifications.tsx

@@ -1,11 +1,11 @@
 import { createContext, useContext, useCallback, useEffect, useMemo } from 'react';
 import { useQuery } from 'react-query';
-import type { StatusResponse } from '@0xsquid/sdk';
 
 import { LOCAL_STORAGE_VERSIONS, LocalStorageKey } from '@/constants/localStorage';
 import { type TransferNotifcation } from '@/constants/notifications';
 import { useAccounts } from '@/hooks/useAccounts';
-import { STATUS_ERROR_GRACE_PERIOD, useSquid } from '@/hooks/useSquid';
+
+import { fetchSquidStatus, STATUS_ERROR_GRACE_PERIOD } from '@/lib/squid';
 
 import { useLocalStorage } from './useLocalStorage';
 
@@ -68,8 +68,6 @@ const useLocalNotificationsContext = () => {
     [transferNotifications]
   );
 
-  const squid = useSquid();
-
   useQuery({
     queryKey: 'getTransactionStatus',
     queryFn: async () => {
@@ -81,23 +79,27 @@ const useLocalNotificationsContext = () => {
               toChainId,
               fromChainId,
               triggeredAt,
+              isCctp,
               errorCount,
               status: currentStatus,
             } = transferNotification;
 
+            // @ts-ignore status.errors is not in the type definition but can be returned
+            // also error can some time come back as an empty object so we need to ignore for that
+            const hasErrors = !!currentStatus?.errors || 
+                 (currentStatus?.error && Object.keys(currentStatus.error).length !== 0);
+
             if (
-              // @ts-ignore status.errors is not in the type definition but can be returned
+              !hasErrors &&
-              !currentStatus?.errors &&
-              !currentStatus?.error &&
               (!currentStatus?.squidTransactionStatus ||
                 currentStatus?.squidTransactionStatus === 'ongoing')
             ) {
               try {
-                const status = await squid?.getStatus({
+                const status = await fetchSquidStatus({
                   transactionId: txHash,
                   toChainId,
                   fromChainId,
-                });
+                }, isCctp);
 
                 if (status) {
                   transferNotification.status = status;

src/hooks/useNotificationTypes.tsx

@@ -20,11 +20,13 @@ import {
   type NotificationTypeConfig,
   NotificationType,
   DEFAULT_TOAST_AUTO_CLOSE_MS,
+  TransferNotificationTypes,
 } from '@/constants/notifications';
 
 import { useSelectedNetwork, useStringGetter } from '@/hooks';
 import { useLocalNotifications } from '@/hooks/useLocalNotifications';
 
+import { AssetIcon } from '@/components/AssetIcon';
 import { Icon, IconName } from '@/components/Icon';
 import { TradeNotification } from '@/views/notifications/TradeNotification';
 import { TransferStatusNotification } from '@/views/notifications/TransferStatusNotification';
@@ -151,20 +153,20 @@ export const notificationTypes: NotificationTypeConfig[] = [
 
       useEffect(() => {
         for (const transfer of transferNotifications) {
-          const { fromChainId, status, txHash, toAmount } = transfer;
+          const { fromChainId, status, txHash, toAmount, type } = transfer;
           const isFinished = Boolean(status) && status?.squidTransactionStatus !== 'ongoing';
           const icon = <Icon iconName={isFinished ? IconName.Transfer : IconName.Clock} />;
 
-          const type =
+          const transferType =
-            fromChainId === ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId
+            type ?? fromChainId === ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId
-              ? 'withdrawal'
+              ? TransferNotificationTypes.Withdrawal
-              : 'deposit';
+              : TransferNotificationTypes.Deposit;
 
           const title = stringGetter({
             key: {
               deposit: isFinished ? STRING_KEYS.DEPOSIT : STRING_KEYS.DEPOSIT_IN_PROGRESS,
               withdrawal: isFinished ? STRING_KEYS.WITHDRAW : STRING_KEYS.WITHDRAW_IN_PROGRESS,
-            }[type],
+            }[transferType],
           });
 
           const toChainEta = status?.toChain?.chainData?.estimatedRouteDuration || 0;
@@ -189,7 +191,7 @@ export const notificationTypes: NotificationTypeConfig[] = [
                   slotIcon={icon}
                   slotTitle={title}
                   transfer={transfer}
-                  type={type}
+                  type={transferType}
                   triggeredAt={transfer.triggeredAt}
                   notification={notification}
                 />
@@ -205,9 +207,57 @@ export const notificationTypes: NotificationTypeConfig[] = [
       return () => {};
     },
   },
+  {
+    type: NotificationType.ReleaseUpdates,
+    useTrigger: ({ trigger }) => {
+      const stringGetter = useStringGetter();
+
+      useEffect(() => {
+        trigger(
+          'rewards-and-full-trading-live',
+          {
+            icon: <AssetIcon symbol="DYDX" />,
+            title: stringGetter({ key: 'NOTIFICATIONS.RELEASE_REWARDS_AND_FULL_TRADING.TITLE' }),
+            body: stringGetter({
+              key: 'NOTIFICATIONS.RELEASE_REWARDS_AND_FULL_TRADING.BODY',
+              params: {
+                DOS_BLOGPOST: (
+                  <$Link
+                    href="https://www.dydxopsdao.com/blog/deep-dive-full-trading"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    {stringGetter({ key: STRING_KEYS.HERE })}
+                  </$Link>
+                ),
+                TRADING_BLOGPOST: (
+                  <$Link
+                    href="https://dydx.exchange/blog/v4-full-trading"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    {stringGetter({ key: STRING_KEYS.HERE })}
+                  </$Link>
+                ),
+              },
+            }),
+            toastSensitivity: 'foreground',
+          },
+          []
+        );
+      }, [stringGetter]);
+    },
+    useNotificationAction: () => {
+      return () => {};
+    },
+  },
 ];
 
 const $Icon = styled.img`
   height: 1.5rem;
   width: 1.5rem;
 `;
+
+const $Link = styled.a`
+  --link-color: var(--color-text-2);
+`;

src/hooks/useNotifications.tsx

@@ -81,6 +81,7 @@ const useNotificationsContext = () => {
       setNotificationPreferences({
         [NotificationType.AbacusGenerated]: true,
         [NotificationType.SquidTransfer]: true,
+        [NotificationType.ReleaseUpdates]: true,
         version: LOCAL_STORAGE_VERSIONS[LocalStorageKey.NotificationPreferences],
       });
     }

src/hooks/useSquid.tsx

@@ -1,50 +0,0 @@
-import { createContext, useContext, useEffect, useMemo, useState } from 'react';
-import { useSelector } from 'react-redux';
-import { Squid } from '@0xsquid/sdk';
-
-import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
-
-import { getSelectedNetwork } from '@/state/appSelectors';
-
-export const NATIVE_TOKEN_ADDRESS = '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE';
-
-export const STATUS_ERROR_GRACE_PERIOD = 300_000;
-
-const useSquidContext = () => {
-  const selectedNetwork = useSelector(getSelectedNetwork);
-  const [_, setInitialized] = useState(false);
-
-  const initializeClient = async () => {
-    setInitialized(false);
-    if (!squid) return;
-    await squid.init();
-    setInitialized(true);
-  };
-
-  const squid = useMemo(
-    () =>
-      new Squid({
-        baseUrl: ENVIRONMENT_CONFIG_MAP[selectedNetwork]?.endpoints['0xsquid'],
-        integratorId: ENVIRONMENT_CONFIG_MAP[selectedNetwork]?.squidIntegratorId,
-      }),
-    [selectedNetwork]
-  );
-
-  useEffect(() => {
-    if (squid) {
-      initializeClient();
-    }
-  }, [squid]);
-
-  return squid;
-};
-
-type SquidContextType = ReturnType<typeof useSquidContext>;
-const SquidContext = createContext<SquidContextType | undefined>(undefined);
-SquidContext.displayName = '0xSquid';
-
-export const SquidProvider = ({ ...props }) => (
-  <SquidContext.Provider value={useSquidContext()} {...props} />
-);
-
-export const useSquid = () => useContext(SquidContext);

src/hooks/useSubaccount.tsx

@@ -31,6 +31,7 @@ import { log } from '@/lib/telemetry';
 import { useAccounts } from './useAccounts';
 import { useTokenConfigs } from './useTokenConfigs';
 import { useDydxClient } from './useDydxClient';
+import { hashFromTx } from '@/lib/hashfromTx';
 
 type SubaccountContextType = ReturnType<typeof useSubaccountContext>;
 const SubaccountContext = createContext<SubaccountContextType>({} as SubaccountContextType);
@@ -293,12 +294,29 @@ export const useSubaccountContext = ({ localDydxWallet }: { localDydxWallet?: Lo
   );
 
   const sendSquidWithdraw = useCallback(
-    async (amount: number, payload: string) => {
+    async (amount: number, payload: string, isCctp?: boolean) => {
+      
+      const cctpWithdraw = () => {
+        return new Promise<string>((resolve, reject) => 
+          abacusStateManager.cctpWithdraw((success, error, data) => {
+            const parsedData = JSON.parse(data);
+            if (success && parsedData?.code == 0) {
+              resolve(parsedData?.transactionHash);
+            } else {
+              reject(error);
+            }
+          })
+        )
+      }
+      if (isCctp) {
+        return await cctpWithdraw();
+      }
+
       if (!subaccountClient) {
         return;
       }
-
+      const tx = await sendSquidWithdrawFromSubaccount({ subaccountClient, amount, payload });
-      return await sendSquidWithdrawFromSubaccount({ subaccountClient, amount, payload });
+      return hashFromTx(tx?.hash);
     },
     [subaccountClient, sendSquidWithdrawFromSubaccount]
   );

src/hooks/useTestFlags.tsx

@@ -1,46 +0,0 @@
-import { createContext, useContext, useEffect, useState } from 'react';
-import { useLocation } from 'react-router-dom';
-import queryString from 'query-string';
-
-class TestFlags {
-  public queryParams: queryString.ParsedQuery<string>;
-
-  constructor() {
-    this.queryParams = {};
-  }
-
-  setQueryParams(flags: queryString.ParsedQuery<string>) {
-    this.queryParams = flags;
-  }
-
-  get displayInitializingMarkets() {
-    return !!this.queryParams.displayInitializingMarkets;
-  }
-}
-
-export const testFlags = new TestFlags();
-
-const useTestFlagsContext = () => {
-  const [queryParams, setQueryParams] = useState<queryString.ParsedQuery<string>>({});
-  const location = useLocation();
-
-  useEffect(() => {
-    const parsedQueryParams = queryString.parse(location.search.substring(-1));
-    testFlags.setQueryParams(parsedQueryParams);
-    setQueryParams(parsedQueryParams);
-  }, []);
-
-  return {
-    ...queryParams,
-  };
-};
-
-type TestFlagsContextType = ReturnType<typeof useTestFlagsContext>;
-const TestFlagsContext = createContext<TestFlagsContextType>({} as TestFlagsContextType);
-TestFlagsContext.displayName = 'TestFlags';
-
-export const TestFlagsProvider = ({ ...props }) => (
-  <TestFlagsContext.Provider value={useTestFlagsContext()} {...props} />
-);
-
-export const useTestFlags = () => useContext(TestFlagsContext);

src/hooks/useTradeFormInputs.ts

@@ -0,0 +1,30 @@
+import { getTradeFormInputs } from '@/state/inputsSelectors';
+import { useEffect } from 'react';
+import { shallowEqual, useSelector } from 'react-redux';
+
+import { TradeInputField } from '@/constants/abacus';
+
+import abacusStateManager from '@/lib/abacus';
+
+export const useTradeFormInputs = () => {
+  const tradeFormInputValues = useSelector(getTradeFormInputs, shallowEqual);
+  const { limitPriceInput, triggerPriceInput, trailingPercentInput } = tradeFormInputValues;
+
+  useEffect(() => {
+    abacusStateManager.setTradeValue({
+      value: triggerPriceInput,
+      field: TradeInputField.triggerPrice,
+    });
+  }, [triggerPriceInput]);
+
+  useEffect(() => {
+    abacusStateManager.setTradeValue({ value: limitPriceInput, field: TradeInputField.limitPrice });
+  }, [limitPriceInput]);
+
+  useEffect(() => {
+    abacusStateManager.setTradeValue({
+      value: trailingPercentInput,
+      field: TradeInputField.trailingPercent,
+    });
+  }, [trailingPercentInput]);
+};

src/icons/index.ts

@@ -32,6 +32,7 @@ export { default as GiftboxIcon } from './giftbox.svg';
 export { default as HelpCircleIcon } from './help-circle.svg';
 export { default as HideIcon } from './hide.svg';
 export { default as HistoryIcon } from './history.svg';
+export { default as LeaderboardIcon } from './leaderboard.svg';
 export { default as LinkOutIcon } from './link-out.svg';
 export { default as LockIcon } from './lock.svg';
 export { default as LogoShortIcon } from './logo-short';
@@ -43,6 +44,7 @@ export { default as OrderbookIcon } from './orderbook.svg';
 export { default as OverviewIcon } from './overview.svg';
 export { default as PencilIcon } from './pencil.svg';
 export { default as PlayIcon } from './play.svg';
+export { default as PlusIcon } from './plus.svg';
 export { default as PortfolioIcon } from './portfolio.svg';
 export { default as PositionsIcon } from './positions.svg';
 export { default as PriceChartIcon } from './price-chart.svg';

src/icons/leaderboard.svg

@@ -0,0 +1,3 @@
+<svg width="13" height="14" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M0.0996094 2.60156C0.0996094 2.07113 0.310323 1.56242 0.685396 1.18735C1.06047 0.812276 1.56918 0.601563 2.09961 0.601562H10.8996C11.43 0.601563 11.9387 0.812276 12.3138 1.18735C12.6889 1.56242 12.8996 2.07113 12.8996 2.60156C12.8996 3.132 12.6889 3.6407 12.3138 4.01578C11.9387 4.39085 11.43 4.60156 10.8996 4.60156H2.09961C1.56918 4.60156 1.06047 4.39085 0.685396 4.01578C0.310323 3.6407 0.0996094 3.132 0.0996094 2.60156ZM0.699609 6.26796C0.540479 6.26796 0.387867 6.33118 0.275345 6.4437C0.162823 6.55622 0.0996094 6.70883 0.0996094 6.86796C0.0996094 7.02709 0.162823 7.1797 0.275345 7.29223C0.387867 7.40475 0.540479 7.46796 0.699609 7.46796H12.2996C12.4587 7.46796 12.6114 7.40475 12.7239 7.29223C12.8364 7.1797 12.8996 7.02709 12.8996 6.86796C12.8996 6.70883 12.8364 6.55622 12.7239 6.4437C12.6114 6.33118 12.4587 6.26796 12.2996 6.26796H0.699609ZM0.699609 9.13196C0.540479 9.13196 0.387867 9.19518 0.275345 9.3077C0.162823 9.42022 0.0996094 9.57283 0.0996094 9.73196C0.0996094 9.89109 0.162823 10.0437 0.275345 10.1562C0.387867 10.2687 0.540479 10.332 0.699609 10.332H12.2996C12.4587 10.332 12.6114 10.2687 12.7239 10.1562C12.8364 10.0437 12.8996 9.89109 12.8996 9.73196C12.8996 9.57283 12.8364 9.42022 12.7239 9.3077C12.6114 9.19518 12.4587 9.13196 12.2996 9.13196H0.699609ZM0.699609 12.0016C0.540479 12.0016 0.387867 12.0648 0.275345 12.1773C0.162823 12.2898 0.0996094 12.4424 0.0996094 12.6016C0.0996094 12.7607 0.162823 12.9133 0.275345 13.0258C0.387867 13.1383 0.540479 13.2016 0.699609 13.2016H12.2996C12.4587 13.2016 12.6114 13.1383 12.7239 13.0258C12.8364 12.9133 12.8996 12.7607 12.8996 12.6016C12.8996 12.4424 12.8364 12.2898 12.7239 12.1773C12.6114 12.0648 12.4587 12.0016 12.2996 12.0016H0.699609Z" fill="currentColor"/>
+</svg>

src/icons/plus.svg

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

src/layout/DialogManager.tsx

@@ -11,13 +11,13 @@ import { DepositDialog } from '@/views/dialogs/DepositDialog';
 import { DisconnectDialog } from '@/views/dialogs/DisconnectDialog';
 import { ExchangeOfflineDialog } from '@/views/dialogs/ExchangeOfflineDialog';
 import { HelpDialog } from '@/views/dialogs/HelpDialog';
+import { ExternalLinkDialog } from '@/views/dialogs/ExternalLinkDialog';
 import { ExternalNavKeplrDialog } from '@/views/dialogs/ExternalNavKeplrDialog';
 import { MnemonicExportDialog } from '@/views/dialogs/MnemonicExportDialog';
 import { MobileSignInDialog } from '@/views/dialogs/MobileSignInDialog';
 import { OnboardingDialog } from '@/views/dialogs/OnboardingDialog';
 import { PreferencesDialog } from '@/views/dialogs/PreferencesDialog';
 import { RateLimitDialog } from '@/views/dialogs/RateLimitDialog';
-import { ReceiveDialog } from '@/views/dialogs/ReceiveDialog';
 import { RestrictedGeoDialog } from '@/views/dialogs/RestrictedGeoDialog';
 import { TradeDialog } from '@/views/dialogs/TradeDialog';
 import { TransferDialog } from '@/views/dialogs/TransferDialog';
@@ -54,13 +54,13 @@ export const DialogManager = () => {
     [DialogTypes.FillDetails]: <FillDetailsDialog {...modalProps} />,
     [DialogTypes.Help]: <HelpDialog {...modalProps} />,
     [DialogTypes.ExternalNavKeplr]: <ExternalNavKeplrDialog {...modalProps} />,
+    [DialogTypes.ExternalLink]: <ExternalLinkDialog {...modalProps} />,
     [DialogTypes.MnemonicExport]: <MnemonicExportDialog {...modalProps} />,
     [DialogTypes.MobileSignIn]: <MobileSignInDialog {...modalProps} />,
     [DialogTypes.Onboarding]: <OnboardingDialog {...modalProps} />,
     [DialogTypes.OrderDetails]: <OrderDetailsDialog {...modalProps} />,
     [DialogTypes.Preferences]: <PreferencesDialog {...modalProps} />,
     [DialogTypes.RateLimit]: <RateLimitDialog {...modalProps} />,
-    [DialogTypes.Receive]: <ReceiveDialog {...modalProps} />,
     [DialogTypes.RestrictedGeo]: <RestrictedGeoDialog {...modalProps} />,
     [DialogTypes.RestrictedWallet]: <RestrictedWalletDialog {...modalProps} />,
     [DialogTypes.Trade]: <TradeDialog {...modalProps} />,

src/layout/Footer/FooterDesktop.tsx

@@ -1,7 +1,7 @@
 import styled, { type AnyStyledComponent, css } from 'styled-components';
 
 import { AbacusApiStatus } from '@/constants/abacus';
-import { ButtonSize } from '@/constants/buttons';
+import { ButtonSize, ButtonType } from '@/constants/buttons';
 import { STRING_KEYS } from '@/constants/localization';
 import { ENVIRONMENT_CONFIG_MAP, isDev } from '@/constants/networks';
 
@@ -55,10 +55,12 @@ export const FooterDesktop = () => {
           }
         >
           <Styled.FooterButton
+            type={statusPage ? ButtonType.Link : ButtonType.Button}
             slotLeft={<Styled.StatusDot exchangeStatus={exchangeStatus} />}
             slotRight={statusPage && <LinkOutIcon />}
             size={ButtonSize.XSmall}
             state={{ isDisabled: !statusPage }}
+            href={statusPage}
           >
             {label}
           </Styled.FooterButton>
@@ -132,7 +134,7 @@ Styled.StatusDot = styled.div<{ exchangeStatus: ExchangeStatus }>`
 Styled.FooterButton = styled(Button)`
   --button-height: 1.5rem;
   --button-radius: 0.25rem;
-  --button-backgroundColor: var(--color-layer-2);
+  --button-backgroundColor: transparent;
   --button-border: none;
   --button-textColor: var(--color-text-0);
 

src/layout/Footer/FooterMobile.tsx

@@ -1,7 +1,6 @@
 import styled, { type AnyStyledComponent } from 'styled-components';
 import { useDispatch, useSelector } from 'react-redux';
 
-import { ButtonAction, ButtonSize } from '@/constants/buttons';
 import { DialogTypes } from '@/constants/dialogs';
 import { STRING_KEYS } from '@/constants/localization';
 import { DEFAULT_MARKETID } from '@/constants/markets';
@@ -11,8 +10,8 @@ import { useShouldShowFooter, useStringGetter } from '@/hooks';
 import { layoutMixins } from '@/styles/layoutMixins';
 
 import { NavigationMenu } from '@/components/NavigationMenu';
-import { Icon } from '@/components/Icon';
+import { Icon, IconName } from '@/components/Icon';
-import { BellIcon, MarketsIcon, PlayIcon, PortfolioIcon, ProfileIcon, TradeIcon } from '@/icons';
+import { BellIcon, MarketsIcon, PortfolioIcon, ProfileIcon } from '@/icons';
 import { IconButton } from '@/components/IconButton';
 
 import { calculateCanAccountTrade } from '@/state/accountCalculators';
@@ -42,11 +41,9 @@ export const FooterMobile = () => {
                     value: 'trade',
                     label: stringGetter({ key: STRING_KEYS.TRADE }),
                     slotBefore: (
-                      <Styled.IconButton
+                      <Styled.StartIcon>
-                        iconComponent={TradeIcon}
+                        <Icon iconName={IconName.Trade} />
-                        size={ButtonSize.Large}
+                      </Styled.StartIcon>
-                        action={ButtonAction.Primary}
-                      />
                     ),
                     href: `${AppRoute.Trade}/${marketId ?? DEFAULT_MARKETID}`,
                   }
@@ -54,11 +51,9 @@ export const FooterMobile = () => {
                     value: 'onboarding',
                     label: stringGetter({ key: STRING_KEYS.ONBOARDING }),
                     slotBefore: (
-                      <Styled.IconButton
+                      <Styled.StartIcon>
-                        iconComponent={PlayIcon}
+                        <Icon iconName={IconName.Play} />
-                        size={ButtonSize.Large}
+                      </Styled.StartIcon>
-                        action={ButtonAction.Primary}
-                      />
                     ),
                     onClick: () => dispatch(openDialog({ type: DialogTypes.Onboarding })),
                   },
@@ -168,3 +163,24 @@ Styled.IconButton = styled(IconButton)`
 Styled.Icon = styled(Icon)`
   font-size: 1.5rem;
 `;
+
+Styled.StartIcon = styled.div`
+  display: inline-flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  margin-top: -0.25rem;
+
+  width: 3.5rem;
+  height: 3.5rem;
+
+  color: var(--color-text-2);
+  background-color: var(--color-accent);
+  border: solid var(--border-width) var(--color-border-white);
+  border-radius: 50%;
+
+  svg {
+    width: 1.5rem;
+    height: 1.5rem;
+  }
+`;

src/layout/Header/HeaderDesktop.tsx

@@ -1,6 +1,6 @@
 import styled, { type AnyStyledComponent } from 'styled-components';
 import { Link } from 'react-router-dom';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 
 import { ButtonShape } from '@/constants/buttons';
 import { DialogTypes } from '@/constants/dialogs';
@@ -8,6 +8,10 @@ import { STRING_KEYS } from '@/constants/localization';
 import { AppRoute } from '@/constants/routes';
 import { LogoShortIcon, BellStrokeIcon } from '@/icons';
 
+import { headerMixins } from '@/styles/headerMixins';
+import { layoutMixins } from '@/styles/layoutMixins';
+import breakpoints from '@/styles/breakpoints';
+
 import { useTokenConfigs, useStringGetter, useURLConfigs } from '@/hooks';
 
 import { Icon, IconName } from '@/components/Icon';
@@ -21,10 +25,7 @@ import { NotificationsMenu } from '@/views/menus/NotificationsMenu';
 import { LanguageSelector } from '@/views/menus/LanguageSelector';
 
 import { openDialog } from '@/state/dialogs';
-
+import { getHasSeenLaunchIncentives } from '@/state/configsSelectors';
-import { headerMixins } from '@/styles/headerMixins';
-import { layoutMixins } from '@/styles/layoutMixins';
-import breakpoints from '@/styles/breakpoints';
 
 export const HeaderDesktop = () => {
   const stringGetter = useStringGetter();
@@ -32,6 +33,8 @@ export const HeaderDesktop = () => {
   const dispatch = useDispatch();
   const { chainTokenLabel } = useTokenConfigs();
 
+  const hasSeenLaunchIncentives = useSelector(getHasSeenLaunchIncentives);
+
   const navItems = [
     {
       group: 'navigation',
@@ -55,6 +58,7 @@ export const HeaderDesktop = () => {
           value: chainTokenLabel,
           label: chainTokenLabel,
           href: `/${chainTokenLabel}`,
+          slotAfter: !hasSeenLaunchIncentives && <Styled.UnreadIndicator />,
         },
         {
           value: 'MORE',
@@ -238,3 +242,10 @@ Styled.IconButton = styled(IconButton)<{ size?: string }>`
   --button-icon-size: 1rem;
   --button-padding: 0 0.5em;
 `;
+
+Styled.UnreadIndicator = styled.div`
+  width: 0.4375rem;
+  height: 0.4375rem;
+  border-radius: 50%;
+  background-color: var(--color-accent);
+`;

src/layout/NotificationsToastArea.tsx

@@ -1,15 +1,17 @@
-import { useMemo } from 'react';
+import { useMemo, useState } from 'react';
 import styled, { css } from 'styled-components';
 
 import { NotificationStatus } from '@/constants/notifications';
-import { ButtonSize } from '@/constants/buttons';
+import { ButtonShape, ButtonSize } from '@/constants/buttons';
-
 import { useNotifications } from '@/hooks/useNotifications';
 import { useBreakpoints } from '@/hooks/useBreakpoints';
+import { ChevronLeftIcon } from '@/icons';
+import { breakpoints } from '@/styles';
 
 import { Button } from '@/components/Button';
 import { Toast } from '@/components/Toast';
 import { ToastArea } from '@/components/ToastArea';
+import { ToggleButton } from '@/components/ToggleButton';
 
 type StyleProps = {
   className?: string;
@@ -18,6 +20,8 @@ type StyleProps = {
 const MAX_TOASTS = 10;
 
 export const NotificationsToastArea = ({ className }: StyleProps) => {
+  const [shouldStackNotifications, setshouldStackNotifications] = useState(true);
+
   const {
     notifications,
     getKey,
@@ -43,20 +47,37 @@ export const NotificationsToastArea = ({ className }: StyleProps) => {
           key: getKey(notification),
           displayData: getDisplayData(notification),
         }))
-        .filter(({ displayData }) => displayData)
+        .filter(
+          ({ displayData, notification }) =>
+            displayData && notification.status < NotificationStatus.Unseen
+        )
         .slice(-MAX_TOASTS)
     );
   }, [notifications, getKey, getDisplayData]);
 
   if (isMenuOpen) return null;
 
+  const hasMultipleToasts = notificationMap.length > 1;
+
   return (
     <StyledToastArea swipeDirection={isMobile ? 'up' : 'right'} className={className}>
+      {hasMultipleToasts && (
+        <StyledToggleButton
+          shape={ButtonShape.Pill}
+          size={ButtonSize.XSmall}
+          isPressed={shouldStackNotifications}
+          onPressedChange={() => setshouldStackNotifications(!shouldStackNotifications)}
+        >
+          <ChevronLeftIcon />
+        </StyledToggleButton>
+      )}
+
       {notificationMap.map(({ notification, key, displayData }, idx) => (
         <StyledToast
           key={key}
-          layer={notificationMap.length - 1 - idx}
+          isStacked={shouldStackNotifications}
           isOpen={notification.status < NotificationStatus.Unseen}
+          layer={notificationMap.length - 1 - idx}
           notification={notification}
           slotIcon={displayData.icon}
           slotTitle={displayData.title}
@@ -74,7 +95,7 @@ export const NotificationsToastArea = ({ className }: StyleProps) => {
           actionAltText={displayData.actionAltText}
           duration={displayData.toastDuration ?? Infinity}
           sensitivity={displayData.toastSensitivity}
-          setIsOpen={(isOpen, isClosedFromTimeout) => {
+          setIsOpen={(isOpen: boolean, isClosedFromTimeout?: boolean) => {
             if (!isOpen)
               if (isClosedFromTimeout)
                 // Toast timer expired without user interaction
@@ -97,16 +118,58 @@ const StyledToastArea = styled(ToastArea)`
   padding: 0.75rem 0.75rem 0.75rem 0;
 
   mask-image: linear-gradient(to left, transparent, white 0.5rem);
+
+  @media ${breakpoints.mobile} {
+    width: 100%;
+    position: fixed;
+  }
 `;
 
-const StyledToast = styled(Toast)<{ layer: number }>`
+const StyledToast = styled(Toast)<{ isStacked?: boolean; layer: number }>`
   // Stacked toast
+  ${({ isStacked, layer }) =>
+    isStacked
+      ? css`
+          position: absolute;
+          left: 0;
+          top: calc(${layer} * 2px);
+          right: calc(${layer} * -2px);
+        `
+      : css`
+          margin-bottom: 0.75rem;
+        `}
+`;
+
+const StyledToggleButton = styled(ToggleButton)<{ isPressed: boolean }>`
+  z-index: 2;
+  pointer-events: auto;
+  display: none;
   position: absolute;
-  top: 0;
+  top: 4px;
-  left: 0;
+  left: calc(50% - 0.75rem);
-  right: 0;
+  --button-width: 2rem;
-  ${({ layer }) => css`
+  --button-height: 1rem;
-    right: calc(${layer} * -2px);
+
-    top: calc(${layer} * 2px);
+  ${StyledToastArea}:hover & {
-  `}
+    display: flex;
+  }
+
+  > svg {
+    width: 4px;
+    margin-top: 1px;
+    transform: rotate(-90deg);
+
+    ${({ isPressed }) =>
+      !isPressed &&
+      css`
+        transform: rotate(90deg);
+      `}
+  }
+
+  @media ${breakpoints.mobile} {
+    display: flex;
+    left: calc(50% - 2rem);
+    --button-width: 4rem;
+    --button-height: 2rem;
+  }
 `;

src/lib/abacus/dydxChainTransactions.ts

@@ -1,7 +1,8 @@
 import Abacus, { type Nullable } from '@dydxprotocol/v4-abacus';
 import Long from 'long';
 import type { IndexedTx } from '@cosmjs/stargate';
-import { encodeJson } from '@dydxprotocol/v4-client-js';
+import { GAS_MULTIPLIER, encodeJson } from '@dydxprotocol/v4-client-js';
+import { EncodeObject } from '@cosmjs/proto-signing';
 
 import {
   CompositeClient,
@@ -9,6 +10,7 @@ import {
   type LocalWallet,
   Network,
   NetworkOptimizer,
+  NobleClient,
   SubaccountClient,
   ValidatorConfig,
   OrderType,
@@ -40,11 +42,14 @@ import { openDialog } from '@/state/dialogs';
 import { StatefulOrderError } from '../errors';
 import { bytesToBigInt } from '../numbers';
 import { log } from '../telemetry';
+import { hashFromTx } from '../hashfromTx';
 
 class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
   private compositeClient: CompositeClient | undefined;
+  private nobleClient: NobleClient | undefined;
   private store: RootStore | undefined;
   private localWallet: LocalWallet | undefined;
+  private nobleWallet: LocalWallet | undefined;
 
   constructor() {
     this.compositeClient = undefined;
@@ -59,6 +64,17 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
     this.localWallet = localWallet;
   }
 
+  setNobleWallet(nobleWallet: LocalWallet) {
+    try {
+      this.nobleWallet = nobleWallet;
+      if (this.nobleClient) {
+        this.nobleClient.connect(nobleWallet);
+      }
+    } catch (e) {
+      log('DydxChainTransactions/setNobleWallet', e);
+    }
+  }
+
   async connectNetwork(
     paramsInJson: Nullable<string>,
     callback: (p0: Nullable<string>) => void
@@ -70,6 +86,7 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
         websocketUrl,
         validatorUrl,
         chainId,
+        nobleValidatorUrl,
         USDC_DENOM,
         USDC_DECIMALS,
         USDC_GAS_DENOM,
@@ -101,6 +118,15 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
 
       this.compositeClient = compositeClient;
 
+      try {
+        if (nobleValidatorUrl) {
+          this.nobleClient = new NobleClient(nobleValidatorUrl);
+          if (this.nobleWallet) await this.nobleClient.connect(this.nobleWallet);
+        }
+      } catch (e) {
+        log('DydxChainTransactions/connectNetwork/NobleClient', e);
+      }
+
       // Dispatch custom event to notify other parts of the app that the network has been connected
       const customEvent = new CustomEvent('abacus:connectNetwork', {
         detail: parsedParams,
@@ -186,8 +212,8 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
         timeInForce as OrderTimeInForce,
         goodTilTimeInSeconds ?? 0,
         execution as OrderExecution,
-        postOnly,
+        postOnly ?? undefined,
-        reduceOnly,
+        reduceOnly ?? undefined,
         triggerPrice ?? undefined
       );
 
@@ -325,6 +351,122 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
     }
   }
 
+  async sendNobleIBC(params: { msgTypeUrl: string; msg: any }): Promise<string> {
+    if (!this.nobleClient?.isConnected) {
+      throw new Error('Missing nobleClient or localWallet');
+    }
+
+    try {
+      const ibcMsg = {
+        typeUrl: params.msgTypeUrl, // '/ibc.applications.transfer.v1.MsgTransfer',
+        value: params.msg,
+      };
+      const fee = await this.nobleClient.simulateTransaction([ibcMsg]);
+
+      // take out fee from amount before sweeping
+      const amount =
+        parseInt(ibcMsg.value.token.amount, 10) -
+        Math.floor(parseInt(fee.amount[0].amount, 10) * GAS_MULTIPLIER);
+
+      if (amount <= 0) {
+        throw new Error('noble balance does not cover fees');
+      }
+
+      ibcMsg.value.token.amount = amount.toString();
+      const tx = await this.nobleClient.send([ibcMsg]);
+
+      const parsedTx = this.parseToPrimitives(tx);
+
+      return JSON.stringify(parsedTx);
+    } catch (error) {
+      log('DydxChainTransactions/sendNobleIBC', error);
+
+      return JSON.stringify({
+        error,
+      });
+    }
+  }
+
+  async withdrawToNobleIBC(params: {
+    subaccountNumber: number;
+    amount: string;
+    ibcPayload: string;
+  }): Promise<string> {
+    if (!this.compositeClient || !this.localWallet) {
+      throw new Error('Missing compositeClient or localWallet');
+    }
+
+    const { subaccountNumber, amount, ibcPayload } = params ?? {};
+    const parsedIbcPayload: {
+      msgTypeUrl: string;
+      msg: any;
+    } = ibcPayload ? JSON.parse(atob(ibcPayload)) : undefined;
+
+    try {
+      const msg = this.compositeClient.withdrawFromSubaccountMessage(
+        new SubaccountClient(this.localWallet, subaccountNumber),
+        parseFloat(amount).toFixed(this.compositeClient.validatorClient.config.denoms.USDC_DECIMALS)
+      );
+      const ibcMsg: EncodeObject = {
+        typeUrl: parsedIbcPayload.msgTypeUrl,
+        value: parsedIbcPayload.msg,
+      };
+
+      const tx = await this.compositeClient.send(
+        this.localWallet,
+        () => Promise.resolve([msg, ibcMsg]),
+        false
+      );
+
+      return JSON.stringify({
+        txHash: hashFromTx(tx?.hash),
+      });
+    } catch (error) {
+      log('DydxChainTransactions/withdrawToNobleIBC', error);
+
+      return JSON.stringify({
+        error,
+      });
+    }
+  }
+
+  async cctpWithdraw(params: { typeUrl: string; value: any }): Promise<string> {
+    if (!this.nobleClient?.isConnected) {
+      throw new Error('Missing nobleClient or localWallet');
+    }
+
+    try {
+      const ibcMsg = {
+        typeUrl: params.typeUrl, // '/circle.cctp.v1.MsgDepositForBurn',
+        value: params.value,
+      };
+      const fee = await this.nobleClient.simulateTransaction([ibcMsg]);
+
+      // take out fee from amount before sweeping
+      const amount =
+        parseInt(ibcMsg.value.amount, 10) -
+        Math.floor(parseInt(fee.amount[0].amount, 10) * GAS_MULTIPLIER);
+
+      if (amount <= 0) {
+        throw new Error('noble balance does not cover fees');
+      }
+
+      ibcMsg.value.amount = amount.toString();
+
+      const tx = await this.nobleClient.send([ibcMsg]);
+
+      const parsedTx = this.parseToPrimitives(tx);
+
+      return JSON.stringify(parsedTx);
+    } catch (error) {
+      log('DydxChainTransactions/cctpWithdraw', error);
+
+      return JSON.stringify({
+        error,
+      });
+    }
+  }
+
   async transaction(
     type: TransactionTypes,
     paramsInJson: Abacus.Nullable<string>,
@@ -354,6 +496,22 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
           callback(result);
           break;
         }
+        case TransactionType.SendNobleIBC: {
+          const result = await this.sendNobleIBC(params);
+          callback(result);
+          break;
+        }
+        case TransactionType.WithdrawToNobleIBC: {
+          const result = await this.withdrawToNobleIBC(params);
+          callback(result);
+          break;
+        }
+        case TransactionType.CctpWithdraw: {
+          const result = await this.cctpWithdraw(params);
+          callback(result);
+          break;
+          break;
+        }
         default: {
           break;
         }
@@ -441,6 +599,13 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
           const parseDelegations = this.parseToPrimitives(delegations);
           callback(JSON.stringify(parseDelegations));
           break;
+        case QueryType.GetNobleBalance:
+          if (this.nobleClient?.isConnected) {
+            const nobleBalance = await this.nobleClient.getAccountBalance('uusdc');
+            const parsedNobleBalance = this.parseToPrimitives(nobleBalance);
+            callback(JSON.stringify(parsedNobleBalance));
+          }
+          break;
         default:
           break;
       }

src/lib/abacus/index.ts

@@ -26,12 +26,14 @@ import {
 } from '@/constants/abacus';
 
 import { DEFAULT_MARKETID } from '@/constants/markets';
-import { CURRENT_ABACUS_DEPLOYMENT, type DydxNetwork } from '@/constants/networks';
+import { CURRENT_ABACUS_DEPLOYMENT, type DydxNetwork, isMainnet } from '@/constants/networks';
+import { CLEARED_SIZE_INPUTS, CLEARED_TRADE_INPUTS } from '@/constants/trade';
 
 import type { RootStore } from '@/state/_store';
+import { setTradeFormInputs } from '@/state/inputs';
+import { getInputTradeOptions, getTransferInputs } from '@/state/inputsSelectors';
 
-import { getInputTradeOptions } from '@/state/inputsSelectors';
+import { testFlags } from '@/lib/testFlags';
-import { getTransferInputs } from '@/state/inputsSelectors';
 
 import AbacusRest from './rest';
 import AbacusAnalytics from './analytics';
@@ -43,6 +45,7 @@ import AbacusFormatter from './formatter';
 import AbacusThreading from './threading';
 import AbacusFileSystem from './filesystem';
 import { LocaleSeparators } from '../numbers';
+
 class AbacusStateManager {
   private store: RootStore | undefined;
   private currentMarket: string | undefined;
@@ -80,10 +83,13 @@ class AbacusStateManager {
       this.abacusFormatter
     );
 
+    const appConfigs = AbacusAppConfig.Companion.forWeb;
+    appConfigs.squidVersion = AbacusAppConfig.SquidVersion.V2;
+
     this.stateManager = new AsyncAbacusStateManager(
       '',
       CURRENT_ABACUS_DEPLOYMENT,
-      AbacusAppConfig.Companion.forWeb,
+      appConfigs,
       ioImplementations,
       uiImplementations,
       // @ts-ignore
@@ -132,6 +138,8 @@ class AbacusStateManager {
       this.setTradeValue({ value: null, field: TradeInputField.limitPrice });
     }
 
+    this.store?.dispatch(setTradeFormInputs(CLEARED_TRADE_INPUTS));
+
     if (shouldResetSize) {
       this.setTradeValue({ value: null, field: TradeInputField.size });
       this.setTradeValue({ value: null, field: TradeInputField.usdcSize });
@@ -139,6 +147,8 @@ class AbacusStateManager {
       if (needsLeverage) {
         this.setTradeValue({ value: null, field: TradeInputField.leverage });
       }
+
+      this.store?.dispatch(setTradeFormInputs(CLEARED_SIZE_INPUTS));
     }
   };
 
@@ -175,6 +185,12 @@ class AbacusStateManager {
     }
   };
 
+  setNobleWallet = (nobleWallet?: LocalWallet) => {
+    if (nobleWallet) {
+      this.chainTransactions.setNobleWallet(nobleWallet);
+    }
+  };
+
   setTransfersSourceAddress = (evmAddress: string) => {
     this.stateManager.sourceAddress = evmAddress;
   };
@@ -218,18 +234,6 @@ class AbacusStateManager {
     this.abacusFormatter.setLocaleSeparators({ group, decimal });
   };
 
-  setTransferStatus = ({
-    hash,
-    fromChainId,
-    toChainId,
-  }: {
-    hash: string;
-    fromChainId?: string;
-    toChainId?: string;
-  }) => {
-    this.stateManager.transferStatus(hash, fromChainId, toChainId);
-  };
-
   // ------ Transactions ------ //
 
   placeOrder = (
@@ -257,6 +261,14 @@ class AbacusStateManager {
     ) => void
   ) => this.stateManager.cancelOrder(orderId, callback);
 
+  cctpWithdraw = (
+    callback: (
+      success: boolean,
+      parsingError: Nullable<ParsingError>,
+      data: string,
+    ) => void
+  ): void => this.stateManager.commitCCTPWithdraw(callback);
+
   // ------ Utils ------ //
   getHistoricalPnlPeriod = (): Nullable<HistoricalPnlPeriods> =>
     this.stateManager.historicalPnlPeriod;

src/lib/abacus/websocket.ts

@@ -10,7 +10,7 @@ import {
 } from '@/constants/websocket';
 
 import { lastSuccessfulWebsocketRequestByOrigin } from '@/hooks/useAnalytics';
-import { testFlags } from '@/hooks/useTestFlags';
+import { testFlags } from '@/lib/testFlags';
 
 import { subscriptionsByChannelId } from '@/lib/tradingView/dydxfeed/cache';
 import { mapCandle } from '@/lib/tradingView/utils';

src/lib/hashfromTx.ts

@@ -0,0 +1,3 @@
+export const hashFromTx = (
+  txHash: string | Uint8Array
+): string => `0x${Buffer.from(txHash).toString('hex')}`;

src/lib/squid.ts

@@ -0,0 +1,48 @@
+import { isMainnet } from '@/constants/networks';
+import { GetStatus, StatusResponse } from '@0xsquid/sdk';
+
+export const NATIVE_TOKEN_ADDRESS = '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE';
+
+export const STATUS_ERROR_GRACE_PERIOD = 300_000;
+
+const getSquidStatusUrl = (isV2: boolean) => {
+  if (isV2) {
+    return isMainnet
+      ? 'https://v2.api.squidrouter.com/v2/status'
+      : 'https://testnet.v2.api.squidrouter.com/v2/status';
+  }
+  return isMainnet
+    ? 'https://api.squidrouter.com/v1/status'
+    : 'https://testnet.api.squidrouter.com/v1/status';
+};
+
+export const fetchSquidStatus = async (
+  params: GetStatus,
+  isV2?: boolean,
+  integratorId?: string
+): Promise<StatusResponse> => {
+  const parsedParams: { [key: string]: string } = {
+    transactionId: params.transactionId,
+    fromChainId: String(params.fromChainId),
+    toChainId: String(params.toChainId),
+  };
+  if (isV2) parsedParams.bridgeType = 'cctp';
+  const url = `${getSquidStatusUrl(!!isV2)}?${new URLSearchParams(parsedParams).toString()}`;
+
+  const response = await fetch(url, {
+    headers: {
+      "x-integrator-id": integratorId || 'dYdX-api'
+    },
+  });
+
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error);
+  }
+
+  return response.json();
+};
+
+export const getNobleChainId = () => {
+  return isMainnet ? 'noble-1' : 'grand-1';
+}

src/lib/testFlags.ts

@@ -0,0 +1,27 @@
+class TestFlags {
+  public queryParams: { [key: string]: string };
+
+  constructor() {
+    this.queryParams = {};
+    const hash = window.location.hash;
+    const queryIndex = hash.indexOf('?');
+    if (queryIndex === -1) return;
+
+    const queryParamsString = hash.substring(queryIndex + 1);
+    const params = new URLSearchParams(queryParamsString);
+
+    for (const [key, value] of params) {
+      this.queryParams[key] = value;
+    }
+  }
+
+  get displayInitializingMarkets() {
+    return !!this.queryParams.displayInitializingMarkets;
+  }
+
+  get withCCTP() {
+    return !!this.queryParams.withCCTP;
+  }
+}
+
+export const testFlags = new TestFlags();

src/lib/wagmi.ts

@@ -146,7 +146,7 @@ const getConnectors = (walletConnectConfig: WalletConnectConfig) => [
   new CoinbaseWalletConnector({
     chains,
     options: {
-      appName: 'wagmi',
+      appName: 'dYdX',
       reloadOnDisconnect: false,
     },
   }),

src/pages/AlertsPage.tsx

@@ -1,4 +1,6 @@
 import { DialogPlacement } from '@/components/Dialog';
 import { NotificationsMenu } from '@/views/menus/NotificationsMenu';
 
-export const AlertsPage = () => <NotificationsMenu placement={DialogPlacement.Inline} />;
+const AlertsPage = () => <NotificationsMenu placement={DialogPlacement.Inline} />;
+
+export default AlertsPage;

src/pages/PrivacyPolicyPage.tsx

@@ -2,7 +2,7 @@ import styled, { AnyStyledComponent } from 'styled-components';
 
 import { articleMixins } from '@/styles/articleMixins';
 
-export const PrivacyPolicyPage = () => (
+const PrivacyPolicyPage = () => (
   <Styled.Article>
     <header>
       <h1>Privacy Policy</h1>
@@ -10,6 +10,8 @@ export const PrivacyPolicyPage = () => (
   </Styled.Article>
 );
 
+export default PrivacyPolicyPage;
+
 const Styled: Record<string, AnyStyledComponent> = {};
 
 Styled.Article = styled.article`

src/pages/Profile.tsx

@@ -2,12 +2,16 @@ import styled, { AnyStyledComponent, css } from 'styled-components';
 import { Link } from 'react-router-dom';
 import { useDispatch, useSelector } from 'react-redux';
 import { useEnsName } from 'wagmi';
+import { useNavigate } from 'react-router-dom';
 
 import { ButtonSize } from '@/constants/buttons';
+import { TransferInputField, TransferType } from '@/constants/abacus';
+
+import { layoutMixins } from '@/styles/layoutMixins';
 
 import { Details } from '@/components/Details';
 import { FillsTable, FillsTableColumnKey } from '@/views/tables/FillsTable';
-import { IconName } from '@/components/Icon';
+import { Icon, IconName } from '@/components/Icon';
 import { IconButton, type IconButtonProps } from '@/components/IconButton';
 import { Panel } from '@/components/Panel';
 import { Toolbar } from '@/components/Toolbar';
@@ -16,22 +20,22 @@ import { OnboardingState } from '@/constants/account';
 import { DialogTypes } from '@/constants/dialogs';
 import { STRING_KEYS } from '@/constants/localization';
 import { AppRoute, PortfolioRoute, HistoryRoute } from '@/constants/routes';
-import { wallets, WalletType } from '@/constants/wallets';
+import { wallets } from '@/constants/wallets';
 import { useAccounts, useStringGetter, useTokenConfigs } from '@/hooks';
 
 import { getOnboardingState } from '@/state/accountSelectors';
 import { openDialog } from '@/state/dialogs';
 
+import abacusStateManager from '@/lib/abacus';
 import { isTruthy } from '@/lib/isTruthy';
 import { truncateAddress } from '@/lib/wallet';
 
-import { layoutMixins } from '@/styles/layoutMixins';
-
 const ENS_CHAIN_ID = 1; // Ethereum
 
 const Profile = () => {
   const stringGetter = useStringGetter();
   const dispatch = useDispatch();
+  const navigate = useNavigate();
 
   const onboardingState = useSelector(getOnboardingState);
   const isConnected = onboardingState !== OnboardingState.Disconnected;
@@ -46,17 +50,48 @@ const Profile = () => {
 
   const actions = [
     {
-      key: 'settings',
+      key: 'deposit',
-      label: stringGetter({ key: STRING_KEYS.SETTINGS }),
+      label: stringGetter({ key: STRING_KEYS.DEPOSIT }),
-      icon: { iconName: IconName.Gear },
+      icon: { iconName: IconName.Deposit },
-      href: AppRoute.Settings,
-    },
-    isConnected && {
-      key: 'transfers',
-      label: stringGetter({ key: STRING_KEYS.MANAGE_FUNDS }),
-      icon: { iconName: IconName.Transfer },
       onClick: () => {
-        dispatch(openDialog({ type: DialogTypes.ManageFunds }));
+        dispatch(
+          openDialog({
+            type: DialogTypes.ManageFunds,
+            dialogProps: {
+              selectedTransferType: TransferType.deposit.rawValue,
+            },
+          })
+        );
+      },
+    },
+    {
+      key: 'withdraw',
+      label: stringGetter({ key: STRING_KEYS.WITHDRAW }),
+      icon: { iconName: IconName.Withdraw },
+      onClick: () => {
+        dispatch(
+          openDialog({
+            type: DialogTypes.ManageFunds,
+            dialogProps: {
+              selectedTransferType: TransferType.withdrawal.rawValue,
+            },
+          })
+        );
+      },
+    },
+    {
+      key: 'transfer',
+      label: stringGetter({ key: STRING_KEYS.TRANSFER }),
+      icon: { iconName: IconName.Send },
+      onClick: () => {
+        dispatch(
+          openDialog({
+            type: DialogTypes.ManageFunds,
+            dialogProps: {
+              selectedTransferType: TransferType.transferOut.rawValue,
+            },
+          })
+        );
       },
     },
     isConnected
@@ -69,9 +104,9 @@ const Profile = () => {
           },
         }
       : {
-          key: 'wallet',
+          key: 'connect',
-          label: stringGetter({ key: STRING_KEYS.WALLET }),
+          label: stringGetter({ key: STRING_KEYS.CONNECT }),
-          icon: { iconComponent: wallets[walletType || WalletType.OtherWallet].icon },
+          icon: { iconName: IconName.Transfer },
           onClick: () => {
             dispatch(openDialog({ type: DialogTypes.Onboarding }));
           },
@@ -107,12 +142,7 @@ const Profile = () => {
         {actions.map(({ key, label, href, icon, onClick }) => {
           const action = (
             <>
-              <Styled.ActionButton
+              <Styled.ActionButton {...icon} size={ButtonSize.Large} onClick={onClick} />
-                {...icon}
-                size={ButtonSize.Large}
-                onClick={onClick}
-                isCloseIcon={icon.iconName === IconName.Close}
-              />
               <span>{label}</span>
             </>
           );
@@ -125,6 +155,26 @@ const Profile = () => {
           );
         })}
       </Styled.Actions>
+      <Styled.EqualGrid>
+        <Styled.PanelButton
+          slotHeader={
+            <Styled.InlineRow>
+              <Icon iconName={IconName.Gear} />
+              {stringGetter({ key: STRING_KEYS.SETTINGS })}
+            </Styled.InlineRow>
+          }
+          onClick={() => navigate(AppRoute.Settings)}
+        />
+        <Styled.PanelButton
+          slotHeader={
+            <Styled.InlineRow>
+              <Icon iconName={IconName.HelpCircle} />
+              {stringGetter({ key: STRING_KEYS.HELP })}
+            </Styled.InlineRow>
+          }
+          onClick={() => dispatch(openDialog({ type: DialogTypes.Help }))}
+        />
+      </Styled.EqualGrid>
 
       <Styled.EqualGrid>
         <Panel
@@ -183,7 +233,7 @@ Styled.MobileProfileLayout = styled.div`
   ${layoutMixins.contentContainerPage}
 
   gap: 1rem;
-  padding: 1.25rem;
+  padding: 1.25rem 0.9rem;
 `;
 
 Styled.Header = styled.header`
@@ -248,19 +298,21 @@ Styled.Actions = styled(Toolbar)`
   }
 `;
 
-Styled.ActionButton = styled(IconButton)<{ isCloseIcon?: boolean }>`
+Styled.ActionButton = styled(IconButton)<{ iconName?: IconName }>`
   margin-bottom: 0.5rem;
 
-  ${({ isCloseIcon }) =>
+  ${({ iconName }) =>
-    isCloseIcon &&
+    iconName === IconName.Close
-    css`
+      ? css`
-      --button-textColor: var(--color-negative);
+          --button-textColor: var(--color-negative);
-
+          --button-icon-size: 0.75em;
-      svg {
+        `
-        width: 0.875em;
+      : iconName === IconName.Transfer &&
-        height: 0.875em;
+        css`
-      }
+          --button-icon-size: 1.25em;
-    `}
+          --button-textColor: var(--color-text-2);
+          --button-backgroundColor: var(--color-accent);
+        `}
 `;
 
 Styled.EqualGrid = styled.div`
@@ -309,3 +361,14 @@ Styled.TablePanel = styled(Panel)`
     }
   }
 `;
+
+Styled.InlineRow = styled.div`
+  ${layoutMixins.inlineRow}
+  padding: 1rem;
+  gap: 0.5rem;
+`;
+
+Styled.PanelButton = styled(Panel)`
+  --panel-paddingY: 0
+  --panel-paddingX:0;
+`;

src/pages/TermsOfUsePage.tsx

@@ -2,7 +2,7 @@ import styled, { AnyStyledComponent } from 'styled-components';
 
 import { articleMixins } from '@/styles/articleMixins';
 
-export const TermsOfUsePage = () => (
+const TermsOfUsePage = () => (
   <Styled.Article>
     <header>
       <h1>Sample Terms of Use</h1>
@@ -1076,6 +1076,8 @@ export const TermsOfUsePage = () => (
   </Styled.Article>
 );
 
+export default TermsOfUsePage;
+
 const Styled: Record<string, AnyStyledComponent> = {};
 
 Styled.Article = styled.article`

src/pages/portfolio/Portfolio.tsx

@@ -1,17 +1,20 @@
+import { lazy, Suspense } from 'react';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 import styled, { type AnyStyledComponent } from 'styled-components';
 import { Navigate, Route, Routes } from 'react-router-dom';
 
 import { OnboardingState } from '@/constants/account';
+import { ButtonAction } from '@/constants/buttons';
 import { DialogTypes } from '@/constants/dialogs';
 import { STRING_KEYS } from '@/constants/localization';
 import { HistoryRoute, PortfolioRoute } from '@/constants/routes';
-
 import { useAccountBalance, useBreakpoints, useDocumentTitle, useStringGetter } from '@/hooks';
+import { layoutMixins } from '@/styles/layoutMixins';
 
 import { FillsTable, FillsTableColumnKey } from '@/views/tables/FillsTable';
 import { FundingPaymentsTable } from '@/views/tables/FundingPaymentsTable';
 import { TransferHistoryTable } from '@/views/tables/TransferHistoryTable';
+import { Button } from '@/components/Button';
 import { Icon, IconName } from '@/components/Icon';
 import { NavigationMenu } from '@/components/NavigationMenu';
 import { WithSidebar } from '@/components/WithSidebar';
@@ -20,15 +23,15 @@ import { getOnboardingState, getSubaccount } from '@/state/accountSelectors';
 import { openDialog } from '@/state/dialogs';
 
 import { PortfolioNavMobile } from './PortfolioNavMobile';
-import { Overview } from './Overview';
+import { 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 () => {
   const dispatch = useDispatch();
@@ -44,49 +47,51 @@ export default () => {
   useDocumentTitle(stringGetter({ key: STRING_KEYS.PORTFOLIO }));
 
   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 ? (
@@ -191,7 +196,7 @@ Styled.SideBar = styled.div`
 Styled.Footer = styled.div`
   ${layoutMixins.row}
   flex-wrap: wrap;
-  
+
   padding: 1rem;
 
   gap: 0.5rem;

src/pages/rewards/DYDXBalancePanel.tsx

@@ -2,6 +2,7 @@ import type { ElementType } from 'react';
 import styled, { AnyStyledComponent } from 'styled-components';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 
+import breakpoints from '@/styles/breakpoints';
 import { layoutMixins } from '@/styles/layoutMixins';
 import { useAccountBalance, useAccounts, useTokenConfigs, useStringGetter } from '@/hooks';
 
@@ -39,7 +40,7 @@ export const DYDXBalancePanel = () => {
             <AssetIcon symbol={chainTokenLabel} />
             {chainTokenLabel}
           </Styled.Title>
-          <Styled.ReceiveAndTransferButtons>
+          <Styled.ActionButtons>
             {!canAccountTrade ? (
               <OnboardingTriggerButton size={ButtonSize.Small} />
             ) : (
@@ -52,7 +53,7 @@ export const DYDXBalancePanel = () => {
                 {stringGetter({ key: STRING_KEYS.TRANSFER })}
               </Button>
             )}
-          </Styled.ReceiveAndTransferButtons>
+          </Styled.ActionButtons>
         </Styled.Header>
       }
     >
@@ -116,12 +117,17 @@ const Styled: Record<string, AnyStyledComponent> = {};
 
 Styled.Panel = styled(Panel)`
   --panel-paddingX: 1.5rem;
+
+  @media ${breakpoints.tablet} {
+    --panel-paddingY: 1.5rem;
+    --panel-content-paddingY: 1rem;
+  }
 `;
 
 Styled.Header = styled.div`
   ${layoutMixins.spacedRow}
   gap: 1rem;
-  padding: 1rem 1.5rem 0;
+  padding: var(--panel-paddingY) var(--panel-paddingX) 0;
 `;
 
 Styled.Title = styled.h3`
@@ -134,7 +140,7 @@ Styled.Title = styled.h3`
   }
 `;
 
-Styled.ReceiveAndTransferButtons = styled(Toolbar)`
+Styled.ActionButtons = styled(Toolbar)`
   ${layoutMixins.inlineRow}
   --stickyArea-topHeight: max-content;
   gap: 0.5rem;

src/pages/rewards/LaunchIncentivesPanel.tsx

@@ -0,0 +1,296 @@
+import { useEffect } from 'react';
+import { useDispatch } from 'react-redux';
+import { useQuery } from 'react-query';
+import styled, { AnyStyledComponent } from 'styled-components';
+
+import { STRING_KEYS } from '@/constants/localization';
+import { ButtonAction } from '@/constants/buttons';
+import { DialogTypes } from '@/constants/dialogs';
+
+import breakpoints from '@/styles/breakpoints';
+import { useAccounts, useBreakpoints, useStringGetter } from '@/hooks';
+
+import { layoutMixins } from '@/styles/layoutMixins';
+
+import { Panel } from '@/components/Panel';
+import { Button } from '@/components/Button';
+
+import { Output, OutputType } from '@/components/Output';
+import { Icon, IconName } from '@/components/Icon';
+import { Tag, TagSize } from '@/components/Tag';
+
+import { markLaunchIncentivesSeen } from '@/state/configs';
+import { openDialog } from '@/state/dialogs';
+
+import { log } from '@/lib/telemetry';
+
+export const LaunchIncentivesPanel = () => {
+  const { isNotTablet } = useBreakpoints();
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    dispatch(markLaunchIncentivesSeen());
+  }, []);
+
+  return isNotTablet ? (
+    <Styled.Panel slotHeader={<LaunchIncentivesTitle />} slotRight={<EstimatedRewards />}>
+      <LaunchIncentivesContent />
+    </Styled.Panel>
+  ) : (
+    <Styled.Panel>
+      <Styled.Column>
+        <EstimatedRewards />
+        <LaunchIncentivesTitle />
+        <LaunchIncentivesContent />
+      </Styled.Column>
+    </Styled.Panel>
+  );
+};
+
+const LaunchIncentivesTitle = () => {
+  const stringGetter = useStringGetter();
+  return (
+    <Styled.Title>
+      {stringGetter({
+        key: STRING_KEYS.LAUNCH_INCENTIVES_TITLE,
+        params: {
+          FOR_V4: <Styled.ForV4>{stringGetter({ key: STRING_KEYS.FOR_V4 })}</Styled.ForV4>,
+        },
+      })}
+      <Styled.NewTag size={TagSize.Medium}>{stringGetter({ key: STRING_KEYS.NEW })}</Styled.NewTag>
+    </Styled.Title>
+  );
+};
+
+const EstimatedRewards = () => {
+  const stringGetter = useStringGetter();
+  const { dydxAddress } = useAccounts();
+
+  const { data, isLoading } = useQuery({
+    enabled: !!dydxAddress,
+    queryKey: `launch_incentives_rewards_${dydxAddress ?? ''}`,
+    queryFn: async () => {
+      if (!dydxAddress) return undefined;
+      const resp = await fetch(`https://cloud.chaoslabs.co/query/api/dydx/points/${dydxAddress}`);
+      return (await resp.json())?.incentivePoints;
+    },
+    onError: (error: Error) => log('LaunchIncentives/fetchPoints', error),
+  });
+
+  return (
+    <Styled.EstimatedRewardsCard>
+      <Styled.EstimatedRewardsCardContent>
+        <div>
+          <span>{stringGetter({ key: STRING_KEYS.ESTIMATED_REWARDS })}</span>
+          <Styled.Season>
+            {stringGetter({
+              key: STRING_KEYS.LAUNCH_INCENTIVES_SEASON_NUM,
+              params: {
+                SEASON_NUMBER: 1,
+              },
+            })}
+          </Styled.Season>
+        </div>
+
+        <Styled.Points>
+          <Output type={OutputType.Number} value={data} isLoading={isLoading} fractionDigits={2} />
+          {data !== undefined && stringGetter({ key: STRING_KEYS.POINTS })}
+        </Styled.Points>
+      </Styled.EstimatedRewardsCardContent>
+
+      <Styled.Image src="/rewards-stars.svg" />
+    </Styled.EstimatedRewardsCard>
+  );
+};
+
+const LaunchIncentivesContent = () => {
+  const stringGetter = useStringGetter();
+  const dispatch = useDispatch();
+
+  return (
+    <Styled.Column>
+      <Styled.Description>
+        {stringGetter({ key: STRING_KEYS.LAUNCH_INCENTIVES_DESCRIPTION })}{' '}
+      </Styled.Description>
+      <Styled.ChaosLabsLogo src="/logos/chaos-labs.svg" />
+      <Styled.ButtonRow>
+        <Styled.AboutButton
+          action={ButtonAction.Base}
+          onClick={() => {
+            dispatch(
+              openDialog({
+                type: DialogTypes.ExternalLink,
+                dialogProps: { link: 'https://dydx.exchange/blog/v4-full-trading' },
+              })
+            );
+          }}
+          slotRight={<Styled.LinkOutIcon iconName={IconName.LinkOut} />}
+        >
+          {stringGetter({ key: STRING_KEYS.ABOUT })}
+        </Styled.AboutButton>
+        <Styled.Button
+          action={ButtonAction.Primary}
+          onClick={() => {
+            dispatch(
+              openDialog({
+                type: DialogTypes.ExternalLink,
+                dialogProps: { link: 'https://community.chaoslabs.xyz/dydx-v4/risk/leaderboard' },
+              })
+            );
+          }}
+          slotRight={<Styled.LinkOutIcon iconName={IconName.LinkOut} />}
+          slotLeft={<Icon iconName={IconName.Leaderboard} />}
+        >
+          {stringGetter({ key: STRING_KEYS.LEADERBOARD })}
+        </Styled.Button>
+      </Styled.ButtonRow>
+    </Styled.Column>
+  );
+};
+
+const Styled: Record<string, AnyStyledComponent> = {};
+
+Styled.Panel = styled(Panel)`
+  --panel-paddingY: 1rem;
+  --panel-paddingX: 1.5rem;
+
+  background-color: var(--color-layer-4);
+  width: 100%;
+
+  @media ${breakpoints.tablet} {
+    --panel-paddingY: 1.5rem;
+  }
+`;
+
+Styled.ForV4 = styled.span`
+  color: var(--color-text-0);
+`;
+
+Styled.Title = styled.h3`
+  ${layoutMixins.inlineRow}
+  font: var(--font-medium-book);
+  color: var(--color-text-2);
+
+  @media ${breakpoints.notTablet} {
+    padding: var(--panel-paddingY) var(--panel-paddingX) 0;
+  }
+`;
+
+Styled.Description = styled.div`
+  color: var(--color-text-0);
+  --link-color: var(--color-text-1);
+
+  a {
+    display: inline;
+    text-decoration: underline;
+    text-underline-offset: 0.25rem;
+
+    ::before {
+      content: ' ';
+    }
+  }
+`;
+
+Styled.ButtonRow = styled.div`
+  ${layoutMixins.inlineRow}
+  gap: 0.75rem;
+  margin-top: 0.5rem;
+
+  a:last-child {
+    --button-width: 100%;
+  }
+`;
+
+Styled.Button = styled(Button)`
+  --button-padding: 0 1rem;
+`;
+
+Styled.LinkOutIcon = styled(Icon)`
+  color: var(--color-text-1);
+`;
+
+Styled.AboutButton = styled(Styled.Button)`
+  --button-textColor: var(--color-text-2);
+  --button-backgroundColor: var(--color-layer-6);
+  --button-border: solid var(--border-width) var(--color-layer-7);
+`;
+
+Styled.Column = styled.div`
+  ${layoutMixins.flexColumn}
+  gap: 0.5rem;
+`;
+
+Styled.EstimatedRewardsCard = styled.div`
+  ${layoutMixins.spacedRow}
+  padding: 1rem 1.25rem;
+  min-width: 21.25rem;
+  height: calc(100% - calc(1.5rem * 2));
+  margin: 1.5rem;
+
+  background-color: var(--color-layer-5);
+  background-image: url('/dots-background.svg');
+  background-size: cover;
+
+  border-radius: 0.75rem;
+  border: solid var(--border-width) var(--color-layer-6);
+  color: var(--color-text-1);
+
+  @media ${breakpoints.tablet} {
+    margin: 0 0 0.5rem;
+  }
+`;
+
+Styled.EstimatedRewardsCardContent = styled.div`
+  ${layoutMixins.flexColumn}
+  gap: 1rem;
+  height: 100%;
+  justify-content: space-between;
+
+  div {
+    ${layoutMixins.flexColumn}
+    gap: 0.15rem;
+    font: var(--font-medium-book);
+
+    :first-child {
+      color: var(--color-text-2);
+    }
+  }
+`;
+
+Styled.BackgroundDots = styled.img`
+  position: absolute;
+`;
+
+Styled.Season = styled.span`
+  font: var(--font-small-book);
+  color: var(--color-text-1);
+`;
+
+Styled.Points = styled.span`
+  ${layoutMixins.inlineRow}
+  gap: 0.25rem;
+  font: var(--font-large-book);
+  color: var(--color-text-0);
+
+  output {
+    color: var(--color-text-2);
+  }
+`;
+
+Styled.Image = styled.img`
+  position: relative;
+  float: right;
+
+  width: 5.25rem;
+  height: auto;
+`;
+
+Styled.ChaosLabsLogo = styled.img`
+  height: 1.25rem;
+  align-self: start;
+`;
+
+Styled.NewTag = styled(Tag)`
+  color: var(--color-accent);
+  background-color: var(--color-accent-faded);
+`;

src/pages/rewards/MigratePanel.tsx

@@ -7,6 +7,8 @@ import { ButtonAction, ButtonSize, ButtonType } from '@/constants/buttons';
 
 import { useAccountBalance, useBreakpoints, useStringGetter } from '@/hooks';
 
+import { breakpoints } from '@/styles';
+
 import { layoutMixins } from '@/styles/layoutMixins';
 
 import { Details } from '@/components/Details';
@@ -134,13 +136,22 @@ const Styled: Record<string, AnyStyledComponent> = {};
 Styled.MigratePanel = styled(Panel)`
   --panel-paddingX: 1.5rem;
   width: 100%;
+
+  background-image: url('/dots-background.svg');
+  background-position: right;
+  background-repeat: no-repeat;
+
+  @media ${breakpoints.tablet} {
+    --panel-paddingY: 1.5rem;
+    --panel-content-paddingY: 1rem;
+  }
 `;
 
 Styled.Title = styled.h3`
   font: var(--font-medium-book);
   color: var(--color-text-2);
 
-  padding: 1rem 1.5rem 0;
+  padding: var(--panel-paddingY) var(--panel-paddingX) 0;
 `;
 
 Styled.MigrateAction = styled.div`
@@ -164,6 +175,13 @@ Styled.Token = styled(Output)`
 Styled.Description = styled.div`
   color: var(--color-text-0);
   --link-color: var(--color-text-1);
+
+  a {
+    display: inline;
+    ::before {
+      content: ' ';
+    }
+  }
 `;
 
 Styled.Column = styled.div`

src/pages/rewards/RewardsHelpPanel.tsx

@@ -0,0 +1,80 @@
+import styled, { AnyStyledComponent } from 'styled-components';
+
+import { STRING_KEYS } from '@/constants/localization';
+import { layoutMixins } from '@/styles/layoutMixins';
+import { useStringGetter } from '@/hooks';
+
+import { Accordion } from '@/components/Accordion';
+import { Link } from '@/components/Link';
+import { Panel } from '@/components/Panel';
+
+const REWARDS_LEARN_MORE_LINK = ''; // to be configured
+
+export const RewardsHelpPanel = () => {
+  const stringGetter = useStringGetter();
+
+  return (
+    <Styled.HelpCard
+      slotHeader={
+        <Styled.Header>
+          <h3>{stringGetter({ key: STRING_KEYS.HELP })}</h3>
+          {REWARDS_LEARN_MORE_LINK && (
+            <Link withIcon href={REWARDS_LEARN_MORE_LINK}>
+              {stringGetter({ key: STRING_KEYS.LEARN_MORE })}
+            </Link>
+          )}
+        </Styled.Header>
+      }
+    >
+      <Accordion
+        items={[
+          {
+            header: 'Who is eligible for trading rewards?',
+            content: 'All traders are eligible for trading rewards.',
+          },
+          {
+            header: 'How do trading rewards work?',
+            content:
+              'Immediately after each fill, trading rewards are sent directly to the trader’s dYdX Chain address, based on the amount of fees paid by the trader.',
+          },
+          {
+            header: 'How do I claim my rewards?',
+            content:
+              'Each block, trading rewards are automatically sent directly to the trader’s dYdX Chain address.',
+          },
+        ]}
+      />
+    </Styled.HelpCard>
+  );
+};
+
+const Styled: Record<string, AnyStyledComponent> = {};
+
+Styled.HelpCard = styled(Panel)`
+  --panel-content-paddingY: 0;
+  width: 100%;
+  height: max-content;
+  padding: 0;
+  gap: 0;
+
+  text-align: start;
+`;
+
+Styled.Header = styled.div`
+  ${layoutMixins.spacedRow}
+  gap: 1ch;
+
+  padding: 1.25rem 1.5rem;
+  border-bottom: var(--border-width) solid var(--border-color);
+
+  font: var(--font-small-book);
+
+  h3 {
+    font: var(--font-medium-book);
+    color: var(--color-text-2);
+  }
+`;
+
+Styled.Link = styled(Link)`
+  display: inline-flex;
+`;

src/pages/rewards/RewardsPage.tsx

@@ -19,8 +19,9 @@ import { openDialog } from '@/state/dialogs';
 
 import { DYDXBalancePanel } from './DYDXBalancePanel';
 import { MigratePanel } from './MigratePanel';
+import { LaunchIncentivesPanel } from './LaunchIncentivesPanel';
 
-export const RewardsPage = () => {
+const RewardsPage = () => {
   const dispatch = useDispatch();
   const stringGetter = useStringGetter();
   const { governanceLearnMore, stakingLearnMore } = useURLConfigs();
@@ -39,9 +40,20 @@ export const RewardsPage = () => {
   return (
     <Styled.Page>
       {import.meta.env.VITE_V3_TOKEN_ADDRESS && <MigratePanel />}
-      <Styled.PanelRow>
-        {isTablet && <DYDXBalancePanel />}
 
+      {isTablet ? (
+        <>
+          <LaunchIncentivesPanel />
+          <DYDXBalancePanel />
+        </>
+      ) : (
+        <Styled.PanelRowIncentivesAndBalance>
+          <LaunchIncentivesPanel />
+          <DYDXBalancePanel />
+        </Styled.PanelRowIncentivesAndBalance>
+      )}
+
+      <Styled.PanelRow>
         <Styled.Panel
           slotHeader={<Styled.Title>{stringGetter({ key: STRING_KEYS.GOVERNANCE })}</Styled.Title>}
           slotRight={panelArrow}
@@ -67,13 +79,13 @@ export const RewardsPage = () => {
             </Link>
           </Styled.Description>
         </Styled.Panel>
-
-        {isNotTablet && <DYDXBalancePanel />}
       </Styled.PanelRow>
     </Styled.Page>
   );
 };
 
+export default RewardsPage;
+
 const Styled: Record<string, AnyStyledComponent> = {};
 
 Styled.Page = styled.div`
@@ -99,6 +111,11 @@ Styled.Page = styled.div`
 
 Styled.Panel = styled(Panel)`
   --panel-paddingX: 1.5rem;
+
+  @media ${breakpoints.tablet} {
+    --panel-paddingY: 1.5rem;
+    --panel-content-paddingY: 1rem;
+  }
 `;
 
 Styled.Title = styled.h3`
@@ -110,20 +127,29 @@ Styled.Title = styled.h3`
 Styled.Description = styled.div`
   color: var(--color-text-0);
   --link-color: var(--color-text-1);
+
+  a {
+    display: inline;
+    ::before {
+      content: ' ';
+    }
+  }
 `;
 
 Styled.PanelRow = styled.div`
   ${layoutMixins.gridEqualColumns}
   gap: 1.5rem;
 
-  align-items: flex-start;
-
   @media ${breakpoints.tablet} {
     grid-auto-flow: row;
     grid-template-columns: 1fr;
   }
 `;
 
+Styled.PanelRowIncentivesAndBalance = styled(Styled.PanelRow)`
+  grid-template-columns: 2fr 1fr;
+`;
+
 Styled.IconButton = styled(IconButton)`
   color: var(--color-text-0);
   --color-border: var(--color-layer-6);

src/pages/settings/Settings.tsx

@@ -25,7 +25,7 @@ import { useNetworks } from '@/views/menus/useNetworks';
 import { SettingsHeader } from './SettingsHeader';
 import { ComingSoonSpace } from '@/components/ComingSoon';
 
-export const SettingsPage = () => {
+const SettingsPage = () => {
   const stringGetter = useStringGetter();
   const { pathname } = useLocation();
   const dispatch = useDispatch();
@@ -105,3 +105,5 @@ export const SettingsPage = () => {
     </>
   );
 };
+
+export default SettingsPage;

src/pages/trade/HorizontalPanel.tsx

@@ -1,8 +1,7 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { shallowEqual, useSelector } from 'react-redux';
 import styled, { type AnyStyledComponent } from 'styled-components';
 
-import { AbacusOrderStatus } from '@/constants/abacus';
 import { STRING_KEYS } from '@/constants/localization';
 
 import { useBreakpoints, useStringGetter } from '@/hooks';
@@ -28,7 +27,6 @@ import {
   getCurrentMarketTradeInfoNumbers,
   getHasUnseenFillUpdates,
   getHasUnseenOrderUpdates,
-  getLatestOrderStatus,
   getTradeInfoNumbers,
 } from '@/state/accountSelectors';
 
@@ -82,125 +80,141 @@ export const HorizontalPanel = ({ isOpen = true, setIsOpen }: ElementProps) => {
     showCurrentMarket ? numOpenOrders : numTotalOpenOrders
   );
 
-  const tabItems = [
+  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>
-        )
+        ),
-      ),
 
-      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 ? (
     <MobileTabs defaultValue={InfoSection.Position} items={tabItems} withBorders={false} />

src/pages/trade/Trade.tsx

@@ -7,7 +7,12 @@ import { layoutMixins } from '@/styles/layoutMixins';
 
 import { TradeLayouts } from '@/constants/layout';
 
-import { useBreakpoints, useCurrentMarketId, usePageTitlePriceUpdates } from '@/hooks';
+import {
+  useBreakpoints,
+  useCurrentMarketId,
+  usePageTitlePriceUpdates,
+  useTradeFormInputs,
+} from '@/hooks';
 
 import { calculateCanAccountTrade } from '@/state/accountCalculators';
 import { getSelectedTradeLayout } from '@/state/layoutSelectors';
@@ -37,6 +42,7 @@ const TradePage = () => {
   const [isHorizontalPanelOpen, setIsHorizontalPanelOpen] = useState(true);
 
   usePageTitlePriceUpdates();
+  useTradeFormInputs();
 
   return isTablet ? (
     <Styled.TradeLayoutMobile>

src/pages/trade/VerticalPanel.tsx

@@ -1,6 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useState } from 'react';
-import { useSelector } from 'react-redux';
-import styled, { AnyStyledComponent } from 'styled-components';
 
 import { TradeLayouts } from '@/constants/layout';
 import { STRING_KEYS } from '@/constants/localization';
@@ -9,11 +7,9 @@ import { useStringGetter } from '@/hooks';
 
 import { Tabs } from '@/components/Tabs';
 
-import { Orderbook, orderbookMixins, OrderbookScrollBehavior } from '@/views/tables/Orderbook';
+import { Orderbook } from '@/views/Orderbook';
 import { LiveTrades } from '@/views/tables/LiveTrades';
 
-import { getCurrentMarketId } from '@/state/perpetualsSelectors';
-
 enum Tab {
   Orderbook = 'Orderbook',
   Trades = 'Trades',
@@ -27,22 +23,13 @@ const HISTOGRAM_SIDES_BY_LAYOUT = {
 
 export const VerticalPanel = ({ tradeLayout }: { tradeLayout: TradeLayouts }) => {
   const stringGetter = useStringGetter();
-
   const [value, setValue] = useState(Tab.Orderbook);
-  const [scrollBehavior, setScrollBehavior] = useState<OrderbookScrollBehavior>('snapToCenter');
-
-  const marketId = useSelector(getCurrentMarketId);
-
-  useEffect(() => {
-    setScrollBehavior('snapToCenter');
-  }, [marketId]);
 
   return (
-    <Styled.Tabs
+    <Tabs
       fullWidthTabs
       value={value}
       onValueChange={(value: Tab) => {
-        setScrollBehavior('snapToCenter');
         setValue(value);
       }}
       items={[
@@ -50,6 +37,7 @@ export const VerticalPanel = ({ tradeLayout }: { tradeLayout: TradeLayouts }) =>
           content: <Orderbook histogramSide={HISTOGRAM_SIDES_BY_LAYOUT[tradeLayout]} />,
           label: stringGetter({ key: STRING_KEYS.ORDERBOOK_SHORT }),
           value: Tab.Orderbook,
+          asChild: true,
         },
         {
           content: <LiveTrades histogramSide={HISTOGRAM_SIDES_BY_LAYOUT[tradeLayout]} />,
@@ -57,26 +45,7 @@ export const VerticalPanel = ({ tradeLayout }: { tradeLayout: TradeLayouts }) =>
           value: Tab.Trades,
         },
       ]}
-      onWheel={() => setScrollBehavior('free')}
       withTransitions={false}
-      isShowingOrderbook={value === Tab.Orderbook}
-      scrollBehavior={scrollBehavior}
-      // style={{
-      //   scrollSnapType: {
-      //     'snapToCenter': 'y mandatory',
-      //     'free': 'none',
-      //     'snapToCenterUnlessHovered': 'none',
-      //   }[scrollBehavior],
-      // }}
     />
   );
 };
-
-const Styled: Record<string, AnyStyledComponent> = {};
-
-Styled.Tabs = styled(Tabs)<{
-  isShowingOrderbook: boolean;
-  scrollBehavior: OrderbookScrollBehavior;
-}>`
-  ${orderbookMixins.scrollArea}
-`;

src/state/configs.ts

@@ -17,6 +17,7 @@ export interface ConfigsState {
   feeTiers?: kollections.List<FeeTier>;
   feeDiscounts?: FeeDiscount[];
   network?: NetworkConfigs;
+  hasSeenLaunchIncentives: boolean;
 }
 
 const DOCUMENT_THEME_MAP = {
@@ -43,6 +44,10 @@ const initialState: ConfigsState = {
   feeDiscounts: undefined,
   feeTiers: undefined,
   network: undefined,
+  hasSeenLaunchIncentives: getLocalStorage({
+    key: LocalStorageKey.HasSeenLaunchIncentives,
+    defaultValue: false,
+  }),
 };
 
 changeTheme(initialState.appTheme);
@@ -60,7 +65,11 @@ export const configsSlice = createSlice({
       ...state,
       ...action.payload,
     }),
+    markLaunchIncentivesSeen: (state: ConfigsState) => {
+      setLocalStorage({ key: LocalStorageKey.HasSeenLaunchIncentives, value: true });
+      state.hasSeenLaunchIncentives = true;
+    },
   },
 });
 
-export const { setAppTheme, setConfigs } = configsSlice.actions;
+export const { setAppTheme, setConfigs, markLaunchIncentivesSeen } = configsSlice.actions;

src/state/configsSelectors.ts

@@ -5,3 +5,6 @@ export const getAppTheme = (state: RootState) => state.configs.appTheme;
 export const getFeeTiers = (state: RootState) => state.configs.feeTiers?.toArray();
 
 export const getFeeDiscounts = (state: RootState) => state.configs.feeDiscounts;
+
+export const getHasSeenLaunchIncentives = (state: RootState) =>
+  state.configs.hasSeenLaunchIncentives;

src/state/inputs.ts

@@ -1,4 +1,5 @@
 import { createSlice, type PayloadAction } from '@reduxjs/toolkit';
+import assign from 'lodash/assign';
 
 import type {
   InputError,
@@ -9,9 +10,14 @@ import type {
   TransferInputs,
 } from '@/constants/abacus';
 
+import { CLEARED_SIZE_INPUTS, CLEARED_TRADE_INPUTS } from '@/constants/trade';
+
+type TradeFormInputs = typeof CLEARED_TRADE_INPUTS & typeof CLEARED_SIZE_INPUTS;
+
 export interface InputsState {
   current?: Nullable<string>;
   inputErrors?: Nullable<InputError[]>;
+  tradeFormInputs: TradeFormInputs;
   tradeInputs?: Nullable<TradeInputs>;
   closePositionInputs?: Nullable<ClosePositionInputs>;
   transferInputs?: Nullable<TransferInputs>;
@@ -20,6 +26,10 @@ export interface InputsState {
 const initialState: InputsState = {
   current: undefined,
   inputErrors: undefined,
+  tradeFormInputs: {
+    ...CLEARED_TRADE_INPUTS,
+    ...CLEARED_SIZE_INPUTS,
+  },
   tradeInputs: undefined,
   transferInputs: undefined,
 };
@@ -37,10 +47,17 @@ export const inputsSlice = createSlice({
         inputErrors: errors?.toArray(),
         tradeInputs: trade,
         closePositionInputs: closePosition,
-        transferInputs: transfer,
+        transferInputs: {
+          ...transfer,
+          isCctp: !!transfer?.isCctp,
+        } as Nullable<TransferInputs>,
       };
     },
+
+    setTradeFormInputs: (state, action: PayloadAction<Partial<TradeFormInputs>>) => {
+      state.tradeFormInputs = assign({}, state.tradeFormInputs, action.payload);
+    },
   },
 });
 
-export const { setInputs } = inputsSlice.actions;
+export const { setInputs, setTradeFormInputs } = inputsSlice.actions;

src/state/inputsSelectors.ts

@@ -120,3 +120,8 @@ export const useTradeFormData = () => {
     shallowEqual
   );
 };
+
+/**
+ * @returns Tradeform Input states for display. Abacus inputs should track these values.
+ */
+export const getTradeFormInputs = (state: RootState) => state.inputs.tradeFormInputs;

src/state/localizationMiddleware.ts

@@ -57,9 +57,8 @@ export default (store: any) => (next: any) => async (action: PayloadAction<any>)
       } else if (globalThis.navigator?.language) {
         const browserLanguageBaseTag = globalThis.navigator.language.split('-')[0].toLowerCase();
 
-        const locale = SUPPORTED_BASE_TAGS_LOCALE_MAPPING[
+        const locale = (SUPPORTED_BASE_TAGS_LOCALE_MAPPING[browserLanguageBaseTag] ??
-          browserLanguageBaseTag
+          SUPPORTED_BASE_TAGS_LOCALE_MAPPING[SupportedLocales.EN]) as SupportedLocales;
-        ] as SupportedLocales;
 
         if (locale) {
           store.dispatch(setSelectedLocale({ locale, isAutoDetect: true }));

src/styles/colors.css

@@ -116,6 +116,7 @@
 
   --color-gradient-positive: hsla(158, 49%, 48%, 0.16);
   --color-gradient-negative: hsla(0, 100%, 66%, 0.16);
+  --color-accent-faded: hsla(var(--theme-classic-hue-purple), 100%, 70%, 0.16);
 
   --color-risk-low: var(--theme-classic-color-green);
   --color-risk-medium: var(--theme-classic-color-yellow);

src/styles/formMixins.ts

@@ -151,6 +151,8 @@ export const formMixins: Record<
     --form-input-paddingY: 0.5rem;
     --form-input-paddingX: 1rem;
 
+    height: 100%;
+
     label {
       --label-textColor: var(--color-text-0);
     }

src/styles/layoutMixins.ts

@@ -877,11 +877,6 @@ export const layoutMixins: Record<
     }
   `,
 
-  perspectiveArea: css`
-    perspective: 100rem;
-    transform-style: preserve-3d;
-  `,
-
   absolute: css`
     position: absolute;
     top: 0;

src/views/AccountInfo.tsx

@@ -63,7 +63,6 @@ Styled.AccountInfoSectionContainer = styled.div<{ showAccountInfo?: boolean }>`
   ${layoutMixins.column}
   height: var(--account-info-section-height);
   min-height: var(--account-info-section-height);
-  overflow-x: clip;
 
   ${({ showAccountInfo }) =>
     !showAccountInfo &&

src/views/AccountInfo/AccountInfoConnectedState.tsx

@@ -203,7 +203,6 @@ const Styled: Record<string, AnyStyledComponent> = {};
 
 Styled.Stack = styled.div`
   ${layoutMixins.stack}
-  ${layoutMixins.perspectiveArea}
 `;
 
 Styled.CornerButton = styled(Button)`
@@ -293,7 +292,14 @@ Styled.TransferButtons = styled.div`
 
 Styled.ConnectedAccountInfoContainer = styled.div<{ $showHeader?: boolean }>`
   ${layoutMixins.column}
-  ${layoutMixins.withOuterAndInnerBorders}
+
+  @media ${breakpoints.notTablet} {
+    ${layoutMixins.withOuterAndInnerBorders}
+  }
+
+  @media ${breakpoints.tablet} {
+    ${layoutMixins.withInnerBorder}
+  }
 
   ${({ $showHeader }) =>
     $showHeader &&

src/views/ExchangeBillboards.tsx

@@ -60,7 +60,7 @@ export const ExchangeBillboards: React.FC<ExchangeBillboardsProps> = ({
         },
         {
           key: 'trades',
-          labelKey: STRING_KEYS.TRADES,
+          labelKey: isTablet ? STRING_KEYS.TRADES_24H : STRING_KEYS.TRADES,
           value: totalTrades24H || undefined,
           type: isTablet ? OutputType.CompactNumber : OutputType.Number,
           subLabelKey: !isTablet && STRING_KEYS.TRADES_LABEL,

src/views/MarketDetails.tsx

@@ -213,13 +213,8 @@ Styled.MarketDetails = styled.div`
 `;
 
 Styled.Header = styled.header`
-  /* max-width: fit-content; */
-
   ${layoutMixins.column}
   gap: 1.25rem;
-
-  position: sticky;
-  bottom: 3rem;
 `;
 
 Styled.WrapRow = styled.div`

src/views/Orderbook.tsx

@@ -0,0 +1,317 @@
+import { useCallback, useMemo, useRef, useState } from 'react';
+import { shallowEqual, useDispatch, useSelector } from 'react-redux';
+import styled, { css } from 'styled-components';
+
+import { Nullable } from '@/constants/abacus';
+import { STRING_KEYS } from '@/constants/localization';
+
+import { useBreakpoints, useStringGetter } from '@/hooks';
+import {
+  useCalculateOrderbookData,
+  useCenterOrderbook,
+  useDrawOrderbook,
+  useSpreadRowScrollListener,
+} from '@/hooks/orderbook';
+
+import { calculateCanViewAccount } from '@/state/accountCalculators';
+import { getCurrentMarketAssetData } from '@/state/assetsSelectors';
+import { getCurrentMarketConfig } from '@/state/perpetualsSelectors';
+import { setTradeFormInputs } from '@/state/inputs';
+import { getCurrentInput } from '@/state/inputsSelectors';
+
+import { Canvas } from '@/components/Canvas';
+import { LoadingSpace } from '@/components/Loading/LoadingSpinner';
+import { Tag } from '@/components/Tag';
+
+import { ROW_HEIGHT, Row, type RowData } from './Orderbook/OrderbookRow';
+import { SpreadRow } from './Orderbook/SpreadRow';
+import { Output, OutputType } from '@/components/Output';
+
+const ORDERBOOK_MAX_ROWS_PER_SIDE = 35;
+
+type ElementProps = {
+  maxRowsPerSide?: number;
+  layout?: 'vertical' | 'horizontal';
+};
+
+type StyleProps = {
+  hideHeader?: boolean;
+  histogramSide?: 'left' | 'right';
+  className?: string;
+};
+
+const getEmptyRow = (side: 'bid' | 'ask') => ({
+  side,
+  size: undefined,
+  price: undefined,
+  offset: 0,
+  depth: undefined,
+});
+
+export const Orderbook = ({
+  histogramSide,
+  maxRowsPerSide = ORDERBOOK_MAX_ROWS_PER_SIDE,
+}: ElementProps & StyleProps) => {
+  const dispatch = useDispatch();
+  const stringGetter = useStringGetter();
+  const { isTablet } = useBreakpoints();
+
+  const showMineColumn = useSelector(calculateCanViewAccount) && !isTablet;
+  const currentInput = useSelector(getCurrentInput);
+  const { id = '' } = useSelector(getCurrentMarketAssetData, shallowEqual) ?? {};
+  const { stepSizeDecimals, tickSizeDecimals } =
+    useSelector(getCurrentMarketConfig, shallowEqual) ?? {};
+
+  const { asks, bids, spread, spreadPercent, histogramRange, hasOrderbook } =
+    useCalculateOrderbookData({
+      maxRowsPerSide,
+    });
+
+  const { askLevels, asksSlice, bidLevels, bidsSlice, numRows } = useMemo(() => {
+    const bidsSlice = bids.slice(0, maxRowsPerSide).reverse();
+    const asksSlice = asks.slice(0, maxRowsPerSide);
+
+    const numRows = maxRowsPerSide; // Math.max(bidsSlice.length, asksSlice.length);
+
+    if (asksSlice.length < numRows) {
+      const emptyRows = new Array(numRows - asksSlice.length).fill(getEmptyRow('ask'));
+      asksSlice.push(...emptyRows);
+    }
+
+    if (bidsSlice.length < numRows) {
+      const emptyRows = new Array(numRows - bidsSlice.length).fill(getEmptyRow('bid'));
+      bidsSlice.unshift(...emptyRows);
+    }
+
+    const askLevels = new Set(asksSlice.map(({ price }: { price: number }) => price));
+    const bidLevels = new Set(bidsSlice.map(({ price }: { price: number }) => price));
+
+    return { askLevels, asksSlice, bidLevels, bidsSlice, numRows };
+  }, [asks, bids]);
+
+  const orderbookRef = useRef<HTMLDivElement>(null);
+  useCenterOrderbook({ orderbookRef, marketId: id });
+
+  /**
+   * Display top or bottom spreadRow when center spreadRow is off screen
+   */
+  const spreadRowRef = useRef<HTMLDivElement>(null);
+
+  const displaySide = useSpreadRowScrollListener({
+    orderbookRef,
+    spreadRowRef,
+  });
+
+  /**
+   * Row action and hover
+   */
+  const onRowAction = useCallback(
+    (price: Nullable<number>) => {
+      if (currentInput === 'trade' && price) {
+        dispatch(setTradeFormInputs({ limitPriceInput: price?.toString() }));
+      }
+    },
+    [currentInput]
+  );
+
+  const [hoveredRow, setHoveredRow] = useState<{
+    idx: number;
+    side: 'bid' | 'ask';
+  }>();
+
+  const { canvasRef: asksCanvasRef, hoverCanvasRef: asksHoverRef } = useDrawOrderbook({
+    data: asksSlice.reverse(),
+    histogramRange,
+    stepSizeDecimals,
+    tickSizeDecimals,
+    hoveredRow: hoveredRow?.side === 'ask' ? hoveredRow.idx : undefined,
+    histogramSide,
+  });
+
+  const { canvasRef: bidsCanvasRef, hoverCanvasRef: bidsHoverRef } = useDrawOrderbook({
+    data: bidsSlice.reverse(),
+    histogramRange,
+    stepSizeDecimals,
+    tickSizeDecimals,
+    hoveredRow: hoveredRow?.side === 'bid' ? hoveredRow.idx : undefined,
+    histogramSide,
+  });
+
+  return (
+    <$OrderbookContainer>
+      <$OrderbookContent isLoading={!hasOrderbook}>
+        <$Header>
+          <span>
+            {stringGetter({ key: STRING_KEYS.SIZE })} {id && <Tag>{id}</Tag>}
+          </span>
+          <span>
+            {stringGetter({ key: STRING_KEYS.PRICE })} <Tag>USD</Tag>
+          </span>
+          <span>{showMineColumn && stringGetter({ key: STRING_KEYS.MINE })}</span>
+        </$Header>
+        {displaySide === 'top' && (
+          <$SpreadRow
+            side="top"
+            spread={spread}
+            spreadPercent={spreadPercent}
+            tickSizeDecimals={tickSizeDecimals}
+          />
+        )}
+        <$OrderbookWrapper ref={orderbookRef}>
+          {!hasOrderbook ? (
+            <LoadingSpace id="orderbook" />
+          ) : (
+            <>
+              <$OrderbookSideContainer
+                numRows={numRows}
+                side="ask"
+                onMouseLeave={() => setHoveredRow(undefined)}
+              >
+                <$OrderbookCanvas ref={asksCanvasRef} width="100%" height={numRows * ROW_HEIGHT} />
+                <$HoverCanvas ref={asksHoverRef} width="100%" height={numRows * ROW_HEIGHT} />
+                <$HoverRows>
+                  {asksSlice.map((row: RowData, idx) =>
+                    row.price ? (
+                      <$Row
+                        key={idx}
+                        title={`${row.price}`}
+                        onClick={() => onRowAction(row.price)}
+                        onMouseOver={(e) => setHoveredRow({ idx, side: 'ask' })}
+                      >
+                        <span></span>
+                        <span></span>
+                        <span>
+                          <Output
+                            type={OutputType.Fiat}
+                            value={row.price}
+                            fractionDigits={tickSizeDecimals}
+                          />
+                        </span>
+                      </$Row>
+                    ) : (
+                      <$Row key={idx} onMouseOver={(e) => setHoveredRow(undefined)} />
+                    )
+                  )}
+                </$HoverRows>
+              </$OrderbookSideContainer>
+
+              <SpreadRow
+                ref={spreadRowRef}
+                spread={spread}
+                spreadPercent={spreadPercent}
+                tickSizeDecimals={tickSizeDecimals}
+              />
+
+              <$OrderbookSideContainer
+                numRows={numRows}
+                side="bid"
+                onMouseLeave={() => setHoveredRow(undefined)}
+              >
+                <$OrderbookCanvas ref={bidsCanvasRef} width="100%" height={numRows * ROW_HEIGHT} />
+                <$HoverCanvas ref={bidsHoverRef} width="100%" height={numRows * ROW_HEIGHT} />
+                <$HoverRows>
+                  {bidsSlice.map((row: RowData, idx) =>
+                    row.price ? (
+                      <$Row
+                        key={idx}
+                        title={`${row.price}`}
+                        onClick={() => onRowAction(row.price)}
+                        onMouseOver={(e) => setHoveredRow({ idx, side: 'bid' })}
+                      >
+                        <span></span>
+                        <span></span>
+                        <span>
+                          <Output
+                            type={OutputType.Fiat}
+                            value={row.price}
+                            fractionDigits={tickSizeDecimals}
+                          />
+                        </span>
+                      </$Row>
+                    ) : (
+                      <$Row key={idx} onMouseOver={(e) => setHoveredRow(undefined)} />
+                    )
+                  )}
+                </$HoverRows>
+              </$OrderbookSideContainer>
+            </>
+          )}
+        </$OrderbookWrapper>
+        {displaySide === 'bottom' && (
+          <$SpreadRow
+            side="bottom"
+            spread={spread}
+            spreadPercent={spreadPercent}
+            tickSizeDecimals={tickSizeDecimals}
+          />
+        )}
+      </$OrderbookContent>
+    </$OrderbookContainer>
+  );
+};
+
+const $OrderbookContainer = styled.div`
+  display: flex;
+  flex: 1 1 0%;
+  flex-direction: column;
+  overflow: hidden;
+`;
+
+const $OrderbookContent = styled.div<{ isLoading?: boolean }>`
+  max-height: 100%;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+
+  ${({ isLoading }) => isLoading && 'flex: 1;'}
+`;
+
+const $Header = styled(Row)`
+  height: 2rem;
+  border-bottom: 1px solid var(--color-border);
+  color: var(--color-text-0);
+`;
+
+const $OrderbookWrapper = styled.div`
+  overflow-y: auto;
+  display: flex;
+  flex-direction: column;
+  flex: 1 1 0%;
+`;
+
+const $OrderbookSideContainer = styled.div<{ numRows: number; side: 'bid' | 'ask' }>`
+  ${({ numRows }) => css`
+    min-height: calc(${numRows} * 1.25rem);
+  `}
+
+  ${({ side }) => css`
+    --accent-color: ${side === 'bid' ? 'var(--color-positive)' : 'var(--color-negative)'};
+  `}
+  position: relative;
+`;
+
+const $OrderbookCanvas = styled(Canvas)`
+  width: 100%;
+  height: 100%;
+
+  position: absolute;
+  top: 0;
+  right: 0;
+
+  font-feature-settings: var(--fontFeature-monoNumbers);
+`;
+
+const $HoverCanvas = styled($OrderbookCanvas)``;
+
+const $HoverRows = styled.div`
+  position: absolute;
+  width: 100%;
+`;
+
+const $Row = styled(Row)<{ onClick?: () => void }>`
+  ${({ onClick }) => (onClick ? 'cursor: pointer;' : 'cursor: default;')}
+`;
+
+const $SpreadRow = styled(SpreadRow)`
+  position: absolute;
+`;

src/views/Orderbook/OrderbookRow.tsx

@@ -0,0 +1,26 @@
+import styled from 'styled-components';
+
+import { OrderbookLine } from '@/constants/abacus';
+export type RowData = OrderbookLine & { side: 'bid' | 'ask'; mine?: number };
+
+export const ROW_HEIGHT = 20;
+export const ROW_PADDING_RIGHT = 8;
+
+export const Row = styled.div`
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  height: ${ROW_HEIGHT}px;
+  min-height: ${ROW_HEIGHT}px;
+
+  font: var(--font-mini-book);
+
+  position: relative;
+  padding-right: 0.5rem;
+
+  > span {
+    flex: 1 1 0%;
+    text-align: right;
+    padding-bottom: 2px;
+  }
+`;

src/views/Orderbook/SpreadRow.tsx

@@ -0,0 +1,61 @@
+import { forwardRef } from 'react';
+import styled, { css } from 'styled-components';
+import BigNumber from 'bignumber.js';
+
+import type { Nullable } from '@/constants/abacus';
+import { STRING_KEYS } from '@/constants/localization';
+import { useStringGetter } from '@/hooks';
+
+import { Output, OutputType } from '@/components/Output';
+import { WithTooltip } from '@/components/WithTooltip';
+
+import { Row } from './OrderbookRow';
+
+type StyleProps = {
+  side?: 'top' | 'bottom';
+};
+
+type ElementProps = {
+  spread: BigNumber | null;
+  spreadPercent: Nullable<number>;
+  tickSizeDecimals: Nullable<number>;
+};
+
+export const SpreadRow = forwardRef<HTMLDivElement, StyleProps & ElementProps>(
+  ({ side, spread, spreadPercent, tickSizeDecimals }, ref) => {
+    const stringGetter = useStringGetter();
+
+    return (
+      <$SpreadRow ref={ref} side={side}>
+        <span>
+          <WithTooltip tooltip="spread">
+            {stringGetter({ key: STRING_KEYS.ORDERBOOK_SPREAD })}
+          </WithTooltip>
+        </span>
+        <span>
+          <Output type={OutputType.Number} value={spread} fractionDigits={tickSizeDecimals} />
+        </span>
+        <span>
+          <Output type={OutputType.Percent} value={spreadPercent} />
+        </span>
+      </$SpreadRow>
+    );
+  }
+);
+
+const $SpreadRow = styled(Row)<{ side?: 'top' | 'bottom' }>`
+  height: 2rem;
+  border-top: 1px solid var(--color-border);
+  border-bottom: 1px solid var(--color-border);
+
+  ${({ side }) =>
+    side &&
+    {
+      top: css`
+        border-top: none;
+      `,
+      bottom: css`
+        border-bottom: none;
+      `,
+    }[side]}
+`;

src/views/PositionInfo.tsx

@@ -453,13 +453,6 @@ Styled.Actions = styled.footer`
   > :last-child {
     flex: 2;
   }
-
-  position: sticky;
-  bottom: clamp(0.5rem, 7.5%, 2rem);
-
-  @media ${breakpoints.tablet} {
-    bottom: 0;
-  }
 `;
 
 Styled.Output = styled(Output)<{ sign: NumberSign; smallText?: boolean; margin?: string }>`
@@ -514,6 +507,7 @@ Styled.PositionInfo = styled.div`
 
 Styled.DetachedSection = styled(DetachedSection)`
   padding: 0 1.5rem;
+  position: relative;
 `;
 
 Styled.DetachedScrollableSection = styled(DetachedScrollableSection)`

src/views/TradeBoxOrderView.tsx

@@ -5,7 +5,7 @@ import { createSelector } from 'reselect';
 
 import { TradeInputField } from '@/constants/abacus';
 import { TradeTypes } from '@/constants/trade';
-import { STRING_KEYS } from '@/constants/localization';
+import { STRING_KEYS, StringKey } from '@/constants/localization';
 import { useStringGetter } from '@/hooks';
 import { layoutMixins } from '@/styles/layoutMixins';
 
@@ -30,7 +30,8 @@ const useTradeTypeOptions = () => {
   const allTradeTypeItems = typeOptions?.toArray()?.map(({ type, stringKey }) => ({
     value: type,
     label: stringGetter({
-      key: type === TradeTypes.TAKE_PROFIT ? STRING_KEYS.TAKE_PROFIT_LIMIT : stringKey,
+      key:
+        type === TradeTypes.TAKE_PROFIT ? STRING_KEYS.TAKE_PROFIT_LIMIT : (stringKey as StringKey),
     }),
   }));
 

src/views/charts/TvChart.tsx

@@ -82,7 +82,6 @@ const Styled: Record<string, AnyStyledComponent> = {};
 
 Styled.PriceChart = styled.div<{ isChartReady?: boolean }>`
   ${layoutMixins.stack}
-  ${layoutMixins.perspectiveArea}
 
   height: 100%;
 

src/views/dialogs/DepositDialog/DepositDialogContent.tsx

@@ -1,12 +1,15 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import styled, { type AnyStyledComponent } from 'styled-components';
 
+import { TransferInputField, TransferType } from '@/constants/abacus';
 import { isMainnet } from '@/constants/networks';
 import { layoutMixins } from '@/styles/layoutMixins';
 
 import { DepositForm } from '@/views/forms/AccountManagementForms/DepositForm';
 import { TestnetDepositForm } from '@/views/forms/AccountManagementForms/TestnetDepositForm';
 
+import abacusStateManager from '@/lib/abacus';
+
 type ElementProps = {
   onDeposit?: () => void;
 };
@@ -14,6 +17,20 @@ type ElementProps = {
 export const DepositDialogContent = ({ onDeposit }: ElementProps) => {
   const [showFaucet, setShowFaucet] = useState(!isMainnet);
 
+  useEffect(() => {
+    abacusStateManager.setTransferValue({
+      field: TransferInputField.type,
+      value: TransferType.deposit.rawValue,
+    });
+
+    return () => {
+      abacusStateManager.setTransferValue({
+        field: TransferInputField.type,
+        value: null,
+      });
+    };
+  }, []);
+
   return (
     <Styled.Content>
       {isMainnet || !showFaucet ? (

src/views/dialogs/DetailsDialog/FillDetailsDialog.tsx

@@ -94,7 +94,7 @@ export const FillDetailsDialog = ({ fillId, setIsOpen }: ElementProps) => {
 
   return (
     <DetailsDialog
-      slotIcon={<Styled.AssetIcon symbol={asset.id} />}
+      slotIcon={<Styled.AssetIcon symbol={asset?.id} />}
       title={resources.typeStringKey && stringGetter({ key: resources.typeStringKey })}
       items={detailItems}
       setIsOpen={setIsOpen}

src/views/dialogs/DetailsDialog/OrderDetailsDialog.tsx

@@ -194,7 +194,7 @@ export const OrderDetailsDialog = ({ orderId, setIsOpen }: ElementProps) => {
 
   return (
     <DetailsDialog
-      slotIcon={<Styled.AssetIcon symbol={asset.id} />}
+      slotIcon={<Styled.AssetIcon symbol={asset?.id} />}
       title={!resources.typeStringKey ? '' : stringGetter({ key: resources.typeStringKey })}
       slotFooter={
         isAccountViewOnly ? null : isOrderStatusClearable(status) ? (