Show aggregated wallet errors in QR code

components/invoice.js

@@ -8,7 +8,7 @@ import Bolt11Info from './bolt11-info'
 import { useQuery } from '@apollo/client'
 import { INVOICE } from '@/fragments/wallet'
 import { FAST_POLL_INTERVAL, SSR } from '@/lib/constants'
-import { WalletConfigurationError } from '@/wallets/errors'
+import { WalletAggregateError, WalletConfigurationError } from '@/wallets/errors'
 import ItemJob from './item-job'
 import Item from './item'
 import { CommentFlat } from './comment'
@@ -103,12 +103,7 @@ export default function Invoice ({
 
   return (
     <>
-      {/* TODO: handle aggregated wallet errors */}
+      <WalletError error={walletError} />
-      {walletError && !(walletError instanceof WalletConfigurationError) &&
-        <div className='text-center fw-bold text-info mb-3' style={{ lineHeight: 1.25 }}>
-          Paying from attached wallet failed:
-          <code> {walletError.message}</code>
-        </div>}
       <Qr
         value={invoice.bolt11}
         description={numWithUnits(invoice.satsRequested, { abbreviate: false })}
@@ -206,3 +201,23 @@ function ActionInfo ({ invoice }) {
     </div>
   )
 }
+
+function WalletError ({ error }) {
+  if (!error || error instanceof WalletConfigurationError) return null
+
+  if (!(error instanceof WalletAggregateError)) {
+    console.error('unexpected wallet error:', error)
+    return null
+  }
+
+  return (
+    <div className='text-center fw-bold text-info mb-3' style={{ lineHeight: 1.25 }}>
+      <div className='text-info mb-2'>Paying from attached wallets failed:</div>
+      {error.errors.map((e, i) => (
+        <div key={i}>
+          <code>{e.wallet}: {e.reason || e.message}</code>
+        </div>
+      ))}
+    </div>
+  )
+}

wallets/errors.js

@@ -22,6 +22,8 @@ export class WalletNotEnabledError extends WalletConfigurationError {
   constructor (name) {
     super(`wallet is not enabled: ${name}`)
     this.name = 'WalletNotEnabledError'
+    this.wallet = name
+    this.reason = 'wallet is not enabled'
   }
 }
 
@@ -29,6 +31,8 @@ export class WalletSendNotConfiguredError extends WalletConfigurationError {
   constructor (name) {
     super(`wallet send is not configured: ${name}`)
     this.name = 'WalletSendNotConfiguredError'
+    this.wallet = name
+    this.reason = 'wallet send is not configured'
   }
 }
 
@@ -36,7 +40,9 @@ export class WalletSenderError extends WalletPaymentError {
   constructor (name, invoice, message) {
     super(`${name} failed to pay invoice ${invoice.hash}: ${message}`)
     this.name = 'WalletSenderError'
+    this.wallet = name
     this.invoice = invoice
+    this.reason = message
   }
 }