Display memo in payment flow

[rolznz]

In bc-send-payment we should show the memo from the invoice if there is one.

[arnavkirti]

Display Memo in Payment Flow

Issue

The payment flow wasn't displaying the memo/description from Lightning invoices, which contains important context about the payment.

Solution

Added memo display functionality to the bc-send-payment component by:

1. Added a new render function for the memo:

private renderMemo(decodedInvoice: Invoice) {
  if (!decodedInvoice.description) {
    return null;
  }

  return html`
    <p class="text-center mb-6 ${classes['text-neutral-secondary']}">
      ${decodedInvoice.description}
    </p>
  `;
}

2. Updated the main render method to include the memo display between the heading and payment state:

return html`
  <div class="flex flex-col justify-center items-center font-sans w-full">
    ${this.renderHeading(decodedInvoice)}
    ${this.renderMemo(decodedInvoice)}
    ${paymentStateElement}
  </div>
`;

Benefits

• Users can now see what they're paying for directly in the payment flow
• Memo is styled consistently with the rest of the UI
• Only displays when a description exists in the invoice
• Maintains the existing component's responsive design

The memo is displayed with secondary text styling to maintain visual hierarchy while providing additional context for the payment.

Should I make a PR for this?

[rolznz]

@arnavkirti that would be great, thank you!

[arnavkirti]

I have made a PR with changes.