more details nits

wrap details item
Liquid Staking CTA (#281 )
2024-02-07 15:18:20 -05:00 · 2024-02-07 15:18:15 -05:00 · 2024-02-07 11:17:54 -08:00 · 2024-02-07 11:02:26 -08:00 · 2024-02-07 10:10:22 -08:00 · 2024-02-07 09:49:46 -08:00
178 changed files with 54717 additions and 2848 deletions
@@ -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=
@@ -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
@@ -2,61 +2,102 @@ 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 { AppThemeProvider } from '@/hooks/useAppTheme';
+import {
+  AppTheme,
+  AppThemeSystemSetting,
+  AppColorMode,
+  setAppThemeSetting,
+  setAppColorMode,
+} from '@/state/configs';

-import { AppTheme, setAppTheme } 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);

  useEffect(() => {
-    store.dispatch(setAppTheme(theme));
-    switch (theme) {
-      case AppTheme.Dark: {
-        document?.documentElement?.classList.remove('theme-light');
-        document?.documentElement?.classList.add('theme-dark');
-        break;
-      }
-      case AppTheme.Light: {
-        document?.documentElement?.classList.remove('theme-dark');
-        document?.documentElement?.classList.add('theme-light');
-        break;
-      }
-      case AppTheme.Classic: {
-        document?.documentElement?.classList.remove('theme-dark', 'theme-light');
-        break;
-      }
-    }
-  }, [theme]);
+    store.dispatch(setAppThemeSetting(theme));
+    store.dispatch(setAppColorMode(colorMode));
+  }, [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>
        <h4>Active Theme:</h4>
-        <SelectMenu
-          value={theme}
-          onValueChange={setTheme}
-        >
+        <SelectMenu value={theme} onValueChange={setTheme}>
          {[
            {
              value: AppTheme.Classic,
              label: 'Default theme',
            },
+            {
+              value: AppThemeSystemSetting.System,
+              label: 'System theme',
+            },
            {
              value: AppTheme.Dark,
              label: 'Dark theme',
@@ -66,20 +107,28 @@ export const StoryWrapper: React.FC<{ children: React.ReactNode }> = ({ children
              label: 'Light theme',
            },
          ].map(({ value, label }) => (
-            <SelectItem
-              key={value}
-              value={value}
-              label={label}
-            />
+            <SelectItem key={value} value={value} label={label} />
+          ))}
+        </SelectMenu>
+        <h4>Active Color Mode:</h4>
+        <SelectMenu value={colorMode} onValueChange={setColorMode}>
+          {[
+            {
+              value: AppColorMode.GreenUp,
+              label: 'Green up',
+            },
+            {
+              value: AppColorMode.RedUp,
+              label: 'Red up',
+            },
+          ].map(({ value, label }) => (
+            <SelectItem key={value} value={value} label={label} />
          ))}
        </SelectMenu>
      </StoryHeader>
      <hr />
-      <AppThemeProvider>
-        <GlobalStyle />
-        <StoryContent>{children}</StoryContent>
-      </AppThemeProvider>
-      </Provider>
+      {content}
+    </Provider>
  );
 };

@@ -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
@@ -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",
@@ -39,9 +40,9 @@
    "@cosmjs/proto-signing": "^0.32.1",
    "@cosmjs/stargate": "^0.32.1",
    "@cosmjs/tendermint-rpc": "^0.32.1",
-    "@dydxprotocol/v4-abacus": "^1.2.5",
-    "@dydxprotocol/v4-client-js": "^1.0.14",
-    "@dydxprotocol/v4-localization": "^1.1.11",
+    "@dydxprotocol/v4-abacus": "^1.4.2",
+    "@dydxprotocol/v4-client-js": "^1.0.20",
+    "@dydxprotocol/v4-localization": "^1.1.25",
    "@ethersproject/providers": "^5.7.2",
    "@js-joda/core": "^5.5.3",
    "@radix-ui/react-accordion": "^1.1.2",
@@ -92,6 +93,7 @@
    "buffer": "^6.0.3",
    "cmdk": "^0.2.0",
    "color": "^4.2.3",
+    "cosmjs-types": "^0.9.0",
    "crypto-js": "^4.1.1",
    "ethers": "^6.6.1",
    "graz": "^0.0.43",
@@ -116,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",
@@ -155,5 +157,10 @@
    "vitest": "^0.32.2",
    "w3name": "^1.0.8",
    "web3.storage": "^4.5.4"
+  },
+  "pnpm": {
+    "overrides": {
+      "follow-redirects": "1.15.3"
+    }
  }
 }
@@ -0,0 +1,22 @@
+[
+  {
+    "relation": ["delegate_permission/common.handle_all_urls"],
+    "target": {
+      "namespace": "android_app",
+      "package_name": "exchange.dydx.trading.debug",
+      "sha256_cert_fingerprints": [
+        "8A:9C:CC:49:B0:35:9A:91:67:CB:98:B0:B5:87:92:5F:9E:B7:EF:CE:A0:47:57:85:A4:35:3E:0C:E1:56:9E:A2"
+      ]
+    }
+  },
+  {
+    "relation": ["delegate_permission/common.handle_all_urls"],
+    "target": {
+      "namespace": "android_app",
+      "package_name": "exchange.dydx.trading",
+      "sha256_cert_fingerprints": [
+        "B2:2D:CC:27:9D:52:05:98:63:C9:7B:34:36:70:A3:8E:00:31:28:08:2D:2E:70:76:C9:31:AE:F9:55:21:15:A5"
+      ]
+    }
+  }
+]
@@ -0,0 +1,19 @@
+<svg width="120" height="97" viewBox="0 0 120 97" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="8" width="120" height="1" fill="currentColor"/>
+<rect y="18" width="120" height="1" fill="currentColor"/>
+<rect y="28" width="120" height="1" fill="currentColor"/>
+<rect y="38" width="120" height="1" fill="currentColor"/>
+<rect y="48" width="120" height="1" fill="currentColor"/>
+<rect y="58" width="120" height="1" fill="currentColor"/>
+<rect y="68" width="120" height="1" fill="currentColor"/>
+<rect y="78" width="120" height="1" fill="currentColor"/>
+<rect y="88" width="120" height="1" fill="currentColor"/>
+<rect x="18" width="1" height="97" fill="currentColor"/>
+<rect x="32" width="1" height="97" fill="currentColor"/>
+<rect x="46" width="1" height="97" fill="currentColor"/>
+<rect x="60" width="1" height="97" fill="currentColor"/>
+<rect x="74" width="1" height="97" fill="currentColor"/>
+<rect x="88" width="1" height="97" fill="currentColor"/>
+<rect x="102" width="1" height="97" fill="currentColor"/>
+<path d="M0 0H120V97H0V0Z" fill="url(#paint0_radial_314_37586)"/>
+</svg>
@@ -0,0 +1,20 @@
+<svg width="90" height="39" viewBox="0 0 90 39" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect y="31.2344" width="2.57142" height="7.71427" fill="#3ED9A4"/>
+<rect x="5.14258" y="28.6648" width="2.57142" height="5.14284" fill="#E45555"/>
+<rect x="25.7139" y="26.0923" width="2.57142" height="10.2857" fill="#E45555"/>
+<rect x="51.4283" y="28.6648" width="2.57142" height="5.14284" fill="#E45555"/>
+<rect x="56.5712" y="31.2344" width="2.57142" height="5.14284" fill="#E45555"/>
+<rect x="77.1426" y="18.3767" width="2.57142" height="5.14284" fill="#E45555"/>
+<rect x="41.1427" y="23.5198" width="2.57142" height="5.14284" fill="#E45555"/>
+<rect x="10.2856" y="28.6648" width="2.57142" height="10.2857" fill="#3ED9A4"/>
+<rect x="61.7143" y="23.5198" width="2.57142" height="10.2857" fill="#3ED9A4"/>
+<rect x="66.8569" y="20.9492" width="2.57142" height="5.14284" fill="#3ED9A4"/>
+<rect x="71.9997" y="13.2346" width="2.57142" height="7.71427" fill="#3ED9A4"/>
+<rect x="82.2856" y="10.6631" width="2.57142" height="10.2857" fill="#3ED9A4"/>
+<rect x="87.4287" y="0.37793" width="2.57142" height="15.4285" fill="#3ED9A4"/>
+<rect x="15.4284" y="26.0923" width="2.57142" height="5.14284" fill="#3ED9A4"/>
+<rect x="20.5714" y="23.5198" width="2.57142" height="5.14284" fill="#3ED9A4"/>
+<rect x="30.857" y="31.2344" width="2.57142" height="5.14284" fill="#3ED9A4"/>
+<rect x="35.9999" y="26.0923" width="2.57142" height="5.14284" fill="#3ED9A4"/>
+<rect x="46.2853" y="26.0923" width="2.57142" height="2.57142" fill="#3ED9A4"/>
+</svg>
@@ -0,0 +1,8 @@
+[
+  {
+      "name": "coinbase",
+      "label": "Coinbase",
+      "icon": "/exchanges/coinbase.png",
+      "depositType": "noble"
+  }
+]
@@ -69,6 +69,13 @@
    "whitepaperLink": "https://bitcoincash.org/",
    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/bitcoin-cash/"
  },
