add faucet url

.env.example

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

.github/workflows/deploy-testnet.yml

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

.ladle/components.tsx

@@ -2,132 +2,74 @@ 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 { SupportedLocales } from '@/constants/localization';
+import { store } from '@/state/_store';
-
-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 {
+import { setLocaleLoaded } from '@/state/localization';
-  AppTheme,
-  AppThemeSystemSetting,
-  AppColorMode,
-  setAppThemeSetting,
-  setAppColorMode,
-} from '@/state/configs';
-
-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 [theme, setTheme] = useState('Default theme');
-  const [colorMode, setColorMode] = useState(AppColorMode.GreenUp);
 
   useEffect(() => {
-    store.dispatch(setAppThemeSetting(theme));
+    switch (theme) {
-    store.dispatch(setAppColorMode(colorMode));
+      case 'Dark theme': {
-  }, [theme, colorMode]);
+        document?.documentElement?.classList.remove('theme-light');
+        document?.documentElement?.classList.add('theme-dark');
+        break;
+      }
+      case 'Light theme': {
+        document?.documentElement?.classList.remove('theme-dark');
+        document?.documentElement?.classList.add('theme-light');
+        break;
+      }
+      default: {
+        document?.documentElement?.classList.remove('theme-dark', 'theme-light');
+        break;
+      }
+    }
+  }, [theme]);
 
   useEffect(() => {
-    store.dispatch(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,
+              value: 'Default theme',
               label: 'Default theme',
             },
             {
-              value: AppThemeSystemSetting.System,
+              value: 'Dark theme',
-              label: 'System theme',
-            },
-            {
-              value: AppTheme.Dark,
               label: 'Dark theme',
             },
             {
-              value: AppTheme.Light,
+              value: 'Light theme',
               label: 'Light theme',
             },
           ].map(({ value, label }) => (
-            <SelectItem key={value} value={value} label={label} />
+            <SelectItem
-          ))}
+              key={value}
-        </SelectMenu>
+              value={value}
-        <h4>Active Color Mode:</h4>
+              label={label}
-        <SelectMenu value={colorMode} onValueChange={setColorMode}>
+            />
-          {[
-            {
-              value: AppColorMode.GreenUp,
-              label: 'Green up',
-            },
-            {
-              value: AppColorMode.RedUp,
-              label: 'Red up',
-            },
-          ].map(({ value, label }) => (
-            <SelectItem key={value} value={value} label={label} />
           ))}
         </SelectMenu>
       </StoryHeader>
       <hr />
-      {content}
+      <StoryContent>{children}</StoryContent>
     </Provider>
   );
 };

README.md

@@ -78,12 +78,11 @@ 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
 
@@ -107,9 +106,6 @@ pnpm run build --mode testnet
 If you wish to incorporate analytics via Amplitude and Bugsnag, you can use our scripts:
 `pnpm run build:inject-amplitude` and `pnpm run build:inject-bugsnag`. You will need to provide your own API keys for these services. In the Environment Variables section, name the variables as `AMPLITUDE_API_KEY` and `BUGSNAG_API_KEY` and provide the respective keys as their values.
 
-If you wish to incorporate smart banner for iOS and/or Android apps, you can use our scripts:
-`pnpm run build:inject-smartbanner`. You will need to provide your own app configurations for these services. In the Environment Variables section, name the variables as `SMARTBANNER_APP_NAME`, `SMARTBANNER_ORG_NAME`, `SMARTBANNER_ICON_URL` and `SMARTBANNER_APPSTORE_URL` or `SMARTBANNER_GOOGLEPLAY_URL` and provide the respective values.
-
 For more details, check out Vercel's [official documentation](https://vercel.com/docs).
 
 ## Deploying to IPFS

package.json

@@ -15,7 +15,6 @@
     "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",
@@ -34,15 +33,15 @@
   "packageManager": "pnpm@8.6.6",
   "dependencies": {
     "@0xsquid/sdk": "^1.10.0",
-    "@cosmjs/amino": "^0.32.1",
+    "@cosmjs/amino": "^0.31.0",
-    "@cosmjs/crypto": "^0.32.1",
+    "@cosmjs/crypto": "^0.31.0",
-    "@cosmjs/encoding": "^0.32.1",
+    "@cosmjs/encoding": "^0.31.0",
-    "@cosmjs/proto-signing": "^0.32.1",
+    "@cosmjs/proto-signing": "^0.31.0",
-    "@cosmjs/stargate": "^0.32.1",
+    "@cosmjs/stargate": "^0.31.0",
-    "@cosmjs/tendermint-rpc": "^0.32.1",
+    "@cosmjs/tendermint-rpc": "^0.31.0",
-    "@dydxprotocol/v4-abacus": "^1.4.2",
+    "@dydxprotocol/v4-abacus": "^1.2.5",
-    "@dydxprotocol/v4-client-js": "^1.0.20",
+    "@dydxprotocol/v4-client-js": "^1.0.11",
-    "@dydxprotocol/v4-localization": "^1.1.26",
+    "@dydxprotocol/v4-localization": "^1.1.11",
     "@ethersproject/providers": "^5.7.2",
     "@js-joda/core": "^5.5.3",
     "@radix-ui/react-accordion": "^1.1.2",
@@ -93,7 +92,6 @@
     "buffer": "^6.0.3",
     "cmdk": "^0.2.0",
     "color": "^4.2.3",
-    "cosmjs-types": "^0.9.0",
     "crypto-js": "^4.1.1",
     "ethers": "^6.6.1",
     "graz": "^0.0.43",
@@ -118,7 +116,7 @@
   },
   "devDependencies": {
     "@babel/core": "^7.22.5",
-    "@ladle/react": "^4.0.2",
+    "@ladle/react": "^2.15.0",
     "@types/color": "^3.0.3",
     "@types/crypto-js": "^4.1.1",
     "@types/luxon": "^3.3.0",
@@ -157,10 +155,5 @@
     "vitest": "^0.32.2",
     "w3name": "^1.0.8",
     "web3.storage": "^4.5.4"
-  },
-  "pnpm": {
-    "overrides": {
-      "follow-redirects": "1.15.3"
-    }
   }
 }

public/.well-known/assetlinks.json

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

public/chart-bars-background.svg

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

public/chart-bars.svg

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

public/configs/env.json

@@ -1,7 +1,7 @@
 {
    "apps": {
       "ios": {
-         "scheme": "dydx-t-v4"
+         "scheme": "dydxv4"
       }
    },
    "deployments": {
@@ -11,13 +11,6 @@
          ],
          "default": "dydxprotocol-mainnet"
       },
-      "TESTFLIGHT": {
-         "environments": [
-            "dydxprotocol-mainnet",
-            "dydxprotocol-testnet"
-         ],
-         "default": "dydxprotocol-mainnet"
-      },
       "TESTNET": {
          "environments": [
             "dydxprotocol-testnet"
@@ -88,15 +81,14 @@
             "blogs": "https://www.dydx.foundation/blog",
             "foundation": "https://www.dydx.foundation",
             "help": "https://help.dydx.exchange/",
+            "initialMarginFractionLearnMore": "https://help.dydx.exchange/articles/5232637-maximum-position-sizes",
             "reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
             "mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
             "documentation": "https://docs.dydx.exchange/",
             "community": "https://discord.com/invite/dydx",
             "governanceLearnMore": "https://help.dydx.exchange",
-            "newMarketProposalLearnMore": "https://dydx.exchange/blog/new-market-proposals",
             "stakingLearnMore": "https://help.dydx.exchange",
             "keplrDashboard": "https://testnet.keplr.app/",
-            "strideZoneApp": "https://testnet.stride.zone",
             "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
             "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
          },
@@ -117,16 +109,6 @@
             "images": "/wallets/",
             "signTypedDataAction": "dYdX Chain Onboarding",
             "signTypedDataDomainName": "dYdX Chain"
-         },
-         "governance": {
-            "newMarketProposal": {
-               "initialDepositAmount": 10000000,
-               "delayBlocks": 900,
-               "newMarketsMethodology": "https://docs.google.com/spreadsheets/d/1zjkV9R7R_7KMItuzqzvKGwefSBRfE-ZNAx1LH55OcqY/edit?usp=sharing"
-            }
-         },
-         "featureFlags": {
-            "reduceOnlySupported": true
          }
       },
       "dydxprotocol-dev-2": {
@@ -172,15 +154,14 @@
             "blogs": "https://www.dydx.foundation/blog",
             "foundation": "https://www.dydx.foundation",
             "help": "https://help.dydx.exchange/",
+            "initialMarginFractionLearnMore": "https://help.dydx.exchange/articles/5232637-maximum-position-sizes",
             "reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
             "mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
             "documentation": "https://docs.dydx.exchange/",
             "community": "https://discord.com/invite/dydx",
             "governanceLearnMore": "https://help.dydx.exchange",
-            "newMarketProposalLearnMore": "https://dydx.exchange/blog/new-market-proposals",
             "stakingLearnMore": "https://help.dydx.exchange",
             "keplrDashboard": "https://testnet.keplr.app/",
-            "strideZoneApp": "https://testnet.stride.zone",
             "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
             "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
          },
@@ -201,16 +182,6 @@
             "images": "/wallets/",
             "signTypedDataAction": "dYdX Chain Onboarding",
             "signTypedDataDomainName": "dYdX Chain"
-         },
-         "governance": {
-            "newMarketProposal": {
-               "initialDepositAmount": 10000000,
-               "delayBlocks": 900,
-               "newMarketsMethodology": "https://docs.google.com/spreadsheets/d/1zjkV9R7R_7KMItuzqzvKGwefSBRfE-ZNAx1LH55OcqY/edit?usp=sharing"
-            }
-         },
-         "featureFlags": {
-            "reduceOnlySupported": true
          }
       },
       "dydxprotocol-dev-4": {
@@ -257,15 +228,14 @@
             "blogs": "https://www.dydx.foundation/blog",
             "foundation": "https://www.dydx.foundation",
             "help": "https://help.dydx.exchange/",
+            "initialMarginFractionLearnMore": "https://help.dydx.exchange/articles/5232637-maximum-position-sizes",
             "reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
             "mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
             "documentation": "https://docs.dydx.exchange/",
             "community": "https://discord.com/invite/dydx",
             "governanceLearnMore": "https://help.dydx.exchange",
-            "newMarketProposalLearnMore": "https://dydx.exchange/blog/new-market-proposals",
             "stakingLearnMore": "https://help.dydx.exchange",
             "keplrDashboard": "https://testnet.keplr.app/",
-            "strideZoneApp": "https://testnet.stride.zone",
             "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
             "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
          },
@@ -286,16 +256,6 @@
             "images": "/wallets/",
             "signTypedDataAction": "dYdX Chain Onboarding",
             "signTypedDataDomainName": "dYdX Chain"
-         },
-         "governance": {
-            "newMarketProposal": {
-               "initialDepositAmount": 10000000,
-               "delayBlocks": 900,
-               "newMarketsMethodology": "https://docs.google.com/spreadsheets/d/1zjkV9R7R_7KMItuzqzvKGwefSBRfE-ZNAx1LH55OcqY/edit?usp=sharing"
-            }
-         },
-         "featureFlags": {
-            "reduceOnlySupported": true
          }
       },
       "dydxprotocol-dev-5": {
@@ -341,15 +301,14 @@
             "blogs": "https://www.dydx.foundation/blog",
             "foundation": "https://www.dydx.foundation",
             "help": "https://help.dydx.exchange/",
+            "initialMarginFractionLearnMore": "https://help.dydx.exchange/articles/5232637-maximum-position-sizes",
             "reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
             "mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
             "documentation": "https://docs.dydx.exchange/",
             "community": "https://discord.com/invite/dydx",
             "governanceLearnMore": "https://help.dydx.exchange",
-            "newMarketProposalLearnMore": "https://dydx.exchange/blog/new-market-proposals",
             "stakingLearnMore": "https://help.dydx.exchange",
             "keplrDashboard": "https://testnet.keplr.app/",
-            "strideZoneApp": "https://testnet.stride.zone",
             "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
             "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
          },
