fix: social login shows undefined (#2783)

Co-authored-by: Enes <enesozturk.d@gmail.com>

apps/laboratory/package.json

@@ -16,6 +16,7 @@
     "playwright:test:basic": "playwright test --grep 'basic-tests.spec.ts'",
     "playwright:test:wallet": "playwright test --grep 'wallet.spec.ts'",
     "playwright:test:no-email": "playwright test --grep 'no-email.spec.ts'",
+    "playwright:test:no-socials": "playwright test --grep 'no-socials.spec.ts'",
     "playwright:test:email": "playwright test --grep 'email.spec.ts'",
     "playwright:test:siwe": "playwright test --grep siwe.spec.ts",
     "playwright:test:siwe-email": "playwright test --grep siwe-email.spec.ts",
@@ -29,6 +30,7 @@
     "playwright:debug:basic": "pnpm playwright:test:basic --debug",
     "playwright:debug:wallet": "pnpm playwright:test:wallet --debug",
     "playwright:debug:no-email": "pnpm playwright:test:no-email --debug",
+    "playwright:debug:no-socials": "pnpm playwright:test:no-socials --debug",
     "playwright:debug:email": "pnpm playwright:test:email --debug",
     "playwright:debug:siwe": "pnpm playwright:test:siwe --debug",
     "playwright:debug:siwe-email": "pnpm playwright:test:siwe-email --debug",

apps/laboratory/src/pages/library/ethers-no-socials.tsx

@@ -0,0 +1,39 @@
+import { EthersTests } from '../../components/Ethers/EthersTests'
+import { AppKitButtons } from '../../components/AppKitButtons'
+import { createWeb3Modal, defaultConfig } from '@web3modal/ethers/react'
+import { ThemeStore } from '../../utils/StoreUtil'
+import { EthersConstants } from '../../utils/EthersConstants'
+import { ConstantsUtil } from '../../utils/ConstantsUtil'
+import { EthersModalInfo } from '../../components/Ethers/EthersModalInfo'
+
+const modal = createWeb3Modal({
+  ethersConfig: defaultConfig({
+    metadata: ConstantsUtil.Metadata,
+    defaultChainId: 1,
+    chains: EthersConstants.chains,
+    coinbasePreference: 'smartWalletOnly',
+    auth: {
+      email: true,
+      socials: []
+    }
+  }),
+  chains: EthersConstants.chains,
+  projectId: ConstantsUtil.ProjectId,
+  enableAnalytics: true,
+  metadata: ConstantsUtil.Metadata,
+  termsConditionsUrl: 'https://walletconnect.com/terms',
+  privacyPolicyUrl: 'https://walletconnect.com/privacy',
+  customWallets: ConstantsUtil.CustomWallets
+})
+
+ThemeStore.setModal(modal)
+
+export default function Ethers() {
+  return (
+    <>
+      <AppKitButtons />
+      <EthersModalInfo />
+      <EthersTests />
+    </>
+  )
+}

apps/laboratory/src/pages/library/ethers5-no-socials.tsx

@@ -0,0 +1,42 @@
+import { createWeb3Modal, defaultConfig } from '@web3modal/ethers5/react'
+import { ThemeStore } from '../../utils/StoreUtil'
+import { EthersConstants } from '../../utils/EthersConstants'
+import { ConstantsUtil } from '../../utils/ConstantsUtil'
+import { AppKitButtons } from '../../components/AppKitButtons'
+import { siweConfig } from '../../utils/SiweUtils'
+import { SiweData } from '../../components/Siwe/SiweData'
+import { Ethers5Tests } from '../../components/Ethers/Ethers5Tests'
+import { Ethers5ModalInfo } from '../../components/Ethers/Ethers5ModalInfo'
+
+const modal = createWeb3Modal({
+  ethersConfig: defaultConfig({
+    metadata: ConstantsUtil.Metadata,
+    defaultChainId: 1,
+    auth: {
+      email: true,
+      socials: []
+    },
+    coinbasePreference: 'smartWalletOnly'
+  }),
+  chains: EthersConstants.chains,
+  projectId: ConstantsUtil.ProjectId,
+  enableAnalytics: true,
+  metadata: ConstantsUtil.Metadata,
+  termsConditionsUrl: 'https://walletconnect.com/terms',
+  privacyPolicyUrl: 'https://walletconnect.com/privacy',
+  siweConfig,
+  customWallets: ConstantsUtil.CustomWallets
+})
+
+ThemeStore.setModal(modal)
+
+export default function Ethers() {
+  return (
+    <>
+      <AppKitButtons />
+      <Ethers5ModalInfo />
+      <SiweData />
+      <Ethers5Tests />
+    </>
+  )
+}

apps/laboratory/src/pages/library/solana-no-socials.tsx

@@ -0,0 +1,45 @@
+import { createWeb3Modal, defaultSolanaConfig } from '@web3modal/solana/react'
+
+import { ThemeStore } from '../../utils/StoreUtil'
+import { solana, solanaDevnet, solanaTestnet } from '../../utils/ChainsUtil'
+import { AppKitButtons } from '../../components/AppKitButtons'
+import { ConstantsUtil } from '../../utils/ConstantsUtil'
+import { SolanaTests } from '../../components/Solana/SolanaTests'
+import { SolflareWalletAdapter } from '@solana/wallet-adapter-wallets'
+
+const chains = [solana, solanaTestnet, solanaDevnet]
+
+export const solanaConfig = defaultSolanaConfig({
+  chains,
+  projectId: ConstantsUtil.ProjectId,
+  metadata: ConstantsUtil.Metadata,
+  auth: {
+    email: true,
+    socials: []
+  }
+})
+
+const modal = createWeb3Modal({
+  solanaConfig,
+  projectId: ConstantsUtil.ProjectId,
+  metadata: ConstantsUtil.Metadata,
+  defaultChain: solana,
+  chains,
+  enableAnalytics: false,
+  termsConditionsUrl: 'https://walletconnect.com/terms',
+  privacyPolicyUrl: 'https://walletconnect.com/privacy',
+  customWallets: ConstantsUtil.CustomWallets,
+  enableSwaps: false,
+  wallets: [new SolflareWalletAdapter()]
+})
+
+ThemeStore.setModal(modal)
+
+export default function Solana() {
+  return (
+    <>
+      <AppKitButtons />
+      <SolanaTests />
+    </>
+  )
+}

apps/laboratory/src/pages/library/wagmi-no-socials.tsx

@@ -0,0 +1,37 @@
+import { createWeb3Modal } from '@web3modal/wagmi/react'
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query'
+import { WagmiProvider } from 'wagmi'
+import { AppKitButtons } from '../../components/AppKitButtons'
+import { WagmiTests } from '../../components/Wagmi/WagmiTests'
+import { ThemeStore } from '../../utils/StoreUtil'
+import { getWagmiConfig } from '../../utils/WagmiConstants'
+import { ConstantsUtil } from '../../utils/ConstantsUtil'
+import { WagmiModalInfo } from '../../components/Wagmi/WagmiModalInfo'
+
+const queryClient = new QueryClient()
+
+const wagmiConfig = getWagmiConfig('default', { auth: { email: true, socials: [] } })
+
+const modal = createWeb3Modal({
+  wagmiConfig,
+  projectId: ConstantsUtil.ProjectId,
+  enableAnalytics: true,
+  metadata: ConstantsUtil.Metadata,
+  termsConditionsUrl: 'https://walletconnect.com/terms',
+  privacyPolicyUrl: 'https://walletconnect.com/privacy',
+  customWallets: ConstantsUtil.CustomWallets
+})
+
+ThemeStore.setModal(modal)
+
+export default function Wagmi() {
+  return (
+    <WagmiProvider config={wagmiConfig}>
+      <QueryClientProvider client={queryClient}>
+        <AppKitButtons />
+        <WagmiModalInfo />
+        <WagmiTests />
+      </QueryClientProvider>
+    </WagmiProvider>
+  )
+}

apps/laboratory/src/utils/DataUtil.ts

@@ -34,6 +34,11 @@ export const wagmiSdkOptions = [
     link: '/library/wagmi-no-email/',
     description: 'Configuration using wagmi without email'
   },
+  {
+    title: 'Without Socials',
+    link: '/library/wagmi-no-socials/',
+    description: 'Configuration using wagmi without socials'
+  },
   {
     title: 'Permissions(Sync)',
     link: '/library/wagmi-permissions-sync/',
@@ -61,6 +66,11 @@ export const ethersSdkOptions = [
     title: 'Without Email',
     link: '/library/ethers-no-email/',
     description: 'Configuration using ethers without email'
+  },
+  {
+    title: 'Without Socials',
+    link: '/library/ethers-no-socials/',
+    description: 'Configuration using ethers without socials'
   }
 ]
 
@@ -74,6 +84,11 @@ export const ethers5SdkOptions = [
     title: 'SIWE',
     link: '/library/ethers5-siwe/',
     description: 'Configuration using ethers and implementing sign in with ethereum'
+  },
+  {
+    title: 'Without Socials',
+    link: '/library/ethers5-no-socials/',
+    description: 'Configuration using ethers without socials'
   }
 ]
 
