Use test flags instead

Enable CCTP via Env Var
2023-12-05 14:26:38 -08:00 · 2023-12-04 20:30:15 -08:00
140 changed files with 2723 additions and 5825 deletions
@@ -5,35 +5,29 @@ import styled from 'styled-components';

 import { store } from '@/state/_store';

-import { GlobalStyle } from '@/styles/globalStyle';
-
 import { SelectMenu, SelectItem } from '@/components/SelectMenu';

-import { AppThemeProvider } from '@/hooks/useAppTheme';
-
-import { AppTheme, setAppTheme } from '@/state/configs';
 import { setLocaleLoaded } from '@/state/localization';

 import '@/index.css';
 import './ladle.css';

 export const StoryWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => {
-  const [theme, setTheme] = useState(AppTheme.Classic);
+  const [theme, setTheme] = useState('Default theme');

  useEffect(() => {
-    store.dispatch(setAppTheme(theme));
    switch (theme) {
-      case AppTheme.Dark: {
+      case 'Dark theme': {
        document?.documentElement?.classList.remove('theme-light');
        document?.documentElement?.classList.add('theme-dark');
        break;
      }
-      case AppTheme.Light: {
+      case 'Light theme': {
        document?.documentElement?.classList.remove('theme-dark');
        document?.documentElement?.classList.add('theme-light');
        break;
      }
-      case AppTheme.Classic: {
+      default: {
        document?.documentElement?.classList.remove('theme-dark', 'theme-light');
        break;
      }
@@ -54,15 +48,15 @@ export const StoryWrapper: React.FC<{ children: React.ReactNode }> = ({ children
        >
          {[
            {
-              value: AppTheme.Classic,
+              value: 'Default theme',
              label: 'Default theme',
            },
            {
-              value: AppTheme.Dark,
+              value: 'Dark theme',
              label: 'Dark theme',
            },
            {
-              value: AppTheme.Light,
+              value: 'Light theme',
              label: 'Light theme',
            },
          ].map(({ value, label }) => (
@@ -75,11 +69,8 @@ export const StoryWrapper: React.FC<{ children: React.ReactNode }> = ({ children
        </SelectMenu>
      </StoryHeader>
      <hr />
-      <AppThemeProvider>
-        <GlobalStyle />
-        <StoryContent>{children}</StoryContent>
-      </AppThemeProvider>
-      </Provider>
+      <StoryContent>{children}</StoryContent>
+    </Provider>
  );
 };

@@ -33,18 +33,17 @@
  "packageManager": "pnpm@8.6.6",
  "dependencies": {
    "@0xsquid/sdk": "^1.10.0",
-    "@cosmjs/amino": "^0.32.1",
-    "@cosmjs/crypto": "^0.32.1",
-    "@cosmjs/encoding": "^0.32.1",
-    "@cosmjs/proto-signing": "^0.32.1",
-    "@cosmjs/stargate": "^0.32.1",
-    "@cosmjs/tendermint-rpc": "^0.32.1",
-    "@dydxprotocol/v4-abacus": "^1.2.5",
-    "@dydxprotocol/v4-client-js": "^1.0.14",
-    "@dydxprotocol/v4-localization": "^1.1.11",
+    "@cosmjs/amino": "^0.31.0",
+    "@cosmjs/crypto": "^0.31.0",
+    "@cosmjs/encoding": "^0.31.0",
+    "@cosmjs/proto-signing": "^0.31.0",
+    "@cosmjs/stargate": "^0.31.0",
+    "@cosmjs/tendermint-rpc": "^0.31.0",
+    "@dydxprotocol/v4-abacus": "^1.1.4",
+    "@dydxprotocol/v4-client-js": "^1.0.6",
+    "@dydxprotocol/v4-localization": "^1.0.17",
    "@ethersproject/providers": "^5.7.2",
    "@js-joda/core": "^5.5.3",
-    "@radix-ui/react-accordion": "^1.1.2",
    "@radix-ui/react-checkbox": "^1.0.4",
    "@radix-ui/react-collapsible": "^1.0.3",
    "@radix-ui/react-dialog": "^1.0.4",
@@ -111,8 +110,8 @@
    "reselect": "^4.1.8",
    "styled-components": "^5.3.11",
    "use-latest": "^1.2.1",
-    "viem": "^1.20.0",
-    "wagmi": "^1.4.12"
+    "viem": "^1.12.2",
+    "wagmi": "^1.4.5"
  },
  "devDependencies": {
    "@babel/core": "^7.22.5",
@@ -1,12 +1,61 @@
 [
+    {
+        "chainId": "42161",
+        "tokenAddress": "0xff970a61a04b1ca14834a43f5de4533ebddb5cc8",
+        "name": "Arbitrum"
+    },
+    {
+        "chainId": "43114",
+        "tokenAddress": "0xB97EF9Ef8734C71904D8002F8b6Bc66Dd9c48a6E",
+        "name": "Avalanche"
+    },
+    {
+        "chainId": "8453",
+        "tokenAddress": "0x66627F389ae46D881773B7131139b2411980E09E",
+        "name": "Base"
+    },
    {
        "chainId": "1",
        "tokenAddress": "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
        "name": "Ethereum"
    },
+    {
+        "chainId": "10",
+        "tokenAddress": "0x7F5c764cBc14f9669B88837ca1490cCa17c31607",
+        "name": "OP Mainnet"
+    },
+    {
+        "chainId": "421613",
+        "tokenAddress": "0xfd064a18f3bf249cf1f87fc203e90d8f650f2d63",
+        "name": "Arbitrum Goerli"
+    },
+    {
+        "chainId": "43113",
+        "tokenAddress": "0x5425890298aed601595a70AB815c96711a31Bc65",
+        "name": "Avalanche Fuji"
+    },
+    {
+        "chainId": "84531",
+        "tokenAddress": "0xf175520c52418dfe19c8098071a252da48cd1c19",
+        "name": "Base Goerli"
+    },
    {
        "chainId": "5",
        "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"
    }
 ]
@@ -1,16 +0,0 @@
-{
-    "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"
-        }
-    ]
-}
@@ -1,7 +1,7 @@
 {
   "apps": {
      "ios": {
-         "scheme": "dydx-t-v4"
+         "scheme": "dydxv4"
      }
   },
   "deployments": {
@@ -39,10 +39,10 @@
   "environments": {
      "dydxprotocol-dev": {
         "name": "v4 Dev",
-         "ethereumChainId": "11155111",
+         "ethereumChainId": "5",
         "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://noble-testnet-rpc.polkachu.com/",
+            "nobleValidator": "https://rpc.testnet.noble.strange.love",
            "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/en/articles/8565867-secret-phrase-on-dydx-chain",
+            "accountExportLearnMore": "https://help.dydx.exchange",
            "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
         },
         "wallets": {
@@ -113,10 +113,10 @@
      },
      "dydxprotocol-dev-2": {
         "name": "v4 Dev 2",
-         "ethereumChainId": "11155111",
+         "ethereumChainId": "5",
         "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://noble-testnet-rpc.polkachu.com/"
+            "nobleValidator": "https://rpc.testnet.noble.strange.love"
         },
         "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/en/articles/8565867-secret-phrase-on-dydx-chain",
+            "accountExportLearnMore": "https://help.dydx.exchange",
            "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
         },
         "wallets": {
@@ -186,10 +186,10 @@
      },
      "dydxprotocol-dev-4": {
         "name": "v4 Dev 4",
-         "ethereumChainId": "11155111",
+         "ethereumChainId": "5",
         "dydxChainId": "dydxprotocol-testnet",
         "chainName": "dYdX Chain",
-         "chainLogo": "/dydx-chain.png",
+         "chainLogo": "dydx-chain.png",
         "squidIntegratorId": "dYdX-api",
         "isMainNet": false,
         "tokens": {
@@ -215,11 +215,10 @@
               }
            ],
            "validators": [
-               "https://validator.v4dev4.dydx.exchange"
+               "http://validator.v4dev4.dydx.exchange"
            ],
            "0xsquid": "https://testnet.api.0xsquid.com",
-            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
-            "faucet": "https://faucet.v4dev4.dydx.exchange"
+            "nobleValidator": "https://rpc.testnet.noble.strange.love"
         },
         "links": {
            "tos": "https://dydx.exchange/v4-terms",
@@ -236,7 +235,7 @@
            "governanceLearnMore": "https://help.dydx.exchange",
            "stakingLearnMore": "https://help.dydx.exchange",
            "keplrDashboard": "https://testnet.keplr.app/",
-            "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
+            "accountExportLearnMore": "https://help.dydx.exchange",
            "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
         },
         "wallets": {
@@ -260,10 +259,10 @@
      },
      "dydxprotocol-dev-5": {
         "name": "v4 Dev 5",
-         "ethereumChainId": "11155111",
+         "ethereumChainId": "5",
         "dydxChainId": "dydxprotocol-testnet",
         "chainName": "dYdX Chain",
-         "chainLogo": "/dydx-chain.png",
+         "chainLogo": "dydx-chain.png",
         "squidIntegratorId": "dYdX-api",
         "isMainNet": false,
         "tokens": {
@@ -292,7 +291,7 @@
               "http://18.223.78.50"
            ],
            "0xsquid": "https://testnet.api.0xsquid.com",
-            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/"
+            "nobleValidator": "https://rpc.testnet.noble.strange.love"
         },
         "links": {
            "tos": "https://dydx.exchange/v4-terms",
@@ -309,7 +308,7 @@
            "governanceLearnMore": "https://help.dydx.exchange",
            "stakingLearnMore": "https://help.dydx.exchange",
            "keplrDashboard": "https://testnet.keplr.app/",
-            "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
+            "accountExportLearnMore": "https://help.dydx.exchange",
            "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
         },
         "wallets": {
@@ -333,10 +332,10 @@
      },
      "dydxprotocol-staging": {
         "name": "v4 Staging",
-         "ethereumChainId": "11155111",
+         "ethereumChainId": "5",
         "dydxChainId": "dydxprotocol-testnet",
         "chainName": "dYdX Chain",
-         "chainLogo": "/dydx-chain.png",
+         "chainLogo": "dydx-chain.png",
         "squidIntegratorId": "dYdX-api",
         "isMainNet": false,
         "tokens": {
@@ -366,7 +365,7 @@
               "https://validator.v4staging.dydx.exchange"
            ],
            "0xsquid": "https://testnet.api.squidrouter.com",
-            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/"
+            "nobleValidator": "https://rpc.testnet.noble.strange.love"
         },
         "links": {
            "tos": "https://dydx.exchange/v4-terms",
@@ -384,7 +383,7 @@
            "governanceLearnMore": "https://help.dydx.exchange",
            "stakingLearnMore": "https://help.dydx.exchange",
            "keplrDashboard": "https://testnet.keplr.app/",
-            "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
+            "accountExportLearnMore": "https://help.dydx.exchange",
            "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
         },
         "wallets": {
@@ -408,10 +407,10 @@
      },
      "dydxprotocol-staging-forced-update": {
         "name": "v4 Staging Forced Update",
-         "ethereumChainId": "11155111",
+         "ethereumChainId": "5",
         "dydxChainId": "dydxprotocol-testnet",
         "chainName": "dYdX Chain",
-         "chainLogo": "/dydx-chain.png",
+         "chainLogo": "dydx-chain.png",
         "squidIntegratorId": "dYdX-api",
         "isMainNet": false,
         "tokens": {
@@ -441,7 +440,7 @@
               "https://validator.v4staging.dydx.exchange"
            ],
            "0xsquid": "https://testnet.api.squidrouter.com",
-            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/"
+            "nobleValidator": "https://rpc.testnet.noble.strange.love"
         },
         "links": {
            "tos": "https://dydx.exchange/v4-terms",
@@ -474,17 +473,17 @@
         "apps": {
            "ios": {
               "minimalVersion": "1.0",
-               "build": 40000,
+               "build":40000,
               "url": "https://apps.apple.com/app/dydx/id1564787350"
            }
         }
      },
      "dydxprotocol-staging-west": {
         "name": "v4 Staging West",
-         "ethereumChainId": "11155111",
+         "ethereumChainId": "5",
         "dydxChainId": "dydxprotocol-testnet",
         "chainName": "dYdX Chain",
-         "chainLogo": "/dydx-chain.png",
+         "chainLogo": "dydx-chain.png",
         "squidIntegratorId": "dYdX-api",
         "isMainNet": false,
         "tokens": {
@@ -514,7 +513,7 @@
               "https://validator-uswest1.v4staging.dydx.exchange"
            ],
            "0xsquid": "https://testnet.api.squidrouter.com",
-            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/"
+            "nobleValidator": "https://rpc.testnet.noble.strange.love"
         },
         "links": {
            "tos": "https://dydx.exchange/v4-terms",
@@ -532,7 +531,7 @@
            "governanceLearnMore": "https://help.dydx.exchange",
            "stakingLearnMore": "https://help.dydx.exchange",
            "keplrDashboard": "https://testnet.keplr.app/",
-            "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
+            "accountExportLearnMore": "https://help.dydx.exchange",
            "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
         },
         "wallets": {
@@ -556,10 +555,10 @@
      },
      "dydxprotocol-testnet": {
         "name": "v4 Public Testnet",
-         "ethereumChainId": "11155111",
+         "ethereumChainId": "5",
         "dydxChainId": "dydx-testnet-4",
         "chainName": "dYdX Chain",
-         "chainLogo": "/dydx-chain.png",
+         "chainLogo": "dydx-chain.png",
         "squidIntegratorId": "dYdX-api",
         "isMainNet": false,
         "tokens": {
@@ -580,8 +579,8 @@
         "endpoints": {
            "indexers": [
               {
-                  "api": "https://indexer.v4testnet.dydx.exchange",
-                  "socket": "wss://indexer.v4testnet.dydx.exchange"
+                  "api": "https://dydx-testnet.imperator.co",
+                  "socket": "wss://dydx-testnet.imperator.co"
               }
            ],
            "validators": [
@@ -592,7 +591,7 @@
               "https://dydx-rpc.liquify.com/api=8878132/dydx"
            ],
            "0xsquid": "https://testnet.api.squidrouter.com",
-            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
+            "nobleValidator": "https://rpc.testnet.noble.strange.love",
            "faucet": "https://faucet.v4testnet.dydx.exchange"
         },
         "links": {
@@ -611,7 +610,7 @@
            "governanceLearnMore": "https://help.dydx.exchange",
            "stakingLearnMore": "https://help.dydx.exchange",
            "keplrDashboard": "https://testnet.keplr.app/",
-            "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
+            "accountExportLearnMore": "https://help.dydx.exchange",
            "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
         },
         "wallets": {
@@ -635,10 +634,10 @@
      },
      "dydxprotocol-testnet-dydx": {
         "name": "v4 Public Testnet/dYdX",
-         "ethereumChainId": "11155111",
+         "ethereumChainId": "5",
         "dydxChainId": "dydx-testnet-4",
         "chainName": "dYdX Chain",
-         "chainLogo": "/dydx-chain.png",
+         "chainLogo": "dydx-chain.png",
         "squidIntegratorId": "dYdX-api",
         "isMainNet": false,
         "tokens": {
@@ -667,7 +666,7 @@
               "https://validator.v4testnet.dydx.exchange"
            ],
            "0xsquid": "https://testnet.api.squidrouter.com",
-            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
+            "nobleValidator": "https://rpc.testnet.noble.strange.love",
            "faucet": "https://faucet.v4testnet.dydx.exchange"
         },
         "links": {
@@ -687,7 +686,7 @@
            "governanceLearnMore": "https://help.dydx.exchange",
            "stakingLearnMore": "https://help.dydx.exchange",
            "keplrDashboard": "https://testnet.keplr.app/",
-            "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
+            "accountExportLearnMore": "https://help.dydx.exchange",
            "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
         },
         "wallets": {
@@ -711,10 +710,10 @@
      },
      "dydxprotocol-testnet-nodefleet": {
         "name": "v4 Public Testnet/nodefleet",
-         "ethereumChainId": "11155111",
+         "ethereumChainId": "5",
         "dydxChainId": "dydx-testnet-4",
         "chainName": "dYdX Chain",
-         "chainLogo": "/dydx-chain.png",
+         "chainLogo": "dydx-chain.png",
         "squidIntegratorId": "dYdX-api",
         "isMainNet": false,
         "tokens": {
@@ -735,15 +734,15 @@
         "endpoints": {
            "indexers": [
               {
-                  "api": "https://indexer.v4testnet.dydx.exchange",
-                  "socket": "wss://indexer.v4testnet.dydx.exchange"
+                  "api": "https://dydx-testnet.imperator.co",
+                  "socket": "wss://dydx-testnet.imperator.co"
               }
            ],
            "validators": [
               "https://dydx-testnet.nodefleet.org"
            ],
            "0xsquid": "https://testnet.api.squidrouter.com",
-            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
+            "nobleValidator": "https://rpc.testnet.noble.strange.love",
            "faucet": "https://faucet.v4testnet.dydx.exchange"
         },
         "links": {
@@ -763,7 +762,7 @@
            "governanceLearnMore": "https://help.dydx.exchange",
            "stakingLearnMore": "https://help.dydx.exchange",
            "keplrDashboard": "https://testnet.keplr.app/",
-            "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
+            "accountExportLearnMore": "https://help.dydx.exchange",
            "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
         },
         "wallets": {
@@ -787,10 +786,10 @@
      },
      "dydxprotocol-testnet-kingnodes": {
         "name": "v4 Public Testnet/KingNodes",
-         "ethereumChainId": "11155111",
+         "ethereumChainId": "5",
         "dydxChainId": "dydx-testnet-4",
         "chainName": "dYdX Chain",
-         "chainLogo": "/dydx-chain.png",
+         "chainLogo": "dydx-chain.png",
         "squidIntegratorId": "dYdX-api",
         "isMainNet": false,
         "tokens": {
@@ -811,15 +810,15 @@
         "endpoints": {
            "indexers": [
               {
-                  "api": "https://indexer.v4testnet.dydx.exchange",
-                  "socket": "wss://indexer.v4testnet.dydx.exchange"
+                  "api": "https://dydx-testnet.imperator.co",
+                  "socket": "wss://dydx-testnet.imperator.co"
               }
            ],
            "validators": [
               "https://test-dydx.kingnodes.com"
            ],
            "0xsquid": "https://testnet.api.squidrouter.com",
-            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
+            "nobleValidator": "https://rpc.testnet.noble.strange.love",
            "faucet": "https://faucet.v4testnet.dydx.exchange"
         },
         "links": {
@@ -839,7 +838,7 @@
            "governanceLearnMore": "https://help.dydx.exchange",
            "stakingLearnMore": "https://help.dydx.exchange",
            "keplrDashboard": "https://testnet.keplr.app/",
-            "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
+            "accountExportLearnMore": "https://help.dydx.exchange",
            "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
         },
         "wallets": {
@@ -863,10 +862,10 @@
      },
      "dydxprotocol-testnet-liquify": {
         "name": "v4 Public Testnet/Liquify",
-         "ethereumChainId": "11155111",
+         "ethereumChainId": "5",
         "dydxChainId": "dydx-testnet-4",
         "chainName": "dYdX Chain",
-         "chainLogo": "/dydx-chain.png",
+         "chainLogo": "dydx-chain.png",
         "squidIntegratorId": "dYdX-api",
         "isMainNet": false,
         "tokens": {
@@ -887,15 +886,15 @@
         "endpoints": {
            "indexers": [
               {
-                  "api": "https://indexer.v4testnet.dydx.exchange",
-                  "socket": "wss://indexer.v4testnet.dydx.exchange"
+                  "api": "https://dydx-testnet.imperator.co",
+                  "socket": "wss://dydx-testnet.imperator.co"
               }
            ],
            "validators": [
               "https://dydx-rpc.liquify.com/api=8878132/dydx"
            ],
            "0xsquid": "https://testnet.api.squidrouter.com",
-            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
+            "nobleValidator": "https://rpc.testnet.noble.strange.love",
            "faucet": "https://faucet.v4testnet.dydx.exchange"
         },
         "links": {
@@ -915,7 +914,7 @@
            "governanceLearnMore": "https://help.dydx.exchange",
            "stakingLearnMore": "https://help.dydx.exchange",
            "keplrDashboard": "https://testnet.keplr.app/",
-            "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
+            "accountExportLearnMore": "https://help.dydx.exchange",
            "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
         },
         "wallets": {
@@ -939,10 +938,10 @@
      },
      "dydxprotocol-testnet-polkachu": {
         "name": "v4 Public Testnet/Polkahcu",
-         "ethereumChainId": "11155111",
+         "ethereumChainId": "5",
         "dydxChainId": "dydx-testnet-4",
         "chainName": "dYdX Chain",
-         "chainLogo": "/dydx-chain.png",
+         "chainLogo": "dydx-chain.png",
         "squidIntegratorId": "dYdX-api",
         "isMainNet": false,
         "tokens": {
@@ -963,15 +962,15 @@
         "endpoints": {
            "indexers": [
               {
-                  "api": "https://indexer.v4testnet.dydx.exchange",
-                  "socket": "wss://indexer.v4testnet.dydx.exchange"
+                  "api": "https://dydx-testnet.imperator.co",
+                  "socket": "wss://dydx-testnet.imperator.co"
               }
            ],
            "validators": [
               "https://dydx-testnet-rpc.polkachu.com/"
            ],
            "0xsquid": "https://testnet.api.squidrouter.com",
-            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
+            "nobleValidator": "https://rpc.testnet.noble.strange.love",
            "faucet": "https://faucet.v4testnet.dydx.exchange"
         },
         "links": {
@@ -1006,10 +1005,10 @@
      },
      "dydxprotocol-testnet-bware": {
         "name": "v4 Public Testnet/BWare",
-         "ethereumChainId": "11155111",
+         "ethereumChainId": "5",
         "dydxChainId": "dydx-testnet-4",
         "chainName": "dYdX Chain",
-         "chainLogo": "/dydx-chain.png",
+         "chainLogo": "dydx-chain.png",
         "squidIntegratorId": "dYdX-api",
         "isMainNet": false,
         "tokens": {
@@ -1030,15 +1029,15 @@
         "endpoints": {
            "indexers": [
               {
-                  "api": "https://indexer.v4testnet.dydx.exchange",
-                  "socket": "wss://indexer.v4testnet.dydx.exchange"
+                  "api": "https://dydx-testnet.imperator.co",
+                  "socket": "wss://dydx-testnet.imperator.co"
               }
            ],
            "validators": [
               "https://dydx-testnet-full-rpc.public.blastapi.io/"
            ],
            "0xsquid": "https://testnet.api.squidrouter.com",
-            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
+            "nobleValidator": "https://rpc.testnet.noble.strange.love",
            "faucet": "https://faucet.v4testnet.dydx.exchange"
         },
         "links": {
@@ -1085,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": {
@@ -1127,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": "[HTTP link to reduce-only learn more, can be null]",
+            "reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
            "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,360 +1,454 @@
 {
-  "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/"
-  }
-}
+    "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/"
+    }
+ }
@@ -1,230 +0,0 @@
-<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 { lazy, Suspense } from 'react';
+import { Suspense } from 'react';
 import { Navigate, Route, Routes } from 'react-router-dom';
 import styled, { AnyStyledComponent, css } from 'styled-components';
 import { WagmiConfig } from 'wagmi';
@@ -16,7 +16,6 @@ import {
 } from '@/hooks';
 import { DydxProvider } from '@/hooks/useDydxClient';
 import { AccountsProvider } from '@/hooks/useAccounts';
-import { AppThemeProvider } from '@/hooks/useAppTheme';
 import { DialogAreaProvider, useDialogArea } from '@/hooks/useDialogArea';
 import { LocaleProvider } from '@/hooks/useLocaleSeparators';
 import { NotificationsProvider } from '@/hooks/useNotifications';
@@ -26,6 +25,16 @@ import { SubaccountProvider } from '@/hooks/useSubaccount';

 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';
@@ -36,24 +45,12 @@ import { GlobalCommandDialog } from '@/views/dialogs/GlobalCommandDialog';
 import { config } from '@/lib/wagmi';

 import { breakpoints } from '@/styles';
-import { GlobalStyle } from '@/styles/globalStyle';
 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 = () => {
@@ -68,52 +65,49 @@ const Content = () => {
  const { chainTokenLabel } = useTokenConfigs();

  return (
-    <>
-      <GlobalStyle />
-      <Styled.Content isShowingHeader={isShowingHeader} isShowingFooter={isShowingFooter}>
-        {isNotTablet && <HeaderDesktop />}
+    <Styled.Content isShowingHeader={isShowingHeader} isShowingFooter={isShowingFooter}>
+      {isNotTablet && <HeaderDesktop />}

-        <Styled.Main>
-          <Suspense fallback={<LoadingSpace id="main" />}>
-            <Routes>
-              <Route path={AppRoute.Trade}>
-                <Route path=":market" element={<TradePage />} />
-                <Route path={AppRoute.Trade} element={<TradePage />} />
-              </Route>
+      <Styled.Main>
+        <Suspense fallback={null}>
+          <Routes>
+            <Route path={AppRoute.Trade}>
+              <Route path=":market" element={<TradePage />} />
+              <Route path={AppRoute.Trade} element={<TradePage />} />
+            </Route>

-              <Route path={AppRoute.Markets} element={<MarketsPage />} />
-              <Route path={`/${chainTokenLabel}`} element={<RewardsPage />} />
-              {isTablet && (
-                <>
-                  <Route path={AppRoute.Alerts} element={<AlertsPage />} />
-                  <Route path={AppRoute.Profile} element={<ProfilePage />} />
-                  <Route path={`${AppRoute.Settings}/*`} element={<SettingsPage />} />
-                </>
-              )}
+            <Route path={AppRoute.Markets} element={<MarketsPage />} />
+            <Route path={`/${chainTokenLabel}`} element={<RewardsPage />} />
+            {isTablet && (
+              <>
+                <Route path={AppRoute.Alerts} element={<AlertsPage />} />
+                <Route path={AppRoute.Profile} element={<ProfilePage />} />
+                <Route path={`${AppRoute.Settings}/*`} element={<SettingsPage />} />
+              </>
+            )}

-              <Route element={<GuardedMobileRoute />}>
-                <Route path={`${AppRoute.Portfolio}/*`} element={<PortfolioPage />} />
-              </Route>
+            <Route element={<GuardedMobileRoute />}>
+              <Route path={`${AppRoute.Portfolio}/*`} element={<PortfolioPage />} />
+            </Route>

-              <Route path={AppRoute.Terms} element={<TermsOfUsePage />} />
-              <Route path={AppRoute.Privacy} element={<PrivacyPolicyPage />} />
+            <Route path={AppRoute.Terms} element={<TermsOfUsePage />} />
+            <Route path={AppRoute.Privacy} element={<PrivacyPolicyPage />} />

-              <Route path="*" element={<Navigate to={DEFAULT_TRADE_ROUTE} replace />} />
-            </Routes>
-          </Suspense>
-        </Styled.Main>
+            <Route path="*" element={<Navigate to={DEFAULT_TRADE_ROUTE} replace />} />
+          </Routes>
+        </Suspense>
+      </Styled.Main>

-        {isTablet ? <FooterMobile /> : <FooterDesktop />}
+      {isTablet ? <FooterMobile /> : <FooterDesktop />}

-        <Styled.NotificationsToastArea />
+      <Styled.NotificationsToastArea />

-        <Styled.DialogArea ref={setDialogArea}>
-          <DialogManager />
-        </Styled.DialogArea>
+      <Styled.DialogArea ref={setDialogArea}>
+        <DialogManager />
+      </Styled.DialogArea>

-        <GlobalCommandDialog />
-      </Styled.Content>
-    </>
+      <GlobalCommandDialog />
+    </Styled.Content>
  );
 };

@@ -136,7 +130,6 @@ const providers = [
  wrapProvider(LocalNotificationsProvider),
  wrapProvider(NotificationsProvider),
  wrapProvider(DialogAreaProvider),
-  wrapProvider(AppThemeProvider),
 ];

 const App = () => {
@@ -1,26 +0,0 @@
-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.',
-    },
-  ],
-};
@@ -1,129 +0,0 @@
-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,7 +45,6 @@ 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',
@@ -72,13 +71,8 @@ export const AssetIcon = ({
 }: {
  symbol?: Nullable<string>;
  className?: string;
-}) => (
-  <Styled.Img
-    src={isAssetSymbol(symbol) ? assetIcons[symbol] : '/currencies/unavailable.png'}
-    className={className}
-    alt={symbol}
-  />
-);
+}) =>
+  isAssetSymbol(symbol) ? <Styled.Img src={assetIcons[symbol]} className={className} /> : null;

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

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

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

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

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

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

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

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

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

 export const AttachedExpandingSection = styled.section`
  ${layoutMixins.contentSectionAttached}
+  ${layoutMixins.expandingColumnWithHeader}
  gap: var(--border-width);
 `;
@@ -14,7 +14,7 @@ export const DiffArrowStory: Story<DiffArrowProps> = (args) => (

 DiffArrowStory.argTypes = {
  direction: {
-    options: ['left', 'right', 'up', 'down'],
+    options: ['left', 'right'],
    control: { type: 'select' },
    defaultValue: 'right',
  },
@@ -10,7 +10,7 @@ type ElementProps = {

 type StyleProps = {
  className?: string;
-  direction?: 'right' | 'left' | 'up' | 'down';
+  direction?: 'right' | 'left';
 };

 export type DiffArrowProps = ElementProps & StyleProps;
@@ -57,11 +57,5 @@ Styled.DiffArrowContainer = styled.span<DiffArrowProps>`
      left: css`
        transform: scaleX(-1);
      `,
-      up: css`
-        transform: rotate(-90deg);
-      `,
-      down: css`
-        transform: rotate(90deg);
-      `
    }[direction || 'right'])}
 `;
@@ -24,6 +24,7 @@ import {
  CoinsIcon,
  CommentIcon,
  CopyIcon,
+  CubeIcon,
  DepositIcon,
  DepthChartIcon,
  DiscordIcon,
@@ -44,7 +45,6 @@ import {
  MenuIcon,
  MigrateIcon,
  MintscanIcon,
-  MoonIcon,
  OrderbookIcon,
  OrderCanceledIcon,
  OrderFilledIcon,
@@ -55,19 +55,16 @@ import {
  OverviewIcon,
  PencilIcon,
  PlayIcon,
-  PlusIcon,
  PositionsIcon,
  PriceChartIcon,
  PrivacyIcon,
  QrIcon,
-  RewardStarIcon,
  SearchIcon,
  SendIcon,
  ShareIcon,
  ShowIcon,
  TogglesMenuIcon,
  StarIcon,
-  SunIcon,
  TerminalIcon,
  TradeIcon,
  TransferIcon,
@@ -101,6 +98,7 @@ export enum IconName {
  Coins = 'Coins',
  Comment = 'Comment',
  Copy = 'Copy',
+  Cube = 'Cube',
  Deposit = 'Deposit',
  DepthChart = 'DepthChart',
  Discord = 'Discord',
@@ -121,7 +119,6 @@ export enum IconName {
  Menu = 'Menu',
  Migrate = 'Migrate',
  Mintscan = 'Mintscan',
-  Moon = 'Moon',
  Onboarding = 'Onboarding',
  Orderbook = 'OrderbookIcon',
  OrderCanceled = 'OrderCanceled',
@@ -133,18 +130,15 @@ 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',
  Show = 'Show',
  Star = 'Star',
-  Sun = 'Sun',
  Terminal = 'Terminal',
  TogglesMenu = 'TogglesMenu',
  Trade = 'Trade',
@@ -179,6 +173,7 @@ const icons = {
  [IconName.Coins]: CoinsIcon,
  [IconName.Comment]: CommentIcon,
  [IconName.Copy]: CopyIcon,
+  [IconName.Cube]: CubeIcon,
  [IconName.Deposit]: DepositIcon,
  [IconName.DepthChart]: DepthChartIcon,
  [IconName.Discord]: DiscordIcon,
@@ -199,7 +194,6 @@ const icons = {
  [IconName.Menu]: MenuIcon,
  [IconName.Migrate]: MigrateIcon,
  [IconName.Mintscan]: MintscanIcon,
-  [IconName.Moon]: MoonIcon,
  [IconName.Orderbook]: OrderbookIcon,
  [IconName.OrderCanceled]: OrderCanceledIcon,
  [IconName.OrderFilled]: OrderFilledIcon,
@@ -210,18 +204,15 @@ 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,
  [IconName.Show]: ShowIcon,
  [IconName.Star]: StarIcon,
-  [IconName.Sun]: SunIcon,
  [IconName.Terminal]: TerminalIcon,
  [IconName.TogglesMenu]: TogglesMenuIcon,
  [IconName.Trade]: TradeIcon,
@@ -10,7 +10,7 @@ import {
  USD_DECIMALS,
 } from '@/constants/numbers';

-import { BIG_NUMBERS } from '@/lib/numbers';
+import { BIG_NUMBERS, MustBigNumber } from '@/lib/numbers';
 import { useLocaleSeparators } from '@/hooks';

 export enum InputType {
@@ -29,38 +29,31 @@ 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;
 };

-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 type InputProps = ElementProps & StyleProps;

 export const Input = forwardRef<HTMLInputElement, InputProps>(
  (
@@ -145,7 +138,6 @@ 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}
@@ -169,7 +161,7 @@ export const Input = forwardRef<HTMLInputElement, InputProps>(
                ? undefined
                : Number(formattedValue.replace(',', '.'));

-              onInput?.({ value, floatValue, formattedValue, ...e });
+              onInput?.({ value, floatValue, formattedValue });
            }}
            // Native
            disabled={disabled}
@@ -198,6 +190,7 @@ Styled.InputContainer = styled.div`
  border-radius: inherit;

  input {
+    user-select: all;
    flex: 1;
    width: 100%;
  }
@@ -1,11 +1,11 @@
 import styled, { type AnyStyledComponent } from 'styled-components';

 import { RiskLevels } from '@/constants/abacus';
+import { UsageColorFromRiskLevel } from '@/styles/colors';

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

 import { abacusHelper } from '@/lib/abacus';
-import { UsageColorFromRiskLevel } from '@/lib/styles';

 type ElementProps = {
  value: number;
@@ -4,10 +4,9 @@ import { Link } from 'react-router-dom';
 import { Icon, IconName } from '@/components/Icon';

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

 type PanelProps = {
-  slotHeaderContent?: React.ReactNode;
+  slotHeaderContent?: string;
  slotHeader?: React.ReactNode;
  slotRight?: React.ReactNode;
  children?: React.ReactNode;
@@ -68,12 +67,6 @@ 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);
@@ -47,7 +47,7 @@ Styled.Root = styled(Root)`
  --switch-thumb-backgroundColor: var(--color-layer-6);

  --switch-active-backgroundColor: var(--color-accent);
-  --switch-active-thumb-backgroundColor: ${({ theme }) => theme.switchThumbActiveBackground};
+  --switch-active-thumb-backgroundColor: var(--color-white);

  position: relative;
  width: var(--switch-width);
@@ -33,20 +33,16 @@ import {

 import { useAsyncList } from 'react-stately';

-import { useBreakpoints, useStringGetter } from '@/hooks';
+import { useBreakpoints } 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';
@@ -68,7 +64,7 @@ export type TableItem<TableRowData> = {
  onSelect?: (key: TableRowData) => void;
 };

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

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

  // collection,
@@ -141,8 +135,6 @@ 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 enableViewMore = numRowsToShow !== undefined;

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

-          <TableBody items={enableViewMore ? list.items.slice(0, numRowsToShow) : list.items}>
+          <TableBody items={list.items}>
            {(item) => (
              <Row key={getRowKey(item)}>
                {(columnKey) => (
@@ -280,8 +269,6 @@ 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;
@@ -291,7 +278,7 @@ const TableRoot = <TableRowData extends object | CustomRowConfig, TableRowKey ex
  withScrollSnapColumns?: boolean;
  withScrollSnapRows?: boolean;
 }) => {
-  const { selectionMode, selectionBehavior, numColumns, onViewMoreClick } = props;
+  const { selectionMode, selectionBehavior } = props;

  const state = useTableState<TableRowData>({
    ...props,
@@ -352,7 +339,6 @@ 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) =>
@@ -398,9 +384,6 @@ const TableRoot = <TableRowData extends object | CustomRowConfig, TableRowKey ex
            </TableRow>
          )
        )}
-        {onViewMoreClick ? (
-          <ViewMoreRow colSpan={numColumns} onClick={onViewMoreClick} />
-        ) : undefined}
      </TableBodyRowGroup>
    </Styled.Table>
  );
@@ -434,7 +417,6 @@ const TableBodyRowGroup = ({
  children,
  withGradientCardRows,
  withInnerBorders,
-  withOuterBorder,
 }: { children: React.ReactNode } & StyleProps) => {
  const { rowGroupProps } = useTableRowGroup();

@@ -443,7 +425,6 @@ const TableBodyRowGroup = ({
      {...rowGroupProps}
      withGradientCardRows={withGradientCardRows}
      withInnerBorders={withInnerBorders}
-      withOuterBorder={withOuterBorder}
    >
      {children}
    </Styled.Tbody>
@@ -510,23 +491,6 @@ 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,
@@ -698,7 +662,7 @@ Styled.Empty = styled.div<{ withOuterBorder: boolean }>`

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

  color: var(--color-text-0);
@@ -906,18 +870,6 @@ 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;
      }
@@ -972,15 +924,3 @@ 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,7 +21,6 @@ export type TabItem<TabItemsValue> = {
  content?: React.ReactNode;
  subitems?: TabItem<TabItemsValue>[];
  customTrigger?: ReactNode;
-  asChild?: boolean;
 };

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

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

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

  box-shadow: none;
 `;
@@ -27,8 +27,9 @@ 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;
@@ -2,9 +2,9 @@ import styled, { type AnyStyledComponent } from 'styled-components';

 import { type RiskLevels } from '@/constants/abacus';

-import { abacusHelper } from '@/lib/abacus';
-import { UsageColorFromRiskLevel } from '@/lib/styles';
+import { UsageColorFromRiskLevel } from '@/styles/colors';

+import { abacusHelper } from '@/lib/abacus';
 type ElementProps = {
  value: number;
 };
@@ -110,7 +110,12 @@ Styled.Abbr = styled.abbr`

 Styled.Content = styled(Content)`
  --tooltip-backgroundColor: var(--color-layer-4);
-  --tooltip-backgroundColor: ${({ theme }) => theme.tooltipBackground};
+  --tooltip-backgroundColor: hsl(
+    var(--layer-base-hue),
+    var(--layer-base-saturation),
+    calc(var(--layer-base-lightness) + 4%),
+    0.66
+  );

  ${popoverMixins.popover}
  --popover-backgroundColor: var(--tooltip-backgroundColor);
@@ -27,7 +27,12 @@ Styled.TooltipContent = styled.aside<{ accentColor?: string }>`

  ${popoverMixins.popover}
  --popover-radius: 0.5rem;
-  --popover-background-color: ${({ theme }) => theme.popoverBackground};
+  --popover-background-color: hsl(
+    var(--layer-base-hue),
+    var(--layer-base-saturation),
+    calc(var(--layer-base-lightness)),
+    0.9
+  );
  --popover-backdrop-filter: saturate(120%) blur(12px);

  display: grid;
@@ -1,33 +1,26 @@
-import React, { PropsWithChildren, useContext, useState } from 'react';
+import React, { useContext, useState } from 'react';

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

 export const XYChartWithPointerEvents = ({
-  onPointerMove,
-  onPointerUp,
-  onPointerPressedChange,
-  ...props
+  onPointerMove, onPointerUp, onPointerPressedChange, ...props
 }: {
-  onPointerMove?: (point: Point | EventHandlerParams<object>) => void;
-  onPointerUp?: (point: Point | EventHandlerParams<object>) => void;
+  onPointerMove?: (point: Point) => void;
+  onPointerUp?: (point: Point) => void;
  onPointerPressedChange?: (isPointerPressed: boolean) => void;
-} & PropsWithChildren<Parameters<typeof XYChart>[0]>) => {
+} & React.PropsWithChildren<Parameters<typeof XYChart>>) => {
  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),
    });

@@ -36,13 +29,15 @@ 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.model.TransferInputField;
+export const TransferInputField = Abacus.exchange.dydx.abacus.state.modal.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.model.TradeInputField;
+export const TradeInputField = Abacus.exchange.dydx.abacus.state.modal.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.model.ClosePositionInputField;
+  Abacus.exchange.dydx.abacus.state.modal.ClosePositionInputField;

 const closePositionInputFields = [...ClosePositionInputField.values()] as const;
 export type ClosePositionInputFields = (typeof closePositionInputFields)[number];
@@ -282,22 +282,13 @@ export const TRADE_TYPES: Record<
  [AbacusOrderType.takeProfitMarket.rawValue]: TradeTypes.TAKE_PROFIT_MARKET,

  [AbacusOrderType.liquidated.name]: null,
-  [AbacusOrderType.liquidated.rawValue]: null,
+  [AbacusOrderType.liquidation.name]: null,

  [AbacusOrderType.liquidation.name]: null,
  [AbacusOrderType.liquidation.rawValue]: null,

  [AbacusOrderType.trailingStop.name]: null,
  [AbacusOrderType.trailingStop.rawValue]: null,
-
-  [AbacusOrderType.offsetting.name]: null,
-  [AbacusOrderType.offsetting.rawValue]: null,
-
-  [AbacusOrderType.deleveraged.name]: null,
-  [AbacusOrderType.deleveraged.rawValue]: null,
-
-  [AbacusOrderType.finalSettlement.name]: null,
-  [AbacusOrderType.finalSettlement.rawValue]: null,
 };

 // Custom types involving Abacus
@@ -316,9 +307,3 @@ export type NetworkConfig = Partial<{
 }>;

 export type ConnectNetworkEvent = CustomEvent<Partial<NetworkConfig>>;
-
-export type PerpetualMarketOrderbookLevel = OrderbookLine & {
-  side?: 'ask' | 'bid';
-  mine: number;
-  key: string;
-};
@@ -96,7 +96,6 @@ export type AnalyticsEventData<T extends AnalyticsEvent> =
        elapsedTime?: number;
        blockHeight?: number;
        indexerBlockHeight?: number;
-        trailingBlocks?: number;
      }
    : // Navigation
    T extends AnalyticsEvent.NavigatePage
@@ -1,40 +0,0 @@
-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;
-};
@@ -25,5 +25,30 @@ 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',
+  'XRP-USD',
+  'UNI-USD',
+  'ADA-USD',
+  'TRX-USD',
+  'OP-USD',
+  'MKR-USD',
+  'DOGE-USD',
+  'SHIB-USD',
+  'COMP-USD',
+  'LDO-USD',
+  'NEAR-USD',
+  'APT-USD',
+  'SUI-USD',
+  'DOT-USD',
+  'ETC-USD',
+];
@@ -87,8 +87,6 @@ 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,
@@ -124,15 +122,9 @@ 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;
@@ -10,7 +10,6 @@ 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;

@@ -19,7 +18,3 @@ 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,15 +0,0 @@
-/**
- * @description Orderbook display constants
- */
-export const ORDERBOOK_MAX_ROWS_PER_SIDE = 30;
-export const ORDERBOOK_ANIMATION_DURATION = 400;
-
-/**
- * @description Orderbook pixel constants
- * @note ORDERBOOK_ROW_HEIGHT should be a divisor of ORDERBOOK_HEIGHT so that we do not have a partial row at the bottom
- * @note To change the Orderbook width, --orderbook-trades-width and ORDERBOOK_WIDTH must be changed to the same value
- */
-export const ORDERBOOK_HEIGHT = 800;
-export const ORDERBOOK_WIDTH = 300;
-export const ORDERBOOK_ROW_HEIGHT = 24;
-export const ORDERBOOK_ROW_PADDING_RIGHT = 8;
@@ -1,70 +0,0 @@
-export enum ColorToken {
-  Black = '#000000',
-  White = '#FFFFFF',
-
-  LightGray0 = '#FAFAFA',
-  LightGray1 = '#F7F8FA',
-  LightGray2 = '#FAFAFD',
-  LightGray3 = '#F5F5F5',
-  LightGray4 = '#EDF0F2',
-  LightGray5 = '#EDEDED',
-  LightGray6 = '#E9ECEE',
-  LightGray7 = '#E6E6E6',
-  LightGray8 = '#DBDBDB',
-  LightGray9 = '#D5DADF',
-  LightGray10 = '#D1D9E0',
-
-  MediumGray0 = '#CACACE',
-  MediumGray1 = '#C2CBD3',
-
-  DarkGray0 = '#888891',
-  DarkGray1 = '#737373',
-  DarkGray2 = '#56565C',
-  DarkGray3 = '#4B4B4B',
-  DarkGray4 = '#494950',
-  DarkGray5 = '#3B3B3F',
-  DarkGray6 = '#303033',
-  DarkGray7 = '#313135',
-  DarkGray8 = '#292929',
-  DarkGray9 = '#23232F',
-  DarkGray10 = '#212124',
-  DarkGray11 = '#18181B',
-  DarkGray12 = '#181818',
-  DarkGray13 = '#0C0C0D',
-
-  GrayBlue0 = '#464659',
-  GrayBlue1 = '#38384D',
-  GrayBlue2 = '#303045',
-  GrayBlue3 = '#29293D',
-  GrayBlue4 = '#212131',
-  GrayBlue5 = '#181825',
-  GrayBlue6 = '#101018',
-  GrayBlue7 = '#08080C',
-
-  GrayPurple0 = '#DFDADF',
-  GrayPurple1 = '#C8C7D8',
-  GrayPurple2 = '#807E98',
-
-  Purple0 = '#7774FF',
-  Purple1 = '#6966FF',
-
-  Green0 = '#1AFFB9',
-  Green1 = '#3ED9A4',
-  Green2 = '#2CCC98',
-  Green3 = '#3EB68A',
-
-  Yellow0 = '#FFCC48',
-  Yellow1 = '#FFB647',
-
-  Red0 = '#FF5C5C',
-  Red1 = '#E76565',
-  Red2 = '#E45555',
-}
-
-/** Maps opacity to corresponding hex value */
-export enum OpacityToken {
-  Opacity16 = '29',
-  Opacity20 = '33',
-  Opacity66 = 'A8',
-  Opacity90 = 'E6',
-}
@@ -1,77 +0,0 @@
-export type ThemeColors = LayerColors &
-  BorderColors &
-  TextColors &
-  GradientColors &
-  AccentColors &
-  StatusColors &
-  DirectionalColors &
-  RiskColors &
-  IconColors &
-  ComponentColors;
-
-type LayerColors = {
-  layer0: string;
-  layer1: string;
-  layer2: string;
-  layer3: string;
-  layer4: string;
-  layer5: string;
-  layer6: string;
-  layer7: string;
-};
-
-type BorderColors = {
-  borderDefault: string;
-  borderDestructive: string;
-  borderButton: string;
-};
-
-type TextColors = {
-  textPrimary: string;
-  textSecondary: string;
-  textTertiary: string;
-};
-
-type GradientColors = {
-  gradientBase0: string;
-  gradientBase1: string;
-};
-
-type AccentColors = {
-  accent: string;
-  accentFaded: string;
-  favorite: string;
-};
-
-type StatusColors = {
-  success: string;
-  warning: string;
-  error: string;
-};
-
-type DirectionalColors = {
-  positive: string;
-  negative: string;
-  positiveFaded: string;
-  negativeFaded: string;
-};
-
-type RiskColors = {
-  riskLow: string;
-  riskMedium: string;
-  riskHigh: string;
-};
-
-type IconColors = {
-  logoFill: string;
-  profileYellow: string;
-  profileRed: string;
-};
-
-type ComponentColors = {
-  inputBackground: string;
-  popoverBackground: string;
-  switchThumbActiveBackground: string;
-  toggleBackground: string;
-  tooltipBackground: string;
-};
@@ -1,10 +1,6 @@
 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,10 +5,6 @@ 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 }),
@@ -1,4 +0,0 @@
-export * from './useCenterOrderbook';
-export * from './useSpreadRowScrollListener';
-export * from './useDrawOrderbook';
-export * from './useOrderbookValues';
@@ -1,22 +0,0 @@
-import { useEffect, type RefObject } from 'react';
-
-type Props = {
-  marketId: string;
-  orderbookRef: RefObject<HTMLDivElement>;
-};
-
-/**
- * @description Center Orderbook on load and market change
- * Assumed that the two sides are the same height
- */
-export const useCenterOrderbook = ({ marketId, orderbookRef }: Props) => {
-  const orderbookEl = orderbookRef.current;
-  const { clientHeight, scrollHeight } = orderbookEl ?? {};
-  const shouldScroll = scrollHeight && clientHeight && scrollHeight > clientHeight;
-
-  useEffect(() => {
-    if (orderbookEl && shouldScroll) {
-      orderbookEl.scrollTo({ top: (scrollHeight - clientHeight) / 2 });
-    }
-  }, [shouldScroll, marketId]);
-};
@@ -1,373 +0,0 @@
-import { useEffect, useMemo, useRef } from 'react';
-import { shallowEqual, useSelector } from 'react-redux';
-
-import type { PerpetualMarketOrderbookLevel } from '@/constants/abacus';
-import { SMALL_USD_DECIMALS, TOKEN_DECIMALS } from '@/constants/numbers';
-
-import {
-  ORDERBOOK_ANIMATION_DURATION,
-  ORDERBOOK_HEIGHT,
-  ORDERBOOK_ROW_HEIGHT,
-  ORDERBOOK_ROW_PADDING_RIGHT,
-  ORDERBOOK_WIDTH,
-} from '@/constants/orderbook';
-
-import { getCurrentMarketConfig, getCurrentMarketOrderbookMap } from '@/state/perpetualsSelectors';
-import { getAppTheme } from '@/state/configsSelectors';
-
-import { MustBigNumber } from '@/lib/numbers';
-
-import {
-  getHistogramXValues,
-  getRektFromIdx,
-  getXByColumn,
-  getYForElements,
-} from '@/lib/orderbookHelpers';
-import { useAppThemeContext } from '../useAppTheme';
-
-type ElementProps = {
-  data: Array<PerpetualMarketOrderbookLevel | undefined>;
-  histogramRange: number;
-  side: PerpetualMarketOrderbookLevel['side'];
-};
-
-type StyleProps = {
-  histogramSide: 'left' | 'right';
-};
-
-enum OrderbookRowAnimationType {
-  REMOVE,
-  NEW,
-  NONE,
-}
-
-export const useDrawOrderbook = ({
-  data,
-  histogramRange,
-  histogramSide,
-  side,
-}: ElementProps & StyleProps) => {
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-  const canvas = canvasRef.current;
-  const currentOrderbookMap = useSelector(getCurrentMarketOrderbookMap, shallowEqual);
-  const { stepSizeDecimals = TOKEN_DECIMALS, tickSizeDecimals = SMALL_USD_DECIMALS } =
-    useSelector(getCurrentMarketConfig, shallowEqual) || {};
-  const prevData = useRef<typeof data>(data);
-  const theme = useAppThemeContext();
-
-  /**
-   * Scale canvas using device pixel ratio to unblur drawn text
-   * @url https://stackoverflow.com/questions/15661339/how-do-i-fix-blurry-text-in-my-html5-canvas/65124939#65124939
-   * @returns adjusted canvas width/height/rowHeight used in coordinates for drawing
-   **/
-  const { canvasWidth, canvasHeight, rowHeight } = useMemo(() => {
-    const ratio = window.devicePixelRatio || 1;
-
-    if (!canvas) {
-      return {
-        canvasWidth: ORDERBOOK_WIDTH / devicePixelRatio,
-        canvasHeight: ORDERBOOK_HEIGHT / devicePixelRatio,
-        rowHeight: ORDERBOOK_ROW_HEIGHT / devicePixelRatio,
-      };
-    }
-
-    const ctx = canvas.getContext('2d');
-    canvas.width = canvas.offsetWidth * ratio;
-    canvas.height = canvas.offsetHeight * ratio;
-
-    if (ctx) {
-      ctx.scale(ratio, ratio);
-      ctx.font = '12px Satoshi';
-      ctx.textAlign = 'right';
-      ctx.textBaseline = 'middle';
-      ctx.imageSmoothingQuality = 'high';
-    }
-
-    return {
-      canvasWidth: canvas.width / ratio,
-      canvasHeight: canvas.height / ratio,
-      rowHeight: ORDERBOOK_ROW_HEIGHT,
-    };
-  }, [canvas]);
-
-  const drawBars = ({
-    barType,
-    ctx,
-    depthOrSizeValue,
-    gradientMultiplier,
-    histogramAccentColor,
-    histogramSide,
-    idx,
-  }: {
-    barType: 'depth' | 'size';
-    ctx: CanvasRenderingContext2D;
-    depthOrSizeValue: number;
-    gradientMultiplier: number;
-    histogramAccentColor: string;
-    histogramSide: 'left' | 'right';
-    idx: number;
-  }) => {
-    const { x1, x2, y1, y2 } = getRektFromIdx({
-      idx,
-      rowHeight,
-      canvasWidth,
-      canvasHeight,
-      side,
-    });
-
-    // X values
-    const maxHistogramBarWidth = x2 - x1 - (barType === 'size' ? 8 : 2);
-    const barWidth = depthOrSizeValue
-      ? Math.min((depthOrSizeValue / histogramRange) * maxHistogramBarWidth, maxHistogramBarWidth)
-      : 0;
-
-    const { gradient, bar } = getHistogramXValues({
-      barWidth,
-      canvasWidth,
-      gradientMultiplier,
-      histogramSide,
-    });
-
-    // Gradient
-    let linearGradient;
-
-    try {
-      linearGradient = ctx.createLinearGradient(gradient.x1, y1, gradient.x2, y2);
-      linearGradient.addColorStop(0, histogramAccentColor);
-      linearGradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
-      ctx.fillStyle = linearGradient;
-    } catch (err) {
-      ctx.fillStyle = 'rgba(0, 0, 0, 0)';
-    }
-
-    ctx.beginPath();
-
-    // Bar
-    const { bar: y } = getYForElements({ y: y1, rowHeight });
-
-    if (ctx.roundRect) {
-      ctx.roundRect(
-        bar.x1,
-        y,
-        bar.x2,
-        rowHeight - 2,
-        histogramSide === 'right' ? [2, 0, 0, 2] : [0, 2, 2, 0]
-      );
-    } else {
-      ctx.rect(bar.x1, y, bar.x2, rowHeight - 2);
-    }
-
-    ctx.fill();
-  };
-
-  const drawText = ({
-    animationType = OrderbookRowAnimationType.NONE,
-    ctx,
-    idx,
-    mine,
-    price,
-    size,
-  }: {
-    animationType?: OrderbookRowAnimationType;
-    ctx: CanvasRenderingContext2D;
-    idx: number;
-    mine?: number;
-    price?: number;
-    size?: number;
-  }) => {
-    const { y1 } = getRektFromIdx({
-      idx,
-      rowHeight,
-      canvasWidth,
-      canvasHeight,
-      side,
-    });
-
-    const { text: y } = getYForElements({ y: y1, rowHeight });
-
-    let textColor: string;
-    let updatedTextColor: string | undefined;
-
-    switch (animationType) {
-      case OrderbookRowAnimationType.REMOVE: {
-        textColor = theme.textSecondary;
-        break;
-      }
-
-      case OrderbookRowAnimationType.NEW: {
-        updatedTextColor = side === 'bid' ? theme.positive : theme.negative;
-        textColor = theme.textPrimary;
-        break;
-      }
-
-      default: {
-        textColor = theme.textPrimary;
-        break;
-      }
-    }
-
-    // Size text
-    if (size) {
-      ctx.fillStyle = updatedTextColor ?? textColor;
-      ctx.fillText(
-        MustBigNumber(size).toFixed(stepSizeDecimals ?? TOKEN_DECIMALS),
-        getXByColumn({ canvasWidth, colIdx: 0 }) - ORDERBOOK_ROW_PADDING_RIGHT,
-        y
-      );
-    }
-
-    // Price text
-    if (price) {
-      ctx.fillStyle = textColor;
-      ctx.fillText(
-        MustBigNumber(price).toFixed(tickSizeDecimals ?? SMALL_USD_DECIMALS),
-        getXByColumn({ canvasWidth, colIdx: 1 }) - ORDERBOOK_ROW_PADDING_RIGHT,
-        y
-      );
-    }
-
-    // Mine text
-    if (mine) {
-      ctx.fillStyle = textColor;
-      ctx.fillText(
-        MustBigNumber(mine).toFixed(stepSizeDecimals ?? TOKEN_DECIMALS),
-        getXByColumn({ canvasWidth, colIdx: 2 }) - ORDERBOOK_ROW_PADDING_RIGHT,
-        y
-      );
-    }
-  };
-
-  const drawOrderbookRow = ({
-    ctx,
-    idx,
-    rowToRender,
-    animationType = OrderbookRowAnimationType.NONE,
-  }: {
-    ctx: CanvasRenderingContext2D;
-    idx: number;
-    rowToRender?: PerpetualMarketOrderbookLevel;
-    animationType?: OrderbookRowAnimationType;
-  }) => {
-    if (!rowToRender) return;
-    const { depth, mine, price, size } = rowToRender;
-    const histogramAccentColor = side === 'bid' ? theme.positiveFaded : theme.negativeFaded;
-
-    // Depth Bar
-    if (depth) {
-      drawBars({
-        barType: 'depth',
-        ctx,
-        depthOrSizeValue: depth,
-        gradientMultiplier: 1.3,
-        histogramAccentColor,
-        histogramSide,
-        idx,
-      });
-    }
-
-    // Size Bar
-    drawBars({
-      barType: 'size',
-      ctx,
-      depthOrSizeValue: size,
-      gradientMultiplier: 5,
-      histogramAccentColor,
-      histogramSide,
-      idx,
-    });
-
-    // Size, Price, Mine
-    drawText({
-      animationType,
-      ctx,
-      idx,
-      mine,
-      price,
-      size,
-    });
-  };
-
-  // Update histograms and row contents on data change
-  useEffect(() => {
-    const ctx = canvas?.getContext('2d');
-
-    if (!canvas || !ctx) return;
-
-    // Clear canvas before redraw
-    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
-
-    // Animate row removal and update
-    const mapOfOrderbookPriceLevels =
-      side && currentOrderbookMap?.[side === 'ask' ? 'asks' : 'bids'];
-    const empty: number[] = [];
-    const removed: number[] = [];
-    const updated: number[] = [];
-
-    prevData.current.forEach((row, idx) => {
-      if (!row) {
-        empty.push(idx);
-        return;
-      }
-
-      if (mapOfOrderbookPriceLevels?.[row.price] === 0) {
-        removed.push(idx);
-        drawOrderbookRow({
-          ctx,
-          idx,
-          rowToRender: row,
-          animationType: OrderbookRowAnimationType.REMOVE,
-        });
-      } else if (mapOfOrderbookPriceLevels?.[row.price] === row?.size) {
-        drawOrderbookRow({
-          ctx,
-          idx,
-          rowToRender: data[idx],
-          animationType: OrderbookRowAnimationType.NONE,
-        });
-      } else {
-        updated.push(idx);
-        drawOrderbookRow({
-          ctx,
-          idx,
-          rowToRender: row,
-          animationType: OrderbookRowAnimationType.NEW,
-        });
-      }
-    });
-
-    setTimeout(() => {
-      [...empty, ...removed, ...updated].forEach((idx) => {
-        const { x1, y1, x2, y2 } = getRektFromIdx({
-          idx,
-          rowHeight,
-          canvasWidth,
-          canvasHeight,
-          side,
-        });
-
-        ctx.clearRect(x1, y1, x2 - x1, y2 - y1);
-        drawOrderbookRow({
-          ctx,
-          idx,
-          rowToRender: data[idx],
-        });
-      });
-    }, ORDERBOOK_ANIMATION_DURATION);
-
-    prevData.current = data;
-  }, [
-    canvasHeight,
-    canvasWidth,
-    rowHeight,
-    data,
-    histogramRange,
-    stepSizeDecimals,
-    tickSizeDecimals,
-    histogramSide,
-    side,
-    theme,
-    currentOrderbookMap,
-  ]);
-
-  return { canvasRef };
-};
@@ -1,126 +0,0 @@
-import { useMemo } from 'react';
-import { shallowEqual, useSelector } from 'react-redux';
-import { OrderSide } from '@dydxprotocol/v4-client-js';
-
-import { type PerpetualMarketOrderbookLevel } from '@/constants/abacus';
-import { DepthChartSeries, DepthChartDatum } from '@/constants/charts';
-
-import { getCurrentMarketOrderbook } from '@/state/perpetualsSelectors';
-import { getSubaccountOpenOrdersBySideAndPrice } from '@/state/accountSelectors';
-
-import { MustBigNumber } from '@/lib/numbers';
-
-export const useCalculateOrderbookData = ({ maxRowsPerSide }: { maxRowsPerSide: number }) => {
-  const orderbook = useSelector(getCurrentMarketOrderbook, shallowEqual);
-
-  const openOrdersBySideAndPrice =
-    useSelector(getSubaccountOpenOrdersBySideAndPrice, shallowEqual) || {};
-
-  return useMemo(() => {
-    const asks: Array<PerpetualMarketOrderbookLevel | undefined> = (
-      orderbook?.asks?.toArray() ?? []
-    )
-      .map(
-        (row, idx: number) =>
-          ({
-            key: `ask-${idx}`,
-            side: 'ask',
-            mine: openOrdersBySideAndPrice[OrderSide.SELL]?.[row.price]?.size,
-            ...row,
-          } as PerpetualMarketOrderbookLevel)
-      )
-      .slice(0, maxRowsPerSide);
-
-    const bids: Array<PerpetualMarketOrderbookLevel | undefined> = (
-      orderbook?.bids?.toArray() ?? []
-    )
-      .map(
-        (row, idx: number) =>
-          ({
-            key: `bid-${idx}`,
-            side: 'bid',
-            mine: openOrdersBySideAndPrice[OrderSide.BUY]?.[row.price]?.size,
-            ...row,
-          } as PerpetualMarketOrderbookLevel)
-      )
-      .slice(0, maxRowsPerSide);
-
-    // Prevent the bid/ask sides from crossing by using the offsets.
-    // While the books are crossing...
-    while (asks[0] && bids[0] && bids[0]!.price >= asks[0].price) {
-      // Drop the order on the side with the lower offset.
-      // The offset of the other side is higher and so supercedes.
-      if (bids[0]!.offset === asks[0].offset) {
-        // If offsets are the same, give precedence to the larger size. In this case,
-        // one of the sizes *should* be zero, but we simply check for the larger size.
-        if (bids[0]!.size > asks[0].size) {
-          asks.shift();
-        } else {
-          bids.pop();
-        }
-      } else {
-        // Offsets are not equal. Give precedence to the larger offset.
-        if (bids[0]!.offset > asks[0].offset) {
-          asks.shift();
-        } else {
-          bids.pop();
-        }
-      }
-    }
-
-    const spread =
-      asks[0]?.price && bids[0]?.price ? MustBigNumber(asks[0].price).minus(bids[0].price) : null;
-
-    const spreadPercent = orderbook?.spreadPercent;
-
-    const histogramRange = Math.max(
-      isNaN(Number(bids[bids.length - 1]?.depth)) ? 0 : Number(bids[bids.length - 1]?.depth),
-      isNaN(Number(asks[asks.length - 1]?.depth)) ? 0 : Number(asks[asks.length - 1]?.depth)
-    );
-
-    return {
-      asks,
-      bids,
-      spread,
-      spreadPercent,
-      histogramRange,
-      hasOrderbook: !!orderbook,
-    };
-  }, [orderbook, openOrdersBySideAndPrice]);
-};
-
-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,39 +0,0 @@
-import { type RefObject, useEffect, useState } from 'react';
-
-export const useSpreadRowScrollListener = ({
-  orderbookRef,
-  spreadRowRef,
-}: {
-  orderbookRef: RefObject<HTMLDivElement>;
-  spreadRowRef: RefObject<HTMLDivElement>;
-}) => {
-  const [displaySide, setDisplaySide] = useState<string>();
-
-  useEffect(() => {
-    const onScroll = () => {
-      if (spreadRowRef.current && orderbookRef.current) {
-        const { clientHeight } = orderbookRef.current;
-        const parent = orderbookRef.current.getBoundingClientRect();
-        const spread = spreadRowRef.current.getBoundingClientRect();
-        const spreadTop = spread.top - parent.top;
-        const spreadBottom = spread.bottom - parent.top;
-
-        if (spreadBottom > clientHeight) {
-          setDisplaySide('bottom');
-        } else if (spreadTop < 0) {
-          setDisplaySide('top');
-        } else {
-          setDisplaySide(undefined);
-        }
-      }
-    };
-
-    orderbookRef.current?.addEventListener('scroll', onScroll, false);
-
-    return () => {
-      orderbookRef.current?.removeEventListener('scroll', onScroll, false);
-    };
-  }, [orderbookRef.current, spreadRowRef.current]);
-
-  return displaySide;
-};
@@ -4,6 +4,7 @@ import { useSelector } from 'react-redux';
 import type { IChartingLibraryWidget, ThemeName } from 'public/tradingview/charting_library';

 import { AppTheme } from '@/state/configs';
+
 import { getAppTheme } from '@/state/configsSelectors';

 import { getWidgetOverrides } from '@/lib/tradingView/utils';
@@ -28,7 +29,7 @@ export const useTradingViewTheme = ({
  tvWidget: (IChartingLibraryWidget & { _id?: string; _ready?: boolean }) | null;
  isWidgetReady?: boolean;
 }) => {
-  const appTheme: AppTheme = useSelector(getAppTheme);
+  const appTheme = useSelector(getAppTheme);

  useEffect(() => {
    if (tvWidget && isWidgetReady) {
@@ -97,7 +97,7 @@ export const useAnalytics = () => {
  }, []);

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

  useEffect(() => {
    if (status) {
@@ -114,7 +114,6 @@ 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);

@@ -1,16 +0,0 @@
-import { useSelector } from 'react-redux';
-import { ThemeProvider } from 'styled-components';
-
-import { AppTheme } from '@/state/configs';
-import { getAppTheme } from '@/state/configsSelectors';
-
-import { Themes } from '@/styles/themes';
-
-export const AppThemeProvider = ({ ...props }) => {
-    return <ThemeProvider theme={useAppThemeContext()} {...props} />
-};
-
-export const useAppThemeContext = () => {
-    const theme: AppTheme = useSelector(getAppTheme);
-    return Themes[theme];
-}
@@ -5,15 +5,16 @@ 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`);
@@ -32,35 +33,17 @@ export const useCurrentMarketId = () => {
    if (marketIds.length === 0) return marketId ?? lastViewedMarket;
    if (!marketIds.includes(marketId ?? lastViewedMarket)) return DEFAULT_MARKETID;
    return marketId ?? lastViewedMarket;
-  }, [hasMarketIds, marketId]);
+  }, [marketIds, marketId]);

  useEffect(() => {
-    // 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());
+    setLastViewedMarket(validId);
+    dispatch(setCurrentMarketId(validId));
+    dispatch(closeDialogInTradeBox());

-      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]);
+    navigate(`${AppRoute.Trade}/${validId}`, {
+      replace: true,
+    });
+  }, [validId]);

  useEffect(() => {
    // Check for marketIds otherwise Abacus will silently fail its isMarketValid check
@@ -1,7 +1,14 @@
 import { useMemo } from 'react';
 import { useSelector, shallowEqual } from 'react-redux';

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

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

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

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

 import { useSelectedNetwork, useStringGetter } from '@/hooks';
@@ -28,7 +27,6 @@ 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';

@@ -81,7 +79,6 @@ 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}
@@ -95,29 +92,6 @@ 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,
@@ -127,7 +101,6 @@ 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]
              );
@@ -179,20 +152,20 @@ export const notificationTypes: NotificationTypeConfig[] = [

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

-          const transferType =
-            type ?? fromChainId === ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId
-              ? TransferNotificationTypes.Withdrawal
-              : TransferNotificationTypes.Deposit;
+          const type =
+            fromChainId === ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId
+              ? 'withdrawal'
+              : '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,
-            }[transferType],
+            }[type],
          });

          const toChainEta = status?.toChain?.chainData?.estimatedRouteDuration || 0;
@@ -217,13 +190,12 @@ export const notificationTypes: NotificationTypeConfig[] = [
                  slotIcon={icon}
                  slotTitle={title}
                  transfer={transfer}
-                  type={transferType}
+                  type={type}
                  triggeredAt={transfer.triggeredAt}
                  notification={notification}
                />
              ),
              toastSensitivity: 'foreground',
-              groupKey: NotificationType.SquidTransfer,
            },
            [isFinished]
          );
@@ -269,7 +241,6 @@ export const notificationTypes: NotificationTypeConfig[] = [
              },
            }),
            toastSensitivity: 'foreground',
-            groupKey: NotificationType.ReleaseUpdates,
          },
          []
        );
@@ -31,7 +31,6 @@ 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);
@@ -198,13 +197,7 @@ export const useSubaccountContext = ({ localDydxWallet }: { localDydxWallet?: Lo
          );
          const ibcMsg: EncodeObject = {
            typeUrl: transaction.msgTypeUrl,
-            value: {
-              ...transaction.msg,
-              timeoutTimestamp: transaction.msg.timeoutTimestamp
-                // Squid returns timeoutTimestamp as Long, but the signer expects BigInt
-                ? BigInt(Long.fromValue(transaction.msg.timeoutTimestamp).toString())
-                : undefined,
-            },
+            value: transaction.msg,
          };

          return await compositeClient.send(
@@ -300,29 +293,12 @@ export const useSubaccountContext = ({ localDydxWallet }: { localDydxWallet?: Lo
  );

  const sendSquidWithdraw = useCallback(
-    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();
-      }
-
+    async (amount: number, payload: string) => {
      if (!subaccountClient) {
        return;
      }
-      const tx = await sendSquidWithdrawFromSubaccount({ subaccountClient, amount, payload });
-      return hashFromTx(tx?.hash);
+
+      return await sendSquidWithdrawFromSubaccount({ subaccountClient, amount, payload });
    },
    [subaccountClient, sendSquidWithdrawFromSubaccount]
  );
@@ -11,19 +11,22 @@ export const useTradeFormInputs = () => {
  const { limitPriceInput, triggerPriceInput, trailingPercentInput } = tradeFormInputValues;

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

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

  useEffect(() => {
+    const floatValue = parseFloat(trailingPercentInput);
    abacusStateManager.setTradeValue({
-      value: trailingPercentInput,
+      value: floatValue,
      field: TradeInputField.trailingPercent,
    });
  }, [trailingPercentInput]);
@@ -1,7 +1,6 @@
 import { useCallback, useEffect, useState, useMemo } from 'react';
 import { useSelector } from 'react-redux';

-import { EvmDerivedAddresses } from '@/constants/account';
 import { LocalStorageKey } from '@/constants/localStorage';
 import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';

@@ -105,17 +104,11 @@ export const useWalletConnection = () => {
    [walletConnectConfig, walletType, walletConnectionType]
  );

-  const { connectAsync: connectWagmi } = useConnectWagmi({ connector: wagmiConnector });
+  const { connectAsync: connectWagmi } = useConnectWagmi({ connector: wagmiConnector })
  const { suggestAndConnect: connectGraz } = useConnectGraz();
-  const [evmDerivedAddresses] = useLocalStorage({
-    key: LocalStorageKey.EvmDerivedAddresses,
-    defaultValue: {} as EvmDerivedAddresses,
-  });

  const connectWallet = useCallback(
-    async ({ walletType, forceConnect }: { walletType?: WalletType; forceConnect?: boolean }) => {
-      if (!walletType) return { walletType, walletConnectionType };
-
+    async ({ walletType }: { walletType: WalletType }) => {
      const walletConnection = getWalletConnection({ walletType });

      try {
@@ -139,11 +132,7 @@ export const useWalletConnection = () => {
            });
          }
        } else {
-          const isAccountConnected = Boolean(
-            evmAddress && evmDerivedAddresses[evmAddress]?.encryptedSignature
-          );
-          // if account connected (via remember me), do not show wagmi popup until forceConnect
-          if (!isConnectedWagmi && (forceConnect || !isAccountConnected)) {
+          if (!isConnectedWagmi) {
            await connectWagmi({
              connector: resolveWagmiConnector({
                walletType,
@@ -239,12 +228,6 @@ export const useWalletConnection = () => {
    evmAddressWagmi,
    signerWagmi,
    publicClientWagmi,
-    isConnectedWagmi,
-    connectWallet: () =>
-      connectWallet({
-        walletType: selectedWalletType,
-        forceConnect: true,
-      }),

    // Wallet connection (Cosmos)
    dydxAddress,
@@ -1 +1,3 @@
-<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>
+<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>
@@ -0,0 +1,3 @@
+<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,6 +19,7 @@ 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';
@@ -39,25 +40,21 @@ export { default as MarketsIcon } from './markets.svg';
 export { default as MenuIcon } from './menu.svg';
 export { default as MigrateIcon } from './migrate.svg';
 export { default as MintscanIcon } from './logos/mintscan.svg';
-export { default as MoonIcon } from './moon.svg';
 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';
 export { default as ShowIcon } from './show.svg';
 export { default as StarIcon } from './star.svg';
-export { default as SunIcon } from './sun.svg';
 export { default as TerminalIcon } from './terminal.svg';
 export { default as TogglesMenuIcon } from './toggles-menu.svg';
 export { default as TradeIcon } from './trade.svg';
@@ -1,52 +1,45 @@
-import { useAppThemeContext } from '@/hooks/useAppTheme';
-
-const LogoShortIcon: React.FC<{ id?: string }> = ({ id }: { id?: string }) => {
-  const theme = useAppThemeContext();
-  const fill = theme.logoFill;
-
-  return (
-    <svg
-      width="135"
-      height="145"
-      viewBox="0 0 135 145"
-      fill="none"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <path d="M100.986 0L0 144.988H31.0048L132.514 0H100.986Z" fill={fill} />
-      <path
-        d="M34.2346 0L63.9475 42.7232L48.4451 66.0268L2.58386 0H34.2346Z"
-        fill={`url(#${id ? `${id}_logo_gradient_0` : 'paint0_linear'})`}
-      />
-      <path
-        d="M103.995 145L71.0526 97.7455L86.555 75.0893L135 145H103.995Z"
-        fill={`url(#${id ? `${id}_logo_gradient_1` : 'paint1_linear'})`}
-      />
-      <defs>
-        <linearGradient
-          id={id ? `${id}_logo_gradient_0` : 'paint0_linear'}
-          x1="27.1293"
-          y1="9.0625"
-          x2="69.773"
-          y2="60.4324"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor={fill} />
-          <stop offset="1" stopColor={fill} stopOpacity="0.55" />
-        </linearGradient>
-        <linearGradient
-          id={id ? `${id}_logo_gradient_1` : 'paint1_linear'}
-          x1="111.1"
-          y1="133.996"
-          x2="58.6959"
-          y2="63.4999"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor="#6966FF" />
-          <stop offset="1" stopColor="#6966FF" stopOpacity="0.36" />
-        </linearGradient>
-      </defs>
-    </svg>
-  );
-};
+const LogoShortIcon: React.FC<{ id?: string }> = ({ id }: { id?: string }) => (
+  <svg
+    width="135"
+    height="145"
+    viewBox="0 0 135 145"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path d="M100.986 0L0 144.988H31.0048L132.514 0H100.986Z" fill="white" />
+    <path
+      d="M34.2346 0L63.9475 42.7232L48.4451 66.0268L2.58386 0H34.2346Z"
+      fill={`url(#${id ? `${id}_logo_gradient_0` : 'paint0_linear'})`}
+    />
+    <path
+      d="M103.995 145L71.0526 97.7455L86.555 75.0893L135 145H103.995Z"
+      fill={`url(#${id ? `${id}_logo_gradient_1` : 'paint1_linear'})`}
+    />
+    <defs>
+      <linearGradient
+        id={id ? `${id}_logo_gradient_0` : 'paint0_linear'}
+        x1="27.1293"
+        y1="9.0625"
+        x2="69.773"
+        y2="60.4324"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="white" />
+        <stop offset="1" stopColor="white" stopOpacity="0.55" />
+      </linearGradient>
+      <linearGradient
+        id={id ? `${id}_logo_gradient_1` : 'paint1_linear'}
+        x1="111.1"
+        y1="133.996"
+        x2="58.6959"
+        y2="63.4999"
+        gradientUnits="userSpaceOnUse"
+      >
+        <stop stopColor="#6966FF" />
+        <stop offset="1" stopColor="#6966FF" stopOpacity="0.36" />
+      </linearGradient>
+    </defs>
+  </svg>
+);

 export default LogoShortIcon;
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M21.752 15.002A9.72 9.72 0 0 1 18 15.75c-5.385 0-9.75-4.365-9.75-9.75 0-1.33.266-2.597.748-3.752A9.753 9.753 0 0 0 3 11.25C3 16.635 7.365 21 12.75 21a9.753 9.753 0 0 0 9.002-5.998Z" />
-</svg>
@@ -1 +0,0 @@
-<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>
@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
-  <path stroke-linecap="round" stroke-linejoin="round" d="M12 3v2.25m6.364.386-1.591 1.591M21 12h-2.25m-.386 6.364-1.591-1.591M12 18.75V21m-4.773-4.227-1.591 1.591M5.25 12H3m4.227-4.773L5.636 5.636M15.75 12a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0Z" />
-</svg>
@@ -1,5 +1,6 @@
@import 'styles/fonts.css';
@import 'styles/text.css';
+@import 'styles/colors.css';
@import 'styles/animations.css';

 :root {
@@ -8,7 +9,6 @@
  background-color: var(--color-layer-2);
  user-select: none;
  overflow: hidden;
-  --border: var(--default-border-width) solid var(--color-border);
 }

 body,
@@ -54,7 +54,7 @@ button:disabled {
  cursor: pointer;
 }

-:focus-visible {
+:focus-visible{
  outline: var(--color-accent) 1px solid;
  outline-offset: -1px;
  /* outline-offset: -2px; */
@@ -1,11 +1,7 @@
-import { useState } from 'react';
+import { useMemo, useState } from 'react';
 import styled, { css } from 'styled-components';

-import {
-  type Notification,
-  type NotificationDisplayData,
-  NotificationStatus,
-} from '@/constants/notifications';
+import { NotificationStatus } from '@/constants/notifications';
 import { ButtonShape, ButtonSize } from '@/constants/buttons';
 import { useNotifications } from '@/hooks/useNotifications';
 import { useBreakpoints } from '@/hooks/useBreakpoints';
@@ -17,31 +13,54 @@ 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;
 };

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

-  const { markUnseen, markSeen, onNotificationAction } = useNotifications();
+  const {
+    notifications,
+    getKey,
+    getDisplayData,
+    markUnseen,
+    markSeen,
+    isMenuOpen,
+    onNotificationAction,
+  } = useNotifications();
+
  const { isMobile } = useBreakpoints();
-  const hasMultipleToasts = notifications.length > 1;
+  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;

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

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

-const StyledToastArea = styled(ToastArea)<{ size: number }>`
-  position: relative;
-  ${({ size }) =>
-    size &&
-    css`
-      padding-bottom: calc(${size - 1} * 2px);
-    `}
+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 StyledToast = styled(Toast)<{ isStacked?: boolean; layer: number }>`
@@ -108,7 +133,7 @@ const StyledToast = styled(Toast)<{ isStacked?: boolean; layer: number }>`
          position: absolute;
          left: 0;
          top: calc(${layer} * 2px);
-          right: 0;
+          right: calc(${layer} * -2px);
        `
      : css`
          margin-bottom: 0.75rem;
@@ -120,7 +145,7 @@ const StyledToggleButton = styled(ToggleButton)<{ isPressed: boolean }>`
  pointer-events: auto;
  display: none;
  position: absolute;
-  top: -0.5rem;
+  top: 4px;
  left: calc(50% - 0.75rem);
  --button-width: 2rem;
  --button-height: 1rem;
@@ -1,71 +0,0 @@
-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;
-  }
-`;
@@ -2,7 +2,6 @@ import Abacus, { type Nullable } from '@dydxprotocol/v4-abacus';
 import Long from 'long';
 import type { IndexedTx } from '@cosmjs/stargate';
 import { GAS_MULTIPLIER, encodeJson } from '@dydxprotocol/v4-client-js';
-import { EncodeObject } from '@cosmjs/proto-signing';

 import {
  CompositeClient,
@@ -42,7 +41,6 @@ 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;
@@ -56,10 +54,6 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
    this.store = undefined;
  }

-  get isNobleClientConnected(): boolean {
-    return this.nobleClient?.isConnected ?? false;
-  }
-
  setStore(store: RootStore): void {
    this.store = store;
  }
@@ -69,13 +63,9 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
  }

  setNobleWallet(nobleWallet: LocalWallet) {
-    try {
-      this.nobleWallet = nobleWallet;
-      if (this.nobleClient) {
-        this.nobleClient.connect(nobleWallet);
-      }
-    } catch (e) {
-      log('DydxChainTransactions/setNobleWallet', e);
+    this.nobleWallet = nobleWallet;
+    if (this.nobleClient) {
+      this.nobleClient.connect(nobleWallet);
    }
  }

@@ -122,15 +112,10 @@ 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);
+      if (nobleValidatorUrl) {
+        this.nobleClient = new NobleClient(nobleValidatorUrl);
+        if (this.nobleWallet) await this.nobleClient.connect(this.nobleWallet);
      }
-
      // Dispatch custom event to notify other parts of the app that the network has been connected
      const customEvent = new CustomEvent('abacus:connectNetwork', {
        detail: parsedParams,
@@ -173,10 +158,6 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
      return parsedObj as T;
    }

-    if (typeof x === 'bigint') {
-      return x.toString() as T;
-    }
-
    throw new Error(`Unsupported data type: ${typeof x}`);
  }

@@ -220,8 +201,8 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
        timeInForce as OrderTimeInForce,
        goodTilTimeInSeconds ?? 0,
        execution as OrderExecution,
-        postOnly ?? undefined,
-        reduceOnly ?? undefined,
+        postOnly,
+        reduceOnly,
        triggerPrice ?? undefined
      );

@@ -359,7 +340,12 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
    }
  }

-  async sendNobleIBC(params: { msgTypeUrl: string; msg: any }): Promise<string> {
+  async sendNobleIBC(
+    params: {
+      msgTypeUrl: string,
+      msg: any,
+    }
+  ): Promise<string> {
    if (!this.nobleClient?.isConnected) {
      throw new Error('Missing nobleClient or localWallet');
    }
@@ -367,25 +353,18 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
    try {
      const ibcMsg = {
        typeUrl: params.msgTypeUrl, // '/ibc.applications.transfer.v1.MsgTransfer',
-        value: {
-          ...params.msg,
-          timeoutTimestamp: params.msg.timeoutTimestamp
-            // Squid returns timeoutTimestamp as Long, but the signer expects BigInt
-            ? BigInt(Long.fromValue(params.msg.timeoutTimestamp).toString())
-            : undefined,
-        },
+        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) -
+      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]);

@@ -401,92 +380,6 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
    }
  }

-  async withdrawToNobleIBC(params: {
-    subaccountNumber: number;
-    amount: string;
-    ibcPayload: string;
-  }): Promise<string> {
-    if (!this.compositeClient || !this.localWallet) {
-      throw new Error('Missing compositeClient or localWallet');
-    }
-
-    const { subaccountNumber, amount, ibcPayload } = params ?? {};
-    const parsedIbcPayload: {
-      msgTypeUrl: string;
-      msg: any;
-    } = ibcPayload ? JSON.parse(atob(ibcPayload)) : undefined;
-
-    try {
-      const msg = this.compositeClient.withdrawFromSubaccountMessage(
-        new SubaccountClient(this.localWallet, subaccountNumber),
-        parseFloat(amount).toFixed(this.compositeClient.validatorClient.config.denoms.USDC_DECIMALS)
-      );
-      const ibcMsg: EncodeObject = {
-        typeUrl: parsedIbcPayload.msgTypeUrl,
-        value: {
-          ...parsedIbcPayload.msg,
-          timeoutTimestamp: parsedIbcPayload.msg.timeoutTimestamp
-            // Squid returns timeoutTimestamp as Long, but the signer expects BigInt
-            ? BigInt(Long.fromValue(parsedIbcPayload.msg.timeoutTimestamp).toString())
-            : undefined,
-        },
-      };
-
-      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>,
@@ -521,17 +414,6 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
          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;
        }
@@ -84,7 +84,8 @@ class AbacusStateManager {
    );

    const appConfigs = AbacusAppConfig.Companion.forWeb;
-    appConfigs.squidVersion = AbacusAppConfig.SquidVersion.V2;
+    if (!isMainnet || testFlags.withCCTP)
+      appConfigs.squidVersion = AbacusAppConfig.SquidVersion.V2DepositOnly;

    this.stateManager = new AsyncAbacusStateManager(
      '',
@@ -171,15 +172,6 @@ class AbacusStateManager {
    this.setTransferValue({ value: null, field: TransferInputField.usdcSize });
  };

-  resetInputState = () => {
-    this.clearTransferInputValues();
-    this.setTransferValue({
-      field: TransferInputField.type,
-      value: null,
-    });
-    this.clearTradeInputValues();
-  };
-
  // ------ Set Data ------ //
  setStore = (store: RootStore) => {
    this.store = store;
@@ -270,10 +262,6 @@ 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;
@@ -1,3 +0,0 @@
-export const hashFromTx = (
-  txHash: string | Uint8Array
-): string => `0x${Buffer.from(txHash).toString('hex')}`;
@@ -1,133 +0,0 @@
-//  ------ Canvas helper methods ------ //
-
-import type { MarketOrderbook, Nullable, PerpetualMarketOrderbookLevel } from '@/constants/abacus';
-
-/**
- * @returns top left x,y and bottom x,y from array idx
- */
-export const getRektFromIdx = ({
-  idx,
-  canvasWidth,
-  canvasHeight,
-  rowHeight,
-  side = 'bid',
-}: {
-  idx: number;
-  canvasWidth: number;
-  canvasHeight: number;
-  rowHeight: number;
-  side: PerpetualMarketOrderbookLevel['side'];
-}) => {
-  /**
-   * Does not change
-   */
-  const x1 = 0;
-  const x2 = Math.floor(canvasWidth);
-
-  /**
-   * Changes based on side
-   * Asks: The drawing should starts from the bottom of the orderbook
-   */
-  if (side === 'ask') {
-    const y1 = Math.floor(canvasHeight - (idx + 1) * rowHeight);
-    const y2 = Math.floor(y1 + rowHeight);
-    return { x1, x2, y1, y2 };
-  }
-
-  const y1 = Math.floor(idx * rowHeight);
-  const y2 = Math.floor(y1 + rowHeight);
-  return { x1, x2, y1, y2 };
-};
-
-/**
- * @returns y value for text and bar
- */
-export const getYForElements = ({ y, rowHeight }: { y: number; rowHeight: number }) => ({
-  text: Math.floor(y + rowHeight / 2),
-  bar: Math.floor(y + 1),
-});
-
-/**
- * @description X coordinate for text
- * @returns Get X value by column, colIdx starts at 0
- */
-export const getXByColumn = ({ canvasWidth, colIdx }: { canvasWidth: number; colIdx: number }) => {
-  return Math.floor(((colIdx + 1) * canvasWidth) / 3);
-};
-
-/**
- *         to === 'right'                to === 'left'
- *         |===================|         |===================|
- * bar:    a                   b         c                   d
- * a = 0
- * b = depthBarWidth
- * c = canvasWidth - depthBarWidth
- * d = canvasWidth
- *
- */
-export const getHistogramXValues = ({
-  barWidth,
-  canvasWidth,
-  gradientMultiplier,
-  histogramSide,
-}: {
-  barWidth: number;
-  canvasWidth: number;
-  gradientMultiplier: number;
-  histogramSide: 'left' | 'right';
-}) => {
-  const gradient = {
-    x1: Math.floor(histogramSide === 'left' ? barWidth : canvasWidth - barWidth),
-    x2: Math.floor(
-      histogramSide === 'left'
-        ? 0 - (canvasWidth * gradientMultiplier - canvasWidth)
-        : canvasWidth * gradientMultiplier
-    ),
-  };
-  const bar = {
-    x1: Math.floor(histogramSide === 'left' ? 0 : canvasWidth - barWidth),
-    x2: Math.floor(histogramSide === 'left' ? Math.min(barWidth, canvasWidth) : canvasWidth),
-  };
-
-  return {
-    bar,
-    gradient,
-  };
-};
-
-// ------ Orderbook helper methods ------ //
-export const processOrderbookToCreateMap = ({
-  orderbookMap,
-  newOrderbook,
-}: {
-  orderbookMap?: {
-    asks: Record<string, number>;
-    bids: Record<string, number>;
-  };
-  newOrderbook: Nullable<MarketOrderbook>;
-}) => {
-  // Create Orderbooks Map indexed by Price
-  const asks = newOrderbook?.asks?.toArray() ?? [];
-  const bids = newOrderbook?.bids?.toArray() ?? [];
-  const prevAsks = orderbookMap?.asks ?? {};
-  const prevBids = orderbookMap?.bids ?? {};
-  const newAsks = Object.fromEntries(asks.map((ask) => [ask.price, ask.size]) ?? {});
-  const newBids = Object.fromEntries(bids.map((bid) => [bid.price, bid.size]) ?? {});
-
-  Object.keys(prevAsks).forEach((price) => {
-    if (!newAsks[price] || newAsks[price] === 0) {
-      newAsks[price] = 0;
-    }
-  });
-
-  Object.keys(prevBids).forEach((price) => {
-    if (!newBids[price] || newBids[price] === 0) {
-      newBids[price] = 0;
-    }
-  });
-
-  return {
-    newAsks,
-    newBids,
-  };
-};
@@ -1,20 +0,0 @@
-import { css } from 'styled-components';
-
-import { type RiskLevels } from '@/constants/abacus';
-
-export const UsageColorFromRiskLevel = (riskLevel: RiskLevels) =>
-  ({
-    low: css`
-      color: var(--color-risk-low);
-    `,
-    medium: css`
-      color: var(--color-risk-medium);
-    `,
-    high: css`
-      color: var(--color-risk-high);
-    `,
-  }[riskLevel.name]);
-
-export const generateFadedColorVariant = (colorHex: string, opacityHex: string) => {
-  return `${colorHex}${opacityHex}`;
-};
@@ -5,22 +5,26 @@ class TestFlags {
    this.queryParams = {};
    const hash = window.location.hash;
    const queryIndex = hash.indexOf('?');
-    if (queryIndex === -1) return;
+    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;
+        this.queryParams[key] = value;
    }
  }

  get displayInitializingMarkets() {
-    return !!this.queryParams.displayinitializingmarkets;
+    return !!this.queryParams.displayInitializingMarkets;
  }

-  get showMobileSignInOption() {
-    return !!this.queryParams.mobilesignin;
+  get displayAllMarkets() {
+    return !!this.queryParams.displayAllMarkets;
+  }
+
+  get withCCTP() {
+    return !!this.queryParams.withCCTP;
  }
 }

@@ -1,9 +1,11 @@
+import Color from 'color';
+import isEmpty from 'lodash/isEmpty';
+
 import { Candle, TradingViewBar, TradingViewSymbol } from '@/constants/candles';
+import { Colors } from '@/styles/colors';

 import { AppTheme } from '@/state/configs';

-import { Themes } from '@/styles/themes';
-
 export const mapCandle = ({
  startedAt,
  open,
@@ -47,42 +49,42 @@ export const getHistorySlice = ({
  return bars.filter(({ time }) => time >= fromMs);
 };

-export const getWidgetOverrides = (appTheme: AppTheme) => {
-  const theme = Themes[appTheme];
+export const getWidgetOverrides = (theme: AppTheme) => {
+  const colors = Colors[theme];

  return {
    overrides: {
-      'paneProperties.background': theme.layer2,
-      'paneProperties.horzGridProperties.color': theme.layer3,
-      'paneProperties.vertGridProperties.color': theme.layer3,
+      'paneProperties.background': Color(colors.layer2).hex(),
+      'paneProperties.horzGridProperties.color': Color(colors.layer3).hex(),
+      'paneProperties.vertGridProperties.color': Color(colors.layer3).hex(),
      'paneProperties.crossHairProperties.style': 1,
      'paneProperties.legendProperties.showBarChange': false,
      'paneProperties.backgroundType': 'solid',

      'mainSeriesProperties.style': 1,
-      'mainSeriesProperties.candleStyle.upColor': theme.positive,
-      'mainSeriesProperties.candleStyle.borderUpColor': theme.positive,
-      'mainSeriesProperties.candleStyle.wickUpColor': theme.positive,
-      'mainSeriesProperties.candleStyle.downColor': theme.negative,
-      'mainSeriesProperties.candleStyle.borderDownColor': theme.negative,
-      'mainSeriesProperties.candleStyle.wickDownColor': theme.negative,
+      'mainSeriesProperties.candleStyle.upColor': Color(colors.positive).hex(),
+      'mainSeriesProperties.candleStyle.borderUpColor': Color(colors.positive).hex(),
+      'mainSeriesProperties.candleStyle.wickUpColor': Color(colors.positive).hex(),
+      'mainSeriesProperties.candleStyle.downColor': Color(colors.negative).hex(),
+      'mainSeriesProperties.candleStyle.borderDownColor': Color(colors.negative).hex(),
+      'mainSeriesProperties.candleStyle.wickDownColor': Color(colors.negative).hex(),
      'mainSeriesProperties.statusViewStyle.symbolTextSource': 'ticker',

-      'scalesProperties.textColor': theme.textPrimary,
-      'scalesProperties.backgroundColor': theme.layer2,
-      'scalesProperties.lineColor': theme.layer3,
+      'scalesProperties.textColor': Color(colors.text1).hex(),
+      'scalesProperties.backgroundColor': Color(colors.layer2).hex(),
+      'scalesProperties.lineColor': Color(colors.layer3).hex(),
    },
    studies_overrides: {
-      'volume.volume.color.0': theme.negative,
-      'volume.volume.color.1': theme.positive,
+      'volume.volume.color.0': Color(colors.negative).hex(),
+      'volume.volume.color.1': Color(colors.positive).hex(),
      'volume.volume ma.visible': false,
-      'relative strength index.plot.color': theme.accent,
+      'relative strength index.plot.color': Color(colors.accent).hex(),
      'relative strength index.plot.linewidth': 1.5,
      'relative strength index.hlines background.color': '#134A9F',
    },
    loading_screen: {
-      backgroundColor: theme.layer2,
-      foregroundColor: theme.layer2,
+      backgroundColor: Color(colors.layer2).hex(),
+      foregroundColor: Color(colors.layer2).hex(),
    },
  };
 };
@@ -1,4 +1,4 @@
-import { createConfig, configureChains, mainnet, Chain } from 'wagmi';
+import { createConfig, configureChains, mainnet, Chain, Connector, usePublicClient } from 'wagmi';
 import { goerli } from 'wagmi/chains';

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

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

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

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

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

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

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

 Styled.Article = styled.article`
@@ -5,7 +5,7 @@ import { useEnsName } from 'wagmi';
 import { useNavigate } from 'react-router-dom';

 import { ButtonSize } from '@/constants/buttons';
-import { TransferType } from '@/constants/abacus';
+import { TransferInputField, TransferType } from '@/constants/abacus';

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

@@ -26,14 +26,10 @@ import { useAccounts, useStringGetter, useTokenConfigs } from '@/hooks';
 import { getOnboardingState } from '@/state/accountSelectors';
 import { openDialog } from '@/state/dialogs';

+import abacusStateManager from '@/lib/abacus';
 import { isTruthy } from '@/lib/isTruthy';
 import { truncateAddress } from '@/lib/wallet';

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

 const Profile = () => {
@@ -180,26 +176,7 @@ const Profile = () => {
        />
      </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}`}
@@ -214,6 +191,19 @@ 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
@@ -231,9 +221,6 @@ const Profile = () => {
          withInnerBorders={false}
        />
      </Styled.TablePanel>
-
-      <GovernancePanel />
-      <StakingPanel />
    </Styled.MobileProfileLayout>
  );
 };
@@ -247,7 +234,6 @@ Styled.MobileProfileLayout = styled.div`

  gap: 1rem;
  padding: 1.25rem 0.9rem;
-  max-width: 100vw;
 `;

 Styled.Header = styled.header`
@@ -264,8 +250,8 @@ Styled.ProfileIcon = styled.div`
  border-radius: 50%;
  background: linear-gradient(
    135deg,
-    ${({ theme }) => theme.profileYellow} 0%,
-    ${({ theme }) => theme.profileRed} 100%
+    var(--theme-classic-color-yellow) 0%,
+    var(--theme-classic-color-red) 100%
  );
 `;

@@ -341,13 +327,6 @@ 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';

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

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

 Styled.Article = styled.article`
@@ -1,40 +1,34 @@
-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, getTradeInfoNumbers } from '@/state/accountSelectors';
+import { getOnboardingState, getSubaccount } from '@/state/accountSelectors';
 import { openDialog } from '@/state/dialogs';

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

-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 })));
+import { layoutMixins } from '@/styles/layoutMixins';
+import { Button } from '@/components/Button';
+import { ButtonAction } from '@/constants/buttons';

 export default () => {
  const dispatch = useDispatch();
@@ -45,60 +39,54 @@ 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 = (
-    <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>
+    <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>
  );

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

  gap: 0.5rem;
@@ -2,6 +2,7 @@ import type { ElementType } from 'react';
 import styled, { AnyStyledComponent } from 'styled-components';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';

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

@@ -32,7 +33,7 @@ export const DYDXBalancePanel = () => {
  const { chainTokenLabel } = useTokenConfigs();

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

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

+Styled.Panel = styled(Panel)`
+  --panel-paddingX: 1.5rem;
+
+  @media ${breakpoints.tablet} {
+    --panel-paddingY: 1.5rem;
+    --panel-content-paddingY: 1rem;
+  }
+`;
+
 Styled.Header = styled.div`
  ${layoutMixins.spacedRow}
  gap: 1rem;
@@ -1,75 +0,0 @@
-import styled, { AnyStyledComponent } from 'styled-components';
-import { useDispatch } from 'react-redux';
-
-import { ButtonAction, ButtonSize } from '@/constants/buttons';
-import { STRING_KEYS } from '@/constants/localization';
-import { DialogTypes } from '@/constants/dialogs';
-
-import { useStringGetter, useURLConfigs } from '@/hooks';
-
-import { Panel } from '@/components/Panel';
-import { IconName } from '@/components/Icon';
-import { IconButton } from '@/components/IconButton';
-import { Link } from '@/components/Link';
-
-import { openDialog } from '@/state/dialogs';
-
-export const GovernancePanel = () => {
-  const stringGetter = useStringGetter();
-  const dispatch = useDispatch();
-  const { governanceLearnMore } = useURLConfigs();
-
-  return (
-    <Panel
-      slotHeaderContent={
-        <Styled.Title>{stringGetter({ key: STRING_KEYS.GOVERNANCE })}</Styled.Title>
-      }
-      slotRight={
-        <Styled.Arrow>
-          <Styled.IconButton
-            action={ButtonAction.Base}
-            iconName={IconName.Arrow}
-            size={ButtonSize.Small}
-          />
-        </Styled.Arrow>
-      }
-      onClick={() => dispatch(openDialog({ type: DialogTypes.ExternalNavKeplr }))}
-    >
-      <Styled.Description>
-        {stringGetter({ key: STRING_KEYS.GOVERNANCE_DESCRIPTION })}
-        <Link href={governanceLearnMore} onClick={(e) => e.stopPropagation()}>
-          {stringGetter({ key: STRING_KEYS.LEARN_MORE })} →
-        </Link>
-      </Styled.Description>
-    </Panel>
-  );
-};
-
-const Styled: Record<string, AnyStyledComponent> = {};
-
-Styled.Description = styled.div`
-  color: var(--color-text-0);
-  --link-color: var(--color-text-1);
-
-  a {
-    display: inline;
-    ::before {
-      content: ' ';
-    }
-  }
-`;
-
-Styled.IconButton = styled(IconButton)`
-  color: var(--color-text-0);
-  --color-border: var(--color-layer-6);
-`;
-
-Styled.Arrow = styled.div`
-  padding-right: 1.5rem;
-`;
-
-Styled.Title = styled.h3`
-  font: var(--font-medium-book);
-  color: var(--color-text-2);
-  margin-bottom: -1rem;
-`;
@@ -24,8 +24,6 @@ import { openDialog } from '@/state/dialogs';

 import { log } from '@/lib/telemetry';

-const SEASON_NUMBER = 2;
-
 export const LaunchIncentivesPanel = () => {
  const { isNotTablet } = useBreakpoints();
  const dispatch = useDispatch();
@@ -70,12 +68,10 @@ const EstimatedRewards = () => {

  const { data, isLoading } = useQuery({
    enabled: !!dydxAddress,
-    queryKey: `launch_incentives_rewards_${dydxAddress ?? ''}_${SEASON_NUMBER}`,
+    queryKey: `launch_incentives_rewards_${dydxAddress ?? ''}`,
    queryFn: async () => {
      if (!dydxAddress) return undefined;
-      const resp = await fetch(
-        `https://cloud.chaoslabs.co/query/api/dydx/points/${dydxAddress}?n=${SEASON_NUMBER}`
-      );
+      const resp = await fetch(`https://cloud.chaoslabs.co/query/api/dydx/points/${dydxAddress}`);
      return (await resp.json())?.incentivePoints;
    },
    onError: (error: Error) => log('LaunchIncentives/fetchPoints', error),
@@ -89,7 +85,9 @@ const EstimatedRewards = () => {
          <Styled.Season>
            {stringGetter({
              key: STRING_KEYS.LAUNCH_INCENTIVES_SEASON_NUM,
-              params: { SEASON_NUMBER },
+              params: {
+                SEASON_NUMBER: 1,
+              },
            })}
          </Styled.Season>
        </div>
@@ -153,8 +151,15 @@ const LaunchIncentivesContent = () => {
 const Styled: Record<string, AnyStyledComponent> = {};

 Styled.Panel = styled(Panel)`
+  --panel-paddingY: 1rem;
+  --panel-paddingX: 1.5rem;
+
  background-color: var(--color-layer-4);
  width: 100%;
+
+  @media ${breakpoints.tablet} {
+    --panel-paddingY: 1.5rem;
+  }
 `;

 Styled.ForV4 = styled.span`
@@ -218,7 +223,7 @@ Styled.Column = styled.div`
 Styled.EstimatedRewardsCard = styled.div`
  ${layoutMixins.spacedRow}
  padding: 1rem 1.25rem;
-  min-width: 19rem;
+  min-width: 21.25rem;
  height: calc(100% - calc(1.5rem * 2));
  margin: 1.5rem;

@@ -7,6 +7,8 @@ import { ButtonAction, ButtonSize, ButtonType } from '@/constants/buttons';

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

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

 import { Details } from '@/components/Details';
@@ -26,7 +28,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 = ({ className }: { className?: string }) => {
+export const MigratePanel = () => {
  const { isNotTablet } = useBreakpoints();
  const stringGetter = useStringGetter();

@@ -43,7 +45,6 @@ export const MigratePanel = ({ className }: { className?: string }) => {

  return isNotTablet ? (
    <Styled.MigratePanel
-      className={className}
      slotHeader={<Styled.Title>{stringGetter({ key: STRING_KEYS.MIGRATE })}</Styled.Title>}
      slotRight={
        <Styled.MigrateAction>
@@ -73,7 +74,6 @@ export const MigratePanel = ({ className }: { className?: string }) => {
    </Styled.MigratePanel>
  ) : (
    <Styled.MigratePanel
-      className={className}
      slotHeader={
        <Styled.MobileMigrateHeader>
          <h3>
@@ -134,11 +134,17 @@ export const MigratePanel = ({ className }: { className?: string }) => {
 const Styled: Record<string, AnyStyledComponent> = {};

 Styled.MigratePanel = styled(Panel)`
+  --panel-paddingX: 1.5rem;
  width: 100%;

  background-image: url('/dots-background.svg');
  background-position: right;
  background-repeat: no-repeat;
+
+  @media ${breakpoints.tablet} {
+    --panel-paddingY: 1.5rem;
+    --panel-content-paddingY: 1rem;
+  }
 `;

 Styled.Title = styled.h3`
@@ -146,15 +152,14 @@ Styled.Title = styled.h3`
  color: var(--color-text-2);

  padding: var(--panel-paddingY) var(--panel-paddingX) 0;
-  margin-bottom: -0.5rem;
 `;

 Styled.MigrateAction = styled.div`
  ${layoutMixins.flexEqualColumns}
  align-items: center;
+  margin-right: 1rem;
  gap: 1rem;
  padding: 1rem;
-  margin: 1rem;
  width: 100%;

  background-color: var(--color-layer-2);
@@ -192,7 +197,7 @@ Styled.MobileMigrateHeader = styled.div`
  font: var(--font-small-book);
  color: var(--color-text-0);

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

  h3 {
    ${layoutMixins.inlineRow}
@@ -234,4 +239,4 @@ Styled.InlineRow = styled.div`
  ${layoutMixins.inlineRow}
  color: var(--color-text-0);
  --link-color: var(--color-text-1);
-`;
+`;
@@ -1,86 +0,0 @@
-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,43 +1,51 @@
 import styled, { AnyStyledComponent } from 'styled-components';
 import { useDispatch } from 'react-redux';
-import { useNavigate } from 'react-router-dom';

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

-import { useBreakpoints, useStringGetter } from '@/hooks';
+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';
+import { Link } from '@/components/Link';
+
+import { openDialog } from '@/state/dialogs';

 import { DYDXBalancePanel } from './DYDXBalancePanel';
 import { MigratePanel } from './MigratePanel';
 import { LaunchIncentivesPanel } from './LaunchIncentivesPanel';
-import { RewardsHelpPanel } from './RewardsHelpPanel';
-import { GovernancePanel } from './GovernancePanel';
-import { StakingPanel } from './StakingPanel';

-const RewardsPage = () => {
+export const RewardsPage = () => {
  const dispatch = useDispatch();
  const stringGetter = useStringGetter();
+  const { governanceLearnMore, stakingLearnMore } = useURLConfigs();
  const { isTablet, isNotTablet } = useBreakpoints();
-  const navigate = useNavigate();
+
+  const panelArrow = (
+    <Styled.Arrow>
+      <Styled.IconButton
+        action={ButtonAction.Base}
+        iconName={IconName.Arrow}
+        size={ButtonSize.Small}
+      />
+    </Styled.Arrow>
+  );

  return (
    <Styled.Page>
-      {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 />}
+      {import.meta.env.VITE_V3_TOKEN_ADDRESS && <MigratePanel />}

      {isTablet ? (
-        <LaunchIncentivesPanel />
+        <>
+          <LaunchIncentivesPanel />
+          <DYDXBalancePanel />
+        </>
      ) : (
        <Styled.PanelRowIncentivesAndBalance>
          <LaunchIncentivesPanel />
@@ -45,20 +53,37 @@ const RewardsPage = () => {
        </Styled.PanelRowIncentivesAndBalance>
      )}

-      {isNotTablet && (
-        <Styled.PanelRow>
-          <GovernancePanel />
-          <StakingPanel />
-        </Styled.PanelRow>
-      )}
+      <Styled.PanelRow>
+        <Styled.Panel
+          slotHeader={<Styled.Title>{stringGetter({ key: STRING_KEYS.GOVERNANCE })}</Styled.Title>}
+          slotRight={panelArrow}
+          onClick={() => dispatch(openDialog({ type: DialogTypes.ExternalNavKeplr }))}
+        >
+          <Styled.Description>
+            {stringGetter({ key: STRING_KEYS.GOVERNANCE_DESCRIPTION })}
+            <Link href={governanceLearnMore} onClick={(e) => e.stopPropagation()}>
+              {stringGetter({ key: STRING_KEYS.LEARN_MORE })} →
+            </Link>
+          </Styled.Description>
+        </Styled.Panel>

-      <RewardsHelpPanel />
+        <Styled.Panel
+          slotHeader={<Styled.Title>{stringGetter({ key: STRING_KEYS.STAKING })}</Styled.Title>}
+          slotRight={panelArrow}
+          onClick={() => dispatch(openDialog({ type: DialogTypes.ExternalNavKeplr }))}
+        >
+          <Styled.Description>
+            {stringGetter({ key: STRING_KEYS.STAKING_DESCRIPTION })}
+            <Link href={stakingLearnMore} onClick={(e) => e.stopPropagation()}>
+              {stringGetter({ key: STRING_KEYS.LEARN_MORE })} →
+            </Link>
+          </Styled.Description>
+        </Styled.Panel>
+      </Styled.PanelRow>
    </Styled.Page>
  );
 };

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

 Styled.Page = styled.div`
@@ -68,35 +93,45 @@ Styled.Page = styled.div`
  align-items: center;

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

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

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

-Styled.MobileHeader = styled.header`
-  ${layoutMixins.contentSectionDetachedScrollable}
-  ${layoutMixins.stickyHeader}
-  z-index: 2;
-  padding: 1.25rem 0;
-  margin-bottom: -1.5rem;
+Styled.Panel = styled(Panel)`
+  --panel-paddingX: 1.5rem;

-  font: var(--font-large-medium);
-  color: var(--color-text-2);
-  background-color: var(--color-layer-2);
+  @media ${breakpoints.tablet} {
+    --panel-paddingY: 1.5rem;
+    --panel-content-paddingY: 1rem;
+  }
 `;

-Styled.Panel = styled(Panel)`
-  height: fit-content;
+Styled.Title = styled.h3`
+  font: var(--font-medium-book);
+  color: var(--color-text-2);
+  padding: 1rem 1.5rem 0;
+`;
+
+Styled.Description = styled.div`
+  color: var(--color-text-0);
+  --link-color: var(--color-text-1);
+
+  a {
+    display: inline;
+    ::before {
+      content: ' ';
+    }
+  }
 `;

 Styled.PanelRow = styled.div`
@@ -112,3 +147,12 @@ Styled.PanelRow = styled.div`
 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);
+`;
+
+Styled.Arrow = styled.div`
+  padding: 1rem;
+`;
@@ -1,73 +0,0 @@
-import styled, { AnyStyledComponent } from 'styled-components';
-import { useDispatch } from 'react-redux';
-
-import { ButtonAction, ButtonSize } from '@/constants/buttons';
-import { STRING_KEYS } from '@/constants/localization';
-import { DialogTypes } from '@/constants/dialogs';
-
-import { useStringGetter, useURLConfigs } from '@/hooks';
-
-import { Panel } from '@/components/Panel';
-import { IconName } from '@/components/Icon';
-import { IconButton } from '@/components/IconButton';
-import { Link } from '@/components/Link';
-
-import { openDialog } from '@/state/dialogs';
-
-export const StakingPanel = () => {
-  const stringGetter = useStringGetter();
-  const dispatch = useDispatch();
-  const { stakingLearnMore } = useURLConfigs();
-
-  return (
-    <Panel
-      slotHeaderContent={<Styled.Title>{stringGetter({ key: STRING_KEYS.STAKING })}</Styled.Title>}
-      slotRight={
-        <Styled.Arrow>
-          <Styled.IconButton
-            action={ButtonAction.Base}
-            iconName={IconName.Arrow}
-            size={ButtonSize.Small}
-          />
-        </Styled.Arrow>
-      }
-      onClick={() => dispatch(openDialog({ type: DialogTypes.ExternalNavKeplr }))}
-    >
-      <Styled.Description>
-        {stringGetter({ key: STRING_KEYS.STAKING_DESCRIPTION })}
-        <Link href={stakingLearnMore} onClick={(e) => e.stopPropagation()}>
-          {stringGetter({ key: STRING_KEYS.LEARN_MORE })} →
-        </Link>
-      </Styled.Description>
-    </Panel>
-  );
-};
-
-const Styled: Record<string, AnyStyledComponent> = {};
-
-Styled.Description = styled.div`
-  color: var(--color-text-0);
-  --link-color: var(--color-text-1);
-
-  a {
-    display: inline;
-    ::before {
-      content: ' ';
-    }
-  }
-`;
-
-Styled.IconButton = styled(IconButton)`
-  color: var(--color-text-0);
-  --color-border: var(--color-layer-6);
-`;
-
-Styled.Arrow = styled.div`
-  padding-right: 1.5rem;
-`;
-
-Styled.Title = styled.h3`
-  font: var(--font-medium-book);
-  color: var(--color-text-2);
-  margin-bottom: -1rem;
-`;
@@ -25,7 +25,7 @@ import { useNetworks } from '@/views/menus/useNetworks';
 import { SettingsHeader } from './SettingsHeader';
 import { ComingSoonSpace } from '@/components/ComingSoon';

-const SettingsPage = () => {
+export const SettingsPage = () => {
  const stringGetter = useStringGetter();
  const { pathname } = useLocation();
  const dispatch = useDispatch();
@@ -105,5 +105,3 @@ const SettingsPage = () => {
    </>
  );
 };
-
-export default SettingsPage;
@@ -1,7 +1,8 @@
-import { useMemo, useState } from 'react';
+import { 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';
@@ -27,6 +28,7 @@ import {
  getCurrentMarketTradeInfoNumbers,
  getHasUnseenFillUpdates,
  getHasUnseenOrderUpdates,
+  getLatestOrderStatus,
  getTradeInfoNumbers,
 } from '@/state/accountSelectors';

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

-  const tabItems = useMemo(
-    () => [
-      {
-        value: InfoSection.Position,
-        label: stringGetter({
-          key: showCurrentMarket ? STRING_KEYS.POSITION : STRING_KEYS.POSITIONS,
-        }),
+  const tabItems = [
+    {
+      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)}
-          />
-        ),
-      },
-      {
-        asChild: true,
-        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)}
+        />
+      ),
+    },
+    {
+      value: InfoSection.Orders,
+      label: stringGetter({ key: STRING_KEYS.ORDERS }),

-        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}
+      slotRight: isWaitingForOrderToIndex ? (
+        <Styled.LoadingSpinner />
+      ) : (
+        ordersTagNumber && (
+          <Tag type={TagType.Number} isHighlighted={hasUnseenOrderUpdates}>
+            {ordersTagNumber}
          </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 }),
+      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 }),

-      //   tag: shortenNumberForDisplay(
-      //     showCurrentMarket ? numFundingPayments : numTotalFundingPayments
-      //   ),
-      //   content: (
-      //     <FundingPaymentsTable currentMarket={showCurrentMarket ? currentMarket?.id : undefined} />
-      //   ),
-      // },
-    ],
-    [
-      stringGetter,
-      currentMarketId,
-      showCurrentMarket,
-      isTablet,
-      isWaitingForOrderToIndex,
-      isAccountViewOnly,
-      ordersTagNumber,
-      fillsTagNumber,
-      hasUnseenFillUpdates,
-      hasUnseenOrderUpdates,
-    ]
-  );
+      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} />
+    //   ),
+    // },
+  ];

  return isTablet ? (
    <MobileTabs defaultValue={InfoSection.Position} items={tabItems} withBorders={false} />
@@ -1,4 +1,6 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+import styled, { AnyStyledComponent } from 'styled-components';

 import { TradeLayouts } from '@/constants/layout';
 import { STRING_KEYS } from '@/constants/localization';
@@ -7,9 +9,11 @@ import { useStringGetter } from '@/hooks';

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

-import { CanvasOrderbook } from '@/views/CanvasOrderbook';
+import { Orderbook, orderbookMixins, OrderbookScrollBehavior } from '@/views/tables/Orderbook';
 import { LiveTrades } from '@/views/tables/LiveTrades';

+import { getCurrentMarketId } from '@/state/perpetualsSelectors';
+
 enum Tab {
  Orderbook = 'Orderbook',
  Trades = 'Trades',
@@ -23,22 +27,29 @@ const HISTOGRAM_SIDES_BY_LAYOUT = {

 export const VerticalPanel = ({ tradeLayout }: { tradeLayout: TradeLayouts }) => {
  const stringGetter = useStringGetter();
+
  const [value, setValue] = useState(Tab.Orderbook);
+  const [scrollBehavior, setScrollBehavior] = useState<OrderbookScrollBehavior>('snapToCenter');
+
+  const marketId = useSelector(getCurrentMarketId);
+
+  useEffect(() => {
+    setScrollBehavior('snapToCenter');
+  }, [marketId]);

  return (
-    <Tabs
+    <Styled.Tabs
      fullWidthTabs
      value={value}
      onValueChange={(value: Tab) => {
+        setScrollBehavior('snapToCenter');
        setValue(value);
      }}
      items={[
        {
-          asChild: true,
-          content: <CanvasOrderbook histogramSide={HISTOGRAM_SIDES_BY_LAYOUT[tradeLayout]} />,
+          content: <Orderbook histogramSide={HISTOGRAM_SIDES_BY_LAYOUT[tradeLayout]} />,
          label: stringGetter({ key: STRING_KEYS.ORDERBOOK_SHORT }),
          value: Tab.Orderbook,
-          forceMount: true,
        },
        {
          content: <LiveTrades histogramSide={HISTOGRAM_SIDES_BY_LAYOUT[tradeLayout]} />,
@@ -46,7 +57,26 @@ export const VerticalPanel = ({ tradeLayout }: { tradeLayout: TradeLayouts }) =>
          value: Tab.Trades,
        },
      ]}
+      onWheel={() => setScrollBehavior('free')}
      withTransitions={false}
+      isShowingOrderbook={value === Tab.Orderbook}
+      scrollBehavior={scrollBehavior}
+      // style={{
+      //   scrollSnapType: {
+      //     'snapToCenter': 'y mandatory',
+      //     'free': 'none',
+      //     'snapToCenterUnlessHovered': 'none',
+      //   }[scrollBehavior],
+      // }}
    />
  );
 };
+
+const Styled: Record<string, AnyStyledComponent> = {};
+
+Styled.Tabs = styled(Tabs)<{
+  isShowingOrderbook: boolean;
+  scrollBehavior: OrderbookScrollBehavior;
+}>`
+  ${orderbookMixins.scrollArea}
+`;
@@ -1,8 +1,10 @@
 import { createSelector } from 'reselect';

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

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

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

 import {
-  type AbacusOrderStatuses,
  type SubaccountOrder,
  type SubaccountFill,
  type SubaccountFundingPayment,
@@ -44,6 +43,7 @@ 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,14 +258,6 @@ 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
@@ -274,7 +266,8 @@ export const getTradeInfoNumbers = createSelector(
  [getExistingOpenPositions, getSubaccountOrders, getSubaccountFills, getSubaccountFundingPayments],
  (positions, orders, fills, fundingPayments) => ({
    numTotalPositions: positions?.length,
-    numTotalOpenOrders: orders?.filter((order) => isOpenOrderStatus(order.status)).length,
+    numTotalOpenOrders: orders?.filter((order) => order.status !== AbacusOrderStatus.cancelled)
+      .length,
    numTotalFills: fills?.length,
    numTotalFundingPayments: fundingPayments?.length,
  })
@@ -288,7 +281,8 @@ export const getCurrentMarketTradeInfoNumbers = createSelector(
  [getCurrentMarketOrders, getCurrentMarketFills, getCurrentMarketFundingPayments],
  (marketOrders, marketFills, marketFundingPayments) => {
    return {
-      numOpenOrders: marketOrders?.filter((order) => isOpenOrderStatus(order.status)).length,
+      numOpenOrders: marketOrders?.filter((order) => order.status !== AbacusOrderStatus.cancelled)
+        .length,
      numFills: marketFills?.length,
      numFundingPayments: marketFundingPayments?.length,
    };
@@ -14,7 +14,6 @@ import { LocalStorageKey } from '@/constants/localStorage';
 import { DEFAULT_MARKETID } from '@/constants/markets';

 import { getLocalStorage } from '@/lib/localStorage';
-import { processOrderbookToCreateMap } from '@/lib/orderbookHelpers';

 interface CandleDataByMarket {
  data: Record<string, Candle[]>;
@@ -27,13 +26,6 @@ export interface PerpetualsState {
  liveTrades?: Record<string, MarketTrade[]>;
  markets?: Record<string, PerpetualMarket>;
  orderbooks?: Record<string, MarketOrderbook>;
-  orderbooksMap?: Record<
-    string,
-    {
-      asks: Record<string, number>;
-      bids: Record<string, number>;
-    }
-  >;
  historicalFundings: Record<string, MarketHistoricalFunding[]>;
 }

@@ -43,7 +35,6 @@ const initialState: PerpetualsState = {
  liveTrades: {},
  markets: undefined,
  orderbooks: undefined,
-  orderbooksMap: undefined,
  historicalFundings: {},
 };

@@ -105,24 +96,12 @@ export const perpetualsSlice = createSlice({
    setOrderbook: (
      state: PerpetualsState,
      action: PayloadAction<{ orderbook?: Nullable<MarketOrderbook>; marketId: string }>
-    ) => {
-      state.orderbooks = merge({}, state.orderbooks, {
+    ) => ({
+      ...state,
+      orderbooks: merge({}, state.orderbooks, {
        [action.payload.marketId]: action.payload.orderbook,
-      });
-
-      const { newAsks, newBids } = processOrderbookToCreateMap({
-        orderbookMap: state.orderbooksMap?.[action.payload.marketId],
-        newOrderbook: action.payload.orderbook,
-      });
-
-      state.orderbooksMap = {
-        ...(state.orderbooksMap ?? {}),
-        [action.payload.marketId]: {
-          asks: newAsks,
-          bids: newBids,
-        },
-      };
-    },
+      }),
+    }),
    setTvChartResolution: (
      state: PerpetualsState,
      action: PayloadAction<{ marketId: string; resolution: string }>
@@ -26,12 +26,7 @@ export const calculateFundingRateHistory = createSelector(
    return data.map(({ effectiveAtMilliseconds, rate }) => ({
      time: effectiveAtMilliseconds,
      fundingRate: rate,
-      direction:
-        rate === 0
-          ? FundingDirection.None
-          : rate < 0
-          ? FundingDirection.ToLong
-          : FundingDirection.ToShort,
+      direction: rate < 0 ? FundingDirection.ToLong : FundingDirection.ToShort,
    }));
  }
 );
@@ -7,6 +7,7 @@ import { mapCandle } from '@/lib/tradingView/utils';
 import type { RootState } from './_store';

 /**
+ * @param state
 * @returns marketId of the market the user is currently viewing
 */
 export const getCurrentMarketId = (state: RootState) => state.perpetuals.currentMarketId;
@@ -20,6 +21,7 @@ export const getCurrentMarketAssetId = (state: RootState) => {
 };

 /**
+ * @param state
 * @returns Record of PerpetualMarket indexed by MarketId
 */
 export const getPerpetualMarkets = (state: RootState) => state.perpetuals.markets;
@@ -32,11 +34,13 @@ export const getMarketData = (marketId: string) => (state: RootState) =>
  getPerpetualMarkets(state)?.[marketId];

 /**
+ * @param state
 * @returns marketIds of all markets
 */
 export const getMarketIds = (state: RootState) => Object.keys(getPerpetualMarkets(state) ?? []);

 /**
+ * @param state
 * @returns PerpetualMarket data of the market the user is currently viewing
 */
 export const getCurrentMarketData = (state: RootState) => {
@@ -45,6 +49,7 @@ export const getCurrentMarketData = (state: RootState) => {
 };

 /**
+ * @param state
 * @returns MarketConfig data of the market the user is currently viewing
 */
 export const getCurrentMarketConfig = (state: RootState) => getCurrentMarketData(state)?.configs;
@@ -57,11 +62,13 @@ export const getMarketConfig = (marketId: string) => (state: RootState) =>
  getMarketData(marketId)(state)?.configs;

 /**
+ * @param state
 * @returns Record of list of MarketTrades indexed by marketId
 */
 export const getLiveTrades = (state: RootState) => state.perpetuals.liveTrades;

 /**
+ * @param state
 * @returns List of MarketTrades of the market the user is currently viewing
 */
 export const getCurrentMarketLiveTrades = (state: RootState) => {
@@ -71,11 +78,13 @@ export const getCurrentMarketLiveTrades = (state: RootState) => {
 };

 /**
+ * @param state
 * @returns Record of subscribed or previously subscribed Orderbook data, indexed by marketId.
 */
 export const getOrderbooks = (state: RootState) => state.perpetuals.orderbooks;

 /**
+ * @param state
 * @returns Orderbook data for the market the user is currently viewing
 */
 export const getCurrentMarketOrderbook = (state: RootState) => {
@@ -85,20 +94,13 @@ export const getCurrentMarketOrderbook = (state: RootState) => {
 };

 /**
- * @returns Orderbook data as a Map of price and size for the current market
- */
-export const getCurrentMarketOrderbookMap = (state: RootState) => {
-  const orderbookMap = state.perpetuals.orderbooksMap;
-  const currentMarketId = getCurrentMarketId(state);
-  return orderbookMap?.[currentMarketId || ''];
-};
-
-/**
+ * @param state
 * @returns Record of historical funding indexed by marketId.
 */
 export const getHistoricalFundings = (state: RootState) => state.perpetuals.historicalFundings;

 /**
+ * @param state
 * @returns Historical funding data for the market the user is currently viewing
 */
 export const getCurrentMarketHistoricalFundings = createSelector(
@@ -108,6 +110,7 @@ export const getCurrentMarketHistoricalFundings = createSelector(
 );

 /**
+ * @param state
 * @returns Mid market price for the market the user is currently viewing
 */
 export const getCurrentMarketMidMarketPrice = (state: RootState) => {
@@ -147,6 +150,7 @@ export const getSelectedResolutionForMarket = (marketId: string) => (state: Root
  state.perpetuals.candles?.[marketId]?.selectedResolution;

 /**
+ * @param state
 * @returns Current market's next funding rate
 */
 export const getCurrentMarketNextFundingRate = createSelector(
@@ -0,0 +1,180 @@
+:root {
+  /* Parameters */
+
+  /*
+    --layer-base-hue
+    --layer-base-saturation
+    --layer-base-lightness
+
+    --color-text-0
+    --color-text-1
+    --color-text-2
+
+    --color-accent
+    --color-positive
+    --color-negative
+    --color-success
+    --color-warning
+    --color-error
+    --color-favorite
+  */
+
+  /* Computed: Layers */
+
+  --color-layer-0: hsl(
+    var(--layer-base-hue),
+    var(--layer-base-saturation),
+    calc(var(--layer-base-lightness) - 12%)
+  );
+
+  --color-layer-1: hsl(
+    var(--layer-base-hue),
+    var(--layer-base-saturation),
+    calc(var(--layer-base-lightness) - 8%)
+  );
+
+  --color-layer-2: hsl(
+    var(--layer-base-hue),
+    var(--layer-base-saturation),
+    calc(var(--layer-base-lightness) - 4%)
+  );
+
+  --color-layer-3: hsl(
+    var(--layer-base-hue),
+    var(--layer-base-saturation),
+    var(--layer-base-lightness)
+  );
+
+  --color-layer-4: hsl(
+    var(--layer-base-hue),
+    var(--layer-base-saturation),
+    calc(var(--layer-base-lightness) + 4%)
+  );
+
+  --color-layer-5: hsl(
+    var(--layer-base-hue),
+    calc(var(--layer-base-saturation) - 2%),
+    calc(var(--layer-base-lightness) + 7%)
+  );
+
+  --color-layer-6: hsl(
+    var(--layer-base-hue),
+    calc(var(--layer-base-saturation) - 4%),
+    calc(var(--layer-base-lightness) + 10%)
+  );
+
+  --color-layer-7: hsla(var(--layer-base-hue), 0%, 100%, 0.07);
+
+  --color-gradient-base-0: hsl(
+    var(--layer-base-hue),
+    calc(var(--layer-base-saturation) - 5%),
+    var(--layer-base-lightness)
+  );
+
+  --color-gradient-base-1: hsl(
+    var(--layer-base-hue),
+    calc(var(--layer-base-saturation) - 1%),
+    calc(var(--layer-base-lightness) + 7%)
+  );
+
+  /* Computed: Borders */
+
+  --color-border: var(--color-layer-5);
+  --color-border-white: hsla(0, 0%, 100%, 0.2);
+  --color-border-red: hsla(360, 73%, 61%, 0.2);
+}
+
+/* Theme: Classic (default) */
+:root {
+  /* Constants */
+
+  --theme-classic-hue-purple: 240;
+  --theme-classic-color-green: hsl(159, 67%, 39%);
+  --theme-classic-color-yellow: hsl(36, 100%, 64%);
+  --theme-classic-color-red: hsl(360, 73%, 61%);
+
+  /* Parameters */
+
+  --layer-base-hue: var(--theme-classic-hue-purple);
+  --layer-base-saturation: 20%;
+  --layer-base-lightness: 16%;
+
+  --color-text-0: hsl(245, 11%, 55%);
+  --color-text-1: hsl(244, 18%, 81%);
+  --color-text-2: hsl(240, 43%, 99%);
+
+  --color-accent: hsl(var(--theme-classic-hue-purple), 100%, 70%);
+  --color-positive: var(--theme-classic-color-green);
+  --color-negative: var(--theme-classic-color-red);
+  --color-success: var(--theme-classic-color-green);
+  --color-warning: var(--theme-classic-color-yellow);
+  --color-error: var(--theme-classic-color-red);
+  --color-favorite: var(--theme-classic-color-yellow);
+
+  --color-white: #fff;
+  --color-black: #000;
+
+  --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);
+  --color-risk-high: var(--theme-classic-color-red);
+}
+
+/* Theme: Light */
+:root.theme-light {
+  /* Constants */
+
+  --theme-light-hue-purple: 234;
+  --theme-light-color-green: hsl(159, 67%, 39%);
+  --theme-light-color-yellow: hsl(36, 100%, 64%);
+  --theme-light-color-red: hsl(360, 73%, 61%);
+
+  /* Parameters */
+
+  --layer-base-hue: var(--theme-light-hue-purple);
+  --layer-base-saturation: 0%;
+  --layer-base-lightness: 86%;
+
+  --color-text-0: hsl(0, 0%, 55%);
+  --color-text-1: hsl(0, 0%, 40%);
+  --color-text-2: hsl(0, 0%, 5%);
+
+  --color-accent: hsl(var(--theme-light-hue-purple), 100%, 70%);
+  --color-positive: var(--theme-light-color-green);
+  --color-negative: var(--theme-light-color-red);
+  --color-success: var(--theme-light-color-green);
+  --color-warning: var(--theme-light-color-yellow);
+  --color-error: var(--theme-light-color-red);
+  --color-favorite: var(--theme-light-color-yellow);
+}
+
+/* Theme: Dark */
+:root.theme-dark {
+  /* Constants */
+
+  --theme-dark-hue-purple: 240;
+  --theme-dark-color-green: hsl(159, 67%, 39%);
+  --theme-dark-color-yellow: hsl(36, 100%, 64%);
+  --theme-dark-color-red: hsl(360, 73%, 61%);
+
+  /* Parameters */
+
+  --layer-base-hue: 0;
+  --layer-base-saturation: 0%;
+  --layer-base-lightness: 16%;
+
+  --color-text-0: hsl(0, 0%, 47%);
+  --color-text-1: hsl(0, 0%, 67%);
+  --color-text-2: hsl(0, 0%, 100%);
+
+  --color-accent: hsl(var(--theme-dark-hue-purple), 100%, 70%);
+  --color-positive: var(--theme-dark-color-green);
+  --color-negative: var(--theme-dark-color-red);
+  --color-success: var(--theme-dark-color-green);
+  --color-warning: var(--theme-dark-color-yellow);
+  --color-error: var(--theme-dark-color-red);
+  --color-favorite: var(--theme-dark-color-yellow);
+}
@@ -0,0 +1,125 @@
+import { css } from 'styled-components';
+
+import { type RiskLevels } from '@/constants/abacus';
+
+import { AppTheme } from '@/state/configs';
+
+const BaseElements = {
+  [AppTheme.Classic]: {
+    hue: 240,
+    saturation: 20,
+    lightness: 16,
+  },
+  [AppTheme.Dark]: {
+    hue: 0,
+    saturation: 0,
+    lightness: 16,
+  },
+  [AppTheme.Light]: {
+    hue: 234,
+    saturation: 0,
+    lightness: 86,
+  },
+};
+
+const LayerColors = ({ theme }: { theme: AppTheme }) => {
+  const { hue, saturation, lightness } = BaseElements[theme];
+
+  return {
+    layer0: `hsl(${hue}, ${saturation}%, ${lightness - 12}%)`,
+    layer1: `hsl(${hue}, ${saturation}%, ${lightness - 8}%)`,
+    layer2: `hsl(${hue}, ${saturation}%, ${lightness - 4}%)`,
+    layer3: `hsl(${hue}, ${saturation}%, ${lightness}%)`,
+    layer4: `hsl(${hue}, ${saturation}%, ${lightness + 4}%)`,
+    layer5: `hsl(${hue}, ${saturation - 2}%, ${lightness + 7}%)`,
+    layer6: `hsl(${hue}, ${saturation - 4}%, ${lightness + 10}%)`,
+  };
+};
+
+const AccentColor = ({ theme }: { theme: AppTheme }) => {
+  const purpleHue = {
+    Classic: 240,
+    Dark: 240,
+    Light: 234,
+  }[theme];
+
+  return {
+    accent: `hsl(${purpleHue}, 100%, 70%)`,
+  };
+};
+
+export const Colors = {
+  [AppTheme.Classic]: {
+    ...LayerColors({ theme: AppTheme.Classic }),
+    text0: 'hsl(245, 11%, 55%)',
+    text1: 'hsl(244, 18%, 81%)',
+    text2: 'hsl(240, 43%, 99%)',
+
+    ...AccentColor({ theme: AppTheme.Classic }),
+    green: 'hsl(159, 67%, 39%)',
+    yellow: 'hsl(36, 100%, 64%)',
+    red: 'hsl(360, 73%, 61%)',
+
+    positive: 'hsl(159, 67%, 39%)',
+    negative: 'hsl(360, 73%, 61%)',
+
+    success: 'hsl(159, 67%, 39%)',
+    warning: 'hsl(36, 100%, 64%)',
+    error: 'hsl(360, 73%, 61%)',
+
+    favorite: 'hsl(36, 100%, 64%)',
+  },
+  [AppTheme.Dark]: {
+    ...LayerColors({ theme: AppTheme.Dark }),
+    text0: 'hsl(0, 0%, 47%)',
+    text1: 'hsl(0, 0%, 67%)',
+    text2: 'hsl(0, 0%, 100%)',
+
+    ...AccentColor({ theme: AppTheme.Dark }),
+    green: 'hsl(159, 67%, 39%)',
+    yellow: 'hsl(36, 100%, 64%)',
+    red: 'hsl(360, 73%, 61%)',
+
+    positive: 'hsl(159, 67%, 39%)',
+    negative: 'hsl(360, 73%, 61%)',
+
+    success: 'hsl(159, 67%, 39%)',
+    warning: 'hsl(36, 100%, 64%)',
+    error: 'hsl(360, 73%, 61%)',
+
+    favorite: 'hsl(36, 100%, 64%)',
+  },
+  [AppTheme.Light]: {
+    ...LayerColors({ theme: AppTheme.Light }),
+    text0: 'hsl(0, 0%, 55%)',
+    text1: 'hsl(0, 0%, 40%)',
+    text2: 'hsl(0, 0%, 5%)',
+
+    ...AccentColor({ theme: AppTheme.Light }),
+    green: 'hsl(159, 67%, 39%)',
+    yellow: 'hsl(36, 100%, 64%)',
+    red: 'hsl(360, 73%, 61%)',
+
+    positive: 'hsl(159, 67%, 39%)',
+    negative: 'hsl(360, 73%, 61%)',
+
+    success: 'hsl(159, 67%, 39%)',
+    warning: 'hsl(36, 100%, 64%)',
+    error: 'hsl(360, 73%, 61%)',
+
+    favorite: 'hsl(36, 100%, 64%)',
+  },
+};
+
+export const UsageColorFromRiskLevel = (riskLevel: RiskLevels) =>
+  ({
+    low: css`
+      color: var(--color-risk-low);
+    `,
+    medium: css`
+      color: var(--color-risk-medium);
+    `,
+    high: css`
+      color: var(--color-risk-high);
+    `,
+  }[riskLevel.name]);
@@ -21,7 +21,7 @@ export const formMixins: Record<
    --input-radius: 0.5em;
    --input-height: var(--form-input-height);
    --input-width: 100%;
-    --input-backgroundColor: ${({ theme }) => theme.inputBackground};
+    --input-backgroundColor: var(--color-layer-4);
    --input-borderColor: var(--color-layer-6);

    ${layoutMixins.row}
@@ -1,42 +0,0 @@
-import { createGlobalStyle } from 'styled-components';
-
-export const GlobalStyle = createGlobalStyle`
-  :root {
-    --color-layer-0: ${({ theme }) => theme.layer0};
-    --color-layer-1: ${({ theme }) => theme.layer1};
-    --color-layer-2: ${({ theme }) => theme.layer2};
-    --color-layer-3: ${({ theme }) => theme.layer3};
-    --color-layer-4: ${({ theme }) => theme.layer4};
-    --color-layer-5: ${({ theme }) => theme.layer5};
-    --color-layer-6: ${({ theme }) => theme.layer6};
-    --color-layer-7: ${({ theme }) => theme.layer7};
-
-    --color-border: ${({ theme }) => theme.borderDefault};
-    --color-border-white: ${({ theme }) => theme.borderButton};
-    --color-border-red: ${({ theme }) => theme.borderDestructive};
-
-    --color-text-0: ${({ theme }) => theme.textTertiary};
-    --color-text-1: ${({ theme }) => theme.textSecondary};
-    --color-text-2: ${({ theme }) => theme.textPrimary};
-
-    --color-gradient-base-0: ${({ theme }) => theme.gradientBase0};
-    --color-gradient-base-1: ${({ theme }) => theme.gradientBase1};
-
-    --color-accent: ${({ theme }) => theme.accent};
-    --color-accent-faded: ${({ theme }) => theme.accentFaded};
-    --color-favorite: ${({ theme }) => theme.favorite};
-
-    --color-success: ${({ theme }) => theme.success};
-    --color-warning: ${({ theme }) => theme.warning};
-    --color-error: ${({ theme }) => theme.error};
-
-    --color-positive: ${({ theme }) => theme.positive};
-    --color-negative: ${({ theme }) => theme.negative};
-    --color-gradient-positive: ${({ theme }) => theme.positiveFaded};
-    --color-gradient-negative: ${({ theme }) => theme.negativeFaded};
-
-    --color-risk-low: ${({ theme }) => theme.riskLow};
-    --color-risk-medium: ${({ theme }) => theme.riskMedium};
-    --color-risk-high: ${({ theme }) => theme.riskHigh};
-  }
-`;
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Bill He	604ec43f3f	Use test flags instead	2023-12-05 14:26:38 -08:00
Bill He	0deced8545	Enable CCTP via Env Var	2023-12-04 20:30:15 -08:00
				`@@ -1 +0,0 @@`
				<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>