do not use TESTNET_CHAIN_ID

.env.example

@@ -8,7 +8,6 @@ VITE_V3_TOKEN_ADDRESS=
 VITE_TOKEN_MIGRATION_URI=
 
 AMPLITUDE_API_KEY=
-AMPLITUDE_SERVER_URL=
 BUGSNAG_API_KEY=
 IOS_APP_ID=
 INTERCOM_APP_ID=

.ladle/components.tsx

@@ -5,32 +5,34 @@ import styled from 'styled-components';
 
 import { store } from '@/state/_store';
 
-import { GlobalStyle } from '@/styles/globalStyle';
-
 import { SelectMenu, SelectItem } from '@/components/SelectMenu';
 
-import { AppThemeAndColorModeProvider } from '@/hooks/useAppThemeAndColorMode';
-
-import {
-  AppTheme,
-  AppThemeSystemSetting,
-  AppColorMode,
-  setAppThemeSetting,
-  setAppColorMode,
-} 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');
-  const [colorMode, setColorMode] = useState(AppColorMode.GreenUp);
 
   useEffect(() => {
-    store.dispatch(setAppThemeSetting(theme));
+    switch (theme) {
-    store.dispatch(setAppColorMode(colorMode));
+      case 'Dark theme': {
-  }, [theme, colorMode]);
+        document?.documentElement?.classList.remove('theme-light');
+        document?.documentElement?.classList.add('theme-dark');
+        break;
+      }
+      case 'Light theme': {
+        document?.documentElement?.classList.remove('theme-dark');
+        document?.documentElement?.classList.add('theme-light');
+        break;
+      }
+      default: {
+        document?.documentElement?.classList.remove('theme-dark', 'theme-light');
+        break;
+      }
+    }
+  }, [theme]);
 
   useEffect(() => {
     store.dispatch(setLocaleLoaded(true));
@@ -40,49 +42,34 @@ export const StoryWrapper: React.FC<{ children: React.ReactNode }> = ({ children
     <Provider store={store}>
       <StoryHeader>
         <h4>Active Theme:</h4>
-        <SelectMenu value={theme} onValueChange={setTheme}>
+        <SelectMenu
+          value={theme}
+          onValueChange={setTheme}
+        >
           {[
             {
-              value: AppTheme.Classic,
+              value: 'Default theme',
               label: 'Default theme',
             },
             {
-              value: AppThemeSystemSetting.System,
+              value: 'Dark theme',
-              label: 'System theme',
-            },
-            {
-              value: AppTheme.Dark,
               label: 'Dark theme',
             },
             {
-              value: AppTheme.Light,
+              value: 'Light theme',
               label: 'Light theme',
             },
           ].map(({ value, label }) => (
-            <SelectItem key={value} value={value} label={label} />
+            <SelectItem
-          ))}
+              key={value}
-        </SelectMenu>
+              value={value}
-        <h4>Active Color Mode:</h4>
+              label={label}
-        <SelectMenu value={colorMode} onValueChange={setColorMode}>
+            />
-          {[
-            {
-              value: AppColorMode.GreenUp,
-              label: 'Green up',
-            },
-            {
-              value: AppColorMode.RedUp,
-              label: 'Red up',
-            },
-          ].map(({ value, label }) => (
-            <SelectItem key={value} value={value} label={label} />
           ))}
         </SelectMenu>
       </StoryHeader>
       <hr />
-      <AppThemeAndColorModeProvider>
-        <GlobalStyle />
       <StoryContent>{children}</StoryContent>
-      </AppThemeAndColorModeProvider>
     </Provider>
   );
 };

README.md

@@ -78,7 +78,6 @@ Set environment variables via `.env`.
 - `VITE_V3_TOKEN_ADDRESS` (optional): Address of the V3 $DYDX token.
 - `VITE_TOKEN_MIGRATION_URI` (optional): The URL of the token migration website.
 - `AMPLITUDE_API_KEY` (optional): Amplitude API key for enabling Amplitude; used with `pnpm run build:inject-amplitude`.
-- `AMPLITUDE_SERVER_URL` (optional): Custom Amplitude server URL
 - `BUGSNAG_API_KEY` (optional): API key for enabling Bugsnag; used with `pnpm run build:inject-bugsnag`.
 - `IOS_APP_ID` (optional): iOS app ID used for enabling deep linking to the iOS app; used with `pnpm run build:inject-app-deeplinks`.
 - `INTERCOM_APP_ID` (optional): Used for enabling Intercom; utilized with `pnpm run build:inject-intercom`.
@@ -99,11 +98,6 @@ For the "Build & Development Settings", we recommend the following:
 - Framework Preset: `Vite`
 - Build Command (override): `pnpm run build`
 
-By default, the dev server runs in development mode and the build command runs in production mode. To override the default mode, you can pass in the `--mode` option flag. For example, if you want to build your app for testnet:
-```
-pnpm run build --mode testnet
-```
-
 If you wish to incorporate analytics via Amplitude and Bugsnag, you can use our scripts:
 `pnpm run build:inject-amplitude` and `pnpm run build:inject-bugsnag`. You will need to provide your own API keys for these services. In the Environment Variables section, name the variables as `AMPLITUDE_API_KEY` and `BUGSNAG_API_KEY` and provide the respective keys as their values.
 

package.json

@@ -33,23 +33,20 @@
   "packageManager": "pnpm@8.6.6",
   "dependencies": {
     "@0xsquid/sdk": "^1.10.0",
-    "@cosmjs/amino": "^0.32.1",
+    "@cosmjs/amino": "^0.31.0",
-    "@cosmjs/crypto": "^0.32.1",
+    "@cosmjs/crypto": "^0.31.0",
-    "@cosmjs/encoding": "^0.32.1",
+    "@cosmjs/encoding": "^0.31.0",
-    "@cosmjs/proto-signing": "^0.32.1",
+    "@cosmjs/proto-signing": "^0.31.0",
-    "@cosmjs/stargate": "^0.32.1",
+    "@cosmjs/stargate": "^0.31.0",
-    "@cosmjs/tendermint-rpc": "^0.32.1",
+    "@cosmjs/tendermint-rpc": "^0.31.0",
-    "@dydxprotocol/v4-abacus": "^1.4.2",
+    "@dydxprotocol/v4-abacus": "^1.0.10",
-    "@dydxprotocol/v4-client-js": "^1.0.20",
+    "@dydxprotocol/v4-client-js": "^1.0.0",
-    "@dydxprotocol/v4-localization": "^1.1.22",
+    "@dydxprotocol/v4-localization": "^1.0.0",
     "@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",
     "@radix-ui/react-dropdown-menu": "^2.0.5",
-    "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-navigation-menu": "^1.1.3",
     "@radix-ui/react-popover": "^1.0.6",
     "@radix-ui/react-radio-group": "^1.1.3",
@@ -92,7 +89,6 @@
     "buffer": "^6.0.3",
     "cmdk": "^0.2.0",
     "color": "^4.2.3",
-    "cosmjs-types": "^0.9.0",
     "crypto-js": "^4.1.1",
     "ethers": "^6.6.1",
     "graz": "^0.0.43",
@@ -100,7 +96,6 @@
     "long": "^5.2.3",
     "luxon": "^3.3.0",
     "qr-code-styling": "1.6.0-rc.1",
-    "query-string": "^8.1.0",
     "react": "^18.2.0",
     "react-aria": "^3.25.0",
     "react-dom": "^18.2.0",
@@ -112,8 +107,8 @@
     "reselect": "^4.1.8",
     "styled-components": "^5.3.11",
     "use-latest": "^1.2.1",
-    "viem": "^1.20.0",
+    "viem": "^1.12.2",
-    "wagmi": "^1.4.12"
+    "wagmi": "^1.3.7"
   },
   "devDependencies": {
     "@babel/core": "^7.22.5",
@@ -156,10 +151,5 @@
     "vitest": "^0.32.2",
     "w3name": "^1.0.8",
     "web3.storage": "^4.5.4"
-  },
-  "pnpm": {
-    "overrides": {
-      "follow-redirects": "1.15.3"
-    }
   }
 }

public/.well-known/assetlinks.json

@@ -1,22 +0,0 @@
-[
-  {
-    "relation": ["delegate_permission/common.handle_all_urls"],
-    "target": {
-      "namespace": "android_app",
-      "package_name": "exchange.dydx.trading.debug",
-      "sha256_cert_fingerprints": [
-        "8A:9C:CC:49:B0:35:9A:91:67:CB:98:B0:B5:87:92:5F:9E:B7:EF:CE:A0:47:57:85:A4:35:3E:0C:E1:56:9E:A2"
-      ]
-    }
-  },
-  {
-    "relation": ["delegate_permission/common.handle_all_urls"],
-    "target": {
-      "namespace": "android_app",
-      "package_name": "exchange.dydx.trading",
-      "sha256_cert_fingerprints": [
-        "B2:2D:CC:27:9D:52:05:98:63:C9:7B:34:36:70:A3:8E:00:31:28:08:2D:2E:70:76:C9:31:AE:F9:55:21:15:A5"
-      ]
-    }
-  }
-]

public/chart-bars-background.svg

@@ -1,19 +0,0 @@
-<svg width="120" height="97" viewBox="0 0 120 97" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect y="8" width="120" height="1" fill="currentColor"/>
-<rect y="18" width="120" height="1" fill="currentColor"/>
-<rect y="28" width="120" height="1" fill="currentColor"/>
-<rect y="38" width="120" height="1" fill="currentColor"/>
-<rect y="48" width="120" height="1" fill="currentColor"/>
-<rect y="58" width="120" height="1" fill="currentColor"/>
-<rect y="68" width="120" height="1" fill="currentColor"/>
-<rect y="78" width="120" height="1" fill="currentColor"/>
-<rect y="88" width="120" height="1" fill="currentColor"/>
-<rect x="18" width="1" height="97" fill="currentColor"/>
-<rect x="32" width="1" height="97" fill="currentColor"/>
-<rect x="46" width="1" height="97" fill="currentColor"/>
-<rect x="60" width="1" height="97" fill="currentColor"/>
-<rect x="74" width="1" height="97" fill="currentColor"/>
-<rect x="88" width="1" height="97" fill="currentColor"/>
-<rect x="102" width="1" height="97" fill="currentColor"/>
-<path d="M0 0H120V97H0V0Z" fill="url(#paint0_radial_314_37586)"/>
-</svg>

public/chart-bars.svg

@@ -1,20 +0,0 @@
-<svg width="90" height="39" viewBox="0 0 90 39" fill="none" xmlns="http://www.w3.org/2000/svg">
-<rect y="31.2344" width="2.57142" height="7.71427" fill="#3ED9A4"/>
-<rect x="5.14258" y="28.6648" width="2.57142" height="5.14284" fill="#E45555"/>
-<rect x="25.7139" y="26.0923" width="2.57142" height="10.2857" fill="#E45555"/>
-<rect x="51.4283" y="28.6648" width="2.57142" height="5.14284" fill="#E45555"/>
-<rect x="56.5712" y="31.2344" width="2.57142" height="5.14284" fill="#E45555"/>
-<rect x="77.1426" y="18.3767" width="2.57142" height="5.14284" fill="#E45555"/>
-<rect x="41.1427" y="23.5198" width="2.57142" height="5.14284" fill="#E45555"/>
-<rect x="10.2856" y="28.6648" width="2.57142" height="10.2857" fill="#3ED9A4"/>
-<rect x="61.7143" y="23.5198" width="2.57142" height="10.2857" fill="#3ED9A4"/>
-<rect x="66.8569" y="20.9492" width="2.57142" height="5.14284" fill="#3ED9A4"/>
-<rect x="71.9997" y="13.2346" width="2.57142" height="7.71427" fill="#3ED9A4"/>
-<rect x="82.2856" y="10.6631" width="2.57142" height="10.2857" fill="#3ED9A4"/>
-<rect x="87.4287" y="0.37793" width="2.57142" height="15.4285" fill="#3ED9A4"/>
-<rect x="15.4284" y="26.0923" width="2.57142" height="5.14284" fill="#3ED9A4"/>
-<rect x="20.5714" y="23.5198" width="2.57142" height="5.14284" fill="#3ED9A4"/>
-<rect x="30.857" y="31.2344" width="2.57142" height="5.14284" fill="#3ED9A4"/>
-<rect x="35.9999" y="26.0923" width="2.57142" height="5.14284" fill="#3ED9A4"/>
-<rect x="46.2853" y="26.0923" width="2.57142" height="2.57142" fill="#3ED9A4"/>
-</svg>

public/configs/cctp.json

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

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": {
+      "iOS": {
-         "scheme": "dydx-t-v4"
+         "scheme": "dydxv4"
       }
    },
    "deployments": {
@@ -11,13 +11,6 @@
          ],
          "default": "dydxprotocol-mainnet"
       },
-      "TESTFLIGHT": {
-         "environments": [
-            "dydxprotocol-mainnet",
-            "dydxprotocol-testnet"
-         ],
-         "default": "dydxprotocol-mainnet"
-      },
       "TESTNET": {
          "environments": [
             "dydxprotocol-testnet"
@@ -46,10 +39,10 @@
    "environments": {
       "dydxprotocol-dev": {
          "name": "v4 Dev",
-         "ethereumChainId": "11155111",
+         "ethereumChainId": "5",
          "dydxChainId": "dydxprotocol-testnet",
          "chainName": "dYdX Chain",
-         "chainLogo": "/dydx-chain.png",
+         "chainLogo": "dydx-chain.png",
          "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
@@ -78,7 +71,6 @@
                "https://validator.v4dev.dydx.exchange"
             ],
             "0xsquid": "https://testnet.api.0xsquid.com",
-            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
             "faucet": "https://faucet.v4dev.dydx.exchange"
          },
          "links": {
@@ -88,6 +80,7 @@
             "blogs": "https://www.dydx.foundation/blog",
             "foundation": "https://www.dydx.foundation",
             "help": "https://help.dydx.exchange/",
+            "initialMarginFractionLearnMore": "https://help.dydx.exchange/articles/5232637-maximum-position-sizes",
             "reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
             "mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
             "documentation": "https://docs.dydx.exchange/",
@@ -95,7 +88,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": {
@@ -115,24 +108,14 @@
             "images": "/wallets/",
             "signTypedDataAction": "dYdX Chain Onboarding",
             "signTypedDataDomainName": "dYdX Chain"
-         },
-         "governance": {
-            "newMarketProposal": {
-               "initialDepositAmount": 10000000,
-               "delayBlocks": 900,
-               "newMarketsMethodology": "https://docs.google.com/spreadsheets/d/1zjkV9R7R_7KMItuzqzvKGwefSBRfE-ZNAx1LH55OcqY/edit?usp=sharing"
-            }
-         },
-         "featureFlags": {
-            "reduceOnlySupported": true
          }
       },
       "dydxprotocol-dev-2": {
          "name": "v4 Dev 2",
-         "ethereumChainId": "11155111",
+         "ethereumChainId": "5",
          "dydxChainId": "dydxprotocol-testnet",
          "chainName": "dYdX Chain",
-         "chainLogo": "/dydx-chain.png",
+         "chainLogo": "dydx-chain.png",
          "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
@@ -160,8 +143,7 @@
             "validators": [
                "http://54.92.118.111"
             ],
-            "0xsquid": "https://testnet.api.0xsquid.com",
+            "0xsquid": "https://testnet.api.0xsquid.com"
-            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/"
          },
          "links": {
             "tos": "https://dydx.exchange/v4-terms",
@@ -170,6 +152,7 @@
             "blogs": "https://www.dydx.foundation/blog",
             "foundation": "https://www.dydx.foundation",
             "help": "https://help.dydx.exchange/",
+            "initialMarginFractionLearnMore": "https://help.dydx.exchange/articles/5232637-maximum-position-sizes",
             "reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
             "mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
             "documentation": "https://docs.dydx.exchange/",
@@ -177,7 +160,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": {
@@ -197,24 +180,14 @@
             "images": "/wallets/",
             "signTypedDataAction": "dYdX Chain Onboarding",
             "signTypedDataDomainName": "dYdX Chain"
-         },
-         "governance": {
-            "newMarketProposal": {
-               "initialDepositAmount": 10000000,
-               "delayBlocks": 900,
-               "newMarketsMethodology": "https://docs.google.com/spreadsheets/d/1zjkV9R7R_7KMItuzqzvKGwefSBRfE-ZNAx1LH55OcqY/edit?usp=sharing"
-            }
-         },
-         "featureFlags": {
-            "reduceOnlySupported": true
          }
       },
       "dydxprotocol-dev-4": {
          "name": "v4 Dev 4",
-         "ethereumChainId": "11155111",
+         "ethereumChainId": "5",
          "dydxChainId": "dydxprotocol-testnet",
          "chainName": "dYdX Chain",
-         "chainLogo": "/dydx-chain.png",
+         "chainLogo": "dydx-chain.png",
          "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
@@ -240,11 +213,9 @@
                }
             ],
             "validators": [
-               "https://validator.v4dev4.dydx.exchange"
+               "http://validator.v4dev4.dydx.exchange"
             ],
