add emergency kit and new error states

src/components/DeleteEverything.tsx

@@ -1,3 +1,4 @@
+import initMutinyWallet, { MutinyWallet } from "@mutinywallet/mutiny-wasm";
 import { createSignal } from "solid-js";
 import { ConfirmDialog } from "~/components/Dialog";
 import { Button } from "~/components/layout";
@@ -5,8 +6,8 @@ import { showToast } from "~/components/Toaster";
 import { useMegaStore } from "~/state/megaStore";
 import eify from "~/utils/eify";
 
-export function DeleteEverything() {
-    const [_state, actions] = useMegaStore();
+export function DeleteEverything(props: { emergency?: boolean }) {
+    const [state, actions] = useMegaStore();
 
     async function confirmReset() {
         setConfirmOpen(true);
@@ -18,7 +19,21 @@ export function DeleteEverything() {
     async function resetNode() {
         try {
             setConfirmLoading(true);
-            await actions.deleteMutinyWallet();
+            // If we're in a context where the wallet is loaded we want to use the regular action to delete it
+            // Otherwise we just call the import_json method directly
+            if (state.mutiny_wallet && !props.emergency) {
+                try {
+                    await actions.deleteMutinyWallet();
+                } catch (e) {
+                    // If we can't stop we want to keep going
+                    console.error(e);
+                }
+            } else {
+                // If there's no mutiny_wallet loaded we might need to initialize WASM
+                await initMutinyWallet();
+                await MutinyWallet.import_json("{}");
+            }
+
             showToast({ title: "Deleted", description: `Deleted all data` });
 
             setTimeout(() => {

src/components/ErrorDisplay.tsx

@@ -1,11 +1,13 @@
-import { Title } from "solid-start";
+import { A, Title } from "solid-start";
 import {
     Button,
     DefaultMain,
     LargeHeader,
+    NiceP,
     SafeArea,
     SmallHeader
 } from "~/components/layout";
+import { ExternalLink } from "./layout/ExternalLink";
 
 export default function ErrorDisplay(props: { error: Error }) {
     return (
@@ -18,6 +20,17 @@ export default function ErrorDisplay(props: { error: Error }) {
                     <span class="font-bold">{props.error.name}</span>:{" "}
                     {props.error.message}
                 </p>
+                <NiceP>
+                    Try reloading this page or clicking the "Dangit" button. If
+                    you keep having problems,{" "}
+                    <ExternalLink href="https://matrix.to/#/#mutiny-community:lightninghackers.com">
+                        reach out to us for support.
+                    </ExternalLink>
+                </NiceP>
+                <NiceP>
+                    Getting desperate? Try the{" "}
+                    <A href="/emergencykit">emergency kit.</A>
+                </NiceP>
                 <div class="h-full" />
                 <Button
                     onClick={() => (window.location.href = "/")}

src/components/ImportExport.tsx

@@ -6,13 +6,13 @@ import { showToast } from "./Toaster";
 import { downloadTextFile } from "~/utils/download";
 import { createFileUploader } from "@solid-primitives/upload";
 import { ConfirmDialog } from "./Dialog";
-import { MutinyWallet } from "@mutinywallet/mutiny-wasm";
+import initMutinyWallet, { MutinyWallet } from "@mutinywallet/mutiny-wasm";
 
-export function ImportExport() {
+export function ImportExport(props: { emergency?: boolean }) {
     const [state, _] = useMegaStore();
 
     async function handleSave() {
-        const json = await state.mutiny_wallet?.export_json();
+        const json = await MutinyWallet.export_json();
         downloadTextFile(json || "", "mutiny-state.json");
     }
 
@@ -39,17 +39,28 @@ export function ImportExport() {
                 fileReader.readAsText(file, "UTF-8");
             });
 
+            if (state.mutiny_wallet && !props.emergency) {
+                console.log("Mutiny wallet loaded, stopping");
+                try {
+                    await state.mutiny_wallet.stop();
+                } catch (e) {
+                    console.error(e);
+                }
+            } else {
+                // If there's no mutiny wallet loaded we need to initialize WASM
+                console.log("Initializing WASM");
+                await initMutinyWallet();
+            }
+
             // This should throw if there's a parse error, so we won't end up clearing
             if (text) {
                 JSON.parse(text);
-                MutinyWallet.import_json(text);
+                await MutinyWallet.import_json(text);
             }
 
-            if (state.mutiny_wallet) {
-                await state.mutiny_wallet.stop();
-            }
-
-            window.location.href = "/";
+            setTimeout(() => {
+                window.location.href = "/";
+            }, 1000);
         } catch (e) {
             showToast(eify(e));
         } finally {

src/components/Logs.tsx

@@ -1,13 +1,12 @@
+import { MutinyWallet } from "@mutinywallet/mutiny-wasm";
 import { Button, InnerCard, NiceP, VStack } from "~/components/layout";
-import { useMegaStore } from "~/state/megaStore";
 import { downloadTextFile } from "~/utils/download";
 
 export function Logs() {
-    const [state, _] = useMegaStore();
-
     async function handleSave() {
         try {
-            const logs = await state.mutiny_wallet?.get_logs();
+            const logs = await MutinyWallet.get_logs();
+
             downloadTextFile(
                 logs.join("") || "",
                 "mutiny-logs.txt",

src/components/SetupErrorDisplay.tsx

@@ -1,7 +1,32 @@
 import { Title } from "solid-start";
-import { DefaultMain, LargeHeader, NiceP, SafeArea } from "~/components/layout";
+import {
+    DefaultMain,
+    LargeHeader,
+    NiceP,
+    SafeArea,
+    SmallHeader
+} from "~/components/layout";
 import { ExternalLink } from "./layout/ExternalLink";
 import { Match, Switch } from "solid-js";
+import { ImportExport } from "./ImportExport";
+import { Logs } from "./Logs";
+import { DeleteEverything } from "./DeleteEverything";
+
+function ErrorFooter() {
+    return (
+        <>
+            <div class="h-full" />
+            <p class="self-center text-neutral-500 mt-4">
+                Bugs? Feedback?{" "}
+                <span class="text-neutral-400">
+                    <ExternalLink href="https://github.com/MutinyWallet/mutiny-web/issues">
+                        Create an issue
+                    </ExternalLink>
+                </span>
+            </p>
+        </>
+    );
+}
 
 export default function SetupErrorDisplay(props: { error: Error }) {
     return (
@@ -22,18 +47,10 @@ export default function SetupErrorDisplay(props: { error: Error }) {
                             this page, or close this tab and refresh the other
                             one.
                         </NiceP>
-                        <div class="h-full" />
-                        <p class="self-center text-neutral-500 mt-4">
-                            Bugs? Feedback?{" "}
-                            <span class="text-neutral-400">
-                                <ExternalLink href="https://github.com/MutinyWallet/mutiny-web/issues">
-                                    Create an issue
-                                </ExternalLink>
-                            </span>
-                        </p>
+                        <ErrorFooter />
                     </DefaultMain>
                 </Match>
-                <Match when={true}>
+                <Match when={props.error.message.startsWith("Browser error")}>
                     <Title>Incompatible browser</Title>
                     <DefaultMain>
                         <LargeHeader>Incompatible browser detected</LargeHeader>
@@ -61,15 +78,39 @@ export default function SetupErrorDisplay(props: { error: Error }) {
                             Supported Browsers
                         </ExternalLink>
 
-                        <div class="h-full" />
-                        <p class="self-center text-neutral-500 mt-4">
-                            Bugs? Feedback?{" "}
-                            <span class="text-neutral-400">
-                                <ExternalLink href="https://github.com/MutinyWallet/mutiny-web/issues">
-                                    Create an issue
-                                </ExternalLink>
-                            </span>
+                        <ErrorFooter />
+                    </DefaultMain>
+                </Match>
+                <Match when={true}>
+                    <Title>Failed to load</Title>
+                    <DefaultMain>
+                        <LargeHeader>Failed to load Mutiny</LargeHeader>
+                        <p class="bg-white/10 rounded-xl p-4 font-mono">
+                            <span class="font-bold">{props.error.name}</span>:{" "}
+                            {props.error.message}
                         </p>
+                        <NiceP>
+                            Something went wrong while booting up Mutiny Wallet.
+                        </NiceP>
+                        <NiceP>
+                            If your wallet seems broken, here are some tools to
+                            try to debug and repair it.
+                        </NiceP>
+                        <NiceP>
+                            If you have any questions on what these buttons do,
+                            please{" "}
+                            <ExternalLink href="https://matrix.to/#/#mutiny-community:lightninghackers.com">
+                                reach out to us for support.
+                            </ExternalLink>
+                        </NiceP>
+                        <ImportExport emergency />
+                        <Logs />
+                        <div class="rounded-xl p-4 flex flex-col gap-2 bg-m-red">
+                            <SmallHeader>Danger zone</SmallHeader>
+                            <DeleteEverything emergency />
+                        </div>
+
+                        <ErrorFooter />
                     </DefaultMain>
                 </Match>
             </Switch>

src/components/layout/index.tsx

@@ -1,4 +1,11 @@
-import { JSX, ParentComponent, Show, Suspense, createResource } from "solid-js";
+import {
+    JSX,
+    ParentComponent,
+    Show,
+    Suspense,
+    createResource,
+    createSignal
+} from "solid-js";
 import Linkify from "./Linkify";
 import { Button, ButtonLink } from "./Button";
 import { Checkbox as KCheckbox, Separator } from "@kobalte/core";
@@ -7,6 +14,7 @@ import check from "~/assets/icons/check.svg";
 import { MutinyTagItem } from "~/utils/tags";
 import { generateGradient } from "~/utils/gradientHash";
 import close from "~/assets/icons/close.svg";
+import { A } from "solid-start";
 
 export { Button, ButtonLink, Linkify };
 
@@ -84,9 +92,24 @@ export const DefaultMain: ParentComponent = (props) => {
 };
 
 export const FullscreenLoader = () => {
+    const [waitedTooLong, setWaitedTooLong] = createSignal(false);
+
+    setTimeout(() => {
+        setWaitedTooLong(true);
+    }, 10000);
+
     return (
-        <div class="w-full h-[100dvh] flex justify-center items-center">
+        <div class="w-full h-[100dvh] flex flex-col gap-4 justify-center items-center">
             <LoadingSpinner wide />
+            <Show when={waitedTooLong()}>
+                <p class="max-w-[20rem] text-neutral-400">
+                    Stuck on this screen? Try reloading. If that doesn't work,
+                    check out the{" "}
+                    <A class="text-white" href="/emergencykit">
+                        emergency kit.
+                    </A>
+                </p>
+            </Show>
         </div>
     );
 };