fix(background)!: better payment confirmation & message

src/_locales/en/messages.json

@@ -51,6 +51,13 @@
   "pay_error_notEnoughFunds": {
     "message": "Insufficient funds to complete the payment."
   },
+  "pay_error_outgoingPaymentFailed": {
+    "message": "Payment failed."
+  },
+  "pay_error_outgoingPaymentCompletionLimitReached": {
+    "message": "Payment not finished yet.",
+    "description": "We were polling for completion, but it's not finished yet"
+  },
   "pay_error_invalidReceivers": {
     "message": "At the moment, you cannot pay this website.",
     "description": "We cannot send money (probable cause: un-peered wallets)"

src/background/config.ts

@@ -7,3 +7,8 @@ export const MAX_RATE_OF_PAY = '100';
 
 export const EXCHANGE_RATES_URL =
   'https://telemetry-exchange-rates.s3.amazonaws.com/exchange-rates-usd.json';
+
+export const OUTGOING_PAYMENT_POLLING_MAX_DURATION = 8_000;
+export const OUTGOING_PAYMENT_POLLING_INITIAL_DELAY = 2500;
+export const OUTGOING_PAYMENT_POLLING_INTERVAL = 1500;
+export const OUTGOING_PAYMENT_POLLING_MAX_ATTEMPTS = 8;

src/background/services/monetization.ts

@@ -6,11 +6,18 @@ import {
 } from '@/shared/messages';
 import { PaymentSession } from './paymentSession';
 import { computeRate, getSender, getTabId } from '../utils';
-import { isOutOfBalanceError } from './openPayments';
-import { isOkState, removeQueryParams } from '@/shared/helpers';
+import {
+  isMissingGrantPermissionsError,
+  isOutOfBalanceError,
+} from './openPayments';
+import {
+  OUTGOING_PAYMENT_POLLING_MAX_ATTEMPTS,
+  OUTGOING_PAYMENT_POLLING_MAX_DURATION,
+} from '@/background/config';
+import { isErrorWithKey, isOkState, removeQueryParams } from '@/shared/helpers';
 import type { AmountValue, PopupStore, Storage } from '@/shared/types';
 import type { Cradle } from '../container';
-
+import type { OutgoingPayment } from '@interledger/open-payments';
 export class MonetizationService {
   private logger: Cradle['logger'];
   private t: Cradle['t'];
@@ -269,18 +276,61 @@ export class MonetizationService {
       payableSessions.map((session) => session.pay(splitAmount)),
     );
 
-    const totalSentAmount = results
-      .filter((e) => e.status === 'fulfilled')
-      .reduce((acc, curr) => acc + BigInt(curr.value?.value ?? 0), 0n);
+    const outgoingPayments = new Map<string, OutgoingPayment | null>(
+      payableSessions.map((s, i) => [
+        s.id,
+        results[i].status === 'fulfilled' ? results[i].value : null,
+      ]),
+    );
+    this.logger.debug('polling outgoing payments for completion');
+    const signal = AbortSignal.timeout(OUTGOING_PAYMENT_POLLING_MAX_DURATION); // can use other signals as well, such as popup closed etc.
+    const pollingResults = await Promise.allSettled(
+      [...outgoingPayments]
+        .filter(([, outgoingPayment]) => outgoingPayment !== null)
+        .map(async ([sessionId, outgoingPaymentInitial]) => {
+          for await (const outgoingPayment of this.openPaymentsService.pollOutgoingPayment(
+            outgoingPaymentInitial!,
+            { signal, maxAttempts: OUTGOING_PAYMENT_POLLING_MAX_ATTEMPTS },
+          )) {
+            outgoingPayments.set(sessionId, outgoingPayment);
+          }
+          return outgoingPayments.get(sessionId)!;
+        }),
+    );
+
+    const totalSentAmount = [...outgoingPayments.values()].reduce(
+      (acc, op) => acc + BigInt(op?.sentAmount?.value ?? 0),
+      0n,
+    );
     if (totalSentAmount === 0n) {
+      const pollingErrors = pollingResults
+        .filter((e) => e.status === 'rejected')
+        .map((e) => e.reason);
+      if (pollingErrors.some((e) => isMissingGrantPermissionsError(e))) {
+        // This permission request to read outgoing payments was added at a
+        // later time, so existing connected wallets won't have this permission.
+        // Assume as success for backward compatibility.
+        return;
+      }
+
       const isNotEnoughFunds = results
         .filter((e) => e.status === 'rejected')
         .some((e) => isOutOfBalanceError(e.reason));
-      if (isNotEnoughFunds) {
+      const isPollingLimitReached = pollingErrors.some(
+        (err) =>
+          (isErrorWithKey(err) &&
+            err.key === 'pay_error_outgoingPaymentCompletionLimitReached') ||
+          (err instanceof DOMException && err.name === 'TimeoutError'),
+      );
+
+      if (isNotEnoughFunds || isPollingLimitReached) {
         throw new Error(this.t('pay_error_notEnoughFunds'));
       }
       throw new Error('Could not facilitate payment for current website.');
     }
+
+    // TODO: If sentAmount is non-zero but less than to debitAmount, show
+    // warning that not entire payment went through (yet?)
   }
 
   private canTryPayment(

src/background/services/openPayments.ts

@@ -32,6 +32,7 @@ import {
   errorWithKeyToJSON,
   getWalletInformation,
   isErrorWithKey,
+  sleep,
   withResolvers,
   type ErrorWithKeyLike,
 } from '@/shared/helpers';
@@ -44,6 +45,8 @@ import {
   DEFAULT_RATE_OF_PAY,
   MAX_RATE_OF_PAY,
   MIN_RATE_OF_PAY,
+  OUTGOING_PAYMENT_POLLING_INTERVAL,
+  OUTGOING_PAYMENT_POLLING_INITIAL_DELAY,
 } from '../config';
 import { OPEN_PAYMENTS_REDIRECT_URL } from '@/shared/defines';
 import type { Cradle } from '@/background/container';
@@ -694,7 +697,7 @@ export class OpenPaymentsService {
             },
             {
               type: 'outgoing-payment',
-              actions: ['create'],
+              actions: ['create', 'read'],
               identifier: walletAddress.id,
               limits: {
                 debitAmount: {
@@ -881,6 +884,49 @@ export class OpenPaymentsService {
     return outgoingPayment;
   }
 
+  /** Polls for the completion of an outgoing payment */
+  async *pollOutgoingPayment(
+    outgoingPayment: OutgoingPayment,
+    {
+      signal,
+      maxAttempts = 10,
+    }: Partial<{ signal: AbortSignal; maxAttempts: number }> = {},
+  ): AsyncGenerator<OutgoingPayment, OutgoingPayment, void> {
+    let attempt = 0;
+    await sleep(OUTGOING_PAYMENT_POLLING_INITIAL_DELAY);
+    while (++attempt <= maxAttempts) {
+      try {
+        signal?.throwIfAborted();
+        outgoingPayment = await this.client!.outgoingPayment.get({
+          url: outgoingPayment.id,
+          accessToken: this.token.value,
+        });
+        yield outgoingPayment;
+        if (outgoingPayment.failed) {
+          throw new ErrorWithKey('pay_error_outgoingPaymentFailed');
+        }
+        if (
+          outgoingPayment.debitAmount.value === outgoingPayment.sentAmount.value
+        ) {
+          // completed
+          return outgoingPayment;
+        }
+        signal?.throwIfAborted();
+        await sleep(OUTGOING_PAYMENT_POLLING_INTERVAL);
+      } catch (error) {
+        if (isMissingGrantPermissionsError(error)) {
+          throw error;
+        } else if (isTokenExpiredError(error)) {
+          await this.rotateToken();
+        } else {
+          throw error;
+        }
+      }
+    }
+
+    throw new ErrorWithKey('pay_error_outgoingPaymentCompletionLimitReached');
+  }
+
   async probeDebitAmount(
     amount: AmountValue,
     incomingPayment: IncomingPayment['id'],
@@ -1023,6 +1069,15 @@ export const isOutOfBalanceError = (error: any) => {
   return error.status === 403 && error.description === 'unauthorized';
 };
 
+export const isMissingGrantPermissionsError = (error: any) => {
+  if (!isOpenPaymentsClientError(error)) return false;
+  return (
+    error.status === 403 &&
+    (error.description === 'Insufficient Grant' /* Fynbos */ ||
+      error.description === 'Inactive Token')
+  );
+};
+
 export const isInvalidReceiverError = (error: any) => {
   if (!isOpenPaymentsClientError(error)) return false;
   return error.status === 400 && error.description === 'invalid receiver';

src/background/services/paymentSession.ts

@@ -9,6 +9,7 @@ import { transformBalance } from '@/popup/lib/utils';
 import {
   isInvalidReceiverError,
   isKeyRevokedError,
+  isMissingGrantPermissionsError,
   isNonPositiveAmountError,
   isOutOfBalanceError,
   isTokenExpiredError,
@@ -368,7 +369,7 @@ export class PaymentSession {
     return incomingPayment;
   }
 
-  async pay(amount: number) {
+  async pay(amount: number): Promise<OutgoingPayment> {
     if (this.isDisabled) {
       throw new Error('Attempted to send a payment to a disabled session.');
     }
@@ -377,51 +378,48 @@ export class PaymentSession {
       (error) => {
         if (isKeyRevokedError(error)) {
           this.events.emit('open_payments.key_revoked');
-          return;
         }
         throw error;
       },
     );
-    if (!incomingPayment) return;
-
-    let outgoingPayment: OutgoingPayment | undefined;
 
     try {
-      outgoingPayment = await this.openPaymentsService.createOutgoingPayment({
-        walletAddress: this.sender,
-        incomingPaymentId: incomingPayment.id,
-        amount: (amount * 10 ** this.sender.assetScale).toFixed(0),
+      const outgoingPayment =
+        await this.openPaymentsService.createOutgoingPayment({
+          walletAddress: this.sender,
+          incomingPaymentId: incomingPayment.id,
+          amount: (amount * 10 ** this.sender.assetScale).toFixed(0),
+        });
+
+      this.sendMonetizationEvent({
+        requestId: this.requestId,
+        details: {
+          amountSent: {
+            currency: outgoingPayment.receiveAmount.assetCode,
+            value: transformBalance(
+              outgoingPayment.receiveAmount.value,
+              outgoingPayment.receiveAmount.assetScale,
+            ),
+          },
+          incomingPayment: outgoingPayment.receiver,
+          paymentPointer: this.receiver.id,
+        },
       });
+
+      return outgoingPayment;
     } catch (e) {
       if (isKeyRevokedError(e)) {
         this.events.emit('open_payments.key_revoked');
+        throw e;
+      } else if (isMissingGrantPermissionsError(e)) {
+        throw e;
       } else if (isTokenExpiredError(e)) {
         await this.openPaymentsService.rotateToken();
+        return await this.pay(amount);
       } else {
         throw e;
       }
-    } finally {
-      if (outgoingPayment) {
-        const { receiveAmount, receiver: incomingPayment } = outgoingPayment;
-
-        this.sendMonetizationEvent({
-          requestId: this.requestId,
-          details: {
-            amountSent: {
-              currency: receiveAmount.assetCode,
-              value: transformBalance(
-                receiveAmount.value,
-                receiveAmount.assetScale,
-              ),
-            },
-            incomingPayment,
-            paymentPointer: this.receiver.id,
-          },
-        });
-      }
     }
-
-    return outgoingPayment?.debitAmount;
   }
 
   private setAmount(amount: bigint): void {