[Issue-199]: Add the lost internet connection screen

package.json

@@ -140,7 +140,7 @@
     "@react-native/eslint-config": "^0.72.2",
     "@react-native/metro-config": "^0.72.11",
     "@subwallet/chain-list": "^0.2.16-beta.4",
-    "@subwallet/extension-base": "^1.1.15-0",
+    "@subwallet/extension-base": "^1.1.16-0",
     "@tsconfig/react-native": "^3.0.0",
     "@types/jest": "^29.2.3",
     "@types/react": "^18.0.25",
@@ -187,7 +187,7 @@
     "@polkadot/util": "^12.2.1",
     "@polkadot/api": "^10.7.2",
     "@polkadot/util-crypto": "^12.2.1",
-    "@subwallet/extension-base": "^1.1.15-0",
+    "@subwallet/extension-base": "^1.1.16-0",
     "@subwallet/chain-list": "0.2.16-beta.4",
     "react-native-svg": "^13.6.0"
   },

src/AppNavigator.tsx

@@ -515,7 +515,7 @@ const AppNavigator = ({ isAppReady }: Props) => {
               </Stack.Group>
               <Stack.Group
                 screenOptions={{
-                  presentation: 'transparentModal',
+                  presentation: 'containedTransparentModal',
                   contentStyle: { backgroundColor: theme.swThemes.colorBgMask },
                   headerShown: false,
                 }}>

src/hooks/balance/useGetBalance.ts

@@ -1,11 +1,12 @@
 import { _ChainInfo } from '@subwallet/chain-list/types';
 import { AmountData } from '@subwallet/extension-base/background/KoniTypes';
 import { _getChainNativeTokenSlug } from '@subwallet/extension-base/services/chain-service/utils';
-import { useCallback, useEffect, useMemo, useState } from 'react';
+import { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import { useSelector } from 'react-redux';
 import { RootState } from 'stores/index';
 import { getFreeBalance, updateAssetSetting } from 'messaging/index';
 import i18n from 'utils/i18n/i18n';
+import { WebRunnerContext } from 'providers/contexts';
 
 const DEFAULT_BALANCE = { value: '0', symbol: '', decimals: 18 };
 
@@ -24,6 +25,7 @@ const useGetBalance = (chain = '', address = '', tokenSlug = '') => {
   const isChainActive = chainStateMap[chain]?.active;
   const nativeTokenActive = nativeTokenSlug && assetSettingMap[nativeTokenSlug]?.visible;
   const isTokenActive = assetSettingMap[tokenSlug]?.visible;
+  const isNetConnected = useContext(WebRunnerContext).isNetConnected;
 
   const refreshBalance = useCallback(() => {
     setIsRefresh({});
@@ -33,6 +35,10 @@ const useGetBalance = (chain = '', address = '', tokenSlug = '') => {
     let cancel = false;
 
     setIsLoading(true);
+
+    if (!isNetConnected) {
+      return;
+    }
     setTokenBalance(DEFAULT_BALANCE);
 
     if (address && chain) {
@@ -126,6 +132,7 @@ const useGetBalance = (chain = '', address = '', tokenSlug = '') => {
     isChainActive,
     isTokenActive,
     nativeTokenActive,
+    isNetConnected,
   ]);
 
   return { refreshBalance, tokenBalance, nativeTokenBalance, nativeTokenSlug, isLoading, error };

src/hooks/transaction/useCancelLoading.ts

@@ -0,0 +1,16 @@
+import { useContext, useEffect, useRef } from 'react';
+import { WebRunnerContext } from 'providers/contexts';
+
+export const useCancelLoading = (setLoading: (value: boolean) => void) => {
+  const isSubmit = useRef<boolean>(false);
+  const isNetConnected = useContext(WebRunnerContext).isNetConnected;
+
+  useEffect(() => {
+    if (isSubmit.current && isNetConnected) {
+      setLoading(false);
+      isSubmit.current = false;
+    }
+  }, [isNetConnected, setLoading]);
+
+  return { isSubmit };
+};

src/screens/Home/index.tsx

@@ -1,7 +1,6 @@
-import React, { useEffect, useRef, useState } from 'react';
+import React, { useContext, useEffect, useRef, useState } from 'react';
 import { BottomTabBarButtonProps, createBottomTabNavigator } from '@react-navigation/bottom-tabs';
 import StakingScreen from './Staking/StakingScreen';
-
 import { Platform, StyleSheet, TouchableOpacity, View } from 'react-native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { Aperture, Database, Globe, Rocket, Wallet } from 'phosphor-react-native';
@@ -29,6 +28,8 @@ import i18n from 'utils/i18n/i18n';
 import { RootStackParamList } from 'routes/index';
 import { handleTriggerDeeplinkAfterLogin } from 'utils/deeplink';
 import { isFirstOpen, setIsFirstOpen } from '../../AppNew';
+import { WebRunnerContext } from 'providers/contexts';
+import { useToast } from 'react-native-toast-notifications';
 
 interface tabbarIconColor {
   color: string;
@@ -183,6 +184,28 @@ export const Home = ({ navigation }: Props) => {
   const { hasMasterPassword, isReady, isLocked } = useSelector((state: RootState) => state.accountState);
   const [isLoading, setLoading] = useState(true);
   const appNavigatorDeepLinkStatus = useRef<AppNavigatorDeepLinkStatus>(AppNavigatorDeepLinkStatus.AVAILABLE);
+  const { isNetConnected } = useContext(WebRunnerContext);
+  const isFirstLaunch = useRef(true);
+  const toast = useToast();
+
+  useEffect(() => {
+    if (!isFirstLaunch.current) {
+      if (isNetConnected) {
+        toast.hideAll();
+        toast.show(i18n.warningTitle.internetConnected, { type: 'success', duration: 5000 });
+      } else {
+        toast.hideAll();
+        toast.show(i18n.warningTitle.noInternetConnection, { type: 'danger', duration: 5000 });
+      }
+    } else {
+      if (!isNetConnected) {
+        toast.hideAll();
+        toast.show(i18n.warningTitle.noInternetConnection, { type: 'danger', duration: 5000 });
+      }
+      isFirstLaunch.current = false;
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [isNetConnected]);
 
   useEffect(() => {
     if (isReady && isLoading) {

src/screens/Transaction/CancelUnstake/index.tsx

@@ -26,6 +26,7 @@ import { CancelUnstakeProps } from 'routes/transaction/transactionAction';
 import i18n from 'utils/i18n/i18n';
 import { ModalRef } from 'types/modalRef';
 import { AccountSelector } from 'components/Modal/common/AccountSelector';
+import { useCancelLoading } from 'hooks/transaction/useCancelLoading';
 
 const filterAccount = (
   chainInfoMap: Record<string, _ChainInfo>,
@@ -87,10 +88,10 @@ export const CancelUnstake = ({
   const { onError, onSuccess } = useHandleSubmitTransaction(onDone);
 
   const onPreCheckReadOnly = usePreCheckReadOnly(undefined, from);
-
+  const { isSubmit } = useCancelLoading(setLoading);
   const onSubmit = useCallback(() => {
     setLoading(true);
-
+    isSubmit.current = true;
     setTimeout(() => {
       submitStakeCancelWithdrawal({
         address: from,
@@ -101,9 +102,10 @@ export const CancelUnstake = ({
         .catch(onError)
         .finally(() => {
           setLoading(false);
+          isSubmit.current = false;
         });
     }, 300);
-  }, [chain, from, nominatorMetadata.unstakings, onError, onSuccess, unstakeIndex]);
+  }, [chain, from, isSubmit, nominatorMetadata.unstakings, onError, onSuccess, unstakeIndex]);
 
   return (
     <TransactionLayout title={title} disableLeftButton={loading} disableMainHeader={loading}>

src/screens/Transaction/ClaimReward/index.tsx

@@ -36,6 +36,7 @@ import { ClaimRewardProps } from 'routes/transaction/transactionAction';
 import i18n from 'utils/i18n/i18n';
 import { ModalRef } from 'types/modalRef';
 import { AccountSelector } from 'components/Modal/common/AccountSelector';
+import { useCancelLoading } from 'hooks/transaction/useCancelLoading';
 
 const filterAccount = (
   chainInfoMap: Record<string, _ChainInfo>,
@@ -126,9 +127,10 @@ const ClaimReward = ({
   const [isDisabled, setIsDisabled] = useState(true);
   const { onError, onSuccess } = useHandleSubmitTransaction(onDone);
   const accountInfo = useGetAccountByAddress(from);
+  const { isSubmit } = useCancelLoading(setLoading);
   const onSubmit = useCallback(() => {
     setLoading(true);
-
+    isSubmit.current = true;
     setTimeout(() => {
       submitStakeClaimReward({
         address: from,
@@ -141,9 +143,10 @@ const ClaimReward = ({
         .catch(onError)
         .finally(() => {
           setLoading(false);
+          isSubmit.current = false;
         });
     }, 300);
-  }, [bondReward, chain, from, onError, onSuccess, reward?.unclaimedReward, stakingType]);
+  }, [bondReward, chain, from, isSubmit, onError, onSuccess, reward?.unclaimedReward, stakingType]);
 
   const onPreCheckReadOnly = usePreCheckReadOnly(undefined, from);
 

src/screens/Transaction/NFT/index.tsx

@@ -35,6 +35,7 @@ import { RootNavigationProps } from 'routes/index';
 import { InputAddress } from 'components/Input/InputAddressV2';
 import useGetChainPrefixBySlug from 'hooks/chain/useGetChainPrefixBySlug';
 import { SendNFTProps } from 'routes/transaction/transactionAction';
+import { useCancelLoading } from 'hooks/transaction/useCancelLoading';
 
 const DEFAULT_ITEM: NftItem = {
   collectionId: 'unknown',
@@ -139,7 +140,7 @@ const SendNFT: React.FC<SendNFTProps> = ({
   const [loading, setLoading] = useState(false);
   const { title, formState, onChangeValue, onChangeChainValue, onDone } = useTransaction('send-nft', NFTFormConfig);
   const isFormValid = Object.values(formState.isValidated).every(val => val);
-
+  const { isSubmit } = useCancelLoading(setLoading);
   const { onError, onSuccess } = useHandleSubmitTransaction(onDone);
 
   const onChangeReceiverAddress = useCallback(
@@ -201,6 +202,7 @@ const SendNFT: React.FC<SendNFTProps> = ({
       }
 
       setLoading(true);
+      isSubmit.current = true;
 
       setTimeout(() => {
         // Handle transfer action
@@ -209,10 +211,11 @@ const SendNFT: React.FC<SendNFTProps> = ({
           .catch(onError)
           .finally(() => {
             setLoading(false);
+            isSubmit.current = false;
           });
       }, 300);
     },
-    [nftChain, nftItem, onError, onSuccess, owner],
+    [isSubmit, nftChain, nftItem, onError, onSuccess, owner],
   );
 
   const handleSend = useCallback(() => {

src/screens/Transaction/SendFundV2/index.tsx

@@ -69,6 +69,7 @@ import createStylesheet from './styles';
 import { useGetBalance } from 'hooks/balance';
 import { FreeBalanceDisplay } from 'screens/Transaction/parts/FreeBalanceDisplay';
 import { ModalRef } from 'types/modalRef';
+import { useCancelLoading } from 'hooks/transaction/useCancelLoading';
 
 interface TransferFormValues extends TransactionFormValues {
   to: string;
@@ -380,6 +381,7 @@ export const SendFund = ({
   const [isBalanceReady, setIsBalanceReady] = useState(true);
   const [forceUpdateValue, setForceUpdateValue] = useState<{ value: string | null } | undefined>(undefined);
   const chainStatus = useMemo(() => chainStateMap[chainValue]?.connectionStatus, [chainValue, chainStateMap]);
+  const { isSubmit } = useCancelLoading(setLoading);
 
   const senderAccountName = useMemo(() => {
     if (!fromValue) {
@@ -616,6 +618,7 @@ export const SendFund = ({
     (values: TransferFormValues) => {
       Keyboard.dismiss();
       setLoading(true);
+      isSubmit.current = true;
       const { chain, destChain, to, value, from, asset } = values;
 
       let sendPromise: Promise<SWTransactionResponse>;
@@ -624,6 +627,7 @@ export const SendFund = ({
 
       if (!account) {
         setLoading(false);
+        isSubmit.current = false;
         hideAll();
         show("Can't find account");
 
@@ -639,6 +643,7 @@ export const SendFund = ({
           if (isEthereum) {
             if (!_isTokenTransferredByEvm(chainAsset)) {
               setLoading(false);
+              isSubmit.current = false;
               hideAll();
               show('Ledger does not support transfer for this token');
 
@@ -659,6 +664,7 @@ export const SendFund = ({
       } else {
         if (isLedger) {
           setLoading(false);
+          isSubmit.current = false;
           hideAll();
           show('This feature is not available for Ledger account');
 
@@ -684,10 +690,11 @@ export const SendFund = ({
           .catch(onError)
           .finally(() => {
             setLoading(false);
+            isSubmit.current = false;
           });
       }, 300);
     },
-    [accounts, assetRegistry, isTransferAll, hideAll, show, onSuccess, onError],
+    [isSubmit, accounts, assetRegistry, hideAll, show, isTransferAll, onSuccess, onError],
   );
 
   const isNextButtonDisable = (() => {

src/screens/Transaction/Stake/index.tsx

@@ -51,6 +51,7 @@ import { AccountSelector } from 'components/Modal/common/AccountSelector';
 import { BN, BN_ZERO } from '@polkadot/util';
 import { isSameAddress } from '@subwallet/extension-base/utils';
 import { ChainStatus } from 'hooks/chain/useChainChecker';
+import { useCancelLoading } from 'hooks/transaction/useCancelLoading';
 
 export const Stake = ({
   route: {
@@ -70,6 +71,7 @@ export const Stake = ({
   const [isBalanceReady, setIsBalanceReady] = useState(true);
   const accountSelectorRef = useRef<ModalRef>();
   const tokenSelectorRef = useRef<ModalRef>();
+  const { isSubmit } = useCancelLoading(setLoading);
 
   const defaultStakingType: StakingType = useMemo(() => {
     if (isEthAdr) {
@@ -364,6 +366,7 @@ export const Stake = ({
 
   const onSubmit = () => {
     setLoading(true);
+    isSubmit.current = true;
     let bondingPromise: Promise<SWTransactionResponse>;
 
     if (currentPool && currentStakingType === StakingType.POOLED) {
@@ -391,6 +394,7 @@ export const Stake = ({
         .catch(onError)
         .finally(() => {
           setLoading(false);
+          isSubmit.current = false;
         });
     }, 300);
   };

src/screens/Transaction/Unbond/index.tsx

@@ -39,6 +39,7 @@ import { UnbondProps } from 'routes/transaction/transactionAction';
 import i18n from 'utils/i18n/i18n';
 import { ModalRef } from 'types/modalRef';
 import { AccountSelector } from 'components/Modal/common/AccountSelector';
+import { useCancelLoading } from 'hooks/transaction/useCancelLoading';
 
 const _accountFilterFunc = (
   allNominator: NominatorMetadata[],
@@ -140,6 +141,7 @@ export const Unbond = ({
 
   const [loading, setLoading] = useState(false);
   const { onError, onSuccess } = useHandleSubmitTransaction(onDone);
+  const { isSubmit } = useCancelLoading(setLoading);
 
   const accountList = useMemo(() => {
     return accounts.filter(_accountFilterFunc(allNominatorInfo, chainInfoMap, stakingType, stakingChain));
@@ -177,16 +179,17 @@ export const Unbond = ({
     }
 
     setLoading(true);
-
+    isSubmit.current = true;
     setTimeout(() => {
       unbondingPromise
         .then(onSuccess)
         .catch(onError)
         .finally(() => {
           setLoading(false);
+          isSubmit.current = false;
         });
     }, 300);
-  }, [currentValidator, currentValue, mustChooseValidator, nominatorMetadata, onError, onSuccess]);
+  }, [currentValidator, currentValue, isSubmit, mustChooseValidator, nominatorMetadata, onError, onSuccess]);
 
   const nominators = useMemo(() => {
     if (from && nominatorMetadata?.nominations && nominatorMetadata.nominations.length) {