update sha

* MOB-231 Refactor env.json to env2.json

* Move to v1/env.json

* dydx-testnet-4

.env.example

@@ -8,7 +8,14 @@ VITE_V3_TOKEN_ADDRESS=
 VITE_TOKEN_MIGRATION_URI=
 
 AMPLITUDE_API_KEY=
+AMPLITUDE_SERVER_URL=
 BUGSNAG_API_KEY=
 IOS_APP_ID=
 INTERCOM_APP_ID=
 STATUS_PAGE_SCRIPT_URI=
+
+SMARTBANNER_APP_NAME=
+SMARTBANNER_ORG_NAME=
+SMARTBANNER_ICON_URL=
+SMARTBANNER_APPSTORE_URL=
+SMARTBANNER_GOOGLEPLAY_URL=

.github/workflows/deploy-testnet.yml

@@ -39,6 +39,7 @@ jobs:
           pnpm run build:inject-amplitude
           pnpm run build:inject-bugsnag
           pnpm run build:inject-statuspage
+          pnpm run build:inject-smartbanner
           sh scripts/inject-app-deeplinks.sh
 
       - name: Upload to IPFS via web3.storage

.ladle/components.tsx

@@ -2,15 +2,25 @@ import '@/polyfills';
 import { useEffect, useState } from 'react';
 import { Provider } from 'react-redux';
 import styled from 'styled-components';
+import { WagmiConfig } from 'wagmi';
+import { GrazProvider } from 'graz';
+import { QueryClient, QueryClientProvider } from 'react-query';
 
-import { store } from '@/state/_store';
+import { SupportedLocales } from '@/constants/localization';
+
+import { AccountsProvider } from '@/hooks/useAccounts';
+import { AppThemeAndColorModeProvider } from '@/hooks/useAppThemeAndColorMode';
+import { DydxProvider } from '@/hooks/useDydxClient';
+import { DialogAreaProvider } from '@/hooks/useDialogArea';
+import { LocaleProvider } from '@/hooks/useLocaleSeparators';
+import { PotentialMarketsProvider } from '@/hooks/usePotentialMarkets';
+import { RestrictionProvider } from '@/hooks/useRestrictions';
+import { SubaccountProvider } from '@/hooks/useSubaccount';
 
 import { GlobalStyle } from '@/styles/globalStyle';
 
 import { SelectMenu, SelectItem } from '@/components/SelectMenu';
 
