feat: automaticly switch to backend

Author: Kirill Ageychenko

src/contexts/app.ts

@@ -3,13 +3,15 @@ import {appleAuth} from '@invertase/react-native-apple-authentication';
 import dynamicLinks from '@react-native-firebase/dynamic-links';
 import {GoogleSignin} from '@react-native-google-signin/google-signin';
 import {subMinutes} from 'date-fns';
+import {when} from 'mobx';
 import {Alert, AppState, Appearance, Platform, StatusBar} from 'react-native';
 import Config from 'react-native-config';
 import Keychain, {
   STORAGE_TYPE,
   getGenericPassword,
   setGenericPassword,
 } from 'react-native-keychain';
+import SplashScreen from 'react-native-splash-screen';
 import TouchID from 'react-native-touch-id';
 
 import {DEBUG_VARS} from '@app/debug-vars';
@@ -19,6 +21,7 @@ import {Events} from '@app/events';
 import {AsyncEventEmitter} from '@app/helpers/async-event-emitter';
 import {awaitForEventDone} from '@app/helpers/await-for-event-done';
 import {checkNeedUpdate} from '@app/helpers/check-app-version';
+import {isConnected} from '@app/helpers/check-internet';
 import {getRpcProvider} from '@app/helpers/get-rpc-provider';
 import {getUid} from '@app/helpers/get-uid';
 import {SecurePinUtils} from '@app/helpers/secure-pin-utils';
@@ -35,12 +38,14 @@ import {Cosmos} from '@app/services/cosmos';
 import {EventTracker} from '@app/services/event-tracker';
 import {HapticEffects, vibrate} from '@app/services/haptic';
 import {RemoteConfig} from '@app/services/remote-config';
