Added an optional memo input

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: 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

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 (
     <>
       <div className="amount-input">
@@ -102,6 +105,7 @@ export default function ReceiveAmount({
           amountInBase={amountInBase}
           regenerate={triggerRegenerateInvoice}
           currency={currency}
+          memo={memo}
         />
       )}
     </>

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 <div className="error">{error.message}</div>

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() {
           <Card className="text-center">
             <Card.Header>Pay {username}</Card.Header>
 
+            <div className="memo-container">
+              <input
+                className="memo"
+                type="text"
+                maxLength={159}
+                placeholder="Optional memo"
+                onChange={(e) => debouncedMemo(e.target.value)}
+              />
+            </div>
+
             {isAmountInvoice ? (
               <ReceiveAmount
                 recipientWalletId={recipientWalletId}
                 recipientWalletCurrency={recipientWalletCurrency}
+                memo={memo}
               />
             ) : (
               <ReceiveNoAmount
                 recipientWalletId={recipientWalletId}
                 onSetAmountClick={onSetAmountClick}
+                memo={memo}
               />
             )}
 

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;
+}

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==
 
 [email protected]:
   version "0.11.10"