merge-develop-to-public

.env.example

@@ -4,3 +4,4 @@ MOON_PAY_API_KEY=
 
 # Analytics
 MIX_PANEL_TOKEN=
+MIX_PANEL_EXPLORE_APP_TOKEN=

.eslintrc.json

@@ -23,6 +23,7 @@
   "plugins": ["react", "prettier", "eslint-plugin-no-inline-styles", "@tanstack/query"],
   "rules": {
     "consistent-return": "off",
+    "no-await-in-loop": "off",
     "import/prefer-default-export": 1,
     "no-restricted-imports": [
       "warn",
@@ -50,8 +51,19 @@
       }
     ],
     "no-plusplus": "off",
-    "@tanstack/query/exhaustive-deps": 1
+    "@tanstack/query/exhaustive-deps": 1,
+    "import/order": 0
   },
+  "overrides": [
+    {
+      "files": ["tests/**/*.{js,jsx,ts,tsx}"],
+      "plugins": ["playwright"],
+      "extends": ["plugin:playwright/playwright-test"],
+      "rules": {
+        "playwright/expect-expect": "off"
+      }
+    }
+  ],
   "settings": {
     "import/resolver": {
       "node": {

.github/CODEOWNERS

@@ -0,0 +1 @@
+* @secretkeylabs/reviewers-web-extension

.github/workflows/build-rc.yml

@@ -12,12 +12,13 @@ on:
       - main
       - develop
 jobs:
-  test:
+  build:
     if: ${{ startsWith(github.head_ref, 'release/') }}
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
+      - name: Use Node.js
+        uses: actions/setup-node@v4
         with:
           always-auth: true
           node-version: 18
@@ -33,10 +34,100 @@ jobs:
           npx eslint .
           npx tsc --noEmit
           npm test
+      - name: Build
+        env:
+          TRANSAC_API_KEY: ${{ secrets.TRANSAC_API_KEY }}
+          MOON_PAY_API_KEY: ${{ secrets.MOON_PAY_API_KEY }}
+          MIX_PANEL_TOKEN: ${{ secrets.MIX_PANEL_TOKEN }}
+          MIX_PANEL_EXPLORE_APP_TOKEN: ${{ secrets.MIX_PANEL_EXPLORE_APP_TOKEN }}
+        run: npm run build
+      - name: Upload Archive
+        uses: actions/upload-artifact@v3
+        with:
+          name: web-extension1
+          path: ./build
+          retention-days: 5
+          if-no-files-found: error
+  UItest:
+    needs: [build]
+    name: UI Test ${{ matrix.shardIndex }} of ${{ matrix.shardTotal }}
+    timeout-minutes: 10
+    runs-on: ubuntu-20.04
+    strategy:
+      fail-fast: false
+      matrix:
+        shardIndex: [1, 2, 3, 4, 5, 6]
+        shardTotal: [6]
+    steps:
+      - uses: actions/checkout@v4
+      - name: Download build artifact
+        uses: actions/download-artifact@v3
+        with:
+          name: web-extension1
+          path: ./build
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          always-auth: true
+          node-version: 18
+          registry-url: https://npm.pkg.github.com
+          scope: '@secretkeylabs'
+          cache: npm
+      - name: Install dependencies
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.GH_PACKAGE_REGISTRY_TOKEN }}
+        run: npm install playwright
+      - name: Install Playwright Browsers
+        run: npx playwright install chromium --with-deps
+      - name: Run UI test suite
+        run: xvfb-run --auto-servernum --server-args="-screen 0 360x360x24" npx playwright test --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
+      - name: Upload Playwright report
+        if: ${{ !cancelled() }}
+        uses: actions/upload-artifact@v3
+        with:
+          name: all-blob-reports
+          path: blob-report
+          retention-days: 1
+
+  merge-reports:
+    # Merge reports after playwright-tests, even if some shards have failed but not if the job was skipped
+    if: ${{ always() && needs.UItest.result != 'skipped' }}
+    needs: [UItest]
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          always-auth: true
+          node-version: 18
+          registry-url: https://npm.pkg.github.com
+          scope: '@secretkeylabs'
+          cache: npm
+      - name: Install dependencies
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.GH_PACKAGE_REGISTRY_TOKEN }}
+        run: npm install playwright
+
+      - name: Download blob reports from GitHub Actions Artifacts
+        uses: actions/download-artifact@v3
+        with:
+          name: all-blob-reports
+          path: all-blob-reports
+
+      - name: Merge into HTML Report
+        run: npx playwright merge-reports --reporter html ./all-blob-reports
+
+      - name: Upload HTML report
+        uses: actions/upload-artifact@v3
+        with:
+          name: html-report--attempt-${{ github.run_attempt }}
+          path: playwright-report
+          retention-days: 5
+
   publish-rc:
     # TODO also keep the develop PR description up to date
     if: ${{ github.base_ref == 'main' }}
