Merge branch 'main' into mk/add-docs-labeler

.github/workflows/bump-manifest-version.yml

@@ -25,9 +25,8 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
 
-      - name: Setup Node
-        uses: actions/setup-node@v4
-        with: { node-version-file: '.nvmrc' }
+      - name: Environment setup
+        uses: ./.github/actions/setup
 
       - name: Bump version
         id: bump
@@ -39,6 +38,9 @@ jobs:
             const script = require('./.github/actions/bump-manifest-version.cjs')
             await script({ github, context, core })
 
+      - name: Format with prettier
+        run: pnpm format:fix
+
       - name: Create pull request
         uses: peter-evans/create-pull-request@v6
         with:

.github/workflows/nightly-build.yaml

@@ -49,13 +49,16 @@ jobs:
         env:
           PLAYWRIGHT_PROJECT: ${{ matrix.project }}
           PW_EXPERIMENTAL_SERVICE_WORKER_NETWORK_EVENTS: '1'
-          WALLET_URL_ORIGIN: ${{ vars.E2E_WALLET_URL_ORIGIN }}
-          WALLET_USERNAME: ${{ vars.E2E_WALLET_USERNAME }}
-          WALLET_PASSWORD: ${{ secrets.E2E_WALLET_PASSWORD }}
-          CONNECT_WALLET_ADDRESS_URL: ${{ vars.E2E_CONNECT_WALLET_ADDRESS_URL }}
-          CONNECT_KEY_ID: ${{ vars.E2E_CONNECT_KEY_ID }}
-          CONNECT_PUBLIC_KEY: ${{ secrets.E2E_CONNECT_PUBLIC_KEY }}
-          CONNECT_PRIVATE_KEY: ${{ secrets.E2E_CONNECT_PRIVATE_KEY }}
+          TEST_WALLET_ORIGIN: ${{ vars.E2E_WALLET_URL_ORIGIN }}
+          TEST_WALLET_USERNAME: ${{ vars.E2E_WALLET_USERNAME }}
+          TEST_WALLET_PASSWORD: ${{ secrets.E2E_WALLET_PASSWORD }}
+          TEST_WALLET_ADDRESS_URL: ${{ vars.E2E_CONNECT_WALLET_ADDRESS_URL }}
+          TEST_WALLET_KEY_ID: ${{ vars.E2E_CONNECT_KEY_ID }}
+          TEST_WALLET_PUBLIC_KEY: ${{ secrets.E2E_CONNECT_PUBLIC_KEY }}
+          TEST_WALLET_PRIVATE_KEY: ${{ secrets.E2E_CONNECT_PRIVATE_KEY }}
+          FYNBOS_WALLET_ADDRESS_URL: ${{ vars.E2E_FYNBOS_WALLET_ADDRESS_URL }}
+          FYNBOS_USERNAME: ${{ vars.E2E_FYNBOS_USERNAME }}
+          FYNBOS_PASSWORD: ${{ secrets.E2E_FYNBOS_PASSWORD }}
 
       - name: Encrypt report
         shell: bash

.github/workflows/tests-e2e.yml

@@ -47,13 +47,16 @@ jobs:
         env:
           PLAYWRIGHT_PROJECT: ${{ matrix.project }}
           PW_EXPERIMENTAL_SERVICE_WORKER_NETWORK_EVENTS: '1'
