fix: w3m-header question mark icon is incorrectly rendered (#4982)

Author: magiziz

.changeset/slick-tigers-draw.md

@@ -0,0 +1,29 @@
+---
+'@reown/appkit-scaffold-ui': patch
+'pay-test-exchange': patch
+'@reown/appkit-adapter-bitcoin': patch
+'@reown/appkit-adapter-ethers': patch
+'@reown/appkit-adapter-ethers5': patch
+'@reown/appkit-adapter-solana': patch
+'@reown/appkit-adapter-wagmi': patch
+'@reown/appkit': patch
+'@reown/appkit-utils': patch
+'@reown/appkit-cdn': patch
+'@reown/appkit-cli': patch
+'@reown/appkit-codemod': patch
+'@reown/appkit-common': patch
+'@reown/appkit-controllers': patch
+'@reown/appkit-core': patch
+'@reown/appkit-experimental': patch
+'@reown/appkit-pay': patch
+'@reown/appkit-polyfills': patch
+'@reown/appkit-siwe': patch
+'@reown/appkit-siwx': patch
+'@reown/appkit-testing': patch
+'@reown/appkit-ui': patch
+'@reown/appkit-universal-connector': patch
+'@reown/appkit-wallet': patch
+'@reown/appkit-wallet-button': patch
+---
+
+Fixed an issue where the question mark icon in the header was not displayed correctly

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

@@ -15,7 +15,7 @@ import {
 } from '@reown/appkit-controllers'
 import { customElement } from '@reown/appkit-ui'
 import '@reown/appkit-ui/wui-flex'
-import '@reown/appkit-ui/wui-icon-link'
+import '@reown/appkit-ui/wui-icon-button'
 import '@reown/appkit-ui/wui-select'
 import '@reown/appkit-ui/wui-tag'
 import '@reown/appkit-ui/wui-text'

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

@@ -33,7 +33,7 @@ export default css`
     animation-delay: 0ms, 200ms;
   }
 
-  wui-icon-link[data-hidden='true'] {
+  wui-icon-button[data-hidden='true'] {
     opacity: 0 !important;
     pointer-events: none;
   }

packages/scaffold-ui/src/partials/w3m-wallet-send-details/index.ts

@@ -1,5 +1,5 @@
 import { LitElement, html } from 'lit'
-import { property } from 'lit/decorators.js'
+import { property, state } from 'lit/decorators.js'
 import { ifDefined } from 'lit/directives/if-defined.js'
 
 import { type CaipNetwork } from '@reown/appkit-common'
@@ -20,6 +20,8 @@ export class W3mWalletSendDetails extends LitElement {
 
   @property({ type: Object }) public caipNetwork?: CaipNetwork
 
+  @state() private params = RouterController.state.data?.send
+
   // -- Render -------------------------------------------- //
   public override render() {
     return html` <wui-text variant="sm-regular" color="secondary">Details</wui-text>
@@ -53,7 +55,7 @@ export class W3mWalletSendDetails extends LitElement {
   }
 
   private onNetworkClick(network?: CaipNetwork) {
-    if (network) {
+    if (network && !this.params) {
       RouterController.push('Networks', { network })
     }
   }

packages/scaffold-ui/test/partials/w3m-header.test.ts

@@ -232,6 +232,18 @@ describe('W3mHeader', () => {
 
       expect(trackSpy).toHaveBeenCalledWith({ type: 'track', event: 'CLICK_WALLET_HELP' })
     })
+
+    it('should hide help button when not in Connect view', async () => {
+      RouterController.state.view = 'Account'
+      OptionsController.state.enableNetworkSwitch = false
+      element.requestUpdate()
+      await element.updateComplete
+      await elementUpdated(element)
+
+      const helpButton = element.shadowRoot?.querySelector('wui-icon-button[icon="helpCircle"]')
+      expect(helpButton).toBeTruthy()
+      expect(helpButton?.getAttribute('data-hidden')).toBe('true')
+    })
   })
 
   describe('Network Selector Visibility', () => {