handle no connection

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

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

src/components/index.ts

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

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

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 (