import order nit

package.json

@@ -40,7 +40,7 @@
     "@cosmjs/proto-signing": "^0.32.1",
     "@cosmjs/stargate": "^0.32.1",
     "@cosmjs/tendermint-rpc": "^0.32.1",
-    "@dydxprotocol/v4-abacus": "^1.4.2",
+    "@dydxprotocol/v4-abacus": "^1.4.5",
     "@dydxprotocol/v4-client-js": "^1.0.20",
     "@dydxprotocol/v4-localization": "^1.1.30",
     "@ethersproject/providers": "^5.7.2",

pnpm-lock.yaml

@@ -1,9 +1,5 @@
 lockfileVersion: '6.0'
 
-settings:
-  autoInstallPeers: true
-  excludeLinksFromLockfile: false
-
 overrides:
   follow-redirects: 1.15.3
 
@@ -30,8 +26,8 @@ dependencies:
     specifier: ^0.32.1
     version: 0.32.2
   '@dydxprotocol/v4-abacus':
-    specifier: ^1.4.2
-    version: 1.4.2
+    specifier: ^1.4.5
+    version: 1.4.5
   '@dydxprotocol/v4-client-js':
     specifier: ^1.0.20
     version: 1.0.20
@@ -1290,8 +1286,8 @@ packages:
     resolution: {integrity: sha512-Gg5t+eR7vPJMAmhkFt6CZrzPd0EKpAslWwk5rFVYZpJsM8JG5KT9XQ99hgNM3Ov6ScNoIWbXkpX27F6A9cXR4Q==}
     dev: false
 
-  /@dydxprotocol/v4-abacus@1.4.2:
-    resolution: {integrity: sha512-+hugk0RulMwMthR2xCMYXohcC3sEYqVW/lmiq0RUuHZ9yrjmgy48xl0aZUmXGUYXyoiHXPS4AULhRKHQ4OOLwg==}
+  /@dydxprotocol/v4-abacus@1.4.5:
+    resolution: {integrity: sha512-LhJmpIaUkHCsSiHx+jdk+59euvGp2E+gGFelpfmOYpH1+enZgEXDQvWsgHSFEQxYP3mRiGG4uo+ZYNGdvffg7g==}
     dev: false
 
   /@dydxprotocol/v4-client-js@1.0.20:
@@ -16053,3 +16049,7 @@ packages:
   /zwitch@2.0.4:
     resolution: {integrity: sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==}
     dev: true
+
+settings:
+  autoInstallPeers: true
+  excludeLinksFromLockfile: false

public/configs/env.json

@@ -1329,4 +1329,4 @@
          }
       }
    }
-}
+}

src/constants/networks.ts

