Do not block website if NobleClient cannot init, and other onboarding fixes

.ladle/components.tsx

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

package.json

@@ -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.3.2",
-    "@dydxprotocol/v4-client-js": "^1.0.17",
-    "@dydxprotocol/v4-localization": "^1.1.17",
+    "@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.22",
+    "@dydxprotocol/v4-client-js": "^1.0.11",
+    "@dydxprotocol/v4-localization": "^1.0.18",
     "@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",

public/configs/cctp.json

@@ -4,9 +4,38 @@
         "tokenAddress": "0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48",
         "name": "Ethereum"
     },
+    {
+        "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"
     }
 ]

public/configs/documentation.json

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

public/configs/env.json

@@ -1,7 +1,7 @@
 {
    "apps": {
       "ios": {
-         "scheme": "dydx-t-v4"
+         "scheme": "dydxv4"
       }
    },
    "deployments": {
@@ -39,7 +39,7 @@
    "environments": {
       "dydxprotocol-dev": {
          "name": "v4 Dev",
-         "ethereumChainId": "11155111",
+         "ethereumChainId": "5",
          "dydxChainId": "dydxprotocol-testnet",
          "chainName": "dYdX Chain",
          "chainLogo": "/dydx-chain.png",
@@ -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,7 +113,7 @@
       },
       "dydxprotocol-dev-2": {
          "name": "v4 Dev 2",
-         "ethereumChainId": "11155111",
+         "ethereumChainId": "5",
          "dydxChainId": "dydxprotocol-testnet",
          "chainName": "dYdX Chain",
          "chainLogo": "/dydx-chain.png",
@@ -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,7 +186,7 @@
       },
       "dydxprotocol-dev-4": {
          "name": "v4 Dev 4",
-         "ethereumChainId": "11155111",
+         "ethereumChainId": "5",
          "dydxChainId": "dydxprotocol-testnet",
          "chainName": "dYdX Chain",
          "chainLogo": "/dydx-chain.png",
@@ -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://noble-testnet-rpc.polkachu.com/"
          },
          "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,7 +259,7 @@
       },
       "dydxprotocol-dev-5": {
          "name": "v4 Dev 5",
-         "ethereumChainId": "11155111",
+         "ethereumChainId": "5",
          "dydxChainId": "dydxprotocol-testnet",
          "chainName": "dYdX Chain",
          "chainLogo": "/dydx-chain.png",
@@ -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,7 +332,7 @@
       },
       "dydxprotocol-staging": {
          "name": "v4 Staging",
-         "ethereumChainId": "11155111",
+         "ethereumChainId": "5",
          "dydxChainId": "dydxprotocol-testnet",
          "chainName": "dYdX Chain",
          "chainLogo": "/dydx-chain.png",
@@ -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,7 +407,7 @@
       },
       "dydxprotocol-staging-forced-update": {
          "name": "v4 Staging Forced Update",
-         "ethereumChainId": "11155111",
+         "ethereumChainId": "5",
          "dydxChainId": "dydxprotocol-testnet",
          "chainName": "dYdX Chain",
          "chainLogo": "/dydx-chain.png",
@@ -474,14 +473,14 @@
          "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",
@@ -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,7 +555,7 @@
       },
       "dydxprotocol-testnet": {
          "name": "v4 Public Testnet",
-         "ethereumChainId": "11155111",
+         "ethereumChainId": "5",
          "dydxChainId": "dydx-testnet-4",
          "chainName": "dYdX Chain",
          "chainLogo": "/dydx-chain.png",
@@ -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": [
@@ -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,7 +634,7 @@
       },
       "dydxprotocol-testnet-dydx": {
          "name": "v4 Public Testnet/dYdX",
-         "ethereumChainId": "11155111",
+         "ethereumChainId": "5",
          "dydxChainId": "dydx-testnet-4",
          "chainName": "dYdX Chain",
          "chainLogo": "/dydx-chain.png",
@@ -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,7 +710,7 @@
       },
       "dydxprotocol-testnet-nodefleet": {
          "name": "v4 Public Testnet/nodefleet",
-         "ethereumChainId": "11155111",
+         "ethereumChainId": "5",
          "dydxChainId": "dydx-testnet-4",
          "chainName": "dYdX Chain",
          "chainLogo": "/dydx-chain.png",
@@ -735,8 +734,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": [
@@ -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,7 +786,7 @@
       },
       "dydxprotocol-testnet-kingnodes": {
          "name": "v4 Public Testnet/KingNodes",
-         "ethereumChainId": "11155111",
+         "ethereumChainId": "5",
          "dydxChainId": "dydx-testnet-4",
          "chainName": "dYdX Chain",
          "chainLogo": "/dydx-chain.png",
@@ -811,8 +810,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": [
@@ -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,7 +862,7 @@
       },
       "dydxprotocol-testnet-liquify": {
          "name": "v4 Public Testnet/Liquify",
-         "ethereumChainId": "11155111",
+         "ethereumChainId": "5",
          "dydxChainId": "dydx-testnet-4",
          "chainName": "dYdX Chain",
          "chainLogo": "/dydx-chain.png",
@@ -887,8 +886,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": [
@@ -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,7 +938,7 @@
       },
       "dydxprotocol-testnet-polkachu": {
          "name": "v4 Public Testnet/Polkahcu",
-         "ethereumChainId": "11155111",
+         "ethereumChainId": "5",
          "dydxChainId": "dydx-testnet-4",
          "chainName": "dYdX Chain",
          "chainLogo": "/dydx-chain.png",
@@ -963,8 +962,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": [
@@ -1006,7 +1005,7 @@
       },
       "dydxprotocol-testnet-bware": {
          "name": "v4 Public Testnet/BWare",
-         "ethereumChainId": "11155111",
+         "ethereumChainId": "5",
          "dydxChainId": "dydx-testnet-4",
          "chainName": "dYdX Chain",
          "chainLogo": "/dydx-chain.png",
@@ -1030,8 +1029,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": [
@@ -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]",

public/configs/exchanges.json

@@ -1,8 +0,0 @@
-[
-  {
-      "name": "coinbase",
-      "label": "Coinbase",
-      "icon": "/exchanges/coinbase.png",
-      "depositType": "noble"
-  }
-]

public/configs/markets.json

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

public/dots-background-2.svg

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

src/App.tsx

@@ -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 = () => {

src/components/Accordion.stories.tsx

@@ -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.',
-    },
-  ],
-};

