From d9d73eda22e414a4172d5db5503b43db1fa3bec6 Mon Sep 17 00:00:00 2001
From: Matej Lubej <matej.lubej@oasisprotocol.org>
Date: Tue, 21 May 2024 16:30:17 +0200
Subject: [PATCH] Add Android update wall

---
 src/app/components/Ionic/IonicProvider.tsx    | 21 --------------
 .../IonicNativePlatformProvider/index.tsx     | 16 ++++++++++
 .../Ionic/components/RequiresUpdate/index.tsx | 29 +++++++++++++++++++
 ....tsx => useIonicAppStateChangeListener.ts} |  0
 .../Ionic/hooks/useIonicRequiresUpdate.ts     | 23 +++++++++++++++
 .../Ionic/providers/IonicContext.ts           | 17 +++++++++++
 .../Ionic/providers/IonicProvider.tsx         | 23 +++++++++++++++
 .../Ionic/utils/capacitor-app-update.ts       | 29 +++++++++++++++++++
 src/app/index.tsx                             |  6 ++--
 9 files changed, 140 insertions(+), 24 deletions(-)
 delete mode 100644 src/app/components/Ionic/IonicProvider.tsx
 create mode 100644 src/app/components/Ionic/components/IonicNativePlatformProvider/index.tsx
 create mode 100644 src/app/components/Ionic/components/RequiresUpdate/index.tsx
 rename src/app/components/Ionic/hooks/{useIonicAppStateChangeListener.tsx => useIonicAppStateChangeListener.ts} (100%)
 create mode 100644 src/app/components/Ionic/hooks/useIonicRequiresUpdate.ts
 create mode 100644 src/app/components/Ionic/providers/IonicContext.ts
 create mode 100644 src/app/components/Ionic/providers/IonicProvider.tsx
 create mode 100644 src/app/components/Ionic/utils/capacitor-app-update.ts

