From 5673b6e76de0c76f5da9965a076803e2c53eb034 Mon Sep 17 00:00:00 2001
From: Paul Miller <paul@paul.lol>
Date: Mon, 7 Aug 2023 16:37:51 -0500
Subject: [PATCH] show backup cta at launch

---
 src/components/OnboardWarning.tsx | 112 +++++-------------------------
 src/i18n/en/translations.ts       |   4 +-
 src/i18n/ko/translations.ts       |   4 +-
 src/routes/settings/Encrypt.tsx   |   2 +-
 src/state/megaStore.tsx           |   8 ---
 5 files changed, 21 insertions(+), 109 deletions(-)

diff --git a/src/components/OnboardWarning.tsx b/src/components/OnboardWarning.tsx
index 41caeb8..582e0fd 100644
--- a/src/components/OnboardWarning.tsx
+++ b/src/components/OnboardWarning.tsx
@@ -1,111 +1,35 @@
-import { Show, createSignal } from "solid-js";
-import { Button, ButtonLink, SmallHeader } from "./layout";
+import { Show } from "solid-js";
+import { ButtonLink, SmallHeader } from "./layout";
 import { useMegaStore } from "~/state/megaStore";
-import { showToast } from "./Toaster";
 import save from "~/assets/icons/save.svg";
