feat: show toast

MetaMask · Oct 8, 2024 · 2cc2003 · 2cc2003
1 parent cee6f4a
commit 2cc2003
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 1 deletion.
diff --git 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
@@ -24,7 +24,7 @@ const createStyles = (colors: Colors) =>
     },
     rpcMenu: {
       display: 'flex',
-      flexDirection: 'row',
+      flexDirection: 'column',
       justifyContent: 'center',
     },
     cellBorder: { borderWidth: 0, paddingVertical: 4 },