@@ -370,16 +329,6 @@
             "images": "/wallets/",
             "signTypedDataAction": "dYdX Chain Onboarding",
             "signTypedDataDomainName": "dYdX Chain"
-         },
-         "governance": {
-            "newMarketProposal": {
-               "initialDepositAmount": 10000000,
-               "delayBlocks": 900,
-               "newMarketsMethodology": "https://docs.google.com/spreadsheets/d/1zjkV9R7R_7KMItuzqzvKGwefSBRfE-ZNAx1LH55OcqY/edit?usp=sharing"
-            }
-         },
-         "featureFlags": {
-            "reduceOnlySupported": true
          }
       },
       "dydxprotocol-staging": {
@@ -429,13 +378,12 @@
             "blogs": "https://www.dydx.foundation/blog",
             "help": "https://help.dydx.exchange",
             "foundation": "https://www.dydx.foundation",
+            "initialMarginFractionLearnMore": "https://help.dydx.exchange/articles/5232637-maximum-position-sizes",
             "reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
             "mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
             "governanceLearnMore": "https://help.dydx.exchange",
-            "newMarketProposalLearnMore": "https://dydx.exchange/blog/new-market-proposals",
             "stakingLearnMore": "https://help.dydx.exchange",
             "keplrDashboard": "https://testnet.keplr.app/",
-            "strideZoneApp": "https://testnet.stride.zone",
             "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
             "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
          },
@@ -456,16 +404,6 @@
             "images": "/wallets/",
             "signTypedDataAction": "dYdX Chain Onboarding",
             "signTypedDataDomainName": "dYdX Chain"
-         },
-         "governance": {
-            "newMarketProposal": {
-               "initialDepositAmount": 10000000,
-               "delayBlocks": 900,
-               "newMarketsMethodology": "https://docs.google.com/spreadsheets/d/1zjkV9R7R_7KMItuzqzvKGwefSBRfE-ZNAx1LH55OcqY/edit?usp=sharing"
-            }
-         },
-         "featureFlags": {
-            "reduceOnlySupported": true
          }
       },
       "dydxprotocol-staging-forced-update": {
@@ -513,8 +451,7 @@
             "documentation": "https://v4-teacher.vercel.app/",
             "community": "https://discord.com/invite/dydx",
             "feedback": "https://docs.google.com/forms/d/e/1FAIpQLSezLsWCKvAYDEb7L-2O4wOON1T56xxro9A2Azvl6IxXHP_15Q/viewform",
-            "blogs": "https://www.dydx.foundation/blog",
+            "blogs": "https://www.dydx.foundation/blog"
-            "newMarketProposalLearnMore": "https://dydx.exchange/blog/new-market-proposals"
          },
          "wallets": {
             "walletconnect": {
@@ -540,16 +477,6 @@
                "build": 40000,
                "url": "https://apps.apple.com/app/dydx/id1564787350"
             }
-         },
-         "governance": {
-            "newMarketProposal": {
-               "initialDepositAmount": 10000000,
-               "delayBlocks": 900,
-               "newMarketsMethodology": "https://docs.google.com/spreadsheets/d/1zjkV9R7R_7KMItuzqzvKGwefSBRfE-ZNAx1LH55OcqY/edit?usp=sharing"
-            }
-         },
-         "featureFlags": {
-            "reduceOnlySupported": true
          }
       },
       "dydxprotocol-staging-west": {
@@ -599,13 +526,12 @@
             "blogs": "https://www.dydx.foundation/blog",
             "help": "https://help.dydx.exchange",
             "foundation": "https://www.dydx.foundation",
+            "initialMarginFractionLearnMore": "https://help.dydx.exchange/articles/5232637-maximum-position-sizes",
             "reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
             "mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
             "governanceLearnMore": "https://help.dydx.exchange",
-            "newMarketProposalLearnMore": "https://dydx.exchange/blog/new-market-proposals",
             "stakingLearnMore": "https://help.dydx.exchange",
             "keplrDashboard": "https://testnet.keplr.app/",
-            "strideZoneApp": "https://testnet.stride.zone",
             "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
             "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
          },
@@ -626,16 +552,6 @@
             "images": "/wallets/",
             "signTypedDataAction": "dYdX Chain Onboarding",
             "signTypedDataDomainName": "dYdX Chain"
-         },
-         "governance": {
-            "newMarketProposal": {
-               "initialDepositAmount": 10000000,
-               "delayBlocks": 900,
-               "newMarketsMethodology": "https://docs.google.com/spreadsheets/d/1zjkV9R7R_7KMItuzqzvKGwefSBRfE-ZNAx1LH55OcqY/edit?usp=sharing"
-            }
-         },
-         "featureFlags": {
-            "reduceOnlySupported": true
          }
       },
       "dydxprotocol-testnet": {
@@ -689,13 +605,12 @@
             "blogs": "https://www.dydx.foundation/blog",
             "foundation": "https://www.dydx.foundation",
             "help": "https://help.dydx.exchange/",
+            "initialMarginFractionLearnMore": "https://help.dydx.exchange/articles/5232637-maximum-position-sizes",
             "reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
             "mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
             "governanceLearnMore": "https://help.dydx.exchange",
-            "newMarketProposalLearnMore": "https://dydx.exchange/blog/new-market-proposals",
             "stakingLearnMore": "https://help.dydx.exchange",
             "keplrDashboard": "https://testnet.keplr.app/",
-            "strideZoneApp": "https://testnet.stride.zone",
             "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
             "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
          },
@@ -716,16 +631,6 @@
             "images": "/wallets/",
             "signTypedDataAction": "dYdX Chain Onboarding",
             "signTypedDataDomainName": "dYdX V4"
-         },
-         "governance": {
-            "newMarketProposal": {
-               "initialDepositAmount": 10000000,
-               "delayBlocks": 900,
-               "newMarketsMethodology": "https://docs.google.com/spreadsheets/d/1zjkV9R7R_7KMItuzqzvKGwefSBRfE-ZNAx1LH55OcqY/edit?usp=sharing"
-            }
-         },
-         "featureFlags": {
-            "reduceOnlySupported": false
          }
       },
       "dydxprotocol-testnet-dydx": {
@@ -776,13 +681,12 @@
             "blogs": "https://www.dydx.foundation/blog",
             "foundation": "https://www.dydx.foundation",
             "help": "https://help.dydx.exchange/",
+            "initialMarginFractionLearnMore": "https://help.dydx.exchange/articles/5232637-maximum-position-sizes",
             "reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
             "mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
             "governanceLearnMore": "https://help.dydx.exchange",
-            "newMarketProposalLearnMore": "https://dydx.exchange/blog/new-market-proposals",
             "stakingLearnMore": "https://help.dydx.exchange",
             "keplrDashboard": "https://testnet.keplr.app/",
-            "strideZoneApp": "https://testnet.stride.zone",
             "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
             "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
          },
@@ -803,16 +707,6 @@
             "images": "/wallets/",
             "signTypedDataAction": "dYdX Chain Onboarding",
             "signTypedDataDomainName": "dYdX V4"
-         },
-         "governance": {
-            "newMarketProposal": {
-               "initialDepositAmount": 10000000,
-               "delayBlocks": 900,
-               "newMarketsMethodology": "https://docs.google.com/spreadsheets/d/1zjkV9R7R_7KMItuzqzvKGwefSBRfE-ZNAx1LH55OcqY/edit?usp=sharing"
-            }
-         },
-         "featureFlags": {
-            "reduceOnlySupported": false
          }
       },
       "dydxprotocol-testnet-nodefleet": {
@@ -863,13 +757,12 @@
             "blogs": "https://www.dydx.foundation/blog",
             "foundation": "https://www.dydx.foundation",
             "help": "https://help.dydx.exchange/",
+            "initialMarginFractionLearnMore": "https://help.dydx.exchange/articles/5232637-maximum-position-sizes",
             "reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
             "mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
             "governanceLearnMore": "https://help.dydx.exchange",
-            "newMarketProposalLearnMore": "https://dydx.exchange/blog/new-market-proposals",
             "stakingLearnMore": "https://help.dydx.exchange",
             "keplrDashboard": "https://testnet.keplr.app/",
-            "strideZoneApp": "https://testnet.stride.zone",
             "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
             "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
          },
@@ -890,16 +783,6 @@
             "images": "/wallets/",
             "signTypedDataAction": "dYdX Chain Onboarding",
             "signTypedDataDomainName": "dYdX V4"
-         },
-         "governance": {
-            "newMarketProposal": {
-               "initialDepositAmount": 10000000,
-               "delayBlocks": 900,
-               "newMarketsMethodology": "https://docs.google.com/spreadsheets/d/1zjkV9R7R_7KMItuzqzvKGwefSBRfE-ZNAx1LH55OcqY/edit?usp=sharing"
-            }
-         },
-         "featureFlags": {
-            "reduceOnlySupported": false
          }
       },
       "dydxprotocol-testnet-kingnodes": {
@@ -950,13 +833,12 @@
             "blogs": "https://www.dydx.foundation/blog",
             "foundation": "https://www.dydx.foundation",
             "help": "https://help.dydx.exchange/",
+            "initialMarginFractionLearnMore": "https://help.dydx.exchange/articles/5232637-maximum-position-sizes",
             "reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
             "mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
             "governanceLearnMore": "https://help.dydx.exchange",
-            "newMarketProposalLearnMore": "https://dydx.exchange/blog/new-market-proposals",
             "stakingLearnMore": "https://help.dydx.exchange",
             "keplrDashboard": "https://testnet.keplr.app/",
-            "strideZoneApp": "https://testnet.stride.zone",
             "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
             "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
          },
@@ -977,16 +859,6 @@
             "images": "/wallets/",
             "signTypedDataAction": "dYdX Chain Onboarding",
             "signTypedDataDomainName": "dYdX V4"
-         },
-         "governance": {
-            "newMarketProposal": {
-               "initialDepositAmount": 10000000,
-               "delayBlocks": 900,
-               "newMarketsMethodology": "https://docs.google.com/spreadsheets/d/1zjkV9R7R_7KMItuzqzvKGwefSBRfE-ZNAx1LH55OcqY/edit?usp=sharing"
-            }
-         },
-         "featureFlags": {
-            "reduceOnlySupported": false
          }
       },
       "dydxprotocol-testnet-liquify": {
@@ -1037,13 +909,12 @@
             "blogs": "https://www.dydx.foundation/blog",
             "foundation": "https://www.dydx.foundation",
             "help": "https://help.dydx.exchange/",
+            "initialMarginFractionLearnMore": "https://help.dydx.exchange/articles/5232637-maximum-position-sizes",
             "reduceOnlyLearnMore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
             "mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
             "governanceLearnMore": "https://help.dydx.exchange",
-            "newMarketProposalLearnMore": "https://dydx.exchange/blog/new-market-proposals",
             "stakingLearnMore": "https://help.dydx.exchange",
             "keplrDashboard": "https://testnet.keplr.app/",
-            "strideZoneApp": "https://testnet.stride.zone",
             "accountExportLearnMore": "https://help.dydx.exchange/en/articles/8565867-secret-phrase-on-dydx-chain",
             "walletLearnMore": "https://www.dydx.academy/video/defi-wallet"
          },
@@ -1064,16 +935,6 @@
             "images": "/wallets/",
             "signTypedDataAction": "dYdX Chain Onboarding",
             "signTypedDataDomainName": "dYdX V4"
