thirdweb 5.44.1 → 5.45.0-nightly-bbb4f1c53f982b1f9de00fb30efbf2c77f155e96-20240809000532

package/src/react/web/ui/ConnectWallet/screens/LinkedProfilesScreen.tsx

@@ -0,0 +1,119 @@
+"use client";
+import type { ThirdwebClient } from "../../../../../client/client.js";
+import { shortenAddress } from "../../../../../utils/address.js";
+import type { Profile } from "../../../../../wallets/in-app/core/authentication/types.js";
+import { fontSize, iconSize } from "../../../../core/design-system/index.js";
+import { useProfiles } from "../../../../core/hooks/others/useProfiles.js";
+import { getWalletIcon } from "../../../../core/utils/walletIcon.js";
+import { LoadingScreen } from "../../../wallets/shared/LoadingScreen.js";
+import { Img } from "../../components/Img.js";
+import { Spacer } from "../../components/Spacer.js";
+import { Container, Line, ModalHeader } from "../../components/basic.js";
+import { Text } from "../../components/text.js";
+import { MenuButton } from "../MenuButton.js";
+import { AddUserIcon } from "../icons/AddUserIcon.js";
+import type { ConnectLocale } from "../locale/types.js";
+import type { WalletDetailsModalScreen } from "./types.js";
+
+function getProfileDisplayName(profile: Profile) {
+  switch (true) {
+    case profile.type === "email" && profile.details.email !== undefined:
+      return profile.details.email;
+    case profile.type === "google" && profile.details.email !== undefined:
+      return profile.details.email;
+    case profile.type === "phone" && profile.details.phone !== undefined:
+      return profile.details.phone;
+    case profile.details.address !== undefined:
+      return shortenAddress(profile.details.address, 6);
+    case (profile.type as string) === "cognito" &&
+      profile.details.email !== undefined:
+      return profile.details.email;
+    default:
+      return profile.type.slice(0, 1).toUpperCase() + profile.type.slice(1);
+  }
+}
+
+/**
+ * @internal
+ */
+export function LinkedProfilesScreen(props: {
+  onBack: () => void;
+  setScreen: (screen: WalletDetailsModalScreen) => void;
+  locale: ConnectLocale;
+  client: ThirdwebClient;
+}) {
+  const { data: connectedProfiles, isLoading } = useProfiles();
+
+  if (isLoading) {
+    return <LoadingScreen />;
+  }
+
+  return (
+    <Container
+      style={{
+        minHeight: "300px",
+      }}
+    >
+      <Container p="lg">
+        <ModalHeader
+          title={props.locale.manageWallet.linkedProfiles}
+          onBack={props.onBack}
+        />
+      </Container>
+      <Line />
+      {isLoading ? (
+        <LoadingScreen />
+      ) : (
+        <Container
+          scrollY
+          style={{
+            height: "300px",
+          }}
+        >
+          <Spacer y="md" />
+          <Container px="sm">
+            <MenuButton
+              onClick={() => {
+                props.setScreen("link-profile");
+              }}
+              style={{
+                fontSize: fontSize.sm,
+              }}
+            >
+              <AddUserIcon size={iconSize.md} />
+              <Text color="primaryText">
+                {props.locale.manageWallet.linkProfile}
+              </Text>
+            </MenuButton>
+            <Spacer y="xs" />
+            {connectedProfiles?.map((profile) => (
+              <MenuButton
+                key={`${profile.type}-${getProfileDisplayName(profile)}`}
+                onClick={() => {
+                  props.setScreen("linked-profiles");
+                }}
+                style={{
+                  fontSize: fontSize.sm,
+                  cursor: "default",
+                }}
+                disabled // disabled until we have more data to show on a dedicated profile screen
+              >
+                <Img
+                  src={getWalletIcon(profile.type)}
+                  width={iconSize.md}
+                  height={iconSize.md}
+                  loading="eager"
+                  client={props.client}
+                />
+                <Text color="primaryText">
+                  {getProfileDisplayName(profile)}
+                </Text>
+              </MenuButton>
+            ))}
+          </Container>
+          <Spacer y="md" />
+        </Container>
+      )}
+    </Container>
+  );
+}

package/src/react/web/ui/ConnectWallet/screens/ManageWalletScreen.tsx

