handle no connection

Author: futurepaul

package.json

@@ -39,7 +39,6 @@
         "workbox-window": "^7.0.0"
     },
     "dependencies": {
-        "i18next-http-backend": "^2.5.0",
         "@capacitor-mlkit/barcode-scanning": "^5.3.0",
         "@capacitor/android": "^5.5.1",
         "@capacitor/app": "^5.0.6",
@@ -49,19 +48,21 @@
         "@capacitor/filesystem": "^5.1.4",
         "@capacitor/haptics": "^5.0.6",
         "@capacitor/ios": "^5.5.1",
+        "@capacitor/network": "^6.0.0",
         "@capacitor/share": "^5.0.6",
         "@capacitor/status-bar": "^5.0.6",
         "@capacitor/toast": "^5.0.6",
         "@kobalte/core": "^0.12.6",
         "@kobalte/tailwindcss": "^0.9.0",
-        "@mutinywallet/mutiny-wasm": "0.6.5",
         "@modular-forms/solid": "^0.20.0",
+        "@mutinywallet/mutiny-wasm": "0.6.5",
         "@solid-primitives/upload": "^0.0.117",
         "@solidjs/meta": "^0.29.3",
         "@solidjs/router": "^0.13.1",
         "capacitor-secure-storage-plugin": "^0.9.0",
         "i18next": "^23.10.1",
         "i18next-browser-languagedetector": "^7.1.0",
+        "i18next-http-backend": "^2.5.0",
         "lucide-solid": "^0.363.0",
         "qr-scanner": "^1.4.2",
         "solid-js": "^1.8.16",

pnpm-lock.yaml

@@ -780,5 +780,10 @@
     "nowish": "Nowish",
     "seconds_future": "Seconds from now",
     "seconds_past": "Just now"
+  },
+  "no_connection": {
+    "title": "No internet connection",
+    "prompt": "Get back online to start using Mutiny.",
+    "reload": "Reload"
   }
 }

public/i18n/en.json

@@ -0,0 +1,26 @@
+import { WifiOff } from "lucide-solid";
+
+import { Button, DefaultMain } from "~/components/layout";
+import { useI18n } from "~/i18n/context";
+
+export function NoConnection() {
+    const i18n = useI18n();
+    return (
+        <DefaultMain>
+            <div class="mx-auto flex max-w-[20rem] flex-1 flex-col items-center gap-4">
+                <div class="flex-1" />
+                <WifiOff class="h-8 w-8" />
+                <h1 class="text-center text-3xl font-semibold">
+                    {i18n.t("no_connection.title")}
+                </h1>
+                <p class="text-center text-xl font-light text-m-grey-350">
+                    {i18n.t("no_connection.prompt")}
+                </p>
+                <div class="flex-1" />
+                <Button layout="full" onClick={() => window.location.reload()}>
+                    {i18n.t("no_connection.reload")}
+                </Button>
+            </div>
+        </DefaultMain>
+    );
+}

src/components/NoConnection.tsx

@@ -58,3 +58,4 @@ export * from "./EditProfileForm";
 export * from "./ImportNsecForm";
 export * from "./LightningAddressShower";
 export * from "./FederationInviteShower";
+export * from "./NoConnection";

src/components/index.ts

@@ -15,6 +15,7 @@ import {
 import {
     ErrorDisplay,
     I18nProvider,
+    NoConnection,
     SetupErrorDisplay,
     Toaster
 } from "~/components";
@@ -125,6 +126,9 @@ function ChildrenOrError(props: { children: JSX.Element }) {
                     password={state.password}
                 />
             </Match>
+            <Match when={state.network_status?.connectionType === "none"}>
+                <NoConnection />
+            </Match>
             <Match when={true}>{props.children}</Match>
         </Switch>
     );

src/router.tsx

@@ -1,6 +1,7 @@
 /* @refresh reload */
 
 // Inspired by https://github.com/solidjs/solid-realworld/blob/main/src/store/index.js
+import { ConnectionStatus, Network } from "@capacitor/network";
 import {
     MutinyBalance,
     MutinyWallet,
@@ -74,6 +75,7 @@ type MegaStore = [
         should_zap_hodl: boolean;
         federations?: MutinyFederationIdentity[];
         balanceView: "sats" | "fiat" | "hidden";
+        network_status?: ConnectionStatus;
     },
     {
         setup(password?: string): Promise<void>;
@@ -140,7 +142,8 @@ export const Provider: ParentComponent = (props) => {
         testflightPromptDismissed:
             localStorage.getItem("testflightPromptDismissed") === "true",
         federations: undefined as MutinyFederationIdentity[] | undefined,
-        balanceView: localStorage.getItem("balanceView") || "sats"
+        balanceView: localStorage.getItem("balanceView") || "sats",
+        network_status: undefined as ConnectionStatus | undefined
     });
 
     const actions = {
@@ -527,6 +530,15 @@ export const Provider: ParentComponent = (props) => {
             return;
         }
 
+        const _networkListener = Network.addListener(
+            "networkStatusChange",
+            async (status) => {
+                setState({
+                    network_status: status
+                });
+            }
+        );
+
         console.log("checking for browser compatibility");
         try {
             await checkBrowserCompatibility();