+  "BONK-USD": {
+    "name": "BONK COIN",
+    "tags": [],
+    "websiteLink": "https://bonkcoin.com/",
+    "whitepaperLink": "https://bonkcoin.com/",
+    "coinMarketCapsLink": "https://coinmarketcap.com/currencies/bonk1/"
+  },
  "BLUR-USD": {
    "name": "Blur",
    "tags": [],
@@ -169,6 +176,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"],
@@ -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 -->
@@ -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`
@@ -3,12 +3,13 @@ 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');

@@ -18,8 +19,34 @@ if(AMPLITUDE_API_KEY){
        `;

    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."))}();
-        </script>`;
+      !(function () {
+        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>',
@@ -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);
+  }
+}
@@ -5,7 +5,7 @@ import { WagmiConfig } from 'wagmi';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { GrazProvider } from 'graz';

-import { AppRoute, DEFAULT_TRADE_ROUTE } from '@/constants/routes';
+import { AppRoute, DEFAULT_TRADE_ROUTE, MarketsRoute } from '@/constants/routes';

 import {
  useBreakpoints,
@@ -16,11 +16,12 @@ import {
 } from '@/hooks';
 import { DydxProvider } from '@/hooks/useDydxClient';
 import { AccountsProvider } from '@/hooks/useAccounts';
-import { AppThemeProvider } from '@/hooks/useAppTheme';
+import { AppThemeAndColorModeProvider } from '@/hooks/useAppThemeAndColorMode';
 import { DialogAreaProvider, useDialogArea } from '@/hooks/useDialogArea';
 import { LocaleProvider } from '@/hooks/useLocaleSeparators';
 import { NotificationsProvider } from '@/hooks/useNotifications';
 import { LocalNotificationsProvider } from '@/hooks/useLocalNotifications';
+import { PotentialMarketsProvider } from '@/hooks/usePotentialMarkets';
 import { RestrictionProvider } from '@/hooks/useRestrictions';
 import { SubaccountProvider } from '@/hooks/useSubaccount';

@@ -44,15 +45,16 @@ import '@/styles/constants.css';
 import '@/styles/fonts.css';
 import '@/styles/web3modal.css';

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

 const queryClient = new QueryClient();

@@ -81,8 +83,11 @@ const Content = () => {
                <Route path={AppRoute.Trade} element={<TradePage />} />
              </Route>

-              <Route path={AppRoute.Markets} element={<MarketsPage />} />
-              <Route path={`/${chainTokenLabel}`} element={<RewardsPage />} />
+              <Route path={AppRoute.Markets}>
+                <Route path={MarketsRoute.New} element={<NewMarket />} />
+                <Route path={AppRoute.Markets} element={<MarketsPage />} />
+              </Route>
+              <Route path={`/${chainTokenLabel}/*`} element={<TokenPage />} />
              {isTablet && (
                <>
                  <Route path={AppRoute.Alerts} element={<AlertsPage />} />
@@ -136,7 +141,8 @@ const providers = [
  wrapProvider(LocalNotificationsProvider),
  wrapProvider(NotificationsProvider),
  wrapProvider(DialogAreaProvider),
-  wrapProvider(AppThemeProvider),
+  wrapProvider(PotentialMarketsProvider),
+  wrapProvider(AppThemeAndColorModeProvider),
 ];

 const App = () => {
@@ -201,6 +207,7 @@ Styled.Content = styled.div<{ isShowingHeader: boolean; isShowingFooter: boolean

 Styled.Main = styled.main`
  ${layoutMixins.contentSectionAttached}
+  box-shadow: none;

  grid-area: Main;

@@ -85,7 +85,7 @@ Styled.Trigger = styled(Trigger)`
  &:hover {
    ${Styled.Icon} {
      color: var(--color-text-2);
-      filter: brightness(1.1);
+      filter: brightness(var(--hover-filter-base));
    }
  }

@@ -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: {
@@ -16,6 +16,7 @@ const assetIcons = {
  AVAX: '/currencies/avax.png',
  BCH: '/currencies/bch.png',
  BLUR: '/currencies/blur.png',
+  BONK: '/currencies/bonk.png',
  BTC: '/currencies/btc.png',
  CELO: '/currencies/celo.png',
  COMP: '/currencies/comp.png',
@@ -30,6 +31,7 @@ const assetIcons = {
  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',
@@ -134,8 +134,8 @@ const ButtonStyle = css<StyleProps>`

  --button-textColor: var(--color-text-0);
  --button-backgroundColor: transparent;
-  --button-active-filter: brightness(0.9);
-  --button-hover-filter: brightness(1.1);
+  --button-active-filter: brightness(var(--active-filter));
+  --button-hover-filter: brightness(var(--hover-filter-base));
  --button-hover-textColor: var(--button-textColor);

  --button-radius: 0.5em;
@@ -89,9 +89,10 @@ const buttonActionVariants = {
    --button-border: solid var(--border-width) var(--color-border);
  `,
  [ButtonAction.Primary]: css`
-    --button-textColor: var(--color-text-2);
+    --button-textColor: var(--color-text-button);
    --button-backgroundColor: var(--color-accent);
    --button-border: solid var(--border-width) var(--color-border-white);
+    --button-hover-filter: brightness(var(--hover-filter-variant));
  `,

  [ButtonAction.Secondary]: css`
@@ -101,15 +102,17 @@ const buttonActionVariants = {
  `,

  [ButtonAction.Create]: css`
-    --button-textColor: var(--color-text-2);
-    --button-backgroundColor: var(--color-positive);
+    --button-textColor: var(--color-text-button);
+    --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-2);
-    --button-backgroundColor: var(--color-negative);
+    --button-textColor: var(--color-text-button);
+    --button-backgroundColor: var(--color-red);
    --button-border: solid var(--border-width) var(--color-border-white);
+    --button-hover-filter: brightness(var(--hover-filter-variant));
  `,

  [ButtonAction.Navigation]: css`
@@ -119,9 +122,10 @@ const buttonActionVariants = {
  `,

  [ButtonAction.Reset]: css`
-    --button-textColor: var(--color-negative);
+    --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));
  `,
 };

@@ -5,7 +5,7 @@ import { Checkbox, CheckboxProps } from '@/components/Checkbox';

 import { StoryWrapper } from '.ladle/components';

-export const Checkboxes: Story<CheckboxProps> = (args) => {
+export const CheckboxStory: Story<CheckboxProps> = (args) => {
  const [isChecked, setIsChecked] = useState(false);

  return (
@@ -21,4 +21,12 @@ export const Checkboxes: Story<CheckboxProps> = (args) => {
  );
 };

-Checkboxes.args = {};
+CheckboxStory.args = {};
+
+CheckboxStory.argTypes = {
+  disabled: {
+    options: [true, false],
+    control: { type: 'select' },
+    defaultValue: false,
+  }
+}
@@ -1,4 +1,4 @@
-import styled, { type AnyStyledComponent } from 'styled-components';
+import styled, { css, type AnyStyledComponent } from 'styled-components';
 import { Root, Indicator } from '@radix-ui/react-checkbox';
 import { CheckIcon } from '@radix-ui/react-icons';

@@ -9,6 +9,7 @@ type ElementProps = {
  onCheckedChange: (checked: boolean) => void;
  id?: string;
  label?: React.ReactNode;
+  disabled?: boolean;
 };

 type StyleProps = {
@@ -23,14 +24,25 @@ export const Checkbox: React.FC<CheckboxProps> = ({
  onCheckedChange,
  id,
  label,
+  disabled,
 }) => (
  <Styled.Container>
-    <Styled.Root className={className} checked={checked} onCheckedChange={onCheckedChange} id={id}>
+    <Styled.Root
+      className={className}
+      checked={checked}
+      disabled={disabled}
+      onCheckedChange={onCheckedChange}
+      id={id}
+    >
      <Styled.Indicator>
        <CheckIcon />
      </Styled.Indicator>
    </Styled.Root>
-    {label && <label htmlFor={id}>{label}</label>}
+    {label && (
+      <Styled.Label disabled={disabled} htmlFor={id}>
+        {label}
+      </Styled.Label>
+    )}
  </Styled.Container>
 );

@@ -40,25 +52,27 @@ Styled.Container = styled.div`
  ${layoutMixins.row}
  gap: 1ch;
  font: var(--font-small-book);
-
-  label {
-    cursor: pointer;
-  }
 `;

 Styled.Root = styled(Root)`
  --checkbox-backgroundColor: var(--color-layer-0);
+  --checkbox-borderColor: var(--color-border);

  min-width: 1.25rem;
  height: 1.25rem;

  border-radius: 0.375rem;
-  border: var(--border-width) solid var(--color-border);
+  border: var(--border-width) solid var(--checkbox-borderColor);
  background-color: var(--checkbox-backgroundColor);

  &[data-state='checked'] {
    --checkbox-backgroundColor: var(--color-accent);
  }
+
+  &[data-disabled] {
+    cursor: not-allowed;
+    --checkbox-backgroundColor: var(--color-layer-1);
+  }
 `;

 Styled.Indicator = styled(Indicator)`
@@ -66,5 +80,17 @@ Styled.Indicator = styled(Indicator)`
  align-items: center;
  justify-content: center;

+  color: var(--color-text-button);
+`;
+
+Styled.Label = styled.label<{ disabled?: boolean }>`
+  cursor: pointer;
  color: var(--color-text-2);
+
+  ${({ disabled }) =>
+    disabled &&
+    css`
+      cursor: not-allowed;
+      color: var(--color-text-0);
+    `}
 `;
@@ -50,10 +50,11 @@ export const ComboboxMenu = <MenuItemValue extends string, MenuGroupValue extend
      label={title}
      // value={highlightedCommand}
      // onValueChange={setHighlightedCommand}
-      filter={(value: string, search: string) => {
-        if (value.replace(/ /g, '').includes(search.replace(/ /g, ''))) return 1;
-        return 0;
-      }}
+      filter={(value: string, search: string) =>
+        value.replace(/ /g, '').toLowerCase().includes(search.replace(/ /g, '').toLowerCase())
+          ? 1
+          : 0
+      }
      className={className}
      $withStickyLayout={withStickyLayout}
    >
@@ -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 {
-    ${layoutMixins.column}
+  @media ${breakpoints.tablet} {
+    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;
-  }
 `;
@@ -77,7 +77,7 @@ Styled.InlineRow = styled.div<{ copied: boolean }>`
        `
      : css`
          &:hover {
-            filter: brightness(1.1);
+            filter: brightness(var(--hover-filter-base));
            text-decoration: underline;
          }
        `}
@@ -87,7 +87,7 @@ Styled.Icon = styled(Icon)<{ copied: boolean }>`
  ${({ copied }) =>
    copied &&
    css`
-      color: var(--color-positive);
+      color: var(--color-success);
    `}
 `;

@@ -96,7 +96,7 @@ Styled.IconButton = styled(IconButton)<{ copied: boolean }>`
    copied &&
    css`
      svg {
-        color: var(--color-positive);
+        color: var(--color-success);
      }
    `}
 `;
@@ -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
-        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',
-          },
-        ]}
-      />
+      <Details {...args} />
    </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`
@@ -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 {
-      align-self: stretch;
+    > :first-child > abbr {
+      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;
        }
@@ -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>
@@ -62,6 +62,6 @@ Styled.DiffArrowContainer = styled.span<DiffArrowProps>`
      `,
      down: css`
        transform: rotate(90deg);
-      `
+      `,
    }[direction || 'right'])}
 `;
@@ -75,7 +75,7 @@ Styled.DiffValue = styled.div<{ hasInvalidNewValue?: boolean }>`
  ${({ hasInvalidNewValue }) =>
    hasInvalidNewValue &&
    css`
-      color: var(--color-negative);
+      color: var(--color-error);
    `}
 `;

@@ -35,8 +35,8 @@ export const DropdownHeaderMenu = <MenuItemValue extends string>({
    <Root>
      <Styled.Trigger className={className} asChild>
        <div>
-        {children}
-        <Styled.DropdownIconButton iconName={IconName.Caret} isToggle />
+          {children}
+          <Styled.DropdownIconButton iconName={IconName.Caret} isToggle />
        </div>
      </Styled.Trigger>
      <Portal>
@@ -87,7 +87,7 @@ Styled.Trigger = styled(Trigger)`
  outline: none;

  :hover {
-    filter: brightness(1.1);
+    filter: brightness(var(--hover-filter-base));
  }
 `;

@@ -4,38 +4,43 @@ import { DropdownMenu } from '@/components/DropdownMenu';

 import { StoryWrapper } from '.ladle/components';

-export const DropdownMenuStory: Story<Parameters<typeof DropdownMenu>> = (args) => {
-  const exampleItems = [
-    {
-      value: '1',
-      label: 'Item 1',
-      onSelect: () => alert('Item 1 action'),
-    },
-    {
-      value: '2',
-      label: 'Item 2',
-      onSelect: () => alert('Item 2 action'),
-    },
-    {
-      value: '3',
-      label: 'Item 3',
-      onSelect: () => alert('Item 3 action'),
-    },
-  ];
-
+export const DropdownMenuStory: Story<Parameters<typeof DropdownMenu>[0]> = (args) => {
  return (
    <StoryWrapper>
-      <DropdownMenu
-        {...args}
-        items={exampleItems}
-      >
+      <DropdownMenu {...args}>
        <span>Menu</span>
      </DropdownMenu>
    </StoryWrapper>
  );
 };

-DropdownMenuStory.args = {};
+DropdownMenuStory.args = {
+  items: [
+    {
+      value: '0',
+      label: 'Item 0',
+      onSelect: () => alert('Item 0 action'),
+    },
+    {
+      value: '1',
+      label: 'Item 1 (accent)',
+      onSelect: () => alert('Item 1 action'),
+      highlightColor: 'accent',
+    },
+    {
+      value: '2',
+      label: 'Item 2 (create)',
+      onSelect: () => alert('Item 2 action'),
+      highlightColor: 'create',
+    },
+    {
+      value: '3',
+      label: 'Item 3 (destroy)',
+      onSelect: () => alert('Item 3 action'),
+      highlightColor: 'destroy',
+    },
+  ],
+};

 DropdownMenuStory.argTypes = {
  align: {
@@ -13,7 +13,7 @@ export type DropdownMenuItem<T> = {
  label: React.ReactNode;
  onSelect?: () => void;
  separator?: boolean;
-  highlightColor?: 'accent' | 'positive' | 'negative';
+  highlightColor?: 'accent' | 'create' | 'destroy';
 };

 type StyleProps = {
@@ -82,7 +82,7 @@ Styled.Separator = styled(Separator)`
  margin: 0.25rem 1rem;
 `;

-Styled.Item = styled(Item)<{ $highlightColor: 'accent' | 'positive' | 'negative' }>`
+Styled.Item = styled(Item)<{ $highlightColor: 'accent' | 'create' | 'destroy' }>`
  ${popoverMixins.item}
  --item-font-size: var(--dropdownMenu-item-font-size);
  ${({ $highlightColor }) =>
@@ -90,11 +90,11 @@ Styled.Item = styled(Item)<{ $highlightColor: 'accent' | 'positive' | 'negative'
      ['accent']: `
        --item-highlighted-textColor: var(--color-accent);
      `,
-      ['positive']: `
-        --item-highlighted-textColor: var(--color-positive);
+      ['create']: `
+        --item-highlighted-textColor: var(--color-green);
      `,
-      ['negative']: `
-        --item-highlighted-textColor: var(--color-negative);
+      ['destroy']: `
+        --item-highlighted-textColor: var(--color-red);
      `,
    }[$highlightColor])}

@@ -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
-        items={exampleItems}
-        value={item}
-        onValueChange={(value) => setItem(value)}
-        {...args}
-      />
+      <DropdownSelectMenu value={item} onValueChange={(value) => setItem(value)} {...args} />
    </StoryWrapper>
  );
 };

-DropdownSelectMenuStory.args = {};
+DropdownSelectMenuStory.args = {
+  items: exampleItems,
+  sideOffset: 1,
+  disabled: false,
+};

 DropdownSelectMenuStory.argTypes = {
  align: {
@@ -32,7 +32,7 @@ export const FormInput = forwardRef<HTMLInputElement, FormInputProps>(
      isValidationAttached={validationConfig?.attached}
    >
      <Styled.InputContainer hasSlotRight={!!slotRight}>
-        <Styled.WithLabel label={label} inputID={id}>
+        <Styled.WithLabel label={label} inputID={id} disabled={otherProps?.disabled}>
          <Input ref={ref} id={id} {...otherProps} />
        </Styled.WithLabel>
        {slotRight}
@@ -85,11 +85,11 @@ Styled.InputContainer = styled.div<{ hasSlotRight?: boolean }>`
    `}
 `;

-Styled.WithLabel = styled(WithLabel)`
+Styled.WithLabel = styled(WithLabel)<{ disabled?: boolean }>`
  ${formMixins.inputLabel}

  label {
-    cursor: text;
+    ${({ disabled }) => !disabled && 'cursor: text;'}
    padding: var(--form-input-paddingY) var(--form-input-paddingX) 0;
  }
 `;
@@ -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} />
@@ -13,6 +13,7 @@ import {
  CaretIcon,
  CautionCircleStrokeIcon,
  CautionCircleIcon,
+  ChaosLabsIcon,
  ChatIcon,
  CheckIcon,
  CheckCircleIcon,
@@ -24,6 +25,7 @@ import {
  CoinsIcon,
  CommentIcon,
  CopyIcon,
+  CurrencySignIcon,
  DepositIcon,
  DepthChartIcon,
  DiscordIcon,
@@ -34,6 +36,7 @@ import {
  FundingChartIcon,
  GearIcon,
  GiftboxIcon,
+  GovernanceIcon,
  HelpCircleIcon,
  HideIcon,
  HistoryIcon,
@@ -69,6 +72,7 @@ import {
  StarIcon,
  SunIcon,
  TerminalIcon,
+  TokenIcon,
  TradeIcon,
  TransferIcon,
  TriangleIcon,
@@ -90,6 +94,7 @@ export enum IconName {
  Caret = 'Caret',
  CautionCircle = 'CautionCircle',
  CautionCircleStroked = 'CautionCircleStroked',
+  ChaosLabs = 'ChaosLabs',
  Chat = 'Chat',
  Check = 'Check',
  CheckCircle = 'CheckCircle',
@@ -101,6 +106,7 @@ export enum IconName {
  Coins = 'Coins',
  Comment = 'Comment',
  Copy = 'Copy',
+  CurrencySign = 'CurrencySign',
  Deposit = 'Deposit',
  DepthChart = 'DepthChart',
  Discord = 'Discord',
@@ -111,6 +117,7 @@ export enum IconName {
  FundingChart = 'FundingChart',
  Gear = 'Gear',
  Giftbox = 'Giftbox',
+  Governance = 'Governance',
  HelpCircle = 'HelpCircle',
  Hide = 'Hide',
  History = 'History',
@@ -147,6 +154,7 @@ export enum IconName {
  Sun = 'Sun',
  Terminal = 'Terminal',
  TogglesMenu = 'TogglesMenu',
+  Token = 'Token',
  Trade = 'Trade',
  Transfer = 'Transfer',
  Triangle = 'Triangle',
@@ -168,6 +176,7 @@ const icons = {
  [IconName.Caret]: CaretIcon,
  [IconName.CautionCircle]: CautionCircleIcon,
  [IconName.CautionCircleStroked]: CautionCircleStrokeIcon,
+  [IconName.ChaosLabs]: ChaosLabsIcon,
  [IconName.Chat]: ChatIcon,
  [IconName.Check]: CheckIcon,
  [IconName.CheckCircle]: CheckCircleIcon,
@@ -179,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,
@@ -189,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,
@@ -224,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,
@@ -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>
@@ -11,6 +11,7 @@ export const LoadingSpinner: React.FC<{
  return (
    <Styled.Spinner className={className}>
      <Styled.LoadingSpinnerSvg
+        id={id}
        width="38"
        height="38"
        viewBox="0 0 38 38"
@@ -5,8 +5,24 @@ import { HashRouter } from 'react-router-dom';

 import { StoryWrapper } from '.ladle/components';

-export const NavigationMenuStory: Story<Parameters<typeof NavigationMenu>> = (args) => {
-  const exampleItems = [
+export const NavigationMenuStory: Story<
+  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'],
@@ -65,6 +65,9 @@ type ElementProps = {
    resolution?: number;
    stripRelativeWords?: boolean;
  };
+  timeOptions?: {
+    useUTC?: boolean;
+  };
  tag?: React.ReactNode;
  withParentheses?: boolean;
  locale?: string;
@@ -89,6 +92,7 @@ export const Output = ({
  relativeTimeFormatOptions = {
    format: 'singleCharacter',
  },
+  timeOptions,
  tag,
  withParentheses,
  locale = navigator.language || 'en-US',
@@ -116,6 +120,7 @@ export const Output = ({
          {value?.toString() ?? null}

          {tag && <Tag>{tag}</Tag>}
+          {slotRight}
        </Styled.Text>
      );
    }
@@ -165,16 +170,21 @@ export const Output = ({
      if ((typeof value !== 'string' && typeof value !== 'number') || !value) return null;
      const date = new Date(value);
      const dateString = {
-        [OutputType.Date]: date.toLocaleString(selectedLocale, { dateStyle: 'medium' }),
+        [OutputType.Date]: date.toLocaleString(selectedLocale, {
+          dateStyle: 'medium',
+          timeZone: timeOptions?.useUTC ? 'UTC' : undefined,
+        }),
        [OutputType.DateTime]: date.toLocaleString(selectedLocale, {
          dateStyle: 'short',
          timeStyle: 'short',
+          timeZone: timeOptions?.useUTC ? 'UTC' : undefined,
        }),
        [OutputType.Time]: date.toLocaleString(selectedLocale, {
          hour12: false,
          hour: '2-digit',
          minute: '2-digit',
          second: '2-digit',
+          timeZone: timeOptions?.useUTC ? 'UTC' : undefined,
        }),
      }[type];

@@ -1,10 +1,10 @@
 import type { Story } from '@ladle/react';

-import { Panel } from '@/components/Panel';
+import { Panel, PanelProps } from '@/components/Panel';

 import { StoryWrapper } from '.ladle/components';

-export const PanelStory: Story<{ slotHeader: React.ReactNode, children?: React.ReactNode }> = (args) => {
+export const PanelStory: Story<PanelProps> = (args) => {
  return (
    <StoryWrapper>
      <Panel {...args} />
@@ -13,6 +13,8 @@ export const PanelStory: Story<{ slotHeader: React.ReactNode, children?: React.R
 };

 PanelStory.args = {
-  slotHeader: 'Header',
+  slotHeaderContent: 'Header',
  children: 'Content',
+  slotRight: '1️⃣',
+  hasSeparator: true,
 };
@@ -6,7 +6,7 @@ import { Icon, IconName } from '@/components/Icon';
 import { layoutMixins } from '@/styles/layoutMixins';
 import { breakpoints } from '@/styles';

-type PanelProps = {
+type ElementProps = {
  slotHeaderContent?: React.ReactNode;
  slotHeader?: React.ReactNode;
  slotRight?: React.ReactNode;
@@ -16,11 +16,13 @@ type PanelProps = {
  onClick?: () => void;
 };

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

+export type PanelProps = ElementProps & StyleProps;
+
 export const Panel = ({
  slotHeaderContent,
  slotHeader,
@@ -31,7 +33,7 @@ export const Panel = ({
  onClick,
  hasSeparator,
  className,
-}: PanelProps & PanelStyleProps) => (
+}: PanelProps) => (
  <Styled.Panel onClick={onClick} className={className}>
    <Styled.Left>
      {href ? (
@@ -11,6 +11,7 @@ type ElementProps = {
 };

 type StyleProps = {
+  className?: string;
  hasLogo?: boolean;
  size?: number;
 };
@@ -18,7 +19,7 @@ type StyleProps = {
 const DARK_LOGO_MARK_URL = '/logos/logo-mark-dark.svg';
 const LIGHT_LOGO_MARK_URL = '/logos/logo-mark-light.svg';

-export const QrCode = ({ value, hasLogo, size = 300 }: ElementProps & StyleProps) => {
+export const QrCode = ({ className, value, hasLogo, size = 300 }: ElementProps & StyleProps) => {
  const ref = useRef<HTMLDivElement>(null);
  const appTheme: AppTheme = useSelector(getAppTheme);

@@ -74,7 +75,7 @@ export const QrCode = ({ value, hasLogo, size = 300 }: ElementProps & StyleProps
    }
  }, [appTheme, hasLogo]);

-  return <Styled.QrCode ref={ref} />;
+  return <Styled.QrCode className={className} ref={ref} />;
 };

 const Styled: Record<string, AnyStyledComponent> = {};
@@ -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} />
@@ -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
-          {...args}
-          items={exampleItems}
-        >
+        <SearchSelectMenu {...args} items={exampleItems}>
          {!selectedItem ? <span>Search and Select</span> : <span>{selectedItem}</span>}
        </SearchSelectMenu>
      </Container>
@@ -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);

@@ -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);
@@ -68,7 +68,7 @@ export type TableItem<TableRowData> = {
  onSelect?: (key: TableRowData) => void;
 };

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

  // collection,
@@ -141,7 +144,18 @@ export const Table = <TableRowData extends object, TableRowKey extends Key>({
  style,
 }: ElementProps<TableRowData, TableRowKey> & StyleProps) => {
  const [selectedKeys, setSelectedKeys] = useState(new Set<TableRowKey>());
-  const [numRowsToShow, setNumRowsToShow] = useState(initialNumRowsToShow);
+  const [numRowsToShow, setNumRowsToShow] = useState(viewMoreConfig?.initialNumRowsToShow);
+  const enableViewMore = viewMoreConfig !== undefined;
+
+  const onViewMoreClick = () => {
+    if (!viewMoreConfig) return;
+    const { numRowsPerPage } = viewMoreConfig;
+    if (numRowsPerPage) {
+      setNumRowsToShow((prev) => (prev ?? 0) + numRowsPerPage);
+    } else {
+      setNumRowsToShow(data.length);
+    }
+  };

  const currentBreakpoints = useBreakpoints();
  const shownColumns = columns.filter(
@@ -217,9 +231,7 @@ export const Table = <TableRowData extends object, TableRowKey extends Key>({
          }
          numColumns={shownColumns.length}
          onViewMoreClick={
-            numRowsToShow !== undefined && numRowsToShow < data.length
-              ? () => setNumRowsToShow(data.length)
-              : undefined
+            enableViewMore && numRowsToShow! < data.length ? onViewMoreClick : undefined
          }
          // shouldRowRender={shouldRowRender}
          hideHeader={hideHeader}
@@ -245,7 +257,7 @@ export const Table = <TableRowData extends object, TableRowKey extends Key>({
            )}
          </TableHeader>

-          <TableBody items={list.items.slice(0, numRowsToShow)}>
+          <TableBody items={enableViewMore ? list.items.slice(0, numRowsToShow) : list.items}>
            {(item) => (
              <Row key={getRowKey(item)}>
                {(columnKey) => (
@@ -512,7 +524,7 @@ const TableColumnHeader = <TableRowData extends object>({
 export const ViewMoreRow = ({ colSpan, onClick }: { colSpan: number; onClick: () => void }) => {
  const stringGetter = useStringGetter();
  return (
-    <Styled.Tr key="viewmore">
+    <Styled.ViewMoreTr key="viewmore">
      <Styled.Td
        colSpan={colSpan}
        onMouseDown={(e: MouseEvent) => e.preventDefault()}
@@ -522,7 +534,7 @@ export const ViewMoreRow = ({ colSpan, onClick }: { colSpan: number; onClick: ()
          {stringGetter({ key: STRING_KEYS.VIEW_MORE })}
        </Styled.ViewMoreButton>
      </Styled.Td>
-    </Styled.Tr>
+    </Styled.ViewMoreTr>
  );
 };

@@ -672,6 +684,8 @@ Styled.TableWrapper = styled.div<{
  --table-lastColumn-cell-align: end; // start | center | end | var(--table-cell-align)
  --tableCell-padding: 0 1rem;

+  --tableViewMore-borderColor: inherit;
+
  // Rules

  flex: 1;
@@ -781,7 +795,7 @@ Styled.Tr = styled.tr<{
      &:focus-visible,
      &:focus-within {
        --tableRow-currentBackgroundColor: var(--tableRow-hover-backgroundColor);
-        filter: brightness(1.1);
+        filter: brightness(var(--hover-filter-base));
      }
    `};

@@ -982,4 +996,8 @@ Styled.ViewMoreButton = styled(Button)`
    width: 0.675rem;
    margin-left: 0.5ch;
  }
-`;
+`;
+
+Styled.ViewMoreTr = styled(Styled.Tr)`
+  --border-color: var(--tableViewMore-borderColor);
+`;
@@ -13,29 +13,11 @@ enum TabItem {
  Item3 = 'Item3',
 }

-const TabItems = [
-  {
-    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) => {
+export const TabsStory: Story<Parameters<typeof Tabs>[0]> = (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 = {
@@ -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,23 @@ 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,
+  },
 };
@@ -1,20 +1,20 @@
 import styled, { css } from 'styled-components';

 export enum TagSize {
-  Small,
-  Medium,
+  Small = 'Small',
+  Medium = 'Medium',
 }

 export enum TagType {
-  Asset,
-  Side,
-  Number,
+  Asset = 'Asset',
+  Side = 'Side',
+  Number = 'Number',
 }

 export enum TagSign {
-  Positive,
-  Negative,
-  Neutral,
+  Positive = 'Positive',
+  Negative = 'Negative',
+  Neutral = 'Neutral',
 }

 type StyleProps = {
@@ -8,6 +8,7 @@ import { Button, type ButtonStateConfig, type ButtonProps } from '@/components/B

 type ElementProps = {
  timeoutInSeconds: number;
+  slotFinal?: ReactNode;
 } & ButtonProps;

 export type TimeoutButtonProps = ElementProps;
@@ -15,6 +16,7 @@ export type TimeoutButtonProps = ElementProps;
 export const TimeoutButton = ({
  children,
  timeoutInSeconds,
+  slotFinal,
  ...otherProps
 }: TimeoutButtonProps) => {
  const [timeoutDeadline] = useState(Date.now() + timeoutInSeconds * 1000);
@@ -23,6 +25,8 @@ export const TimeoutButton = ({

  const secondsLeft = Math.max(0, (timeoutDeadline - now) / 1000);

+  if (slotFinal && secondsLeft <= 0) return slotFinal;
+
  return (
    <Button
      {...otherProps}
@@ -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>
@@ -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),
@@ -117,7 +117,7 @@ Styled.ConfirmButton = styled(Styled.IconButton)`
  --button-backgroundColor: hsla(203, 25%, 19%, 1);

  svg {
-    color: var(--color-positive);
+    color: var(--color-green);
  }
 `;

@@ -125,7 +125,7 @@ Styled.CancelButton = styled(Styled.IconButton)`
  --button-backgroundColor: hsla(296, 16%, 18%, 1);

  svg {
-    color: var(--color-negative);
+    color: var(--color-red);
    width: 0.8em;
    height: 0.8em;

@@ -40,5 +40,5 @@ Styled.Details = styled(Details)`

  padding: 0.375rem 0.75rem 0.25rem;

-  font-size: 0.8125em;
+  font-size: var(--details-item-fontSize, 0.8125em);
 `;
@@ -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('');

@@ -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[] = [
-  {
-    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) => (
+export const WithReceiptStory: Story<Omit<Parameters<typeof WithReceipt>[0], 'slotReceipt'>> = (
+  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 = {
@@ -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}
 `;
@@ -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}>
@@ -119,6 +119,13 @@ export const InputSelectionOption = Abacus.exchange.dydx.abacus.output.input.Sel
 // ------ Wallet ------ //
 export type Wallet = Abacus.exchange.dydx.abacus.output.Wallet;
 export type AccountBalance = Abacus.exchange.dydx.abacus.output.AccountBalance;
+export type TradingRewards = Abacus.exchange.dydx.abacus.output.TradingRewards;
+export type HistoricalTradingReward = Abacus.exchange.dydx.abacus.output.HistoricalTradingReward;
+export const HistoricalTradingRewardsPeriod =
+  Abacus.exchange.dydx.abacus.state.manager.HistoricalTradingRewardsPeriod;
+const historicalTradingRewardsPeriod = [...HistoricalTradingRewardsPeriod.values()] as const;
+export type HistoricalTradingRewardsPeriods = (typeof historicalTradingRewardsPeriod)[number];
+
 export type Subaccount = Abacus.exchange.dydx.abacus.output.Subaccount;
 export type SubaccountPosition = Abacus.exchange.dydx.abacus.output.SubaccountPosition;
 export type SubaccountOrder = Abacus.exchange.dydx.abacus.output.SubaccountOrder;
@@ -202,6 +209,9 @@ export const RestrictionType = Abacus.exchange.dydx.abacus.output.Restriction;
 const restrictionTypes = [...RestrictionType.values()] as const;
 export type RestrictionTypes = (typeof restrictionTypes)[number];

+// ------ Api data ------ //
+export const ApiData = Abacus.exchange.dydx.abacus.state.manager.ApiData;
+
 // ------ Enum Conversions ------ //
 type IfEquals<X, Y, A, B> = (<T>() => T extends X ? 1 : 2) extends <T>() => T extends Y ? 1 : 2
  ? A
@@ -236,6 +246,15 @@ export const HISTORICAL_PNL_PERIODS: Record<
  [HistoricalPnlPeriod.Period90d.name]: HistoricalPnlPeriod.Period90d,
 };

+export const HISTORICAL_TRADING_REWARDS_PERIODS: Record<
+  KotlinIrEnumValues<typeof HistoricalTradingRewardsPeriod>,
+  HistoricalTradingRewardsPeriods
+> = {
+  [HistoricalTradingRewardsPeriod.MONTHLY.name]: HistoricalTradingRewardsPeriod.MONTHLY,
+  [HistoricalTradingRewardsPeriod.WEEKLY.name]: HistoricalTradingRewardsPeriod.WEEKLY,
+  [HistoricalTradingRewardsPeriod.DAILY.name]: HistoricalTradingRewardsPeriod.DAILY,
+};
+
 export const ORDER_STATUS_STRINGS: Record<KotlinIrEnumValues<typeof AbacusOrderStatus>, string> = {
  [AbacusOrderStatus.open.name]: STRING_KEYS.OPEN_STATUS,
  [AbacusOrderStatus.open.rawValue]: STRING_KEYS.OPEN_STATUS,
@@ -173,3 +173,5 @@ export type AnalyticsEventData<T extends AnalyticsEvent> =
        validatorUrl: string;
      }
    : never;
+
+export const DEFAULT_TRANSACTION_MEMO = 'dYdX Frontend (web)';
@@ -2,8 +2,10 @@ export enum DialogTypes {
  ClosePosition = 'ClosePosition',
  Deposit = 'Deposit',
  DisconnectWallet = 'DisconnectWallet',
+  DisplaySettings = 'DisplaySettings',
  ExchangeOffline = 'ExchangeOffline',
  ExternalLink = 'ExternalLink',
+  ExternalNavStride = 'ExternalNavStride',
  FillDetails = 'FillDetails',
  Help = 'Help',
  ExternalNavKeplr = 'ExternalNavKeplr',
@@ -19,6 +21,8 @@ export enum DialogTypes {
  Transfer = 'Transfer',
  Withdraw = 'Withdraw',
  ManageFunds = 'ManageFunds',
+  NewMarketMessageDetails = 'NewMarketMessageDetails',
+  NewMarketAgreement = 'NewMarketAgreement',
 }

 export enum TradeBoxDialogTypes {
@@ -0,0 +1,23 @@
+/**
+ * Temporary Indexer types
+ * remove when Indexer type lib is available through @dydxprotocol/v4-client-js
+ */
+export type PerpetualMarketResponse = {
+  clobPairId: string;
+  ticker: string;
+  status: string;
+  oraclePrice: string;
+  priceChange24H: string;
+  volume24H: string;
+  trades24H: number;
+  nextFundingRate: string;
+  initialMarginFraction: string;
+  maintenanceMarginFraction: string;
+  openInterest: string;
+  atomicResolution: number;
+  quantumConversionExponent: number;
+  tickSize: string;
+  stepSize: string;
+  stepBaseQuantums: number;
+  subticksPerTick: number;
+};
@@ -20,6 +20,7 @@ export enum LocalStorageKey {
  SelectedLocale = 'dydx.SelectedLocale',
  SelectedNetwork = 'dydx.SelectedNetwork',
  SelectedTheme = 'dydx.SelectedTheme',
+  SelectedColorMode = 'dydx.SelectedColorMode',
  SelectedTradeLayout = 'dydx.SelectedTradeLayout',
  TradingViewChartConfig = 'dydx.TradingViewChartConfig',
  HasSeenLaunchIncentives = 'dydx.HasSeenLaunchIncentives',
@@ -95,7 +95,7 @@ export type TooltipStrings = {
    stringParams?: any;
    urlConfigs?: LinksConfigs;
  }) => {
-    title: string;
+    title?: string;
    body: string;
    learnMoreLink?: string;
  };
@@ -0,0 +1,25 @@
+export type ExchangeConfigItem = {
+  exchangeName: string;
+  ticker: string;
+  adjustByMarket?: string;
+};
+
+export type PotentialMarketItem = {
+  baseAsset: string;
+  referencePrice: string;
+  numOracles: number;
+  liquidityTier: number;
+  assetName: string;
+  p: number;
+  atomicResolution: number;
+  minExchanges: number;
+  minPriceChangePpm: number;
+  priceExponent: number;
+  stepBaseQuantum: number;
+  ticksizeExponent: number;
+  subticksPerTick: number;
+  minOrderSize: number;
+  quantumConversionExponent: number;
+};
+
+export const NUM_ORACLES_TO_QUALIFY_AS_SAFE = 6;
@@ -11,6 +11,10 @@ export enum AppRoute {
  Privacy = '/privacy',
 }

+export enum MarketsRoute {
+  New = 'new',
+}
+
 export enum PortfolioRoute {
  Fees = 'fees',
  History = 'history',
@@ -25,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',
@@ -68,3 +68,9 @@ export enum OpacityToken {
  Opacity66 = 'A8',
  Opacity90 = 'E6',
 }
+
+export enum BrightnessFilterToken {
+  Darken10 = '0.9',
+  Darken5 = '0.95',
+  Lighten10 = '1.1',
+}
@@ -1,4 +1,12 @@
-export type ThemeColors = LayerColors &
+import { AppColorMode } from '@/state/configs';
+
+export type Theme = {
+  [AppColorMode.GreenUp]: ThemeColorBase;
+  [AppColorMode.RedUp]: ThemeColorBase;
+};
+
+export type ThemeColorBase = BaseColors &
+  LayerColors &
  BorderColors &
  TextColors &
  GradientColors &
@@ -7,7 +15,14 @@ export type ThemeColors = LayerColors &
  DirectionalColors &
  RiskColors &
  IconColors &
-  ComponentColors;
+  ComponentColors &
+  Filters;
+
+type BaseColors = {
+  white: string;
+  green: string;
+  red: string;
+};

 type LayerColors = {
  layer0: string;
@@ -30,6 +45,8 @@ type TextColors = {
  textPrimary: string;
  textSecondary: string;
  textTertiary: string;
+
+  textButton: string;
 };

 type GradientColors = {
@@ -47,8 +64,13 @@ type StatusColors = {
  success: string;
  warning: string;
  error: string;
+  successFaded: string;
+  warningFaded: string;
+  errorFaded: string;
 };

+/** ##InvertDirectionalColors
+ * When adding colors here, make sure to update linked function to invert colors for AppColorMode. */
 type DirectionalColors = {
  positive: string;
  negative: string;
@@ -71,7 +93,12 @@ type IconColors = {
 type ComponentColors = {
  inputBackground: string;
  popoverBackground: string;
-  switchThumbActiveBackground: string;
  toggleBackground: string;
  tooltipBackground: string;
 };
+
+type Filters = {
+  hoverFilterBase: string;
+  hoverFilterVariant: string;
+  activeFilter: string;
+};
@@ -57,10 +57,9 @@ export const tradeTooltips: TooltipStrings = {
    title: stringGetter({ key: TOOLTIP_STRING_KEYS.INDEX_PRICE_TITLE }),
    body: stringGetter({ key: TOOLTIP_STRING_KEYS.INDEX_PRICE_BODY }),
  }),
-  'initial-margin-fraction': ({ stringGetter, urlConfigs }) => ({
+  'initial-margin-fraction': ({ stringGetter }) => ({
    title: stringGetter({ key: TOOLTIP_STRING_KEYS.INITIAL_MARGIN_FRACTION_TITLE }),
    body: stringGetter({ key: TOOLTIP_STRING_KEYS.INITIAL_MARGIN_FRACTION_BODY }),
-    learnMoreLink: urlConfigs?.initialMarginFractionLearnMore,
  }),
  'initial-stop': ({ stringGetter }) => ({
    title: stringGetter({ key: TOOLTIP_STRING_KEYS.INITIAL_STOP_TITLE }),
@@ -138,6 +137,10 @@ export const tradeTooltips: TooltipStrings = {
    title: stringGetter({ key: TOOLTIP_STRING_KEYS.POST_ONLY_TITLE }),
    body: stringGetter({ key: TOOLTIP_STRING_KEYS.POST_ONLY_BODY }),
  }),
+  'post-only-timeinforce-gtt': ({ stringGetter }) => ({
+    title: stringGetter({ key: TOOLTIP_STRING_KEYS.POST_ONLY_TIMEINFORCE_GTT_TITLE }),
+    body: stringGetter({ key: TOOLTIP_STRING_KEYS.POST_ONLY_TIMEINFORCE_GTT_BODY }),
+  }),
  'price-impact': ({ stringGetter }) => ({
    title: stringGetter({ key: TOOLTIP_STRING_KEYS.PRICE_IMPACT_TITLE }),
    body: stringGetter({ key: TOOLTIP_STRING_KEYS.PRICE_IMPACT_BODY }),
@@ -151,6 +154,18 @@ export const tradeTooltips: TooltipStrings = {
    body: stringGetter({ key: TOOLTIP_STRING_KEYS.REDUCE_ONLY_BODY }),
    learnMoreLink: urlConfigs?.reduceOnlyLearnMore,
  }),
+  'reduce-only-execution-ioc-fok': ({ stringGetter }) => ({
+    title: stringGetter({ key: TOOLTIP_STRING_KEYS.REDUCE_ONLY_EXECUTION_IOC_FOK_TITLE }),
+    body: stringGetter({ key: TOOLTIP_STRING_KEYS.REDUCE_ONLY_EXECUTION_IOC_FOK_BODY }),
+  }),
+  'reduce-only-timeinforce-ioc-fok': ({ stringGetter }) => ({
+    title: stringGetter({ key: TOOLTIP_STRING_KEYS.REDUCE_ONLY_TIMEINFORCE_IOC_FOK_TITLE }),
+    body: stringGetter({ key: TOOLTIP_STRING_KEYS.REDUCE_ONLY_TIMEINFORCE_IOC_FOK_BODY }),
+  }),
+  'reference-price': ({ stringGetter }) => ({
+    title: stringGetter({ key: TOOLTIP_STRING_KEYS.REFERENCE_PRICE_TITLE }),
+    body: stringGetter({ key: TOOLTIP_STRING_KEYS.REFERENCE_PRICE_BODY }),
+  }),
  spread: () => ({
    title: 'Spread',
    body: 'The difference in price between the highest bid (the price a buyer is willing to buy for) and lowest ask (the price a seller is willing to sell for) an asset.',
@@ -183,4 +198,7 @@ export const tradeTooltips: TooltipStrings = {
    title: stringGetter({ key: TOOLTIP_STRING_KEYS.UNREALIZED_PNL_TITLE }),
    body: stringGetter({ key: TOOLTIP_STRING_KEYS.UNREALIZED_PNL_BODY }),
  }),
+  'reward-history': ({ stringGetter }) => ({
+    body: stringGetter({ key: TOOLTIP_STRING_KEYS.REWARD_HISTORY_BODY }),
+  }),
 } as const;
@@ -33,6 +33,7 @@ export enum WalletConnectionType {
  CosmosSigner = 'CosmosSigner',
  InjectedEip1193 = 'injectedEip1193',
  WalletConnect2 = 'walletConnect2',
+  TestWallet = 'TestWallet',
 }

 export enum WalletErrorType {
@@ -68,6 +69,9 @@ export const walletConnectionTypes: Record<WalletConnectionType, WalletConnectio
  [WalletConnectionType.CosmosSigner]: {
    name: 'CosmosSigner',
  },
+  [WalletConnectionType.TestWallet]: {
+    name: 'TestWallet',
+  },
 };

 // Wallets
@@ -88,7 +92,7 @@ export enum WalletType {
  TokenPocket = 'TOKEN_POCKET',
  TrustWallet = 'TRUST_WALLET',
  WalletConnect2 = 'WALLETCONNECT_2',
-  // TestWallet = 'TEST_WALLET',
+  TestWallet = 'TEST_WALLET',
  OtherWallet = 'OTHER_WALLET',
 }

@@ -243,6 +247,12 @@ export const wallets: Record<WalletType, WalletConfig> = {
    icon: KeplrIcon,
    connectionTypes: [WalletConnectionType.CosmosSigner],
  },
+  [WalletType.TestWallet]: {
+    type: WalletType.TestWallet,
+    stringKey: STRING_KEYS.TEST_WALLET,
+    icon: GenericWalletIcon,
+    connectionTypes: [WalletConnectionType.TestWallet],
+  },
 };

 // Injected EIP-1193 Providers
@@ -354,3 +364,5 @@ export enum DydxChainAsset {
  USDC = 'usdc',
  CHAINTOKEN = 'chain',
 }
+
+export const TEST_WALLET_EVM_ADDRESS: EvmAddress = '0x0000000000000000000000000000000000000000';
@@ -12,8 +12,9 @@ import {
  ORDERBOOK_WIDTH,
 } from '@/constants/orderbook';

+import { useAppThemeAndColorModeContext } from '@/hooks/useAppThemeAndColorMode';
+
 import { getCurrentMarketConfig, getCurrentMarketOrderbookMap } from '@/state/perpetualsSelectors';
-import { getAppTheme } from '@/state/configsSelectors';

 import { MustBigNumber } from '@/lib/numbers';

@@ -23,7 +24,6 @@ import {
  getXByColumn,
  getYForElements,
 } from '@/lib/orderbookHelpers';
-import { useAppThemeContext } from '../useAppTheme';

 type ElementProps = {
  data: Array<PerpetualMarketOrderbookLevel | undefined>;
@@ -53,7 +53,7 @@ export const useDrawOrderbook = ({
  const { stepSizeDecimals = TOKEN_DECIMALS, tickSizeDecimals = SMALL_USD_DECIMALS } =
    useSelector(getCurrentMarketConfig, shallowEqual) || {};
  const prevData = useRef<typeof data>(data);
-  const theme = useAppThemeContext();
+  const theme = useAppThemeAndColorModeContext();

  /**
   * Scale canvas using device pixel ratio to unblur drawn text
@@ -7,6 +7,7 @@ import { useDebounce } from './useDebounce';
 import { useInterval } from './useInterval';
 import { useDocumentTitle } from './useDocumentTitle';
 import { useDydxClient } from './useDydxClient';
+import { useGovernanceVariables } from './useGovernanceVariables';
 import { useAccountBalance } from './useAccountBalance';
 import { useAccounts } from './useAccounts';
 import { useAnalytics } from './useAnalytics';
@@ -14,6 +15,7 @@ import { useInitializePage } from './useInitializePage';
 import { useIsFirstRender } from './useIsFirstRender';
 import { useLocaleSeparators } from './useLocaleSeparators';
 import { useLocalStorage } from './useLocalStorage';
+import { useNextClobPairId } from './useNextClobPairId';
 import { useNow } from './useNow';
 import { useOnClickOutside } from './useOnClickOutside';
 import { usePageTitlePriceUpdates } from './usePageTitlePriceUpdates';
@@ -34,6 +36,7 @@ export {
  useDebounce,
  useDocumentTitle,
  useDydxClient,
+  useGovernanceVariables,
  useAccountBalance,
  useAccounts,
  useAnalytics,
@@ -42,6 +45,7 @@ export {
  useIsFirstRender,
  useLocaleSeparators,
  useLocalStorage,
+  useNextClobPairId,
  useNow,
  useOnClickOutside,
  usePageTitlePriceUpdates,
@@ -11,7 +11,7 @@ import { useDydxClient, useLocalStorage } from '@/hooks';
 import { store } from '@/state/_store';

 import { getSelectedNetwork } from '@/state/appSelectors';
-import { getAppTheme } from '@/state/configsSelectors';
+import { getAppTheme, getAppColorMode } from '@/state/configsSelectors';
 import { getSelectedLocale } from '@/state/localizationSelectors';
 import { getCurrentMarketId, getMarketIds } from '@/state/perpetualsSelectors';

@@ -30,6 +30,7 @@ export const useTradingView = ({
 }) => {
  const marketId = useSelector(getCurrentMarketId);
  const appTheme = useSelector(getAppTheme);
+  const appColorMode = useSelector(getAppColorMode);
  const marketIds = useSelector(getMarketIds, shallowEqual);
  const selectedLocale = useSelector(getSelectedLocale);
  const selectedNetwork = useSelector(getSelectedNetwork);
@@ -46,7 +47,7 @@ export const useTradingView = ({
  useEffect(() => {
    if (hasMarkets && isClientConnected && marketId) {
      const widgetOptions = getWidgetOptions();
-      const widgetOverrides = getWidgetOverrides(appTheme);
+      const widgetOverrides = getWidgetOverrides({ appTheme, appColorMode });
      const options = {
        // debug: true,
        ...widgetOptions,
@@ -75,7 +76,14 @@ export const useTradingView = ({
      tvWidgetRef.current = null;
      setIsChartReady(false);
    };
-  }, [getCandlesForDatafeed, isClientConnected, hasMarkets, selectedLocale, selectedNetwork, !!marketId]);
+  }, [
+    getCandlesForDatafeed,
+    isClientConnected,
+    hasMarkets,
+    selectedLocale,
+    selectedNetwork,
+    !!marketId,
+  ]);

  return { savedResolution };
 };
@@ -3,8 +3,8 @@ import { useSelector } from 'react-redux';

 import type { IChartingLibraryWidget, ThemeName } from 'public/tradingview/charting_library';

-import { AppTheme } from '@/state/configs';
-import { getAppTheme } from '@/state/configsSelectors';
+import { AppColorMode, AppTheme } from '@/state/configs';
+import { getAppTheme, getAppColorMode } from '@/state/configsSelectors';

 import { getWidgetOverrides } from '@/lib/tradingView/utils';

@@ -29,6 +29,7 @@ export const useTradingViewTheme = ({
  isWidgetReady?: boolean;
 }) => {
  const appTheme: AppTheme = useSelector(getAppTheme);
+  const appColorMode: AppColorMode = useSelector(getAppColorMode);

  useEffect(() => {
    if (tvWidget && isWidgetReady) {
@@ -55,10 +56,24 @@ export const useTradingViewTheme = ({
            }
          }

-          const { overrides, studies_overrides } = getWidgetOverrides(appTheme);
+          const { overrides, studies_overrides } = getWidgetOverrides({ appTheme, appColorMode });
          tvWidget?.applyOverrides(overrides);
          tvWidget?.applyStudiesOverrides(studies_overrides);
+
+          // Necessary to update existing indicators
+          const volumeStudyId = tvWidget
+            ?.activeChart()
+            ?.getAllStudies()
+            ?.find((x) => x.name === 'Volume')?.id;
+
+          if (volumeStudyId) {
+            const volume = tvWidget?.activeChart()?.getStudyById(volumeStudyId);
+            volume.applyOverrides({
+              'volume.color.0': studies_overrides['volume.volume.color.0'],
+              'volume.color.1': studies_overrides['volume.volume.color.1'],
+            });
+          }
        });
    }
-  }, [appTheme]);
+  }, [appTheme, appColorMode]);
 };
@@ -6,14 +6,22 @@ import { NOBLE_BECH32_PREFIX, LocalWallet, type Subaccount } from '@dydxprotocol

 import { OnboardingGuard, OnboardingState, type EvmDerivedAddresses } from '@/constants/account';
 import { DialogTypes } from '@/constants/dialogs';
+import { STRING_KEYS } from '@/constants/localization';
 import { LocalStorageKey, LOCAL_STORAGE_VERSIONS } from '@/constants/localStorage';
-import { DydxAddress, EvmAddress, PrivateInformation } from '@/constants/wallets';
+import {
+  DydxAddress,
+  EvmAddress,
+  PrivateInformation,
+  TEST_WALLET_EVM_ADDRESS,
+  WalletType,
+} from '@/constants/wallets';

 import { setOnboardingState, setOnboardingGuard } from '@/state/account';
 import { forceOpenDialog } from '@/state/dialogs';

 import abacusStateManager from '@/lib/abacus';
 import { log } from '@/lib/telemetry';
+import { testFlags } from '@/lib/testFlags';

 import { useDydxClient } from './useDydxClient';
 import { useLocalStorage } from './useLocalStorage';
@@ -153,6 +161,7 @@ const useAccountsContext = () => {

  // dYdX wallet / onboarding state
  const [localDydxWallet, setLocalDydxWallet] = useState<LocalWallet>();
+  const [localNobleWallet, setLocalNobleWallet] = useState<LocalWallet>();
  const [hdKey, setHdKey] = useState<PrivateInformation>();

  const dydxAccounts = useMemo(() => localDydxWallet?.accounts, [localDydxWallet]);
@@ -162,6 +171,11 @@ const useAccountsContext = () => {
    [localDydxWallet]
  );

+  const nobleAddress = useMemo(
+    () => localNobleWallet?.address,
+    [localNobleWallet]
+  );
+
  const setWalletFromEvmSignature = async (signature: string) => {
    const { wallet, mnemonic, privateKey, publicKey } = await getWalletFromEvmSignature({
      signature,
@@ -178,7 +192,26 @@ const useAccountsContext = () => {

  useEffect(() => {
    (async () => {
-      if (connectedDydxAddress && signerGraz) {
+      if (walletType === WalletType.TestWallet) {
+        // Get override values. Use the testFlags value if it exists, otherwise use the previously
+        // saved value where possible. If neither exist, use a default garbage value.
+        const addressOverride: DydxAddress = testFlags.addressOverride as DydxAddress ||
+          evmDerivedAddresses?.[TEST_WALLET_EVM_ADDRESS]?.dydxAddress as DydxAddress ||
+          'dydx1';
+
+        dispatch(setOnboardingState(OnboardingState.WalletConnected));
+
+        // Set variables.
+        saveEvmDerivedAccount({
+          evmAddress: TEST_WALLET_EVM_ADDRESS,
+          dydxAddress: addressOverride,
+        });
+        const wallet = new LocalWallet();
+        wallet.address = addressOverride;
+        setLocalDydxWallet(wallet);
+
+        dispatch(setOnboardingState(OnboardingState.AccountConnected));
+      } else if (connectedDydxAddress && signerGraz) {
        dispatch(setOnboardingState(OnboardingState.WalletConnected));
        try {
          setLocalDydxWallet(await LocalWallet.fromOfflineSigner(signerGraz));
@@ -224,6 +257,7 @@ const useAccountsContext = () => {
      if (hdKey?.mnemonic) {
        const nobleWallet = await LocalWallet.fromMnemonic(hdKey.mnemonic, NOBLE_BECH32_PREFIX);
        abacusStateManager.setNobleWallet(nobleWallet);
+        setLocalNobleWallet(nobleWallet);
      }
    };
    setNobleWallet();
@@ -322,6 +356,7 @@ const useAccountsContext = () => {
    localDydxWallet,
    dydxAccounts,
    dydxAddress,
+    nobleAddress,

    // Onboarding state
    saveHasAcknowledgedTerms,
@@ -1,16 +0,0 @@
-import { useSelector } from 'react-redux';
-import { ThemeProvider } from 'styled-components';
-
-import { AppTheme } from '@/state/configs';
-import { getAppTheme } from '@/state/configsSelectors';
-
-import { Themes } from '@/styles/themes';
-
-export const AppThemeProvider = ({ ...props }) => {
-    return <ThemeProvider theme={useAppThemeContext()} {...props} />
-};
-
-export const useAppThemeContext = () => {
-    const theme: AppTheme = useSelector(getAppTheme);
-    return Themes[theme];
-}
@@ -0,0 +1,48 @@
+import { useEffect, useState } from 'react';
+import { useSelector } from 'react-redux';
+import { ThemeProvider } from 'styled-components';
+
+import { AppTheme, AppThemeSetting, AppColorMode, AppThemeSystemSetting } from '@/state/configs';
+import { getAppThemeSetting, getAppColorMode } from '@/state/configsSelectors';
+
+import { Themes } from '@/styles/themes';
+
+export const AppThemeAndColorModeProvider = ({ ...props }) => {
+  return <ThemeProvider theme={useAppThemeAndColorModeContext()} {...props} />;
+};
+
+export const useAppThemeAndColorModeContext = () => {
+  const themeSetting: AppThemeSetting = useSelector(getAppThemeSetting);
+  const colorMode: AppColorMode = useSelector(getAppColorMode);
+
+  const darkModePref = globalThis.matchMedia('(prefers-color-scheme: dark)');
+
+  const [systemPreference, setSystemPreference] = useState(
+    darkModePref.matches ? AppTheme.Dark : AppTheme.Light
+  );
+
+  useEffect(() => {
+    const handler = (e) => {
+      if (e.matches) {
+        setSystemPreference(AppTheme.Dark);
+      } else {
+        setSystemPreference(AppTheme.Light);
+      }
+    };
+    darkModePref.addEventListener('change', handler);
+    return () => darkModePref.removeEventListener('change', handler);
+  }, []);
+
+  const getThemeFromSetting = (): AppTheme => {
+    switch (themeSetting) {
+      case AppThemeSystemSetting.System:
+        return systemPreference;
+      case AppTheme.Classic:
+      case AppTheme.Dark:
+      case AppTheme.Light:
+        return themeSetting;
+    }
+  };
+
+  return Themes[getThemeFromSetting()][colorMode];
+};
@@ -1,5 +1,6 @@
 import { createContext, useCallback, useContext, useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
+
 import {
  BECH32_PREFIX,
  CompositeClient,
@@ -9,11 +10,13 @@ import {
  onboarding,
  Network,
  ValidatorConfig,
+  type ProposalStatus,
 } from '@dydxprotocol/v4-client-js';

 import type { ResolutionString } from 'public/tradingview/charting_library';

 import type { ConnectNetworkEvent, NetworkConfig } from '@/constants/abacus';
+import { DEFAULT_TRANSACTION_MEMO } from '@/constants/analytics';
 import { type Candle, RESOLUTION_MAP } from '@/constants/candles';
 import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
 import { DydxChainAsset } from '@/constants/wallets';
@@ -68,17 +71,22 @@ const useDydxClientContext = () => {
            new Network(
              selectedNetwork,
              new IndexerConfig(networkConfig.indexerUrl, networkConfig.websocketUrl),
-              new ValidatorConfig(networkConfig.validatorUrl, networkConfig.chainId,
+              new ValidatorConfig(
+                networkConfig.validatorUrl,
+                networkConfig.chainId,
                {
                  USDC_DENOM: tokensConfigs[DydxChainAsset.USDC].denom,
                  USDC_DECIMALS: tokensConfigs[DydxChainAsset.USDC].decimals,
                  USDC_GAS_DENOM: tokensConfigs[DydxChainAsset.USDC].gasDenom,
                  CHAINTOKEN_DENOM: tokensConfigs[DydxChainAsset.CHAINTOKEN].denom,
                  CHAINTOKEN_DECIMALS: tokensConfigs[DydxChainAsset.CHAINTOKEN].decimals,
-                }, {
-                broadcastPollIntervalMs: 3_000,
-                broadcastTimeoutMs: 60_000,
-              })
+                },
+                {
+                  broadcastPollIntervalMs: 3_000,
+                  broadcastTimeoutMs: 60_000,
+                },
+                DEFAULT_TRANSACTION_MEMO
+              )
            )
          );
          setCompositeClient(initializedClient);
@@ -111,6 +119,36 @@ const useDydxClientContext = () => {
  };

  // ------ Public Methods ------ //
+  const requestAllPerpetualMarkets = useCallback(async () => {
+    try {
+      const { markets } =
+        (await compositeClient?.indexerClient.markets.getPerpetualMarkets()) || {};
+      return markets || [];
+    } catch (error) {
+      log('useDydxClient/getPerpetualMarkets', error);
+      return [];
+    }
+  }, [compositeClient]);
+
+  /**
+   * @param proposalStatus - Optional filter for proposal status. If not provided, all proposals in ProposalStatus.VotingPeriod will be returned.
+   */
+  const requestAllGovernanceProposals = useCallback(
+    async (proposalStatus?: ProposalStatus) => {
+      try {
+        const allGovProposals = await compositeClient?.validatorClient.get.getAllGovProposals(
+          proposalStatus
+        );
+
+        return allGovProposals;
+      } catch (error) {
+        log('useDydxClient/getProposals', error);
+        return undefined;
+      }
+    },
+    [compositeClient]
+  );
+
  const requestCandles = useCallback(
    async ({
      marketId,
@@ -225,6 +263,8 @@ const useDydxClientContext = () => {
    getWalletFromEvmSignature,

    // Public Methods
+    requestAllPerpetualMarkets,
+    requestAllGovernanceProposals,
    getCandlesForDatafeed,
    screenAddresses,
  };
@@ -0,0 +1,16 @@
+import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
+import { useSelectedNetwork } from '@/hooks';
+
+export interface GovernanceVariables {
+  newMarketProposal: {
+    initialDepositAmount: number;
+    delayBlocks: number;
+    newMarketsMethodology: string;
+  };
+}
+
+export const useGovernanceVariables = (): GovernanceVariables => {
+  const { selectedNetwork } = useSelectedNetwork();
+  const governanceVars = ENVIRONMENT_CONFIG_MAP[selectedNetwork].governance as GovernanceVariables;
+  return governanceVars;
+};
@@ -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;
@@ -0,0 +1,118 @@
+import { useMemo } from 'react';
+import { useQuery } from 'react-query';
+
+import {
+  MsgCreateClobPair,
+  MsgCreateOracleMarket,
+  MsgCreatePerpetual,
+  MsgDelayMessage,
+  MsgUpdateClobPair,
+  TYPE_URL_MSG_CREATE_CLOB_PAIR,
+  TYPE_URL_MSG_CREATE_ORACLE_MARKET,
+  TYPE_URL_MSG_CREATE_PERPETUAL,
+  TYPE_URL_MSG_DELAY_MESSAGE,
+  TYPE_URL_MSG_UPDATE_CLOB_PAIR,
+} from '@dydxprotocol/v4-client-js';
+
+import type { PerpetualMarketResponse } from '@/constants/indexer';
+import { useDydxClient } from '@/hooks/useDydxClient';
+
+export const useNextClobPairId = () => {
+  const { isConnected, requestAllPerpetualMarkets, requestAllGovernanceProposals } =
+    useDydxClient();
+
+  const { data: perpetualMarkets, status: perpetualMarketsStatus } = useQuery({
+    enabled: isConnected,
+    queryKey: 'requestAllPerpetualMarkets',
+    queryFn: requestAllPerpetualMarkets,
+    refetchInterval: 60_000,
+    staleTime: 60_000,
+  });
+
+  const { data: allGovProposals, status: allGovProposalsStatus } = useQuery({
+    enabled: isConnected,
+    queryKey: 'requestAllActiveGovernanceProposals',
+    queryFn: () => requestAllGovernanceProposals(),
+    refetchInterval: 10_000,
+    staleTime: 10_000,
+  });
+
+  /**
+   *
+   * @param message from proposal. Each message is wrapped in a type any (on purpose).
+   * @param callback method used to compile all clobPairIds, perpetualIds, marketIds, etc.
+   */
+  const decodeMsgForClobPairId = (message: any, callback: (id?: number) => void): any => {
+    const { typeUrl, value } = message;
+
+    switch (typeUrl) {
+      case TYPE_URL_MSG_CREATE_ORACLE_MARKET: {
+        const decodedValue = MsgCreateOracleMarket.decode(value);
+        callback(decodedValue.params?.id);
+        break;
+      }
+      case TYPE_URL_MSG_CREATE_PERPETUAL: {
+        const decodedValue = MsgCreatePerpetual.decode(value);
+        callback(decodedValue.params?.id);
+        callback(decodedValue.params?.marketId);
+        break;
+      }
+      case TYPE_URL_MSG_CREATE_CLOB_PAIR: {
+        const decodedValue = MsgCreateClobPair.decode(value);
+        callback(decodedValue.clobPair?.id);
+        callback(decodedValue.clobPair?.perpetualClobMetadata?.perpetualId);
+        break;
+      }
+      case TYPE_URL_MSG_UPDATE_CLOB_PAIR: {
+        const decodedValue = MsgUpdateClobPair.decode(value);
+        callback(decodedValue.clobPair?.id);
+        callback(decodedValue.clobPair?.perpetualClobMetadata?.perpetualId);
+        break;
+      }
+      case TYPE_URL_MSG_DELAY_MESSAGE: {
+        const decodedValue = MsgDelayMessage.decode(value);
+        decodeMsgForClobPairId(decodedValue.msg, callback);
+        break;
+      }
+      default: {
+        break;
+      }
+    }
+  };
+
+  const nextAvailableClobPairId = useMemo(() => {
+    const idsFromProposals: number[] = [];
+
+    if (allGovProposals && Object.values(allGovProposals.proposals).length > 0) {
+      const proposals = allGovProposals.proposals;
+      proposals.forEach((proposal) => {
+        if (proposal.messages) {
+          proposal.messages.map((message) => {
+            decodeMsgForClobPairId(message, (id?: number) => {
+              if (id) {
+                idsFromProposals.push(id);
+              }
+            });
+          });
+        }
+      });
+    }
+
+    if (perpetualMarkets && Object.values(perpetualMarkets).length > 0) {
+      const clobPairIds = Object.values(perpetualMarkets)?.map((perpetualMarket) =>
+        Number((perpetualMarket as PerpetualMarketResponse).clobPairId)
+      );
+
+      const nextAvailableClobPairId = Math.max(...[...clobPairIds, ...idsFromProposals]) + 1;
+      return nextAvailableClobPairId;
+    }
+
+    return undefined;
+  }, [perpetualMarkets, allGovProposals]);
+
+  return {
+    allGovProposalsStatus,
+    perpetualMarketsStatus,
+    nextAvailableClobPairId,
+  };
+};
@@ -0,0 +1,118 @@
+import { createContext, useContext, useEffect, useMemo, useState } from 'react';
+
+import { STRING_KEYS } from '@/constants/localization';
+import type { ExchangeConfigItem, PotentialMarketItem } 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';
+
+export const PotentialMarketsProvider = ({ ...props }) => (
+  <PotentialMarketsContext.Provider value={usePotentialMarketsContext()} {...props} />
+);
+
+export const usePotentialMarkets = () => useContext(PotentialMarketsContext);
+
+const EXCHANGE_CONFIG_FILE_PATH = '/configs/potentialMarketExchangeConfig.json';
+const POTENTIAL_MARKETS_FILE_PATH = '/configs/potentialMarketParameters.json';
+
+export const usePotentialMarketsContext = () => {
+  const stringGetter = useStringGetter();
+  const [potentialMarkets, setPotentialMarkets] = useState<PotentialMarketItem[]>();
+  const [exchangeConfigs, setExchangeConfigs] = useState<Record<string, ExchangeConfigItem[]>>();
+
+  useEffect(() => {
+    try {
+      fetch(POTENTIAL_MARKETS_FILE_PATH)
+        .then((response) => response.json())
+        .then((data) => {
+          setPotentialMarkets(data as PotentialMarketItem[]);
+        });
+    } catch (error) {
+      log('usePotentialMarkets/potentialMarkets', error);
+      setPotentialMarkets(undefined);
+    }
+
+    try {
+      fetch(EXCHANGE_CONFIG_FILE_PATH)
+        .then((response) => response.json())
+        .then((data) => {
+          setExchangeConfigs(data as Record<string, ExchangeConfigItem[]>);
+        });
+    } catch (error) {
+      log('usePotentialMarkets/exchangeConfigs', error);
+      setExchangeConfigs(undefined);
+    }
+  }, []);
+
+  const liquidityTiers = useMemo(
+    () => ({
+      0: {
+        label: stringGetter({ key: STRING_KEYS.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: 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,
+  };
+};
@@ -2,11 +2,16 @@ import { createContext, useCallback, useContext, useEffect, useMemo, useState }
 import { shallowEqual, useSelector, useDispatch } from 'react-redux';
 import type { Nullable } from '@dydxprotocol/v4-abacus';
 import Long from 'long';
-import type { IndexedTx } from '@cosmjs/stargate';
+import { type IndexedTx } from '@cosmjs/stargate';
 import type { EncodeObject } from '@cosmjs/proto-signing';
 import { Method } from '@cosmjs/tendermint-rpc';

-import { type LocalWallet, SubaccountClient } from '@dydxprotocol/v4-client-js';
+import {
+  type LocalWallet,
+  SubaccountClient,
+  type GovAddNewMarketParams,
+  utils,
+} from '@dydxprotocol/v4-client-js';

 import type {
  AccountBalance,
@@ -16,7 +21,6 @@ import type {
 } from '@/constants/abacus';

 import { AMOUNT_RESERVED_FOR_GAS_USDC } from '@/constants/account';
-import { AnalyticsEvent } from '@/constants/analytics';
 import { QUANTUM_MULTIPLIER } from '@/constants/numbers';
 import { DydxAddress } from '@/constants/wallets';

@@ -24,14 +28,13 @@ import { setSubaccount, setHistoricalPnl, removeUncommittedOrderClientId } from
 import { getBalances } from '@/state/accountSelectors';

 import abacusStateManager from '@/lib/abacus';
-import { track } from '@/lib/analytics';
-import { MustBigNumber } from '@/lib/numbers';
+import { hashFromTx } from '@/lib/hashfromTx';
 import { log } from '@/lib/telemetry';

 import { useAccounts } from './useAccounts';
 import { useTokenConfigs } from './useTokenConfigs';
 import { useDydxClient } from './useDydxClient';
-import { hashFromTx } from '@/lib/hashfromTx';
+import { useGovernanceVariables } from './useGovernanceVariables';

 type SubaccountContextType = ReturnType<typeof useSubaccountContext>;
 const SubaccountContext = createContext<SubaccountContextType>({} as SubaccountContextType);
@@ -201,8 +204,8 @@ export const useSubaccountContext = ({ localDydxWallet }: { localDydxWallet?: Lo
            value: {
              ...transaction.msg,
              timeoutTimestamp: transaction.msg.timeoutTimestamp
-                // Squid returns timeoutTimestamp as Long, but the signer expects BigInt
-                ? BigInt(Long.fromValue(transaction.msg.timeoutTimestamp).toString())
+                ? // Squid returns timeoutTimestamp as Long, but the signer expects BigInt
+                  BigInt(Long.fromValue(transaction.msg.timeoutTimestamp).toString())
                : undefined,
            },
          };
@@ -301,9 +304,8 @@ export const useSubaccountContext = ({ localDydxWallet }: { localDydxWallet?: Lo

  const sendSquidWithdraw = useCallback(
    async (amount: number, payload: string, isCctp?: boolean) => {
-      
      const cctpWithdraw = () => {
-        return new Promise<string>((resolve, reject) => 
+        return new Promise<string>((resolve, reject) =>
          abacusStateManager.cctpWithdraw((success, error, data) => {
            const parsedData = JSON.parse(data);
            if (success && parsedData?.code == 0) {
@@ -312,8 +314,8 @@ export const useSubaccountContext = ({ localDydxWallet }: { localDydxWallet?: Lo
              reject(error);
            }
          })
-        )
-      }
+        );
+      };
      if (isCctp) {
        return await cctpWithdraw();
      }
@@ -413,6 +415,32 @@ export const useSubaccountContext = ({ localDydxWallet }: { localDydxWallet?: Lo
    [subaccountClient]
  );

+  const { newMarketProposal } = useGovernanceVariables();
+
+  // ------ Governance Methods ------ //
+  const submitNewMarketProposal = useCallback(
+    async (params: GovAddNewMarketParams) => {
+      if (!compositeClient) {
+        throw new Error('client not initialized');
+      } else if (!localDydxWallet) {
+        throw new Error('wallet not initialized');
+      } else if (!newMarketProposal) {
+        throw new Error('governance variables not initialized');
+      }
+
+      const response = await compositeClient.submitGovAddNewMarketProposal(
+        localDydxWallet,
+        params,
+        utils.getGovAddNewMarketTitle(params.ticker),
+        utils.getGovAddNewMarketSummary(params.ticker, newMarketProposal.delayBlocks),
+        BigInt(newMarketProposal.initialDepositAmount).toString()
+      );
+
+      return response;
+    },
+    [compositeClient, localDydxWallet]
+  );
+
  return {
    // Deposit/Withdraw/Faucet Methods
    deposit,
@@ -427,5 +455,8 @@ export const useSubaccountContext = ({ localDydxWallet }: { localDydxWallet?: Lo
    placeOrder,
    closePosition,
    cancelOrder,
+
+    // Governance Methods
+    submitNewMarketProposal,
  };
 };
@@ -5,23 +5,25 @@ import { useSelectedNetwork } from '@/hooks';
 const FALLBACK_URL = 'https://help.dydx.exchange/';

 export interface LinksConfigs {
-  tos: string,
-  privacy: string,
-  mintscan: string,
-  mintscanBase: string,
-  feedback?: string,
-  help?: string,
-  blogs?: string,
-  foundation?: string,
-  initialMarginFractionLearnMore?: string,
-  reduceOnlyLearnMore?: string,
-  documentation?: string,
-  community?: string,
-  governanceLearnMore?: string,
-  stakingLearnMore?: string,
-  keplrDashboard?: string,
-  accountExportLearnMore?: string,
-  walletLearnMore?: string
+  tos: string;
+  privacy: string;
+  mintscan: string;
+  mintscanBase: string;
+  feedback?: string;
+  help?: string;
+  blogs?: string;
+  foundation?: string;
+  initialMarginFractionLearnMore?: string;
+  reduceOnlyLearnMore?: string;
+  documentation?: string;
+  community?: string;
+  governanceLearnMore?: string;
+  newMarketProposalLearnMore: string;
+  stakingLearnMore?: string;
+  keplrDashboard?: 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,
  };
--- a/Show More
+++ b/Show More
Author	SHA1	Message	Date
Aleka Cheung	ea4fd4b5e4	more details nits	2024-02-07 15:18:20 -05:00
Aleka Cheung	aad5539f18	wrap details item	2024-02-07 15:18:15 -05:00
Jared Vu	1a41ccaf2a	Liquid Staking CTA (#281 ) * 🚧 feat(token-page): Scaffold sidebar components for token page * 🚧 feat(staking/governance): Scaffold adding Panels to Staking and Governance page * ✨ Update and add icons * 🧱 Add strideZoneApp to shared config * 🧱 Add dialogs, update ExternalLinkDialog * 🚧 Add New Panels/Update paths * Fix mobile Profile Panel * 💄 fix desktop padding * ✨ Add New tag * 💄 Highlight tag on StrideStakingPanel * 💄 Single columns for panels on mobile breakpoint * 💄 fix import nits and alignment nits on panels * Add circular keplr icon	2024-02-07 11:17:54 -08:00
Jared Vu	26b426c9e9	✨ fix(ladle): Fix ladle environment and parameter types in stories (#286 )	2024-02-07 11:02:26 -08:00
John Huang	994ba832f6	Feature/mob 162 smartbanner (#274 ) * Implemented according to instructions but not working * Exclude touch screen windows (see in Issues on library repo) * Make the banner generic * Moved icon_url to generic section * Hide in Safari * Use injection script with ENV variables instead manual update * debugging * Use CDN for js and css * PR	2024-02-07 10:10:22 -08:00
Jared Vu	597456a0d1	JUP Asset details (#285 ) * ✨ add JUP assets * localize eg	2024-02-07 09:49:46 -08:00
Bill	3b75e60bd2	Add custom amplitude server URL (#282 ) * Add custom amplitude server URL * string * add to readme	2024-02-06 21:43:05 -08:00
aleka	e453977299	bump localization (#283 )	2024-02-06 17:23:00 -05:00
moo-onthelawn	dbc34599a6	TRCL-3543 Create red/green color tokens and audit (replace) usages of error/success color tokens (#271 ) * audited * fix double header	2024-02-06 13:38:13 -05:00
aleka	f762e9bfac	add featureFlags to env config for reduce only + remove mobile sign in flag (#278 ) * add featureFlags to env config * update abacus and remove mobilesignin test flag	2024-02-06 12:31:08 -05:00
Bill	ed3c336cc0	Add memo to transactions for onchain tracking (#279 )	2024-02-06 09:27:10 -08:00
Rui	b4f9f03bdc	Add Digital Asset Links for android app (#280 )	2024-02-06 09:09:02 -08:00
aleka	44ed52d5e2	add more controlled pagination to table (#276 )	2024-02-06 11:48:49 -05:00
Jonathan Fung	42595a3667	Revert "Bump abacus to enable ROC (#275 )" (#277 ) This reverts commit `2fc55bbe9f`.	2024-02-05 17:25:29 -07:00
moo-onthelawn	2fc55bbe9f	Bump abacus to enable ROC (#275 ) * bump * fixed	2024-02-05 16:39:33 -07:00
aleka	97452d7785	Add historical trading rewards gated by feature flag (#260 ) * add historical trading rewards gated by feature flag	2024-02-05 12:24:12 -05:00
moo-onthelawn	2704baf378	Update PoweredBy string key to use all caps version (#272 ) * bump package + update stringkey * styling	2024-02-05 10:22:00 -05:00
Jared Vu	453d7c545e	Convert opensource CSVs to JSON (#273 ) * 🧱 use json instead of csv * Fixed code size in MessageDetailsDialog	2024-02-02 22:01:18 -08:00
aleka	f79c062808	use updated isaccountconnected check (#268 ) * use updated isaccountconnected check * address feedback	2024-02-02 15:12:52 -05:00
moo-onthelawn	7d30c80320	fix (#269 )	2024-02-02 09:56:57 -05:00
moo-onthelawn	1c1d602bf3	TRCL-3491 Add "System" setting to themeing options, and match cmd+k dialog to new display preferences (#265 ) * clean up * clean up UI * add functionality, without user exposure yet * fix commit history * remove unnecessary change * lint * implemented functionality * clean up, add into cmd+k * fix imports * TRCL-3537 DisplaySettings + Themeing Polish (#267) * wip * make system panel reflect user prefs * clean up PnlChart * testing changes removal * clean up logo styling * fix export of dark dots background * remove comment * fix system panel color background	2024-02-01 20:03:10 -05:00
moo-onthelawn	23a96c1c20	TRCL-3533 Add green/red preference functionality to themeing (#256 ) * add functionality, without user exposure yet * TRCL-3535 Add green/red preference to display modal (#261) * add functionality, without user exposure yet * fix commit history * remove unnecessary change * lint * update css * audit of pos/neg colors * fix flipping of disconnect/export keys colors * review comments * clean up naming of icon * fix icon sizing * small edit to story example	2024-02-01 19:29:11 -05:00
moo-onthelawn	d81e6b3a2c	TRCL-3520 Add entry point + modal for themeing (#255 ) * wip * clean up * clean up UI	2024-02-01 19:01:53 -05:00
Jared Vu	732114a8de	Use BigInt toString() for initialDepositAmount param (#266 )	2024-02-01 11:52:04 -08:00
Jared Vu	2c220233e3	Update potential-market csv (#264 ) * Update potential-market csv to match opensource guidance * missing quantom-conversion-exponent * fix filter * alphabetize	2024-01-31 10:07:21 -08:00
aleka	8187e3615b	add back clickable label to checkbox (#263 ) * add back clickable label to checkbox * make disabled optional	2024-01-30 16:42:05 -05:00
Bill	c5888c2d5c	Fix if conditioned before hooks (#262 )	2024-01-30 13:18:10 -08:00
Jared VuandTaehoon Lee	793b522487	New Market Widget (#234 ) * 🚧 New Market Form * use dev-5 as default * Additional UI work * Add mock data * 💄 More UI items * 💄 add preview step * 💄 Disable proposal button if not enough native tokens * ✏️ Add disclaimer * ✏️ fix combobox search * 🚧 clean up components * Add filters, modify, button * ✨ feat: Add details to New Market Dialog * add assetName * add helper method - spagetti code * Update NewMarketMessageDetailsDialog, attempt to hook up client call * 🚨 fix mobile safari overflow * update init deposit to 10_001 whole token * reduce delay block to 5 * Update mock data * 🚧 SO FRIGGIN CLOSE * 💄 style/ux nits * add gov to registry * PLS * IT FUCKING WORKS * Add assets * FIX TICKER * ADD NEW ASSETICON * button width * change default env to dev * Remove mention of Impersonation dialog * Market Search entry point * uncomment feature * Clean up NewMarketStep components * Restore env.json * Add space T.T * useGlobalCommands fix types * 🚧 feat: useNextClobPairId hook WIP * Add potentialMarkets hook to parse CSV and hide new market entrypoints * Use updated stringKeys * Update localization, import nits * bump v4-client * add gov vars * new useGovernanceVariables * Add validator client calls: proposal fetch/submission * Update token usage, utilize gov vars * remove console log * import nits * NewMarketMessageDetailsDialog: Fix initial_deposit_amount * NewMarketAgreement Dialog * confirm flow * Remove initialDepositAmount from mainnet env * NewMarket: Add stringParams to step3 * Update csv * update env.json add localization changes * cleanup initialDepositAmountBN and decimals * ^ * use undefined in place of 0 for DiffOutput * remove hardcoded string * Remove potentialMarket from csv * Ensure user is out of liquidity tier modification * bump localization, add additional details to receipts * feedback addressed * Add margin instead of space * margin/padding nits, shorten filter method, remove ?. chaining * additional feedback --------- Co-authored-by: Taehoon Lee <19664986+ttl33@users.noreply.github.com>	2024-01-30 11:59:16 -08:00
John Huang	13d6610492	Added a TestFlight deployment so help native app testers (#257 )	2024-01-30 11:38:39 -08:00
Bill	9cbb9fc2c6	remove cexdeposit testflag (#259 )	2024-01-30 11:38:22 -08:00
Bill	91f5b89eb6	Coinbase Deposit (#251 ) * Coinbase Deposit * bump packages * fix lock * add testflag * Address feedback * fix chain select	2024-01-29 15:12:06 -08:00
aleka	41cc531700	downgrade follow-redirects since new version breaks safari (#254 ) * downgrade follow-redirects * explicit override	2024-01-29 11:53:38 -05:00
Brendan Chou	5aeb01f968	allow viewer to use the `address` test-flag to have a view-only experience of a wallet (#250 ) * allow viewer to use test-flag to specify a view-only experience of a wallet * respond to CR * lint	2024-01-26 17:08:51 -05:00
moo-onthelawn	c9596de9c3	TRCL-3322 Implement reduce-only checkbox on frontend (#246 ) * implemented * eol lint again * update with correct abacus version * update localization to latest * fix localization v	2024-01-26 17:03:32 -05:00
Bill	cc8c724f09	bump v4-client (#252 )	2024-01-26 15:38:47 -05:00
aleka	ac07abea07	make sure view more is hidden when not num rows not specified (#249 )	2024-01-25 15:10:16 -05:00
Rui	54e81cca80	Change iOS app scheme to dydx-t-v4 (#248 )	2024-01-25 09:19:49 -08:00