celebrate receive success

src/assets/icons/close.svg

@@ -0,0 +1,3 @@
+<svg width="48" height="48" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="m14 14 20 20m-20 0 20-20" stroke="#FFF" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

src/components/AmountEditable.tsx

@@ -119,7 +119,7 @@ export function AmountEditable(props: { initialAmountSats: string, setAmountSats
         }
     }
 
-    const DIALOG_POSITIONER = "fixed inset-0 safe-top safe-bottom"
+    const DIALOG_POSITIONER = "fixed inset-0 safe-top safe-bottom z-50"
     const DIALOG_CONTENT = "h-screen-safe p-4 bg-gray/50 backdrop-blur-md bg-black/80"
 
     return (

src/components/ReceiveSuccessModal.tsx

@@ -0,0 +1,36 @@
+
+import { Dialog } from "@kobalte/core";
+import { JSX } from "solid-js";
+import { Button, SmallHeader } from "~/components/layout";
+import close from "~/assets/icons/close.svg";
+
+const DIALOG_POSITIONER = "fixed inset-0 safe-top safe-bottom z-50"
+const DIALOG_CONTENT = "h-screen-safe p-4 bg-gray/50 backdrop-blur-md bg-black/80"
+
+
+export function ReceiveSuccessModal(props: { title: string, open: boolean, setOpen: (open: boolean) => void, children?: JSX.Element }) {
+    return (
+        <Dialog.Root isOpen={props.open} onOpenChange={(isOpen) => props.setOpen(isOpen)}>
+            <Dialog.Portal>
+                <div class={DIALOG_POSITIONER}>
+                    <Dialog.Content class={DIALOG_CONTENT}>
+                        <div class="flex justify-between items-center mb-2">
+                            <Dialog.Title>
+                                <SmallHeader>
+                                    {props.title}
+                                </SmallHeader>
+                            </Dialog.Title>
+                            <Dialog.CloseButton class="p-2 hover:bg-white/10 rounded-lg active:bg-m-blue">
+                                <img src={close} alt="Close" />
+                            </Dialog.CloseButton>
+                        </div>
+                        <Dialog.Description class="flex flex-col gap-4">
+                            {props.children}
+                            <Button onClick={(_) => props.setOpen(false)}>Nice</Button>
+                        </Dialog.Description>
+                    </Dialog.Content>
+                </div>
+            </Dialog.Portal>
+        </Dialog.Root >
+    )
+}

src/routes/Receive.tsx

@@ -11,6 +11,10 @@ import { objectToSearchParams } from "~/utils/objectToSearchParams";
 import { useCopy } from "~/utils/useCopy";
 import { JsonModal } from '~/components/JsonModal';
 import mempoolTxUrl from "~/utils/mempoolTxUrl";
+import { ReceiveSuccessModal } from "~/components/ReceiveSuccessModal";
+
+import party from '~/assets/party.gif';
+import { Amount } from "~/components/Amount";
 
 type OnChainTx = {
     transaction: {
@@ -223,14 +227,23 @@ export default function Receive() {
                             </Card>
                         </Match>
                         <Match when={receiveState() === "paid" && paidState() === "lightning_paid"}>
-                            <JsonModal title="They paid with lightning" open={!!paidState()} data={paymentInvoice()} setOpen={(open: boolean) => { if (!open) clearAll() }} />
+                            <ReceiveSuccessModal title="Payment Received!" open={!!paidState()} setOpen={(open: boolean) => { if (!open) clearAll() }}>
+                                <div class="flex flex-col items-center gap-8">
+                                    <img src={party} alt="party" class="w-1/2 mx-auto" />
+                                    <Amount amountSats={paymentInvoice()?.amount_sats} showFiat />
+                                </div>
+                            </ReceiveSuccessModal>
                         </Match>
                         <Match when={receiveState() === "paid" && paidState() === "onchain_paid"}>
-                            <JsonModal title="They paid onchain" open={!!paidState()} data={paymentTx()} setOpen={(open: boolean) => { if (!open) clearAll() }}>
+                            <ReceiveSuccessModal title="Payment Received!" open={!!paidState()} setOpen={(open: boolean) => { if (!open) clearAll() }}>
+                                <div class="flex flex-col items-center gap-8">
+                                    <img src={party} alt="party" class="w-1/2 mx-auto" />
+                                    <Amount amountSats={paymentTx()?.received} showFiat />
                                     <a href={mempoolTxUrl(paymentTx()?.txid, "signet")} target="_blank" rel="noreferrer">
                                         Mempool Link
                                     </a>
-                            </JsonModal>
+                                </div>
+                            </ReceiveSuccessModal>
                         </Match>
                     </Switch>
                 </DefaultMain>