-    needs: test
+    needs: [UItest]
     runs-on: ubuntu-latest
     permissions:
       contents: write
@@ -101,25 +192,14 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v4
-      - uses: actions/setup-node@v4
+      - name: Download build artifact
+        uses: actions/download-artifact@v3
         with:
-          always-auth: true
-          node-version: 18
-          registry-url: https://npm.pkg.github.com
-          scope: '@secretkeylabs'
-          cache: npm
-      - name: Install dependencies
-        env:
-          NODE_AUTH_TOKEN: ${{ secrets.GH_PACKAGE_REGISTRY_TOKEN }}
-        run: npm ci
-      - name: Build & zip
-        env:
-          TRANSAC_API_KEY: ${{ secrets.TRANSAC_API_KEY }}
-          MOON_PAY_API_KEY: ${{ secrets.MOON_PAY_API_KEY }}
-          MIX_PANEL_TOKEN: ${{ secrets.MIX_PANEL_TOKEN }}
-        run: |
-          npm run build
-          zip -rj build.zip ./build
+          name: web-extension1
+          path: ./build
+      - uses: actions/setup-node@v4
+      - name: zip
+        run: zip -rj build.zip ./build
       - name: Upload release asset
         uses: actions/upload-release-asset@v1
         env:

.github/workflows/build.yml

@@ -11,7 +11,7 @@ on:
 jobs:
   build:
     if: ${{ !startsWith(github.head_ref, 'release/') }}
-    runs-on: ubuntu-latest
+    runs-on: ubuntu-20.04
     steps:
       - uses: actions/checkout@v4
       - name: Use Node.js
@@ -36,7 +36,19 @@ jobs:
           TRANSAC_API_KEY: ${{ secrets.TRANSAC_API_KEY }}
           MOON_PAY_API_KEY: ${{ secrets.MOON_PAY_API_KEY }}
           MIX_PANEL_TOKEN: ${{ secrets.MIX_PANEL_TOKEN }}
+          MIX_PANEL_EXPLORE_APP_TOKEN: ${{ secrets.MIX_PANEL_EXPLORE_APP_TOKEN }}
         run: npm run build --if-present
+      - name: Install Playwright Browsers
+        run: npx playwright install chromium --with-deps
+      - name: Run UI test suite
+        run: xvfb-run --auto-servernum --server-args="-screen 0 360x360x24" npx playwright test --grep "#smoketest" --reporter=html
+      - name: Upload Playwright report
+        if: always()
+        uses: actions/upload-artifact@v3
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
       - name: Save Filename
         run: |
           BRANCH_NAME=$(echo ${{ github.head_ref }} | sed 's/\//-/g')

.github/workflows/merge-repos.yml

@@ -0,0 +1,34 @@
+name: Merge branch to remote
+
+on:
+  workflow_dispatch:
+    inputs:
+      branch:
+        description: 'Merge branch'
+        required: true
+        default: develop
+        type: choice
+        options:
+          - develop
+          - main
+
+jobs:
+  merge-branch-to-remote:
+    runs-on: ubuntu-latest
+    permissions:
+      pull-requests: write
+      contents: write
+    steps:
+      - uses: actions/checkout@v4
+      - id: run-merge-script
+        env:
+          ORIGIN_BRANCH: ${{ inputs.branch }}
+          REMOTE_REPO: ${{ secrets.REMOTE_REPO }}
+          GH_TOKEN: ${{ secrets.GH_REPOS_RW_PAT }}
+        run: |
+          # git config
+          git config user.name "GitHub Actions Bot"
+          git config user.email "<>"
+          # run shell script
+          cd scripts
+          ORIGIN_BRANCH=$ORIGIN_BRANCH REMOTE_REPO=$REMOTE_REPO ./merge-to-remote.sh

