mirror of
https://github.com/aljazceru/mutiny-web.git
synced 2025-12-26 10:24:20 +01:00
better onboard warnings
This commit is contained in:
Paul Miller
3
src/assets/icons/save.svg
Normal file
3
src/assets/icons/save.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M5 3c-.53043 0-1.03914.21071-1.41421.58579C3.21071 3.96086 3 4.46957 3 5v14c0 .5304.21071 1.0391.58579 1.4142C3.96086 20.7893 4.46957 21 5 21h14c.5304 0 1.0391-.2107 1.4142-.5858S21 19.5304 21 19V5.5L18.5 3H17v6c0 .26522-.1054.51957-.2929.70711C16.5196 9.89464 16.2652 10 16 10H8c-.26522 0-.51957-.10536-.70711-.29289C7.10536 9.51957 7 9.26522 7 9V3H5Zm7 1v5h3V4h-3Zm-5 8h10c.2652 0 .5196.1054.7071.2929S18 12.7348 18 13v6H6v-6c0-.2652.10536-.5196.29289-.7071C6.48043 12.1054 6.73478 12 7 12Z" fill="#fff"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 601 B |
3
src/assets/icons/upload.svg
Normal file
3
src/assets/icons/upload.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6 20c-.55 0-1.021-.196-1.413-.588C4.195 19.02 3.99934 18.5493 4 18v-3h2v3h12v-3h2v3c0 .55-.196 1.021-.588 1.413-.392.392-.8627.5877-1.412.587H6Zm5-4V7.85l-2.6 2.6L7 9l5-5 5 5-1.4 1.45-2.6-2.6V16h-2Z" fill="#fff"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 308 B |
@@ -1,7 +1,10 @@
|
||||
import { Show, createSignal, onMount } from "solid-js";
|
||||
import { Button, ButtonLink, SmallHeader, VStack } from "./layout";
|
||||
import { Button, 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";
|
||||
|
||||
export function OnboardWarning() {
|
||||
const [state, actions] = useMegaStore();
|
||||
@@ -18,30 +21,44 @@ export function OnboardWarning() {
|
||||
return (
|
||||
<>
|
||||
{/* TODO: show this once we have a restore flow */}
|
||||
<Show when={!state.dismissed_restore_prompt && false}>
|
||||
<div class='rounded-xl p-4 flex flex-col gap-2 bg-neutral-950 overflow-x-hidden'>
|
||||
<SmallHeader>Welcome!</SmallHeader>
|
||||
<VStack>
|
||||
<p class="text-2xl font-light">
|
||||
Do you want to restore an existing Mutiny Wallet?
|
||||
</p>
|
||||
<div class="w-full flex gap-2">
|
||||
<Button intent="green" onClick={() => { showToast({ title: "Unimplemented", description: "We don't do that yet" }) }}>Restore</Button>
|
||||
<Button onClick={actions.dismissRestorePrompt}>Nope</Button>
|
||||
<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 items-center gap-4'>
|
||||
<div class="flex flex-col">
|
||||
<SmallHeader>Welcome!</SmallHeader>
|
||||
<p class="text-base font-light">
|
||||
If you've used Mutiny before you can restore from a backup. Otherwise you can skip this and enjoy your new wallet!
|
||||
</p>
|
||||
</div>
|
||||
</VStack>
|
||||
<Button intent="green" layout="xs" onClick={() => { showToast({ title: "Unimplemented", description: "We don't do that yet" }) }}>Restore</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='rounded-xl p-4 flex flex-col gap-2 bg-neutral-950 overflow-x-hidden'>
|
||||
<SmallHeader>Secure your funds</SmallHeader>
|
||||
<p class="text-2xl font-light">
|
||||
You have money stored in this browser. Let's make sure you have a backup.
|
||||
</p>
|
||||
<div class="w-full flex gap-2">
|
||||
<ButtonLink intent="blue" href="/backup">Backup</ButtonLink>
|
||||
<Button onClick={() => { setDismissedBackup(true) }}>Nope</Button>
|
||||
<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 items-center gap-4'>
|
||||
<div class="flex flex-col">
|
||||
<SmallHeader>Secure your funds</SmallHeader>
|
||||
<p class="text-base font-light">
|
||||
You have money stored in this browser. Let's make sure you have a backup.
|
||||
</p>
|
||||
</div>
|
||||
<ButtonLink intent="blue" layout="xs" href="/backup">Backup</ButtonLink>
|
||||
|
||||
</div>
|
||||
<button tabindex="-1" onClick={() => { setDismissedBackup(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,7 +4,7 @@ import { Dynamic } from "solid-js/web";
|
||||
import { A } from "solid-start";
|
||||
import { LoadingSpinner } from ".";
|
||||
|
||||
const button = cva("p-3 rounded-xl text-xl font-semibold disabled:opacity-50 disabled:grayscale transition", {
|
||||
const button = cva("p-3 rounded-xl font-semibold disabled:opacity-50 disabled:grayscale transition", {
|
||||
variants: {
|
||||
// TODO: button hover has to work different than buttonlinks (like disabled state)
|
||||
intent: {
|
||||
@@ -16,10 +16,10 @@ const button = cva("p-3 rounded-xl text-xl font-semibold disabled:opacity-50 dis
|
||||
green: "bg-m-green text-white shadow-inner-button hover:bg-m-green-dark text-shadow-button",
|
||||
},
|
||||
layout: {
|
||||
flex: "flex-1",
|
||||
pad: "px-8",
|
||||
flex: "flex-1 text-xl",
|
||||
pad: "px-8 text-xl",
|
||||
small: "px-4 py-2 w-auto text-lg",
|
||||
xs: "px-2 py-1 w-auto rounded-lg font-normal text-base"
|
||||
xs: "px-4 py-2 w-auto rounded-lg text-base"
|
||||
},
|
||||
},
|
||||
defaultVariants: {
|
||||
|
||||
@@ -1,6 +1,7 @@
|
||||
import { ActivityItem } from "~/components/ActivityItem";
|
||||
import { AmountCard } from "~/components/AmountCard";
|
||||
import NavBar from "~/components/NavBar";
|
||||
import { OnboardWarning } from "~/components/OnboardWarning";
|
||||
import { ShareCard } from "~/components/ShareCard";
|
||||
import { Card, DefaultMain, LargeHeader, SafeArea, VStack } from "~/components/layout";
|
||||
|
||||
@@ -10,14 +11,15 @@ export default function Admin() {
|
||||
<SafeArea>
|
||||
<DefaultMain>
|
||||
<LargeHeader>Storybook</LargeHeader>
|
||||
<OnboardWarning />
|
||||
<VStack>
|
||||
<AmountCard amountSats={"100000"} fee={"69"} />
|
||||
<ShareCard text={SAMPLE} />
|
||||
<Card title="Activity">
|
||||
<ActivityItem kind="lightning" name="benthecarman" amount={100000} date={1683664966} />
|
||||
<ActivityItem kind="onchain" name="tony" amount={42000000} positive date={1683664966} />
|
||||
<ActivityItem kind="onchain" name="a fake name that is too long" amount={42000000} date={1683664966} />
|
||||
<ActivityItem kind="onchain" name="a fake name that is too long" amount={42000000} date={1683664966} />
|
||||
<ActivityItem kind="lightning" labels={["benthecarman"]} amount={100000} date={1683664966} />
|
||||
<ActivityItem kind="onchain" labels={["tony"]} amount={42000000} positive date={1683664966} />
|
||||
<ActivityItem kind="onchain" labels={["a fake name thati is too long"]} amount={42000000} date={1683664966} />
|
||||
<ActivityItem kind="onchain" labels={["a fake name thati is too long"]} amount={42000000} date={1683664966} />
|
||||
</Card>
|
||||
</VStack>
|
||||
</DefaultMain>
|
||||
|
||||
Reference in New Issue
Block a user