-            "0xsquid": "https://testnet.api.0xsquid.com",
+            "0xsquid": "https://testnet.api.0xsquid.com"
-            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
-            "faucet": "https://faucet.v4dev4.dydx.exchange"
          },
          "links": {
             "tos": "https://dydx.exchange/v4-terms",
@@ -253,6 +224,7 @@
             "blogs": "https://www.dydx.foundation/blog",
             "foundation": "https://www.dydx.foundation",
             "help": "https://help.dydx.exchange/",
+            "initialMarginFractionLearnMore": "https://help.dydx.exchange/articles/5232637-maximum-position-sizes",
             "reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
             "mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
             "documentation": "https://docs.dydx.exchange/",
@@ -260,7 +232,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": {
@@ -280,24 +252,14 @@
             "images": "/wallets/",
             "signTypedDataAction": "dYdX Chain Onboarding",
             "signTypedDataDomainName": "dYdX Chain"
-         },
-         "governance": {
-            "newMarketProposal": {
-               "initialDepositAmount": 10000000,
-               "delayBlocks": 900,
-               "newMarketsMethodology": "https://docs.google.com/spreadsheets/d/1zjkV9R7R_7KMItuzqzvKGwefSBRfE-ZNAx1LH55OcqY/edit?usp=sharing"
-            }
-         },
-         "featureFlags": {
-            "reduceOnlySupported": true
          }
       },
       "dydxprotocol-dev-5": {
          "name": "v4 Dev 5",
-         "ethereumChainId": "11155111",
+         "ethereumChainId": "5",
          "dydxChainId": "dydxprotocol-testnet",
          "chainName": "dYdX Chain",
-         "chainLogo": "/dydx-chain.png",
+         "chainLogo": "dydx-chain.png",
          "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
@@ -325,8 +287,7 @@
             "validators": [
                "http://18.223.78.50"
             ],
-            "0xsquid": "https://testnet.api.0xsquid.com",
+            "0xsquid": "https://testnet.api.0xsquid.com"
-            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/"
          },
          "links": {
             "tos": "https://dydx.exchange/v4-terms",
@@ -335,6 +296,7 @@
             "blogs": "https://www.dydx.foundation/blog",
             "foundation": "https://www.dydx.foundation",
             "help": "https://help.dydx.exchange/",
+            "initialMarginFractionLearnMore": "https://help.dydx.exchange/articles/5232637-maximum-position-sizes",
             "reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
             "mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
             "documentation": "https://docs.dydx.exchange/",
@@ -342,7 +304,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": {
@@ -362,24 +324,14 @@
             "images": "/wallets/",
             "signTypedDataAction": "dYdX Chain Onboarding",
             "signTypedDataDomainName": "dYdX Chain"
-         },
-         "governance": {
-            "newMarketProposal": {
-               "initialDepositAmount": 10000000,
-               "delayBlocks": 900,
-               "newMarketsMethodology": "https://docs.google.com/spreadsheets/d/1zjkV9R7R_7KMItuzqzvKGwefSBRfE-ZNAx1LH55OcqY/edit?usp=sharing"
-            }
-         },
-         "featureFlags": {
-            "reduceOnlySupported": true
          }
       },
       "dydxprotocol-staging": {
          "name": "v4 Staging",
-         "ethereumChainId": "11155111",
+         "ethereumChainId": "5",
          "dydxChainId": "dydxprotocol-testnet",
          "chainName": "dYdX Chain",
-         "chainLogo": "/dydx-chain.png",
+         "chainLogo": "dydx-chain.png",
          "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
@@ -408,8 +360,7 @@
             "validators": [
                "https://validator.v4staging.dydx.exchange"
             ],
-            "0xsquid": "https://testnet.api.squidrouter.com",
+            "0xsquid": "https://testnet.api.squidrouter.com"
-            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/"
          },
          "links": {
             "tos": "https://dydx.exchange/v4-terms",
@@ -421,12 +372,13 @@
             "blogs": "https://www.dydx.foundation/blog",
             "help": "https://help.dydx.exchange",
             "foundation": "https://www.dydx.foundation",
+            "initialMarginFractionLearnMore": "https://help.dydx.exchange/articles/5232637-maximum-position-sizes",
             "reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
             "mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
             "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": {
@@ -446,107 +398,14 @@
             "images": "/wallets/",
             "signTypedDataAction": "dYdX Chain Onboarding",
             "signTypedDataDomainName": "dYdX Chain"
-         },
-         "governance": {
-            "newMarketProposal": {
-               "initialDepositAmount": 10000000,
-               "delayBlocks": 900,
-               "newMarketsMethodology": "https://docs.google.com/spreadsheets/d/1zjkV9R7R_7KMItuzqzvKGwefSBRfE-ZNAx1LH55OcqY/edit?usp=sharing"
-            }
-         },
-         "featureFlags": {
-            "reduceOnlySupported": true
-         }
-      },
-      "dydxprotocol-staging-forced-update": {
-         "name": "v4 Staging Forced Update",
-         "ethereumChainId": "11155111",
-         "dydxChainId": "dydxprotocol-testnet",
-         "chainName": "dYdX Chain",
-         "chainLogo": "/dydx-chain.png",
-         "squidIntegratorId": "dYdX-api",
-         "isMainNet": false,
-         "tokens": {
-            "chain": {
-               "name": "Dv4TNT",
-               "denom": "adv4tnt",
-               "decimals": 18,
-               "image": "/currencies/dydx.png"
-            },
-            "usdc": {
-               "name": "USDC",
-               "denom": "ibc/8E27BA2D5493AF5636760E354E46004562C46AB7EC0CC4C1CA14E9E20E2545B5",
-               "gasDenom": "uusdc",
-               "decimals": 6,
-               "image": "/currencies/usdc.png"
-            }
-         },
-         "endpoints": {
-            "indexers": [
-               {
-                  "api": "https://indexer.v4staging.dydx.exchange",
-                  "socket": "wss://indexer.v4staging.dydx.exchange"
-               }
-            ],
-            "faucet": "https://faucet.v4staging.dydx.exchange",
-            "validators": [
-               "https://validator.v4staging.dydx.exchange"
-            ],
-            "0xsquid": "https://testnet.api.squidrouter.com",
-            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/"
-         },
-         "links": {
-            "tos": "https://dydx.exchange/v4-terms",
-            "privacy": "https://dydx.exchange/privacy",
-            "mintscan": "https://testnet.mintscan.io/dydx-testnet/txs/{tx_hash}",
-            "mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
-            "documentation": "https://v4-teacher.vercel.app/",
-            "community": "https://discord.com/invite/dydx",
-            "feedback": "https://docs.google.com/forms/d/e/1FAIpQLSezLsWCKvAYDEb7L-2O4wOON1T56xxro9A2Azvl6IxXHP_15Q/viewform",
-            "blogs": "https://www.dydx.foundation/blog"
-         },
-         "wallets": {
-            "walletconnect": {
-               "client": {
-                  "name": "dYdX v4",
-                  "description": "dYdX v4 App",
-                  "iconUrl": "/logos/dydx-x.png"
-               },
-               "v2": {
-                  "projectId": "47559b2ec96c09aed9ff2cb54a31ab0e"
-               }
-            },
-            "walletSegue": {
-               "callbackUrl": "/walletsegue"
-            },
-            "images": "/wallets/",
-            "signTypedDataAction": "dYdX Chain Onboarding",
-            "signTypedDataDomainName": "dYdX Chain"
-         },
-         "apps": {
-            "ios": {
-               "minimalVersion": "1.0",
-               "build": 40000,
-               "url": "https://apps.apple.com/app/dydx/id1564787350"
-            }
-         },
-         "governance": {
-            "newMarketProposal": {
-               "initialDepositAmount": 10000000,
-               "delayBlocks": 900,
-               "newMarketsMethodology": "https://docs.google.com/spreadsheets/d/1zjkV9R7R_7KMItuzqzvKGwefSBRfE-ZNAx1LH55OcqY/edit?usp=sharing"
-            }
-         },
-         "featureFlags": {
-            "reduceOnlySupported": true
          }
       },
       "dydxprotocol-staging-west": {
          "name": "v4 Staging West",
-         "ethereumChainId": "11155111",
+         "ethereumChainId": "5",
          "dydxChainId": "dydxprotocol-testnet",
          "chainName": "dYdX Chain",
-         "chainLogo": "/dydx-chain.png",
+         "chainLogo": "dydx-chain.png",
          "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
@@ -575,8 +434,7 @@
             "validators": [
                "https://validator-uswest1.v4staging.dydx.exchange"
             ],
-            "0xsquid": "https://testnet.api.squidrouter.com",
+            "0xsquid": "https://testnet.api.squidrouter.com"
-            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/"
          },
          "links": {
             "tos": "https://dydx.exchange/v4-terms",
@@ -588,12 +446,13 @@
             "blogs": "https://www.dydx.foundation/blog",
             "help": "https://help.dydx.exchange",
             "foundation": "https://www.dydx.foundation",
+            "initialMarginFractionLearnMore": "https://help.dydx.exchange/articles/5232637-maximum-position-sizes",
             "reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
             "mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
             "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": {
@@ -613,24 +472,14 @@
             "images": "/wallets/",
             "signTypedDataAction": "dYdX Chain Onboarding",
             "signTypedDataDomainName": "dYdX Chain"
-         },
-         "governance": {
-            "newMarketProposal": {
-               "initialDepositAmount": 10000000,
-               "delayBlocks": 900,
-               "newMarketsMethodology": "https://docs.google.com/spreadsheets/d/1zjkV9R7R_7KMItuzqzvKGwefSBRfE-ZNAx1LH55OcqY/edit?usp=sharing"
-            }
-         },
-         "featureFlags": {
-            "reduceOnlySupported": true
          }
       },
       "dydxprotocol-testnet": {
          "name": "v4 Public Testnet",
-         "ethereumChainId": "11155111",
+         "ethereumChainId": "5",
          "dydxChainId": "dydx-testnet-4",
          "chainName": "dYdX Chain",
-         "chainLogo": "/dydx-chain.png",
+         "chainLogo": "dydx-chain.png",
          "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
@@ -651,8 +500,8 @@
          "endpoints": {
             "indexers": [
                {
-                  "api": "https://indexer.v4testnet.dydx.exchange",
+                  "api": "https://dydx-testnet.imperator.co",
-                  "socket": "wss://indexer.v4testnet.dydx.exchange"
+                  "socket": "wss://dydx-testnet.imperator.co"
                }
             ],
             "validators": [
@@ -663,7 +512,6 @@
                "https://dydx-rpc.liquify.com/api=8878132/dydx"
             ],
             "0xsquid": "https://testnet.api.squidrouter.com",
-            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
             "faucet": "https://faucet.v4testnet.dydx.exchange"
          },
          "links": {
@@ -676,12 +524,13 @@
             "blogs": "https://www.dydx.foundation/blog",
             "foundation": "https://www.dydx.foundation",
             "help": "https://help.dydx.exchange/",
+            "initialMarginFractionLearnMore": "https://help.dydx.exchange/articles/5232637-maximum-position-sizes",
             "reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
             "mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
             "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": {
@@ -701,24 +550,14 @@
             "images": "/wallets/",
             "signTypedDataAction": "dYdX Chain Onboarding",
             "signTypedDataDomainName": "dYdX V4"
-         },
-         "governance": {
-            "newMarketProposal": {
-               "initialDepositAmount": 10000000,
-               "delayBlocks": 900,
-               "newMarketsMethodology": "https://docs.google.com/spreadsheets/d/1zjkV9R7R_7KMItuzqzvKGwefSBRfE-ZNAx1LH55OcqY/edit?usp=sharing"
-            }
-         },
-         "featureFlags": {
-            "reduceOnlySupported": false
          }
       },
       "dydxprotocol-testnet-dydx": {
          "name": "v4 Public Testnet/dYdX",
-         "ethereumChainId": "11155111",
+         "ethereumChainId": "5",
          "dydxChainId": "dydx-testnet-4",
          "chainName": "dYdX Chain",
-         "chainLogo": "/dydx-chain.png",
+         "chainLogo": "dydx-chain.png",
          "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
@@ -747,7 +586,6 @@
                "https://validator.v4testnet.dydx.exchange"
             ],
             "0xsquid": "https://testnet.api.squidrouter.com",
-            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
             "faucet": "https://faucet.v4testnet.dydx.exchange"
          },
          "links": {
@@ -761,12 +599,13 @@
             "blogs": "https://www.dydx.foundation/blog",
             "foundation": "https://www.dydx.foundation",
             "help": "https://help.dydx.exchange/",
+            "initialMarginFractionLearnMore": "https://help.dydx.exchange/articles/5232637-maximum-position-sizes",
             "reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
             "mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
             "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": {
@@ -786,24 +625,14 @@
             "images": "/wallets/",
             "signTypedDataAction": "dYdX Chain Onboarding",
             "signTypedDataDomainName": "dYdX V4"
-         },
-         "governance": {
-            "newMarketProposal": {
-               "initialDepositAmount": 10000000,
-               "delayBlocks": 900,
-               "newMarketsMethodology": "https://docs.google.com/spreadsheets/d/1zjkV9R7R_7KMItuzqzvKGwefSBRfE-ZNAx1LH55OcqY/edit?usp=sharing"
-            }
-         },
-         "featureFlags": {
-            "reduceOnlySupported": false
          }
       },
       "dydxprotocol-testnet-nodefleet": {
          "name": "v4 Public Testnet/nodefleet",
-         "ethereumChainId": "11155111",
+         "ethereumChainId": "5",
          "dydxChainId": "dydx-testnet-4",
          "chainName": "dYdX Chain",
-         "chainLogo": "/dydx-chain.png",
+         "chainLogo": "dydx-chain.png",
          "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
@@ -824,15 +653,14 @@
          "endpoints": {
             "indexers": [
                {
-                  "api": "https://indexer.v4testnet.dydx.exchange",
+                  "api": "https://dydx-testnet.imperator.co",
-                  "socket": "wss://indexer.v4testnet.dydx.exchange"
+                  "socket": "wss://dydx-testnet.imperator.co"
                }
             ],
             "validators": [
                "https://dydx-testnet.nodefleet.org"
             ],
             "0xsquid": "https://testnet.api.squidrouter.com",
-            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
             "faucet": "https://faucet.v4testnet.dydx.exchange"
          },
          "links": {
@@ -846,12 +674,13 @@
             "blogs": "https://www.dydx.foundation/blog",
             "foundation": "https://www.dydx.foundation",
             "help": "https://help.dydx.exchange/",
+            "initialMarginFractionLearnMore": "https://help.dydx.exchange/articles/5232637-maximum-position-sizes",
             "reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
             "mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
             "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": {
@@ -871,24 +700,14 @@
             "images": "/wallets/",
             "signTypedDataAction": "dYdX Chain Onboarding",
             "signTypedDataDomainName": "dYdX V4"
-         },
-         "governance": {
-            "newMarketProposal": {
-               "initialDepositAmount": 10000000,
-               "delayBlocks": 900,
-               "newMarketsMethodology": "https://docs.google.com/spreadsheets/d/1zjkV9R7R_7KMItuzqzvKGwefSBRfE-ZNAx1LH55OcqY/edit?usp=sharing"
-            }
-         },
-         "featureFlags": {
-            "reduceOnlySupported": false
          }
       },
       "dydxprotocol-testnet-kingnodes": {
          "name": "v4 Public Testnet/KingNodes",
-         "ethereumChainId": "11155111",
+         "ethereumChainId": "5",
          "dydxChainId": "dydx-testnet-4",
          "chainName": "dYdX Chain",
-         "chainLogo": "/dydx-chain.png",
+         "chainLogo": "dydx-chain.png",
          "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
@@ -909,15 +728,14 @@
          "endpoints": {
             "indexers": [
                {
-                  "api": "https://indexer.v4testnet.dydx.exchange",
+                  "api": "https://dydx-testnet.imperator.co",
-                  "socket": "wss://indexer.v4testnet.dydx.exchange"
+                  "socket": "wss://dydx-testnet.imperator.co"
                }
             ],
             "validators": [
                "https://test-dydx.kingnodes.com"
             ],
             "0xsquid": "https://testnet.api.squidrouter.com",
-            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
             "faucet": "https://faucet.v4testnet.dydx.exchange"
          },
          "links": {
@@ -931,12 +749,13 @@
             "blogs": "https://www.dydx.foundation/blog",
             "foundation": "https://www.dydx.foundation",
             "help": "https://help.dydx.exchange/",
+            "initialMarginFractionLearnMore": "https://help.dydx.exchange/articles/5232637-maximum-position-sizes",
             "reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
             "mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
             "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": {
@@ -956,24 +775,14 @@
             "images": "/wallets/",
             "signTypedDataAction": "dYdX Chain Onboarding",
             "signTypedDataDomainName": "dYdX V4"
-         },
-         "governance": {
-            "newMarketProposal": {
-               "initialDepositAmount": 10000000,
-               "delayBlocks": 900,
-               "newMarketsMethodology": "https://docs.google.com/spreadsheets/d/1zjkV9R7R_7KMItuzqzvKGwefSBRfE-ZNAx1LH55OcqY/edit?usp=sharing"
-            }
-         },
-         "featureFlags": {
-            "reduceOnlySupported": false
          }
       },
       "dydxprotocol-testnet-liquify": {
          "name": "v4 Public Testnet/Liquify",
-         "ethereumChainId": "11155111",
+         "ethereumChainId": "5",
          "dydxChainId": "dydx-testnet-4",
          "chainName": "dYdX Chain",
-         "chainLogo": "/dydx-chain.png",
+         "chainLogo": "dydx-chain.png",
          "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
@@ -994,15 +803,14 @@
          "endpoints": {
             "indexers": [
                {
-                  "api": "https://indexer.v4testnet.dydx.exchange",
+                  "api": "https://dydx-testnet.imperator.co",
-                  "socket": "wss://indexer.v4testnet.dydx.exchange"
+                  "socket": "wss://dydx-testnet.imperator.co"
                }
             ],
             "validators": [
                "https://dydx-rpc.liquify.com/api=8878132/dydx"
             ],
             "0xsquid": "https://testnet.api.squidrouter.com",
-            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
             "faucet": "https://faucet.v4testnet.dydx.exchange"
          },
          "links": {
@@ -1016,12 +824,13 @@
             "blogs": "https://www.dydx.foundation/blog",
             "foundation": "https://www.dydx.foundation",
             "help": "https://help.dydx.exchange/",
+            "initialMarginFractionLearnMore": "https://help.dydx.exchange/articles/5232637-maximum-position-sizes",
             "reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
             "mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
             "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": {
@@ -1041,24 +850,14 @@
             "images": "/wallets/",
             "signTypedDataAction": "dYdX Chain Onboarding",
             "signTypedDataDomainName": "dYdX V4"
-         },
-         "governance": {
-            "newMarketProposal": {
-               "initialDepositAmount": 10000000,
-               "delayBlocks": 900,
-               "newMarketsMethodology": "https://docs.google.com/spreadsheets/d/1zjkV9R7R_7KMItuzqzvKGwefSBRfE-ZNAx1LH55OcqY/edit?usp=sharing"
-            }
-         },
-         "featureFlags": {
-            "reduceOnlySupported": false
          }
       },
       "dydxprotocol-testnet-polkachu": {
          "name": "v4 Public Testnet/Polkahcu",
-         "ethereumChainId": "11155111",
+         "ethereumChainId": "5",
          "dydxChainId": "dydx-testnet-4",
          "chainName": "dYdX Chain",
-         "chainLogo": "/dydx-chain.png",
+         "chainLogo": "dydx-chain.png",
          "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
@@ -1079,15 +878,14 @@
          "endpoints": {
             "indexers": [
                {
-                  "api": "https://indexer.v4testnet.dydx.exchange",
+                  "api": "https://dydx-testnet.imperator.co",
-                  "socket": "wss://indexer.v4testnet.dydx.exchange"
+                  "socket": "wss://dydx-testnet.imperator.co"
                }
             ],
             "validators": [
                "https://dydx-testnet-rpc.polkachu.com/"
             ],
             "0xsquid": "https://testnet.api.squidrouter.com",
-            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
             "faucet": "https://faucet.v4testnet.dydx.exchange"
          },
          "links": {
@@ -1095,7 +893,6 @@
             "privacy": "https://dydx.exchange/privacy",
             "statusPage": "https://status.v4testnet.dydx.exchange/",
             "mintscan": "https://testnet.mintscan.io/dydx-testnet/txs/{tx_hash}",
-            "mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
             "documentation": "https://docs.dydx.exchange/",
             "community": "https://discord.com/invite/dydx",
             "feedback": "https://docs.google.com/forms/d/e/1FAIpQLSezLsWCKvAYDEb7L-2O4wOON1T56xxro9A2Azvl6IxXHP_15Q/viewform",
@@ -1118,24 +915,14 @@
             "images": "/wallets/",
             "signTypedDataAction": "dYdX Chain Onboarding",
             "signTypedDataDomainName": "dYdX V4"
-         },
-         "governance": {
-            "newMarketProposal": {
-               "initialDepositAmount": 10000000,
-               "delayBlocks": 900,
-               "newMarketsMethodology": "https://docs.google.com/spreadsheets/d/1zjkV9R7R_7KMItuzqzvKGwefSBRfE-ZNAx1LH55OcqY/edit?usp=sharing"
-            }
-         },
-         "featureFlags": {
-            "reduceOnlySupported": false
          }
       },
       "dydxprotocol-testnet-bware": {
          "name": "v4 Public Testnet/BWare",
-         "ethereumChainId": "11155111",
+         "ethereumChainId": "5",
          "dydxChainId": "dydx-testnet-4",
          "chainName": "dYdX Chain",
-         "chainLogo": "/dydx-chain.png",
+         "chainLogo": "dydx-chain.png",
          "squidIntegratorId": "dYdX-api",
          "isMainNet": false,
          "tokens": {
@@ -1156,15 +943,14 @@
          "endpoints": {
             "indexers": [
                {
-                  "api": "https://indexer.v4testnet.dydx.exchange",
+                  "api": "https://dydx-testnet.imperator.co",
-                  "socket": "wss://indexer.v4testnet.dydx.exchange"
+                  "socket": "wss://dydx-testnet.imperator.co"
                }
             ],
             "validators": [
                "https://dydx-testnet-full-rpc.public.blastapi.io/"
             ],
             "0xsquid": "https://testnet.api.squidrouter.com",
-            "nobleValidator": "https://noble-testnet-rpc.polkachu.com/",
             "faucet": "https://faucet.v4testnet.dydx.exchange"
          },
          "links": {
@@ -1178,6 +964,7 @@
             "blogs": "https://www.dydx.foundation/blog",
             "foundation": "https://www.dydx.foundation",
             "help": "https://help.dydx.exchange/",
+            "initialMarginFractionLearnmore": "https://help.dydx.exchange/articles/5232637-maximum-position-sizes",
             "reduceOnlyLearnmore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
             "mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
             "governanceLearnmore": "https://help.dydx.exchange",
@@ -1203,16 +990,6 @@
             "images": "/wallets/",
             "signTypedDataAction": "dYdX Chain Onboarding",
             "signTypedDataDomainName": "dYdX V4"
-         },
-         "governance": {
-            "newMarketProposal": {
-               "initialDepositAmount": 10000000,
-               "delayBlocks": 900,
-               "newMarketsMethodology": "https://docs.google.com/spreadsheets/d/1zjkV9R7R_7KMItuzqzvKGwefSBRfE-ZNAx1LH55OcqY/edit?usp=sharing"
-            }
-         },
-         "featureFlags": {
-            "reduceOnlySupported": false
          }
       },
       "dydxprotocol-mainnet": {
@@ -1220,7 +997,7 @@
          "ethereumChainId": "1",
          "dydxChainId": "[mainnet chain id]",
          "chainName": "dYdX Chain",
-         "chainLogo": "/dydx-chain.png",
+         "chainLogo": "dydx-chain.png",
          "squidIntegratorId": "[mainnet squid integrator id]",
          "isMainNet": true,
          "tokens": {
@@ -1250,18 +1027,18 @@
                "[Validator endpoint 1",
                "[Validator endpoint n]"
             ],
-            "0xsquid": "[0xSquid endpoint for mainnet]",
+            "0xsquid": "[0xSquid endpoint for mainnet]"
-            "nobleValidator": "[noble validator endpoint for mainnet]"
          },
          "links": {
             "tos": "[HTTP link to TOS]",
             "privacy": "[HTTP link to Privacy Policy]",
             "mintscan": "[HTTP link to Mintscan, with {tx_hash} placeholder]",
-            "mintscanBase": "[HTTP link to TOS mintscan base url]",
+            "mintscanBase": "[HTTP link to TOS mintsacn base url]",
             "feedback": "[HTTP link to feedback form, can be null]",
             "blogs": "[HTTP link to blogs, can be null]",
             "foundation": "[HTTP link to foundation, can be null]",
-            "reduceOnlyLearnMore": "[HTTP link to reduce-only learn more, can be null]",
+            "initialMarginFractionLearnMore": "[HTTP link to initial margin fraction learn more, can be null]",
+            "reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
             "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]",
@@ -1288,16 +1065,6 @@
             "images": "[Relative URL for wallet images]",
             "signTypedDataAction": "dYdX Chain Onboarding",
             "signTypedDataDomainName": "dYdX Chain"
-         },
-         "governance": {
-            "newMarketProposal": {
-               "initialDepositAmount": 0,
-               "delayBlocks": 0,
-               "newMarketsMethodology": "[URL to spreadsheet or document that explains methodology]"
-            }
-         },
-         "featureFlags": {
-            "reduceOnlySupported": false
          }
       }
    }

public/configs/exchanges.json

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

public/configs/markets.json

@@ -1,367 +1,454 @@
 {
-  "1INCH-USD": {
+    "1INCH-USD":{
-    "name": "1inch",
+       "name":"1inch",
-    "tags": ["Defi"],
+       "tags":[
-    "websiteLink": "https://1inch.io/",
+          "Defi"
-    "whitepaperLink": "https://github.com/1inch",
+       ],
-    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/1inch/"
+       "websiteLink":"https://1inch.io/",
+       "whitepaperLink":"https://github.com/1inch",
+       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/1inch/"
     },
-  "AAVE-USD": {
+    "AAVE-USD":{
-    "name": "Aave",
+       "name":"Aave",
-    "tags": ["Defi"],
+       "tags":[
-    "websiteLink": "https://aave.com/",
+          "Defi"
-    "whitepaperLink": "https://github.com/aave/protocol-v2/blob/master/aave-v2-whitepaper.pdf",
+       ],
-    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/aave/"
+       "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": {
+    "ADA-USD":{
-    "name": "Cardano",
+       "name":"Cardano",
-    "tags": ["Layer 1"],
+       "tags":[
-    "websiteLink": "https://cardano.org/",
+          "Layer 1"
-    "whitepaperLink": "https://why.cardano.org/en/introduction/motivation/",
+       ],
-    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/cardano/"
+       "websiteLink":"https://cardano.org/",
+       "whitepaperLink":"https://why.cardano.org/en/introduction/motivation/",
+       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/cardano/"
     },
-  "ALGO-USD": {
+    "ALGO-USD":{
-    "name": "Algorand",
+       "name":"Algorand",
-    "tags": ["Layer 1"],
+       "tags":[
-    "websiteLink": "https://algorand.com/",
+          "Layer 1"
-    "whitepaperLink": "https://algorand.com/technology/white-papers",
+       ],
-    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/algorand/"
+       "websiteLink":"https://algorand.com/",
+       "whitepaperLink":"https://algorand.com/technology/white-papers",
+       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/algorand/"
     },
-  "APE-USD": {
+    "APE-USD":{
-    "name": "ApeCoin",
+       "name":"ApeCoin",
-    "tags": [],
+       "tags":[
-    "websiteLink": "https://apecoin.com/",
+          
-    "whitepaperLink": "https://apecoin.com/about",
+       ],
-    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/apecoin-ape/"
+       "websiteLink":"https://apecoin.com/",
+       "whitepaperLink":"https://apecoin.com/about",
+       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/apecoin-ape/"
     },
-  "APT-USD": {
+    "APT-USD":{
-    "name": "Aptos",
+       "name":"Aptos",
-    "tags": ["Layer 1"],
+       "tags":[
-    "websiteLink": "https://aptoslabs.com/",
+          "Layer 1"
-    "whitepaperLink": "https://aptos.dev/aptos-white-paper/",
+       ],
-    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/aptos/"
+       "websiteLink":"https://aptoslabs.com/",
+       "whitepaperLink":"https://aptos.dev/aptos-white-paper/",
+       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/aptos/"
     },
-  "ARB-USD": {
+    "ARB-USD":{
-    "name": "Arbitrum",
+       "name":"Arbitrum",
-    "tags": [],
+       "tags":[
-    "websiteLink": "https://arbitrum.io/",
+          
-    "whitepaperLink": "https://github.com/OffchainLabs/nitro",
+       ],
-    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/arbitrum/"
+       "websiteLink":"https://arbitrum.io/",
+       "whitepaperLink":"https://github.com/OffchainLabs/nitro",
+       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/arbitrum/"
     },
-  "ATOM-USD": {
+    "ATOM-USD":{
-    "name": "Cosmos",
+       "name":"Cosmos",
-    "tags": ["Layer 1"],
+       "tags":[
-    "websiteLink": "https://cosmos.network/",
+          "Layer 1"
-    "whitepaperLink": "https://v1.cosmos.network/resources/whitepaper",
+       ],
-    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/cosmos/"
+       "websiteLink":"https://cosmos.network/",
+       "whitepaperLink":"https://v1.cosmos.network/resources/whitepaper",
+       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/cosmos/"
     },
-  "AVAX-USD": {
+    "AVAX-USD":{
-    "name": "Avalanche",
+       "name":"Avalanche",
-    "tags": ["Layer 1"],
+       "tags":[
-    "websiteLink": "https://www.avalabs.org/",
+          "Layer 1"
-    "whitepaperLink": "https://assets.website-files.com/5d80307810123f5ffbb34d6e/6008d7bbf8b10d1eb01e7e16_Avalanche%20Platform%20Whitepaper.pdf",
+       ],
-    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/avalanche/"
+       "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": {
+    "BCH-USD":{
-    "name": "Bitcoin Cash",
+       "name":"Bitcoin Cash",
-    "tags": ["Layer 1"],
+       "tags":[
-    "websiteLink": "https://bitcoincash.org/",
+          "Layer 1"
-    "whitepaperLink": "https://bitcoincash.org/",
+       ],
-    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/bitcoin-cash/"
+       "websiteLink":"https://bitcoincash.org/",
+       "whitepaperLink":"https://bitcoincash.org/",
+       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/bitcoin-cash/"
     },
-  "BONK-USD": {
+    "BLUR-USD":{
-    "name": "BONK COIN",
+       "name":"Blur",
-    "tags": [],
+       "tags":[
-    "websiteLink": "https://bonkcoin.com/",
+          
-    "whitepaperLink": "https://bonkcoin.com/",
+       ],
-    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/bonk1/"
+       "websiteLink":"https://blur.io/",
+       "whitepaperLink":"https://docs.blur.foundation/",
+       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/blur-token/"
     },
-  "BLUR-USD": {
+    "CELO-USD":{
-    "name": "Blur",
+       "name":"Celo",
-    "tags": [],
+       "tags":[
-    "websiteLink": "https://blur.io/",
+          
-    "whitepaperLink": "https://docs.blur.foundation/",
+       ],
-    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/blur-token/"
+       "websiteLink":"https://celo.org",
+       "whitepaperLink":"https://docs.celo.org",
+       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/celo/"
     },
-  "CELO-USD": {
+    "BTC-USD":{
-    "name": "Celo",
+       "name":"Bitcoin",
-    "tags": [],
+       "tags":[
-    "websiteLink": "https://celo.org",
+          "Layer 1"
-    "whitepaperLink": "https://docs.celo.org",
+       ],
-    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/celo/"
+       "websiteLink":"https://bitcoin.org/",
+       "whitepaperLink":"https://bitcoin.org/bitcoin.pdf",
+       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/bitcoin/"
     },
-  "BTC-USD": {
+    "COMP-USD":{
-    "name": "Bitcoin",
+       "name":"Compound",
-    "tags": ["Layer 1"],
+       "tags":[
-    "websiteLink": "https://bitcoin.org/",
+          "Defi"
-    "whitepaperLink": "https://bitcoin.org/bitcoin.pdf",
+       ],
-    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/bitcoin/"
+       "websiteLink":"https://compound.finance/",
+       "whitepaperLink":"https://compound.finance/documents/Compound.Whitepaper.pdf",
+       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/compound/"
     },
-  "COMP-USD": {
+    "CRV-USD":{
-    "name": "Compound",
+       "name":"Curve",
-    "tags": ["Defi"],
+       "tags":[
-    "websiteLink": "https://compound.finance/",
+          "Governance"
-    "whitepaperLink": "https://compound.finance/documents/Compound.Whitepaper.pdf",
+       ],
-    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/compound/"
+       "websiteLink":"https://curve.fi/",
+       "whitepaperLink":"https://curve.fi/whitepaper",
+       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/curve-dao-token/"
     },
-  "CRV-USD": {
+    "DOGE-USD":{
-    "name": "Curve",
+       "name":"Dogecoin",
-    "tags": ["Governance"],
+       "tags":[
-    "websiteLink": "https://curve.fi/",
+          "Layer 1"
-    "whitepaperLink": "https://curve.fi/whitepaper",
+       ],
-    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/curve-dao-token/"
+       "websiteLink":"https://dogecoin.com/",
+       "whitepaperLink":"https://github.com/dogecoin/dogecoin",
+       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/dogecoin/"
     },
-  "DOGE-USD": {
+    "DOT-USD":{
-    "name": "Dogecoin",
+       "name":"Polkadot",
-    "tags": ["Layer 1"],
+       "tags":[
-    "websiteLink": "https://dogecoin.com/",
+          "Layer 1"
-    "whitepaperLink": "https://github.com/dogecoin/dogecoin",
+       ],
-    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/dogecoin/"
+       "websiteLink":"https://polkadot.network/",
+       "whitepaperLink":"https://polkadot.network/PolkaDotPaper.pdf",
+       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/polkadot-new/"
     },
-  "DOT-USD": {
+    "ENJ-USD":{
-    "name": "Polkadot",
+       "name":"Enjin",
-    "tags": ["Layer 1"],
+       "tags":[
-    "websiteLink": "https://polkadot.network/",
+          
-    "whitepaperLink": "https://polkadot.network/PolkaDotPaper.pdf",
+       ],
-    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/polkadot-new/"
+       "websiteLink":"https://enjin.io/",
+       "whitepaperLink":"https://cdn.enjin.io/downloads/whitepapers/enjin-coin/en.pdf/",
+       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/enjin-coin/"
     },
-  "ENJ-USD": {
+    "EOS-USD":{
-    "name": "Enjin",
+       "name":"EOS",
-    "tags": [],
+       "tags":[
-    "websiteLink": "https://enjin.io/",
+          "Layer 1"
-    "whitepaperLink": "https://cdn.enjin.io/downloads/whitepapers/enjin-coin/en.pdf/",
+       ],
-    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/enjin-coin/"
+       "websiteLink":"https://eos.io/",
+       "whitepaperLink":"https://github.com/EOSIO/Documentation/blob/master/TechnicalWhitePaper.md",
+       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/eos/"
     },
-  "EOS-USD": {
+    "ETC-USD":{
-    "name": "EOS",
+       "name":"Ethereum Classic",
-    "tags": ["Layer 1"],
+       "tags":[
-    "websiteLink": "https://eos.io/",
+          "Layer 1"
-    "whitepaperLink": "https://github.com/EOSIO/Documentation/blob/master/TechnicalWhitePaper.md",
+       ],
-    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/eos/"
+       "websiteLink":"https://ethereumclassic.org/",
+       "whitepaperLink":"https://ethereumclassic.org/why-classic",
+       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/ethereum-classic/"
     },
-  "ETC-USD": {
+    "ETH-USD":{
-    "name": "Ethereum Classic",
+       "name":"Ethereum",
-    "tags": ["Layer 1"],
+       "tags":[
-    "websiteLink": "https://ethereumclassic.org/",
+          "Layer 1"
-    "whitepaperLink": "https://ethereumclassic.org/why-classic",
+       ],
-    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/ethereum-classic/"
+       "websiteLink":"https://ethereum.org/",
+       "whitepaperLink":"https://ethereum.org/whitepaper/",
+       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/ethereum/",
+       "displayStepSize":"0.001",
+       "displayTickSize":"0.1"
     },
-  "ETH-USD": {
+    "FIL-USD":{
-    "name": "Ethereum",
+       "name":"Filecoin",
-    "tags": ["Layer 1"],
+       "tags":[
-    "websiteLink": "https://ethereum.org/",
+          "Layer 1"
-    "whitepaperLink": "https://ethereum.org/whitepaper/",
+       ],
-    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/ethereum/",
+       "websiteLink":"https://filecoin.io/",
-    "displayStepSize": "0.001",
+       "whitepaperLink":"https://filecoin.io/filecoin.pdf",
-    "displayTickSize": "0.1"
+       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/filecoin/"
     },
-  "FIL-USD": {
+    "HNT-USD":{
-    "name": "Filecoin",
+       "name":"Helium",
-    "tags": ["Layer 1"],
+       "tags":[
-    "websiteLink": "https://filecoin.io/",
+          "Layer 1"
-    "whitepaperLink": "https://filecoin.io/filecoin.pdf",
+       ],
-    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/filecoin/"
+       "websiteLink":"https://www.helium.com",
+       "whitepaperLink":"http://whitepaper.helium.com",
+       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/helium/"
     },
-  "HNT-USD": {
+    "ICP-USD":{
-    "name": "Helium",
+       "name":"Internet Computer",
-    "tags": ["Layer 1"],
+       "tags":[
-    "websiteLink": "https://www.helium.com",
+          "Layer 1"
-    "whitepaperLink": "http://whitepaper.helium.com",
+       ],
-    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/helium/"
+       "websiteLink":"https://dfinity.org",
+       "whitepaperLink":"https://dfinity.org/whitepaper.pdf",
+       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/internet-computer/"
     },
-  "ICP-USD": {
+    "LDO-USD":{
-    "name": "Internet Computer",
+       "name":"Lido DAO",
-    "tags": ["Layer 1"],
+       "tags":[
-    "websiteLink": "https://dfinity.org",
+          "Defi"
-    "whitepaperLink": "https://dfinity.org/whitepaper.pdf",
+       ],
-    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/internet-computer/"
+       "websiteLink":"https://lido.fi/",
+       "whitepaperLink":"https://lido.fi/static/Lido:Ethereum-Liquid-Staking.pdf",
+       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/lido-dao/"
     },
-  "LDO-USD": {
+    "LINK-USD":{
-    "name": "Lido DAO",
+       "name":"Chainlink",
-    "tags": ["Defi"],
+       "tags":[
-    "websiteLink": "https://lido.fi/",
+          "Defi"
-    "whitepaperLink": "https://lido.fi/static/Lido:Ethereum-Liquid-Staking.pdf",
+       ],
-    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/lido-dao/"
+       "websiteLink":"https://chain.link/",
+       "whitepaperLink":"https://link.smartcontract.com/whitepaper",
+       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/chainlink/"
     },
-  "LINK-USD": {
+    "LTC-USD":{
-    "name": "Chainlink",
+       "name":"Litecoin",
-    "tags": ["Defi"],
+       "tags":[
-    "websiteLink": "https://chain.link/",
+          "Layer 1"
-    "whitepaperLink": "https://link.smartcontract.com/whitepaper",
+       ],
-    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/chainlink/"
+       "websiteLink":"https://litecoin.org/",
+       "whitepaperLink":"https://litecoin.info/index.php/Main_Page",
+       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/litecoin/"
     },
-  "LTC-USD": {
+    "MATIC-USD":{
-    "name": "Litecoin",
+       "name":"Polygon",
-    "tags": ["Layer 1"],
+       "tags":[
-    "websiteLink": "https://litecoin.org/",
+          "Layer 2"
-    "whitepaperLink": "https://litecoin.info/index.php/Main_Page",
+       ],
-    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/litecoin/"
+       "websiteLink":"https://polygon.technology/",
+       "whitepaperLink":"https://polygon.technology/lightpaper-polygon.pdf",
+       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/polygon/"
     },
-  "MATIC-USD": {
+    "MKR-USD":{
-    "name": "Polygon",
+       "name":"Maker",
-    "tags": ["Layer 2"],
+       "tags":[
-    "websiteLink": "https://polygon.technology/",
+          "Governance"
-    "whitepaperLink": "https://polygon.technology/lightpaper-polygon.pdf",
+       ],
-    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/polygon/"
+       "websiteLink":"https://makerdao.com",
+       "whitepaperLink":"https://makerdao.com/whitepaper",
+       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/maker/"
     },
-  "MKR-USD": {
+    "NEAR-USD":{
-    "name": "Maker",
+       "name":"NEAR Protocol",
-    "tags": ["Governance"],
+       "tags":[
-    "websiteLink": "https://makerdao.com",
+          "Layer 1"
-    "whitepaperLink": "https://makerdao.com/whitepaper",
+       ],
-    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/maker/"
+       "websiteLink":"https://near.org",
+       "whitepaperLink":"https://near.org/papers/the-official-near-white-paper/",
+       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/near-protocol/"
     },
-  "NEAR-USD": {
+    "OP-USD":{
-    "name": "NEAR Protocol",
+       "name":"Optimism",
-    "tags": ["Layer 1"],
+       "tags":[
-    "websiteLink": "https://near.org",
+          
-    "whitepaperLink": "https://near.org/papers/the-official-near-white-paper/",
+       ],
-    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/near-protocol/"
+       "websiteLink":"https://www.optimism.io/",
+       "whitepaperLink":"https://github.com/ethereum-optimism",
+       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/optimism-ethereum/"
     },
-  "OP-USD": {
+    "PEPE-USD":{
-    "name": "Optimism",
+       "name":"Pepe",
-    "tags": [],
+       "tags":[
-    "websiteLink": "https://www.optimism.io/",
+          
-    "whitepaperLink": "https://github.com/ethereum-optimism",
+       ],
-    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/optimism-ethereum/"
+       "websiteLink":"https://www.pepe.vip/",
+       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/pepe/"
     },
-  "PEPE-USD": {
+    "RUNE-USD":{
-    "name": "Pepe",
+       "name":"THORChain",
-    "tags": [],
+       "tags":[
-    "websiteLink": "https://www.pepe.vip/",
+          "Layer 1"
-    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/pepe/"
+       ],
+       "websiteLink":"https://thorchain.org",
+       "whitepaperLink":"https://whitepaper.io/document/709/thorchain-whitepaper",
+       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/thorchain/"
     },
-  "RUNE-USD": {
+    "SEI-USD":{
-    "name": "THORChain",
+       "name":"Sei",
-    "tags": ["Layer 1"],
+       "tags":[
-    "websiteLink": "https://thorchain.org",
+          "Layer 1",
-    "whitepaperLink": "https://whitepaper.io/document/709/thorchain-whitepaper",
+          "Defi"
-    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/thorchain/"
+       ],
+       "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/"
     },
-  "SEI-USD": {
+    "SHIB-USD":{
-    "name": "Sei",
+       "name":"Shiba Inu",
-    "tags": ["Layer 1", "Defi"],
+       "tags":[
-    "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/"
+       "websiteLink":"https://shibatoken.com/",
+       "whitepaperLink":"https://docs.shibatoken.com/",
+       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/shiba-inu/"
     },
-  "SHIB-USD": {
+    "SNX-USD":{
-    "name": "Shiba Inu",
+       "name":"Synthetix",
-    "tags": [],
+       "tags":[
-    "websiteLink": "https://shibatoken.com/",
+          "Defi"
-    "whitepaperLink": "https://docs.shibatoken.com/",
+       ],
-    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/shiba-inu/"
+       "websiteLink":"https://synthetix.io/",
+       "whitepaperLink":"https://docs.synthetix.io/litepaper",
+       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/synthetix-network-token/"
     },
-  "SNX-USD": {
+    "SOL-USD":{
-    "name": "Synthetix",
+       "name":"Solana",
-    "tags": ["Defi"],
+       "tags":[
-    "websiteLink": "https://synthetix.io/",
+          "Layer 1"
-    "whitepaperLink": "https://docs.synthetix.io/litepaper",
+       ],
-    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/synthetix-network-token/"
+       "websiteLink":"https://solana.com/",
+       "whitepaperLink":"https://solana.com/solana-whitepaper.pdf",
+       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/solana/"
     },
-  "SOL-USD": {
+    "SUI-USD":{
-    "name": "Solana",
+       "name":"Sui",
-    "tags": ["Layer 1"],
+       "tags":[
-    "websiteLink": "https://solana.com/",
+          "Layer 1"
-    "whitepaperLink": "https://solana.com/solana-whitepaper.pdf",
+       ],
-    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/solana/"
+       "websiteLink":"https://sui.io/",
+       "whitepaperLink":"https://github.com/MystenLabs",
+       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/sui/"
     },
-  "SUI-USD": {
+    "SUSHI-USD":{
-    "name": "Sui",
+       "name":"Sushi",
-    "tags": ["Layer 1"],
+       "tags":[
-    "websiteLink": "https://sui.io/",
+          "Defi"
-    "whitepaperLink": "https://github.com/MystenLabs",
+       ],
-    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/sui/"
+       "websiteLink":"https://sushi.com/",
+       "whitepaperLink":"https://docs.sushi.com/",
+       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/sushiswap/"
     },
-  "SUSHI-USD": {
+    "TRX-USD":{
-    "name": "Sushi",
+       "name":"TRON",
-    "tags": ["Defi"],
+       "tags":[
-    "websiteLink": "https://sushi.com/",
+          "Defi"
-    "whitepaperLink": "https://docs.sushi.com/",
+       ],
-    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/sushiswap/"
+       "websiteLink":"https://tron.network/",
+       "whitepaperLink":"https://tron.network/static/doc/white_paper_v_2_0.pdf",
+       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/tron/"
     },
-  "TIA-USD": {
+    "UMA-USD":{
-    "name": "Celestia",
+       "name":"UMA",
-    "tags": ["Layer 1"],
+       "tags":[
-    "websiteLink": "https://celestia.org/",
+          "Defi"
-    "whitepaperLink": "https://arxiv.org/pdf/1905.09274.pdf",
+       ],
-    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/celestia/"
+       "websiteLink":"https://umaproject.org/",
+       "whitepaperLink":"https://github.com/UMAprotocol/whitepaper",
+       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/uma/"
     },
-  "TRX-USD": {
+    "UNI-USD":{
-    "name": "TRON",
+       "name":"Uniswap",
-    "tags": ["Defi"],
+       "tags":[
-    "websiteLink": "https://tron.network/",
+          "Defi"
-    "whitepaperLink": "https://tron.network/static/doc/white_paper_v_2_0.pdf",
+       ],
-    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/tron/"
+       "websiteLink":"https://uniswap.org/",
+       "whitepaperLink":"https://uniswap.org/whitepaper-v3.pdf",
+       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/uniswap/"
     },
-  "UMA-USD": {
+    "WLD-USD":{
-    "name": "UMA",
+       "name":"Worldcoin",
-    "tags": ["Defi"],
+       "tags":[
-    "websiteLink": "https://umaproject.org/",
+          
-    "whitepaperLink": "https://github.com/UMAprotocol/whitepaper",
+       ],
-    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/uma/"
+       "websiteLink":"https://worldcoin.org/",
+       "whitepaperLink":"https://whitepaper.worldcoin.org/",
+       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/worldcoin-org/"
     },
-  "UNI-USD": {
+    "XLM-USD":{
-    "name": "Uniswap",
+       "name":"Stellar",
-    "tags": ["Defi"],
+       "tags":[
-    "websiteLink": "https://uniswap.org/",
+          "Layer 1"
-    "whitepaperLink": "https://uniswap.org/whitepaper-v3.pdf",
+       ],
-    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/uniswap/"
+       "websiteLink":"https://www.stellar.org/",
+       "whitepaperLink":"https://www.stellar.org/papers/stellar-consensus-protocol",
+       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/stellar/"
     },
-  "WLD-USD": {
+    "XMR-USD":{
-    "name": "Worldcoin",
+       "name":"Monero",
-    "tags": [],
+       "tags":[
-    "websiteLink": "https://worldcoin.org/",
+          "Layer 1"
-    "whitepaperLink": "https://whitepaper.worldcoin.org/",
+       ],
-    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/worldcoin-org/"
+       "websiteLink":"https://www.getmonero.org/",
+       "whitepaperLink":"https://www.getmonero.org/resources/research-lab/",
+       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/monero/"
     },
-  "XLM-USD": {
+    "XRP-USD":{
-    "name": "Stellar",
+       "name":"Ripple",
-    "tags": ["Layer 1"],
+       "tags":[
-    "websiteLink": "https://www.stellar.org/",
+          "Layer 1"
-    "whitepaperLink": "https://www.stellar.org/papers/stellar-consensus-protocol",
+       ],
-    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/stellar/"
+       "websiteLink":"https://ripple.com/currency/",
+       "whitepaperLink":"https://github.com/ripple",
+       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/xrp/"
     },
-  "XMR-USD": {
+    "XTZ-USD":{
-    "name": "Monero",
+       "name":"Tezos",
-    "tags": ["Layer 1"],
+       "tags":[
-    "websiteLink": "https://www.getmonero.org/",
+          "Layer 1"
-    "whitepaperLink": "https://www.getmonero.org/resources/research-lab/",
+       ],
-    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/monero/"
+       "websiteLink":"https://tezos.com",
+       "whitepaperLink":"https://tezos.com/whitepaper.pdf",
+       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/tezos/"
     },
-  "XRP-USD": {
+    "YFI-USD":{
-    "name": "Ripple",
+       "name":"Yearn",
-    "tags": ["Layer 1"],
+       "tags":[
-    "websiteLink": "https://ripple.com/currency/",
+          "Defi"
-    "whitepaperLink": "https://github.com/ripple",
+       ],
-    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/xrp/"
+       "websiteLink":"https://yearn.finance/",
+       "whitepaperLink":"https://docs.yearn.finance/",
+       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/yearn-finance/"
     },
-  "XTZ-USD": {
+    "ZEC-USD":{
-    "name": "Tezos",
+       "name":"Zcash",
-    "tags": ["Layer 1"],
+       "tags":[
-    "websiteLink": "https://tezos.com",
+          "Layer 1"
-    "whitepaperLink": "https://tezos.com/whitepaper.pdf",
+       ],
-    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/tezos/"
+       "websiteLink":"https://z.cash/",
+       "whitepaperLink":"https://z.cash/technology/",
+       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/zcash/"
     },
-  "YFI-USD": {
+    "ZRX-USD":{
-    "name": "Yearn",
+       "name":"0x",
-    "tags": ["Defi"],
+       "tags":[
-    "websiteLink": "https://yearn.finance/",
+          "Defi"
-    "whitepaperLink": "https://docs.yearn.finance/",
+       ],
-    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/yearn-finance/"
+       "websiteLink":"https://0x.org/",
-  },
+       "whitepaperLink":"https://0x.org/pdfs/0x_white_paper.pdf",
-  "ZEC-USD": {
+       "coinMarketCapsLink":"https://coinmarketcap.com/currencies/0x/"
-    "name": "Zcash",
+    }
-    "tags": ["Layer 1"],
-    "websiteLink": "https://z.cash/",
-    "whitepaperLink": "https://z.cash/technology/",
-    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/zcash/"
-  },
-  "ZRX-USD": {
-    "name": "0x",
-    "tags": ["Defi"],
-    "websiteLink": "https://0x.org/",
-    "whitepaperLink": "https://0x.org/pdfs/0x_white_paper.pdf",
-    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/0x/"
  }
-}

public/configs/wallets.json

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

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>

scripts/inject-amplitude.js

@@ -3,13 +3,12 @@ import path from 'path';
 import { fileURLToPath } from 'url';
 
 const AMPLITUDE_API_KEY = process.env.AMPLITUDE_API_KEY;
-const AMPLITUDE_SERVER_URL = process.env.AMPLITUDE_SERVER_URL;
 
 const currentPath = fileURLToPath(import.meta.url);
 const projectRoot = path.dirname(currentPath);
 const htmlFilePath = path.resolve(projectRoot, '../dist/index.html');
 
-if (AMPLITUDE_API_KEY) {
+if(AMPLITUDE_API_KEY){
   try {
     const html = await fs.readFile(htmlFilePath, 'utf-8');
 
@@ -19,33 +18,7 @@ if (AMPLITUDE_API_KEY) {
         `;
 
     const amplitudeListenerScript = `<script type="module">
-      !(function () {
+        !function(){var e="${AMPLITUDE_API_KEY}";e&&(globalThis.amplitude.init(e),globalThis.amplitude.setOptOut(!1),globalThis.addEventListener("dydx:track",function(e){var t=e.detail.eventType,d=e.detail.eventData;globalThis.amplitude.track(t,d)}),globalThis.addEventListener("dydx:identify",function(e){var t=e.detail.property,d=e.detail.propertyValue;if("walletAddress"===t)globalThis.amplitude.setUserId(d);else{var i=new globalThis.amplitude.Identify;i.set(t,d),globalThis.amplitude.identify(i)}}),console.log("Amplitude enabled."))}();
-        var e = "${AMPLITUDE_API_KEY}";
-        e &&
-          (globalThis.amplitude.init(e${
-            AMPLITUDE_SERVER_URL
-              ? `, undefined, {
-                serverUrl: "${AMPLITUDE_SERVER_URL}"
-              }`
-              : ''
-          }),
-          globalThis.amplitude.setOptOut(!1),
-          globalThis.addEventListener("dydx:track", function (e) {
-            var t = e.detail.eventType,
-              d = e.detail.eventData;
-            globalThis.amplitude.track(t, d);
-          }),
-          globalThis.addEventListener("dydx:identify", function (e) {
-            var t = e.detail.property,
-              d = e.detail.propertyValue;
-            if ("walletAddress" === t) globalThis.amplitude.setUserId(d);
-            else {
-              var i = new globalThis.amplitude.Identify();
-              i.set(t, d), globalThis.amplitude.identify(i);
-            }
-          }),
-          console.log("Amplitude enabled."));
-      })();
         </script>`;
 
     const injectedHtml = html.replace(

src/App.tsx

@@ -1,11 +1,11 @@
-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';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { GrazProvider } from 'graz';
 
-import { AppRoute, DEFAULT_TRADE_ROUTE, MarketsRoute } from '@/constants/routes';
+import { AppRoute, DEFAULT_TRADE_ROUTE } from '@/constants/routes';
 
 import {
   useBreakpoints,
@@ -16,17 +16,26 @@ import {
 } from '@/hooks';
 import { DydxProvider } from '@/hooks/useDydxClient';
 import { AccountsProvider } from '@/hooks/useAccounts';
-import { AppThemeAndColorModeProvider } from '@/hooks/useAppThemeAndColorMode';
 import { DialogAreaProvider, useDialogArea } from '@/hooks/useDialogArea';
 import { LocaleProvider } from '@/hooks/useLocaleSeparators';
 import { NotificationsProvider } from '@/hooks/useNotifications';
 import { LocalNotificationsProvider } from '@/hooks/useLocalNotifications';
-import { PotentialMarketsProvider } from '@/hooks/usePotentialMarkets';
 import { RestrictionProvider } from '@/hooks/useRestrictions';
 import { SubaccountProvider } from '@/hooks/useSubaccount';
+import { SquidProvider } from '@/hooks/useSquid';
 
 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';
@@ -37,25 +46,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 NewMarket = lazy(() => import('@/pages/markets/NewMarket'));
-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 = () => {
@@ -70,23 +66,18 @@ const Content = () => {
   const { chainTokenLabel } = useTokenConfigs();
 
   return (
-    <>
-      <GlobalStyle />
     <Styled.Content isShowingHeader={isShowingHeader} isShowingFooter={isShowingFooter}>
       {isNotTablet && <HeaderDesktop />}
 
       <Styled.Main>
-          <Suspense fallback={<LoadingSpace id="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}>
-                <Route path={MarketsRoute.New} element={<NewMarket />} />
             <Route path={AppRoute.Markets} element={<MarketsPage />} />
-              </Route>
             <Route path={`/${chainTokenLabel}`} element={<RewardsPage />} />
             {isTablet && (
               <>
@@ -118,7 +109,6 @@ const Content = () => {
 
       <GlobalCommandDialog />
     </Styled.Content>
-    </>
   );
 };
 
@@ -138,11 +128,10 @@ const providers = [
   wrapProvider(DydxProvider),
   wrapProvider(AccountsProvider),
   wrapProvider(SubaccountProvider),
+  wrapProvider(SquidProvider),
   wrapProvider(LocalNotificationsProvider),
   wrapProvider(NotificationsProvider),
   wrapProvider(DialogAreaProvider),
-  wrapProvider(PotentialMarketsProvider),
-  wrapProvider(AppThemeAndColorModeProvider),
 ];
 
 const App = () => {

src/abi/erc20_usdt.json

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

src/components/Accordion.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(var(--hover-filter-base));
-    }
-  }
-
-  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

@@ -16,7 +16,6 @@ const assetIcons = {
   AVAX: '/currencies/avax.png',
   BCH: '/currencies/bch.png',
   BLUR: '/currencies/blur.png',
-  BONK: '/currencies/bonk.png',
   BTC: '/currencies/btc.png',
   CELO: '/currencies/celo.png',
   COMP: '/currencies/comp.png',
@@ -46,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',
@@ -73,13 +71,8 @@ export const AssetIcon = ({
 }: {
   symbol?: Nullable<string>;
   className?: string;
-}) => (
+}) =>
-  <Styled.Img
+  isAssetSymbol(symbol) ? <Styled.Img src={assetIcons[symbol]} className={className} /> : null;
-    src={isAssetSymbol(symbol) ? assetIcons[symbol] : '/currencies/unavailable.png'}
-    className={className}
-    alt={symbol}
-  />
-);
 
 const Styled: Record<string, AnyStyledComponent> = {};
 

src/components/BaseButton.tsx

@@ -134,8 +134,8 @@ const ButtonStyle = css<StyleProps>`
 
   --button-textColor: var(--color-text-0);
   --button-backgroundColor: transparent;
-  --button-active-filter: brightness(var(--active-filter));
+  --button-active-filter: brightness(0.9);
-  --button-hover-filter: brightness(var(--hover-filter-base));
+  --button-hover-filter: brightness(1.1);
   --button-hover-textColor: var(--button-textColor);
 
   --button-radius: 0.5em;

src/components/Button.tsx

@@ -61,7 +61,7 @@ export const Button = forwardRef<HTMLButtonElement | HTMLAnchorElement, ButtonPr
 
     return (
       <StyledBaseButton
-        disabled={state[ButtonState.Disabled] || state[ButtonState.Loading]}
+        disabled={state[ButtonState.Disabled]}
         {...{ ref, action, size, shape, state, ...otherProps }}
       >
         {
@@ -89,10 +89,9 @@ const buttonActionVariants = {
     --button-border: solid var(--border-width) var(--color-border);
   `,
   [ButtonAction.Primary]: css`
-    --button-textColor: var(--color-text-button);
+    --button-textColor: var(--color-text-2);
     --button-backgroundColor: var(--color-accent);
     --button-border: solid var(--border-width) var(--color-border-white);
-    --button-hover-filter: brightness(var(--hover-filter-variant));
   `,
 
   [ButtonAction.Secondary]: css`
@@ -102,17 +101,15 @@ const buttonActionVariants = {
   `,
 
   [ButtonAction.Create]: css`
-    --button-textColor: var(--color-text-button);
+    --button-textColor: var(--color-text-2);
-    --button-backgroundColor: var(--color-success);
+    --button-backgroundColor: var(--color-positive);
     --button-border: solid var(--border-width) var(--color-border-white);
-    --button-hover-filter: brightness(var(--hover-filter-variant));
   `,
 
   [ButtonAction.Destroy]: css`
-    --button-textColor: var(--color-text-button);
+    --button-textColor: var(--color-text-2);
-    --button-backgroundColor: var(--color-error);
+    --button-backgroundColor: var(--color-negative);
     --button-border: solid var(--border-width) var(--color-border-white);
-    --button-hover-filter: brightness(var(--hover-filter-variant));
   `,
 
   [ButtonAction.Navigation]: css`
@@ -122,10 +119,9 @@ const buttonActionVariants = {
   `,
 
   [ButtonAction.Reset]: css`
-    --button-textColor: var(--color-error);
+    --button-textColor: var(--color-negative);
     --button-backgroundColor: var(--color-layer-3);
     --button-border: solid var(--border-width) var(--color-border-red);
-    --button-hover-filter: brightness(var(--hover-filter-variant));
   `,
 };
 

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 (
@@ -13,20 +13,10 @@ export const CheckboxStory: Story<CheckboxProps> = (args) => {
       <Checkbox
         {...args}
         checked={isChecked}
-        onCheckedChange={setIsChecked}
+        onClick={(e: React.ChangeEvent) => setIsChecked((e.target as HTMLInputElement).checked)}
-        id="story-checkbox"
-        label="example label"
       />
     </StoryWrapper>
   );
 };
 
-CheckboxStory.args = {};
+Checkboxes.args = {};
-
-CheckboxStory.argTypes = {
-  disabled: {
-    options: [true, false],
-    control: { type: 'select' },
-    defaultValue: false,
-  }
-}

src/components/Checkbox.tsx

@@ -1,15 +1,10 @@
-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';
 
-import { layoutMixins } from '@/styles/layoutMixins';
+import { breakpoints } from '@/styles';
 
 type ElementProps = {
   checked: boolean;
-  onCheckedChange: (checked: boolean) => void;
+  onClick: (e: React.ChangeEvent) => void;
-  id?: string;
-  label?: React.ReactNode;
-  disabled?: boolean;
 };
 
 type StyleProps = {
@@ -18,79 +13,85 @@ type StyleProps = {
 
 export type CheckboxProps = ElementProps & StyleProps;
 
-export const Checkbox: React.FC<CheckboxProps> = ({
+export const Checkbox: React.FC<CheckboxProps> = ({ checked, className, onClick }) => {
-  checked,
+  return (
-  className,
+    <Styled.CheckboxWrapper className={className}>
-  onCheckedChange,
+      <Styled.Checkbox
-  id,
+        type="checkbox"
-  label,
-  disabled,
-}) => (
-  <Styled.Container>
-    <Styled.Root
-      className={className}
         checked={checked}
-      disabled={disabled}
+        onChange={onClick}
-      onCheckedChange={onCheckedChange}
+      />
-      id={id}
+      <Styled.CustomCheckbox />
-    >
+    </Styled.CheckboxWrapper>
-      <Styled.Indicator>
+  );
-        <CheckIcon />
+};
-      </Styled.Indicator>
-    </Styled.Root>
-    {label && (
-      <Styled.Label disabled={disabled} htmlFor={id}>
-        {label}
-      </Styled.Label>
-    )}
-  </Styled.Container>
-);
 
 const Styled: Record<string, AnyStyledComponent> = {};
 
-Styled.Container = styled.div`
+Styled.CustomCheckbox = styled.span`
-  ${layoutMixins.row}
+  width: 1.25em;
-  gap: 1ch;
+  height: 1.25em;
-  font: var(--font-small-book);
-`;
 
-Styled.Root = styled(Root)`
+  position: absolute;
-  --checkbox-backgroundColor: var(--color-layer-0);
+  left: 0;
-  --checkbox-borderColor: var(--color-border);
+  right: 0;
-
+  top: 0;
-  min-width: 1.25rem;
+  bottom: 0;
-  height: 1.25rem;
-
-  border-radius: 0.375rem;
-  border: var(--border-width) solid var(--checkbox-borderColor);
   background-color: var(--checkbox-backgroundColor);
 
-  &[data-state='checked'] {
+  &::after {
-    --checkbox-backgroundColor: var(--color-accent);
+    position: absolute;
+    content: '';
+    top: 0.25em;
+    left: 0.4375em;
+    width: 0.3125em;
+    height: 0.5em;
+    border: solid var(--checkbox-checkColor);
+    border-width: 0 0.125em 0.125em 0;
+    border-radius: 0.0625em;
+    opacity: 0;
+    transform: rotate(0deg) scale(0);
+    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out;
   }
 
-  &[data-disabled] {
+  @media ${breakpoints.tablet} {
-    cursor: not-allowed;
+    width: 1.5em;
+    height: 1.5em;
+
+    &::after {
+      top: 0.25em;
+      left: 0.4375em;
+      width: 0.4375em;
+      height: 0.625em;
+    }
+  }
+`;
+
+Styled.CheckboxWrapper = styled.div`
   --checkbox-backgroundColor: var(--color-layer-1);
+  --checkbox-checkColor: var(--color-text-1);
+
+  display: flex;
+  border-radius: 0.25em;
+  overflow: hidden;
+  position: relative;
+  cursor: pointer;
+
+  > input:checked ~ ${Styled.CustomCheckbox}::after {
+    opacity: 1;
+    transform: rotate(40deg) scale(1);
   }
 `;
 
-Styled.Indicator = styled(Indicator)`
+Styled.Checkbox = styled.input`
-  display: flex;
+  width: 1.25em;
-  align-items: center;
+  height: 1.25em;
-  justify-content: center;
+  z-index: 1;
-
-  color: var(--color-text-button);
-`;
-
-Styled.Label = styled.label<{ disabled?: boolean }>`
   cursor: pointer;
-  color: var(--color-text-2);
+  opacity: 0;
 
-  ${({ disabled }) =>
+  @media ${breakpoints.tablet} {
-    disabled &&
+    width: 1.5em;
-    css`
+    height: 1.5em;
-      cursor: not-allowed;
+  }
-      color: var(--color-text-0);
-    `}
 `;

src/components/Collapsible.stories.tsx

@@ -1,13 +1,16 @@
 import type { Story } from '@ladle/react';
 
-import { Collapsible, type CollapsibleProps } from '@/components/Collapsible';
+import { Collapsible } from '@/components/Collapsible';
 
 import { StoryWrapper } from '.ladle/components';
 import { IconName } from './Icon';
 
-export const CollapsibleStory: Story<CollapsibleProps> = (args) => (
+export const CollapsibleStory: Story<Parameters<typeof Collapsible>> = (args) => (
   <StoryWrapper>
-    <Collapsible {...args}>
+    <Collapsible
+      label="Collapsible List of Items"
+      {...args}
+    >
       <ul>
         <li>Collapsible Item 1</li>
         <li>Collapsible Item 2</li>
@@ -20,8 +23,6 @@ export const CollapsibleStory: Story<CollapsibleProps> = (args) => (
 
 CollapsibleStory.args = {
   disabled: false,
-  withTrigger: true,
-  label: 'Collapsible List of Items',
 };
 
 CollapsibleStory.argTypes = {

src/components/Collapsible.tsx

@@ -14,7 +14,6 @@ type ElementProps = {
   label: React.ReactNode;
   triggerIcon?: IconName;
   children: React.ReactNode;
-  withTrigger?: boolean;
 };
 
 type StyleProps = {
@@ -24,8 +23,6 @@ type StyleProps = {
   fullWidth?: boolean;
 };
 
-export type CollapsibleProps = ElementProps & StyleProps;
-
 export const Collapsible = ({
   defaultOpen = false,
   disabled,
@@ -38,10 +35,8 @@ export const Collapsible = ({
   triggerIconSide = 'left',
   fullWidth,
   className,
-  withTrigger = true,
+}: ElementProps & StyleProps) => (
-}: CollapsibleProps) => (
   <Styled.Root defaultOpen={defaultOpen} open={open} onOpenChange={onOpenChange}>
-    {withTrigger && (
     <Styled.Trigger className={className} disabled={disabled}>
       {triggerIconSide === 'right' && (
         <>
@@ -60,7 +55,6 @@ export const Collapsible = ({
         </>
       )}
     </Styled.Trigger>
-    )}
     <Styled.Content $transitionDuration={transitionDuration}>{children}</Styled.Content>
   </Styled.Root>
 );

src/components/CollapsibleTabs.tsx

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

src/components/ComboboxDialogMenu.tsx

@@ -22,12 +22,7 @@ type PickComboxMenuProps<
   MenuGroupValue extends string | number
 > = Pick<
   ComboboxMenuProps<MenuItemValue, MenuGroupValue>,
-  | 'inputPlaceholder'
+  'inputPlaceholder' | 'onItemSelected' | 'slotEmpty' | 'withSearch' | 'withStickyLayout'
-  | 'onItemSelected'
-  | 'slotEmpty'
-  | 'withItemBorders'
-  | 'withSearch'
-  | 'withStickyLayout'
 >;
 
 type PickDialogProps = Pick<
@@ -58,7 +53,6 @@ export const ComboboxDialogMenu = <
   onItemSelected,
   inputPlaceholder,
   slotEmpty,
-  withItemBorders,
   withSearch,
   withStickyLayout = true,
   children,
@@ -89,7 +83,6 @@ export const ComboboxDialogMenu = <
       title={title}
       inputPlaceholder={inputPlaceholder}
       slotEmpty={slotEmpty}
-      withItemBorders={withItemBorders}
       withSearch={withSearch}
       withStickyLayout={withStickyLayout}
     />
@@ -102,8 +95,6 @@ const Styled: Record<string, AnyStyledComponent> = {};
 Styled.Dialog = styled(Dialog)`
   /* Params */
   --comboboxDialogMenu-backgroundColor: var(--color-layer-2);
-  --comboboxDialogMenu-item-gap: 0.5rem;
-  --comboboxDialogMenu-item-padding: 0.5rem 1rem;
 
   /* Overrides */
   & {
@@ -122,12 +113,10 @@ Styled.Dialog = styled(Dialog)`
 
     /* Net 0 sticky top inset (let stickyArea1 header stick to top) */
     --stickyArea0-topGap: calc(-1 * var(--stickyArea0-topHeight));
-    overflow-x: clip;
   }
 `;
 
 Styled.ComboboxMenu = styled(ComboboxMenu)`
   --comboboxMenu-backgroundColor: var(--comboboxDialogMenu-backgroundColor);
-  --comboboxMenu-item-gap: var(--comboboxDialogMenu-item-gap);
+  --comboboxMenu-item-gap: var(--comboxDialogMenu-item-gap, 0.5rem);
-  --comboboxMenu-item-padding: var(--comboboxDialogMenu-item-padding);
 `;

src/components/ComboboxMenu.tsx

@@ -2,7 +2,7 @@ import { Fragment, type ReactNode, useState } from 'react';
 import styled, { type AnyStyledComponent, css } from 'styled-components';
 import { Command } from 'cmdk';
 
-import { MenuItem, type MenuConfig } from '@/constants/menus';
+import { type MenuConfig } from '@/constants/menus';
 import { popoverMixins } from '@/styles/popoverMixins';
 import { layoutMixins } from '@/styles/layoutMixins';
 
@@ -20,7 +20,6 @@ type ElementProps<MenuItemValue extends string | number, MenuGroupValue extends
 
 type StyleProps = {
   className?: string;
-  withItemBorders?: boolean;
   withStickyLayout?: boolean;
 };
 
@@ -39,36 +38,38 @@ export const ComboboxMenu = <MenuItemValue extends string, MenuGroupValue extend
   withSearch = true,
 
   className,
-  withItemBorders,
   withStickyLayout,
 }: ComboboxMenuProps<MenuItemValue, MenuGroupValue>) => {
   const [highlightedCommand, setHighlightedCommand] = useState<MenuItemValue>();
   const [searchValue, setSearchValue] = useState('');
+  // const inputRef = useRef<HTMLInputElement | null>(null);
+
+  // console.log({ commandValue: highlightedCommand });
+
+  // useEffect(() => {
+  //   inputRef?.current?.focus();
+  // }, []);
 
   return (
     <Styled.Command
       label={title}
       // value={highlightedCommand}
       // onValueChange={setHighlightedCommand}
-      filter={(value: string, search: string) =>
+      filter={(value: string, search: string) => {
-        value.replace(/ /g, '').toLowerCase().includes(search.replace(/ /g, '').toLowerCase())
+        if (value.replace(/ /g, '').includes(search.replace(/ /g, ''))) return 1;
-          ? 1
+        return 0;
-          : 0
+      }}
-      }
       className={className}
       $withStickyLayout={withStickyLayout}
     >
       {withSearch && (
         <Styled.Header $withStickyLayout={withStickyLayout}>
           <Styled.Input
-            /**
+            // ref={inputRef}
-             * Mobile Issue: Search Input will always trigger mobile keyboard drawer. There is no fix.
-             * https://github.com/pacocoursey/cmdk/issues/127
-             */
-            autoFocus
             type="search"
             value={searchValue}
             onValueChange={setSearchValue}
+            autoFocus
             placeholder={inputPlaceholder}
           />
         </Styled.Header>
@@ -79,7 +80,6 @@ export const ComboboxMenu = <MenuItemValue extends string, MenuGroupValue extend
           <Styled.Group
             key={group.group}
             heading={group.groupLabel}
-            $withItemBorders={withItemBorders}
             $withStickyLayout={withStickyLayout}
           >
             {group.items.map((item) => (
@@ -99,17 +99,11 @@ export const ComboboxMenu = <MenuItemValue extends string, MenuGroupValue extend
                     }
                   }}
                   disabled={item.disabled}
-                  $withItemBorders={withItemBorders}
                 >
-                  {
-                    <>
                   {item.slotBefore}
-                      {item.slotCustomContent ?? (
                   <Styled.ItemLabel>
                     <span>
-                            {typeof item.label === 'string'
+                      {`${item.label}${item.subitems?.length ? '…' : ''}`}
-                              ? `${item.label}${item.subitems?.length ? '…' : ''}`
-                              : item.label}
                       {item.tag && (
                         <>
                           {' '}
@@ -119,11 +113,8 @@ export const ComboboxMenu = <MenuItemValue extends string, MenuGroupValue extend
                     </span>
                     {item.description && <span>{item.description}</span>}
                   </Styled.ItemLabel>
-                      )}
                   {item.slotAfter}
                   {item.subitems && '→'}
-                    </>
-                  }
                 </Styled.Item>
 
                 {searchValue &&
@@ -146,7 +137,6 @@ export const ComboboxMenu = <MenuItemValue extends string, MenuGroupValue extend
                           onItemSelected?.();
                         }}
                         disabled={subitem.disabled}
-                        $withItemBorders={withItemBorders}
                       >
                         {subitem.slotBefore}
                         <Styled.ItemLabel>
@@ -179,17 +169,14 @@ const Styled: Record<string, AnyStyledComponent> = {};
 
 Styled.Command = styled(Command)<{ $withStickyLayout?: boolean }>`
   --comboboxMenu-backgroundColor: var(--color-layer-2);
-
   --comboboxMenu-input-backgroundColor: var(--color-layer-3);
   --comboboxMenu-input-height: 2.5rem;
-
   --comboboxMenu-item-checked-backgroundColor: ;
   --comboboxMenu-item-checked-textColor: ;
   --comboboxMenu-item-highlighted-backgroundColor: var(--color-layer-3);
   --comboboxMenu-item-highlighted-textColor: var(--color-text-1);
   --comboboxMenu-item-backgroundColor: ;
   --comboboxMenu-item-gap: 0.5rem;
-  --comboboxMenu-item-padding: 0.5em 1em;
 
   display: grid;
   align-content: start;
@@ -238,7 +225,7 @@ Styled.Input = styled(Command.Input)`
   gap: 0.5rem;
 `;
 
-Styled.Group = styled(Command.Group)<{ $withItemBorders?: boolean; $withStickyLayout?: boolean }>`
+Styled.Group = styled(Command.Group)<{ $withStickyLayout?: boolean }>`
   color: var(--color-text-0);
 
   > [cmdk-group-heading] {
@@ -255,21 +242,12 @@ Styled.Group = styled(Command.Group)<{ $withItemBorders?: boolean; $withStickyLa
 
       > [cmdk-group-heading] {
         ${layoutMixins.stickyHeader}
-        z-index: 2;
       }
 
       > [cmdk-group-items] {
         ${layoutMixins.stickyArea3}
       }
     `}
-
-  ${({ $withItemBorders }) =>
-    $withItemBorders &&
-    css`
-      > [cmdk-group-items] {
-        padding: var(--border-width) 0;
-      }
-    `}
 `;
 
 Styled.List = styled(Command.List)<{ $withStickyLayout?: boolean }>`
@@ -296,14 +274,13 @@ Styled.List = styled(Command.List)<{ $withStickyLayout?: boolean }>`
     `}
 `;
 
-Styled.Item = styled(Command.Item)<{ $withItemBorders?: boolean }>`
+Styled.Item = styled(Command.Item)`
   ${layoutMixins.scrollSnapItem}
   ${popoverMixins.item}
   --item-checked-backgroundColor: var(--comboboxMenu-item-checked-backgroundColor);
   --item-checked-textColor: var(--comboboxMenu-item-checked-textColor);
   --item-highlighted-textColor: var(--comboboxMenu-item-highlighted-textColor);
   --item-gap: var(--comboboxMenu-item-gap);
-  --item-padding: var(--comboboxMenu-item-padding);
 
   background-color: var(--comboboxMenu-backgroundColor, inherit);
 
@@ -314,12 +291,6 @@ Styled.Item = styled(Command.Item)<{ $withItemBorders?: boolean }>`
     opacity: 0.75;
     cursor: not-allowed;
   }
-
-  ${({ $withItemBorders }) =>
-    $withItemBorders &&
-    css`
-      ${layoutMixins.withOuterBorder}
-    `}
 `;
 
 Styled.ItemLabel = styled.div`
@@ -338,8 +309,6 @@ Styled.ItemLabel = styled.div`
       opacity: 0.8;
     }
   }
-
-  min-width: 0;
 `;
 
 Styled.Empty = styled(Command.Empty)`

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/CopyButton.stories.tsx

@@ -15,10 +15,10 @@ CopyButtonStory.args = {
 };
 
 CopyButtonStory.argTypes = {
-  buttonType: {
+  shownAsText: {
-    options: ["text", "icon", "default"],
+    options: [true, false],
     control: { type: 'select' },
-    defaultValue: "default",
+    defaultValue: false,
   },
   children: {
     options: ['some text to copy'],

src/components/CopyButton.tsx

@@ -9,21 +9,14 @@ import { layoutMixins } from '@/styles/layoutMixins';
 
 import { Button, ButtonProps } from './Button';
 import { Icon, IconName } from './Icon';
-import { IconButton } from './IconButton';
-import { WithTooltip } from './WithTooltip';
 
 export type CopyButtonProps = {
   value?: string;
-  buttonType?: 'text' | 'icon' | 'default';
+  shownAsText?: boolean;
   children?: React.ReactNode;
 } & ButtonProps;
 
-export const CopyButton = ({
+export const CopyButton = ({ value, shownAsText, children, ...buttonProps }: CopyButtonProps) => {
-  value,
-  buttonType = 'default',
-  children,
-  ...buttonProps
-}: CopyButtonProps) => {
   const stringGetter = useStringGetter();
   const [copied, setCopied] = useState(false);
 
@@ -35,23 +28,11 @@ export const CopyButton = ({
     setTimeout(() => setCopied(false), 500);
   };
 
-  return buttonType === 'text' ? (
+  return shownAsText ? (
     <Styled.InlineRow onClick={onCopy} copied={copied}>
       {children}
-      <Styled.Icon copied={copied} iconName={copied ? IconName.Check : IconName.Copy} />
+      <Icon iconName={IconName.Copy} />
     </Styled.InlineRow>
-  ) : buttonType === 'icon' ? (
-    <WithTooltip
-      tooltipString={stringGetter({ key: copied ? STRING_KEYS.COPIED : STRING_KEYS.COPY })}
-    >
-      <Styled.IconButton
-        {...buttonProps}
-        copied={copied}
-        action={ButtonAction.Base}
-        iconName={copied ? IconName.Check : IconName.Copy}
-        onClick={onCopy}
-      />
-    </WithTooltip>
   ) : (
     <Button
       {...buttonProps}
@@ -77,26 +58,8 @@ Styled.InlineRow = styled.div<{ copied: boolean }>`
         `
       : css`
           &:hover {
-            filter: brightness(var(--hover-filter-base));
+            filter: brightness(1.1);
             text-decoration: underline;
           }
         `}
 `;
-
-Styled.Icon = styled(Icon)<{ copied: boolean }>`
-  ${({ copied }) =>
-    copied &&
-    css`
-      color: var(--color-success);
-    `}
-`;
-
-Styled.IconButton = styled(IconButton)<{ copied: boolean }>`
-  ${({ copied }) =>
-    copied &&
-    css`
-      svg {
-        color: var(--color-success);
-      }
-    `}
-`;

src/components/Dialog.tsx

@@ -38,7 +38,6 @@ type ElementProps = {
   slotTrigger?: React.ReactNode;
   slotHeaderInner?: React.ReactNode;
   slotFooter?: React.ReactNode;
-  withClose?: boolean;
 };
 
 type StyleProps = {
@@ -47,7 +46,6 @@ type StyleProps = {
   hasHeaderBorder?: boolean;
   children?: React.ReactNode;
   className?: string;
-  withAnimation?: boolean;
 };
 
 export type DialogProps = ElementProps & StyleProps;
@@ -81,11 +79,9 @@ export const Dialog = ({
   slotTrigger,
   slotHeaderInner,
   slotFooter,
-  withClose = true,
   placement = DialogPlacement.Default,
   portalContainer,
   hasHeaderBorder = false,
-  withAnimation = false,
   children,
   className,
 }: DialogProps) => {
@@ -109,7 +105,6 @@ export const Dialog = ({
               e.preventDefault();
             }
           }}
-          $withAnimation={withAnimation}
         >
           <Styled.Header $withBorder={hasHeaderBorder}>
             <Styled.HeaderTopRow>
@@ -119,7 +114,7 @@ export const Dialog = ({
 
               {title && <Styled.Title>{title}</Styled.Title>}
 
-              {!preventClose && withClose && (
+              {!preventClose && (
                 <Styled.Close ref={closeButtonRef}>
                   <Icon iconName={IconName.Close} />
                 </Styled.Close>
@@ -173,7 +168,7 @@ Styled.Overlay = styled(Overlay)`
   }
 `;
 
-Styled.Container = styled(Content)<{ placement: DialogPlacement; $withAnimation?: boolean }>`
+Styled.Container = styled(Content)<{ placement: DialogPlacement }>`
   /* Params */
   --dialog-inset: 1rem;
   --dialog-width: 30rem;
@@ -229,7 +224,7 @@ Styled.Container = styled(Content)<{ placement: DialogPlacement; $withAnimation?
 
   outline: none;
 
-  ${({ placement, $withAnimation }) =>
+  ${({ placement }) =>
     ({
       [DialogPlacement.Default]: css`
         inset: var(--dialog-inset);
@@ -265,8 +260,6 @@ Styled.Container = styled(Content)<{ placement: DialogPlacement; $withAnimation?
           padding-bottom: var(--dialog-radius); */
         }
 
-        ${$withAnimation &&
-        css`
         @media (prefers-reduced-motion: no-preference) {
           &[data-state='open'] {
             animation: ${keyframes`
@@ -289,7 +282,6 @@ Styled.Container = styled(Content)<{ placement: DialogPlacement; $withAnimation?
             `} 0.15s;
           }
         }
-        `}
       `,
       [DialogPlacement.Sidebar]: css`
         --dialog-width: var(--sidebar-width);
@@ -299,8 +291,6 @@ Styled.Container = styled(Content)<{ placement: DialogPlacement; $withAnimation?
           margin-left: auto;
         }
 
-        ${$withAnimation &&
-        css`
         @media (prefers-reduced-motion: no-preference) {
           &[data-state='open'] {
             animation: ${keyframes`
@@ -320,17 +310,16 @@ Styled.Container = styled(Content)<{ placement: DialogPlacement; $withAnimation?
             `} 0.15s var(--ease-out-expo);
           }
         }
-        `}
       `,
       [DialogPlacement.Inline]: css`
-        ${$withAnimation &&
-        css`
         @media (prefers-reduced-motion: no-preference) {
           &[data-state='open'] {
             animation: ${keyframes`
               from {
                 scale: 0.99;
                 opacity: 0;
+                /* filter: blur(2px); */
+                /* backdrop-filter: none; */
               }
             `} 0.15s var(--ease-out-expo);
           }
@@ -340,11 +329,12 @@ Styled.Container = styled(Content)<{ placement: DialogPlacement; $withAnimation?
               to {
                 scale: 0.99;
                 opacity: 0;
+                /* filter: blur(2px); */
+                /* backdrop-filter: none; */
               }
             `} 0.15s var(--ease-out-expo);
           }
         }
-        `}
       `,
       [DialogPlacement.FullScreen]: css`
         --dialog-width: 100vw;

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/DiffOutput.tsx

@@ -75,7 +75,7 @@ Styled.DiffValue = styled.div<{ hasInvalidNewValue?: boolean }>`
   ${({ hasInvalidNewValue }) =>
     hasInvalidNewValue &&
     css`
-      color: var(--color-error);
+      color: var(--color-negative);
     `}
 `;
 

src/components/DropdownHeaderMenu.tsx

@@ -87,7 +87,7 @@ Styled.Trigger = styled(Trigger)`
   outline: none;
 
   :hover {
-    filter: brightness(var(--hover-filter-base));
+    filter: brightness(1.1);
   }
 `;
 

src/components/DropdownMenu.stories.tsx

@@ -6,34 +6,29 @@ import { StoryWrapper } from '.ladle/components';
 
 export const DropdownMenuStory: Story<Parameters<typeof DropdownMenu>> = (args) => {
   const exampleItems = [
-    {
-      value: '0',
-      label: 'Item 0',
-      onSelect: () => alert('Item 0 action'),
-    },
     {
       value: '1',
-      label: 'Item 1 (accent)',
+      label: 'Item 1',
       onSelect: () => alert('Item 1 action'),
-      highlightColor: 'accent',
     },
     {
       value: '2',
-      label: 'Item 2 (create)',
+      label: 'Item 2',
       onSelect: () => alert('Item 2 action'),
-      highlightColor: 'create',
     },
     {
       value: '3',
-      label: 'Item 3 (destroy)',
+      label: 'Item 3',
       onSelect: () => alert('Item 3 action'),
-      highlightColor: 'destroy',
     },
   ];
 
   return (
     <StoryWrapper>
-      <DropdownMenu {...args} items={exampleItems}>
+      <DropdownMenu
+        {...args}
+        items={exampleItems}
+      >
         <span>Menu</span>
       </DropdownMenu>
     </StoryWrapper>

src/components/DropdownMenu.tsx

@@ -13,7 +13,7 @@ export type DropdownMenuItem<T> = {
   label: React.ReactNode;
   onSelect?: () => void;
   separator?: boolean;
-  highlightColor?: 'accent' | 'create' | 'destroy';
+  highlightColor?: 'accent' | 'positive' | 'negative';
 };
 
 type StyleProps = {
@@ -82,7 +82,7 @@ Styled.Separator = styled(Separator)`
   margin: 0.25rem 1rem;
 `;
 
-Styled.Item = styled(Item)<{ $highlightColor: 'accent' | 'create' | 'destroy' }>`
+Styled.Item = styled(Item)<{ $highlightColor: 'accent' | 'positive' | 'negative' }>`
   ${popoverMixins.item}
   --item-font-size: var(--dropdownMenu-item-font-size);
   ${({ $highlightColor }) =>
@@ -90,11 +90,11 @@ Styled.Item = styled(Item)<{ $highlightColor: 'accent' | 'create' | 'destroy' }>
       ['accent']: `
         --item-highlighted-textColor: var(--color-accent);
       `,
-      ['create']: `
+      ['positive']: `
-        --item-highlighted-textColor: var(--color-success);
+        --item-highlighted-textColor: var(--color-positive);
       `,
-      ['destroy']: `
+      ['negative']: `
-        --item-highlighted-textColor: var(--color-error);
+        --item-highlighted-textColor: var(--color-negative);
       `,
     }[$highlightColor])}
 

src/components/DropdownSelectMenu.tsx

@@ -9,7 +9,6 @@ import {
   RadioItem,
   Portal,
 } from '@radix-ui/react-dropdown-menu';
-import { CheckIcon } from '@radix-ui/react-icons';
 
 import { type MenuItem } from '@/constants/menus';
 
@@ -91,9 +90,7 @@ export const DropdownSelectMenu = <MenuItemValue extends string>({
 
                 {slotAfter}
 
-                <Styled.ItemIndicator>
+                <Styled.ItemIndicator>✔{/* <CheckIcon /> */}</Styled.ItemIndicator>
-                  <CheckIcon />
-                </Styled.ItemIndicator>
               </Styled.RadioItem>
             ))}
           </RadioGroup>

src/components/FormInput.tsx

@@ -32,7 +32,7 @@ export const FormInput = forwardRef<HTMLInputElement, FormInputProps>(
       isValidationAttached={validationConfig?.attached}
     >
       <Styled.InputContainer hasSlotRight={!!slotRight}>
-        <Styled.WithLabel label={label} inputID={id} disabled={otherProps?.disabled}>
+        <Styled.WithLabel label={label} inputID={id}>
           <Input ref={ref} id={id} {...otherProps} />
         </Styled.WithLabel>
         {slotRight}
@@ -85,11 +85,11 @@ Styled.InputContainer = styled.div<{ hasSlotRight?: boolean }>`
     `}
 `;
 
-Styled.WithLabel = styled(WithLabel)<{ disabled?: boolean }>`
+Styled.WithLabel = styled(WithLabel)`
   ${formMixins.inputLabel}
 
   label {
-    ${({ disabled }) => !disabled && 'cursor: text;'}
+    cursor: text;
     padding: var(--form-input-paddingY) var(--form-input-paddingX) 0;
   }
 `;

src/components/GreenCheckCircle.tsx

@@ -1,16 +1,43 @@
 import styled, { AnyStyledComponent } from 'styled-components';
 
+import { layoutMixins } from '@/styles/layoutMixins';
+
 import { Icon, IconName } from '@/components/Icon';
 
 export const GreenCheckCircle = ({ className }: { className?: string }) => (
-  <Styled.Icon className={className} iconName={IconName.CheckCircle} />
+  <Styled.GreenCheckCircle className={className}>
+    <Icon iconName={IconName.Check} />
+  </Styled.GreenCheckCircle>
 );
 
 const Styled: Record<string, AnyStyledComponent> = {};
 
-Styled.Icon = styled(Icon)`
+Styled.GreenCheckCircle = styled.div`
+  ${layoutMixins.stack}
+
   --icon-size: 1.25rem;
+  --icon-border-width: 3px;
 
   width: var(--icon-size);
   height: var(--icon-size);
+  border-radius: 50%;
+
+  align-items: center;
+
+  &:before {
+    content: '';
+    width: calc(var(--icon-size) - var(--icon-border-width) * 2);
+    height: calc(var(--icon-size) - var(--icon-border-width) * 2);
+    border: solid var(--icon-border-width) var(--color-positive);
+    border-radius: 50%;
+    opacity: 0.6;
+  }
+
+  svg {
+    width: calc(var(--icon-size) / 3);
+    height: calc(var(--icon-size) / 3);
+
+    color: var(--color-positive);
+    justify-self: center;
+  }
 `;

src/components/Icon.tsx

@@ -13,10 +13,8 @@ import {
   CaretIcon,
   CautionCircleStrokeIcon,
   CautionCircleIcon,
-  ChaosLabsIcon,
   ChatIcon,
   CheckIcon,
-  CheckCircleIcon,
   ChevronLeftIcon,
   ChevronRightIcon,
   ClockIcon,
@@ -25,6 +23,7 @@ import {
   CoinsIcon,
   CommentIcon,
   CopyIcon,
+  CubeIcon,
   DepositIcon,
   DepthChartIcon,
   DiscordIcon,
@@ -38,14 +37,12 @@ import {
   HelpCircleIcon,
   HideIcon,
   HistoryIcon,
-  LeaderboardIcon,
   LinkOutIcon,
   LockIcon,
   LogoShortIcon,
   MenuIcon,
   MigrateIcon,
   MintscanIcon,
-  MoonIcon,
   OrderbookIcon,
   OrderCanceledIcon,
   OrderFilledIcon,
@@ -55,20 +52,16 @@ import {
   OrderUntriggeredIcon,
   OverviewIcon,
   PencilIcon,
-  PlayIcon,
-  PlusIcon,
   PositionsIcon,
   PriceChartIcon,
   PrivacyIcon,
   QrIcon,
-  RewardStarIcon,
   SearchIcon,
   SendIcon,
   ShareIcon,
   ShowIcon,
   TogglesMenuIcon,
   StarIcon,
-  SunIcon,
   TerminalIcon,
   TradeIcon,
   TransferIcon,
@@ -91,10 +84,8 @@ export enum IconName {
   Caret = 'Caret',
   CautionCircle = 'CautionCircle',
   CautionCircleStroked = 'CautionCircleStroked',
-  ChaosLabs = 'ChaosLabs',
   Chat = 'Chat',
   Check = 'Check',
-  CheckCircle = 'CheckCircle',
   ChevronLeft = 'ChevronLeft',
   ChevronRight = 'ChevronRight',
   Clock = 'Clock',
@@ -103,6 +94,7 @@ export enum IconName {
   Coins = 'Coins',
   Comment = 'Comment',
   Copy = 'Copy',
+  Cube = 'Cube',
   Deposit = 'Deposit',
   DepthChart = 'DepthChart',
   Discord = 'Discord',
@@ -116,14 +108,12 @@ export enum IconName {
   HelpCircle = 'HelpCircle',
   Hide = 'Hide',
   History = 'History',
-  Leaderboard = 'Leaderboard',
   LinkOut = 'LinkOut',
   Lock = 'Lock',
   LogoShort = 'LogoShort',
   Menu = 'Menu',
   Migrate = 'Migrate',
   Mintscan = 'Mintscan',
-  Moon = 'Moon',
   Onboarding = 'Onboarding',
   Orderbook = 'OrderbookIcon',
   OrderCanceled = 'OrderCanceled',
@@ -134,19 +124,15 @@ export enum IconName {
   OrderUntriggered = 'OrderUntriggered',
   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',
@@ -170,10 +156,8 @@ const icons = {
   [IconName.Caret]: CaretIcon,
   [IconName.CautionCircle]: CautionCircleIcon,
   [IconName.CautionCircleStroked]: CautionCircleStrokeIcon,
-  [IconName.ChaosLabs]: ChaosLabsIcon,
   [IconName.Chat]: ChatIcon,
   [IconName.Check]: CheckIcon,
-  [IconName.CheckCircle]: CheckCircleIcon,
   [IconName.ChevronLeft]: ChevronLeftIcon,
   [IconName.ChevronRight]: ChevronRightIcon,
   [IconName.Clock]: ClockIcon,
@@ -182,6 +166,7 @@ const icons = {
   [IconName.Coins]: CoinsIcon,
   [IconName.Comment]: CommentIcon,
   [IconName.Copy]: CopyIcon,
+  [IconName.Cube]: CubeIcon,
   [IconName.Deposit]: DepositIcon,
   [IconName.DepthChart]: DepthChartIcon,
   [IconName.Discord]: DiscordIcon,
@@ -195,14 +180,12 @@ const icons = {
   [IconName.HelpCircle]: HelpCircleIcon,
   [IconName.Hide]: HideIcon,
   [IconName.History]: HistoryIcon,
-  [IconName.Leaderboard]: LeaderboardIcon,
   [IconName.LinkOut]: LinkOutIcon,
   [IconName.Lock]: LockIcon,
   [IconName.LogoShort]: LogoShortIcon,
   [IconName.Menu]: MenuIcon,
   [IconName.Migrate]: MigrateIcon,
   [IconName.Mintscan]: MintscanIcon,
-  [IconName.Moon]: MoonIcon,
   [IconName.Orderbook]: OrderbookIcon,
   [IconName.OrderCanceled]: OrderCanceledIcon,
   [IconName.OrderFilled]: OrderFilledIcon,
@@ -212,19 +195,15 @@ const icons = {
   [IconName.OrderUntriggered]: OrderUntriggeredIcon,
   [IconName.Overview]: OverviewIcon,
   [IconName.Pencil]: PencilIcon,
-  [IconName.Play]: PlayIcon,
-  [IconName.Plus]: PlusIcon,
   [IconName.Positions]: PositionsIcon,
   [IconName.PriceChart]: PriceChartIcon,
   [IconName.Privacy]: PrivacyIcon,
   [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/Input.tsx

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

src/components/Loading/LoadingSpinner.tsx

@@ -11,7 +11,6 @@ export const LoadingSpinner: React.FC<{
   return (
     <Styled.Spinner className={className}>
       <Styled.LoadingSpinnerSvg
-        id={id}
         width="38"
         height="38"
         viewBox="0 0 38 38"

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/NavigationMenu.tsx

@@ -1,4 +1,4 @@
-import { forwardRef, Ref } from 'react';
+import { forwardRef, Ref, useEffect, useRef, useState } from 'react';
 import styled, { type AnyStyledComponent, css, keyframes } from 'styled-components';
 import { NavLink, matchPath, useLocation } from 'react-router-dom';
 
@@ -21,6 +21,8 @@ import {
 
 import { layoutMixins } from '@/styles/layoutMixins';
 
+import { isTruthy } from '@/lib/isTruthy';
+
 import { Tag } from './Tag';
 import { Icon, IconName } from './Icon';
 
@@ -59,6 +61,7 @@ const NavItem = forwardRef(
       <>
         {slotBefore}
         <span>
+          {/* {`${label}${subitems?.length ? ' ' : ''}`} */}
           {label}
           {tag && (
             <>
@@ -97,6 +100,8 @@ const NavItem = forwardRef(
   }
 );
 
+type TriggerRef = HTMLAnchorElement | HTMLDivElement | HTMLButtonElement | null;
+
 export const NavigationMenu = <MenuItemValue extends string, MenuGroupValue extends string>({
   onSelectItem,
   onSelectGroup,
@@ -107,6 +112,33 @@ export const NavigationMenu = <MenuItemValue extends string, MenuGroupValue exte
   dir = 'ltr',
   className,
 }: ElementProps<MenuItemValue, MenuGroupValue> & StyleProps) => {
+  // Disable click (close) in the first 500ms after hover (open)
+  // https://github.com/radix-ui/primitives/issues/1630#issuecomment-1545995075
+  const [clickIsDisabled, setClickIsDisabled] = useState(false);
+  const triggerRefs = useRef({} as { [value: string]: TriggerRef });
+
+  useEffect(() => {
+    const observer = new MutationObserver((mutationsList) => {
+      for (const mutation of mutationsList) {
+        if (
+          mutation.type === 'attributes' &&
+          mutation.attributeName === 'data-state' &&
+          (mutation.target as unknown as HTMLOrSVGElement).dataset.state === 'open' &&
+          mutation.target !== document.activeElement
+        ) {
+          setClickIsDisabled(true);
+          setTimeout(() => setClickIsDisabled(false), 500);
+        }
+      }
+    });
+
+    for (const element of Object.values(triggerRefs.current).filter(isTruthy)) {
+      observer.observe(element, { attributes: true });
+    }
+
+    return () => observer.disconnect();
+  }, []);
+
   const renderSubitems = ({
     item,
     depth = 0,
@@ -116,18 +148,18 @@ export const NavigationMenu = <MenuItemValue extends string, MenuGroupValue exte
   }) => (
     <>
       <Styled.SubMenuTrigger
-        asChild
+        asChild={depth > 0}
-        onPointerMove={(e: MouseEvent) => e.preventDefault()}
+        ref={(ref: TriggerRef) => (triggerRefs.current[item.value] = ref)}
-        onPointerLeave={(e: MouseEvent) => e.preventDefault()}
+        onClick={(e: MouseEvent) => {
+          if (clickIsDisabled) {
+            e.preventDefault();
+          }
+        }}
       >
         <Styled.NavItem onSelect={onSelectGroup} orientation={itemOrientation} {...item} />
       </Styled.SubMenuTrigger>
 
-      <Styled.Content
+      <Styled.Content data-placement={submenuPlacement}>
-        onPointerEnter={(e: MouseEvent) => e.preventDefault()}
-        onPointerLeave={(e: MouseEvent) => e.preventDefault()}
-        data-placement={submenuPlacement}
-      >
         <Styled.Sub data-placement={submenuPlacement}>
           <Styled.List
             data-orientation={depth > 0 ? 'menu' : orientation === 'vertical' ? 'vertical' : 'menu'}
@@ -378,12 +410,25 @@ Styled.List = styled(List)`
 `;
 
 Styled.ListItem = styled(Item)`
+  /* display: contents; */
   display: grid;
   position: relative;
 
   ${Styled.List}[data-orientation="horizontal"] > & {
     gap: var(--submenu-side-offset);
   }
+
+  /* ${Styled.List}[data-orientation="menu"] > & {
+    grid-template-columns: 1fr 0;
+    align-items: start;
+    gap: 2rem;
+  } */
+
+  /* &:has([data-state="open"]) {
+    position: sticky;
+    left: 0;
+    right: 0;
+  } */
 `;
 
 Styled.SubMenuTrigger = styled(Trigger)`
@@ -391,6 +436,11 @@ Styled.SubMenuTrigger = styled(Trigger)`
   outline-offset: -2px;
 
   &[data-state='open'] {
+    div {
+      background-color: var(--navigationMenu-item-checked-backgroundColor);
+      color: var(--navigationMenu-item-checked-textColor);
+    }
+
     svg {
       rotate: 0.5turn;
     }
@@ -402,10 +452,11 @@ Styled.NavItem = styled(NavItem)<{ orientation: 'horizontal' | 'vertical' }>`
     subitems?.length
       ? css`
           ${popoverMixins.trigger}
-          --trigger-open-backgroundColor: var(--navigationMenu-item-checked-backgroundColor);
+          --trigger-backgroundColor: transparent;
+          --trigger-open-backgroundColor: var(--color-layer-3);
         `
       : css`
-          &:hover:not(:active) {
+          &:hover:not(.active) {
             background-color: var(--navigationMenu-item-highlighted-backgroundColor);
             color: var(--navigationMenu-item-highlighted-textColor);
           }
@@ -419,6 +470,8 @@ Styled.NavItem = styled(NavItem)<{ orientation: 'horizontal' | 'vertical' }>`
   --item-radius: var(--navigationMenu-item-radius);
   --item-padding: var(--navigationMenu-item-padding);
 
+  /* ${popoverMixins.backdropOverlay} */
+
   ${layoutMixins.scrollSnapItem}
 
   min-height: var(--navigationMenu-item-height);

src/components/Notification.tsx

@@ -1,201 +0,0 @@
-import React, { type MouseEvent } from 'react';
-import styled, { css } from 'styled-components';
-
-import { ButtonShape, ButtonSize } from '@/constants/buttons';
-
-import {
-  NotificationStatus,
-  type Notification as NotificationDataType,
-} from '@/constants/notifications';
-
-import { useNotifications } from '@/hooks/useNotifications';
-
-import { popoverMixins } from '@/styles/popoverMixins';
-import { layoutMixins } from '@/styles/layoutMixins';
-
-import { IconButton } from '@/components/IconButton';
-import { IconName } from '@/components/Icon';
-import { Output, OutputType } from '@/components/Output';
-
-type ElementProps = {
-  notification: NotificationDataType;
-  onClick?: () => void;
-  slotIcon?: React.ReactNode;
-  slotTitle?: React.ReactNode;
-  slotTitleLeft?: React.ReactNode;
-  slotTitleRight?: React.ReactNode;
-  slotDescription?: React.ReactNode;
-  slotCustomContent?: React.ReactNode;
-  slotAction?: React.ReactNode;
-  withClose?: boolean;
-};
-
-type StyleProps = {
-  className?: string;
-  isToast?: boolean;
-};
-
-export type NotificationProps = ElementProps & StyleProps;
-
-export const Notification = ({
-  className,
-  isToast,
-  notification,
-  onClick,
-  slotIcon,
-  slotTitle,
-  slotTitleLeft,
-  slotTitleRight,
-  slotDescription,
-  slotCustomContent,
-  slotAction,
-  withClose = !isToast,
-}: NotificationProps) => {
-  const { markCleared, markSeen } = useNotifications();
-
-  return (
-    <$Container className={className} isToast={isToast} onClick={onClick}>
-      <$Header>
-        {slotTitleLeft ?? (slotIcon && <$Icon>{slotIcon}</$Icon>)}
-        <$Title>{slotTitle}</$Title>
-        {slotTitleRight}
-        {withClose && !isToast && (
-          <$ActionItems>
-            <$Output
-              type={OutputType.RelativeTime}
-              value={notification.timestamps[NotificationStatus.Triggered]}
-            />
-
-            {notification.status < NotificationStatus.Seen ? <$UnreadIndicator /> : null}
-
-            {notification.status < NotificationStatus.Cleared ? (
-              <$IconButton
-                iconName={IconName.Close}
-                shape={ButtonShape.Square}
-                size={ButtonSize.XSmall}
-                onClick={(e: MouseEvent) => {
-                  e.stopPropagation();
-
-                  if (notification.status < NotificationStatus.Seen) {
-                    markSeen(notification);
-                  } else if (notification.status < NotificationStatus.Cleared) {
-                    markCleared(notification);
-                  }
-                }}
-              />
-            ) : null}
-          </$ActionItems>
-        )}
-      </$Header>
-      <$Description>{slotCustomContent ?? slotDescription}</$Description>
-      {slotAction && <$Action>{slotAction}</$Action>}
-    </$Container>
-  );
-};
-
-const $Container = styled.div<{ isToast?: boolean }>`
-  // Params
-  --toast-icon-size: 1.75em;
-
-  // Rules
-  ${popoverMixins.popover}
-  overflow: visible;
-  padding: 1rem 1.25rem;
-
-  ${({ isToast }) =>
-    isToast
-      ? css`
-          padding: 1rem;
-          box-shadow: 0 0 0 var(--border-width) var(--color-border),
-            // border
-            0 0 0.5rem 0.1rem var(--color-layer-2); // shadow
-        `
-      : css`
-          flex: 1;
-          background-color: transparent;
-          border-radius: 0;
-          backdrop-filter: none;
-        `}
-`;
-
-const $Header = styled.header`
-  ${layoutMixins.row}
-  position: relative;
-`;
-
-const $Icon = styled.div`
-  ${layoutMixins.row}
-  float: left;
-
-  margin-right: 0.5rem;
-
-  line-height: 1;
-
-  > svg,
-  img {
-    width: 1.5rem;
-    height: 1.5rem;
-  }
-`;
-
-const $Title = styled.div`
-  flex: 1;
-
-  font: var(--font-base-medium);
-  color: var(--color-text-2);
-
-  overflow: hidden;
-  text-overflow: ellipsis;
-`;
-
-const $Description = styled.div`
-  margin-top: 0.5rem;
-  color: var(--color-text-0);
-  font: var(--font-small-book);
-`;
-
-const $Action = styled.div`
-  margin-top: 0.5rem;
-  font: var(--font-small-book);
-`;
-
-const $ActionItems = styled.div`
-  min-width: fit-content;
-  padding-left: 0.5rem;
-  height: 100%;
-  ${layoutMixins.row};
-  justify-content: end;
-  gap: 0.5rem;
-
-  position: absolute;
-  right: 0;
-  top: 0;
-
-  background-color: var(--color-layer-2);
-  font: var(--font-mini-book);
-
-  display: none;
-  z-index: 1;
-
-  ${$Container}:hover & {
-    display: flex;
-  }
-`;
-
-const $UnreadIndicator = styled.div`
-  width: 0.5rem;
-  height: 0.5rem;
-  border-radius: 50%;
-  background-color: var(--color-accent);
-  border: 1px solid var(--color-layer-2);
-`;
-
-const $Output = styled(Output)`
-  color: var(--color-text-0);
-`;
-
-const $IconButton = styled(IconButton)`
-  --button-border: none;
-  --button-textColor: var(--color-text-0);
-  --button-hover-textColor: var(--color-text-1);
-`;

src/components/Output.tsx

@@ -65,9 +65,6 @@ type ElementProps = {
     resolution?: number;
     stripRelativeWords?: boolean;
   };
-  timeOptions?: {
-    useUTC?: boolean;
-  };
   tag?: React.ReactNode;
   withParentheses?: boolean;
   locale?: string;
@@ -92,7 +89,6 @@ export const Output = ({
   relativeTimeFormatOptions = {
     format: 'singleCharacter',
   },
-  timeOptions,
   tag,
   withParentheses,
   locale = navigator.language || 'en-US',
@@ -120,7 +116,6 @@ export const Output = ({
           {value?.toString() ?? null}
 
           {tag && <Tag>{tag}</Tag>}
-          {slotRight}
         </Styled.Text>
       );
     }
@@ -170,21 +165,16 @@ export const Output = ({
       if ((typeof value !== 'string' && typeof value !== 'number') || !value) return null;
       const date = new Date(value);
       const dateString = {
-        [OutputType.Date]: date.toLocaleString(selectedLocale, {
+        [OutputType.Date]: date.toLocaleString(selectedLocale, { dateStyle: 'medium' }),
-          dateStyle: 'medium',
-          timeZone: timeOptions?.useUTC ? 'UTC' : undefined,
-        }),
         [OutputType.DateTime]: date.toLocaleString(selectedLocale, {
           dateStyle: 'short',
           timeStyle: 'short',
-          timeZone: timeOptions?.useUTC ? 'UTC' : undefined,
         }),
         [OutputType.Time]: date.toLocaleString(selectedLocale, {
           hour12: false,
           hour: '2-digit',
           minute: '2-digit',
           second: '2-digit',
-          timeZone: timeOptions?.useUTC ? 'UTC' : undefined,
         }),
       }[type];
 

src/components/Panel.stories.tsx

@@ -1,10 +1,10 @@
 import type { Story } from '@ladle/react';
 
-import { Panel, PanelProps } from '@/components/Panel';
+import { Panel } from '@/components/Panel';
 
 import { StoryWrapper } from '.ladle/components';
 
-export const PanelStory: Story<PanelProps> = (args) => {
+export const PanelStory: Story<{ slotHeader: React.ReactNode, children?: React.ReactNode }> = (args) => {
   return (
     <StoryWrapper>
       <Panel {...args} />
@@ -13,8 +13,6 @@ export const PanelStory: Story<PanelProps> = (args) => {
 };
 
 PanelStory.args = {
-  slotHeaderContent: 'Header',
+  slotHeader: 'Header',
   children: 'Content',
-  slotRight: '1️⃣',
-  hasSeparator: true,
 };

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 ElementProps = {
+type PanelProps = {
-  slotHeaderContent?: React.ReactNode;
+  slotHeaderContent?: string;
   slotHeader?: React.ReactNode;
   slotRight?: React.ReactNode;
   children?: React.ReactNode;
@@ -16,13 +15,11 @@ type ElementProps = {
   onClick?: () => void;
 };
 
-type StyleProps = {
+type PanelStyleProps = {
   className?: string;
   hasSeparator?: boolean;
 };
 
-export type PanelProps = ElementProps & StyleProps;
-
 export const Panel = ({
   slotHeaderContent,
   slotHeader,
@@ -33,7 +30,7 @@ export const Panel = ({
   onClick,
   hasSeparator,
   className,
-}: PanelProps) => (
+}: PanelProps & PanelStyleProps) => (
   <Styled.Panel onClick={onClick} className={className}>
     <Styled.Left>
       {href ? (
@@ -70,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/SearchInput.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useRef, useState } from 'react';
+import { useState } from 'react';
 import styled, { type AnyStyledComponent, css } from 'styled-components';
 
 import { layoutMixins } from '@/styles/layoutMixins';
@@ -22,11 +22,6 @@ export const SearchInput = ({
 }: SearchInputProps) => {
   const [isOpen, setIsOpen] = useState(false);
   const [value, setValue] = useState('');
-  const inputRef = useRef<HTMLInputElement | null>(null);
-
-  useEffect(() => {
-    if (isOpen) inputRef?.current?.focus();
-  }, [inputRef, isOpen]);
 
   return (
     <Styled.Search>
@@ -46,7 +41,6 @@ export const SearchInput = ({
       />
       <Styled.Input
         autoFocus
-        ref={inputRef}
         value={value}
         isOpen={isOpen}
         type={type}

src/components/SearchSelectMenu.tsx

@@ -12,8 +12,6 @@ import { WithDetailsReceipt } from '@/components/WithDetailsReceipt';
 import { WithLabel } from '@/components/WithLabel';
 
 import { layoutMixins } from '@/styles/layoutMixins';
-import { formMixins } from '@/styles/formMixins';
-import breakpoints from '@/styles/breakpoints';
 
 type ElementProps = {
   asChild?: boolean;
@@ -86,30 +84,27 @@ export const SearchSelectMenu = ({
 
 const Styled: Record<string, AnyStyledComponent> = {};
 
-Styled.SearchSelectMenu = styled.div`
-  ${layoutMixins.column}
-`;
-
 Styled.MenuTrigger = styled.div`
   height: var(--form-input-height);
 
   ${layoutMixins.spacedRow}
   align-items: center;
-  padding: var(--form-input-paddingY) var(--form-input-paddingX);
+  padding: 0 1rem;
-
-  @media ${breakpoints.tablet} {
-    height: var(--form-input-height-mobile);
-  }
 `;
 
 Styled.WithLabel = styled(WithLabel)`
-  ${formMixins.inputLabel}
+  --label-textColor: var(--color-text-0);
+  gap: 0.25rem;
 
   label {
     font: var(--font-mini-book);
   }
 `;
 
+Styled.SearchSelectMenu = styled.div`
+  ${layoutMixins.column}
+`;
+
 Styled.WithDetailsReceipt = styled(WithDetailsReceipt)`
   --withReceipt-backgroundColor: var(--color-layer-2);
 

src/components/SelectMenu.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import styled, { css, type AnyStyledComponent } from 'styled-components';
+import styled, { type AnyStyledComponent } from 'styled-components';
 
 import {
   Root,
@@ -13,13 +13,11 @@ import {
   Portal,
   Icon as SelectIcon,
 } from '@radix-ui/react-select';
-import { CheckIcon } from '@radix-ui/react-icons';
 
 import { popoverMixins } from '@/styles/popoverMixins';
 import { formMixins } from '@/styles/formMixins';
 
 import { WithLabel } from '@/components/WithLabel';
-import { Icon, IconName } from './Icon';
 
 export const SelectMenu = <T extends string>({
   children,
@@ -46,9 +44,7 @@ export const SelectMenu = <T extends string>({
         ) : (
           <Value />
         )}
-        {React.Children.toArray(children).length > 1 && (
+        {React.Children.toArray(children).length > 1 && <Styled.DropdownIcon />}
-          <Styled.TriggerIcon iconName={IconName.Triangle} />
-        )}
       </Styled.Trigger>
       <Portal>
         <Styled.Content className={className}>
@@ -72,9 +68,7 @@ export const SelectItem = <T extends string>({
 }) => (
   <Styled.Item className={className} value={value}>
     <ItemText>{label}</ItemText>
-    <Styled.ItemIndicator>
+    <Styled.ItemIndicator>✔{/* <CheckIcon /> */}</Styled.ItemIndicator>
-      <CheckIcon />
-    </Styled.ItemIndicator>
   </Styled.Item>
 );
 
@@ -94,6 +88,12 @@ Styled.Trigger = styled(Trigger)<{ $withBlur?: boolean }>`
   }
 `;
 
+Styled.DropdownIcon = styled(SelectIcon)`
+  font-size: 0.675em;
+  color: var(--color-text-1);
+  margin-left: auto;
+`;
+
 Styled.Content = styled(Content)`
   --select-menu-content-maxWidth: ;
   max-width: var(--select-menu-content-maxWidth);
@@ -116,9 +116,3 @@ Styled.WithLabel = styled(WithLabel)`
   ${formMixins.inputLabel}
   border-radius: 0;
 `;
-
-Styled.TriggerIcon = styled(Icon)`
-  width: 0.625rem;
-  height: 0.375rem;
-  color: var(--color-text-0);
-`;

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';
@@ -83,7 +79,7 @@ export 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,10 +91,6 @@ export type ElementProps<TableRowData extends object | CustomRowConfig, TableRow
   selectionBehavior?: 'replace' | 'toggle';
   onRowAction?: (key: TableRowKey, row: TableRowData) => void;
   slotEmpty?: React.ReactNode;
-  viewMoreConfig?: {
-    initialNumRowsToShow: number;
-    numRowsPerPage?: number;
-  };
   // collection: TableCollection<string>;
   // children: React.ReactNode;
 };
@@ -128,7 +120,6 @@ export const Table = <TableRowData extends object, TableRowKey extends Key>({
   selectionMode = 'single',
   selectionBehavior = 'toggle',
   slotEmpty,
-  viewMoreConfig,
   // shouldRowRender,
 
   // collection,
@@ -144,18 +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(viewMoreConfig?.initialNumRowsToShow);
-  const enableViewMore = viewMoreConfig !== undefined;
-
-  const onViewMoreClick = () => {
-    if (!viewMoreConfig) return;
-    const { numRowsPerPage } = viewMoreConfig;
-    if (numRowsPerPage) {
-      setNumRowsToShow((prev) => (prev ?? 0) + numRowsPerPage);
-    } else {
-      setNumRowsToShow(data.length);
-    }
-  };
 
   const currentBreakpoints = useBreakpoints();
   const shownColumns = columns.filter(
@@ -182,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)
     );
@@ -229,10 +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 ? onViewMoreClick : undefined
-          }
           // shouldRowRender={shouldRowRender}
           hideHeader={hideHeader}
           withGradientCardRows={withGradientCardRows}
@@ -257,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) => (
@@ -291,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;
@@ -302,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,
@@ -363,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) =>
@@ -409,9 +384,6 @@ const TableRoot = <TableRowData extends object | CustomRowConfig, TableRowKey ex
             </TableRow>
           )
         )}
-        {onViewMoreClick ? (
-          <ViewMoreRow colSpan={numColumns} onClick={onViewMoreClick} />
-        ) : undefined}
       </TableBodyRowGroup>
     </Styled.Table>
   );
@@ -445,7 +417,6 @@ const TableBodyRowGroup = ({
   children,
   withGradientCardRows,
   withInnerBorders,
-  withOuterBorder,
 }: { children: React.ReactNode } & StyleProps) => {
   const { rowGroupProps } = useTableRowGroup();
 
@@ -454,7 +425,6 @@ const TableBodyRowGroup = ({
       {...rowGroupProps}
       withGradientCardRows={withGradientCardRows}
       withInnerBorders={withInnerBorders}
-      withOuterBorder={withOuterBorder}
     >
       {children}
     </Styled.Tbody>
@@ -521,23 +491,6 @@ const TableColumnHeader = <TableRowData extends object>({
   );
 };
 
-export const ViewMoreRow = ({ colSpan, onClick }: { colSpan: number; onClick: () => void }) => {
-  const stringGetter = useStringGetter();
-  return (
-    <Styled.ViewMoreTr 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.ViewMoreTr>
-  );
-};
-
 export const TableRow = <TableRowData extends object>({
   item,
   children,
@@ -684,8 +637,6 @@ Styled.TableWrapper = styled.div<{
   --table-lastColumn-cell-align: end; // start | center | end | var(--table-cell-align)
   --tableCell-padding: 0 1rem;
 
-  --tableViewMore-borderColor: inherit;
-
   // Rules
 
   flex: 1;
@@ -711,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);
@@ -795,7 +746,7 @@ Styled.Tr = styled.tr<{
       &:focus-visible,
       &:focus-within {
         --tableRow-currentBackgroundColor: var(--tableRow-hover-backgroundColor);
-        filter: brightness(var(--hover-filter-base));
+        filter: brightness(1.1);
       }
     `};
 
@@ -880,7 +831,6 @@ Styled.SortArrow = styled.span<{ sortDirection: 'ascending' | 'descending' }>`
 Styled.Thead = styled.thead<StyleProps>`
   ${layoutMixins.stickyHeader}
   scroll-snap-align: none;
-  font: var(--font-mini-book);
 
   > * {
     height: var(--stickyArea-topHeight);
@@ -889,17 +839,18 @@ Styled.Thead = styled.thead<StyleProps>`
   color: var(--tableHeader-textColor);
   background-color: var(--tableHeader-backgroundColor);
 
+  @media ${breakpoints.notTablet} {
     ${({ withInnerBorders, withGradientCardRows }) =>
       withInnerBorders &&
       !withGradientCardRows &&
       css`
         ${layoutMixins.withInnerHorizontalBorders}
       `}
+  }
 `;
 
 Styled.Tbody = styled.tbody<StyleProps>`
   ${layoutMixins.stickyArea2}
-  font: var(--font-small-book);
 
   // If <table> height is fixed with not enough rows to overflow, vertically center the rows
   &:before,
@@ -918,22 +869,6 @@ Styled.Tbody = styled.tbody<StyleProps>`
       --stickyArea2-paddingBottom: var(--border-width);
       --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;
-      }
     `}
 
   ${({ withGradientCardRows }) =>
@@ -985,19 +920,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;
-  }
-`;
-
-Styled.ViewMoreTr = styled(Styled.Tr)`
-  --border-color: var(--tableViewMore-borderColor);
-`;

src/components/Tabs.tsx

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

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/Toast.tsx

@@ -1,19 +1,24 @@
-import { type MouseEvent, useEffect, useRef, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
-import styled, { keyframes } from 'styled-components';
+
-import { Root, Action, Close } from '@radix-ui/react-toast';
+import { Root, Title, Description, Action, Close } from '@radix-ui/react-toast';
 
 import { ButtonShape, ButtonSize } from '@/constants/buttons';
-import { popoverMixins } from '@/styles/popoverMixins';
-import { breakpoints } from '@/styles';
-
-import { Notification, type NotificationProps } from '@/components/Notification';
 
 import { IconButton } from './IconButton';
-import { IconName } from './Icon';
+import { CloseIcon } from '@/icons';
+
+import styled, { keyframes } from 'styled-components';
+import { popoverMixins } from '@/styles/popoverMixins';
+import { layoutMixins } from '@/styles/layoutMixins';
 
 type ElementProps = {
   isOpen?: boolean;
   setIsOpen?: (isOpen: boolean, isClosedFromTimeout?: boolean) => void;
+  slotIcon?: React.ReactNode;
+  slotTitle?: React.ReactNode;
+  slotDescription?: React.ReactNode;
+  slotCustomContent?: React.ReactNode;
+  slotAction?: React.ReactNode;
   actionDescription?: string;
   actionAltText?: string;
   sensitivity?: 'foreground' | 'background';
@@ -21,22 +26,13 @@ type ElementProps = {
   lastUpdated?: number;
 };
 
-type StyleProps = {
+type StyleProps = {};
-  className?: string;
-};
-
-type ToastProps = NotificationProps & ElementProps & StyleProps;
 
 export const Toast = ({
-  className,
   isOpen = true,
-  notification,
-  onClick,
   setIsOpen,
   slotIcon,
   slotTitle,
-  slotTitleLeft,
-  slotTitleRight,
   slotDescription,
   slotCustomContent,
   slotAction,
@@ -45,7 +41,7 @@ export const Toast = ({
   sensitivity = 'background',
   duration = Infinity,
   lastUpdated,
-}: ToastProps) => {
+}: ElementProps & StyleProps) => {
   // Timeout
   const timeout = useRef<number>();
   const [isPaused, setIsPaused] = useState(false);
@@ -62,45 +58,37 @@ export const Toast = ({
 
   return (
     <$Root
-      className={className}
       type={sensitivity}
       duration={Infinity}
       open={isOpen}
       onOpenChange={setIsOpen}
       onPause={() => setIsPaused(true)}
       onResume={() => setIsPaused(false)}
-      onClick={() => {
-        setIsOpen?.(false, false);
-        onClick?.();
-      }}
     >
+      <div>
+        <$Container>
+          <$Header>
+            {slotIcon && <$Icon>{slotIcon}</$Icon>}
+
             <Close asChild>
               <$CloseButton
-          iconName={IconName.Close}
+                iconComponent={CloseIcon}
-          shape={ButtonShape.Circle}
+                shape={ButtonShape.Square}
                 size={ButtonSize.XSmall}
-          onClick={(e: MouseEvent) => e.stopPropagation()}
               />
             </Close>
 
-      {slotCustomContent ?? (
+            <$Title>{slotTitle}</$Title>
-        <$Notification
+          </$Header>
-          isToast
+          {!slotCustomContent && <$Description>{slotDescription}</$Description>}
-          notification={notification}
+          {slotCustomContent}
-          slotIcon={slotIcon}
+          {actionDescription && (
-          slotTitle={slotTitle}
-          slotTitleLeft={slotTitleLeft}
-          slotTitleRight={slotTitleRight}
-          slotDescription={slotDescription}
-          slotAction={
-            actionDescription && (
             <$Action asChild altText={actionAltText}>
               {slotAction}
             </$Action>
-            )
-          }
-        />
           )}
+        </$Container>
+      </div>
     </$Root>
   );
 };
@@ -126,7 +114,7 @@ const $Root = styled(Root)`
   translate: var(--x) var(--y);
   will-change: translate, margin-top;
 
-  /* margin-bottom: var(--toasts-gap); */
+  margin-bottom: var(--toasts-gap);
 
   &[data-swipe-direction='right'] {
     &[data-state='open'] {
@@ -175,10 +163,6 @@ const $Root = styled(Root)`
     cursor: n-resize;
   }
 
-  &:focus:not([data-swipe='end']) & {
-    outline: var(--color-accent) 1px solid;
-  }
-
   &[data-swipe='move'] {
     transition-property: opacity;
     opacity: 0.98;
@@ -187,10 +171,6 @@ const $Root = styled(Root)`
     * {
       cursor: inherit;
     }
-
-    & > * {
-      opacity: 0.5;
-    }
   }
 
   &[data-state='closed'],
@@ -218,48 +198,69 @@ const $Root = styled(Root)`
   }
 `;
 
-const $Notification = styled(Notification)`
+const $Container = styled.div`
   // Params
   --toast-icon-size: 1.75em;
 
   // Rules
   ${popoverMixins.popover}
-  overflow: visible;
   padding: 1rem;
   box-shadow: 0 0 0 var(--border-width) var(--color-border),
     // border
     0 0 0.5rem 0.1rem var(--color-layer-2); // shadow
 
+  ${$Root}:focus:not([data-swipe='end']) & {
+    outline: var(--color-accent) 1px solid;
+  }
+
   > * {
     transition: opacity 0.2s;
   }
+  ${$Root}[data-swipe='move'] & > * {
+    opacity: 0.5;
+  }
+`;
+
+const $Header = styled.header`
+  display: block;
+`;
+
+const $Icon = styled.div`
+  ${layoutMixins.row}
+
+  float: left;
+
+  width: 1em;
+  height: 1em;
+
+  margin-right: 0.4em;
+
+  line-height: 1;
 `;
 
 const $CloseButton = styled(IconButton)`
   --button-textColor: var(--color-text-0);
   --button-border: none;
   --button-icon-size: 0.85em;
-  display: none;
 
-  /* float: right; */
+  float: right;
   margin: -0.42rem -0.42rem -0.42rem 0.42rem;
+`;
 
-  // Absolute
+const $Title = styled(Title)`
-  position: absolute;
+  flex: 1;
-  top: 0;
-  right: 0;
 
-  border: solid var(--border-width) var(--color-border);
+  font: var(--font-base-medium);
+  color: var(--color-text-2);
 
-  ${$Root}:hover & {
+  overflow: hidden;
-    display: block;
+  text-overflow: ellipsis;
-    z-index: 2;
+`;
-  }
 
-  @media ${breakpoints.mobile} {
+const $Description = styled(Description)`
-    display: block;
+  margin-top: 0.5rem;
-    z-index: 2;
+  color: var(--color-text-0);
-  }
+  font: var(--font-small-book);
 `;
 
 const $Action = styled(Action)`

src/components/ToastArea.tsx

@@ -1,7 +1,6 @@
-import styled from 'styled-components';
-
 import { Provider, Viewport } from '@radix-ui/react-toast';
 
+import styled from 'styled-components';
 import { layoutMixins } from '@/styles/layoutMixins';
 
 type ElementProps = {
@@ -13,9 +12,7 @@ type StyleProps = {
   className?: string;
 };
 
-type ToastAreaProps = ElementProps & StyleProps;
+export const ToastArea = ({ swipeDirection, children, className }: ElementProps & StyleProps) => (
-
-export const ToastArea = ({ swipeDirection, children, className }: ToastAreaProps) => (
   <$ToastArea className={className}>
     <Provider swipeDirection={swipeDirection}>
       {children}
@@ -29,6 +26,7 @@ const $ToastArea = styled.aside`
   --toasts-gap: 0.5rem;
 
   // Rules
+  ${layoutMixins.scrollArea}
   z-index: 1;
 
   pointer-events: none;
@@ -36,7 +34,6 @@ const $ToastArea = styled.aside`
   > * {
     display: contents;
     pointer-events: none;
-    position: relative;
 
     > ol {
       /* display: block; */
@@ -46,7 +43,6 @@ const $ToastArea = styled.aside`
       // Desired display order: latest to earliest (¯\_(ツ)_/¯)
       display: flex;
       flex-direction: column-reverse;
-      position: relative;
 
       pointer-events: none;
 

src/components/ToggleButton.tsx

@@ -52,19 +52,15 @@ const Styled: Record<string, AnyStyledComponent> = {};
 Styled.BaseButton = styled(BaseButton)`
   --button-toggle-off-backgroundColor: var(--color-layer-3);
   --button-toggle-off-textColor: var(--color-text-0);
-  --button-toggle-off-border: solid var(--border-width) var(--border-color);
   --button-toggle-on-backgroundColor: var(--color-layer-1);
   --button-toggle-on-textColor: var(--color-text-2);
-  --button-toggle-on-border: solid var(--border-width) var(--border-color);
 
   --button-backgroundColor: var(--button-toggle-off-backgroundColor);
   --button-textColor: var(--button-toggle-off-textColor);
-  --button-border: var(--button-toggle-off-border);
 
   &[data-state='on'],
   &[data-state='active'] {
     --button-backgroundColor: var(--button-toggle-on-backgroundColor);
     --button-textColor: var(--button-toggle-on-textColor);
-    --button-border: var(--button-toggle-on-border);
   }
 `;

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 '@/styles/colors';
-import { UsageColorFromRiskLevel } from '@/lib/styles';
 
+import { abacusHelper } from '@/lib/abacus';
 type ElementProps = {
   value: number;
 };

src/components/WithConfirmationPopover.tsx

@@ -117,7 +117,7 @@ Styled.ConfirmButton = styled(Styled.IconButton)`
   --button-backgroundColor: hsla(203, 25%, 19%, 1);
 
   svg {
-    color: var(--color-success);
+    color: var(--color-positive);
   }
 `;
 
@@ -125,7 +125,7 @@ Styled.CancelButton = styled(Styled.IconButton)`
   --button-backgroundColor: hsla(296, 16%, 18%, 1);
 
   svg {
-    color: var(--color-error);
+    color: var(--color-negative);
     width: 0.8em;
     height: 0.8em;
 

src/components/WithDetailsReceipt.tsx

@@ -40,5 +40,5 @@ Styled.Details = styled(Details)`
 
   padding: 0.375rem 0.75rem 0.25rem;
 
-  font-size: var(--details-item-fontSize, 0.8125em);
+  font-size: 0.8125em;
 `;

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,
+  onPointerMove, onPointerUp, onPointerPressedChange, ...props
-  onPointerUp,
-  onPointerPressedChange,
-  ...props
 }: {
-  onPointerMove?: (point: Point | EventHandlerParams<object>) => void;
+  onPointerMove?: (point: Point) => void;
-  onPointerUp?: (point: Point | EventHandlerParams<object>) => 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 =
+  const pointerChartPosition = xScale && yScale && pointerContainerPosition &&
-    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

@@ -119,20 +119,11 @@ export const InputSelectionOption = Abacus.exchange.dydx.abacus.output.input.Sel
 // ------ Wallet ------ //
 export type Wallet = Abacus.exchange.dydx.abacus.output.Wallet;
 export type AccountBalance = Abacus.exchange.dydx.abacus.output.AccountBalance;
-export type TradingRewards = Abacus.exchange.dydx.abacus.output.TradingRewards;
-export type HistoricalTradingReward = Abacus.exchange.dydx.abacus.output.HistoricalTradingReward;
-export const HistoricalTradingRewardsPeriod =
-  Abacus.exchange.dydx.abacus.state.manager.HistoricalTradingRewardsPeriod;
-const historicalTradingRewardsPeriod = [...HistoricalTradingRewardsPeriod.values()] as const;
-export type HistoricalTradingRewardsPeriods = (typeof historicalTradingRewardsPeriod)[number];
-
 export type Subaccount = Abacus.exchange.dydx.abacus.output.Subaccount;
 export type SubaccountPosition = Abacus.exchange.dydx.abacus.output.SubaccountPosition;
 export type SubaccountOrder = Abacus.exchange.dydx.abacus.output.SubaccountOrder;
 export type OrderStatus = Abacus.exchange.dydx.abacus.output.input.OrderStatus;
 export const AbacusOrderStatus = Abacus.exchange.dydx.abacus.output.input.OrderStatus;
-const abacusOrderStatuses = [...AbacusOrderStatus.values()] as const;
-export type AbacusOrderStatuses = (typeof abacusOrderStatuses)[number];
 export type SubaccountFills = Abacus.exchange.dydx.abacus.output.SubaccountFill[];
 export type SubaccountFill = Abacus.exchange.dydx.abacus.output.SubaccountFill;
 export type SubaccountFundingPayment = Abacus.exchange.dydx.abacus.output.SubaccountFundingPayment;
@@ -149,7 +140,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];
 
@@ -158,7 +149,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];
 
@@ -169,7 +160,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];
@@ -209,9 +200,6 @@ export const RestrictionType = Abacus.exchange.dydx.abacus.output.Restriction;
 const restrictionTypes = [...RestrictionType.values()] as const;
 export type RestrictionTypes = (typeof restrictionTypes)[number];
 
-// ------ Api data ------ //
-export const ApiData = Abacus.exchange.dydx.abacus.state.manager.ApiData;
-
 // ------ Enum Conversions ------ //
 type IfEquals<X, Y, A, B> = (<T>() => T extends X ? 1 : 2) extends <T>() => T extends Y ? 1 : 2
   ? A
@@ -221,13 +209,11 @@ type ReadonlyKeysOf<T> = {
   [K in keyof T]: IfEquals<{ [_ in K]: T[K] }, { readonly [_ in K]: T[K] }, K, never>;
 }[keyof T];
 
-export type KotlinIrEnumValues<T> = Exclude<ReadonlyKeysOf<T>, 'Companion' | '$serializer'>;
+type KotlinIrEnumValues<T> = Exclude<ReadonlyKeysOf<T>, 'Companion' | '$serializer'>;
 
 export const ORDER_SIDES: Record<KotlinIrEnumValues<typeof AbacusOrderSide>, OrderSide> = {
   [AbacusOrderSide.buy.name]: OrderSide.BUY,
   [AbacusOrderSide.sell.name]: OrderSide.SELL,
-  [AbacusOrderSide.buy.rawValue]: OrderSide.BUY,
-  [AbacusOrderSide.sell.rawValue]: OrderSide.SELL,
 };
 
 export const POSITION_SIDES: Record<KotlinIrEnumValues<typeof AbacusPositionSide>, PositionSide> = {
@@ -246,36 +232,14 @@ export const HISTORICAL_PNL_PERIODS: Record<
   [HistoricalPnlPeriod.Period90d.name]: HistoricalPnlPeriod.Period90d,
 };
 
-export const HISTORICAL_TRADING_REWARDS_PERIODS: Record<
-  KotlinIrEnumValues<typeof HistoricalTradingRewardsPeriod>,
-  HistoricalTradingRewardsPeriods
-> = {
-  [HistoricalTradingRewardsPeriod.MONTHLY.name]: HistoricalTradingRewardsPeriod.MONTHLY,
-  [HistoricalTradingRewardsPeriod.WEEKLY.name]: HistoricalTradingRewardsPeriod.WEEKLY,
-  [HistoricalTradingRewardsPeriod.DAILY.name]: HistoricalTradingRewardsPeriod.DAILY,
-};
-
 export const ORDER_STATUS_STRINGS: Record<KotlinIrEnumValues<typeof AbacusOrderStatus>, string> = {
   [AbacusOrderStatus.open.name]: STRING_KEYS.OPEN_STATUS,
-  [AbacusOrderStatus.open.rawValue]: STRING_KEYS.OPEN_STATUS,
-
   [AbacusOrderStatus.partiallyFilled.name]: STRING_KEYS.PARTIALLY_FILLED,
-  [AbacusOrderStatus.partiallyFilled.rawValue]: STRING_KEYS.PARTIALLY_FILLED,
-
   [AbacusOrderStatus.filled.name]: STRING_KEYS.ORDER_FILLED,
-  [AbacusOrderStatus.filled.rawValue]: STRING_KEYS.ORDER_FILLED,
-
   [AbacusOrderStatus.cancelled.name]: STRING_KEYS.CANCELED,
-  [AbacusOrderStatus.cancelled.rawValue]: STRING_KEYS.CANCELED,
-
   [AbacusOrderStatus.canceling.name]: STRING_KEYS.CANCELING,
-  [AbacusOrderStatus.canceling.rawValue]: STRING_KEYS.CANCELING,
-
   [AbacusOrderStatus.pending.name]: STRING_KEYS.PENDING,
-  [AbacusOrderStatus.pending.rawValue]: STRING_KEYS.PENDING,
-
   [AbacusOrderStatus.untriggered.name]: STRING_KEYS.UNTRIGGERED,
-  [AbacusOrderStatus.untriggered.rawValue]: STRING_KEYS.UNTRIGGERED,
 };
 
 export const TRADE_TYPES: Record<
@@ -283,40 +247,15 @@ export const TRADE_TYPES: Record<
   Nullable<TradeTypes>
 > = {
   [AbacusOrderType.limit.name]: TradeTypes.LIMIT,
-  [AbacusOrderType.limit.rawValue]: TradeTypes.LIMIT,
-
   [AbacusOrderType.market.name]: TradeTypes.MARKET,
-  [AbacusOrderType.market.rawValue]: TradeTypes.MARKET,
-
   [AbacusOrderType.stopLimit.name]: TradeTypes.STOP_LIMIT,
-  [AbacusOrderType.stopLimit.rawValue]: TradeTypes.STOP_LIMIT,
-
   [AbacusOrderType.stopMarket.name]: TradeTypes.STOP_MARKET,
-  [AbacusOrderType.stopMarket.rawValue]: TradeTypes.STOP_MARKET,
-
   [AbacusOrderType.takeProfitLimit.name]: TradeTypes.TAKE_PROFIT,
-  [AbacusOrderType.takeProfitLimit.rawValue]: TradeTypes.TAKE_PROFIT,
-
   [AbacusOrderType.takeProfitMarket.name]: TradeTypes.TAKE_PROFIT_MARKET,
-  [AbacusOrderType.takeProfitMarket.rawValue]: TradeTypes.TAKE_PROFIT_MARKET,
 
   [AbacusOrderType.liquidated.name]: null,
-  [AbacusOrderType.liquidated.rawValue]: 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
@@ -335,9 +274,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
@@ -173,5 +172,3 @@ export type AnalyticsEventData<T extends AnalyticsEvent> =
         validatorUrl: string;
       }
     : never;
-
-export const DEFAULT_TRANSACTION_MEMO = 'dYdX Frontend (web)';

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/dialogs.ts

@@ -2,9 +2,7 @@ export enum DialogTypes {
   ClosePosition = 'ClosePosition',
   Deposit = 'Deposit',
   DisconnectWallet = 'DisconnectWallet',
-  DisplaySettings = 'DisplaySettings',
   ExchangeOffline = 'ExchangeOffline',
-  ExternalLink = 'ExternalLink',
   FillDetails = 'FillDetails',
   Help = 'Help',
   ExternalNavKeplr = 'ExternalNavKeplr',
@@ -12,16 +10,13 @@ export enum DialogTypes {
   MobileSignIn = 'MobileSignIn',
   Onboarding = 'Onboarding',
   OrderDetails = 'OrderDetails',
-  Preferences = 'Preferences',
   RateLimit = 'RateLimit',
+  Receive = 'Receive',
   RestrictedGeo = 'RestrictedGeo',
   RestrictedWallet = 'RestrictedWallet',
   Trade = 'Trade',
   Transfer = 'Transfer',
   Withdraw = 'Withdraw',
-  ManageFunds = 'ManageFunds',
-  NewMarketMessageDetails = 'NewMarketMessageDetails',
-  NewMarketAgreement = 'NewMarketAgreement',
 }
 
 export enum TradeBoxDialogTypes {

src/constants/indexer.ts

@@ -1,23 +0,0 @@
-/**
- * Temporary Indexer types
- * remove when Indexer type lib is available through @dydxprotocol/v4-client-js
- */
-export type PerpetualMarketResponse = {
-  clobPairId: string;
-  ticker: string;
-  status: string;
-  oraclePrice: string;
-  priceChange24H: string;
-  volume24H: string;
-  trades24H: number;
-  nextFundingRate: string;
-  initialMarginFraction: string;
-  maintenanceMarginFraction: string;
-  openInterest: string;
-  atomicResolution: number;
-  quantumConversionExponent: number;
-  tickSize: string;
-  stepSize: string;
-  stepBaseQuantums: number;
-  subticksPerTick: number;
-};

src/constants/localStorage.ts

@@ -13,23 +13,17 @@ export enum LocalStorageKey {
   PushNotificationsEnabled = 'dydx.PushNotificationsEnabled',
   PushNotificationsLastUpdated = 'dydx.PushNotificationsLastUpdated',
   TransferNotifications = 'dydx.TransferNotifications',
-  NotificationPreferences = 'dydx.NotificationPreferences',
 
   // UI State
   LastViewedMarket = 'dydx.LastViewedMarket',
   SelectedLocale = 'dydx.SelectedLocale',
   SelectedNetwork = 'dydx.SelectedNetwork',
   SelectedTheme = 'dydx.SelectedTheme',
-  SelectedColorMode = 'dydx.SelectedColorMode',
   SelectedTradeLayout = 'dydx.SelectedTradeLayout',
   TradingViewChartConfig = 'dydx.TradingViewChartConfig',
-  HasSeenLaunchIncentives = 'dydx.HasSeenLaunchIncentives',
 }
 
 export const LOCAL_STORAGE_VERSIONS = {
   [LocalStorageKey.EvmDerivedAddresses]: 'v2',
-  [LocalStorageKey.NotificationPreferences]: 'v1',
-  [LocalStorageKey.TransferNotifications]: 'v1',
-  [LocalStorageKey.Notifications]: 'v1',
   // TODO: version all localStorage keys
 };

src/constants/localization.ts

@@ -6,8 +6,6 @@ import {
   LOCALE_DATA,
   TOOLTIPS,
   WARNINGS_STRING_KEYS,
-  NOTIFICATIONS_STRING_KEYS,
-  NOTIFICATIONS,
 } from '@dydxprotocol/v4-localization';
 
 import { type LinksConfigs } from '@/hooks/useURLConfigs';
@@ -29,7 +27,6 @@ export enum SupportedLocales {
 
 export const EN_LOCALE_DATA = {
   ...LOCALE_DATA[SupportedLocales.EN],
-  ...NOTIFICATIONS[SupportedLocales.EN],
   TOOLTIPS: TOOLTIPS[SupportedLocales.EN],
 };
 
@@ -37,13 +34,8 @@ export const STRING_KEYS = {
   ...APP_STRING_KEYS,
   ...ERRORS_STRING_KEYS,
   ...WARNINGS_STRING_KEYS,
-  ...NOTIFICATIONS_STRING_KEYS,
 };
 
-export const STRING_KEY_VALUES = Object.fromEntries(
-  Object.values(STRING_KEYS).map((key) => [key, key])
-);
-
 export type StringKey = keyof typeof STRING_KEYS;
 
 export type LocaleData = typeof EN_LOCALE_DATA;
@@ -95,7 +87,7 @@ export type TooltipStrings = {
     stringParams?: any;
     urlConfigs?: LinksConfigs;
   }) => {
-    title?: string;
+    title: string;
     body: string;
     learnMoreLink?: string;
   };

src/constants/markets.ts

@@ -25,5 +25,4 @@ export const DEFAULT_MARKETID = 'ETH-USD';
 export enum FundingDirection {
   ToShort = 'ToShort',
   ToLong = 'ToLong',
-  None = 'None',
 }

src/constants/menus.ts

@@ -26,7 +26,6 @@ export type MenuItem<MenuItemValue, MenuItemTypes = string> = {
   tag?: React.ReactNode;
   slotAfter?: React.ReactNode;
   description?: string;
-  slotCustomContent?: React.ReactNode;
 
   href?: string;
   onSelect?: (key: MenuItemValue) => void;

src/constants/networks.ts

@@ -1,18 +1,12 @@
 import environments from '../../public/configs/env.json';
 
-const CURRENT_MODE = ({
+// TODO: Update for Mainnet deployment
-  production: 'MAINNET',
+export const AVAILABLE_ENVIRONMENTS =
-  testnet: 'TESTNET',
+  import.meta.env.MODE === 'production'
-  staging: 'DEV',
+    ? environments.deployments.TESTNET
-  development: 'DEV',
+    : environments.deployments.DEV;
-}[import.meta.env.MODE] ?? 'MAINNET') as 'MAINNET' | 'TESTNET' | 'DEV';
 
-export const isMainnet = CURRENT_MODE === 'MAINNET';
+export const CURRENT_ABACUS_DEPLOYMENT = import.meta.env.MODE === 'production' ? 'TESTNET' : 'DEV';
-export const isTestnet = CURRENT_MODE === 'TESTNET';
-export const isDev = CURRENT_MODE === 'DEV';
-
-export const AVAILABLE_ENVIRONMENTS = environments.deployments[CURRENT_MODE];
-export const CURRENT_ABACUS_DEPLOYMENT = CURRENT_MODE;
 export const ENVIRONMENT_CONFIG_MAP = environments.environments;
 export type DydxNetwork = keyof typeof ENVIRONMENT_CONFIG_MAP;
 export const DEFAULT_APP_ENVIRONMENT = AVAILABLE_ENVIRONMENTS.default as DydxNetwork;

src/constants/notifications.ts

@@ -2,9 +2,8 @@ import { StatusResponse } from '@0xsquid/sdk';
 
 /** implemented in useNotificationTypes */
 export enum NotificationType {
-  AbacusGenerated = 'AbacusGenerated',
+  OrderStatusChanged = 'OrderStatusChanged',
   SquidTransfer = 'SquidTransfer',
-  ReleaseUpdates = 'ReleaseUpdates',
 }
 
 export enum NotificationComponentType {}
@@ -60,7 +59,7 @@ export enum NotificationStatus {
   /** Toast or NotificationsMenu item interacted with or dismissed. "Seen" in NotificationsMenu. */
   Seen,
 
-  /** Notification marked for deletion. Hidden in NotificationsMenu. */
+  /** Notification marked for deletion. "Archived" in NotificationsMenu. */
   Cleared,
 }
 
@@ -81,22 +80,14 @@ export type Notifications = Record<NotificationId, Notification<any>>;
 /** Notification display data derived from app state at runtime. */
 export type NotificationDisplayData = {
   icon?: React.ReactNode;
-  title: string; // Title for Toast, Notification, and Push Notification
-  body?: string; // Description body for Toast, Notification, and Push Notification
 
-  slotTitleLeft?: React.ReactNode;
+  title?: string;
-  slotTitleRight?: React.ReactNode;
 
-  groupKey: string; // Grouping key toast notification stacking
+  description?: React.ReactNode;
 
-  // Overrides title/body for Notification in NotificationMenu
+  customContent?: React.ReactNode;
-  renderCustomBody?: ({
+
-    isToast,
+  customMenuContent?: React.ReactNode;
-    notification,
-  }: {
-    isToast?: boolean;
-    notification: Notification;
-  }) => React.ReactNode; // Custom Notification
 
   actionDescription?: string;
 
@@ -124,29 +115,12 @@ export type NotificationDisplayData = {
   toastDuration?: number;
 };
 
-export enum TransferNotificationTypes {
-  Withdrawal = 'withdrawal',
-  Deposit = 'deposit',
-}
-
 // Notification types
 export type TransferNotifcation = {
   txHash: string;
-  type?: TransferNotificationTypes;
   toChainId?: string;
   fromChainId?: string;
   toAmount?: number;
   triggeredAt?: number;
-  isCctp?: boolean;
-  errorCount?: number;
   status?: StatusResponse;
 };
-
-/**
- * @description Struct to store whether a NotificationType should be triggered
- */
-export type NotificationPreferences = {
-  [key in NotificationType]: boolean;
-} & { version: string };
-
-export const DEFAULT_TOAST_AUTO_CLOSE_MS = 5000;

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/potentialMarkets.ts

@@ -1,85 +0,0 @@
-export type ExchangeConfigParsedCsv = Array<{
-  base_asset: string;
-  exchange: string;
-  pair: string;
-
-  adjust_by_market: string;
-  min_2_depth: string;
-  avg_30d_vol: string;
-  reference_price: string;
-  risk_assessment: string;
-  num_oracles: string;
-  liquidity_tier: string;
-  asset_name: string;
-}>;
-
-export type ExchangeConfigItem = {
-  exchangeName: string;
-  ticker: string;
-  adjustByMarket?: string;
-};
-
-export type PotentialMarketParsedCsv = Array<{
-  base_asset: string;
-  reference_price: string;
-  num_oracles: string;
-  liquidity_tier: string;
-  asset_name: string;
-  p: string;
-  atomic_resolution: string;
-  min_exchanges: string;
-  min_price_change_ppm: string;
-  price_exponent: string;
-  step_base_quantum: string;
-  ticksize_exponent: string;
-  subticks_per_tick: string;
-  min_order_size: string;
-  quantum_conversion_exponent: string;
-}>;
-
-export type PotentialMarketItem = {
-  baseAsset: string;
-  referencePrice: string;
-  numOracles: number;
-  liquidityTier: number;
-  assetName: string;
-  p: number;
-  atomicResolution: number;
-  minExchanges: number;
-  minPriceChangePpm: number;
-  priceExponent: number;
-  stepBaseQuantum: number;
-  ticksizeExponent: number;
-  subticksPerTick: number;
-  minOrderSize: number;
-  quantumConversionExponent: number;
-};
-
-export const NUM_ORACLES_TO_QUALIFY_AS_SAFE = 6;
-
-export const LIQUIDITY_TIERS = {
-  0: {
-    label: 'Large-cap',
-    initialMarginFraction: 0.05,
-    maintenanceMarginFraction: 0.03,
-    impactNotional: 10_000,
-  },
-  1: {
-    label: 'Mid-cap',
-    initialMarginFraction: 0.1,
-    maintenanceMarginFraction: 0.05,
-    impactNotional: 5_000,
-  },
-  2: {
-    label: 'Long-tail',
-    initialMarginFraction: 0.2,
-    maintenanceMarginFraction: 0.1,
-    impactNotional: 2_500,
-  },
-  3: {
-    label: 'Safety',
-    initialMarginFraction: 1,
-    maintenanceMarginFraction: 0.2,
-    impactNotional: 2_500,
-  },
-};

src/constants/routes.ts

@@ -11,10 +11,6 @@ export enum AppRoute {
   Privacy = '/privacy',
 }
 
-export enum MarketsRoute {
-  New = 'new',
-}
-
 export enum PortfolioRoute {
   Fees = 'fees',
   History = 'history',

src/constants/styles/base.ts

@@ -1,76 +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',
-}
-
-export enum BrightnessFilterToken {
-  Darken10 = '0.9',
-  Darken5 = '0.95',
-  Lighten10 = '1.1',
-}

src/constants/styles/colors.ts

@@ -1,98 +0,0 @@
-import { AppColorMode } from '@/state/configs';
-
-export type Theme = {
-  [AppColorMode.GreenUp]: ThemeColorBase;
-  [AppColorMode.RedUp]: ThemeColorBase;
-};
-
-export type ThemeColorBase = LayerColors &
-  BorderColors &
-  TextColors &
-  GradientColors &
-  AccentColors &
-  StatusColors &
-  DirectionalColors &
-  RiskColors &
-  IconColors &
-  ComponentColors &
-  Filters;
-
-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;
-
-  textButton: string;
-};
-
-type GradientColors = {
-  gradientBase0: string;
-  gradientBase1: string;
-};
-
-type AccentColors = {
-  accent: string;
-  accentFaded: string;
-  favorite: string;
-};
-
-type StatusColors = {
-  success: string;
-  warning: string;
-  error: string;
-  successFaded: string;
-  warningFaded: string;
-  errorFaded: string;
-};
-
-/** ##InvertDirectionalColors
- * When adding colors here, make sure to update linked function to invert colors for AppColorMode. */
-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;
-};
-
-type Filters = {
-  hoverFilterBase: string;
-  hoverFilterVariant: string;
-  activeFilter: 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 }),