-          WALLET_URL_ORIGIN: ${{ vars.E2E_WALLET_URL_ORIGIN }}
-          WALLET_USERNAME: ${{ vars.E2E_WALLET_USERNAME }}
-          WALLET_PASSWORD: ${{ secrets.E2E_WALLET_PASSWORD }}
-          CONNECT_WALLET_ADDRESS_URL: ${{ vars.E2E_CONNECT_WALLET_ADDRESS_URL }}
-          CONNECT_KEY_ID: ${{ vars.E2E_CONNECT_KEY_ID }}
-          CONNECT_PUBLIC_KEY: ${{ secrets.E2E_CONNECT_PUBLIC_KEY }}
-          CONNECT_PRIVATE_KEY: ${{ secrets.E2E_CONNECT_PRIVATE_KEY }}
+          TEST_WALLET_ORIGIN: ${{ vars.E2E_WALLET_URL_ORIGIN }}
+          TEST_WALLET_USERNAME: ${{ vars.E2E_WALLET_USERNAME }}
+          TEST_WALLET_PASSWORD: ${{ secrets.E2E_WALLET_PASSWORD }}
+          TEST_WALLET_ADDRESS_URL: ${{ vars.E2E_CONNECT_WALLET_ADDRESS_URL }}
+          TEST_WALLET_KEY_ID: ${{ vars.E2E_CONNECT_KEY_ID }}
+          TEST_WALLET_PUBLIC_KEY: ${{ secrets.E2E_CONNECT_PUBLIC_KEY }}
+          TEST_WALLET_PRIVATE_KEY: ${{ secrets.E2E_CONNECT_PRIVATE_KEY }}
+          FYNBOS_WALLET_ADDRESS_URL: ${{ vars.E2E_FYNBOS_WALLET_ADDRESS_URL }}
+          FYNBOS_USERNAME: ${{ vars.E2E_FYNBOS_USERNAME }}
+          FYNBOS_PASSWORD: ${{ secrets.E2E_FYNBOS_PASSWORD }}
 
       - name: Encrypt report
         shell: bash

README.md

@@ -75,7 +75,7 @@ All commands are run from the root of the project, from a terminal:
 
 Inside this project, you'll see the following folders and files:
 
-```
+```sh
 .
 ├── .github/ # GitHub Workflows
 ├── docs/ # Repository documentation
@@ -85,8 +85,10 @@ Inside this project, you'll see the following folders and files:
 │   ├── _locales/ # Files for multi-lang support
 │   ├── assets/ # Images for the extension (icon, etc.)
 │   ├── background/ # Source code for the background script/service worker
-│   ├── content/ # Source  code for the content script
+│   ├── content/ # Source  code for the content scripts
+│   │   └── keyAutoAdd/ # content scripts for automatic key addition to wallets
 │   ├── popup/ # Source code for the popup UI
+│   ├── pages/ # Source code for additional extension pages
 │   ├── shared/ # Shared utilities
 │   └── manifest.json # Extension's manifest - processed by Webpack depending on the target build
 ├── jest.config.ts

cspell-dictionary.txt

@@ -14,6 +14,8 @@ iframes
 unmangles
 data-testid
 nums
+jwks
+requestfinished
 
 # scripts and 3rd party terms
 nvmrc

docs/TESTING.md

@@ -10,43 +10,46 @@ To run end-to-end tests, run `pnpm test:e2e` in terminal. To run tests with Chro
 
 Make sure you run `pnpm build chrome` before running tests.
 