@@ -87,5 +102,10 @@ export const solanaSdkOptions = [
     title: 'Without Email',
     link: '/library/solana-no-email/',
     description: 'Configuration using solana without email'
+  },
+  {
+    title: 'Without Socials',
+    link: '/library/solana-no-socials/',
+    description: 'Configuration using ethers without socials'
   }
 ]

apps/laboratory/tests/no-socials.spec.ts

@@ -0,0 +1,37 @@
+import { test, type BrowserContext } from '@playwright/test'
+import { ModalPage } from './shared/pages/ModalPage'
+import { ModalValidator } from './shared/validators/ModalValidator'
+
+/* eslint-disable init-declarations */
+let modalPage: ModalPage
+let modalValidator: ModalValidator
+let context: BrowserContext
+
+// -- Setup --------------------------------------------------------------------
+const noSocialsTest = test.extend<{ library: string }>({
+  library: ['wagmi', { option: true }]
+})
+
+noSocialsTest.beforeAll(async ({ browser, library }) => {
+  context = await browser.newContext()
+  const browserPage = await context.newPage()
+
+  modalPage = new ModalPage(browserPage, library, 'no-socials')
+  modalValidator = new ModalValidator(browserPage)
+
+  await modalPage.load()
+  await modalPage.openConnectModal()
+})
+
+noSocialsTest.afterAll(async () => {
+  await modalPage.page.close()
+})
+
+// -- Tests --------------------------------------------------------------------
+noSocialsTest('should not display any socials', () => {
+  modalValidator.expectNoSocials()
+})
+
+noSocialsTest('should show email login', () => {
+  modalValidator.expectEmailLogin()
+})

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