diff --git a/src/app/components/Ionic/IonicProvider.tsx b/src/app/components/Ionic/IonicProvider.tsx
deleted file mode 100644
index 7e7b538230..0000000000
--- a/src/app/components/Ionic/IonicProvider.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { createContext, FC, PropsWithChildren } from 'react'
-import { Capacitor } from '@capacitor/core'
-import { useIonicBackButtonListener } from './hooks/useIonicBackButtonListener'
-import { useIonicAppStateChangeListener } from './hooks/useIonicAppStateChangeListener'
-
-const IonicContext = createContext<undefined>(undefined)
-
-const IonicContextProvider: FC<PropsWithChildren> = ({ children }) => {
-  useIonicBackButtonListener()
-  useIonicAppStateChangeListener()
-
-  return <IonicContext.Provider value={undefined}>{children}</IonicContext.Provider>
-}
-
-export const IonicProvider: FC<PropsWithChildren> = ({ children }) => {
-  if (Capacitor.isNativePlatform()) {
-    return <IonicContextProvider>{children}</IonicContextProvider>
-  }
-
-  return children
-}
diff --git a/src/app/components/Ionic/components/IonicNativePlatformProvider/index.tsx b/src/app/components/Ionic/components/IonicNativePlatformProvider/index.tsx
new file mode 100644
index 0000000000..6e02f301cf
--- /dev/null
+++ b/src/app/components/Ionic/components/IonicNativePlatformProvider/index.tsx
@@ -0,0 +1,16 @@
+import { FC, PropsWithChildren } from 'react'
+import { Capacitor } from '@capacitor/core'
+import { IonicContextProvider } from '../../providers/IonicProvider'
+import { RequiresUpdate } from '../RequiresUpdate'
+
+export const IonicNativePlatformProvider: FC<PropsWithChildren> = ({ children }) => {
+  if (Capacitor.isNativePlatform()) {
+    return <IonicContextProvider>
+      <RequiresUpdate>
+        {children}
+      </RequiresUpdate>
+    </IonicContextProvider>
+  }
+
+  return children
+}
diff --git a/src/app/components/Ionic/components/RequiresUpdate/index.tsx b/src/app/components/Ionic/components/RequiresUpdate/index.tsx
new file mode 100644
index 0000000000..51f0f62a70
--- /dev/null
+++ b/src/app/components/Ionic/components/RequiresUpdate/index.tsx
@@ -0,0 +1,29 @@
+import React, { FC, PropsWithChildren, useContext } from 'react'
+import { IonicContext } from '../../providers/IonicContext'
+import { Box } from 'grommet/es6/components/Box'
+import { Button } from 'grommet/es6/components/Button'
+import { navigateToAppStore } from '../../utils/capacitor-app-update'
+
+export const RequiresUpdate: FC<PropsWithChildren> = ({ children }) => {
+  const { state: { requiresUpdate } } = useContext(IonicContext)
+
+  if (requiresUpdate === false) return children
+
+  const handleNavigateToAppStore = () => {
+    navigateToAppStore()
+  }
+
+  return (
+    <Box direction="row-responsive" background="background-back" fill style={{ minHeight: '100dvh' }}>
+      {requiresUpdate === undefined && <>Loading...</>}
+      {requiresUpdate === true && <>
+        This app requires an update to the latest version in order to operate correctly.
+        <Button
+          fill="horizontal"
+          label="Update application"
+          onClick={handleNavigateToAppStore}
+        />
+      </>}
+    </Box>
+  )
+}
diff --git a/src/app/components/Ionic/hooks/useIonicAppStateChangeListener.tsx b/src/app/components/Ionic/hooks/useIonicAppStateChangeListener.ts
similarity index 100%
rename from src/app/components/Ionic/hooks/useIonicAppStateChangeListener.tsx
rename to src/app/components/Ionic/hooks/useIonicAppStateChangeListener.ts
diff --git a/src/app/components/Ionic/hooks/useIonicRequiresUpdate.ts b/src/app/components/Ionic/hooks/useIonicRequiresUpdate.ts
new file mode 100644
index 0000000000..43c19ef676
--- /dev/null
+++ b/src/app/components/Ionic/hooks/useIonicRequiresUpdate.ts
@@ -0,0 +1,23 @@
+import { useEffect } from 'react'
+import { IonicProviderState } from '../providers/IonicContext'
+import { updateAvailable } from '../utils/capacitor-app-update'
+
+export const useIonicRequiresUpdate = (setState: (state: IonicProviderState) => void) => {
+  useEffect(() => {
+    let inProgress = true
+
+    const init = async () => {
+      const requiresUpdate = await updateAvailable()
+
+      if (inProgress) {
+        setState({ requiresUpdate })
+      }
+    }
+
+    init()
+
+    return () => {
+      inProgress = false
+    }
+  }, [])
+}
diff --git a/src/app/components/Ionic/providers/IonicContext.ts b/src/app/components/Ionic/providers/IonicContext.ts
new file mode 100644
index 0000000000..9ef73c172b
--- /dev/null
+++ b/src/app/components/Ionic/providers/IonicContext.ts
@@ -0,0 +1,17 @@
+import { createContext } from 'react'
+
+export interface IonicProviderState {
+  /**
+   * Indicates whether an update is required.
+   * In an undefined state, it indicates that the application is currently in loading phase.
+   *
+   * @type {boolean | undefined}
+   */
+  requiresUpdate: boolean | undefined
+}
+
+export interface IonicProviderContext {
+  readonly state: IonicProviderState
+}
+
+export const IonicContext = createContext<IonicProviderContext>({} as IonicProviderContext)
diff --git a/src/app/components/Ionic/providers/IonicProvider.tsx b/src/app/components/Ionic/providers/IonicProvider.tsx
new file mode 100644
index 0000000000..c32c761491
--- /dev/null
+++ b/src/app/components/Ionic/providers/IonicProvider.tsx
@@ -0,0 +1,23 @@
+import { FC, PropsWithChildren, useState } from 'react'
+import { useIonicBackButtonListener } from '../hooks/useIonicBackButtonListener'
+import { useIonicAppStateChangeListener } from '../hooks/useIonicAppStateChangeListener'
+import { IonicContext, IonicProviderContext, IonicProviderState } from './IonicContext'
+import { useIonicRequiresUpdate } from '../hooks/useIonicRequiresUpdate'
+
+const ionicProviderInitialState: IonicProviderState = {
+  requiresUpdate: undefined,
+}
+
+export const IonicContextProvider: FC<PropsWithChildren> = ({ children }) => {
+  const [state, setState] = useState<IonicProviderState>({ ...ionicProviderInitialState })
+
+  useIonicRequiresUpdate(setState)
+  useIonicAppStateChangeListener()
+  useIonicBackButtonListener()
+
+  const providerState: IonicProviderContext = {
+    state,
+  }
+
+  return <IonicContext.Provider value={providerState}>{children}</IonicContext.Provider>
+}
diff --git a/src/app/components/Ionic/utils/capacitor-app-update.ts b/src/app/components/Ionic/utils/capacitor-app-update.ts
new file mode 100644
index 0000000000..39cad848c6
--- /dev/null
+++ b/src/app/components/Ionic/utils/capacitor-app-update.ts
@@ -0,0 +1,29 @@
+import { AppUpdate, AppUpdateAvailability } from '@capawesome/capacitor-app-update'
+import { Capacitor } from '@capacitor/core'
+
+export const updateAvailable = async () => {
+  const result = await AppUpdate.getAppUpdateInfo()
+  const { updateAvailability, currentVersionCode, availableVersionCode } = result
+
+  if (updateAvailability === AppUpdateAvailability.UPDATE_IN_PROGRESS) {
+    return undefined
+  }
+
+  // TODO: Skips in case there is no internet connection
+  if (updateAvailability !== AppUpdateAvailability.UPDATE_AVAILABLE) {
+    return false
+  }
+
+  if (Capacitor.getPlatform() === 'android') {
+    // Example of version code -> "1", "2", ...
+    return parseInt(availableVersionCode ?? `${Number.MAX_SAFE_INTEGER}`, 10) > parseInt(currentVersionCode ?? '0', 10)
+  }
+
+  // TODO: Add for iOS
+  // Compare semVer between currentVersionName and availableVersionName
+  throw new Error('Unknown Capacitor platform!')
+}
+
+export const navigateToAppStore = async () => {
+  await AppUpdate.openAppStore()
+}
diff --git a/src/app/index.tsx b/src/app/index.tsx
index 0b9248f1d9..fa11b9b488 100644
--- a/src/app/index.tsx
+++ b/src/app/index.tsx
@@ -22,7 +22,7 @@ import { useRouteRedirects } from './useRouteRedirects'
 import { PersistLoadingGate } from 'app/components/Persist/PersistLoadingGate'
 import { UnlockGate } from 'app/components/Persist/UnlockGate'
 import { BuildBanner } from 'app/components/BuildBanner'
-import { IonicProvider } from './components/Ionic/IonicProvider'
+import { IonicNativePlatformProvider } from './components/Ionic/components/IonicNativePlatformProvider'
 
 export function App() {
   useRouteRedirects()
@@ -31,7 +31,7 @@ export function App() {
 
   return (
     <FatalErrorHandler>
-      <IonicProvider>
+      <IonicNativePlatformProvider>
         <ModalProvider>
           <Helmet
             titleTemplate="%s - ROSE Wallet"
@@ -57,7 +57,7 @@ export function App() {
             </PersistLoadingGate>
           </Box>
         </ModalProvider>
-      </IonicProvider>
+      </IonicNativePlatformProvider>
     </FatalErrorHandler>
   )
 }