update to add a TR inside table instead

add collapsible table
CCTP deposit/withdraw to throw error if nobleClient is not initialized (#215 )
2024-01-23 12:05:07 -05:00 · 2024-01-23 12:05:07 -05:00 · 2024-01-22 09:55:26 -08:00 · 2024-01-17 16:22:17 -08:00 · 2024-01-17 15:52:02 -08:00 · 2024-01-17 10:34:04 -05:00
118 changed files with 4369 additions and 2161 deletions
@@ -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.30",
-    "@dydxprotocol/v4-client-js": "^1.0.0",
-    "@dydxprotocol/v4-localization": "^1.0.8",
+    "@dydxprotocol/v4-abacus": "^1.2.5",
+    "@dydxprotocol/v4-client-js": "^1.0.11",
+    "@dydxprotocol/v4-localization": "^1.1.11",
    "@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",
@@ -110,8 +111,8 @@
    "reselect": "^4.1.8",
    "styled-components": "^5.3.11",
    "use-latest": "^1.2.1",
-    "viem": "^1.12.2",
-    "wagmi": "^1.4.5"
+    "viem": "^1.20.0",
+    "wagmi": "^1.4.12"
  },
  "devDependencies": {
    "@babel/core": "^7.22.5",
@@ -1,61 +1,12 @@
 [
-    {
-        "chainId": "42161",
-        "tokenAddress": "0xaf88d065e77c8cC2239327C5EDb3A432268e5831",
-        "name": "Arbitrum"
-    },
-    {
-        "chainId": "43114",
-        "tokenAddress": "0xB97EF9Ef8734C71904D8002F8b6Bc66Dd9c48a6E",
-        "name": "Avalanche"
-    },
-    {
-        "chainId": "8453",
-        "tokenAddress": "0x833589fCD6eDb6E08f4c7C32D4f71b54bdA02913",
-        "name": "Base"
-    },
    {
        "chainId": "1",
        "tokenAddress": "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
        "name": "Ethereum"
    },
-    {
-        "chainId": "10",
-        "tokenAddress": "0x0b2C639c533813f4Aa9D7837CAf62653d097Ff85",
-        "name": "OP Mainnet"
-    },
-    {
-        "chainId": "421613",
-        "tokenAddress": "0xfd064a18f3bf249cf1f87fc203e90d8f650f2d63",
-        "name": "Arbitrum Goerli"
-    },
-    {
-        "chainId": "43113",
-        "tokenAddress": "0x5425890298aed601595a70AB815c96711a31Bc65",
-        "name": "Avalanche Fuji"
-    },
-    {
-        "chainId": "84531",
-        "tokenAddress": "0xf175520c52418dfe19c8098071a252da48cd1c19",
-        "name": "Base Goerli"
-    },
    {
        "chainId": "5",
        "tokenAddress": "0x07865c6E87B9F70255377e024ace6630C1Eaa37F",
        "name": "Ethereum Goerli"
-    },
-    {
-        "chainId": "grand-1",
-        "tokenAddress": "uusdc",
-        "name": "Noble Testnet"
-    },
-    {
-        "chainId": "420",
-        "tokenAddress": "0xe05606174bac4a6364b31bd0eca4bf4dd368f8c6",
-        "name": "OP Goerli"
-    },
-    {
-        "chainId": "103",
-        "name": "Solana Devnet"
    }
 ]
@@ -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"
+        }
+    ]
+}
@@ -39,10 +39,10 @@
   "environments": {
      "dydxprotocol-dev": {
         "name": "v4 Dev",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydxprotocol-testnet",
         "chainName": "dYdX Chain",
-         "chainLogo": "dydx-chain.png",
+         "chainLogo": "/dydx-chain.png",
         "squidIntegratorId": "dYdX-api",
         "isMainNet": false,
         "tokens": {
@@ -71,7 +71,7 @@
               "https://validator.v4dev.dydx.exchange"
            ],
            "0xsquid": "https://testnet.api.0xsquid.com",
-            "nobleValidator": "https://rpc.testnet.noble.strange.love",
+            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
            "faucet": "https://faucet.v4dev.dydx.exchange"
         },
         "links": {
@@ -89,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": {
@@ -113,10 +113,10 @@
      },
      "dydxprotocol-dev-2": {
         "name": "v4 Dev 2",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydxprotocol-testnet",
         "chainName": "dYdX Chain",
-         "chainLogo": "dydx-chain.png",
+         "chainLogo": "/dydx-chain.png",
         "squidIntegratorId": "dYdX-api",
         "isMainNet": false,
         "tokens": {
@@ -145,7 +145,7 @@
               "http://54.92.118.111"
            ],
            "0xsquid": "https://testnet.api.0xsquid.com",
-            "nobleValidator": "https://rpc.testnet.noble.strange.love"
+            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/"
         },
         "links": {
            "tos": "https://dydx.exchange/v4-terms",
@@ -162,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": {
@@ -186,10 +186,10 @@
      },
      "dydxprotocol-dev-4": {
         "name": "v4 Dev 4",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydxprotocol-testnet",
         "chainName": "dYdX Chain",
-         "chainLogo": "dydx-chain.png",
+         "chainLogo": "/dydx-chain.png",
         "squidIntegratorId": "dYdX-api",
         "isMainNet": false,
         "tokens": {
@@ -218,7 +218,7 @@
               "http://validator.v4dev4.dydx.exchange"
            ],
            "0xsquid": "https://testnet.api.0xsquid.com",
-            "nobleValidator": "https://rpc.testnet.noble.strange.love"
+            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/"
         },
         "links": {
            "tos": "https://dydx.exchange/v4-terms",
@@ -235,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,10 +259,10 @@
      },
      "dydxprotocol-dev-5": {
         "name": "v4 Dev 5",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydxprotocol-testnet",
         "chainName": "dYdX Chain",
-         "chainLogo": "dydx-chain.png",
+         "chainLogo": "/dydx-chain.png",
         "squidIntegratorId": "dYdX-api",
         "isMainNet": false,
         "tokens": {
@@ -291,7 +291,7 @@
               "http://18.223.78.50"
            ],
            "0xsquid": "https://testnet.api.0xsquid.com",
-            "nobleValidator": "https://rpc.testnet.noble.strange.love"
+            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/"
         },
         "links": {
            "tos": "https://dydx.exchange/v4-terms",
@@ -308,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": {
@@ -332,10 +332,10 @@
      },
      "dydxprotocol-staging": {
         "name": "v4 Staging",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydxprotocol-testnet",
         "chainName": "dYdX Chain",
-         "chainLogo": "dydx-chain.png",
+         "chainLogo": "/dydx-chain.png",
         "squidIntegratorId": "dYdX-api",
         "isMainNet": false,
         "tokens": {
@@ -365,7 +365,7 @@
               "https://validator.v4staging.dydx.exchange"
            ],
            "0xsquid": "https://testnet.api.squidrouter.com",
-            "nobleValidator": "https://rpc.testnet.noble.strange.love"
+            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/"
         },
         "links": {
            "tos": "https://dydx.exchange/v4-terms",
@@ -383,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": {
@@ -407,10 +407,10 @@
      },
      "dydxprotocol-staging-forced-update": {
         "name": "v4 Staging Forced Update",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydxprotocol-testnet",
         "chainName": "dYdX Chain",
-         "chainLogo": "dydx-chain.png",
+         "chainLogo": "/dydx-chain.png",
         "squidIntegratorId": "dYdX-api",
         "isMainNet": false,
         "tokens": {
@@ -440,7 +440,7 @@
               "https://validator.v4staging.dydx.exchange"
            ],
            "0xsquid": "https://testnet.api.squidrouter.com",
-            "nobleValidator": "https://rpc.testnet.noble.strange.love"
+            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/"
         },
         "links": {
            "tos": "https://dydx.exchange/v4-terms",
@@ -480,10 +480,10 @@
      },
      "dydxprotocol-staging-west": {
         "name": "v4 Staging West",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydxprotocol-testnet",
         "chainName": "dYdX Chain",
-         "chainLogo": "dydx-chain.png",
+         "chainLogo": "/dydx-chain.png",
         "squidIntegratorId": "dYdX-api",
         "isMainNet": false,
         "tokens": {
@@ -513,7 +513,7 @@
               "https://validator-uswest1.v4staging.dydx.exchange"
            ],
            "0xsquid": "https://testnet.api.squidrouter.com",
-            "nobleValidator": "https://rpc.testnet.noble.strange.love"
+            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/"
         },
         "links": {
            "tos": "https://dydx.exchange/v4-terms",
@@ -531,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": {
@@ -555,10 +555,10 @@
      },
      "dydxprotocol-testnet": {
         "name": "v4 Public Testnet",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydx-testnet-4",
         "chainName": "dYdX Chain",
-         "chainLogo": "dydx-chain.png",
+         "chainLogo": "/dydx-chain.png",
         "squidIntegratorId": "dYdX-api",
         "isMainNet": false,
         "tokens": {
@@ -579,8 +579,8 @@
         "endpoints": {
            "indexers": [
               {
-                  "api": "https://dydx-testnet.imperator.co",
-                  "socket": "wss://dydx-testnet.imperator.co"
+                  "api": "https://indexer.v4testnet.dydx.exchange",
+                  "socket": "wss://indexer.v4testnet.dydx.exchange"
               }
            ],
            "validators": [
@@ -591,7 +591,7 @@
               "https://dydx-rpc.liquify.com/api=8878132/dydx"
            ],
            "0xsquid": "https://testnet.api.squidrouter.com",
-            "nobleValidator": "https://rpc.testnet.noble.strange.love",
+            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
            "faucet": "https://faucet.v4testnet.dydx.exchange"
         },
         "links": {
@@ -610,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": {
@@ -634,10 +634,10 @@
      },
      "dydxprotocol-testnet-dydx": {
         "name": "v4 Public Testnet/dYdX",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydx-testnet-4",
         "chainName": "dYdX Chain",
-         "chainLogo": "dydx-chain.png",
+         "chainLogo": "/dydx-chain.png",
         "squidIntegratorId": "dYdX-api",
         "isMainNet": false,
         "tokens": {
@@ -666,7 +666,7 @@
               "https://validator.v4testnet.dydx.exchange"
            ],
            "0xsquid": "https://testnet.api.squidrouter.com",
-            "nobleValidator": "https://rpc.testnet.noble.strange.love",
+            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
            "faucet": "https://faucet.v4testnet.dydx.exchange"
         },
         "links": {
@@ -686,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": {
@@ -710,10 +710,10 @@
      },
      "dydxprotocol-testnet-nodefleet": {
         "name": "v4 Public Testnet/nodefleet",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydx-testnet-4",
         "chainName": "dYdX Chain",
-         "chainLogo": "dydx-chain.png",
+         "chainLogo": "/dydx-chain.png",
         "squidIntegratorId": "dYdX-api",
         "isMainNet": false,
         "tokens": {
@@ -734,15 +734,15 @@
         "endpoints": {
            "indexers": [
               {
-                  "api": "https://dydx-testnet.imperator.co",
-                  "socket": "wss://dydx-testnet.imperator.co"
+                  "api": "https://indexer.v4testnet.dydx.exchange",
+                  "socket": "wss://indexer.v4testnet.dydx.exchange"
               }
            ],
            "validators": [
               "https://dydx-testnet.nodefleet.org"
            ],
            "0xsquid": "https://testnet.api.squidrouter.com",
-            "nobleValidator": "https://rpc.testnet.noble.strange.love",
+            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
            "faucet": "https://faucet.v4testnet.dydx.exchange"
         },
         "links": {
@@ -762,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": {
@@ -786,10 +786,10 @@
      },
      "dydxprotocol-testnet-kingnodes": {
         "name": "v4 Public Testnet/KingNodes",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydx-testnet-4",
         "chainName": "dYdX Chain",
-         "chainLogo": "dydx-chain.png",
+         "chainLogo": "/dydx-chain.png",
         "squidIntegratorId": "dYdX-api",
         "isMainNet": false,
         "tokens": {
@@ -810,15 +810,15 @@
         "endpoints": {
            "indexers": [
               {
-                  "api": "https://dydx-testnet.imperator.co",
-                  "socket": "wss://dydx-testnet.imperator.co"
+                  "api": "https://indexer.v4testnet.dydx.exchange",
+                  "socket": "wss://indexer.v4testnet.dydx.exchange"
               }
            ],
            "validators": [
               "https://test-dydx.kingnodes.com"
            ],
            "0xsquid": "https://testnet.api.squidrouter.com",
-            "nobleValidator": "https://rpc.testnet.noble.strange.love",
+            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
            "faucet": "https://faucet.v4testnet.dydx.exchange"
         },
         "links": {
@@ -838,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": {
@@ -862,10 +862,10 @@
      },
      "dydxprotocol-testnet-liquify": {
         "name": "v4 Public Testnet/Liquify",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydx-testnet-4",
         "chainName": "dYdX Chain",
-         "chainLogo": "dydx-chain.png",
+         "chainLogo": "/dydx-chain.png",
         "squidIntegratorId": "dYdX-api",
         "isMainNet": false,
         "tokens": {
@@ -886,15 +886,15 @@
         "endpoints": {
            "indexers": [
               {
-                  "api": "https://dydx-testnet.imperator.co",
-                  "socket": "wss://dydx-testnet.imperator.co"
+                  "api": "https://indexer.v4testnet.dydx.exchange",
+                  "socket": "wss://indexer.v4testnet.dydx.exchange"
               }
            ],
            "validators": [
               "https://dydx-rpc.liquify.com/api=8878132/dydx"
            ],
            "0xsquid": "https://testnet.api.squidrouter.com",
-            "nobleValidator": "https://rpc.testnet.noble.strange.love",
+            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
            "faucet": "https://faucet.v4testnet.dydx.exchange"
         },
         "links": {
@@ -914,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": {
@@ -938,10 +938,10 @@
      },
      "dydxprotocol-testnet-polkachu": {
         "name": "v4 Public Testnet/Polkahcu",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydx-testnet-4",
         "chainName": "dYdX Chain",
-         "chainLogo": "dydx-chain.png",
+         "chainLogo": "/dydx-chain.png",
         "squidIntegratorId": "dYdX-api",
         "isMainNet": false,
         "tokens": {
@@ -962,15 +962,15 @@
         "endpoints": {
            "indexers": [
               {
-                  "api": "https://dydx-testnet.imperator.co",
-                  "socket": "wss://dydx-testnet.imperator.co"
+                  "api": "https://indexer.v4testnet.dydx.exchange",
+                  "socket": "wss://indexer.v4testnet.dydx.exchange"
               }
            ],
            "validators": [
               "https://dydx-testnet-rpc.polkachu.com/"
            ],
            "0xsquid": "https://testnet.api.squidrouter.com",
-            "nobleValidator": "https://rpc.testnet.noble.strange.love",
+            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
            "faucet": "https://faucet.v4testnet.dydx.exchange"
         },
         "links": {
@@ -1005,10 +1005,10 @@
      },
      "dydxprotocol-testnet-bware": {
         "name": "v4 Public Testnet/BWare",
-         "ethereumChainId": "5",
+         "ethereumChainId": "11155111",
         "dydxChainId": "dydx-testnet-4",
         "chainName": "dYdX Chain",
-         "chainLogo": "dydx-chain.png",
+         "chainLogo": "/dydx-chain.png",
         "squidIntegratorId": "dYdX-api",
         "isMainNet": false,
         "tokens": {
@@ -1029,15 +1029,15 @@
         "endpoints": {
            "indexers": [
               {
-                  "api": "https://dydx-testnet.imperator.co",
-                  "socket": "wss://dydx-testnet.imperator.co"
+                  "api": "https://indexer.v4testnet.dydx.exchange",
+                  "socket": "wss://indexer.v4testnet.dydx.exchange"
               }
            ],
            "validators": [
               "https://dydx-testnet-full-rpc.public.blastapi.io/"
            ],
            "0xsquid": "https://testnet.api.squidrouter.com",
-            "nobleValidator": "https://rpc.testnet.noble.strange.love",
+            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
            "faucet": "https://faucet.v4testnet.dydx.exchange"
         },
         "links": {
@@ -1084,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": {
@@ -1126,7 +1126,7 @@
            "blogs": "[HTTP link to blogs, can be null]",
            "foundation": "[HTTP link to foundation, can be null]",
            "initialMarginFractionLearnMore": "[HTTP link to initial margin fraction learn more, can be null]",
-            "reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
+            "reduceOnlyLearnMore": "[HTTP link to reduce-only learn more, can be null]",
            "documentation": "[HTTP link to documentation, can be null]",
            "community": "[HTTP link to community, can be null]",
            "help": "[HTTP link to help page, can be null]",
@@ -1,454 +1,360 @@
 {
-    "1INCH-USD":{
-       "name":"1inch",
-       "tags":[
-          "Defi"
-       ],
-       "websiteLink":"https://1inch.io/",
-       "whitepaperLink":"https://github.com/1inch",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/1inch/"
-    },
-    "AAVE-USD":{
-       "name":"Aave",
-       "tags":[
-          "Defi"
-       ],
-       "websiteLink":"https://aave.com/",
-       "whitepaperLink":"https://github.com/aave/protocol-v2/blob/master/aave-v2-whitepaper.pdf",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/aave/"
-    },
-    "ADA-USD":{
-       "name":"Cardano",
-       "tags":[
-          "Layer 1"
-       ],
-       "websiteLink":"https://cardano.org/",
-       "whitepaperLink":"https://why.cardano.org/en/introduction/motivation/",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/cardano/"
-    },
-    "ALGO-USD":{
-       "name":"Algorand",
-       "tags":[
-          "Layer 1"
-       ],
-       "websiteLink":"https://algorand.com/",
-       "whitepaperLink":"https://algorand.com/technology/white-papers",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/algorand/"
-    },
-    "APE-USD":{
-       "name":"ApeCoin",
-       "tags":[
-          
-       ],
-       "websiteLink":"https://apecoin.com/",
-       "whitepaperLink":"https://apecoin.com/about",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/apecoin-ape/"
-    },
-    "APT-USD":{
-       "name":"Aptos",
-       "tags":[
-          "Layer 1"
-       ],
-       "websiteLink":"https://aptoslabs.com/",
-       "whitepaperLink":"https://aptos.dev/aptos-white-paper/",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/aptos/"
-    },
-    "ARB-USD":{
-       "name":"Arbitrum",
-       "tags":[
-          
-       ],
-       "websiteLink":"https://arbitrum.io/",
-       "whitepaperLink":"https://github.com/OffchainLabs/nitro",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/arbitrum/"
-    },
-    "ATOM-USD":{
-       "name":"Cosmos",
-       "tags":[
-          "Layer 1"
-       ],
-       "websiteLink":"https://cosmos.network/",
-       "whitepaperLink":"https://v1.cosmos.network/resources/whitepaper",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/cosmos/"
-    },
-    "AVAX-USD":{
-       "name":"Avalanche",
-       "tags":[
-          "Layer 1"
-       ],
-       "websiteLink":"https://www.avalabs.org/",
-       "whitepaperLink":"https://assets.website-files.com/5d80307810123f5ffbb34d6e/6008d7bbf8b10d1eb01e7e16_Avalanche%20Platform%20Whitepaper.pdf",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/avalanche/"
-    },
-    "BCH-USD":{
-       "name":"Bitcoin Cash",
-       "tags":[
-          "Layer 1"
-       ],
-       "websiteLink":"https://bitcoincash.org/",
-       "whitepaperLink":"https://bitcoincash.org/",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/bitcoin-cash/"
-    },
-    "BLUR-USD":{
-       "name":"Blur",
-       "tags":[
-          
-       ],
-       "websiteLink":"https://blur.io/",
-       "whitepaperLink":"https://docs.blur.foundation/",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/blur-token/"
-    },
-    "CELO-USD":{
-       "name":"Celo",
-       "tags":[
-          
-       ],
-       "websiteLink":"https://celo.org",
-       "whitepaperLink":"https://docs.celo.org",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/celo/"
-    },
-    "BTC-USD":{
-       "name":"Bitcoin",
-       "tags":[
-          "Layer 1"
-       ],
-       "websiteLink":"https://bitcoin.org/",
-       "whitepaperLink":"https://bitcoin.org/bitcoin.pdf",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/bitcoin/"
-    },
-    "COMP-USD":{
-       "name":"Compound",
-       "tags":[
-          "Defi"
-       ],
-       "websiteLink":"https://compound.finance/",
-       "whitepaperLink":"https://compound.finance/documents/Compound.Whitepaper.pdf",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/compound/"
-    },
-    "CRV-USD":{
-       "name":"Curve",
-       "tags":[
-          "Governance"
-       ],
-       "websiteLink":"https://curve.fi/",
-       "whitepaperLink":"https://curve.fi/whitepaper",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/curve-dao-token/"
-    },
-    "DOGE-USD":{
-       "name":"Dogecoin",
-       "tags":[
-          "Layer 1"
-       ],
-       "websiteLink":"https://dogecoin.com/",
-       "whitepaperLink":"https://github.com/dogecoin/dogecoin",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/dogecoin/"
-    },
-    "DOT-USD":{
-       "name":"Polkadot",
-       "tags":[
-          "Layer 1"
-       ],
-       "websiteLink":"https://polkadot.network/",
-       "whitepaperLink":"https://polkadot.network/PolkaDotPaper.pdf",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/polkadot-new/"
-    },
-    "ENJ-USD":{
-       "name":"Enjin",
-       "tags":[
-          
-       ],
-       "websiteLink":"https://enjin.io/",
-       "whitepaperLink":"https://cdn.enjin.io/downloads/whitepapers/enjin-coin/en.pdf/",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/enjin-coin/"
-    },
-    "EOS-USD":{
-       "name":"EOS",
-       "tags":[
-          "Layer 1"
-       ],
-       "websiteLink":"https://eos.io/",
-       "whitepaperLink":"https://github.com/EOSIO/Documentation/blob/master/TechnicalWhitePaper.md",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/eos/"
-    },
-    "ETC-USD":{
-       "name":"Ethereum Classic",
-       "tags":[
-          "Layer 1"
-       ],
-       "websiteLink":"https://ethereumclassic.org/",
-       "whitepaperLink":"https://ethereumclassic.org/why-classic",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/ethereum-classic/"
-    },
-    "ETH-USD":{
-       "name":"Ethereum",
-       "tags":[
-          "Layer 1"
-       ],
-       "websiteLink":"https://ethereum.org/",
-       "whitepaperLink":"https://ethereum.org/whitepaper/",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/ethereum/",
-       "displayStepSize":"0.001",
-       "displayTickSize":"0.1"
-    },
-    "FIL-USD":{
-       "name":"Filecoin",
-       "tags":[
-          "Layer 1"
-       ],
-       "websiteLink":"https://filecoin.io/",
-       "whitepaperLink":"https://filecoin.io/filecoin.pdf",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/filecoin/"
-    },
-    "HNT-USD":{
-       "name":"Helium",
-       "tags":[
-          "Layer 1"
-       ],
-       "websiteLink":"https://www.helium.com",
-       "whitepaperLink":"http://whitepaper.helium.com",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/helium/"
-    },
-    "ICP-USD":{
-       "name":"Internet Computer",
-       "tags":[
-          "Layer 1"
-       ],
-       "websiteLink":"https://dfinity.org",
-       "whitepaperLink":"https://dfinity.org/whitepaper.pdf",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/internet-computer/"
-    },
-    "LDO-USD":{
-       "name":"Lido DAO",
-       "tags":[
-          "Defi"
-       ],
-       "websiteLink":"https://lido.fi/",
-       "whitepaperLink":"https://lido.fi/static/Lido:Ethereum-Liquid-Staking.pdf",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/lido-dao/"
-    },
-    "LINK-USD":{
-       "name":"Chainlink",
-       "tags":[
-          "Defi"
-       ],
-       "websiteLink":"https://chain.link/",
-       "whitepaperLink":"https://link.smartcontract.com/whitepaper",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/chainlink/"
-    },
-    "LTC-USD":{
-       "name":"Litecoin",
-       "tags":[
-          "Layer 1"
-       ],
-       "websiteLink":"https://litecoin.org/",
-       "whitepaperLink":"https://litecoin.info/index.php/Main_Page",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/litecoin/"
-    },
-    "MATIC-USD":{
-       "name":"Polygon",
-       "tags":[
-          "Layer 2"
-       ],
-       "websiteLink":"https://polygon.technology/",
-       "whitepaperLink":"https://polygon.technology/lightpaper-polygon.pdf",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/polygon/"
-    },
-    "MKR-USD":{
-       "name":"Maker",
-       "tags":[
-          "Governance"
-       ],
-       "websiteLink":"https://makerdao.com",
-       "whitepaperLink":"https://makerdao.com/whitepaper",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/maker/"
-    },
-    "NEAR-USD":{
-       "name":"NEAR Protocol",
-       "tags":[
-          "Layer 1"
-       ],
-       "websiteLink":"https://near.org",
-       "whitepaperLink":"https://near.org/papers/the-official-near-white-paper/",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/near-protocol/"
-    },
-    "OP-USD":{
-       "name":"Optimism",
-       "tags":[
-          
-       ],
-       "websiteLink":"https://www.optimism.io/",
-       "whitepaperLink":"https://github.com/ethereum-optimism",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/optimism-ethereum/"
-    },
-    "PEPE-USD":{
-       "name":"Pepe",
-       "tags":[
-          
-       ],
-       "websiteLink":"https://www.pepe.vip/",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/pepe/"
-    },
-    "RUNE-USD":{
-       "name":"THORChain",
-       "tags":[
-          "Layer 1"
-       ],
-       "websiteLink":"https://thorchain.org",
-       "whitepaperLink":"https://whitepaper.io/document/709/thorchain-whitepaper",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/thorchain/"
-    },
-    "SEI-USD":{
-       "name":"Sei",
-       "tags":[
-          "Layer 1",
-          "Defi"
-       ],
-       "websiteLink":"https://www.sei.io/",
-       "whitepaperLink":"https://github.com/sei-protocol/sei-chain/blob/3c9576fee3494ce039df684624f918dd8066ba3f/whitepaper/Sei_Whitepaper.pdf",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/sei/"
-    },
-    "SHIB-USD":{
-       "name":"Shiba Inu",
-       "tags":[
-          
-       ],
-       "websiteLink":"https://shibatoken.com/",
-       "whitepaperLink":"https://docs.shibatoken.com/",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/shiba-inu/"
-    },
-    "SNX-USD":{
-       "name":"Synthetix",
-       "tags":[
-          "Defi"
-       ],
-       "websiteLink":"https://synthetix.io/",
-       "whitepaperLink":"https://docs.synthetix.io/litepaper",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/synthetix-network-token/"
-    },
-    "SOL-USD":{
-       "name":"Solana",
-       "tags":[
-          "Layer 1"
-       ],
-       "websiteLink":"https://solana.com/",
-       "whitepaperLink":"https://solana.com/solana-whitepaper.pdf",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/solana/"
-    },
-    "SUI-USD":{
-       "name":"Sui",
-       "tags":[
-          "Layer 1"
-       ],
-       "websiteLink":"https://sui.io/",
-       "whitepaperLink":"https://github.com/MystenLabs",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/sui/"
-    },
-    "SUSHI-USD":{
-       "name":"Sushi",
-       "tags":[
-          "Defi"
-       ],
-       "websiteLink":"https://sushi.com/",
-       "whitepaperLink":"https://docs.sushi.com/",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/sushiswap/"
-    },
-    "TRX-USD":{
-       "name":"TRON",
-       "tags":[
-          "Defi"
-       ],
-       "websiteLink":"https://tron.network/",
-       "whitepaperLink":"https://tron.network/static/doc/white_paper_v_2_0.pdf",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/tron/"
-    },
-    "UMA-USD":{
-       "name":"UMA",
-       "tags":[
-          "Defi"
-       ],
-       "websiteLink":"https://umaproject.org/",
-       "whitepaperLink":"https://github.com/UMAprotocol/whitepaper",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/uma/"
-    },
-    "UNI-USD":{
-       "name":"Uniswap",
-       "tags":[
-          "Defi"
-       ],
-       "websiteLink":"https://uniswap.org/",
-       "whitepaperLink":"https://uniswap.org/whitepaper-v3.pdf",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/uniswap/"
-    },
-    "WLD-USD":{
-       "name":"Worldcoin",
-       "tags":[
-          
-       ],
-       "websiteLink":"https://worldcoin.org/",
-       "whitepaperLink":"https://whitepaper.worldcoin.org/",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/worldcoin-org/"
-    },
-    "XLM-USD":{
-       "name":"Stellar",
-       "tags":[
-          "Layer 1"
-       ],
-       "websiteLink":"https://www.stellar.org/",
-       "whitepaperLink":"https://www.stellar.org/papers/stellar-consensus-protocol",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/stellar/"
-    },
-    "XMR-USD":{
-       "name":"Monero",
-       "tags":[
-          "Layer 1"
-       ],
-       "websiteLink":"https://www.getmonero.org/",
-       "whitepaperLink":"https://www.getmonero.org/resources/research-lab/",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/monero/"
-    },
-    "XRP-USD":{
-       "name":"Ripple",
-       "tags":[
-          "Layer 1"
-       ],
-       "websiteLink":"https://ripple.com/currency/",
-       "whitepaperLink":"https://github.com/ripple",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/xrp/"
-    },
-    "XTZ-USD":{
-       "name":"Tezos",
-       "tags":[
-          "Layer 1"
-       ],
-       "websiteLink":"https://tezos.com",
-       "whitepaperLink":"https://tezos.com/whitepaper.pdf",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/tezos/"
-    },
-    "YFI-USD":{
-       "name":"Yearn",
-       "tags":[
-          "Defi"
-       ],
-       "websiteLink":"https://yearn.finance/",
-       "whitepaperLink":"https://docs.yearn.finance/",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/yearn-finance/"
-    },
-    "ZEC-USD":{
-       "name":"Zcash",
-       "tags":[
-          "Layer 1"
-       ],
-       "websiteLink":"https://z.cash/",
-       "whitepaperLink":"https://z.cash/technology/",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/zcash/"
-    },
-    "ZRX-USD":{
-       "name":"0x",
-       "tags":[
-          "Defi"
-       ],
-       "websiteLink":"https://0x.org/",
-       "whitepaperLink":"https://0x.org/pdfs/0x_white_paper.pdf",
-       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/0x/"
-    }
- }
+  "1INCH-USD": {
+    "name": "1inch",
+    "tags": ["Defi"],
+    "websiteLink": "https://1inch.io/",
+    "whitepaperLink": "https://github.com/1inch",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/1inch/"
+  },
+  "AAVE-USD": {
+    "name": "Aave",
+    "tags": ["Defi"],
+    "websiteLink": "https://aave.com/",
+    "whitepaperLink": "https://github.com/aave/protocol-v2/blob/master/aave-v2-whitepaper.pdf",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/aave/"
+  },
+  "ADA-USD": {
+    "name": "Cardano",
+    "tags": ["Layer 1"],
+    "websiteLink": "https://cardano.org/",
+    "whitepaperLink": "https://why.cardano.org/en/introduction/motivation/",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/cardano/"
+  },
+  "ALGO-USD": {
+    "name": "Algorand",
+    "tags": ["Layer 1"],
+    "websiteLink": "https://algorand.com/",
+    "whitepaperLink": "https://algorand.com/technology/white-papers",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/algorand/"
+  },
+  "APE-USD": {
+    "name": "ApeCoin",
+    "tags": [],
+    "websiteLink": "https://apecoin.com/",
+    "whitepaperLink": "https://apecoin.com/about",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/apecoin-ape/"
+  },
+  "APT-USD": {
+    "name": "Aptos",
+    "tags": ["Layer 1"],
+    "websiteLink": "https://aptoslabs.com/",
+    "whitepaperLink": "https://aptos.dev/aptos-white-paper/",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/aptos/"
+  },
+  "ARB-USD": {
+    "name": "Arbitrum",
+    "tags": [],
+    "websiteLink": "https://arbitrum.io/",
+    "whitepaperLink": "https://github.com/OffchainLabs/nitro",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/arbitrum/"
+  },
+  "ATOM-USD": {
+    "name": "Cosmos",
+    "tags": ["Layer 1"],
+    "websiteLink": "https://cosmos.network/",
+    "whitepaperLink": "https://v1.cosmos.network/resources/whitepaper",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/cosmos/"
+  },
+  "AVAX-USD": {
+    "name": "Avalanche",
+    "tags": ["Layer 1"],
+    "websiteLink": "https://www.avalabs.org/",
+    "whitepaperLink": "https://assets.website-files.com/5d80307810123f5ffbb34d6e/6008d7bbf8b10d1eb01e7e16_Avalanche%20Platform%20Whitepaper.pdf",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/avalanche/"
+  },
+  "BCH-USD": {
+    "name": "Bitcoin Cash",
+    "tags": ["Layer 1"],
+    "websiteLink": "https://bitcoincash.org/",
+    "whitepaperLink": "https://bitcoincash.org/",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/bitcoin-cash/"
+  },
+  "BLUR-USD": {
+    "name": "Blur",
+    "tags": [],
+    "websiteLink": "https://blur.io/",
+    "whitepaperLink": "https://docs.blur.foundation/",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/blur-token/"
+  },
+  "CELO-USD": {
+    "name": "Celo",
+    "tags": [],
+    "websiteLink": "https://celo.org",
+    "whitepaperLink": "https://docs.celo.org",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/celo/"
+  },
+  "BTC-USD": {
+    "name": "Bitcoin",
+    "tags": ["Layer 1"],
+    "websiteLink": "https://bitcoin.org/",
+    "whitepaperLink": "https://bitcoin.org/bitcoin.pdf",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/bitcoin/"
+  },
+  "COMP-USD": {
+    "name": "Compound",
+    "tags": ["Defi"],
+    "websiteLink": "https://compound.finance/",
+    "whitepaperLink": "https://compound.finance/documents/Compound.Whitepaper.pdf",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/compound/"
+  },
+  "CRV-USD": {
+    "name": "Curve",
+    "tags": ["Governance"],
+    "websiteLink": "https://curve.fi/",
+    "whitepaperLink": "https://curve.fi/whitepaper",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/curve-dao-token/"
+  },
+  "DOGE-USD": {
+    "name": "Dogecoin",
+    "tags": ["Layer 1"],
+    "websiteLink": "https://dogecoin.com/",
+    "whitepaperLink": "https://github.com/dogecoin/dogecoin",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/dogecoin/"
+  },
+  "DOT-USD": {
+    "name": "Polkadot",
+    "tags": ["Layer 1"],
+    "websiteLink": "https://polkadot.network/",
+    "whitepaperLink": "https://polkadot.network/PolkaDotPaper.pdf",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/polkadot-new/"
+  },
+  "ENJ-USD": {
+    "name": "Enjin",
+    "tags": [],
+    "websiteLink": "https://enjin.io/",
+    "whitepaperLink": "https://cdn.enjin.io/downloads/whitepapers/enjin-coin/en.pdf/",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/enjin-coin/"
+  },
+  "EOS-USD": {
+    "name": "EOS",
+    "tags": ["Layer 1"],
+    "websiteLink": "https://eos.io/",
+    "whitepaperLink": "https://github.com/EOSIO/Documentation/blob/master/TechnicalWhitePaper.md",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/eos/"
+  },
+  "ETC-USD": {
+    "name": "Ethereum Classic",
+    "tags": ["Layer 1"],
+    "websiteLink": "https://ethereumclassic.org/",
+    "whitepaperLink": "https://ethereumclassic.org/why-classic",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/ethereum-classic/"
+  },
+  "ETH-USD": {
+    "name": "Ethereum",
+    "tags": ["Layer 1"],
+    "websiteLink": "https://ethereum.org/",
+    "whitepaperLink": "https://ethereum.org/whitepaper/",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/ethereum/",
+    "displayStepSize": "0.001",
+    "displayTickSize": "0.1"
+  },
+  "FIL-USD": {
+    "name": "Filecoin",
+    "tags": ["Layer 1"],
+    "websiteLink": "https://filecoin.io/",
+    "whitepaperLink": "https://filecoin.io/filecoin.pdf",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/filecoin/"
+  },
+  "HNT-USD": {
+    "name": "Helium",
+    "tags": ["Layer 1"],
+    "websiteLink": "https://www.helium.com",
+    "whitepaperLink": "http://whitepaper.helium.com",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/helium/"
+  },
+  "ICP-USD": {
+    "name": "Internet Computer",
+    "tags": ["Layer 1"],
+    "websiteLink": "https://dfinity.org",
+    "whitepaperLink": "https://dfinity.org/whitepaper.pdf",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/internet-computer/"
+  },
+  "LDO-USD": {
+    "name": "Lido DAO",
+    "tags": ["Defi"],
+    "websiteLink": "https://lido.fi/",
+    "whitepaperLink": "https://lido.fi/static/Lido:Ethereum-Liquid-Staking.pdf",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/lido-dao/"
+  },
+  "LINK-USD": {
+    "name": "Chainlink",
+    "tags": ["Defi"],
+    "websiteLink": "https://chain.link/",
+    "whitepaperLink": "https://link.smartcontract.com/whitepaper",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/chainlink/"
+  },
+  "LTC-USD": {
+    "name": "Litecoin",
+    "tags": ["Layer 1"],
+    "websiteLink": "https://litecoin.org/",
+    "whitepaperLink": "https://litecoin.info/index.php/Main_Page",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/litecoin/"
+  },
+  "MATIC-USD": {
+    "name": "Polygon",
+    "tags": ["Layer 2"],
+    "websiteLink": "https://polygon.technology/",
+    "whitepaperLink": "https://polygon.technology/lightpaper-polygon.pdf",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/polygon/"
+  },
+  "MKR-USD": {
+    "name": "Maker",
+    "tags": ["Governance"],
+    "websiteLink": "https://makerdao.com",
+    "whitepaperLink": "https://makerdao.com/whitepaper",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/maker/"
+  },
+  "NEAR-USD": {
+    "name": "NEAR Protocol",
+    "tags": ["Layer 1"],
+    "websiteLink": "https://near.org",
+    "whitepaperLink": "https://near.org/papers/the-official-near-white-paper/",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/near-protocol/"
+  },
+  "OP-USD": {
+    "name": "Optimism",
+    "tags": [],
+    "websiteLink": "https://www.optimism.io/",
+    "whitepaperLink": "https://github.com/ethereum-optimism",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/optimism-ethereum/"
+  },
+  "PEPE-USD": {
+    "name": "Pepe",
+    "tags": [],
+    "websiteLink": "https://www.pepe.vip/",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/pepe/"
+  },
+  "RUNE-USD": {
+    "name": "THORChain",
+    "tags": ["Layer 1"],
+    "websiteLink": "https://thorchain.org",
+    "whitepaperLink": "https://whitepaper.io/document/709/thorchain-whitepaper",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/thorchain/"
+  },
+  "SEI-USD": {
+    "name": "Sei",
+    "tags": ["Layer 1", "Defi"],
+    "websiteLink": "https://www.sei.io/",
+    "whitepaperLink": "https://github.com/sei-protocol/sei-chain/blob/3c9576fee3494ce039df684624f918dd8066ba3f/whitepaper/Sei_Whitepaper.pdf",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/sei/"
+  },
+  "SHIB-USD": {
+    "name": "Shiba Inu",
+    "tags": [],
+    "websiteLink": "https://shibatoken.com/",
+    "whitepaperLink": "https://docs.shibatoken.com/",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/shiba-inu/"
+  },
+  "SNX-USD": {
+    "name": "Synthetix",
+    "tags": ["Defi"],
+    "websiteLink": "https://synthetix.io/",
+    "whitepaperLink": "https://docs.synthetix.io/litepaper",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/synthetix-network-token/"
+  },
+  "SOL-USD": {
+    "name": "Solana",
+    "tags": ["Layer 1"],
+    "websiteLink": "https://solana.com/",
+    "whitepaperLink": "https://solana.com/solana-whitepaper.pdf",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/solana/"
+  },
+  "SUI-USD": {
+    "name": "Sui",
+    "tags": ["Layer 1"],
+    "websiteLink": "https://sui.io/",
+    "whitepaperLink": "https://github.com/MystenLabs",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/sui/"
+  },
+  "SUSHI-USD": {
+    "name": "Sushi",
+    "tags": ["Defi"],
+    "websiteLink": "https://sushi.com/",
+    "whitepaperLink": "https://docs.sushi.com/",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/sushiswap/"
+  },
+  "TIA-USD": {
+    "name": "Celestia",
+    "tags": ["Layer 1"],
+    "websiteLink": "https://celestia.org/",
+    "whitepaperLink": "https://arxiv.org/pdf/1905.09274.pdf",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/celestia/"
+  },
+  "TRX-USD": {
+    "name": "TRON",
+    "tags": ["Defi"],
+    "websiteLink": "https://tron.network/",
+    "whitepaperLink": "https://tron.network/static/doc/white_paper_v_2_0.pdf",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/tron/"
+  },
+  "UMA-USD": {
+    "name": "UMA",
+    "tags": ["Defi"],
+    "websiteLink": "https://umaproject.org/",
+    "whitepaperLink": "https://github.com/UMAprotocol/whitepaper",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/uma/"
+  },
+  "UNI-USD": {
+    "name": "Uniswap",
+    "tags": ["Defi"],
+    "websiteLink": "https://uniswap.org/",
+    "whitepaperLink": "https://uniswap.org/whitepaper-v3.pdf",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/uniswap/"
+  },
+  "WLD-USD": {
+    "name": "Worldcoin",
+    "tags": [],
+    "websiteLink": "https://worldcoin.org/",
+    "whitepaperLink": "https://whitepaper.worldcoin.org/",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/worldcoin-org/"
+  },
+  "XLM-USD": {
+    "name": "Stellar",
+    "tags": ["Layer 1"],
+    "websiteLink": "https://www.stellar.org/",
+    "whitepaperLink": "https://www.stellar.org/papers/stellar-consensus-protocol",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/stellar/"
+  },
+  "XMR-USD": {
+    "name": "Monero",
+    "tags": ["Layer 1"],
+    "websiteLink": "https://www.getmonero.org/",
+    "whitepaperLink": "https://www.getmonero.org/resources/research-lab/",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/monero/"
+  },
+  "XRP-USD": {
+    "name": "Ripple",
+    "tags": ["Layer 1"],
+    "websiteLink": "https://ripple.com/currency/",
+    "whitepaperLink": "https://github.com/ripple",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/xrp/"
+  },
+  "XTZ-USD": {
+    "name": "Tezos",
+    "tags": ["Layer 1"],
+    "websiteLink": "https://tezos.com",
+    "whitepaperLink": "https://tezos.com/whitepaper.pdf",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/tezos/"
+  },
+  "YFI-USD": {
+    "name": "Yearn",
+    "tags": ["Defi"],
+    "websiteLink": "https://yearn.finance/",
+    "whitepaperLink": "https://docs.yearn.finance/",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/yearn-finance/"
+  },
+  "ZEC-USD": {
+    "name": "Zcash",
+    "tags": ["Layer 1"],
+    "websiteLink": "https://z.cash/",
+    "whitepaperLink": "https://z.cash/technology/",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/zcash/"
+  },
+  "ZRX-USD": {
+    "name": "0x",
+    "tags": ["Defi"],
+    "websiteLink": "https://0x.org/",
+    "whitepaperLink": "https://0x.org/pdfs/0x_white_paper.pdf",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/0x/"
+  }
+}
@@ -0,0 +1,230 @@
+<svg width="254" height="77" viewBox="0 0 254 77" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group 1258">
+<g id="Ellipse 9" opacity="0.4" filter="url(#filter0_f_20300_14972)">
+<ellipse cx="86.5425" cy="-3.91219" rx="116.542" ry="20.0878" fill="#7774FF"/>
+</g>
+<g id="Ellipse 10" opacity="0.3" filter="url(#filter1_f_20300_14972)">
+<circle cx="74.5734" cy="4.63007" r="1.00507" fill="#9A9AFF"/>
+</g>
+<g id="Ellipse 12" opacity="0.3" filter="url(#filter2_f_20300_14972)">
+<circle cx="82.1105" cy="7.64179" r="1.00507" fill="#9A9AFF"/>
+</g>
+<g id="Ellipse 22" opacity="0.3" filter="url(#filter3_f_20300_14972)">
+<circle cx="116.785" cy="4.63007" r="1.00507" fill="#9A9AFF"/>
+</g>
+<g id="Ellipse 11" opacity="0.3" filter="url(#filter4_f_20300_14972)">
+<circle cx="64.774" cy="8.90488" r="0.502536" fill="#9A9AFF"/>
+</g>
+<g id="Ellipse 18" opacity="0.3" filter="url(#filter5_f_20300_14972)">
+<circle cx="96.4322" cy="3.87363" r="0.502536" fill="#9A9AFF"/>
+</g>
+<g id="Ellipse 20" opacity="0.3" filter="url(#filter6_f_20300_14972)">
+<circle cx="76.0807" cy="14.9361" r="0.502536" fill="#9A9AFF"/>
+</g>
+<g id="Ellipse 21" opacity="0.3" filter="url(#filter7_f_20300_14972)">
+<circle cx="104.725" cy="4.87754" r="0.502536" fill="#9A9AFF"/>
+</g>
+<g id="Ellipse 23" opacity="0.3" filter="url(#filter8_f_20300_14972)">
+<circle cx="114.021" cy="7.13925" r="0.502536" fill="#9A9AFF"/>
+</g>
+<g id="Ellipse 24" opacity="0.3" filter="url(#filter9_f_20300_14972)">
+<circle cx="109.75" cy="15.4361" r="0.502536" fill="#9A9AFF"/>
+</g>
+<g id="Ellipse 25" opacity="0.3" filter="url(#filter10_f_20300_14972)">
+<circle cx="119.801" cy="12.6705" r="0.502536" fill="#9A9AFF"/>
+</g>
+<g id="Ellipse 27" opacity="0.3" filter="url(#filter11_f_20300_14972)">
+<circle cx="94.0885" cy="11.0182" r="0.502536" fill="#9A9AFF"/>
+</g>
+<g id="Ellipse 30" opacity="0.3" filter="url(#filter12_f_20300_14972)">
+<circle cx="154.475" cy="11.6666" r="0.502536" fill="#9A9AFF"/>
+</g>
+<g id="Ellipse 29" opacity="0.3" filter="url(#filter13_f_20300_14972)">
+<circle cx="146.435" cy="8.90488" r="0.502536" fill="#9A9AFF"/>
+</g>
+<g id="Ellipse 15" opacity="0.3" filter="url(#filter14_f_20300_14972)">
+<circle cx="24.0103" cy="4.44785" r="0.502536" fill="#9A9AFF"/>
+</g>
+<g id="Ellipse 33" opacity="0.3" filter="url(#filter15_f_20300_14972)">
+<circle cx="-1.05899" cy="13.6783" r="0.502536" fill="#9A9AFF"/>
+</g>
+<g id="Ellipse 16" opacity="0.3" filter="url(#filter16_f_20300_14972)">
+<circle cx="17.441" cy="16.4908" r="0.502536" fill="#9A9AFF"/>
+</g>
+<g id="Ellipse 35" opacity="0.3" filter="url(#filter17_f_20300_14972)">
+<circle cx="36.0553" cy="6.63535" r="0.502536" fill="#9A9AFF"/>
+</g>
+<g id="Ellipse 32" opacity="0.3" filter="url(#filter18_f_20300_14972)">
+<circle cx="10.8707" cy="14.2994" r="0.502536" fill="#9A9AFF"/>
+</g>
+<g id="Ellipse 13" opacity="0.3" filter="url(#filter19_f_20300_14972)">
+<circle cx="55.7274" cy="9.65615" r="0.753803" fill="#9A9AFF"/>
+</g>
+<g id="Ellipse 19" opacity="0.3" filter="url(#filter20_f_20300_14972)">
+<circle cx="87.3886" cy="20.7108" r="0.753803" fill="#9A9AFF"/>
+</g>
+<g id="Ellipse 26" opacity="0.3" filter="url(#filter21_f_20300_14972)">
+<circle cx="123.82" cy="15.1874" r="0.753803" fill="#9A9AFF"/>
+</g>
+<g id="Ellipse 36" opacity="0.3" filter="url(#filter22_f_20300_14972)">
+<circle cx="134.876" cy="14.4335" r="0.753803" fill="#9A9AFF"/>
+</g>
+<g id="Ellipse 28" opacity="0.3" filter="url(#filter23_f_20300_14972)">
+<circle cx="129.6" cy="6.38662" r="0.753803" fill="#9A9AFF"/>
+</g>
+<g id="Ellipse 14" opacity="0.3" filter="url(#filter24_f_20300_14972)">
+<circle cx="41.6571" cy="14.9335" r="0.753803" fill="#9A9AFF"/>
+</g>
+<g id="Ellipse 31" opacity="0.3" filter="url(#filter25_f_20300_14972)">
+<circle cx="4.21767" cy="17.9491" r="0.753803" fill="#9A9AFF"/>
+</g>
+<g id="Ellipse 34" opacity="0.3" filter="url(#filter26_f_20300_14972)">
+<circle cx="12.2177" cy="6.88662" r="0.753803" fill="#9A9AFF"/>
+</g>
+<g id="Ellipse 17" opacity="0.3" filter="url(#filter27_f_20300_14972)">
+<circle cx="50.2001" cy="3.6249" r="0.753803" fill="#9A9AFF"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_f_20300_14972" x="-94" y="-88" width="361.085" height="168.176" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="32" result="effect1_foregroundBlur_20300_14972"/>
+</filter>
+<filter id="filter1_f_20300_14972" x="72.5633" y="2.61993" width="4.01991" height="4.02186" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.502536" result="effect1_foregroundBlur_20300_14972"/>
+</filter>
+<filter id="filter2_f_20300_14972" x="80.6029" y="6.13418" width="3.01484" height="3.01679" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.251268" result="effect1_foregroundBlur_20300_14972"/>
+</filter>
+<filter id="filter3_f_20300_14972" x="115.278" y="3.12246" width="3.01484" height="3.01679" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.251268" result="effect1_foregroundBlur_20300_14972"/>
+</filter>
+<filter id="filter4_f_20300_14972" x="63.2664" y="7.39727" width="3.01502" height="3.01405" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.502536" result="effect1_foregroundBlur_20300_14972"/>
+</filter>
+<filter id="filter5_f_20300_14972" x="94.9246" y="2.36602" width="3.01502" height="3.01405" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.502536" result="effect1_foregroundBlur_20300_14972"/>
+</filter>
+<filter id="filter6_f_20300_14972" x="74.5731" y="13.4285" width="3.01502" height="3.01405" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.502536" result="effect1_foregroundBlur_20300_14972"/>
+</filter>
+<filter id="filter7_f_20300_14972" x="103.218" y="3.36993" width="3.01502" height="3.01405" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.502536" result="effect1_foregroundBlur_20300_14972"/>
+</filter>
+<filter id="filter8_f_20300_14972" x="112.513" y="5.63165" width="3.01502" height="3.01405" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.502536" result="effect1_foregroundBlur_20300_14972"/>
+</filter>
+<filter id="filter9_f_20300_14972" x="108.242" y="13.9285" width="3.01502" height="3.01405" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.502536" result="effect1_foregroundBlur_20300_14972"/>
+</filter>
+<filter id="filter10_f_20300_14972" x="118.294" y="11.1629" width="3.01502" height="3.01405" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.502536" result="effect1_foregroundBlur_20300_14972"/>
+</filter>
+<filter id="filter11_f_20300_14972" x="92.5809" y="9.51055" width="3.01502" height="3.01405" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.502536" result="effect1_foregroundBlur_20300_14972"/>
+</filter>
+<filter id="filter12_f_20300_14972" x="153.47" y="10.6615" width="2.00995" height="2.00898" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.251268" result="effect1_foregroundBlur_20300_14972"/>
+</filter>
+<filter id="filter13_f_20300_14972" x="144.928" y="7.39727" width="3.01502" height="3.01405" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.502536" result="effect1_foregroundBlur_20300_14972"/>
+</filter>
+<filter id="filter14_f_20300_14972" x="22.5027" y="2.94024" width="3.01502" height="3.01405" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.502536" result="effect1_foregroundBlur_20300_14972"/>
+</filter>
+<filter id="filter15_f_20300_14972" x="-2.56659" y="12.1707" width="3.01502" height="3.01405" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.502536" result="effect1_foregroundBlur_20300_14972"/>
+</filter>
+<filter id="filter16_f_20300_14972" x="15.9334" y="14.9832" width="3.01502" height="3.01405" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.502536" result="effect1_foregroundBlur_20300_14972"/>
+</filter>
+<filter id="filter17_f_20300_14972" x="35.0502" y="5.63028" width="2.00995" height="2.00898" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.251268" result="effect1_foregroundBlur_20300_14972"/>
+</filter>
+<filter id="filter18_f_20300_14972" x="9.86563" y="13.2943" width="2.00995" height="2.00898" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.251268" result="effect1_foregroundBlur_20300_14972"/>
+</filter>
+<filter id="filter19_f_20300_14972" x="53.9686" y="7.89727" width="3.51795" height="3.51795" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.502536" result="effect1_foregroundBlur_20300_14972"/>
+</filter>
+<filter id="filter20_f_20300_14972" x="85.6297" y="18.952" width="3.51795" height="3.51795" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.502536" result="effect1_foregroundBlur_20300_14972"/>
+</filter>
+<filter id="filter21_f_20300_14972" x="122.061" y="13.4285" width="3.51795" height="3.51795" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.502536" result="effect1_foregroundBlur_20300_14972"/>
+</filter>
+<filter id="filter22_f_20300_14972" x="133.117" y="12.6746" width="3.51795" height="3.51795" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.502536" result="effect1_foregroundBlur_20300_14972"/>
+</filter>
+<filter id="filter23_f_20300_14972" x="127.842" y="4.62774" width="3.51795" height="3.51795" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.502536" result="effect1_foregroundBlur_20300_14972"/>
+</filter>
+<filter id="filter24_f_20300_14972" x="39.8982" y="13.1746" width="3.51795" height="3.51795" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.502536" result="effect1_foregroundBlur_20300_14972"/>
+</filter>
+<filter id="filter25_f_20300_14972" x="2.4588" y="16.1902" width="3.51795" height="3.51795" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.502536" result="effect1_foregroundBlur_20300_14972"/>
+</filter>
+<filter id="filter26_f_20300_14972" x="10.4588" y="5.12774" width="3.51795" height="3.51795" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.502536" result="effect1_foregroundBlur_20300_14972"/>
+</filter>
+<filter id="filter27_f_20300_14972" x="48.4412" y="1.86602" width="3.51795" height="3.51795" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feBlend mode="normal" in="SourceGraphic" in2="BackgroundImageFix" result="shape"/>
+<feGaussianBlur stdDeviation="0.502536" result="effect1_foregroundBlur_20300_14972"/>
+</filter>
+</defs>
+</svg>
@@ -1,4 +1,4 @@
-import { Suspense } from 'react';
+import { lazy, Suspense } from 'react';
 import { Navigate, Route, Routes } from 'react-router-dom';
 import styled, { AnyStyledComponent, css } from 'styled-components';
 import { WagmiConfig } from 'wagmi';
@@ -22,21 +22,9 @@ import { NotificationsProvider } from '@/hooks/useNotifications';
 import { LocalNotificationsProvider } from '@/hooks/useLocalNotifications';
 import { RestrictionProvider } from '@/hooks/useRestrictions';
 import { SubaccountProvider } from '@/hooks/useSubaccount';
-import { SquidProvider } from '@/hooks/useSquid';
-import { TestFlagsProvider } from '@/hooks/useTestFlags';

 import { GuardedMobileRoute } from '@/components/GuardedMobileRoute';

-import MarketsPage from '@/pages/markets/Markets';
-import PortfolioPage from '@/pages/portfolio/Portfolio';
-import { AlertsPage } from '@/pages/AlertsPage';
-import ProfilePage from '@/pages/Profile';
-import { SettingsPage } from '@/pages/settings/Settings';
-import TradePage from '@/pages/trade/Trade';
-import { RewardsPage } from '@/pages/rewards/RewardsPage';
-import { TermsOfUsePage } from '@/pages/TermsOfUsePage';
-import { PrivacyPolicyPage } from '@/pages/PrivacyPolicyPage';
-
 import { HeaderDesktop } from '@/layout/Header/HeaderDesktop';
 import { FooterDesktop } from '@/layout/Footer/FooterDesktop';
 import { FooterMobile } from '@/layout/Footer/FooterMobile';
@@ -48,11 +36,22 @@ import { config } from '@/lib/wagmi';

 import { breakpoints } from '@/styles';
 import { layoutMixins } from '@/styles/layoutMixins';
+import { LoadingSpace } from './components/Loading/LoadingSpinner';

 import '@/styles/constants.css';
 import '@/styles/fonts.css';
 import '@/styles/web3modal.css';

+const MarketsPage = lazy(() => import('@/pages/markets/Markets'));
+const PortfolioPage = lazy(() => import('@/pages/portfolio/Portfolio'));
+const AlertsPage = lazy(() => import('@/pages/AlertsPage'));
+const ProfilePage = lazy(() => import('@/pages/Profile'));
+const SettingsPage = lazy(() => import('@/pages/settings/Settings'));
+const TradePage = lazy(() => import('@/pages/trade/Trade'));
+const RewardsPage = lazy(() => import('@/pages/rewards/RewardsPage'));
+const TermsOfUsePage = lazy(() => import('@/pages/TermsOfUsePage'));
+const PrivacyPolicyPage = lazy(() => import('@/pages/PrivacyPolicyPage'));
+
 const queryClient = new QueryClient();

 const Content = () => {
@@ -71,7 +70,7 @@ const Content = () => {
      {isNotTablet && <HeaderDesktop />}

      <Styled.Main>
-        <Suspense fallback={null}>
+        <Suspense fallback={<LoadingSpace id="main" />}>
          <Routes>
            <Route path={AppRoute.Trade}>
              <Route path=":market" element={<TradePage />} />
@@ -124,13 +123,11 @@ const providers = [
  wrapProvider(QueryClientProvider, { client: queryClient }),
  wrapProvider(GrazProvider),
  wrapProvider(WagmiConfig, { config }),
-  wrapProvider(TestFlagsProvider),
  wrapProvider(LocaleProvider),
  wrapProvider(RestrictionProvider),
  wrapProvider(DydxProvider),
  wrapProvider(AccountsProvider),
  wrapProvider(SubaccountProvider),
-  wrapProvider(SquidProvider),
  wrapProvider(LocalNotificationsProvider),
  wrapProvider(NotificationsProvider),
  wrapProvider(DialogAreaProvider),
@@ -0,0 +1,26 @@
+import type { Story } from '@ladle/react';
+
+import { Accordion as AccordionComponent, AccordionProps } from '@/components/Accordion';
+
+import { StoryWrapper } from '.ladle/components';
+
+export const Accordion: Story<AccordionProps> = (args) => {
+  return (
+    <StoryWrapper>
+      <AccordionComponent {...args} />
+    </StoryWrapper>
+  );
+};
+
+Accordion.args = {
+  items: [
+    {
+      header: 'Question 1?',
+      content: 'Answer 1.',
+    },
+    {
+      header: 'Question 2?',
+      content: 'Answer 2.',
+    },
+  ],
+};
@@ -0,0 +1,129 @@
+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 { breakpoints } from '@/styles';
+
+import { PlusIcon } from '@/icons';
+
+export type AccordionItem = {
+  header: React.ReactNode;
+  content: React.ReactNode;
+};
+
+export 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)`
+  --accordion-paddingY: 1rem;
+  --accordion-paddingX: 1rem;
+
+  @media ${breakpoints.notTablet} {
+    --accordion-paddingX: 1.5rem;
+  }
+
+  > *: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: var(--accordion-paddingY) var(--accordion-paddingX);
+  gap: 0.5rem;
+
+  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 var(--accordion-paddingX) var(--accordion-paddingY);
+
+  color: var(--color-text-0);
+
+  &[data-state='open'] {
+    animation: ${keyframes`
+      from {
+        height: 0;
+      }
+      to {
+        height: var(--radix-accordion-content-height);
+      }
+    `} 0.3s var(--ease-out-expo);
+  }
+
+  &[data-state='closed'] {
+    animation: ${keyframes`
+      from {
+        height: var(--radix-accordion-content-height);
+      }
+      to {
+        height: 0;
+      }
+    `} 0.1s var(--ease-in-expo);
+  }
+`;
@@ -45,6 +45,7 @@ const assetIcons = {
  SOL: '/currencies/sol.png',
  SUI: '/currencies/sui.png',
  SUSHI: '/currencies/sushi.png',
+  TIA: '/currencies/tia.png',
  TRX: '/currencies/trx.png',
  UMA: '/currencies/uma.png',
  UNI: '/currencies/uni.png',
@@ -71,8 +72,13 @@ export const AssetIcon = ({
 }: {
  symbol?: Nullable<string>;
  className?: string;
-}) =>
-  isAssetSymbol(symbol) ? <Styled.Img src={assetIcons[symbol]} className={className} /> : null;
+}) => (
+  <Styled.Img
+    src={isAssetSymbol(symbol) ? assetIcons[symbol] : '/currencies/unavailable.png'}
+    className={className}
+    alt={symbol}
+  />
+);

 const Styled: Record<string, AnyStyledComponent> = {};

@@ -61,7 +61,7 @@ export const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonPr

    return (
      <StyledBaseButton
-        disabled={state[ButtonState.Disabled]}
+        disabled={state[ButtonState.Disabled] || state[ButtonState.Loading]}
        {...{ ref, action, size, shape, state, ...otherProps }}
      >
        {
@@ -31,10 +31,12 @@ type ElementProps<TabItemsValue> = {
 };

 type StyleProps = {
-  fullWidthTabs?: boolean;
  className?: string;
+  fullWidthTabs?: boolean;
 };

+export type CollapsibleTabsProps<TabItemsValue> = ElementProps<TabItemsValue> & StyleProps;
+
 export const CollapsibleTabs = <TabItemsValue extends string>({
  defaultValue,
  items,
@@ -43,8 +45,9 @@ export const CollapsibleTabs = <TabItemsValue extends string>({
  onOpenChange,

  fullWidthTabs,
+
  className,
-}: ElementProps<TabItemsValue> & StyleProps) => {
+}: CollapsibleTabsProps<TabItemsValue>) => {
  const [value, setValue] = useState(defaultValue);

  const currentItem = items.find((item) => item.value === value);
@@ -86,8 +89,8 @@ export const CollapsibleTabs = <TabItemsValue extends string>({
        </Styled.Header>

        <Styled.CollapsibleContent>
-          {items.map(({ value, content }) => (
-            <Styled.TabsContent key={value} value={value}>
+          {items.map(({ asChild, value, content }) => (
+            <Styled.TabsContent key={value} asChild={asChild} value={value}>
              {content}
            </Styled.TabsContent>
          ))}
@@ -219,7 +222,6 @@ Styled.Header = styled.header`

 Styled.CollapsibleContent = styled(CollapsibleContent)`
  ${layoutMixins.stack}
-  ${layoutMixins.perspectiveArea}

  box-shadow: none;
 `;
@@ -11,6 +11,5 @@ export const DetachedScrollableSection = styled.section`

 export const AttachedExpandingSection = styled.section`
  ${layoutMixins.contentSectionAttached}
-  ${layoutMixins.expandingColumnWithHeader}
  gap: var(--border-width);
 `;
@@ -24,7 +24,6 @@ import {
  CoinsIcon,
  CommentIcon,
  CopyIcon,
-  CubeIcon,
  DepositIcon,
  DepthChartIcon,
  DiscordIcon,
@@ -38,6 +37,7 @@ import {
  HelpCircleIcon,
  HideIcon,
  HistoryIcon,
+  LeaderboardIcon,
  LinkOutIcon,
  LockIcon,
  LogoShortIcon,
@@ -54,10 +54,12 @@ import {
  OverviewIcon,
  PencilIcon,
  PlayIcon,
+  PlusIcon,
  PositionsIcon,
  PriceChartIcon,
  PrivacyIcon,
  QrIcon,
+  RewardStarIcon,
  SearchIcon,
  SendIcon,
  ShareIcon,
@@ -97,7 +99,6 @@ export enum IconName {
  Coins = 'Coins',
  Comment = 'Comment',
  Copy = 'Copy',
-  Cube = 'Cube',
  Deposit = 'Deposit',
  DepthChart = 'DepthChart',
  Discord = 'Discord',
@@ -111,6 +112,7 @@ export enum IconName {
  HelpCircle = 'HelpCircle',
  Hide = 'Hide',
  History = 'History',
+  Leaderboard = 'Leaderboard',
  LinkOut = 'LinkOut',
  Lock = 'Lock',
  LogoShort = 'LogoShort',
@@ -128,10 +130,12 @@ export enum IconName {
  Overview = 'Overview',
  Pencil = 'Pencil',
  Play = 'Play',
+  Plus = 'Plus',
  Positions = 'Positions',
  PriceChart = 'PriceChart',
  Privacy = 'Privacy',
  Qr = 'Qr',
+  RewardStar = 'RewardStar',
  Search = 'Search',
  Send = 'Send',
  Share = 'Share',
@@ -171,7 +175,6 @@ const icons = {
  [IconName.Coins]: CoinsIcon,
  [IconName.Comment]: CommentIcon,
  [IconName.Copy]: CopyIcon,
-  [IconName.Cube]: CubeIcon,
  [IconName.Deposit]: DepositIcon,
  [IconName.DepthChart]: DepthChartIcon,
  [IconName.Discord]: DiscordIcon,
@@ -185,6 +188,7 @@ const icons = {
  [IconName.HelpCircle]: HelpCircleIcon,
  [IconName.Hide]: HideIcon,
  [IconName.History]: HistoryIcon,
+  [IconName.Leaderboard]: LeaderboardIcon,
  [IconName.LinkOut]: LinkOutIcon,
  [IconName.Lock]: LockIcon,
  [IconName.LogoShort]: LogoShortIcon,
@@ -201,10 +205,12 @@ const icons = {
  [IconName.Overview]: OverviewIcon,
  [IconName.Pencil]: PencilIcon,
  [IconName.Play]: PlayIcon,
+  [IconName.Plus]: PlusIcon,
  [IconName.Positions]: PositionsIcon,
  [IconName.PriceChart]: PriceChartIcon,
  [IconName.Privacy]: PrivacyIcon,
  [IconName.Qr]: QrIcon,
+  [IconName.RewardStar]: RewardStarIcon,
  [IconName.Search]: SearchIcon,
  [IconName.Send]: SendIcon,
  [IconName.Share]: ShareIcon,
@@ -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%;
  }
@@ -4,6 +4,7 @@ import { Link } from 'react-router-dom';
 import { Icon, IconName } from '@/components/Icon';

 import { layoutMixins } from '@/styles/layoutMixins';
+import { breakpoints } from '@/styles';

 type PanelProps = {
  slotHeaderContent?: string;
@@ -67,6 +68,12 @@ Styled.Panel = styled.section<{ onClick?: () => void }>`
  --panel-content-paddingY: var(--panel-paddingY);
  --panel-content-paddingX: var(--panel-paddingX);

+  @media ${breakpoints.notTablet} {
+    --panel-paddingX: 1.5rem;
+    --panel-paddingY: 1.25rem;
+    --panel-content-paddingY: 1rem;
+  }
+
  ${layoutMixins.row}

  background-color: var(--color-layer-3);
@@ -33,16 +33,20 @@ import {

 import { useAsyncList } from 'react-stately';

-import { useBreakpoints } from '@/hooks';
+import { useBreakpoints, useStringGetter } from '@/hooks';
 import { MediaQueryKeys } from '@/hooks/useBreakpoints';

-import { Checkbox } from '@/components/Checkbox';
-
 import { breakpoints } from '@/styles';
 import { layoutMixins } from '@/styles/layoutMixins';
+import { CaretIcon } from '@/icons';
+
+import { STRING_KEYS } from '@/constants/localization';
+
+import { MustBigNumber } from '@/lib/numbers';

 import { Icon, IconName } from './Icon';
 import { Tag } from './Tag';
+import { Button } from './Button';

 export { TableCell } from './Table/TableCell';
 export { TableColumnHeader } from './Table/TableColumnHeader';
@@ -64,7 +68,7 @@ export type TableItem<TableRowData> = {
  onSelect?: (key: TableRowData) => void;
 };

-export type ColumnDef<TableRowData extends object> = {
+type ColumnDef<TableRowData extends object> = {
  columnKey: string;
  label: React.ReactNode;
  tag?: React.ReactNode;
@@ -79,7 +83,7 @@ export type ColumnDef<TableRowData extends object> = {
  width?: ColumnSize;
 };

-type ElementProps<TableRowData extends object | CustomRowConfig, TableRowKey extends Key> = {
+export type ElementProps<TableRowData extends object | CustomRowConfig, TableRowKey extends Key> = {
  label?: string;
  columns: ColumnDef<TableRowData>[];
  data: TableRowData[];
@@ -91,6 +95,7 @@ type ElementProps<TableRowData extends object | CustomRowConfig, TableRowKey ext
  selectionBehavior?: 'replace' | 'toggle';
  onRowAction?: (key: TableRowKey, row: TableRowData) => void;
  slotEmpty?: React.ReactNode;
+  initialNumRowsToShow?: number;
  // collection: TableCollection<string>;
  // children: React.ReactNode;
 };
@@ -120,6 +125,7 @@ export const Table = <TableRowData extends object, TableRowKey extends Key>({
  selectionMode = 'single',
  selectionBehavior = 'toggle',
  slotEmpty,
+  initialNumRowsToShow = data.length,
  // shouldRowRender,

  // collection,
@@ -135,6 +141,7 @@ export const Table = <TableRowData extends object, TableRowKey extends Key>({
  style,
 }: ElementProps<TableRowData, TableRowKey> & StyleProps) => {
  const [selectedKeys, setSelectedKeys] = useState(new Set<TableRowKey>());
+  const [numRowsToShow, setNumRowsToShow] = useState(initialNumRowsToShow);

  const currentBreakpoints = useBreakpoints();
  const shownColumns = columns.filter(
@@ -161,10 +168,7 @@ export const Table = <TableRowData extends object, TableRowKey extends Key>({
        ? // String
          collator.compare(first as string, second as string)
        : // Number
-          Math.sign(
-            (parseInt(first as string) || (first as number)) -
-              (parseInt(second as string) || (second as number))
-          )) *
+          MustBigNumber(first).comparedTo(MustBigNumber(second))) *
      // Flip the direction if descending order is specified.
      (sortDirection === 'descending' ? -1 : 1)
    );
@@ -211,6 +215,12 @@ export const Table = <TableRowData extends object, TableRowKey extends Key>({
            onRowAction &&
            ((key: TableRowKey) => onRowAction(key, data.find((row) => getRowKey(row) === key)!))
          }
+          numColumns={shownColumns.length}
+          onViewMoreClick={
+            numRowsToShow !== undefined && numRowsToShow < data.length
+              ? () => setNumRowsToShow(data.length)
+              : undefined
+          }
          // shouldRowRender={shouldRowRender}
          hideHeader={hideHeader}
          withGradientCardRows={withGradientCardRows}
@@ -235,7 +245,7 @@ export const Table = <TableRowData extends object, TableRowKey extends Key>({
            )}
          </TableHeader>

-          <TableBody items={list.items}>
+          <TableBody items={list.items.slice(0, numRowsToShow)}>
            {(item) => (
              <Row key={getRowKey(item)}>
                {(columnKey) => (
@@ -269,6 +279,8 @@ const TableRoot = <TableRowData extends object | CustomRowConfig, TableRowKey ex
  onRowAction?: (key: TableRowKey) => void;
  // shouldRowRender?: (prevRowData: object, currentRowData: object) => boolean;
  children: CollectionChildren<TableRowData>;
+  numColumns: number;
+  onViewMoreClick?: () => void;

  hideHeader?: boolean;
  withGradientCardRows?: boolean;
@@ -278,7 +290,7 @@ const TableRoot = <TableRowData extends object | CustomRowConfig, TableRowKey ex
  withScrollSnapColumns?: boolean;
  withScrollSnapRows?: boolean;
 }) => {
-  const { selectionMode, selectionBehavior } = props;
+  const { selectionMode, selectionBehavior, numColumns, onViewMoreClick } = props;

  const state = useTableState<TableRowData>({
    ...props,
@@ -339,6 +351,7 @@ const TableRoot = <TableRowData extends object | CustomRowConfig, TableRowKey ex
      <TableBodyRowGroup
        withGradientCardRows={props.withGradientCardRows}
        withInnerBorders={props.withInnerBorders}
+        withOuterBorder={props.withOuterBorder}
      >
        {/* {Array.from(collection.getChildren!(collection.body.key), (row) => */}
        {[...collection.body.childNodes].map((row) =>
@@ -384,6 +397,9 @@ const TableRoot = <TableRowData extends object | CustomRowConfig, TableRowKey ex
            </TableRow>
          )
        )}
+        {onViewMoreClick ? (
+          <ViewMoreRow colSpan={numColumns} onClick={onViewMoreClick} />
+        ) : undefined}
      </TableBodyRowGroup>
    </Styled.Table>
  );
@@ -417,6 +433,7 @@ const TableBodyRowGroup = ({
  children,
  withGradientCardRows,
  withInnerBorders,
+  withOuterBorder,
 }: { children: React.ReactNode } & StyleProps) => {
  const { rowGroupProps } = useTableRowGroup();

@@ -425,6 +442,7 @@ const TableBodyRowGroup = ({
      {...rowGroupProps}
      withGradientCardRows={withGradientCardRows}
      withInnerBorders={withInnerBorders}
+      withOuterBorder={withOuterBorder}
    >
      {children}
    </Styled.Tbody>
@@ -491,6 +509,23 @@ const TableColumnHeader = <TableRowData extends object>({
  );
 };

+export const ViewMoreRow = ({ colSpan, onClick }: { colSpan: number; onClick: () => void }) => {
+  const stringGetter = useStringGetter();
+  return (
+    <Styled.Tr key="viewmore">
+      <Styled.Td
+        colSpan={colSpan}
+        onMouseDown={(e: MouseEvent) => e.preventDefault()}
+        onPointerDown={(e: MouseEvent) => e.preventDefault()}
+      >
+        <Styled.ViewMoreButton slotRight={<CaretIcon />} onClick={onClick}>
+          {stringGetter({ key: STRING_KEYS.VIEW_MORE })}
+        </Styled.ViewMoreButton>
+      </Styled.Td>
+    </Styled.Tr>
+  );
+};
+
 export const TableRow = <TableRowData extends object>({
  item,
  children,
@@ -662,7 +697,7 @@ Styled.Empty = styled.div<{ withOuterBorder: boolean }>`

  justify-items: center;
  align-content: center;
-  padding: 2rem;
+  padding: 4rem;
  gap: 0.75em;

  color: var(--color-text-0);
@@ -870,6 +905,18 @@ Styled.Tbody = styled.tbody<StyleProps>`
      --stickyArea2-paddingLeft: var(--border-width);
      --stickyArea2-paddingRight: var(--border-width);

+      tr:first-of-type {
+        box-shadow: 0 calc(var(--border-width)) 0 0 var(--border-color);
+      }
+    `}
+
+  ${({ withOuterBorder }) =>
+    withOuterBorder &&
+    css`
+      tr:last-of-type:not(:only-of-type) {
+        box-shadow: 0 calc(-1 * var(--border-width)) 0 0 var(--border-color);
+      }
+
      tr:first-of-type {
        box-shadow: none;
      }
@@ -924,3 +971,15 @@ Styled.Row = styled.div`
  ${layoutMixins.inlineRow}
  padding: var(--tableCell-padding);
 `;
+
+Styled.ViewMoreButton = styled(Button)`
+  --button-backgroundColor: var(--color-layer-2);
+  --button-textColor: var(--color-text-1);
+
+  width: 100%;
+
+  svg {
+    width: 0.675rem;
+    margin-left: 0.5ch;
+  }
+`;
@@ -21,6 +21,7 @@ export type TabItem<TabItemsValue> = {
  content?: React.ReactNode;
  subitems?: TabItem<TabItemsValue>[];
  customTrigger?: ReactNode;
+  asChild?: boolean;
 };

 type ElementProps<TabItemsValue> = {
@@ -41,6 +42,8 @@ type StyleProps = {
  className?: string;
 };

+export type TabsProps<TabItemsValue> = ElementProps<TabItemsValue> & StyleProps;
+
 export const Tabs = <TabItemsValue extends string>({
  defaultValue,
  value,
@@ -107,9 +110,10 @@ export const Tabs = <TabItemsValue extends string>({
        sharedContent
      ) : (
        <Styled.Stack>
-          {items.map(({ value, content, forceMount }) => (
+          {items.map(({ asChild, value, content, forceMount }) => (
            <Styled.Content
              key={value}
+              asChild={asChild}
              value={value}
              forceMount={forceMount}
              $hide={forceMount && currentItem?.value !== value}
@@ -242,7 +246,6 @@ Styled.Trigger = styled(Trigger)<{ $withBorders?: boolean }>`

 Styled.Stack = styled.div`
  ${layoutMixins.stack}
-  ${layoutMixins.perspectiveArea}

  box-shadow: none;
 `;
@@ -27,9 +27,8 @@ export const ToastArea = ({ swipeDirection, children, className }: ToastAreaProp
 const $ToastArea = styled.aside`
  // Params
  --toasts-gap: 0.5rem;
-
+  
  // Rules
-  ${layoutMixins.scrollArea}
  z-index: 1;

  pointer-events: none;
@@ -1,26 +1,33 @@
-import React, { useContext, useState } from 'react';
+import React, { PropsWithChildren, useContext, useState } from 'react';

 import { Point } from '@visx/point';
 import { localPoint } from '@visx/event';
-import { XYChart, DataContext } from '@visx/xychart';
+import { XYChart, DataContext, type EventHandlerParams } from '@visx/xychart';
 import { getScaleBandwidth } from '@/components/visx/getScaleBandwidth';

 export const XYChartWithPointerEvents = ({
-  onPointerMove, onPointerUp, onPointerPressedChange, ...props
+  onPointerMove,
+  onPointerUp,
+  onPointerPressedChange,
+  ...props
 }: {
-  onPointerMove?: (point: Point) => void;
-  onPointerUp?: (point: Point) => void;
+  onPointerMove?: (point: Point | EventHandlerParams<object>) => void;
+  onPointerUp?: (point: Point | EventHandlerParams<object>) => void;
  onPointerPressedChange?: (isPointerPressed: boolean) => void;
-} & React.PropsWithChildren<Parameters<typeof XYChart>>) => {
+} & PropsWithChildren<Parameters<typeof XYChart>[0]>) => {
  const { xScale, yScale } = useContext(DataContext);
-
  const [lastPointerMoveEvent, setLastPointerMoveEvent] = useState<React.PointerEvent>();

  const pointerContainerPosition = lastPointerMoveEvent ? localPoint(lastPointerMoveEvent) : null;

-  const pointerChartPosition = xScale && yScale && pointerContainerPosition &&
+  const pointerChartPosition =
+    xScale &&
+    yScale &&
+    pointerContainerPosition &&
    new Point({
+      // @ts-expect-error invert supposedly doesn't exist on AxisScale
      x: xScale.invert(pointerContainerPosition?.x - getScaleBandwidth(xScale) / 2),
+      // @ts-expect-error invert supposedly doesn't exist on AxisScale
      y: yScale.invert(pointerContainerPosition?.y - getScaleBandwidth(yScale) / 2),
    });

@@ -29,15 +36,13 @@ export const XYChartWithPointerEvents = ({
      {...props}
      onPointerMove={({ event }) => {
        setLastPointerMoveEvent(event as React.PointerEvent);
-        if (pointerChartPosition)
-          onPointerMove?.(pointerChartPosition);
+        if (pointerChartPosition) onPointerMove?.(pointerChartPosition);
      }}
      onPointerOut={() => setLastPointerMoveEvent(undefined)}
      onPointerDown={() => onPointerPressedChange?.(true)}
      onPointerUp={() => {
        onPointerPressedChange?.(false);
-        if (pointerChartPosition)
-          onPointerUp?.(pointerChartPosition);
+        if (pointerChartPosition) onPointerUp?.(pointerChartPosition);
      }}
    >
      {props.children}
@@ -142,7 +142,7 @@ const historicalPnlPeriod = [...HistoricalPnlPeriod.values()] as const;
 export type HistoricalPnlPeriods = (typeof historicalPnlPeriod)[number];

 // ------ Transfer Items ------ //
-export const TransferInputField = Abacus.exchange.dydx.abacus.state.modal.TransferInputField;
+export const TransferInputField = Abacus.exchange.dydx.abacus.state.model.TransferInputField;
 const transferInputFields = [...TransferInputField.values()] as const;
 export type TransferInputFields = (typeof transferInputFields)[number];

@@ -151,7 +151,7 @@ const transferTypes = [...TransferType.values()] as const;
 export type TransferTypes = (typeof transferTypes)[number];

 // ------ Trade Items ------ //
-export const TradeInputField = Abacus.exchange.dydx.abacus.state.modal.TradeInputField;
+export const TradeInputField = Abacus.exchange.dydx.abacus.state.model.TradeInputField;
 const tradeInputFields = [...TradeInputField.values()] as const;
 export type TradeInputFields = (typeof tradeInputFields)[number];

@@ -162,7 +162,7 @@ export type TradeState<T> = {
 };

 export const ClosePositionInputField =
-  Abacus.exchange.dydx.abacus.state.modal.ClosePositionInputField;
+  Abacus.exchange.dydx.abacus.state.model.ClosePositionInputField;

 const closePositionInputFields = [...ClosePositionInputField.values()] as const;
 export type ClosePositionInputFields = (typeof closePositionInputFields)[number];
@@ -96,6 +96,7 @@ export type AnalyticsEventData<T extends AnalyticsEvent> =
        elapsedTime?: number;
        blockHeight?: number;
        indexerBlockHeight?: number;
+        trailingBlocks?: number;
      }
    : // Navigation
    T extends AnalyticsEvent.NavigatePage
@@ -0,0 +1,40 @@
+import { OrderSide } from '@dydxprotocol/v4-client-js';
+import { FundingDirection } from './markets';
+
+// ------ Depth Chart ------ //
+export enum DepthChartSeries {
+  Asks = 'Asks',
+  Bids = 'Bids',
+  MidMarket = 'MidMarket',
+}
+
+export type DepthChartDatum = {
+  size: number;
+  price: number;
+  depth: number;
+  seriesKey: DepthChartSeries;
+};
+
+export type DepthChartPoint = {
+  side: OrderSide;
+  price: number;
+  size: number;
+};
+
+export const SERIES_KEY_FOR_ORDER_SIDE = {
+  [OrderSide.BUY]: DepthChartSeries.Bids,
+  [OrderSide.SELL]: DepthChartSeries.Asks,
+};
+
+// ------ Funding Chart ------ //
+export enum FundingRateResolution {
+  OneHour = 'OneHour',
+  EightHour = 'EightHour',
+  Annualized = 'Annualized',
+}
+
+export type FundingChartDatum = {
+  time: number;
+  fundingRate: number;
+  direction: FundingDirection;
+};
@@ -3,6 +3,7 @@ export enum DialogTypes {
  Deposit = 'Deposit',
  DisconnectWallet = 'DisconnectWallet',
  ExchangeOffline = 'ExchangeOffline',
+  ExternalLink = 'ExternalLink',
  FillDetails = 'FillDetails',
  Help = 'Help',
  ExternalNavKeplr = 'ExternalNavKeplr',
@@ -22,6 +22,7 @@ export enum LocalStorageKey {
  SelectedTheme = 'dydx.SelectedTheme',
  SelectedTradeLayout = 'dydx.SelectedTradeLayout',
  TradingViewChartConfig = 'dydx.TradingViewChartConfig',
+  HasSeenLaunchIncentives = 'dydx.HasSeenLaunchIncentives',
 }

 export const LOCAL_STORAGE_VERSIONS = {
@@ -25,15 +25,5 @@ export const DEFAULT_MARKETID = 'ETH-USD';
 export enum FundingDirection {
  ToShort = 'ToShort',
  ToLong = 'ToLong',
+  None = 'None',
 }
-
-export const MARKETS_TO_DISPLAY = [
-  'BTC-USD',
-  'ETH-USD',
-  'LINK-USD',
-  'SOL-USD',
-  'MATIC-USD',
-  'ATOM-USD',
-  'AVAX-USD',
-  'APE-USD',
-];
@@ -87,6 +87,8 @@ export type NotificationDisplayData = {
  slotTitleLeft?: React.ReactNode;
  slotTitleRight?: React.ReactNode;

+  groupKey: string; // Grouping key toast notification stacking
+
  // Overrides title/body for Notification in NotificationMenu
  renderCustomBody?: ({
    isToast,
@@ -122,13 +124,20 @@ export type NotificationDisplayData = {
  toastDuration?: number;
 };

+export enum TransferNotificationTypes {
+  Withdrawal = 'withdrawal',
+  Deposit = 'deposit',
+}
+
 // Notification types
 export type TransferNotifcation = {
  txHash: string;
+  type?: TransferNotificationTypes;
  toChainId?: string;
  fromChainId?: string;
  toAmount?: number;
  triggeredAt?: number;
+  isCctp?: boolean;
  errorCount?: number;
  status?: StatusResponse;
 };
@@ -10,6 +10,7 @@ export const LEVERAGE_DECIMALS = 2;
 export const TOKEN_DECIMALS = 4;
 export const LARGE_TOKEN_DECIMALS = 2;
 export const FEE_DECIMALS = 3;
+export const FUNDING_DECIMALS = 6;

 export const QUANTUM_MULTIPLIER = 1_000_000;

@@ -18,3 +19,7 @@ export enum NumberSign {
  Negative = 'Negative',
  Neutral = 'Neutral',
 }
+
+// Deposit/Withdraw
+export const MAX_CCTP_TRANSFER_AMOUNT = 1_000_000;
+export const MAX_PRICE_IMPACT = 0.02; // 2%
@@ -1,6 +1,10 @@
 import { type TooltipStrings, TOOLTIP_STRING_KEYS } from '@/constants/localization';

 export const depositTooltips: TooltipStrings = {
+  'minimum-deposit-amount': ({ stringGetter }) => ({
+    title: stringGetter({ key: TOOLTIP_STRING_KEYS.MINIMUM_DEPOSIT_AMOUNT_TITLE }),
+    body: stringGetter({ key: TOOLTIP_STRING_KEYS.MINIMUM_DEPOSIT_AMOUNT_BODY }),
+  }),
  swap: ({ stringGetter }) => ({
    title: stringGetter({ key: TOOLTIP_STRING_KEYS.SWAP_TITLE }),
    body: stringGetter({ key: TOOLTIP_STRING_KEYS.SWAP_BODY }),
@@ -5,6 +5,10 @@ export const withdrawTooltips: TooltipStrings = {
    title: stringGetter({ key: TOOLTIP_STRING_KEYS.FAST_WITHDRAW_FEE_TITLE }),
    body: stringGetter({ key: TOOLTIP_STRING_KEYS.FAST_WITHDRAW_FEE_BODY }),
  }),
+  'minimum-amount-received': ({ stringGetter }) => ({
+    title: stringGetter({ key: TOOLTIP_STRING_KEYS.MINIMUM_AMOUNT_RECEIVED_TITLE }),
+    body: stringGetter({ key: TOOLTIP_STRING_KEYS.MINIMUM_AMOUNT_RECEIVED_BODY }),
+  }),
  'withdraw-types': ({ stringGetter }) => ({
    title: stringGetter({ key: TOOLTIP_STRING_KEYS.WITHDRAW_TYPES_TITLE }),
    body: stringGetter({ key: TOOLTIP_STRING_KEYS.WITHDRAW_TYPES_BODY }),
@@ -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 () => {
@@ -97,7 +97,7 @@ export const useAnalytics = () => {
  }, []);

  // AnalyticsEvent.NetworkStatus
-  const { height, indexerHeight, status } = useApiState();
+  const { height, indexerHeight, status, trailingBlocks} = useApiState();

  useEffect(() => {
    if (status) {
@@ -114,6 +114,7 @@ export const useAnalytics = () => {
        elapsedTime: lastSuccessfulIndexerRpcQuery && Date.now() - lastSuccessfulIndexerRpcQuery,
        blockHeight: height ?? undefined,
        indexerBlockHeight: indexerHeight ?? undefined,
+        trailingBlocks: trailingBlocks ?? undefined
      });
    }
  }, [status]);
@@ -71,7 +71,7 @@ export const getIndexerHeight = (apiState: Nullable<AbacusApiState>) => {
 export const useApiState = () => {
  const stringGetter = useStringGetter();
  const apiState = useSelector(getApiState, shallowEqual);
-  const { haltedBlock, height, status, trailingBlocks } = apiState ?? {};
+  const { haltedBlock, height, status, trailingBlocks} = apiState ?? {};
  const statusErrorMessage = getStatusErrorMessage({ apiState, stringGetter });
  const indexerHeight = getIndexerHeight(apiState);

@@ -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`);
@@ -33,17 +32,35 @@ export const useCurrentMarketId = () => {
    if (marketIds.length === 0) return marketId ?? lastViewedMarket;
    if (!marketIds.includes(marketId ?? lastViewedMarket)) return DEFAULT_MARKETID;
    return marketId ?? lastViewedMarket;
-  }, [marketIds, marketId]);
+  }, [hasMarketIds, marketId]);

  useEffect(() => {
-    setLastViewedMarket(validId);
-    dispatch(setCurrentMarketId(validId));
-    dispatch(closeDialogInTradeBox());
+    // If v4_markets has not been subscribed to yet or marketId is not specified, default to validId
+    if (!hasMarketIds || !marketId) {
+      setLastViewedMarket(validId);
+      dispatch(setCurrentMarketId(validId));
+      dispatch(closeDialogInTradeBox());

-    navigate(`${AppRoute.Trade}/${validId}`, {
-      replace: true,
-    });
-  }, [validId]);
+      if (validId !== marketId) {
+        navigate(`${AppRoute.Trade}/${validId}`, {
+          replace: true,
+        });
+      }
+    } else {
+      // If v4_markets has been subscribed to, check if marketId is valid
+      if (!marketIds.includes(marketId)) {
+        // If marketId is not valid (i.e. final settlement), navigate to markets page
+        navigate(AppRoute.Markets, {
+          replace: true,
+        });
+      } else {
+        // If marketId is valid, set currentMarketId
+        setLastViewedMarket(marketId);
+        dispatch(setCurrentMarketId(marketId));
+        dispatch(closeDialogInTradeBox());
+      }
+    }
+  }, [hasMarketIds, marketId]);

  useEffect(() => {
    // Check for marketIds otherwise Abacus will silently fail its isMarketValid check
@@ -1,11 +1,11 @@
 import { createContext, useContext, useCallback, useEffect, useMemo } from 'react';
 import { useQuery } from 'react-query';
-import type { StatusResponse } from '@0xsquid/sdk';

 import { LOCAL_STORAGE_VERSIONS, LocalStorageKey } from '@/constants/localStorage';
 import { type TransferNotifcation } from '@/constants/notifications';
 import { useAccounts } from '@/hooks/useAccounts';
-import { STATUS_ERROR_GRACE_PERIOD, useSquid } from '@/hooks/useSquid';
+
+import { fetchSquidStatus, STATUS_ERROR_GRACE_PERIOD } from '@/lib/squid';

 import { useLocalStorage } from './useLocalStorage';

@@ -68,8 +68,6 @@ const useLocalNotificationsContext = () => {
    [transferNotifications]
  );

-  const squid = useSquid();
-
  useQuery({
    queryKey: 'getTransactionStatus',
    queryFn: async () => {
@@ -81,23 +79,27 @@ const useLocalNotificationsContext = () => {
              toChainId,
              fromChainId,
              triggeredAt,
+              isCctp,
              errorCount,
              status: currentStatus,
            } = transferNotification;

+            // @ts-ignore status.errors is not in the type definition but can be returned
+            // also error can some time come back as an empty object so we need to ignore for that
+            const hasErrors = !!currentStatus?.errors || 
+                 (currentStatus?.error && Object.keys(currentStatus.error).length !== 0);
+
            if (
-              // @ts-ignore status.errors is not in the type definition but can be returned
-              !currentStatus?.errors &&
-              !currentStatus?.error &&
+              !hasErrors &&
              (!currentStatus?.squidTransactionStatus ||
                currentStatus?.squidTransactionStatus === 'ongoing')
            ) {
              try {
-                const status = await squid?.getStatus({
+                const status = await fetchSquidStatus({
                  transactionId: txHash,
                  toChainId,
                  fromChainId,
-                });
+                }, isCctp);

                if (status) {
                  transferNotification.status = status;
@@ -1,14 +1,7 @@
 import { useMemo } from 'react';
 import { useSelector, shallowEqual } from 'react-redux';

-import {
-  MarketFilters,
-  MARKET_FILTER_LABELS,
-  type MarketData,
-  MARKETS_TO_DISPLAY,
-} from '@/constants/markets';
-
-import { testFlags } from '@/hooks/useTestFlags';
+import { MarketFilters, MARKET_FILTER_LABELS, type MarketData } from '@/constants/markets';

 import { getAssets } from '@/state/assetsSelectors';
 import { getPerpetualMarkets } from '@/state/perpetualsSelectors';
@@ -49,9 +42,7 @@ export const useMarketsData = (
  }, [allPerpetualMarkets, allAssets]);

  const filteredMarkets = useMemo(() => {
-    const filtered = markets
-      .filter(filterFunctions[filter])
-      .filter(({ id }) => (testFlags.displayAllMarkets ? true : MARKETS_TO_DISPLAY.includes(id)));
+    const filtered = markets.filter(filterFunctions[filter]);

    if (searchFilter) {
      return filtered.filter(
@@ -20,6 +20,7 @@ import {
  type NotificationTypeConfig,
  NotificationType,
  DEFAULT_TOAST_AUTO_CLOSE_MS,
+  TransferNotificationTypes,
 } from '@/constants/notifications';

 import { useSelectedNetwork, useStringGetter } from '@/hooks';
@@ -27,6 +28,7 @@ import { useLocalNotifications } from '@/hooks/useLocalNotifications';

 import { AssetIcon } from '@/components/AssetIcon';
 import { Icon, IconName } from '@/components/Icon';
+import { BlockRewardNotification } from '@/views/notifications/BlockRewardNotification';
 import { TradeNotification } from '@/views/notifications/TradeNotification';
 import { TransferStatusNotification } from '@/views/notifications/TransferStatusNotification';

@@ -79,6 +81,7 @@ export const notificationTypes: NotificationTypeConfig[] = [
                  body: abacusNotif.text ? stringGetter({ key: abacusNotif.text, params }) : '',
                  toastDuration: DEFAULT_TOAST_AUTO_CLOSE_MS,
                  toastSensitivity: 'foreground',
+                  groupKey: abacusNotificationType,
                  renderCustomBody: ({ isToast, notification }) => (
                    <TradeNotification
                      isToast={isToast}
@@ -92,6 +95,29 @@ export const notificationTypes: NotificationTypeConfig[] = [
              );
              break;
            }
+            case 'blockReward': {
+              trigger(
+                abacusNotif.id,
+                {
+                  icon: abacusNotif.image && <$Icon src={abacusNotif.image} alt="" />,
+                  title: stringGetter({ key: abacusNotif.title }),
+                  body: abacusNotif.text ? stringGetter({ key: abacusNotif.text, params }) : '',
+                  toastDuration: DEFAULT_TOAST_AUTO_CLOSE_MS,
+                  toastSensitivity: 'foreground',
+                  groupKey: abacusNotificationType,
+                  renderCustomBody: ({ isToast, notification }) => (
+                    <BlockRewardNotification
+                      isToast={isToast}
+                      data={parsedData}
+                      notification={notification}
+                    />
+                  ),
+                },
+                [abacusNotif.updateTimeInMilliseconds, abacusNotif.data],
+                true
+              );
+              break;
+            }
            default:
              trigger(
                abacusNotif.id,
@@ -101,6 +127,7 @@ export const notificationTypes: NotificationTypeConfig[] = [
                  body: abacusNotif.text ? stringGetter({ key: abacusNotif.text, params }) : '',
                  toastDuration: DEFAULT_TOAST_AUTO_CLOSE_MS,
                  toastSensitivity: 'foreground',
+                  groupKey: abacusNotificationType,
                },
                [abacusNotif.updateTimeInMilliseconds, abacusNotif.data]
              );
@@ -152,20 +179,20 @@ export const notificationTypes: NotificationTypeConfig[] = [

      useEffect(() => {
        for (const transfer of transferNotifications) {
-          const { fromChainId, status, txHash, toAmount } = transfer;
+          const { fromChainId, status, txHash, toAmount, type } = transfer;
          const isFinished = Boolean(status) && status?.squidTransactionStatus !== 'ongoing';
          const icon = <Icon iconName={isFinished ? IconName.Transfer : IconName.Clock} />;

-          const type =
-            fromChainId === ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId
-              ? 'withdrawal'
-              : 'deposit';
+          const transferType =
+            type ?? fromChainId === ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId
+              ? TransferNotificationTypes.Withdrawal
+              : TransferNotificationTypes.Deposit;

          const title = stringGetter({
            key: {
              deposit: isFinished ? STRING_KEYS.DEPOSIT : STRING_KEYS.DEPOSIT_IN_PROGRESS,
              withdrawal: isFinished ? STRING_KEYS.WITHDRAW : STRING_KEYS.WITHDRAW_IN_PROGRESS,
-            }[type],
+            }[transferType],
          });

          const toChainEta = status?.toChain?.chainData?.estimatedRouteDuration || 0;
@@ -190,12 +217,13 @@ export const notificationTypes: NotificationTypeConfig[] = [
                  slotIcon={icon}
                  slotTitle={title}
                  transfer={transfer}
-                  type={type}
+                  type={transferType}
                  triggeredAt={transfer.triggeredAt}
                  notification={notification}
                />
              ),
              toastSensitivity: 'foreground',
+              groupKey: NotificationType.SquidTransfer,
            },
            [isFinished]
          );
@@ -220,7 +248,7 @@ export const notificationTypes: NotificationTypeConfig[] = [
            body: stringGetter({
              key: 'NOTIFICATIONS.RELEASE_REWARDS_AND_FULL_TRADING.BODY',
              params: {
-                BLOGPOST: (
+                DOS_BLOGPOST: (
                  <$Link
                    href="https://www.dydxopsdao.com/blog/deep-dive-full-trading"
                    target="_blank"
@@ -229,8 +257,7 @@ export const notificationTypes: NotificationTypeConfig[] = [
                    {stringGetter({ key: STRING_KEYS.HERE })}
                  </$Link>
                ),
-                // todo: update localization to flip the two
-                DOS_BLOGPOST: (
+                TRADING_BLOGPOST: (
                  <$Link
                    href="https://dydx.exchange/blog/v4-full-trading"
                    target="_blank"
@@ -242,6 +269,7 @@ export const notificationTypes: NotificationTypeConfig[] = [
              },
            }),
            toastSensitivity: 'foreground',
+            groupKey: NotificationType.ReleaseUpdates,
          },
          []
        );
@@ -0,0 +1,44 @@
+import { useMemo } from 'react';
+import { shallowEqual, useSelector } from 'react-redux';
+
+import { DepthChartSeries, DepthChartDatum } from '@/constants/charts';
+
+import { getCurrentMarketOrderbook } from '@/state/perpetualsSelectors';
+
+import { MustBigNumber } from '@/lib/numbers';
+
+export const useOrderbookValuesForDepthChart = () => {
+  const orderbook = useSelector(getCurrentMarketOrderbook, shallowEqual);
+
+  return useMemo(() => {
+    const bids = (orderbook?.bids?.toArray() ?? [])
+      .filter(Boolean)
+      .map((datum) => ({ ...datum, seriesKey: DepthChartSeries.Bids } as DepthChartDatum));
+
+    const asks = (orderbook?.asks?.toArray() ?? [])
+      .filter(Boolean)
+      .map((datum) => ({ ...datum, seriesKey: DepthChartSeries.Asks } as DepthChartDatum));
+
+    const lowestBid = bids[bids.length - 1];
+    const highestBid = bids[0];
+    const lowestAsk = asks[0];
+    const highestAsk = asks[asks.length - 1];
+
+    const midMarketPrice = orderbook?.midPrice;
+    const spread = MustBigNumber(lowestAsk?.price ?? 0).minus(highestBid?.price ?? 0);
+    const spreadPercent = orderbook?.spreadPercent;
+
+    return {
+      bids,
+      asks,
+      lowestBid,
+      highestBid,
+      lowestAsk,
+      highestAsk,
+      midMarketPrice,
+      spread,
+      spreadPercent,
+      orderbook,
+    };
+  }, [orderbook]);
+};
@@ -1,50 +0,0 @@
-import { createContext, useContext, useEffect, useMemo, useState } from 'react';
-import { useSelector } from 'react-redux';
-import { Squid } from '@0xsquid/sdk';
-
-import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
-
-import { getSelectedNetwork } from '@/state/appSelectors';
-
-export const NATIVE_TOKEN_ADDRESS = '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE';
-
-export const STATUS_ERROR_GRACE_PERIOD = 300_000;
-
-const useSquidContext = () => {
-  const selectedNetwork = useSelector(getSelectedNetwork);
-  const [_, setInitialized] = useState(false);
-
-  const initializeClient = async () => {
-    setInitialized(false);
-    if (!squid) return;
-    await squid.init();
-    setInitialized(true);
-  };
-
-  const squid = useMemo(
-    () =>
-      new Squid({
-        baseUrl: ENVIRONMENT_CONFIG_MAP[selectedNetwork]?.endpoints['0xsquid'],
-        integratorId: ENVIRONMENT_CONFIG_MAP[selectedNetwork]?.squidIntegratorId,
-      }),
-    [selectedNetwork]
-  );
-
-  useEffect(() => {
-    if (squid) {
-      initializeClient();
-    }
-  }, [squid]);
-
-  return squid;
-};
-
-type SquidContextType = ReturnType<typeof useSquidContext>;
-const SquidContext = createContext<SquidContextType | undefined>(undefined);
-SquidContext.displayName = '0xSquid';
-
-export const SquidProvider = ({ ...props }) => (
-  <SquidContext.Provider value={useSquidContext()} {...props} />
-);
-
-export const useSquid = () => useContext(SquidContext);
@@ -31,6 +31,7 @@ import { log } from '@/lib/telemetry';
 import { useAccounts } from './useAccounts';
 import { useTokenConfigs } from './useTokenConfigs';
 import { useDydxClient } from './useDydxClient';
+import { hashFromTx } from '@/lib/hashfromTx';

 type SubaccountContextType = ReturnType<typeof useSubaccountContext>;
 const SubaccountContext = createContext<SubaccountContextType>({} as SubaccountContextType);
@@ -293,12 +294,29 @@ export const useSubaccountContext = ({ localDydxWallet }: { localDydxWallet?: Lo
  );

  const sendSquidWithdraw = useCallback(
-    async (amount: number, payload: string) => {
+    async (amount: number, payload: string, isCctp?: boolean) => {
+      
+      const cctpWithdraw = () => {
+        return new Promise<string>((resolve, reject) => 
+          abacusStateManager.cctpWithdraw((success, error, data) => {
+            const parsedData = JSON.parse(data);
+            if (success && parsedData?.code == 0) {
+              resolve(parsedData?.transactionHash);
+            } else {
+              reject(error);
+            }
+          })
+        )
+      }
+      if (isCctp) {
+        return await cctpWithdraw();
+      }
+
      if (!subaccountClient) {
        return;
      }
-
-      return await sendSquidWithdrawFromSubaccount({ subaccountClient, amount, payload });
+      const tx = await sendSquidWithdrawFromSubaccount({ subaccountClient, amount, payload });
+      return hashFromTx(tx?.hash);
    },
    [subaccountClient, sendSquidWithdrawFromSubaccount]
  );
@@ -1,53 +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;
-  }
-
-  /**
-   * @description We are temporarily displaying a subset of ACTIVE markets, this flag will allow you to see all ACTIVE markets
-   */
-  get displayAllMarkets() {
-    return !!this.queryParams.displayAllMarkets;
-  }
-}
-
-export const testFlags = new TestFlags();
-
-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);
@@ -11,22 +11,19 @@ export const useTradeFormInputs = () => {
  const { limitPriceInput, triggerPriceInput, trailingPercentInput } = tradeFormInputValues;

  useEffect(() => {
-    const floatValue = parseFloat(triggerPriceInput);
    abacusStateManager.setTradeValue({
-      value: floatValue,
+      value: triggerPriceInput,
      field: TradeInputField.triggerPrice,
    });
  }, [triggerPriceInput]);

  useEffect(() => {
-    const floatValue = parseFloat(limitPriceInput);
-    abacusStateManager.setTradeValue({ value: floatValue, field: TradeInputField.limitPrice });
+    abacusStateManager.setTradeValue({ value: limitPriceInput, field: TradeInputField.limitPrice });
  }, [limitPriceInput]);

  useEffect(() => {
-    const floatValue = parseFloat(trailingPercentInput);
    abacusStateManager.setTradeValue({
-      value: floatValue,
+      value: trailingPercentInput,
      field: TradeInputField.trailingPercent,
    });
  }, [trailingPercentInput]);
@@ -1,3 +1 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-  <path d="M14 6L7.83335 10.5L2 6" stroke="currentColor" stroke-width="2.25" stroke-linecap="round"/>
-</svg>
+<svg fill="none" height="10" viewBox="0 0 15 10" width="15" xmlns="http://www.w3.org/2000/svg"><path clip-rule="evenodd" d="m.321829 1.09389c.200562-.192959.469529-.298401.747791-.29315.27827.00525.54307.120763.73621.32115l5.194 5.5132 5.19397-5.5132c.0944-.10408.2088-.188152.3363-.247234.1275-.059081.2655-.091968.406-.096713.1404-.004746.2804.018748.4116.069088s.2509.126504.3522.223979c.1012.09747.1818.21427.2371.34347.0552.12921.084.26819.0845.40871.0006.14052-.0271.27972-.0813.40936s-.1339.24707-.2344.34534l-5.94997 6.3c-.09795.10163-.21538.18245-.34527.23766-.1299.05521-.26959.08367-.41073.08367s-.28083-.02846-.41073-.08367c-.12989-.05521-.24732-.13603-.34527-.23766l-5.950001-6.3c-.192962-.20056-.29840394-.46953-.29315364-.74779.00525031-.27827.12076264-.54307.32115364-.73621z" fill="currentColor" fill-rule="evenodd"/></svg>
@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M7.95513 1.00169C7.89506 1.00645 7.83628 1.02054 7.78124 1.04337L1.31971 3.71042C1.2243 3.74983 1.14329 3.81414 1.08653 3.89553C1.02977 3.97691 0.999705 4.07186 1 4.16883V11.8366C1.00078 11.9327 1.03135 12.0265 1.08805 12.1069C1.14474 12.1873 1.22517 12.2508 1.31971 12.2898L7.78124 14.9568C7.85011 14.9853 7.92463 15 8 15C8.07536 15 8.14989 14.9853 8.21876 14.9568L14.6803 12.2898C14.7748 12.2508 14.8552 12.1873 14.9119 12.1069C14.9686 12.0265 14.9992 11.9327 15 11.8366V4.16883C15.0003 4.07186 14.9702 3.97691 14.9134 3.89553C14.8567 3.81414 14.7756 3.74983 14.6803 3.71042L8.21876 1.04337C8.13605 1.00911 8.04538 0.994778 7.95513 1.00169ZM8 2.04351L13.1378 4.16883L8 6.28894L2.86219 4.16883L8 2.04351ZM2.07693 4.93457L7.46153 7.15886V13.7328L2.07693 11.5084V4.93457ZM13.923 4.93457V11.5084L8.53846 13.7328V7.15886L13.923 4.93457Z" fill="currentColor"/>
-</svg>
@@ -19,7 +19,6 @@ export { default as CoinMarketCapIcon } from './logos/coinmarketcap.svg';
 export { default as CoinsIcon } from './coins.svg';
 export { default as CommentIcon } from './comment.svg';
 export { default as CopyIcon } from './copy.svg';
-export { default as CubeIcon } from './cube.svg';
 export { default as DepositIcon } from './deposit.svg';
 export { default as DepthChartIcon } from './depth-chart.svg';
 export { default as DiscordIcon } from './discord.svg';
@@ -32,6 +31,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,12 +43,14 @@ 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';
 export { default as PrivacyIcon } from './privacy.svg';
 export { default as ProfileIcon } from './profile.svg';
 export { default as QrIcon } from './qr.svg';
+export { default as RewardStarIcon } from './reward-star.svg';
 export { default as SearchIcon } from './search.svg';
 export { default as SendIcon } from './send.svg';
 export { default as ShareIcon } from './share.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>
@@ -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>
@@ -11,6 +11,7 @@ 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';
@@ -53,6 +54,7 @@ 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} />,
@@ -1,6 +1,6 @@
 import styled, { type AnyStyledComponent } from 'styled-components';
 import { Link } from 'react-router-dom';
-import { useDispatch } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';

 import { ButtonShape } from '@/constants/buttons';
 import { DialogTypes } from '@/constants/dialogs';
@@ -8,6 +8,10 @@ import { STRING_KEYS } from '@/constants/localization';
 import { AppRoute } from '@/constants/routes';
 import { LogoShortIcon, BellStrokeIcon } from '@/icons';

+import { headerMixins } from '@/styles/headerMixins';
+import { layoutMixins } from '@/styles/layoutMixins';
+import breakpoints from '@/styles/breakpoints';
+
 import { useTokenConfigs, useStringGetter, useURLConfigs } from '@/hooks';

 import { Icon, IconName } from '@/components/Icon';
@@ -21,10 +25,7 @@ import { NotificationsMenu } from '@/views/menus/NotificationsMenu';
 import { LanguageSelector } from '@/views/menus/LanguageSelector';

 import { openDialog } from '@/state/dialogs';
-
-import { headerMixins } from '@/styles/headerMixins';
-import { layoutMixins } from '@/styles/layoutMixins';
-import breakpoints from '@/styles/breakpoints';
+import { getHasSeenLaunchIncentives } from '@/state/configsSelectors';

 export const HeaderDesktop = () => {
  const stringGetter = useStringGetter();
@@ -32,6 +33,8 @@ export const HeaderDesktop = () => {
  const dispatch = useDispatch();
  const { chainTokenLabel } = useTokenConfigs();

+  const hasSeenLaunchIncentives = useSelector(getHasSeenLaunchIncentives);
+
  const navItems = [
    {
      group: 'navigation',
@@ -55,6 +58,7 @@ export const HeaderDesktop = () => {
          value: chainTokenLabel,
          label: chainTokenLabel,
          href: `/${chainTokenLabel}`,
+          slotAfter: !hasSeenLaunchIncentives && <Styled.UnreadIndicator />,
        },
        {
          value: 'MORE',
@@ -238,3 +242,10 @@ Styled.IconButton = styled(IconButton)<{ size?: string }>`
  --button-icon-size: 1rem;
  --button-padding: 0 0.5em;
 `;
+
+Styled.UnreadIndicator = styled.div`
+  width: 0.4375rem;
+  height: 0.4375rem;
+  border-radius: 50%;
+  background-color: var(--color-accent);
+`;
@@ -1,7 +1,11 @@
-import { useMemo, useState } from 'react';
+import { useState } from 'react';
 import styled, { css } from 'styled-components';

-import { NotificationStatus } from '@/constants/notifications';
+import {
+  type Notification,
+  type NotificationDisplayData,
+  NotificationStatus,
+} from '@/constants/notifications';
 import { ButtonShape, ButtonSize } from '@/constants/buttons';
 import { useNotifications } from '@/hooks/useNotifications';
 import { useBreakpoints } from '@/hooks/useBreakpoints';
@@ -13,54 +17,31 @@ import { Toast } from '@/components/Toast';
 import { ToastArea } from '@/components/ToastArea';
 import { ToggleButton } from '@/components/ToggleButton';

+type ElementProps = {
+  notifications: {
+    notification: Notification<any, any>;
+    key: string;
+    displayData: NotificationDisplayData;
+  }[];
+};
+
 type StyleProps = {
  className?: string;
 };

-const MAX_TOASTS = 10;
-
-export const NotificationsToastArea = ({ className }: StyleProps) => {
+export const NotificationStack = ({ notifications, className }: ElementProps & StyleProps) => {
  const [shouldStackNotifications, setshouldStackNotifications] = useState(true);

-  const {
-    notifications,
-    getKey,
-    getDisplayData,
-    markUnseen,
-    markSeen,
-    isMenuOpen,
-    onNotificationAction,
-  } = useNotifications();
-
+  const { markUnseen, markSeen, onNotificationAction } = useNotifications();
  const { isMobile } = useBreakpoints();
-  const notificationMap = useMemo(() => {
-    return (
-      Object.values(notifications)
-        // Sort by time of first trigger
-        .sort(
-          (n1, n2) =>
-            n1.timestamps[NotificationStatus.Triggered]! -
-            n2.timestamps[NotificationStatus.Triggered]!
-        )
-        .map((notification) => ({
-          notification,
-          key: getKey(notification),
-          displayData: getDisplayData(notification),
-        }))
-        .filter(
-          ({ displayData, notification }) =>
-            displayData && notification.status < NotificationStatus.Unseen
-        )
-        .slice(-MAX_TOASTS)
-    );
-  }, [notifications, getKey, getDisplayData]);
-
-  if (isMenuOpen) return null;
-
-  const hasMultipleToasts = notificationMap.length > 1;
+  const hasMultipleToasts = notifications.length > 1;

  return (
-    <StyledToastArea swipeDirection={isMobile ? 'up' : 'right'} className={className}>
+    <StyledToastArea
+      swipeDirection={isMobile ? 'up' : 'right'}
+      className={className}
+      size={notifications.length}
+    >
      {hasMultipleToasts && (
        <StyledToggleButton
          shape={ButtonShape.Pill}
@@ -72,12 +53,12 @@ export const NotificationsToastArea = ({ className }: StyleProps) => {
        </StyledToggleButton>
      )}

-      {notificationMap.map(({ notification, key, displayData }, idx) => (
+      {notifications.map(({ notification, key, displayData }, idx) => (
        <StyledToast
          key={key}
-          isStacked={shouldStackNotifications}
+          isStacked={idx > 0 && shouldStackNotifications}
          isOpen={notification.status < NotificationStatus.Unseen}
-          layer={notificationMap.length - 1 - idx}
+          layer={idx}
          notification={notification}
          slotIcon={displayData.icon}
          slotTitle={displayData.title}
@@ -110,19 +91,13 @@ export const NotificationsToastArea = ({ className }: StyleProps) => {
  );
 };

-const StyledToastArea = styled(ToastArea)`
-  position: absolute;
-  width: min(17.5rem, 100%);
-  inset: 0 0 0 auto;
-
-  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 StyledToastArea = styled(ToastArea)<{ size: number }>`
+  position: relative;
+  ${({ size }) =>
+    size &&
+    css`
+      padding-bottom: calc(${size - 1} * 2px);
+    `}
 `;

 const StyledToast = styled(Toast)<{ isStacked?: boolean; layer: number }>`
@@ -133,7 +108,7 @@ const StyledToast = styled(Toast)<{ isStacked?: boolean; layer: number }>`
          position: absolute;
          left: 0;
          top: calc(${layer} * 2px);
-          right: calc(${layer} * -2px);
+          right: 0;
        `
      : css`
          margin-bottom: 0.75rem;
@@ -145,7 +120,7 @@ const StyledToggleButton = styled(ToggleButton)<{ isPressed: boolean }>`
  pointer-events: auto;
  display: none;
  position: absolute;
-  top: 4px;
+  top: -0.5rem;
  left: calc(50% - 0.75rem);
  --button-width: 2rem;
  --button-height: 1rem;
@@ -0,0 +1,71 @@
+import { useMemo } from 'react';
+import { groupBy } from 'lodash';
+import styled from 'styled-components';
+
+import { breakpoints } from '@/styles';
+import { layoutMixins } from '@/styles/layoutMixins';
+
+import { NotificationStatus } from '@/constants/notifications';
+import { useNotifications } from '@/hooks/useNotifications';
+
+import { NotificationStack } from './NotifcationStack';
+
+type StyleProps = {
+  className?: string;
+};
+
+const MAX_TOASTS = 10;
+
+export const NotificationsToastArea = ({ className }: StyleProps) => {
+  const { notifications, getKey, getDisplayData, isMenuOpen } = useNotifications();
+
+  const notificationMapByType = useMemo(() => {
+    const notificationMap = Object.values(notifications)
+      // Sort by time of first trigger
+      .sort(
+        (n1, n2) =>
+          n1.timestamps[NotificationStatus.Triggered]! -
+          n2.timestamps[NotificationStatus.Triggered]!
+      )
+      .map((notification) => ({
+        notification,
+        key: getKey(notification),
+        displayData: getDisplayData(notification),
+      }))
+      .filter(
+        ({ displayData, notification }) =>
+          displayData && notification.status < NotificationStatus.Unseen
+      )
+      .slice(-MAX_TOASTS);
+    return groupBy(notificationMap, (notification) => notification.displayData?.groupKey);
+  }, [notifications, getKey, getDisplayData]);
+
+  if (isMenuOpen) return null;
+
+  return (
+    <StyledToastArea className={className}>
+      {Object.keys(notificationMapByType).map((groupKey) => (
+        <NotificationStack notifications={notificationMapByType[groupKey]} key={groupKey} />
+      ))}
+    </StyledToastArea>
+  );
+};
+
+const StyledToastArea = styled.div`
+  ${layoutMixins.scrollArea}
+
+  position: absolute;
+  width: min(17.5rem, 100%);
+  inset: 0 0 0 auto;
+
+  padding: 0.75rem 0.75rem 0.75rem 0;
+
+  mask-image: linear-gradient(to left, transparent, white 0.5rem);
+
+  pointer-events: none;
+
+  @media ${breakpoints.mobile} {
+    width: 100%;
+    position: fixed;
+  }
+`;
@@ -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,17 +42,24 @@ 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;
    this.store = undefined;
  }

+  get isNobleClientConnected(): boolean {
+    return this.nobleClient?.isConnected ?? false;
+  }
+
  setStore(store: RootStore): void {
    this.store = store;
  }
@@ -59,6 +68,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 +90,7 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
        websocketUrl,
        validatorUrl,
        chainId,
+        nobleValidatorUrl,
        USDC_DENOM,
        USDC_DECIMALS,
        USDC_GAS_DENOM,
@@ -101,6 +122,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 +216,8 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
        timeInForce as OrderTimeInForce,
        goodTilTimeInSeconds ?? 0,
        execution as OrderExecution,
-        postOnly,
-        reduceOnly,
+        postOnly ?? undefined,
+        reduceOnly ?? undefined,
        triggerPrice ?? undefined
      );

@@ -325,6 +355,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 +500,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 +603,13 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
          const parseDelegations = this.parseToPrimitives(delegations);
          callback(JSON.stringify(parseDelegations));
          break;
+        case QueryType.GetNobleBalance:
+          if (this.nobleClient?.isConnected) {
+            const nobleBalance = await this.nobleClient.getAccountBalance('uusdc');
+            const parsedNobleBalance = this.parseToPrimitives(nobleBalance);
+            callback(JSON.stringify(parsedNobleBalance));
+          }
+          break;
        default:
          break;
      }
@@ -26,13 +26,15 @@ 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 { testFlags } from '@/lib/testFlags';
+
 import AbacusRest from './rest';
 import AbacusAnalytics from './analytics';
 import AbacusWebsocket from './websocket';
@@ -81,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
@@ -180,6 +185,12 @@ class AbacusStateManager {
    }
  };

+  setNobleWallet = (nobleWallet?: LocalWallet) => {
+    if (nobleWallet) {
+      this.chainTransactions.setNobleWallet(nobleWallet);
+    }
+  };
+
  setTransfersSourceAddress = (evmAddress: string) => {
    this.stateManager.sourceAddress = evmAddress;
  };
@@ -223,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 = (
@@ -262,6 +261,14 @@ class AbacusStateManager {
    ) => void
  ) => this.stateManager.cancelOrder(orderId, callback);

+  cctpWithdraw = (
+    callback: (
+      success: boolean,
+      parsingError: Nullable<ParsingError>,
+      data: string,
+    ) => void
+  ): void => this.stateManager.commitCCTPWithdraw(callback);
+
  // ------ Utils ------ //
  getHistoricalPnlPeriod = (): Nullable<HistoricalPnlPeriods> =>
    this.stateManager.historicalPnlPeriod;
@@ -10,7 +10,7 @@ import {
 } from '@/constants/websocket';

 import { lastSuccessfulWebsocketRequestByOrigin } from '@/hooks/useAnalytics';
-import { testFlags } from '@/hooks/useTestFlags';
+import { testFlags } from '@/lib/testFlags';

 import { subscriptionsByChannelId } from '@/lib/tradingView/dydxfeed/cache';
 import { mapCandle } from '@/lib/tradingView/utils';
@@ -0,0 +1,3 @@
+export const hashFromTx = (
+  txHash: string | Uint8Array
+): string => `0x${Buffer.from(txHash).toString('hex')}`;
@@ -0,0 +1,48 @@
+import { isMainnet } from '@/constants/networks';
+import { GetStatus, StatusResponse } from '@0xsquid/sdk';
+
+export const NATIVE_TOKEN_ADDRESS = '0xEeeeeEeeeEeEeeEeEeEeeEEEeeeeEeeeeeeeEEeE';
+
+export const STATUS_ERROR_GRACE_PERIOD = 300_000;
+
+const getSquidStatusUrl = (isV2: boolean) => {
+  if (isV2) {
+    return isMainnet
+      ? 'https://v2.api.squidrouter.com/v2/status'
+      : 'https://testnet.v2.api.squidrouter.com/v2/status';
+  }
+  return isMainnet
+    ? 'https://api.squidrouter.com/v1/status'
+    : 'https://testnet.api.squidrouter.com/v1/status';
+};
+
+export const fetchSquidStatus = async (
+  params: GetStatus,
+  isV2?: boolean,
+  integratorId?: string
+): Promise<StatusResponse> => {
+  const parsedParams: { [key: string]: string } = {
+    transactionId: params.transactionId,
+    fromChainId: String(params.fromChainId),
+    toChainId: String(params.toChainId),
+  };
+  if (isV2) parsedParams.bridgeType = 'cctp';
+  const url = `${getSquidStatusUrl(!!isV2)}?${new URLSearchParams(parsedParams).toString()}`;
+
+  const response = await fetch(url, {
+    headers: {
+      "x-integrator-id": integratorId || 'dYdX-api'
+    },
+  });
+
+  if (!response.ok) {
+    const error = await response.json();
+    throw new Error(error);
+  }
+
+  return response.json();
+};
+
+export const getNobleChainId = () => {
+  return isMainnet ? 'noble-1' : 'grand-1';
+}
@@ -0,0 +1,27 @@
+class TestFlags {
+  public queryParams: { [key: string]: string };
+
+  constructor() {
+    this.queryParams = {};
+    const hash = window.location.hash;
+    const queryIndex = hash.indexOf('?');
+    if (queryIndex === -1) return;
+
+    const queryParamsString = hash.substring(queryIndex + 1);
+    const params = new URLSearchParams(queryParamsString);
+
+    for (const [key, value] of params) {
+      this.queryParams[key.toLowerCase()] = value;
+    }
+  }
+
+  get displayInitializingMarkets() {
+    return !!this.queryParams.displayinitializingmarkets;
+  }
+
+  get showMobileSignInOption() {
+    return !!this.queryParams.mobilesignin;
+  }
+}
+
+export const testFlags = new TestFlags();
@@ -1,4 +1,4 @@
-import { createConfig, configureChains, mainnet, Chain, Connector, usePublicClient } from 'wagmi';
+import { createConfig, configureChains, mainnet, Chain } from 'wagmi';
 import { goerli } from 'wagmi/chains';

 import {
@@ -26,6 +26,9 @@ import {
  fantomTestnet,
  celo,
  celoAlfajores,
+  scroll,
+  kava,
+  sepolia,
 } from 'viem/chains';

 import { alchemyProvider } from 'wagmi/providers/alchemy';
@@ -53,7 +56,7 @@ import { isTruthy } from './isTruthy';
 export const WAGMI_SUPPORTED_CHAINS: Chain[] = [
  mainnet,
  goerli,
-
+  sepolia,
  arbitrum,
  arbitrumGoerli,
  avalanche,
@@ -78,6 +81,8 @@ export const WAGMI_SUPPORTED_CHAINS: Chain[] = [
  fantomTestnet,
  celo,
  celoAlfajores,
+  scroll,
+  kava,
 ];

 const { chains, publicClient, webSocketPublicClient } = configureChains(
@@ -146,7 +151,7 @@ const getConnectors = (walletConnectConfig: WalletConnectConfig) => [
  new CoinbaseWalletConnector({
    chains,
    options: {
-      appName: 'wagmi',
+      appName: 'dYdX',
      reloadOnDisconnect: false,
    },
  }),
@@ -1,4 +1,6 @@
 import { DialogPlacement } from '@/components/Dialog';
 import { NotificationsMenu } from '@/views/menus/NotificationsMenu';

-export const AlertsPage = () => <NotificationsMenu placement={DialogPlacement.Inline} />;
+const AlertsPage = () => <NotificationsMenu placement={DialogPlacement.Inline} />;
+
+export default AlertsPage;
@@ -2,7 +2,7 @@ import styled, { AnyStyledComponent } from 'styled-components';

 import { articleMixins } from '@/styles/articleMixins';

-export const PrivacyPolicyPage = () => (
+const PrivacyPolicyPage = () => (
  <Styled.Article>
    <header>
      <h1>Privacy Policy</h1>
@@ -10,6 +10,8 @@ export const PrivacyPolicyPage = () => (
  </Styled.Article>
 );

+export default PrivacyPolicyPage;
+
 const Styled: Record<string, AnyStyledComponent> = {};

 Styled.Article = styled.article`
@@ -30,6 +30,9 @@ import abacusStateManager from '@/lib/abacus';
 import { isTruthy } from '@/lib/isTruthy';
 import { truncateAddress } from '@/lib/wallet';

+import { DYDXBalancePanel } from './rewards/DYDXBalancePanel';
+import { MigratePanel } from './rewards/MigratePanel';
+
 const ENS_CHAIN_ID = 1; // Ethereum

 const Profile = () => {
@@ -175,8 +178,27 @@ const Profile = () => {
          onClick={() => dispatch(openDialog({ type: DialogTypes.Help }))}
        />
      </Styled.EqualGrid>
+      
+      <MigratePanel />
+      <DYDXBalancePanel />

      <Styled.EqualGrid>
+        <Styled.RewardsPanel
+          slotHeaderContent="Trading Rewards"
+          href={`/${chainTokenLabel}`}
+          hasSeparator
+        >
+          <Styled.Details
+            items={[
+              {
+                key: 'week-rewards',
+                label: stringGetter({ key: STRING_KEYS.THIS_WEEK }),
+                value: '-',
+              },
+            ]}
+            layout="grid"
+          />
+        </Styled.RewardsPanel>
        <Panel
          slotHeaderContent={stringGetter({ key: STRING_KEYS.FEES })}
          href={`${AppRoute.Portfolio}/${PortfolioRoute.Fees}`}
@@ -191,19 +213,6 @@ const Profile = () => {
            layout="grid"
          />
        </Panel>
-        <Styled.RewardsPanel
-          slotHeaderContent={stringGetter({ key: STRING_KEYS.REWARDS })}
-          href={`/${chainTokenLabel}`}
-          hasSeparator
-        >
-          <Styled.Details
-            items={[
-              { key: 'maker', label: stringGetter({ key: STRING_KEYS.YOU_WILL_EARN }), value: '-' },
-              { key: 'taker', label: stringGetter({ key: STRING_KEYS.EPOCH_ENDS_IN }), value: '-' },
-            ]}
-            layout="grid"
-          />
-        </Styled.RewardsPanel>
      </Styled.EqualGrid>

      <Styled.TablePanel
@@ -327,6 +336,13 @@ Styled.Details = styled(Details)`
 `;

 Styled.RewardsPanel = styled(Panel)`
+  align-self: flex-start;
+  
+  &,
+  > * {
+    height: 100%;
+  }
+
  dl {
    --details-grid-numColumns: 1;
  }
@@ -2,7 +2,7 @@ import styled, { AnyStyledComponent } from 'styled-components';

 import { articleMixins } from '@/styles/articleMixins';

-export const TermsOfUsePage = () => (
+const TermsOfUsePage = () => (
  <Styled.Article>
    <header>
      <h1>Sample Terms of Use</h1>
@@ -1076,6 +1076,8 @@ export const TermsOfUsePage = () => (
  </Styled.Article>
 );

+export default TermsOfUsePage;
+
 const Styled: Record<string, AnyStyledComponent> = {};

 Styled.Article = styled.article`
@@ -1,34 +1,40 @@
+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 { Tag, TagType } from '@/components/Tag';
 import { WithSidebar } from '@/components/WithSidebar';

-import { getOnboardingState, getSubaccount } from '@/state/accountSelectors';
+import { getOnboardingState, getSubaccount, getTradeInfoNumbers } from '@/state/accountSelectors';
 import { openDialog } from '@/state/dialogs';

-import { PortfolioNavMobile } from './PortfolioNavMobile';
-import { Overview } from './Overview';
-import { Positions } from './Positions';
-import { Orders } from './Orders';
-import { Fees } from './Fees';
-import { History } from './History';
+import { shortenNumberForDisplay } from '@/lib/numbers';

-import { layoutMixins } from '@/styles/layoutMixins';
-import { Button } from '@/components/Button';
-import { ButtonAction } from '@/constants/buttons';
+import { PortfolioNavMobile } from './PortfolioNavMobile';
+import { LoadingSpace } from '@/components/Loading/LoadingSpinner';
+
+const Overview = lazy(() => import('./Overview').then((module) => ({ default: module.Overview })));
+const Positions = lazy(() =>
+  import('./Positions').then((module) => ({ default: module.Positions }))
+);
+const Orders = lazy(() => import('./Orders').then((module) => ({ default: module.Orders })));
+const Fees = lazy(() => import('./Fees').then((module) => ({ default: module.Fees })));
+const History = lazy(() => import('./History').then((module) => ({ default: module.History })));

 export default () => {
  const dispatch = useDispatch();
@@ -39,54 +45,60 @@ export default () => {
  const { freeCollateral } = useSelector(getSubaccount, shallowEqual) || {};
  const { nativeTokenBalance } = useAccountBalance();

+  const { numTotalPositions, numTotalOpenOrders } = useSelector(getTradeInfoNumbers, shallowEqual) || {};
+  const numPositions = shortenNumberForDisplay(numTotalPositions);
+  const numOrders = shortenNumberForDisplay(numTotalOpenOrders);
+
  const usdcBalance = freeCollateral?.current || 0;

  useDocumentTitle(stringGetter({ key: STRING_KEYS.PORTFOLIO }));

  const routesComponent = (
-    <Routes>
-      <Route path={PortfolioRoute.Overview} element={<Overview />} />
-      <Route path={PortfolioRoute.Positions} element={<Positions />} />
-      <Route path={PortfolioRoute.Orders} element={<Orders />} />
-      <Route path={PortfolioRoute.Fees} element={<Fees />} />
-      <Route path={PortfolioRoute.History} element={<History />}>
-        <Route index path="*" element={<Navigate to={HistoryRoute.Trades} />} />
-        <Route
-          path={HistoryRoute.Trades}
-          element={
-            <FillsTable
-              columnKeys={
-                isTablet
-                  ? [
-                      FillsTableColumnKey.Time,
-                      FillsTableColumnKey.TypeAmount,
-                      FillsTableColumnKey.PriceFee,
-                    ]
-                  : [
-                      FillsTableColumnKey.Time,
-                      FillsTableColumnKey.Market,
-                      FillsTableColumnKey.Side,
-                      FillsTableColumnKey.AmountPrice,
-                      FillsTableColumnKey.TotalFee,
-                      FillsTableColumnKey.Type,
-                      FillsTableColumnKey.Liquidity,
-                    ]
-              }
-              withOuterBorder={isNotTablet}
-            />
-          }
-        />
-        <Route
-          path={HistoryRoute.Transfers}
-          element={<TransferHistoryTable withOuterBorder={isNotTablet} />}
-        />
-        <Route
-          path={HistoryRoute.Payments}
-          element={<FundingPaymentsTable withOuterBorder={isNotTablet} />}
-        />
-      </Route>
-      <Route path="*" element={<Navigate to={PortfolioRoute.Overview} replace />} />
-    </Routes>
+    <Suspense fallback={<LoadingSpace id="portfolio" />}>
+      <Routes>
+        <Route path={PortfolioRoute.Overview} element={<Overview />} />
+        <Route path={PortfolioRoute.Positions} element={<Positions />} />
+        <Route path={PortfolioRoute.Orders} element={<Orders />} />
+        <Route path={PortfolioRoute.Fees} element={<Fees />} />
+        <Route path={PortfolioRoute.History} element={<History />}>
+          <Route index path="*" element={<Navigate to={HistoryRoute.Trades} />} />
+          <Route
+            path={HistoryRoute.Trades}
+            element={
+              <FillsTable
+                columnKeys={
+                  isTablet
+                    ? [
+                        FillsTableColumnKey.Time,
+                        FillsTableColumnKey.TypeAmount,
+                        FillsTableColumnKey.PriceFee,
+                      ]
+                    : [
+                        FillsTableColumnKey.Time,
+                        FillsTableColumnKey.Market,
+                        FillsTableColumnKey.Side,
+                        FillsTableColumnKey.AmountPrice,
+                        FillsTableColumnKey.TotalFee,
+                        FillsTableColumnKey.Type,
+                        FillsTableColumnKey.Liquidity,
+                      ]
+                }
+                withOuterBorder={isNotTablet}
+              />
+            }
+          />
+          <Route
+            path={HistoryRoute.Transfers}
+            element={<TransferHistoryTable withOuterBorder={isNotTablet} />}
+          />
+          <Route
+            path={HistoryRoute.Payments}
+            element={<FundingPaymentsTable withOuterBorder={isNotTablet} />}
+          />
+        </Route>
+        <Route path="*" element={<Navigate to={PortfolioRoute.Overview} replace />} />
+      </Routes>
+    </Suspense>
  );

  return isTablet ? (
@@ -113,14 +125,28 @@ export default () => {
                    },
                    {
                      value: PortfolioRoute.Positions,
-                      slotBefore: <Styled.Icon iconName={IconName.Cube} />,
-                      label: stringGetter({ key: STRING_KEYS.POSITIONS }),
+                      slotBefore: <Styled.Icon iconName={IconName.Positions} />,
+                      label: (
+                        <>
+                          {stringGetter({ key: STRING_KEYS.POSITIONS })}
+                          {numPositions > 0 && (
+                            <Tag type={TagType.Number}> {numPositions} </Tag>
+                          )}
+                        </>
+                      ),
                      href: PortfolioRoute.Positions,
                    },
                    {
                      value: PortfolioRoute.Orders,
                      slotBefore: <Styled.Icon iconName={IconName.OrderPending} />,
-                      label: stringGetter({ key: STRING_KEYS.ORDERS }),
+                      label: (
+                        <>
+                          {stringGetter({ key: STRING_KEYS.ORDERS })}
+                          {numOrders > 0 && (
+                            <Tag type={TagType.Number}> {numOrders} </Tag>
+                          )}
+                        </>
+                      ),
                      href: PortfolioRoute.Orders,
                    },
                    {
@@ -191,7 +217,7 @@ Styled.SideBar = styled.div`
 Styled.Footer = styled.div`
  ${layoutMixins.row}
  flex-wrap: wrap;
-  
+
  padding: 1rem;

  gap: 0.5rem;
@@ -32,7 +32,7 @@ export const DYDXBalancePanel = () => {
  const { chainTokenLabel } = useTokenConfigs();

  return (
-    <Styled.Panel
+    <Panel
      slotHeader={
        <Styled.Header>
          <Styled.Title>
@@ -108,20 +108,16 @@ export const DYDXBalancePanel = () => {
          ]}
        />
      </Styled.Content>
-    </Styled.Panel>
+    </Panel>
  );
 };

 const Styled: Record<string, AnyStyledComponent> = {};

-Styled.Panel = styled(Panel)`
-  --panel-paddingX: 1.5rem;
-`;
-
 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`
@@ -0,0 +1,291 @@
+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';
+
+const SEASON_NUMBER = 2;
+
+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 ?? ''}_${SEASON_NUMBER}`,
+    queryFn: async () => {
+      if (!dydxAddress) return undefined;
+      const resp = await fetch(
+        `https://cloud.chaoslabs.co/query/api/dydx/points/${dydxAddress}?n=${SEASON_NUMBER}`
+      );
+      return (await resp.json())?.incentivePoints;
+    },
+    onError: (error: Error) => log('LaunchIncentives/fetchPoints', error),
+  });
+
+  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 },
+            })}
+          </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)`
+  background-color: var(--color-layer-4);
+  width: 100%;
+`;
+
+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: 19rem;
+  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);
+`;
@@ -26,7 +26,7 @@ import { MustBigNumber } from '@/lib/numbers';
 const TOKEN_MIGRATION_LEARN_MORE_LINK =
  'https://www.dydx.foundation/blog/update-on-exploring-the-future-of-dydx';

-export const MigratePanel = () => {
+export const MigratePanel = ({ className }: { className?: string }) => {
  const { isNotTablet } = useBreakpoints();
  const stringGetter = useStringGetter();

@@ -43,6 +43,7 @@ export const MigratePanel = () => {

  return isNotTablet ? (
    <Styled.MigratePanel
+      className={className}
      slotHeader={<Styled.Title>{stringGetter({ key: STRING_KEYS.MIGRATE })}</Styled.Title>}
      slotRight={
        <Styled.MigrateAction>
@@ -72,6 +73,7 @@ export const MigratePanel = () => {
    </Styled.MigratePanel>
  ) : (
    <Styled.MigratePanel
+      className={className}
      slotHeader={
        <Styled.MobileMigrateHeader>
          <h3>
@@ -132,21 +134,24 @@ export const MigratePanel = () => {
 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;
 `;

 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`
  ${layoutMixins.flexEqualColumns}
  align-items: center;
-  margin-right: 1rem;
+  margin: 1rem;
  gap: 1rem;
  padding: 1rem;
  width: 100%;
@@ -164,6 +169,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`
@@ -179,7 +191,7 @@ Styled.MobileMigrateHeader = styled.div`
  font: var(--font-small-book);
  color: var(--color-text-0);

-  padding: 1rem 1.5rem 0;
+  padding: 1rem 1rem 0;

  h3 {
    ${layoutMixins.inlineRow}
@@ -0,0 +1,86 @@
+import styled, { AnyStyledComponent } from 'styled-components';
+
+import { breakpoints } from '@/styles';
+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-paddingX: 0;
+  --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: 1rem 1rem;
+  border-bottom: var(--border-width) solid var(--border-color);
+
+  font: var(--font-small-book);
+
+  @media ${breakpoints.notTablet} {
+    padding: 1.5rem 1.25rem;
+  }
+
+  h3 {
+    font: var(--font-medium-book);
+    color: var(--color-text-2);
+  }
+`;
+
+Styled.Link = styled(Link)`
+  display: inline-flex;
+`;
@@ -1,15 +1,18 @@
 import styled, { AnyStyledComponent } from 'styled-components';
 import { useDispatch } from 'react-redux';
+import { useNavigate } from 'react-router-dom';

 import { STRING_KEYS } from '@/constants/localization';
 import { ButtonAction, ButtonSize } from '@/constants/buttons';
 import { DialogTypes } from '@/constants/dialogs';
+import { AppRoute } from '@/constants/routes';

 import { useBreakpoints, useStringGetter, useURLConfigs } from '@/hooks';

 import { breakpoints } from '@/styles';
 import { layoutMixins } from '@/styles/layoutMixins';

+import { BackButton } from '@/components/BackButton';
 import { Panel } from '@/components/Panel';
 import { IconName } from '@/components/Icon';
 import { IconButton } from '@/components/IconButton';
@@ -19,12 +22,15 @@ import { openDialog } from '@/state/dialogs';

 import { DYDXBalancePanel } from './DYDXBalancePanel';
 import { MigratePanel } from './MigratePanel';
+import { LaunchIncentivesPanel } from './LaunchIncentivesPanel';
+import { RewardsHelpPanel } from './RewardsHelpPanel';

-export const RewardsPage = () => {
+const RewardsPage = () => {
  const dispatch = useDispatch();
  const stringGetter = useStringGetter();
  const { governanceLearnMore, stakingLearnMore } = useURLConfigs();
  const { isTablet, isNotTablet } = useBreakpoints();
+  const navigate = useNavigate();

  const panelArrow = (
    <Styled.Arrow>
@@ -38,12 +44,28 @@ export const RewardsPage = () => {

  return (
    <Styled.Page>
-      {import.meta.env.VITE_V3_TOKEN_ADDRESS && <MigratePanel />}
-      <Styled.PanelRow>
-        {isTablet && <DYDXBalancePanel />}
+      {isTablet && (
+        <Styled.MobileHeader>
+          <BackButton onClick={() => navigate(AppRoute.Profile)} />
+          {stringGetter({ key: STRING_KEYS.TRADING_REWARDS })}
+        </Styled.MobileHeader>
+      )}
+      {import.meta.env.VITE_V3_TOKEN_ADDRESS && isNotTablet && <MigratePanel />}

+      {isTablet ? (
+        <LaunchIncentivesPanel />
+      ) : (
+        <Styled.PanelRowIncentivesAndBalance>
+          <LaunchIncentivesPanel />
+          <DYDXBalancePanel />
+        </Styled.PanelRowIncentivesAndBalance>
+      )}
+
+      <Styled.PanelRow>
        <Styled.Panel
-          slotHeader={<Styled.Title>{stringGetter({ key: STRING_KEYS.GOVERNANCE })}</Styled.Title>}
+          slotHeaderContent={
+            <Styled.Title>{stringGetter({ key: STRING_KEYS.GOVERNANCE })}</Styled.Title>
+          }
          slotRight={panelArrow}
          onClick={() => dispatch(openDialog({ type: DialogTypes.ExternalNavKeplr }))}
        >
@@ -56,7 +78,9 @@ export const RewardsPage = () => {
        </Styled.Panel>

        <Styled.Panel
-          slotHeader={<Styled.Title>{stringGetter({ key: STRING_KEYS.STAKING })}</Styled.Title>}
+          slotHeaderContent={
+            <Styled.Title>{stringGetter({ key: STRING_KEYS.STAKING })}</Styled.Title>
+          }
          slotRight={panelArrow}
          onClick={() => dispatch(openDialog({ type: DialogTypes.ExternalNavKeplr }))}
        >
@@ -67,13 +91,15 @@ export const RewardsPage = () => {
            </Link>
          </Styled.Description>
        </Styled.Panel>
-
-        {isNotTablet && <DYDXBalancePanel />}
      </Styled.PanelRow>
+
+      <RewardsHelpPanel />
    </Styled.Page>
  );
 };

+export default RewardsPage;
+
 const Styled: Record<string, AnyStyledComponent> = {};

 Styled.Page = styled.div`
@@ -83,47 +109,69 @@ Styled.Page = styled.div`
  align-items: center;

  > * {
-    --content-max-width: 70rem;
+    --content-max-width: 80rem;
    max-width: min(calc(100vw - 4rem), var(--content-max-width));
  }

  @media ${breakpoints.tablet} {
-    padding: 1.25rem;
+    --stickyArea-topHeight: var(--page-header-height-mobile);
+    padding: 0 1rem 1rem;

    > * {
-      max-width: calc(100vw - 2.5rem);
+      max-width: calc(100vw - 2rem);
      width: 100%;
    }
  }
 `;

+Styled.MobileHeader = styled.header`
+  ${layoutMixins.contentSectionDetachedScrollable}
+  ${layoutMixins.stickyHeader}
+  z-index: 2;
+  padding: 1.25rem 0;
+  margin-bottom: -1.5rem;
+
+  font: var(--font-large-medium);
+  color: var(--color-text-2);
+  background-color: var(--color-layer-2);
+`;
+
 Styled.Panel = styled(Panel)`
-  --panel-paddingX: 1.5rem;
+  height: fit-content;
 `;

 Styled.Title = styled.h3`
  font: var(--font-medium-book);
  color: var(--color-text-2);
-  padding: 1rem 1.5rem 0;
+  margin-bottom: -1rem;
 `;

 Styled.Description = styled.div`
  color: var(--color-text-0);
  --link-color: var(--color-text-1);
+
+  a {
+    display: inline;
+    ::before {
+      content: ' ';
+    }
+  }
 `;

 Styled.PanelRow = styled.div`
  ${layoutMixins.gridEqualColumns}
  gap: 1.5rem;

-  align-items: flex-start;
-
  @media ${breakpoints.tablet} {
    grid-auto-flow: row;
    grid-template-columns: 1fr;
  }
 `;

+Styled.PanelRowIncentivesAndBalance = styled(Styled.PanelRow)`
+  grid-template-columns: 2fr 1fr;
+`;
+
 Styled.IconButton = styled(IconButton)`
  color: var(--color-text-0);
  --color-border: var(--color-layer-6);
@@ -25,7 +25,7 @@ import { useNetworks } from '@/views/menus/useNetworks';
 import { SettingsHeader } from './SettingsHeader';
 import { ComingSoonSpace } from '@/components/ComingSoon';

-export const SettingsPage = () => {
+const SettingsPage = () => {
  const stringGetter = useStringGetter();
  const { pathname } = useLocation();
  const dispatch = useDispatch();
@@ -105,3 +105,5 @@ export const SettingsPage = () => {
    </>
  );
 };
+
+export default SettingsPage;
@@ -1,8 +1,7 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import { shallowEqual, useSelector } from 'react-redux';
 import styled, { type AnyStyledComponent } from 'styled-components';

-import { AbacusOrderStatus } from '@/constants/abacus';
 import { STRING_KEYS } from '@/constants/localization';

 import { useBreakpoints, useStringGetter } from '@/hooks';
@@ -28,7 +27,6 @@ import {
  getCurrentMarketTradeInfoNumbers,
  getHasUnseenFillUpdates,
  getHasUnseenOrderUpdates,
-  getLatestOrderStatus,
  getTradeInfoNumbers,
 } from '@/state/accountSelectors';

@@ -82,125 +80,141 @@ export const HorizontalPanel = ({ isOpen = true, setIsOpen }: ElementProps) => {
    showCurrentMarket ? numOpenOrders : numTotalOpenOrders
  );

-  const tabItems = [
-    {
-      value: InfoSection.Position,
-      label: stringGetter({
-        key: showCurrentMarket ? STRING_KEYS.POSITION : STRING_KEYS.POSITIONS,
-      }),
+  const tabItems = useMemo(
+    () => [
+      {
+        value: InfoSection.Position,
+        label: stringGetter({
+          key: showCurrentMarket ? STRING_KEYS.POSITION : STRING_KEYS.POSITIONS,
+        }),

-      tag: showCurrentMarket ? null : shortenNumberForDisplay(numTotalPositions),
+        tag: showCurrentMarket ? null : shortenNumberForDisplay(numTotalPositions),

-      content: showCurrentMarket ? (
-        <PositionInfo showNarrowVariation={isTablet} />
-      ) : (
-        <PositionsTable
-          columnKeys={
-            isTablet
-              ? [
-                  PositionsTableColumnKey.Details,
-                  PositionsTableColumnKey.IndexEntry,
-                  PositionsTableColumnKey.PnL,
-                ]
-              : [
-                  PositionsTableColumnKey.Market,
-                  PositionsTableColumnKey.Side,
-                  PositionsTableColumnKey.Size,
-                  PositionsTableColumnKey.Leverage,
-                  PositionsTableColumnKey.LiquidationAndOraclePrice,
-                  PositionsTableColumnKey.UnrealizedPnl,
-                  PositionsTableColumnKey.RealizedPnl,
-                  PositionsTableColumnKey.AverageOpenAndClose,
-                ]
-          }
-          onNavigate={() => setView(PanelView.CurrentMarket)}
-        />
-      ),
-    },
-    {
-      value: InfoSection.Orders,
-      label: stringGetter({ key: STRING_KEYS.ORDERS }),
+        content: showCurrentMarket ? (
+          <PositionInfo showNarrowVariation={isTablet} />
+        ) : (
+          <PositionsTable
+            columnKeys={
+              isTablet
+                ? [
+                    PositionsTableColumnKey.Details,
+                    PositionsTableColumnKey.IndexEntry,
+                    PositionsTableColumnKey.PnL,
+                  ]
+                : [
+                    PositionsTableColumnKey.Market,
+                    PositionsTableColumnKey.Side,
+                    PositionsTableColumnKey.Size,
+                    PositionsTableColumnKey.Leverage,
+                    PositionsTableColumnKey.LiquidationAndOraclePrice,
+                    PositionsTableColumnKey.UnrealizedPnl,
+                    PositionsTableColumnKey.RealizedPnl,
+                    PositionsTableColumnKey.AverageOpenAndClose,
+                  ]
+            }
+            onNavigate={() => setView(PanelView.CurrentMarket)}
+          />
+        ),
+      },
+      {
+        asChild: true,
+        value: InfoSection.Orders,
+        label: stringGetter({ key: STRING_KEYS.ORDERS }),

-      slotRight: isWaitingForOrderToIndex ? (
-        <Styled.LoadingSpinner />
-      ) : (
-        ordersTagNumber && (
-          <Tag type={TagType.Number} isHighlighted={hasUnseenOrderUpdates}>
-            {ordersTagNumber}
+        slotRight: isWaitingForOrderToIndex ? (
+          <Styled.LoadingSpinner />
+        ) : (
+          ordersTagNumber && (
+            <Tag type={TagType.Number} isHighlighted={hasUnseenOrderUpdates}>
+              {ordersTagNumber}
+            </Tag>
+          )
+        ),
+
+        content: (
+          <OrdersTable
+            currentMarket={showCurrentMarket ? currentMarketId : undefined}
+            columnKeys={
+              isTablet
+                ? [OrdersTableColumnKey.StatusFill, OrdersTableColumnKey.PriceType]
+                : [
+                    !showCurrentMarket && OrdersTableColumnKey.Market,
+                    OrdersTableColumnKey.Status,
+                    OrdersTableColumnKey.Side,
+                    OrdersTableColumnKey.AmountFill,
+                    OrdersTableColumnKey.Price,
+                    OrdersTableColumnKey.Trigger,
+                    OrdersTableColumnKey.GoodTil,
+                    !isAccountViewOnly && OrdersTableColumnKey.Actions,
+                  ].filter(isTruthy)
+            }
+          />
+        ),
+      },
+      {
+        asChild: true,
+        value: InfoSection.Fills,
+        label: stringGetter({ key: STRING_KEYS.FILLS }),
+
+        slotRight: fillsTagNumber && (
+          <Tag type={TagType.Number} isHighlighted={hasUnseenFillUpdates}>
+            {fillsTagNumber}
          </Tag>
-        )
-      ),
+        ),

-      content: (
-        <OrdersTable
-          currentMarket={showCurrentMarket ? currentMarketId : undefined}
-          columnKeys={
-            isTablet
-              ? [OrdersTableColumnKey.StatusFill, OrdersTableColumnKey.PriceType]
-              : [
-                  !showCurrentMarket && OrdersTableColumnKey.Market,
-                  OrdersTableColumnKey.Status,
-                  OrdersTableColumnKey.Side,
-                  OrdersTableColumnKey.AmountFill,
-                  OrdersTableColumnKey.Price,
-                  OrdersTableColumnKey.Trigger,
-                  OrdersTableColumnKey.GoodTil,
-                  !isAccountViewOnly && OrdersTableColumnKey.Actions,
-                ].filter(isTruthy)
-          }
-        />
-      ),
-    },
-    {
-      value: InfoSection.Fills,
-      label: stringGetter({ key: STRING_KEYS.FILLS }),
+        content: (
+          <FillsTable
+            currentMarket={showCurrentMarket ? currentMarketId : undefined}
+            columnKeys={
+              isTablet
+                ? [
+                    FillsTableColumnKey.Time,
+                    FillsTableColumnKey.TypeAmount,
+                    FillsTableColumnKey.PriceFee,
+                  ]
+                : [
+                    !showCurrentMarket && FillsTableColumnKey.Market,
+                    FillsTableColumnKey.Time,
+                    FillsTableColumnKey.Type,
+                    FillsTableColumnKey.Side,
+                    FillsTableColumnKey.AmountTag,
+                    FillsTableColumnKey.Price,
+                    FillsTableColumnKey.TotalFee,
+                    FillsTableColumnKey.Liquidity,
+                  ].filter(isTruthy)
+            }
+            columnWidths={{
+              [FillsTableColumnKey.TypeAmount]: '100%',
+            }}
+          />
+        ),
+      },
+      // TODO - TRCL-1693 - re-enable when funding payments are supported
+      // {
+      //   value: InfoSection.Payments,
+      //   label: stringGetter({ key: STRING_KEYS.PAYMENTS }),

-      slotRight: fillsTagNumber && (
-        <Tag type={TagType.Number} isHighlighted={hasUnseenFillUpdates}>
-          {fillsTagNumber}
-        </Tag>
-      ),
-
-      content: (
-        <FillsTable
-          currentMarket={showCurrentMarket ? currentMarketId : undefined}
-          columnKeys={
-            isTablet
-              ? [
-                  FillsTableColumnKey.Time,
-                  FillsTableColumnKey.TypeAmount,
-                  FillsTableColumnKey.PriceFee,
-                ]
-              : [
-                  !showCurrentMarket && FillsTableColumnKey.Market,
-                  FillsTableColumnKey.Time,
-                  FillsTableColumnKey.Type,
-                  FillsTableColumnKey.Side,
-                  FillsTableColumnKey.AmountTag,
-                  FillsTableColumnKey.Price,
-                  FillsTableColumnKey.TotalFee,
-                  FillsTableColumnKey.Liquidity,
-                ].filter(isTruthy)
-          }
-          columnWidths={{
-            [FillsTableColumnKey.TypeAmount]: '100%',
-          }}
-        />
-      ),
-    },
-    // TODO - TRCL-1693 - re-enable when funding payments are supported
-    // {
-    //   value: InfoSection.Payments,
-    //   label: stringGetter({ key: STRING_KEYS.PAYMENTS }),
-
-    //   tag: shortenNumberForDisplay(
-    //     showCurrentMarket ? numFundingPayments : numTotalFundingPayments
-    //   ),
-    //   content: (
-    //     <FundingPaymentsTable currentMarket={showCurrentMarket ? currentMarket?.id : undefined} />
-    //   ),
-    // },
-  ];
+      //   tag: shortenNumberForDisplay(
+      //     showCurrentMarket ? numFundingPayments : numTotalFundingPayments
+      //   ),
+      //   content: (
+      //     <FundingPaymentsTable currentMarket={showCurrentMarket ? currentMarket?.id : undefined} />
+      //   ),
+      // },
+    ],
+    [
+      stringGetter,
+      currentMarketId,
+      showCurrentMarket,
+      isTablet,
+      isWaitingForOrderToIndex,
+      isAccountViewOnly,
+      ordersTagNumber,
+      fillsTagNumber,
+      hasUnseenFillUpdates,
+      hasUnseenOrderUpdates,
+    ]
+  );

  return isTablet ? (
    <MobileTabs defaultValue={InfoSection.Position} items={tabItems} withBorders={false} />
@@ -1,10 +1,8 @@
 import { createSelector } from 'reselect';

-import { SubaccountPosition } from '@/constants/abacus';
 import { OnboardingState, OnboardingSteps } from '@/constants/account';

 import {
-  getExistingOpenPositions,
  getOnboardingGuards,
  getOnboardingState,
  getSubaccountId,
@@ -60,13 +58,8 @@ export const calculateIsAccountViewOnly = createSelector(
 );

 /**
- * @description calculate whether the subaccount has open positions
+ * @description calculate whether the subaccount has uncommitted positions
 */
-export const calculateHasOpenPositions = createSelector(
-  [getExistingOpenPositions],
-  (openPositions?: SubaccountPosition[]) => (openPositions?.length || 0) > 0
-);
-
 export const calculateHasUncommittedOrders = createSelector(
  [getUncommittedOrderClientIds],
  (uncommittedOrderClientIds: number[]) => uncommittedOrderClientIds.length > 0
@@ -2,6 +2,7 @@ import { OrderSide } from '@dydxprotocol/v4-client-js';
 import { createSelector } from 'reselect';

 import {
+  type AbacusOrderStatuses,
  type SubaccountOrder,
  type SubaccountFill,
  type SubaccountFundingPayment,
@@ -43,7 +44,6 @@ export const getSubaccountBuyingPower = (state: RootState) => state.account.suba
 export const getSubaccountEquity = (state: RootState) => state.account.subaccount?.equity;

 export const getSubaccountHistoricalPnl = (state: RootState) => state.account?.historicalPnl;
-
 /**
 * @param state
 * @returns list of a subaccount's open positions. Each item in the list is an open position in a different market.
@@ -258,6 +258,14 @@ export const getCurrentMarketFundingPayments = createSelector(
    !currentMarketId ? [] : marketFundingPayments[currentMarketId]
 );

+/**
+ * @param state
+ * @returns boolean on whether an order status is considered open
+ */
+const isOpenOrderStatus = (status: AbacusOrderStatuses) => {
+  return status !== AbacusOrderStatus.filled && status !== AbacusOrderStatus.cancelled;
+};
+
 /**
 * @param state
 * @returns Total numbers of the subaccount's open positions, open orders and fills
@@ -266,8 +274,7 @@ export const getTradeInfoNumbers = createSelector(
  [getExistingOpenPositions, getSubaccountOrders, getSubaccountFills, getSubaccountFundingPayments],
  (positions, orders, fills, fundingPayments) => ({
    numTotalPositions: positions?.length,
-    numTotalOpenOrders: orders?.filter((order) => order.status !== AbacusOrderStatus.cancelled)
-      .length,
+    numTotalOpenOrders: orders?.filter((order) => isOpenOrderStatus(order.status)).length,
    numTotalFills: fills?.length,
    numTotalFundingPayments: fundingPayments?.length,
  })
@@ -281,8 +288,7 @@ export const getCurrentMarketTradeInfoNumbers = createSelector(
  [getCurrentMarketOrders, getCurrentMarketFills, getCurrentMarketFundingPayments],
  (marketOrders, marketFills, marketFundingPayments) => {
    return {
-      numOpenOrders: marketOrders?.filter((order) => order.status !== AbacusOrderStatus.cancelled)
-        .length,
+      numOpenOrders: marketOrders?.filter((order) => isOpenOrderStatus(order.status)).length,
      numFills: marketFills?.length,
      numFundingPayments: marketFundingPayments?.length,
    };
@@ -17,6 +17,7 @@ export interface ConfigsState {
  feeTiers?: kollections.List<FeeTier>;
  feeDiscounts?: FeeDiscount[];
  network?: NetworkConfigs;
+  hasSeenLaunchIncentives: boolean;
 }

 const DOCUMENT_THEME_MAP = {
@@ -43,6 +44,10 @@ const initialState: ConfigsState = {
  feeDiscounts: undefined,
  feeTiers: undefined,
  network: undefined,
+  hasSeenLaunchIncentives: getLocalStorage({
+    key: LocalStorageKey.HasSeenLaunchIncentives,
+    defaultValue: false,
+  }),
 };

 changeTheme(initialState.appTheme);
@@ -60,7 +65,11 @@ export const configsSlice = createSlice({
      ...state,
      ...action.payload,
    }),
+    markLaunchIncentivesSeen: (state: ConfigsState) => {
+      setLocalStorage({ key: LocalStorageKey.HasSeenLaunchIncentives, value: true });
+      state.hasSeenLaunchIncentives = true;
+    },
  },
 });

-export const { setAppTheme, setConfigs } = configsSlice.actions;
+export const { setAppTheme, setConfigs, markLaunchIncentivesSeen } = configsSlice.actions;
@@ -5,3 +5,6 @@ export const getAppTheme = (state: RootState) => state.configs.appTheme;
 export const getFeeTiers = (state: RootState) => state.configs.feeTiers?.toArray();

 export const getFeeDiscounts = (state: RootState) => state.configs.feeDiscounts;
+
+export const getHasSeenLaunchIncentives = (state: RootState) =>
+  state.configs.hasSeenLaunchIncentives;
@@ -47,7 +47,10 @@ export const inputsSlice = createSlice({
        inputErrors: errors?.toArray(),
        tradeInputs: trade,
        closePositionInputs: closePosition,
-        transferInputs: transfer,
+        transferInputs: {
+          ...transfer,
+          isCctp: !!transfer?.isCctp,
+        } as Nullable<TransferInputs>,
      };
    },

@@ -26,7 +26,12 @@ export const calculateFundingRateHistory = createSelector(
    return data.map(({ effectiveAtMilliseconds, rate }) => ({
      time: effectiveAtMilliseconds,
      fundingRate: rate,
-      direction: rate < 0 ? FundingDirection.ToLong : FundingDirection.ToShort,
+      direction:
+        rate === 0
+          ? FundingDirection.None
+          : rate < 0
+          ? FundingDirection.ToLong
+          : FundingDirection.ToShort,
    }));
  }
 );
@@ -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);
@@ -877,11 +877,6 @@ export const layoutMixins: Record<
    }
  `,

-  perspectiveArea: css`
-    perspective: 100rem;
-    transform-style: preserve-3d;
-  `,
-
  absolute: css`
    position: absolute;
    top: 0;
@@ -63,7 +63,6 @@ Styled.AccountInfoSectionContainer = styled.div<{ showAccountInfo?: boolean }>`
  ${layoutMixins.column}
  height: var(--account-info-section-height);
  min-height: var(--account-info-section-height);
-  overflow-x: clip;

  ${({ showAccountInfo }) =>
    !showAccountInfo &&
@@ -203,7 +203,6 @@ const Styled: Record<string, AnyStyledComponent> = {};

 Styled.Stack = styled.div`
  ${layoutMixins.stack}
-  ${layoutMixins.perspectiveArea}
 `;

 Styled.CornerButton = styled(Button)`
@@ -293,7 +292,14 @@ Styled.TransferButtons = styled.div`

 Styled.ConnectedAccountInfoContainer = styled.div<{ $showHeader?: boolean }>`
  ${layoutMixins.column}
-  ${layoutMixins.withOuterAndInnerBorders}
+
+  @media ${breakpoints.notTablet} {
+    ${layoutMixins.withOuterAndInnerBorders}
+  }
+
+  @media ${breakpoints.tablet} {
+    ${layoutMixins.withInnerBorder}
+  }

  ${({ $showHeader }) =>
    $showHeader &&
@@ -2,9 +2,7 @@ import styled, { type AnyStyledComponent } from 'styled-components';
 import { shallowEqual, useSelector } from 'react-redux';

 import { STRING_KEYS } from '@/constants/localization';
-import { MARKETS_TO_DISPLAY } from '@/constants/markets';
 import { useBreakpoints, useStringGetter } from '@/hooks';
-import { testFlags } from '@/hooks/useTestFlags';
 import { breakpoints } from '@/styles';
 import { layoutMixins } from '@/styles/layoutMixins';

@@ -34,7 +32,6 @@ export const ExchangeBillboards: React.FC<ExchangeBillboardsProps> = ({

  Object.values(perpetualMarkets)
    .filter(Boolean)
-    .filter(({ id }) => (testFlags.displayAllMarkets ? true : MARKETS_TO_DISPLAY.includes(id)))
    .forEach(({ oraclePrice, perpetual }) => {
      const { volume24H, trades24H, openInterest = 0 } = perpetual || {};
      volume24HUSDC += volume24H ?? 0;
@@ -29,7 +29,6 @@ export const MarketDetails: React.FC = () => {
  if (!configs) return null;

  const {
-    basePositionNotional,
    tickSize,
    stepSize,
    initialMarginFraction,
@@ -114,17 +113,11 @@ export const MarketDetails: React.FC = () => {
      ),
    },
    {
-      key: 'base-initial-margin-fraction',
-      label: stringGetter({ key: STRING_KEYS.BASE_INITIAL_MARGIN_FRACTION }),
+      key: 'initial-margin-fraction',
+      label: stringGetter({ key: STRING_KEYS.INITIAL_MARGIN_FRACTION }),
      tooltip: 'initial-margin-fraction',
      value: <Output useGrouping value={initialMarginFraction} type={OutputType.SmallPercent} />,
    },
-    {
-      key: 'base-position-notional',
-      label: stringGetter({ key: STRING_KEYS.BASE_POSITION_NOTIONAL }),
-      tooltip: 'base-position-notional',
-      value: <Output useGrouping value={basePositionNotional} type={OutputType.Number} />,
-    },
  ];

  return (
@@ -213,13 +206,8 @@ Styled.MarketDetails = styled.div`
 `;

 Styled.Header = styled.header`
-  /* max-width: fit-content; */
-
  ${layoutMixins.column}
  gap: 1.25rem;
-
-  position: sticky;
-  bottom: 3rem;
 `;

 Styled.WrapRow = styled.div`
@@ -453,13 +453,6 @@ Styled.Actions = styled.footer`
  > :last-child {
    flex: 2;
  }
-
-  position: sticky;
-  bottom: clamp(0.5rem, 7.5%, 2rem);
-
-  @media ${breakpoints.tablet} {
-    bottom: 0;
-  }
 `;

 Styled.Output = styled(Output)<{ sign: NumberSign; smallText?: boolean; margin?: string }>`
@@ -514,6 +507,7 @@ Styled.PositionInfo = styled.div`

 Styled.DetachedSection = styled(DetachedSection)`
  padding: 0 1.5rem;
+  position: relative;
 `;

 Styled.DetachedScrollableSection = styled(DetachedScrollableSection)`
@@ -0,0 +1,220 @@
+import { useMemo } from 'react';
+import { OrderSide } from '@dydxprotocol/v4-client-js';
+import type { RenderTooltipParams } from '@visx/xychart/lib/components/Tooltip';
+import { shallowEqual, useSelector } from 'react-redux';
+
+import type { Nullable } from '@/constants/abacus';
+import {
+  DepthChartDatum,
+  DepthChartPoint,
+  DepthChartSeries,
+  SERIES_KEY_FOR_ORDER_SIDE,
+} from '@/constants/charts';
+import { STRING_KEYS } from '@/constants/localization';
+
+import { useStringGetter } from '@/hooks';
+import { useOrderbookValuesForDepthChart } from '@/hooks/useOrderbookValues';
+
+import { TooltipContent } from '@/components/visx/TooltipContent';
+import { Details } from '@/components/Details';
+import { Output, OutputType } from '@/components/Output';
+
+import { getCurrentMarketAssetData } from '@/state/assetsSelectors';
+
+import { MustBigNumber } from '@/lib/numbers';
+
+type DepthChartTooltipProps = {
+  chartPointAtPointer: DepthChartPoint;
+  isEditingOrder?: boolean;
+  stepSizeDecimals: Nullable<number>;
+  tickSizeDecimals: Nullable<number>;
+} & Pick<RenderTooltipParams<DepthChartDatum>, 'colorScale' | 'tooltipData'>;
+
+export const DepthChartTooltipContent = ({
+  chartPointAtPointer,
+  colorScale,
+  isEditingOrder,
+  stepSizeDecimals,
+  tickSizeDecimals,
+  tooltipData,
+}: DepthChartTooltipProps) => {
+  const { nearestDatum } = tooltipData || {};
+  const stringGetter = useStringGetter();
+  const { spread, spreadPercent, midMarketPrice } = useOrderbookValuesForDepthChart();
+  const { id = '' } = useSelector(getCurrentMarketAssetData, shallowEqual) ?? {};
+
+  const priceImpact = useMemo(() => {
+    if (nearestDatum) {
+      const depthChartSeries = nearestDatum.key as DepthChartSeries;
+
+      return {
+        [DepthChartSeries.Bids]: MustBigNumber(nearestDatum?.datum.price)
+          .minus(chartPointAtPointer.price)
+          .div(nearestDatum?.datum.price),
+        [DepthChartSeries.Asks]: MustBigNumber(chartPointAtPointer.price)
+          .minus(nearestDatum?.datum.price)
+          .div(chartPointAtPointer.price),
+        [DepthChartSeries.MidMarket]: undefined,
+      }[depthChartSeries];
+    }
+    return undefined;
+  }, [nearestDatum, chartPointAtPointer.price]);
+
+  if (!isEditingOrder && !nearestDatum?.datum) return null;
+
+  return (
+    <TooltipContent
+      accentColor={
+        nearestDatum?.key &&
+        colorScale?.(
+          isEditingOrder ? SERIES_KEY_FOR_ORDER_SIDE[chartPointAtPointer.side] : nearestDatum.key
+        )
+      }
+    >
+      <h4>
+        {isEditingOrder
+          ? stringGetter({ key: STRING_KEYS.RELEASE_TO_EDIT })
+          : nearestDatum &&
+            {
+              [DepthChartSeries.Bids]: stringGetter({ key: STRING_KEYS.BIDS }),
+              [DepthChartSeries.Asks]: stringGetter({ key: STRING_KEYS.ASKS }),
+              [DepthChartSeries.MidMarket]: stringGetter({ key: STRING_KEYS.MID_MARKET }),
+            }[nearestDatum.key]}
+      </h4>
+
+      <Details
+        layout="column"
+        items={
+          isEditingOrder
+            ? [
+                {
+                  key: 'side',
+                  label: stringGetter({ key: STRING_KEYS.SIDE }),
+                  value: (
+                    <Output
+                      type={OutputType.Text}
+                      value={
+                        {
+                          [OrderSide.BUY]: stringGetter({
+                            key: STRING_KEYS.BUY,
+                          }),
+                          [OrderSide.SELL]: stringGetter({
+                            key: STRING_KEYS.SELL,
+                          }),
+                        }[chartPointAtPointer.side]
+                      }
+                    />
+                  ),
+                },
+                {
+                  key: 'limitPrice',
+                  label: stringGetter({ key: STRING_KEYS.LIMIT_PRICE }),
+                  value: (
+                    <Output
+                      type={OutputType.Fiat}
+                      value={chartPointAtPointer.price}
+                      useGrouping={false}
+                    />
+                  ),
+                },
+                {
+                  key: 'size',
+                  label: stringGetter({ key: STRING_KEYS.AMOUNT }),
+                  value: (
+                    <Output
+                      type={OutputType.Asset}
+                      value={chartPointAtPointer.size}
+                      fractionDigits={stepSizeDecimals}
+                      tag={id}
+                      useGrouping={false}
+                    />
+                  ),
+                },
+              ]
+            : nearestDatum?.key === DepthChartSeries.MidMarket
+            ? [
+                {
+                  key: 'midMarketPrice',
+                  label: stringGetter({ key: STRING_KEYS.PRICE }),
+                  value: (
+                    <Output type={OutputType.Fiat} value={midMarketPrice} useGrouping={false} />
+                  ),
+                },
+                {
+                  key: 'spread',
+                  label: stringGetter({ key: STRING_KEYS.ORDERBOOK_SPREAD }),
+                  value: (
+                    <>
+                      <Output
+                        type={OutputType.Fiat}
+                        value={spread}
+                        fractionDigits={tickSizeDecimals}
+                        useGrouping={false}
+                      />
+                      <Output
+                        type={OutputType.SmallPercent}
+                        value={spreadPercent}
+                        withParentheses
+                      />
+                    </>
+                  ),
+                },
+              ]
+            : [
+                {
+                  key: 'price',
+                  label: stringGetter({ key: STRING_KEYS.PRICE }),
+                  value: (
+                    <>
+                      {nearestDatum &&
+                        {
+                          [DepthChartSeries.Bids]: '≥',
+                          [DepthChartSeries.Asks]: '≤',
+                        }[nearestDatum.key]}
+                      <Output
+                        type={OutputType.Fiat}
+                        value={nearestDatum?.datum.price}
+                        useGrouping={false}
+                      />
+                    </>
+                  ),
+                },
+                {
+                  key: 'depth',
+                  label: stringGetter({ key: STRING_KEYS.TOTAL_SIZE }),
+                  value: (
+                    <Output
+                      type={OutputType.Asset}
+                      value={nearestDatum?.datum.depth}
+                      fractionDigits={stepSizeDecimals}
+                      tag={id}
+                      useGrouping={false}
+                    />
+                  ),
+                },
+                {
+                  key: 'cost',
+                  label: stringGetter({ key: STRING_KEYS.TOTAL_COST }),
+                  value: (
+                    <Output
+                      useGrouping
+                      type={OutputType.Fiat}
+                      value={
+                        nearestDatum
+                          ? nearestDatum?.datum.price * nearestDatum?.datum.depth
+                          : undefined
+                      }
+                    />
+                  ),
+                },
+                {
+                  key: 'priceImpact',
+                  label: stringGetter({ key: STRING_KEYS.PRICE_IMPACT }),
+                  value: <Output useGrouping type={OutputType.Percent} value={priceImpact} />,
+                },
+              ]
+        }
+      />
+    </TooltipContent>
+  );
+};
@@ -1,14 +1,20 @@
 import { useCallback, useEffect, useMemo, useState } from 'react';
 import styled, { AnyStyledComponent, css, keyframes } from 'styled-components';
 import { useSelector, shallowEqual } from 'react-redux';
+import { OrderSide } from '@dydxprotocol/v4-client-js';

-import { StringGetterFunction, STRING_KEYS } from '@/constants/localization';
+import {
+  DepthChartDatum,
+  DepthChartPoint,
+  DepthChartSeries,
+  SERIES_KEY_FOR_ORDER_SIDE,
+} from '@/constants/charts';
+import { StringGetterFunction } from '@/constants/localization';

 import { useBreakpoints } from '@/hooks';
+import { useOrderbookValuesForDepthChart } from '@/hooks/useOrderbookValues';

-import { MustBigNumber } from '@/lib/numbers';
-
-import { getCurrentMarketConfig, getCurrentMarketOrderbook } from '@/state/perpetualsSelectors';
+import { getCurrentMarketConfig } from '@/state/perpetualsSelectors';
 import { getCurrentMarketAssetData } from '@/state/assetsSelectors';

 import { XYChartWithPointerEvents } from '@/components/visx/XYChartWithPointerEvents';
@@ -21,24 +27,25 @@ import {
  darkTheme,
  DataProvider,
  EventEmitterProvider,
+  type EventHandlerParams,
 } from '@visx/xychart';
 import { LinearGradient } from '@visx/gradient';
 import { curveStepAfter } from '@visx/curve';
-import type { Point } from '@visx/point';
+import { Point } from '@visx/point';
 import Tooltip from '@/components/visx/XYChartTooltipWithBounds';
-import { TooltipContent } from '@/components/visx/TooltipContent';
 import { AxisLabelOutput } from '@/components/visx/AxisLabelOutput';

-import { Details } from '@/components/Details';
 import { LoadingSpace } from '@/components/Loading/LoadingSpinner';
-import { Output, OutputType } from '@/components/Output';
+import { OutputType } from '@/components/Output';

-import { OrderSide } from '@dydxprotocol/v4-client-js';
+import { MustBigNumber } from '@/lib/numbers';
+
+import { DepthChartTooltipContent } from './Tooltip';

 // @ts-ignore
 const theme = buildChartTheme({
  ...darkTheme,
-  colors: ['var(--color-positive)', 'var(--color-negative)', 'white'], // categorical colors, mapped to series via `dataKey`s
+  colors: ['var(--color-positive)', 'var(--color-negative)', 'var(--color-layer-6)'], // categorical colors, mapped to series via `dataKey`s
 });

 const clamp = (n: number, min: number, max: number) => Math.max(min, Math.min(max, n));
@@ -58,30 +65,6 @@ const formatNumber = (n: number, selectedLocale: string, isCompact: boolean = n
    : formattedNumber;
 };

-enum DepthChartSeries {
-  Asks = 'Asks',
-  Bids = 'Bids',
-  MidMarket = 'MidMarket',
-}
-
-type DepthChartDatum = {
-  size: number;
-  price: number;
-  depth: number;
-  seriesKey: DepthChartSeries;
-};
-
-const seriesKeyForOrderSide = {
-  [OrderSide.BUY]: DepthChartSeries.Bids,
-  [OrderSide.SELL]: DepthChartSeries.Asks,
-};
-
-type DepthChartPoint = {
-  side: OrderSide;
-  price: number;
-  size: number;
-};
-
 export const DepthChart = ({
  onChartClick,
  stringGetter,
@@ -96,8 +79,6 @@ export const DepthChart = ({
  const { isMobile } = useBreakpoints();

  // Chart data
-
-  const orderbook = useSelector(getCurrentMarketOrderbook, shallowEqual);
  const { id = '' } = useSelector(getCurrentMarketAssetData, shallowEqual) ?? {};
  const { stepSizeDecimals, tickSizeDecimals } =
    useSelector(getCurrentMarketConfig, shallowEqual) ?? {};
@@ -112,43 +93,15 @@ export const DepthChart = ({
    midMarketPrice,
    spread,
    spreadPercent,
-  } = useMemo(() => {
-    const bids = (orderbook?.bids?.toArray() ?? [])
-      .filter(Boolean)
-      .map((datum) => ({ ...datum, seriesKey: DepthChartSeries.Bids } as DepthChartDatum));
-
-    const asks = (orderbook?.asks?.toArray() ?? [])
-      .filter(Boolean)
-      .map((datum) => ({ ...datum, seriesKey: DepthChartSeries.Asks } as DepthChartDatum));
-
-    const lowestBid = bids[bids.length - 1];
-    const highestBid = bids[0];
-    const lowestAsk = asks[0];
-    const highestAsk = asks[asks.length - 1];
-
-    const midMarketPrice = orderbook?.midPrice;
-    const spread = MustBigNumber(lowestAsk?.price ?? 0).minus(highestBid?.price ?? 0);
-    const spreadPercent = orderbook?.spreadPercent;
-
-    return {
-      bids,
-      asks,
-      lowestBid,
-      highestBid,
-      lowestAsk,
-      highestAsk,
-      midMarketPrice,
-      spread,
-      spreadPercent,
-    };
-  }, [orderbook]);
+    orderbook,
+  } = useOrderbookValuesForDepthChart();

  // Chart state

  const [isPointerPressed, setIsPointerPressed] = useState(false);
  const [chartPointAtPointer, setChartPointAtPointer] = useState<DepthChartPoint>();

-  const isEditingOrder = isPointerPressed && chartPointAtPointer;
+  const isEditingOrder = Boolean(isPointerPressed && chartPointAtPointer);

  const [zoomDomain, setZoomDomain] = useState<undefined | number>();

@@ -193,12 +146,24 @@ export const DepthChart = ({
  }, [orderbook, zoomDomain]);

  const getChartPoint = useCallback(
-    ({ x: price, y: size }: Point) =>
-      ({
-        side: price < midMarketPrice! ? OrderSide.BUY : OrderSide.SELL,
+    (point: Point | EventHandlerParams<object>) => {
+      let price, size;
+      if (point instanceof Point) {
+        const { x, y } = point as Point;
+        price = x;
+        size = y;
+      } else {
+        const { svgPoint: { x, y } = {} } = point as EventHandlerParams<object>;
+        price = x;
+        size = y;
+      }
+
+      return {
+        side: MustBigNumber(price).lt(midMarketPrice!) ? OrderSide.BUY : OrderSide.SELL,
        price,
        size,
-      } as DepthChartPoint),
+      } as DepthChartPoint;
+    },
    [midMarketPrice]
  );

@@ -256,7 +221,7 @@ export const DepthChart = ({
            }}
            onPointerUp={(point) => point && onChartClick?.(getChartPoint(point))}
            onPointerMove={(point) => point && setChartPointAtPointer(getChartPoint(point))}
-            onPointerPressedChange={setIsPointerPressed}
+            onPointerPressedChange={(isPointerPressed) => setIsPointerPressed(isPointerPressed)}
          >
            <Axis
              orientation="bottom"
@@ -363,7 +328,7 @@ export const DepthChart = ({
                <Styled.XAxisLabelOutput
                  type={OutputType.Fiat}
                  value={
-                    isEditingOrder
+                    isEditingOrder && chartPointAtPointer
                      ? chartPointAtPointer.price
                      : tooltipData!.nearestDatum?.datum.price
                  }
@@ -374,8 +339,8 @@ export const DepthChart = ({
                      [DepthChartSeries.Bids]: 'var(--color-positive)',
                      [DepthChartSeries.MidMarket]: 'var(--color-layer-6)',
                    }[
-                      isEditingOrder
-                        ? seriesKeyForOrderSide[chartPointAtPointer.side]
+                      isEditingOrder && chartPointAtPointer
+                        ? SERIES_KEY_FOR_ORDER_SIDE[chartPointAtPointer.side]
                        : (tooltipData!.nearestDatum?.key as DepthChartSeries)
                    ]
                  }
@@ -389,7 +354,7 @@ export const DepthChart = ({
                  <Styled.YAxisLabelOutput
                    type={OutputType.Asset}
                    value={
-                      isEditingOrder
+                      isEditingOrder && chartPointAtPointer
                        ? chartPointAtPointer.size
                        : tooltipData!.nearestDatum?.datum.depth
                    }
@@ -400,8 +365,8 @@ export const DepthChart = ({
                        [DepthChartSeries.Bids]: 'var(--color-positive)',
                        [DepthChartSeries.MidMarket]: 'var(--color-layer-6)',
                      }[
-                        isEditingOrder
-                          ? seriesKeyForOrderSide[chartPointAtPointer.side]
+                        isEditingOrder && chartPointAtPointer
+                          ? SERIES_KEY_FOR_ORDER_SIDE[chartPointAtPointer.side]
                          : (tooltipData!.nearestDatum?.key as DepthChartSeries)
                      ]
                    }
@@ -410,181 +375,22 @@ export const DepthChart = ({
              }
              snapTooltipToDatumX={!isEditingOrder}
              snapTooltipToDatumY={isEditingOrder ? false : isMobile}
-              renderTooltip={({ tooltipData, colorScale }) => {
-                const { nearestDatum } = tooltipData || {};
-
-                if (!isEditingOrder && !nearestDatum?.datum) return null;
-
-                return (
-                  <TooltipContent
-                    accentColor={colorScale?.(
-                      isEditingOrder
-                        ? seriesKeyForOrderSide[chartPointAtPointer.side]
-                        : nearestDatum.key
-                    )}
-                  >
-                    <h4>
-                      {isEditingOrder
-                        ? 'Release mouse to edit order'
-                        : {
-                            [DepthChartSeries.Bids]: 'Bids',
-                            [DepthChartSeries.Asks]: 'Asks',
-                            [DepthChartSeries.MidMarket]: 'Mid-Market',
-                          }[nearestDatum.key]}
-                    </h4>
-
-                    <Details
-                      layout="column"
-                      items={
-                        isEditingOrder
-                          ? [
-                              {
-                                key: 'side',
-                                label: stringGetter({ key: STRING_KEYS.SIDE }),
-                                value: (
-                                  <Output
-                                    type={OutputType.Text}
-                                    value={
-                                      {
-                                        [OrderSide.BUY]: stringGetter({
-                                          key: STRING_KEYS.BUY,
-                                        }),
-                                        [OrderSide.SELL]: stringGetter({
-                                          key: STRING_KEYS.SELL,
-                                        }),
-                                      }[chartPointAtPointer.side]
-                                    }
-                                  />
-                                ),
-                              },
-                              {
-                                key: 'limitPrice',
-                                label: stringGetter({ key: STRING_KEYS.LIMIT_PRICE }),
-                                value: (
-                                  <Output
-                                    type={OutputType.Fiat}
-                                    value={chartPointAtPointer.price}
-                                    useGrouping={false}
-                                  />
-                                ),
-                              },
-                              {
-                                key: 'size',
-                                label: stringGetter({ key: STRING_KEYS.AMOUNT }),
-                                value: (
-                                  <Output
-                                    type={OutputType.Asset}
-                                    value={chartPointAtPointer.size}
-                                    fractionDigits={stepSizeDecimals}
-                                    tag={id}
-                                    useGrouping={false}
-                                  />
-                                ),
-                              },
-                            ]
-                          : nearestDatum?.key === DepthChartSeries.MidMarket
-                          ? [
-                              {
-                                key: 'midMarketPrice',
-                                // label: stringGetter({ key: STRING_KEYS.ORDERBOOK_MID_MARKET_PRICE }),
-                                label: stringGetter({ key: STRING_KEYS.PRICE }),
-                                value: (
-                                  <Output
-                                    type={OutputType.Fiat}
-                                    value={midMarketPrice}
-                                    useGrouping={false}
-                                  />
-                                ),
-                              },
-                              {
-                                key: 'spread',
-                                label: stringGetter({ key: STRING_KEYS.ORDERBOOK_SPREAD }),
-                                value: (
-                                  <>
-                                    <Output
-                                      type={OutputType.Fiat}
-                                      value={spread}
-                                      fractionDigits={tickSizeDecimals}
-                                      useGrouping={false}
-                                    />
-                                    <Output
-                                      type={OutputType.SmallPercent}
-                                      value={spreadPercent}
-                                      withParentheses
-                                    />
-                                  </>
-                                ),
-                              },
-                            ]
-                          : [
-                              {
-                                key: 'price',
-                                label: stringGetter({ key: STRING_KEYS.PRICE }),
-                                value: (
-                                  <>
-                                    {nearestDatum &&
-                                      {
-                                        [DepthChartSeries.Bids]: '≥',
-                                        [DepthChartSeries.Asks]: '≤',
-                                      }[nearestDatum.key]}
-                                    <Output
-                                      type={OutputType.Fiat}
-                                      value={nearestDatum?.datum.price}
-                                      useGrouping={false}
-                                    />
-                                  </>
-                                ),
-                              },
-                              {
-                                key: 'depth',
-                                label: stringGetter({ key: STRING_KEYS.TOTAL_SIZE }),
-                                value: (
-                                  <Output
-                                    type={OutputType.Asset}
-                                    value={nearestDatum?.datum.depth}
-                                    fractionDigits={stepSizeDecimals}
-                                    tag={id}
-                                    useGrouping={false}
-                                  />
-                                ),
-                              },
-                              {
-                                key: 'cost',
-                                label: stringGetter({ key: STRING_KEYS.TOTAL_COST }),
-                                value: (
-                                  <Output
-                                    useGrouping
-                                    type={OutputType.Fiat}
-                                    value={nearestDatum?.datum.price * nearestDatum?.datum.depth}
-                                  />
-                                ),
-                              },
-                              {
-                                key: 'priceImpact',
-                                label: stringGetter({ key: STRING_KEYS.PRICE_IMPACT }),
-                                value: (
-                                  <Output
-                                    useGrouping
-                                    type={OutputType.Percent}
-                                    value={{
-                                      [DepthChartSeries.Asks]: () =>
-                                        MustBigNumber(nearestDatum.datum.price)
-                                          .minus(lowestAsk.price)
-                                          .div(nearestDatum.datum.price),
-                                      [DepthChartSeries.Bids]: () =>
-                                        MustBigNumber(highestBid.price)
-                                          .minus(nearestDatum.datum.price)
-                                          .div(highestBid.price),
-                                    }[nearestDatum.key]()}
-                                  />
-                                ),
-                              },
-                            ]
-                      }
-                    />
-                  </TooltipContent>
-                );
-              }}
+              renderTooltip={({ tooltipData, colorScale }) =>
+                chartPointAtPointer && (
+                  <DepthChartTooltipContent
+                    {...{
+                      tooltipData,
+                      colorScale,
+                      isEditingOrder,
+                      chartPointAtPointer,
+                      stringGetter,
+                      selectedLocale,
+                      stepSizeDecimals,
+                      tickSizeDecimals,
+                    }}
+                  />
+                )
+              }
            />
          </XYChartWithPointerEvents>
        </EventEmitterProvider>
@@ -0,0 +1,107 @@
+import type { RenderTooltipParams } from '@visx/xychart/lib/components/Tooltip';
+import { TooltipContent } from '@/components/visx/TooltipContent';
+
+import { FundingRateResolution, type FundingChartDatum } from '@/constants/charts';
+import { STRING_KEYS } from '@/constants/localization';
+import { FundingDirection } from '@/constants/markets';
+import { useStringGetter } from '@/hooks';
+
+import { Details, DetailsItem } from '@/components/Details';
+import { Output, OutputType, ShowSign } from '@/components/Output';
+
+type FundingChartTooltipProps = {
+  fundingRateView: FundingRateResolution;
+  latestDatum: FundingChartDatum;
+} & Pick<RenderTooltipParams<FundingChartDatum>, 'tooltipData'>;
+
+export const FundingChartTooltipContent = ({
+  fundingRateView,
+  latestDatum,
+  tooltipData,
+}: FundingChartTooltipProps) => {
+  const { nearestDatum } = tooltipData || {};
+  const stringGetter = useStringGetter();
+
+  const tooltipDatum = nearestDatum?.datum ?? latestDatum;
+  const isShowingCurrentFundingRate = tooltipDatum === latestDatum;
+
+  return (
+    <TooltipContent
+      accentColor={
+        {
+          [FundingDirection.ToLong]: 'var(--color-negative)',
+          [FundingDirection.ToShort]: 'var(--color-positive)',
+          [FundingDirection.None]: 'var(--color-layer-6)',
+        }[tooltipDatum.direction]
+      }
+    >
+      <h4>
+        {isShowingCurrentFundingRate
+          ? stringGetter({ key: STRING_KEYS.CURRENT_FUNDING_RATE })
+          : stringGetter({ key: STRING_KEYS.HISTORICAL_FUNDING_RATE })}
+      </h4>
+
+      <Details
+        layout="column"
+        items={
+          [
+            {
+              key: 'direction',
+              label: stringGetter({ key: STRING_KEYS.DIRECTION }),
+              value: (
+                <Output
+                  type={OutputType.Text}
+                  value={
+                    {
+                      [FundingDirection.ToLong]: `${stringGetter({
+                        key: STRING_KEYS.SHORT_POSITION_SHORT,
+                      })} → ${stringGetter({
+                        key: STRING_KEYS.LONG_POSITION_SHORT,
+                      })}`,
+                      [FundingDirection.ToShort]: `${stringGetter({
+                        key: STRING_KEYS.LONG_POSITION_SHORT,
+                      })} → ${stringGetter({
+                        key: STRING_KEYS.SHORT_POSITION_SHORT,
+                      })}`,
+                      [FundingDirection.None]: undefined,
+                    }[tooltipDatum.direction]
+                  }
+                />
+              ),
+            },
+            {
+              key: 'fundingRate',
+              label: stringGetter({
+                key: {
+                  [FundingRateResolution.OneHour]: STRING_KEYS.RATE_1H,
+                  [FundingRateResolution.EightHour]: STRING_KEYS.RATE_8H,
+                  [FundingRateResolution.Annualized]: STRING_KEYS.ANNUALIZED,
+                }[fundingRateView],
+              }),
+              value: (
+                <Output
+                  type={OutputType.SmallPercent}
+                  value={
+                    {
+                      [FundingRateResolution.OneHour]: tooltipDatum.fundingRate,
+                      [FundingRateResolution.EightHour]: tooltipDatum.fundingRate * 8,
+                      [FundingRateResolution.Annualized]: tooltipDatum.fundingRate * (24 * 365),
+                    }[fundingRateView]
+                  }
+                  showSign={ShowSign.Both}
+                />
+              ),
+            },
+            {
+              key: 'time',
+              label: isShowingCurrentFundingRate
+                ? 'Time Remaining'
+                : stringGetter({ key: STRING_KEYS.TIME }),
+              value: <Output type={OutputType.DateTime} value={tooltipDatum.time} />,
+            },
+          ].filter(Boolean) as Array<DetailsItem>
+        }
+      />
+    </TooltipContent>
+  );
+};
@@ -3,39 +3,27 @@ import { shallowEqual, useSelector } from 'react-redux';
 import styled, { type AnyStyledComponent, css } from 'styled-components';
 import { curveMonotoneX, curveStepAfter } from '@visx/curve';

-import { useBreakpoints, useStringGetter } from '@/hooks';
 import { ButtonSize } from '@/constants/buttons';
+import { FundingRateResolution, type FundingChartDatum } from '@/constants/charts';
 import { STRING_KEYS } from '@/constants/localization';
-import { SMALL_PERCENT_DECIMALS, TINY_PERCENT_DECIMALS } from '@/constants/numbers';
 import { FundingDirection } from '@/constants/markets';
+import { SMALL_PERCENT_DECIMALS, TINY_PERCENT_DECIMALS } from '@/constants/numbers';
+import { useBreakpoints, useStringGetter } from '@/hooks';

 import { breakpoints } from '@/styles';

-import { Details, DetailsItem } from '@/components/Details';
-import { Output, OutputType, ShowSign } from '@/components/Output';
+import { Output, OutputType } from '@/components/Output';
 import { LoadingSpace } from '@/components/Loading/LoadingSpinner';
 import { ToggleGroup } from '@/components/ToggleGroup';

 import { TimeSeriesChart } from '@/components/visx/TimeSeriesChart';
 import { AxisLabelOutput } from '@/components/visx/AxisLabelOutput';
-import { TooltipContent } from '@/components/visx/TooltipContent';
 import type { TooltipContextType } from '@visx/xychart';

 import { calculateFundingRateHistory } from '@/state/perpetualsCalculators';

 import { MustBigNumber } from '@/lib/numbers';
-
-enum FundingRateResolution {
-  OneHour = 'OneHour',
-  EightHour = 'EightHour',
-  Annualized = 'Annualized',
-}
-
-type FundingChartDatum = {
-  time: number;
-  fundingRate: number;
-  direction: FundingDirection;
-};
+import { FundingChartTooltipContent } from './Tooltip';

 const FUNDING_RATE_TIME_RESOLUTION = 60 * 60 * 1000; // 1 hour

@@ -116,114 +104,20 @@ export const FundingChart = ({ selectedLocale }: ElementProps) => {
              {
                [FundingDirection.ToLong]: 'var(--color-negative)',
                [FundingDirection.ToShort]: 'var(--color-positive)',
+                [FundingDirection.None]: 'var(--color-layer-6)',
              }[tooltipDatum.direction]
            }
          />
        );
      }}
-      renderTooltip={({ tooltipData }) => {
-        const { nearestDatum } = tooltipData || {};
-
-        const tooltipDatum = nearestDatum?.datum ?? latestDatum;
-        const isShowingCurrentFundingRate = tooltipDatum === latestDatum;
-
-        return (
-          <TooltipContent
-            accentColor={
-              {
-                [FundingDirection.ToLong]: 'var(--color-negative)',
-                [FundingDirection.ToShort]: 'var(--color-positive)',
-              }[tooltipDatum.direction]
-            }
-          >
-            <h4>
-              {isShowingCurrentFundingRate
-                ? stringGetter({ key: STRING_KEYS.CURRENT_FUNDING_RATE })
-                : stringGetter({ key: STRING_KEYS.HISTORICAL_FUNDING_RATE })}
-            </h4>
-
-            <Details
-              layout="column"
-              items={
-                [
-                  {
-                    key: 'direction',
-                    label: stringGetter({ key: STRING_KEYS.DIRECTION }),
-                    value: (
-                      <Output
-                        type={OutputType.Text}
-                        value={
-                          {
-                            [FundingDirection.ToLong]: `${stringGetter({
-                              key: STRING_KEYS.SHORT_POSITION_SHORT,
-                            })} → ${stringGetter({
-                              key: STRING_KEYS.LONG_POSITION_SHORT,
-                            })}`,
-                            [FundingDirection.ToShort]: `${stringGetter({
-                              key: STRING_KEYS.LONG_POSITION_SHORT,
-                            })} → ${stringGetter({
-                              key: STRING_KEYS.SHORT_POSITION_SHORT,
-                            })}`,
-                          }[tooltipDatum.direction]
-                        }
-                      />
-                    ),
-                  },
-                  {
-                    key: 'fundingRate1h',
-                    label: stringGetter({ key: STRING_KEYS.RATE_1H }),
-                    value: (
-                      <Output
-                        type={OutputType.SmallPercent}
-                        value={tooltipDatum.fundingRate}
-                        showSign={ShowSign.Both}
-                      />
-                    ),
-                  },
-                  {
-                    key: 'fundingRate8h',
-                    label: stringGetter({ key: STRING_KEYS.RATE_8H }),
-                    value: (
-                      <Output
-                        type={OutputType.SmallPercent}
-                        value={tooltipDatum.fundingRate * 8}
-                        // value={
-                        //   Math.sign(tooltipDatum.fundingRate) *
-                        //   ((Math.abs(tooltipDatum.fundingRate) + 1) ** 8 - 1)
-                        // }
-                        showSign={ShowSign.Both}
-                      />
-                    ),
-                  },
-                  {
-                    key: 'fundingRateAnnualized',
-                    label: stringGetter({ key: STRING_KEYS.ANNUALIZED }),
-                    value: (
-                      <Output
-                        type={OutputType.SmallPercent}
-                        value={tooltipDatum.fundingRate * (24 * 365)}
-                        // value={
-                        //   Math.sign(tooltipDatum.fundingRate) *
-                        //   ((Math.abs(tooltipDatum.fundingRate) + 1) ** (24 * 365) - 1)
-                        // }
-                        showSign={ShowSign.Both}
-                      />
-                    ),
-                  },
-                  {
-                    key: 'time',
-                    label: isShowingCurrentFundingRate
-                      ? 'Time Remaining'
-                      : stringGetter({ key: STRING_KEYS.TIME }),
-                    value: <Output type={OutputType.DateTime} value={tooltipDatum.time} />,
-                  },
-                ].filter(Boolean) as Array<DetailsItem>
-              }
-            />
-          </TooltipContent>
-        );
-      }}
-      onTooltipContext={setTooltipContext}
+      renderTooltip={({ tooltipData }) => (
+        <FundingChartTooltipContent
+          fundingRateView={fundingRateView}
+          tooltipData={tooltipData}
+          latestDatum={latestDatum}
+        />
+      )}
+      onTooltipContext={(tooltipContext) => setTooltipContext(tooltipContext)}
      minZoomDomain={FUNDING_RATE_TIME_RESOLUTION * 4}
      numGridLines={1}
      slotEmpty={<LoadingSpace id="funding-chart-loading" />}
@@ -290,6 +184,7 @@ Styled.FundingRateToggle = styled.div`
 Styled.CurrentFundingRate = styled.div<{ isShowing?: boolean }>`
  place-self: start center;
  padding: clamp(1.5rem, 9rem - 15%, 4rem);
+  pointer-events: none;

  font: var(--font-large-book);

@@ -82,7 +82,6 @@ const Styled: Record<string, AnyStyledComponent> = {};

 Styled.PriceChart = styled.div<{ isChartReady?: boolean }>`
  ${layoutMixins.stack}
-  ${layoutMixins.perspectiveArea}

  height: 100%;

@@ -94,7 +94,7 @@ export const FillDetailsDialog = ({ fillId, setIsOpen }: ElementProps) => {

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

  return (
    <DetailsDialog
-      slotIcon={<Styled.AssetIcon symbol={asset.id} />}
+      slotIcon={<Styled.AssetIcon symbol={asset?.id} />}
      title={!resources.typeStringKey ? '' : stringGetter({ key: resources.typeStringKey })}
      slotFooter={
        isAccountViewOnly ? null : isOrderStatusClearable(status) ? (
@@ -0,0 +1,46 @@
+import styled, { type AnyStyledComponent } from 'styled-components';
+
+import { ButtonAction, ButtonType } from '@/constants/buttons';
+import { STRING_KEYS } from '@/constants/localization';
+import { useStringGetter } from '@/hooks';
+
+import { Button } from '@/components/Button';
+import { Dialog } from '@/components/Dialog';
+
+import { layoutMixins } from '@/styles/layoutMixins';
+
+type ElementProps = {
+  link: string;
+  linkDescription?: string;
+  setIsOpen: (open: boolean) => void;
+};
+
+export const ExternalLinkDialog = ({ setIsOpen, link, linkDescription }: ElementProps) => {
+  const stringGetter = useStringGetter();
+  return (
+    <Dialog
+      isOpen
+      setIsOpen={setIsOpen}
+      title={stringGetter({ key: STRING_KEYS.LEAVING_WEBSITE })}
+      description={
+        linkDescription ?? stringGetter({ key: STRING_KEYS.LEAVING_WEBSITE_DESCRIPTION })
+      }
+    >
+      <Styled.Content>
+        <p>{stringGetter({ key: STRING_KEYS.LEAVING_WEBSITE_DISCLAIMER })}.</p>
+        <Button type={ButtonType.Link} action={ButtonAction.Primary} href={link}>
+          {stringGetter({ key: STRING_KEYS.CONTINUE })}
+        </Button>
+      </Styled.Content>
+    </Dialog>
+  );
+};
+
+const Styled: Record<string, AnyStyledComponent> = {};
+
+Styled.Content = styled.div`
+  ${layoutMixins.flexColumn}
+  gap: 1rem;
+
+  font: var(--font-base-book);
+`;
@@ -8,6 +8,7 @@ import { ComboboxDialogMenu } from '@/components/ComboboxDialogMenu';
 import { Icon, IconName } from '@/components/Icon';

 import { isTruthy } from '@/lib/isTruthy';
+import { breakpoints } from '@/styles';

 type ElementProps = {
  setIsOpen: (open: boolean) => void;
@@ -72,8 +73,11 @@ export const HelpDialog = ({ setIsOpen }: ElementProps) => {
 const Styled: Record<string, AnyStyledComponent> = {};

 Styled.ComboboxDialogMenu = styled(ComboboxDialogMenu)`
-  --dialog-width: var(--dialog-small-width);
  --dialog-content-paddingTop: 1rem;
  --dialog-content-paddingBottom: 1rem;
  --comboxDialogMenu-item-gap: 1rem;
+
+  @media ${breakpoints.notMobile} {
+    --dialog-width: var(--dialog-small-width);
+  }
 `;
@@ -18,11 +18,7 @@ type ElementProps = {
  onSelectChain: (chain: string) => void;
 };

-export const ChainSelectMenu = ({
-  label,
-  selectedChain,
-  onSelectChain,
-}: ElementProps) => {
+export const ChainSelectMenu = ({ label, selectedChain, onSelectChain }: ElementProps) => {
  const stringGetter = useStringGetter();
  const { type, depositOptions, withdrawalOptions, resources } =
    useSelector(getTransferInputs, shallowEqual) || {};
@@ -38,7 +34,7 @@ export const ChainSelectMenu = ({
    slotBefore: <Styled.Img src={chain.iconUrl} alt="" />,
  }));

-  const selectedOption = chains.find((item) => item.type === selectedChain); 
+  const selectedOption = chains.find((item) => item.type === selectedChain);

  return (
    <SearchSelectMenu
@@ -81,4 +77,4 @@ Styled.ChainRow = styled.div`
  gap: 0.5rem;
  color: var(--color-text-2);
  font: var(--font-base-book);
-`;
+`;
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Aleka Cheung	59cc31b388	update to add a TR inside table instead	2024-01-23 12:05:07 -05:00
Aleka Cheung	ef5b5013c5	add collapsible table	2024-01-23 12:05:07 -05:00
Bill	e93850484b	CCTP deposit/withdraw to throw error if nobleClient is not initialized (#215 ) * CCTP deposit/withdraw to throw error if nobleClient is not initialized * update error str	2024-01-22 09:55:26 -08:00
aleka	521b6d6135	test flag for sign in option (#236 )	2024-01-17 16:22:17 -08:00
aleka	94772bf4dc	bump abacus to remove base position notional (#235 )	2024-01-17 15:52:02 -08:00
Adam Fraser	149f21e7e0	Add trailing blocks to NetworkStatus analytics event (#230 )	2024-01-17 10:34:04 -05:00
aleka	0a3ef3a7ab	bump abacus (#233 )	2024-01-17 10:33:29 -05:00
Bill	fef9935883	Support notification for trading rewards (#224 ) * Support notification for trading rewards * bump abacus * Stack notifications based on notification type * address comments	2024-01-16 10:19:48 -08:00
Bill	c7a5b706e1	Fix toAmount/toAmountMin on withdraw (#232 )	2024-01-15 10:31:23 -08:00
moo-onthelawn	f304bb069a	TRCL-1979 Show open positions / orders in portfolio sidebar (#228 ) * add tags for open orders + positions * clean up, use new num selector function * update logic for open orders	2024-01-12 14:44:09 -05:00
Bill	ad6aa1af49	Bump abacus, fix onboarding toAmount (#229 )	2024-01-11 11:52:02 -08:00
Jared Vu	55b2c3fb4a	Update Funding Chart Tooltip (#225 ) * 🚧 depth chart * ✨ Fixed types and shortened FundingRateTooltip * 💄 update depth chart color scale to use css var * 💄 use layer-6 instead of text-1 * 🌐 Add localization, fix nits	2024-01-11 10:31:53 -08:00
moo-onthelawn	83bcde00eb	TRCL-1623 Update Positions icon in nav sidebar (#226 ) * update icon * remove unused cube icon	2024-01-11 11:02:23 -05:00
Jared Vu	e8024b9337	Add Sepolia (#222 )	2024-01-09 16:35:19 -08:00
Jared Vu	8280e512bc	Remove BasePositionNotional DetailItem (#223 )	2024-01-09 14:01:38 -08:00
aleka	b2234cb969	reorganize rewards vs. profile, update panel and accordion styling (#221 ) * reorganize rewards vs. profile, update panel and accordion styling * feedback	2024-01-09 16:57:02 -05:00
Bill	4bcb1f64ac	Add Kava support for onboarding, and add token symbol to token select (#220 ) * Add Kava support for onboarding, and add token symbol to token select * bump abacus	2024-01-09 11:51:31 -08:00
BillandAleka Cheung	4a64d59546	Update launch incentives to season 2 (#218 ) * Update launch incentives to season 2 * update api url --------- Co-authored-by: Aleka Cheung <aforaleka@gmail.com>	2024-01-04 19:14:23 -08:00
Jared Vu	3fc43e8a12	Remove base from baseInitialMarginFraction (#209 )	2024-01-04 15:35:05 -08:00
Jared Vu	c24a9229a6	Imperator testnet indexer to be scaled down (#219 )	2024-01-04 15:34:18 -08:00
aleka	90329d44d0	update lock file (#217 )	2024-01-03 13:57:21 -08:00
Bill	9a02bd3f1c	remove testnet cctp chains (#216 )	2024-01-03 12:55:58 -08:00
aleka	adba11b462	add accordion component and rewards help panel (#214 )	2024-01-03 14:20:30 -05:00
Jared Vu	29526b927f	Update deposit and withdrawal receipts (#212 ) * Update receipts * Remove duplicate const * Restore env * format * Try using raw * Use 3 spaces T.T * copy from main * Update abacus, display proper toAmount and toAmountMin * nits	2024-01-03 09:56:01 -08:00
Jared Vu	503e089efa	temp hide fees for cctp route (#213 )	2023-12-23 01:17:41 -08:00
Jared Vu	c3495f462c	Additional Withdraw/Deposit validation (#211 ) * Add cctp amount check and price impact check * 2.5% -> 2%	2023-12-22 17:31:32 -08:00
Billandjaredvu	6da6eeb2a4	Enable CCTP (#194 ) * Enable CCTP * Handle base64 encode * Update localization package --------- Co-authored-by: jaredvu <jaredvu@gmail.com>	2023-12-22 11:12:41 -08:00
mike-dydx	0cf3e81bd7	Create documentation.json (#205 )	2023-12-21 15:08:08 -05:00
aleka	f8cf1d364b	update coinbase connect app name (#208 )	2023-12-21 10:58:57 -08:00
Jared Vu	6f344c6b5d	Update comparison function in Table (#207 )	2023-12-21 10:53:56 -08:00
Jared Vu	133856afca	Export secret phrase help article (#206 ) * Update config with correct article link * Remove auto-format of json	2023-12-21 10:49:52 -08:00
Jared Vu	33c543daaf	Update bridgeFee in Withdraw/Deposit forms (#202 ) * Update Withdraw form receipt * Bump abacus 1.1.27 * pnpm-lock * bump v4-localization	2023-12-19 23:36:13 -08:00
Jared Vu	c77e727d2b	TRCL-3406: firefox mobile position table row has stretched icon (#204 ) * Fix PositionsTable assetIcon * Mobile width of HelpDialog	2023-12-19 23:33:36 -08:00
Jared Vu	b94538711d	Lazy load Pages (#203 ) * Lazy import pages * Fix import order	2023-12-19 23:30:51 -08:00
Jared Vu	b83479f45c	Handle New Markets added by Gov (#201 ) * Add celestia assets * Handle symbol not yet added	2023-12-19 23:25:14 -08:00
Jared Vu	001aad3abc	Navigate to the Markets page if the current marketId is not included in subscribed markets (#198 ) * Navigate to markets if current url is invalid * nits	2023-12-19 15:58:49 -08:00
Jared Vu	f8db5e1ba0	Update abacus to 1.1.25: Good til time fix (#199 )	2023-12-19 09:49:51 -08:00
Jared Vu	f8bec0fb3d	Update Withdraw form receipt (#200 )	2023-12-19 09:49:37 -08:00
Bill	8bf23b7e9c	bump abacus (#197 )	2023-12-15 15:12:35 -08:00
Jared Vu	3f10e045f4	bump abacus & wagmi (#196 )	2023-12-15 09:26:41 -08:00
Bill	71d1a0321b	Do not block website if NobleClient cannot init, and other onboarding fixes (#193 )	2023-12-13 08:11:19 -08:00
Bill	0f16396c8d	Implement CCTP withdraw (#188 ) * Implement CCTP withdraw * bump packages * address comments	2023-12-12 10:12:37 -08:00
Jared Vu	2709d79f59	Firefox issues (#190 ) * remove row flicker on hover * Fix border for AccountInfoConnectedState on mobile * Remove sticky position to allow button click * Fix: AccountInfo not displaying on mobile firefox * Fix css var name * Restore filter on Table row hover * Remove PerspectiveArea. broken on firefox * Symbol no longer exists on AbacusType * HorizontalPanel: memoize tabConfig * input: firefox cant click between chars	2023-12-12 08:37:50 -08:00
Bill	ab0eec5d4f	Update noble tesnet rpc (#192 )	2023-12-12 11:35:21 -05:00
Jared Vu	4a044da38f	Size inputs (#191 ) * use formattedValue to update redux state * Separate updateLeverage and onLeverageInput * Remove console.log	2023-12-12 07:11:51 -08:00
Jared Vu	fbbfbc6580	Bump v4-abacus and v4-localization (#189 )	2023-12-08 15:41:07 -08:00
Rui	2714c2b084	Fix path to chainLogo (#187 )	2023-12-07 13:03:44 -08:00
Jared Vu	9979bc8a16	Prevent Spread row from moving when orderbook updates (#186 ) * Add dummy rows to ensure even row count * Reverse bids for horizontal layout * disable pointer-events for dummy rows	2023-12-06 10:26:47 -08:00
aleka	a958a59ea2	Display more markets 12/06 (#178 ) * add more markets 12/06	2023-12-06 11:38:49 -05:00
Jared Vu	2bf9e66da5	Fix inputs for comma locales (#171 ) * Fix for comma decimal separator locales * Accept tickSizeDecimals 0 * Use FloatValue as value for Size Input * Use formattedValue to handle prefix/suffix * Use MustBigNumber.toString()	2023-12-05 16:22:41 -08:00
Bill	2980144e40	Enable CCTP via TestFlags (#185 ) * Enable CCTP via Env Var * Use test flags instead	2023-12-05 14:48:47 -08:00
aleka	5387fe8632	Display more markets 12/05 (#177 ) * add more markets 12/05	2023-12-05 09:52:12 -05:00
Bill	1132ea3bbd	Do not init nobleClient if nobleValidatorUrl does not exist (#184 )	2023-12-04 11:19:29 -08:00
aleka	9188e08a4f	prevent 1password fill (#183 )	2023-12-04 11:06:49 -05:00
aleka	941ef7f9dd	Display more markets 12/04 (#176 ) * add more markets 11/30 * add more markets 12/01 * add more markets 12/04	2023-12-04 10:53:25 -05:00
Bill	b1ffa2e219	Support CCTP and noble auto deposits on testnet (#180 ) * Support CCTP and noble auto deposits on testnet * slippage * fix fees * update isCctp, and comments * bump packages * cctp.json * Bump abacus * fix error * fix loading button	2023-12-01 15:18:50 -08:00
aleka	91ea68dc53	Add chaos labs launch incentives panel (#182 ) * add chaos lab incentives panel * add seen state * external link dialog * better disconnected state	2023-12-01 15:27:19 -05:00
aleka	cf79528d05	Display more markets 12/01 (#175 ) * add more markets 12/01	2023-12-01 09:59:04 -05:00
Bill	ef81f9da57	Add nobleValidator to config (#181 )	2023-11-30 16:11:55 -08:00
aleka	60d59cd211	add more markets 11/30 (#174 )	2023-11-30 10:06:25 -05:00
				`@@ -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>