thirdweb 5.30.0-nightly-33777df88fb190c2af8ad25e4930040884996f1e-20240620000630 → 5.30.0-nightly-d320777eea5404f596aa39b2b49b5165d3e1959a-20240621000551

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

@@ -0,0 +1,95 @@
+"use client";
+import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
+import type { EcosystemWalletId } from "../../../../wallets/wallet-types.js";
+import { useConnectUI } from "../../../core/hooks/others/useWalletConnectionCtx.js";
+import {
+  useSelectionData,
+  useSetSelectionData,
+} from "../../providers/wallet-ui-states-provider.js";
+import { useConnectLocale } from "../in-app/useInAppWalletLocale.js";
+import type { ConnectWalletSelectUIState } from "../shared/ConnectWalletSocialOptions.js";
+import { LoadingScreen } from "../shared/LoadingScreen.js";
+import { OTPLoginUI } from "../shared/OTPLoginUI.js";
+import { PassKeyLogin } from "../shared/PassKeyLogin.js";
+import { SocialLogin } from "../shared/SocialLogin.js";
+import { EcosystemWalletFormUIScreen } from "./EcosystemWalletFormUI.js";
+
+/**
+ *
+ * @internal
+ */
+function EcosystemWalletConnectUI(props: {
+  wallet: Wallet<EcosystemWalletId>;
+  done: () => void;
+  goBack?: () => void;
+}) {
+  const data = useSelectionData();
+  const setSelectionData = useSetSelectionData();
+  const state = data as ConnectWalletSelectUIState;
+  const locale = useConnectLocale();
+  const { connectModal } = useConnectUI();
+
+  if (!locale) {
+    return <LoadingScreen />;
+  }
+
+  const goBackToMain =
+    connectModal.size === "compact"
+      ? props.goBack
+      : () => {
+          setSelectionData({});
+        };
+
+  const otpUserInfo = state?.emailLogin
+    ? { email: state.emailLogin }
+    : state?.phoneLogin
+      ? { phone: state.phoneLogin }
+      : undefined;
+
+  if (otpUserInfo) {
+    return (
+      <OTPLoginUI
+        userInfo={otpUserInfo}
+        locale={locale}
+        done={props.done}
+        goBack={goBackToMain}
+        wallet={props.wallet}
+      />
+    );
+  }
+
+  if (state?.passkeyLogin) {
+    return (
+      <PassKeyLogin
+        wallet={props.wallet}
+        done={props.done}
+        onBack={goBackToMain}
+      />
+    );
+  }
+
+  if (state?.socialLogin) {
+    return (
+      <SocialLogin
+        socialAuth={state.socialLogin.type}
+        locale={locale}
+        done={props.done}
+        goBack={goBackToMain}
+        wallet={props.wallet}
+        state={state}
+      />
+    );
+  }
+
+  return (
+    <EcosystemWalletFormUIScreen
+      select={() => {}}
+      locale={locale}
+      done={props.done}
+      goBack={props.goBack}
+      wallet={props.wallet}
+    />
+  );
+}
+
+export default EcosystemWalletConnectUI;

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

@@ -0,0 +1,80 @@
+"use client";
+import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
+import type { EcosystemWalletId } from "../../../../wallets/wallet-types.js";
+import { useConnectUI } from "../../../core/hooks/others/useWalletConnectionCtx.js";
+import { TOS } from "../../ui/ConnectWallet/Modal/TOS.js";
+import { useScreenContext } from "../../ui/ConnectWallet/Modal/screen.js";
+import { PoweredByThirdweb } from "../../ui/ConnectWallet/PoweredByTW.js";
+import { Spacer } from "../../ui/components/Spacer.js";
+import { Container } from "../../ui/components/basic.js";
+import { ConnectWalletSocialOptions } from "../shared/ConnectWalletSocialOptions.js";
+import type { ConnectLocale } from "../shared/locale/types.js";
+import { EcosystemWalletHeader } from "./EcosystemWalletHeader.js";
+
+export type EcosystemWalletFormUIProps = {
+  select: () => void;
+  done: () => void;
+  locale: ConnectLocale;
+  wallet: Wallet<EcosystemWalletId>;
+  goBack?: () => void;
+};
+
+/**
+ * @internal
+ */
+export function EcosystemWalletFormUIScreen(props: EcosystemWalletFormUIProps) {
+  const { client, connectModal } = useConnectUI();
+  const isCompact = connectModal.size === "compact";
+  const { initialScreen, screen } = useScreenContext();
+
+  const onBack =
+    screen === props.wallet && initialScreen === props.wallet
+      ? undefined
+      : props.goBack;
+
+  return (
+    <Container
+      fullHeight
+      flex="column"
+      p="lg"
+      animate="fadein"
+      style={{
+        minHeight: "250px",
+      }}
+    >
+      {isCompact ? (
+        <>
+          <EcosystemWalletHeader
+            client={client}
+            onBack={onBack}
+            wallet={props.wallet}
+          />
+          <Spacer y="lg" />
+        </>
+      ) : null}
+
+      <Container
+        expand
+        flex="column"
+        center="y"
+        p={isCompact ? undefined : "lg"}
+      >
+        <ConnectWalletSocialOptions {...props} />
+      </Container>
+
+      {isCompact &&
+        (connectModal.showThirdwebBranding !== false ||
+          connectModal.termsOfServiceUrl ||
+          connectModal.privacyPolicyUrl) && <Spacer y="xl" />}
+
+      <Container flex="column" gap="lg">
+        <TOS
+          termsOfServiceUrl={connectModal.termsOfServiceUrl}
+          privacyPolicyUrl={connectModal.privacyPolicyUrl}
+        />
+
+        {connectModal.showThirdwebBranding !== false && <PoweredByThirdweb />}
+      </Container>
+    </Container>
+  );
+}

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

