add shutdown popup warning

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

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) {

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": {

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

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

src/components/index.ts

@@ -58,3 +58,4 @@ export * from "./ImportNsecForm";
 export * from "./LightningAddressShower";
 export * from "./FederationInviteShower";
 export * from "./FederationPopup";
+export * from "./ShutdownPopup";

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