@@ -1,4 +1,4 @@
-import environments from '../../public/configs/env.json';
+import environments from '../../public/configs/v1/env.json';
 
 const CURRENT_MODE = ({
   production: 'MAINNET',
@@ -14,5 +14,10 @@ export const isDev = CURRENT_MODE === 'DEV';
 export const AVAILABLE_ENVIRONMENTS = environments.deployments[CURRENT_MODE];
 export const CURRENT_ABACUS_DEPLOYMENT = CURRENT_MODE;
 export const ENVIRONMENT_CONFIG_MAP = environments.environments;
+export const TOKEN_CONFIG_MAP = environments.tokens;
+export const LINKS_CONFIG_MAP = environments.links;
+export const WALLETS_CONFIG_MAP = environments.wallets;
+export const GOVERNANCE_CONFIG_MAP = environments.governance;
 export type DydxNetwork = keyof typeof ENVIRONMENT_CONFIG_MAP;
+export type DydxChainId = keyof typeof TOKEN_CONFIG_MAP;
 export const DEFAULT_APP_ENVIRONMENT = AVAILABLE_ENVIRONMENTS.default as DydxNetwork;

src/constants/wallets.ts

@@ -24,7 +24,7 @@ import {
 
 import { isMetaMask } from '@/lib/wallet/providers';
 
-import { DydxNetwork, ENVIRONMENT_CONFIG_MAP } from './networks';
+import { DydxChainId, WALLETS_CONFIG_MAP } from './networks';
 
 // Wallet connection types
 
@@ -291,17 +291,17 @@ export const COSMOS_DERIVATION_PATH = "m/44'/118'/0'/0/0";
 /**
  * @description typed data to sign for dYdX Chain onboarding
  */
-export const getSignTypedData = (selectedNetwork: DydxNetwork) =>
+export const getSignTypedData = (selectedDydxChainId: DydxChainId) =>
   ({
     primaryType: 'dYdX',
     domain: {
-      name: ENVIRONMENT_CONFIG_MAP[selectedNetwork].wallets.signTypedDataDomainName,
+      name: WALLETS_CONFIG_MAP[selectedDydxChainId].signTypedDataDomainName,
     },
     types: {
       dYdX: [{ name: 'action', type: 'string' }],
     },
     message: {
-      action: ENVIRONMENT_CONFIG_MAP[selectedNetwork].wallets.signTypedDataAction,
+      action: WALLETS_CONFIG_MAP[selectedDydxChainId].signTypedDataAction,
     },
   } as const);
 

src/hooks/useDydxClient.tsx

@@ -18,14 +18,13 @@ import type { ResolutionString } from 'public/tradingview/charting_library';
 import type { ConnectNetworkEvent, NetworkConfig } from '@/constants/abacus';
 import { DEFAULT_TRANSACTION_MEMO } from '@/constants/analytics';
 import { type Candle, RESOLUTION_MAP } from '@/constants/candles';
-import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
-import { DydxChainAsset } from '@/constants/wallets';
 
 import { getSelectedNetwork } from '@/state/appSelectors';
 
 import { log } from '@/lib/telemetry';
 
 import { useRestrictions } from './useRestrictions';
+import { useTokenConfigs } from './useTokenConfigs';
 
 type DydxContextType = ReturnType<typeof useDydxClientContext>;
 const DydxContext = createContext<DydxContextType>({} as DydxContextType);
@@ -41,7 +40,8 @@ const useDydxClientContext = () => {
   // ------ Network ------ //
 
   const selectedNetwork = useSelector(getSelectedNetwork);
-  const tokensConfigs = ENVIRONMENT_CONFIG_MAP[selectedNetwork].tokens;
+  const { usdcDenom, usdcDecimals, usdcGasDenom, chainTokenDenom, chainTokenDecimals } =
+    useTokenConfigs();
 
   const [networkConfig, setNetworkConfig] = useState<NetworkConfig>();
 
@@ -75,11 +75,11 @@ const useDydxClientContext = () => {
                 networkConfig.validatorUrl,
                 networkConfig.chainId,
                 {
-                  USDC_DENOM: tokensConfigs[DydxChainAsset.USDC].denom,
-                  USDC_DECIMALS: tokensConfigs[DydxChainAsset.USDC].decimals,
-                  USDC_GAS_DENOM: tokensConfigs[DydxChainAsset.USDC].gasDenom,
-                  CHAINTOKEN_DENOM: tokensConfigs[DydxChainAsset.CHAINTOKEN].denom,
-                  CHAINTOKEN_DECIMALS: tokensConfigs[DydxChainAsset.CHAINTOKEN].decimals,
+                  USDC_DENOM: usdcDenom,
+                  USDC_DECIMALS: usdcDecimals,
+                  USDC_GAS_DENOM: usdcGasDenom,
+                  CHAINTOKEN_DENOM: chainTokenDenom,
+                  CHAINTOKEN_DECIMALS: chainTokenDecimals,
                 },
                 {
                   broadcastPollIntervalMs: 3_000,

src/hooks/useGovernanceVariables.ts

@@ -1,5 +1,8 @@
-import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
-import { useSelectedNetwork } from '@/hooks';
+import { useSelector } from 'react-redux';
+
+import { GOVERNANCE_CONFIG_MAP } from '@/constants/networks';
+
+import { getSelectedDydxChainId } from '@/state/appSelectors';
 
 export interface GovernanceVariables {
   newMarketProposal: {
@@ -10,7 +13,7 @@ export interface GovernanceVariables {
 }
 
 export const useGovernanceVariables = (): GovernanceVariables => {
-  const { selectedNetwork } = useSelectedNetwork();
-  const governanceVars = ENVIRONMENT_CONFIG_MAP[selectedNetwork].governance as GovernanceVariables;
+  const selectedDydxChainId = useSelector(getSelectedDydxChainId);
+  const governanceVars = GOVERNANCE_CONFIG_MAP[selectedDydxChainId] as GovernanceVariables;
   return governanceVars;
 };

src/hooks/useNotificationTypes.tsx

@@ -5,7 +5,6 @@ import { isEqual, groupBy } from 'lodash';
 import { useNavigate } from 'react-router-dom';
 
 import { DialogTypes } from '@/constants/dialogs';
-import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
 import { AppRoute } from '@/constants/routes';
 import { DydxChainAsset } from '@/constants/wallets';
 
@@ -23,7 +22,7 @@ import {
   TransferNotificationTypes,
 } from '@/constants/notifications';
 
-import { useSelectedNetwork, useStringGetter } from '@/hooks';
+import { useStringGetter } from '@/hooks';
 import { useLocalNotifications } from '@/hooks/useLocalNotifications';
 
 import { AssetIcon } from '@/components/AssetIcon';
@@ -36,6 +35,7 @@ import { getSubaccountFills, getSubaccountOrders } from '@/state/accountSelector
 import { openDialog } from '@/state/dialogs';
 import { getAbacusNotifications } from '@/state/notificationsSelectors';
 import { getMarketIds } from '@/state/perpetualsSelectors';
+import { getSelectedDydxChainId } from '@/state/appSelectors';
 
 import { formatSeconds } from '@/lib/timeUtils';
 
@@ -175,7 +175,7 @@ export const notificationTypes: NotificationTypeConfig[] = [
     useTrigger: ({ trigger }) => {
       const stringGetter = useStringGetter();
       const { transferNotifications } = useLocalNotifications();
-      const { selectedNetwork } = useSelectedNetwork();
+      const selectedDydxChainId = useSelector(getSelectedDydxChainId);
 
       useEffect(() => {
         for (const transfer of transferNotifications) {
@@ -184,7 +184,7 @@ export const notificationTypes: NotificationTypeConfig[] = [
           const icon = <Icon iconName={isFinished ? IconName.Transfer : IconName.Clock} />;
 
           const transferType =
-            type ?? fromChainId === ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId
+            type ?? fromChainId === selectedDydxChainId
               ? TransferNotificationTypes.Withdrawal
               : TransferNotificationTypes.Deposit;
 

src/hooks/useSelectedNetwork.ts

@@ -2,7 +2,7 @@ import { useCallback } from 'react';
 import { useDispatch, useSelector } from 'react-redux';
 
 import { LocalStorageKey } from '@/constants/localStorage';
-import { DEFAULT_APP_ENVIRONMENT, DydxNetwork, ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
+import { DEFAULT_APP_ENVIRONMENT, DydxNetwork } from '@/constants/networks';
 
 import { useAccounts, useLocalStorage } from '@/hooks';
 

src/hooks/useSubaccount.tsx

@@ -28,7 +28,7 @@ import { setSubaccount, setHistoricalPnl, removeUncommittedOrderClientId } from
 import { getBalances } from '@/state/accountSelectors';
 
 import abacusStateManager from '@/lib/abacus';
-import { hashFromTx } from '@/lib/hashfromTx';
+import { hashFromTx } from '@/lib/txUtils';
 import { log } from '@/lib/telemetry';
 
 import { useAccounts } from './useAccounts';

src/hooks/useTokenConfigs.ts

@@ -1,7 +1,9 @@
-import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
+import { useSelector } from 'react-redux';
+
+import { TOKEN_CONFIG_MAP } from '@/constants/networks';
 import { DydxChainAsset } from '@/constants/wallets';
 
-import { useSelectedNetwork } from '@/hooks';
+import { getSelectedDydxChainId } from '@/state/appSelectors';
 
 export const useTokenConfigs = (): {
   tokensConfigs: {
@@ -10,31 +12,33 @@ export const useTokenConfigs = (): {
       name: string;
       decimals: number;
       gasDenom?: string;
-    },
+    };
     [DydxChainAsset.CHAINTOKEN]: {
       denom: string;
       name: string;
       decimals: number;
       gasDenom?: string;
-    },
+    };
   };
   usdcDenom: string;
   usdcDecimals: number;
+  usdcGasDenom: string;
   usdcLabel: string;
   chainTokenDenom: string;
   chainTokenDecimals: number;
   chainTokenLabel: string;
 } => {
-  const { selectedNetwork } = useSelectedNetwork();
-  const tokensConfigs = ENVIRONMENT_CONFIG_MAP[selectedNetwork].tokens;
+  const selectedDydxChainId = useSelector(getSelectedDydxChainId);
+  const tokensConfigs = TOKEN_CONFIG_MAP[selectedDydxChainId];
 
-  return { 
+  return {
     tokensConfigs,
-    usdcDenom: tokensConfigs[DydxChainAsset.USDC].denom, 
-    usdcDecimals: tokensConfigs[DydxChainAsset.USDC].decimals, 
+    usdcDenom: tokensConfigs[DydxChainAsset.USDC].denom,
+    usdcDecimals: tokensConfigs[DydxChainAsset.USDC].decimals,
+    usdcGasDenom: tokensConfigs[DydxChainAsset.USDC].gasDenom,
     usdcLabel: tokensConfigs[DydxChainAsset.USDC].name,
     chainTokenDenom: tokensConfigs[DydxChainAsset.CHAINTOKEN].denom,
-    chainTokenDecimals: tokensConfigs[DydxChainAsset.CHAINTOKEN].decimals, 
+    chainTokenDecimals: tokensConfigs[DydxChainAsset.CHAINTOKEN].decimals,
     chainTokenLabel: tokensConfigs[DydxChainAsset.CHAINTOKEN].name,
   };
 };

src/hooks/useURLConfigs.ts

@@ -1,12 +1,15 @@
-import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
+import { useSelector } from 'react-redux';
 
-import { useSelectedNetwork } from '@/hooks';
+import { LINKS_CONFIG_MAP } from '@/constants/networks';
+
+import { getSelectedDydxChainId } from '@/state/appSelectors';
 
 const FALLBACK_URL = 'https://help.dydx.exchange/';
 
 export interface LinksConfigs {
   tos: string;
   privacy: string;
+  statusPage: string;
   mintscan: string;
   mintscanBase: string;
   feedback?: string;
@@ -27,12 +30,13 @@ export interface LinksConfigs {
 }
 
 export const useURLConfigs = (): LinksConfigs => {
-  const { selectedNetwork } = useSelectedNetwork();
-  const linksConfigs = ENVIRONMENT_CONFIG_MAP[selectedNetwork].links as LinksConfigs;
+  const selectedDydxChainId = useSelector(getSelectedDydxChainId);
+  const linksConfigs = LINKS_CONFIG_MAP[selectedDydxChainId] as LinksConfigs;
 
   return {
     tos: linksConfigs.tos,
     privacy: linksConfigs.privacy,
+    statusPage: linksConfigs.statusPage,
     mintscan: linksConfigs.mintscan,
     mintscanBase: linksConfigs.mintscanBase,
     feedback: linksConfigs.feedback || FALLBACK_URL,

src/hooks/useWalletConnection.ts

@@ -4,7 +4,7 @@ import { useSelector } from 'react-redux';
 import { EvmDerivedAddresses } from '@/constants/account';
 import { STRING_KEYS } from '@/constants/localization';
 import { LocalStorageKey } from '@/constants/localStorage';
-import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
+import { ENVIRONMENT_CONFIG_MAP, WALLETS_CONFIG_MAP } from '@/constants/networks';
 
 import {
   type DydxAddress,
@@ -32,7 +32,7 @@ import {
   WalletType as CosmosWalletType,
 } from 'graz';
 
-import { getSelectedNetwork } from '@/state/appSelectors';
+import { getSelectedDydxChainId } from '@/state/appSelectors';
 
 import { resolveWagmiConnector } from '@/lib/wagmi';
 import { getWalletConnection, parseWalletError } from '@/lib/wallet';
@@ -91,8 +91,8 @@ export const useWalletConnection = () => {
 
   // Wallet connection
 
-  const selectedNetwork = useSelector(getSelectedNetwork);
-  const walletConnectConfig = ENVIRONMENT_CONFIG_MAP[selectedNetwork].wallets.walletconnect;
+  const selectedDydxChainId = useSelector(getSelectedDydxChainId);
+  const walletConnectConfig = WALLETS_CONFIG_MAP[selectedDydxChainId].walletconnect;
   const wagmiConnector = useMemo(
     () =>
       walletType && walletConnectionType

src/layout/Footer/FooterDesktop.tsx

@@ -3,9 +3,9 @@ import styled, { type AnyStyledComponent, css } from 'styled-components';
 import { AbacusApiStatus } from '@/constants/abacus';
 import { ButtonSize, ButtonType } from '@/constants/buttons';
 import { STRING_KEYS } from '@/constants/localization';
-import { ENVIRONMENT_CONFIG_MAP, isDev } from '@/constants/networks';
+import { isDev } from '@/constants/networks';
 
-import { useApiState, useSelectedNetwork, useStringGetter } from '@/hooks';
+import { useApiState, useStringGetter, useURLConfigs } from '@/hooks';
 import { ChatIcon, LinkOutIcon } from '@/icons';
 
 import { layoutMixins } from '@/styles/layoutMixins';
@@ -28,8 +28,7 @@ enum ExchangeStatus {
 export const FooterDesktop = () => {
   const stringGetter = useStringGetter();
   const { height, indexerHeight, status, statusErrorMessage } = useApiState();
-  const { selectedNetwork } = useSelectedNetwork();
-  const { statusPage } = ENVIRONMENT_CONFIG_MAP[selectedNetwork].links;
+  const { statusPage } = useURLConfigs();
 
   const { exchangeStatus, label } =
     !status || status === AbacusApiStatus.NORMAL

src/lib/abacus/dydxChainTransactions.ts

@@ -34,7 +34,7 @@ import {
 import { DEFAULT_TRANSACTION_MEMO } from '@/constants/analytics';
 import { DialogTypes } from '@/constants/dialogs';
 import { UNCOMMITTED_ORDER_TIMEOUT_MS } from '@/constants/trade';
-import { ENVIRONMENT_CONFIG_MAP, DydxNetwork, isTestnet } from '@/constants/networks';
+import { DydxNetwork, isTestnet } from '@/constants/networks';
 
 import { RootStore } from '@/state/_store';
 import { addUncommittedOrderClientId, removeUncommittedOrderClientId } from '@/state/account';
@@ -43,7 +43,8 @@ import { openDialog } from '@/state/dialogs';
 import { StatefulOrderError } from '../errors';
 import { bytesToBigInt } from '../numbers';
 import { log } from '../telemetry';
-import { hashFromTx } from '../hashfromTx';
+import { hashFromTx, getMintscanTxLink } from '../txUtils';
+import { getDydxChainIdFromNetwork } from '../network';
 
 class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
   private compositeClient: CompositeClient | undefined;
@@ -238,9 +239,10 @@ class DydxChainTransactions implements AbacusDYDXChainTransactionsProtocol {
 
       if (isTestnet) {
         console.log(
-          `${ENVIRONMENT_CONFIG_MAP[
-            this.compositeClient.network.getString() as DydxNetwork
-          ]?.links?.mintscan?.replace('{tx_hash}', hash.toString())}`
+          getMintscanTxLink(
+            getDydxChainIdFromNetwork(this.compositeClient.network.getString() as DydxNetwork),
+            hash
+          )
         );
       } else console.log(`txHash: ${hash}`);
 

src/lib/hashfromTx.ts

@@ -1,3 +0,0 @@
-export const hashFromTx = (
-  txHash: string | Uint8Array
-): string => `0x${Buffer.from(txHash).toString('hex')}`;

src/lib/network.ts

@@ -1,4 +1,8 @@
-import { type DydxNetwork, ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
+import { type DydxNetwork, ENVIRONMENT_CONFIG_MAP, type DydxChainId } from '@/constants/networks';
 
 export const validateAgainstAvailableEnvironments = (value: DydxNetwork) =>
   Object.keys(ENVIRONMENT_CONFIG_MAP).includes(value);
+
+export const getDydxChainIdFromNetwork = (network: DydxNetwork) => {
+  return ENVIRONMENT_CONFIG_MAP[network].dydxChainId as DydxChainId;
+};

src/lib/txUtils.ts

@@ -0,0 +1,7 @@
+import { DydxChainId, LINKS_CONFIG_MAP } from '@/constants/networks';
+
+export const hashFromTx = (txHash: string | Uint8Array): string =>
+  `0x${Buffer.from(txHash).toString('hex')}`;
+
+export const getMintscanTxLink = (dydxChainId: DydxChainId, txHash: string): string =>
+  `${LINKS_CONFIG_MAP[dydxChainId]?.mintscan?.replace('{tx_hash}', txHash.toString())}`;

src/state/appSelectors.ts

@@ -1,4 +1,8 @@
+import { DydxChainId, ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
 import type { RootState } from './_store';
 
 export const getApiState = (state: RootState) => state.app.apiState;
 export const getSelectedNetwork = (state: RootState) => state.app.selectedNetwork;
+
+export const getSelectedDydxChainId = (state: RootState) =>
+  ENVIRONMENT_CONFIG_MAP[state.app.selectedNetwork].dydxChainId as DydxChainId;

src/views/dialogs/OnboardingDialog/GenerateKeys.tsx

@@ -25,7 +25,7 @@ import { Switch } from '@/components/Switch';
 import { WithReceipt } from '@/components/WithReceipt';
 import { WithTooltip } from '@/components/WithTooltip';
 
-import { getSelectedNetwork } from '@/state/appSelectors';
+import { getSelectedNetwork, getSelectedDydxChainId } from '@/state/appSelectors';
 
 import { track } from '@/lib/analytics';
 import { isTruthy } from '@/lib/isTruthy';
@@ -98,7 +98,8 @@ export const GenerateKeys = ({
     EvmDerivedAccountStatus.Derived,
   ].includes(status);
 
-  const signTypedData = getSignTypedData(selectedNetwork);
+  const selectedDydxChainId = useSelector(getSelectedDydxChainId);
+  const signTypedData = getSignTypedData(selectedDydxChainId);
   const { signTypedDataAsync } = useSignTypedData({
     ...signTypedData,
     domain: {

src/views/forms/AccountManagementForms/DepositForm.tsx

@@ -10,7 +10,7 @@ import { TransferInputField, TransferInputTokenResource, TransferType } from '@/
 import { AlertType } from '@/constants/alerts';
 import { ButtonSize } from '@/constants/buttons';
 import { STRING_KEYS } from '@/constants/localization';
-import { ENVIRONMENT_CONFIG_MAP, isMainnet } from '@/constants/networks';
+import { isMainnet } from '@/constants/networks';
 import { MAX_CCTP_TRANSFER_AMOUNT, MAX_PRICE_IMPACT, NumberSign } from '@/constants/numbers';
 import type { EvmAddress } from '@/constants/wallets';
 
@@ -32,6 +32,7 @@ import { OutputType } from '@/components/Output';
 import { Tag } from '@/components/Tag';
 import { WithDetailsReceipt } from '@/components/WithDetailsReceipt';
 
+import { getSelectedDydxChainId } from '@/state/appSelectors';
 import { getTransferInputs } from '@/state/inputsSelectors';
 
 import abacusStateManager from '@/lib/abacus';
@@ -56,7 +57,7 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
   const [error, setError] = useState<Error | null>(null);
   const [isLoading, setIsLoading] = useState(false);
   const [requireUserActionInWallet, setRequireUserActionInWallet] = useState(false);
-  const { selectedNetwork } = useSelectedNetwork();
+  const selectedDydxChainId = useSelector(getSelectedDydxChainId);
 
   const { evmAddress, signerWagmi, publicClientWagmi, nobleAddress } = useAccounts();
 
@@ -262,9 +263,7 @@ export const DepositForm = ({ onDeposit, onError }: DepositFormProps) => {
         if (txHash) {
           addTransferNotification({
             txHash: txHash,
-            toChainId: !isCctp
-              ? ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId
-              : getNobleChainId(),
+            toChainId: !isCctp ? selectedDydxChainId : getNobleChainId(),
             fromChainId: chainIdStr || undefined,
             toAmount: summary?.usdcSize || undefined,
             triggeredAt: Date.now(),

src/views/forms/AccountManagementForms/WithdrawForm.tsx

@@ -9,7 +9,7 @@ import { TransferInputField, TransferInputTokenResource, TransferType } from '@/
 import { AlertType } from '@/constants/alerts';
 import { ButtonSize } from '@/constants/buttons';
 import { STRING_KEYS } from '@/constants/localization';
-import { ENVIRONMENT_CONFIG_MAP, isMainnet } from '@/constants/networks';
+import { isMainnet } from '@/constants/networks';
 import { TransferNotificationTypes } from '@/constants/notifications';
 import { MAX_CCTP_TRANSFER_AMOUNT, MAX_PRICE_IMPACT, NumberSign } from '@/constants/numbers';
 
@@ -40,6 +40,7 @@ import { Icon, IconName } from '@/components/Icon';
 
 import { SourceSelectMenu } from '@/views/forms/AccountManagementForms/SourceSelectMenu';
 
+import { getSelectedDydxChainId } from '@/state/appSelectors';
 import { getSubaccount } from '@/state/accountSelectors';
 import { getTransferInputs } from '@/state/inputsSelectors';
 
@@ -54,7 +55,7 @@ export const WithdrawForm = () => {
   const stringGetter = useStringGetter();
   const [error, setError] = useState<string>();
   const [isLoading, setIsLoading] = useState(false);
-  const { selectedNetwork } = useSelectedNetwork();
+  const selectedDydxChainId = useSelector(getSelectedDydxChainId);
 
   const { sendSquidWithdraw } = useSubaccount();
   const { freeCollateral } = useSelector(getSubaccount, shallowEqual) || {};
@@ -177,9 +178,7 @@ export const WithdrawForm = () => {
             addTransferNotification({
               txHash: txHash,
               type: TransferNotificationTypes.Withdrawal,
-              fromChainId: !isCctp
-                ? ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId
-                : getNobleChainId(),
+              fromChainId: !isCctp ? selectedDydxChainId : getNobleChainId(),
               toChainId: chainIdStr || undefined,
               toAmount: debouncedAmountBN.toNumber(),
               triggeredAt: Date.now(),

src/views/forms/TransferForm.tsx

@@ -9,7 +9,6 @@ import { TransferInputField, TransferType } from '@/constants/abacus';
 import { AlertType } from '@/constants/alerts';
 import { ButtonShape, ButtonSize } from '@/constants/buttons';
 import { STRING_KEYS } from '@/constants/localization';
-import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
 import { NumberSign } from '@/constants/numbers';
 import { DydxChainAsset } from '@/constants/wallets';
 
@@ -18,7 +17,6 @@ import {
   useAccounts,
   useDydxClient,
   useRestrictions,
-  useSelectedNetwork,
   useStringGetter,
   useSubaccount,
   useTokenConfigs,
@@ -41,6 +39,7 @@ import { TransferButtonAndReceipt } from '@/views/forms/TransferForm/TransferBut
 import { WithDetailsReceipt } from '@/components/WithDetailsReceipt';
 
 import { getSubaccount } from '@/state/accountSelectors';
+import { getSelectedDydxChainId } from '@/state/appSelectors';
 import { getTransferInputs } from '@/state/inputsSelectors';
 
 import abacusStateManager from '@/lib/abacus';
@@ -63,7 +62,7 @@ export const TransferForm = ({
   const { dydxAddress } = useAccounts();
   const { transfer } = useSubaccount();
   const { nativeTokenBalance, usdcBalance } = useAccountBalance();
-  const { selectedNetwork } = useSelectedNetwork();
+  const selectedDydxChainId = useSelector(getSelectedDydxChainId);
   const { tokensConfigs, usdcLabel, chainTokenLabel } = useTokenConfigs();
 
   const {
@@ -239,7 +238,7 @@ export const TransferForm = ({
 
   const networkOptions = [
     {
-      chainId: ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId,
+      chainId: selectedDydxChainId,
       label: (
         <Styled.InlineRow>
           <AssetIcon symbol="DYDX" /> {stringGetter({ key: STRING_KEYS.DYDX_CHAIN })}
@@ -322,7 +321,7 @@ export const TransferForm = ({
         />
         <Styled.NetworkSelectMenu
           label={stringGetter({ key: STRING_KEYS.NETWORK })}
-          value={ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId}
+          value={selectedDydxChainId}
           slotTriggerAfter={null}
         >
           {networkOptions.map(({ chainId, label }) => (

src/views/notifications/TransferStatusNotification/TransferStatusSteps.tsx

@@ -1,18 +1,21 @@
 import { useMemo } from 'react';
+import { useSelector } from 'react-redux';
 import styled, { css, type AnyStyledComponent } from 'styled-components';
 import { StatusResponse } from '@0xsquid/sdk';
 
-import { useStringGetter, useSelectedNetwork, useURLConfigs } from '@/hooks';
+import { STRING_KEYS } from '@/constants/localization';
+import { TransferNotificationTypes } from '@/constants/notifications';
+
+import { useStringGetter, useURLConfigs } from '@/hooks';
+
+import { layoutMixins } from '@/styles/layoutMixins';
 
 import { Link } from '@/components/Link';
 import { Icon, IconName } from '@/components/Icon';
 import { LoadingDots } from '@/components/Loading/LoadingDots';
 import { LoadingSpinner } from '@/components/Loading/LoadingSpinner';
 
-import { layoutMixins } from '@/styles/layoutMixins';
-import { STRING_KEYS } from '@/constants/localization';
-import { ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
-import { TransferNotificationTypes } from '@/constants/notifications';
+import { getSelectedDydxChainId } from '@/state/appSelectors';
 
 type ElementProps = {
   status?: StatusResponse;
@@ -32,9 +35,8 @@ enum TransferStatusStep {
 
 export const TransferStatusSteps = ({ className, status, type }: ElementProps & StyleProps) => {
   const stringGetter = useStringGetter();
-  const { selectedNetwork } = useSelectedNetwork();
+  const selectedDydxChainId = useSelector(getSelectedDydxChainId);
   const { mintscan: mintscanTxUrl } = useURLConfigs();
-  const dydxChainId = ENVIRONMENT_CONFIG_MAP[selectedNetwork].dydxChainId;
 
   const { currentStep, steps } = useMemo(() => {
     const routeStatus = status?.routeStatus;
@@ -55,7 +57,7 @@ export const TransferStatusSteps = ({ className, status, type }: ElementProps &
         link:
           type === TransferNotificationTypes.Deposit
             ? status?.fromChain?.transactionUrl
-            : routeStatus?.[0]?.chainId === dydxChainId && routeStatus[0].txHash
+            : routeStatus?.[0]?.chainId === selectedDydxChainId && routeStatus[0].txHash
             ? `${mintscanTxUrl?.replace('{tx_hash}', routeStatus[0].txHash.replace('0x', ''))}`
             : undefined,
       },
@@ -81,7 +83,7 @@ export const TransferStatusSteps = ({ className, status, type }: ElementProps &
         link:
           type === TransferNotificationTypes.Withdrawal
             ? status?.toChain?.transactionUrl
-            : currentStatus?.chainId === dydxChainId && currentStatus?.txHash
+            : currentStatus?.chainId === selectedDydxChainId && currentStatus?.txHash
             ? `${mintscanTxUrl?.replace('{tx_hash}', currentStatus.txHash.replace('0x', ''))}`
             : undefined,
       },