From ae16a884c48a6610eae1e1edd17b1e9f7ab2b946 Mon Sep 17 00:00:00 2001
From: Paul Miller <paul@paul.lol>
Date: Thu, 18 Apr 2024 16:14:57 -0500
Subject: [PATCH] handle no connection

---
 pnpm-lock.yaml                  |  1 -
 public/i18n/en.json             |  5 +++++
 src/components/NoConnection.tsx | 26 ++++++++++++++++++++++++++
 src/components/index.ts         |  1 +
 src/router.tsx                  |  4 ++++
 src/state/megaStore.tsx         | 16 +++++++++++++++-
 6 files changed, 51 insertions(+), 2 deletions(-)
 create mode 100644 src/components/NoConnection.tsx

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index ef1a9381..b00854ba 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -7656,7 +7656,6 @@ packages:
 
   /workbox-google-analytics@7.0.0:
     resolution: {integrity: sha512-MEYM1JTn/qiC3DbpvP2BVhyIH+dV/5BjHk756u9VbwuAhu0QHyKscTnisQuz21lfRpOwiS9z4XdqeVAKol0bzg==}
-    deprecated: It is not compatible with newer versions of GA starting with v4, as long as you are using GAv3 it should be ok, but the package is not longer being maintained
     dependencies:
       workbox-background-sync: 7.0.0
       workbox-core: 7.0.0
diff --git a/public/i18n/en.json b/public/i18n/en.json
index 888852d5..d1340d8c 100644
--- a/public/i18n/en.json
+++ b/public/i18n/en.json
@@ -782,5 +782,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"
   }
 }
diff --git a/src/components/NoConnection.tsx b/src/components/NoConnection.tsx
new file mode 100644
index 00000000..516c7e05
--- /dev/null
+++ b/src/components/NoConnection.tsx
@@ -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>
+    );
+}
diff --git a/src/components/index.ts b/src/components/index.ts
index d3b21602..986a540b 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -56,3 +56,4 @@ export * from "./EditProfileForm";
 export * from "./ImportNsecForm";
 export * from "./LightningAddressShower";
 export * from "./FederationInviteShower";
+export * from "./NoConnection";
diff --git a/src/router.tsx b/src/router.tsx
index 474dffb9..79399eb8 100644
--- a/src/router.tsx
+++ b/src/router.tsx
@@ -16,6 +16,7 @@ import {
 import {
     ErrorDisplay,
     I18nProvider,
+    NoConnection,
     SetupErrorDisplay,
     Toaster
 } from "~/components";
@@ -75,6 +76,9 @@ function ChildrenOrError(props: { children: JSX.Element }) {
 
     return (
         <Switch>
+            <Match when={state.network_status?.connectionType === "none"}>
+                <NoConnection />
+            </Match>
             <Match when={state.setup_error}>
                 <SetupErrorDisplay
                     initialError={state.setup_error!}
diff --git a/src/state/megaStore.tsx b/src/state/megaStore.tsx
index 8bd49230..30cd2f2f 100644
--- a/src/state/megaStore.tsx
+++ b/src/state/megaStore.tsx
@@ -1,4 +1,8 @@
 // Inspired by https://github.com/solidjs/solid-realworld/blob/main/src/store/index.js
+import {
+    Network as CapacitorNetwork,
+    ConnectionStatus
+} from "@capacitor/network";
 import { MutinyBalance, TagItem } from "@mutinywallet/mutiny-wasm";
 import { useNavigate, useSearchParams } from "@solidjs/router";
 import { SecureStoragePlugin } from "capacitor-secure-storage-plugin";
@@ -87,7 +91,8 @@ export const makeMegaStoreContext = () => {
         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 = {
@@ -506,6 +511,9 @@ export const makeMegaStoreContext = () => {
                     channel.postMessage({ type: "EXISTING_TAB" });
                 }
             };
+        },
+        setNetworkStatus(status: ConnectionStatus) {
+            setState({ network_status: status });
         }
     };
 
@@ -521,6 +529,12 @@ export const Provider: ParentComponent = (props) => {
     const [state, actions, sw] = makeMegaStoreContext();
 
     onMount(async () => {
+        const _networkListener = CapacitorNetwork.addListener(
+            "networkStatusChange",
+            async (status) => {
+                actions.setNetworkStatus(status);
+            }
+        );
         const shouldSetup = await actions.preSetup();
         console.log("Should run setup?", shouldSetup);
         if (