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

src/components/NoInternetAlertBox.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { View } from 'react-native';
+import AlertBox from 'components/design-system-ui/alert-box';
+
+interface Props {
+  marginTop?: number;
+}
+
+export const NoInternetAlertBox = ({ marginTop = 16 }: Props) => {
+  return (
+    <View style={{ marginTop: marginTop, width: '100%' }}>
+      <AlertBox
+        type="warning"
+        title={'No internet connection'}
+        description={'Please, check your connection or try again later'}
+      />
+    </View>
+  );
+};

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/screens/Home/index.tsx

@@ -1,13 +1,13 @@
-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 { Linking, Platform, StyleSheet, TouchableOpacity, View } from 'react-native';
 import { NativeStackNavigationProp } from '@react-navigation/native-stack';
 import { Aperture, Database, Globe, Rocket, Wallet } from 'phosphor-react-native';
 import { CryptoScreen } from 'screens/Home/Crypto';
-import { FontMedium } from 'styles/sharedStyles';
-import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import { FontMedium, FontSemiBold } from 'styles/sharedStyles';
+import { SafeAreaView, useSafeAreaInsets } from 'react-native-safe-area-context';
 import { BOTTOM_BAR_HEIGHT, deviceWidth } from 'constants/index';
 import { ColorMap } from 'styles/color';
 import useCheckEmptyAccounts from 'hooks/useCheckEmptyAccounts';
@@ -20,7 +20,7 @@ import withPageWrapper from 'components/pageWrapper';
 import RequestCreateMasterPasswordModal from 'screens/MasterPassword/RequestCreateMasterPasswordModal';
 import { useDispatch, useSelector } from 'react-redux';
 import { RootState } from 'stores/index';
-import { ActivityIndicator } from 'components/design-system-ui';
+import { ActivityIndicator, Typography } from 'components/design-system-ui';
 import { useSubWalletTheme } from 'hooks/useSubWalletTheme';
 import useAppLock from 'hooks/useAppLock';
 import { createDrawerNavigator, DrawerContentComponentProps } from '@react-navigation/drawer';
@@ -35,6 +35,7 @@ import { updateIsDeepLinkConnect } from 'stores/base/Settings';
 import queryString from 'querystring';
 import { connectWalletConnect } from 'utils/walletConnect';
 import { useToast } from 'react-native-toast-notifications';
