use selector for chain id instead

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, TOKEN_CONFIG_MAP } from '@/constants/networks';
-import { DydxChainAsset } from '@/constants/wallets';
 
-import { getSelectedDydxChainId, getSelectedNetwork } from '@/state/appSelectors';
+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,8 +40,8 @@ const useDydxClientContext = () => {
   // ------ Network ------ //
 
   const selectedNetwork = useSelector(getSelectedNetwork);
-  const selectedDydxChainId = useSelector(getSelectedDydxChainId);
-  const tokensConfigs = TOKEN_CONFIG_MAP[selectedDydxChainId];
+  const { usdcDenom, usdcDecimals, usdcGasDenom, chainTokenDenom, chainTokenDecimals } =
+    useTokenConfigs();
 
   const [networkConfig, setNetworkConfig] = useState<NetworkConfig>();
 
@@ -76,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 { useSelector } from 'react-redux';
+
 import { GOVERNANCE_CONFIG_MAP } from '@/constants/networks';
-import { useSelectedNetwork } from '@/hooks';
+
+import { getSelectedDydxChainId } from '@/state/appSelectors';
 
 export interface GovernanceVariables {
   newMarketProposal: {
@@ -10,7 +13,7 @@ export interface GovernanceVariables {
 }
 
 export const useGovernanceVariables = (): GovernanceVariables => {
-  const { selectedDydxChainId } = useSelectedNetwork();
+  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 { selectedDydxChainId } = useSelectedNetwork();
+      const selectedDydxChainId = useSelector(getSelectedDydxChainId);
 
       useEffect(() => {
         for (const transfer of transferNotifications) {

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, DydxChainId, DydxNetwork, ENVIRONMENT_CONFIG_MAP } from '@/constants/networks';
+import { DEFAULT_APP_ENVIRONMENT, DydxNetwork } from '@/constants/networks';
 
 import { useAccounts, useLocalStorage } from '@/hooks';
 
@@ -14,7 +14,6 @@ import { validateAgainstAvailableEnvironments } from '@/lib/network';
 export const useSelectedNetwork = (): {
   switchNetwork: (network: DydxNetwork) => void;
   selectedNetwork: DydxNetwork;
-  selectedDydxChainId: DydxChainId;
 } => {
   const dispatch = useDispatch();
   const { disconnect } = useAccounts();
@@ -39,6 +38,5 @@ export const useSelectedNetwork = (): {
   return {
     switchNetwork,
     selectedNetwork,
-    selectedDydxChainId: ENVIRONMENT_CONFIG_MAP[selectedNetwork as DydxNetwork].dydxChainId as DydxChainId,
   };
 };

src/hooks/useSubaccount.tsx

@@ -374,7 +374,6 @@ export const useSubaccountContext = ({ localDydxWallet }: { localDydxWallet?: Lo
         placeOrderParams = abacusStateManager.closePosition(callback);
       } else {
         placeOrderParams = abacusStateManager.placeOrder(callback);
-
       }
 
       return placeOrderParams;

src/hooks/useTokenConfigs.ts

@@ -1,7 +1,9 @@
+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 { selectedDydxChainId } = useSelectedNetwork();
+  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,6 +1,8 @@
+import { useSelector } from 'react-redux';
+
 import { LINKS_CONFIG_MAP } from '@/constants/networks';
 
-import { useSelectedNetwork } from '@/hooks';
+import { getSelectedDydxChainId } from '@/state/appSelectors';
 
 const FALLBACK_URL = 'https://help.dydx.exchange/';
 
@@ -28,7 +30,7 @@ export interface LinksConfigs {
 }
 
 export const useURLConfigs = (): LinksConfigs => {
-  const { selectedDydxChainId } = useSelectedNetwork();
+  const selectedDydxChainId = useSelector(getSelectedDydxChainId);
   const linksConfigs = LINKS_CONFIG_MAP[selectedDydxChainId] as LinksConfigs;
 
   return {

src/views/forms/AccountManagementForms/DepositForm.tsx

@@ -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 { selectedDydxChainId } = useSelectedNetwork();
+  const selectedDydxChainId = useSelector(getSelectedDydxChainId);
 
   const { evmAddress, signerWagmi, publicClientWagmi, nobleAddress } = useAccounts();
 

src/views/forms/AccountManagementForms/WithdrawForm.tsx

@@ -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 { selectedDydxChainId } = useSelectedNetwork();
+  const selectedDydxChainId = useSelector(getSelectedDydxChainId);
 
   const { sendSquidWithdraw } = useSubaccount();
   const { freeCollateral } = useSelector(getSubaccount, shallowEqual) || {};

src/views/forms/TransferForm.tsx

@@ -17,7 +17,6 @@ import {
   useAccounts,
   useDydxClient,
   useRestrictions,
-  useSelectedNetwork,
   useStringGetter,
   useSubaccount,
   useTokenConfigs,
@@ -40,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';
@@ -62,7 +62,7 @@ export const TransferForm = ({
   const { dydxAddress } = useAccounts();
   const { transfer } = useSubaccount();
   const { nativeTokenBalance, usdcBalance } = useAccountBalance();
-  const { selectedDydxChainId } = useSelectedNetwork();
+  const selectedDydxChainId = useSelector(getSelectedDydxChainId);
   const { tokensConfigs, usdcLabel, chainTokenLabel } = useTokenConfigs();
 
   const {

src/views/notifications/TransferStatusNotification/TransferStatusSteps.tsx

@@ -1,17 +1,19 @@
 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 { useStringGetter, useURLConfigs } from '@/hooks';
+import { layoutMixins } from '@/styles/layoutMixins';
+import { STRING_KEYS } from '@/constants/localization';
+import { TransferNotificationTypes } from '@/constants/notifications';
 
 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 { TransferNotificationTypes } from '@/constants/notifications';
+import { getSelectedDydxChainId } from '@/state/appSelectors';
 
 type ElementProps = {
   status?: StatusResponse;
@@ -31,7 +33,7 @@ enum TransferStatusStep {
 
 export const TransferStatusSteps = ({ className, status, type }: ElementProps & StyleProps) => {
   const stringGetter = useStringGetter();
-  const { selectedDydxChainId } = useSelectedNetwork();
+  const selectedDydxChainId = useSelector(getSelectedDydxChainId);
   const { mintscan: mintscanTxUrl } = useURLConfigs();
 
   const { currentStep, steps } = useMemo(() => {