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

Koniverse · Aug 25, 2023 · 4802f0c · 4802f0c
1 parent 7d3460b
commit 4802f0c
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 13 deletions.
diff --git a/src/AppNavigator.tsx b/src/AppNavigator.tsx
@@ -307,7 +307,7 @@ const AppNavigator = ({ isAppReady }: Props) => {
               </Stack.Group>
               <Stack.Group
                 screenOptions={{
-                  presentation: 'transparentModal',
+                  presentation: 'containedTransparentModal',
                   contentStyle: { backgroundColor: theme.swThemes.colorBgMask },
                   headerShown: false,
                 }}>

diff --git a/src/hooks/balance/useGetBalance.ts b/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 };

diff --git a/src/screens/Home/index.tsx b/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';
@@ -35,6 +34,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 +185,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) {

diff --git a/src/screens/Settings/index.tsx b/src/screens/Settings/index.tsx
@@ -220,6 +220,15 @@ export const Settings = ({ navigation: drawerNavigation }: DrawerContentComponen
                 rightIcon={setting.rightIcon}
                 key={setting.title}
                 label={setting.title}
+                leftItemIcon={
+                  setting.title === i18n.header.walletConnect ? (
+                    <BackgroundIcon
+                      shape={'circle'}
+                      backgroundColor={setting.backgroundColor}
+                      customIcon={<SVGImages.WalletConnect width={16} height={16} color={theme.colorWhite} />}
+                    />
+                  ) : undefined
+                }
                 icon={setting.icon}
                 backgroundColor={setting.backgroundColor}
                 onPress={setting.onPress}
@@ -235,15 +244,6 @@ export const Settings = ({ navigation: drawerNavigation }: DrawerContentComponen
                 rightIcon={setting.rightIcon}
                 key={setting.title}
                 label={setting.title}
-                leftItemIcon={
-                  setting.title === i18n.header.walletConnect ? (
-                    <BackgroundIcon
-                      shape={'circle'}
-                      backgroundColor={setting.backgroundColor}
-                      customIcon={<SVGImages.WalletConnect width={16} height={16} color={theme.colorWhite} />}
-                    />
-                  ) : undefined
-                }
                 icon={setting.icon}
                 backgroundColor={setting.backgroundColor}
                 onPress={setting.onPress}

diff --git a/src/utils/i18n/en_US.ts b/src/utils/i18n/en_US.ts
@@ -976,6 +976,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',

diff --git a/src/utils/i18n/vi_VN.ts b/src/utils/i18n/vi_VN.ts
@@ -975,6 +975,8 @@ export const vi = {
     updateNetwork: 'Cập nhật mạng',
     expiredConnectionTitle: 'Connection expired',
     unsupportedNetworkTitle: 'Unsupported network',
+    noInternetConnection: 'No internet connection',
+    internetConnected: 'Internet connected',
   },
   warningMessage: {
     passwordTooShort: 'Mật khẩu quá ngắn',

diff --git a/src/utils/i18n/zh_CN.ts b/src/utils/i18n/zh_CN.ts
@@ -966,6 +966,8 @@ export const zh = {
     updateNetwork: '更新网络',
     expiredConnectionTitle: 'Connection expired',
     unsupportedNetworkTitle: 'Unsupported network',
+    noInternetConnection: 'No internet connection',
+    internetConnected: 'Internet connected',
   },
   warningMessage: {
     passwordTooShort: '密码过短',