add shutdown popup warning

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