feat: support web3js patch 2: fix email testing (#3)

* fix and ensure mail tests passing at laboratory

* add EMAIL_DOMAIN to env variables

* update .env.example

apps/laboratory/.env.example

@@ -4,6 +4,9 @@ NEXT_PUBLIC_PROJECT_ID=""
 NEXTAUTH_SECRET=""
 # See 1password for `Mailsac Web3Modal API Key`
 MAILSAC_API_KEY=""
+# A Custom Domain created at https://mailsac.com/domains for the email addresses used at tests
+# Note: If not filled, the default in the code is "web3modal.msdc.co"
+EMAIL_DOMAIN=""
 # Only needed when overriding default next-auth URL
 # NEXTAUTH_URL=""
 NEXT_PUBLIC_SECURE_SITE_SDK_URL=""

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

@@ -5,7 +5,7 @@ const MAX_EMAIL_CHECK = 16
 const EMAIL_APPROVE_BUTTON_TEXT = 'Approve this login'
 const APPROVE_URL_REGEX = /https:\/\/register.*/u
 const OTP_CODE_REGEX = /\d{3}\s?\d{3}/u
-const EMAIL_DOMAIN = 'web3modal.msdc.co'
+const EMAIL_DOMAIN = process.env['EMAIL_DOMAIN'] || 'web3modal.msdc.co'
 export const NOT_ENABLED_DOMAIN = 'w3ma.msdc.co'
 
 export class Email {

packages/web3/src/client.ts

@@ -31,7 +31,12 @@ import { Web3HelpersUtil } from './scaffold-utils/Web3HelpersUtil.js'
 import { Web3StoreUtil } from './scaffold-utils/Web3StoreUtil.js'
 import type { EthereumProviderOptions } from '@walletconnect/ethereum-provider'
 import type { Eip1193Compatible } from 'web3'
-import { W3mFrameProvider, W3mFrameHelpers, W3mFrameRpcConstants } from '@web3modal/wallet'
+import {
+  W3mFrameProvider,
+  W3mFrameHelpers,
+  W3mFrameRpcConstants,
+  type W3mFrameTypes
+} from '@web3modal/wallet'
 import { Web3Wallet } from './utils/web3Wallet.js'
 import { NetworkUtil } from '@web3modal/common'
 // -- Types ---------------------------------------------------------------------
@@ -1011,8 +1016,8 @@ export class Web3Modal extends Web3ModalScaffold {
               switchError.code === Web3ConstantsUtil.ERROR_CODE_UNRECOGNIZED_CHAIN_ID ||
               switchError.code === Web3ConstantsUtil.ERROR_CODE_DEFAULT ||
               switchError?.data?.originalError?.code ===
-                Web3ConstantsUtil.ERROR_CODE_UNRECOGNIZED_CHAIN_ID||
-                switchError?.innerError?.code === Web3ConstantsUtil.ERROR_CODE_UNRECOGNIZED_CHAIN_ID
+                Web3ConstantsUtil.ERROR_CODE_UNRECOGNIZED_CHAIN_ID ||
+              switchError?.innerError?.code === Web3ConstantsUtil.ERROR_CODE_UNRECOGNIZED_CHAIN_ID
             ) {
               await this.web3Wallet.web3.addEthereumChain({
                 ...chain,
@@ -1038,8 +1043,8 @@ export class Web3Modal extends Web3ModalScaffold {
               switchError.code === Web3ConstantsUtil.ERROR_CODE_UNRECOGNIZED_CHAIN_ID ||
               switchError.code === Web3ConstantsUtil.ERROR_CODE_DEFAULT ||
               switchError?.data?.originalError?.code ===
-                Web3ConstantsUtil.ERROR_CODE_UNRECOGNIZED_CHAIN_ID||
-                switchError?.innerError?.code === Web3ConstantsUtil.ERROR_CODE_UNRECOGNIZED_CHAIN_ID
+                Web3ConstantsUtil.ERROR_CODE_UNRECOGNIZED_CHAIN_ID ||
+              switchError?.innerError?.code === Web3ConstantsUtil.ERROR_CODE_UNRECOGNIZED_CHAIN_ID
             ) {
               await this.web3Wallet.web3.addEthereumChain({
                 ...chain,
@@ -1065,8 +1070,8 @@ export class Web3Modal extends Web3ModalScaffold {
               switchError.code === Web3ConstantsUtil.ERROR_CODE_UNRECOGNIZED_CHAIN_ID ||
               switchError.code === Web3ConstantsUtil.ERROR_CODE_DEFAULT ||
               switchError?.data?.originalError?.code ===
-                Web3ConstantsUtil.ERROR_CODE_UNRECOGNIZED_CHAIN_ID||
-                switchError?.innerError?.code === Web3ConstantsUtil.ERROR_CODE_UNRECOGNIZED_CHAIN_ID
+                Web3ConstantsUtil.ERROR_CODE_UNRECOGNIZED_CHAIN_ID ||
+              switchError?.innerError?.code === Web3ConstantsUtil.ERROR_CODE_UNRECOGNIZED_CHAIN_ID
             ) {
               await this.web3Wallet.web3.addEthereumChain({
                 ...chain,
@@ -1092,8 +1097,8 @@ export class Web3Modal extends Web3ModalScaffold {
               switchError.code === Web3ConstantsUtil.ERROR_CODE_UNRECOGNIZED_CHAIN_ID ||
               switchError.code === Web3ConstantsUtil.ERROR_CODE_DEFAULT ||
               switchError?.data?.originalError?.code ===
-                Web3ConstantsUtil.ERROR_CODE_UNRECOGNIZED_CHAIN_ID||
-                switchError?.innerError?.code === Web3ConstantsUtil.ERROR_CODE_UNRECOGNIZED_CHAIN_ID
+                Web3ConstantsUtil.ERROR_CODE_UNRECOGNIZED_CHAIN_ID ||
+              switchError?.innerError?.code === Web3ConstantsUtil.ERROR_CODE_UNRECOGNIZED_CHAIN_ID
             ) {
               await this.web3Wallet.web3.addEthereumChain({
                 ...chain,
@@ -1111,15 +1116,13 @@ export class Web3Modal extends Web3ModalScaffold {
             await this.emailProvider.switchNetwork(chain?.chainId)
             Web3StoreUtil.setChainId(chain.chainId)
 
-            this.emailProvider
-              .connect({
-                chainId: chain?.chainId,
-                preferredAccountType: W3mFrameHelpers.getPreferredAccountType()
-              })
-              .then(({ address }) => {
-                Web3StoreUtil.setAddress(address as Address)
-                this.syncAccount()
-              })
+            const { address, preferredAccountType } = await this.emailProvider.connect({
+              chainId: chain?.chainId
+            })
+
+            Web3StoreUtil.setAddress(address as Address)
+            Web3StoreUtil.setPreferredAccountType(preferredAccountType as W3mFrameTypes.AccountType)
+            await this.syncAccount()
           } catch {
             throw new Error('Switching chain failed')
           }

packages/web3/src/scaffold-utils/Web3StoreUtil.ts

@@ -3,6 +3,7 @@
 import { subscribeKey as subKey } from 'valtio/vanilla/utils'
 import { proxy, ref, subscribe as sub } from 'valtio/vanilla'
 import type { Address, CombinedProvider, Provider } from './Web3TypesUtil.js'
+import type { W3mFrameTypes } from '@web3modal/wallet'
 
 // -- Types --------------------------------------------- //
 
@@ -12,6 +13,7 @@ export interface Web3StoreUtilState {
   address?: Address
   chainId?: number
   error?: unknown
+  preferredAccountType?: W3mFrameTypes.AccountType
   isConnected: boolean
 }
 
@@ -51,6 +53,10 @@ export const Web3StoreUtil = {
   setAddress(address: Web3StoreUtilState['address']) {
     state.address = address
   },
+
+  setPreferredAccountType(preferredAccountType: Web3StoreUtilState['preferredAccountType']) {
+    state.preferredAccountType = preferredAccountType
+  },
 
   setChainId(chainId: Web3StoreUtilState['chainId']) {
     state.chainId = chainId
@@ -71,5 +77,6 @@ export const Web3StoreUtil = {
     state.providerType = undefined
     state.isConnected = false
     state.error = undefined
+    state.preferredAccountType = undefined
   }
 }