From 754b8ab7c2bf5b4b563c5b1e2b23b8e09dd8ecc7 Mon Sep 17 00:00:00 2001
From: Paul Miller <paul@paul.lol>
Date: Wed, 16 Aug 2023 15:23:31 -0500
Subject: [PATCH] add safe mode view

---
 src/components/App.tsx               |  2 +-
 src/components/BalanceBox.tsx        | 49 +++++++++++++++++++---------
 src/components/SetupErrorDisplay.tsx | 12 +++++++
 src/i18n/en/translations.ts          |  9 +++--
 src/logic/mutinyWalletSetup.ts       |  8 +++--
 src/state/megaStore.tsx              | 10 ++++--
 6 files changed, 67 insertions(+), 23 deletions(-)

diff --git a/src/components/App.tsx b/src/components/App.tsx
index bc4fa69f..0716963c 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -69,7 +69,7 @@ export default function App() {
                 </Show>
                 <BalanceBox loading={state.wallet_loading} />
                 <Suspense>
-                    <Show when={!state.wallet_loading}>
+                    <Show when={!state.wallet_loading && !state.safe_mode}>
                         <PendingNwc />
                     </Show>
                 </Suspense>
diff --git a/src/components/BalanceBox.tsx b/src/components/BalanceBox.tsx
index 2e6b561f..dc3a2b26 100644
--- a/src/components/BalanceBox.tsx
+++ b/src/components/BalanceBox.tsx
@@ -1,10 +1,11 @@
-import { Show } from "solid-js";
+import { Match, Show, Switch } from "solid-js";
 import { Button, FancyCard, Indicator } from "~/components/layout";
 import { useMegaStore } from "~/state/megaStore";
 import { AmountSats, AmountFiat } from "./Amount";
 import { A, useNavigate } from "solid-start";
 import shuffle from "~/assets/icons/shuffle.svg";
 import { useI18n } from "~/i18n/context";
+import { InfoBox } from "./InfoBox";
 
 export function LoadingShimmer() {
     return (
@@ -43,22 +44,38 @@ export default function BalanceBox(props: { loading?: boolean }) {
         <>
             <FancyCard>
                 <Show when={!props.loading} fallback={<LoadingShimmer />}>
-                    <div class="flex flex-col gap-1">
-                        <div class="text-2xl">
-                            <AmountSats
-                                amountSats={state.balance?.lightning || 0}
-                                icon="lightning"
-                                denominationSize="lg"
-                            />
-                        </div>
-                        <div class="text-lg text-white/70">
-                            <AmountFiat
-                                amountSats={state.balance?.lightning || 0}
-                                denominationSize="sm"
-                            />
-                        </div>
-                    </div>
+                    <Switch>
+                        <Match when={state.safe_mode}>
+                            <div class="flex flex-col gap-1">
+                                <InfoBox accent="red">
+                                    {i18n.t("common.error_safe_mode")}
+                                </InfoBox>
+                            </div>
+                        </Match>
+                        <Match when={true}>
+                            <div class="flex flex-col gap-1">
+                                <div class="text-2xl">
+                                    <AmountSats
+                                        amountSats={
+                                            state.balance?.lightning || 0
+                                        }
+                                        icon="lightning"
+                                        denominationSize="lg"
+                                    />
+                                </div>
+                                <div class="text-lg text-white/70">
+                                    <AmountFiat
+                                        amountSats={
+                                            state.balance?.lightning || 0
+                                        }
+                                        denominationSize="sm"
+                                    />
+                                </div>
+                            </div>
+                        </Match>
+                    </Switch>
                 </Show>
+
                 <hr class="my-2 border-m-grey-750" />
                 <Show when={!props.loading} fallback={<LoadingShimmer />}>
                     <div class="flex justify-between">
diff --git a/src/components/SetupErrorDisplay.tsx b/src/components/SetupErrorDisplay.tsx
index 4471ab35..f245a4b7 100644
--- a/src/components/SetupErrorDisplay.tsx
+++ b/src/components/SetupErrorDisplay.tsx
@@ -60,6 +60,18 @@ export default function SetupErrorDisplay(props: { initialError: Error }) {
                             </ExternalLink>{" "}
                             for updates.
                         </NiceP>
+                        <NiceP>
+                            {i18n.t(
+                                "error.on_boot.loading_failed.in_the_meantime"
+                            )}{" "}
+                            <a href="/?safe_mode=true">
+                                {" "}
+                                {i18n.t(
+                                    "error.on_boot.loading_failed.safe_mode"
+                                )}
+                            </a>
+                            .
+                        </NiceP>
 
                         <ErrorFooter />
                     </DefaultMain>
diff --git a/src/i18n/en/translations.ts b/src/i18n/en/translations.ts
index db73cd7b..5ec085bc 100644
--- a/src/i18n/en/translations.ts
+++ b/src/i18n/en/translations.ts
@@ -19,7 +19,9 @@ export default {
         why: "Why?",
         private_tags: "Private tags",
         view_transaction: "View Transaction",
-        pending: "Pending"
+        pending: "Pending",
+        error_safe_mode:
+            "Mutiny is running in safe mode. Lightning is disabled."
     },
     contacts: {
         new: "new",
@@ -479,7 +481,10 @@ export default {
                     "If you have any questions on what these buttons do, please",
                 support_link: "reach out to us for support.",
                 services_down:
-                    "It looks like one of Mutiny's services is down. Please try again later."
+                    "It looks like one of Mutiny's services is down. Please try again later.",
+                in_the_meantime:
+                    "In the meantime if you want to access your on-chain funds you can load Mutiny in",
+                safe_mode: "Safe Mode"
             }
         }
     },
diff --git a/src/logic/mutinyWalletSetup.ts b/src/logic/mutinyWalletSetup.ts
index 18b4e1d0..d2b28cd7 100644
--- a/src/logic/mutinyWalletSetup.ts
+++ b/src/logic/mutinyWalletSetup.ts
@@ -163,7 +163,8 @@ export async function initializeWasm() {
 
 export async function setupMutinyWallet(
     settings: MutinyWalletSettingStrings,
-    password?: string
+    password?: string,
+    safeMode?: boolean
 ): Promise<MutinyWallet> {
     console.log("Starting setup...");
 
@@ -189,6 +190,7 @@ export async function setupMutinyWallet(
     console.log("Using subscriptions address", subscriptions);
     console.log("Using storage address", storage);
     console.log("Using scorer address", scorer);
+    console.log(safeMode ? "Safe mode enabled" : "Safe mode disabled");
 
     const mutinyWallet = await new MutinyWallet(
         // Password
@@ -207,7 +209,9 @@ export async function setupMutinyWallet(
         // Do not connect peers
         undefined,
         // Do not skip device lock
-        undefined
+        undefined,
+        // Safe mode
+        safeMode || undefined
     );
 
     sessionStorage.setItem("MUTINY_WALLET_INITIALIZED", Date.now().toString());
diff --git a/src/state/megaStore.tsx b/src/state/megaStore.tsx
index 8fb082f5..57a3634c 100644
--- a/src/state/megaStore.tsx
+++ b/src/state/megaStore.tsx
@@ -24,6 +24,7 @@ import eify from "~/utils/eify";
 import { timeout } from "~/utils/timeout";
 import { ParsedParams } from "~/logic/waila";
 import { subscriptionValid } from "~/utils/subscriptions";
+import { useSearchParams } from "solid-start";
 
 const MegaStoreContext = createContext<MegaStore>();
 
@@ -53,6 +54,7 @@ export type MegaStore = [
         needs_password: boolean;
         load_stage: LoadStage;
         settings?: MutinyWalletSettingStrings;
+        safe_mode?: boolean;
     },
     {
         setup(password?: string): Promise<void>;
@@ -67,6 +69,8 @@ export type MegaStore = [
 ];
 
 export const Provider: ParentComponent = (props) => {
+    const [searchParams] = useSearchParams();
+
     const [state, setState] = createStore({
         mutiny_wallet: undefined as MutinyWallet | undefined,
         deleting: false,
@@ -87,7 +91,8 @@ export const Provider: ParentComponent = (props) => {
         },
         needs_password: false,
         load_stage: "fresh" as LoadStage,
-        settings: undefined as MutinyWalletSettingStrings | undefined
+        settings: undefined as MutinyWalletSettingStrings | undefined,
+        safe_mode: searchParams.safe_mode === "true"
     });
 
     const actions = {
@@ -132,7 +137,8 @@ export const Provider: ParentComponent = (props) => {
 
                 const mutinyWallet = await setupMutinyWallet(
                     settings,
-                    password
+                    password,
+                    state.safe_mode
                 );
 
                 // Give other components access to settings via the store