From 04e635c8fda4202a119ba0c1a6f0b083d14a2d62 Mon Sep 17 00:00:00 2001
From: Paul Miller <paul@paul.lol>
Date: Fri, 28 Jul 2023 17:09:08 -0500
Subject: [PATCH] pay button actually does something

---
 src/components/ActivityItem.tsx           |   2 +-
 src/components/ContactViewer.tsx          | 120 ++++++++++++++--------
 src/routes/settings/SyncNostrContacts.tsx |   5 +-
 3 files changed, 81 insertions(+), 46 deletions(-)

diff --git a/src/components/ActivityItem.tsx b/src/components/ActivityItem.tsx
index f2ce37b..b954f92 100644
--- a/src/components/ActivityItem.tsx
+++ b/src/components/ActivityItem.tsx
@@ -69,7 +69,7 @@ function LabelCircle(props: {
 
     return (
         <div
-            class="flex h-[3rem] w-[3rem] flex-none items-center justify-center rounded-full border-b border-t border-b-white/10 border-t-white/50 bg-neutral-700 text-3xl uppercase"
+            class="flex h-[3rem] w-[3rem] flex-none items-center justify-center overflow-clip rounded-full border-b border-t border-b-white/10 border-t-white/50 bg-neutral-700 text-3xl uppercase"
             style={{ background: bg() }}
         >
             <Switch>
diff --git a/src/components/ContactViewer.tsx b/src/components/ContactViewer.tsx
index f022072..2ba0a17 100644
--- a/src/components/ContactViewer.tsx
+++ b/src/components/ContactViewer.tsx
@@ -2,6 +2,7 @@ import { Dialog } from "@kobalte/core";
 import { SubmitHandler } from "@modular-forms/solid";
 import { Contact } from "@mutinywallet/mutiny-wasm";
 import { createSignal, Match, Switch } from "solid-js";
+import { useNavigate } from "solid-start";
 
 import close from "~/assets/icons/close.svg";
 import {
@@ -13,6 +14,8 @@ import {
     SmallHeader
 } from "~/components";
 import { useI18n } from "~/i18n/context";
+import { toParsedParams } from "~/logic/waila";
+import { useMegaStore } from "~/state/megaStore";
 import { DIALOG_CONTENT, DIALOG_POSITIONER } from "~/styles/dialogs";
 
 export type ContactFormValues = {
@@ -28,6 +31,8 @@ export function ContactViewer(props: {
     const i18n = useI18n();
     const [isOpen, setIsOpen] = createSignal(false);
     const [isEditing, setIsEditing] = createSignal(false);
+    const [state, actions] = useMegaStore();
+    const navigate = useNavigate();
 
     const handleSubmit: SubmitHandler<ContactFormValues> = (
         c: ContactFormValues
@@ -39,24 +44,48 @@ export function ContactViewer(props: {
         setIsEditing(false);
     };
 
+    const handlePay = () => {
+        const network = state.mutiny_wallet?.get_network() || "signet";
+
+        const lnurl = props.contact.lnurl || props.contact.ln_address || "";
+
+        if (lnurl) {
+            const result = toParsedParams(lnurl, network);
+            if (!result.ok) {
+                showToast(result.error);
+                return;
+            } else {
+                if (
+                    result.value?.address ||
+                    result.value?.invoice ||
+                    result.value?.node_pubkey ||
+                    result.value?.lnurl
+                ) {
+                    actions.setScanResult(result.value);
+                    navigate("/send");
+                }
+            }
+        }
+    };
+
     return (
         <Dialog.Root open={isOpen()}>
             <button
                 onClick={() => setIsOpen(true)}
                 class="flex w-16 flex-shrink-0 flex-col items-center gap-2 overflow-x-hidden"
             >
-                {props.contact.image_url && (
-                    <img src={props.contact.image_url} />
-                )}
-                {!props.contact.image_url && (
-                    <div
-                        class="flex-none h-16 w-16 rounded-full flex items-center justify-center text-4xl uppercase border-t border-b border-t-white/50 border-b-white/10"
-                        style={{ background: props.gradient }}
-                    >
-                        {props.contact.name[0]}
-                    </div>
-                )}
-                <SmallHeader class="overflow-ellipsis w-16 text-center overflow-hidden h-4">
+                <div
+                    class="flex h-16 w-16 flex-none items-center justify-center overflow-clip rounded-full border-b border-t border-b-white/10 border-t-white/50 text-4xl uppercase"
+                    style={{ background: props.gradient }}
+                >
+                    <Switch>
+                        <Match when={props.contact.image_url}>
+                            <img src={props.contact.image_url} />
+                        </Match>
+                        <Match when={true}>{props.contact.name[0]}</Match>
+                    </Switch>
+                </div>
+                <SmallHeader class="h-4 w-16 overflow-hidden overflow-ellipsis text-center">
                     {props.contact.name}
                 </SmallHeader>
             </button>
@@ -91,33 +120,43 @@ export function ContactViewer(props: {
                                 />
                             </Match>
                             <Match when={!isEditing()}>
-                                <div class="flex flex-col flex-1 justify-around items-center gap-4 max-w-[400px] mx-auto w-full">
-                                    <div class="flex flex-col items-center w-full">
-                                        {props.contact.image_url && (
-                                            <img
-                                                src={props.contact.image_url}
-                                            />
-                                        )}
-                                        {!props.contact.image_url && (
-                                            <div
-                                                class="flex-none h-32 w-32 rounded-full flex items-center justify-center text-8xl uppercase border-t border-b border-t-white/50 border-b-white/10"
-                                                style={{
-                                                    background: props.gradient
-                                                }}
-                                            >
-                                                {props.contact.name[0]}
-                                            </div>
-                                        )}
-                                        <h1 class="text-2xl font-semibold uppercase mt-2 mb-4">
+                                <div class="mx-auto flex w-full max-w-[400px] flex-1 flex-col items-center justify-around gap-4">
+                                    <div class="flex w-full flex-col items-center">
+                                        <div
+                                            class="flex h-32 w-32 flex-none items-center justify-center overflow-clip rounded-full border-b border-t border-b-white/10 border-t-white/50 text-8xl uppercase"
+                                            style={{
+                                                background: props.gradient
+                                            }}
+                                        >
+                                            <Switch>
+                                                <Match
+                                                    when={
+                                                        props.contact.image_url
+                                                    }
+                                                >
+                                                    <img
+                                                        src={
+                                                            props.contact
+                                                                .image_url
+                                                        }
+                                                    />
+                                                </Match>
+                                                <Match when={true}>
+                                                    {props.contact.name[0]}
+                                                </Match>
+                                            </Switch>
+                                        </div>
+
+                                        <h1 class="mb-4 mt-2 text-2xl font-semibold uppercase">
                                             {props.contact.name}
                                         </h1>
-                                        <h1 class="text-2xl font-semibold uppercase mt-2 mb-4">
+                                        <h1 class="mb-4 mt-2 text-2xl font-semibold uppercase">
                                             {props.contact.npub}
                                         </h1>
-                                        <h1 class="text-2xl font-semibold uppercase mt-2 mb-4">
+                                        <h1 class="mb-4 mt-2 text-2xl font-semibold uppercase">
                                             {props.contact.ln_address}
                                         </h1>
-                                        <h1 class="text-2xl font-semibold uppercase mt-2 mb-4">
+                                        <h1 class="mb-4 mt-2 text-2xl font-semibold uppercase">
                                             {props.contact.lnurl}
                                         </h1>
                                         <Card
@@ -144,16 +183,11 @@ export function ContactViewer(props: {
                                         </Button>
                                         <Button
                                             intent="blue"
-                                            onClick={() => {
-                                                showToast({
-                                                    title: i18n.t(
-                                                        "contacts.unimplemented"
-                                                    ),
-                                                    description: i18n.t(
-                                                        "contacts.not_available"
-                                                    )
-                                                });
-                                            }}
+                                            disabled={
+                                                !props.contact.lnurl &&
+                                                !props.contact.ln_address
+                                            }
+                                            onClick={handlePay}
                                         >
                                             {i18n.t("contacts.pay")}
                                         </Button>
diff --git a/src/routes/settings/SyncNostrContacts.tsx b/src/routes/settings/SyncNostrContacts.tsx
index 10ac980..18ee890 100644
--- a/src/routes/settings/SyncNostrContacts.tsx
+++ b/src/routes/settings/SyncNostrContacts.tsx
@@ -1,6 +1,7 @@
 import { TextField } from "@kobalte/core";
 import { createSignal } from "solid-js";
-import NavBar from "~/components/NavBar";
+
+import { NavBar } from "~/components";
 import {
     Button,
     DefaultMain,
@@ -43,7 +44,7 @@ export default function SyncNostrContacts() {
                                     Sync Nostr Contacts
                                 </TextField.Label>
                                 <TextField.Input
-                                    class="w-full p-2 rounded-lg text-black"
+                                    class="w-full rounded-lg p-2 text-black"
                                     // placeholder="LNURL..."
                                 />
                                 <TextField.ErrorMessage class="text-red-500">