diff --git a/app/components/Nav/Main/index.js b/app/components/Nav/Main/index.js index 5ee817d1970..df30b005659 100644 --- a/app/components/Nav/Main/index.js +++ b/app/components/Nav/Main/index.js @@ -59,6 +59,7 @@ import { useMinimumVersions } from '../../hooks/MinimumVersions'; import navigateTermsOfUse from '../../../util/termsOfUse/termsOfUse'; import { selectChainId, + selectNetworkConfigurations, selectProviderConfig, selectProviderType, } from '../../../selectors/networkController'; @@ -80,6 +81,7 @@ import { startIncomingTransactionPolling, stopIncomingTransactionPolling, } from '../../../util/transaction-controller'; +import isNetworkUiRedesignEnabled from '../../../util/networks/isNetworkUiRedesignEnabled'; const Stack = createStackNavigator(); @@ -232,8 +234,10 @@ const Main = (props) => { * Current network */ const providerConfig = useSelector(selectProviderConfig); + const networkConfigurations = useSelector(selectNetworkConfigurations); const networkName = useSelector(selectNetworkName); const previousProviderConfig = useRef(undefined); + const previousNetworkConfigurations = useRef(undefined); const { toastRef } = useContext(ToastContext); const networkImage = useSelector(selectNetworkImageSource); @@ -259,6 +263,37 @@ const Main = (props) => { previousProviderConfig.current = providerConfig; }, [providerConfig, networkName, networkImage, toastRef]); + // Show add network confirmation. + useEffect(() => { + if ( + previousNetworkConfigurations.current && + Object.values(networkConfigurations).length !== + Object.values(previousNetworkConfigurations.current).length && + isNetworkUiRedesignEnabled() + ) { + // Find the newly added network + const newNetwork = Object.values(networkConfigurations).find( + (network) => + !Object.values(previousNetworkConfigurations.current).includes( + network, + ), + ); + + toastRef?.current?.showToast({ + variant: ToastVariants.Plain, + labelOptions: [ + { + label: `${newNetwork?.name ?? strings('asset_details.network')} `, + isBold: true, + }, + { label: strings('toast.network_added') }, + ], + networkImageSource: networkImage, + }); + } + previousNetworkConfigurations.current = networkConfigurations; + }, [networkConfigurations, networkName, networkImage, toastRef]); + useEffect(() => { if (locale.current !== I18n.locale) { locale.current = I18n.locale; diff --git a/app/components/Views/NetworkSelector/NetworkSelector.styles.ts b/app/components/Views/NetworkSelector/NetworkSelector.styles.ts index 583517830a6..f04457d2b89 100644 --- a/app/components/Views/NetworkSelector/NetworkSelector.styles.ts +++ b/app/components/Views/NetworkSelector/NetworkSelector.styles.ts @@ -24,7 +24,7 @@ const createStyles = (colors: Colors) => }, rpcMenu: { display: 'flex', - flexDirection: 'row', + flexDirection: 'column', justifyContent: 'center', }, cellBorder: { borderWidth: 0, paddingVertical: 4 },