fix: email 'or' line separator not showing after disabling social log…

…ins (#2977)
reown-com · Oct 3, 2024 · d45545d · d45545d
1 parent a649a1c
commit d45545d
Show file tree

Hide file tree

Showing 8 changed files with 62 additions and 6 deletions.
diff --git a/.changeset/good-months-grin.md b/.changeset/good-months-grin.md
@@ -0,0 +1,38 @@
+---
+'@reown/appkit-scaffold-ui': patch
+'@apps/laboratory': patch
+'@apps/demo': patch
+'@apps/gallery': patch
+'@examples/html-ethers': patch
+'@examples/html-ethers5': patch
+'@examples/html-wagmi': patch
+'@examples/next-ethers': patch
+'@examples/next-wagmi': patch
+'@examples/react-ethers': patch
+'@examples/react-ethers5': patch
+'@examples/react-solana': patch
+'@examples/react-wagmi': patch
+'@examples/vue-ethers5': patch
+'@examples/vue-solana': patch
+'@examples/vue-wagmi': 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-ethers': patch
+'@reown/appkit-ethers5': patch
+'@reown/appkit-polyfills': patch
+'@reown/appkit-siwe': patch
+'@reown/appkit-solana': patch
+'@reown/appkit-ui': patch
+'@reown/appkit-wagmi': patch
+'@reown/appkit-wallet': patch
+---
+
+Fixed an issue where email line separator was not showing when social logins were disabled and `emailShowWallets` was set to false.
diff --git a/apps/laboratory/src/pages/library/ethers-no-socials.tsx b/apps/laboratory/src/pages/library/ethers-no-socials.tsx
@@ -19,7 +19,8 @@ const modal = createAppKit({
   projectId: ConstantsUtil.ProjectId,
   features: {
     analytics: true,
-    socials: []
+    socials: [],
+    emailShowWallets: false
   },
   siweConfig
 })

diff --git a/apps/laboratory/src/pages/library/ethers5-no-socials.tsx b/apps/laboratory/src/pages/library/ethers5-no-socials.tsx
@@ -20,7 +20,8 @@ const modal = createAppKit({
   projectId: ConstantsUtil.ProjectId,
   features: {
     analytics: true,
-    socials: []
+    socials: [],
+    emailShowWallets: false
   },
   siweConfig
 })

diff --git a/apps/laboratory/src/pages/library/solana-no-socials.tsx b/apps/laboratory/src/pages/library/solana-no-socials.tsx
@@ -21,7 +21,8 @@ const modal = createAppKit({
   projectId: ConstantsUtil.ProjectId,
   metadata: ConstantsUtil.Metadata,
   features: {
-    socials: []
+    socials: [],
+    emailShowWallets: false
   }
 })
 

diff --git a/apps/laboratory/src/pages/library/wagmi-no-socials.tsx b/apps/laboratory/src/pages/library/wagmi-no-socials.tsx
@@ -26,7 +26,8 @@ const modal = createAppKit({
   projectId: ConstantsUtil.ProjectId,
   features: {
     analytics: true,
-    socials: []
+    socials: [],
+    emailShowWallets: false
   }
 })
 

diff --git a/apps/laboratory/tests/no-socials.spec.ts b/apps/laboratory/tests/no-socials.spec.ts
@@ -35,3 +35,7 @@ noSocialsTest('should not display any socials', async () => {
 noSocialsTest('should show email login', async () => {
   await modalValidator.expectEmailLogin()
 })
+
+noSocialsTest('should show "or" line separator under email field', async () => {
+  await modalValidator.expectEmailLineSeparator()
+})
diff --git a/apps/laboratory/tests/shared/validators/ModalValidator.ts b/apps/laboratory/tests/shared/validators/ModalValidator.ts
@@ -152,6 +152,11 @@ export class ModalValidator {
     await expect(emailInput).toBeVisible()
   }
 
+  async expectEmailLineSeparator() {
+    const emailInput = this.page.getByTestId('w3m-email-login-or-separator')
+    await 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-email-login-widget/index.ts b/packages/scaffold-ui/src/partials/w3m-email-login-widget/index.ts
@@ -104,8 +104,10 @@ export class W3mEmailLoginWidget extends LitElement {
     const socials = OptionsController.state.features?.socials
     const multipleConnectors = this.connectors.length > 1
     const enableWallets = OptionsController.state.enableWallets
+    const emailShowWallets = OptionsController.state.features?.emailShowWallets
 
-    const hideSeparator = socials || !multipleConnectors || !enableWallets
+    const hideSeparator =
+      (socials && socials.length) || emailShowWallets || !multipleConnectors || !enableWallets
 
     if (hideSeparator && this.walletGuide === 'get-started') {
       return null
@@ -116,7 +118,10 @@ export class W3mEmailLoginWidget extends LitElement {
     }
 
     return html`
-      <wui-flex .padding=${['xxs', '0', '0', '0'] as const}>
+      <wui-flex
+        data-testid="w3m-email-login-or-separator"
+        .padding=${['xxs', '0', '0', '0'] as const}
+      >
         <wui-separator text="or"></wui-separator>
       </wui-flex>
     `