-import { AppThemeAndColorModeProvider } from '@/hooks/useAppThemeAndColorMode';
-
 import {
   AppTheme,
   AppThemeSystemSetting,
@@ -18,11 +28,38 @@ import {
   setAppThemeSetting,
   setAppColorMode,
 } from '@/state/configs';
-import { setLocaleLoaded } from '@/state/localization';
+
+import { setLocaleLoaded, setSelectedLocale } from '@/state/localization';
+import { store } from '@/state/_store';
+
+import { config } from '@/lib/wagmi';
 
 import '@/index.css';
 import './ladle.css';
 
+const queryClient = new QueryClient();
+
+const wrapProvider = (Component: React.ComponentType<any>, props?: any) => {
+  // eslint-disable-next-line react/display-name
+  return ({ children }: { children: React.ReactNode }) => (
+    <Component {...props}>{children}</Component>
+  );
+};
+
+const providers = [
+  wrapProvider(QueryClientProvider, { client: queryClient }),
+  wrapProvider(GrazProvider),
+  wrapProvider(WagmiConfig, { config }),
+  wrapProvider(LocaleProvider),
+  wrapProvider(RestrictionProvider),
+  wrapProvider(DydxProvider),
+  wrapProvider(AccountsProvider),
+  wrapProvider(SubaccountProvider),
+  wrapProvider(DialogAreaProvider),
+  wrapProvider(PotentialMarketsProvider),
+  wrapProvider(AppThemeAndColorModeProvider),
+];
+
 export const StoryWrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => {
   const [theme, setTheme] = useState(AppTheme.Classic);
   const [colorMode, setColorMode] = useState(AppColorMode.GreenUp);
@@ -33,9 +70,20 @@ export const StoryWrapper: React.FC<{ children: React.ReactNode }> = ({ children
   }, [theme, colorMode]);
 
   useEffect(() => {
+    store.dispatch(setSelectedLocale({ locale: SupportedLocales.EN }));
     store.dispatch(setLocaleLoaded(true));
   }, []);
 
+  const content = [...providers].reverse().reduce(
+    (children, Provider) => {
+      return <Provider>{children}</Provider>;
+    },
+    <StoryContent>
+      <GlobalStyle />
+      {children}
+    </StoryContent>
+  );
+
   return (
     <Provider store={store}>
       <StoryHeader>
@@ -79,10 +127,7 @@ export const StoryWrapper: React.FC<{ children: React.ReactNode }> = ({ children
         </SelectMenu>
       </StoryHeader>
       <hr />
-      <AppThemeAndColorModeProvider>
+      {content}
-        <GlobalStyle />
-        <StoryContent>{children}</StoryContent>
-      </AppThemeAndColorModeProvider>
     </Provider>
   );
 };

.prettierignore

@@ -1 +1,2 @@
 node_modules/
+public/

README.md

@@ -78,11 +78,12 @@ 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`.
 - `STATUS_PAGE_SCRIPT_URI` (optional): Used for enabling the status page; used with `pnpm run build:inject-statuspage`.
-
+- `SMARTBANNER_APP_NAME`, `SMARTBANNER_ORG_NAME`, `SMARTBANNER_ICON_URL`, `SMARTBANNER_APPSTORE_URL` (optional): Used for enabling the smart app banner; used with `pnpm run build:inject-smartbanner`.
 
 # Deployments
 
@@ -106,6 +107,9 @@ 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.
 
+If you wish to incorporate smart banner for iOS and/or Android apps, you can use our scripts:
+`pnpm run build:inject-smartbanner`. You will need to provide your own app configurations for these services. In the Environment Variables section, name the variables as `SMARTBANNER_APP_NAME`, `SMARTBANNER_ORG_NAME`, `SMARTBANNER_ICON_URL` and `SMARTBANNER_APPSTORE_URL` or `SMARTBANNER_GOOGLEPLAY_URL` and provide the respective values.
+
 For more details, check out Vercel's [official documentation](https://vercel.com/docs).
 
 ## Deploying to IPFS

package.json

@@ -15,6 +15,7 @@
     "build:inject-bugsnag": "node scripts/inject-bugsnag.js",
     "build:inject-intercom": "node scripts/inject-intercom.js",
     "build:inject-statuspage": "node scripts/inject-statuspage.js",
+    "build:inject-smartbanner": "node scripts/inject-smartbanner.js",
     "deploy:ipfs": "node scripts/upload-ipfs.js --verbose",
     "deploy:update-ipns": "node scripts/update-ipns.js",
     "deploy:update-dnslink": "node scripts/update-dnslink.js",
@@ -41,7 +42,7 @@
     "@cosmjs/tendermint-rpc": "^0.32.1",
     "@dydxprotocol/v4-abacus": "^1.4.2",
     "@dydxprotocol/v4-client-js": "^1.0.20",
-    "@dydxprotocol/v4-localization": "^1.1.22",
+    "@dydxprotocol/v4-localization": "^1.1.30",
     "@ethersproject/providers": "^5.7.2",
     "@js-joda/core": "^5.5.3",
     "@radix-ui/react-accordion": "^1.1.2",
@@ -117,7 +118,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.22.5",
-    "@ladle/react": "^2.15.0",
+    "@ladle/react": "^4.0.2",
     "@types/color": "^3.0.3",
     "@types/crypto-js": "^4.1.1",
     "@types/luxon": "^3.3.0",

public/configs/env.json

@@ -93,8 +93,10 @@
             "documentation": "https://docs.dydx.exchange/",
             "community": "https://discord.com/invite/dydx",
             "governanceLearnMore": "https://help.dydx.exchange",
+            "newMarketProposalLearnMore": "https://dydx.exchange/blog/new-market-proposals",
             "stakingLearnMore": "https://help.dydx.exchange",
             "keplrDashboard": "https://testnet.keplr.app/",
+            "strideZoneApp": "https://testnet.stride.zone",
             "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
             "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
          },
@@ -175,8 +177,10 @@
             "documentation": "https://docs.dydx.exchange/",
             "community": "https://discord.com/invite/dydx",
             "governanceLearnMore": "https://help.dydx.exchange",
+            "newMarketProposalLearnMore": "https://dydx.exchange/blog/new-market-proposals",
             "stakingLearnMore": "https://help.dydx.exchange",
             "keplrDashboard": "https://testnet.keplr.app/",
+            "strideZoneApp": "https://testnet.stride.zone",
             "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
             "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
          },
@@ -258,8 +262,10 @@
             "documentation": "https://docs.dydx.exchange/",
             "community": "https://discord.com/invite/dydx",
             "governanceLearnMore": "https://help.dydx.exchange",
+            "newMarketProposalLearnMore": "https://dydx.exchange/blog/new-market-proposals",
             "stakingLearnMore": "https://help.dydx.exchange",
             "keplrDashboard": "https://testnet.keplr.app/",
+            "strideZoneApp": "https://testnet.stride.zone",
             "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
             "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
          },
@@ -340,8 +346,10 @@
             "documentation": "https://docs.dydx.exchange/",
             "community": "https://discord.com/invite/dydx",
             "governanceLearnMore": "https://help.dydx.exchange",
+            "newMarketProposalLearnMore": "https://dydx.exchange/blog/new-market-proposals",
             "stakingLearnMore": "https://help.dydx.exchange",
             "keplrDashboard": "https://testnet.keplr.app/",
+            "strideZoneApp": "https://testnet.stride.zone",
             "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
             "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
          },
@@ -424,8 +432,10 @@
             "reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
             "mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
             "governanceLearnMore": "https://help.dydx.exchange",
+            "newMarketProposalLearnMore": "https://dydx.exchange/blog/new-market-proposals",
             "stakingLearnMore": "https://help.dydx.exchange",
             "keplrDashboard": "https://testnet.keplr.app/",
+            "strideZoneApp": "https://testnet.stride.zone",
             "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
             "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
          },
@@ -503,7 +513,8 @@
             "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"
+            "blogs": "https://www.dydx.foundation/blog",
+            "newMarketProposalLearnMore": "https://dydx.exchange/blog/new-market-proposals"
          },
          "wallets": {
             "walletconnect": {
@@ -591,8 +602,10 @@
             "reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
             "mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
             "governanceLearnMore": "https://help.dydx.exchange",
+            "newMarketProposalLearnMore": "https://dydx.exchange/blog/new-market-proposals",
             "stakingLearnMore": "https://help.dydx.exchange",
             "keplrDashboard": "https://testnet.keplr.app/",
+            "strideZoneApp": "https://testnet.stride.zone",
             "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
             "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
          },
@@ -679,8 +692,10 @@
             "reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
             "mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
             "governanceLearnMore": "https://help.dydx.exchange",
+            "newMarketProposalLearnMore": "https://dydx.exchange/blog/new-market-proposals",
             "stakingLearnMore": "https://help.dydx.exchange",
             "keplrDashboard": "https://testnet.keplr.app/",
+            "strideZoneApp": "https://testnet.stride.zone",
             "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
             "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
          },
@@ -764,8 +779,10 @@
             "reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
             "mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
             "governanceLearnMore": "https://help.dydx.exchange",
+            "newMarketProposalLearnMore": "https://dydx.exchange/blog/new-market-proposals",
             "stakingLearnMore": "https://help.dydx.exchange",
             "keplrDashboard": "https://testnet.keplr.app/",
+            "strideZoneApp": "https://testnet.stride.zone",
             "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
             "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
          },
@@ -849,8 +866,10 @@
             "reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
             "mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
             "governanceLearnMore": "https://help.dydx.exchange",
+            "newMarketProposalLearnMore": "https://dydx.exchange/blog/new-market-proposals",
             "stakingLearnMore": "https://help.dydx.exchange",
             "keplrDashboard": "https://testnet.keplr.app/",
+            "strideZoneApp": "https://testnet.stride.zone",
             "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
             "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
          },
@@ -934,8 +953,10 @@
             "reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
             "mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
             "governanceLearnMore": "https://help.dydx.exchange",
+            "newMarketProposalLearnMore": "https://dydx.exchange/blog/new-market-proposals",
             "stakingLearnMore": "https://help.dydx.exchange",
             "keplrDashboard": "https://testnet.keplr.app/",
+            "strideZoneApp": "https://testnet.stride.zone",
             "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
             "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
          },
@@ -1019,8 +1040,10 @@
             "reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
             "mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
             "governanceLearnMore": "https://help.dydx.exchange",
+            "newMarketProposalLearnMore": "https://dydx.exchange/blog/new-market-proposals",
             "stakingLearnMore": "https://help.dydx.exchange",
             "keplrDashboard": "https://testnet.keplr.app/",
+            "strideZoneApp": "https://testnet.stride.zone",
             "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
             "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
          },
@@ -1099,7 +1122,8 @@
             "documentation": "https://docs.dydx.exchange/",
             "community": "https://discord.com/invite/dydx",
             "feedback": "https://docs.google.com/forms/d/e/1FAIpQLSezLsWCKvAYDEb7L-2O4wOON1T56xxro9A2Azvl6IxXHP_15Q/viewform",
-            "blogs": "https://www.dydx.foundation/blog"
+            "blogs": "https://www.dydx.foundation/blog",
+            "newMarketProposalLearnMore": "https://dydx.exchange/blog/new-market-proposals"
          },
          "wallets": {
             "walletconnect": {
@@ -1181,8 +1205,10 @@
             "reduceOnlyLearnmore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
             "mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
             "governanceLearnmore": "https://help.dydx.exchange",
+            "newMarketProposalLearnMore": "https://dydx.exchange/blog/new-market-proposals",
             "stakingLearnmore": "https://help.dydx.exchange",
             "keplrDashboard": "https://testnet.keplr.app/",
+            "strideZoneApp": "https://testnet.stride.zone",
             "accountExportLearnmore": "https://help.dydx.exchange",
             "walletLearnmore": "https://www.dydx.academy/video/defi-wallet"
          },
@@ -1266,8 +1292,10 @@
             "community": "[HTTP link to community, can be null]",
             "help": "[HTTP link to help page, can be null]",
             "governanceLearnMore": "[HTTP link to governance learn more, can be null]",
+            "newMarketProposalLearnMore": "[HTTP link to new market proposal learn more, can be null]",
             "stakingLearnMore": "[HTTP link to staking learn more, can be null]",
             "keplrDashboard": "[HTTP link to keplr dashboard, can be null]",
+            "strideZoneApp": "[HTTP link to stride zone app, can be null]",
             "accountExportLearnMore": "[HTTP link to account export learn more, can be null]",
             "walletLearnMore": "[HTTP link to wallet learn more, can be null]"
          },

public/configs/markets.json

@@ -83,6 +83,14 @@
     "whitepaperLink": "https://docs.blur.foundation/",
     "coinMarketCapsLink": "https://coinmarketcap.com/currencies/blur-token/"
   },
+  "BNB-USD":{
+    "name": "BNB",
+    "tags": ["Layer 1"],
+    "websiteLink": "https://www.bnbchain.org/en",
+    "whitepaperLink": "https://www.exodus.com/assets/docs/binance-coin-whitepaper.pdf",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/bnb/"
+
+  },
   "CELO-USD": {
     "name": "Celo",
     "tags": [],
@@ -125,6 +133,13 @@
     "whitepaperLink": "https://polkadot.network/PolkaDotPaper.pdf",
     "coinMarketCapsLink": "https://coinmarketcap.com/currencies/polkadot-new/"
   },
+  "DYM-USD": {
+    "name": "Dymension",
+    "tags": [],
+    "websiteLink": "https://dymension.xyz/",
+    "whitepaperLink": "https://docs.dymension.xyz/dymension-litepaper/dymension-litepaper-index",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/dymension/"
+  },
   "ENJ-USD": {
     "name": "Enjin",
     "tags": [],
@@ -176,6 +191,13 @@
     "whitepaperLink": "https://dfinity.org/whitepaper.pdf",
     "coinMarketCapsLink": "https://coinmarketcap.com/currencies/internet-computer/"
   },
+  "JUP-USD": {
+    "name": "Jupiter",
+    "tags": ["Defi"],
+    "websiteLink": "https://station.jup.ag/",
+    "whitepaperLink": "https://station.jup.ag/blog/green-paper",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/jupiter-ag/"
+  },
   "LDO-USD": {
     "name": "Lido DAO",
     "tags": ["Defi"],
@@ -357,6 +379,13 @@
     "whitepaperLink": "https://z.cash/technology/",
     "coinMarketCapsLink": "https://coinmarketcap.com/currencies/zcash/"
   },
+  "ZETA-USD": {
+    "name": "ZetaChain",
+    "tags": ["Layer 1"],
+    "websiteLink": "https://www.zetachain.com/",
+    "whitepaperLink": "https://www.zetachain.com/whitepaper.pdf",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/zetachain/"
+  },
   "ZRX-USD": {
     "name": "0x",
     "tags": ["Defi"],

public/configs/otherMarketDisclaimer.md

@@ -0,0 +1 @@
+This file identifies parameters for the optimal performance of various assets with the dYdX v4 open source software ("dYdX Chain").  For information on which assets are likely to be best compatible with dYdX Chain and how likely software compatibility and optimal parameters are assessed, please review the documentation [here](https://docs.dydx.trade/governance/proposing_a_new_market#example-proposal-json). Users considering using the permissionless markets function of the dYdX Chain are encouraged to consult qualified legal counsel to ensure compliance with the laws of their jurisdiction. The information herein does not constitute and should not be relied on as an endorsement or recommendation for any specific market, or investment, legal, or any other form of professional advice.  Use of the v4 software is prohibited in the United States, Canada, and sanctioned jurisdictions as described in the [v4 Terms of Use](https://dydx.exchange/v4-terms).

public/configs/otherMarketExchangeConfig.json

@@ -0,0 +1,608 @@
+{
+  "1INCH": [
+    { "exchangeName": "Binance", "ticker": "1INCHUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "CoinbasePro", "ticker": "1INCH-USD" },
+    { "exchangeName": "Gate", "ticker": "1INCH_USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Kucoin", "ticker": "1INCH-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "1INCH-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "1INCH_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "AAVE": [
+    { "exchangeName": "Binance", "ticker": "AAVEUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "CoinbasePro", "ticker": "AAVE-USD" },
+    { "exchangeName": "Huobi", "ticker": "aaveusdt", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Kraken", "ticker": "AAVEUSD" },
+    { "exchangeName": "Kucoin", "ticker": "AAVE-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "AAVE-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "AAVE_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "ADA": [
+    { "exchangeName": "Binance", "ticker": "ADAUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Bitstamp", "ticker": "ADA/USD" },
+    { "exchangeName": "Bybit", "ticker": "ADAUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "CoinbasePro", "ticker": "ADA-USD" },
+    { "exchangeName": "Huobi", "ticker": "adausdt", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Kraken", "ticker": "ADAUSD" },
+    { "exchangeName": "Kucoin", "ticker": "ADA-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "ADA-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "ADA_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "AGIX": [
+    { "exchangeName": "Binance", "ticker": "AGIXUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Bybit", "ticker": "AGIXUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Gate", "ticker": "AGIX_USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Kucoin", "ticker": "AGIX-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "AGIX-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "AGIX_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "ALGO": [
+    { "exchangeName": "Binance", "ticker": "ALGOUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "CoinbasePro", "ticker": "ALGO-USD" },
+    { "exchangeName": "Kraken", "ticker": "ALGOUSD" },
+    { "exchangeName": "Kucoin", "ticker": "ALGO-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "ALGO-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "ALGO_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "APE": [
+    { "exchangeName": "Binance", "ticker": "APEUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "CoinbasePro", "ticker": "APE-USD" },
+    { "exchangeName": "Gate", "ticker": "APE_USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Kraken", "ticker": "APEUSD" },
+    { "exchangeName": "Kucoin", "ticker": "APE-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "APE-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "APE_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "APT": [
+    { "exchangeName": "Binance", "ticker": "APTUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Bybit", "ticker": "APTUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "CoinbasePro", "ticker": "APT-USD" },
+    { "exchangeName": "Gate", "ticker": "APT_USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Huobi", "ticker": "aptusdt", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Kraken", "ticker": "APTUSD" },
+    { "exchangeName": "Kucoin", "ticker": "APT-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "APT-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "APT_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "ARB": [
+    { "exchangeName": "Binance", "ticker": "ARBUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Bybit", "ticker": "ARBUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "CoinbasePro", "ticker": "ARB-USD" },
+    { "exchangeName": "Huobi", "ticker": "arbusdt", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Kraken", "ticker": "ARBUSD" },
+    { "exchangeName": "Kucoin", "ticker": "ARB-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "ARB-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "ARB_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "ATOM": [
+    { "exchangeName": "Binance", "ticker": "ATOMUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Bybit", "ticker": "ATOMUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "CoinbasePro", "ticker": "ATOM-USD" },
+    { "exchangeName": "Gate", "ticker": "ATOM_USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Kraken", "ticker": "ATOMUSD" },
+    { "exchangeName": "Kucoin", "ticker": "ATOM-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "ATOM-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "ATOM_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "AVAX": [
+    { "exchangeName": "Binance", "ticker": "AVAXUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Bitstamp", "ticker": "AVAX/USD" },
+    { "exchangeName": "Bybit", "ticker": "AVAXUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "CoinbasePro", "ticker": "AVAX-USD" },
+    { "exchangeName": "Huobi", "ticker": "avaxusdt", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Kraken", "ticker": "AVAXUSD" },
+    { "exchangeName": "Kucoin", "ticker": "AVAX-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "AVAX-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "AVAX_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "BCH": [
+    { "exchangeName": "Binance", "ticker": "BCHUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Bitstamp", "ticker": "BCH/USD" },
+    { "exchangeName": "Bybit", "ticker": "BCHUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "CoinbasePro", "ticker": "BCH-USD" },
+    { "exchangeName": "Huobi", "ticker": "bchusdt", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Kraken", "ticker": "BCHUSD" },
+    { "exchangeName": "Kucoin", "ticker": "BCH-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "BCH-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "BCH_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "BLUR": [
+    { "exchangeName": "Binance", "ticker": "BLURUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Bybit", "ticker": "BLURUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "CoinbasePro", "ticker": "BLUR-USD" },
+    { "exchangeName": "Kraken", "ticker": "BLURUSD" },
+    { "exchangeName": "Kucoin", "ticker": "BLUR-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "BLUR-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "BLUR_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "BNB": [
+    { "exchangeName": "Binance", "ticker": "BNBUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Bybit", "ticker": "BNBUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Gate", "ticker": "BNB_USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Kucoin", "ticker": "BNB-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "BNB-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "BNB_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "BONK": [
+    { "exchangeName": "Binance", "ticker": "BONKUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Bybit", "ticker": "BONKUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "CoinbasePro", "ticker": "BONK-USD" },
+    { "exchangeName": "Kucoin", "ticker": "BONK-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "BONK-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "BONK_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "BTC": [
+    { "exchangeName": "Binance", "ticker": "BTCUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Bitstamp", "ticker": "BTC/USD" },
+    { "exchangeName": "Bybit", "ticker": "BTCUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "CoinbasePro", "ticker": "BTC-USD" },
+    { "exchangeName": "Huobi", "ticker": "btcusdt", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Kraken", "ticker": "BTCUSD" },
+    { "exchangeName": "Kucoin", "ticker": "BTC-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "BTC-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "BTC_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "CHZ": [
+    { "exchangeName": "Binance", "ticker": "CHZUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "CoinbasePro", "ticker": "CHZ-USD" },
+    { "exchangeName": "Kraken", "ticker": "CHZUSD" },
+    { "exchangeName": "Kucoin", "ticker": "CHZ-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "CHZ-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "CHZ_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "CRV": [
+    { "exchangeName": "Binance", "ticker": "CRVUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "CoinbasePro", "ticker": "CRV-USD" },
+    { "exchangeName": "Kraken", "ticker": "CRVUSD" },
+    { "exchangeName": "Kucoin", "ticker": "CRV-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "CRV-USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "DOGE": [
+    { "exchangeName": "Binance", "ticker": "DOGEUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Bybit", "ticker": "DOGEUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "CoinbasePro", "ticker": "DOGE-USD" },
+    { "exchangeName": "Huobi", "ticker": "dogeusdt", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Kraken", "ticker": "DOGEUSD" },
+    { "exchangeName": "Kucoin", "ticker": "DOGE-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "DOGE-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "DOGE_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "DOT": [
+    { "exchangeName": "Binance", "ticker": "DOTUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Bybit", "ticker": "DOTUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "CoinbasePro", "ticker": "DOT-USD" },
+    { "exchangeName": "Huobi", "ticker": "dotusdt", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Kraken", "ticker": "DOTUSD" },
+    { "exchangeName": "Kucoin", "ticker": "DOT-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "DOT-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "DOT_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "DYM": [
+    { "exchangeName": "Binance", "ticker": "DYMUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Bybit", "ticker": "DYMUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Gate", "ticker": "DYM_USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Kucoin", "ticker": "DYM-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "DYM_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "ENS": [
+    { "exchangeName": "Binance", "ticker": "ENSUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "CoinbasePro", "ticker": "ENS-USD" },
+    { "exchangeName": "Gate", "ticker": "ENS_USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Kucoin", "ticker": "ENS-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "ENS-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "ENS_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "EOS": [
+    { "exchangeName": "Binance", "ticker": "EOSUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Bybit", "ticker": "EOSUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "CoinbasePro", "ticker": "EOS-USD" },
+    { "exchangeName": "Gate", "ticker": "EOS_USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Kraken", "ticker": "EOSUSD" },
+    { "exchangeName": "Kucoin", "ticker": "EOS-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "EOS-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "EOS_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "ETC": [
+    { "exchangeName": "Binance", "ticker": "ETCUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Bybit", "ticker": "ETCUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "CoinbasePro", "ticker": "ETC-USD" },
+    { "exchangeName": "Huobi", "ticker": "etcusdt", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Kraken", "ticker": "ETCUSD" },
+    { "exchangeName": "Kucoin", "ticker": "ETC-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "ETC-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "ETC_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "ETH": [
+    { "exchangeName": "Binance", "ticker": "ETHUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Bitstamp", "ticker": "ETH/USD" },
+    { "exchangeName": "Bybit", "ticker": "ETHUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "CoinbasePro", "ticker": "ETH-USD" },
+    { "exchangeName": "Huobi", "ticker": "ethusdt", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Kraken", "ticker": "ETHUSD" },
+    { "exchangeName": "Kucoin", "ticker": "ETH-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "ETH-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "ETH_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "FET": [
+    { "exchangeName": "Binance", "ticker": "FETUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "CoinbasePro", "ticker": "FET-USD" },
+    { "exchangeName": "Kraken", "ticker": "FETUSD" },
+    { "exchangeName": "Kucoin", "ticker": "FET-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "FET-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "FET_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "FIL": [
+    { "exchangeName": "Binance", "ticker": "FILUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Bybit", "ticker": "FILUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "CoinbasePro", "ticker": "FIL-USD" },
+    { "exchangeName": "Huobi", "ticker": "filusdt", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Kraken", "ticker": "FILUSD" },
+    { "exchangeName": "Kucoin", "ticker": "FIL-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "FIL-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "FIL_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "FTM": [
+    { "exchangeName": "Binance", "ticker": "FTMUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Bybit", "ticker": "FTMUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Kraken", "ticker": "FTMUSD" },
+    { "exchangeName": "Kucoin", "ticker": "FTM-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "FTM-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "FTM_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "GALA": [
+    { "exchangeName": "Binance", "ticker": "GALAUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Bybit", "ticker": "GALAUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Gate", "ticker": "GALA_USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Kraken", "ticker": "GALAUSD" },
+    { "exchangeName": "Okx", "ticker": "GALA-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "GALA_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "GMT": [
+    { "exchangeName": "Binance", "ticker": "GMTUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Bybit", "ticker": "GMTUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "CoinbasePro", "ticker": "GMT-USD" },
+    { "exchangeName": "Gate", "ticker": "GMT_USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Kucoin", "ticker": "GMT-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "GMT-USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "GRT": [
+    { "exchangeName": "Binance", "ticker": "GRTUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "CoinbasePro", "ticker": "GRT-USD" },
+    { "exchangeName": "Gate", "ticker": "GRT_USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Kraken", "ticker": "GRTUSD" },
+    { "exchangeName": "Kucoin", "ticker": "GRT-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "GRT-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "GRT_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "HBAR": [
+    { "exchangeName": "Binance", "ticker": "HBARUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Bybit", "ticker": "HBARUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "CoinbasePro", "ticker": "HBAR-USD" },
+    { "exchangeName": "Kucoin", "ticker": "HBAR-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "HBAR-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "HBAR_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "ICP": [
+    { "exchangeName": "Binance", "ticker": "ICPUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Bybit", "ticker": "ICPUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "CoinbasePro", "ticker": "ICP-USD" },
+    { "exchangeName": "Kraken", "ticker": "ICPUSD" },
+    { "exchangeName": "Kucoin", "ticker": "ICP-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "ICP-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "ICP_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "IMX": [
+    { "exchangeName": "Binance", "ticker": "IMXUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "CoinbasePro", "ticker": "IMX-USD" },
+    { "exchangeName": "Kraken", "ticker": "IMXUSD" },
+    { "exchangeName": "Kucoin", "ticker": "IMX-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "IMX-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "IMX_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "INJ": [
+    { "exchangeName": "Binance", "ticker": "INJUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Bybit", "ticker": "INJUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "CoinbasePro", "ticker": "INJ-USD" },
+    { "exchangeName": "Kraken", "ticker": "INJUSD" },
+    { "exchangeName": "Kucoin", "ticker": "INJ-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "INJ-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "INJ_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "JTO": [
+    { "exchangeName": "Binance", "ticker": "JTOUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Bybit", "ticker": "JTOUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "CoinbasePro", "ticker": "JTO-USD" },
+    { "exchangeName": "Kucoin", "ticker": "JTO-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "JTO-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "JTO_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "JUP": [
+    { "exchangeName": "Binance", "ticker": "JUPUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Bybit", "ticker": "JUPUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Gate", "ticker": "JUP_USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "JUP-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "JUP_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "KAVA": [
+    { "exchangeName": "Binance", "ticker": "KAVAUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Bybit", "ticker": "KAVAUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "CoinbasePro", "ticker": "KAVA-USD" },
+    { "exchangeName": "Gate", "ticker": "KAVA_USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Kraken", "ticker": "KAVAUSD" },
+    { "exchangeName": "Kucoin", "ticker": "KAVA-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "KAVA_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "LDO": [
+    { "exchangeName": "Binance", "ticker": "LDOUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Bybit", "ticker": "LDOUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "CoinbasePro", "ticker": "LDO-USD" },
+    { "exchangeName": "Kraken", "ticker": "LDOUSD" },
+    { "exchangeName": "Kucoin", "ticker": "LDO-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "LDO-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "LDO_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "LINK": [
+    { "exchangeName": "Binance", "ticker": "LINKUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Bitstamp", "ticker": "LINK/USD" },
+    { "exchangeName": "Bybit", "ticker": "LINKUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "CoinbasePro", "ticker": "LINK-USD" },
+    { "exchangeName": "Kraken", "ticker": "LINKUSD" },
+    { "exchangeName": "Kucoin", "ticker": "LINK-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "LINK-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "LINK_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "LTC": [
+    { "exchangeName": "Binance", "ticker": "LTCUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Bitstamp", "ticker": "LTC/USD" },
+    { "exchangeName": "Bybit", "ticker": "LTCUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "CoinbasePro", "ticker": "LTC-USD" },
+    { "exchangeName": "Huobi", "ticker": "ltcusdt", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Kraken", "ticker": "LTCUSD" },
+    { "exchangeName": "Kucoin", "ticker": "LTC-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "LTC-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "LTC_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "MANA": [
+    { "exchangeName": "Binance", "ticker": "MANAUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "CoinbasePro", "ticker": "MANA-USD" },
+    { "exchangeName": "Gate", "ticker": "MANA_USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Kraken", "ticker": "MANAUSD" },
+    { "exchangeName": "Kucoin", "ticker": "MANA-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "MANA-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "MANA_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "MASK": [
+    { "exchangeName": "Binance", "ticker": "MASKUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Bybit", "ticker": "MASKUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "CoinbasePro", "ticker": "MASK-USD" },
+    { "exchangeName": "Gate", "ticker": "MASK_USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Huobi", "ticker": "maskusdt", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Kucoin", "ticker": "MASK-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "MASK-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "MASK_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "MATIC": [
+    { "exchangeName": "Binance", "ticker": "MATICUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Bitstamp", "ticker": "MATIC/USD" },
+    { "exchangeName": "Bybit", "ticker": "MATICUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "CoinbasePro", "ticker": "MATIC-USD" },
+    { "exchangeName": "Huobi", "ticker": "maticusdt", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Kraken", "ticker": "MATICUSD" },
+    { "exchangeName": "Kucoin", "ticker": "MATIC-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "MATIC-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "MATIC_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "MINA": [
+    { "exchangeName": "Binance", "ticker": "MINAUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "CoinbasePro", "ticker": "MINA-USD" },
+    { "exchangeName": "Gate", "ticker": "MINA_USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Kraken", "ticker": "MINAUSD" },
+    { "exchangeName": "Okx", "ticker": "MINA-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "MINA_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "MKR": [
+    { "exchangeName": "Binance", "ticker": "MKRUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "CoinbasePro", "ticker": "MKR-USD" },
+    { "exchangeName": "Kraken", "ticker": "MKRUSD" },
+    { "exchangeName": "Kucoin", "ticker": "MKR-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "MKR-USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "NEAR": [
+    { "exchangeName": "Binance", "ticker": "NEARUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Bybit", "ticker": "NEARUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "CoinbasePro", "ticker": "NEAR-USD" },
+    { "exchangeName": "Huobi", "ticker": "nearusdt", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Kraken", "ticker": "NEARUSD" },
+    { "exchangeName": "Kucoin", "ticker": "NEAR-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "NEAR-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "NEAR_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "OP": [
+    { "exchangeName": "Binance", "ticker": "OPUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Bybit", "ticker": "OPUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "CoinbasePro", "ticker": "OP-USD" },
+    { "exchangeName": "Gate", "ticker": "OP_USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Kraken", "ticker": "OPUSD" },
+    { "exchangeName": "Kucoin", "ticker": "OP-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "OP-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "OP_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "ORDI": [
+    { "exchangeName": "Binance", "ticker": "ORDIUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Bybit", "ticker": "ORDIUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Gate", "ticker": "ORDI_USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Huobi", "ticker": "ordiusdt", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Kucoin", "ticker": "ORDI-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "ORDI-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "ORDI_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "PEPE": [
+    { "exchangeName": "Binance", "ticker": "PEPEUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Bybit", "ticker": "PEPEUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Kraken", "ticker": "PEPEUSD" },
+    { "exchangeName": "Kucoin", "ticker": "PEPE-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "PEPE-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "PEPE_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "PYTH": [
+    { "exchangeName": "Binance", "ticker": "PYTHUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Bybit", "ticker": "PYTHUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Gate", "ticker": "PYTH_USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Kucoin", "ticker": "PYTH-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "PYTH-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "PYTH_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "RNDR": [
+    { "exchangeName": "Binance", "ticker": "RNDRUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "CoinbasePro", "ticker": "RNDR-USD" },
+    { "exchangeName": "Kraken", "ticker": "RNDRUSD" },
+    { "exchangeName": "Kucoin", "ticker": "RNDR-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "RNDR-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "RNDR_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "RUNE": [
+    { "exchangeName": "Binance", "ticker": "RUNEUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Gate", "ticker": "RUNE_USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Kraken", "ticker": "RUNEUSD" },
+    { "exchangeName": "Kucoin", "ticker": "RUNE-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "RUNE_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "SAND": [
+    { "exchangeName": "Binance", "ticker": "SANDUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "CoinbasePro", "ticker": "SAND-USD" },
+    { "exchangeName": "Gate", "ticker": "SAND_USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Kucoin", "ticker": "SAND-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "SAND-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "SAND_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "SEI": [
+    { "exchangeName": "Binance", "ticker": "SEIUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Bybit", "ticker": "SEIUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "CoinbasePro", "ticker": "SEI-USD" },
+    { "exchangeName": "Huobi", "ticker": "seiusdt", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Kraken", "ticker": "SEIUSD" },
+    { "exchangeName": "Kucoin", "ticker": "SEI-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "SEI_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "SHIB": [
+    { "exchangeName": "Binance", "ticker": "SHIBUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Bybit", "ticker": "SHIBUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "CoinbasePro", "ticker": "SHIB-USD" },
+    { "exchangeName": "Huobi", "ticker": "shibusdt", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Kraken", "ticker": "SHIBUSD" },
+    { "exchangeName": "Kucoin", "ticker": "SHIB-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "SHIB-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "SHIB_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "SNX": [
+    { "exchangeName": "Binance", "ticker": "SNXUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Bybit", "ticker": "SNXUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "CoinbasePro", "ticker": "SNX-USD" },
+    { "exchangeName": "Kraken", "ticker": "SNXUSD" },
+    { "exchangeName": "Kucoin", "ticker": "SNX-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "SNX-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "SNX_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "SOL": [
+    { "exchangeName": "Binance", "ticker": "SOLUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Bitstamp", "ticker": "SOL/USD" },
+    { "exchangeName": "Bybit", "ticker": "SOLUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "CoinbasePro", "ticker": "SOL-USD" },
+    { "exchangeName": "Huobi", "ticker": "solusdt", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Kraken", "ticker": "SOLUSD" },
+    { "exchangeName": "Kucoin", "ticker": "SOL-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "SOL-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "SOL_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "STX": [
+    { "exchangeName": "Binance", "ticker": "STXUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Bybit", "ticker": "STXUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "CoinbasePro", "ticker": "STX-USD" },
+    { "exchangeName": "Gate", "ticker": "STX_USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Kraken", "ticker": "STXUSD" },
+    { "exchangeName": "Kucoin", "ticker": "STX-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "STX-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "STX_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "SUI": [
+    { "exchangeName": "Binance", "ticker": "SUIUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Bybit", "ticker": "SUIUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "CoinbasePro", "ticker": "SUI-USD" },
+    { "exchangeName": "Huobi", "ticker": "suiusdt", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Kraken", "ticker": "SUIUSD" },
+    { "exchangeName": "Kucoin", "ticker": "SUI-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "SUI-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "SUI_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "TIA": [
+    { "exchangeName": "Binance", "ticker": "TIAUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Bybit", "ticker": "TIAUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "CoinbasePro", "ticker": "TIA-USD" },
+    { "exchangeName": "Kraken", "ticker": "TIAUSD" },
+    { "exchangeName": "Kucoin", "ticker": "TIA-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "TIA-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "TIA_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "TRX": [
+    { "exchangeName": "Binance", "ticker": "TRXUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Bybit", "ticker": "TRXUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Gate", "ticker": "TRX_USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Huobi", "ticker": "trxusdt", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Kraken", "ticker": "TRXUSD" },
+    { "exchangeName": "Kucoin", "ticker": "TRX-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "TRX-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "TRX_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "UNI": [
+    { "exchangeName": "Binance", "ticker": "UNIUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Bybit", "ticker": "UNIUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "CoinbasePro", "ticker": "UNI-USD" },
+    { "exchangeName": "Kraken", "ticker": "UNIUSD" },
+    { "exchangeName": "Kucoin", "ticker": "UNI-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "UNI-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "UNI_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "WLD": [
+    { "exchangeName": "Binance", "ticker": "WLDUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Bybit", "ticker": "WLDUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Gate", "ticker": "WLD_USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Kucoin", "ticker": "WLD-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "WLD-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "WLD_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "WOO": [
+    { "exchangeName": "Binance", "ticker": "WOOUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Gate", "ticker": "WOO_USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Kucoin", "ticker": "WOO-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "WOO-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "WOO_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "XLM": [
+    { "exchangeName": "Binance", "ticker": "XLMUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Bitstamp", "ticker": "XLM/USD" },
+    { "exchangeName": "Bybit", "ticker": "XLMUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "CoinbasePro", "ticker": "XLM-USD" },
+    { "exchangeName": "Kraken", "ticker": "XLMUSD" },
+    { "exchangeName": "Kucoin", "ticker": "XLM-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "XLM-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "XLM_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "XRP": [
+    { "exchangeName": "Binance", "ticker": "XRPUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Bitstamp", "ticker": "XRP/USD" },
+    { "exchangeName": "Bybit", "ticker": "XRPUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "CoinbasePro", "ticker": "XRP-USD" },
+    { "exchangeName": "Huobi", "ticker": "xrpusdt", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Kraken", "ticker": "XRPUSD" },
+    { "exchangeName": "Kucoin", "ticker": "XRP-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "XRP-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "XRP_USDT", "adjustByMarket": "USDT-USD" }
+  ],
+  "ZETA": [
+    { "exchangeName": "Bybit", "ticker": "ZETAUSDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "CoinbasePro", "ticker": "ZETA-USD" },
+    { "exchangeName": "Gate", "ticker": "ZETA_USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Kucoin", "ticker": "ZETA-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Okx", "ticker": "ZETA-USDT", "adjustByMarket": "USDT-USD" },
+    { "exchangeName": "Mexc", "ticker": "ZETA_USDT", "adjustByMarket": "USDT-USD" }
+  ]
+}

public/configs/v1/env.json

@@ -0,0 +1,635 @@
+{
+   "apps":{
+      "ios":{
+         "scheme":"dydx-t-v4"
+      }
+   },
+   "tokens":{
+      "dydxprotocol-testnet":{
+         "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"
+         }
+      },
+      "dydx-testnet-4":{
+         "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"
+         }
+      },
+      "[mainnet chain id]":{
+         "comment":"Change according to mainnet release",
+         "chain":{
+            "name":"TokenName",
+            "denom":"tokenDenom",
+            "decimals":18,
+            "image":"/currencies/dydx.png"
+         },
+         "usdc":{
+            "name":"USDC",
+            "denom":"ibc/8E27BA2D5493AF5636760E354E46004562C46AB7EC0CC4C1CA14E9E20E2545B5",
+            "gasDenom":"uusdc",
+            "decimals":6,
+            "image":"/currencies/usdc.png"
+         }
+      }
+   },
+   "links":{
+      "dydxprotocol-testnet":{
+         "tos":"https://dydx.exchange/v4-terms",
+         "privacy":"https://dydx.exchange/privacy",
+         "mintscan":"https://testnet.mintscan.io/dydx-testnet/txs/{tx_hash}",
+         "blogs":"https://www.dydx.foundation/blog",
+         "foundation":"https://www.dydx.foundation",
+         "help":"https://help.dydx.exchange/",
+         "reduceOnlyLearnMore":"https://help.dydx.exchange/articles/6345793-reduce-only-orders",
+         "mintscanBase":"https://testnet.mintscan.io/dydx-testnet",
+         "documentation":"https://docs.dydx.exchange/",
+         "community":"https://discord.com/invite/dydx",
+         "governanceLearnMore":"https://help.dydx.exchange",
+         "newMarketProposalLearnMore":"https://dydx.exchange/blog/new-market-proposals",
+         "stakingLearnMore":"https://help.dydx.exchange",
+         "keplrDashboard":"https://testnet.keplr.app/",
+         "strideZoneApp":"https://testnet.stride.zone",
+         "accountExportLearnMore":"https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
+         "walletLearnMore":"https://www.dydx.academy/video/defi-wallet"
+      },
+      "dydx-testnet-4":{
+         "tos": "https://dydx.exchange/v4-terms",
+         "privacy": "https://dydx.exchange/privacy",
+         "mintscan": "https://testnet.mintscan.io/dydx-testnet/txs/{tx_hash}",
+         "documentation": "https://docs.dydx.exchange/",
+         "community": "https://discord.com/invite/dydx",
+         "feedback": "https://docs.google.com/forms/d/e/1FAIpQLSezLsWCKvAYDEb7L-2O4wOON1T56xxro9A2Azvl6IxXHP_15Q/viewform",
+         "blogs": "https://www.dydx.foundation/blog",
+         "foundation": "https://www.dydx.foundation",
+         "help": "https://help.dydx.exchange/",
+         "reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
+         "mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
+         "governanceLearnMore": "https://help.dydx.exchange",
+         "newMarketProposalLearnMore": "https://dydx.exchange/blog/new-market-proposals",
+         "stakingLearnMore": "https://help.dydx.exchange",
+         "keplrDashboard": "https://testnet.keplr.app/",
+         "strideZoneApp": "https://testnet.stride.zone",
+         "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
+         "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
+      },
+      "[mainnet chain id]":{
+         "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]",
+         "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]",
+         "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]",
+         "governanceLearnMore":"[HTTP link to governance learn more, can be null]",
+         "newMarketProposalLearnMore":"[HTTP link to new market proposal learn more, can be null]",
+         "stakingLearnMore":"[HTTP link to staking learn more, can be null]",
+         "keplrDashboard":"[HTTP link to keplr dashboard, can be null]",
+         "strideZoneApp":"[HTTP link to stride zone app, can be null]",
+         "accountExportLearnMore":"[HTTP link to account export learn more, can be null]",
+         "walletLearnMore":"[HTTP link to wallet learn more, can be null]"
+      }
+   },
+   "wallets":{
+      "dydxprotocol-testnet":{
+         "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"
+      },
+      "dydx-testnet-4":{
+         "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 V4"
+      },
+      "[mainnet chain id]":{
+         "walletconnect":{
+            "client":{
+               "name":"[Name of the app]",
+               "description":"[Description of the app]",
+               "iconUrl":"[Relative URL of the icon URL]"
+            },
+            "v2":{
+               "projectId":"[Project ID]"
+            }
+         },
+         "walletSegue":{
+            "callbackUrl":"[Relative callback URL for WalletSegue, should match apple-app-site-association]"
+         },
+         "images":"[Relative URL for wallet images]",
+         "signTypedDataAction":"dYdX Chain Onboarding",
+         "signTypedDataDomainName":"dYdX Chain"
+      }
+   },
+   "governance":{
+      "dydxprotocol-testnet":{
+         "newMarketProposal":{
+            "initialDepositAmount":10000000,
+            "delayBlocks":900,
+            "newMarketsMethodology":"https://docs.google.com/spreadsheets/d/1zjkV9R7R_7KMItuzqzvKGwefSBRfE-ZNAx1LH55OcqY/edit?usp=sharing"
+         }
+      },
+      "dydx-testnet-4":{
+         "newMarketProposal": {
+            "initialDepositAmount": 10000000,
+            "delayBlocks": 900,
+            "newMarketsMethodology": "https://docs.google.com/spreadsheets/d/1zjkV9R7R_7KMItuzqzvKGwefSBRfE-ZNAx1LH55OcqY/edit?usp=sharing"
+         }
+      },
+      "[mainnet chain id]":{
+         "newMarketProposal":{
+            "initialDepositAmount":0,
+            "delayBlocks":0,
+            "newMarketsMethodology":"[URL to spreadsheet or document that explains methodology]"
+         }
+      }
+   },
+   "deployments":{
+      "MAINNET":{
+         "environments":[
+            "dydxprotocol-mainnet"
+         ],
+         "default":"dydxprotocol-mainnet"
+      },
+      "TESTFLIGHT":{
+         "environments":[
+            "dydxprotocol-mainnet",
+            "dydxprotocol-testnet"
+         ],
+         "default":"dydxprotocol-mainnet"
+      },
+      "TESTNET":{
+         "environments":[
+            "dydxprotocol-testnet"
+         ],
+         "default":"dydxprotocol-testnet"
+      },
+      "DEV":{
+         "environments":[
+            "dydxprotocol-dev",
+            "dydxprotocol-dev-2",
+            "dydxprotocol-dev-4",
+            "dydxprotocol-dev-5",
+            "dydxprotocol-staging",
+            "dydxprotocol-staging-west",
+            "dydxprotocol-testnet",
+            "dydxprotocol-testnet-dydx",
+            "dydxprotocol-testnet-nodefleet",
+            "dydxprotocol-testnet-kingnodes",
+            "dydxprotocol-testnet-liquify",
+            "dydxprotocol-testnet-polkachu",
+            "dydxprotocol-testnet-bware"
+         ],
+         "default":"dydxprotocol-testnet"
+      }
+   },
+   "environments":{
+      "dydxprotocol-dev":{
+         "name":"v4 Dev",
+         "ethereumChainId":"11155111",
+         "dydxChainId":"dydxprotocol-testnet",
+         "chainName":"dYdX Chain",
+         "chainLogo":"/dydx-chain.png",
+         "squidIntegratorId":"dYdX-api",
+         "isMainNet":false,
+         "endpoints":{
+            "indexers":[
+               {
+                  "api":"https://indexer.v4dev.dydx.exchange",
+                  "socket":"wss://indexer.v4dev.dydx.exchange"
+               }
+            ],
+            "validators":[
+               "https://validator.v4dev.dydx.exchange"
+            ],
+            "0xsquid":"https://testnet.api.0xsquid.com",
+            "nobleValidator":"https://noble-testnet-rpc.polkachu.com/",
+            "faucet":"https://faucet.v4dev.dydx.exchange"
+         },
+         "featureFlags":{
+            "reduceOnlySupported":true
+         }
+      },
+      "dydxprotocol-dev-2":{
+         "name":"v4 Dev 2",
+         "ethereumChainId":"11155111",
+         "dydxChainId":"dydxprotocol-testnet",
+         "chainName":"dYdX Chain",
+         "chainLogo":"/dydx-chain.png",
+         "squidIntegratorId":"dYdX-api",
+         "isMainNet":false,
+         "endpoints":{
+            "indexers":[
+               {
+                  "api":"http://dev2-indexer-apne1-lb-public-2076363889.ap-northeast-1.elb.amazonaws.com",
+                  "socket":"ws://dev2-indexer-apne1-lb-public-2076363889.ap-northeast-1.elb.amazonaws.com"
+               }
+            ],
+            "validators":[
+               "http://54.92.118.111"
+            ],
+            "0xsquid":"https://testnet.api.0xsquid.com",
+            "nobleValidator":"https://noble-testnet-rpc.polkachu.com/"
+         },
+         "featureFlags":{
+            "reduceOnlySupported":true
+         }
+      },
+      "dydxprotocol-dev-4":{
+         "name":"v4 Dev 4",
+         "ethereumChainId":"11155111",
+         "dydxChainId":"dydxprotocol-testnet",
+         "chainName":"dYdX Chain",
+         "chainLogo":"/dydx-chain.png",
+         "squidIntegratorId":"dYdX-api",
+         "isMainNet":false,
+         "endpoints":{
+            "indexers":[
+               {
+                  "api":"https://indexer.v4dev4.dydx.exchange",
+                  "socket":"wss://indexer.v4dev4.dydx.exchange"
+               }
+            ],
+            "validators":[
+               "https://validator.v4dev4.dydx.exchange"
+            ],
+            "0xsquid":"https://testnet.api.0xsquid.com",
+            "nobleValidator":"https://noble-testnet-rpc.polkachu.com/",
+            "faucet":"https://faucet.v4dev4.dydx.exchange"
+         },
+         "featureFlags":{
+            "reduceOnlySupported":true
+         }
+      },
+      "dydxprotocol-dev-5":{
+         "name":"v4 Dev 5",
+         "ethereumChainId":"11155111",
+         "dydxChainId":"dydxprotocol-testnet",
+         "chainName":"dYdX Chain",
+         "chainLogo":"/dydx-chain.png",
+         "squidIntegratorId":"dYdX-api",
+         "isMainNet":false,
+         "endpoints":{
+            "indexers":[
+               {
+                  "api":"http://dev5-indexer-apne1-lb-public-1721328151.ap-northeast-1.elb.amazonaws.com",
+                  "socket":"ws://dev5-indexer-apne1-lb-public-1721328151.ap-northeast-1.elb.amazonaws.com"
+               }
+            ],
+            "validators":[
+               "http://18.223.78.50"
+            ],
+            "0xsquid":"https://testnet.api.0xsquid.com",
+            "nobleValidator":"https://noble-testnet-rpc.polkachu.com/"
+         },
+         "featureFlags":{
+            "reduceOnlySupported":true
+         }
+      },
+      "dydxprotocol-staging":{
+         "name":"v4 Staging",
+         "ethereumChainId":"11155111",
+         "dydxChainId":"dydxprotocol-testnet",
+         "chainName":"dYdX Chain",
+         "chainLogo":"/dydx-chain.png",
+         "squidIntegratorId":"dYdX-api",
+         "isMainNet":false,
+         "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/"
+         },
+         "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,
+         "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/"
+         },
+         "apps":{
+            "ios":{
+               "minimalVersion":"1.0",
+               "build":40000,
+               "url":"https://apps.apple.com/app/dydx/id1564787350"
+            }
+         },
+         "featureFlags":{
+            "reduceOnlySupported":true
+         }
+      },
+      "dydxprotocol-staging-west":{
+         "name":"v4 Staging West",
+         "ethereumChainId":"11155111",
+         "dydxChainId":"dydxprotocol-testnet",
+         "chainName":"dYdX Chain",
+         "chainLogo":"/dydx-chain.png",
+         "squidIntegratorId":"dYdX-api",
+         "isMainNet":false,
+         "endpoints":{
+            "indexers":[
+               {
+                  "api":"https://indexer.v4staging.dydx.exchange",
+                  "socket":"wss://indexer.v4staging.dydx.exchange"
+               }
+            ],
+            "faucet":"https://faucet.v4staging.dydx.exchange",
+            "validators":[
+               "https://validator-uswest1.v4staging.dydx.exchange"
+            ],
+            "0xsquid":"https://testnet.api.squidrouter.com",
+            "nobleValidator":"https://noble-testnet-rpc.polkachu.com/"
+         },
+         "featureFlags":{
+            "reduceOnlySupported":true
+         }
+      },
+      "dydxprotocol-testnet":{
+         "name":"v4 Public Testnet",
+         "ethereumChainId":"11155111",
+         "dydxChainId":"dydx-testnet-4",
+         "chainName":"dYdX Chain",
+         "chainLogo":"/dydx-chain.png",
+         "squidIntegratorId":"dYdX-api",
+         "isMainNet":false,
+         "endpoints":{
+            "indexers":[
+               {
+                  "api":"https://indexer.v4testnet.dydx.exchange",
+                  "socket":"wss://indexer.v4testnet.dydx.exchange"
+               }
+            ],
+            "validators":[
+               "https://dydx-testnet-full-rpc.public.blastapi.io/",
+               "https://dydx-testnet-rpc.polkachu.com/",
+               "https://dydx-testnet.nodefleet.org",
+               "https://test-dydx.kingnodes.com",
+               "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"
+         },
+         "featureFlags":{
+            "reduceOnlySupported":false
+         }
+      },
+      "dydxprotocol-testnet-dydx":{
+         "name":"v4 Public Testnet/dYdX",
+         "ethereumChainId":"11155111",
+         "dydxChainId":"dydx-testnet-4",
+         "chainName":"dYdX Chain",
+         "chainLogo":"/dydx-chain.png",
+         "squidIntegratorId":"dYdX-api",
+         "isMainNet":false,
+         "endpoints":{
+            "indexers":[
+               {
+                  "api":"https://indexer.v4testnet.dydx.exchange",
+                  "socket":"wss://indexer.v4testnet.dydx.exchange"
+               }
+            ],
+            "validators":[
+               "https://validator.v4testnet.dydx.exchange"
+            ],
+            "0xsquid":"https://testnet.api.squidrouter.com",
+            "nobleValidator":"https://noble-testnet-rpc.polkachu.com/",
+            "faucet":"https://faucet.v4testnet.dydx.exchange"
+         },
+         "featureFlags":{
+            "reduceOnlySupported":false
+         }
+      },
+      "dydxprotocol-testnet-nodefleet":{
+         "name":"v4 Public Testnet/nodefleet",
+         "ethereumChainId":"11155111",
+         "dydxChainId":"dydx-testnet-4",
+         "chainName":"dYdX Chain",
+         "chainLogo":"/dydx-chain.png",
+         "squidIntegratorId":"dYdX-api",
+         "isMainNet":false,
+         "endpoints":{
+            "indexers":[
+               {
+                  "api":"https://indexer.v4testnet.dydx.exchange",
+                  "socket":"wss://indexer.v4testnet.dydx.exchange"
+               }
+            ],
+            "validators":[
+               "https://dydx-testnet.nodefleet.org"
+            ],
+            "0xsquid":"https://testnet.api.squidrouter.com",
+            "nobleValidator":"https://noble-testnet-rpc.polkachu.com/",
+            "faucet":"https://faucet.v4testnet.dydx.exchange"
+         },
+         "featureFlags":{
+            "reduceOnlySupported":false
+         }
+      },
+      "dydxprotocol-testnet-kingnodes":{
+         "name":"v4 Public Testnet/KingNodes",
+         "ethereumChainId":"11155111",
+         "dydxChainId":"dydx-testnet-4",
+         "chainName":"dYdX Chain",
+         "chainLogo":"/dydx-chain.png",
+         "squidIntegratorId":"dYdX-api",
+         "isMainNet":false,
+         "endpoints":{
+            "indexers":[
+               {
+                  "api":"https://indexer.v4testnet.dydx.exchange",
+                  "socket":"wss://indexer.v4testnet.dydx.exchange"
+               }
+            ],
+            "validators":[
+               "https://test-dydx.kingnodes.com"
+            ],
+            "0xsquid":"https://testnet.api.squidrouter.com",
+            "nobleValidator":"https://noble-testnet-rpc.polkachu.com/",
+            "faucet":"https://faucet.v4testnet.dydx.exchange"
+         },
+         "featureFlags":{
+            "reduceOnlySupported":false
+         }
+      },
+      "dydxprotocol-testnet-liquify":{
+         "name":"v4 Public Testnet/Liquify",
+         "ethereumChainId":"11155111",
+         "dydxChainId":"dydx-testnet-4",
+         "chainName":"dYdX Chain",
+         "chainLogo":"/dydx-chain.png",
+         "squidIntegratorId":"dYdX-api",
+         "isMainNet":false,
+         "endpoints":{
+            "indexers":[
+               {
+                  "api":"https://indexer.v4testnet.dydx.exchange",
+                  "socket":"wss://indexer.v4testnet.dydx.exchange"
+               }
+            ],
+            "validators":[
+               "https://dydx-rpc.liquify.com/api=8878132/dydx"
+            ],
+            "0xsquid":"https://testnet.api.squidrouter.com",
+            "nobleValidator":"https://noble-testnet-rpc.polkachu.com/",
+            "faucet":"https://faucet.v4testnet.dydx.exchange"
+         },
+         "featureFlags":{
+            "reduceOnlySupported":false
+         }
+      },
+      "dydxprotocol-testnet-polkachu":{
+         "name":"v4 Public Testnet/Polkahcu",
+         "ethereumChainId":"11155111",
+         "dydxChainId":"dydx-testnet-4",
+         "chainName":"dYdX Chain",
+         "chainLogo":"/dydx-chain.png",
+         "squidIntegratorId":"dYdX-api",
+         "isMainNet":false,
+         "endpoints":{
+            "indexers":[
+               {
+                  "api":"https://indexer.v4testnet.dydx.exchange",
+                  "socket":"wss://indexer.v4testnet.dydx.exchange"
+               }
+            ],
+            "validators":[
+               "https://dydx-testnet-rpc.polkachu.com/"
+            ],
+            "0xsquid":"https://testnet.api.squidrouter.com",
+            "nobleValidator":"https://noble-testnet-rpc.polkachu.com/",
+            "faucet":"https://faucet.v4testnet.dydx.exchange"
+         },
+         "featureFlags":{
+            "reduceOnlySupported":false
+         }
+      },
+      "dydxprotocol-testnet-bware":{
+         "name":"v4 Public Testnet/BWare",
+         "ethereumChainId":"11155111",
+         "dydxChainId":"dydx-testnet-4",
+         "chainName":"dYdX Chain",
+         "chainLogo":"/dydx-chain.png",
+         "squidIntegratorId":"dYdX-api",
+         "isMainNet":false,
+         "endpoints":{
+            "indexers":[
+               {
+                  "api":"https://indexer.v4testnet.dydx.exchange",
+                  "socket":"wss://indexer.v4testnet.dydx.exchange"
+               }
+            ],
+            "validators":[
+               "https://dydx-testnet-full-rpc.public.blastapi.io/"
+            ],
+            "0xsquid":"https://testnet.api.squidrouter.com",
+            "nobleValidator":"https://noble-testnet-rpc.polkachu.com/",
+            "faucet":"https://faucet.v4testnet.dydx.exchange"
+         },
+         "featureFlags":{
+            "reduceOnlySupported":false
+         }
+      },
+      "dydxprotocol-mainnet":{
+         "name":"v4",
+         "ethereumChainId":"1",
+         "dydxChainId":"[mainnet chain id]",
+         "chainName":"dYdX Chain",
+         "chainLogo":"/dydx-chain.png",
+         "squidIntegratorId":"[mainnet squid integrator id]",
+         "isMainNet":true,
+         "endpoints":{
+            "indexers":[
+               {
+                  "api":"[REST endpoint]",
+                  "socket":"[Websocket endpoint]"
+               }
+            ],
+            "validators":[
+               "[Validator endpoint 1",
+               "[Validator endpoint n]"
+            ],
+            "0xsquid":"[0xSquid endpoint for mainnet]",
+            "nobleValidator":"[noble validator endpoint for mainnet]"
+         },
+         "featureFlags":{
+            "reduceOnlySupported":false
+         }
+      }
+   }
+}

public/smartbanner.html

@@ -0,0 +1,15 @@
+    <!-- Smartbanner: Configure the mobile app -->
+    <meta name="smartbanner:title" content="SMARTBANNER_APP_NAME">
+    <meta name="smartbanner:author" content="SMARTBANNER_ORG_NAME">
+    <meta name="smartbanner:icon-apple" content="SMARTBANNER_ICON_URL">
+    <meta name="smartbanner:icon-google" content="SMARTBANNER_ICON_URL">
+    <!-- Smartbanner: The rest of the configurations can be kept as is -->
+    <meta name="smartbanner:price" content="FREE">
+    <meta name="smartbanner:price-suffix-apple" content=" - On the App Store">
+    <meta name="smartbanner:price-suffix-google" content=" - In Google Play">
+    <meta name="smartbanner:button" content="VIEW">
+    <meta name="smartbanner:close-label" content="Close">
+    <meta name="smartbanner:exclude-user-agent-regex" content="^.*(Windows NT|Intel Mac OS X).*$">
+    <script src="https://cdn.jsdelivr.net/npm/smartbanner.js@1.22.0/dist/smartbanner.min.js"></script>
+    <link href="https://cdn.jsdelivr.net/npm/smartbanner.js@1.22.0/dist/smartbanner.min.css" rel="stylesheet">
+    <!-- Smartbanner: End configuration -->

scripts/README.md

@@ -36,3 +36,17 @@ Customize Intercom Messenger by adding logo and brand colors
 3. Add API key in Github > Secrets and Variables > Actions as `INTERCOM_APP_ID`
 4. In your deploy scripts add `pnpm run build:inject-intercom` after your pnpm build / vite build command.
 5. If you are using with the Amplitude deployment scripts, your build command may look like the following: `pnpm build && pnpm run build:inject-amplitude && pnpm run build:inject-intercom`
+
+### Smartbanner
+Smartbanner to show download links to iOS and/or Android native apps on mobile devices.
+
+<b>To use with dydxprotocol/v4-web:</b>
+1. iOS app App Store link or Android app Google Play link.
+2. Add configurations in Github > Secrets and Variables > Actions as 
+    `SMARTBANNER_APP_NAME` for app name
+    `SMARTBANNER_ORG_NAME` for organization name
+    `SMARTBANNER_ICON_URL` for icon image
+    `SMARTBANNER_APPSTORE_URL` for iOS App Store link
+    `SMARTBANNER_GOOGLEPLAY_URL` for Android Google Play link
+3. In your deploy scripts add `pnpm run build:inject-smartbanner` after your pnpm build / vite build command.
+4. If you are using with the Amplitude deployment scripts, your build command may look like the following: `pnpm build && pnpm run build:inject-smartbanner`

scripts/inject-amplitude.js

@@ -3,23 +3,50 @@ 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');
 
     const amplitudeCdnScript = `<script type="text/javascript">
-        !function(){"use strict";!function(e,t){var n=e.amplitude||{_q:[],_iq:{}};if(n.invoked)e.console&&console.error&&console.error("Amplitude snippet has been loaded.");else{var r=function(e,t){e.prototype[t]=function(){return this._q.push({name:t,args:Array.prototype.slice.call(arguments,0)}),this}},s=function(e,t,n){return function(r){e._q.push({name:t,args:Array.prototype.slice.call(n,0),resolve:r})}},o=function(e,t,n){e[t]=function(){if(n)return{promise:new Promise(s(e,t,Array.prototype.slice.call(arguments)))}}},i=function(e){for(var t=0;t<m.length;t++)o(e,m[t],!1);for(var n=0;n<g.length;n++)o(e,g[n],!0)};n.invoked=!0;var u=t.createElement("script");u.type="text/javascript",u.integrity="sha384-x0ik2D45ZDEEEpYpEuDpmj05fY91P7EOZkgdKmq4dKL/ZAVcufJ+nULFtGn0HIZE",u.crossOrigin="anonymous",u.async=!0,u.src="https://cdn.amplitude.com/libs/analytics-browser-2.0.0-min.js.gz",u.onload=function(){e.amplitude.runQueuedFunctions||console.log("[Amplitude] Error: could not load SDK")};var a=t.getElementsByTagName("script")[0];a.parentNode.insertBefore(u,a);for(var c=function(){return this._q=[],this},p=["add","append","clearAll","prepend","set","setOnce","unset","preInsert","postInsert","remove","getUserProperties"],l=0;l<p.length;l++)r(c,p[l]);n.Identify=c;for(var d=function(){return this._q=[],this},f=["getEventProperties","setProductId","setQuantity","setPrice","setRevenue","setRevenueType","setEventProperties"],v=0;v<f.length;v++)r(d,f[v]);n.Revenue=d;var m=["getDeviceId","setDeviceId","getSessionId","setSessionId","getUserId","setUserId","setOptOut","setTransport","reset","extendSession"],g=["init","add","remove","track","logEvent","identify","groupIdentify","setGroup","revenue","flush"];i(n),n.createInstance=function(e){return n._iq[e]={_q:[]},i(n._iq[e]),n._iq[e]},e.amplitude=n}}(window,document)}();
+        !function(){"use strict";!function(e,t){var n=e.amplitude||{_q:[],_iq:{}};if(n.invoked)e.console&&console.error&&console.error("Amplitude snippet has been loaded.");else{var r=function(e,t){e.prototype[t]=function(){return this._q.push({name:t,args:Array.prototype.slice.call(arguments,0)}),this}},s=function(e,t,n){return function(r){e._q.push({name:t,args:Array.prototype.slice.call(n,0),resolve:r})}},o=function(e,t,n){e[t]=function(){if(n)return{promise:new Promise(s(e,t,Array.prototype.slice.call(arguments)))}}},i=function(e){for(var t=0;t<m.length;t++)o(e,m[t],!1);for(var n=0;n<g.length;n++)o(e,g[n],!0)};n.invoked=!0;var u=t.createElement("script");u.type="text/javascript",u.integrity="sha384-BVo5ZjsjH373rWbcjz9Qjb2L6BgLwLADcZtZZPu3nMl8+7LPDhi1NcUEf0Ate41Y",u.crossOrigin="anonymous",u.async=!0,u.src="/libs/amplitude-analytics-browser-2.0.0-min.js",u.onload=function(){e.amplitude.runQueuedFunctions||console.log("[Amplitude] Error: could not load SDK")};var a=t.getElementsByTagName("script")[0];a.parentNode.insertBefore(u,a);for(var c=function(){return this._q=[],this},p=["add","append","clearAll","prepend","set","setOnce","unset","preInsert","postInsert","remove","getUserProperties"],l=0;l<p.length;l++)r(c,p[l]);n.Identify=c;for(var d=function(){return this._q=[],this},f=["getEventProperties","setProductId","setQuantity","setPrice","setRevenue","setRevenueType","setEventProperties"],v=0;v<f.length;v++)r(d,f[v]);n.Revenue=d;var m=["getDeviceId","setDeviceId","getSessionId","setSessionId","getUserId","setUserId","setOptOut","setTransport","reset","extendSession"],g=["init","add","remove","track","logEvent","identify","groupIdentify","setGroup","revenue","flush"];i(n),n.createInstance=function(e){return n._iq[e]={_q:[]},i(n._iq[e]),n._iq[e]},e.amplitude=n}}(window,document)}();
         </script>
         `;
 
     const amplitudeListenerScript = `<script type="module">
-        !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."))}();
+      !(function () {
-        </script>`;
+        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(
       '<div id="root"></div>',

scripts/inject-smartbanner.js

@@ -0,0 +1,60 @@
+/* eslint-disable no-console */
+import fs from 'fs/promises';
+import path from 'path';
+import { fileURLToPath } from 'url';
+
+const SMARTBANNER_APP_NAME = process.env.SMARTBANNER_APP_NAME;
+const SMARTBANNER_ORG_NAME = process.env.SMARTBANNER_ORG_NAME;
+const SMARTBANNER_ICON_URL = process.env.SMARTBANNER_ICON_URL;
+const SMARTBANNER_APPSTORE_URL = process.env.SMARTBANNER_APPSTORE_URL;
+const SMARTBANNER_GOOGLEPLAY_URL = process.env.SMARTBANNER_GOOGLEPLAY_URL;
+
+const currentPath = fileURLToPath(import.meta.url);
+const projectRoot = path.dirname(currentPath);
+const htmlFilePath = path.resolve(projectRoot, '../dist/index.html');
+const smartbannerFilePath = path.resolve(projectRoot, '../dist/smartbanner.html');
+
+if (
+  SMARTBANNER_APP_NAME &&
+  SMARTBANNER_ORG_NAME &&
+  SMARTBANNER_ICON_URL &&
+  (SMARTBANNER_APPSTORE_URL || SMARTBANNER_GOOGLEPLAY_URL)
+) {
+  try {
+    const html = await fs.readFile(htmlFilePath, 'utf-8');
+    let smartbanner = await fs.readFile(smartbannerFilePath, 'utf-8');
+    smartbanner = smartbanner
+      .replace('SMARTBANNER_APP_NAME', SMARTBANNER_APP_NAME)
+      .replace('SMARTBANNER_ORG_NAME', SMARTBANNER_ORG_NAME)
+      .replace('SMARTBANNER_ICON_URL', SMARTBANNER_ICON_URL)
+      .replace('SMARTBANNER_ICON_URL', SMARTBANNER_ICON_URL);
+
+    /* hardcoded injection depending on whether the app is available on App Store and/or Google Play */
+
+    if (SMARTBANNER_APPSTORE_URL) {
+      smartbanner = `\t<meta name="smartbanner:button-url-apple" content="${SMARTBANNER_APPSTORE_URL}">\n` + smartbanner;
+    }
+    if (SMARTBANNER_GOOGLEPLAY_URL) {
+      smartbanner = `\t<meta name="smartbanner:button-url-google" content="${SMARTBANNER_GOOGLEPLAY_URL}">\n` + smartbanner;
+    }
+    if (SMARTBANNER_APPSTORE_URL) {
+      if (SMARTBANNER_GOOGLEPLAY_URL) {
+        smartbanner = `\t<meta name="smartbanner:enabled-platforms" content="android,ios">\n` + smartbanner;
+      } else {
+        smartbanner = `\t<meta name="smartbanner:enabled-platforms" content="ios">\n` + smartbanner;
+      }
+    } else {
+      if (SMARTBANNER_GOOGLEPLAY_URL) {
+        smartbanner = `\t<meta name="smartbanner:enabled-platforms" content="android">\n` + smartbanner;
+      }
+    }
+
+    const injectedHtml = html.replace('</head>', `${smartbanner}\n</head>`);
+
+    await fs.writeFile(htmlFilePath, injectedHtml, 'utf-8');
+
+    console.log('Smartbanner scripts successfully injected.');
+  } catch (err) {
+    console.error('Error injecting Smartbanner scripts:', err);
+  }
+}

src/App.tsx

@@ -52,9 +52,9 @@ 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 TokenPage = lazy(() => import('@/pages/token/Token'));
 
 const queryClient = new QueryClient();
 
@@ -87,7 +87,7 @@ const Content = () => {
                 <Route path={MarketsRoute.New} element={<NewMarket />} />
                 <Route path={AppRoute.Markets} element={<MarketsPage />} />
               </Route>
-              <Route path={`/${chainTokenLabel}`} element={<RewardsPage />} />
+              <Route path={`/${chainTokenLabel}/*`} element={<TokenPage />} />
               {isTablet && (
                 <>
                   <Route path={AppRoute.Alerts} element={<AlertsPage />} />
@@ -207,6 +207,7 @@ Styled.Content = styled.div<{ isShowingHeader: boolean; isShowingFooter: boolean
 
 Styled.Main = styled.main`
   ${layoutMixins.contentSectionAttached}
+  box-shadow: none;
 
   grid-area: Main;
 

src/components/AlertMessage.tsx

@@ -40,9 +40,6 @@ const AlertContainer = styled.div<StyleProps>`
       case AlertType.Info: {
         return css`
           --alert-accent-color: var(--color-text-1);
-
-          --alert-default-background-opacity: 0.133; // Relative
-          // --alert-background: var(--color-layer-6); // Absolute
         `;
       }
       case AlertType.Success: {

src/components/AssetIcon.tsx

@@ -16,6 +16,7 @@ const assetIcons = {
   AVAX: '/currencies/avax.png',
   BCH: '/currencies/bch.png',
   BLUR: '/currencies/blur.png',
+  BNB: '/currencies/bnb.png',
   BONK: '/currencies/bonk.png',
   BTC: '/currencies/btc.png',
   CELO: '/currencies/celo.png',
@@ -25,12 +26,14 @@ const assetIcons = {
   DOGE: '/currencies/doge.png',
   DOT: '/currencies/dot.png',
   DYDX: '/currencies/dydx.png',
+  DYM: '/currencies/dym.png',
   ENJ: '/currencies/enj.png',
   EOS: '/currencies/eos.png',
   ETC: '/currencies/etc.png',
   ETH: '/currencies/eth.png',
   FIL: '/currencies/fil.png',
   ICP: '/currencies/icp.png',
+  JUP: '/currencies/jup.png',
   LDO: '/currencies/ldo.png',
   LINK: '/currencies/link.png',
   LTC: '/currencies/ltc.png',
@@ -61,6 +64,7 @@ const assetIcons = {
   XTZ: '/currencies/xtz.png',
   YFI: '/currencies/yfi.png',
   ZEC: '/currencies/zec.png',
+  ZETA: '/currencies/zeta.png',
   ZRX: '/currencies/zrx.png',
 } as const;
 

src/components/Button.tsx

@@ -103,14 +103,14 @@ const buttonActionVariants = {
 
   [ButtonAction.Create]: css`
     --button-textColor: var(--color-text-button);
-    --button-backgroundColor: var(--color-success);
+    --button-backgroundColor: var(--color-green);
     --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-backgroundColor: var(--color-error);
+    --button-backgroundColor: var(--color-red);
     --button-border: solid var(--border-width) var(--color-border-white);
     --button-hover-filter: brightness(var(--hover-filter-variant));
   `,
@@ -122,7 +122,7 @@ const buttonActionVariants = {
   `,
 
   [ButtonAction.Reset]: css`
-    --button-textColor: var(--color-error);
+    --button-textColor: var(--color-red);
     --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/ContentSectionHeader.tsx

@@ -6,6 +6,7 @@ import { layoutMixins } from '@/styles/layoutMixins';
 type ElementProps = {
   title: string;
   subtitle?: React.ReactNode;
+  slotLeft?: React.ReactNode;
   slotRight?: React.ReactNode;
 };
 
@@ -16,14 +17,16 @@ type StyleProps = {
 export const ContentSectionHeader = ({
   title,
   subtitle,
+  slotLeft,
   slotRight,
   className,
 }: ElementProps & StyleProps) => (
   <Styled.ContentSectionHeader className={className}>
-    <div>
+    {slotLeft}
+    <Styled.Header>
       {title && <h3>{title}</h3>}
       {subtitle && <p>{subtitle}</p>}
-    </div>
+    </Styled.Header>
     {slotRight}
   </Styled.ContentSectionHeader>
 );
@@ -40,9 +43,15 @@ Styled.ContentSectionHeader = styled.header<StyleProps>`
 
   padding: 1rem var(--header-horizontal-padding);
 
-  > div {
+  @media ${breakpoints.tablet} {
-    ${layoutMixins.column}
+    flex-wrap: wrap;
+    --header-horizontal-padding: 1.25rem;
   }
+`;
+
+Styled.Header = styled.div`
+  ${layoutMixins.column}
+  flex: 1;
 
   h3 {
     color: var(--color-text-2);
@@ -54,9 +63,4 @@ Styled.ContentSectionHeader = styled.header<StyleProps>`
     font: var(--font-small-book);
     margin-top: 0.25rem;
   }
-
-  @media ${breakpoints.tablet} {
-    flex-wrap: wrap;
-    --header-horizontal-padding: 1.25rem;
-  }
 `;

src/components/Details.stories.tsx

@@ -7,35 +7,50 @@ import { StoryWrapper } from '.ladle/components';
 import styled, { type AnyStyledComponent } from 'styled-components';
 import { layoutMixins } from '@/styles/layoutMixins';
 
-export const DetailsStory: Story<Parameters<typeof Details>> = () => (
+export const DetailsStory: Story<Parameters<typeof Details>[0]> = (args) => (
   <StoryWrapper>
     <Styled.Resizable>
-      <Details
+      <Details {...args} />
-        items={[
-          {
-            key: 'item-1',
-            label: 'Item 1',
-            tooltip: 'leverage',
-            value: 'Value 1',
-          },
-          {
-            key: 'item-2',
-            label: 'Really really really long item name 2',
-            tooltip: 'liquidation-price',
-            value: 'Value 2',
-          },
-          {
-            key: 'item-3',
-            label: 'Item 3',
-            tooltip: 'realized-pnl',
-            value: 'Value 3',
-          },
-        ]}
-      />
     </Styled.Resizable>
   </StoryWrapper>
 );
 
+DetailsStory.args = {
+  items: [
+    {
+      key: 'item-1',
+      label: 'Item 1',
+      tooltip: 'leverage',
+      value: 'Value 1',
+    },
+    {
+      key: 'item-2',
+      label: 'Really really really long item name 2',
+      tooltip: 'liquidation-price',
+      value: 'Value 2',
+    },
+    {
+      key: 'item-3',
+      label: 'Item 3',
+      tooltip: 'realized-pnl',
+      value: 'Value 3',
+    },
+  ],
+  showSubitems: false,
+  isLoading: false,
+  withOverflow: false,
+  withSeparators: false,
+};
+
+DetailsStory.argTypes = {
+  justifyItems: { options: ['start', 'end'], control: { type: 'select' }, defaultValue: 'start' },
+  layout: {
+    options: ['column', 'row', 'rowColumns', 'grid', 'stackColumn'],
+    control: { type: 'select' },
+    defaultValue: 'column',
+  },
+};
+
 const Styled: Record<string, AnyStyledComponent> = {};
 
 Styled.Resizable = styled.section`

src/components/Details.tsx

@@ -133,6 +133,7 @@ const detailsLayoutVariants = {
   row: css`
     ${layoutMixins.row}
     align-self: stretch;
+    white-space: nowrap;
   `,
 
   rowColumns: css`
@@ -159,12 +160,16 @@ const itemLayoutVariants: Record<string, FlattenInterpolation<ThemeProps<any>>>
 
     ${layoutMixins.spacedRow}
     gap: 0.5rem;
+    align-items: start;
+    padding: 0.5rem 0;
 
     min-height: var(--details-item-height);
 
-    > :last-child {
+    > :first-child > abbr {
-      align-self: stretch;
+      min-width: auto;
+    }
 
+    > :last-child {
       ${layoutMixins.row}
       ${layoutMixins.stickyRight}
 
@@ -217,8 +222,6 @@ Styled.Details = styled.dl<{
   --details-grid-numColumns: 2;
 
   ${({ layout }) => layout && detailsLayoutVariants[layout]}
-
-  white-space: nowrap;
 `;
 
 Styled.Item = styled.div<{
@@ -231,7 +234,7 @@ Styled.Item = styled.div<{
   ${({ justifyItems }) =>
     justifyItems === 'end' &&
     css`
-      &:nth-child(even) {
+      > :nth-child(even) {
         justify-items: end;
         text-align: end;
       }
@@ -243,6 +246,7 @@ Styled.Item = styled.div<{
     {
       column: css`
         &:not(:hover) > :first-child {
+          white-space: nowrap;
           overflow-x: hidden;
           text-overflow: ellipsis;
         }

src/components/DetailsDialog.tsx

@@ -26,7 +26,7 @@ export const DetailsDialog = ({ slotIcon, title, items, slotFooter, setIsOpen }:
       placement={isTablet ? DialogPlacement.Default : DialogPlacement.Sidebar}
     >
       <Styled.Content>
-        <Styled.Details withSeparators items={items} />
+        <Styled.Details withSeparators justifyItems="end" items={items} />
 
         <Styled.Footer>{slotFooter}</Styled.Footer>
       </Styled.Content>

src/components/DropdownMenu.stories.tsx

@@ -4,8 +4,18 @@ import { DropdownMenu } from '@/components/DropdownMenu';
 
 import { StoryWrapper } from '.ladle/components';
 
-export const DropdownMenuStory: Story<Parameters<typeof DropdownMenu>> = (args) => {
+export const DropdownMenuStory: Story<Parameters<typeof DropdownMenu>[0]> = (args) => {
-  const exampleItems = [
+  return (
+    <StoryWrapper>
+      <DropdownMenu {...args}>
+        <span>Menu</span>
+      </DropdownMenu>
+    </StoryWrapper>
+  );
+};
+
+DropdownMenuStory.args = {
+  items: [
     {
       value: '0',
       label: 'Item 0',
@@ -29,19 +39,9 @@ export const DropdownMenuStory: Story<Parameters<typeof DropdownMenu>> = (args)
       onSelect: () => alert('Item 3 action'),
       highlightColor: 'destroy',
     },
-  ];
+  ],
-
-  return (
-    <StoryWrapper>
-      <DropdownMenu {...args} items={exampleItems}>
-        <span>Menu</span>
-      </DropdownMenu>
-    </StoryWrapper>
-  );
 };
 
-DropdownMenuStory.args = {};
-
 DropdownMenuStory.argTypes = {
   align: {
     options: ['start', 'center', 'end'],

src/components/DropdownMenu.tsx

@@ -91,10 +91,10 @@ Styled.Item = styled(Item)<{ $highlightColor: 'accent' | 'create' | 'destroy' }>
         --item-highlighted-textColor: var(--color-accent);
       `,
       ['create']: `
-        --item-highlighted-textColor: var(--color-success);
+        --item-highlighted-textColor: var(--color-green);
       `,
       ['destroy']: `
-        --item-highlighted-textColor: var(--color-error);
+        --item-highlighted-textColor: var(--color-red);
       `,
     }[$highlightColor])}
 

src/components/DropdownSelectMenu.stories.tsx

@@ -28,21 +28,22 @@ const exampleItems = [
   },
 ];
 
-export const DropdownSelectMenuStory: Story<Parameters<typeof DropdownSelectMenu>> = (args) => {
+export const DropdownSelectMenuStory: Story<
+  Pick<Parameters<typeof DropdownSelectMenu>[0], 'items' | 'align' | 'sideOffset' | 'disabled'>
+> = (args) => {
   const [item, setItem] = useState(exampleItems[0].value);
   return (
     <StoryWrapper>
-      <DropdownSelectMenu
+      <DropdownSelectMenu value={item} onValueChange={(value) => setItem(value)} {...args} />
-        items={exampleItems}
-        value={item}
-        onValueChange={(value) => setItem(value)}
-        {...args}
-      />
     </StoryWrapper>
   );
 };
 
-DropdownSelectMenuStory.args = {};
+DropdownSelectMenuStory.args = {
+  items: exampleItems,
+  sideOffset: 1,
+  disabled: false,
+};
 
 DropdownSelectMenuStory.argTypes = {
   align: {

src/components/Icon.stories.tsx

@@ -4,7 +4,7 @@ import { Icon, IconName } from '@/components/Icon';
 
 import { StoryWrapper } from '.ladle/components';
 
-export const IconStory: Story<Parameters<typeof Icon>> = (args) => {
+export const IconStory: Story<Parameters<typeof Icon>[0]> = (args) => {
   return (
     <StoryWrapper>
       <Icon {...args} />

src/components/Icon.tsx

@@ -25,6 +25,7 @@ import {
   CoinsIcon,
   CommentIcon,
   CopyIcon,
+  CurrencySignIcon,
   DepositIcon,
   DepthChartIcon,
   DiscordIcon,
@@ -35,6 +36,7 @@ import {
   FundingChartIcon,
   GearIcon,
   GiftboxIcon,
+  GovernanceIcon,
   HelpCircleIcon,
   HideIcon,
   HistoryIcon,
@@ -70,6 +72,7 @@ import {
   StarIcon,
   SunIcon,
   TerminalIcon,
+  TokenIcon,
   TradeIcon,
   TransferIcon,
   TriangleIcon,
@@ -103,6 +106,7 @@ export enum IconName {
   Coins = 'Coins',
   Comment = 'Comment',
   Copy = 'Copy',
+  CurrencySign = 'CurrencySign',
   Deposit = 'Deposit',
   DepthChart = 'DepthChart',
   Discord = 'Discord',
@@ -113,6 +117,7 @@ export enum IconName {
   FundingChart = 'FundingChart',
   Gear = 'Gear',
   Giftbox = 'Giftbox',
+  Governance = 'Governance',
   HelpCircle = 'HelpCircle',
   Hide = 'Hide',
   History = 'History',
@@ -149,6 +154,7 @@ export enum IconName {
   Sun = 'Sun',
   Terminal = 'Terminal',
   TogglesMenu = 'TogglesMenu',
+  Token = 'Token',
   Trade = 'Trade',
   Transfer = 'Transfer',
   Triangle = 'Triangle',
@@ -182,6 +188,7 @@ const icons = {
   [IconName.Coins]: CoinsIcon,
   [IconName.Comment]: CommentIcon,
   [IconName.Copy]: CopyIcon,
+  [IconName.CurrencySign]: CurrencySignIcon,
   [IconName.Deposit]: DepositIcon,
   [IconName.DepthChart]: DepthChartIcon,
   [IconName.Discord]: DiscordIcon,
@@ -192,6 +199,7 @@ const icons = {
   [IconName.FundingChart]: FundingChartIcon,
   [IconName.Gear]: GearIcon,
   [IconName.Giftbox]: GiftboxIcon,
+  [IconName.Governance]: GovernanceIcon,
   [IconName.HelpCircle]: HelpCircleIcon,
   [IconName.Hide]: HideIcon,
   [IconName.History]: HistoryIcon,
@@ -227,6 +235,7 @@ const icons = {
   [IconName.Sun]: SunIcon,
   [IconName.Terminal]: TerminalIcon,
   [IconName.TogglesMenu]: TogglesMenuIcon,
+  [IconName.Token]: TokenIcon,
   [IconName.Trade]: TradeIcon,
   [IconName.Transfer]: TransferIcon,
   [IconName.Triangle]: TriangleIcon,

src/components/Link.stories.tsx

@@ -6,7 +6,7 @@ import { Link } from '@/components/Link';
 import { StoryWrapper } from '.ladle/components';
 import { layoutMixins } from '@/styles/layoutMixins';
 
-export const LinkStory: Story<Parameters<typeof Link>> = (args) => {
+export const LinkStory: Story<Parameters<typeof Link>[0]> = (args) => {
   return (
     <StoryWrapper>
       <Styled.Container>

src/components/NavigationMenu.stories.tsx

@@ -5,8 +5,24 @@ import { HashRouter } from 'react-router-dom';
 
 import { StoryWrapper } from '.ladle/components';
 
-export const NavigationMenuStory: Story<Parameters<typeof NavigationMenu>> = (args) => {
+export const NavigationMenuStory: Story<
-  const exampleItems = [
+  Pick<Parameters<typeof NavigationMenu>[0], 'items' | 'orientation' | 'submenuPlacement'>
+> = (args) => {
+  return (
+    <StoryWrapper>
+      <HashRouter
+        children={
+          <NavigationMenu {...args}>
+            <span>Menu</span>
+          </NavigationMenu>
+        }
+      />
+    </StoryWrapper>
+  );
+};
+
+NavigationMenuStory.args = {
+  items: [
     {
       group: 'navigation',
       groupLabel: 'Views',
@@ -93,23 +109,9 @@ export const NavigationMenuStory: Story<Parameters<typeof NavigationMenu>> = (ar
         },
       ],
     },
-  ];
+  ],
-
-  return (
-    <StoryWrapper>
-      <HashRouter
-        children={
-          <NavigationMenu {...args} items={exampleItems}>
-            <span>Menu</span>
-          </NavigationMenu>
-        }
-      />
-    </StoryWrapper>
-  );
 };
 
-NavigationMenuStory.args = {};
-
 NavigationMenuStory.argTypes = {
   orientation: {
     options: ['vertical', 'horizontal'],

src/components/SearchInput.stories.tsx

@@ -7,7 +7,7 @@ import { StoryWrapper } from '.ladle/components';
 import { layoutMixins } from '@/styles/layoutMixins';
 import { InputType } from './Input';
 
-export const SearchInputStory: Story<Parameters<typeof SearchInput>> = (args) => (
+export const SearchInputStory: Story<Parameters<typeof SearchInput>[0]> = (args) => (
   <StoryWrapper>
     <Styled.Container>
       <SearchInput placeholder="Search something..." type={InputType.Search} />

src/components/SearchSelectMenu.stories.tsx

@@ -6,7 +6,7 @@ import { SearchSelectMenu } from '@/components/SearchSelectMenu';
 
 import { StoryWrapper } from '.ladle/components';
 
-export const SearchSelectMenuStory: Story<Parameters<typeof SearchSelectMenu>> = (args) => {
+export const SearchSelectMenuStory: Story<Parameters<typeof SearchSelectMenu>[0]> = (args) => {
   const [selectedItem, setSelectedItem] = useState<string>();
 
   const exampleItems = [
@@ -24,10 +24,7 @@ export const SearchSelectMenuStory: Story<Parameters<typeof SearchSelectMenu>> =
   return (
     <StoryWrapper>
       <Container>
-        <SearchSelectMenu
+        <SearchSelectMenu {...args} items={exampleItems}>
-          {...args}
-          items={exampleItems}
-        >
           {!selectedItem ? <span>Search and Select</span> : <span>{selectedItem}</span>}
         </SearchSelectMenu>
       </Container>

src/components/SelectMenu.stories.tsx

@@ -26,7 +26,7 @@ const exampleItems: { value: string; label: string }[] = [
   },
 ];
 
-export const SelectMenuStory: Story<Parameters<typeof SelectMenu>> = (args) => {
+export const SelectMenuStory: Story<Parameters<typeof SelectMenu>[0]> = (args) => {
   const [value, setValue] = useState(exampleItems[0].value);
   const [value2, setValue2] = useState(exampleItems[2].value);
 

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

@@ -13,29 +13,11 @@ enum TabItem {
   Item3 = 'Item3',
 }
 
-const TabItems = [
+export const TabsStory: Story<Parameters<typeof Tabs>[0]> = (args) => {
-  {
-    value: TabItem.Item1,
-    label: 'Item 1',
-    content: <div>Item 1 Content</div>,
-  },
-  {
-    value: TabItem.Item2,
-    label: 'Item 2',
-    content: <div>Item 2 Content</div>,
-  },
-  {
-    value: TabItem.Item3,
-    label: 'Item 3',
-    content: <div>Item 3 Content</div>,
-  },
-];
-
-export const TabsStory: Story<Parameters<typeof Tabs>> = (args) => {
   return (
     <StoryWrapper>
       <Styled.Container>
-        <Tabs items={TabItems} {...args} />
+        <Tabs {...args} />
       </Styled.Container>
     </StoryWrapper>
   );
@@ -43,6 +25,23 @@ export const TabsStory: Story<Parameters<typeof Tabs>> = (args) => {
 
 TabsStory.args = {
   fullWidthTabs: false,
+  items: [
+    {
+      value: TabItem.Item1,
+      label: 'Item 1',
+      content: <div>Item 1 Content</div>,
+    },
+    {
+      value: TabItem.Item2,
+      label: 'Item 2',
+      content: <div>Item 2 Content</div>,
+    },
+    {
+      value: TabItem.Item3,
+      label: 'Item 3',
+      content: <div>Item 3 Content</div>,
+    },
+  ],
 };
 
 TabsStory.argTypes = {

src/components/Tag.stories.tsx

@@ -1,10 +1,10 @@
 import type { Story } from '@ladle/react';
 
-import { Tag } from '@/components/Tag';
+import { Tag, TagSign, TagSize, TagType } from '@/components/Tag';
 
 import { StoryWrapper } from '.ladle/components';
 
-export const TagStory: Story<Parameters<typeof Tag>> = (args) => {
+export const TagStory: Story<Parameters<typeof Tag>[0]> = (args) => {
   return (
     <StoryWrapper>
       <Tag {...args} />
@@ -14,4 +14,28 @@ export const TagStory: Story<Parameters<typeof Tag>> = (args) => {
 
 TagStory.args = {
   children: 'USDC',
+  isHighlighted: false,
+};
+
+TagStory.argTypes = {
+  size: {
+    options: Object.values(TagSize),
+    control: { type: 'select' },
+    defaultValue: TagSize.Small,
+  },
+  type: {
+    options: [...Object.values(TagType), undefined],
+    control: { type: 'select' },
+    defaultValue: undefined,
+  },
+  sign: {
+    options: [...Object.values(TagSign), undefined],
+    control: { type: 'select' },
+    defaultValue: undefined,
+  },
+  isHighlighted: {
+    options: [true, false],
+    control: { type: 'select' },
+    defaultValue: false,
+  },
 };

src/components/Tag.tsx

@@ -1,20 +1,20 @@
 import styled, { css } from 'styled-components';
 
 export enum TagSize {
-  Small,
+  Small = 'Small',
-  Medium,
+  Medium = 'Medium',
 }
 
 export enum TagType {
-  Asset,
+  Asset = 'Asset',
-  Side,
+  Side = 'Side',
-  Number,
+  Number = 'Number',
 }
 
 export enum TagSign {
-  Positive,
+  Positive = 'Positive',
-  Negative,
+  Negative = 'Negative',
-  Neutral,
+  Neutral = 'Neutral',
 }
 
 type StyleProps = {
@@ -76,5 +76,6 @@ export const Tag = styled.span<StyleProps>`
     isHighlighted &&
     css`
       background-color: var(--color-accent);
+      color: var(--color-text-button);
     `}
 `;

src/components/ToggleButton.stories.tsx

@@ -5,7 +5,7 @@ import { ButtonShape, ButtonSize } from '@/constants/buttons';
 import { StoryWrapper } from '.ladle/components';
 import { ToggleButton } from './ToggleButton';
 
-export const ToggleButtonStory: Story<Parameters<typeof ToggleButton>> = (args) => (
+export const ToggleButtonStory: Story<Parameters<typeof ToggleButton>[0]> = (args) => (
   <StoryWrapper>
     <ToggleButton {...args}>Toggle me</ToggleButton>
   </StoryWrapper>

src/components/ToggleGroup.stories.tsx

@@ -21,16 +21,22 @@ const ToggleGroupItems = [
   },
 ];
 
-export const ToggleGroupStory: Story<Parameters<typeof ToggleGroup>> = (args) => {
+export const ToggleGroupStory: Story<
+  Pick<Parameters<typeof ToggleGroup>[0], 'items' | 'size' | 'shape'>
+> = (args) => {
   const [value, setValue] = useState('0');
 
   return (
     <StoryWrapper>
-      <ToggleGroup items={ToggleGroupItems} value={value} onValueChange={setValue} {...args} />
+      <ToggleGroup value={value} onValueChange={setValue} {...args} />
     </StoryWrapper>
   );
 };
 
+ToggleGroupStory.args = {
+  items: ToggleGroupItems,
+};
+
 ToggleGroupStory.argTypes = {
   size: {
     options: Object.values(ButtonSize),

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-green);
   }
 `;
 
@@ -125,7 +125,7 @@ Styled.CancelButton = styled(Styled.IconButton)`
   --button-backgroundColor: hsla(296, 16%, 18%, 1);
 
   svg {
-    color: var(--color-error);
+    color: var(--color-red);
     width: 0.8em;
     height: 0.8em;
 

src/components/WithLabel.stories.tsx

@@ -9,7 +9,7 @@ import { StoryWrapper } from '.ladle/components';
 import styled, { type AnyStyledComponent } from 'styled-components';
 import { layoutMixins } from '@/styles/layoutMixins';
 
-export const WithLabelStory: Story<Parameters<typeof WithLabel>> = (args) => {
+export const WithLabelStory: Story<Parameters<typeof WithLabel>[0]> = (args) => {
   const [firstName, setFirstName] = useState('');
   const [lastName, setLastName] = useState('');
 

src/components/WithReceipt.stories.tsx

@@ -3,32 +3,29 @@ import type { Story } from '@ladle/react';
 import { Button } from '@/components/Button';
 
 import { WithReceipt } from '@/components/WithReceipt';
-import { type DetailsItem } from './Details';
 
 import { StoryWrapper } from '.ladle/components';
 
-const items: DetailsItem[] = [
+export const WithReceiptStory: Story<Omit<Parameters<typeof WithReceipt>[0], 'slotReceipt'>> = (
-  {
+  args
-    key: 'item-1',
+) => (
-    label: 'Item 1',
-    value: 'Value 1',
-  },
-  {
-    key: 'item-2',
-    label: 'Item 2',
-    value: 'Value 2',
-  },
-  {
-    key: 'item-3',
-    label: 'Item 3',
-    value: 'Value 3',
-  },
-];
-
-export const WithReceiptStory: Story<Parameters<WithReceipt>> = (args) => (
   <StoryWrapper>
     <div style={{ width: 200 }}>
-      <WithReceipt {...args}>
+      <WithReceipt
+        slotReceipt={
+          <div
+            style={{
+              padding: '1rem',
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+            }}
+          >
+            Receipt Content
+          </div>
+        }
+        {...args}
+      >
         <Button>Hello there</Button>
       </WithReceipt>
     </div>
@@ -36,7 +33,7 @@ export const WithReceiptStory: Story<Parameters<WithReceipt>> = (args) => (
 );
 
 WithReceiptStory.args = {
-  items,
+  hideReceipt: false,
 };
 
 WithReceiptStory.argTypes = {

src/components/WithSidebar.tsx

@@ -106,8 +106,6 @@ Styled.Container = styled.div`
   --stickyArea1-leftGap: var(--border-width);
   min-height: var(--stickyArea-height);
 
-  ${layoutMixins.withOuterAndInnerBorders}
-
   display: grid;
   grid-template: var(--withSidebar-gridTemplate);
 `;
@@ -120,6 +118,7 @@ Styled.Side = styled.aside`
   ${layoutMixins.sticky}
   max-height: var(--stickyArea-height);
   backdrop-filter: none;
+  background-color: var(--color-layer-2);
 
   ${layoutMixins.stack}
 `;

src/components/WithTooltip.stories.tsx

@@ -6,7 +6,7 @@ import { tooltipStrings } from '@/constants/tooltips';
 
 import { StoryWrapper } from '.ladle/components';
 
-export const Tooltip: Story<Parameters<typeof WithTooltip>> = (args) => {
+export const Tooltip: Story<Parameters<typeof WithTooltip>[0]> = (args) => {
   return (
     <StoryWrapper>
       <WithTooltip {...args}>

src/constants/dialogs.ts

@@ -5,6 +5,7 @@ export enum DialogTypes {
   DisplaySettings = 'DisplaySettings',
   ExchangeOffline = 'ExchangeOffline',
   ExternalLink = 'ExternalLink',
+  ExternalNavStride = 'ExternalNavStride',
   FillDetails = 'FillDetails',
   Help = 'Help',
   ExternalNavKeplr = 'ExternalNavKeplr',

src/constants/numbers.ts

@@ -22,4 +22,5 @@ export enum NumberSign {
 
 // Deposit/Withdraw
 export const MAX_CCTP_TRANSFER_AMOUNT = 1_000_000;
+export const MIN_CCTP_TRANSFER_AMOUNT = 10;
 export const MAX_PRICE_IMPACT = 0.02; // 2%

src/constants/potentialMarkets.ts

@@ -1,42 +1,9 @@
-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;
@@ -56,30 +23,3 @@ export type PotentialMarketItem = {
 };
 
 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

@@ -29,6 +29,12 @@ export enum HistoryRoute {
   Payments = 'payments',
 }
 
+export enum TokenRoute {
+  TradingRewards = 'trading-rewards',
+  StakingRewards = 'staking-rewards',
+  Governance = 'governance',
+}
+
 export enum MobileSettingsRoute {
   Language = 'language',
   Notifications = 'notifications',

src/constants/styles/colors.ts

@@ -1,11 +1,20 @@
-import { AppColorMode } from '@/state/configs';
+import type { ThemeName } from 'public/tradingview/charting_library';
+
+import { AppColorMode, AppTheme } from '@/state/configs';
+
+export const THEME_NAMES: Record<AppTheme, ThemeName> = {
+  [AppTheme.Classic]: 'Classic',
+  [AppTheme.Dark]: 'Dark',
+  [AppTheme.Light]: 'Light',
+};
 
 export type Theme = {
   [AppColorMode.GreenUp]: ThemeColorBase;
   [AppColorMode.RedUp]: ThemeColorBase;
 };
 
-export type ThemeColorBase = LayerColors &
+export type ThemeColorBase = BaseColors &
+  LayerColors &
   BorderColors &
   TextColors &
   GradientColors &
@@ -17,6 +26,12 @@ export type ThemeColorBase = LayerColors &
   ComponentColors &
   Filters;
 
+type BaseColors = {
+  white: string;
+  green: string;
+  red: string;
+};
+
 type LayerColors = {
   layer0: string;
   layer1: string;
@@ -86,7 +101,6 @@ type IconColors = {
 type ComponentColors = {
   inputBackground: string;
   popoverBackground: string;
-  switchThumbActiveBackground: string;
   toggleBackground: string;
   tooltipBackground: string;
 };

src/constants/trade.ts

@@ -4,7 +4,6 @@ import { AlertType } from '@/constants/alerts';
 import { STRING_KEYS } from '@/constants/localization';
 import { TimeUnitShort } from '@/constants/time';
 
-// TODO: rename to OrderType
 export enum TradeTypes {
   MARKET = 'MARKET',
   LIMIT = 'LIMIT',
@@ -15,6 +14,16 @@ export enum TradeTypes {
   TRAILING_STOP = 'TRAILING_STOP',
 }
 
+enum ClosingTradeTypes {
+  LIQUIDATED = 'LIQUIDATED',
+  LIQUIDATION = 'LIQUIDATION',
+  OFFSETTING = 'OFFSETTING',
+  DELEVERAGED = 'DELEVERAGED',
+  FINAL_SETTLEMENT = 'FINAL_SETTLEMENT',
+}
+
+export type OrderType = TradeTypes | ClosingTradeTypes;
+
 export enum TimeInForceOptions {
   GTT = 'GTT',
   FOK = 'FOK',
@@ -40,49 +49,74 @@ export const POSITION_SIDE_STRINGS: Record<PositionSide, string> = {
   [PositionSide.Short]: STRING_KEYS.SHORT_POSITION_SHORT,
 };
 
-export const TRADE_TYPE_STRINGS: Record<
+export const ORDER_TYPE_STRINGS: Record<
-  TradeTypes,
+  OrderType,
   {
-    tradeTypeKeyShort: string;
+    orderTypeKeyShort: string;
-    tradeTypeKey: string;
+    orderTypeKey: string;
-    descriptionKey: string;
+    descriptionKey: string | null;
   }
 > = {
   [TradeTypes.LIMIT]: {
-    tradeTypeKeyShort: STRING_KEYS.LIMIT_ORDER_SHORT,
+    orderTypeKeyShort: STRING_KEYS.LIMIT_ORDER_SHORT,
-    tradeTypeKey: STRING_KEYS.LIMIT_ORDER,
+    orderTypeKey: STRING_KEYS.LIMIT_ORDER,
     descriptionKey: STRING_KEYS.LIMIT_ORDER_DESCRIPTION,
   },
   [TradeTypes.MARKET]: {
-    tradeTypeKeyShort: STRING_KEYS.MARKET_ORDER_SHORT,
+    orderTypeKeyShort: STRING_KEYS.MARKET_ORDER_SHORT,
-    tradeTypeKey: STRING_KEYS.MARKET_ORDER,
+    orderTypeKey: STRING_KEYS.MARKET_ORDER,
     descriptionKey: STRING_KEYS.MARKET_ORDER_DESCRIPTION,
   },
   [TradeTypes.STOP_LIMIT]: {
-    tradeTypeKeyShort: STRING_KEYS.STOP_LIMIT,
+    orderTypeKeyShort: STRING_KEYS.STOP_LIMIT,
-    tradeTypeKey: STRING_KEYS.STOP_LIMIT,
+    orderTypeKey: STRING_KEYS.STOP_LIMIT,
     descriptionKey: STRING_KEYS.STOP_LIMIT_DESCRIPTION,
   },
   [TradeTypes.STOP_MARKET]: {
-    tradeTypeKeyShort: STRING_KEYS.STOP_MARKET,
+    orderTypeKeyShort: STRING_KEYS.STOP_MARKET,
-    tradeTypeKey: STRING_KEYS.STOP_MARKET,
+    orderTypeKey: STRING_KEYS.STOP_MARKET,
     descriptionKey: STRING_KEYS.STOP_MARKET_DESCRIPTION,
   },
   [TradeTypes.TAKE_PROFIT]: {
-    tradeTypeKeyShort: STRING_KEYS.TAKE_PROFIT_LIMIT,
+    orderTypeKeyShort: STRING_KEYS.TAKE_PROFIT_LIMIT,
-    tradeTypeKey: STRING_KEYS.TAKE_PROFIT_LIMIT,
+    orderTypeKey: STRING_KEYS.TAKE_PROFIT_LIMIT,
     descriptionKey: STRING_KEYS.TAKE_PROFIT_LIMIT_DESCRIPTION,
   },
   [TradeTypes.TAKE_PROFIT_MARKET]: {
-    tradeTypeKeyShort: STRING_KEYS.TAKE_PROFIT_MARKET,
+    orderTypeKeyShort: STRING_KEYS.TAKE_PROFIT_MARKET,
-    tradeTypeKey: STRING_KEYS.TAKE_PROFIT_MARKET,
+    orderTypeKey: STRING_KEYS.TAKE_PROFIT_MARKET,
     descriptionKey: STRING_KEYS.TAKE_PROFIT_MARKET_DESCRIPTION,
   },
   [TradeTypes.TRAILING_STOP]: {
-    tradeTypeKeyShort: STRING_KEYS.TRAILING_STOP,
+    orderTypeKeyShort: STRING_KEYS.TRAILING_STOP,
-    tradeTypeKey: STRING_KEYS.TRAILING_STOP,
+    orderTypeKey: STRING_KEYS.TRAILING_STOP,
     descriptionKey: STRING_KEYS.TRAILING_STOP_DESCRIPTION,
   },
+  [ClosingTradeTypes.LIQUIDATED]: {
+    orderTypeKeyShort: STRING_KEYS.LIQUIDATED,
+    orderTypeKey: STRING_KEYS.LIQUIDATED,
+    descriptionKey: null,
+  },
+  [ClosingTradeTypes.LIQUIDATION]: {
+    orderTypeKeyShort: STRING_KEYS.LIQUIDATION,
+    orderTypeKey: STRING_KEYS.LIQUIDATION,
+    descriptionKey: null,
+  },
+  [ClosingTradeTypes.OFFSETTING]: {
+    orderTypeKeyShort: STRING_KEYS.OFFSETTING,
+    orderTypeKey: STRING_KEYS.OFFSETTING,
+    descriptionKey: null,
+  },
+  [ClosingTradeTypes.DELEVERAGED]: {
+    orderTypeKeyShort: STRING_KEYS.DELEVERAGED,
+    orderTypeKey: STRING_KEYS.DELEVERAGED,
+    descriptionKey: null,
+  },
+  [ClosingTradeTypes.FINAL_SETTLEMENT]: {
+    orderTypeKeyShort: STRING_KEYS.FINAL_SETTLEMENT,
+    orderTypeKey: STRING_KEYS.FINAL_SETTLEMENT,
+    descriptionKey: null,
+  },
 };
 
 export const GOOD_TIL_TIME_TIMESCALE_STRINGS: Record<TimeUnitShort, string> = {

src/constants/tvchart.ts

@@ -0,0 +1,16 @@
+import { OrderSide } from '@dydxprotocol/v4-client-js';
+
+import type {
+  IChartingLibraryWidget,
+  IOrderLineAdapter,
+  IPositionLineAdapter,
+} from 'public/tradingview/charting_library';
+
+export type TvWidget = IChartingLibraryWidget & { _id?: string; _ready?: boolean };
+
+export type ChartLineType = OrderSide | 'position';
+
+export type ChartLine = {
+  line: IOrderLineAdapter | IPositionLineAdapter;
+  chartLineType: ChartLineType;
+};

src/constants/wallets.ts

@@ -40,6 +40,7 @@ export enum WalletErrorType {
   // General
   ChainMismatch,
   UserCanceled,
+  SwitchChainMethodMissing,
 
   // Non-Deterministic
   NonDeterministicWallet,

src/hooks/tradingView/index.ts

@@ -1,2 +1,4 @@
+export { useChartLines } from './useChartLines';
+export { useChartMarketAndResolution } from './useChartMarketAndResolution';
 export { useTradingView } from './useTradingView';
 export { useTradingViewTheme } from './useTradingViewTheme';

src/hooks/tradingView/useChartLines.ts

@@ -0,0 +1,209 @@
+import { useEffect, useState } from 'react';
+
+import { shallowEqual, useSelector } from 'react-redux';
+
+import { AbacusOrderStatus, ORDER_SIDES, SubaccountOrder } from '@/constants/abacus';
+import { STRING_KEYS } from '@/constants/localization';
+import { type OrderType, ORDER_TYPE_STRINGS } from '@/constants/trade';
+import type { ChartLine, TvWidget } from '@/constants/tvchart';
+
+import { useStringGetter } from '@/hooks';
+
+import { getCurrentMarketOrders, getCurrentMarketPositionData } from '@/state/accountSelectors';
+import { getAppTheme, getAppColorMode } from '@/state/configsSelectors';
+
+import { MustBigNumber } from '@/lib/numbers';
+import { getChartLineColors } from '@/lib/tradingView/utils';
+
+let chartLines: Record<string, ChartLine> = {};
+
+/**
+ * @description Hook to handle drawing chart lines
+ */
+
+export const useChartLines = ({
+  tvWidget,
+  displayButton,
+  isChartReady,
+}: {
+  tvWidget: TvWidget | null;
+  displayButton: HTMLElement | null;
+  isChartReady?: boolean;
+}) => {
+  const [showOrderLines, setShowOrderLines] = useState(false);
+
+  const stringGetter = useStringGetter();
+
+  const appTheme = useSelector(getAppTheme);
+  const appColorMode = useSelector(getAppColorMode);
+
+  const currentMarketPositionData = useSelector(getCurrentMarketPositionData, shallowEqual);
+  const currentMarketOrders: SubaccountOrder[] = useSelector(getCurrentMarketOrders, shallowEqual);
+
+  useEffect(() => {
+    if (isChartReady && displayButton) {
+      displayButton.onclick = () => {
+        const newShowOrderLinesState = !showOrderLines;
+        if (newShowOrderLinesState) {
+          displayButton?.classList?.add('order-lines-active');
+        } else {
+          displayButton?.classList?.remove('order-lines-active');
+        }
+        setShowOrderLines(newShowOrderLinesState);
+      };
+    }
+  }, [isChartReady, showOrderLines]);
+
+  useEffect(() => {
+    if (tvWidget && isChartReady) {
+      tvWidget.onChartReady(() => {
+        tvWidget.chart().dataReady(() => {
+          if (showOrderLines) {
+            drawOrderLines();
+            drawPositionLine();
+          } else {
+            deleteChartLines();
+          }
+        });
+      });
+    }
+  }, [isChartReady, showOrderLines, currentMarketPositionData, currentMarketOrders]);
+
+  const drawPositionLine = () => {
+    if (!currentMarketPositionData) return;
+
+    const entryPrice = currentMarketPositionData.entryPrice?.current;
+    const size = currentMarketPositionData.size?.current;
+
+    const key = currentMarketPositionData.id;
+    const price = MustBigNumber(entryPrice).toNumber();
+
+    const maybePositionLine = chartLines[key]?.line;
+    const shouldShow = size && size !== 0;
+
+    if (!shouldShow) {
+      if (maybePositionLine) {
+        maybePositionLine.remove();
+        delete chartLines[key];
+        return;
+      }
+    } else {
+      const quantity = size.toString();
+
+      if (maybePositionLine) {
+        if (maybePositionLine.getQuantity() !== quantity) {
+          maybePositionLine.setQuantity(quantity);
+        }
+        if (maybePositionLine.getPrice() !== price) {
+          maybePositionLine.setPrice(price);
+        }
+      } else {
+        const positionLine = tvWidget
+          ?.chart()
+          .createPositionLine({ disableUndo: false })
+          .setText(stringGetter({ key: STRING_KEYS.ENTRY_PRICE_SHORT }))
+          .setPrice(price)
+          .setQuantity(quantity);
+
+        if (positionLine) {
+          const chartLine = { line: positionLine, chartLineType: 'position' };
+          setLineColors({ chartLine: chartLine });
+          chartLines[key] = chartLine;
+        }
+      }
+    }
+  };
+
+  const drawOrderLines = () => {
+    if (!currentMarketOrders) return;
+
+    currentMarketOrders.forEach(
+      ({
+        id,
+        type,
+        status,
+        side,
+        cancelReason,
+        remainingSize,
+        size,
+        triggerPrice,
+        price,
+        trailingPercent,
+      }) => {
+        const key = id;
+        const quantity = (remainingSize ?? size).toString();
+
+        const orderType = type.rawValue as OrderType;
+        const orderLabel = stringGetter({
+          key: ORDER_TYPE_STRINGS[orderType].orderTypeKey,
+        });
+        const orderString = trailingPercent ? `${orderLabel} ${trailingPercent}%` : orderLabel;
+
+        const shouldShow =
+          !cancelReason &&
+          (status === AbacusOrderStatus.open || status === AbacusOrderStatus.untriggered);
+
+        const maybeOrderLine = chartLines[key]?.line;
+
+        if (!shouldShow) {
+          if (maybeOrderLine) {
+            maybeOrderLine.remove();
+            delete chartLines[key];
+            return;
+          }
+        } else {
+          if (maybeOrderLine) {
+            if (maybeOrderLine.getQuantity() !== quantity) {
+              maybeOrderLine.setQuantity(quantity);
+            }
+          } else {
+            const orderLine = tvWidget
+              ?.chart()
+              .createOrderLine({ disableUndo: false })
+              .setPrice(MustBigNumber(triggerPrice ?? price).toNumber())
+              .setQuantity(quantity)
+              .setText(orderString);
+
+            if (orderLine) {
+              const chartLine: ChartLine = {
+                line: orderLine,
+                chartLineType: ORDER_SIDES[side.name],
+              };
+              setLineColors({ chartLine: chartLine });
+              chartLines[key] = chartLine;
+            }
+          }
+        }
+      }
+    );
+  };
+
+  const deleteChartLines = () => {
+    Object.values(chartLines).forEach(({ line }) => {
+      line.remove();
+    });
+    chartLines = {};
+  };
+
+  const setLineColors = ({ chartLine }: { chartLine: ChartLine }) => {
+    const { line, chartLineType } = chartLine;
+    const { maybeQuantityColor, borderColor, backgroundColor, textColor, textButtonColor } =
+      getChartLineColors({
+        appTheme,
+        appColorMode,
+        chartLineType,
+      });
+
+    line
+      .setQuantityBorderColor(borderColor)
+      .setBodyBackgroundColor(backgroundColor)
+      .setBodyBorderColor(borderColor)
+      .setBodyTextColor(textColor)
+      .setQuantityTextColor(textButtonColor);
+
+    maybeQuantityColor &&
+      line.setLineColor(maybeQuantityColor).setQuantityBackgroundColor(maybeQuantityColor);
+  };
+
+  return { chartLines };
+};

src/hooks/tradingView/useChartMarketAndResolution.ts

@@ -0,0 +1,72 @@
+import { useEffect } from 'react';
+
+import { useDispatch, useSelector } from 'react-redux';
+
+import type { ResolutionString } from 'public/tradingview/charting_library';
+
+import { DEFAULT_RESOLUTION, RESOLUTION_CHART_CONFIGS } from '@/constants/candles';
+import { DEFAULT_MARKETID } from '@/constants/markets';
+import type { TvWidget } from '@/constants/tvchart';
+
+import { setTvChartResolution } from '@/state/perpetuals';
+import { getCurrentMarketId, getSelectedResolutionForMarket } from '@/state/perpetualsSelectors';
+
+/**
+ * @description Hook to handle changing markets and setting chart resolution
+ */
+
+export const useChartMarketAndResolution = ({
+  tvWidget,
+  isWidgetReady,
+  savedResolution,
+}: {
+  tvWidget: TvWidget | null;
+  isWidgetReady?: boolean;
+  savedResolution?: ResolutionString;
+}) => {
+  const dispatch = useDispatch();
+
+  const currentMarketId: string = useSelector(getCurrentMarketId) || DEFAULT_MARKETID;
+
+  const selectedResolution: string =
+    useSelector(getSelectedResolutionForMarket(currentMarketId)) || DEFAULT_RESOLUTION;
+
+  const chart = isWidgetReady ? tvWidget?.chart() : undefined;
+  const chartResolution = chart?.resolution?.();
+
+  /**
+   * @description Hook to handle changing markets - intentionally should avoid triggering on change of resolutions.
+   */
+  useEffect(() => {
+    if (currentMarketId && isWidgetReady) {
+      const resolution = savedResolution || selectedResolution;
+      tvWidget?.setSymbol(currentMarketId, resolution as ResolutionString, () => {});
+    }
+  }, [currentMarketId, isWidgetReady]);
+
+  /**
+   * @description Hook to handle changing chart resolution
+   */
+  useEffect(() => {
+    if (chartResolution) {
+      if (chartResolution !== selectedResolution) {
+        dispatch(setTvChartResolution({ marketId: currentMarketId, resolution: chartResolution }));
+      }
+
+      setVisibleRangeForResolution({ resolution: chartResolution });
+    }
+  }, [currentMarketId, chartResolution, selectedResolution]);
+
+  const setVisibleRangeForResolution = ({ resolution }: { resolution: ResolutionString }) => {
+    // Different resolutions have different timeframes to display data efficiently.
+    const { defaultRange } = RESOLUTION_CHART_CONFIGS[resolution];
+
+    // from/to values converted to epoch seconds
+    const newRange = {
+      from: (Date.now() - defaultRange) / 1000,
+      to: Date.now() / 1000,
+    };
+
+    tvWidget?.activeChart().setVisibleRange(newRange, { percentRightMargin: 10 });
+  };
+};

src/hooks/tradingView/useTradingView.ts

@@ -1,15 +1,19 @@
-import { useEffect } from 'react';
+import React, { useEffect } from 'react';
+
 import { shallowEqual, useSelector } from 'react-redux';
+
 import isEmpty from 'lodash/isEmpty';
 
 import { LanguageCode, ResolutionString, widget } from 'public/tradingview/charting_library';
 
 import { DEFAULT_RESOLUTION } from '@/constants/candles';
-import { SUPPORTED_LOCALE_BASE_TAGS } from '@/constants/localization';
+import { SUPPORTED_LOCALE_BASE_TAGS, STRING_KEYS } from '@/constants/localization';
 import { LocalStorageKey } from '@/constants/localStorage';
-import { useDydxClient, useLocalStorage } from '@/hooks';
+import type { TvWidget } from '@/constants/tvchart';
-import { store } from '@/state/_store';
 
+import { useDydxClient, useLocalStorage, useStringGetter } from '@/hooks';
+
+import { store } from '@/state/_store';
 import { getSelectedNetwork } from '@/state/appSelectors';
 import { getAppTheme, getAppColorMode } from '@/state/configsSelectors';
 import { getSelectedLocale } from '@/state/localizationSelectors';
@@ -23,14 +27,19 @@ import { getSavedResolution, getWidgetOptions, getWidgetOverrides } from '@/lib/
  */
 export const useTradingView = ({
   tvWidgetRef,
+  displayButtonRef,
   setIsChartReady,
 }: {
-  tvWidgetRef: React.MutableRefObject<any>;
+  tvWidgetRef: React.MutableRefObject<TvWidget | null>;
+  displayButtonRef: React.MutableRefObject<HTMLElement | null>;
   setIsChartReady: React.Dispatch<React.SetStateAction<boolean>>;
 }) => {
-  const marketId = useSelector(getCurrentMarketId);
+  const stringGetter = useStringGetter();
+
   const appTheme = useSelector(getAppTheme);
   const appColorMode = useSelector(getAppColorMode);
+
+  const marketId = useSelector(getCurrentMarketId);
   const marketIds = useSelector(getMarketIds, shallowEqual);
   const selectedLocale = useSelector(getSelectedLocale);
   const selectedNetwork = useSelector(getSelectedNetwork);
@@ -49,7 +58,6 @@ export const useTradingView = ({
       const widgetOptions = getWidgetOptions();
       const widgetOverrides = getWidgetOverrides({ appTheme, appColorMode });
       const options = {
-        // debug: true,
         ...widgetOptions,
         ...widgetOverrides,
         datafeed: getDydxDatafeed(store, getCandlesForDatafeed),
@@ -63,6 +71,19 @@ export const useTradingView = ({
       tvWidgetRef.current = tvChartWidget;
 
       tvWidgetRef.current.onChartReady(() => {
+        tvWidgetRef.current?.headerReady().then(() => {
+          if (displayButtonRef && tvWidgetRef.current) {
+            displayButtonRef.current = tvWidgetRef.current.createButton();
+            displayButtonRef.current.innerHTML = `<span>${stringGetter({
+              key: STRING_KEYS.ORDER_LINES,
+            })}</span> <div class="displayOrdersButton-toggle"></div>`;
+            displayButtonRef.current.setAttribute(
+              'title',
+              stringGetter({ key: STRING_KEYS.ORDER_LINES_TOOLTIP })
+            );
+          }
+        });
+
         tvWidgetRef?.current?.subscribe('onAutoSaveNeeded', () =>
           tvWidgetRef?.current?.save((chartConfig: object) => setTvChartConfig(chartConfig))
         );
@@ -72,6 +93,8 @@ export const useTradingView = ({
     }
 
     return () => {
+      displayButtonRef.current?.remove();
+      displayButtonRef.current = null;
       tvWidgetRef.current?.remove();
       tvWidgetRef.current = null;
       setIsChartReady(false);

src/hooks/tradingView/useTradingViewTheme.ts

@@ -1,12 +1,14 @@
 import { useEffect } from 'react';
+
 import { useSelector } from 'react-redux';
 
-import type { IChartingLibraryWidget, ThemeName } from 'public/tradingview/charting_library';
+import { THEME_NAMES } from '@/constants/styles/colors';
+import type { ChartLine, TvWidget } from '@/constants/tvchart';
 
 import { AppColorMode, AppTheme } from '@/state/configs';
 import { getAppTheme, getAppColorMode } from '@/state/configsSelectors';
 
-import { getWidgetOverrides } from '@/lib/tradingView/utils';
+import { getWidgetOverrides, getChartLineColors } from '@/lib/tradingView/utils';
 
 /**
  * @description Method to define a type guard and check that an element is an IFRAME
@@ -22,10 +24,12 @@ const isIFrame = (element: HTMLElement | null): element is HTMLIFrameElement =>
  * In order to support our Classic along with Dark/Light, we are directly accessing the <html> within the iFrame.
  */
 export const useTradingViewTheme = ({
+  chartLines,
   tvWidget,
   isWidgetReady,
 }: {
-  tvWidget: (IChartingLibraryWidget & { _id?: string; _ready?: boolean }) | null;
+  chartLines: Record<string, ChartLine>;
+  tvWidget: TvWidget | null;
   isWidgetReady?: boolean;
 }) => {
   const appTheme: AppTheme = useSelector(getAppTheme);
@@ -33,47 +37,64 @@ export const useTradingViewTheme = ({
 
   useEffect(() => {
     if (tvWidget && isWidgetReady) {
-      tvWidget
+      tvWidget.changeTheme?.(THEME_NAMES[appTheme]).then(() => {
-        .changeTheme?.(
+        const tvChartId = tvWidget?._id;
-          {
-            [AppTheme.Classic]: '',
-            [AppTheme.Dark]: 'Dark',
-            [AppTheme.Light]: 'Light',
-          }[appTheme] as ThemeName
-        )
-        .then(() => {
-          const tvChartId = tvWidget?._id;
 
-          if (tvChartId) {
+        if (tvChartId) {
-            const frame = document?.getElementById(tvChartId);
+          const frame = document?.getElementById(tvChartId);
 
-            if (isIFrame(frame) && frame.contentWindow) {
+          if (isIFrame(frame) && frame.contentWindow) {
-              const innerHtml = frame.contentWindow.document.documentElement;
+            const innerHtml = frame.contentWindow.document.documentElement;
-
+            switch (appTheme) {
-              if (appTheme === AppTheme.Classic) {
+              case AppTheme.Classic:
                 innerHtml?.classList.remove('theme-dark', 'theme-light');
-              }
+                break;
+              case AppTheme.Dark:
+                innerHtml?.classList.remove('theme-light');
+                innerHtml?.classList.add('theme-dark');
+                break;
+              case AppTheme.Light:
+                innerHtml?.classList.remove('theme-dark');
+                innerHtml?.classList.add('theme-light');
             }
           }
+        }
 
-          const { overrides, studies_overrides } = getWidgetOverrides({ appTheme, appColorMode });
+        const { overrides, studies_overrides } = getWidgetOverrides({ appTheme, appColorMode });
-          tvWidget?.applyOverrides(overrides);
+        tvWidget?.applyOverrides(overrides);
-          tvWidget?.applyStudiesOverrides(studies_overrides);
+        tvWidget?.applyStudiesOverrides(studies_overrides);
 
-          // Necessary to update existing indicators
+        // Necessary to update existing indicators
-          const volumeStudyId = tvWidget
+        const volumeStudyId = tvWidget
-            ?.activeChart()
+          ?.activeChart()
-            ?.getAllStudies()
+          ?.getAllStudies()
-            ?.find((x) => x.name === 'Volume')?.id;
+          ?.find((x) => x.name === 'Volume')?.id;
 
-          if (volumeStudyId) {
+        if (volumeStudyId) {
-            const volume = tvWidget?.activeChart()?.getStudyById(volumeStudyId);
+          const volume = tvWidget?.activeChart()?.getStudyById(volumeStudyId);
-            volume.applyOverrides({
+          volume.applyOverrides({
-              'volume.color.0': studies_overrides['volume.volume.color.0'],
+            'volume.color.0': studies_overrides['volume.volume.color.0'],
-              'volume.color.1': studies_overrides['volume.volume.color.1'],
+            'volume.color.1': studies_overrides['volume.volume.color.1'],
-            });
+          });
+        }
+
+        // Necessary to update existing chart lines
+        Object.values(chartLines).forEach(({ chartLineType, line }) => {
+          const { maybeQuantityColor, borderColor, backgroundColor, textColor, textButtonColor } =
+            getChartLineColors({ chartLineType: chartLineType, appTheme, appColorMode });
+
+          if (maybeQuantityColor) {
+            line.setLineColor(maybeQuantityColor).setQuantityBackgroundColor(maybeQuantityColor);
           }
+
+          line
+            .setQuantityBorderColor(borderColor)
+            .setBodyBackgroundColor(backgroundColor)
+            .setBodyBorderColor(borderColor)
+            .setBodyTextColor(textColor)
+            .setQuantityTextColor(textButtonColor);
         });
+      });
     }
-  }, [appTheme, appColorMode]);
+  }, [appTheme, appColorMode, isWidgetReady]);
 };

src/hooks/useMarketsData.ts

@@ -33,7 +33,7 @@ export const useMarketsData = (
     return Object.values(allPerpetualMarkets)
       .filter(isTruthy)
       .map((marketData) => ({
-        asset: allAssets[marketData.assetId],
+        asset: allAssets[marketData.assetId] ?? {},
         tickSizeDecimals: marketData.configs?.tickSizeDecimals,
         ...marketData,
         ...marketData.perpetual,
@@ -46,9 +46,10 @@ export const useMarketsData = (
 
     if (searchFilter) {
       return filtered.filter(
-        ({ asset }) =>
+        ({ asset, id }) =>
           asset?.name?.toLocaleLowerCase().includes(searchFilter.toLowerCase()) ||
-          asset?.id?.toLocaleLowerCase().includes(searchFilter.toLowerCase())
+          asset?.id?.toLocaleLowerCase().includes(searchFilter.toLowerCase()) ||
+          id?.toLocaleLowerCase().includes(searchFilter.toLowerCase())
       );
     }
     return filtered;

src/hooks/usePageTitlePriceUpdates.ts

@@ -4,8 +4,11 @@ import { useSelector } from 'react-redux';
 import { DEFAULT_DOCUMENT_TITLE } from '@/constants/routes';
 
 import { getSelectedLocale } from '@/state/localizationSelectors';
-import { getCurrentMarketData, getCurrentMarketId } from '@/state/perpetualsSelectors';
+import {
-import type { RootState } from '@/state/_store';
+  getCurrentMarketId,
+  getCurrentMarketMidMarketPrice,
+  getCurrentMarketOraclePrice,
+} from '@/state/perpetualsSelectors';
 
 import { useBreakpoints } from './useBreakpoints';
 
@@ -13,11 +16,14 @@ export const usePageTitlePriceUpdates = () => {
   const selectedLocale = useSelector(getSelectedLocale);
   const { isNotTablet } = useBreakpoints();
   const id = useSelector(getCurrentMarketId);
-  const oraclePrice = useSelector((state: RootState) => getCurrentMarketData(state)?.oraclePrice);
+  const oraclePrice = useSelector(getCurrentMarketOraclePrice);
+  const orderbookMidMarketPrice = useSelector(getCurrentMarketMidMarketPrice);
+
+  const price = orderbookMidMarketPrice ?? oraclePrice;
 
   useEffect(() => {
-    if (id && oraclePrice && isNotTablet) {
+    if (id && price && isNotTablet) {
-      const priceString = oraclePrice.toLocaleString(selectedLocale);
+      const priceString = price.toLocaleString(selectedLocale);
       document.title = `$${priceString} ${id} · ${DEFAULT_DOCUMENT_TITLE}`;
     } else {
       document.title = DEFAULT_DOCUMENT_TITLE;
@@ -26,5 +32,5 @@ export const usePageTitlePriceUpdates = () => {
     return () => {
       document.title = DEFAULT_DOCUMENT_TITLE;
     };
-  }, [oraclePrice]);
+  }, [price]);
 };

src/hooks/usePotentialMarkets.tsx

@@ -1,18 +1,42 @@
-import { createContext, useContext, useEffect, useState } from 'react';
+import { createContext, useContext, useEffect, useMemo, useState } from 'react';
 
-import type {
+import { STRING_KEYS } from '@/constants/localization';
-  ExchangeConfigItem,
+import type { ExchangeConfigItem, PotentialMarketItem } from '@/constants/potentialMarkets';
-  ExchangeConfigParsedCsv,
-  PotentialMarketItem,
-  PotentialMarketParsedCsv,
-} from '@/constants/potentialMarkets';
 
 import { log } from '@/lib/telemetry';
 
+import { useStringGetter } from './useStringGetter';
+
 const PotentialMarketsContext = createContext<ReturnType<typeof usePotentialMarketsContext>>({
   potentialMarkets: undefined,
   exchangeConfigs: undefined,
   hasPotentialMarketsData: false,
+  liquidityTiers: {
+    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,
+    },
+  },
 });
 
 PotentialMarketsContext.displayName = 'PotentialMarkets';
@@ -23,10 +47,12 @@ export const PotentialMarketsProvider = ({ ...props }) => (
 
 export const usePotentialMarkets = () => useContext(PotentialMarketsContext);
 
-const EXCHANGE_CONFIG_FILE_PATH = '/configs/potentialMarketExchangeConfig.json';
+
-const POTENTIAL_MARKETS_FILE_PATH = '/configs/potentialMarketParameters.json';
+const EXCHANGE_CONFIG_FILE_PATH = '/configs/otherMarketExchangeConfig.json';
+const POTENTIAL_MARKETS_FILE_PATH = '/configs/otherMarketParameters.json';
 
 export const usePotentialMarketsContext = () => {
+  const stringGetter = useStringGetter();
   const [potentialMarkets, setPotentialMarkets] = useState<PotentialMarketItem[]>();
   const [exchangeConfigs, setExchangeConfigs] = useState<Record<string, ExchangeConfigItem[]>>();
 
@@ -54,9 +80,40 @@ export const usePotentialMarketsContext = () => {
     }
   }, []);
 
+  const liquidityTiers = useMemo(
+    () => ({
+      0: {
+        label: stringGetter({ key: STRING_KEYS.LARGE_CAP }),
+        initialMarginFraction: 0.05,
+        maintenanceMarginFraction: 0.03,
+        impactNotional: 10_000,
+      },
+      1: {
+        label: stringGetter({ key: STRING_KEYS.MID_CAP }),
+        initialMarginFraction: 0.1,
+        maintenanceMarginFraction: 0.05,
+        impactNotional: 5_000,
+      },
+      2: {
+        label: stringGetter({ key: STRING_KEYS.LONG_TAIL }),
+        initialMarginFraction: 0.2,
+        maintenanceMarginFraction: 0.1,
+        impactNotional: 2_500,
+      },
+      3: {
+        label: stringGetter({ key: STRING_KEYS.SAFETY }),
+        initialMarginFraction: 1,
+        maintenanceMarginFraction: 0.2,
+        impactNotional: 2_500,
+      },
+    }),
+    [stringGetter]
+  );
+
   return {
     potentialMarkets,
     exchangeConfigs,
     hasPotentialMarketsData: Boolean(potentialMarkets && exchangeConfigs),
+    liquidityTiers,
   };
 };

src/hooks/useURLConfigs.ts

@@ -5,23 +5,25 @@ import { useSelectedNetwork } from '@/hooks';
 const FALLBACK_URL = 'https://help.dydx.exchange/';
 
 export interface LinksConfigs {
-  tos: string,
+  tos: string;
-  privacy: string,
+  privacy: string;
-  mintscan: string,
+  mintscan: string;
-  mintscanBase: string,
+  mintscanBase: string;
-  feedback?: string,
+  feedback?: string;
-  help?: string,
+  help?: string;
-  blogs?: string,
+  blogs?: string;
-  foundation?: string,
+  foundation?: string;
-  initialMarginFractionLearnMore?: string,
+  initialMarginFractionLearnMore?: string;
-  reduceOnlyLearnMore?: string,
+  reduceOnlyLearnMore?: string;
-  documentation?: string,
+  documentation?: string;
-  community?: string,
+  community?: string;
-  governanceLearnMore?: string,
+  governanceLearnMore?: string;
-  stakingLearnMore?: string,
+  newMarketProposalLearnMore: string;
-  keplrDashboard?: string,
+  stakingLearnMore?: string;
-  accountExportLearnMore?: string,
+  keplrDashboard?: string;
-  walletLearnMore?: string
+  strideZoneApp?: string;
+  accountExportLearnMore?: string;
+  walletLearnMore?: string;
 }
 
 export const useURLConfigs = (): LinksConfigs => {
@@ -42,8 +44,10 @@ export const useURLConfigs = (): LinksConfigs => {
     documentation: linksConfigs.documentation || FALLBACK_URL,
     community: linksConfigs.community || FALLBACK_URL,
     governanceLearnMore: linksConfigs.governanceLearnMore || FALLBACK_URL,
+    newMarketProposalLearnMore: linksConfigs.newMarketProposalLearnMore || FALLBACK_URL,
     stakingLearnMore: linksConfigs.stakingLearnMore || FALLBACK_URL,
     keplrDashboard: linksConfigs.keplrDashboard || FALLBACK_URL,
+    strideZoneApp: linksConfigs.strideZoneApp || FALLBACK_URL,
     accountExportLearnMore: linksConfigs.accountExportLearnMore || FALLBACK_URL,
     walletLearnMore: linksConfigs.walletLearnMore || FALLBACK_URL,
   };

src/hooks/useWalletConnection.ts

@@ -163,17 +163,20 @@ export const useWalletConnection = () => {
           }
         }
       } catch (error) {
-        throw Object.assign(
+        const { isErrorExpected } = parseWalletError({ error, stringGetter });
-          new Error([error.message, error.cause?.message].filter(Boolean).join('\n')),
+        if (!isErrorExpected) {
-          {
+          throw Object.assign(
-            walletConnectionType: walletConnection?.type,
+            new Error([error.message, error.cause?.message].filter(Boolean).join('\n')),
-          }
+            {
-        );
+              walletConnectionType: walletConnection?.type,
+            }
+          );
+        }
       }
 
       return {
         walletType,
-        walletConnectionType: walletConnection.type,
+        walletConnectionType: walletConnection?.type,
       };
     },
     [isConnectedGraz, signerGraz, isConnectedWagmi, signerWagmi]

src/icons/chaos-labs.tsx

@@ -36,8 +36,8 @@ const ChaosLabsIcon: React.FC = () => {
         fill={fills[1]}
       />
       <path
-        fill-rule="evenodd"
+        fillRule="evenodd"
-        clip-rule="evenodd"
+        clipRule="evenodd"
         d="M47.6624 4.38721C46.5167 4.38721 45.5396 4.77222 44.7521 5.54468C43.9625 6.31199 43.5687 7.27749 43.5687 8.41904C43.5687 9.55454 43.9632 10.5194 44.7514 11.2929L44.7527 11.2939C45.5403 12.0594 46.5173 12.4406 47.6624 12.4406C48.8074 12.4406 49.7845 12.0594 50.572 11.2939L50.5734 11.2929C51.3616 10.5194 51.756 9.55454 51.756 8.41904C51.756 7.27749 51.3623 6.312 50.5727 5.54469C49.7851 4.77223 48.8081 4.38721 47.6624 4.38721ZM45.4207 8.41904C45.4207 7.76676 45.6364 7.22501 46.0671 6.77549C46.5039 6.32689 47.0294 6.10561 47.6624 6.10561C48.2954 6.10561 48.8168 6.32697 49.2462 6.77466L49.2476 6.77617C49.6857 7.22615 49.9034 7.7677 49.9034 8.41904C49.9034 9.06265 49.6864 9.60104 49.2476 10.0516L49.2462 10.0531C48.8168 10.5008 48.2954 10.7222 47.6624 10.7222C47.0294 10.7222 46.5039 10.5009 46.0671 10.0523C45.6357 9.60218 45.4207 9.06359 45.4207 8.41904Z"
         fill={fills[1]}
       />
@@ -50,8 +50,8 @@ const ChaosLabsIcon: React.FC = () => {
         fill={fills[1]}
       />
       <path
-        fill-rule="evenodd"
+        fillRule="evenodd"
-        clip-rule="evenodd"
+        clipRule="evenodd"
         d="M40.3586 4.56055H38.6659L35.2261 12.3667H37.1862L37.9072 10.7289H41.1173L41.8383 12.3667H43.7984L40.3586 4.56055ZM38.6686 9.00014L39.5126 7.08737L40.3559 9.00014H38.6686Z"
         fill={fills[1]}
       />

src/icons/currency-sign.svg

@@ -0,0 +1,4 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.9255 9.70119C10.9255 8.14969 9.99456 7.61773 8.13272 7.39612C6.80283 7.21876 6.53685 6.86416 6.53685 6.24348C6.53685 5.62279 6.98018 5.22393 7.86674 5.22393C8.66467 5.22393 9.10801 5.48991 9.32962 6.15485C9.37398 6.28784 9.50697 6.37647 9.63996 6.37647H10.3492C10.5265 6.37647 10.6595 6.24348 10.6595 6.06623V6.02186C10.4822 5.04658 9.68422 4.29301 8.66467 4.20439V3.14047C8.66467 2.96312 8.53169 2.83013 8.31007 2.78577H7.64513C7.46777 2.78577 7.33479 2.91876 7.29042 3.14047V4.16002C5.96053 4.33737 5.11834 5.22393 5.11834 6.33221C5.11834 7.79508 6.0049 8.3713 7.86674 8.59302C9.10801 8.81463 9.50697 9.08061 9.50697 9.78992C9.50697 10.4992 8.88629 10.9868 8.0441 10.9868C6.89145 10.9868 6.49249 10.4991 6.3595 9.83418C6.31524 9.65693 6.18225 9.5682 6.04926 9.5682H5.29559C5.11834 9.5682 4.98535 9.70119 4.98535 9.87854V9.92291C5.1626 11.0311 5.87191 11.829 7.33479 12.0507V13.1146C7.33479 13.2919 7.46778 13.4249 7.68939 13.4692H8.35433C8.53169 13.4692 8.66468 13.3363 8.70904 13.1146V12.0507C10.0389 11.829 10.9255 10.8981 10.9255 9.70119Z" fill="currentColor"/>
+<path d="M5.73821 14.3561C2.2805 13.1149 0.507281 9.25822 1.79291 5.84477C2.45786 3.98293 3.92073 2.56441 5.73821 1.89947C5.91557 1.81085 6.00419 1.67786 6.00419 1.45614V0.835558C6.00419 0.658204 5.91557 0.525216 5.73821 0.480957C5.69385 0.480957 5.60522 0.480957 5.56086 0.525215C1.34958 1.8551 -0.955596 6.33247 0.374292 10.5437C1.17223 13.0262 3.07843 14.9324 5.56086 15.7303C5.73821 15.8189 5.91557 15.7303 5.95982 15.553C6.00419 15.5087 6.00419 15.4643 6.00419 15.3757V14.755C6.00419 14.622 5.8712 14.4448 5.73821 14.3561ZM10.4372 0.525215C10.2598 0.436592 10.0825 0.525216 10.0382 0.70257C9.99385 0.746935 9.99385 0.791193 9.99385 0.879924V1.5005C9.99385 1.67786 10.1268 1.8551 10.2598 1.94383C13.7175 3.18499 15.4908 7.04167 14.2051 10.4551C13.5402 12.317 12.0773 13.7355 10.2598 14.4004C10.0825 14.489 9.99385 14.622 9.99385 14.8438V15.4643C9.99385 15.6417 10.0825 15.7747 10.2598 15.8189C10.3042 15.8189 10.3928 15.8189 10.4372 15.7747C14.6485 14.4448 16.9536 9.96742 15.6238 5.75615C14.8258 3.22936 12.8752 1.32315 10.4372 0.525215Z" fill="currentColor"/>
+</svg>

src/icons/governance.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 13.5V8M10.5 13.5V8M5.5 13.5V8M2 5.5L8 1.5L14 5.5M13 13.5V6.388C11.3459 6.12904 9.67421 5.99931 8 6C6.29933 6 4.62933 6.13333 3 6.388V13.5M2 13.5H14M8 4H8.00533V4.00533H8V4Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/icons/index.ts

@@ -1,4 +1,3 @@
-import ChaosLabsIcon from './chaos-labs';
 export { default as AddressConnectorIcon } from './address-connector.svg';
 export { default as ArrowIcon } from './arrow.svg';
 export { default as Bar3Icon } from './bar3.svg';
@@ -20,6 +19,7 @@ export { default as CoinMarketCapIcon } from './logos/coinmarketcap.svg';
 export { default as CoinsIcon } from './coins.svg';
 export { default as CommentIcon } from './comment.svg';
 export { default as CopyIcon } from './copy.svg';
+export { default as CurrencySignIcon } from './currency-sign.svg';
 export { default as DepositIcon } from './deposit.svg';
 export { default as DepthChartIcon } from './depth-chart.svg';
 export { default as DiscordIcon } from './discord.svg';
@@ -29,6 +29,7 @@ export { default as FileIcon } from './file.svg';
 export { default as FundingChartIcon } from './funding-chart.svg';
 export { default as GearIcon } from './gear.svg';
 export { default as GiftboxIcon } from './giftbox.svg';
+export { default as GovernanceIcon } from './governance.svg';
 export { default as HelpCircleIcon } from './help-circle.svg';
 export { default as HideIcon } from './hide.svg';
 export { default as HistoryIcon } from './history.svg';
@@ -60,6 +61,7 @@ export { default as StarIcon } from './star.svg';
 export { default as SunIcon } from './sun.svg';
 export { default as TerminalIcon } from './terminal.svg';
 export { default as TogglesMenuIcon } from './toggles-menu.svg';
+export { default as TokenIcon } from './token.svg';
 export { default as TradeIcon } from './trade.svg';
 export { default as TransferIcon } from './transfer.svg';
 export { default as TriangleIcon } from './triangle.svg';

src/icons/token.svg

@@ -0,0 +1,5 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.78448 0L0.498535 11.999H3.0425L11.3714 0H8.78448Z" fill="currentColor"/>
+<path d="M3.30742 0L5.74539 3.53569L4.47339 5.46426L0.710449 0H3.30742Z" fill="currentColor"/>
+<path d="M9.03109 12L6.32812 8.08934L7.73738 6.21436L11.575 12H9.03109Z" fill="currentColor"/>
+</svg>

src/layout/DialogManager.tsx

@@ -30,6 +30,7 @@ import { OrderDetailsDialog } from '@/views/dialogs/DetailsDialog/OrderDetailsDi
 import { FillDetailsDialog } from '@/views/dialogs/DetailsDialog/FillDetailsDialog';
 import { NewMarketMessageDetailsDialog } from '@/views/dialogs/NewMarketMessageDetailsDialog';
 import { NewMarketAgreementDialog } from '@/views/dialogs/NewMarketAgreementDialog';
+import { ExternalNavStrideDialog } from '@/views/dialogs/ExternalNavStrideDialog';
 
 export const DialogManager = () => {
   const dispatch = useDispatch();
@@ -59,6 +60,7 @@ export const DialogManager = () => {
     [DialogTypes.Help]: <HelpDialog {...modalProps} />,
     [DialogTypes.ExternalNavKeplr]: <ExternalNavKeplrDialog {...modalProps} />,
     [DialogTypes.ExternalLink]: <ExternalLinkDialog {...modalProps} />,
+    [DialogTypes.ExternalNavStride]: <ExternalNavStrideDialog {...modalProps} />,
     [DialogTypes.MnemonicExport]: <MnemonicExportDialog {...modalProps} />,
     [DialogTypes.MobileSignIn]: <MobileSignInDialog {...modalProps} />,
     [DialogTypes.Onboarding]: <OnboardingDialog {...modalProps} />,

src/lib/tradingView/utils.ts

@@ -1,6 +1,10 @@
-import { Candle, TradingViewBar, TradingViewSymbol } from '@/constants/candles';
+import { OrderSide } from '@dydxprotocol/v4-client-js';
 
-import type { AppTheme, AppColorMode } from '@/state/configs';
+import { Candle, TradingViewBar, TradingViewSymbol } from '@/constants/candles';
+import { THEME_NAMES } from '@/constants/styles/colors';
+import type { ChartLineType } from '@/constants/tvchart';
+
+import { type AppColorMode, AppTheme } from '@/state/configs';
 
 import { Themes } from '@/styles/themes';
 
@@ -47,6 +51,31 @@ export const getHistorySlice = ({
   return bars.filter(({ time }) => time >= fromMs);
 };
 
+export const getChartLineColors = ({
+  appTheme,
+  appColorMode,
+  chartLineType,
+}: {
+  appTheme: AppTheme;
+  appColorMode: AppColorMode;
+  chartLineType: ChartLineType;
+}) => {
+  const theme = Themes[appTheme][appColorMode];
+  const orderColors = {
+    [OrderSide.BUY]: theme.positive,
+    [OrderSide.SELL]: theme.negative,
+    ['position']: null,
+  };
+
+  return {
+    maybeQuantityColor: orderColors[chartLineType],
+    borderColor: theme.borderDefault,
+    backgroundColor: theme.layer1,
+    textColor: theme.textTertiary,
+    textButtonColor: theme.textButton,
+  };
+};
+
 export const getWidgetOverrides = ({
   appTheme,
   appColorMode,
@@ -57,6 +86,7 @@ export const getWidgetOverrides = ({
   const theme = Themes[appTheme][appColorMode];
 
   return {
+    theme: THEME_NAMES[appTheme],
     overrides: {
       'paneProperties.background': theme.layer2,
       'paneProperties.horzGridProperties.color': theme.layer3,

src/lib/wallet/index.ts

@@ -92,6 +92,10 @@ export const getWalletErrorType = ({ error }: { error: Error }) => {
     return WalletErrorType.ChainMismatch;
   }
 
+  if (messageLower.includes('Missing or invalid. request() method: wallet_switchEthereumChain')) {
+    return WalletErrorType.SwitchChainMethodMissing;
+  }
+
   // ImToken - User canceled
   if (messageLower.includes('用户取消了操作')) {
     return WalletErrorType.UserCanceled;
@@ -113,13 +117,18 @@ export const parseWalletError = ({
 }) => {
   const walletErrorType = getWalletErrorType({ error });
   let message;
+  let isErrorExpected;
 
   switch (walletErrorType) {
     case WalletErrorType.ChainMismatch:
-    case WalletErrorType.UserCanceled: {
+    case WalletErrorType.UserCanceled:
+    case WalletErrorType.SwitchChainMethodMissing: {
+      isErrorExpected = true;
+      message = error.message;
       break;
     }
     default: {
+      isErrorExpected = false;
       message = stringGetter({
         key: STRING_KEYS.SOMETHING_WENT_WRONG_WITH_MESSAGE,
         params: {
@@ -132,5 +141,6 @@ export const parseWalletError = ({
   return {
     walletErrorType,
     message,
+    isErrorExpected,
   };
 };

src/pages/Profile.tsx

@@ -4,9 +4,15 @@ import { useDispatch, useSelector } from 'react-redux';
 import { useEnsName } from 'wagmi';
 import { useNavigate } from 'react-router-dom';
 
-import { ButtonSize } from '@/constants/buttons';
 import { TransferType } from '@/constants/abacus';
-
+import { OnboardingState } from '@/constants/account';
+import { ButtonSize } from '@/constants/buttons';
+import { DialogTypes } from '@/constants/dialogs';
+import { STRING_KEYS } from '@/constants/localization';
+import { AppRoute, PortfolioRoute, HistoryRoute } from '@/constants/routes';
+import { wallets } from '@/constants/wallets';
+import { useAccounts, useStringGetter, useTokenConfigs } from '@/hooks';
+import { breakpoints } from '@/styles';
 import { layoutMixins } from '@/styles/layoutMixins';
 
 import { Details } from '@/components/Details';
@@ -16,13 +22,6 @@ import { IconButton, type IconButtonProps } from '@/components/IconButton';
 import { Panel } from '@/components/Panel';
 import { Toolbar } from '@/components/Toolbar';
 
-import { OnboardingState } from '@/constants/account';
-import { DialogTypes } from '@/constants/dialogs';
-import { STRING_KEYS } from '@/constants/localization';
-import { AppRoute, PortfolioRoute, HistoryRoute } from '@/constants/routes';
-import { wallets } from '@/constants/wallets';
-import { useAccounts, useStringGetter, useTokenConfigs } from '@/hooks';
-
 import {
   getHistoricalTradingRewardsForCurrentWeek,
   getOnboardingState,
@@ -32,10 +31,12 @@ import { openDialog } from '@/state/dialogs';
 import { isTruthy } from '@/lib/isTruthy';
 import { truncateAddress } from '@/lib/wallet';
 
-import { DYDXBalancePanel } from './rewards/DYDXBalancePanel';
+import { DYDXBalancePanel } from './token/rewards/DYDXBalancePanel';
-import { MigratePanel } from './rewards/MigratePanel';
+import { MigratePanel } from './token/rewards/MigratePanel';
-import { GovernancePanel } from './rewards/GovernancePanel';
+import { GovernancePanel } from './token/rewards/GovernancePanel';
-import { StakingPanel } from './rewards/StakingPanel';
+import { StakingPanel } from './token/staking/StakingPanel';
+import { StrideStakingPanel } from './token/staking/StrideStakingPanel';
+import { NewMarketsPanel } from './token/rewards/NewMarketsPanel';
 
 const ENS_CHAIN_ID = 1; // Ethereum
 
@@ -236,7 +237,9 @@ const Profile = () => {
       </Styled.HistoryPanel>
 
       <Styled.GovernancePanel />
+      <Styled.NewMarketsPanel />
       <Styled.StakingPanel />
+      <Styled.StrideStakingPanel />
     </Styled.MobileProfileLayout>
   );
 };
@@ -249,11 +252,12 @@ Styled.MobileProfileLayout = styled.div`
   ${layoutMixins.contentContainerPage}
 
   display: grid;
-  grid-template-columns: 1fr 1fr;
   gap: 1rem;
   padding: 1.25rem 0.9rem;
   max-width: 100vw;
 
+  grid-template-columns: 1fr 1fr;
+
   grid-template-areas:
     'header header'
     'actions actions'
@@ -262,8 +266,23 @@ Styled.MobileProfileLayout = styled.div`
     'balance balance'
     'rewards fees'
     'history history'
-    'governance governance'
+    'governance newMarkets'
-    'staking staking';
+    'keplr stride';
+
+  @media ${breakpoints.mobile} {
+    grid-template-areas:
+      'header header'
+      'actions actions'
+      'settings help'
+      'migrate migrate'
+      'balance balance'
+      'rewards fees'
+      'history history'
+      'governance governance'
+      'newMarkets newMarkets'
+      'keplr keplr'
+      'stride stride';
+  }
 `;
 
 Styled.Header = styled.header`
@@ -335,7 +354,7 @@ Styled.ActionButton = styled(IconButton)<{ iconName?: IconName }>`
   ${({ iconName }) =>
     iconName === IconName.Close
       ? css`
-          --button-textColor: var(--color-error);
+          --button-textColor: var(--color-red);
           --button-icon-size: 0.75em;
         `
       : iconName === IconName.Transfer &&
@@ -431,5 +450,13 @@ Styled.GovernancePanel = styled(GovernancePanel)`
 `;
 
 Styled.StakingPanel = styled(StakingPanel)`
-  grid-area: staking;
+  grid-area: keplr;
+`;
+
+Styled.NewMarketsPanel = styled(NewMarketsPanel)`
+  grid-area: newMarkets;
+`;
+
+Styled.StrideStakingPanel = styled(StrideStakingPanel)`
+  grid-area: stride;
 `;

src/pages/portfolio/Portfolio.tsx

@@ -45,7 +45,8 @@ export default () => {
   const { freeCollateral } = useSelector(getSubaccount, shallowEqual) || {};
   const { nativeTokenBalance } = useAccountBalance();
 
-  const { numTotalPositions, numTotalOpenOrders } = useSelector(getTradeInfoNumbers, shallowEqual) || {};
+  const { numTotalPositions, numTotalOpenOrders } =
+    useSelector(getTradeInfoNumbers, shallowEqual) || {};
   const numPositions = shortenNumberForDisplay(numTotalPositions);
   const numOrders = shortenNumberForDisplay(numTotalOpenOrders);
 
@@ -119,30 +120,43 @@ export default () => {
                   items: [
                     {
                       value: PortfolioRoute.Overview,
-                      slotBefore: <Styled.Icon iconName={IconName.Overview} />,
+                      slotBefore: (
+                        <Styled.IconContainer>
+                          <Icon iconName={IconName.Overview} />
+                        </Styled.IconContainer>
+                      ),
                       label: stringGetter({ key: STRING_KEYS.OVERVIEW }),
                       href: PortfolioRoute.Overview,
                     },
                     {
                       value: PortfolioRoute.Positions,
-                      slotBefore: <Styled.Icon iconName={IconName.Positions} />,
+                      slotBefore: (
+                        <Styled.IconContainer>
+                          <Icon iconName={IconName.Positions} />
+                        </Styled.IconContainer>
+                      ),
                       label: (
                         <>
                           {stringGetter({ key: STRING_KEYS.POSITIONS })}
-                          {numPositions > 0 && (
+                          {numPositions &&
-                            <Tag type={TagType.Number}> {numPositions} </Tag>
+                            (typeof numPositions === 'string' || numPositions > 0) && (
-                          )}
+                              <Tag type={TagType.Number}> {numPositions} </Tag>
+                            )}
                         </>
                       ),
                       href: PortfolioRoute.Positions,
                     },
                     {
                       value: PortfolioRoute.Orders,
-                      slotBefore: <Styled.Icon iconName={IconName.OrderPending} />,
+                      slotBefore: (
+                        <Styled.IconContainer>
+                          <Icon iconName={IconName.OrderPending} />
+                        </Styled.IconContainer>
+                      ),
                       label: (
                         <>
                           {stringGetter({ key: STRING_KEYS.ORDERS })}
-                          {numOrders > 0 && (
+                          {numOrders && (typeof numOrders === 'string' || numOrders > 0) && (
                             <Tag type={TagType.Number}> {numOrders} </Tag>
                           )}
                         </>
@@ -151,13 +165,21 @@ export default () => {
                     },
                     {
                       value: PortfolioRoute.Fees,
-                      slotBefore: <Styled.Icon iconName={IconName.Calculator} />,
+                      slotBefore: (
+                        <Styled.IconContainer>
+                          <Icon iconName={IconName.Calculator} />
+                        </Styled.IconContainer>
+                      ),
                       label: stringGetter({ key: STRING_KEYS.FEES }),
                       href: PortfolioRoute.Fees,
                     },
                     {
                       value: PortfolioRoute.History,
-                      slotBefore: <Styled.Icon iconName={IconName.History} />,
+                      slotBefore: (
+                        <Styled.IconContainer>
+                          <Icon iconName={IconName.History} />
+                        </Styled.IconContainer>
+                      ),
                       label: stringGetter({ key: STRING_KEYS.HISTORY }),
                       href: PortfolioRoute.History,
                     },
@@ -232,16 +254,14 @@ Styled.NavigationMenu = styled(NavigationMenu)`
   padding-top: 0;
 `;
 
-Styled.Icon = styled(Icon)`
+Styled.IconContainer = styled.div`
-  --icon-backgroundColor: var(--color-layer-4);
+  width: 1.5rem;
-
+  height: 1.5rem;
-  width: 1em;
+  font-size: 0.75rem;
-  height: 1em;
+  display: flex;
-
+  justify-content: center;
-  margin-left: -0.25em;
+  align-items: center;
-
+  background-color: var(--color-layer-4);
-  box-sizing: content-box;
-  background-color: var(--icon-backgroundColor);
   border-radius: 50%;
-  padding: 0.25em;
+  margin-left: -0.25rem;
 `;

src/pages/token/Governance.tsx

@@ -0,0 +1,60 @@
+import styled, { AnyStyledComponent } from 'styled-components';
+
+import { STRING_KEYS } from '@/constants/localization';
+import { useStringGetter } from '@/hooks';
+import { breakpoints } from '@/styles';
+import { layoutMixins } from '@/styles/layoutMixins';
+
+import { DetachedSection } from '@/components/ContentSection';
+import { ContentSectionHeader } from '@/components/ContentSectionHeader';
+
+import { GovernancePanel } from './rewards/GovernancePanel';
+import { NewMarketsPanel } from './rewards/NewMarketsPanel';
+
+export default () => {
+  const stringGetter = useStringGetter();
+
+  return (
+    <DetachedSection>
+      <Styled.HeaderSection>
+        <ContentSectionHeader
+          title={stringGetter({ key: STRING_KEYS.GOVERNANCE })}
+          subtitle={stringGetter({ key: STRING_KEYS.GOVERNANCE_PAGE_SUBTITLE })}
+        />
+      </Styled.HeaderSection>
+
+      <Styled.ContentWrapper>
+        <Styled.Row>
+          <GovernancePanel />
+          <NewMarketsPanel />
+        </Styled.Row>
+      </Styled.ContentWrapper>
+    </DetachedSection>
+  );
+};
+
+const Styled: Record<string, AnyStyledComponent> = {};
+
+Styled.HeaderSection = styled.section`
+  ${layoutMixins.contentSectionDetached}
+
+  @media ${breakpoints.tablet} {
+    ${layoutMixins.flexColumn}
+    gap: 1rem;
+
+    margin-bottom: 0.5rem;
+  }
+`;
+
+Styled.ContentWrapper = styled.div`
+  ${layoutMixins.flexColumn}
+  gap: 1.5rem;
+  max-width: 80rem;
+  padding: 0 1rem;
+`;
+
+Styled.Row = styled.div`
+  gap: 1rem;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+`;

src/pages/token/Token.tsx

@@ -0,0 +1,126 @@
+import { Suspense, lazy } from 'react';
+import { Navigate, Route, Routes } from 'react-router-dom';
+import styled, { AnyStyledComponent } from 'styled-components';
+
+import { STRING_KEYS } from '@/constants/localization';
+import { TokenRoute } from '@/constants/routes';
+import { useBreakpoints, useStringGetter } from '@/hooks';
+import { layoutMixins } from '@/styles/layoutMixins';
+
+import { Icon, IconName } from '@/components/Icon';
+import { LoadingSpace } from '@/components/Loading/LoadingSpinner';
+import { NavigationMenu } from '@/components/NavigationMenu';
+import { WithSidebar } from '@/components/WithSidebar';
+
+const RewardsPage = lazy(() => import('./rewards/RewardsPage'));
+const StakingPage = lazy(() => import('./staking/StakingPage'));
+const GovernancePage = lazy(() => import('./Governance'));
+
+export default () => {
+  const { isTablet } = useBreakpoints();
+  const stringGetter = useStringGetter();
+
+  const routesComponent = (
+    <Suspense fallback={<LoadingSpace id="token-page" />}>
+      <Routes>
+        <Route path={TokenRoute.TradingRewards} element={<RewardsPage />} />
+        <Route path={TokenRoute.StakingRewards} element={<StakingPage />} />
+        <Route path={TokenRoute.Governance} element={<GovernancePage />} />
+        <Route path="*" element={<Navigate to={TokenRoute.TradingRewards} replace />} />
+      </Routes>
+    </Suspense>
+  );
+
+  return (
+    <WithSidebar
+      sidebar={
+        isTablet ? null : (
+          <Styled.SideBar>
+            <Styled.NavigationMenu
+              items={[
+                {
+                  group: 'views',
+                  groupLabel: stringGetter({ key: STRING_KEYS.VIEWS }),
+                  items: [
+                    {
+                      value: TokenRoute.TradingRewards,
+                      slotBefore: (
+                        <Styled.IconContainer>
+                          <Icon iconName={IconName.Token} />
+                        </Styled.IconContainer>
+                      ),
+                      label: stringGetter({ key: STRING_KEYS.TRADING_REWARDS }),
+                      href: TokenRoute.TradingRewards,
+                    },
+                    {
+                      value: TokenRoute.StakingRewards,
+                      slotBefore: (
+                        <Styled.IconContainer>
+                          <Icon iconName={IconName.CurrencySign} />
+                        </Styled.IconContainer>
+                      ),
+                      label: stringGetter({ key: STRING_KEYS.STAKING_REWARDS }),
+                      href: TokenRoute.StakingRewards,
+                      tag: stringGetter({ key: STRING_KEYS.NEW }),
+                    },
+                    {
+                      value: TokenRoute.Governance,
+                      slotBefore: (
+                        <Styled.IconContainer>
+                          <Icon iconName={IconName.Governance} />
+                        </Styled.IconContainer>
+                      ),
+                      label: stringGetter({ key: STRING_KEYS.GOVERNANCE }),
+                      href: TokenRoute.Governance,
+                    },
+                  ],
+                },
+              ]}
+            />
+          </Styled.SideBar>
+        )
+      }
+    >
+      {routesComponent}
+    </WithSidebar>
+  );
+};
+
+const Styled: Record<string, AnyStyledComponent> = {};
+
+Styled.SideBar = styled.div`
+  ${layoutMixins.flexColumn}
+  justify-content: space-between;
+
+  height: 100%;
+`;
+
+Styled.Footer = styled.div`
+  ${layoutMixins.row}
+  flex-wrap: wrap;
+
+  padding: 1rem;
+
+  gap: 0.5rem;
+
+  > button {
+    flex-grow: 1;
+  }
+`;
+
+Styled.NavigationMenu = styled(NavigationMenu)`
+  padding: 0.5rem;
+  padding-top: 0;
+`;
+
+Styled.IconContainer = styled.div`
+  width: 1.5rem;
+  height: 1.5rem;
+  font-size: 0.75rem;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  background-color: var(--color-layer-4);
+  border-radius: 50%;
+  margin-left: -0.25rem;
+`;

src/pages/token/rewards/GovernancePanel.tsx

@@ -14,13 +14,14 @@ import { Link } from '@/components/Link';
 
 import { openDialog } from '@/state/dialogs';
 
-export const GovernancePanel = () => {
+export const GovernancePanel = ({ className }: { className?: string }) => {
   const stringGetter = useStringGetter();
   const dispatch = useDispatch();
   const { governanceLearnMore } = useURLConfigs();
 
   return (
     <Panel
+      className={className}
       slotHeaderContent={
         <Styled.Title>{stringGetter({ key: STRING_KEYS.GOVERNANCE })}</Styled.Title>
       }

src/pages/token/rewards/LaunchIncentivesPanel.tsx

@@ -28,7 +28,7 @@ import { log } from '@/lib/telemetry';
 
 const SEASON_NUMBER = 2;
 
-export const LaunchIncentivesPanel = () => {
+export const LaunchIncentivesPanel = ({ className }: { className?: string }) => {
   const { isNotTablet } = useBreakpoints();
   const dispatch = useDispatch();
 
@@ -37,11 +37,15 @@ export const LaunchIncentivesPanel = () => {
   }, []);
 
   return isNotTablet ? (
-    <Styled.Panel slotHeader={<LaunchIncentivesTitle />} slotRight={<EstimatedRewards />}>
+    <Styled.Panel
+      className={className}
+      slotHeader={<LaunchIncentivesTitle />}
+      slotRight={<EstimatedRewards />}
+    >
       <LaunchIncentivesContent />
     </Styled.Panel>
   ) : (
-    <Styled.Panel>
+    <Styled.Panel className={className}>
       <Styled.Column>
         <EstimatedRewards />
         <LaunchIncentivesTitle />

src/pages/token/rewards/NewMarketsPanel.tsx

@@ -19,21 +19,22 @@ import { Tag } from '@/components/Tag';
 import { MustBigNumber } from '@/lib/numbers';
 import { layoutMixins } from '@/styles/layoutMixins';
 
-export const NewMarketsPanel = () => {
+export const NewMarketsPanel = ({ className }: { className?: string }) => {
   const stringGetter = useStringGetter();
   const navigate = useNavigate();
   const { hasPotentialMarketsData } = usePotentialMarkets();
   const { chainTokenDecimals, chainTokenLabel } = useTokenConfigs();
   const { newMarketProposal } = useGovernanceVariables();
+  const initialDepositAmountDecimals = isMainnet ? 0 : 11;
   const initialDepositAmountBN = MustBigNumber(newMarketProposal.initialDepositAmount).div(
     Number(`1e${chainTokenDecimals}`)
   );
-  const initialDepositAmountDecimals = isMainnet ? 0 : chainTokenDecimals;
 
   if (!hasPotentialMarketsData) return null;
 
   return (
     <Panel
+      className={className}
       slotHeaderContent={
         <Styled.Title>
           {stringGetter({ key: STRING_KEYS.ADD_A_MARKET })}

src/pages/token/rewards/RewardHistoryPanel.tsx

@@ -9,10 +9,13 @@ import {
   HistoricalTradingRewardsPeriods,
 } from '@/constants/abacus';
 
+import { isMainnet } from '@/constants/networks';
 import { STRING_KEYS } from '@/constants/localization';
+
 import breakpoints from '@/styles/breakpoints';
 import { layoutMixins } from '@/styles/layoutMixins';
 
+import { Output, OutputType } from '@/components/Output';
 import { Panel } from '@/components/Panel';
 import { ToggleGroup } from '@/components/ToggleGroup';
 import { WithTooltip } from '@/components/WithTooltip';
@@ -20,6 +23,9 @@ import { TradingRewardHistoryTable } from '@/views/tables/TradingRewardHistoryTa
 
 import abacusStateManager from '@/lib/abacus';
 
+// TODO: set in env featureFlag config
+const REWARDS_HISTORY_START_DATE_MS = isMainnet ? 1706486400000 : 1704844800000;
+
 export const RewardHistoryPanel = () => {
   const stringGetter = useStringGetter();
 
@@ -47,7 +53,20 @@ export const RewardHistoryPanel = () => {
             <WithTooltip tooltip="reward-history">
               <h3>{stringGetter({ key: STRING_KEYS.REWARD_HISTORY })}</h3>
             </WithTooltip>
-            <span>{stringGetter({ key: STRING_KEYS.REWARD_HISTORY_DESCRIPTION })}</span>
+            <span>
+              {stringGetter({
+                key: STRING_KEYS.REWARD_HISTORY_DESCRIPTION,
+                params: {
+                  REWARDS_HISTORY_START_DATE: (
+                    <Styled.Output
+                      type={OutputType.Date}
+                      value={REWARDS_HISTORY_START_DATE_MS}
+                      timeOptions={{ useUTC: true }}
+                    />
+                  ),
+                },
+              })}
+            </span>
           </Styled.Title>
           <ToggleGroup
             items={[
@@ -103,3 +122,7 @@ Styled.Content = styled.div`
   ${layoutMixins.flexColumn}
   gap: 0.75rem;
 `;
+
+Styled.Output = styled(Output)`
+  display: inline;
+`;

src/pages/token/rewards/RewardsPage.tsx

@@ -1,6 +1,7 @@
 import styled, { AnyStyledComponent, css } from 'styled-components';
 import { useNavigate } from 'react-router-dom';
 
+import { isMainnet } from '@/constants/networks';
 import { STRING_KEYS } from '@/constants/localization';
 import { AppRoute } from '@/constants/routes';
 
@@ -10,6 +11,8 @@ import { breakpoints } from '@/styles';
 import { layoutMixins } from '@/styles/layoutMixins';
 
 import { BackButton } from '@/components/BackButton';
+import { DetachedSection } from '@/components/ContentSection';
+import { ContentSectionHeader } from '@/components/ContentSectionHeader';
 
 import { testFlags } from '@/lib/testFlags';
 
@@ -19,56 +22,54 @@ import { MigratePanel } from './MigratePanel';
 import { RewardsHelpPanel } from './RewardsHelpPanel';
 import { TradingRewardsSummaryPanel } from './TradingRewardsSummaryPanel';
 import { RewardHistoryPanel } from './RewardHistoryPanel';
-import { GovernancePanel } from './GovernancePanel';
-import { StakingPanel } from './StakingPanel';
-import { NewMarketsPanel } from './NewMarketsPanel';
 
 const RewardsPage = () => {
   const stringGetter = useStringGetter();
   const { isTablet, isNotTablet } = useBreakpoints();
   const navigate = useNavigate();
 
+  const showTradingRewards = testFlags.showTradingRewards || !isMainnet;
+
   return (
-    <Styled.Page>
+    <div>
       {isTablet && (
-        <Styled.MobileHeader>
+        <ContentSectionHeader
-          <BackButton onClick={() => navigate(AppRoute.Profile)} />
+          title={stringGetter({ key: STRING_KEYS.TRADING_REWARDS })}
-          {stringGetter({ key: STRING_KEYS.TRADING_REWARDS })}
+          slotLeft={<BackButton onClick={() => navigate(AppRoute.Profile)} />}
-        </Styled.MobileHeader>
+        />
       )}
-      <Styled.GridLayout
+      <DetachedSection>
-        showTradingRewards={testFlags.showTradingRewards}
+        <Styled.GridLayout
-        showMigratePanel={import.meta.env.VITE_V3_TOKEN_ADDRESS && isNotTablet}
+          showTradingRewards={showTradingRewards}
-      >
+          showMigratePanel={import.meta.env.VITE_V3_TOKEN_ADDRESS && isNotTablet}
-        {import.meta.env.VITE_V3_TOKEN_ADDRESS && isNotTablet && <Styled.MigratePanel />}
+        >
+          {import.meta.env.VITE_V3_TOKEN_ADDRESS && isNotTablet && <Styled.MigratePanel />}
 
-        {isTablet ? (
+          {isTablet ? (
-          <Styled.LaunchIncentivesPanel />
-        ) : (
-          <>
             <Styled.LaunchIncentivesPanel />
-            <Styled.DYDXBalancePanel />
+          ) : (
-          </>
+            <>
-        )}
+              <Styled.LaunchIncentivesPanel />
+              <Styled.DYDXBalancePanel />
+            </>
+          )}
 
-        {testFlags.showTradingRewards && (
+          {showTradingRewards && (
-          <Styled.TradingRewardsColumn>
+            <Styled.TradingRewardsColumn>
-            <TradingRewardsSummaryPanel />
+              <TradingRewardsSummaryPanel />
-            {isTablet && <RewardsHelpPanel />}
+              {isTablet && <RewardsHelpPanel />}
-            <RewardHistoryPanel />
+              <RewardHistoryPanel />
-          </Styled.TradingRewardsColumn>
+            </Styled.TradingRewardsColumn>
-        )}
+          )}
 
-        {isNotTablet && (
+          {isNotTablet && (
-          <Styled.OtherColumn showTradingRewards={testFlags.showTradingRewards}>
+            <Styled.OtherColumn showTradingRewards={showTradingRewards}>
-            <NewMarketsPanel />
+              <RewardsHelpPanel />
-            <GovernancePanel />
+            </Styled.OtherColumn>
-            <StakingPanel />
+          )}
-            <RewardsHelpPanel />
+        </Styled.GridLayout>
-          </Styled.OtherColumn>
+      </DetachedSection>
-        )}
+    </div>
-      </Styled.GridLayout>
-    </Styled.Page>
   );
 };
 
@@ -76,27 +77,6 @@ export default RewardsPage;
 
 const Styled: Record<string, AnyStyledComponent> = {};
 
-Styled.Page = styled.div`
-  ${layoutMixins.contentContainerPage}
-  padding: 2rem;
-  align-items: center;
-
-  > * {
-    --content-max-width: 80rem;
-    max-width: min(calc(100vw - 4rem), var(--content-max-width));
-  }
-
-  @media ${breakpoints.tablet} {
-    --stickyArea-topHeight: var(--page-header-height-mobile);
-    padding: 0 1rem 1rem;
-
-    > * {
-      max-width: calc(100vw - 2rem);
-      width: 100%;
-    }
-  }
-`;
-
 Styled.MobileHeader = styled.header`
   ${layoutMixins.contentSectionDetachedScrollable}
   ${layoutMixins.stickyHeader}
@@ -113,6 +93,7 @@ Styled.GridLayout = styled.div<{ showTradingRewards?: boolean; showMigratePanel?
   display: grid;
   grid-template-columns: 2fr 1fr;
   gap: var(--gap);
+  max-width: 80rem;
 
   > * {
     gap: var(--gap);
@@ -123,24 +104,39 @@ Styled.GridLayout = styled.div<{ showTradingRewards?: boolean; showMigratePanel?
       ? css`
           grid-template-areas:
             'migrate migrate'
-            'incentives balance'
+            'incentives incentives'
+            'balance balance'
             'rewards other';
         `
       : showTradingRewards
       ? css`
-          grid-template-areas: 'incentives balance' 'rewards other';
+          grid-template-areas:
+            'incentives balance'
+            'rewards other';
         `
       : showMigratePanel
       ? css`
-          grid-template-areas: 'migrate migrate' 'incentives balance' 'other other';
+          grid-template-areas:
+            'migrate migrate'
+            'incentives incentives'
+            'balance balance'
+            'other other';
         `
       : css`
-          grid-template-areas: 'incentives balance' 'other other';
+          grid-template-areas:
+            'incentives balance'
+            'other other';
         `};
 
+  @media ${breakpoints.notTablet} {
+    padding: 1rem;
+  }
+
   @media ${breakpoints.tablet} {
     --gap: 1rem;
     grid-template-columns: 1fr;
+    width: calc(100vw - 2rem);
+    margin: 0 auto;
 
     ${({ showTradingRewards }) =>
       showTradingRewards
@@ -187,13 +183,3 @@ Styled.OtherColumn = styled.div<{ showTradingRewards?: boolean }>`
       }
     `}
 `;
-
-Styled.RewardHistoryHeader = styled.div`
-  h3 {
-    font: var(--font-medium-book);
-    color: var(--color-text-2);
-  }
-
-  padding: 1rem 1.5rem 0;
-  margin-bottom: -0.5rem;
-`;

src/pages/token/rewards/TradingRewardsSummaryPanel.tsx

@@ -3,8 +3,8 @@ import styled, { AnyStyledComponent } from 'styled-components';
 import { shallowEqual, useSelector } from 'react-redux';
 
 import { STRING_KEYS } from '@/constants/localization';
-import { layoutMixins } from '@/styles/layoutMixins';
 import { useStringGetter, useTokenConfigs } from '@/hooks';
+import { layoutMixins } from '@/styles/layoutMixins';
 
 import { AssetIcon } from '@/components/AssetIcon';
 import { Details } from '@/components/Details';
@@ -18,7 +18,10 @@ import abacusStateManager from '@/lib/abacus';
 export const TradingRewardsSummaryPanel = () => {
   const stringGetter = useStringGetter();
   const { chainTokenLabel } = useTokenConfigs();
-  const currentWeekTradingReward = useSelector(getHistoricalTradingRewardsForCurrentWeek, shallowEqual);
+  const currentWeekTradingReward = useSelector(
+    getHistoricalTradingRewardsForCurrentWeek,
+    shallowEqual
+  );
 
   useEffect(() => {
     abacusStateManager.refreshHistoricalTradingRewards();

src/pages/token/staking/StakingPage.tsx

@@ -0,0 +1,70 @@
+import styled, { AnyStyledComponent } from 'styled-components';
+
+import { breakpoints } from '@/styles';
+import { layoutMixins } from '@/styles/layoutMixins';
+
+import { DetachedSection } from '@/components/ContentSection';
+import { ContentSectionHeader } from '@/components/ContentSectionHeader';
+import { useStringGetter } from '@/hooks';
+
+import { StakingPanel } from './StakingPanel';
+import { StrideStakingPanel } from './StrideStakingPanel';
+import { DYDXBalancePanel } from '../rewards/DYDXBalancePanel';
+import { STRING_KEYS } from '@/constants/localization';
+
+export default () => {
+  const stringGetter = useStringGetter();
+  return (
+    <DetachedSection>
+      <Styled.HeaderSection>
+        <ContentSectionHeader
+          title={stringGetter({ key: STRING_KEYS.STAKING_REWARDS })}
+          subtitle={stringGetter({ key: STRING_KEYS.STAKING_PAGE_SUBTITLE })}
+        />
+      </Styled.HeaderSection>
+
+      <Styled.ContentWrapper>
+        <Styled.Row>
+          <Styled.InnerRow>
+            <StrideStakingPanel />
+            <StakingPanel />
+          </Styled.InnerRow>
+          <DYDXBalancePanel />
+        </Styled.Row>
+      </Styled.ContentWrapper>
+    </DetachedSection>
+  );
+};
+
+const Styled: Record<string, AnyStyledComponent> = {};
+
+Styled.HeaderSection = styled.section`
+  ${layoutMixins.contentSectionDetached}
+
+  @media ${breakpoints.tablet} {
+    ${layoutMixins.flexColumn}
+    gap: 1rem;
+
+    margin-bottom: 0.5rem;
+  }
+`;
+
+Styled.ContentWrapper = styled.div`
+  ${layoutMixins.flexColumn}
+  gap: 1.5rem;
+  max-width: 80rem;
+  padding: 0 1rem;
+`;
+
+Styled.Row = styled.div`
+  gap: 1rem;
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+`;
+
+Styled.InnerRow = styled.div`
+  gap: 1rem;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  height: fit-content;
+`;

src/pages/token/staking/StakingPanel.tsx

@@ -1,7 +1,6 @@
 import styled, { AnyStyledComponent } from 'styled-components';
 import { useDispatch } from 'react-redux';
 
-import { ButtonAction, ButtonSize } from '@/constants/buttons';
 import { STRING_KEYS } from '@/constants/localization';
 import { DialogTypes } from '@/constants/dialogs';
 
@@ -14,22 +13,19 @@ import { Link } from '@/components/Link';
 
 import { openDialog } from '@/state/dialogs';
 
-export const StakingPanel = () => {
+export const StakingPanel = ({ className }: { className?: string }) => {
   const stringGetter = useStringGetter();
   const dispatch = useDispatch();
   const { stakingLearnMore } = useURLConfigs();
 
   return (
-    <Panel
+    <Styled.Panel
-      slotHeaderContent={<Styled.Title>{stringGetter({ key: STRING_KEYS.STAKING })}</Styled.Title>}
+      className={className}
-      slotRight={
+      slotHeaderContent={
-        <Styled.Arrow>
+        <Styled.Header>
-          <Styled.IconButton
+          <Styled.Title>{stringGetter({ key: STRING_KEYS.STAKE_WITH_KEPLR })}</Styled.Title>
-            action={ButtonAction.Base}
+          <Styled.Img src="/third-party/keplr.png" alt={stringGetter({ key: STRING_KEYS.KEPLR })} />
-            iconName={IconName.Arrow}
+        </Styled.Header>
-            size={ButtonSize.Small}
-          />
-        </Styled.Arrow>
       }
       onClick={() => dispatch(openDialog({ type: DialogTypes.ExternalNavKeplr }))}
     >
@@ -39,12 +35,40 @@ export const StakingPanel = () => {
           {stringGetter({ key: STRING_KEYS.LEARN_MORE })} →
         </Link>
       </Styled.Description>
-    </Panel>
+    </Styled.Panel>
   );
 };
 
 const Styled: Record<string, AnyStyledComponent> = {};
 
+Styled.Panel = styled(Panel)`
+  align-items: start;
+
+  header {
+    justify-content: unset;
+    padding-bottom: 0;
+  }
+`;
+
+Styled.Header = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+`;
+
+Styled.Title = styled.h3`
+  font: var(--font-medium-book);
+  color: var(--color-text-2);
+`;
+
+Styled.Img = styled.img`
+  width: 2rem;
+  height: 2rem;
+  margin-left: 0.5rem;
+`;
+
 Styled.Description = styled.div`
   color: var(--color-text-0);
   --link-color: var(--color-text-1);
@@ -61,13 +85,3 @@ Styled.IconButton = styled(IconButton)`
   color: var(--color-text-0);
   --color-border: var(--color-layer-6);
 `;
-
-Styled.Arrow = styled.div`
-  padding-right: 1.5rem;
-`;
-
-Styled.Title = styled.h3`
-  font: var(--font-medium-book);
-  color: var(--color-text-2);
-  margin-bottom: -1rem;
-`;

src/pages/token/staking/StrideStakingPanel.tsx

@@ -0,0 +1,97 @@
+import styled, { AnyStyledComponent } from 'styled-components';
+import { useDispatch } from 'react-redux';
+
+import { STRING_KEYS } from '@/constants/localization';
+import { DialogTypes } from '@/constants/dialogs';
+import { useStringGetter, useTokenConfigs, useURLConfigs } from '@/hooks';
+
+import { IconButton } from '@/components/IconButton';
+import { Link } from '@/components/Link';
+import { Panel } from '@/components/Panel';
+import { Tag } from '@/components/Tag';
+
+import { openDialog } from '@/state/dialogs';
+
+export const StrideStakingPanel = ({ className }: { className?: string }) => {
+  const stringGetter = useStringGetter();
+  const dispatch = useDispatch();
+  const { stakingLearnMore } = useURLConfigs();
+  const { chainTokenLabel } = useTokenConfigs();
+
+  return (
+    <Styled.Panel
+      className={className}
+      slotHeaderContent={
+        <Styled.Header>
+          <Styled.Title>
+            {stringGetter({ key: STRING_KEYS.LIQUID_STAKE_W_STRIDE })}
+            <Tag isHighlighted>{stringGetter({ key: STRING_KEYS.NEW })}</Tag>
+          </Styled.Title>
+          <Styled.Img src="/third-party/stride.png" alt="Stride" />
+        </Styled.Header>
+      }
+      onClick={() => dispatch(openDialog({ type: DialogTypes.ExternalNavStride }))}
+    >
+      <Styled.Description>
+        {stringGetter({
+          key: STRING_KEYS.LIQUID_STAKE_STRIDE_DESCRIPTION,
+          params: { TOKEN_DENOM: chainTokenLabel },
+        })}
+        <Link href={stakingLearnMore} onClick={(e) => e.stopPropagation()}>
+          {stringGetter({ key: STRING_KEYS.LEARN_MORE })} →
+        </Link>
+      </Styled.Description>
+    </Styled.Panel>
+  );
+};
+
+const Styled: Record<string, AnyStyledComponent> = {};
+
+Styled.Panel = styled(Panel)`
+  align-items: start;
+
+  header {
+    justify-content: unset;
+    padding-bottom: 0;
+  }
+`;
+
+Styled.Header = styled.div`
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+`;
+
+Styled.Title = styled.h3`
+  font: var(--font-medium-book);
+  color: var(--color-text-2);
+
+  display: flex;
+  align-items: center;
+  gap: 0.5ch;
+`;
+
+Styled.Img = styled.img`
+  width: 2rem;
+  height: 2rem;
+  margin-left: 0.5rem;
+`;
+
+Styled.Description = styled.div`
+  color: var(--color-text-0);
+  --link-color: var(--color-text-1);
+
+  a {
+    display: inline;
+    ::before {
+      content: ' ';
+    }
+  }
+`;
+
+Styled.IconButton = styled(IconButton)`
+  color: var(--color-text-0);
+  --color-border: var(--color-layer-6);
+`;

src/pages/trade/TradeDialogTrigger.tsx

@@ -3,7 +3,7 @@ import { useSelector, shallowEqual } from 'react-redux';
 import styled, { AnyStyledComponent } from 'styled-components';
 
 import { STRING_KEYS } from '@/constants/localization';
-import { TRADE_TYPE_STRINGS } from '@/constants/trade';
+import { ORDER_TYPE_STRINGS } from '@/constants/trade';
 
 import { layoutMixins } from '@/styles/layoutMixins';
 
@@ -43,7 +43,7 @@ export const TradeDialogTrigger = () => {
             <Styled.TradeSummary>
               <Styled.TradeType>
                 <span>
-                  {stringGetter({ key: TRADE_TYPE_STRINGS[selectedTradeType].tradeTypeKey })}
+                  {stringGetter({ key: ORDER_TYPE_STRINGS[selectedTradeType].orderTypeKey })}
                 </span>
                 <OrderSideTag size={TagSize.Medium} orderSide={selectedOrderSide} />
               </Styled.TradeType>

src/state/perpetualsSelectors.ts

@@ -107,6 +107,12 @@ export const getCurrentMarketHistoricalFundings = createSelector(
     currentMarketId ? historicalFundings?.[currentMarketId] ?? [] : []
 );
 
+/**
+ * @returns oracle price of the market the user is currently viewing
+ */
+export const getCurrentMarketOraclePrice = (state: RootState) =>
+  getCurrentMarketData(state)?.oraclePrice;
+
 /**
  * @returns Mid market price for the market the user is currently viewing
  */

src/styles/globalStyle.ts

@@ -2,6 +2,10 @@ import { createGlobalStyle } from 'styled-components';
 
 export const GlobalStyle = createGlobalStyle`
   :root {
+    --color-white: ${({ theme }) => theme.white};
+    --color-green: ${({ theme }) => theme.green};
+    --color-red: ${({ theme }) => theme.red};
+
     --color-layer-0: ${({ theme }) => theme.layer0};
     --color-layer-1: ${({ theme }) => theme.layer1};
     --color-layer-2: ${({ theme }) => theme.layer2};

src/styles/themes.ts

@@ -4,6 +4,10 @@ import { BrightnessFilterToken, ColorToken, OpacityToken } from '@/constants/sty
 import { generateFadedColorVariant } from '@/lib/styles';
 
 const ClassicThemeBase: ThemeColorBase = {
+  white: ColorToken.White,
+  green: ColorToken.Green1,
+  red: ColorToken.Red2,
+
   layer0: ColorToken.GrayBlue7,
   layer1: ColorToken.GrayBlue6,
   layer2: ColorToken.GrayBlue5,
@@ -51,7 +55,6 @@ const ClassicThemeBase: ThemeColorBase = {
 
   inputBackground: ColorToken.GrayBlue3,
   popoverBackground: generateFadedColorVariant(ColorToken.GrayBlue4, OpacityToken.Opacity90),
-  switchThumbActiveBackground: ColorToken.White,
   toggleBackground: ColorToken.GrayBlue3,
   tooltipBackground: generateFadedColorVariant(ColorToken.GrayBlue3, OpacityToken.Opacity66),
 
@@ -61,6 +64,10 @@ const ClassicThemeBase: ThemeColorBase = {
 };
 
 const DarkThemeBase: ThemeColorBase = {
+  white: ColorToken.White,
+  green: ColorToken.Green0,
+  red: ColorToken.Red0,
+
   layer0: ColorToken.Black,
   layer1: ColorToken.DarkGray11,
   layer2: ColorToken.DarkGray13,
@@ -108,7 +115,6 @@ const DarkThemeBase: ThemeColorBase = {
 
   inputBackground: ColorToken.DarkGray6,
   popoverBackground: generateFadedColorVariant(ColorToken.DarkGray8, OpacityToken.Opacity90),
-  switchThumbActiveBackground: ColorToken.White,
   toggleBackground: ColorToken.DarkGray6,
   tooltipBackground: generateFadedColorVariant(ColorToken.DarkGray6, OpacityToken.Opacity66),
 
@@ -118,6 +124,10 @@ const DarkThemeBase: ThemeColorBase = {
 };
 
 const LightThemeBase: ThemeColorBase = {
+  white: ColorToken.White,
+  green: ColorToken.Green2,
+  red: ColorToken.Red1,
+
   layer0: ColorToken.White,
   layer1: ColorToken.LightGray6,
   layer2: ColorToken.White,
@@ -165,7 +175,6 @@ const LightThemeBase: ThemeColorBase = {
 
   inputBackground: ColorToken.White,
   popoverBackground: generateFadedColorVariant(ColorToken.LightGray8, OpacityToken.Opacity90),
-  switchThumbActiveBackground: ColorToken.White,
   toggleBackground: ColorToken.LightGray4,
   tooltipBackground: generateFadedColorVariant(ColorToken.LightGray7, OpacityToken.Opacity66),