diff --git a/app/components/Nav/Main/MainNavigator.js b/app/components/Nav/Main/MainNavigator.js index f8a2d007ecad..19db88a1f905 100644 --- a/app/components/Nav/Main/MainNavigator.js +++ b/app/components/Nav/Main/MainNavigator.js @@ -304,8 +304,8 @@ const HomeTabs = () => { const accountsLength = useSelector(selectAccountsLength); const chainId = useSelector((state) => { - const provider = selectProviderConfig(state); - return NetworksChainId[provider.type]; + const providerConfig = selectProviderConfig(state); + return NetworksChainId[providerConfig.type]; }); const amountOfBrowserOpenTabs = useSelector( diff --git a/app/components/Nav/Main/index.js b/app/components/Nav/Main/index.js index 203d3814ef72..00f31fdd64d7 100644 --- a/app/components/Nav/Main/index.js +++ b/app/components/Nav/Main/index.js @@ -55,7 +55,7 @@ import usePrevious from '../../hooks/usePrevious'; import { colors as importedColors } from '../../../styles/common'; import { getNetworkImageSource, - getNetworkNameFromProvider, + getNetworkNameFromProviderConfig, } from '../../../util/networks'; import { ToastContext, @@ -222,23 +222,23 @@ const Main = (props) => { /** * Current network */ - const networkProvider = useSelector(selectProviderConfig); - const prevNetworkProvider = useRef(undefined); + const providerConfig = useSelector(selectProviderConfig); + const previousProviderConfig = useRef(undefined); const { toastRef } = useContext(ToastContext); // Show network switch confirmation. useEffect(() => { if ( - prevNetworkProvider.current && - (networkProvider.chainId !== prevNetworkProvider.current.chainId || - networkProvider.type !== prevNetworkProvider.current.type) + previousProviderConfig.current && + (providerConfig.chainId !== previousProviderConfig.current.chainId || + providerConfig.type !== previousProviderConfig.current.type) ) { - const { type, chainId } = networkProvider; + const { type, chainId } = providerConfig; const networkImage = getNetworkImageSource({ networkType: type, chainId, }); - const networkName = getNetworkNameFromProvider(networkProvider); + const networkName = getNetworkNameFromProviderConfig(providerConfig); toastRef?.current?.showToast({ variant: ToastVariants.Network, labelOptions: [ @@ -252,8 +252,8 @@ const Main = (props) => { networkImageSource: networkImage, }); } - prevNetworkProvider.current = networkProvider; - }, [networkProvider, toastRef]); + previousProviderConfig.current = providerConfig; + }, [providerConfig, toastRef]); useEffect(() => { if (locale.current !== I18n.locale) { diff --git a/app/components/UI/AccountRightButton/index.tsx b/app/components/UI/AccountRightButton/index.tsx index aafdc63c6997..99a0963b2bfc 100644 --- a/app/components/UI/AccountRightButton/index.tsx +++ b/app/components/UI/AccountRightButton/index.tsx @@ -26,14 +26,13 @@ import Avatar, { } from '../../../component-library/components/Avatars/Avatar'; import { getNetworkImageSource, - getNetworkNameFromProvider, + getNetworkNameFromProviderConfig, } from '../../../util/networks'; import Badge, { BadgeVariant, } from '../../../component-library/components/Badges/Badge'; import BadgeWrapper from '../../../component-library/components/Badges/BadgeWrapper'; import { selectProviderConfig } from '../../../selectors/networkController'; -import { ProviderConfig } from '@metamask/network-controller'; import Routes from '../../../constants/navigation/Routes'; import { MetaMetricsEvents } from '../../../core/Analytics'; import Analytics from '../../../core/Analytics/Analytics'; @@ -76,7 +75,7 @@ const AccountRightButton = ({ /** * Current network */ - const networkProvider: ProviderConfig = useSelector(selectProviderConfig); + const providerConfig = useSelector(selectProviderConfig); const handleKeyboardVisibility = useCallback( (visibility: boolean) => () => { @@ -125,7 +124,7 @@ const AccountRightButton = ({ Analytics.trackEventWithParameters( MetaMetricsEvents.NETWORK_SELECTOR_PRESSED, { - chain_id: networkProvider.chainId, + chain_id: providerConfig.chainId, }, ); } else { @@ -137,21 +136,21 @@ const AccountRightButton = ({ isNetworkVisible, onPress, navigate, - networkProvider.chainId, + providerConfig.chainId, ]); const networkName = useMemo( - () => getNetworkNameFromProvider(networkProvider), - [networkProvider], + () => getNetworkNameFromProviderConfig(providerConfig), + [providerConfig], ); const networkImageSource = useMemo( () => getNetworkImageSource({ - networkType: networkProvider.type, - chainId: networkProvider.chainId, + networkType: providerConfig.type, + chainId: providerConfig.chainId, }), - [networkProvider], + [providerConfig], ); const renderAvatarAccount = () => ( diff --git a/app/components/UI/ApproveTransactionHeader/ApproveTransactionHeader.tsx b/app/components/UI/ApproveTransactionHeader/ApproveTransactionHeader.tsx index b429b2db5768..f773938f4a1e 100644 --- a/app/components/UI/ApproveTransactionHeader/ApproveTransactionHeader.tsx +++ b/app/components/UI/ApproveTransactionHeader/ApproveTransactionHeader.tsx @@ -20,7 +20,7 @@ import { } from '../../../util/browser'; import { getNetworkImageSource, - getNetworkNameFromProvider, + getNetworkNameFromProviderConfig, } from '../../../util/networks'; import { WALLET_CONNECT_ORIGIN } from '../../../util/walletconnect'; import useAddressBalance from '../../hooks/useAddressBalance/useAddressBalance'; @@ -53,8 +53,8 @@ const ApproveTransactionHeader = ({ const identities = useSelector(selectIdentities); const activeAddress = toChecksumAddress(from); - const networkProvider = useSelector(selectProviderConfig); - const networkName = getNetworkNameFromProvider(networkProvider); + const providerConfig = useSelector(selectProviderConfig); + const networkName = getNetworkNameFromProviderConfig(providerConfig); const useBlockieIcon = useSelector( (state: any) => state.settings.useBlockieIcon, @@ -80,8 +80,8 @@ const ApproveTransactionHeader = ({ }, [accounts, identities, activeAddress, origin]); const networkImage = getNetworkImageSource({ - networkType: networkProvider.type, - chainId: networkProvider.chainId, + networkType: providerConfig.type, + chainId: providerConfig.chainId, }); const domainTitle = useMemo(() => { diff --git a/app/components/UI/NetworkInfo/index.tsx b/app/components/UI/NetworkInfo/index.tsx index 3ec00e262783..d85ce987fee9 100644 --- a/app/components/UI/NetworkInfo/index.tsx +++ b/app/components/UI/NetworkInfo/index.tsx @@ -18,12 +18,11 @@ import { selectProviderConfig } from '../../../selectors/networkController'; import { selectUseTokenDetection } from '../../../selectors/preferencesController'; import { getNetworkImageSource, - getNetworkNameFromProvider, + getNetworkNameFromProviderConfig, } from '../../../util/networks'; import Avatar, { AvatarVariants, } from '../../../component-library/components/Avatars/Avatar'; -import { ProviderConfig } from '@metamask/network-controller'; import generateTestId from '../../../../wdio/utils/generateTestId'; const createStyles = (colors: { @@ -117,8 +116,8 @@ interface NetworkInfoProps { const NetworkInfo = (props: NetworkInfoProps) => { const { onClose, ticker, isTokenDetectionEnabled } = props; - const networkProvider: ProviderConfig = useSelector(selectProviderConfig); - const { type, ticker: networkTicker, rpcTarget, chainId } = networkProvider; + const providerConfig = useSelector(selectProviderConfig); + const { type, ticker: networkTicker, rpcTarget, chainId } = providerConfig; const { colors } = useTheme(); const styles = createStyles(colors); const isTokenDetectionSupported = @@ -134,15 +133,15 @@ const NetworkInfo = (props: NetworkInfoProps) => { const networkImageSource = useMemo( () => getNetworkImageSource({ - networkType: networkProvider.type, - chainId: networkProvider.chainId, + networkType: providerConfig.type, + chainId: providerConfig.chainId, }), - [networkProvider], + [providerConfig], ); const networkName = useMemo( - () => getNetworkNameFromProvider(networkProvider), - [networkProvider], + () => getNetworkNameFromProviderConfig(providerConfig), + [providerConfig], ); return ( diff --git a/app/components/UI/Tokens/index.tsx b/app/components/UI/Tokens/index.tsx index df96f0d54d60..538e50045f44 100644 --- a/app/components/UI/Tokens/index.tsx +++ b/app/components/UI/Tokens/index.tsx @@ -30,7 +30,7 @@ import { useTheme } from '../../../util/theme'; import NotificationManager from '../../../core/NotificationManager'; import { getDecimalChainId, - getNetworkNameFromProvider, + getNetworkNameFromProviderConfig, getTestNetImageByChainId, isLineaMainnetByChainId, isMainnetByChainId, @@ -104,7 +104,7 @@ const Tokens: React.FC = ({ tokens }) => { const networkName = useSelector((state: EngineState) => { const providerConfig = selectProviderConfig(state); - return getNetworkNameFromProvider(providerConfig); + return getNetworkNameFromProviderConfig(providerConfig); }); const chainId = useSelector(selectChainId); const ticker = useSelector(selectTicker); diff --git a/app/components/Views/AccountPermissions/AccountPermissionsConnected/AccountPermissionsConnected.tsx b/app/components/Views/AccountPermissions/AccountPermissionsConnected/AccountPermissionsConnected.tsx index 6892737239c2..1cdb4b205435 100644 --- a/app/components/Views/AccountPermissions/AccountPermissionsConnected/AccountPermissionsConnected.tsx +++ b/app/components/Views/AccountPermissions/AccountPermissionsConnected/AccountPermissionsConnected.tsx @@ -12,7 +12,7 @@ import { strings } from '../../../../../locales/i18n'; import TagUrl from '../../../../component-library/components/Tags/TagUrl'; import PickerNetwork from '../../../../component-library/components/Pickers/PickerNetwork'; import { - getNetworkNameFromProvider, + getNetworkNameFromProviderConfig, getNetworkImageSource, } from '../../../../util/networks'; import AccountSelectorList from '../../../../components/UI/AccountSelectorList'; @@ -56,7 +56,7 @@ const AccountPermissionsConnected = ({ const providerConfig: ProviderConfig = useSelector(selectProviderConfig); const networkName = useMemo( - () => getNetworkNameFromProvider(providerConfig), + () => getNetworkNameFromProviderConfig(providerConfig), [providerConfig], ); const networkImageSource = useMemo(() => { diff --git a/app/components/Views/Wallet/index.tsx b/app/components/Views/Wallet/index.tsx index 94d8c8f5aa16..c4baff40741d 100644 --- a/app/components/Views/Wallet/index.tsx +++ b/app/components/Views/Wallet/index.tsx @@ -28,7 +28,7 @@ import Logger from '../../../util/Logger'; import Routes from '../../../constants/navigation/Routes'; import { getNetworkImageSource, - getNetworkNameFromProvider, + getNetworkNameFromProviderConfig, } from '../../../util/networks'; import generateTestId from '../../../../wdio/utils/generateTestId'; import { @@ -37,7 +37,6 @@ import { } from '../../../selectors/networkController'; import { selectTokens } from '../../../selectors/tokensController'; import { useNavigation } from '@react-navigation/native'; -import { ProviderConfig } from '@metamask/network-controller'; import { WalletAccount } from '../../../components/UI/WalletAccount'; import { selectConversionRate, @@ -114,22 +113,22 @@ const Wallet = ({ navigation }: any) => { */ const wizardStep = useSelector((state: any) => state.wizard.step); /** - * Current network + * Provider configuration for the current selected network */ - const networkProvider: ProviderConfig = useSelector(selectProviderConfig); + const providerConfig = useSelector(selectProviderConfig); const networkName = useMemo( - () => getNetworkNameFromProvider(networkProvider), - [networkProvider], + () => getNetworkNameFromProviderConfig(providerConfig), + [providerConfig], ); const networkImageSource = useMemo( () => getNetworkImageSource({ - networkType: networkProvider.type, - chainId: networkProvider.chainId, + networkType: providerConfig.type, + chainId: providerConfig.chainId, }), - [networkProvider], + [providerConfig], ); /** @@ -142,10 +141,10 @@ const Wallet = ({ navigation }: any) => { Analytics.trackEventWithParameters( MetaMetricsEvents.NETWORK_SELECTOR_PRESSED, { - chain_id: networkProvider.chainId, + chain_id: providerConfig.chainId, }, ); - }, [navigate, networkProvider.chainId]); + }, [navigate, providerConfig.chainId]); const { colors: themeColors } = useTheme(); useEffect(() => { diff --git a/app/util/networks/index.js b/app/util/networks/index.js index 10f88b249124..c48728f1a39c 100644 --- a/app/util/networks/index.js +++ b/app/util/networks/index.js @@ -350,15 +350,15 @@ export function blockTagParamIndex(payload) { /** * Gets the current network name given the network provider. * - * @param {Object} provider - Network provider state from the NetworkController. + * @param {Object} providerConfig - The provider configuration for the current selected network. * @returns {string} Name of the network. */ -export const getNetworkNameFromProvider = (provider) => { +export const getNetworkNameFromProviderConfig = (providerConfig) => { let name = strings('network_information.unknown_network'); - if (provider.nickname) { - name = provider.nickname; + if (providerConfig.nickname) { + name = providerConfig.nickname; } else { - const networkType = provider.type; + const networkType = providerConfig.type; name = NetworkList?.[networkType]?.name || NetworkList.rpc.name; } return name;