Merge branch 'V4' into feat/onramp-widget

apps/laboratory/.env.example

@@ -1,5 +1,8 @@
 # Obtain a project ID from https://cloud.walletconnect.com
 NEXT_PUBLIC_PROJECT_ID=""
+# See 1password for `NEXT_AUTH_SECRET`
 NEXTAUTH_SECRET=""
-NEXTAUTH_URL=""
+# See 1password for `Mailsac Web3Modal API Key`
 MAILSAC_API_KEY=""
+# Only needed when overriding default next-auth URL
+# NEXTAUTH_URL=""

apps/laboratory/package.json

@@ -35,6 +35,7 @@
     "wagmi": "2.5.0"
   },
   "devDependencies": {
+    "@aws-sdk/client-cloudwatch": "3.509.0",
     "@mailsac/api": "1.0.5",
     "@playwright/test": "1.40.1",
     "dotenv": "16.3.1",

apps/laboratory/src/utils/ConstantsUtil.ts

@@ -10,7 +10,7 @@ export const ConstantsUtil = {
   Metadata: {
     name: 'Web3Modal',
     description: 'Web3Modal Laboratory',
-    url: 'https://web3modal.com',
+    url: 'https://lab.web3modal.com',
     icons: ['https://avatars.githubusercontent.com/u/37784886'],
     verifyUrl: ''
   },

apps/laboratory/tests/README.md

@@ -5,9 +5,14 @@ We use Playwright as our functional test runner. It's configured to try multiple
 - Browsers: Chromium/Firefox
 - Modal flavors: default/SIWE/email
 
+## Setup
+
+- Make sure your `.env` is set up (see `.env.example` for reference)
+- Run `npm run playwright:install` to install the browsers required to run the tests
+
 ## Running Tests
 
-- `npx playwright test` to run in default mode (make sure your `.env` is set up)
+- `npx playwright test` to run in default mode.
 - `npm run playwright:debug` to step by step see what the tests are doing
 
 ## Debugging

apps/laboratory/tests/canary.spec.ts

@@ -1,8 +1,15 @@
 import { DEFAULT_SESSION_PARAMS } from './shared/constants'
 import { testMW } from './shared/fixtures/w3m-wallet-fixture'
+import { uploadCanaryResultsToCloudWatch } from './shared/utils/metrics'
+
+const ENV = process.env['ENV'] || 'dev'
+const REGION = process.env['REGION'] || 'eu-central-1'
+
+let startTime = 0
 
 testMW.beforeEach(
   async ({ modalPage, walletPage, modalValidator, walletValidator, browserName }) => {
+    startTime = Date.now()
     // Canary doesn't need all platforms
     if (browserName !== 'chromium' || modalPage.library !== 'ethers') {
       return
@@ -38,5 +45,17 @@ testMW(
     await walletValidator.expectReceivedSign({})
     await walletPage.handleRequest({ accept: true })
     await modalValidator.expectAcceptedSign()
+
+    if (ENV !== 'dev') {
+      const duration: number = Date.now() - startTime
+      await uploadCanaryResultsToCloudWatch(
+        ENV,
+        REGION,
+        'https://lab.web3modal.com/',
+        'HappyPath.sign',
+        true,
+        duration
+      )
+    }
   }
 )

apps/laboratory/tests/shared/utils/metrics.ts

@@ -0,0 +1,87 @@
+import {
+  CloudWatch,
+  type MetricDatum,
+  type PutMetricDataCommandInput
+} from '@aws-sdk/client-cloudwatch'
+
+// eslint-disable-next-line func-style
+export const uploadCanaryResultsToCloudWatch = async (
+  env: string,
+  region: string,
+  target: string,
+  metricsPrefix: string,
+  isTestPassed: boolean,
+  testDurationMs: number
+  // eslint-disable-next-line max-params
+) => {
+  const cloudwatch = new CloudWatch({ region: 'eu-central-1' })
+  const ts = new Date()
+  const metrics: MetricDatum[] = [
+    {
+      MetricName: `${metricsPrefix}.success`,
+      Dimensions: [
+        {
+          Name: 'Target',
+          Value: target
+        },
+        {
+          Name: 'Region',
+          Value: region
+        }
+      ],
+      Unit: 'Count',
+      Value: isTestPassed ? 1 : 0,
+      Timestamp: ts
+    },
+    {
+      MetricName: `${metricsPrefix}.failure`,
+      Dimensions: [
+        {
+          Name: 'Target',
+          Value: target
+        },
+        {
+          Name: 'Region',
+          Value: region
+        }
+      ],
+      Unit: 'Count',
+      Value: isTestPassed ? 0 : 1,
+      Timestamp: ts
+    }
+  ]
+
+  if (isTestPassed) {
+    metrics.push({
+      MetricName: `${metricsPrefix}.latency`,
+      Dimensions: [
+        {
+          Name: 'Target',
+          Value: target
+        },
+        {
+          Name: 'Region',
+          Value: region
+        }
+      ],
+      Unit: 'Milliseconds',
+      Value: testDurationMs,
+      Timestamp: ts
+    })
+  }
+
+  const params: PutMetricDataCommandInput = {
+    MetricData: metrics,
+    Namespace: `${env}_Canary_Web3Modal`
+  }
+
+  await new Promise<void>(resolve => {
+    cloudwatch.putMetricData(params, (err: Error) => {
+      if (err) {
+        // eslint-disable-next-line no-console
+        console.error('Failed to upload metrics to CloudWatch', err, err.stack)
+      }
+      resolve()
+    })
+  })
+}