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

src/components/Modal/PasswordModal.tsx

@@ -4,11 +4,11 @@ import React, { useCallback, useContext, useEffect, useRef } from 'react';
 import { StyleProp, View, ViewStyle } from 'react-native';
 import { validatePassword } from 'screens/Shared/AccountNamePasswordCreation';
 import i18n from 'utils/i18n/i18n';
-import { Warning } from 'components/Warning';
 import { WebRunnerContext } from 'providers/contexts';
 import { Button, SwModal } from 'components/design-system-ui';
 import { SWModalRefProps } from 'components/design-system-ui/modal/ModalBaseV2';
 import { ModalRefProps } from 'components/design-system-ui/modal/SwModal';
+import { NoInternetAlertBox } from 'components/NoInternetAlertBox';
 
 interface Props {
   visible: boolean;
@@ -114,12 +114,10 @@ const PasswordModal = ({
           isBusy={isBusy}
         />
 
-        {!isNetConnected && (
-          <Warning style={{ marginBottom: 8 }} isDanger message={i18n.warningMessage.noInternetMessage} />
-        )}
+        {!isNetConnected && <NoInternetAlertBox marginTop={0} />}
 
         <Button
-          style={{ marginVertical: 16 }}
+          style={{ marginTop: 16 }}
           loading={isBusy}
           onPress={onPress}
           disabled={!formState.data.password || formState.errors.password.length > 0 || !isNetConnected || isBusy}>

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/NetworkSettingDetail.tsx

@@ -1,5 +1,5 @@
 import useConfirmModal from 'hooks/modal/useConfirmModal';
-import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import React, { useCallback, useContext, useEffect, useMemo, useRef, useState } from 'react';
 import { ContainerWithSubHeader } from 'components/ContainerWithSubHeader';
 import { CaretDown, FloppyDiskBack, Plus, Trash } from 'phosphor-react-native';
 import { ScrollView, StyleProp, TouchableOpacity, View, ViewStyle } from 'react-native';
@@ -36,6 +36,8 @@ import DeleteModal from 'components/common/Modal/DeleteModal';
 import { useSubWalletTheme } from 'hooks/useSubWalletTheme';
 import i18n from 'utils/i18n/i18n';
 import { ModalRef } from 'types/modalRef';
+import { NoInternetAlertBox } from 'components/NoInternetAlertBox';
+import { WebRunnerContext } from 'providers/contexts';
 
 const ContainerStyle: StyleProp<ViewStyle> = {
   ...sharedStyles.layoutContainer,
@@ -72,6 +74,7 @@ export const NetworkSettingDetail = ({
   const _chainState = useFetchChainState(chainSlug);
   const [chainState, setChainState] = useState(_chainState);
   const [isDeleting, setIsDeleting] = useState(false);
+  const isNetConnected = useContext(WebRunnerContext).isNetConnected;
 
   const { decimals, symbol } = useMemo(() => {
     return _getChainNativeTokenBasicInfo(chainInfo);
@@ -236,6 +239,7 @@ export const NetworkSettingDetail = ({
       !!formState.errors.blockExplorer.length ||
       !!formState.errors.crowdloanUrl.length ||
       !!formState.errors.currentProvider.length ||
+      !isNetConnected ||
       isDeleting ||
       (formState.data.currentProvider === chainState.currentProvider &&
         formState.data.blockExplorer === _blockExplorer &&
@@ -252,6 +256,7 @@ export const NetworkSettingDetail = ({
     formState.errors.crowdloanUrl.length,
     formState.errors.currentProvider.length,
     isDeleting,
+    isNetConnected,
   ]);
 
   const {
@@ -354,6 +359,8 @@ export const NetworkSettingDetail = ({
             errorMessages={formState.errors.crowdloanUrl}
             placeholder={formState.labels.crowdloanUrl}
           />
+
+          {!isNetConnected && <NoInternetAlertBox marginTop={0} />}
         </ScrollView>
 
         <View style={{ ...MarginBottomForSubmitButton }}>

src/screens/Tokens/ConfigureToken.tsx

@@ -19,7 +19,6 @@ import i18n from 'utils/i18n/i18n';
 import { useToast } from 'react-native-toast-notifications';
 import useFormControl, { FormState } from 'hooks/screen/useFormControl';
 import { deleteCustomAssets, upsertCustomToken } from '../../messaging';
-import { Warning } from 'components/Warning';
 import { WebRunnerContext } from 'providers/contexts';
 import { _ChainAsset } from '@subwallet/chain-list/types';
 import { Button, Icon, Typography } from 'components/design-system-ui';
@@ -31,6 +30,7 @@ import Tag from '../../components/design-system-ui/tag';
 import useConfirmModal from 'hooks/modal/useConfirmModal';
 import DeleteModal from 'components/common/Modal/DeleteModal';
 import useGetChainAssetInfo from 'hooks/common/userGetChainAssetInfo';
+import { NoInternetAlertBox } from 'components/NoInternetAlertBox';
 
 export const ConfigureToken = ({
   route: {
@@ -213,9 +213,7 @@ export const ConfigureToken = ({
 
           {!!tokenInfo?.priceId && <TextField disabled text={tokenInfo.priceId} />}
 
-          {!isNetConnected && (
-            <Warning style={{ marginBottom: 8 }} isDanger message={i18n.warningMessage.noInternetMessage} />
-          )}
+          {!isNetConnected && <NoInternetAlertBox />}
         </ScrollView>
         {tokenInfo && _isCustomAsset(tokenInfo.slug) && (
           <View style={{ flexDirection: 'row', paddingTop: 27, ...MarginBottomForSubmitButton }}>

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 }}>