[Issue 1907] [fix] Extension - Handle case 0 networks connected #1

packages/extension-koni-ui/src/Popup/Confirmations/variants/ConnectWalletConnectConfirmation.tsx

@@ -75,6 +75,14 @@ function Component ({ className, request }: Props) {
     return Object.values(namespaceAccounts).every(({ appliedAccounts }) => appliedAccounts.length);
   }, [namespaceAccounts]);
 
+  const isExistNetworkConnected = useMemo(() => {
+    return Object.values(namespaceAccounts).every((value) => {
+      const { networks } = value;
+      const connectedNetworks = networks.filter((network) => network.supported);
+
+      return connectedNetworks.length > 0;
+    });
+  }, [namespaceAccounts]);
   const [loading, setLoading] = useState(false);
 
   const _onSelectAccount = useCallback((namespace: string): ((address: string, applyImmediately?: boolean) => VoidFunction) => {
@@ -132,17 +140,10 @@ function Component ({ className, request }: Props) {
   const isSupportCase = !isUnSupportCase && !isExpired && !noNetwork;
 
   useEffect(() => {
-    if (isSupportCase) {
-      Object.values(namespaceAccounts).forEach((value) => {
-        const { networks } = value;
-        const connectedNetworks = networks.filter((network) => network.supported);
-
-        if (connectedNetworks.length === 0) {
-          activeModal(ADD_NETWORK_WALLET_CONNECT_MODAL);
-        }
-      });
+    if (isSupportCase && !isExistNetworkConnected) {
+      activeModal(ADD_NETWORK_WALLET_CONNECT_MODAL);
     }
-  }, [activeModal, isSupportCase, namespaceAccounts]);
+  }, [activeModal, isExistNetworkConnected, isSupportCase]);
 
   return (
     <>

packages/extension-koni-ui/src/Popup/Settings/Chains/ChainImport.tsx

@@ -17,7 +17,7 @@ import { ActivityIndicator, Col, Form, Icon, Input, Row } from '@subwallet/react
 import { FloppyDiskBack, Globe, ShareNetwork, WifiHigh, WifiSlash } from 'phosphor-react';
 import { RuleObject } from 'rc-field-form/lib/interface';
 import React, { useCallback, useState } from 'react';
-import { useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate } from 'react-router-dom';
 import styled, { useTheme } from 'styled-components';
 
 type Props = ThemeProps
@@ -41,13 +41,19 @@ interface ValidationInfo {
   message?: string
 }
 
+interface LocationState {
+  useGoHome?: boolean
+}
+
 function Component ({ className = '' }: Props): React.ReactElement<Props> {
   const { t } = useTranslation();
   const navigate = useNavigate();
   const { token } = useTheme() as Theme;
   const showNotification = useNotification();
   const [form] = Form.useForm<ChainImportForm>();
+  const locationState = useLocation().state as LocationState;
 
+  const [location] = useState<LocationState>(locationState);
   const [loading, setLoading] = useState(false);
   const [isPureEvmChain, setIsPureEvmChain] = useState(false);
   const [isShowConnectionStatus, setIsShowConnectionStatus] = useState(false);
@@ -117,7 +123,7 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
           showNotification({
             message: t('Imported chain successfully')
           });
-          navigate(DEFAULT_ROUTER_PATH);
+          location?.useGoHome ? navigate(DEFAULT_ROUTER_PATH) : navigate(-1);
         } else {
           showNotification({
             message: t('An error occurred, please try again')
@@ -130,7 +136,7 @@ function Component ({ className = '' }: Props): React.ReactElement<Props> {
           message: t('An error occurred, please try again')
         });
       });
-  }, [existentialDeposit, form, genesisHash, isPureEvmChain, navigate, showNotification, t]);
+  }, [existentialDeposit, form, genesisHash, isPureEvmChain, location, navigate, showNotification, t]);
 
   const blockExplorerValidator = useCallback((rule: RuleObject, value: string): Promise<void> => {
     return new Promise((resolve, reject) => {

packages/extension-koni-ui/src/components/Modal/AddNetworkWCModal.tsx

@@ -32,7 +32,7 @@ function Component ({ cancelRequest, className }: Props): React.ReactElement<Pro
 
   const addNetwork = useCallback(() => {
     inactiveModal(AddNetworkWCModalId);
-    navigate(AddNetworkUrl, { state: '/wallet-connect/connect' });
+    navigate(AddNetworkUrl, { state: { useGoHome: true } });
   }, [inactiveModal, navigate]);
 
   const footerModal = useMemo(() => {