feat: use new UX flow for connecting wallet

src/_locales/en/messages.json

@@ -88,8 +88,73 @@
   "outOfFundsAddFunds_action_addRecurring": {
     "message": "Add funds"
   },
+  "connectWallet_text_title": {
+    "message": "Let's get you set up!"
+  },
+  "connectWallet_text_desc": {
+    "message": "Just a few quick steps to connect the extension to your wallet"
+  },
+  "connectWallet_label_walletAddress": {
+    "message": "Enter wallet address/payment pointer"
+  },
+  "connectWallet_labelGroup_amount": {
+    "message": "Enter amount to allocate from wallet"
+  },
+  "connectWallet_label_amount": {
+    "message": "Amount"
+  },
+  "connectWallet_label_recurring": {
+    "message": "Renew monthly"
+  },
+  "connectWallet_label_publicKey": {
+    "message": "Please copy this key and paste it into your wallet manually and then connect."
+  },
+  "connectWallet_text_publicKeyLearnMore": {
+    "message": "Learn more."
+  },
+  "connectWallet_action_connect": {
+    "message": "Connect"
+  },
+  "connectWallet_text_footerNotice": {
+    "message": "We'll automatically connect with your wallet provider."
+  },
+  "connectWallet_text_footerNoticeLearnMore": {
+    "message": "Learn more",
+    "description": "Learn more about how this works"
+  },
+  "connectWallet_error_urlRequired": {
+    "message": "Wallet address is required."
+  },
+  "connectWallet_error_urlInvalidUrl": {
+    "message": "Invalid wallet address URL."
+  },
+  "connectWallet_error_urlInvalidNotHttps": {
+    "message": "Wallet address must be a https:// URL or a payment pointer."
+  },
+  "connectWallet_error_amountRequired": {
+    "message": "Amount is required."
+  },
+  "connectWallet_error_amountInvalidNumber": {
+    "message": "Please provide a valid number as amount."
+  },
+  "connectWallet_error_amountMinimum": {
+    "message": "An amount greater than $AMOUNT$ is required.",
+    "placeholders": {
+      "AMOUNT": { "content": "$1", "example": "$2.05" }
+    }
+  },
+  "connectWallet_error_failedAutoKeyAdd": {
+    "message": "We couldn't automatically share the key-pair with your provider."
+  },
+  "connectWallet_error_failedAutoKeyAddWhy": {
+    "message": "Why?",
+    "description": "Clicking this will show reason for why automatic key-adding failed."
+  },
   "connectWallet_error_invalidClient": {
-    "message": "Failed to connect. Please make sure you have added the public key to the correct wallet address."
+    "message": "Failed to connect. Please make sure you have added the key to the correct wallet address."
+  },
+  "connectWalletKeyService_error_notImplemented": {
+    "message": "Automatic key addition is not implemented for given wallet provider yet."
   },
   "allInvalidLinks_state_text": {
     "message": "At the moment, you can not pay this website."

src/background/services/openPayments.ts

@@ -25,15 +25,15 @@ import type { Tabs } from 'webextension-polyfill';
 import { getExchangeRates, getRateOfPay, toAmount } from '../utils';
 import { exportJWK, generateEd25519KeyPair } from '@/shared/crypto';
 import { bytesToHex } from '@noble/hashes/utils';
-import { getWalletInformation } from '@/shared/helpers';
+import { ErrorWithKey, getWalletInformation } from '@/shared/helpers';
 import { AddFundsPayload, ConnectWalletPayload } from '@/shared/messages';
 import {
   DEFAULT_RATE_OF_PAY,
   MAX_RATE_OF_PAY,
   MIN_RATE_OF_PAY,
 } from '../config';
 import { OPEN_PAYMENTS_REDIRECT_URL } from '@/shared/defines';
-import type { Cradle } from '../container';
+import type { Cradle } from '@/background/container';
 
 interface KeyInformation {
   privateKey: string;
@@ -311,6 +311,7 @@ export class OpenPaymentsService {
     walletAddressUrl,
     amount,
     recurring,
+    skipAutoKeyShare,
   }: ConnectWalletPayload) {
     const walletAddress = await getWalletInformation(walletAddressUrl);
     const exchangeRates = await getExchangeRates();
@@ -343,12 +344,31 @@ export class OpenPaymentsService {
     });
 
     await this.initClient(walletAddress.id);
-    await this.completeGrant(
-      amount,
-      walletAddress,
-      recurring,
-      InteractionIntent.CONNECT,
-    );
+
+    try {
+      await this.completeGrant(
+        amount,
+        walletAddress,
+        recurring,
+        InteractionIntent.CONNECT,
+      );
+    } catch (error) {
+      if (
+        error.message === this.t('connectWallet_error_invalidClient') &&
+        !skipAutoKeyShare
+      ) {
+        // add key to wallet and try again
+        await this.addPublicKeyToWallet(walletAddress);
+        await this.completeGrant(
+          amount,
+          walletAddress,
+          recurring,
+          InteractionIntent.CONNECT,
+        );
+      } else {
+        throw error;
+      }
+    }
 
     await this.storage.set({
       walletAddress,
@@ -484,6 +504,10 @@ export class OpenPaymentsService {
     return grantDetails;
   }
 
+  private async addPublicKeyToWallet(_walletAddress: WalletAddress) {
+    throw new ErrorWithKey('connectWalletKeyService_error_notImplemented');
+  }
+
   private async redirectToWelcomeScreen(
     tabId: NonNullable<Tabs.Tab['id']>,
     result: GrantResult,