thirdweb 5.30.0-nightly-33777df88fb190c2af8ad25e4930040884996f1e-20240620000630 → 5.30.0-nightly-fab5cd43bed972b0a3f70f0f39a790349672ba72-20240620192731

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,
-  },
-});

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

@@ -5,9 +5,9 @@ import { useSetSelectionData } from "../../providers/wallet-ui-states-provider.j
 import { useScreenContext } from "../../ui/ConnectWallet/Modal/screen.js";
 import { WalletEntryButton } from "../../ui/ConnectWallet/WalletEntryButton.js";
 import { reservedScreens } from "../../ui/ConnectWallet/constants.js";
+import { ConnectWalletSocialOptions } from "../shared/ConnectWalletSocialOptions.js";
 import { LoadingScreen } from "../shared/LoadingScreen.js";
-import { InAppWalletFormUI } from "./InAppWalletFormUI.js";
-import { useInAppWalletLocale } from "./useInAppWalletLocale.js";
+import { useConnectLocale } from "./useInAppWalletLocale.js";
 
 /**
  *
@@ -22,7 +22,7 @@ function InAppWalletSelectionUI(props: {
   const { screen } = useScreenContext();
   const { connectModal } = useConnectUI();
   const setData = useSetSelectionData();
-  const localeQuery = useInAppWalletLocale();
+  const locale = useConnectLocale();
 
   // do not show the "selectUI" if
   // modal is compact or
@@ -42,13 +42,13 @@ function InAppWalletSelectionUI(props: {
     );
   }
 
-  if (!localeQuery.data) {
+  if (!locale) {
     return <LoadingScreen height="195px" />;
   }
 
   return (
-    <InAppWalletFormUI
-      locale={localeQuery.data}
+    <ConnectWalletSocialOptions
+      locale={locale}
       wallet={props.wallet}
       done={props.done}
       select={props.select}

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

@@ -3,7 +3,7 @@ import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.
 import { fontSize } from "../../../core/design-system/index.js";
 import { StyledButton } from "../../ui/design-system/elements.js";
 
-export const LinkButton = /* @__PURE__ */ StyledButton(() => {
+export const LinkButton = /* @__PURE__ */ StyledButton((_) => {
   const theme = useCustomTheme();
   return {
     all: "unset",

package/src/react/web/wallets/in-app/useInAppWalletLocale.ts

@@ -1,16 +1,20 @@
-import { useQuery } from "@tanstack/react-query";
+import { useEffect, useState } from "react";
 import { useConnectUI } from "../../../core/hooks/others/useWalletConnectionCtx.js";
-import { getInAppWalletLocale } from "./locale/getInAppWalletLocale.js";
+import { getConnectLocale } from "../shared/locale/getConnectLocale.js";
+import type { ConnectLocale } from "../shared/locale/types.js";
 
 /**
  * @internal
  */
-export function useInAppWalletLocale() {
+export function useConnectLocale() {
   const localeId = useConnectUI().locale;
-  return useQuery({
-    queryKey: ["inAppWalletLocale", localeId],
-    queryFn: () => getInAppWalletLocale(localeId),
-    refetchOnMount: false,
-    refetchOnWindowFocus: false,
-  });
+  const [locale, setLocale] = useState<ConnectLocale | undefined>(undefined);
+
+  useEffect(() => {
+    getConnectLocale(localeId).then((l) => {
+      setLocale(l);
+    });
+  }, [localeId]);
+
+  return locale;
 }