+import { WebRunnerContext } from 'providers/contexts';
 
 interface tabbarIconColor {
   color: string;
@@ -185,6 +186,17 @@ export const Home = ({ navigation }: Props) => {
   const isFirstOpen = useRef(true);
   const toast = useToast();
   const dispatch = useDispatch();
+  const theme = useSubWalletTheme().swThemes;
+  const { isNetConnected } = useContext(WebRunnerContext);
+  const [showNoInternetAlert, setShowNoInternetAlert] = useState(!isNetConnected);
+
+  useEffect(() => {
+    if (isNetConnected) {
+      setTimeout(() => setShowNoInternetAlert(false), 3000);
+    } else {
+      setShowNoInternetAlert(true);
+    }
+  }, [isNetConnected]);
 
   useEffect(() => {
     if (isReady && isLoading) {
@@ -246,6 +258,14 @@ export const Home = ({ navigation }: Props) => {
     <>
       <Wrapper />
       {!isLocked && <RequestCreateMasterPasswordModal visible={!hasMasterPassword && !isEmptyAccounts} />}
+      {showNoInternetAlert && (
+        <View style={{ backgroundColor: isNetConnected ? theme['green-6'] : theme.colorBgDefault, marginTop: -12 }}>
+          <Typography.Text style={{ color: '#fff', textAlign: 'center', ...FontSemiBold }} size={'sm'}>
+            {isNetConnected ? 'Internet connected' : 'No internet connection'}
+          </Typography.Text>
+          <SafeAreaView edges={['bottom']} />
+        </View>
+      )}
     </>
   );
 };

src/screens/ImportNetwork.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useState } from 'react';
 import useFormControl from 'hooks/screen/useFormControl';
 import { ContainerWithSubHeader } from 'components/ContainerWithSubHeader';
 import { Keyboard, View } from 'react-native';
@@ -26,6 +26,8 @@ import { _NetworkUpsertParams } from '@subwallet/extension-base/services/chain-s
 import { useToast } from 'react-native-toast-notifications';
 import { HIDE_MODAL_DURATION } from 'constants/index';
 import i18n from 'utils/i18n/i18n';
+import { WebRunnerContext } from 'providers/contexts';
+import { NoInternetAlertBox } from 'components/NoInternetAlertBox';
 
 interface ValidationInfo {
   status: ValidateStatus;
@@ -43,6 +45,7 @@ export const ImportNetwork = () => {
   const [genesisHash, setGenesisHash] = useState('');
   const [existentialDeposit, setExistentialDeposit] = useState('0');
   const toast = useToast();
+  const { isNetConnected } = useContext(WebRunnerContext);
 
   const handleErrorMessage = useCallback((errorCode: _CHAIN_VALIDATION_ERROR) => {
     switch (errorCode) {
@@ -367,6 +370,8 @@ export const ImportNetwork = () => {
           onSubmitField={onSubmitField('crowdloanUrl')}
           onChangeText={onChangeValue('crowdloanUrl')}
         />
+
+        {!isNetConnected && <NoInternetAlertBox marginTop={0} />}
       </View>
 
       <View style={{ ...ContainerHorizontalPadding, ...MarginBottomForSubmitButton }}>

src/screens/ImportToken/ImportToken.tsx

@@ -38,6 +38,7 @@ import { Plus } from 'phosphor-react-native';
 import { TokenTypeSelectField } from 'components/Field/TokenTypeSelect';
 import { ModalRef } from 'types/modalRef';
 import { ChainSelector } from 'components/Modal/common/ChainSelector';
+import { NoInternetAlertBox } from 'components/NoInternetAlertBox';
 
 interface TokenTypeOption {
   label: string;
@@ -364,10 +365,6 @@ export const ImportToken = ({ route: { params: routeParams } }: ImportTokenProps
 
           <TextField placeholder={i18n.placeholder.decimals} disabled={true} text={formState.data.decimals} />
 
-          {!isNetConnected && (
-            <Warning style={{ marginBottom: 8 }} isDanger message={i18n.warningMessage.noInternetMessage} />
-          )}
-
           {!isReady && (
             <Warning style={{ marginBottom: 8 }} isDanger message={i18n.warningMessage.webRunnerDeadMessage} />
           )}
@@ -390,6 +387,12 @@ export const ImportToken = ({ route: { params: routeParams } }: ImportTokenProps
             </>
           )}
 
+          {!isNetConnected && (
+            <NoInternetAlertBox
+              marginTop={formState.data.chain && !checkChainConnected(formState.data.chain) ? 8 : 0}
+            />
+          )}
+
           <AddressScanner
             qrModalVisible={isShowQrModalVisible}
             onPressCancel={() => {

src/screens/Transaction/CancelUnstake/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { StakingScreenNavigationProps } from 'routes/staking/stakingScreen';
 import { NominatorMetadata, StakingType } from '@subwallet/extension-base/background/KoniTypes';
 import { useNavigation } from '@react-navigation/native';
@@ -26,6 +26,8 @@ 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 { WebRunnerContext } from 'providers/contexts';
+import { NoInternetAlertBox } from 'components/NoInternetAlertBox';
 
 const filterAccount = (
   chainInfoMap: Record<string, _ChainInfo>,
@@ -52,7 +54,7 @@ export const CancelUnstake = ({
   const navigation = useNavigation<StakingScreenNavigationProps>();
   const theme = useSubWalletTheme().swThemes;
   const { isAllAccount, accounts } = useSelector((state: RootState) => state.accountState);
-
+  const isNetConnected = useContext(WebRunnerContext).isNetConnected;
   const { chainInfoMap } = useSelector((state: RootState) => state.chainStore);
 
   const cancelUnstakeFormConfig = {
@@ -137,6 +139,8 @@ export const CancelUnstake = ({
             onSelectItem={onChangeValue('unstakeIndex')}
             disabled={loading}
           />
+
+          {!isNetConnected && <NoInternetAlertBox />}
         </ScrollView>
 
         <View style={{ padding: 16, flexDirection: 'row' }}>

src/screens/Transaction/ClaimReward/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useTransaction } from 'hooks/screen/Transaction/useTransaction';
 import { useNavigation } from '@react-navigation/native';
 import { StakingScreenNavigationProps } from 'routes/staking/stakingScreen';
@@ -36,6 +36,8 @@ 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 { WebRunnerContext } from 'providers/contexts';
+import { NoInternetAlertBox } from 'components/NoInternetAlertBox';
 
 const filterAccount = (
   chainInfoMap: Record<string, _ChainInfo>,
@@ -126,6 +128,7 @@ const ClaimReward = ({
   const [isDisabled, setIsDisabled] = useState(true);
   const { onError, onSuccess } = useHandleSubmitTransaction(onDone);
   const accountInfo = useGetAccountByAddress(from);
+  const isNetConnected = useContext(WebRunnerContext).isNetConnected;
   const onSubmit = useCallback(() => {
     setLoading(true);
 
@@ -210,6 +213,8 @@ const ClaimReward = ({
             }}
             checkBoxSize={20}
           />
+
+          {!isNetConnected && <NoInternetAlertBox />}
         </ScrollView>
 
         <View style={{ padding: 16, flexDirection: 'row' }}>

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 { NoInternetAlertBox } from 'components/NoInternetAlertBox';
 
 const DEFAULT_ITEM: NftItem = {
   collectionId: 'unknown',
@@ -248,7 +249,7 @@ const SendNFT: React.FC<SendNFTProps> = ({
               <Warning style={{ marginBottom: 8 }} message={formState.errors.recipientAddress[0]} isDanger />
             )}
             <NetworkField label={i18n.inputLabel.network} networkKey={nftItem.chain || ''} />
-            {!isNetConnected && <Warning isDanger message={i18n.warningMessage.noInternetMessage} />}
+            {!isNetConnected && <NoInternetAlertBox />}
           </ScrollView>
 
           <View style={{ ...ContainerHorizontalPadding, marginTop: 16, marginBottom: 16 }}>

src/screens/Transaction/SendFundV2/index.tsx

@@ -14,7 +14,7 @@ import {
 import { SWTransactionResponse } from '@subwallet/extension-base/services/transaction-service/types';
 import { addLazy, isSameAddress, removeLazy } from '@subwallet/extension-base/utils';
 import BigN from 'bignumber.js';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 
 import { BN, BN_ZERO } from '@polkadot/util';
 import { isAddress, isEthereumAddress } from '@polkadot/util-crypto';
@@ -69,6 +69,8 @@ import createStylesheet from './styles';
 import { useGetBalance } from 'hooks/balance';
 import { FreeBalanceDisplay } from 'screens/Transaction/parts/FreeBalanceDisplay';
 import { ModalRef } from 'types/modalRef';
+import { WebRunnerContext } from 'providers/contexts';
+import { NoInternetAlertBox } from 'components/NoInternetAlertBox';
 
 interface TransferFormValues extends TransactionFormValues {
   to: string;
@@ -316,6 +318,7 @@ export const SendFund = ({
   const accountSelectorRef = useRef<ModalRef>();
   const tokenSelectorRef = useRef<ModalRef>();
   const chainSelectorRef = useRef<ModalRef>();
+  const isNetConnected = useContext(WebRunnerContext).isNetConnected;
 
   const {
     title,
@@ -1000,6 +1003,8 @@ export const SendFund = ({
                   )}
                 </View>
               )}
+
+              {!isNetConnected && <NoInternetAlertBox />}
             </ScrollView>
 
             <View style={stylesheet.footer}>

src/screens/Transaction/Stake/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { ScrollView, View } from 'react-native';
 import { StakingTab } from 'components/common/StakingTab';
 import { TokenSelectField } from 'components/Field/TokenSelect';
@@ -48,6 +48,8 @@ import useFetchChainState from 'hooks/screen/useFetchChainState';
 import i18n from 'utils/i18n/i18n';
 import { ModalRef } from 'types/modalRef';
 import { AccountSelector } from 'components/Modal/common/AccountSelector';
+import { WebRunnerContext } from 'providers/contexts';
+import { NoInternetAlertBox } from 'components/NoInternetAlertBox';
 
 export const Stake = ({
   route: {
@@ -67,6 +69,7 @@ export const Stake = ({
   const [isBalanceReady, setIsBalanceReady] = useState(true);
   const accountSelectorRef = useRef<ModalRef>();
   const tokenSelectorRef = useRef<ModalRef>();
+  const isNetConnected = useContext(WebRunnerContext).isNetConnected;
 
   const defaultStakingType: StakingType = useMemo(() => {
     if (isEthAdr) {
@@ -432,7 +435,7 @@ export const Stake = ({
                 subLogoKey={chain}
                 value={symbol}
                 showIcon
-                outerStyle={stakingChain !== ALL_KEY || !from || loading}
+                // outerStyle={stakingChain !== ALL_KEY || !from || loading}
               />
             )}
           />
@@ -484,6 +487,8 @@ export const Stake = ({
               {getMetaInfo()}
             </>
           )}
+
+          {!isNetConnected && <NoInternetAlertBox />}
         </ScrollView>
 
         <View style={{ paddingHorizontal: 16, paddingTop: 16, ...MarginBottomForSubmitButton }}>

src/screens/Transaction/Unbond/index.tsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { useTransaction } from 'hooks/screen/Transaction/useTransaction';
 import { useSelector } from 'react-redux';
 import { RootState } from 'stores/index';
@@ -39,6 +39,8 @@ 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 { WebRunnerContext } from 'providers/contexts';
+import { NoInternetAlertBox } from 'components/NoInternetAlertBox';
 
 const _accountFilterFunc = (
   allNominator: NominatorMetadata[],
@@ -92,6 +94,7 @@ export const Unbond = ({
       return undefined;
     }
   }, [currentValidator, nominatorMetadata]);
+  const isNetConnected = useContext(WebRunnerContext).isNetConnected;
 
   const mustChooseValidator = useMemo(() => {
     return isActionFromValidator(stakingType, stakingChain || '');
@@ -299,6 +302,8 @@ export const Unbond = ({
             }}>
             {i18n.message.unBondMessage(unBondedTime)}
           </Typography.Text>
+
+          {!isNetConnected && <NoInternetAlertBox />}
         </ScrollView>
 
         <View style={{ paddingHorizontal: 16, paddingTop: 16, ...MarginBottomForSubmitButton }}>