From 1732270ff45a7ae8b94e32bb4c9c6120c5692289 Mon Sep 17 00:00:00 2001
From: Paul Miller <paul@paul.lol>
Date: Mon, 19 Aug 2024 14:11:45 -0500
Subject: [PATCH] add shutdown popup warning

---
 e2e/encrypt.spec.ts              |  8 ++++++-
 e2e/utils.ts                     |  6 ++++++
 public/i18n/en.json              |  4 ++++
 src/components/Activity.tsx      |  2 ++
 src/components/ShutdownPopup.tsx | 36 ++++++++++++++++++++++++++++++++
 src/components/index.ts          |  1 +
 src/state/megaStore.tsx          |  7 ++++++-
 7 files changed, 62 insertions(+), 2 deletions(-)
 create mode 100644 src/components/ShutdownPopup.tsx

diff --git a/e2e/encrypt.spec.ts b/e2e/encrypt.spec.ts
index 5cee5e0a..d5e3159e 100644
--- a/e2e/encrypt.spec.ts
+++ b/e2e/encrypt.spec.ts
@@ -81,6 +81,12 @@ test("test local encrypt", async ({ page }) => {
     // Click the "Decrypt Wallet" button
     await page.click("text=Decrypt Wallet");
 
-    // Wait for an element matching the selector to appear in DOM.
+    // Should have a balance up top now
     await page.locator(`text=0 sats`).first().waitFor();
+
+    const shutdownPopup = page.getByText("Mutiny Wallet is Shutting Down");
+    if (await shutdownPopup.isVisible()) {
+        // Click the close button
+        await page.getByRole("button").nth(1).click();
+    }
 });
diff --git a/e2e/utils.ts b/e2e/utils.ts
index da7603e9..5ea96d5d 100644
--- a/e2e/utils.ts
+++ b/e2e/utils.ts
@@ -21,6 +21,12 @@ export async function loadHome(page: Page) {
 
     // Should have a balance up top now
     await page.locator(`text=0 sats`).first().waitFor();
+
+    const shutdownPopup = page.getByText("Mutiny Wallet is Shutting Down");
+    if (await shutdownPopup.isVisible()) {
+        // Click the close button
+        await page.getByRole("button").nth(1).click();
+    }
 }
 
 export async function visitSettings(page: Page) {
diff --git a/public/i18n/en.json b/public/i18n/en.json
index ad4432f6..e92a8c61 100644
--- a/public/i18n/en.json
+++ b/public/i18n/en.json
@@ -40,6 +40,10 @@
       "just_me": "Just Me",
       "friends": "Friends",
       "requests": "Requests"
+    },
+    "shutdown": {
+      "title": "Mutiny Wallet is Shutting Down",
+      "message": "We are shutting down the hosted version of Mutiny Wallet. To learn about moving your funds, or self-hosting your wallet, please visit our blog."
     }
   },
   "profile": {
diff --git a/src/components/Activity.tsx b/src/components/Activity.tsx
index 588a7d4e..ed1fcc55 100644
--- a/src/components/Activity.tsx
+++ b/src/components/Activity.tsx
@@ -21,6 +21,7 @@ import {
     FederationPopup,
     LoadingShimmer,
     NiceP,
+    ShutdownPopup,
     SimpleDialog
 } from "~/components";
 import { useI18n } from "~/i18n/context";
@@ -428,6 +429,7 @@ export function CombinedActivity() {
                 <Show when={state.expiration_warning}>
                     <FederationPopup />
                 </Show>
+                <ShutdownPopup />
                 <Show when={!state.has_backed_up}>
                     <ButtonCard
                         red
diff --git a/src/components/ShutdownPopup.tsx b/src/components/ShutdownPopup.tsx
new file mode 100644
index 00000000..8a0338e3
--- /dev/null
+++ b/src/components/ShutdownPopup.tsx
@@ -0,0 +1,36 @@
+import { createSignal } from "solid-js";
+
+import { ExternalLink, NiceP, SimpleDialog } from "~/components/layout";
+import { useI18n } from "~/i18n/context";
+import { useMegaStore } from "~/state/megaStore";
+
+export function ShutdownPopup() {
+    const [state, actions, _sw] = useMegaStore();
+    const selfHosted =
+        state.settings?.selfhosted && state.settings?.selfhosted === "true";
+    const [showShutdownWarning, setShowShutdownWarning] = createSignal(
+        !selfHosted && !state.shutdown_warning_seen
+    );
+
+    const i18n = useI18n();
+
+    return (
+        <SimpleDialog
+            title={`${i18n.t("home.shutdown.title")}`}
+            open={showShutdownWarning()}
+            setOpen={(open: boolean) => {
+                if (!open) {
+                    setShowShutdownWarning(false);
+                    actions.clearShutdownWarning();
+                }
+            }}
+        >
+            <NiceP>{i18n.t("home.shutdown.message")}</NiceP>
+            <NiceP>
+                <ExternalLink href="https://blog.mutinywallet.com/mutiny-timeline/">
+                    Learn more
+                </ExternalLink>
+            </NiceP>
+        </SimpleDialog>
+    );
+}
diff --git a/src/components/index.ts b/src/components/index.ts
index 62fddc6b..f07777fc 100644
--- a/src/components/index.ts
+++ b/src/components/index.ts
@@ -58,3 +58,4 @@ export * from "./ImportNsecForm";
 export * from "./LightningAddressShower";
 export * from "./FederationInviteShower";
 export * from "./FederationPopup";
+export * from "./ShutdownPopup";
diff --git a/src/state/megaStore.tsx b/src/state/megaStore.tsx
index ec0245e0..ae8cfcfa 100644
--- a/src/state/megaStore.tsx
+++ b/src/state/megaStore.tsx
@@ -101,7 +101,8 @@ export const makeMegaStoreContext = () => {
                   federationName: string;
               }
             | undefined,
-        expiration_warning_seen: false
+        expiration_warning_seen: false,
+        shutdown_warning_seen: false
     });
 
     const actions = {
@@ -638,6 +639,10 @@ export const makeMegaStoreContext = () => {
         // Only show the expiration warning once per session
         clearExpirationWarning() {
             setState({ expiration_warning_seen: true });
+        },
+        // Only show the shutdown warning once per session
+        clearShutdownWarning() {
+            setState({ shutdown_warning_seen: true });
         }
     };