src/components/Accordion.tsx

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

src/components/AssetIcon.tsx

@@ -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> = {};
 

src/components/Canvas.tsx

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

src/components/Checkbox.stories.tsx

@@ -5,7 +5,7 @@ import { Checkbox, CheckboxProps } from '@/components/Checkbox';
 
 import { StoryWrapper } from '.ladle/components';
 
-export const CheckboxStory: Story<CheckboxProps> = (args) => {
+export const Checkboxes: Story<CheckboxProps> = (args) => {
   const [isChecked, setIsChecked] = useState(false);
 
   return (
@@ -21,12 +21,4 @@ export const CheckboxStory: Story<CheckboxProps> = (args) => {
   );
 };
 
-CheckboxStory.args = {};
-
-CheckboxStory.argTypes = {
-  disabled: {
-    options: [true, false],
-    control: { type: 'select' },
-    defaultValue: false,
-  }
-}
+Checkboxes.args = {};

src/components/Checkbox.tsx

@@ -1,4 +1,4 @@
-import styled, { css, type AnyStyledComponent } from 'styled-components';
+import styled, { type AnyStyledComponent } from 'styled-components';
 import { Root, Indicator } from '@radix-ui/react-checkbox';
 import { CheckIcon } from '@radix-ui/react-icons';
 
@@ -9,7 +9,6 @@ type ElementProps = {
   onCheckedChange: (checked: boolean) => void;
   id?: string;
   label?: React.ReactNode;
-  disabled?: boolean;
 };
 
 type StyleProps = {
@@ -24,15 +23,14 @@ export const Checkbox: React.FC<CheckboxProps> = ({
   onCheckedChange,
   id,
   label,
-  disabled
 }) => (
   <Styled.Container>
-    <Styled.Root className={className} checked={checked} disabled={disabled} onCheckedChange={onCheckedChange} id={id}>
+    <Styled.Root className={className} checked={checked} onCheckedChange={onCheckedChange} id={id}>
       <Styled.Indicator>
         <CheckIcon />
       </Styled.Indicator>
     </Styled.Root>
-    {label && <Styled.label disabled={disabled} htmlFor={id}>{label}</Styled.label>}
+    {label && <label htmlFor={id}>{label}</label>}
   </Styled.Container>
 );
 
@@ -50,23 +48,17 @@ Styled.Container = styled.div`
 
 Styled.Root = styled(Root)`
   --checkbox-backgroundColor: var(--color-layer-0);
-  --checkbox-borderColor: var(--color-border);
 
   min-width: 1.25rem;
   height: 1.25rem;
 
   border-radius: 0.375rem;
-  border: var(--border-width) solid var(--checkbox-borderColor);
+  border: var(--border-width) solid var(--color-border);
   background-color: var(--checkbox-backgroundColor);
 
   &[data-state='checked'] {
     --checkbox-backgroundColor: var(--color-accent);
   }
-
-  &[data-disabled] {
-    cursor: not-allowed;
-    --checkbox-backgroundColor: var(--color-layer-1);
-  }
 `;
 
 Styled.Indicator = styled(Indicator)`
@@ -76,11 +68,3 @@ Styled.Indicator = styled(Indicator)`
 
   color: var(--color-text-2);
 `;
-
-Styled.label = styled.div<{ disabled: boolean; }>`
-  color: var(--color-text-2);
-
-  ${({disabled}) => disabled && css`
-    color: var(--color-text-0);
-  `}
-`;

src/components/ContentSection.tsx

@@ -11,5 +11,6 @@ export const DetachedScrollableSection = styled.section`
 
 export const AttachedExpandingSection = styled.section`
   ${layoutMixins.contentSectionAttached}
+  ${layoutMixins.expandingColumnWithHeader}
   gap: var(--border-width);
 `;

src/components/DiffArrow.stories.tsx

@@ -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',
   },

src/components/DiffArrow.tsx

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

src/components/Icon.tsx

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

src/components/MarginUsageRing.tsx

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

src/components/Panel.tsx

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

src/components/QrCode.tsx

@@ -11,7 +11,6 @@ type ElementProps = {
 };
 
 type StyleProps = {
-  className?: string;
   hasLogo?: boolean;
   size?: number;
 };
@@ -19,7 +18,7 @@ type StyleProps = {
 const DARK_LOGO_MARK_URL = '/logos/logo-mark-dark.svg';
 const LIGHT_LOGO_MARK_URL = '/logos/logo-mark-light.svg';
 
-export const QrCode = ({ className, value, hasLogo, size = 300 }: ElementProps & StyleProps) => {
+export const QrCode = ({ value, hasLogo, size = 300 }: ElementProps & StyleProps) => {
   const ref = useRef<HTMLDivElement>(null);
   const appTheme: AppTheme = useSelector(getAppTheme);
 
@@ -75,7 +74,7 @@ export const QrCode = ({ className, value, hasLogo, size = 300 }: ElementProps &
     }
   }, [appTheme, hasLogo]);
 
-  return <Styled.QrCode className={className} ref={ref} />;
+  return <Styled.QrCode ref={ref} />;
 };
 
 const Styled: Record<string, AnyStyledComponent> = {};

src/components/Switch.tsx

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

src/components/Table.tsx

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

src/components/TimeoutButton.tsx

@@ -8,7 +8,6 @@ import { Button, type ButtonStateConfig, type ButtonProps } from '@/components/B
 
 type ElementProps = {
   timeoutInSeconds: number;
-  slotFinal?: ReactNode;
 } & ButtonProps;
 
 export type TimeoutButtonProps = ElementProps;
@@ -16,7 +15,6 @@ export type TimeoutButtonProps = ElementProps;
 export const TimeoutButton = ({
   children,
   timeoutInSeconds,
-  slotFinal,
   ...otherProps
 }: TimeoutButtonProps) => {
   const [timeoutDeadline] = useState(Date.now() + timeoutInSeconds * 1000);
@@ -25,8 +23,6 @@ export const TimeoutButton = ({
 
   const secondsLeft = Math.max(0, (timeoutDeadline - now) / 1000);
 
-  if (slotFinal && secondsLeft <= 0) return slotFinal;
-
   return (
     <Button
       {...otherProps}

src/components/ToastArea.tsx

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

src/components/UsageBars.tsx

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

src/components/WithTooltip.tsx

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

src/components/visx/TooltipContent.tsx

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

src/components/visx/XYChartWithPointerEvents.tsx

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

src/constants/abacus.ts

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

src/constants/analytics.ts

@@ -96,7 +96,6 @@ export type AnalyticsEventData<T extends AnalyticsEvent> =
         elapsedTime?: number;
         blockHeight?: number;
         indexerBlockHeight?: number;
-        trailingBlocks?: number;
       }
     : // Navigation
     T extends AnalyticsEvent.NavigatePage

src/constants/charts.ts

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

src/constants/markets.ts

@@ -25,5 +25,40 @@ 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',
+  'ARB-USD',
+  'CRV-USD',
+  'BLUR-USD',
+  'FIL-USD',
+  'XLM-USD',
+  'PEPE-USD',
+  'WLD-USD',
+  'SEI-USD',
+  'LTC-USD',
+  'BCH-USD',
+];

src/constants/notifications.ts

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

src/constants/numbers.ts

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

src/constants/orderbook.ts

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

src/constants/styles/base.ts

@@ -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',
-}

src/constants/styles/colors.ts

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

src/constants/tooltips/deposit.ts

@@ -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 }),

src/constants/tooltips/trade.ts

@@ -138,10 +138,6 @@ export const tradeTooltips: TooltipStrings = {
     title: stringGetter({ key: TOOLTIP_STRING_KEYS.POST_ONLY_TITLE }),
     body: stringGetter({ key: TOOLTIP_STRING_KEYS.POST_ONLY_BODY }),
   }),
-  'post-only-timeinforce-gtt': ({ stringGetter }) => ({
-    title: stringGetter({ key: TOOLTIP_STRING_KEYS.POST_ONLY_TIMEINFORCE_GTT_TITLE }),
-    body: stringGetter({ key: TOOLTIP_STRING_KEYS.POST_ONLY_TIMEINFORCE_GTT_BODY }),
-  }),
   'price-impact': ({ stringGetter }) => ({
     title: stringGetter({ key: TOOLTIP_STRING_KEYS.PRICE_IMPACT_TITLE }),
     body: stringGetter({ key: TOOLTIP_STRING_KEYS.PRICE_IMPACT_BODY }),
@@ -155,14 +151,6 @@ export const tradeTooltips: TooltipStrings = {
     body: stringGetter({ key: TOOLTIP_STRING_KEYS.REDUCE_ONLY_BODY }),
     learnMoreLink: urlConfigs?.reduceOnlyLearnMore,
   }),
-  'reduce-only-execution-ioc-fok': ({ stringGetter }) => ({
-    title: stringGetter({ key: TOOLTIP_STRING_KEYS.REDUCE_ONLY_EXECUTION_IOC_FOK_TITLE }),
-    body: stringGetter({ key: TOOLTIP_STRING_KEYS.REDUCE_ONLY_EXECUTION_IOC_FOK_BODY }),
-  }),
-  'reduce-only-timeinforce-ioc-fok': ({ stringGetter }) => ({
-    title: stringGetter({ key: TOOLTIP_STRING_KEYS.REDUCE_ONLY_TIMEINFORCE_IOC_FOK_TITLE }),
-    body: stringGetter({ key: TOOLTIP_STRING_KEYS.REDUCE_ONLY_TIMEINFORCE_IOC_FOK_BODY }),
-  }),
   spread: () => ({
     title: 'Spread',
     body: 'The difference in price between the highest bid (the price a buyer is willing to buy for) and lowest ask (the price a seller is willing to sell for) an asset.',

src/constants/tooltips/withdraw.ts

@@ -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 }),

src/constants/wallets.ts

@@ -33,7 +33,6 @@ export enum WalletConnectionType {
   CosmosSigner = 'CosmosSigner',
   InjectedEip1193 = 'injectedEip1193',
   WalletConnect2 = 'walletConnect2',
-  TestWallet = 'TestWallet',
 }
 
 export enum WalletErrorType {
@@ -69,9 +68,6 @@ export const walletConnectionTypes: Record<WalletConnectionType, WalletConnectio
   [WalletConnectionType.CosmosSigner]: {
     name: 'CosmosSigner',
   },
-  [WalletConnectionType.TestWallet]: {
-    name: 'TestWallet',
-  },
 };
 
 // Wallets
@@ -92,7 +88,7 @@ export enum WalletType {
   TokenPocket = 'TOKEN_POCKET',
   TrustWallet = 'TRUST_WALLET',
   WalletConnect2 = 'WALLETCONNECT_2',
-  TestWallet = 'TEST_WALLET',
+  // TestWallet = 'TEST_WALLET',
   OtherWallet = 'OTHER_WALLET',
 }
 
@@ -247,12 +243,6 @@ export const wallets: Record<WalletType, WalletConfig> = {
     icon: KeplrIcon,
     connectionTypes: [WalletConnectionType.CosmosSigner],
   },
-  [WalletType.TestWallet]: {
-    type: WalletType.TestWallet,
-    stringKey: STRING_KEYS.TEST_WALLET,
-    icon: GenericWalletIcon,
-    connectionTypes: [WalletConnectionType.TestWallet],
-  },
 };
 
 // Injected EIP-1193 Providers
@@ -364,5 +354,3 @@ export enum DydxChainAsset {
   USDC = 'usdc',
   CHAINTOKEN = 'chain',
 }
-
-export const TEST_WALLET_EVM_ADDRESS: EvmAddress = '0x0000000000000000000000000000000000000000';

src/hooks/Orderbook/index.ts

@@ -1,4 +0,0 @@
-export * from './useCenterOrderbook';
-export * from './useSpreadRowScrollListener';
-export * from './useDrawOrderbook';
-export * from './useOrderbookValues';

src/hooks/Orderbook/useCenterOrderbook.ts

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

src/hooks/Orderbook/useDrawOrderbook.ts

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

src/hooks/Orderbook/useOrderbookValues.ts

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

src/hooks/Orderbook/useSpreadRowScrollListener.ts

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

src/hooks/tradingView/useTradingViewTheme.ts

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

src/hooks/useAccounts.tsx

@@ -6,22 +6,14 @@ import { NOBLE_BECH32_PREFIX, LocalWallet, type Subaccount } from '@dydxprotocol
 
 import { OnboardingGuard, OnboardingState, type EvmDerivedAddresses } from '@/constants/account';
 import { DialogTypes } from '@/constants/dialogs';
-import { STRING_KEYS } from '@/constants/localization';
 import { LocalStorageKey, LOCAL_STORAGE_VERSIONS } from '@/constants/localStorage';
-import {
-  DydxAddress,
-  EvmAddress,
-  PrivateInformation,
-  TEST_WALLET_EVM_ADDRESS,
-  WalletType,
-} from '@/constants/wallets';
+import { DydxAddress, EvmAddress, PrivateInformation } from '@/constants/wallets';
 
 import { setOnboardingState, setOnboardingGuard } from '@/state/account';
 import { forceOpenDialog } from '@/state/dialogs';
 
 import abacusStateManager from '@/lib/abacus';
 import { log } from '@/lib/telemetry';
-import { testFlags } from '@/lib/testFlags';
 
 import { useDydxClient } from './useDydxClient';
 import { useLocalStorage } from './useLocalStorage';
@@ -161,7 +153,6 @@ const useAccountsContext = () => {
 
   // dYdX wallet / onboarding state
   const [localDydxWallet, setLocalDydxWallet] = useState<LocalWallet>();
-  const [localNobleWallet, setLocalNobleWallet] = useState<LocalWallet>();
   const [hdKey, setHdKey] = useState<PrivateInformation>();
 
   const dydxAccounts = useMemo(() => localDydxWallet?.accounts, [localDydxWallet]);
@@ -171,11 +162,6 @@ const useAccountsContext = () => {
     [localDydxWallet]
   );
 
-  const nobleAddress = useMemo(
-    () => localNobleWallet?.address,
-    [localNobleWallet]
-  );
-
   const setWalletFromEvmSignature = async (signature: string) => {
     const { wallet, mnemonic, privateKey, publicKey } = await getWalletFromEvmSignature({
       signature,
@@ -192,26 +178,7 @@ const useAccountsContext = () => {
 
   useEffect(() => {
     (async () => {
-      if (walletType === WalletType.TestWallet) {
-        // Get override values. Use the testFlags value if it exists, otherwise use the previously
-        // saved value where possible. If neither exist, use a default garbage value.
-        const addressOverride: DydxAddress = testFlags.addressOverride as DydxAddress ||
-          evmDerivedAddresses?.[TEST_WALLET_EVM_ADDRESS]?.dydxAddress as DydxAddress ||
-          'dydx1';
-
-        dispatch(setOnboardingState(OnboardingState.WalletConnected));
-
-        // Set variables.
-        saveEvmDerivedAccount({
-          evmAddress: TEST_WALLET_EVM_ADDRESS,
-          dydxAddress: addressOverride,
-        });
-        const wallet = new LocalWallet();
-        wallet.address = addressOverride;
-        setLocalDydxWallet(wallet);
-
-        dispatch(setOnboardingState(OnboardingState.AccountConnected));
-      } else if (connectedDydxAddress && signerGraz) {
+      if (connectedDydxAddress && signerGraz) {
         dispatch(setOnboardingState(OnboardingState.WalletConnected));
         try {
           setLocalDydxWallet(await LocalWallet.fromOfflineSigner(signerGraz));
@@ -257,7 +224,6 @@ const useAccountsContext = () => {
       if (hdKey?.mnemonic) {
         const nobleWallet = await LocalWallet.fromMnemonic(hdKey.mnemonic, NOBLE_BECH32_PREFIX);
         abacusStateManager.setNobleWallet(nobleWallet);
-        setLocalNobleWallet(nobleWallet);
       }
     };
     setNobleWallet();
@@ -356,7 +322,6 @@ const useAccountsContext = () => {
     localDydxWallet,
     dydxAccounts,
     dydxAddress,
-    nobleAddress,
 
     // Onboarding state
     saveHasAcknowledgedTerms,

src/hooks/useAnalytics.ts

@@ -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]);

src/hooks/useApiState.ts

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

src/hooks/useAppTheme.tsx

@@ -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];
-}

src/hooks/useCurrentMarketId.ts

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

src/hooks/useMarketsData.ts

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

src/hooks/useNotificationTypes.tsx

@@ -28,7 +28,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 +80,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 +93,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 +102,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]
               );
@@ -183,8 +157,8 @@ export const notificationTypes: NotificationTypeConfig[] = [
           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
+          const transferType = type ??
+            fromChainId === ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId
               ? TransferNotificationTypes.Withdrawal
               : TransferNotificationTypes.Deposit;
 
@@ -223,7 +197,6 @@ export const notificationTypes: NotificationTypeConfig[] = [
                 />
               ),
               toastSensitivity: 'foreground',
-              groupKey: NotificationType.SquidTransfer,
             },
             [isFinished]
           );
@@ -269,7 +242,6 @@ export const notificationTypes: NotificationTypeConfig[] = [
               },
             }),
             toastSensitivity: 'foreground',
-            groupKey: NotificationType.ReleaseUpdates,
           },
           []
         );

src/hooks/useSubaccount.tsx

@@ -198,13 +198,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(

src/hooks/useWalletConnection.ts

@@ -1,8 +1,6 @@
 import { useCallback, useEffect, useState, useMemo } from 'react';
 import { useSelector } from 'react-redux';
 
-import { EvmDerivedAddresses } from '@/constants/account';
-import { STRING_KEYS } from '@/constants/localization';
 import { LocalStorageKey } from '@/constants/localStorage';
 import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
 
@@ -39,7 +37,6 @@ import { getWalletConnection, parseWalletError } from '@/lib/wallet';
 import { log } from '@/lib/telemetry';
 
 import { useStringGetter } from './useStringGetter';
-import { testFlags } from '@/lib/testFlags';
 
 export const useWalletConnection = () => {
   const stringGetter = useStringGetter();
@@ -107,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 {
@@ -140,14 +131,8 @@ export const useWalletConnection = () => {
               walletType: cosmosWalletType,
             });
           }
-        } else if (walletConnection.type === WalletConnectionType.TestWallet) {
-          saveEvmAddress(STRING_KEYS.TEST_WALLET as EvmAddress);
         } 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,
@@ -228,15 +213,6 @@ export const useWalletConnection = () => {
     setSelectedWalletType(walletType);
   };
 
-  // On page load, if testFlag.address is set, connect to the test wallet.
-  useEffect(() => {
-    (async () => {
-      if (testFlags.addressOverride) {
-        setSelectedWalletType(WalletType.TestWallet);
-      }
-    })();
-  }, []);
-
   return {
     // Wallet connection
     walletType,
@@ -252,12 +228,6 @@ export const useWalletConnection = () => {
     evmAddressWagmi,
     signerWagmi,
     publicClientWagmi,
-    isConnectedWagmi,
-    connectWallet: () =>
-      connectWallet({
-        walletType: selectedWalletType,
-        forceConnect: true,
-      }),
 
     // Wallet connection (Cosmos)
     dydxAddress,

src/icons/caret-down.svg

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

src/icons/cube.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>

src/icons/index.ts

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

src/icons/logo-short.tsx

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

src/icons/moon.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="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>

src/icons/plus.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>

src/icons/sun.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>

src/index.css

@@ -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; */

src/layout/NotificationsToastArea.tsx

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

src/layout/NotificationsToastArea/index.tsx

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

src/lib/abacus/dydxChainTransactions.ts

@@ -56,10 +56,6 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
     this.store = undefined;
   }
 
-  get isNobleClientConnected(): boolean {
-    return this.nobleClient?.isConnected ?? false;
-  }
-
   setStore(store: RootStore): void {
     this.store = store;
   }
@@ -173,10 +169,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 +212,8 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
         timeInForce as OrderTimeInForce,
         goodTilTimeInSeconds ?? 0,
         execution as OrderExecution,
-        postOnly ?? undefined,
-        reduceOnly ?? undefined,
+        postOnly,
+        reduceOnly,
         triggerPrice ?? undefined
       );
 
@@ -359,7 +351,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 +364,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,21 +391,23 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
     }
   }
 
-  async withdrawToNobleIBC(params: {
-    subaccountNumber: number;
-    amount: string;
-    ibcPayload: string;
-  }): Promise<string> {
+  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;
-
+      msgTypeUrl: string,
+      msg: any,
+    } = ibcPayload ? JSON.parse(ibcPayload) : undefined;
+  
     try {
       const msg = this.compositeClient.withdrawFromSubaccountMessage(
         new SubaccountClient(this.localWallet, subaccountNumber),
@@ -423,13 +415,7 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
       );
       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,
-        },
+        value: parsedIbcPayload.msg,
       };
 
       const tx = await this.compositeClient.send(
@@ -439,7 +425,7 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
       );
 
       return JSON.stringify({
-        txHash: hashFromTx(tx?.hash),
+        txHash: hashFromTx(tx?.hash)
       });
     } catch (error) {
       log('DydxChainTransactions/withdrawToNobleIBC', error);
@@ -450,7 +436,10 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
     }
   }
 
-  async cctpWithdraw(params: { typeUrl: string; value: any }): Promise<string> {
+  async cctpWithdraw(params: {
+    typeUrl: string,
+    value: any,
+  }): Promise<string> {
     if (!this.nobleClient?.isConnected) {
       throw new Error('Missing nobleClient or localWallet');
     }
@@ -461,18 +450,17 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
         value: params.value,
       };
       const fee = await this.nobleClient.simulateTransaction([ibcMsg]);
-
+  
       // take out fee from amount before sweeping
-      const amount =
-        parseInt(ibcMsg.value.amount, 10) -
+      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);

src/lib/abacus/index.ts

@@ -84,7 +84,8 @@ class AbacusStateManager {
     );
 
     const appConfigs = AbacusAppConfig.Companion.forWeb;
-    appConfigs.squidVersion = AbacusAppConfig.SquidVersion.V2;
+    if (!isMainnet || testFlags.withCCTP)
+      appConfigs.squidVersion = AbacusAppConfig.SquidVersion.V2;
 
     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;
@@ -271,7 +263,11 @@ class AbacusStateManager {
   ) => this.stateManager.cancelOrder(orderId, callback);
 
   cctpWithdraw = (
-    callback: (success: boolean, parsingError: Nullable<ParsingError>, data: string) => void
+    callback: (
+      success: boolean,
+      parsingError: Nullable<ParsingError>,
+      data: string,
+    ) => void
   ): void => this.stateManager.commitCCTPWithdraw(callback);
 
   // ------ Utils ------ //

src/lib/orderbookHelpers.ts

@@ -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,
-  };
-};

src/lib/styles.ts

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

src/lib/testFlags.ts

@@ -5,30 +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 addressOverride():string {
-    return this.queryParams.address;
-  }
-
-  get showCEXDepositOption() {
-    return !!this.queryParams.cexdeposit;
+  get withCCTP() {
+    return !!this.queryParams.withCCTP;
   }
 }
 

src/lib/tradingView/utils.ts

@@ -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(),
     },
   };
 };

src/lib/wagmi.ts

@@ -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,
     },
   }),

src/lib/wallet/index.ts

@@ -62,12 +62,6 @@ export const getWalletConnection = ({
           type: WalletConnectionType.CosmosSigner,
         };
       }
-
-      case WalletConnectionType.TestWallet: {
-        return {
-          type: WalletConnectionType.TestWallet,
-        };
-      }
     }
   }
 };

src/pages/AlertsPage.tsx

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

src/pages/PrivacyPolicyPage.tsx

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

src/pages/Profile.tsx

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

src/pages/TermsOfUsePage.tsx

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

src/pages/portfolio/Portfolio.tsx

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

src/pages/rewards/DYDXBalancePanel.tsx

@@ -2,6 +2,7 @@ import type { ElementType } from 'react';
 import styled, { AnyStyledComponent } from 'styled-components';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 
+import breakpoints from '@/styles/breakpoints';
 import { layoutMixins } from '@/styles/layoutMixins';
 import { useAccountBalance, useAccounts, useTokenConfigs, useStringGetter } from '@/hooks';
 
@@ -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;

src/pages/rewards/GovernancePanel.tsx

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

src/pages/rewards/LaunchIncentivesPanel.tsx

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

src/pages/rewards/MigratePanel.tsx

@@ -7,6 +7,8 @@ import { ButtonAction, ButtonSize, ButtonType } from '@/constants/buttons';
 
 import { useAccountBalance, useBreakpoints, useStringGetter } from '@/hooks';
 
+import { breakpoints } from '@/styles';
+
 import { layoutMixins } from '@/styles/layoutMixins';
 
 import { Details } from '@/components/Details';
@@ -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);
-`;
+`;

src/pages/rewards/RewardsHelpPanel.tsx

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

src/pages/rewards/RewardsPage.tsx

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

src/pages/rewards/StakingPanel.tsx

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

src/pages/settings/Settings.tsx

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

src/pages/trade/HorizontalPanel.tsx

@@ -83,6 +83,7 @@ export const HorizontalPanel = ({ isOpen = true, setIsOpen }: ElementProps) => {
   const tabItems = useMemo(
     () => [
       {
+        asChild: true,
         value: InfoSection.Position,
         label: stringGetter({
           key: showCurrentMarket ? STRING_KEYS.POSITION : STRING_KEYS.POSITIONS,

src/pages/trade/VerticalPanel.tsx

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

src/state/accountCalculators.ts

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

src/state/accountSelectors.ts

@@ -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,
     };

src/state/inputsSelectors.ts

@@ -96,8 +96,6 @@ export const useTradeFormData = () => {
           needsGoodUntil,
           needsPostOnly,
           needsReduceOnly,
-          postOnlyTooltip,
-          reduceOnlyTooltip,
           timeInForceOptions,
         } = tradeOptions || {};
 
@@ -113,8 +111,6 @@ export const useTradeFormData = () => {
           needsGoodUntil,
           needsPostOnly,
           needsReduceOnly,
-          postOnlyTooltip,
-          reduceOnlyTooltip,
           timeInForceOptions,
 
           tradeErrors,

src/state/perpetuals.ts

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