chore: improve account name selection flow

.changeset/hot-shoes-sing.md

@@ -0,0 +1,23 @@
+---
+'@reown/appkit-scaffold-ui': patch
+'@apps/laboratory': patch
+'@apps/demo': patch
+'@apps/gallery': patch
+'@reown/appkit-adapter-ethers': patch
+'@reown/appkit-adapter-ethers5': patch
+'@reown/appkit-adapter-polkadot': patch
+'@reown/appkit-adapter-solana': patch
+'@reown/appkit-adapter-wagmi': patch
+'@reown/appkit': patch
+'@reown/appkit-utils': patch
+'@reown/appkit-cdn': patch
+'@reown/appkit-common': patch
+'@reown/appkit-core': patch
+'@reown/appkit-experimental': patch
+'@reown/appkit-polyfills': patch
+'@reown/appkit-siwe': patch
+'@reown/appkit-ui': patch
+'@reown/appkit-wallet': patch
+---
+
+Improved account name selection flow

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

@@ -30,6 +30,12 @@ export class ModalWalletPage extends ModalPage {
     await this.page.getByRole('button', { name: 'Choose Name' }).click()
   }
 
+  async clickAccountName(name: string) {
+    const suggestion = this.page.getByTestId('account-name-suggestion').getByText(name)
+    await expect(suggestion).toBeVisible()
+    await suggestion.click()
+  }
+
   async typeName(name: string) {
     await this.page.getByTestId('wui-ens-input').getByTestId('wui-input-text').fill(name)
   }

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

@@ -234,6 +234,28 @@ export class ModalValidator {
     await expect(suggestion).toBeVisible()
   }
 
+  async expectHeaderText(text: string) {
+    const headerText = this.page.getByTestId('w3m-header-text')
+    await expect(headerText).toHaveText(text)
+  }
+
+  async expectSignatureRequestFrameByText(headerText: string) {
+    await expect(
+      this.page.frameLocator('#w3m-iframe').getByText(headerText),
+      'AppKit iframe should be visible'
+    ).toBeVisible({
+      timeout: 10000
+    })
+    await this.page.waitForTimeout(500)
+  }
+
+  async expectAccountNameApproveTransaction(name: string) {
+    await this.expectSignatureRequestFrameByText('requests a signature')
+    const iframe = this.page.frameLocator('#w3m-iframe')
+    const textContent = await iframe.locator('.textContent').textContent()
+    expect(textContent).toContain(`{"name":"${name}","attributes":{},"timestamp":`)
+  }
+
   async expectCallStatusSuccessOrRetry(sendCallsId: string, allowedRetry: boolean) {
     const callStatusReceipt = this.page.getByText('"status": "CONFIRMED"')
     const isConfirmed = await callStatusReceipt.isVisible({

apps/laboratory/tests/wallet-features.spec.ts

@@ -71,5 +71,8 @@ walletFeaturesTest('it should find account name as expected', async () => {
   await page.openChooseName()
   await page.typeName('test-ens-check')
   await validator.expectAccountNameFound('test-ens-check')
+  await page.clickAccountName('test-ens-check')
+  await validator.expectHeaderText('Approve Transaction')
+  await validator.expectAccountNameApproveTransaction('test-ens-check.reown.id')
   await page.closeModal()
 })

packages/scaffold-ui/src/partials/w3m-header/index.ts

@@ -193,7 +193,9 @@ export class W3mHeader extends LitElement {
         alignItems="center"
         gap="xs"
       >
-        <wui-text variant="paragraph-700" color="fg-100">${this.headerText}</wui-text>
+        <wui-text variant="paragraph-700" color="fg-100" data-testid="w3m-header-text"
+          >${this.headerText}</wui-text
+        >
         ${isBeta ? html`<wui-tag variant="main">Beta</wui-tag>` : null}
       </wui-flex>
     `

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

@@ -156,6 +156,7 @@ export class W3mRegisterAccountNameView extends LitElement {
         .padding=${['m', 'm', 'm', 'm'] as const}
         justifyContent="space-between"
         class="suggestion"
+        @click=${this.onSubmitName.bind(this)}
       >
         <wui-text color="fg-100" variant="paragraph-400" class="suggested-name">
           ${this.name}</wui-text