Merge pull request #1928 from oasisprotocol/ml/android-back-button

Fix physical back button behavior on Android
oasisprotocol · May 13, 2024 · 3179047 · 3179047
2 parents fd4cdd8 + 84e0636
commit 3179047
Show file tree

Hide file tree

Showing 9 changed files with 132 additions and 72 deletions.
diff --git a/.changelog/1928.bugfix.md b/.changelog/1928.bugfix.md
@@ -0,0 +1 @@
+Fix physical back button behavior on Android
diff --git a/android/app/capacitor.build.gradle b/android/app/capacitor.build.gradle
@@ -10,6 +10,7 @@ android {
 apply from: "../capacitor-cordova-android-plugins/cordova.variables.gradle"
 dependencies {
     implementation project(':capacitor-community-bluetooth-le')
+    implementation project(':capacitor-app')
 
 }
 

diff --git a/android/capacitor.settings.gradle b/android/capacitor.settings.gradle
@@ -4,3 +4,6 @@ project(':capacitor-android').projectDir = new File('../node_modules/@capacitor/
 
 include ':capacitor-community-bluetooth-le'
 project(':capacitor-community-bluetooth-le').projectDir = new File('../node_modules/@capacitor-community/bluetooth-le/android')
+
+include ':capacitor-app'
+project(':capacitor-app').projectDir = new File('../node_modules/@capacitor/app/android')
diff --git a/ios/App/Podfile b/ios/App/Podfile
@@ -12,6 +12,7 @@ def capacitor_pods
   pod 'Capacitor', :path => '../../node_modules/@capacitor/ios'
   pod 'CapacitorCordova', :path => '../../node_modules/@capacitor/ios'
   pod 'CapacitorCommunityBluetoothLe', :path => '../../node_modules/@capacitor-community/bluetooth-le'
+  pod 'CapacitorApp', :path => '../../node_modules/@capacitor/app'
 end
 
 target 'App' do

diff --git a/package.json b/package.json
@@ -60,6 +60,7 @@
   "dependencies": {
     "@capacitor-community/bluetooth-le": "3.0.0",
     "@capacitor/android": "5.0.4",
+    "@capacitor/app": "5.0.5",
     "@capacitor/core": "5.0.4",
     "@capacitor/ios": "5.0.4",
     "@ethereumjs/util": "9.0.3",

diff --git a/src/app/__tests__/__snapshots__/index.test.tsx.snap b/src/app/__tests__/__snapshots__/index.test.tsx.snap
@@ -2,55 +2,57 @@
 
 exports[`<App /> should render and match the snapshot 1`] = `
 <FatalErrorHandler>
-  <ModalProvider>
-    <Helmet
-      defaultTitle="ROSE Wallet"
-      defer={true}
-      encodeSpecialCharacters={true}
-      htmlAttributes={
-        {
-          "lang": "en-US",
+  <IonicProvider>
+    <ModalProvider>
+      <Helmet
+        defaultTitle="ROSE Wallet"
+        defer={true}
+        encodeSpecialCharacters={true}
+        htmlAttributes={
+          {
+            "lang": "en-US",
+          }
         }
-      }
-      prioritizeSeoTags={false}
-      titleTemplate="%s - ROSE Wallet"
-    >
-      <meta
-        content="A wallet for Oasis"
-        name="description"
-      />
-    </Helmet>
-    <BuildBanner />
-    <Box
-      background="background-back"
-      direction="row-responsive"
-      fill={true}
-      style={
-        {
-          "minHeight": "100dvh",
+        prioritizeSeoTags={false}
+        titleTemplate="%s - ROSE Wallet"
+      >
+        <meta
+          content="A wallet for Oasis"
+          name="description"
+        />
+      </Helmet>
+      <BuildBanner />
+      <Box
+        background="background-back"
+        direction="row-responsive"
+        fill={true}
+        style={
+          {
+            "minHeight": "100dvh",
+          }
         }
-      }
-    >
-      <PersistLoadingGate>
-        <UnlockGate>
-          <Navigation />
-          <Box
-            flex={true}
-            pad={
-              {
-                "top": undefined,
+      >
+        <PersistLoadingGate>
+          <UnlockGate>
+            <Navigation />
+            <Box
+              flex={true}
+              pad={
+                {
+                  "top": undefined,
+                }
               }
-            }
-          >
-            <Main>
-              <Toolbar />
-              <Outlet />
-              <Memo />
-            </Main>
-          </Box>
-        </UnlockGate>
-      </PersistLoadingGate>
-    </Box>
-  </ModalProvider>
+            >
+              <Main>
+                <Toolbar />
+                <Outlet />
+                <Memo />
+              </Main>
+            </Box>
+          </UnlockGate>
+        </PersistLoadingGate>
+      </Box>
+    </ModalProvider>
+  </IonicProvider>
 </FatalErrorHandler>
 `;
diff --git a/src/app/components/Ionic/IonicProvider.tsx b/src/app/components/Ionic/IonicProvider.tsx
@@ -0,0 +1,43 @@
+import { createContext, FC, PropsWithChildren, useEffect } from 'react'
+import { useNavigate } from 'react-router-dom'
+import { Capacitor, type PluginListenerHandle } from '@capacitor/core'
+import { App } from '@capacitor/app'
+
+const IonicContext = createContext<undefined>(undefined)
+
+let backButtonListenerHandle: PluginListenerHandle | undefined
+
+const IonicContextProvider: FC<PropsWithChildren> = ({ children }) => {
+  const navigate = useNavigate()
+
+  useEffect(() => {
+    /**
+     * The back button refers to the physical back button on an Android device and should not be confused
+     * with either the browser back button or ion-back-button.
+     */
+    backButtonListenerHandle = App.addListener('backButton', ({ canGoBack }) => {
+      if (!canGoBack) {
+        App.exitApp()
+      } else {
+        navigate(-1)
+      }
+    })
+
+    return () => {
+      if (backButtonListenerHandle) {
+        backButtonListenerHandle.remove()
+        backButtonListenerHandle = undefined
+      }
+    }
+  }, [navigate])
+
+  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/index.tsx b/src/app/index.tsx
@@ -22,6 +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'
 
 export function App() {
   useRouteRedirects()
@@ -30,31 +31,33 @@ export function App() {
 
   return (
     <FatalErrorHandler>
-      <ModalProvider>
-        <Helmet
-          titleTemplate="%s - ROSE Wallet"
-          defaultTitle="ROSE Wallet"
-          htmlAttributes={{ lang: i18n.language }}
-        >
-          <meta name="description" content="A wallet for Oasis" />
-        </Helmet>
-        {!isMobile && <BuildBanner />}
-        <Box direction="row-responsive" background="background-back" fill style={{ minHeight: '100dvh' }}>
-          <PersistLoadingGate>
-            <UnlockGate>
-              <Navigation />
-              <Box flex pad={{ top: isMobile ? '64px' : undefined }}>
-                <Main>
-                  {isMobile && <BuildBanner />}
-                  <Toolbar />
-                  <Outlet />
-                  <Footer />
-                </Main>
-              </Box>
-            </UnlockGate>
-          </PersistLoadingGate>
-        </Box>
-      </ModalProvider>
+      <IonicProvider>
+        <ModalProvider>
+          <Helmet
+            titleTemplate="%s - ROSE Wallet"
+            defaultTitle="ROSE Wallet"
+            htmlAttributes={{ lang: i18n.language }}
+          >
+            <meta name="description" content="A wallet for Oasis" />
+          </Helmet>
+          {!isMobile && <BuildBanner />}
+          <Box direction="row-responsive" background="background-back" fill style={{ minHeight: '100dvh' }}>
+            <PersistLoadingGate>
+              <UnlockGate>
+                <Navigation />
+                <Box flex pad={{ top: isMobile ? '64px' : undefined }}>
+                  <Main>
+                    {isMobile && <BuildBanner />}
+                    <Toolbar />
+                    <Outlet />
+                    <Footer />
+                  </Main>
+                </Box>
+              </UnlockGate>
+            </PersistLoadingGate>
+          </Box>
+        </ModalProvider>
+      </IonicProvider>
     </FatalErrorHandler>
   )
 }
diff --git a/yarn.lock b/yarn.lock
@@ -1158,6 +1158,11 @@
   resolved "https://registry.yarnpkg.com/@capacitor/android/-/android-5.0.4.tgz#aa6497782bae0851553682126a6051157fe932b5"
   integrity sha512-WtXmjRQ0bCtFkwBID/jVEPbqnh0uR9wTSgkW7QNzogDuA0iyJJI2nxDfT9knUmg6mne/CnfTXg093zzdc13C0w==
 
+"@capacitor/[email protected]":
+  version "5.0.5"
+  resolved "https://registry.yarnpkg.com/@capacitor/app/-/app-5.0.5.tgz#b80cc5f1444ad9dec51df22cdef1a35c4690eb83"
+  integrity sha512-CedAa0aSQu8yNWqgZXWQfcjIg6uzPNdJQPW5CTyT6dA/U7KuJ10YVA6MhoryCUVthnMJqVj9lYqqxyFsSXjzqw==
+
 "@capacitor/[email protected]":
   version "5.0.4"
   resolved "https://registry.yarnpkg.com/@capacitor/cli/-/cli-5.0.4.tgz#f8d31f32262e457b2a8e31f76295c15b5c6f57b8"