Capsule integration final

.github/workflows/pages-deployment.yaml

@@ -3,6 +3,7 @@ name: Cloudflare Pages
 env:
   SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
   NEXT_PUBLIC_INTERCOM_ID: re9q5yti
+  NEXT_PUBLIC_CAPSULE_API_KEY_PROD: ${{ secrets.CAPSULE_API_KEY_PROD }}
   NEXT_PUBLIC_DRPC_KEY: AnmpasF2C0JBqeAEzxVO8aTteiMlrW4R75hpDonbV6cR
 
 on: [push]

.gitignore

@@ -73,4 +73,5 @@ tsconfig.vitest-temp.json
 
 .dev.vars
 
-*yalc*
+*yalc*
+certificates

e2e/specs/stateful/address.spec.ts

@@ -2,20 +2,18 @@ import { expect } from '@playwright/test'
 
 import { test } from '../../../playwright/index.js'
 
-test('should allow user to connect', async ({ page, login }) => {
+test('should allow user with primary name to connect', async ({ page, login }) => {
   test.slow()
-  await page.goto('/')
+  await page.goto('/?chain=holesky')
   await login.connect()
 
   await page.getByTestId('header-profile').click()
-  await expect(page.getByText('Profile')).toBeVisible()
-  await page.getByTestId('header-profile').click()
-  await expect(page.getByText('Profile')).not.toBeVisible()
+  await expect(page.getByText('Disconnect')).toBeVisible()
 })
 
 test('should go to the address page', async ({ page, login }) => {
   test.slow()
-  await page.goto('/')
+  await page.goto('/?chain=holesky')
   await login.connect()
 
   await page
@@ -30,7 +28,7 @@ test('should not show the profile if there is no primary name for the address',
   login,
 }) => {
   test.slow()
-  await page.goto('/')
+  await page.goto('/?chain=holesky')
   await login.connect()
   await page
     .getByPlaceholder('Search for a name')

e2e/specs/stateful/dnsclaim.spec.ts

@@ -7,7 +7,7 @@ test.describe('Import DNSSEC name', () => {
     page,
     login,
   }) => {
-    await page.goto('/notdnssec.com')
+    await page.goto('/notdnssec.com?chain=holesky')
     await login.connect()
 
     await page.getByTestId('onchain-radio').click()
@@ -21,7 +21,7 @@ test.describe('Import DNSSEC name', () => {
     page,
     login,
   }) => {
-    await page.goto('/noenssubdomain.com')
+    await page.goto('/noenssubdomain.com?chain=holesky')
     await login.connect()
 
     await page.getByTestId('onchain-radio').click()
@@ -36,7 +36,7 @@ test.describe('Import DNSSEC name', () => {
     page,
     login,
   }) => {
-    await page.goto('/noenssubdomain.com')
+    await page.goto('/noenssubdomain.com?chain=holesky')
     await login.connect()
 
     await page.getByTestId('offchain-radio').click()
@@ -50,7 +50,7 @@ test.describe('Import DNSSEC name', () => {
     page,
     login,
   }) => {
-    await page.goto('/invalidensrecord.com')
+    await page.goto('/invalidensrecord.com?chain=holesky')
     await login.connect()
 
     await page.getByTestId('onchain-radio').click()
@@ -61,7 +61,7 @@ test.describe('Import DNSSEC name', () => {
   })
 
   test('should resolve .pw domains', async ({ page, login }) => {
-    await page.goto('/test.pw')
+    await page.goto('/test.pw?chain=holesky')
     await login.connect()
 
     await page.getByTestId('onchain-radio').click()

e2e/specs/stateful/profile.spec.ts

@@ -80,7 +80,7 @@ const profiles = [
 
 test.describe('Profile', () => {
   test('should allow user to connect', async ({ page, login }) => {
-    await page.goto('/')
+    await page.goto('/?chain=holesky')
     await login.connect()
 
     await page.getByTestId('header-profile').click()
@@ -90,19 +90,19 @@ test.describe('Profile', () => {
   })
 
   test('should show a warning if name is not supported', async ({ page }) => {
-    await page.goto('/name.nottld')
+    await page.goto('/name.nottld?chain=holesky')
     await expect(page.getByText('This TLD is not supported')).toBeVisible({ timeout: 25000 })
   })
 
   test('should load emoji domain pages', async ({ page }) => {
-    await page.goto('/%E2%9D%A4%EF%B8%8F%E2%9D%A4%EF%B8%8F%E2%9D%A4%EF%B8%8F.eth')
+    await page.goto('/%E2%9D%A4%EF%B8%8F%E2%9D%A4%EF%B8%8F%E2%9D%A4%EF%B8%8F.eth?chain=holesky')
     await expect(page.getByTestId('profile-snippet-name')).toContainText('❤️❤️❤️.eth', {
       timeout: 25000,
     })
   })
 
   test('should allow searching for emoji domain', async ({ page, login }) => {
-    await page.goto('/')
+    await page.goto('/?chain=holesky')
     await login.connect()
 
     await page.getByPlaceholder('Search for a name').fill('❤️❤️❤️❤️❤️❤️.eth')
@@ -114,7 +114,7 @@ test.describe('Profile', () => {
 
   for (const profile of profiles) {
     test(`should load profile for: ${profile.name}`, async ({ page, login }) => {
-      await page.goto('/')
+      await page.goto('/?chain=holesky')
       await login.connect()
 
       await page.getByPlaceholder('Search for a name').fill(profile.name)
@@ -233,20 +233,22 @@ test.describe('Profile', () => {
   }
 
   test('should decode an unknown label', async ({ page, login }) => {
-    await page.goto('/')
+    await page.goto('/?chain=holesky')
     await login.connect()
-    // eslint-disable-next-line no-restricted-syntax
-    await page.goto('/[8df9cfc425ad5e1853259e1cef0a8d1d44591fbec8e3feb6f930d9dfacd5eff2].eth')
+    await page.goto(
+      // eslint-disable-next-line no-restricted-syntax
+      '/[8df9cfc425ad5e1853259e1cef0a8d1d44591fbec8e3feb6f930d9dfacd5eff2].eth?chain=holesky',
+    )
     await expect(page.getByTestId('profile-snippet')).toContainText('wrapmebaby.eth', {
       timeout: 25000,
     })
   })
 
   test('should show wrapped DNS name warning', async ({ page, login }) => {
-    await page.goto('/')
+    await page.goto('/?chain=holesky')
     await login.connect()
 
-    await page.goto('/wrappeddnsname.com')
+    await page.goto('/wrappeddnsname.com?chain=holesky')
     await expect(page.getByTestId('profile-snippet')).toContainText('wrappeddnsname.com')
   })
 })

next.config.mjs

@@ -23,6 +23,17 @@ const babelIncludeRegexes = [
  * @type {import('next').NextConfig}
  * */
 const nextConfig = {
+  transpilePackages: [
+    '@usecapsule/rainbowkit',
+    '@usecapsule/rainbowkit-wallet',
+    '@usecapsule/core-components',
+    '@usecapsule/react-components',
+    '@usecapsule/react-sdk',
+    '@usecapsule/core-sdk',
+    '@usecapsule/web-sdk',
+    '@usecapsule/wagmi-v2-integration',
+    '@usecapsule/viem-v2-integration',
+  ],
   reactStrictMode: true,
   compiler: {
     styledComponents: true,

package.json

@@ -3,10 +3,10 @@
   "version": "0.1.123",
   "scripts": {
     "dev": "NODE_NO_WARNINGS=1 next dev",
-    "dev:https": "next-dev-https --https --qr --port 3000",
+    "dev:https": "next dev --experimental-https --port 443",
     "dev:nlocal": "NEXT_PUBLIC_PROVIDER=http://localhost:8545 NEXT_PUBLIC_AVUP_ENDPOINT=http://localhost:8787 pnpm dev",
     "dev:localname": "NEXT_PUBLIC_PROVIDER=\"http://$(\"hostname\"):8545\" && NEXT_PUBLIC_AVUP_ENDPOINT=\"http://$(\"hostname\"):8787\" && NEXT_PUBLIC_GRAPH_URI=\"http://$(\"hostname\"):8000/subgraphs/name/graphprotocol/ens\" && pnpm dev",
-    "dev:glocal": "rm -rf .next && NEXT_PUBLIC_GRAPH_URI=http://localhost:8000/subgraphs/name/graphprotocol/ens NEXT_PUBLIC_ETH_NODE=anvil pnpm dev:nlocal",
+    "dev:glocal": "SWC_CACHE=false rm -rf .next && NEXT_PUBLIC_GRAPH_URI=http://localhost:8000/subgraphs/name/graphprotocol/ens NEXT_PUBLIC_ETH_NODE=anvil pnpm dev:nlocal",
     "dev:gonline": "NEXT_PUBLIC_GRAPH_URI=https://api.studio.thegraph.com/query/49574/ensholesky/version/latest pnpm dev",
     "build": "next build",
     "build:preview": "NEXT_PUBLIC_ENSJS_DEBUG=true next build --profile",
@@ -59,19 +59,22 @@
     "@metamask/post-message-stream": "^6.1.2",
     "@metamask/providers": "^14.0.2",
     "@noble/hashes": "^1.3.2",
-    "@rainbow-me/rainbowkit": "2.1.2",
-    "@sentry/nextjs": "7.43.x",
+    "@sentry/nextjs": "^7.43.0",
     "@splidejs/react-splide": "^0.7.12",
     "@svgr/webpack": "^8.1.0",
     "@tanstack/query-persist-client-core": "5.22.2",
     "@tanstack/query-sync-storage-persister": "5.22.2",
     "@tanstack/react-query": "5.22.2",
     "@tanstack/react-query-devtools": "^5.59.0",
     "@tanstack/react-query-persist-client": "5.22.2",
+    "@usecapsule/rainbowkit": "3.6.0",
+    "@usecapsule/rainbowkit-wallet": "1.6.0",
     "@wagmi/core": "2.13.3",
     "calendar-link": "^2.2.0",
     "dequal": "2.0.3",
     "dns-packet": "^5.4.0",
+    "form-data": "^4.0.0",
+    "glob": "^8.0.3",
     "graphql-request": "5.1.0",
     "i18next": "^21.9.1",
     "i18next-browser-languagedetector": "^6.1.5",
@@ -81,6 +84,7 @@
     "iso-639-1": "^2.1.15",
     "markdown-to-jsx": "^7.1.7",
     "next": "13.5.6",
+    "node-forge": "1.3.1",
     "node-fetch": "^3.3.2",
     "react": "*",
     "react-confetti": "^6.1.0",
@@ -276,7 +280,8 @@
     },
     "patchedDependencies": {
       "[email protected]": "patches/[email protected]",
-      "[email protected]": "patches/[email protected]"
+      "[email protected]": "patches/[email protected]",
+      "[email protected]": "patches/[email protected]"
     }
   },
   "packageManager": "[email protected]"

patches/node-forge@1.3.1.patch

@@ -0,0 +1,36 @@
+diff --git a/CHANGELOG.md b/CHANGELOG.md
+deleted file mode 100644
+index 27d0e3a0073c20adff764c71575e200d6ac23432..0000000000000000000000000000000000000000
+diff --git a/flash/README.md b/flash/README.md
+deleted file mode 100644
+index 1576ebf1a99dab1462caa81c14240864ed1454cb..0000000000000000000000000000000000000000
+diff --git a/flash/package.json b/flash/package.json
+deleted file mode 100644
+index 92689fa9b24e93a631d2b52572030d7e17ccb10f..0000000000000000000000000000000000000000
+diff --git a/lib/rsa.js b/lib/rsa.js
+index 5c73209f9a1c97c8f1e58bc2930426c4f580776a..fb4cdad07208d23c10dedbc1f39b1435a4539d65 100644
+--- a/lib/rsa.js
++++ b/lib/rsa.js
+@@ -1717,13 +1717,15 @@ function _generateKeyPair(state, options, callback) {
+
+   var opts = {
+     algorithm: {
+-      name: options.algorithm || 'PRIMEINC',
+-      options: {
+-        workers: options.workers || 2,
+-        workLoad: options.workLoad || 100,
+-        workerScript: options.workerScript
+-      }
+-    }
++      name: options.algorithm || "PRIMEINC",
++      options: options.workerScript
++        ? {
++            workers: options.workers || 2,
++            workLoad: options.workLoad || 100,
++            workerScript: options.workerScript,
++          }
++        : {},
++    },
+   };
+   if('prng' in options) {
+     opts.prng = options.prng;

playwright/fixtures/login.ts

@@ -44,15 +44,11 @@ export class Login {
       timeout: 15000,
     })
     // this isn't actually what the user experiences, just a quirk in headless-web3-provider
-    expect(this.wallet.getPendingRequestCount(Web3RequestKind.RequestPermissions)).toEqual(1)
     await this.wallet.authorize(Web3RequestKind.RequestPermissions)
-    expect(this.wallet.getPendingRequestCount(Web3RequestKind.RequestPermissions)).toEqual(0)
-    await expect
-      .poll(() => this.wallet.getPendingRequestCount(Web3RequestKind.RequestAccounts))
-      .toEqual(1)
     await this.wallet.authorize(Web3RequestKind.RequestAccounts)
+    const pendingRequests = await this.wallet.getPendingRequestCount()
     expect(this.wallet.getPendingRequestCount(Web3RequestKind.RequestAccounts)).toEqual(0)
-    await expect(this.getProfileButton).toBeVisible()
+    await expect.poll(() => this.getProfileButton.isVisible()).toBe(true)
   }
 
   async switchTo(user: User) {