show backup cta at launch

src/components/OnboardWarning.tsx

@@ -1,111 +1,35 @@
-import { Show, createSignal } from "solid-js";
+import { Show } from "solid-js";
-import { Button, ButtonLink, SmallHeader } from "./layout";
+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 [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
-        );
-    }
 
     return (
         <>
-            {/* TODO: show this once we have a restore flow */}
+            <Show when={!state.has_backed_up}>
-            <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()}
-            >
                 <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 justify-center">
-                        <div class="flex flex-col">
+                        <SmallHeader>
-                            <SmallHeader>
+                            {i18n.t("modals.onboarding.secure_your_funds")}
-                                {i18n.t("modals.onboarding.secure_your_funds")}
+                        </SmallHeader>
-                            </SmallHeader>
+                    </div>
-                            <p class="text-base font-light max-md:hidden">
+                    <div class="flex items-center">
-                                {i18n.t("modals.onboarding.make_backup")}
+                        <ButtonLink
-                            </p>
+                            intent="blue"
-                        </div>
+                            layout="xs"
-                        <div class="flex items-center">
+                            class="self-auto"
-                            <ButtonLink
+                            href="/settings/backup"
-                                intent="blue"
+                        >
-                                layout="xs"
+                            {i18n.t("settings.backup.title")}
-                                class="self-auto"
+                        </ButtonLink>
-                                href="/settings/backup"
-                            >
-                                {i18n.t("settings.backup.title")}
-                            </ButtonLink>
-                        </div>
                     </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>
         </>

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",
+            secure_your_funds: "Secure your funds"
-            make_backup:
-                "You have money stored in this browser. Let's make sure you have a backup."
         },
         beta_warning: {
             title: "Warning: beta software",

src/i18n/ko/translations.ts

@@ -481,9 +481,7 @@ export default {
             restore_from_backup:
                 "이미 Mutiny를 사용한 적이 있으시다면 백업에서 복원할 수 있습니다. 그렇지 않다면 이 단계를 건너뛰고 새로운 지갑을 즐기실 수 있습니다!",
             not_available: "아직 이 기능은 지원하지 않습니다",
-            secure_your_funds: "자금을 안전하게 보호하세요",
+            secure_your_funds: "자금을 안전하게 보호하세요"
-            make_backup:
-                "이 브라우저에 자금이 저장되어 있습니다. 백업이 되어 있는지 확인해 봅시다."
         },
         beta_warning: {
             title: "경고: 베타 버전 소프트웨어",

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>

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[];