aljaz/mutiny-web
1
0
Fork 0
mirror of https://github.com/aljazceru/mutiny-web.git synced 2025-12-20 07:44:24 +01:00
Code Issues Packages Projects Releases Wiki Activity

show backup cta at launch

Browse Source
This commit is contained in:
Paul Miller
2023-08-07 16:37:51 -05:00
parent 8a42a7d2bc
commit 5673b6e76d
5 changed files with 21 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

86
src/components/OnboardWarning.tsx
View File

@@ -1,89 +1,24 @@
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">
<div class="flex flex-col justify-center">
<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
@@ -96,17 +31,6 @@ export function OnboardWarning() {
</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>
</>
);

4
src/i18n/en/translations.ts
View File

@@ -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",

4
src/i18n/ko/translations.ts
View File

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

2
src/routes/settings/Encrypt.tsx
View File

@@ -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>

8
src/state/megaStore.tsx
View File

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