Add Android update wall

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
+}

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>
+  )
+}

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
+    }
+  }, [])
+}

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)

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>
+}

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()
+}

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>
   )
 }