feat(canary): export web3modal Canary image (#1889)

.github/workflows/ci_canary.yml

@@ -0,0 +1,64 @@
+name: ci_canary
+on:
+  workflow_dispatch:
+  push:
+    branches:
+      - V4
+
+concurrency: ${{ github.workflow }}
+
+env:
+  TERM: linux
+
+jobs:
+  push:
+    runs-on: ubuntu-latest
+    permissions:
+      id-token: write
+    steps:
+      - name: Configure AWS Credentials
+        uses: aws-actions/configure-aws-credentials@v4
+        with:
+          role-to-assume: ${{ secrets.AWS_ROLE_ECR_DEPLOYER }}
+          aws-region: ${{ vars.AWS_REGION }}
+
+      - name: Login to Amazon ECR
+        id: login-ecr
+        uses: aws-actions/amazon-ecr-login@v2
+        with:
+          mask-password: 'true'
+
+      - name: Checkout
+        uses: actions/checkout@v4
+
+      - name: Set up Docker Buildx
+        uses: docker/setup-buildx-action@v3
+
+      - name: Cache Docker layers
+        uses: actions/cache@v4
+        with:
+          path: /tmp/.buildx-cache
+          key: ${{ runner.os }}-buildx-${{ github.sha }}
+          restore-keys: |
+            ${{ runner.os }}-buildx-
+      - name: Build, tag, and push image to Amazon ECR
+        uses: docker/build-push-action@v5
+        env:
+          ECR_REGISTRY: ${{ steps.login-ecr.outputs.registry }}
+          ECR_REPOSITORY: web3modal-canary
+          IMAGE_TAG: V4
+        with:
+          context: .
+          file: Dockerfile
+          push: true
+          tags: ${{ env.ECR_REGISTRY }}/${{ env.ECR_REPOSITORY }}:${{ env.IMAGE_TAG }}
+          cache-from: type=local,src=/tmp/.buildx-cache
+          cache-to: type=local,dest=/tmp/.buildx-cache-new
+
+      # Temp fix
+      # https://github.com/docker/build-push-action/issues/252
+      # https://github.com/moby/buildkit/issues/1896
+      - name: Move cache
+        run: |
+          rm -rf /tmp/.buildx-cache
+          mv /tmp/.buildx-cache-new /tmp/.buildx-cache

Dockerfile

@@ -0,0 +1,21 @@
+FROM node:20-bookworm as base
+
+
+WORKDIR /
+
+# RUN apk --update --no-cache \
+#     add g++ make python3
+
+FROM base as build
+
+WORKDIR /
+
+COPY ../ ./
+RUN npm ci
+RUN npm run build
+
+WORKDIR /apps/laboratory/
+
+RUN npm run playwright:install
+
+CMD ["npm", "run", "playwright:test:canary"]

apps/laboratory/package.json

@@ -8,10 +8,12 @@
     "lint": "eslint . --ext .js,.jsx,.ts,.tsx",
     "playwright:start": "npm run dev:laboratory",
     "playwright:install": "npx playwright install --with-deps",
-    "playwright:test": "npx playwright test",
+    "playwright:test": "npx playwright test --grep-invert canary.spec.ts",
     "playwright:test:wallet": "npx playwright test --grep connect.spec.ts",
-    "playwright:debug": "npx playwright test --debug",
-    "playwright:debug:wallet": "npx playwright test --debug --grep connect.spec.ts"
+    "playwright:test:canary": "npx playwright test --grep canary.spec.ts",
+    "playwright:debug": "npx playwright test --debug --grep-invert canary.spec.ts",
+    "playwright:debug:wallet": "npx playwright test --debug --grep connect.spec.ts",
+    "playwright:debug:canary": "npx playwright test --debug --grep canary.spec.ts"
   },
   "dependencies": {
     "@chakra-ui/react": "2.8.2",

apps/laboratory/playwright.config.ts

@@ -15,7 +15,9 @@ export default defineConfig<ModalFixture>({
   fullyParallel: true,
   retries: 0,
   workers: 1,
-  reporter: [['list'], ['html']],
+  reporter: process.env['CI']
+    ? [['list'], ['html', { open: 'never' }]]
+    : [['list'], ['html', { host: '0.0.0.0' }]],
 
   expect: {
     timeout: (process.env['CI'] ? 60 : 15) * 1000

apps/laboratory/tests/canary.spec.ts

@@ -0,0 +1,42 @@
+import { DEFAULT_SESSION_PARAMS } from './shared/constants'
+import { testMW } from './shared/fixtures/w3m-wallet-fixture'
+
+testMW.beforeEach(
+  async ({ modalPage, walletPage, modalValidator, walletValidator, browserName }) => {
+    // Canary doesn't need all platforms
+    if (browserName !== 'chromium' || modalPage.library !== 'ethers') {
+      return
+    }
+    await modalPage.copyConnectUriToClipboard()
+    await walletPage.connect()
+    await walletPage.handleSessionProposal(DEFAULT_SESSION_PARAMS)
+    await modalValidator.expectConnected()
+    await walletValidator.expectConnected()
+  }
+)
+
+testMW.afterEach(async ({ modalPage, modalValidator, walletValidator, browserName }) => {
+  // Canary doesn't need all platforms
+  if (browserName !== 'chromium' || modalPage.library !== 'ethers') {
+    return
+  }
+  await modalPage.disconnect()
+  await modalValidator.expectDisconnected()
+  await walletValidator.expectDisconnected()
+})
+
+testMW(
+  'it should sign',
+  async ({ modalPage, walletPage, modalValidator, walletValidator, browserName }) => {
+    // Canary doesn't need all platforms
+    if (browserName !== 'chromium' || modalPage.library !== 'ethers') {
+      testMW.skip()
+
+      return
+    }
+    await modalPage.sign()
+    await walletValidator.expectReceivedSign({})
+    await walletPage.handleRequest({ accept: true })
+    await modalValidator.expectAcceptedSign()
+  }
+)