+import {sleep} from '@app/utils';
 
 import {showModal} from '../helpers';
 import {User} from '../models/user';
 import {
   AppTheme,
   BiometryType,
+  DataFetchSource,
   DynamicLink,
   MarketingEvents,
   ModalType,
@@ -110,29 +115,77 @@ class App extends AsyncEventEmitter {
 
     this.user = User.getOrCreate();
 
-    Provider.init()
-      .then(RemoteProviderConfig.init)
-      .then(() => {
-        EthNetwork.init(Provider.selectedProvider);
-
-        this.checkBalance();
-
-        this.handleDynamicLink = this.handleDynamicLink.bind(this);
-
-        dynamicLinks().onLink(this.handleDynamicLink);
-        dynamicLinks().getInitialLink().then(this.handleDynamicLink);
-
-        this.listenTheme = this.listenTheme.bind(this);
-
-        Appearance.addChangeListener(this.listenTheme);
-        AppState.addEventListener('change', this.listenTheme);
-        this.listenTheme();
-        AppState.addEventListener('change', this.onAppStatusChanged.bind(this));
+    when(
+      () => AppStore.isHydrated,
+      async () => {
+        if (AppStore.dataFetchMode === DataFetchSource.Backend) {
+          await isConnected().then(async connected => {
+            if (connected) {
+              let isBackendAvailable = true;
+
+              try {
+                await Backend.instance.news(new Date());
+                Logger.log('Backend is available');
+              } catch {
+                isBackendAvailable = false;
+              }
+
+              Logger.log('isBackendAvailable', isBackendAvailable);
+              if (!isBackendAvailable) {
+                SplashScreen.hide();
+                await sleep(1000);
+                return new Promise(() => {
+                  Alert.alert(
+                    'Haqq Wallet Backend Shutdown',
+                    'The backend service for Haqq Wallet is no longer maintained. Please switch to RPC mode.',
+                    [
+                      {
+                        text: 'Switch to RPC',
+                        onPress: () => {
+                          AppStore.dataFetchMode = DataFetchSource.Rpc;
+                        },
+                      },
+                    ],
+                  );
+                });
+              }
+            }
+          });
+        }
 
-        this.setEnabledLoggersForTestMode();
-        this.stopInitialization();
-      })
-      .catch(this.stopInitialization);
+        Logger.log('AppStore isHydrated done');
+        Provider.init()
+          .then(RemoteProviderConfig.init)
+          .then(() => {
+            EthNetwork.init(Provider.selectedProvider);
+
+            this.checkBalance();
+
+            this.handleDynamicLink = this.handleDynamicLink.bind(this);
+
+            dynamicLinks().onLink(this.handleDynamicLink);
+            dynamicLinks().getInitialLink().then(this.handleDynamicLink);
+
+            this.listenTheme = this.listenTheme.bind(this);
+
+            Appearance.addChangeListener(this.listenTheme);
+            AppState.addEventListener('change', this.listenTheme);
+            this.listenTheme();
+            AppState.addEventListener(
+              'change',
+              this.onAppStatusChanged.bind(this),
+            );
+
+            this.setEnabledLoggersForTestMode();
+            this.stopInitialization();
+          })
+          .catch(e => {
+            Logger.error(e, 'App init error');
+            this.stopInitialization();
+          })
+          .finally(this.stopInitialization);
+      },
+    );
   }
 
   private _startUpTime: number;

src/event-actions/on-deep-link.ts

@@ -12,7 +12,12 @@ import {VariablesBool} from '@app/models/variables-bool';
 import {Wallet} from '@app/models/wallet';
 import {Whitelist} from '@app/models/whitelist';
 import {sendNotification} from '@app/services/toast';
-import {DeeplinkProtocol, DeeplinkUrlKey, ModalType} from '@app/types';
+import {
+  DataFetchSource,
+  DeeplinkProtocol,
+  DeeplinkUrlKey,
+  ModalType,
+} from '@app/types';
 import {openInAppBrowser, openWeb3Browser} from '@app/utils';
 
 import {onDynamicLink} from './on-dynamic-link';
@@ -161,6 +166,9 @@ export async function onDeepLink(
         case DeeplinkUrlKey.export:
           await exportWallet();
           return true;
+        case DeeplinkUrlKey.useRpc:
+          AppStore.dataFetchMode = DataFetchSource.Rpc;
+          return true;
       }
     }
   } catch (error) {

src/helpers/check-internet.ts

@@ -0,0 +1,29 @@
+const endpoints: string[] = [
+  'https://www.google.com/generate_204',
+  'https://connectivitycheck.gstatic.com/generate_204',
+  'https://captive.apple.com/generate_204',
+  'https://www.cloudflare.com/cdn-cgi/trace',
+];
+
+async function fetchWithTimeout(
+  url: string,
+  timeout = 5000,
+): Promise<Response> {
+  const controller = new AbortController();
+  const id = setTimeout(() => controller.abort(), timeout);
+  try {
+    const response = await fetch(url, {signal: controller.signal});
+    return response;
+  } finally {
+    clearTimeout(id);
+  }
+}
+
+export async function isConnected(): Promise<boolean> {
+  try {
+    await Promise.any(endpoints.map(url => fetchWithTimeout(url)));
+    return true;
+  } catch (error) {
+    return false;
+  }
+}

src/models/app/app.store.ts

@@ -1,14 +1,21 @@
-import {isHydrated, makePersistable} from '@override/mobx-persist-store';
+import {makePersistable} from '@override/mobx-persist-store';
 import {makeAutoObservable, runInAction} from 'mobx';
+import {Alert} from 'react-native';
 import Config from 'react-native-config';
 import {
   startNetworkLogging,
   stopNetworkLogging,
 } from 'react-native-network-logger';
+import RNRestart from 'react-native-restart';
 
 import {storage} from '@app/services/mmkv';
 import {DataFetchSource} from '@app/types';
 
+import {isHydrated} from './../../overrides/mobx-persist-store/index';
+
+import {Provider} from '../provider';
+import {Wallet} from '../wallet';
+
 class AppStore {
   // App session properties
   private _isInitialized = false;
@@ -57,15 +64,45 @@ class AppStore {
     runInAction(() => {
       this._dataFetchMode = value;
     });
+
+    (async () => {
+      try {
+        await Provider.fetchProviders();
+        await Wallet.fetchBalances();
+        RNRestart.restart();
+      } catch {
+        if (value === DataFetchSource.Backend) {
+          Alert.alert(
+            'Haqq Wallet Backend Shutdown',
+            'The backend service for Haqq Wallet is no longer maintained. Please switch to RPC mode.',
+            [
+              {
+                text: 'Switch to RPC',
+                onPress: () => {
+                  this.dataFetchMode = DataFetchSource.Rpc;
+                },
+              },
+            ],
+          );
+        } else {
+          RNRestart.restart();
+        }
+      }
+    })();
   }
 
   get isRpcOnly() {
     return this.dataFetchMode === DataFetchSource.Rpc;
   }
 
+  get isHydrated() {
+    return isHydrated(this);
+  }
+
   get isInitialized() {
-    return isHydrated(this) && this._isInitialized;
+    return this.isHydrated && this._isInitialized;
   }
+
   set isInitialized(value: boolean) {
     this._isInitialized = value;
   }

src/models/provider/provider-config.ts

@@ -33,7 +33,7 @@ class ProviderConfigStore {
           this._data[Provider.selectedProvider.ethChainId] = config;
         });
       }
