fix(background)!: better payment confirmation & message

src/_locales/en/messages.json

@@ -48,16 +48,37 @@
   "keyRevoked_action_reconnectBtn": {
     "message": "Reconnect"
   },
+  "pay_action_pay": {
+    "message": "Send now"
+  },
   "pay_error_notEnoughFunds": {
     "message": "Insufficient funds to complete the payment."
   },
+  "pay_error_outgoingPaymentFailed": {
+    "message": "We were unable to process this transaction. Please try again!",
+    "description": "OutgoingPayment.failed === true"
+  },
+  "pay_warn_pay_warn_outgoingPaymentPollingIncomplete": {
+    "message": "We could not verify if the payment was completed. Please ensure you've enough funds in your wallet.",
+    "description": "We were polling for completion, but it's not finished yet - could mean it'll never succeed or it'll take a long time to settle."
+  },
+  "pay_error_general": {
+    "message": "We were unable to process this transaction. Please try again!"
+  },
   "pay_error_invalidReceivers": {
     "message": "At the moment, you cannot pay this website.",
     "description": "We cannot send money (probable cause: un-peered wallets)"
   },
   "pay_error_notMonetized": {
     "message": "This website is not monetized."
   },
+  "pay_state_success": {
+    "message": "Thanks for your support! $AMOUNT$ was sent to $WEBSITE_URL$.",
+    "placeholders": {
+      "AMOUNT": { "content": "$1", "example": "$2.05" },
+      "WEBSITE_URL": { "content": "$2", "example": "https://example.com" }
+    }
+  },
   "outOfFunds_error_title": {
     "message": "Out of funds"
   },

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/background.ts

@@ -239,7 +239,7 @@ export class Background {
 
             case 'PAY_WEBSITE':
               return success(
-                await this.monetizationService.pay(message.payload.amount),
+                await this.monetizationService.pay(message.payload),
               );
 
             // endregion

src/background/services/monetization.ts

@@ -1,14 +1,31 @@
 import type { Runtime, Tabs } from 'webextension-polyfill';
-import {
+import type {
+  PayWebsitePayload,
+  PayWebsiteResponse,
   ResumeMonetizationPayload,
   StartMonetizationPayload,
   StopMonetizationPayload,
 } 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 {
+  ErrorWithKey,
+  formatCurrency,
+  isErrorWithKey,
+  isOkState,
+  removeQueryParams,
+} from '@/shared/helpers';
+import { transformBalance } from '@/popup/lib/utils';
 import type { AmountValue, PopupStore, Storage } from '@/shared/types';
+import type { OutgoingPayment } from '@interledger/open-payments';
 import type { Cradle } from '../container';
 
 export class MonetizationService {
@@ -249,7 +266,7 @@ export class MonetizationService {
     }
   }
 
-  async pay(amount: string) {
+  async pay({ amount }: PayWebsitePayload): Promise<PayWebsiteResponse> {
     const tab = await this.windowState.getCurrentTab();
     if (!tab || !tab.id) {
       throw new Error('Unexpected error: could not find active tab.');
@@ -263,27 +280,95 @@ export class MonetizationService {
       throw new Error(this.t('pay_error_notMonetized'));
     }
 
+    const { walletAddress } = await this.storage.get(['walletAddress']);
+    const { url: tabUrl } = this.tabState.getPopupTabData(tab);
+
     const splitAmount = Number(amount) / payableSessions.length;
     // TODO: handle paying across two grants (when one grant doesn't have enough funds)
     const results = await Promise.allSettled(
       payableSessions.map((session) => session.pay(splitAmount)),
     );
 
-    const totalSentAmount = results
-      .filter((e) => e.status === 'fulfilled')
-      .reduce(
-        (acc, curr) => acc + BigInt(curr.value?.debitAmount.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!.id,
+            { 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.
+        const totalDebitAmount = [...outgoingPayments.values()].reduce(
+          (acc, op) => acc + BigInt(op?.debitAmount?.value ?? 0),
+          0n,
+        );
+        const { assetScale, assetCode } = walletAddress!;
+        const sentAmount = transformBalance(totalDebitAmount, assetScale);
+        return {
+          type: 'success',
+          sentAmount: sentAmount,
+          sentAmountFormatted: formatCurrency(sentAmount, assetCode),
+          url: tabUrl,
+        };
+      }
+
       const isNotEnoughFunds = results
         .filter((e) => e.status === 'rejected')
         .some((e) => isOutOfBalanceError(e.reason));
+      const isPollingLimitReached = pollingErrors.some(
+        (err) =>
+          (isErrorWithKey(err) &&
+            err.key === 'pay_warn_pay_warn_outgoingPaymentPollingIncomplete') ||
+          (err instanceof DOMException && err.name === 'TimeoutError'),
+      );
+
       if (isNotEnoughFunds) {
-        throw new Error(this.t('pay_error_notEnoughFunds'));
+        throw new ErrorWithKey('pay_error_notEnoughFunds');
       }
-      throw new Error('Could not facilitate payment for current website.');
+      if (isPollingLimitReached) {
+        throw new ErrorWithKey(
+          'pay_warn_pay_warn_outgoingPaymentPollingIncomplete',
+        );
+      }
+      throw new ErrorWithKey('pay_error_general');
     }
+
+    // TODO: If sentAmount is non-zero but less than to debitAmount, show
+    // warning that not entire payment went through (yet?)
+    const { assetCode, assetScale } = walletAddress!;
+    const sentAmount = transformBalance(totalSentAmount, assetScale);
+    return {
+      type: 'success',
+      sentAmount: sentAmount,
+      sentAmountFormatted: formatCurrency(sentAmount, assetCode),
+      url: tabUrl,
+    };
   }
 
   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,50 @@ export class OpenPaymentsService {
     return outgoingPayment;
   }
 
+  /** Polls for the completion of an outgoing payment */
+  async *pollOutgoingPayment(
+    outgoingPaymentId: OutgoingPayment['id'],
+    {
+      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();
+        const outgoingPayment = await this.client!.outgoingPayment.get({
+          url: outgoingPaymentId,
+          accessToken: this.token.value,
+        });
+        yield outgoingPayment;
+        if (outgoingPayment.failed) {
+          throw new ErrorWithKey('pay_error_outgoingPaymentFailed');
+        }
+        if (
+          outgoingPayment.debitAmount.value === outgoingPayment.sentAmount.value
+        ) {
+          return outgoingPayment; // completed
+        }
+        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_warn_pay_warn_outgoingPaymentPollingIncomplete',
+    );
+  }
+
   async probeDebitAmount(
     amount: AmountValue,
     incomingPayment: IncomingPayment['id'],
@@ -1023,6 +1070,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,
@@ -410,6 +411,8 @@ export class PaymentSession {
       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); // retry