diff --git a/app/components/UI/AddCustomCollectible/index.tsx b/app/components/UI/AddCustomCollectible/index.tsx index be364abd6c8..3743b2888e8 100644 --- a/app/components/UI/AddCustomCollectible/index.tsx +++ b/app/components/UI/AddCustomCollectible/index.tsx @@ -1,12 +1,6 @@ import React, { useState, useEffect } from 'react'; import { useSelector } from 'react-redux'; -import { - Alert, - Text, - TextInput, - View, - StyleSheet, -} from 'react-native'; +import { Alert, Text, TextInput, View, StyleSheet } from 'react-native'; import { fontStyles } from '../../../styles/common'; import Engine from '../../../core/Engine'; import { strings } from '../../../../locales/i18n'; @@ -18,10 +12,10 @@ import { MetaMetricsEvents } from '../../../core/Analytics'; import { useTheme } from '../../../util/theme'; import { NFTImportScreenSelectorsIDs } from '../../../../e2e/selectors/wallet/ImportNFTView.selectors'; -import { selectChainId } from '../../../selectors/networkController'; import { selectSelectedInternalAccountChecksummedAddress } from '../../../selectors/accountsController'; import { getDecimalChainId } from '../../../util/networks'; import { useMetrics } from '../../../components/hooks/useMetrics'; +import { useChainId } from '../../../selectors/hooks'; // TODO: Replace "any" with type // eslint-disable-next-line @typescript-eslint/no-explicit-any @@ -92,7 +86,7 @@ const AddCustomCollectible = ({ const selectedAddress = useSelector( selectSelectedInternalAccountChecksummedAddress, ); - const chainId = useSelector(selectChainId); + const chainId = useChainId(); useEffect(() => { setMounted(true); @@ -223,10 +217,7 @@ const AddCustomCollectible = ({ }; return ( - + { const styles = createStyles(colors); const isTokenDetectionEnabled = useSelector(selectUseTokenDetection); - const chainId = useSelector(selectChainId); + const chainId = useChainId(); const ticker = useSelector(selectTicker); const setFocusState = useCallback( diff --git a/app/components/UI/SimulationDetails/AssetPill/AssetPill.tsx b/app/components/UI/SimulationDetails/AssetPill/AssetPill.tsx index 96edaf2b2a3..1b60f771105 100644 --- a/app/components/UI/SimulationDetails/AssetPill/AssetPill.tsx +++ b/app/components/UI/SimulationDetails/AssetPill/AssetPill.tsx @@ -9,16 +9,14 @@ import Text, { } from '../../../../component-library/components/Texts/Text'; import AvatarNetwork from '../../../../component-library/components/Avatars/Avatar/variants/AvatarNetwork'; import { AvatarSize } from '../../../../component-library/components/Avatars/Avatar/Avatar.types'; -import { - selectChainId, - selectTicker, -} from '../../../../selectors/networkController'; +import { selectTicker } from '../../../../selectors/networkController'; import { NetworkList } from '../../../../util/networks'; import { useStyles } from '../../../hooks/useStyles'; import Name from '../../Name/Name'; import { NameType } from '../../Name/Name.types'; import { AssetIdentifier, AssetType } from '../types'; import styleSheet from './AssetPill.styles'; +import { useChainId } from '../../../../selectors/hooks'; interface AssetPillProperties extends ViewProps { asset: AssetIdentifier; @@ -38,7 +36,7 @@ const getNetworkImage = (chainId: Hex) => { const NativeAssetPill: React.FC = () => { const { styles } = useStyles(styleSheet, {}); const ticker = useSelector(selectTicker); - const chainId = useSelector(selectChainId); + const chainId = useChainId(); const imageSource = getNetworkImage(chainId); return ( diff --git a/app/components/Views/AddAsset/AddAsset.tsx b/app/components/Views/AddAsset/AddAsset.tsx index bf6643e8eed..54474930f96 100644 --- a/app/components/Views/AddAsset/AddAsset.tsx +++ b/app/components/Views/AddAsset/AddAsset.tsx @@ -14,10 +14,7 @@ import { getNetworkNavbarOptions, } from '../../UI/Navbar'; import { isTokenDetectionSupportedForNetwork } from '@metamask/assets-controllers'; -import { - selectChainId, - selectProviderConfig, -} from '../../../selectors/networkController'; +import { selectProviderConfig } from '../../../selectors/networkController'; import { selectNetworkName } from '../../../selectors/networkInfos'; import { selectDisplayNftMedia } from '../../../selectors/preferencesController'; import Banner from '../../../component-library/components/Banners/Banner/Banner'; @@ -36,6 +33,7 @@ import { AddAssetParams } from './AddAsset.types'; import Routes from '../../../constants/navigation/Routes'; import { NFT_TITLE, TOKEN, TOKEN_TITLE } from './AddAsset.constants'; import { AddAssetViewSelectorsIDs } from '../../../../e2e/selectors/AddAssetView.selectors'; +import { useChainId } from '../../../selectors/hooks'; const AddAsset = () => { const navigation = useNavigation(); @@ -47,7 +45,7 @@ const AddAsset = () => { } = useStyles(styleSheet, {}); const providerConfig = useSelector(selectProviderConfig); - const chainId = useSelector(selectChainId); + const chainId = useChainId(); const displayNftMedia = useSelector(selectDisplayNftMedia); const isTokenDetectionSupported = diff --git a/app/components/Views/AssetDetails/index.tsx b/app/components/Views/AssetDetails/index.tsx index 56d48e62bd2..dcb440140d5 100644 --- a/app/components/Views/AssetDetails/index.tsx +++ b/app/components/Views/AssetDetails/index.tsx @@ -31,10 +31,7 @@ import WarningMessage from '../confirmations/SendFlow/WarningMessage'; import { useTheme } from '../../../util/theme'; import { MetaMetricsEvents } from '../../../core/Analytics'; import Routes from '../../../constants/navigation/Routes'; -import { - selectChainId, - selectProviderConfig, -} from '../../../selectors/networkController'; +import { selectProviderConfig } from '../../../selectors/networkController'; import { selectConversionRate, selectCurrentCurrency, @@ -47,6 +44,7 @@ import { RootState } from 'app/reducers'; import { Colors } from '../../../util/theme/models'; import { Hex } from '@metamask/utils'; import { RpcEndpointType } from '@metamask/network-controller'; +import { useChainId } from '../../../selectors/hooks'; const createStyles = (colors: Colors) => StyleSheet.create({ @@ -116,7 +114,7 @@ const AssetDetails = (props: Props) => { const tokens = useSelector(selectTokens); const conversionRate = useSelector(selectConversionRate); const currentCurrency = useSelector(selectCurrentCurrency); - const chainId = useSelector(selectChainId); + const chainId = useChainId(); const primaryCurrency = useSelector( (state: RootState) => state.settings.primaryCurrency, ); diff --git a/app/components/Views/AssetOptions/AssetOptions.tsx b/app/components/Views/AssetOptions/AssetOptions.tsx index c6c12d101a1..1e4fda39c4c 100644 --- a/app/components/Views/AssetOptions/AssetOptions.tsx +++ b/app/components/Views/AssetOptions/AssetOptions.tsx @@ -14,7 +14,6 @@ import Icon, { } from '../../../component-library/components/Icons/Icon'; import useBlockExplorer from '../../../components/UI/Swaps/utils/useBlockExplorer'; import { - selectChainId, selectNetworkConfigurations, selectProviderConfig, } from '../../../selectors/networkController'; @@ -28,6 +27,8 @@ import { getDecimalChainId } from '../../../util/networks'; import { isPortfolioUrl } from '../../../util/url'; import { BrowserTab } from '../../../components/UI/Tokens/types'; import { RootState } from '../../../reducers'; +import { useChainId } from '../../../selectors/hooks'; + interface Option { label: string; onPress: () => void; @@ -52,7 +53,7 @@ const AssetOptions = (props: Props) => { const providerConfig = useSelector(selectProviderConfig); const networkConfigurations = useSelector(selectNetworkConfigurations); const tokenList = useSelector(selectTokenList); - const chainId = useSelector(selectChainId); + const chainId = useChainId(); // eslint-disable-next-line @typescript-eslint/no-explicit-any const browserTabs = useSelector((state: any) => state.browser.tabs); const isDataCollectionForMarketingEnabled = useSelector( diff --git a/app/components/Views/DetectedTokens/index.tsx b/app/components/Views/DetectedTokens/index.tsx index 4df619a584f..d5c939ff20f 100644 --- a/app/components/Views/DetectedTokens/index.tsx +++ b/app/components/Views/DetectedTokens/index.tsx @@ -20,15 +20,13 @@ import { getDecimalChainId } from '../../../util/networks'; import { createNavigationDetails } from '../../../util/navigation/navUtils'; import Routes from '../../../constants/navigation/Routes'; import { selectDetectedTokens } from '../../../selectors/tokensController'; -import { - selectChainId, - selectNetworkClientId, -} from '../../../selectors/networkController'; +import { selectNetworkClientId } from '../../../selectors/networkController'; import BottomSheet, { BottomSheetRef, } from '../../../component-library/components/BottomSheets/BottomSheet'; import { useMetrics } from '../../../components/hooks/useMetrics'; import { DetectedTokensSelectorIDs } from '../../../../e2e/selectors/wallet/DetectedTokensView.selectors'; +import { useChainId } from '../../../selectors/hooks'; // TODO: Replace "any" with type // eslint-disable-next-line @typescript-eslint/no-explicit-any @@ -79,7 +77,7 @@ const DetectedTokens = () => { const { trackEvent } = useMetrics(); const sheetRef = useRef(null); const detectedTokens = useSelector(selectDetectedTokens); - const chainId = useSelector(selectChainId); + const chainId = useChainId(); const networkClientId = useSelector(selectNetworkClientId); const [ignoredTokens, setIgnoredTokens] = useState( {}, diff --git a/app/components/Views/NftOptions/NftOptions.tsx b/app/components/Views/NftOptions/NftOptions.tsx index 15852b81f10..633cedd35d4 100644 --- a/app/components/Views/NftOptions/NftOptions.tsx +++ b/app/components/Views/NftOptions/NftOptions.tsx @@ -8,7 +8,6 @@ import { strings } from '../../../../locales/i18n'; import Icon, { IconName, } from '../../../component-library/components/Icons/Icon'; -import { selectChainId } from '../../../selectors/networkController'; import ReusableModal, { ReusableModalRef } from '../../UI/ReusableModal'; import styleSheet from './NftOptions.styles'; import Text, { @@ -26,6 +25,7 @@ import { MetaMetricsEvents, } from '../../../components/hooks/useMetrics'; import { getDecimalChainId } from '../../../util/networks'; +import { useChainId } from '../../../selectors/hooks'; interface Props { route: { @@ -41,7 +41,7 @@ const NftOptions = (props: Props) => { const safeAreaInsets = useSafeAreaInsets(); const navigation = useNavigation(); const modalRef = useRef(null); - const chainId = useSelector(selectChainId); + const chainId = useChainId(); const { trackEvent } = useMetrics(); const selectedAddress = useSelector( selectSelectedInternalAccountChecksummedAddress, diff --git a/app/components/Views/confirmations/components/WatchAssetRequest/index.js b/app/components/Views/confirmations/components/WatchAssetRequest/index.js index a48374b1511..f97c08dc5e8 100644 --- a/app/components/Views/confirmations/components/WatchAssetRequest/index.js +++ b/app/components/Views/confirmations/components/WatchAssetRequest/index.js @@ -14,13 +14,13 @@ import { MetaMetricsEvents } from '../../../../../core/Analytics'; import useTokenBalance from '../../../../hooks/useTokenBalance'; import { useTheme } from '../../../../../util/theme'; import NotificationManager from '../../../../../core/NotificationManager'; -import { selectChainId } from '../../../../../selectors/networkController'; import ApproveTransactionHeader from '../ApproveTransactionHeader'; import { getActiveTabUrl } from '../../../../../util/transactions'; import { isEqual } from 'lodash'; import { AssetWatcherSelectorsIDs } from '../../../../../../e2e/selectors/Modals/AssetWatcher.selectors'; import { getDecimalChainId } from '../../../../../util/networks'; import { useMetrics } from '../../../../../components/hooks/useMetrics'; +import { useChainId } from '../../../../../selectors/hooks'; const createStyles = (colors) => StyleSheet.create({ @@ -107,7 +107,7 @@ const WatchAssetRequest = ({ const { trackEvent } = useMetrics(); const styles = createStyles(colors); const [balance, , error] = useTokenBalance(asset.address, interactingAddress); - const chainId = useSelector(selectChainId); + const chainId = useChainId(); const balanceWithSymbol = error ? strings('transaction.failed') : `${renderFromTokenMinimalUnit(balance, asset.decimals)} ${asset.symbol}`;