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

src/AppNavigator.tsx

@@ -320,7 +320,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/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 { 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';
@@ -34,6 +33,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;
@@ -183,6 +183,27 @@ export const Home = ({ navigation }: Props) => {
   const isFirstOpen = useRef(true);
   const toast = useToast();
   const dispatch = useDispatch();
+  const { isNetConnected } = useContext(WebRunnerContext);
+  const isFirstLaunch = useRef(true);
+
+  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/utils/i18n/en_US.ts

@@ -1001,6 +1001,8 @@ export const en = {
     updateNetwork: 'Update network',
     expiredConnectionTitle: 'Connection expired',
     unsupportedNetworkTitle: 'Unsupported network',
+    noInternetConnection: 'No internet connection',
+    internetConnected: 'Internet connected',
   },
   warningMessage: {
     passwordTooShort: 'Password is too short',

src/utils/i18n/vi_VN.ts

@@ -1000,6 +1000,8 @@ export const vi = {
     updateNetwork: 'Cập nhật mạng',
     expiredConnectionTitle: 'Kết nối đã quá hạn.',
     unsupportedNetworkTitle: 'Mạng không được hỗ trợ',
+    noInternetConnection: 'No internet connection',
+    internetConnected: 'Internet connected',
   },
   warningMessage: {
     passwordTooShort: 'Mật khẩu quá ngắn',

src/utils/i18n/zh_CN.ts

@@ -990,6 +990,8 @@ export const zh = {
     updateNetwork: '更新网络',
     expiredConnectionTitle: '连接已过期',
     unsupportedNetworkTitle: '未支持的网络',
+    noInternetConnection: 'No internet connection',
+    internetConnected: 'Internet connected',
   },
   warningMessage: {
     passwordTooShort: '密码过短',