diff --git a/apps/laboratory/package.json b/apps/laboratory/package.json index 255934ad6e..ab067aee8a 100644 --- a/apps/laboratory/package.json +++ b/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", diff --git a/apps/laboratory/src/pages/library/ethers-no-socials.tsx b/apps/laboratory/src/pages/library/ethers-no-socials.tsx new file mode 100644 index 0000000000..2fd4689a55 --- /dev/null +++ b/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 ( + <> + + + + + ) +} diff --git a/apps/laboratory/src/pages/library/ethers5-no-socials.tsx b/apps/laboratory/src/pages/library/ethers5-no-socials.tsx new file mode 100644 index 0000000000..8b90886600 --- /dev/null +++ b/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 ( + <> + + + + + + ) +} diff --git a/apps/laboratory/src/pages/library/solana-no-socials.tsx b/apps/laboratory/src/pages/library/solana-no-socials.tsx new file mode 100644 index 0000000000..49de15a2d2 --- /dev/null +++ b/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 ( + <> + + + + ) +} diff --git a/apps/laboratory/src/pages/library/wagmi-no-socials.tsx b/apps/laboratory/src/pages/library/wagmi-no-socials.tsx new file mode 100644 index 0000000000..e5dc8e07f4 --- /dev/null +++ b/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 ( + + + + + + + + ) +} diff --git a/apps/laboratory/src/utils/DataUtil.ts b/apps/laboratory/src/utils/DataUtil.ts index 4a66e75da0..786d658ca0 100644 --- a/apps/laboratory/src/utils/DataUtil.ts +++ b/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' } ] diff --git a/apps/laboratory/tests/no-socials.spec.ts b/apps/laboratory/tests/no-socials.spec.ts new file mode 100644 index 0000000000..febab40649 --- /dev/null +++ b/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() +}) diff --git a/apps/laboratory/tests/shared/pages/ModalPage.ts b/apps/laboratory/tests/shared/pages/ModalPage.ts index d371c97b58..05c1567997 100644 --- a/apps/laboratory/tests/shared/pages/ModalPage.ts +++ b/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 diff --git a/apps/laboratory/tests/shared/validators/ModalValidator.ts b/apps/laboratory/tests/shared/validators/ModalValidator.ts index 5b3b545518..dff8b726ff 100644 --- a/apps/laboratory/tests/shared/validators/ModalValidator.ts +++ b/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, diff --git a/packages/scaffold-ui/src/partials/w3m-social-login-widget/index.ts b/packages/scaffold-ui/src/partials/w3m-social-login-widget/index.ts index 7511390832..513574388f 100644 --- a/packages/scaffold-ui/src/partials/w3m-social-login-widget/index.ts +++ b/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 }