address nits

README.md

@@ -4,8 +4,6 @@
 
 - Node.js version 18 and `pnpm` installed on your system
 
-For deploying with Vercel, create an account with [Vercel](https://vercel.com/signup) if you don't have one already.
-
 For deploying to IPFS, choose one of the following:
 
 - **Option 1:** A free [web3.storage](https://web3.storage/) account
@@ -53,24 +51,7 @@ pnpm ladle
 
 This will automatically open your default browser at `http://localhost:61000`.
 
-## Part 3: Deploying with Vercel
+## Part 3: Deploying to IPFS
-
-### Step 1: Connect your repository to Vercel
-
-Select "Import Git Repository" from your dashboard, and provide the URL of this repository or your forked repository.
-
-### Step 2: Configure your project
-
-For the "Build & Development Settings", we recommend the following:
-- Framework Preset: `Vite`
-- Build Command (override): `pnpm run build`
-
-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.
-
-For more details, check out Vercel's [official documentation](https://vercel.com/docs).
-
-## Part 4: Deploying to IPFS
 
 ### web3.storage: deploy to IPFS via web3.storage using the provided script
 
@@ -93,7 +74,7 @@ ipfs add -r dist
 
 Save the CID provided in the output.
 
-### Accessing your content on IPFS
+## Part 4: Accessing your content on IPFS
 
 To access your content on IPFS:
 

package.json

@@ -35,10 +35,9 @@
     "@cosmjs/encoding": "^0.31.0",
     "@cosmjs/proto-signing": "^0.31.0",
     "@cosmjs/stargate": "^0.31.0",
+    "@dydxprotocol/abacus": "^0.2.37",
     "@cosmjs/tendermint-rpc": "^0.31.0",
-    "@dydxprotocol/abacus": "^0.3.10",
+    "@dydxprotocol/v4-client": "^0.29.0",
-    "@dydxprotocol/v4-client-js": "^0.30.3",
-    "@dydxprotocol/v4-localization": "^0.0.16",
     "@ethersproject/providers": "^5.7.2",
     "@js-joda/core": "^5.5.3",
     "@radix-ui/react-collapsible": "^1.0.3",

pnpm-lock.yaml

@@ -1,9 +1,5 @@
 lockfileVersion: '6.0'
 
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false
-
 dependencies:
   '@0xsquid/sdk':
     specifier: ^1.7.2
@@ -27,14 +23,11 @@ dependencies:
     specifier: ^0.31.0
     version: 0.31.0
   '@dydxprotocol/abacus':
-    specifier: ^0.3.10
+    specifier: ^0.2.37
-    version: 0.3.10
+    version: 0.2.37
-  '@dydxprotocol/v4-client-js':
+  '@dydxprotocol/v4-client':
-    specifier: ^0.30.3
+    specifier: ^0.29.0
-    version: 0.30.3
+    version: 0.29.0
-  '@dydxprotocol/v4-localization':
-    specifier: ^0.0.16
-    version: 0.0.16
   '@ethersproject/providers':
     specifier: ^5.7.2
     version: 5.7.2
@@ -1146,8 +1139,8 @@ packages:
     resolution: {integrity: sha512-RpfLEtTlyIxeNPGKcokS+p3BZII/Q3bYxryFRglh5H3A3T8q9fsLYm72VYAMEOOIBLEa8o93kFLiBDUWKrwXZA==}
     dev: true
 
-  /@dydxprotocol/abacus@0.3.10:
+  /@dydxprotocol/abacus@0.2.37:
-    resolution: {integrity: sha512-CJV6zyoQLAoDWJdgLbP1Y2QYvSPybCGpykQY+WEWk4kQKnZkjxz25LPL0b8I9LrNDt2JknOxPJfAoUDXJPfNkg==}
+    resolution: {integrity: sha512-amoq9aVXo+lVTQGu2jsyy5/0bniOMEXpyJDmaAr2TpbrtQtw2WgyAP+se9Q5wt3yh0Mzdtsh7P2h090kH7/bZQ==}
     dev: false
 
   /@dydxprotocol/dydxjs@0.3.0:
@@ -1167,8 +1160,8 @@ packages:
       - utf-8-validate
     dev: false
 
-  /@dydxprotocol/v4-client-js@0.30.3:
+  /@dydxprotocol/v4-client@0.29.0:
-    resolution: {integrity: sha512-h9nB2cU+6sWwfOTQz6sMKZZxVa/Iwp1JciUqKi5HDUyWl/4wfbczDlUqbMUUeXgBgfbb9CImxn+PjF0v7lcD5A==}
+    resolution: {integrity: sha512-BMgm6e91LFGKB0l3lC2/0aIgayejgBa7qCwCUxr05265tggZsI3l3Cui8LNDHeb8IAQ4KPcfAJ29c96lx+rLlw==}
     dependencies:
       '@cosmjs/amino': 0.30.1
       '@cosmjs/proto-signing': 0.30.1
@@ -1190,10 +1183,6 @@ packages:
       - utf-8-validate
     dev: false
 
-  /@dydxprotocol/v4-localization@0.0.16:
-    resolution: {integrity: sha512-IuTjuVdGwV6nulBLCxbNydsEkwvx7mBn8SQtPP2pQ16yfUNWMyBG3GDEXlfAk41NcPSCGXlK5Wbl0R1xaOKCRA==}
-    dev: false
-
   /@emotion/is-prop-valid@1.2.1:
     resolution: {integrity: sha512-61Mf7Ufx4aDxx1xlDeOm8aFFigGHE4z+0sKCa+IHCeZKiyP9RLD0Mmx7m8b9/Cf37f7NAvQOOJAbQQGVr5uERw==}
     dependencies:
@@ -15862,3 +15851,7 @@ packages:
       release-it: 15.11.0
       semver: 7.5.1
     dev: false
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false

src/components/OrderSideTag.stories.tsx

@@ -1,5 +1,5 @@
 import type { Story } from '@ladle/react';
-import { OrderSide } from '@dydxprotocol/v4-client-js';
+import { OrderSide } from '@dydxprotocol/v4-client';
 
 import { OrderSideTag } from '@/components/OrderSideTag';
 

src/components/OrderSideTag.tsx

@@ -1,4 +1,4 @@
-import { OrderSide } from '@dydxprotocol/v4-client-js';
+import { OrderSide } from '@dydxprotocol/v4-client';
 
 import { STRING_KEYS } from '@/constants/localization';
 import { useStringGetter } from '@/hooks';

src/constants/abacus.ts

@@ -1,5 +1,5 @@
 import Abacus, { kollections } from '@dydxprotocol/abacus';
-import { OrderSide } from '@dydxprotocol/v4-client-js';
+import { OrderSide } from '@dydxprotocol/v4-client';
 import { PositionSide, TradeTypes } from './trade';
 import { STRING_KEYS } from './localization';
 
@@ -36,12 +36,6 @@ export type AbacusThreadingProtocol = Omit<
   Abacus.exchange.dydx.abacus.protocols.ThreadingProtocol,
   '__doNotUseOrImplementIt'
 >;
-export type AbacusFileSystemProtocol = Omit<
-  Abacus.exchange.dydx.abacus.protocols.FileSystemProtocol,
-  '__doNotUseOrImplementIt'
->;
-
-export type FileLocation = Abacus.exchange.dydx.abacus.protocols.FileLocation;
 export type ThreadingType = Abacus.exchange.dydx.abacus.protocols.ThreadingType;
 export const CoroutineTimer = Abacus.exchange.dydx.abacus.utils.CoroutineTimer;
 
@@ -186,9 +180,6 @@ export const RiskLevel = Abacus.exchange.dydx.abacus.utils.RiskLevel;
 const riskLevels = [...RiskLevel.values()] as const;
 export type RiskLevels = (typeof riskLevels)[number];
 
-// ------ Notifications ------ //
-export type AbacusNotification = Abacus.exchange.dydx.abacus.output.Notification;
-
 // ------ Enum Conversions ------ //
 type IfEquals<X, Y, A, B> = (<T>() => T extends X ? 1 : 2) extends <T>() => T extends Y ? 1 : 2
   ? A

src/constants/networks.tsx

@@ -1,29 +1,73 @@
-import { ENDPOINTS, DEV_ENDPOINTS } from '@dydxprotocol/v4-localization';
-
-export const NETWORK_ENDPOINTS = import.meta.env.MODE === 'production' ? ENDPOINTS : DEV_ENDPOINTS;
-
-export const CLIENT_NETWORK_CONFIGS: Record<
-  string,
-  (typeof NETWORK_ENDPOINTS.environments)[number]
-> = Object.fromEntries(
-  NETWORK_ENDPOINTS.environments.map((environment) => [environment.environment, environment])
-);
-
-export const DEFAULT_APP_ENVIRONMENT = NETWORK_ENDPOINTS.defaultEnvironment;
-
 export enum DydxV4Network {
   V4Mainnet = 'dydxprotocol-mainnet',
   V4Staging = 'dydxprotocol-staging',
-  V4Testnet2 = 'dydxprotocol-testnet',
+  V4Testnet2 = 'dydxprotocol-testnet-2',
   V4Local = 'dydxprotocol-dev',
 }
 
-export type DydxNetwork = keyof typeof CLIENT_NETWORK_CONFIGS;
+export enum DydxV3Network {
+  V3Mainnet = '1',
+  V3Testnet = '5',
+}
 
-export function isDydxV4Network(network: any): boolean {
+export function isDydxV4Network(network: any): network is DydxV4Network {
-  return CLIENT_NETWORK_CONFIGS[network]?.version === 'v4';
+  return Object.values(DydxV4Network).includes(network);
 }
 
 export function isValidDydxNetwork(network: any): boolean {
-  return Object.keys(CLIENT_NETWORK_CONFIGS).includes(network);
+  return isDydxV4Network(network) || Object.values(DydxV3Network).includes(network);
 }
+
+export type DydxNetwork = DydxV4Network | DydxV3Network;
+
+export const CHAIN_IDS = {
+  [DydxV4Network.V4Mainnet]: '',
+  [DydxV4Network.V4Staging]: 'dydxprotocol-testnet',
+  [DydxV4Network.V4Testnet2]: 'dydx-testnet-2',
+  [DydxV4Network.V4Local]: 'dydxprotocol-testnet',
+  [DydxV3Network.V3Mainnet]: '1',
+  [DydxV3Network.V3Testnet]: '5',
+};
+
+export const DEFAULT_APP_ENVIRONMENT =
+  import.meta.env.MODE === 'production' ? DydxV4Network.V4Testnet2 : DydxV4Network.V4Staging;
+
+export const CLIENT_NETWORK_CONFIGS: Record<
+  DydxV4Network,
+  {
+    chainId: string;
+    validatorUrl: string;
+    faucetUrl: string;
+    indexerUrl: string;
+    ethereumChainId: number;
+  }
+> = {
+  [DydxV4Network.V4Mainnet]: {
+    chainId: CHAIN_IDS[DydxV4Network.V4Mainnet],
+    validatorUrl: import.meta.env.VITE_VALIDATOR_URL_STAGE,
+    faucetUrl: import.meta.env.VITE_FAUCET_URL_STAGE,
+    indexerUrl: import.meta.env.VITE_INDEXER_URL_STAGE,
+    ethereumChainId: 1,
+  },
+  [DydxV4Network.V4Local]: {
+    chainId: CHAIN_IDS[DydxV4Network.V4Local],
+    validatorUrl: import.meta.env.VITE_VALIDATOR_URL_DEV,
+    faucetUrl: import.meta.env.VITE_FAUCET_URL_DEV,
+    indexerUrl: import.meta.env.VITE_INDEXER_URL_DEV,
+    ethereumChainId: 5,
+  },
+  [DydxV4Network.V4Staging]: {
+    chainId: CHAIN_IDS[DydxV4Network.V4Staging],
+    validatorUrl: import.meta.env.VITE_VALIDATOR_URL_STAGE,
+    faucetUrl: import.meta.env.VITE_FAUCET_URL_STAGE,
+    indexerUrl: import.meta.env.VITE_INDEXER_URL_STAGE,
+    ethereumChainId: 5,
+  },
+  [DydxV4Network.V4Testnet2]: {
+    chainId: CHAIN_IDS[DydxV4Network.V4Testnet2],
+    validatorUrl: import.meta.env.VITE_VALIDATOR_URL_TESTNET2,
+    faucetUrl: import.meta.env.VITE_FAUCET_URL_TESTNET2,
+    indexerUrl: import.meta.env.VITE_INDEXER_URL_TESTNET2,
+    ethereumChainId: 5,
+  },
+};

src/constants/trade.ts

@@ -1,4 +1,4 @@
-import { OrderSide } from '@dydxprotocol/v4-client-js';
+import { OrderSide } from '@dydxprotocol/v4-client';
 
 import { AlertType } from '@/constants/alerts';
 import { STRING_KEYS } from '@/constants/localization';

src/constants/wallets.ts

@@ -302,7 +302,7 @@ export type WalletConnection = {
 
 // dYdX Chain wallets
 
-import { USDC_DENOM, type Onboarding, DYDX_DENOM } from '@dydxprotocol/v4-client-js';
+import { USDC_DENOM, type Onboarding, DYDX_DENOM } from '@dydxprotocol/v4-client';
 import type { suggestChain } from 'graz';
 
 export const COSMOS_DERIVATION_PATH = "m/44'/118'/0'/0/0";

src/hooks/tradingView/useTradingView.ts

@@ -1,5 +1,6 @@
 import { useEffect } from 'react';
 import { shallowEqual, useSelector } from 'react-redux';
+import { useLocation } from 'react-router-dom';
 import isEmpty from 'lodash/isEmpty';
 
 import { LanguageCode, ResolutionString, widget } from 'public/tradingview/charting_library';
@@ -13,8 +14,9 @@ import { store } from '@/state/_store';
 import { getSelectedNetwork } from '@/state/appSelectors';
 import { getAppTheme } from '@/state/configsSelectors';
 import { getSelectedLocale } from '@/state/localizationSelectors';
-import { getCurrentMarketId, getMarketIds } from '@/state/perpetualsSelectors';
+import { getMarketIds } from '@/state/perpetualsSelectors';
 
+import { getMarketIdFromLocation } from '@/lib/tradeData';
 import { getDydxDatafeed } from '@/lib/tradingView/dydxfeed';
 import { getSavedResolution, getWidgetOptions, getWidgetOverrides } from '@/lib/tradingView/utils';
 
@@ -28,7 +30,8 @@ export const useTradingView = ({
   tvWidgetRef: React.MutableRefObject<any>;
   setIsChartReady: React.Dispatch<React.SetStateAction<boolean>>;
 }) => {
-  const marketId = useSelector(getCurrentMarketId);
+  const location = useLocation();
+  const marketId = getMarketIdFromLocation(location);
   const appTheme = useSelector(getAppTheme);
   const marketIds = useSelector(getMarketIds, shallowEqual);
   const selectedLocale = useSelector(getSelectedLocale);
@@ -47,6 +50,7 @@ export const useTradingView = ({
     if (hasMarkets) {
       const widgetOptions = getWidgetOptions();
       const widgetOverrides = getWidgetOverrides(appTheme);
+
       const options = {
         // debug: true,
         ...widgetOptions,

src/hooks/useAccountBalance.ts

@@ -5,7 +5,7 @@ import { StargateClient } from '@cosmjs/stargate';
 import { useQuery } from 'react-query';
 import { formatUnits } from 'viem';
 
-import { CLIENT_NETWORK_CONFIGS } from '@/constants/networks';
+import { CLIENT_NETWORK_CONFIGS, type DydxV4Network } from '@/constants/networks';
 import { QUANTUM_MULTIPLIER } from '@/constants/numbers';
 import { EthereumAddress } from '@/constants/wallets';
 
@@ -15,6 +15,7 @@ import { MustBigNumber } from '@/lib/numbers';
 import { getSelectedNetwork } from '@/state/appSelectors';
 
 import { useAccounts } from './useAccounts';
+// import { useDydxClient } from './useDydxClient';
 import { usePollNativeTokenBalance } from './usePollNativeTokenBalance';
 
 type UseAccountBalanceProps = {
@@ -48,8 +49,10 @@ export const useAccountBalance = ({
 }: UseAccountBalanceProps = {}) => {
   const { evmAddress, dydxAddress } = useAccounts();
 
+  // TODO: let Abacus / useDydxClient handle EVM chain IDs
+  // const { networkConfig } = useDydxClient();
   const selectedNetwork = useSelector(getSelectedNetwork);
-  const evmChainId = Number(CLIENT_NETWORK_CONFIGS[selectedNetwork].ethereumChainId);
+  const evmChainId = Number(CLIENT_NETWORK_CONFIGS[selectedNetwork as DydxV4Network].ethereumChainId);
 
   const evmQuery = useBalance({
     enabled: Boolean(!isCosmosChain && addressOrDenom?.startsWith('0x')),

src/hooks/useAccounts.tsx

@@ -2,7 +2,7 @@ import { useCallback, useContext, createContext, useEffect, useState, useMemo }
 
 import { useDispatch } from 'react-redux';
 import { AES, enc } from 'crypto-js';
-import { LocalWallet, USDC_DENOM, type Subaccount } from '@dydxprotocol/v4-client-js';
+import { LocalWallet, USDC_DENOM, type Subaccount } from '@dydxprotocol/v4-client';
 
 import { OnboardingGuard, OnboardingState, type EvmDerivedAddresses } from '@/constants/account';
 import { LocalStorageKey, LOCAL_STORAGE_VERSIONS } from '@/constants/localStorage';

src/hooks/useCurrentMarketId.ts

@@ -29,7 +29,7 @@ export const useCurrentMarketId = () => {
 
   const validId = useMemo(() => {
     if (marketIds.length === 0) return marketId ?? lastViewedMarket;
-    if (!marketIds.includes(marketId ?? lastViewedMarket)) return DEFAULT_MARKETID;
+    if (!marketIds.includes(marketId)) return DEFAULT_MARKETID;
     return marketId ?? lastViewedMarket;
   }, [marketIds, marketId]);
 

src/hooks/useDisplayedWallets.ts

@@ -1,4 +1,4 @@
-import { isDydxV4Network } from '@/constants/networks';
+import { DydxV4Network } from '@/constants/networks';
 import { WalletType } from '@/constants/wallets';
 
 import { isTruthy } from '@/lib/isTruthy';
@@ -11,7 +11,9 @@ export const useDisplayedWallets = () => {
   return [
     WalletType.MetaMask,
 
-    import.meta.env.MODE !== 'production' && isDydxV4Network(selectedNetwork) && WalletType.Keplr,
+    import.meta.env.MODE !== 'production' &&
+      [DydxV4Network.V4Testnet2, DydxV4Network.V4Staging].includes(selectedNetwork) &&
+      WalletType.Keplr,
 
     WalletType.WalletConnect2,
     WalletType.WalletConnect,

src/hooks/useDydxClient.tsx

@@ -9,7 +9,7 @@ import {
   onboarding,
   Network,
   ValidatorConfig,
-} from '@dydxprotocol/v4-client-js';
+} from '@dydxprotocol/v4-client';
 
 import type { ResolutionString } from 'public/tradingview/charting_library';
 

src/hooks/useInitializePage.ts

@@ -3,7 +3,11 @@ import { useDispatch } from 'react-redux';
 
 import { LocalStorageKey } from '@/constants/localStorage';
 
-import { DEFAULT_APP_ENVIRONMENT, DydxNetwork, isValidDydxNetwork } from '@/constants/networks';
+import {
+  DEFAULT_APP_ENVIRONMENT,
+  DydxNetwork,
+  isValidDydxNetwork,
+} from '@/constants/networks';
 
 import { useLocalStorage } from '@/hooks';
 

src/hooks/usePollNativeTokenBalance.ts

@@ -3,7 +3,7 @@ import { useQuery } from 'react-query';
 import { useAccounts } from '@/hooks';
 
 import { DydxAddress } from '@/constants/wallets';
-import { DYDX_DENOM } from '@dydxprotocol/v4-client-js';
+import { DYDX_DENOM } from '@dydxprotocol/v4-client';
 
 const ACCOUNT_BALANCE_POLLING_INTERVAL = 60_000;
 

src/hooks/useSelectedNetwork.ts

@@ -1,8 +1,8 @@
-import { useCallback } from 'react';
+import { useCallback, useEffect } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { LocalStorageKey } from '@/constants/localStorage';
-import { DEFAULT_APP_ENVIRONMENT, DydxNetwork } from '@/constants/networks';
+import { DEFAULT_APP_ENVIRONMENT, DydxNetwork, DydxV4Network } from '@/constants/networks';
 
 import { useAccounts, useLocalStorage } from '@/hooks';
 

src/hooks/useSubaccount.tsx

@@ -17,7 +17,7 @@ import {
   DYDX_DENOM,
   USDC_DENOM,
   GAS_PRICE_DYDX_DENOM,
-} from '@dydxprotocol/v4-client-js';
+} from '@dydxprotocol/v4-client';
 
 import type {
   HumanReadableCancelOrderPayload,

src/lib/abacus/conversions.ts

@@ -1,4 +1,4 @@
-import { OrderSide } from '@dydxprotocol/v4-client-js';
+import { OrderSide } from '@dydxprotocol/v4-client';
 
 import {
   AbacusOrderSide,

src/lib/abacus/dydxChainQueries.ts

@@ -8,7 +8,7 @@ import {
   Network,
   NetworkOptimizer,
   ValidatorConfig,
-} from '@dydxprotocol/v4-client-js';
+} from '@dydxprotocol/v4-client';
 
 import {
   type AbacusDydxChainQueriesProtocol,

src/lib/abacus/filesystem.ts

@@ -1,23 +0,0 @@
-import type { AbacusFileSystemProtocol, FileLocation, Nullable } from '@/constants/abacus';
-import { NETWORK_ENDPOINTS } from '@/constants/networks';
-
-export const ENDPOINTS_PATH =
-  import.meta.env.MODE === 'production'
-    ? 'config/prod/endpoints.json'
-    : 'config/staging/dev_endpoints.json';
-
-class AbacusFileSystem implements AbacusFileSystemProtocol {
-  readTextFile(location: FileLocation, path: string): Nullable<string> {
-    if (path === ENDPOINTS_PATH) {
-      return JSON.stringify(NETWORK_ENDPOINTS);
-    }
-
-    return null;
-  }
-
-  writeTextFile(path: string, text: string): boolean {
-    return true;
-  }
-}
-
-export default AbacusFileSystem;

src/lib/abacus/index.ts

@@ -36,8 +36,8 @@ import AbacusStateNotifier from './stateNotification';
 import AbacusLocalizer from './localizer';
 import AbacusFormatter from './formatter';
 import AbacusThreading from './threading';
-import AbacusFileSystem, { ENDPOINTS_PATH } from './filesystem';
 import { LocaleSeparators } from '../numbers';
+
 class AbacusStateManager {
   private store: RootStore | undefined;
   private currentMarket: string | undefined;
@@ -62,7 +62,7 @@ class AbacusStateManager {
       null,
       new AbacusThreading(),
       new CoroutineTimer(),
-      new AbacusFileSystem()
+      null
     );
 
     const uiImplementations = new UIImplementations(
@@ -72,8 +72,6 @@ class AbacusStateManager {
     );
 
     this.stateManager = new AsyncAbacusStateManager(
-      import.meta.env.SHARED_RESOURCES_URI,
-      ENDPOINTS_PATH,
       ioImplementations,
       uiImplementations,
       // @ts-ignore

src/lib/abacus/stateNotification.ts

@@ -1,8 +1,5 @@
-import { kollections } from '@dydxprotocol/abacus';
-
 import type {
   AbacusApiState,
-  AbacusNotification,
   AbacusStateNotificationProtocol,
   Asset,
   Nullable,
@@ -39,14 +36,6 @@ class AbacusStateNotifier implements AbacusStateNotificationProtocol {
     this.store = undefined;
   }
 
-  environmentsChanged(): void {
-    return;
-  }
-
-  notificationsChanged(notifications: kollections.List<AbacusNotification>): void {
-    return;
-  }
-
   stateChanged(
     updatedState: Nullable<PerpetualState>,
     incomingChanges: Nullable<PerpetualStateChanges>

src/lib/tradeData.ts

@@ -1,5 +1,5 @@
 import { type Location, matchPath } from 'react-router-dom';
-import { OrderSide } from '@dydxprotocol/v4-client-js';
+import { OrderSide } from '@dydxprotocol/v4-client';
 
 import { StringGetterFunction } from '@/constants/localization';
 

src/localization/en/app.json

@@ -1209,20 +1209,5 @@
     "NODE_DOWN": "Node cannot be reached.",
     "NODE_HALTED": "Node has halted on block {BLOCK_NUMBER}.",
     "UNKNOWN_API_ERROR": "Unknown API error"
-  },
-  "CHAIN": {
-    "V3_MAINNET": "V3 Mainnet",
-    "V3_GOERLI": "V3 Staging",
-    "V4_DEVNET": "V4 Dev 1",
-    "V4_DEVNET_2": "V4 Dev 2",
-    "V4_DEVNET_3": "V4 Dev 3",
-    "V4_DEVNET_4": "V4 Dev 4",
-    "V4_DEVNET_5": "V4 Dev 5",
-    "V4_STAGING": "V4 Staging",
-    "V4_TESTNET2": "V4 Testnet",
-    "V4_TESTNET2_DSRV": "V4 Testnet (DSRV)",
-    "V4_TESTNET2_DYDX": "V4 Testnet (dYdX)",
-    "V4_TESTNET2_NODEFLEET": "V4 Testnet (nodefleet)",
-    "V4_TESTNET2_IMPERATOR": "V4 Testnet (Imperator)"
   }
 }

src/state/accountCalculators.ts

@@ -1,7 +1,7 @@
 import { createSelector } from 'reselect';
 
 import { SubaccountPosition } from '@/constants/abacus';
-import { OnboardingState, OnboardingSteps } from '@/constants/account';
+import { OnboardingGuard, OnboardingState, OnboardingSteps } from '@/constants/account';
 import { isDydxV4Network } from '@/constants/networks';
 
 import {

src/state/accountSelectors.ts

@@ -1,4 +1,4 @@
-import { OrderSide } from '@dydxprotocol/v4-client-js';
+import { OrderSide } from '@dydxprotocol/v4-client';
 import { createSelector } from 'reselect';
 
 import {

src/views/charts/DepthChart.tsx

@@ -33,7 +33,7 @@ import { Details } from '@/components/Details';
 import { LoadingSpace } from '@/components/Loading/LoadingSpinner';
 import { Output, OutputType } from '@/components/Output';
 
-import { OrderSide } from '@dydxprotocol/v4-client-js';
+import { OrderSide } from '@dydxprotocol/v4-client';
 
 // @ts-ignore
 const theme = buildChartTheme({

src/views/dialogs/ExchangeOfflineDialog.tsx

@@ -3,7 +3,7 @@ import styled, { AnyStyledComponent } from 'styled-components';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { AbacusApiStatus } from '@/constants/abacus';
-import { CLIENT_NETWORK_CONFIGS } from '@/constants/networks';
+import { DydxV4Network } from '@/constants/networks';
 import { UNICODE } from '@/constants/unicode';
 
 import { STRING_KEYS } from '@/constants/localization';
@@ -44,7 +44,7 @@ export const ExchangeOfflineDialog = ({ preventClose, setIsOpen }: ElementProps)
     >
       <Styled.Content>
         <p>{statusErrorMessage}</p>
-        {CLIENT_NETWORK_CONFIGS[selectedNetwork].dydxChainId === 'dydx-testnet-2' && (
+        {selectedNetwork === DydxV4Network.V4Testnet2 && (
           <Styled.Link href="https://status.v4testnet.dydx.exchange">
             {stringGetter({ key: STRING_KEYS.LEARN_MORE })} {UNICODE.ARROW_RIGHT}
           </Styled.Link>

src/views/dialogs/OnboardingDialog/GenerateKeys.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { useSignTypedData } from 'wagmi';
 import styled, { type AnyStyledComponent, css } from 'styled-components';
-import { useSelector } from 'react-redux';
+import { useDispatch, useSelector } from 'react-redux';
 import { AES } from 'crypto-js';
 
 import { EvmDerivedAccountStatus } from '@/constants/account';
@@ -9,7 +9,7 @@ import { AlertType } from '@/constants/alerts';
 import { AnalyticsEvent } from '@/constants/analytics';
 import { ButtonAction } from '@/constants/buttons';
 import { STRING_KEYS } from '@/constants/localization';
-import { CLIENT_NETWORK_CONFIGS } from '@/constants/networks';
+import { CLIENT_NETWORK_CONFIGS, DydxV4Network } from '@/constants/networks';
 import { DydxAddress, SIGN_TYPED_DATA } from '@/constants/wallets';
 
 import { useAccounts, useBreakpoints, useDydxClient, useStringGetter } from '@/hooks';
@@ -54,7 +54,7 @@ export const GenerateKeys = ({
   // 1. Switch network
   const selectedNetwork = useSelector(getSelectedNetwork);
 
-  const chainId = Number(CLIENT_NETWORK_CONFIGS[selectedNetwork].ethereumChainId);
+  const chainId = Number(CLIENT_NETWORK_CONFIGS[selectedNetwork as DydxV4Network].ethereumChainId);
 
   const { isMatchingNetwork, matchNetwork, isSwitchingNetwork } = useMatchingEvmNetwork({
     chainId,

src/views/forms/AccountManagementForms/DepositForm.tsx

@@ -2,10 +2,14 @@ import { type FormEvent, useCallback, useEffect, useMemo, useState } from 'react
 import styled, { type AnyStyledComponent } from 'styled-components';
 import { type NumberFormatValues } from 'react-number-format';
 import { shallowEqual, useSelector } from 'react-redux';
-import { TESTNET_CHAIN_ID } from '@dydxprotocol/v4-client-js';
+import { TESTNET_CHAIN_ID } from '@dydxprotocol/v4-client';
 import { ethers } from 'ethers';
 
-import { TransferInputField, TransferInputTokenResource, TransferType } from '@/constants/abacus';
+import {
+  TransferInputField,
+  TransferInputTokenResource,
+  TransferType,
+} from '@/constants/abacus';
 import { AlertType } from '@/constants/alerts';
 import { ButtonSize } from '@/constants/buttons';
 import { STRING_KEYS } from '@/constants/localization';
@@ -50,13 +54,8 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
 
   const { signerWagmi } = useAccounts();
 
-  const {
+  const { requestPayload, token, chain: chainIdStr, resources } = useSelector(getTransferInputs, shallowEqual) || {};
-    requestPayload,
+  const chainId = chainIdStr ? parseInt(chainIdStr) : undefined
-    token,
-    chain: chainIdStr,
-    resources,
-  } = useSelector(getTransferInputs, shallowEqual) || {};
-  const chainId = chainIdStr ? parseInt(chainIdStr) : undefined;
 
   // User inputs
   const sourceToken = useMemo(
@@ -198,6 +197,7 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
           abacusStateManager.clearTransferInputValues();
           setFromAmount('');
         }
+
       } catch (error) {
         setError(error);
       } finally {

src/views/forms/AccountManagementForms/WithdrawForm.tsx

@@ -3,11 +3,11 @@ import type { ChangeEvent, FormEvent } from 'react';
 import styled, { type AnyStyledComponent } from 'styled-components';
 import type { NumberFormatValues } from 'react-number-format';
 import { shallowEqual, useSelector } from 'react-redux';
-import { TESTNET_CHAIN_ID } from '@dydxprotocol/v4-client-js';
+import { TESTNET_CHAIN_ID } from '@dydxprotocol/v4-client';
 
 import { TransferInputField, TransferInputTokenResource, TransferType } from '@/constants/abacus';
 import { AlertType } from '@/constants/alerts';
-import { ButtonSize } from '@/constants/buttons';
+import {  ButtonSize } from '@/constants/buttons';
 import { STRING_KEYS } from '@/constants/localization';
 import { NumberSign, QUANTUM_MULTIPLIER } from '@/constants/numbers';
 

src/views/forms/TradeForm/LeverageSlider.stories.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import type { Story } from '@ladle/react';
 import styled, { AnyStyledComponent } from 'styled-components';
-import { OrderSide } from '@dydxprotocol/v4-client-js';
+import { OrderSide } from '@dydxprotocol/v4-client';
 
 import { PositionSide } from '@/constants/trade';
 import { breakpoints } from '@/styles';

src/views/forms/TradeForm/LeverageSlider.tsx

@@ -2,7 +2,7 @@ import { type Dispatch, type SetStateAction, useCallback, useMemo } from 'react'
 import styled, { AnyStyledComponent, css } from 'styled-components';
 import { Root, Thumb, Track } from '@radix-ui/react-slider';
 import _ from 'lodash';
-import { OrderSide } from '@dydxprotocol/v4-client-js';
+import { OrderSide } from '@dydxprotocol/v4-client';
 
 import { type Nullable, TradeInputField } from '@/constants/abacus';
 import { PositionSide } from '@/constants/trade';
@@ -43,7 +43,9 @@ export const LeverageSlider = ({
       },
       [PositionSide.Long]: {
         min:
-          orderSide === OrderSide.BUY ? leverageBN.toNumber() : maxLeverageBN.negated().toNumber(),
+          orderSide === OrderSide.BUY
+            ? leverageBN.toNumber()
+            : maxLeverageBN.negated().toNumber(),
         max: orderSide === OrderSide.BUY ? maxLeverageBN.toNumber() : leverageBN.toNumber(),
         midpoint:
           orderSide === OrderSide.SELL
@@ -54,7 +56,9 @@ export const LeverageSlider = ({
       },
       [PositionSide.Short]: {
         min:
-          orderSide === OrderSide.BUY ? leverageBN.toNumber() : maxLeverageBN.negated().toNumber(),
+          orderSide === OrderSide.BUY
+            ? leverageBN.toNumber()
+            : maxLeverageBN.negated().toNumber(),
         max: orderSide === OrderSide.BUY ? maxLeverageBN.toNumber() : leverageBN.toNumber(),
         midpoint:
           orderSide === OrderSide.BUY

src/views/forms/TradeForm/MarketLeverageInput.tsx

@@ -1,7 +1,7 @@
 import type { Dispatch, SetStateAction } from 'react';
 import { shallowEqual, useSelector } from 'react-redux';
 import styled, { AnyStyledComponent } from 'styled-components';
-import { OrderSide } from '@dydxprotocol/v4-client-js';
+import { OrderSide } from '@dydxprotocol/v4-client';
 
 import { TradeInputField, Nullable } from '@/constants/abacus';
 import { ButtonShape } from '@/constants/buttons';

src/views/forms/TradeForm/PlaceOrderButtonAndReceipt.tsx

@@ -1,5 +1,5 @@
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
-import { OrderSide } from '@dydxprotocol/v4-client-js';
+import { OrderSide } from '@dydxprotocol/v4-client';
 
 import type { TradeInputSummary } from '@/constants/abacus';
 import { ButtonAction, ButtonSize, ButtonType } from '@/constants/buttons';

src/views/forms/TradeForm/TradeSideToggle.tsx

@@ -1,7 +1,7 @@
 import { memo } from 'react';
 import styled, { css } from 'styled-components';
 import { shallowEqual, useSelector } from 'react-redux';
-import { OrderSide } from '@dydxprotocol/v4-client-js';
+import { OrderSide } from '@dydxprotocol/v4-client';
 
 import { AbacusOrderSide } from '@/constants/abacus';
 import { ButtonShape, ButtonSize } from '@/constants/buttons';
@@ -31,7 +31,9 @@ export const TradeSideToggle = memo(() => {
       onValueChange={(side: OrderSide) => {
         abacusStateManager.setTradeValue({
           value:
-            side === OrderSide.BUY ? AbacusOrderSide.buy.rawValue : AbacusOrderSide.sell.rawValue,
+            side === OrderSide.BUY
+              ? AbacusOrderSide.buy.rawValue
+              : AbacusOrderSide.sell.rawValue,
           field: TradeInputField.side,
         });
       }}

src/views/forms/TransferForm.tsx

@@ -5,14 +5,14 @@ import { shallowEqual, useSelector } from 'react-redux';
 import type { SyntheticInputEvent } from 'react-number-format/types/types';
 import { debounce } from 'lodash';
 import { StdFee } from '@cosmjs/stargate';
-import { validation } from '@dydxprotocol/v4-client-js';
+import { validation } from '@dydxprotocol/v4-client';
 
 import { TransferInputField, TransferType } from '@/constants/abacus';
 import { AlertType } from '@/constants/alerts';
 import { ButtonShape, ButtonSize } from '@/constants/buttons';
 import { ERROR_STRING_KEYS } from '@/constants/localization/errors';
 import { STRING_KEYS } from '@/constants/localization';
-import { CLIENT_NETWORK_CONFIGS } from '@/constants/networks';
+import { CHAIN_IDS } from '@/constants/networks';
 import { NumberSign, QUANTUM_MULTIPLIER } from '@/constants/numbers';
 import { DYDX_CHAIN_ASSET_COIN_DENOM, DYDX_CHAIN_INFO, DydxChainAsset } from '@/constants/wallets';
 
@@ -228,7 +228,7 @@ export const TransferForm = ({
 
   const networkOptions = [
     {
-      chainId: CLIENT_NETWORK_CONFIGS[selectedNetwork].dydxChainId,
+      chainId: CHAIN_IDS[selectedNetwork],
       label: (
         <Styled.InlineRow>
           <AssetIcon symbol="DYDX" /> {stringGetter({ key: STRING_KEYS.DYDX_CHAIN })}
@@ -318,7 +318,7 @@ export const TransferForm = ({
         />
         <Styled.NetworkSelectMenu
           label={stringGetter({ key: STRING_KEYS.NETWORK })}
-          value={CLIENT_NETWORK_CONFIGS[selectedNetwork].dydxChainId}
+          value={CHAIN_IDS[selectedNetwork]}
           slotTriggerAfter={null}
         >
           {networkOptions.map(({ chainId, label }) => (

src/views/menus/NetworkSelectMenu.tsx

@@ -1,7 +1,6 @@
 import styled, { type AnyStyledComponent } from 'styled-components';
 
 import { useSelectedNetwork } from '@/hooks';
-import { layoutMixins } from '@/styles/layoutMixins';
 import { headerMixins } from '@/styles/headerMixins';
 
 import { DropdownSelectMenu } from '@/components/DropdownSelectMenu';
@@ -19,6 +18,7 @@ export const NetworkSelectMenu = ({ align, sideOffset }: StyleProps) => {
 
   return (
     <Styled.DropdownSelectMenu
+      disabled={import.meta.env.MODE === 'production'}
       items={networks}
       value={selectedNetwork}
       onValueChange={switchNetwork}
@@ -32,11 +32,4 @@ const Styled: Record<string, AnyStyledComponent> = {};
 
 Styled.DropdownSelectMenu = styled(DropdownSelectMenu)`
   ${headerMixins.dropdownTrigger}
-
-  & > span:first-of-type {
-    ${layoutMixins.textOverflow}
-    max-width: 5.625rem;
-    min-width: 0;
-    white-space: nowrap;
-  }
 `;

src/views/menus/useNetworks.tsx

@@ -1,13 +1,45 @@
 import { type MenuItem } from '@/constants/menus';
-import { type DydxNetwork, NETWORK_ENDPOINTS } from '@/constants/networks';
+import { type DydxNetwork, DydxV3Network, DydxV4Network } from '@/constants/networks';
-import { useStringGetter } from '@/hooks';
 
-export const useNetworks = (): MenuItem<DydxNetwork>[] => {
+export const useNetworks = (): MenuItem<DydxNetwork>[] =>
-  const stringGetter = useStringGetter();
+  import.meta.env.MODE === 'production'
-
+    ? [
-  return NETWORK_ENDPOINTS.environments.map(({ stringKey, environment }) => ({
+        {
-    key: environment,
+          value: DydxV4Network.V4Testnet2,
-    label: stringGetter({ key: stringKey }),
+          label: 'Testnet',
-    value: environment,
+          slotBefore: <b>v4</b>,
-  }));
+        },
-};
+      ]
+    : [
+        {
+          value: DydxV4Network.V4Mainnet,
+          label: 'Mainnet',
+          slotBefore: <b>v4</b>,
+          disabled: true,
+        },
+        {
+          value: DydxV4Network.V4Staging,
+          label: 'Staging',
+          slotBefore: <b>v4</b>,
+        },
+        {
+          value: DydxV4Network.V4Testnet2,
+          label: 'Testnet-2',
+          slotBefore: <b>v4</b>,
+        },
+        {
+          value: DydxV4Network.V4Local,
+          label: 'Dev',
+          slotBefore: <b>v4</b>,
+        },
+        {
+          value: DydxV3Network.V3Mainnet,
+          label: 'Mainnet',
+          slotBefore: <b>v3</b>,
+        },
+        {
+          value: DydxV3Network.V3Testnet,
+          label: 'Testnet',
+          slotBefore: <b>v3</b>,
+        },
+      ];

src/views/tables/FillsTable.tsx

@@ -1,7 +1,7 @@
 import { useEffect } from 'react';
 import styled, { type AnyStyledComponent, css } from 'styled-components';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
-import { OrderSide } from '@dydxprotocol/v4-client-js';
+import { OrderSide } from '@dydxprotocol/v4-client';
 import type { ColumnSize } from '@react-types/table';
 
 import { type Asset, type SubaccountFill } from '@/constants/abacus';

src/views/tables/LiveTrades.tsx

@@ -1,7 +1,7 @@
 import { useMemo } from 'react';
 import styled, { type AnyStyledComponent, css, keyframes } from 'styled-components';
 import { shallowEqual, useSelector } from 'react-redux';
-import { OrderSide } from '@dydxprotocol/v4-client-js';
+import { OrderSide } from '@dydxprotocol/v4-client';
 
 import { MarketTrade } from '@/constants/abacus';
 import { STRING_KEYS } from '@/constants/localization';

src/views/tables/Orderbook.tsx

@@ -2,7 +2,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import { shallowEqual, useSelector } from 'react-redux';
 import styled, { type AnyStyledComponent, css, keyframes } from 'styled-components';
 
-import { OrderSide } from '@dydxprotocol/v4-client-js';
+import { OrderSide } from '@dydxprotocol/v4-client';
 import { type OrderbookLine, TradeInputField } from '@/constants/abacus';
 import { STRING_KEYS } from '@/constants/localization';
 

src/views/tables/OrdersTable.tsx

@@ -2,7 +2,7 @@ import { useEffect } from 'react';
 import styled, { css, type AnyStyledComponent } from 'styled-components';
 import { shallowEqual, useDispatch, useSelector } from 'react-redux';
 import { DateTime } from 'luxon';
-import { OrderSide } from '@dydxprotocol/v4-client-js';
+import { OrderSide } from '@dydxprotocol/v4-client';
 import { ColumnSize } from '@react-types/table';
 import type { Dispatch } from '@reduxjs/toolkit';