-import close from "~/assets/icons/close.svg";
-import restore from "~/assets/icons/upload.svg";
 import { useI18n } from "~/i18n/context";
 
 export function OnboardWarning() {
     const i18n = useI18n();
-    const [state, actions] = useMegaStore();
-    const [dismissedBackup, setDismissedBackup] = createSignal(
-        sessionStorage.getItem("dismissed_backup") ?? false
-    );
-
-    function hasMoney() {
-        return (
-            state.balance?.confirmed ||
-            state.balance?.lightning ||
-            state.balance?.unconfirmed ||
-            state.balance?.force_close
-        );
-    }
+    const [state, _actions] = useMegaStore();
 
     return (
         <>
-            {/* TODO: show this once we have a restore flow */}
-            <Show when={false}>
-                <div class="grid grid-cols-[auto_minmax(0,_1fr)_auto] rounded-xl p-4 gap-4 bg-neutral-950/50">
-                    <div class="self-center">
-                        <img src={restore} alt="backup" class="w-8 h-8" />
-                    </div>
-                    <div class="flex md:flex-row flex-col items-center gap-4">
-                        <div class="flex flex-col">
-                            <SmallHeader>
-                                {i18n.t("modals.onboarding.welcome")}
-                            </SmallHeader>
-                            <p class="text-base font-light">
-                                {i18n.t(
-                                    "modals.onboarding.restore_from_backup"
-                                )}
-                            </p>
-                        </div>
-                        <Button
-                            intent="green"
-                            layout="xs"
-                            class="self-start md:self-auto"
-                            onClick={() => {
-                                showToast({
-                                    title: i18n.t("common.error_unimplemented"),
-                                    description: i18n.t(
-                                        "modals.onboarding.not_available"
-                                    )
-                                });
-                            }}
-                        >
-                            {i18n.t("settings.restore.title")}
-                        </Button>
-                    </div>
-                    <button
-                        tabindex="-1"
-                        onClick={() => {
-                            actions.dismissRestorePrompt();
-                        }}
-                        class="self-center hover:bg-white/10 rounded-lg active:bg-m-blue w-8"
-                    >
-                        <img src={close} alt="Close" />
-                    </button>
-                </div>
-            </Show>
-            <Show
-                when={!state.has_backed_up && hasMoney() && !dismissedBackup()}
-            >
+            <Show when={!state.has_backed_up}>
                 <div class="grid grid-cols-[auto_minmax(0,_1fr)_auto] rounded-xl p-4 gap-4 bg-neutral-950/50">
                     <div class="self-center">
                         <img src={save} alt="backup" class="w-8 h-8" />
                     </div>
-                    <div class="flex flex-row max-md:items-center justify-between gap-4">
-                        <div class="flex flex-col">
-                            <SmallHeader>
-                                {i18n.t("modals.onboarding.secure_your_funds")}
-                            </SmallHeader>
-                            <p class="text-base font-light max-md:hidden">
-                                {i18n.t("modals.onboarding.make_backup")}
-                            </p>
-                        </div>
-                        <div class="flex items-center">
-                            <ButtonLink
-                                intent="blue"
-                                layout="xs"
-                                class="self-auto"
-                                href="/settings/backup"
-                            >
-                                {i18n.t("settings.backup.title")}
-                            </ButtonLink>
-                        </div>
+                    <div class="flex flex-col justify-center">
+                        <SmallHeader>
+                            {i18n.t("modals.onboarding.secure_your_funds")}
+                        </SmallHeader>
+                    </div>
+                    <div class="flex items-center">
+                        <ButtonLink
+                            intent="blue"
+                            layout="xs"
+                            class="self-auto"
+                            href="/settings/backup"
+                        >
+                            {i18n.t("settings.backup.title")}
+                        </ButtonLink>
                     </div>
-                    <button
-                        tabindex="-1"
-                        onClick={() => {
-                            setDismissedBackup(true);
-                            sessionStorage.setItem("dismissed_backup", "true");
-                        }}
-                        class="self-center hover:bg-white/10 rounded-lg active:bg-m-blue w-8"
-                    >
-                        <img src={close} alt="Close" />
-                    </button>
                 </div>
             </Show>
         </>
diff --git a/src/i18n/en/translations.ts b/src/i18n/en/translations.ts
index 612fcc8..cddc11e 100644
--- a/src/i18n/en/translations.ts
+++ b/src/i18n/en/translations.ts
@@ -495,9 +495,7 @@ export default {
             restore_from_backup:
                 "If you've used Mutiny before you can restore from a backup. Otherwise you can skip this and enjoy your new wallet!",
             not_available: "We don't do that yet",
-            secure_your_funds: "Secure your funds",
-            make_backup:
-                "You have money stored in this browser. Let's make sure you have a backup."
+            secure_your_funds: "Secure your funds"
         },
         beta_warning: {
             title: "Warning: beta software",
diff --git a/src/i18n/ko/translations.ts b/src/i18n/ko/translations.ts
index 7542016..b925a47 100644
--- a/src/i18n/ko/translations.ts
+++ b/src/i18n/ko/translations.ts
@@ -481,9 +481,7 @@ export default {
             restore_from_backup:
                 "이미 Mutiny를 사용한 적이 있으시다면 백업에서 복원할 수 있습니다. 그렇지 않다면 이 단계를 건너뛰고 새로운 지갑을 즐기실 수 있습니다!",
             not_available: "아직 이 기능은 지원하지 않습니다",
-            secure_your_funds: "자금을 안전하게 보호하세요",
-            make_backup:
-                "이 브라우저에 자금이 저장되어 있습니다. 백업이 되어 있는지 확인해 봅시다."
+            secure_your_funds: "자금을 안전하게 보호하세요"
         },
         beta_warning: {
             title: "경고: 베타 버전 소프트웨어",
diff --git a/src/routes/settings/Encrypt.tsx b/src/routes/settings/Encrypt.tsx
index b2a8820..ba439e7 100644
--- a/src/routes/settings/Encrypt.tsx
+++ b/src/routes/settings/Encrypt.tsx
@@ -150,7 +150,7 @@ export default function Encrypt() {
                                 </Button>
                             </VStack>
                         </Form>
-                        <ButtonLink href="/settings" intent="green">
+                        <ButtonLink href="/" intent="green">
                             {i18n.t("settings.encrypt.skip")}
                         </ButtonLink>
                     </VStack>
diff --git a/src/state/megaStore.tsx b/src/state/megaStore.tsx
index 9a124d5..99db5ac 100644
--- a/src/state/megaStore.tsx
+++ b/src/state/megaStore.tsx
@@ -43,7 +43,6 @@ export type MegaStore = [
         last_sync?: number;
         price: number;
         has_backed_up: boolean;
-        dismissed_restore_prompt: boolean;
         wallet_loading: boolean;
         setup_error?: Error;
         is_pwa: boolean;
@@ -59,7 +58,6 @@ export type MegaStore = [
         deleteMutinyWallet(): Promise<void>;
         setScanResult(scan_result: ParsedParams | undefined): void;
         sync(): Promise<void>;
-        dismissRestorePrompt(): void;
         setHasBackedUp(): void;
         listTags(): Promise<MutinyTagItem[]>;
         checkBrowserCompat(): Promise<boolean>;
@@ -77,8 +75,6 @@ export const Provider: ParentComponent = (props) => {
         balance: undefined as MutinyBalance | undefined,
         last_sync: undefined as number | undefined,
         is_syncing: false,
-        dismissed_restore_prompt:
-            localStorage.getItem("dismissed_restore_prompt") === "true",
         wallet_loading: true,
         setup_error: undefined as Error | undefined,
         is_pwa: window.matchMedia("(display-mode: standalone)").matches,
@@ -234,10 +230,6 @@ export const Provider: ParentComponent = (props) => {
             localStorage.setItem("has_backed_up", "true");
             setState({ has_backed_up: true });
         },
-        dismissRestorePrompt() {
-            localStorage.setItem("dismissed_restore_prompt", "true");
-            setState({ dismissed_restore_prompt: true });
-        },
         async listTags(): Promise<MutinyTagItem[]> {
             try {
                 return state.mutiny_wallet?.get_tag_items() as MutinyTagItem[];