From 404f1fb5334fbf5eba202e0e855cfcb1bee728eb Mon Sep 17 00:00:00 2001 From: dominhquang Date: Thu, 24 Aug 2023 14:26:38 +0700 Subject: [PATCH] [Issue-199]: Add the lost internet connection screen --- src/AppNavigator.tsx | 2 +- src/hooks/balance/useGetBalance.ts | 9 ++++++++- src/screens/Home/index.tsx | 25 +++++++++++++++++++++++-- src/utils/i18n/en_US.ts | 2 ++ src/utils/i18n/vi_VN.ts | 2 ++ src/utils/i18n/zh_CN.ts | 2 ++ 6 files changed, 38 insertions(+), 4 deletions(-) diff --git a/src/AppNavigator.tsx b/src/AppNavigator.tsx index 92cbc9154..872e6e316 100644 --- a/src/AppNavigator.tsx +++ b/src/AppNavigator.tsx @@ -307,7 +307,7 @@ const AppNavigator = ({ isAppReady }: Props) => { diff --git a/src/hooks/balance/useGetBalance.ts b/src/hooks/balance/useGetBalance.ts index 308bf5537..81642744e 100644 --- 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 index 4c8a9471e..888d6a9d7 100644 --- 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/utils/i18n/en_US.ts b/src/utils/i18n/en_US.ts index 41fcb5f27..9293808de 100644 --- a/src/utils/i18n/en_US.ts +++ b/src/utils/i18n/en_US.ts @@ -983,6 +983,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 index 842df614c..9d514e9dd 100644 --- a/src/utils/i18n/vi_VN.ts +++ b/src/utils/i18n/vi_VN.ts @@ -982,6 +982,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', diff --git a/src/utils/i18n/zh_CN.ts b/src/utils/i18n/zh_CN.ts index 4f06c157b..beb70b623 100644 --- a/src/utils/i18n/zh_CN.ts +++ b/src/utils/i18n/zh_CN.ts @@ -972,6 +972,8 @@ export const zh = { updateNetwork: '更新网络', expiredConnectionTitle: '连接已过期', unsupportedNetworkTitle: '未支持的网络', + noInternetConnection: 'No internet connection', + internetConnected: 'Internet connected', }, warningMessage: { passwordTooShort: '密码过短',