From 1408521348fc71adc8f2bb89483714c16f0a5b5d Mon Sep 17 00:00:00 2001
From: schmanu <manu@safe.global>
Date: Wed, 1 Nov 2023 18:24:20 +0100
Subject: [PATCH] fix: login error handling

---
 src/components/common/SocialSigner/index.tsx | 54 +++++++++++---------
 src/services/exceptions/ErrorCodes.ts        |  1 +
 src/services/mpc/SocialWalletService.ts      |  7 +--
 3 files changed, 36 insertions(+), 26 deletions(-)

diff --git a/src/components/common/SocialSigner/index.tsx b/src/components/common/SocialSigner/index.tsx
index 8b14e58160..bbd3c06c67 100644
--- a/src/components/common/SocialSigner/index.tsx
+++ b/src/components/common/SocialSigner/index.tsx
@@ -18,6 +18,8 @@ import { TxModalContext } from '@/components/tx-flow'
 import { COREKIT_STATUS } from '@web3auth/mpc-core-kit'
 import useSocialWallet from '@/hooks/wallets/mpc/useSocialWallet'
 import madProps from '@/utils/mad-props'
+import { asError } from '@/services/exceptions/utils'
+import ErrorMessage from '@/components/tx/ErrorMessage'
 
 export const _getSupportedChains = (chains: ChainInfo[]) => {
   return chains
@@ -54,6 +56,7 @@ export const SocialSigner = ({
   onLogin,
 }: SocialSignerLoginProps) => {
   const [loginPending, setLoginPending] = useState<boolean>(false)
+  const [loginError, setLoginError] = useState<string | undefined>(undefined)
   const { setTxFlow } = useContext(TxModalContext)
   const userInfo = socialWalletService?.getUserInfo()
   const isDisabled = loginPending || !isMPCLoginEnabled
@@ -76,39 +79,44 @@ export const SocialSigner = ({
     if (!socialWalletService) return
 
     setLoginPending(true)
+    setLoginError(undefined)
+    try {
+      const status = await socialWalletService.loginAndCreate()
 
-    const status = await socialWalletService.loginAndCreate()
+      if (status === COREKIT_STATUS.LOGGED_IN) {
+        onLogin?.()
+        setLoginPending(false)
+        return
+      }
 
-    if (status === COREKIT_STATUS.LOGGED_IN) {
-      onLogin?.()
+      if (status === COREKIT_STATUS.REQUIRED_SHARE) {
+        setTxFlow(
+          <PasswordRecovery
+            recoverFactorWithPassword={recoverPassword}
+            onSuccess={() => {
+              onLogin?.()
+              setLoginPending(false)
+            }}
+          />,
+          () => {},
+          false,
+        )
+        return
+      }
+    } catch (err) {
+      const error = asError(err)
+      setLoginError(error.message)
+    } finally {
       setLoginPending(false)
-      return
     }
-
-    if (status === COREKIT_STATUS.REQUIRED_SHARE) {
-      setTxFlow(
-        <PasswordRecovery
-          recoverFactorWithPassword={recoverPassword}
-          onSuccess={() => {
-            onLogin?.()
-            setLoginPending(false)
-          }}
-        />,
-        () => {},
-        false,
-      )
-      return
-    }
-
-    // TODO: Show error if login fails
-    setLoginPending(false)
   }
 
   const isSocialLogin = isSocialLoginWallet(wallet?.label)
 
   return (
     <>
-      <Box sx={{ width: '100%' }}>
+      <Box display="flex" flexDirection="column" gap={2} sx={{ width: '100%' }}>
+        {loginError && <ErrorMessage className={css.loginError}>{loginError}</ErrorMessage>}
         {isSocialLogin && userInfo ? (
           <Track {...CREATE_SAFE_EVENTS.CONTINUE_TO_CREATION}>
             <Button
diff --git a/src/services/exceptions/ErrorCodes.ts b/src/services/exceptions/ErrorCodes.ts
index 4394b1514c..75417b09dd 100644
--- a/src/services/exceptions/ErrorCodes.ts
+++ b/src/services/exceptions/ErrorCodes.ts
@@ -18,6 +18,7 @@ enum ErrorCodes {
   _303 = '303: Error creating pairing session',
   _304 = '304: Error enabling MFA',
   _305 = '305: Error exporting account key',
+  _306 = '306: Error logging in',
 
   _400 = '400: Error requesting browser notification permissions',
   _401 = '401: Error tracking push notifications',
diff --git a/src/services/mpc/SocialWalletService.ts b/src/services/mpc/SocialWalletService.ts
index d6972115de..569145d5ad 100644
--- a/src/services/mpc/SocialWalletService.ts
+++ b/src/services/mpc/SocialWalletService.ts
@@ -95,9 +95,10 @@ class SocialWalletService implements ISocialWalletService {
 
       await this.finalizeLogin()
       return this.mpcCoreKit.status
-    } catch (error) {
-      console.error(error)
-      return this.mpcCoreKit.status
+    } catch (err) {
+      const error = asError(err)
+      logError(ErrorCodes._306, error)
+      throw new Error('Error while logging in to your account or creating your Social signer wallet')
     }
   }