.github/workflows/playwright.yml

@@ -0,0 +1,119 @@
+name: UI Test Suite
+on:
+  pull_request:
+    branches:
+      - develop
+  workflow_dispatch:
+
+jobs:
+  build:
+    if: ${{ startsWith(github.head_ref, 'e2etest/') || github.event_name == 'workflow_dispatch' }}
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          always-auth: true
+          node-version: 18
+          registry-url: https://npm.pkg.github.com
+          scope: '@secretkeylabs'
+          cache: npm
+      - name: Install dependencies
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.GH_PACKAGE_REGISTRY_TOKEN }}
+        run: npm ci
+      - name: Test
+        run: |
+          npx eslint .
+          npx tsc --noEmit
+          npm test
+      - name: Build
+        env:
+          TRANSAC_API_KEY: ${{ secrets.TRANSAC_API_KEY }}
+          MOON_PAY_API_KEY: ${{ secrets.MOON_PAY_API_KEY }}
+          MIX_PANEL_TOKEN: ${{ secrets.MIX_PANEL_TOKEN }}
+          MIX_PANEL_EXPLORE_APP_TOKEN: ${{ secrets.MIX_PANEL_EXPLORE_APP_TOKEN }}
+        run: npm run build --if-present
+      - name: Upload Archive
+        uses: actions/upload-artifact@v3
+        with:
+          name: web-extension1
+          path: ./build
+          retention-days: 5
+          if-no-files-found: error
+  UItest:
+    needs: [build]
+    name: UI Test ${{ matrix.shardIndex }} of ${{ matrix.shardTotal }}
+    timeout-minutes: 10
+    runs-on: ubuntu-20.04
+    strategy:
+      fail-fast: false
+      matrix:
+        shardIndex: [1, 2, 3, 4, 5]
+        shardTotal: [5]
+    steps:
+      - uses: actions/checkout@v4
+      - name: Download build artifact
+        uses: actions/download-artifact@v3
+        with:
+          name: web-extension1
+          path: ./build
+      - name: Use Node.js
+        uses: actions/setup-node@v4
+        with:
+          always-auth: true
+          node-version: 18
+          registry-url: https://npm.pkg.github.com
+          scope: '@secretkeylabs'
+          cache: npm
+      - name: Install dependencies
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.GH_PACKAGE_REGISTRY_TOKEN }}
+        run: npm install playwright
+      - name: Install Playwright Browsers
+        run: npx playwright install chromium --with-deps
+      - name: Run UI test suite
+        run: xvfb-run --auto-servernum --server-args="-screen 0 360x360x24" npx playwright test --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
+      - name: Upload Playwright report
+        if: ${{ !cancelled() }}
+        uses: actions/upload-artifact@v3
+        with:
+          name: all-blob-reports
+          path: blob-report
+          retention-days: 1
+
+  merge-reports:
+    # Merge reports after playwright-tests, even if some shards have failed
+    if: ${{ always() && needs.UItest.result != 'skipped' }}
+    needs: [UItest]
+    runs-on: ubuntu-20.04
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          always-auth: true
+          node-version: 18
+          registry-url: https://npm.pkg.github.com
+          scope: '@secretkeylabs'
+          cache: npm
+      - name: Install dependencies
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.GH_PACKAGE_REGISTRY_TOKEN }}
+        run: npm install playwright
+
+      - name: Download blob reports from GitHub Actions Artifacts
+        uses: actions/download-artifact@v3
+        with:
+          name: all-blob-reports
+          path: all-blob-reports
+
+      - name: Merge into HTML Report
+        run: npx playwright merge-reports --reporter html ./all-blob-reports
+
+      - name: Upload HTML report
+        uses: actions/upload-artifact@v3
+        with:
+          name: html-report--attempt-${{ github.run_attempt }}
+          path: playwright-report
+          retention-days: 5