@@ -1,7 +1,6 @@
 "use client";
 import { ShuffleIcon } from "@radix-ui/react-icons";
 import type { ThirdwebClient } from "../../../../../client/client.js";
-import { isEcosystemWallet } from "../../../../../wallets/ecosystem/is-ecosystem-wallet.js";
 import { isInAppWallet } from "../../../../../wallets/in-app/core/wallet/index.js";
 import { injectedProvider } from "../../../../../wallets/injected/mipdStore.js";
 import { fontSize, iconSize } from "../../../../core/design-system/index.js";
@@ -11,6 +10,7 @@ import { Container, Line, ModalHeader } from "../../components/basic.js";
 import { Text } from "../../components/text.js";
 import { MenuButton } from "../MenuButton.js";
 import { KeyIcon } from "../icons/KeyIcon.js";
+import { MultiUserIcon } from "../icons/MultiUserIcon.js";
 import { WalletConnectIcon } from "../icons/WalletConnectIcon.js";
 import type { ConnectLocale } from "../locale/types.js";
 import type { WalletDetailsModalScreen } from "./types.js";
@@ -55,6 +55,23 @@ export function ManageWalletScreen(props: {
             connectLocale={props.locale}
           />
 
+          {/* Multi-auth */}
+          {activeWallet?.id === "inApp" && (
+            <MenuButton
+              onClick={() => {
+                props.setScreen("linked-profiles");
+              }}
+              style={{
+                fontSize: fontSize.sm,
+              }}
+            >
+              <MultiUserIcon size={iconSize.md} />
+              <Text color="primaryText">
+                {props.locale.manageWallet.linkedProfiles}
+              </Text>
+            </MenuButton>
+          )}
+
           {/* Wallet Connect Receiver */}
           <MenuButton
             onClick={() => {
@@ -72,9 +89,8 @@ export function ManageWalletScreen(props: {
 
           {/* Private Key Export (if enabled) */}
           {activeWallet &&
-            ((isInAppWallet(activeWallet) &&
-              !activeWallet.getConfig()?.hidePrivateKeyExport) ||
-              isEcosystemWallet(activeWallet)) && (
+            isInAppWallet(activeWallet) &&
+            !activeWallet.getConfig()?.hidePrivateKeyExport && (
               <MenuButton
                 onClick={() => {
                   props.setScreen("private-key");

package/src/react/web/ui/ConnectWallet/screens/types.ts

@@ -73,4 +73,6 @@ export type WalletDetailsModalScreen =
   | "private-key"
   | "manage-wallet"
   | "wallet-connect-receiver"
-  | "wallet-manager";
+  | "wallet-manager"
+  | "link-profile"
+  | "linked-profiles";

package/src/react/web/ui/PayEmbed.tsx

@@ -1,8 +1,7 @@
 "use client";
 
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import type { Chain } from "../../../chains/types.js";
-import { cacheChains } from "../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../client/client.js";
 import type { Wallet } from "../../../wallets/interfaces/wallet.js";
 import type { SmartWalletOptions } from "../../../wallets/smart/types.js";
@@ -14,6 +13,7 @@ import type {
   ConnectButton_connectModalOptions,
   PayUIOptions,
 } from "../../core/hooks/connection/ConnectButtonProps.js";
+import { useConnectionManager } from "../../core/providers/connection-manager.js";
 import type { SupportedTokens } from "../../core/utils/defaultTokens.js";
 import { EmbedContainer } from "./ConnectWallet/Modal/ConnectEmbed.js";
 import { useConnectLocale } from "./ConnectWallet/locale/getConnectLocale.js";
@@ -156,15 +156,20 @@ export function PayEmbed(props: PayEmbedProps) {
   const localeQuery = useConnectLocale(props.locale || "en_US");
   const [screen, setScreen] = useState<"buy" | "execute-tx">("buy");
   const theme = props.theme || "dark";
+  const connectionManager = useConnectionManager();
 
-  // to update cached chains ASAP, we skip using useEffect - this does not trigger a re-render so it's fine
-  if (props.connectOptions?.chains) {
-    cacheChains(props.connectOptions?.chains);
-  }
+  // Add props.chain and props.chains to defined chains store
+  useEffect(() => {
+    if (props.connectOptions?.chain) {
+      connectionManager.defineChains([props.connectOptions?.chain]);
+    }
+  }, [props.connectOptions?.chain, connectionManager]);
 
-  if (props.connectOptions?.chain) {
-    cacheChains([props.connectOptions?.chain]);
-  }
+  useEffect(() => {
+    if (props.connectOptions?.chains) {
+      connectionManager.defineChains(props.connectOptions?.chains);
+    }
+  }, [props.connectOptions?.chains, connectionManager]);
 
   let content = null;
   const metadata =

package/src/react/web/ui/components/Spinner.tsx

@@ -27,7 +27,7 @@ export const Spinner: React.FC<{
         r="20"
         fill="none"
         stroke={theme.colors[props.color]}
-        strokeWidth="4"
+        strokeWidth={Number(iconSize[props.size]) > 64 ? "2" : "4"}
       />
     </Svg>
   );

package/src/react/web/ui/components/TokenIcon.tsx

@@ -5,7 +5,7 @@ import type { ThirdwebClient } from "../../../../client/client.js";
 import { NATIVE_TOKEN_ADDRESS } from "../../../../constants/addresses.js";
 import { iconSize } from "../../../core/design-system/index.js";
 import { useChainIconUrl } from "../../../core/hooks/others/useChainQuery.js";
-import { genericTokenIcon } from "../../../core/utils/socialIcons.js";
+import { genericTokenIcon } from "../../../core/utils/walletIcon.js";
 import {
   type NativeToken,
   isNativeToken,

package/src/react/web/ui/components/WalletImage.tsx

@@ -8,20 +8,12 @@ import { getStoredActiveWalletId } from "../../../../wallets/manager/index.js";
 import type { WalletId } from "../../../../wallets/wallet-types.js";
 import { radius } from "../../../core/design-system/index.js";
 import { useActiveWallet } from "../../../core/hooks/wallets/useActiveWallet.js";
-import {
-  appleIconUri,
-  discordIconUri,
-  emailIcon,
-  facebookIconUri,
-  farcasterIconUri,
-  genericWalletIcon,
-  googleIconUri,
-  passkeyIcon,
-  phoneIcon,
-  telegramIconUri,
-} from "../../../core/utils/socialIcons.js";
 import { getLastAuthProvider } from "../../../core/utils/storage.js";
 import { useWalletImage } from "../../../core/utils/wallet.js";
+import {
+  genericWalletIcon,
+  getWalletIcon,
+} from "../../../core/utils/walletIcon.js";
 import { Img } from "./Img.js";
 
 /**
@@ -57,35 +49,9 @@ export function WalletImage(props: {
       ) {
         // when showing an active wallet icon - check last auth provider and override the IAW icon
         const lastAuthProvider = await getLastAuthProvider(storage);
-        switch (lastAuthProvider) {
-          case "google":
-            image = googleIconUri;
-            break;
-          case "apple":
-            image = appleIconUri;
-            break;
-          case "facebook":
-            image = facebookIconUri;
-            break;
-          case "phone":
-            image = phoneIcon;
-            break;
-          case "email":
-            image = emailIcon;
-            break;
-          case "passkey":
-            image = passkeyIcon;
-            break;
-          case "discord":
-            image = discordIconUri;
-            break;
-          case "farcaster":
-            image = farcasterIconUri;
-            break;
-          case "telegram":
-            image = telegramIconUri;
-            break;
-        }
+        image = lastAuthProvider
+          ? getWalletIcon(lastAuthProvider)
+          : genericWalletIcon;
       } else {
         const mipdImage = getInstalledWalletProviders().find(
           (x) => x.info.rdns === activeEOAId,

package/src/react/web/wallets/ecosystem/EcosystemWalletConnectUI.tsx

@@ -35,6 +35,7 @@ function EcosystemWalletConnectUI(props: {
     termsOfServiceUrl?: string;
     privacyPolicyUrl?: string;
   };
+  isLinking?: boolean;
 }) {
   const data = useSelectionData();
   const setSelectionData = useSetSelectionData();
@@ -53,6 +54,11 @@ function EcosystemWalletConnectUI(props: {
           setSelectionData({});
         };
 
+  const done = () => {
+    props.done();
+    setSelectionData({});
+  };
+
   const otpUserInfo = state?.emailLogin
     ? { email: state.emailLogin }
     : state?.phoneLogin
@@ -64,12 +70,13 @@ function EcosystemWalletConnectUI(props: {
       <OTPLoginUI
         userInfo={otpUserInfo}
         locale={locale}
-        done={props.done}
+        done={done}
         goBack={goBackToMain}
         wallet={props.wallet}
         chain={props.chain}
         client={props.client}
         size={props.size}
+        isLinking={props.isLinking}
       />
     );
   }
@@ -77,12 +84,14 @@ function EcosystemWalletConnectUI(props: {
   if (state?.passkeyLogin) {
     return (
       <PassKeyLogin
+        locale={props.connectLocale}
         wallet={props.wallet}
-        done={props.done}
+        done={done}
         onBack={goBackToMain}
         chain={props.chain}
         client={props.client}
         size={props.size}
+        isLinking={props.isLinking}
       />
     );
   }
@@ -92,13 +101,15 @@ function EcosystemWalletConnectUI(props: {
       <SocialLogin
         socialAuth={state.socialLogin.type}
         locale={locale}
-        done={props.done}
+        done={done}
         goBack={goBackToMain}
         wallet={props.wallet}
         state={state}
         chain={props.chain}
         client={props.client}
         size={props.size}
+        connectLocale={props.connectLocale}
+        isLinking={props.isLinking}
       />
     );
   }
@@ -107,7 +118,7 @@ function EcosystemWalletConnectUI(props: {
     <EcosystemWalletFormUIScreen
       select={() => {}}
       locale={locale}
-      done={props.done}
+      done={done}
       goBack={props.goBack}
       wallet={props.wallet}
       chain={props.chain}
@@ -115,6 +126,7 @@ function EcosystemWalletConnectUI(props: {
       size={props.size}
       connectLocale={props.connectLocale}
       meta={props.meta}
+      isLinking={props.isLinking}
     />
   );
 }

package/src/react/web/wallets/ecosystem/EcosystemWalletFormUI.tsx

@@ -8,7 +8,7 @@ import { useScreenContext } from "../../ui/ConnectWallet/Modal/screen.js";
 import { PoweredByThirdweb } from "../../ui/ConnectWallet/PoweredByTW.js";
 import type { ConnectLocale } from "../../ui/ConnectWallet/locale/types.js";
 import { Spacer } from "../../ui/components/Spacer.js";
-import { Container } from "../../ui/components/basic.js";
+import { Container, ModalHeader } from "../../ui/components/basic.js";
 import { ConnectWalletSocialOptions } from "../shared/ConnectWalletSocialOptions.js";
 import type { InAppWalletLocale } from "../shared/locale/types.js";
 import { EcosystemWalletHeader } from "./EcosystemWalletHeader.js";
@@ -30,6 +30,7 @@ export type EcosystemWalletFormUIProps = {
   client: ThirdwebClient;
   chain: Chain | undefined;
   connectLocale: ConnectLocale;
+  isLinking?: boolean;
 };
 
 /**
@@ -54,11 +55,18 @@ export function EcosystemWalletFormUIScreen(props: EcosystemWalletFormUIProps) {
         minHeight: "250px",
       }}
     >
-      <EcosystemWalletHeader
-        client={props.client}
-        onBack={isCompact ? onBack : undefined}
-        wallet={props.wallet}
-      />
+      {props.isLinking ? (
+        <ModalHeader
+          title={props.connectLocale.manageWallet.linkProfile}
+          onBack={onBack}
+        />
+      ) : (
+        <EcosystemWalletHeader
+          client={props.client}
+          onBack={isCompact ? onBack : undefined}
+          wallet={props.wallet}
+        />
+      )}
       <Spacer y="lg" />
 
       <Container

package/src/react/web/wallets/in-app/InAppWalletConnectUI.tsx

@@ -25,7 +25,7 @@ function InAppWalletConnectUI(props: {
   done: () => void;
   goBack?: () => void;
   size: "compact" | "wide";
-  meta: {
+  meta?: {
     title?: string;
     titleIconUrl?: string;
     showThirdwebBranding?: boolean;
@@ -35,6 +35,7 @@ function InAppWalletConnectUI(props: {
   client: ThirdwebClient;
   chain: Chain | undefined;
   connectLocale: ConnectLocale;
+  isLinking?: boolean;
 }) {
   const data = useSelectionData();
   const setSelectionData = useSetSelectionData();
@@ -56,6 +57,11 @@ function InAppWalletConnectUI(props: {
         }
       : props.goBack;
 
+  const done = () => {
+    props.done();
+    setSelectionData({});
+  };
+
   const otpUserInfo = state?.emailLogin
     ? { email: state.emailLogin }
     : state?.phoneLogin
@@ -67,12 +73,13 @@ function InAppWalletConnectUI(props: {
       <OTPLoginUI
         userInfo={otpUserInfo}
         locale={locale}
-        done={props.done}
+        done={done}
         goBack={goBackToMain}
         wallet={props.wallet}
         chain={props.chain}
         client={props.client}
         size={props.size}
+        isLinking={props.isLinking}
       />
     );
   }
@@ -80,12 +87,14 @@ function InAppWalletConnectUI(props: {
   if (state?.passkeyLogin) {
     return (
       <PassKeyLogin
+        locale={props.connectLocale}
         wallet={props.wallet}
-        done={props.done}
+        done={done}
         onBack={goBackToMain}
         chain={props.chain}
         client={props.client}
         size={props.size}
+        isLinking={props.isLinking}
       />
     );
   }
@@ -95,13 +104,15 @@ function InAppWalletConnectUI(props: {
       <SocialLogin
         socialAuth={state.socialLogin.type}
         locale={locale}
-        done={props.done}
+        done={done}
         goBack={goBackToMain}
         wallet={props.wallet}
         state={state}
         chain={props.chain}
         client={props.client}
         size={props.size}
+        connectLocale={props.connectLocale}
+        isLinking={props.isLinking}
       />
     );
   }
@@ -111,13 +122,14 @@ function InAppWalletConnectUI(props: {
       select={() => {}}
       connectLocale={props.connectLocale}
       inAppWalletLocale={locale}
-      done={props.done}
+      done={done}
       goBack={props.goBack}
       wallet={props.wallet}
       client={props.client}
       meta={props.meta}
       size={props.size}
       chain={props.chain}
+      isLinking={props.isLinking}
     />
   );
 }

package/src/react/web/wallets/in-app/InAppWalletFormUI.tsx

@@ -22,7 +22,7 @@ export type InAppWalletFormUIProps = {
   wallet: Wallet<"inApp">;
   goBack?: () => void;
   size: "compact" | "wide";
-  meta: {
+  meta?: {
     title?: string;
     titleIconUrl?: string;
     showThirdwebBranding?: boolean;
@@ -31,6 +31,7 @@ export type InAppWalletFormUIProps = {
   };
   client: ThirdwebClient;
   chain: Chain | undefined;
+  isLinking?: boolean;
 };
 
 /**
@@ -43,7 +44,7 @@ export function InAppWalletFormUIScreen(props: InAppWalletFormUIProps) {
   const isInitialScreen =
     screen === props.wallet && initialScreen === props.wallet;
 
-  const onBack = isInitialScreen ? undefined : props.goBack;
+  const onBack = isInitialScreen && !props.isLinking ? undefined : props.goBack;
 
   return (
     <Container
@@ -60,19 +61,19 @@ export function InAppWalletFormUIScreen(props: InAppWalletFormUIProps) {
           <>
             <ModalHeader
               onBack={onBack}
-              leftAligned={true}
+              leftAligned={!props.isLinking}
               title={
                 <>
-                  {!props.meta.titleIconUrl ? null : (
+                  {!props.meta?.titleIconUrl ? null : (
                     <Img
-                      src={props.meta.titleIconUrl}
+                      src={props.meta?.titleIconUrl}
                       width={iconSize.md}
                       height={iconSize.md}
                       client={props.client}
                     />
                   )}
                   <ModalTitle>
-                    {props.meta.title ??
+                    {props.meta?.title ??
                       props.inAppWalletLocale.emailLoginScreen.title}
                   </ModalTitle>
                 </>
@@ -97,18 +98,18 @@ export function InAppWalletFormUIScreen(props: InAppWalletFormUIProps) {
       </Container>
 
       {isCompact &&
-        (props.meta.showThirdwebBranding !== false ||
-          props.meta.termsOfServiceUrl ||
-          props.meta.privacyPolicyUrl) && <Spacer y="xl" />}
+        (props.meta?.showThirdwebBranding !== false ||
+          props.meta?.termsOfServiceUrl ||
+          props.meta?.privacyPolicyUrl) && <Spacer y="xl" />}
 
       <Container flex="column" gap="lg">
         <TOS
-          termsOfServiceUrl={props.meta.termsOfServiceUrl}
-          privacyPolicyUrl={props.meta.privacyPolicyUrl}
+          termsOfServiceUrl={props.meta?.termsOfServiceUrl}
+          privacyPolicyUrl={props.meta?.privacyPolicyUrl}
           locale={props.connectLocale.agreement}
         />
 
-        {props.meta.showThirdwebBranding !== false && <PoweredByThirdweb />}
+        {props.meta?.showThirdwebBranding !== false && <PoweredByThirdweb />}
       </Container>
     </Container>
   );

package/src/react/web/wallets/shared/ConnectWalletSocialOptions.tsx

@@ -7,6 +7,8 @@ import type { ThirdwebClient } from "../../../../client/client.js";
 import { webLocalStorage } from "../../../../utils/storage/webStorage.js";
 import { getEcosystemWalletAuthOptions } from "../../../../wallets/ecosystem/get-ecosystem-wallet-auth-options.js";
 import { isEcosystemWallet } from "../../../../wallets/ecosystem/is-ecosystem-wallet.js";
+import type { Profile } from "../../../../wallets/in-app/core/authentication/types.js";
+import { linkProfile } from "../../../../wallets/in-app/core/wallet/profiles.js";
 import { loginWithOauthRedirect } from "../../../../wallets/in-app/web/lib/auth/oauth.js";
 import type { Account, Wallet } from "../../../../wallets/interfaces/wallet.js";
 import {
@@ -21,13 +23,13 @@ import {
   iconSize,
   spacing,
 } from "../../../core/design-system/index.js";
+import { setLastAuthProvider } from "../../../core/utils/storage.js";
 import {
   emailIcon,
   passkeyIcon,
   phoneIcon,
   socialIcons,
-} from "../../../core/utils/socialIcons.js";
-import { setLastAuthProvider } from "../../../core/utils/storage.js";
+} from "../../../core/utils/walletIcon.js";
 import { useSetSelectionData } from "../../providers/wallet-ui-states-provider.js";
 import { WalletTypeRowButton } from "../../ui/ConnectWallet/WalletTypeRowButton.js";
 import { Img } from "../../ui/components/Img.js";
@@ -47,7 +49,7 @@ export type ConnectWalletSelectUIState =
       phoneLogin?: string;
       socialLogin?: {
         type: SocialAuthOption;
-        connectionPromise: Promise<Account>;
+        connectionPromise: Promise<Account | Profile[]>;
       };
       passkeyLogin?: boolean;
     };
@@ -70,6 +72,7 @@ export type ConnectWalletSocialOptionsProps = {
   chain: Chain | undefined;
   client: ThirdwebClient;
   size: "compact" | "wide";
+  isLinking?: boolean;
 };
 
 /**
@@ -171,7 +174,8 @@ export const ConnectWalletSocialOptions = (
     if (
       walletConfig &&
       "auth" in walletConfig &&
-      walletConfig?.auth?.mode === "redirect"
+      walletConfig?.auth?.mode === "redirect" &&
+      !props.isLinking // We do not support redirects for linking
     ) {
       return loginWithOauthRedirect({
         authOption: strategy,
@@ -200,17 +204,18 @@ export const ConnectWalletSocialOptions = (
         },
       };
 
-      const connectPromise = isEcosystemWallet(wallet)
-        ? wallet.connect({
-            ...connectOptions,
-            ecosystem: {
-              id: wallet.id,
-              partnerId: wallet.getConfig()?.partnerId,
-            },
-          })
-        : wallet.connect(connectOptions);
-
-      await setLastAuthProvider(strategy, webLocalStorage);
+      const connectPromise = (() => {
+        if (props.isLinking) {
+          if (wallet.id !== "inApp") {
+            throw new Error("Only in-app wallets support multi-auth");
+          }
+          return linkProfile(wallet, connectOptions);
+        } else {
+          const connectPromise = wallet.connect(connectOptions);
+          setLastAuthProvider(strategy, webLocalStorage);
+          return connectPromise;
+        }
+      })();
 
       setData({
         socialLogin: {