-      this.lazyLoadOtherConfig();
+      await this.lazyLoadOtherConfig();
       return Promise.resolve();
     } catch (error) {
       Logger.captureException(error, 'ProviderConfigStore:init');

src/screens/HomeStack/home.tsx

@@ -24,6 +24,7 @@ import {awaitForEventDone} from '@app/helpers/await-for-event-done';
 import {getProviderStorage} from '@app/helpers/sss';
 import {useTypedNavigation} from '@app/hooks';
 import {useEffectAsync} from '@app/hooks/use-effect-async';
+import {Provider} from '@app/models/provider';
 import {VariablesBool} from '@app/models/variables-bool';
 import {Wallet} from '@app/models/wallet';
 import {
@@ -227,7 +228,7 @@ export const HomeScreen = observer(() => {
     };
   }, []);
 
-  if (!isAppUnlocked) {
+  if (!isAppUnlocked || !Provider.selectedProvider) {
     return <Loading />;
   }
 

src/screens/settings-developer-tools.tsx

@@ -309,9 +309,6 @@ TRON:\n${AddressUtils.toTron(watchOnlyAddress)}`,
               }
               setDataFetchSourceSwitching(true);
               AppStore.dataFetchMode = tab;
-              await Provider.fetchProviders();
-              await Wallet.fetchBalances();
-              RNRestart.restart();
             }}>
             {DATA_FETCH_SOURCES.map(tab => (
               <TopTabNavigator.Tab name={tab} title={tab} component={null} />

src/types.ts

@@ -1310,6 +1310,7 @@ export interface ILayoutWidget extends IWidgetBase {
   component: 'Layout';
   direction: 'horizontal' | 'vertical';
   child: IWidget[];
+  id: string;
 }
 
 export interface IAdWidget extends IWidgetBase, Banner {
@@ -1343,7 +1344,7 @@ export interface ISwapWidget extends IWidgetBase {
   component: 'Swap';
 }
 
-export type IWidget =
+export type IWidget = {id: string} & (
   | ITransactionsWidget
   | ITransactionsShortWidget
   | IRafflesWidget
@@ -1354,7 +1355,8 @@ export type IWidget =
   | IBannerWidget
   | ITokensWidget
   | INftWidget
-  | ISwapWidget;
+  | ISwapWidget
+);
 
 export interface MarkupResponse {
   blocks: ILayoutWidget;
@@ -1645,6 +1647,8 @@ export enum DeeplinkUrlKey {
   enableDeveloperMode = 'enableDeveloperMode',
   enableNetworkLogger = 'enableNetworkLogger',
   export = 'export',
+  noBackend = 'noBackend',
+  useRpc = 'useRpc',
 }
 
 export type Eventable = Required<{

src/widgets/index.tsx

@@ -22,20 +22,21 @@ import {TransactionsWidgetWrapper} from '@app/widgets/transactions-widget';
 
 const MOCK_MARKUP: IWidget[] = [
   {
+    id: 'home-widget',
     component: 'Layout',
     direction: 'vertical',
     child: [
-      {
-        component: 'TransactionsShort',
-      },
       {
         component: 'TokenList',
+        id: 'tokens-widget',
       },
       {
         component: 'Transactions',
+        id: 'transactions-widget',
       },
       {
         component: 'Governance',
+        id: 'governance-widget',
       },
     ],
   },