diff --git a/src/hooks/useDydxClient.tsx b/src/hooks/useDydxClient.tsx index a42f564..494f315 100644 --- a/src/hooks/useDydxClient.tsx +++ b/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; const DydxContext = createContext({} 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(); @@ -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, diff --git a/src/hooks/useGovernanceVariables.ts b/src/hooks/useGovernanceVariables.ts index 40012fe..4fc5bed 100644 --- a/src/hooks/useGovernanceVariables.ts +++ b/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; }; diff --git a/src/hooks/useNotificationTypes.tsx b/src/hooks/useNotificationTypes.tsx index 06bd9f1..6a2c16a 100644 --- a/src/hooks/useNotificationTypes.tsx +++ b/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) { diff --git a/src/hooks/useSelectedNetwork.ts b/src/hooks/useSelectedNetwork.ts index d9077d5..12543af 100644 --- a/src/hooks/useSelectedNetwork.ts +++ b/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, }; }; diff --git a/src/hooks/useSubaccount.tsx b/src/hooks/useSubaccount.tsx index 0716c1d..e5900bc 100644 --- a/src/hooks/useSubaccount.tsx +++ b/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; diff --git a/src/hooks/useTokenConfigs.ts b/src/hooks/useTokenConfigs.ts index 50aee49..73cc08f 100644 --- a/src/hooks/useTokenConfigs.ts +++ b/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, }; }; diff --git a/src/hooks/useURLConfigs.ts b/src/hooks/useURLConfigs.ts index d4d6376..8820973 100644 --- a/src/hooks/useURLConfigs.ts +++ b/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 { diff --git a/src/views/forms/AccountManagementForms/DepositForm.tsx b/src/views/forms/AccountManagementForms/DepositForm.tsx index 9b3b483..a0d80e2 100644 --- a/src/views/forms/AccountManagementForms/DepositForm.tsx +++ b/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(null); const [isLoading, setIsLoading] = useState(false); const [requireUserActionInWallet, setRequireUserActionInWallet] = useState(false); - const { selectedDydxChainId } = useSelectedNetwork(); + const selectedDydxChainId = useSelector(getSelectedDydxChainId); const { evmAddress, signerWagmi, publicClientWagmi, nobleAddress } = useAccounts(); diff --git a/src/views/forms/AccountManagementForms/WithdrawForm.tsx b/src/views/forms/AccountManagementForms/WithdrawForm.tsx index f4474c4..e2defbe 100644 --- a/src/views/forms/AccountManagementForms/WithdrawForm.tsx +++ b/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(); const [isLoading, setIsLoading] = useState(false); - const { selectedDydxChainId } = useSelectedNetwork(); + const selectedDydxChainId = useSelector(getSelectedDydxChainId); const { sendSquidWithdraw } = useSubaccount(); const { freeCollateral } = useSelector(getSubaccount, shallowEqual) || {}; diff --git a/src/views/forms/TransferForm.tsx b/src/views/forms/TransferForm.tsx index 82297e3..fcd83af 100644 --- a/src/views/forms/TransferForm.tsx +++ b/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 { diff --git a/src/views/notifications/TransferStatusNotification/TransferStatusSteps.tsx b/src/views/notifications/TransferStatusNotification/TransferStatusSteps.tsx index 0c81ee6..8d66221 100644 --- a/src/views/notifications/TransferStatusNotification/TransferStatusSteps.tsx +++ b/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(() => {