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"