add beta warning

src/components/BetaWarningModal.tsx

@@ -0,0 +1,71 @@
+import { Dialog } from "@kobalte/core";
+import { ParentComponent, createSignal } from "solid-js";
+import { DIALOG_CONTENT, DIALOG_POSITIONER, OVERLAY } from "./DetailsModal";
+import { ModalCloseButton, SmallHeader } from "./layout";
+import { ExternalLink } from "./layout/ExternalLink";
+
+export function BetaWarningModal() {
+    return (
+        <WarningModal title="Warning: beta software" linkText="Why?">
+            <p>
+                We're so glad you're here. But we do want to warn you: Mutiny
+                Wallet is in beta, and there are still bugs and rough edges.
+            </p>
+            <p>
+                For instance, Mutiny currently doesn't have seed restore
+                functionality or an easy way to do lightning backups.
+            </p>
+            <p>
+                Please be careful and don't put more money into Mutiny than
+                you're willing to lose.
+            </p>
+            <p>
+                <ExternalLink href="https://github.com/MutinyWallet/mutiny-web/wiki/Mutiny-Beta-Readme">
+                    Learn more about the beta
+                </ExternalLink>
+            </p>
+            <p class="small text-neutral-400">
+                If you want to use pretend money to test out Mutiny without
+                risk,{" "}
+                <ExternalLink href="https://blog.mutinywallet.com/mutiny-wallet-signet-release/">
+                    check out our Signet version.
+                </ExternalLink>
+            </p>
+        </WarningModal>
+    );
+}
+
+export const WarningModal: ParentComponent<{
+    linkText: string;
+    title: string;
+}> = (props) => {
+    const [open, setOpen] = createSignal(
+        localStorage.getItem("betaWarned") !== "true"
+    );
+
+    function close() {
+        localStorage.setItem("betaWarned", "true");
+        setOpen(false);
+    }
+
+    return (
+        <Dialog.Root open={open()} onOpenChange={close}>
+            <Dialog.Portal>
+                <Dialog.Overlay class={OVERLAY} />
+                <div class={DIALOG_POSITIONER}>
+                    <Dialog.Content class={DIALOG_CONTENT}>
+                        <Dialog.Title class="flex justify-between mb-2 items-center">
+                            <SmallHeader>{props.title}</SmallHeader>
+                            <Dialog.CloseButton>
+                                <ModalCloseButton />
+                            </Dialog.CloseButton>
+                        </Dialog.Title>
+                        <Dialog.Description class="flex flex-col gap-4">
+                            <div>{props.children}</div>
+                        </Dialog.Description>
+                    </Dialog.Content>
+                </div>
+            </Dialog.Portal>
+        </Dialog.Root>
+    );
+};