fix(scaffold-ui): auto-trigger SIWX sign on auth view open

.changeset/slow-lamps-heal.md

@@ -0,0 +1,5 @@
+---
+'@reown/appkit-scaffold-ui': patch
+---
+
+Auto-trigger the SIWX sign message request when the SIWX sign view opens, so users do not need to click the extra Sign button.

packages/scaffold-ui/src/views/w3m-siwx-sign-message-view/index.ts

@@ -23,6 +23,19 @@ export class W3mSIWXSignMessageView extends LitElement {
 
   @state() private isSigning = false
 
+  private hasAutoSignTriggered = false
+
+  public override connectedCallback() {
+    super.connectedCallback()
+
+    if (this.hasAutoSignTriggered) {
+      return
+    }
+
+    this.hasAutoSignTriggered = true
+    queueMicrotask(() => void this.onSign())
+  }
+
   // -- Render -------------------------------------------- //
   public override render() {
     return html`
@@ -69,6 +82,10 @@ export class W3mSIWXSignMessageView extends LitElement {
 
   // -- Private ------------------------------------------- //
   private async onSign() {
+    if (this.isSigning) {
+      return
+    }
+
     this.isSigning = true
     try {
       await SIWXUtil.requestSignMessage()

packages/scaffold-ui/test/views/w3m-siwx-sign-message-view.test.ts

@@ -0,0 +1,74 @@
+import { fixture } from '@open-wc/testing'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+
+import { html } from 'lit'
+
+import { RouterController, SIWXUtil, SnackController } from '@reown/appkit-controllers'
+
+import { W3mSIWXSignMessageView } from '../../src/views/w3m-siwx-sign-message-view/index'
+
+async function flushMicrotasks() {
+  await new Promise(resolve => setTimeout(resolve, 0))
+}
+
+describe('W3mSIWXSignMessageView', () => {
+  beforeEach(() => {
+    vi.restoreAllMocks()
+    Object.defineProperty(HTMLElement.prototype, 'animate', {
+      configurable: true,
+      writable: true,
+      value: vi.fn(() => ({}) as Animation)
+    })
+  })
+
+  it('should request signature automatically when mounted', async () => {
+    const requestSignMessageSpy = vi
+      .spyOn(SIWXUtil, 'requestSignMessage')
+      .mockResolvedValue(undefined)
+
+    await fixture<W3mSIWXSignMessageView>(
+      html`<w3m-siwx-sign-message-view></w3m-siwx-sign-message-view>`
+    )
+    await flushMicrotasks()
+
+    expect(requestSignMessageSpy).toHaveBeenCalledTimes(1)
+  })
+
+  it('should not request signature twice while signing is already in progress', async () => {
+    let resolveRequest!: () => void
+    const pendingRequest = new Promise<void>(resolve => {
+      resolveRequest = resolve
+    })
+    const requestSignMessageSpy = vi
+      .spyOn(SIWXUtil, 'requestSignMessage')
+      .mockReturnValue(pendingRequest)
+
+    const element = await fixture<W3mSIWXSignMessageView>(
+      html`<w3m-siwx-sign-message-view></w3m-siwx-sign-message-view>`
+    )
+    await flushMicrotasks()
+
+    await (element as any).onSign()
+
+    resolveRequest()
+    await flushMicrotasks()
+
+    expect(requestSignMessageSpy).toHaveBeenCalledTimes(1)
+  })
+
+  it('should route to DataCapture when OTP is required', async () => {
+    vi.spyOn(SIWXUtil, 'requestSignMessage').mockRejectedValue(new Error('OTP is required'))
+    const showErrorSpy = vi.spyOn(SnackController, 'showError').mockImplementation(() => {})
+    const routerReplaceSpy = vi.spyOn(RouterController, 'replace').mockImplementation(() => {})
+
+    await fixture<W3mSIWXSignMessageView>(
+      html`<w3m-siwx-sign-message-view></w3m-siwx-sign-message-view>`
+    )
+    await flushMicrotasks()
+
+    expect(showErrorSpy).toHaveBeenCalledWith({
+      message: 'Something went wrong. We need to verify your account again.'
+    })
+    expect(routerReplaceSpy).toHaveBeenCalledWith('DataCapture')
+  })
+})