From 18e3ad8a418a6ef3e44f3e61b38e8f9b67e22038 Mon Sep 17 00:00:00 2001 From: Paul Miller Date: Tue, 18 Apr 2023 14:41:43 -0500 Subject: [PATCH] sending state and sent modal --- src/components/Sent.tsx | 37 ++++++++++++++++++++++++ src/components/layout/Button.tsx | 16 ++++++++--- src/routes/Send.tsx | 48 ++++++++++++++++++++++---------- 3 files changed, 82 insertions(+), 19 deletions(-) create mode 100644 src/components/Sent.tsx diff --git a/src/components/Sent.tsx b/src/components/Sent.tsx new file mode 100644 index 0000000..64f5e7f --- /dev/null +++ b/src/components/Sent.tsx @@ -0,0 +1,37 @@ +import { Dialog } from "@kobalte/core"; +import { ButtonLink, SmallHeader } from "~/components/layout"; + +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" + +export function SentModal(props: { details?: { nice: string } }) { + + return ( + + + +
+ +
+ + + Sent! + + + + X + +
+ + 
+                                {JSON.stringify(props.details)}
+
+ Nice + + +
+ + + ) +} \ No newline at end of file diff --git a/src/components/layout/Button.tsx b/src/components/layout/Button.tsx index a4cd620..5030215 100644 --- a/src/components/layout/Button.tsx +++ b/src/components/layout/Button.tsx @@ -1,7 +1,8 @@ import { cva, VariantProps } from "class-variance-authority"; -import { children, JSX, ParentComponent, splitProps } from "solid-js"; +import { children, JSX, ParentComponent, Show, splitProps, Switch } from "solid-js"; 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", { variants: { @@ -30,7 +31,9 @@ const button = cva("p-3 rounded-xl text-xl font-semibold disabled:opacity-50 dis // Help from https://github.com/arpadgabor/credee/blob/main/packages/www/src/components/ui/button.tsx type StyleProps = VariantProps -interface ButtonProps extends JSX.ButtonHTMLAttributes, StyleProps { } +interface ButtonProps extends JSX.ButtonHTMLAttributes, StyleProps { + loading?: boolean +} export const Button: ParentComponent = props => { const slot = children(() => props.children) @@ -45,8 +48,13 @@ export const Button: ParentComponent = props => { layout: local.layout, })} > - {slot()} - + +
+ {/* TODO: constrain this to the exact height of the button */} + +
+ + ) } diff --git a/src/routes/Send.tsx b/src/routes/Send.tsx index d2334f2..540be91 100644 --- a/src/routes/Send.tsx +++ b/src/routes/Send.tsx @@ -11,6 +11,7 @@ import { bip21decode } from "~/utils/TEMPbip21"; import { AmountEditable } from "~/components/AmountEditable"; import { useLocation } from "solid-start"; import { StyledRadioGroup } from "~/components/layout/Radio"; +import { SentModal } from "~/components/Sent"; type SendSource = "lightning" | "onchain"; @@ -19,9 +20,12 @@ const PAYMENT_METHODS = [{ value: "lightning", label: "Lightning", caption: "Fas // const TEST_DEST = "bitcoin:tb1pdh43en28jmhnsrhxkusja46aufdlae5qnfrhucw5jvefw9flce3sdxfcwe?amount=0.00001&label=heyo&lightning=lntbs10u1pjrwrdedq8dpjhjmcnp4qd60w268ve0jencwzhz048ruprkxefhj0va2uspgj4q42azdg89uupp5gngy2pqte5q5uvnwcxwl2t8fsdlla5s6xl8aar4xcsvxeus2w2pqsp5n5jp3pz3vpu92p3uswttxmw79a5lc566herwh3f2amwz2sp6f9tq9qyysgqcqpcxqrpwugv5m534ww5ukcf6sdw2m75f2ntjfh3gzeqay649256yvtecgnhjyugf74zakaf56sdh66ec9fqep2kvu6xv09gcwkv36rrkm38ylqsgpw3yfjl" // const TEST_DEST_ADDRESS = "tb1pdh43en28jmhnsrhxkusja46aufdlae5qnfrhucw5jvefw9flce3sdxfcwe" +type SentDetails = { nice: string } + export default function Send() { const [state, _] = useMegaStore(); + // These can only be set by the user const [destination, setDestination] = createSignal(""); const [privateLabel, setPrivateLabel] = createSignal(""); @@ -35,6 +39,10 @@ export default function Send() { const [address, setAddress] = createSignal(); const [description, setDescription] = createSignal(); + // Is sending / sent + const [sending, setSending] = createSignal(false); + const [sentDetails, setSentDetails] = createSignal(); + function clearAll() { setDestination(""); setPrivateLabel(""); @@ -110,29 +118,39 @@ export default function Send() { } async function handleSend() { - const bolt11 = invoice()?.bolt11; - if (source() === "lightning" && invoice() && bolt11) { - const nodes = await state.node_manager?.list_nodes(); - const firstNode = nodes[0] as string || "" - // If the invoice has sats use that, otherwise we pass the user-defined amount - if (invoice()?.amount_sats) { - await state.node_manager?.pay_invoice(firstNode, bolt11); + try { + setSending(true); + const bolt11 = invoice()?.bolt11; + if (source() === "lightning" && invoice() && bolt11) { + const nodes = await state.node_manager?.list_nodes(); + const firstNode = nodes[0] as string || "" + // If the invoice has sats use that, otherwise we pass the user-defined amount + if (invoice()?.amount_sats) { + await state.node_manager?.pay_invoice(firstNode, bolt11); + } else { + await state.node_manager?.pay_invoice(firstNode, bolt11, amountSats()); + } } else { - await state.node_manager?.pay_invoice(firstNode, bolt11, amountSats()); - + // eslint-disable-next-line @typescript-eslint/no-non-null-assertion + const txid = await state.node_manager?.send_to_address(address()!, amountSats()); + console.error(txid) } - } else { - // eslint-disable-next-line @typescript-eslint/no-non-null-assertion - const txid = await state.node_manager?.send_to_address(address()!, amountSats()); - console.error(txid) + + setSentDetails({ nice: "nice" }); + clearAll(); + console.error("SENT"); + } catch (e) { + console.error(e); + } finally { + setSending(false); } - console.error("SENT"); } return ( Send Bitcoin +
Destination @@ -225,7 +243,7 @@ export default function Send() {
- +