From cde6b41078bc7f151b494a09fa025c469268fd5c Mon Sep 17 00:00:00 2001
From: Sven <38101365+svenvoskamp@users.noreply.github.com>
Date: Mon, 3 Jun 2024 17:20:55 +0200
Subject: [PATCH] :fix social bug bash (#2353)

---
 .../src/pages/library/ethers-all.tsx          |  3 ++
 .../partials/w3m-account-auth-button/index.ts | 31 +++++++++++-----
 .../partials/w3m-social-login-widget/index.ts | 35 ++++++++++++++-----
 3 files changed, 52 insertions(+), 17 deletions(-)

diff --git a/apps/laboratory/src/pages/library/ethers-all.tsx b/apps/laboratory/src/pages/library/ethers-all.tsx
index 01ab65905a..7c1e1c1e89 100644
--- a/apps/laboratory/src/pages/library/ethers-all.tsx
+++ b/apps/laboratory/src/pages/library/ethers-all.tsx
@@ -13,6 +13,9 @@ const modal = createWeb3Modal({
     defaultChainId: 1,
     rpcUrl: 'https://cloudflare-eth.com',
     enableEmail: true,
+    auth: {
+      socials: ['google', 'x', 'discord', 'apple', 'github']
+    },
     coinbasePreference: 'smartWalletOnly'
   }),
   chains: EthersConstants.chains,
diff --git a/packages/scaffold/src/partials/w3m-account-auth-button/index.ts b/packages/scaffold/src/partials/w3m-account-auth-button/index.ts
index 5fb7d41cea..0394f70088 100644
--- a/packages/scaffold/src/partials/w3m-account-auth-button/index.ts
+++ b/packages/scaffold/src/partials/w3m-account-auth-button/index.ts
@@ -10,6 +10,11 @@ import {
 
 @customElement('w3m-account-auth-button')
 export class W3mAccountAuthButton extends LitElement {
+  // -- Members ------------------------------------------- //
+  private socialProvider = StorageUtil.getConnectedSocialProvider() as SocialProvider | null
+
+  private socialUsername = StorageUtil.getConnectedSocialUsername()
+
   // -- Render -------------------------------------------- //
   public override render() {
     const type = StorageUtil.getConnectedConnector()
@@ -22,23 +27,19 @@ export class W3mAccountAuthButton extends LitElement {
     }
     const email = authConnector.provider.getEmail() ?? ''
 
-    const socialProvider = StorageUtil.getConnectedSocialProvider() as SocialProvider | null
-
-    const socialUsername = StorageUtil.getConnectedSocialUsername()
-
     return html`
       <wui-list-item
         variant="icon"
         iconVariant="overlay"
-        icon=${socialProvider ?? 'mail'}
-        iconSize=${socialProvider ? 'xxl' : 'sm'}
+        icon=${this.socialProvider ?? 'mail'}
+        iconSize=${this.socialProvider ? 'xxl' : 'sm'}
         data-testid="w3m-account-email-update"
-        ?chevron=${!socialProvider}
+        ?chevron=${!this.socialProvider}
         @click=${() => {
-          this.onGoToUpdateEmail(email, socialProvider)
+          this.onGoToUpdateEmail(email, this.socialProvider)
         }}
       >
-        <wui-text variant="paragraph-500" color="fg-100">${socialUsername ?? email}</wui-text>
+        <wui-text variant="paragraph-500" color="fg-100">${this.getAuthName(email)}</wui-text>
       </wui-list-item>
     `
   }
@@ -49,6 +50,18 @@ export class W3mAccountAuthButton extends LitElement {
       RouterController.push('UpdateEmailWallet', { email })
     }
   }
+
+  private getAuthName(email: string) {
+    if (this.socialUsername) {
+      if (this.socialProvider === 'discord' && this.socialUsername.endsWith('0')) {
+        return this.socialUsername.slice(0, -1)
+      }
+
+      return this.socialUsername
+    }
+
+    return email.length > 30 ? `${email.slice(0, -3)}...` : email
+  }
 }
 
 declare global {
diff --git a/packages/scaffold/src/partials/w3m-social-login-widget/index.ts b/packages/scaffold/src/partials/w3m-social-login-widget/index.ts
index 7e1944bf66..13f53fe2f9 100644
--- a/packages/scaffold/src/partials/w3m-social-login-widget/index.ts
+++ b/packages/scaffold/src/partials/w3m-social-login-widget/index.ts
@@ -23,6 +23,10 @@ export class W3mSocialLoginWidget extends LitElement {
   // -- Members ------------------------------------------- //
   private unsubscribe: (() => void)[] = []
 
+  private desktopWindow?: Window | null
+
+  private mobileWindow?: Window | null
+
   // -- State & Properties -------------------------------- //
   @state() private connectors = ConnectorController.state.connectors
 
@@ -142,24 +146,39 @@ export class W3mSocialLoginWidget extends LitElement {
   }
 
   async onSocialClick(socialProvider?: SocialProvider) {
+    if (socialProvider) {
+      AccountController.setSocialProvider(socialProvider)
+    }
     const authConnector = ConnectorController.getAuthConnector()
+    if (CoreHelperUtil.isMobile()) {
+      this.mobileWindow = CoreHelperUtil.returnOpenHref(
+        '',
+        'popupWindow',
+        'width=600,height=800,scrollbars=yes'
+      )
+    }
+
     try {
       if (authConnector && socialProvider) {
         const { uri } = await authConnector.provider.getSocialRedirectUri({
           provider: socialProvider
         })
-        AccountController.setSocialProvider(socialProvider)
-        // Window.open doesn't work on ios withing an async function, wrapping it in a setTimeout fixes this
-        setTimeout(() => {
-          const newWindow = CoreHelperUtil.returnOpenHref(
+
+        if (!CoreHelperUtil.isMobile()) {
+          this.desktopWindow = CoreHelperUtil.returnOpenHref(
             uri,
             'popupWindow',
             'width=600,height=800,scrollbars=yes'
           )
-          if (newWindow) {
-            AccountController.setSocialWindow(newWindow)
-          }
-        })
+        }
+        if (this.desktopWindow && uri) {
+          AccountController.setSocialWindow(this.desktopWindow)
+        } else if (this.mobileWindow && uri) {
+          this.mobileWindow.location.href = uri
+          AccountController.setSocialWindow(this.mobileWindow)
+        } else {
+          throw new Error('Something went wrong')
+        }
 
         RouterController.push('ConnectingSocial')
       }