@@ -19,6 +19,7 @@ export type ModalFlavor =
   | 'verify-domain-mismatch'
   | 'verify-evil'
   | 'no-email'
+  | 'no-socials'
   | 'all'
 
 function getUrlByFlavor(baseUrl: string, library: string, flavor: ModalFlavor) {
@@ -323,6 +324,10 @@ export class ModalPage {
     await this.page.getByTestId('account-button').click()
   }
 
+  async openConnectModal() {
+    await this.page.getByTestId('connect-button').click()
+  }
+
   async closeModal() {
     await this.page.getByTestId('w3m-header-close')?.click?.()
     // Wait for the modal fade out animation

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

@@ -102,6 +102,16 @@ export class ModalValidator {
     expect(secureSiteIframe).toBeNull()
   }
 
+  expectNoSocials() {
+    const socialList = this.page.getByTestId('wui-list-social')
+    expect(socialList).toBeHidden()
+  }
+
+  expectEmailLogin() {
+    const emailInput = this.page.getByTestId('wui-email-input')
+    expect(emailInput).toBeVisible()
+  }
+
   async expectValidSignature(signature: `0x${string}`, address: `0x${string}`, chainId: number) {
     const isVerified = await verifySignature({
       address,

packages/scaffold-ui/src/partials/w3m-social-login-widget/index.ts

@@ -49,7 +49,7 @@ export class W3mSocialLoginWidget extends LitElement {
 
   // -- Render -------------------------------------------- //
   public override render() {
-    if (!this.connector?.socials) {
+    if (!this.connector) {
       return null
     }
 
@@ -69,7 +69,7 @@ export class W3mSocialLoginWidget extends LitElement {
 
   // -- Private ------------------------------------------- //
   private topViewTemplate() {
-    if (!this.connector?.socials) {
+    if (!this.connector?.socials?.length) {
       return null
     }
 
@@ -100,7 +100,7 @@ export class W3mSocialLoginWidget extends LitElement {
   }
 
   private bottomViewTemplate() {
-    if (!this.connector?.socials) {
+    if (!this.connector?.socials?.length) {
       return null
     }