-         },
-         "governance": {
-            "newMarketProposal": {
-               "initialDepositAmount": 10000000,
-               "delayBlocks": 900,
-               "newMarketsMethodology": "https://docs.google.com/spreadsheets/d/1zjkV9R7R_7KMItuzqzvKGwefSBRfE-ZNAx1LH55OcqY/edit?usp=sharing"
-            }
-         },
-         "featureFlags": {
-            "reduceOnlySupported": false
          }
       },
       "dydxprotocol-testnet-polkachu": {
@@ -1122,8 +983,7 @@
             "documentation": "https://docs.dydx.exchange/",
             "community": "https://discord.com/invite/dydx",
             "feedback": "https://docs.google.com/forms/d/e/1FAIpQLSezLsWCKvAYDEb7L-2O4wOON1T56xxro9A2Azvl6IxXHP_15Q/viewform",
-            "blogs": "https://www.dydx.foundation/blog",
+            "blogs": "https://www.dydx.foundation/blog"
-            "newMarketProposalLearnMore": "https://dydx.exchange/blog/new-market-proposals"
          },
          "wallets": {
             "walletconnect": {
@@ -1142,16 +1002,6 @@
             "images": "/wallets/",
             "signTypedDataAction": "dYdX Chain Onboarding",
             "signTypedDataDomainName": "dYdX V4"
-         },
-         "governance": {
-            "newMarketProposal": {
-               "initialDepositAmount": 10000000,
-               "delayBlocks": 900,
-               "newMarketsMethodology": "https://docs.google.com/spreadsheets/d/1zjkV9R7R_7KMItuzqzvKGwefSBRfE-ZNAx1LH55OcqY/edit?usp=sharing"
-            }
-         },
-         "featureFlags": {
-            "reduceOnlySupported": false
          }
       },
       "dydxprotocol-testnet-bware": {
@@ -1202,13 +1052,12 @@
             "blogs": "https://www.dydx.foundation/blog",
             "foundation": "https://www.dydx.foundation",
             "help": "https://help.dydx.exchange/",
+            "initialMarginFractionLearnmore": "https://help.dydx.exchange/articles/5232637-maximum-position-sizes",
             "reduceOnlyLearnmore": "https://help.dydx.exchange/articles/6345793-reduce-only-orders",
             "mintscanBase": "https://testnet.mintscan.io/dydx-testnet",
             "governanceLearnmore": "https://help.dydx.exchange",
-            "newMarketProposalLearnMore": "https://dydx.exchange/blog/new-market-proposals",
             "stakingLearnmore": "https://help.dydx.exchange",
             "keplrDashboard": "https://testnet.keplr.app/",
-            "strideZoneApp": "https://testnet.stride.zone",
             "accountExportLearnmore": "https://help.dydx.exchange",
             "walletLearnmore": "https://www.dydx.academy/video/defi-wallet"
          },
@@ -1229,16 +1078,6 @@
             "images": "/wallets/",
             "signTypedDataAction": "dYdX Chain Onboarding",
             "signTypedDataDomainName": "dYdX V4"
-         },
-         "governance": {
-            "newMarketProposal": {
-               "initialDepositAmount": 10000000,
-               "delayBlocks": 900,
-               "newMarketsMethodology": "https://docs.google.com/spreadsheets/d/1zjkV9R7R_7KMItuzqzvKGwefSBRfE-ZNAx1LH55OcqY/edit?usp=sharing"
-            }
-         },
-         "featureFlags": {
-            "reduceOnlySupported": false
          }
       },
       "dydxprotocol-mainnet": {
@@ -1287,15 +1126,14 @@
             "feedback": "[HTTP link to feedback form, can be null]",
             "blogs": "[HTTP link to blogs, can be null]",
             "foundation": "[HTTP link to foundation, can be null]",
+            "initialMarginFractionLearnMore": "[HTTP link to initial margin fraction learn more, can be null]",
             "reduceOnlyLearnMore": "[HTTP link to reduce-only learn more, can be null]",
             "documentation": "[HTTP link to documentation, can be null]",
             "community": "[HTTP link to community, can be null]",
             "help": "[HTTP link to help page, can be null]",
             "governanceLearnMore": "[HTTP link to governance learn more, can be null]",
-            "newMarketProposalLearnMore": "[HTTP link to new market proposal learn more, can be null]",
             "stakingLearnMore": "[HTTP link to staking learn more, can be null]",
             "keplrDashboard": "[HTTP link to keplr dashboard, can be null]",
-            "strideZoneApp": "[HTTP link to stride zone app, can be null]",
             "accountExportLearnMore": "[HTTP link to account export learn more, can be null]",
             "walletLearnMore": "[HTTP link to wallet learn more, can be null]"
          },
@@ -1316,16 +1154,6 @@
             "images": "[Relative URL for wallet images]",
             "signTypedDataAction": "dYdX Chain Onboarding",
             "signTypedDataDomainName": "dYdX Chain"
-         },
-         "governance": {
-            "newMarketProposal": {
-               "initialDepositAmount": 0,
-               "delayBlocks": 0,
-               "newMarketsMethodology": "[URL to spreadsheet or document that explains methodology]"
-            }
-         },
-         "featureFlags": {
-            "reduceOnlySupported": false
          }
       }
    }

public/configs/exchanges.json

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

public/configs/markets.json

@@ -69,13 +69,6 @@
     "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": [],
@@ -176,13 +169,6 @@
     "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"],

public/smartbanner.html

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

scripts/README.md

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

scripts/inject-amplitude.js

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

scripts/inject-smartbanner.js

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

src/App.tsx

@@ -5,7 +5,7 @@ import { WagmiConfig } from 'wagmi';
 import { QueryClient, QueryClientProvider } from 'react-query';
 import { GrazProvider } from 'graz';
 
