[AMB-309] feat: invoice descriptions

messages/en.json

@@ -15,12 +15,16 @@
     },
     "Wallet": {
       "add-contact": "Add Contact",
+      "add-desc": "Add Description",
       "amount": "Please specify an amount.",
       "amount-custom": "Customize Amount",
       "amount-ln": "Please specify an amount to generate a Lightning invoice.",
       "assets": "Assets",
       "available": "Available",
       "confirm-pay": "Confirm Payment",
+      "desc": "Description",
+      "edit-desc": "Edit Description",
+      "enter-desc": "Enter an optional description.",
       "fee": "Fee",
       "locked": "Your vault is locked.",
       "receive": "Receive",

messages/es.json

@@ -15,12 +15,16 @@
     },
     "Wallet": {
       "add-contact": "Agregar Contacto",
+      "add-desc": "Agrega una descripción",
       "amount": "Especifíca una cantidad.",
       "amount-custom": "Cambia la cantidad",
       "amount-ln": "Por favor especifíca una cantidad para generar un recibo de Lightning.",
       "assets": "Activos",
       "available": "Disponible",
       "confirm-pay": "Confirmar Pago",
+      "desc": "Descripción",
+      "edit-desc": "Modifica la descripción",
+      "enter-desc": "Opcionalmente agrega una descripción.",
       "fee": "Comisión",
       "locked": "Tu bóveda esta bloqueada.",
       "receive": "Recibir",

src/graphql/types.ts

@@ -98,6 +98,7 @@ export type CreateLightingInvoice = {
 
 export type CreateLightingInvoiceInput = {
   amount: Scalars['Float']['input'];
+  invoice_description?: InputMaybe<Scalars['String']['input']>;
   wallet_account_id: Scalars['String']['input'];
 };
 

src/views/wallet/Receive.tsx

@@ -55,6 +55,9 @@ export const Receive = () => {
   const [amountUSDSaved, setAmountUSDSaved] = useState('');
   const [amountSatsSaved, setAmountSatsSaved] = useState('');
   const [satsFirst, setSatsFirst] = useState(false);
+  const [descriptionOpen, setDescriptionOpen] = useState(false);
+  const [description, setDescription] = useState('');
+  const [descriptionSaved, setDescriptionSaved] = useState('');
 
   const [value] = useLocalStorage(LOCALSTORAGE_KEYS.currentWalletId, '');
 
@@ -142,6 +145,7 @@ export const Receive = () => {
       variables: {
         input: {
           amount: Number(amountSatsInput),
+          invoice_description: description,
           wallet_account_id: liquidAccountId,
         },
       },
@@ -156,6 +160,8 @@ export const Receive = () => {
         setAmountUSDSaved('');
         setAmountSatsSaved('');
         setSatsFirst(false);
+        setDescription('');
+        setDescriptionSaved('');
 
         const messages = handleApolloError(err);
 
@@ -248,6 +254,8 @@ export const Receive = () => {
                     setAmountUSDSaved('');
                     setAmountSatsSaved('');
                     setSatsFirst(false);
+                    setDescription('');
+                    setDescriptionSaved('');
 
                     switch (o) {
                       case 'Any Currency':
@@ -464,6 +472,65 @@ export const Receive = () => {
         </Drawer>
       ) : null}
 
+      {receive === 'Lightning' ? (
+        <Drawer
+          open={descriptionOpen}
+          onOpenChange={setDescriptionOpen}
+          onClose={() => {
+            setTimeout(() => {
+              setDescription(descriptionSaved);
+            }, 1000);
+          }}
+        >
+          <DrawerTrigger asChild disabled={loading}>
+            <button className="w-full text-center text-primary transition-colors hover:text-primary-hover">
+              {descriptionSaved
+                ? '- ' + t('Wallet.edit-desc')
+                : '+ ' + t('Wallet.add-desc')}
+            </button>
+          </DrawerTrigger>
+
+          <DrawerContent>
+            <input
+              autoFocus
+              id="description"
+              type="text"
+              value={description}
+              onChange={e => {
+                setDescription(e.target.value);
+              }}
+              className="mt-16 w-full border-b border-primary bg-transparent pb-px text-center text-5xl font-medium focus:outline-none"
+            />
+
+            <label
+              htmlFor="description"
+              className="mb-16 mt-6 block text-center text-sm"
+            >
+              {t('Wallet.enter-desc')}
+            </label>
+
+            <Button
+              onClick={() => {
+                setDescriptionSaved(description);
+
+                if (
+                  description !== descriptionSaved &&
+                  Number(amountSatsInput)
+                ) {
+                  createLightningInvoice();
+                }
+
+                setDescriptionOpen(false);
+              }}
+              disabled={!description}
+              className="mb-4 w-full"
+            >
+              {t('save')}
+            </Button>
+          </DrawerContent>
+        </Drawer>
+      ) : null}
+
       <Button
         onClick={() => {
           navigator.clipboard.writeText(receiveString);

src/views/wallet/Send.tsx

@@ -95,6 +95,7 @@ export const Send = () => {
     'miban' | 'lightning-address' | 'invoice' | 'liquid'
   >();
   const [invoiceNode, setInvoiceNode] = useState('');
+  const [invoiceDescription, setInvoiceDescription] = useState('');
   const [asset, setAsset] = useState<Assets>('Liquid Bitcoin');
   const [selectAsset, setSelectAsset] = useState(false);
   const [amountUSDInput, setAmountUSDInput] = useState('');
@@ -107,6 +108,7 @@ export const Send = () => {
     setSendString('');
     setSendType(undefined);
     setInvoiceNode('');
+    setInvoiceDescription('');
     setAsset('Liquid Bitcoin');
     setAmountUSDInput('');
     setAmountSatsInput('');
@@ -677,6 +679,12 @@ export const Send = () => {
                 recipient
               )}
             </p>
+
+            {invoiceDescription ? (
+              <p className="mt-2 text-center font-medium text-slate-600 dark:text-neutral-400">
+                {t('App.Wallet.desc')}: {invoiceDescription}
+              </p>
+            ) : null}
           </div>
 
           <p className="mb-3 text-center text-sm text-slate-600 dark:text-neutral-400">
@@ -884,10 +892,12 @@ export const Send = () => {
 
             if (type === 'invoice') {
               try {
-                const { payeeNodeKey, satoshis } = bolt11.decode(sendString);
+                const { payeeNodeKey, satoshis, tagsObject } =
+                  bolt11.decode(sendString);
 
                 if (payeeNodeKey && satoshis) {
                   setInvoiceNode(payeeNodeKey);
+                  setInvoiceDescription(tagsObject.description || '');
                   setAmountSatsInput(satoshis.toString());
                   setAmountUSDInput((latestPricePerSat * satoshis).toFixed(2));
                 } else {