@@ -0,0 +1,49 @@
+"use client";
+import type { ThirdwebClient } from "../../../../client/client.js";
+import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
+import type { EcosystemWalletId } from "../../../../wallets/wallet-types.js";
+import { iconSize, radius } from "../../../core/design-system/index.js";
+import { Img } from "../../ui/components/Img.js";
+import { Skeleton } from "../../ui/components/Skeleton.js";
+import { ModalHeader } from "../../ui/components/basic.js";
+import { ModalTitle } from "../../ui/components/modalElements.js";
+import { useWalletInfo } from "../../ui/hooks/useWalletInfo.js";
+
+/**
+ * @internal
+ */
+export function EcosystemWalletHeader(props: {
+  wallet: Wallet<EcosystemWalletId>;
+  client: ThirdwebClient;
+  onBack?: () => void;
+}) {
+  const walletInfo = useWalletInfo(props.wallet.id);
+
+  return (
+    <ModalHeader
+      onBack={props.onBack}
+      title={
+        <>
+          {walletInfo.isLoading ? (
+            <Skeleton height="24px" width="200px" />
+          ) : (
+            <>
+              {!walletInfo.data?.image_id ? null : (
+                <Img
+                  src={walletInfo.data?.image_id}
+                  style={{
+                    borderRadius: radius.sm,
+                  }}
+                  width={iconSize.md}
+                  height={iconSize.md}
+                  client={props.client}
+                />
+              )}
+              <ModalTitle>{walletInfo.data?.name}</ModalTitle>
+            </>
+          )}
+        </>
+      }
+    />
+  );
+}

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

@@ -86,7 +86,7 @@ const Option = /* @__PURE__ */ StyledOption(() => {
   };
 });
 