-import { AppRoute, DEFAULT_TRADE_ROUTE, MarketsRoute } from '@/constants/routes';
+import { AppRoute, DEFAULT_TRADE_ROUTE } from '@/constants/routes';
 
 import {
   useBreakpoints,
@@ -16,12 +16,10 @@ import {
 } from '@/hooks';
 import { DydxProvider } from '@/hooks/useDydxClient';
 import { AccountsProvider } from '@/hooks/useAccounts';
-import { AppThemeAndColorModeProvider } from '@/hooks/useAppThemeAndColorMode';
 import { DialogAreaProvider, useDialogArea } from '@/hooks/useDialogArea';
 import { LocaleProvider } from '@/hooks/useLocaleSeparators';
 import { NotificationsProvider } from '@/hooks/useNotifications';
 import { LocalNotificationsProvider } from '@/hooks/useLocalNotifications';
-import { PotentialMarketsProvider } from '@/hooks/usePotentialMarkets';
 import { RestrictionProvider } from '@/hooks/useRestrictions';
 import { SubaccountProvider } from '@/hooks/useSubaccount';
 
@@ -37,7 +35,6 @@ import { GlobalCommandDialog } from '@/views/dialogs/GlobalCommandDialog';
 import { config } from '@/lib/wagmi';
 
 import { breakpoints } from '@/styles';
-import { GlobalStyle } from '@/styles/globalStyle';
 import { layoutMixins } from '@/styles/layoutMixins';
 import { LoadingSpace } from './components/Loading/LoadingSpinner';
 
@@ -45,16 +42,15 @@ 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();
 
@@ -70,55 +66,49 @@ const Content = () => {
   const { chainTokenLabel } = useTokenConfigs();
 
   return (
-    <>
+    <Styled.Content isShowingHeader={isShowingHeader} isShowingFooter={isShowingFooter}>
-      <GlobalStyle />
+      {isNotTablet && <HeaderDesktop />}
-      <Styled.Content isShowingHeader={isShowingHeader} isShowingFooter={isShowingFooter}>
-        {isNotTablet && <HeaderDesktop />}
 
-        <Styled.Main>
+      <Styled.Main>
-          <Suspense fallback={<LoadingSpace id="main" />}>
+        <Suspense fallback={<LoadingSpace id="main" />}>
-            <Routes>
+          <Routes>
-              <Route path={AppRoute.Trade}>
+            <Route path={AppRoute.Trade}>
-                <Route path=":market" element={<TradePage />} />
+              <Route path=":market" element={<TradePage />} />
-                <Route path={AppRoute.Trade} element={<TradePage />} />
+              <Route path={AppRoute.Trade} element={<TradePage />} />
-              </Route>
+            </Route>
 
-              <Route path={AppRoute.Markets}>
+            <Route path={AppRoute.Markets} element={<MarketsPage />} />
-                <Route path={MarketsRoute.New} element={<NewMarket />} />
+            <Route path={`/${chainTokenLabel}`} element={<RewardsPage />} />
-                <Route path={AppRoute.Markets} element={<MarketsPage />} />
+            {isTablet && (
-              </Route>
+              <>
-              <Route path={`/${chainTokenLabel}/*`} element={<TokenPage />} />
+                <Route path={AppRoute.Alerts} element={<AlertsPage />} />
-              {isTablet && (
+                <Route path={AppRoute.Profile} element={<ProfilePage />} />
-                <>
+                <Route path={`${AppRoute.Settings}/*`} element={<SettingsPage />} />
-                  <Route path={AppRoute.Alerts} element={<AlertsPage />} />
+              </>
-                  <Route path={AppRoute.Profile} element={<ProfilePage />} />
+            )}
-                  <Route path={`${AppRoute.Settings}/*`} element={<SettingsPage />} />
-                </>
-              )}
 
-              <Route element={<GuardedMobileRoute />}>
+            <Route element={<GuardedMobileRoute />}>
-                <Route path={`${AppRoute.Portfolio}/*`} element={<PortfolioPage />} />
+              <Route path={`${AppRoute.Portfolio}/*`} element={<PortfolioPage />} />
-              </Route>
+            </Route>
 
-              <Route path={AppRoute.Terms} element={<TermsOfUsePage />} />
+            <Route path={AppRoute.Terms} element={<TermsOfUsePage />} />
-              <Route path={AppRoute.Privacy} element={<PrivacyPolicyPage />} />
+            <Route path={AppRoute.Privacy} element={<PrivacyPolicyPage />} />
 
-              <Route path="*" element={<Navigate to={DEFAULT_TRADE_ROUTE} replace />} />
+            <Route path="*" element={<Navigate to={DEFAULT_TRADE_ROUTE} replace />} />
-            </Routes>
+          </Routes>
-          </Suspense>
+        </Suspense>
-        </Styled.Main>
+      </Styled.Main>
 
-        {isTablet ? <FooterMobile /> : <FooterDesktop />}
+      {isTablet ? <FooterMobile /> : <FooterDesktop />}
 
-        <Styled.NotificationsToastArea />
+      <Styled.NotificationsToastArea />
 
-        <Styled.DialogArea ref={setDialogArea}>
+      <Styled.DialogArea ref={setDialogArea}>
-          <DialogManager />
+        <DialogManager />
-        </Styled.DialogArea>
+      </Styled.DialogArea>
 
-        <GlobalCommandDialog />
+      <GlobalCommandDialog />
-      </Styled.Content>
+    </Styled.Content>
-    </>
   );
 };
 
@@ -141,8 +131,6 @@ const providers = [
   wrapProvider(LocalNotificationsProvider),
   wrapProvider(NotificationsProvider),
   wrapProvider(DialogAreaProvider),
-  wrapProvider(PotentialMarketsProvider),
-  wrapProvider(AppThemeAndColorModeProvider),
 ];
 
 const App = () => {
@@ -207,7 +195,6 @@ Styled.Content = styled.div<{ isShowingHeader: boolean; isShowingFooter: boolean
 
 Styled.Main = styled.main`
   ${layoutMixins.contentSectionAttached}
-  box-shadow: none;
 
   grid-area: Main;
 

src/components/Accordion.tsx

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

src/components/AlertMessage.tsx

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

src/components/AssetIcon.tsx

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

src/components/BaseButton.tsx

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

src/components/Button.tsx

@@ -89,10 +89,9 @@ const buttonActionVariants = {
     --button-border: solid var(--border-width) var(--color-border);
   `,
   [ButtonAction.Primary]: css`
-    --button-textColor: var(--color-text-button);
+    --button-textColor: var(--color-text-2);
     --button-backgroundColor: var(--color-accent);
     --button-border: solid var(--border-width) var(--color-border-white);
-    --button-hover-filter: brightness(var(--hover-filter-variant));
   `,
 
   [ButtonAction.Secondary]: css`
@@ -102,17 +101,15 @@ const buttonActionVariants = {
   `,
 
   [ButtonAction.Create]: css`
-    --button-textColor: var(--color-text-button);
+    --button-textColor: var(--color-text-2);
-    --button-backgroundColor: var(--color-green);
+    --button-backgroundColor: var(--color-positive);
     --button-border: solid var(--border-width) var(--color-border-white);
-    --button-hover-filter: brightness(var(--hover-filter-variant));
   `,
 
   [ButtonAction.Destroy]: css`
-    --button-textColor: var(--color-text-button);
+    --button-textColor: var(--color-text-2);
-    --button-backgroundColor: var(--color-red);
+    --button-backgroundColor: var(--color-negative);
     --button-border: solid var(--border-width) var(--color-border-white);
-    --button-hover-filter: brightness(var(--hover-filter-variant));
   `,
 
   [ButtonAction.Navigation]: css`
@@ -122,10 +119,9 @@ const buttonActionVariants = {
   `,
 
   [ButtonAction.Reset]: css`
-    --button-textColor: var(--color-red);
+    --button-textColor: var(--color-negative);
     --button-backgroundColor: var(--color-layer-3);
     --button-border: solid var(--border-width) var(--color-border-red);
-    --button-hover-filter: brightness(var(--hover-filter-variant));
   `,
 };
 

src/components/Canvas.tsx

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

src/components/Checkbox.stories.tsx

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

src/components/Checkbox.tsx

@@ -1,4 +1,4 @@
-import styled, { css, type AnyStyledComponent } from 'styled-components';
+import styled, { type AnyStyledComponent } from 'styled-components';
 import { Root, Indicator } from '@radix-ui/react-checkbox';
 import { CheckIcon } from '@radix-ui/react-icons';
 
@@ -9,7 +9,6 @@ type ElementProps = {
   onCheckedChange: (checked: boolean) => void;
   id?: string;
   label?: React.ReactNode;
-  disabled?: boolean;
 };
 
 type StyleProps = {
@@ -24,25 +23,14 @@ export const Checkbox: React.FC<CheckboxProps> = ({
   onCheckedChange,
   id,
   label,
-  disabled,
 }) => (
   <Styled.Container>
-    <Styled.Root
+    <Styled.Root className={className} checked={checked} onCheckedChange={onCheckedChange} id={id}>
-      className={className}
-      checked={checked}
-      disabled={disabled}
-      onCheckedChange={onCheckedChange}
-      id={id}
-    >
       <Styled.Indicator>
         <CheckIcon />
       </Styled.Indicator>
     </Styled.Root>
-    {label && (
+    {label && <label htmlFor={id}>{label}</label>}
-      <Styled.Label disabled={disabled} htmlFor={id}>
-        {label}
-      </Styled.Label>
-    )}
   </Styled.Container>
 );
 
@@ -52,27 +40,25 @@ 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(--checkbox-borderColor);
+  border: var(--border-width) solid var(--color-border);
   background-color: var(--checkbox-backgroundColor);
 
   &[data-state='checked'] {
     --checkbox-backgroundColor: var(--color-accent);
   }
-
-  &[data-disabled] {
-    cursor: not-allowed;
-    --checkbox-backgroundColor: var(--color-layer-1);
-  }
 `;
 
 Styled.Indicator = styled(Indicator)`
@@ -80,17 +66,5 @@ 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);
-    `}
 `;

src/components/ComboboxMenu.tsx

@@ -50,11 +50,10 @@ export const ComboboxMenu = <MenuItemValue extends string, MenuGroupValue extend
       label={title}
       // value={highlightedCommand}
       // onValueChange={setHighlightedCommand}
-      filter={(value: string, search: string) =>
+      filter={(value: string, search: string) => {
-        value.replace(/ /g, '').toLowerCase().includes(search.replace(/ /g, '').toLowerCase())
+        if (value.replace(/ /g, '').includes(search.replace(/ /g, ''))) return 1;
-          ? 1
+        return 0;
-          : 0
+      }}
-      }
       className={className}
       $withStickyLayout={withStickyLayout}
     >

src/components/ContentSectionHeader.tsx

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

src/components/CopyButton.tsx

@@ -77,7 +77,7 @@ Styled.InlineRow = styled.div<{ copied: boolean }>`
         `
       : css`
           &:hover {
-            filter: brightness(var(--hover-filter-base));
+            filter: brightness(1.1);
             text-decoration: underline;
           }
         `}
@@ -87,7 +87,7 @@ Styled.Icon = styled(Icon)<{ copied: boolean }>`
   ${({ copied }) =>
     copied &&
     css`
-      color: var(--color-success);
+      color: var(--color-positive);
     `}
 `;
 
@@ -96,7 +96,7 @@ Styled.IconButton = styled(IconButton)<{ copied: boolean }>`
     copied &&
     css`
       svg {
-        color: var(--color-success);
+        color: var(--color-positive);
       }
     `}
 `;

src/components/Details.stories.tsx

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

src/components/DiffArrow.stories.tsx

@@ -14,7 +14,7 @@ export const DiffArrowStory: Story<DiffArrowProps> = (args) => (
 
 DiffArrowStory.argTypes = {
   direction: {
-    options: ['left', 'right', 'up', 'down'],
+    options: ['left', 'right'],
     control: { type: 'select' },
     defaultValue: 'right',
   },

src/components/DiffArrow.tsx

@@ -10,7 +10,7 @@ type ElementProps = {
 
 type StyleProps = {
   className?: string;
-  direction?: 'right' | 'left' | 'up' | 'down';
+  direction?: 'right' | 'left';
 };
 
 export type DiffArrowProps = ElementProps & StyleProps;
@@ -57,11 +57,5 @@ Styled.DiffArrowContainer = styled.span<DiffArrowProps>`
       left: css`
         transform: scaleX(-1);
       `,
-      up: css`
-        transform: rotate(-90deg);
-      `,
-      down: css`
-        transform: rotate(90deg);
-      `,
     }[direction || 'right'])}
 `;

src/components/DiffOutput.tsx

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

src/components/DropdownHeaderMenu.tsx

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

src/components/DropdownMenu.stories.tsx

@@ -4,43 +4,38 @@ import { DropdownMenu } from '@/components/DropdownMenu';
 
 import { StoryWrapper } from '.ladle/components';
 
-export const DropdownMenuStory: Story<Parameters<typeof DropdownMenu>[0]> = (args) => {
+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'),
+    },
+  ];
+
   return (
     <StoryWrapper>
-      <DropdownMenu {...args}>
+      <DropdownMenu
+        {...args}
+        items={exampleItems}
+      >
         <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: {

src/components/DropdownMenu.tsx

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

src/components/DropdownSelectMenu.stories.tsx

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

src/components/FormInput.tsx

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

src/components/Icon.stories.tsx

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

src/components/Icon.tsx

@@ -13,7 +13,6 @@ import {
   CaretIcon,
   CautionCircleStrokeIcon,
   CautionCircleIcon,
-  ChaosLabsIcon,
   ChatIcon,
   CheckIcon,
   CheckCircleIcon,
@@ -25,7 +24,6 @@ import {
   CoinsIcon,
   CommentIcon,
   CopyIcon,
-  CurrencySignIcon,
   DepositIcon,
   DepthChartIcon,
   DiscordIcon,
@@ -36,7 +34,6 @@ import {
   FundingChartIcon,
   GearIcon,
   GiftboxIcon,
-  GovernanceIcon,
   HelpCircleIcon,
   HideIcon,
   HistoryIcon,
@@ -47,7 +44,6 @@ import {
   MenuIcon,
   MigrateIcon,
   MintscanIcon,
-  MoonIcon,
   OrderbookIcon,
   OrderCanceledIcon,
   OrderFilledIcon,
@@ -70,9 +66,7 @@ import {
   ShowIcon,
   TogglesMenuIcon,
   StarIcon,
-  SunIcon,
   TerminalIcon,
-  TokenIcon,
   TradeIcon,
   TransferIcon,
   TriangleIcon,
@@ -94,7 +88,6 @@ export enum IconName {
   Caret = 'Caret',
   CautionCircle = 'CautionCircle',
   CautionCircleStroked = 'CautionCircleStroked',
-  ChaosLabs = 'ChaosLabs',
   Chat = 'Chat',
   Check = 'Check',
   CheckCircle = 'CheckCircle',
@@ -106,7 +99,6 @@ export enum IconName {
   Coins = 'Coins',
   Comment = 'Comment',
   Copy = 'Copy',
-  CurrencySign = 'CurrencySign',
   Deposit = 'Deposit',
   DepthChart = 'DepthChart',
   Discord = 'Discord',
@@ -117,7 +109,6 @@ export enum IconName {
   FundingChart = 'FundingChart',
   Gear = 'Gear',
   Giftbox = 'Giftbox',
-  Governance = 'Governance',
   HelpCircle = 'HelpCircle',
   Hide = 'Hide',
   History = 'History',
@@ -128,7 +119,6 @@ export enum IconName {
   Menu = 'Menu',
   Migrate = 'Migrate',
   Mintscan = 'Mintscan',
-  Moon = 'Moon',
   Onboarding = 'Onboarding',
   Orderbook = 'OrderbookIcon',
   OrderCanceled = 'OrderCanceled',
@@ -151,10 +141,8 @@ export enum IconName {
   Share = 'Share',
   Show = 'Show',
   Star = 'Star',
-  Sun = 'Sun',
   Terminal = 'Terminal',
   TogglesMenu = 'TogglesMenu',
-  Token = 'Token',
   Trade = 'Trade',
   Transfer = 'Transfer',
   Triangle = 'Triangle',
@@ -176,7 +164,6 @@ const icons = {
   [IconName.Caret]: CaretIcon,
   [IconName.CautionCircle]: CautionCircleIcon,
   [IconName.CautionCircleStroked]: CautionCircleStrokeIcon,
-  [IconName.ChaosLabs]: ChaosLabsIcon,
   [IconName.Chat]: ChatIcon,
   [IconName.Check]: CheckIcon,
   [IconName.CheckCircle]: CheckCircleIcon,
@@ -188,7 +175,6 @@ const icons = {
   [IconName.Coins]: CoinsIcon,
   [IconName.Comment]: CommentIcon,
   [IconName.Copy]: CopyIcon,
-  [IconName.CurrencySign]: CurrencySignIcon,
   [IconName.Deposit]: DepositIcon,
   [IconName.DepthChart]: DepthChartIcon,
   [IconName.Discord]: DiscordIcon,
@@ -199,7 +185,6 @@ const icons = {
   [IconName.FundingChart]: FundingChartIcon,
   [IconName.Gear]: GearIcon,
   [IconName.Giftbox]: GiftboxIcon,
-  [IconName.Governance]: GovernanceIcon,
   [IconName.HelpCircle]: HelpCircleIcon,
   [IconName.Hide]: HideIcon,
   [IconName.History]: HistoryIcon,
@@ -210,7 +195,6 @@ const icons = {
   [IconName.Menu]: MenuIcon,
   [IconName.Migrate]: MigrateIcon,
   [IconName.Mintscan]: MintscanIcon,
-  [IconName.Moon]: MoonIcon,
   [IconName.Orderbook]: OrderbookIcon,
   [IconName.OrderCanceled]: OrderCanceledIcon,
   [IconName.OrderFilled]: OrderFilledIcon,
@@ -232,10 +216,8 @@ const icons = {
   [IconName.Share]: ShareIcon,
   [IconName.Show]: ShowIcon,
   [IconName.Star]: StarIcon,
-  [IconName.Sun]: SunIcon,
   [IconName.Terminal]: TerminalIcon,
   [IconName.TogglesMenu]: TogglesMenuIcon,
-  [IconName.Token]: TokenIcon,
   [IconName.Trade]: TradeIcon,
   [IconName.Transfer]: TransferIcon,
   [IconName.Triangle]: TriangleIcon,

src/components/Link.stories.tsx

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

src/components/Loading/LoadingSpinner.tsx

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

src/components/MarginUsageRing.tsx

@@ -1,11 +1,11 @@
 import styled, { type AnyStyledComponent } from 'styled-components';
 
 import { RiskLevels } from '@/constants/abacus';
+import { UsageColorFromRiskLevel } from '@/styles/colors';
 
 import { Ring } from '@/components/Ring';
 
 import { abacusHelper } from '@/lib/abacus';
-import { UsageColorFromRiskLevel } from '@/lib/styles';
 
 type ElementProps = {
   value: number;

src/components/NavigationMenu.stories.tsx

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

src/components/Output.tsx

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

src/components/Panel.stories.tsx

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

src/components/Panel.tsx

@@ -6,8 +6,8 @@ import { Icon, IconName } from '@/components/Icon';
 import { layoutMixins } from '@/styles/layoutMixins';
 import { breakpoints } from '@/styles';
 
-type ElementProps = {
+type PanelProps = {
-  slotHeaderContent?: React.ReactNode;
+  slotHeaderContent?: string;
   slotHeader?: React.ReactNode;
   slotRight?: React.ReactNode;
   children?: React.ReactNode;
@@ -16,13 +16,11 @@ type ElementProps = {
   onClick?: () => void;
 };
 
-type StyleProps = {
+type PanelStyleProps = {
   className?: string;
   hasSeparator?: boolean;
 };
 
-export type PanelProps = ElementProps & StyleProps;
-
 export const Panel = ({
   slotHeaderContent,
   slotHeader,
@@ -33,7 +31,7 @@ export const Panel = ({
   onClick,
   hasSeparator,
   className,
-}: PanelProps) => (
+}: PanelProps & PanelStyleProps) => (
   <Styled.Panel onClick={onClick} className={className}>
     <Styled.Left>
       {href ? (

src/components/QrCode.tsx

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

src/components/SearchInput.stories.tsx

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

src/components/SearchSelectMenu.stories.tsx

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

src/components/SelectMenu.stories.tsx

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

src/components/Table.tsx

@@ -68,7 +68,7 @@ export type TableItem<TableRowData> = {
   onSelect?: (key: TableRowData) => void;
 };
 
-export type ColumnDef<TableRowData extends object> = {
+type ColumnDef<TableRowData extends object> = {
   columnKey: string;
   label: React.ReactNode;
   tag?: React.ReactNode;
@@ -95,10 +95,7 @@ export type ElementProps<TableRowData extends object | CustomRowConfig, TableRow
   selectionBehavior?: 'replace' | 'toggle';
   onRowAction?: (key: TableRowKey, row: TableRowData) => void;
   slotEmpty?: React.ReactNode;
-  viewMoreConfig?: {
+  initialNumRowsToShow?: number;
-    initialNumRowsToShow: number;
-    numRowsPerPage?: number;
-  };
   // collection: TableCollection<string>;
   // children: React.ReactNode;
 };
@@ -128,7 +125,7 @@ export const Table = <TableRowData extends object, TableRowKey extends Key>({
   selectionMode = 'single',
   selectionBehavior = 'toggle',
   slotEmpty,
-  viewMoreConfig,
+  initialNumRowsToShow = data.length,
   // shouldRowRender,
 
   // collection,
@@ -144,18 +141,7 @@ export const Table = <TableRowData extends object, TableRowKey extends Key>({
   style,
 }: ElementProps<TableRowData, TableRowKey> & StyleProps) => {
   const [selectedKeys, setSelectedKeys] = useState(new Set<TableRowKey>());
-  const [numRowsToShow, setNumRowsToShow] = useState(viewMoreConfig?.initialNumRowsToShow);
+  const [numRowsToShow, setNumRowsToShow] = useState(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(
@@ -231,7 +217,9 @@ export const Table = <TableRowData extends object, TableRowKey extends Key>({
           }
           numColumns={shownColumns.length}
           onViewMoreClick={
-            enableViewMore && numRowsToShow! < data.length ? onViewMoreClick : undefined
+            numRowsToShow !== undefined && numRowsToShow < data.length
+              ? () => setNumRowsToShow(data.length)
+              : undefined
           }
           // shouldRowRender={shouldRowRender}
           hideHeader={hideHeader}
@@ -257,7 +245,7 @@ export const Table = <TableRowData extends object, TableRowKey extends Key>({
             )}
           </TableHeader>
 
-          <TableBody items={enableViewMore ? list.items.slice(0, numRowsToShow) : list.items}>
+          <TableBody items={list.items.slice(0, numRowsToShow)}>
             {(item) => (
               <Row key={getRowKey(item)}>
                 {(columnKey) => (
@@ -524,7 +512,7 @@ const TableColumnHeader = <TableRowData extends object>({
 export const ViewMoreRow = ({ colSpan, onClick }: { colSpan: number; onClick: () => void }) => {
   const stringGetter = useStringGetter();
   return (
-    <Styled.ViewMoreTr key="viewmore">
+    <Styled.Tr key="viewmore">
       <Styled.Td
         colSpan={colSpan}
         onMouseDown={(e: MouseEvent) => e.preventDefault()}
@@ -534,7 +522,7 @@ export const ViewMoreRow = ({ colSpan, onClick }: { colSpan: number; onClick: ()
           {stringGetter({ key: STRING_KEYS.VIEW_MORE })}
         </Styled.ViewMoreButton>
       </Styled.Td>
-    </Styled.ViewMoreTr>
+    </Styled.Tr>
   );
 };
 
@@ -684,8 +672,6 @@ Styled.TableWrapper = styled.div<{
   --table-lastColumn-cell-align: end; // start | center | end | var(--table-cell-align)
   --tableCell-padding: 0 1rem;
 
-  --tableViewMore-borderColor: inherit;
-
   // Rules
 
   flex: 1;
@@ -795,7 +781,7 @@ Styled.Tr = styled.tr<{
       &:focus-visible,
       &:focus-within {
         --tableRow-currentBackgroundColor: var(--tableRow-hover-backgroundColor);
-        filter: brightness(var(--hover-filter-base));
+        filter: brightness(1.1);
       }
     `};
 
@@ -997,7 +983,3 @@ Styled.ViewMoreButton = styled(Button)`
     margin-left: 0.5ch;
   }
 `;
-
-Styled.ViewMoreTr = styled(Styled.Tr)`
-  --border-color: var(--tableViewMore-borderColor);
-`;

src/components/Tabs.stories.tsx

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

src/components/Tag.stories.tsx

@@ -1,10 +1,10 @@
 import type { Story } from '@ladle/react';
 
-import { Tag, TagSign, TagSize, TagType } from '@/components/Tag';
+import { Tag } from '@/components/Tag';
 
 import { StoryWrapper } from '.ladle/components';
 
-export const TagStory: Story<Parameters<typeof Tag>[0]> = (args) => {
+export const TagStory: Story<Parameters<typeof Tag>> = (args) => {
   return (
     <StoryWrapper>
       <Tag {...args} />
@@ -14,23 +14,4 @@ export const TagStory: Story<Parameters<typeof Tag>[0]> = (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,
-  },
 };

src/components/Tag.tsx

@@ -1,20 +1,20 @@
 import styled, { css } from 'styled-components';
 
 export enum TagSize {
-  Small = 'Small',
+  Small,
-  Medium = 'Medium',
+  Medium,
 }
 
 export enum TagType {
-  Asset = 'Asset',
+  Asset,
-  Side = 'Side',
+  Side,
-  Number = 'Number',
+  Number,
 }
 
 export enum TagSign {
-  Positive = 'Positive',
+  Positive,
-  Negative = 'Negative',
+  Negative,
-  Neutral = 'Neutral',
+  Neutral,
 }
 
 type StyleProps = {

src/components/TimeoutButton.tsx

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

src/components/ToggleButton.stories.tsx

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

src/components/ToggleGroup.stories.tsx

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

src/components/UsageBars.tsx

@@ -2,9 +2,9 @@ import styled, { type AnyStyledComponent } from 'styled-components';
 
 import { type RiskLevels } from '@/constants/abacus';
 
-import { abacusHelper } from '@/lib/abacus';
+import { UsageColorFromRiskLevel } from '@/styles/colors';
-import { UsageColorFromRiskLevel } from '@/lib/styles';
 
+import { abacusHelper } from '@/lib/abacus';
 type ElementProps = {
   value: number;
 };

src/components/WithConfirmationPopover.tsx

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

src/components/WithDetailsReceipt.tsx

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

src/components/WithLabel.stories.tsx

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

src/components/WithReceipt.stories.tsx

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

src/components/WithSidebar.tsx

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

src/components/WithTooltip.stories.tsx

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

src/components/WithTooltip.tsx

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

src/components/visx/TooltipContent.tsx

@@ -27,7 +27,12 @@ Styled.TooltipContent = styled.aside<{ accentColor?: string }>`
 
   ${popoverMixins.popover}
   --popover-radius: 0.5rem;
-  --popover-background-color: ${({ theme }) => theme.popoverBackground};
+  --popover-background-color: hsl(
+    var(--layer-base-hue),
+    var(--layer-base-saturation),
+    calc(var(--layer-base-lightness)),
+    0.9
+  );
   --popover-backdrop-filter: saturate(120%) blur(12px);
 
   display: grid;

src/constants/abacus.ts

@@ -119,13 +119,6 @@ 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;
@@ -209,9 +202,6 @@ export const RestrictionType = Abacus.exchange.dydx.abacus.output.Restriction;
 const restrictionTypes = [...RestrictionType.values()] as const;
 export type RestrictionTypes = (typeof restrictionTypes)[number];
 
-// ------ Api data ------ //
-export const ApiData = Abacus.exchange.dydx.abacus.state.manager.ApiData;
-
 // ------ Enum Conversions ------ //
 type IfEquals<X, Y, A, B> = (<T>() => T extends X ? 1 : 2) extends <T>() => T extends Y ? 1 : 2
   ? A
@@ -246,15 +236,6 @@ 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,
@@ -301,22 +282,13 @@ export const TRADE_TYPES: Record<
   [AbacusOrderType.takeProfitMarket.rawValue]: TradeTypes.TAKE_PROFIT_MARKET,
 
   [AbacusOrderType.liquidated.name]: null,
-  [AbacusOrderType.liquidated.rawValue]: null,
+  [AbacusOrderType.liquidation.name]: null,
 
   [AbacusOrderType.liquidation.name]: null,
   [AbacusOrderType.liquidation.rawValue]: null,
 
   [AbacusOrderType.trailingStop.name]: null,
   [AbacusOrderType.trailingStop.rawValue]: null,
-
-  [AbacusOrderType.offsetting.name]: null,
-  [AbacusOrderType.offsetting.rawValue]: null,
-
-  [AbacusOrderType.deleveraged.name]: null,
-  [AbacusOrderType.deleveraged.rawValue]: null,
-
-  [AbacusOrderType.finalSettlement.name]: null,
-  [AbacusOrderType.finalSettlement.rawValue]: null,
 };
 
 // Custom types involving Abacus
@@ -335,9 +307,3 @@ export type NetworkConfig = Partial<{
 }>;
 
 export type ConnectNetworkEvent = CustomEvent<Partial<NetworkConfig>>;
-
-export type PerpetualMarketOrderbookLevel = OrderbookLine & {
-  side?: 'ask' | 'bid';
-  mine: number;
-  key: string;
-};

src/constants/analytics.ts

@@ -173,5 +173,3 @@ export type AnalyticsEventData<T extends AnalyticsEvent> =
         validatorUrl: string;
       }
     : never;
-
-export const DEFAULT_TRANSACTION_MEMO = 'dYdX Frontend (web)';

src/constants/dialogs.ts

@@ -2,10 +2,8 @@ export enum DialogTypes {
   ClosePosition = 'ClosePosition',
   Deposit = 'Deposit',
   DisconnectWallet = 'DisconnectWallet',
-  DisplaySettings = 'DisplaySettings',
   ExchangeOffline = 'ExchangeOffline',
   ExternalLink = 'ExternalLink',
-  ExternalNavStride = 'ExternalNavStride',
   FillDetails = 'FillDetails',
   Help = 'Help',
   ExternalNavKeplr = 'ExternalNavKeplr',
@@ -21,8 +19,6 @@ export enum DialogTypes {
   Transfer = 'Transfer',
   Withdraw = 'Withdraw',
   ManageFunds = 'ManageFunds',
-  NewMarketMessageDetails = 'NewMarketMessageDetails',
-  NewMarketAgreement = 'NewMarketAgreement',
 }
 
 export enum TradeBoxDialogTypes {

src/constants/indexer.ts

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

src/constants/localStorage.ts

@@ -20,7 +20,6 @@ export enum LocalStorageKey {
   SelectedLocale = 'dydx.SelectedLocale',
   SelectedNetwork = 'dydx.SelectedNetwork',
   SelectedTheme = 'dydx.SelectedTheme',
-  SelectedColorMode = 'dydx.SelectedColorMode',
   SelectedTradeLayout = 'dydx.SelectedTradeLayout',
   TradingViewChartConfig = 'dydx.TradingViewChartConfig',
   HasSeenLaunchIncentives = 'dydx.HasSeenLaunchIncentives',

src/constants/localization.ts

@@ -95,7 +95,7 @@ export type TooltipStrings = {
     stringParams?: any;
     urlConfigs?: LinksConfigs;
   }) => {
-    title?: string;
+    title: string;
     body: string;
     learnMoreLink?: string;
   };

src/constants/orderbook.ts

@@ -1,15 +0,0 @@
-/**
- * @description Orderbook display constants
- */
-export const ORDERBOOK_MAX_ROWS_PER_SIDE = 30;
-export const ORDERBOOK_ANIMATION_DURATION = 400;
-
-/**
- * @description Orderbook pixel constants
- * @note ORDERBOOK_ROW_HEIGHT should be a divisor of ORDERBOOK_HEIGHT so that we do not have a partial row at the bottom
- * @note To change the Orderbook width, --orderbook-trades-width and ORDERBOOK_WIDTH must be changed to the same value
- */
-export const ORDERBOOK_HEIGHT = 800;
-export const ORDERBOOK_WIDTH = 300;
-export const ORDERBOOK_ROW_HEIGHT = 24;
-export const ORDERBOOK_ROW_PADDING_RIGHT = 8;

src/constants/potentialMarkets.ts

@@ -1,25 +0,0 @@
-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;

src/constants/routes.ts

@@ -11,10 +11,6 @@ export enum AppRoute {
   Privacy = '/privacy',
 }
 
-export enum MarketsRoute {
-  New = 'new',
-}
-
 export enum PortfolioRoute {
   Fees = 'fees',
   History = 'history',
@@ -29,12 +25,6 @@ export enum HistoryRoute {
   Payments = 'payments',
 }
 
-export enum TokenRoute {
-  TradingRewards = 'trading-rewards',
-  StakingRewards = 'staking-rewards',
-  Governance = 'governance',
-}
-
 export enum MobileSettingsRoute {
   Language = 'language',
   Notifications = 'notifications',

src/constants/styles/base.ts

@@ -1,76 +0,0 @@
-export enum ColorToken {
-  Black = '#000000',
-  White = '#FFFFFF',
-
-  LightGray0 = '#FAFAFA',
-  LightGray1 = '#F7F8FA',
-  LightGray2 = '#FAFAFD',
-  LightGray3 = '#F5F5F5',
-  LightGray4 = '#EDF0F2',
-  LightGray5 = '#EDEDED',
-  LightGray6 = '#E9ECEE',
-  LightGray7 = '#E6E6E6',
-  LightGray8 = '#DBDBDB',
-  LightGray9 = '#D5DADF',
-  LightGray10 = '#D1D9E0',
-
-  MediumGray0 = '#CACACE',
-  MediumGray1 = '#C2CBD3',
-
-  DarkGray0 = '#888891',
-  DarkGray1 = '#737373',
-  DarkGray2 = '#56565C',
-  DarkGray3 = '#4B4B4B',
-  DarkGray4 = '#494950',
-  DarkGray5 = '#3B3B3F',
-  DarkGray6 = '#303033',
-  DarkGray7 = '#313135',
-  DarkGray8 = '#292929',
-  DarkGray9 = '#23232F',
-  DarkGray10 = '#212124',
-  DarkGray11 = '#18181B',
-  DarkGray12 = '#181818',
-  DarkGray13 = '#0C0C0D',
-
-  GrayBlue0 = '#464659',
-  GrayBlue1 = '#38384D',
-  GrayBlue2 = '#303045',
-  GrayBlue3 = '#29293D',
-  GrayBlue4 = '#212131',
-  GrayBlue5 = '#181825',
-  GrayBlue6 = '#101018',
-  GrayBlue7 = '#08080C',
-
-  GrayPurple0 = '#DFDADF',
-  GrayPurple1 = '#C8C7D8',
-  GrayPurple2 = '#807E98',
-
-  Purple0 = '#7774FF',
-  Purple1 = '#6966FF',
-
-  Green0 = '#1AFFB9',
-  Green1 = '#3ED9A4',
-  Green2 = '#2CCC98',
-  Green3 = '#3EB68A',
-
-  Yellow0 = '#FFCC48',
-  Yellow1 = '#FFB647',
-
-  Red0 = '#FF5C5C',
-  Red1 = '#E76565',
-  Red2 = '#E45555',
-}
-
-/** Maps opacity to corresponding hex value */
-export enum OpacityToken {
-  Opacity16 = '29',
-  Opacity20 = '33',
-  Opacity66 = 'A8',
-  Opacity90 = 'E6',
-}
-
-export enum BrightnessFilterToken {
-  Darken10 = '0.9',
-  Darken5 = '0.95',
-  Lighten10 = '1.1',
-}

src/constants/styles/colors.ts

@@ -1,104 +0,0 @@
-import { AppColorMode } from '@/state/configs';
-
-export type Theme = {
-  [AppColorMode.GreenUp]: ThemeColorBase;
-  [AppColorMode.RedUp]: ThemeColorBase;
-};
-
-export type ThemeColorBase = BaseColors &
-  LayerColors &
-  BorderColors &
-  TextColors &
-  GradientColors &
-  AccentColors &
-  StatusColors &
-  DirectionalColors &
-  RiskColors &
-  IconColors &
-  ComponentColors &
-  Filters;
-
-type BaseColors = {
-  white: string;
-  green: string;
-  red: string;
-};
-
-type LayerColors = {
-  layer0: string;
-  layer1: string;
-  layer2: string;
-  layer3: string;
-  layer4: string;
-  layer5: string;
-  layer6: string;
-  layer7: string;
-};
-
-type BorderColors = {
-  borderDefault: string;
-  borderDestructive: string;
-  borderButton: string;
-};
-
-type TextColors = {
-  textPrimary: string;
-  textSecondary: string;
-  textTertiary: string;
-
-  textButton: string;
-};
-
-type GradientColors = {
-  gradientBase0: string;
-  gradientBase1: string;
-};
-
-type AccentColors = {
-  accent: string;
-  accentFaded: string;
-  favorite: string;
-};
-
-type StatusColors = {
-  success: string;
-  warning: string;
-  error: string;
-  successFaded: string;
-  warningFaded: string;
-  errorFaded: string;
-};
-
-/** ##InvertDirectionalColors
- * When adding colors here, make sure to update linked function to invert colors for AppColorMode. */
-type DirectionalColors = {
-  positive: string;
-  negative: string;
-  positiveFaded: string;
-  negativeFaded: string;
-};
-
-type RiskColors = {
-  riskLow: string;
-  riskMedium: string;
-  riskHigh: string;
-};
-
-type IconColors = {
-  logoFill: string;
-  profileYellow: string;
-  profileRed: string;
-};
-
-type ComponentColors = {
-  inputBackground: string;
-  popoverBackground: string;
-  toggleBackground: string;
-  tooltipBackground: string;
-};
-
-type Filters = {
-  hoverFilterBase: string;
-  hoverFilterVariant: string;
-  activeFilter: string;
-};

src/constants/tooltips/trade.ts

@@ -57,9 +57,10 @@ 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 }) => ({
+  'initial-margin-fraction': ({ stringGetter, urlConfigs }) => ({
     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 }),
@@ -137,10 +138,6 @@ export const tradeTooltips: TooltipStrings = {
     title: stringGetter({ key: TOOLTIP_STRING_KEYS.POST_ONLY_TITLE }),
     body: stringGetter({ key: TOOLTIP_STRING_KEYS.POST_ONLY_BODY }),
   }),
-  'post-only-timeinforce-gtt': ({ stringGetter }) => ({
-    title: stringGetter({ key: TOOLTIP_STRING_KEYS.POST_ONLY_TIMEINFORCE_GTT_TITLE }),
-    body: stringGetter({ key: TOOLTIP_STRING_KEYS.POST_ONLY_TIMEINFORCE_GTT_BODY }),
-  }),
   'price-impact': ({ stringGetter }) => ({
     title: stringGetter({ key: TOOLTIP_STRING_KEYS.PRICE_IMPACT_TITLE }),
     body: stringGetter({ key: TOOLTIP_STRING_KEYS.PRICE_IMPACT_BODY }),
@@ -154,18 +151,6 @@ export const tradeTooltips: TooltipStrings = {
     body: stringGetter({ key: TOOLTIP_STRING_KEYS.REDUCE_ONLY_BODY }),
     learnMoreLink: urlConfigs?.reduceOnlyLearnMore,
   }),
-  'reduce-only-execution-ioc-fok': ({ stringGetter }) => ({
-    title: stringGetter({ key: TOOLTIP_STRING_KEYS.REDUCE_ONLY_EXECUTION_IOC_FOK_TITLE }),
-    body: stringGetter({ key: TOOLTIP_STRING_KEYS.REDUCE_ONLY_EXECUTION_IOC_FOK_BODY }),
-  }),
-  'reduce-only-timeinforce-ioc-fok': ({ stringGetter }) => ({
-    title: stringGetter({ key: TOOLTIP_STRING_KEYS.REDUCE_ONLY_TIMEINFORCE_IOC_FOK_TITLE }),
-    body: stringGetter({ key: TOOLTIP_STRING_KEYS.REDUCE_ONLY_TIMEINFORCE_IOC_FOK_BODY }),
-  }),
-  '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.',
@@ -198,7 +183,4 @@ 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;

src/constants/wallets.ts

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

src/hooks/Orderbook/index.ts

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

src/hooks/Orderbook/useCenterOrderbook.ts

@@ -1,22 +0,0 @@
-import { useEffect, type RefObject } from 'react';
-
-type Props = {
-  marketId: string;
-  orderbookRef: RefObject<HTMLDivElement>;
-};
-
-/**
- * @description Center Orderbook on load and market change
- * Assumed that the two sides are the same height
- */
-export const useCenterOrderbook = ({ marketId, orderbookRef }: Props) => {
-  const orderbookEl = orderbookRef.current;
-  const { clientHeight, scrollHeight } = orderbookEl ?? {};
-  const shouldScroll = scrollHeight && clientHeight && scrollHeight > clientHeight;
-
-  useEffect(() => {
-    if (orderbookEl && shouldScroll) {
-      orderbookEl.scrollTo({ top: (scrollHeight - clientHeight) / 2 });
-    }
-  }, [shouldScroll, marketId]);
-};

src/hooks/Orderbook/useDrawOrderbook.ts

@@ -1,373 +0,0 @@
-import { useEffect, useMemo, useRef } from 'react';
-import { shallowEqual, useSelector } from 'react-redux';
-
-import type { PerpetualMarketOrderbookLevel } from '@/constants/abacus';
-import { SMALL_USD_DECIMALS, TOKEN_DECIMALS } from '@/constants/numbers';
-
-import {
-  ORDERBOOK_ANIMATION_DURATION,
-  ORDERBOOK_HEIGHT,
-  ORDERBOOK_ROW_HEIGHT,
-  ORDERBOOK_ROW_PADDING_RIGHT,
-  ORDERBOOK_WIDTH,
-} from '@/constants/orderbook';
-
-import { useAppThemeAndColorModeContext } from '@/hooks/useAppThemeAndColorMode';
-
-import { getCurrentMarketConfig, getCurrentMarketOrderbookMap } from '@/state/perpetualsSelectors';
-
-import { MustBigNumber } from '@/lib/numbers';
-
-import {
-  getHistogramXValues,
-  getRektFromIdx,
-  getXByColumn,
-  getYForElements,
-} from '@/lib/orderbookHelpers';
-
-type ElementProps = {
-  data: Array<PerpetualMarketOrderbookLevel | undefined>;
-  histogramRange: number;
-  side: PerpetualMarketOrderbookLevel['side'];
-};
-
-type StyleProps = {
-  histogramSide: 'left' | 'right';
-};
-
-enum OrderbookRowAnimationType {
-  REMOVE,
-  NEW,
-  NONE,
-}
-
-export const useDrawOrderbook = ({
-  data,
-  histogramRange,
-  histogramSide,
-  side,
-}: ElementProps & StyleProps) => {
-  const canvasRef = useRef<HTMLCanvasElement>(null);
-  const canvas = canvasRef.current;
-  const currentOrderbookMap = useSelector(getCurrentMarketOrderbookMap, shallowEqual);
-  const { stepSizeDecimals = TOKEN_DECIMALS, tickSizeDecimals = SMALL_USD_DECIMALS } =
-    useSelector(getCurrentMarketConfig, shallowEqual) || {};
-  const prevData = useRef<typeof data>(data);
-  const theme = useAppThemeAndColorModeContext();
-
-  /**
-   * Scale canvas using device pixel ratio to unblur drawn text
-   * @url https://stackoverflow.com/questions/15661339/how-do-i-fix-blurry-text-in-my-html5-canvas/65124939#65124939
-   * @returns adjusted canvas width/height/rowHeight used in coordinates for drawing
-   **/
-  const { canvasWidth, canvasHeight, rowHeight } = useMemo(() => {
-    const ratio = window.devicePixelRatio || 1;
-
-    if (!canvas) {
-      return {
-        canvasWidth: ORDERBOOK_WIDTH / devicePixelRatio,
-        canvasHeight: ORDERBOOK_HEIGHT / devicePixelRatio,
-        rowHeight: ORDERBOOK_ROW_HEIGHT / devicePixelRatio,
-      };
-    }
-
-    const ctx = canvas.getContext('2d');
-    canvas.width = canvas.offsetWidth * ratio;
-    canvas.height = canvas.offsetHeight * ratio;
-
-    if (ctx) {
-      ctx.scale(ratio, ratio);
-      ctx.font = '12px Satoshi';
-      ctx.textAlign = 'right';
-      ctx.textBaseline = 'middle';
-      ctx.imageSmoothingQuality = 'high';
-    }
-
-    return {
-      canvasWidth: canvas.width / ratio,
-      canvasHeight: canvas.height / ratio,
-      rowHeight: ORDERBOOK_ROW_HEIGHT,
-    };
-  }, [canvas]);
-
-  const drawBars = ({
-    barType,
-    ctx,
-    depthOrSizeValue,
-    gradientMultiplier,
-    histogramAccentColor,
-    histogramSide,
-    idx,
-  }: {
-    barType: 'depth' | 'size';
-    ctx: CanvasRenderingContext2D;
-    depthOrSizeValue: number;
-    gradientMultiplier: number;
-    histogramAccentColor: string;
-    histogramSide: 'left' | 'right';
-    idx: number;
-  }) => {
-    const { x1, x2, y1, y2 } = getRektFromIdx({
-      idx,
-      rowHeight,
-      canvasWidth,
-      canvasHeight,
-      side,
-    });
-
-    // X values
-    const maxHistogramBarWidth = x2 - x1 - (barType === 'size' ? 8 : 2);
-    const barWidth = depthOrSizeValue
-      ? Math.min((depthOrSizeValue / histogramRange) * maxHistogramBarWidth, maxHistogramBarWidth)
-      : 0;
-
-    const { gradient, bar } = getHistogramXValues({
-      barWidth,
-      canvasWidth,
-      gradientMultiplier,
-      histogramSide,
-    });
-
-    // Gradient
-    let linearGradient;
-
-    try {
-      linearGradient = ctx.createLinearGradient(gradient.x1, y1, gradient.x2, y2);
-      linearGradient.addColorStop(0, histogramAccentColor);
-      linearGradient.addColorStop(1, 'rgba(0, 0, 0, 0)');
-      ctx.fillStyle = linearGradient;
-    } catch (err) {
-      ctx.fillStyle = 'rgba(0, 0, 0, 0)';
-    }
-
-    ctx.beginPath();
-
-    // Bar
-    const { bar: y } = getYForElements({ y: y1, rowHeight });
-
-    if (ctx.roundRect) {
-      ctx.roundRect(
-        bar.x1,
-        y,
-        bar.x2,
-        rowHeight - 2,
-        histogramSide === 'right' ? [2, 0, 0, 2] : [0, 2, 2, 0]
-      );
-    } else {
-      ctx.rect(bar.x1, y, bar.x2, rowHeight - 2);
-    }
-
-    ctx.fill();
-  };
-
-  const drawText = ({
-    animationType = OrderbookRowAnimationType.NONE,
-    ctx,
-    idx,
-    mine,
-    price,
-    size,
-  }: {
-    animationType?: OrderbookRowAnimationType;
-    ctx: CanvasRenderingContext2D;
-    idx: number;
-    mine?: number;
-    price?: number;
-    size?: number;
-  }) => {
-    const { y1 } = getRektFromIdx({
-      idx,
-      rowHeight,
-      canvasWidth,
-      canvasHeight,
-      side,
-    });
-
-    const { text: y } = getYForElements({ y: y1, rowHeight });
-
-    let textColor: string;
-    let updatedTextColor: string | undefined;
-
-    switch (animationType) {
-      case OrderbookRowAnimationType.REMOVE: {
-        textColor = theme.textSecondary;
-        break;
-      }
-
-      case OrderbookRowAnimationType.NEW: {
-        updatedTextColor = side === 'bid' ? theme.positive : theme.negative;
-        textColor = theme.textPrimary;
-        break;
-      }
-
-      default: {
-        textColor = theme.textPrimary;
-        break;
-      }
-    }
-
-    // Size text
-    if (size) {
-      ctx.fillStyle = updatedTextColor ?? textColor;
-      ctx.fillText(
-        MustBigNumber(size).toFixed(stepSizeDecimals ?? TOKEN_DECIMALS),
-        getXByColumn({ canvasWidth, colIdx: 0 }) - ORDERBOOK_ROW_PADDING_RIGHT,
-        y
-      );
-    }
-
-    // Price text
-    if (price) {
-      ctx.fillStyle = textColor;
-      ctx.fillText(
-        MustBigNumber(price).toFixed(tickSizeDecimals ?? SMALL_USD_DECIMALS),
-        getXByColumn({ canvasWidth, colIdx: 1 }) - ORDERBOOK_ROW_PADDING_RIGHT,
-        y
-      );
-    }
-
-    // Mine text
-    if (mine) {
-      ctx.fillStyle = textColor;
-      ctx.fillText(
-        MustBigNumber(mine).toFixed(stepSizeDecimals ?? TOKEN_DECIMALS),
-        getXByColumn({ canvasWidth, colIdx: 2 }) - ORDERBOOK_ROW_PADDING_RIGHT,
-        y
-      );
-    }
-  };
-
-  const drawOrderbookRow = ({
-    ctx,
-    idx,
-    rowToRender,
-    animationType = OrderbookRowAnimationType.NONE,
-  }: {
-    ctx: CanvasRenderingContext2D;
-    idx: number;
-    rowToRender?: PerpetualMarketOrderbookLevel;
-    animationType?: OrderbookRowAnimationType;
-  }) => {
-    if (!rowToRender) return;
-    const { depth, mine, price, size } = rowToRender;
-    const histogramAccentColor = side === 'bid' ? theme.positiveFaded : theme.negativeFaded;
-
-    // Depth Bar
-    if (depth) {
-      drawBars({
-        barType: 'depth',
-        ctx,
-        depthOrSizeValue: depth,
-        gradientMultiplier: 1.3,
-        histogramAccentColor,
-        histogramSide,
-        idx,
-      });
-    }
-
-    // Size Bar
-    drawBars({
-      barType: 'size',
-      ctx,
-      depthOrSizeValue: size,
-      gradientMultiplier: 5,
-      histogramAccentColor,
-      histogramSide,
-      idx,
-    });
-
-    // Size, Price, Mine
-    drawText({
-      animationType,
-      ctx,
-      idx,
-      mine,
-      price,
-      size,
-    });
-  };
-
-  // Update histograms and row contents on data change
-  useEffect(() => {
-    const ctx = canvas?.getContext('2d');
-
-    if (!canvas || !ctx) return;
-
-    // Clear canvas before redraw
-    ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
-
-    // Animate row removal and update
-    const mapOfOrderbookPriceLevels =
-      side && currentOrderbookMap?.[side === 'ask' ? 'asks' : 'bids'];
-    const empty: number[] = [];
-    const removed: number[] = [];
-    const updated: number[] = [];
-
-    prevData.current.forEach((row, idx) => {
-      if (!row) {
-        empty.push(idx);
-        return;
-      }
-
-      if (mapOfOrderbookPriceLevels?.[row.price] === 0) {
-        removed.push(idx);
-        drawOrderbookRow({
-          ctx,
-          idx,
-          rowToRender: row,
-          animationType: OrderbookRowAnimationType.REMOVE,
-        });
-      } else if (mapOfOrderbookPriceLevels?.[row.price] === row?.size) {
-        drawOrderbookRow({
-          ctx,
-          idx,
-          rowToRender: data[idx],
-          animationType: OrderbookRowAnimationType.NONE,
-        });
-      } else {
-        updated.push(idx);
-        drawOrderbookRow({
-          ctx,
-          idx,
-          rowToRender: row,
-          animationType: OrderbookRowAnimationType.NEW,
-        });
-      }
-    });
-
-    setTimeout(() => {
-      [...empty, ...removed, ...updated].forEach((idx) => {
-        const { x1, y1, x2, y2 } = getRektFromIdx({
-          idx,
-          rowHeight,
-          canvasWidth,
-          canvasHeight,
-          side,
-        });
-
-        ctx.clearRect(x1, y1, x2 - x1, y2 - y1);
-        drawOrderbookRow({
-          ctx,
-          idx,
-          rowToRender: data[idx],
-        });
-      });
-    }, ORDERBOOK_ANIMATION_DURATION);
-
-    prevData.current = data;
-  }, [
-    canvasHeight,
-    canvasWidth,
-    rowHeight,
-    data,
-    histogramRange,
-    stepSizeDecimals,
-    tickSizeDecimals,
-    histogramSide,
-    side,
-    theme,
-    currentOrderbookMap,
-  ]);
-
-  return { canvasRef };
-};

src/hooks/Orderbook/useOrderbookValues.ts

@@ -1,126 +0,0 @@
-import { useMemo } from 'react';
-import { shallowEqual, useSelector } from 'react-redux';
-import { OrderSide } from '@dydxprotocol/v4-client-js';
-
-import { type PerpetualMarketOrderbookLevel } from '@/constants/abacus';
-import { DepthChartSeries, DepthChartDatum } from '@/constants/charts';
-
-import { getCurrentMarketOrderbook } from '@/state/perpetualsSelectors';
-import { getSubaccountOpenOrdersBySideAndPrice } from '@/state/accountSelectors';
-
-import { MustBigNumber } from '@/lib/numbers';
-
-export const useCalculateOrderbookData = ({ maxRowsPerSide }: { maxRowsPerSide: number }) => {
-  const orderbook = useSelector(getCurrentMarketOrderbook, shallowEqual);
-
-  const openOrdersBySideAndPrice =
-    useSelector(getSubaccountOpenOrdersBySideAndPrice, shallowEqual) || {};
-
-  return useMemo(() => {
-    const asks: Array<PerpetualMarketOrderbookLevel | undefined> = (
-      orderbook?.asks?.toArray() ?? []
-    )
-      .map(
-        (row, idx: number) =>
-          ({
-            key: `ask-${idx}`,
-            side: 'ask',
-            mine: openOrdersBySideAndPrice[OrderSide.SELL]?.[row.price]?.size,
-            ...row,
-          } as PerpetualMarketOrderbookLevel)
-      )
-      .slice(0, maxRowsPerSide);
-
-    const bids: Array<PerpetualMarketOrderbookLevel | undefined> = (
-      orderbook?.bids?.toArray() ?? []
-    )
-      .map(
-        (row, idx: number) =>
-          ({
-            key: `bid-${idx}`,
-            side: 'bid',
-            mine: openOrdersBySideAndPrice[OrderSide.BUY]?.[row.price]?.size,
-            ...row,
-          } as PerpetualMarketOrderbookLevel)
-      )
-      .slice(0, maxRowsPerSide);
-
-    // Prevent the bid/ask sides from crossing by using the offsets.
-    // While the books are crossing...
-    while (asks[0] && bids[0] && bids[0]!.price >= asks[0].price) {
-      // Drop the order on the side with the lower offset.
-      // The offset of the other side is higher and so supercedes.
-      if (bids[0]!.offset === asks[0].offset) {
-        // If offsets are the same, give precedence to the larger size. In this case,
-        // one of the sizes *should* be zero, but we simply check for the larger size.
-        if (bids[0]!.size > asks[0].size) {
-          asks.shift();
-        } else {
-          bids.pop();
-        }
-      } else {
-        // Offsets are not equal. Give precedence to the larger offset.
-        if (bids[0]!.offset > asks[0].offset) {
-          asks.shift();
-        } else {
-          bids.pop();
-        }
-      }
-    }
-
-    const spread =
-      asks[0]?.price && bids[0]?.price ? MustBigNumber(asks[0].price).minus(bids[0].price) : null;
-
-    const spreadPercent = orderbook?.spreadPercent;
-
-    const histogramRange = Math.max(
-      isNaN(Number(bids[bids.length - 1]?.depth)) ? 0 : Number(bids[bids.length - 1]?.depth),
-      isNaN(Number(asks[asks.length - 1]?.depth)) ? 0 : Number(asks[asks.length - 1]?.depth)
-    );
-
-    return {
-      asks,
-      bids,
-      spread,
-      spreadPercent,
-      histogramRange,
-      hasOrderbook: !!orderbook,
-    };
-  }, [orderbook, openOrdersBySideAndPrice]);
-};
-
-export const useOrderbookValuesForDepthChart = () => {
-  const orderbook = useSelector(getCurrentMarketOrderbook, shallowEqual);
-
-  return useMemo(() => {
-    const bids = (orderbook?.bids?.toArray() ?? [])
-      .filter(Boolean)
-      .map((datum) => ({ ...datum, seriesKey: DepthChartSeries.Bids } as DepthChartDatum));
-
-    const asks = (orderbook?.asks?.toArray() ?? [])
-      .filter(Boolean)
-      .map((datum) => ({ ...datum, seriesKey: DepthChartSeries.Asks } as DepthChartDatum));
-
-    const lowestBid = bids[bids.length - 1];
-    const highestBid = bids[0];
-    const lowestAsk = asks[0];
-    const highestAsk = asks[asks.length - 1];
-
-    const midMarketPrice = orderbook?.midPrice;
-    const spread = MustBigNumber(lowestAsk?.price ?? 0).minus(highestBid?.price ?? 0);
-    const spreadPercent = orderbook?.spreadPercent;
-
-    return {
-      bids,
-      asks,
-      lowestBid,
-      highestBid,
-      lowestAsk,
-      highestAsk,
-      midMarketPrice,
-      spread,
-      spreadPercent,
-      orderbook,
-    };
-  }, [orderbook]);
-};

src/hooks/Orderbook/useSpreadRowScrollListener.ts

@@ -1,39 +0,0 @@
-import { type RefObject, useEffect, useState } from 'react';
-
-export const useSpreadRowScrollListener = ({
-  orderbookRef,
-  spreadRowRef,
-}: {
-  orderbookRef: RefObject<HTMLDivElement>;
-  spreadRowRef: RefObject<HTMLDivElement>;
-}) => {
-  const [displaySide, setDisplaySide] = useState<string>();
-
-  useEffect(() => {
-    const onScroll = () => {
-      if (spreadRowRef.current && orderbookRef.current) {
-        const { clientHeight } = orderbookRef.current;
-        const parent = orderbookRef.current.getBoundingClientRect();
-        const spread = spreadRowRef.current.getBoundingClientRect();
-        const spreadTop = spread.top - parent.top;
-        const spreadBottom = spread.bottom - parent.top;
-
-        if (spreadBottom > clientHeight) {
-          setDisplaySide('bottom');
-        } else if (spreadTop < 0) {
-          setDisplaySide('top');
-        } else {
-          setDisplaySide(undefined);
-        }
-      }
-    };
-
-    orderbookRef.current?.addEventListener('scroll', onScroll, false);
-
-    return () => {
-      orderbookRef.current?.removeEventListener('scroll', onScroll, false);
-    };
-  }, [orderbookRef.current, spreadRowRef.current]);
-
-  return displaySide;
-};

src/hooks/index.ts

@@ -7,7 +7,6 @@ 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';
@@ -15,7 +14,6 @@ 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';
@@ -36,7 +34,6 @@ export {
   useDebounce,
   useDocumentTitle,
   useDydxClient,
-  useGovernanceVariables,
   useAccountBalance,
   useAccounts,
   useAnalytics,
@@ -45,7 +42,6 @@ export {
   useIsFirstRender,
   useLocaleSeparators,
   useLocalStorage,
-  useNextClobPairId,
   useNow,
   useOnClickOutside,
   usePageTitlePriceUpdates,

src/hooks/tradingView/useTradingView.ts

@@ -11,7 +11,7 @@ import { useDydxClient, useLocalStorage } from '@/hooks';
 import { store } from '@/state/_store';
 
 import { getSelectedNetwork } from '@/state/appSelectors';
-import { getAppTheme, getAppColorMode } from '@/state/configsSelectors';
+import { getAppTheme } from '@/state/configsSelectors';
 import { getSelectedLocale } from '@/state/localizationSelectors';
 import { getCurrentMarketId, getMarketIds } from '@/state/perpetualsSelectors';
 
@@ -30,7 +30,6 @@ 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);
@@ -47,7 +46,7 @@ export const useTradingView = ({
   useEffect(() => {
     if (hasMarkets && isClientConnected && marketId) {
       const widgetOptions = getWidgetOptions();
-      const widgetOverrides = getWidgetOverrides({ appTheme, appColorMode });
+      const widgetOverrides = getWidgetOverrides(appTheme);
       const options = {
         // debug: true,
         ...widgetOptions,
@@ -76,14 +75,7 @@ export const useTradingView = ({
       tvWidgetRef.current = null;
       setIsChartReady(false);
     };
-  }, [
+  }, [getCandlesForDatafeed, isClientConnected, hasMarkets, selectedLocale, selectedNetwork, !!marketId]);
-    getCandlesForDatafeed,
-    isClientConnected,
-    hasMarkets,
-    selectedLocale,
-    selectedNetwork,
-    !!marketId,
-  ]);
 
   return { savedResolution };
 };

src/hooks/tradingView/useTradingViewTheme.ts

@@ -3,8 +3,9 @@ import { useSelector } from 'react-redux';
 
 import type { IChartingLibraryWidget, ThemeName } from 'public/tradingview/charting_library';
 
-import { AppColorMode, AppTheme } from '@/state/configs';
+import { AppTheme } from '@/state/configs';
-import { getAppTheme, getAppColorMode } from '@/state/configsSelectors';
+
+import { getAppTheme } from '@/state/configsSelectors';
 
 import { getWidgetOverrides } from '@/lib/tradingView/utils';
 
@@ -28,8 +29,7 @@ export const useTradingViewTheme = ({
   tvWidget: (IChartingLibraryWidget & { _id?: string; _ready?: boolean }) | null;
   isWidgetReady?: boolean;
 }) => {
-  const appTheme: AppTheme = useSelector(getAppTheme);
+  const appTheme = useSelector(getAppTheme);
-  const appColorMode: AppColorMode = useSelector(getAppColorMode);
 
   useEffect(() => {
     if (tvWidget && isWidgetReady) {
@@ -56,24 +56,10 @@ export const useTradingViewTheme = ({
             }
           }
 
-          const { overrides, studies_overrides } = getWidgetOverrides({ appTheme, appColorMode });
+          const { overrides, studies_overrides } = getWidgetOverrides(appTheme);
           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, appColorMode]);
+  }, [appTheme]);
 };

src/hooks/useAccounts.tsx

@@ -6,22 +6,14 @@ import { NOBLE_BECH32_PREFIX, LocalWallet, type Subaccount } from '@dydxprotocol
 
 import { OnboardingGuard, OnboardingState, type EvmDerivedAddresses } from '@/constants/account';
 import { DialogTypes } from '@/constants/dialogs';
-import { STRING_KEYS } from '@/constants/localization';
 import { LocalStorageKey, LOCAL_STORAGE_VERSIONS } from '@/constants/localStorage';
-import {
+import { DydxAddress, EvmAddress, PrivateInformation } from '@/constants/wallets';
-  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';
@@ -161,7 +153,6 @@ const useAccountsContext = () => {
 
   // dYdX wallet / onboarding state
   const [localDydxWallet, setLocalDydxWallet] = useState<LocalWallet>();
-  const [localNobleWallet, setLocalNobleWallet] = useState<LocalWallet>();
   const [hdKey, setHdKey] = useState<PrivateInformation>();
 
   const dydxAccounts = useMemo(() => localDydxWallet?.accounts, [localDydxWallet]);
@@ -171,11 +162,6 @@ const useAccountsContext = () => {
     [localDydxWallet]
   );
 
-  const nobleAddress = useMemo(
-    () => localNobleWallet?.address,
-    [localNobleWallet]
-  );
-
   const setWalletFromEvmSignature = async (signature: string) => {
     const { wallet, mnemonic, privateKey, publicKey } = await getWalletFromEvmSignature({
       signature,
@@ -192,26 +178,7 @@ const useAccountsContext = () => {
 
   useEffect(() => {
     (async () => {
-      if (walletType === WalletType.TestWallet) {
+      if (connectedDydxAddress && signerGraz) {
-        // 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));
@@ -257,7 +224,6 @@ const useAccountsContext = () => {
       if (hdKey?.mnemonic) {
         const nobleWallet = await LocalWallet.fromMnemonic(hdKey.mnemonic, NOBLE_BECH32_PREFIX);
         abacusStateManager.setNobleWallet(nobleWallet);
-        setLocalNobleWallet(nobleWallet);
       }
     };
     setNobleWallet();
@@ -356,7 +322,6 @@ const useAccountsContext = () => {
     localDydxWallet,
     dydxAccounts,
     dydxAddress,
-    nobleAddress,
 
     // Onboarding state
     saveHasAcknowledgedTerms,

src/hooks/useAppThemeAndColorMode.tsx

@@ -1,48 +0,0 @@
-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];
-};