diff --git a/components/generate-invoice.tsx b/components/generate-invoice.tsx index b3dcaaed..ccc4a622 100644 --- a/components/generate-invoice.tsx +++ b/components/generate-invoice.tsx @@ -12,9 +12,13 @@ type LnInvoiceObject = { } const LN_INVOICE_CREATE_ON_BEHALF_OF_RECIPIENT = gql` - mutation lnInvoiceCreateOnBehalfOfRecipient($walletId: WalletId!, $amount: SatAmount!) { + mutation lnInvoiceCreateOnBehalfOfRecipient( + $walletId: WalletId! + $amount: SatAmount! + $memo: Memo + ) { mutationData: lnInvoiceCreateOnBehalfOfRecipient( - input: { recipientWalletId: $walletId, amount: $amount } + input: { recipientWalletId: $walletId, amount: $amount, memo: $memo } ) { errors { message @@ -30,9 +34,10 @@ const LN_USD_INVOICE_CREATE_ON_BEHALF_OF_RECIPIENT = gql` mutation lnUsdInvoiceCreateOnBehalfOfRecipient( $walletId: WalletId! $amount: CentAmount! + $memo: memo ) { mutationData: lnUsdInvoiceCreateOnBehalfOfRecipient( - input: { recipientWalletId: $walletId, amount: $amount } + input: { recipientWalletId: $walletId, amount: $amount, memo: $memo } ) { errors { message @@ -53,12 +58,14 @@ function GenerateInvoice({ amountInBase, regenerate, currency, + memo, }: { recipientWalletId: string recipientWalletCurrency: string amountInBase: number regenerate: () => void currency: string + memo: string }) { const [invoiceStatus, setInvoiceStatus] = useState< "loading" | "new" | "need-update" | "expired" @@ -85,7 +92,7 @@ function GenerateInvoice({ } useEffect(() => { createInvoice({ - variables: { walletId: recipientWalletId, amount: amountInBase }, + variables: { walletId: recipientWalletId, amount: amountInBase, memo }, }) if (currency !== "SATS" || recipientWalletCurrency === "USD") { timerIds.current.push( @@ -99,7 +106,7 @@ function GenerateInvoice({ window.setTimeout(() => setInvoiceStatus("expired"), INVOICE_EXPIRE_INTERVAL), ) return clearAllTimers - }, [recipientWalletId, amountInBase, currency, createInvoice]) + }, [recipientWalletId, amountInBase, currency, createInvoice, memo]) let errorString: string | null = error?.message || null let invoice diff --git a/components/receive-amount.tsx b/components/receive-amount.tsx index 0c307229..d5cb825f 100644 --- a/components/receive-amount.tsx +++ b/components/receive-amount.tsx @@ -20,9 +20,11 @@ const satsFormatter = new Intl.NumberFormat("en-US", { export default function ReceiveAmount({ recipientWalletId, recipientWalletCurrency, + memo, }: { recipientWalletId: string recipientWalletCurrency: string + memo: string }) { const router = useRouter() const { satsToUsd, usdToSats } = useSatPrice() @@ -78,6 +80,7 @@ export default function ReceiveAmount({ recipientWalletCurrency === "USD" ? triggerRegenerateUsdInvoice : triggerRegenerateBtcInvoice + return ( <>
@@ -102,6 +105,7 @@ export default function ReceiveAmount({ amountInBase={amountInBase} regenerate={triggerRegenerateInvoice} currency={currency} + memo={memo} /> )} diff --git a/components/receive-no-amount.tsx b/components/receive-no-amount.tsx index 0d26ca9f..3d8f4104 100644 --- a/components/receive-no-amount.tsx +++ b/components/receive-no-amount.tsx @@ -12,9 +12,9 @@ type LnInvoiceObject = { } const LN_NOAMOUNT_INVOICE_CREATE_ON_BEHALF_OF_RECIPIENT = gql` - mutation lnNoAmountInvoiceCreateOnBehalfOfRecipient($walletId: WalletId!) { + mutation lnNoAmountInvoiceCreateOnBehalfOfRecipient($memo: Memo, $walletId: WalletId!) { mutationData: lnNoAmountInvoiceCreateOnBehalfOfRecipient( - input: { recipientWalletId: $walletId } + input: { memo: $memo, recipientWalletId: $walletId } ) { errors { message @@ -29,9 +29,11 @@ const LN_NOAMOUNT_INVOICE_CREATE_ON_BEHALF_OF_RECIPIENT = gql` export default function ReceiveNoAmount({ recipientWalletId, onSetAmountClick, + memo, }: { recipientWalletId: string onSetAmountClick: () => void + memo: string }) { const [createInvoice, { loading, error, data }] = useMutation<{ mutationData: { @@ -42,9 +44,9 @@ export default function ReceiveNoAmount({ useEffect(() => { createInvoice({ - variables: { walletId: recipientWalletId }, + variables: { memo: memo, walletId: recipientWalletId }, }) - }, [createInvoice, recipientWalletId]) + }, [createInvoice, recipientWalletId, memo]) if (error) { return
{error.message}
diff --git a/pages/[username].tsx b/pages/[username].tsx index e4878250..8df5358f 100644 --- a/pages/[username].tsx +++ b/pages/[username].tsx @@ -5,6 +5,8 @@ import Card from "react-bootstrap/Card" import Container from "react-bootstrap/Container" import Image from "react-bootstrap/Image" import { gql, useQuery } from "@apollo/client" +import { useState } from "react" +import { useDebouncedCallback } from "use-debounce" import ReceiveAmount from "../components/receive-amount" import ReceiveNoAmount from "../components/receive-no-amount" @@ -24,6 +26,11 @@ export default function Receive() { const router = useRouter() const { username, amount } = router.query + const [memo, setMemo] = useState("") + const debouncedMemo = useDebouncedCallback((memo) => { + setMemo(memo) + }, 1000) + const { error, loading, data } = useQuery(RECIPIENT_WALLET_ID, { variables: { username, @@ -53,15 +60,27 @@ export default function Receive() { Pay {username} +
+ debouncedMemo(e.target.value)} + /> +
+ {isAmountInvoice ? ( ) : ( )} diff --git a/pages/index.css b/pages/index.css index b21e2c99..9517764d 100644 --- a/pages/index.css +++ b/pages/index.css @@ -78,3 +78,15 @@ code { .invoice-container { max-width: 390px; } + +.memo-container { + padding: 0.5rem 0rem; + display: flex; + align-items: center; + justify-content: center; +} + +.memo { + flex-grow: 2; + max-width: 300px; +} diff --git a/yarn.lock b/yarn.lock index afb30b39..76b57b68 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3511,9 +3511,9 @@ prelude-ls@^1.2.1: integrity sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g== prettier@^2.4.1: - version "2.5.0" - resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.5.0.tgz#a6370e2d4594e093270419d9cc47f7670488f893" - integrity sha512-FM/zAKgWTxj40rH03VxzIPdXmj39SwSjwG0heUcNFwI+EMZJnY93yAiKXM3dObIKAM5TA88werc8T/EwhB45eg== + version "2.6.0" + resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.6.0.tgz#12f8f504c4d8ddb76475f441337542fa799207d4" + integrity sha512-m2FgJibYrBGGgQXNzfd0PuDGShJgRavjUoRCw1mZERIWVSXF0iLzLm+aOqTAbLnC3n6JzUhAA8uZnFVghHJ86A== process@0.11.10: version "0.11.10"