-**Before you begin**, you need to setup some environment variables/secrets in `tests/.env`.
-
-1. Copy `tests/.env.example` to `tests/.env`
-2. Update `tests/.env` with your secrets.
-
-| Environment Variable         | Description                                                 | Is secret? |
-| ---------------------------- | ----------------------------------------------------------- | ---------- |
-| `WALLET_URL_ORIGIN`          | URL of the wallet (e.g. https://rafiki.money)               | No         |
-| `WALLET_USERNAME`            | Login email for the wallet                                  | No         |
-| `WALLET_PASSWORD`            | Login password for the wallet                               | Yes        |
-| `CONNECT_WALLET_ADDRESS_URL` | Your wallet address that will be connected to extension     | No         |
-| `CONNECT_KEY_ID`             | ID of the key that will be connected to extension (UUID v4) | No         |
-| `CONNECT_PRIVATE_KEY`        | Private key (hex-encoded Ed25519 private key)               | Yes        |
-| `CONNECT_PUBLIC_KEY`         | Public key (base64-encoded Ed25519 public key)              | No         |
-
-To get the `CONNECT_KEY_ID`, `CONNECT_PRIVATE_KEY` and `CONNECT_PUBLIC_KEY`:
+**Before you begin**, you need to setup some environment variables/secrets in `tests/e2e/.env`.
+
+1. Copy `tests/e2e/.env.example` to `tests/e2e/.env`
+2. Update `tests/e2e/.env` with your secrets.
+
+| Environment Variable        | Description                                                 | Secret? | Optional? |
+| --------------------------- | ----------------------------------------------------------- | ------- | --------- |
+| `TEST_WALLET_ORIGIN`        | URL origin of the test wallet (e.g. https://rafiki.money)   | -       | -         |
+| `TEST_WALLET_USERNAME`      | -- Login email for the test wallet                          | -       | -         |
+| `TEST_WALLET_PASSWORD`      | -- Login password for the test wallet                       | Yes     | -         |
+| `TEST_WALLET_ADDRESS_URL`   | Your wallet address URL that will be connected to extension | -       | -         |
+| `TEST_WALLET_KEY_ID`        | ID of the key that will be connected to extension (UUID v4) | -       | -         |
+| `TEST_WALLET_PRIVATE_KEY`   | Private key (hex-encoded Ed25519 private key)               | Yes     | -         |
+| `TEST_WALLET_PUBLIC_KEY`    | Public key (base64-encoded Ed25519 public key)              | -       | -         |
+| `FYNBOS_WALLET_ADDRESS_URL` | Fynbos wallet address (used for Fynbos specific tests only) | -       | Yes       |
+| `FYNBOS_USERNAME`           | -- Login email for Fynbos wallet                            | -       | Yes       |
+| `FYNBOS_PASSWORD`           | -- Login password for Fynbos wallet                         | Yes     | Yes       |
+
+To get the `TEST_WALLET_KEY_ID`, `TEST_WALLET_PRIVATE_KEY` and `TEST_WALLET_PUBLIC_KEY`:
 
 1. Load the extension in browser (via `chrome://extensions/`)
    - Once the extension is loaded, it'll generate a key-pair that we will need to connect with our wallet.
 1. Inspect service worker with "Inspect views service worker"
-1. Run following in devtools console to copy keys to your clipboard, and paste it in `tests/.env`:
+1. Run following in devtools console to copy keys to your clipboard, and paste it in `tests/e2e/.env`:
    ```js
    // 1. Gets generated keys from extension storage.
-   // 2. Converts result to `CONNECT_{X}="VAL"` format for use in .env file.
+   // 2. Converts result to `TEST_WALLET_{X}="VAL"` format for use in .env file.
    // 3. Copies result to clipboard.
    copy(
      Object.entries(
        await chrome.storage.local.get(['privateKey', 'publicKey', 'keyId']),
      )
        .map(
          ([k, v]) =>
-           `CONNECT_${k.replace(/([A-Z])/g, '_$1').toUpperCase()}="${v}"`,
+           `TEST_WALLET_${k.replace(/([A-Z])/g, '_$1').toUpperCase()}="${v}"`,
        )
        .join('\n'),
    );
    ```
-1. Then copy `CONNECT_PUBLIC_KEY` key to https://rafiki.money/settings/developer-keys under your wallet address.
+1. Then copy `TEST_WALLET_PUBLIC_KEY` key to https://rafiki.money/settings/developer-keys under your wallet address.
 1. Now you're ready to run the tests.
 
 ### How to run in end-to-end tests in GitHub

esbuild/config.ts

@@ -1,4 +1,5 @@
 import path from 'node:path';
+import { readdirSync } from 'node:fs';
 import type { BuildOptions } from 'esbuild';
 import type { Manifest } from 'webextension-polyfill';
 
@@ -10,6 +11,13 @@ export const SRC_DIR = path.resolve(ROOT_DIR, 'src');
 export const DEV_DIR = path.resolve(ROOT_DIR, 'dev');
 export const DIST_DIR = path.resolve(ROOT_DIR, 'dist');
 
+const KEY_AUTO_ADD_TARGETS = readdirSync(
+  path.join(SRC_DIR, 'content', 'keyAutoAdd'),
+  { withFileTypes: true },
+)
+  .filter((e) => e.isFile())
+  .map(({ name }) => path.basename(name, path.extname(name)));
+
 export type Target = (typeof TARGETS)[number];
 export type Channel = (typeof CHANNELS)[number];
 export type BuildArgs = {
@@ -28,6 +36,10 @@ export const options: BuildOptions = {
       in: path.join(SRC_DIR, 'content', 'index.ts'),
       out: path.join('content', 'content'),
     },
+    ...KEY_AUTO_ADD_TARGETS.map((name) => ({
+      in: path.join(SRC_DIR, 'content', 'keyAutoAdd', `${name}.ts`),
+      out: path.join('content', 'keyAutoAdd', name),
+    })),
     {
       in: path.join(SRC_DIR, 'content', 'polyfill.ts'),
       out: path.join('polyfill', 'polyfill'),
@@ -36,6 +48,10 @@ export const options: BuildOptions = {
       in: path.join(SRC_DIR, 'popup', 'index.tsx'),
       out: path.join('popup', 'popup'),
     },
+    {
+      in: path.join(SRC_DIR, 'pages', 'progress-connect', 'index.tsx'),
+      out: path.join('pages', 'progress-connect', 'progress-connect'),
+    },
   ],
   bundle: true,
   legalComments: 'none',

esbuild/dev.ts

@@ -65,11 +65,25 @@ function liveReloadPlugin({ target }: { target: Target }): ESBuildPlugin {
       }
     );`;
 
+  const reloadScriptPages = `
+      new EventSource("http://localhost:${port}/esbuild").addEventListener(
+      "change",
+      (ev) => {
+        const data = JSON.parse(ev.data);
+        if (
+          data.added.some(s => s.includes("/pages/")) ||
+          data.updated.some(s => s.includes("/pages/"))
+        ) {
+          globalThis.location.reload();
+        }
+      }
+    );`;
+
   const reloadScriptContent = `
     new EventSource("http://localhost:${port}/esbuild").addEventListener(
       "change",
       (ev) => {
-        const patterns = ["background.js", "content.js", "polyfill.js"];
+        const patterns = ["background.js", "content.js", "polyfill.js", "keyAutoAdd/"];
         const data = JSON.parse(ev.data);
         if (data.updated.some((s) => patterns.some(e => s.includes(e)))) {
           globalThis.location.reload();
@@ -95,6 +109,13 @@ function liveReloadPlugin({ target }: { target: Target }): ESBuildPlugin {
           loader: 'tsx' as const,
         };
       });
+      build.onLoad({ filter: /src\/pages\/.+\/index.tsx$/ }, async (args) => {
+        const contents = await readFile(args.path, 'utf8');
+        return {
+          contents: contents + '\n\n\n' + reloadScriptPages,
+          loader: 'tsx' as const,
+        };
+      });
       build.onLoad({ filter: /src\/content\// }, async (args) => {
         const contents = await readFile(args.path, 'utf8');
         return {

esbuild/plugins.ts

@@ -51,6 +51,10 @@ export const getPlugins = ({
           from: path.join(SRC_DIR, 'popup', 'index.html'),
           to: path.join(outDir, 'popup', 'index.html'),
         },
+        {
+          from: path.join(SRC_DIR, 'pages', 'progress-connect', 'index.html'),
+          to: path.join(outDir, 'pages', 'progress-connect', 'index.html'),
+        },
         {
           from: path.join(SRC_DIR, '_locales/**/*'),
           to: path.join(outDir, '_locales'),

package.json

@@ -27,6 +27,7 @@
     "@interledger/open-payments": "^6.13.1",
     "@noble/ed25519": "^2.1.0",
     "@noble/hashes": "^1.5.0",
+    "@radix-ui/react-tabs": "^1.1.1",
     "awilix": "^11.0.0",
     "class-variance-authority": "^0.7.0",
     "crypto-browserify": "^3.12.0",