feat: sign

apps/laboratory/src/components/Ethers/EthersConnectButton.tsx

@@ -15,7 +15,7 @@ export function EthersConnectButton() {
       const signer = new JsonRpcSigner(provider, address)
       const signature = await signer?.signMessage('Hello Web3Modal Ethers')
 
-      toast({ title: 'Succcess', description: signature, status: 'success', isClosable: true })
+      toast({ title: 'Success', description: signature, status: 'success', isClosable: true })
     } catch {
       toast({
         title: 'Error',
@@ -29,7 +29,11 @@ export function EthersConnectButton() {
   return (
     <>
       <w3m-button />
-      {isConnected ? <Button onClick={() => onSignMessage()}>Sign Message</Button> : null}
+      {isConnected ? (
+        <Button onClick={() => onSignMessage()} data-testid="sign-message-button">
+          Sign Message
+        </Button>
+      ) : null}
     </>
   )
 }

apps/laboratory/src/components/Wagmi/WagmiConnectButton.tsx

@@ -48,7 +48,7 @@ export function WagmiConnectButton() {
   async function onSignMessage() {
     try {
       const signature = await signMessageAsync()
-      toast({ title: 'Succcess', description: signature, status: 'success', isClosable: true })
+      toast({ title: 'Success', description: signature, status: 'success', isClosable: true })
     } catch {
       toast({
         title: 'Error',
@@ -67,7 +67,7 @@ export function WagmiConnectButton() {
         primaryType: 'Mail',
         types
       })
-      toast({ title: 'Succcess', description: signature, status: 'success', isClosable: true })
+      toast({ title: 'Success', description: signature, status: 'success', isClosable: true })
     } catch {
       toast({
         title: 'Error',
@@ -83,8 +83,12 @@ export function WagmiConnectButton() {
       <w3m-button />
       {isConnected ? (
         <>
-          <Button onClick={() => onSignMessage()}>Sign Message</Button>
-          <Button onClick={() => onSignTypedData()}>Sign Typed Data</Button>
+          <Button onClick={() => onSignMessage()} data-testid="sign-message-button">
+            Sign Message
+          </Button>
+          <Button onClick={() => onSignTypedData()} data-testid="sign-typed-data-button">
+            Sign Typed Data
+          </Button>
         </>
       ) : null}
     </>

apps/laboratory/tests/connect.spec.ts

@@ -1,14 +1,28 @@
 import { DEFAULT_SESSION_PARAMS } from './shared/constants'
 import { testMW } from './shared/fixtures/w3m-wallet-fixture'
 
-// Initialize the connection
 testMW.beforeEach(async ({ modalPage, walletPage }) => {
   await modalPage.copyConnectUriToClipboard()
   await walletPage.connect()
   await walletPage.handleSessionProposal(DEFAULT_SESSION_PARAMS)
 })
 
-testMW('Should connect', async ({ modalValidator, walletValidator }) => {
-  await modalValidator.expectConnected()
-  await walletValidator.expectConnected()
+testMW.afterEach(async ({ modalPage, modalValidator, walletValidator }) => {
+  await modalPage.disconnect()
+  await modalValidator.expectDisconnected()
+  await walletValidator.expectDisconnected()
 })
+
+testMW(
+  'Should connect and sign',
+  async ({ modalPage, walletPage, modalValidator, walletValidator }) => {
+    await modalValidator.expectConnected()
+    await walletValidator.expectConnected()
+
+    // Sign
+    await modalPage.sign()
+    await walletValidator.expectRecievedSign({})
+    await walletPage.handleRequest({ accept: true })
+    await modalValidator.expectAcceptedSign()
+  }
+)

apps/laboratory/tests/shared/pages/ModalPage.ts

@@ -10,7 +10,7 @@ export class ModalPage {
     public readonly page: Page,
     public readonly library: string
   ) {
-    this.connectButton = this.page.getByText('Connect Wallet')
+    this.connectButton = this.page.getByTestId('connect-button')
   }
 
   async load() {
@@ -24,4 +24,13 @@ export class ModalPage {
     await this.page.waitForTimeout(2000)
     await this.page.getByTestId('copy-wc2-uri').click()
   }
+
+  async disconnect() {
+    await this.page.getByTestId('account-button').click()
+    await this.page.getByTestId('disconnect-button').click()
+  }
+
+  async sign() {
+    await this.page.getByTestId('sign-message-button').click()
+  }
 }

apps/laboratory/tests/shared/pages/WalletPage.ts

@@ -36,12 +36,15 @@ export class WalletPage {
    */
   async handleSessionProposal(opts: SessionParams) {
     const variant = opts.accept ? `approve` : `reject`
+    await this.page.getByTestId(`session-${variant}-button`).isEnabled()
     await this.page.getByTestId(`session-${variant}-button`).focus()
     await this.page.keyboard.press('Space')
   }
 
   async handleRequest({ accept }: { accept: boolean }) {
     const variant = accept ? `approve` : `reject`
-    await this.page.getByTestId(`request-button-${variant}`).click()
+    await this.page.getByTestId(`session-${variant}-button`).isEnabled()
+    await this.page.getByTestId(`session-${variant}-button`).focus()
+    await this.page.keyboard.press('Space')
   }
 }

apps/laboratory/tests/shared/validators/ModalValidator.ts

@@ -5,6 +5,20 @@ export class ModalValidator {
   constructor(public readonly page: Page) {}
 
   async expectConnected() {
-    await expect(this.page.getByText('Sign Message')).toBeVisible()
+    await expect(this.page.getByTestId('account-button')).toBeVisible()
+  }
+
+  async expectDisconnected() {
+    await expect(this.page.getByTestId('account-button')).not.toBeVisible()
+  }
+
+  async expectAcceptedSign() {
+    await expect(this.page.getByText('Success')).toBeVisible()
+  }
+
+  async expectRejectedSign() {
+    await this.page.waitForTimeout(4000)
+    await this.page.screenshot({ path: 'failure.png' })
+    await expect(this.page.getByText('Error')).toBeVisible()
   }
 }

apps/laboratory/tests/shared/validators/WalletValidator.ts

@@ -13,4 +13,16 @@ export class WalletValidator {
     await this.gotoSessions.click()
     await expect(this.page.getByTestId('session-card')).toBeVisible()
   }
+
+  async expectDisconnected() {
+    await this.page.waitForTimeout(1000)
+    await this.page.reload()
+    await this.gotoSessions.click()
+    await expect(this.page.getByTestId('session-card')).not.toBeVisible()
+  }
+
+  async expectRecievedSign({ chainName = 'Ethereum' }) {
+    await expect(this.page.getByTestId('session-approve-button')).toBeVisible()
+    await expect(this.page.getByTestId('request-details-chain')).toHaveText(chainName)
+  }
 }

packages/scaffold/src/modal/w3m-account-button/index.ts

@@ -78,6 +78,7 @@ export class W3mAccountButton extends LitElement {
           ? CoreHelperUtil.formatBalance(this.balanceVal, this.balanceSymbol)
           : ''}
         @click=${this.onClick.bind(this)}
+        data-testid="account-button"
       >
       </wui-account-button>
     `

packages/scaffold/src/modal/w3m-button/index.ts

@@ -53,7 +53,6 @@ export class W3mButton extends LitElement {
             size=${ifDefined(this.size)}
             label=${ifDefined(this.label)}
             loadingLabel=${ifDefined(this.loadingLabel)}
-            data-testid="connect-button"
           ></w3m-connect-button>
         `
   }

packages/scaffold/src/modal/w3m-connect-button/index.ts

@@ -45,6 +45,7 @@ export class W3mConnectButton extends LitElement {
         size=${ifDefined(this.size)}
         .loading=${isLoading}
         @click=${this.onClick.bind(this)}
+        data-testid="connect-button"
       >
         ${isLoading ? this.loadingLabel : this.label}
       </wui-connect-button>

packages/scaffold/src/views/w3m-account-view/index.ts

@@ -154,6 +154,7 @@ export class W3mAccountView extends LitElement {
           ?chevron=${false}
           .loading=${this.disconecting}
           @click=${this.onDisconnect.bind(this)}
+          data-testid="disconnect-button"
         >
           <wui-text variant="paragraph-500" color="fg-200">Disconnect</wui-text>
         </wui-list-item>