-const Select = /* @__PURE__ */ StyledSelect(() => {
+const Select = /* @__PURE__ */ StyledSelect((_) => {
   const theme = useCustomTheme();
   return {
     fontSize: fontSize.sm,

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

@@ -5,13 +5,13 @@ import {
   useSelectionData,
   useSetSelectionData,
 } from "../../providers/wallet-ui-states-provider.js";
+import type { ConnectWalletSelectUIState } from "../shared/ConnectWalletSocialOptions.js";
 import { LoadingScreen } from "../shared/LoadingScreen.js";
+import { OTPLoginUI } from "../shared/OTPLoginUI.js";
+import { PassKeyLogin } from "../shared/PassKeyLogin.js";
+import { SocialLogin } from "../shared/SocialLogin.js";
 import { InAppWalletFormUIScreen } from "./InAppWalletFormUI.js";
-import { InAppWalletOTPLoginUI } from "./InAppWalletOTPLoginUI.js";
-import { InAppWalletPassKeyLogin } from "./InAppWalletPassKeyLogin.js";
-import { InAppWalletSocialLogin } from "./InAppWalletSocialLogin.js";
-import type { InAppWalletSelectUIState } from "./types.js";
-import { useInAppWalletLocale } from "./useInAppWalletLocale.js";
+import { useConnectLocale } from "./useInAppWalletLocale.js";
 
 /**
  *
@@ -24,11 +24,11 @@ function InAppWalletConnectUI(props: {
 }) {
   const data = useSelectionData();
   const setSelectionData = useSetSelectionData();
-  const state = data as InAppWalletSelectUIState;
-  const localeQuery = useInAppWalletLocale();
+  const state = data as ConnectWalletSelectUIState;
+  const locale = useConnectLocale();
   const { connectModal } = useConnectUI();
 
-  if (!localeQuery.data) {
+  if (!locale) {
     return <LoadingScreen />;
   }
 
@@ -47,9 +47,9 @@ function InAppWalletConnectUI(props: {
 
   if (otpUserInfo) {
     return (
-      <InAppWalletOTPLoginUI
+      <OTPLoginUI
         userInfo={otpUserInfo}
-        locale={localeQuery.data}
+        locale={locale}
         done={props.done}
         goBack={goBackToMain}
         wallet={props.wallet}
@@ -59,7 +59,7 @@ function InAppWalletConnectUI(props: {
 
   if (state?.passkeyLogin) {
     return (
-      <InAppWalletPassKeyLogin
+      <PassKeyLogin
         wallet={props.wallet}
         done={props.done}
         onBack={goBackToMain}
@@ -69,9 +69,9 @@ function InAppWalletConnectUI(props: {
 
   if (state?.socialLogin) {
     return (
-      <InAppWalletSocialLogin
+      <SocialLogin
         socialAuth={state.socialLogin.type}
-        locale={localeQuery.data}
+        locale={locale}
         done={props.done}
         goBack={goBackToMain}
         wallet={props.wallet}
@@ -83,7 +83,7 @@ function InAppWalletConnectUI(props: {
   return (
     <InAppWalletFormUIScreen
       select={() => {}}
-      locale={localeQuery.data}
+      locale={locale}
       done={props.done}
       goBack={props.goBack}
       wallet={props.wallet}

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

@@ -1,338 +1,25 @@
 "use client";
-import styled from "@emotion/styled";
-import { useState } from "react";
-import { webLocalStorage } from "../../../../utils/storage/webStorage.js";
-import type {
-  InAppWalletAuth,
-  InAppWalletSocialAuth,
-} from "../../../../wallets/in-app/core/wallet/types.js";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
-import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
-import {
-  fontSize,
-  iconSize,
-  spacing,
-} from "../../../core/design-system/index.js";
+import { iconSize } from "../../../core/design-system/index.js";
 import { useConnectUI } from "../../../core/hooks/others/useWalletConnectionCtx.js";
-import { useSetSelectionData } from "../../providers/wallet-ui-states-provider.js";
 import { TOS } from "../../ui/ConnectWallet/Modal/TOS.js";
 import { useScreenContext } from "../../ui/ConnectWallet/Modal/screen.js";
 import { PoweredByThirdweb } from "../../ui/ConnectWallet/PoweredByTW.js";
-import { WalletTypeRowButton } from "../../ui/ConnectWallet/WalletTypeRowButton.js";
-import {
-  emailIcon,
-  passkeyIcon,
-  phoneIcon,
-} from "../../ui/ConnectWallet/icons/dataUris.js";
 import { Img } from "../../ui/components/Img.js";
 import { Spacer } from "../../ui/components/Spacer.js";
-import { TextDivider } from "../../ui/components/TextDivider.js";
 import { Container, ModalHeader } from "../../ui/components/basic.js";
-import { Button } from "../../ui/components/buttons.js";
 import { ModalTitle } from "../../ui/components/modalElements.js";
-import { InputSelectionUI } from "./InputSelectionUI.js";
-import type { InAppWalletLocale } from "./locale/types.js";
-import { openOauthSignInWindow } from "./openOauthSignInWindow.js";
-import { socialIcons } from "./socialIcons.js";
-import { setLastAuthProvider } from "./storage.js";
-import type { InAppWalletSelectUIState } from "./types.js";
-import { validateEmail } from "./validateEmail.js";
-
-const defaultAuthOptions: InAppWalletAuth[] = [
-  "email",
-  "phone",
-  "google",
-  "apple",
-  "facebook",
-  "passkey",
-];
+import { ConnectWalletSocialOptions } from "../shared/ConnectWalletSocialOptions.js";
+import type { ConnectLocale } from "../shared/locale/types.js";
 
 export type InAppWalletFormUIProps = {
   select: () => void;
-  locale: InAppWalletLocale;
+  locale: ConnectLocale;
   done: () => void;
   wallet: Wallet<"inApp">;
   goBack?: () => void;
 };
 
-/**
- * @internal
- */
-export const InAppWalletFormUI = (props: InAppWalletFormUIProps) => {
-  const locale = props.locale;
-  const { chain, client, connectModal } = useConnectUI();
-  const { wallet } = props;
-  const setData = useSetSelectionData() as (
-    value: InAppWalletSelectUIState,
-  ) => void;
-
-  const themeObj = useCustomTheme();
-
-  const loginMethodsLabel = {
-    google: locale.signInWithGoogle,
-    facebook: locale.signInWithFacebook,
-    apple: locale.signInWithApple,
-  };
-
-  const config = props.wallet.getConfig();
-  const authOptions = config?.auth?.options || defaultAuthOptions;
-  const passKeyEnabled = authOptions.includes("passkey");
-
-  const emailIndex = authOptions.indexOf("email");
-  const isEmailEnabled = emailIndex !== -1;
-  const phoneIndex = authOptions.indexOf("phone");
-  const isPhoneEnabled = phoneIndex !== -1;
-
-  const [inputMode, setInputMode] = useState<"email" | "phone" | "none">(() => {
-    if (isEmailEnabled && isPhoneEnabled) {
-      return emailIndex < phoneIndex ? "email" : "phone";
-    }
-    if (isEmailEnabled) {
-      return "email";
-    }
-    if (isPhoneEnabled) {
-      return "phone";
-    }
-    return "none";
-  });
-
-  const placeholder =
-    inputMode === "email" ? locale.emailPlaceholder : locale.phonePlaceholder;
-  const emptyErrorMessage =
-    inputMode === "email" ? locale.emailRequired : locale.phoneRequired;
-
-  let type = "text";
-  if (inputMode === "email") {
-    type = "email";
-  } else if (inputMode === "phone") {
-    type = "tel";
-  }
-
-  const socialLogins = authOptions.filter(
-    (x) => x === "google" || x === "apple" || x === "facebook",
-  ) as InAppWalletSocialAuth[];
-
-  const hasSocialLogins = socialLogins.length > 0;
-
-  // Need to trigger login on button click to avoid popup from being blocked
-  const handleSocialLogin = async (strategy: InAppWalletSocialAuth) => {
-    try {
-      const socialLoginWindow = openOauthSignInWindow(strategy, themeObj);
-      if (!socialLoginWindow) {
-        throw new Error("Failed to open login window");
-      }
-
-      const connectPromise = wallet.connect({
-        chain,
-        client,
-        strategy: strategy,
-        openedWindow: socialLoginWindow,
-        closeOpenedWindow: (openedWindow) => {
-          openedWindow.close();
-        },
-      });
-
-      await setLastAuthProvider(strategy, webLocalStorage);
-
-      setData({
-        socialLogin: {
-          type: strategy,
-          connectionPromise: connectPromise,
-        },
-      });
-
-      props.select(); // show Connect UI
-
-      // Note: do not call done() here, it will be called InAppWalletSocialLogin component
-      // we simply trigger the connect and save promise here - its resolution is handled in InAppWalletSocialLogin
-    } catch (e) {
-      console.error(`Error sign in with ${strategy}`, e);
-    }
-  };
-
-  function handlePassKeyLogin() {
-    setData({
-      passkeyLogin: true,
-    });
-    props.select();
-  }
-
-  const showOnlyIcons = socialLogins.length > 1;
-
-  if (
-    config?.metadata?.image &&
-    (!config.metadata.image.height || !config.metadata.image.width)
-  ) {
-    console.warn(
-      "Image is not properly configured. Please set height and width.",
-      config.metadata.image,
-    );
-  }
-
-  return (
-    <Container
-      flex="column"
-      gap="md"
-      style={{
-        position: "relative",
-      }}
-    >
-      {config?.metadata?.image && (
-        <Container flex="row" center="both">
-          <Img
-            loading="eager"
-            client={client}
-            style={{
-              maxHeight: "100px",
-              maxWidth: "300px",
-            }}
-            src={config.metadata.image.src}
-            alt={config.metadata.image.alt}
-            width={Math.min(
-              config.metadata.image.width ?? 300,
-              300,
-            )?.toString()}
-            height={Math.min(
-              config.metadata.image.height ?? 100,
-              100,
-            )?.toString()}
-          />
-        </Container>
-      )}
-
-      {/* Social Login */}
-      {hasSocialLogins && (
-        <Container
-          flex={showOnlyIcons ? "row" : "column"}
-          center="x"
-          gap="sm"
-          style={{
-            justifyContent: "space-between",
-          }}
-        >
-          {socialLogins.map((loginMethod) => {
-            const imgIconSize = showOnlyIcons ? iconSize.lg : iconSize.md;
-            return (
-              <SocialButton
-                aria-label={`Login with ${loginMethod}`}
-                data-variant={showOnlyIcons ? "icon" : "full"}
-                key={loginMethod}
-                variant={"outline"}
-                fullWidth={!showOnlyIcons}
-                onClick={() => {
-                  handleSocialLogin(loginMethod);
-                }}
-              >
-                <Img
-                  src={socialIcons[loginMethod]}
-                  width={imgIconSize}
-                  height={imgIconSize}
-                  client={client}
-                />
-                {!showOnlyIcons && loginMethodsLabel[loginMethod]}
-              </SocialButton>
-            );
-          })}
-        </Container>
-      )}
-
-      {connectModal.size === "wide" &&
-        hasSocialLogins &&
-        (isEmailEnabled || isPhoneEnabled) && <TextDivider text={locale.or} />}
-
-      {/* Email/Phone Login */}
-      {isEmailEnabled && (
-        <>
-          {inputMode === "email" ? (
-            <InputSelectionUI
-              type={type}
-              onSelect={(value) => {
-                setData({ emailLogin: value });
-                props.select();
-              }}
-              placeholder={placeholder}
-              name="email"
-              errorMessage={(input) => {
-                const isValidEmail = validateEmail(input.toLowerCase());
-                if (!isValidEmail) {
-                  return locale.invalidEmail;
-                }
-                return undefined;
-              }}
-              emptyErrorMessage={emptyErrorMessage}
-              submitButtonText={locale.submitEmail}
-            />
-          ) : (
-            <WalletTypeRowButton
-              client={client}
-              icon={emailIcon}
-              onClick={() => {
-                setInputMode("email");
-              }}
-              // TODO locale
-              title={"Email address"}
-            />
-          )}
-        </>
-      )}
-      {isPhoneEnabled && (
-        <>
-          {inputMode === "phone" ? (
-            <InputSelectionUI
-              format="phone"
-              type={type}
-              onSelect={(value) => {
-                // removes white spaces and special characters
-                setData({ phoneLogin: value.replace(/[-\(\) ]/g, "") });
-                props.select();
-              }}
-              placeholder={placeholder}
-              name="phone"
-              errorMessage={(_input) => {
-                // removes white spaces and special characters
-                const input = _input.replace(/[-\(\) ]/g, "");
-                const isPhone = /^[0-9]+$/.test(input);
-
-                if (!isPhone && isPhoneEnabled) {
-                  return locale.invalidPhone;
-                }
-
-                return undefined;
-              }}
-              emptyErrorMessage={emptyErrorMessage}
-              submitButtonText={locale.submitEmail}
-            />
-          ) : (
-            <WalletTypeRowButton
-              client={client}
-              icon={phoneIcon}
-              onClick={() => {
-                setInputMode("phone");
-              }}
-              // TODO locale
-              title={"Phone number"}
-            />
-          )}
-        </>
-      )}
-
-      {passKeyEnabled && (
-        <>
-          <WalletTypeRowButton
-            client={client}
-            icon={passkeyIcon}
-            onClick={() => {
-              handlePassKeyLogin();
-            }}
-            // TODO locale
-            title="Passkey"
-          />
-        </>
-      )}
-    </Container>
-  );
-};
-
 /**
  * @internal
  */
@@ -385,7 +72,7 @@ export function InAppWalletFormUIScreen(props: InAppWalletFormUIProps) {
         center="y"
         p={isCompact ? undefined : "lg"}
       >
-        <InAppWalletFormUI {...props} />
+        <ConnectWalletSocialOptions {...props} />
       </Container>
 
       {isCompact &&
@@ -404,22 +91,3 @@ export function InAppWalletFormUIScreen(props: InAppWalletFormUIProps) {
     </Container>
   );
 }
-
-const SocialButton = /* @__PURE__ */ styled(Button)({
-  "&[data-variant='full']": {
-    display: "flex",
-    justifyContent: "flex-start",
-    padding: spacing.md,
-    gap: spacing.md,
-    fontSize: fontSize.md,
-    fontWeight: 500,
-    transition: "background-color 0.2s ease",
-    "&:active": {
-      boxShadow: "none",
-    },
-  },
-  "&[data-variant='icon']": {
-    padding: spacing.sm,
-    flexGrow: 1,
-  },
-});