fix: enable/disable auth options dynamically (#3721)

Co-authored-by: tomiir <[email protected]>

.changeset/empty-cars-kick.md

@@ -0,0 +1,23 @@
+---
+'@reown/appkit-scaffold-ui': patch
+'@reown/appkit-core': 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-common': patch
+'@reown/appkit-experimental': patch
+'@reown/appkit-polyfills': patch
+'@reown/appkit-siwe': patch
+'@reown/appkit-siwx': patch
+'@reown/appkit-ui': patch
+'@reown/appkit-wallet': patch
+'@reown/appkit-wallet-button': patch
+---
+
+Fixes listening `ChainController.state.noAdapters` and `OptionsController.state.features` while enable/disable auth options dynamically

packages/scaffold-ui/src/views/w3m-connect-view/index.ts

@@ -11,6 +11,7 @@ import {
   type Connector,
   ConnectorController,
   CoreHelperUtil,
+  type Features,
   OptionsController,
   RouterController,
   type WalletGuideType
@@ -40,6 +41,8 @@ export class W3mConnectView extends LitElement {
 
   @state() private enableWallets = OptionsController.state.enableWallets
 
+  @state() private noAdapters = ChainController.state.noAdapters
+
   @property() private walletGuide: WalletGuideType = 'get-started'
 
   @state() private checked = false
@@ -61,12 +64,13 @@ export class W3mConnectView extends LitElement {
         this.authConnector = this.connectors.find(c => c.type === 'AUTH')
         this.isAuthEnabled = this.checkIfAuthEnabled(this.connectors)
       }),
-      OptionsController.subscribeKey('features', val => (this.features = val)),
+      OptionsController.subscribeKey('features', val =>
+        this.setEmailAndSocialEnableCheck(val, this.noAdapters)
+      ),
       OptionsController.subscribeKey('enableWallets', val => (this.enableWallets = val)),
-      ChainController.subscribeKey('noAdapters', val => {
-        this.isEmailEnabled = this.features?.email && !val
-        this.isSocialEnabled = this.features?.socials && this.features.socials.length > 0 && !val
-      })
+      ChainController.subscribeKey('noAdapters', val =>
+        this.setEmailAndSocialEnableCheck(this.features, val)
+      )
     )
   }
 
@@ -145,6 +149,13 @@ export class W3mConnectView extends LitElement {
   }
 
   // -- Private ------------------------------------------- //
+  private setEmailAndSocialEnableCheck(features: Features | undefined, noAdapters: boolean) {
+    this.isEmailEnabled = features?.email && !noAdapters
+    this.isSocialEnabled = features?.socials && features.socials.length > 0 && !noAdapters
+    this.features = features
+    this.noAdapters = noAdapters
+  }
+
   private checkIfAuthEnabled(connectors: Connector[]) {
     const namespacesWithAuthConnector = connectors
       .filter(c => c.type === AppKitConstantsUtil.CONNECTOR_TYPE_AUTH)

packages/scaffold-ui/test/views/w3m-connect-view.test.ts

@@ -352,3 +352,87 @@ describe('W3mConnectView - Wallet Guide Mode', () => {
     expect(HelpersUtil.querySelect(element, 'w3m-wallet-guide')).toBeNull()
   })
 })
+
+describe('W3mConnectView - Email and Social Enable States', () => {
+  beforeEach(() => {
+    vi.clearAllMocks()
+    vi.spyOn(OptionsController, 'state', 'get').mockReturnValue({
+      ...OptionsController.state,
+      features: {
+        email: true,
+        socials: ['google'],
+        connectMethodsOrder: ['social', 'email', 'wallet']
+      }
+    })
+    vi.mocked(ChainController.state).noAdapters = false
+  })
+
+  it('should disable email and social when noAdapters is true', async () => {
+    const element: W3mConnectView = await fixture(html`<w3m-connect-view></w3m-connect-view>`)
+    vi.mocked(ChainController.state).noAdapters = true
+
+    // Trigger state update
+    element['setEmailAndSocialEnableCheck'](element['features'], true)
+
+    expect(element['isEmailEnabled']).toBe(false)
+    expect(element['isSocialEnabled']).toBe(false)
+  })
+
+  it('should enable email and social when features are enabled and noAdapters is false', async () => {
+    const element: W3mConnectView = await fixture(html`<w3m-connect-view></w3m-connect-view>`)
+
+    // Trigger state update with enabled features
+    element['setEmailAndSocialEnableCheck'](
+      {
+        email: true,
+        socials: ['google']
+      },
+      false
+    )
+
+    expect(element['isEmailEnabled']).toBe(true)
+    expect(element['isSocialEnabled']).toBe(true)
+  })
+
+  it('should disable email when email feature is disabled', async () => {
+    const element: W3mConnectView = await fixture(html`<w3m-connect-view></w3m-connect-view>`)
+
+    // Trigger state update with email disabled
+    element['setEmailAndSocialEnableCheck'](
+      {
+        email: false,
+        socials: ['google']
+      },
+      false
+    )
+
+    expect(element['isEmailEnabled']).toBe(false)
+    expect(element['isSocialEnabled']).toBe(true)
+  })
+
+  it('should disable social when socials array is empty', async () => {
+    const element: W3mConnectView = await fixture(html`<w3m-connect-view></w3m-connect-view>`)
+
+    // Trigger state update with empty socials array
+    element['setEmailAndSocialEnableCheck'](
+      {
+        email: true,
+        socials: []
+      },
+      false
+    )
+
+    expect(element['isEmailEnabled']).toBe(true)
+    expect(element['isSocialEnabled']).toBe(false)
+  })
+
+  it('should handle undefined features', async () => {
+    const element: W3mConnectView = await fixture(html`<w3m-connect-view></w3m-connect-view>`)
+
+    // Trigger state update with undefined features
+    element['setEmailAndSocialEnableCheck'](undefined, false)
+
+    expect(element['isEmailEnabled']).toBe(undefined)
+    expect(element['isSocialEnabled']).toBe(undefined)
+  })
+})