Gifting

src/components/AmountEditable.tsx

@@ -361,7 +361,8 @@ export const AmountEditable: ParentComponent<{
         }
     }
 
-    function handleClose() {
+    function handleClose(e: SubmitEvent | MouseEvent | KeyboardEvent) {
+        e.preventDefault();
         props.setAmountSats(BigInt(props.initialAmountSats));
         setIsOpen(false);
         setLocalSats(props.initialAmountSats);
@@ -373,6 +374,7 @@ export const AmountEditable: ParentComponent<{
             )
         );
         props.exitRoute && navigate(props.exitRoute);
+        return false;
     }
 
     // What we're all here for in the first place: returning a value
@@ -381,6 +383,7 @@ export const AmountEditable: ParentComponent<{
         props.setAmountSats(BigInt(localSats()));
         setLocalFiat(satsToUsd(state.price, Number(localSats()) || 0, false));
         setIsOpen(false);
+        return false;
     }
 
     function handleSatsInput(e: InputEvent) {
@@ -438,6 +441,7 @@ export const AmountEditable: ParentComponent<{
     return (
         <Dialog.Root open={isOpen()}>
             <button
+                type="button"
                 onClick={() => setIsOpen(true)}
                 class="flex items-center gap-2 rounded-xl border-2 border-m-blue px-4 py-2"
             >
@@ -465,6 +469,7 @@ export const AmountEditable: ParentComponent<{
                         <div class="flex w-full justify-end">
                             <button
                                 onClick={handleClose}
+                                type="button"
                                 class="h-8 w-8 rounded-lg hover:bg-white/10 active:bg-m-blue"
                             >
                                 <img src={close} alt="Close" />
@@ -578,6 +583,7 @@ export const AmountEditable: ParentComponent<{
                                 </For>
                             </div>
                             <Button
+                                type="button"
                                 intent="green"
                                 class="w-full flex-none"
                                 onClick={handleSubmit}

src/components/App.tsx

@@ -1,9 +1,8 @@
-import { Match, Show, Suspense, Switch } from "solid-js";
+import { Show, Suspense } from "solid-js";
 import { A } from "solid-start";
 
+import scan from "~/assets/icons/scan.svg";
 import settings from "~/assets/icons/settings.svg";
-import pixelLogo from "~/assets/mutiny-pixel-logo.png";
-import plusLogo from "~/assets/mutiny-plus-logo.png";
 import {
     BalanceBox,
     BetaWarningModal,
@@ -13,6 +12,7 @@ import {
     DefaultMain,
     LoadingIndicator,
     LoadingShimmer,
+    Logo,
     NavBar,
     OnboardWarning,
     PendingNwc,
@@ -34,24 +34,7 @@ export function App() {
                 <LoadingIndicator />
                 <header class="mb-2 mt-4 flex w-full items-center justify-between">
                     <div class="flex items-center gap-2">
-                        <Switch>
-                            <Match when={state.mutiny_plus}>
-                                <img
-                                    id="mutiny-logo"
-                                    src={plusLogo}
-                                    class="h-[25px] w-[86px]"
-                                    alt="Mutiny Plus logo"
-                                />
-                            </Match>
-                            <Match when={true}>
-                                <img
-                                    id="mutiny-logo"
-                                    src={pixelLogo}
-                                    class="h-[25px] w-[75px]"
-                                    alt="Mutiny logo"
-                                />
-                            </Match>
-                        </Switch>
+                        <Logo />
                         <Show
                             when={
                                 !state.wallet_loading &&
@@ -63,12 +46,24 @@ export function App() {
                             </div>
                         </Show>
                     </div>
-                    <A
-                        class="rounded-lg p-2 hover:bg-white/5 active:bg-m-blue md:hidden"
-                        href="/settings"
-                    >
-                        <img src={settings} alt="Settings" class="h-6 w-6" />
-                    </A>
+                    <div class="flex items-center gap-2">
+                        <A
+                            class="rounded-lg p-2 hover:bg-white/5 active:bg-m-blue md:hidden"
+                            href="/scanner"
+                        >
+                            <img src={scan} alt="Scan" class="h-6 w-6" />
+                        </A>
+                        <A
+                            class="rounded-lg p-2 hover:bg-white/5 active:bg-m-blue md:hidden"
+                            href="/settings"
+                        >
+                            <img
+                                src={settings}
+                                alt="Settings"
+                                class="h-6 w-6"
+                            />
+                        </A>
+                    </div>
                 </header>
                 <Show when={!state.wallet_loading}>
                     <OnboardWarning />

src/components/DetailsModal.tsx

@@ -62,7 +62,7 @@ export const OVERLAY = "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm";
 export const DIALOG_POSITIONER =
     "fixed inset-0 z-50 flex items-center justify-center";
 export const DIALOG_CONTENT =
-    "max-w-[500px] w-[90vw] max-h-[100dvh] overflow-y-scroll disable-scrollbars mx-4 p-4 bg-neutral-800/80 backdrop-blur-md shadow-xl rounded-xl border border-white/10";
+    "max-w-[500px] w-[90vw] max-h-[100dvh] overflow-y-scroll disable-scrollbars mx-4 p-4 bg-m-grey-800/75 backdrop-blur-md shadow-xl rounded-xl border border-white/10";
 
 function LightningHeader(props: {
     info: MutinyInvoice;

src/components/Dialog.tsx

@@ -7,7 +7,7 @@ import { useI18n } from "~/i18n/context";
 const OVERLAY = "fixed inset-0 z-50 bg-black/50 backdrop-blur-sm";
 const DIALOG_POSITIONER = "fixed inset-0 z-50 flex items-center justify-center";
 const DIALOG_CONTENT =
-    "w-[80vw] max-w-[400px] p-4 bg-gray/50 backdrop-blur-md shadow-xl rounded-xl border border-white/10";
+    "w-[80vw] max-w-[400px] p-4 bg-m-grey-800/75 backdrop-blur-md shadow-xl rounded-xl border border-white/10";
 
 // TODO: implement this like toast so it's just one global confirm and I can call it with `confirm({ title: "Are you sure?", description: "This will delete your node" })`
 export const ConfirmDialog: ParentComponent<{

src/components/IntegratedQR.tsx

@@ -10,7 +10,7 @@ import { useI18n } from "~/i18n/context";
 import { ReceiveFlavor } from "~/routes/Receive";
 import { useCopy } from "~/utils/useCopy";
 
-function KindIndicator(props: { kind: ReceiveFlavor }) {
+function KindIndicator(props: { kind: ReceiveFlavor | "gift" }) {
     const i18n = useI18n();
     return (
         <div class="flex flex-col items-end text-black">
@@ -29,6 +29,13 @@ function KindIndicator(props: { kind: ReceiveFlavor }) {
                     <img src={boltBlack} alt="bolt" />
                 </Match>
 
+                <Match when={props.kind === "gift"}>
+                    <h3 class="font-semibold">
+                        {i18n.t("receive.integrated_qr.gift")}
+                    </h3>
+                    <img src={boltBlack} alt="bolt" />
+                </Match>
+
                 <Match when={props.kind === "unified"}>
                     <h3 class="font-semibold">
                         {i18n.t("receive.integrated_qr.unified")}
@@ -62,7 +69,7 @@ async function share(receiveString: string) {
 export function IntegratedQr(props: {
     value: string;
     amountSats: string;
-    kind: ReceiveFlavor;
+    kind: ReceiveFlavor | "gift";
 }) {
     const i18n = useI18n();
     const [copy, copied] = useCopy({ copiedTimeout: 1000 });

src/components/Logo.tsx

@@ -0,0 +1,29 @@
+import { Match, Switch } from "solid-js";
+
+import pixelLogo from "~/assets/mutiny-pixel-logo.png";
+import plusLogo from "~/assets/mutiny-plus-logo.png";
+import { useMegaStore } from "~/state/megaStore";
+
+export function Logo() {
+    const [state, _actions] = useMegaStore();
+    return (
+        <Switch>
+            <Match when={state.mutiny_plus}>
+                <img
+                    id="mutiny-logo"
+                    src={plusLogo}
+                    class="h-[25px] w-[86px]"
+                    alt="Mutiny Plus logo"
+                />
+            </Match>
+            <Match when={true}>
+                <img
+                    id="mutiny-logo"
+                    src={pixelLogo}
+                    class="h-[25px] w-[75px]"
+                    alt="Mutiny logo"
+                />
+            </Match>
+        </Switch>
+    );
+}

src/components/index.ts

@@ -12,7 +12,6 @@ export * from "./BetaWarningModal";
 export * from "./ContactEditor";
 export * from "./ContactForm";
 export * from "./ContactViewer";
-export * from "./CopyableQR";
 export * from "./DecryptDialog";
 export * from "./DeleteEverything";
 export * from "./DetailsModal";
@@ -26,6 +25,7 @@ export * from "./IntegratedQR";
 export * from "./JsonModal";
 export * from "./KitchenSink";
 export * from "./LoadingIndicator";
+export * from "./Logo";
 export * from "./Logs";
 export * from "./MoreInfoModal";
 export * from "./NavBar";

src/i18n/en/translations.ts

@@ -89,7 +89,8 @@ export default {
         integrated_qr: {
             onchain: "On-chain",
             lightning: "Lightning",
-            unified: "Unified"
+            unified: "Unified",
+            gift: "Lightning Gift"
         }
     },
     send: {
@@ -406,6 +407,40 @@ export default {
                 "Lightning Service Provider. Automatically opens channels to you for inbound liquidity. Also wraps invoices for privacy.",
             error_lsp: "That doesn't look like a URL",
             save: "Save"
+        },
+        gift: {
+            title: "Gifting",
+            receive_too_small:
+                "Your first receive needs to be {{amount}} SATS or greater.",
+            setup_fee_lightning:
+                "A lightning setup fee will be charged to receive this gift.",
+            already_claimed: "This gift has already been claimed",
+            sender_is_poor:
+                "The sender doesn't have enough balance to pay this gift.",
+            sender_generic_error: "Sender sent error: {{error}}",
+            receive_header: "You've been gifted some sats!",
+            receive_description:
+                "You must be pretty special. To claim your money just hit the big button. Funds will be added to your balance the next time your gifter is online.",
+            receive_claimed:
+                "Gift claimed! You should see the gift hit your balance shortly.",
+            receive_cta: "Claim Gift",
+            send_header: "Create Gift",
+            send_explainer:
+                "Give the gift of sats. Create a Mutiny gift url that can be claimed by anyone with a web browser.",
+            send_name_required: "This is for your records",
+            send_name_label: "Recepient Name",
+            send_header_claimed: "Gift Received!",
+            send_claimed: "Your gift has been claimed. Thanks for sharing.",
+            send_sharable_header: "Sharable URL",
+            send_instructions:
+                "Copy this gift URL to your recipient, or ask them to scan this QR code with their wallet.",
+            send_another: "Create Another",
+            send_small_warning:
+                "A brand new Mutiny user won't be able to redeem fewer than 50k sats.",
+            send_cta: "Create a gift",
+            send_delete_button: "Delete Gift",
+            send_delete_confirm:
+                "Are you sure you want to delete this gift? Is this your rugpull moment?"
         }
     },
     swap: {