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

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

@@ -0,0 +1,338 @@
+"use client";
+import styled from "@emotion/styled";
+import { useState } from "react";
+import { webLocalStorage } from "../../../../utils/storage/webStorage.js";
+import { isEcosystemWallet } from "../../../../wallets/ecosystem/is-ecosystem-wallet.js";
+import type { Account, Wallet } from "../../../../wallets/interfaces/wallet.js";
+import type {
+  AuthOption,
+  SocialAuthOption,
+} from "../../../../wallets/types.js";
+import type { EcosystemWalletId } from "../../../../wallets/wallet-types.js";
+import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
+import {
+  fontSize,
+  iconSize,
+  spacing,
+} from "../../../core/design-system/index.js";
+import { useConnectUI } from "../../../core/hooks/others/useWalletConnectionCtx.js";
+import { useSetSelectionData } from "../../providers/wallet-ui-states-provider.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 { TextDivider } from "../../ui/components/TextDivider.js";
+import { Container } from "../../ui/components/basic.js";
+import { Button } from "../../ui/components/buttons.js";
+import { InputSelectionUI } from "../in-app/InputSelectionUI.js";
+import { socialIcons } from "../in-app/socialIcons.js";
+import { validateEmail } from "../in-app/validateEmail.js";
+import type { ConnectLocale } from "./locale/types.js";
+import { openOauthSignInWindow } from "./openOauthSignInWindow.js";
+import { setLastAuthProvider } from "./storage.js";
+
+export type ConnectWalletSelectUIState =
+  | undefined
+  | {
+      emailLogin?: string;
+      phoneLogin?: string;
+      socialLogin?: {
+        type: SocialAuthOption;
+        connectionPromise: Promise<Account>;
+      };
+      passkeyLogin?: boolean;
+    };
+
+const defaultAuthOptions: AuthOption[] = [
+  "email",
+  "phone",
+  "google",
+  "apple",
+  "facebook",
+  "passkey",
+];
+
+export type ConnectWalletSocialOptionsProps = {
+  select: () => void;
+  done: () => void;
+  locale: ConnectLocale;
+  wallet: Wallet<EcosystemWalletId> | Wallet<"inApp">;
+  goBack?: () => void;
+};
+
+/**
+ * @internal
+ */
+export const ConnectWalletSocialOptions = (
+  props: ConnectWalletSocialOptionsProps,
+) => {
+  const locale = props.locale;
+  const { chain, client, connectModal } = useConnectUI();
+  const { wallet } = props;
+  const setData = useSetSelectionData() as (
+    value: ConnectWalletSelectUIState,
+  ) => void;
+
+  const themeObj = useCustomTheme();
+
+  const loginMethodsLabel = {
+    google: locale.signInWithGoogle,
+    facebook: locale.signInWithFacebook,
+    apple: locale.signInWithApple,
+  };
+
+  const authOptions = defaultAuthOptions; // TODO: Fetch these from the backend
+  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 SocialAuthOption[];
+
+  const hasSocialLogins = socialLogins.length > 0;
+
+  // Need to trigger login on button click to avoid popup from being blocked
+  const handleSocialLogin = async (strategy: SocialAuthOption) => {
+    try {
+      const socialLoginWindow = openOauthSignInWindow(strategy, themeObj);
+      if (!socialLoginWindow) {
+        throw new Error("Failed to open login window");
+      }
+      const connectOptions = {
+        chain,
+        client,
+        strategy,
+        openedWindow: socialLoginWindow,
+        closeOpenedWindow: (openedWindow: Window) => {
+          openedWindow.close();
+        },
+      };
+
+      const connectPromise = isEcosystemWallet(wallet)
+        ? wallet.connect({
+            ...connectOptions,
+            ecosystem: {
+              id: wallet.id,
+              partnerId: wallet.getConfig()?.partnerId,
+            },
+          })
+        : wallet.connect(connectOptions);
+
+      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;
+
+  return (
+    <Container
+      flex="column"
+      gap="md"
+      style={{
+        position: "relative",
+      }}
+    >
+      {/* 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>
+  );
+};
+
+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/shared/ConnectingScreen.tsx

@@ -92,7 +92,7 @@ export const ConnectingScreen: React.FC<{
         </Container>
       </Container>
 
-      {props.onGetStarted && (
+      {props.onGetStarted ? (
         <>
           <Spacer y="xl" />
           <Line />
@@ -102,6 +102,8 @@ export const ConnectingScreen: React.FC<{
             </Button>
           </Container>
         </>
+      ) : (
+        <Spacer y={connectModal.size === "compact" ? "lg" : "xxl"} />
       )}
     </Container>
   );

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

@@ -206,7 +206,7 @@ const InstallScanScreen: React.FC<{
   );
 };
 
-const ButtonLink = /* @__PURE__ */ StyledButton(() => {
+const ButtonLink = /* @__PURE__ */ StyledButton((_) => {
   const theme = useCustomTheme();
   return {
     all: "unset",

package/src/react/web/wallets/{in-app/InAppWalletOTPLoginUI.tsx → shared/OTPLoginUI.tsx}

@@ -1,9 +1,11 @@
 "use client";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { webLocalStorage } from "../../../../utils/storage/webStorage.js";
+import { isEcosystemWallet } from "../../../../wallets/ecosystem/is-ecosystem-wallet.js";
 import type { SendEmailOtpReturnType } from "../../../../wallets/in-app/core/authentication/type.js";
 import { preAuthenticate } from "../../../../wallets/in-app/web/lib/auth/index.js";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
+import type { EcosystemWalletId } from "../../../../wallets/wallet-types.js";
 import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
 import { fontSize } from "../../../core/design-system/index.js";
 import { useConnectUI } from "../../../core/hooks/others/useWalletConnectionCtx.js";
@@ -15,7 +17,7 @@ import { Container, Line, ModalHeader } from "../../ui/components/basic.js";
 import { Button } from "../../ui/components/buttons.js";
 import { Text } from "../../ui/components/text.js";
 import { StyledButton } from "../../ui/design-system/elements.js";
-import type { InAppWalletLocale } from "./locale/types.js";
+import type { ConnectLocale } from "./locale/types.js";
 import { setLastAuthProvider } from "./storage.js";
 
 type VerificationStatus =
@@ -30,10 +32,10 @@ type ScreenToShow = "base" | "enter-password-or-recovery-code";
 /**
  * @internal
  */
-export function InAppWalletOTPLoginUI(props: {
+export function OTPLoginUI(props: {
   userInfo: { email: string } | { phone: string };
-  wallet: Wallet<"inApp">;
-  locale: InAppWalletLocale;
+  wallet: Wallet;
+  locale: ConnectLocale;
   done: () => void;
   goBack?: () => void;
 }) {
@@ -44,6 +46,7 @@ export function InAppWalletOTPLoginUI(props: {
   const [otpInput, setOtpInput] = useState("");
   const [verifyStatus, setVerifyStatus] = useState<VerificationStatus>("idle");
   const [accountStatus, setAccountStatus] = useState<AccountStatus>("sending");
+  const isEcosystem = useMemo(() => isEcosystemWallet(wallet.id), [wallet.id]);
 
   const [screen] = useState<ScreenToShow>("base");
 
@@ -55,6 +58,13 @@ export function InAppWalletOTPLoginUI(props: {
     try {
       if ("email" in userInfo) {
         const status = await preAuthenticate({
+          ecosystem: isEcosystem
+            ? {
+                id: wallet.id as EcosystemWalletId,
+                partnerId: (wallet as Wallet<EcosystemWalletId>).getConfig()
+                  ?.partnerId,
+              }
+            : undefined,
           email: userInfo.email,
           strategy: "email",
           client,
@@ -62,6 +72,13 @@ export function InAppWalletOTPLoginUI(props: {
         setAccountStatus(status);
       } else if ("phone" in userInfo) {
         const status = await preAuthenticate({
+          ecosystem: isEcosystem
+            ? {
+                id: wallet.id as EcosystemWalletId,
+                partnerId: (wallet as Wallet<EcosystemWalletId>).getConfig()
+                  ?.partnerId,
+              }
+            : undefined,
           phoneNumber: userInfo.phone,
           strategy: "phone",
           client,
@@ -75,7 +92,7 @@ export function InAppWalletOTPLoginUI(props: {
       setVerifyStatus("idle");
       setAccountStatus("error");
     }
-  }, [client, userInfo]);
+  }, [client, userInfo, wallet, isEcosystem]);
 
   async function connect(otp: string) {
     if ("email" in userInfo) {
@@ -301,7 +318,7 @@ export function InAppWalletOTPLoginUI(props: {
   return null;
 }
 
-const LinkButton = /* @__PURE__ */ StyledButton(() => {
+const LinkButton = /* @__PURE__ */ StyledButton((_) => {
   const theme = useCustomTheme();
   return {
     all: "unset",

package/src/react/web/wallets/{in-app/InAppWalletPassKeyLogin.tsx → shared/PassKeyLogin.tsx}

@@ -3,6 +3,7 @@ import type { Chain } from "../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import type { Wallet } from "../../../../exports/wallets.js";
 import { webLocalStorage } from "../../../../utils/storage/webStorage.js";
+import { isEcosystemWallet } from "../../../../wallets/ecosystem/is-ecosystem-wallet.js";
 import { hasStoredPasskey } from "../../../../wallets/in-app/web/lib/auth/passkeys.js";
 import { iconSize } from "../../../core/design-system/index.js";
 import { useConnectUI } from "../../../core/hooks/others/useWalletConnectionCtx.js";
@@ -13,7 +14,7 @@ import { Spinner } from "../../ui/components/Spinner.js";
 import { Container, ModalHeader } from "../../ui/components/basic.js";
 import { Button } from "../../ui/components/buttons.js";
 import { Text } from "../../ui/components/text.js";
-import { LoadingScreen } from "../shared/LoadingScreen.js";
+import { LoadingScreen } from "./LoadingScreen.js";
 import { setLastAuthProvider } from "./storage.js";
 
 // is passkey stored?
@@ -21,8 +22,8 @@ import { setLastAuthProvider } from "./storage.js";
 // else
 // - show login or signup options
 
-export function InAppWalletPassKeyLogin(props: {
-  wallet: Wallet<"inApp">;
+export function PassKeyLogin(props: {
+  wallet: Wallet;
   done: () => void;
   onBack?: () => void;
 }) {
@@ -39,7 +40,10 @@ export function InAppWalletPassKeyLogin(props: {
     }
 
     triggered.current = true;
-    hasStoredPasskey(client)
+    hasStoredPasskey(
+      client,
+      isEcosystemWallet(wallet.id) ? wallet.id : undefined,
+    )
       .then((isStored) => {
         if (isStored) {
           setScreen("login");
@@ -50,7 +54,7 @@ export function InAppWalletPassKeyLogin(props: {
       .catch(() => {
         setScreen("select");
       });
-  }, [client]);
+  }, [client, wallet.id]);
 
   return (
     <Container animate="fadein" fullHeight flex="column">
@@ -110,7 +114,7 @@ export function InAppWalletPassKeyLogin(props: {
 }
 
 function LoginScreen(props: {
-  wallet: Wallet<"inApp">;
+  wallet: Wallet;
   done: () => void;
   client: ThirdwebClient;
   onCreate: () => void;
@@ -171,7 +175,7 @@ function LoginScreen(props: {
 }
 
 function SignupScreen(props: {
-  wallet: Wallet<"inApp">;
+  wallet: Wallet;
   done: () => void;
   client: ThirdwebClient;
   chain?: Chain;

package/src/react/web/wallets/{in-app/InAppWalletSocialLogin.tsx → shared/SocialLogin.tsx}

@@ -10,21 +10,21 @@ import { Spinner } from "../../ui/components/Spinner.js";
 import { Container, ModalHeader } from "../../ui/components/basic.js";
 import { Button } from "../../ui/components/buttons.js";
 import { Text } from "../../ui/components/text.js";
-import type { InAppWalletLocale } from "./locale/types.js";
+import type { ConnectWalletSelectUIState } from "./ConnectWalletSocialOptions.js";
+import type { ConnectLocale } from "./locale/types.js";
 import { openOauthSignInWindow } from "./openOauthSignInWindow.js";
 import { setLastAuthProvider } from "./storage.js";
-import type { InAppWalletSelectUIState } from "./types.js";
 
 /**
  * @internal
  */
-export function InAppWalletSocialLogin(props: {
+export function SocialLogin(props: {
   socialAuth: InAppWalletSocialAuth;
-  locale: InAppWalletLocale;
-  wallet: Wallet<"inApp">;
+  locale: ConnectLocale;
+  wallet: Wallet;
   done: () => void;
   goBack?: () => void;
-  state: InAppWalletSelectUIState;
+  state: ConnectWalletSelectUIState;
 }) {
   const ewLocale = props.locale;
   const locale = ewLocale.socialLoginScreen;

package/src/react/web/wallets/{in-app → shared}/locale/en.ts

@@ -1,4 +1,4 @@
-import type { InAppWalletLocale } from "./types.js";
+import type { ConnectLocale } from "./types.js";
 
 export default {
   signInWithGoogle: "Google",
@@ -53,4 +53,4 @@ export default {
   phonePlaceholder: "Phone number",
   signInWithPhone: "Sign in with phone number",
   phoneRequired: "phone number is required",
-} satisfies InAppWalletLocale;
+} satisfies ConnectLocale;

package/src/react/web/wallets/{in-app → shared}/locale/es.ts

@@ -1,4 +1,4 @@
-import type { InAppWalletLocale } from "./types.js";
+import type { ConnectLocale } from "./types.js";
 
 export default {
   signInWithGoogle: "Iniciar sesión con Google",
@@ -53,4 +53,4 @@ export default {
   signInWithPhone: "Iniciar sesión con número de teléfono",
   phoneRequired: "Se requiere número de teléfono",
   signInWithEmail: "Iniciar sesión con correo electrónico",
-} satisfies InAppWalletLocale;
+} satisfies ConnectLocale;

package/src/react/web/wallets/{in-app/locale/getInAppWalletLocale.ts → shared/locale/getConnectLocale.ts}

@@ -1,12 +1,12 @@
 import type { LocaleId } from "../../../ui/types.js";
-import type { InAppWalletLocale } from "./types.js";
+import type { ConnectLocale } from "./types.js";
 
 /**
  * @internal
  */
-export async function getInAppWalletLocale(
+export async function getConnectLocale(
   localeId: LocaleId,
-): Promise<InAppWalletLocale> {
+): Promise<ConnectLocale> {
   switch (localeId) {
     case "es_ES":
       return (await import("./es.js")).default;

package/src/react/web/wallets/{in-app → shared}/locale/ja.ts

@@ -1,4 +1,4 @@
-import type { InAppWalletLocale } from "./types.js";
+import type { ConnectLocale } from "./types.js";
 
 export default {
   signInWithGoogle: "Googleでサインイン",
@@ -52,4 +52,4 @@ export default {
   phonePlaceholder: "電話番号を入力してください",
   signInWithPhone: "電話番号でログイン",
   phoneRequired: "電話番号が必要です",
-} satisfies InAppWalletLocale;
+} satisfies ConnectLocale;

package/src/react/web/wallets/{in-app → shared}/locale/tl.ts

@@ -1,4 +1,4 @@
-import type { InAppWalletLocale } from "./types.js";
+import type { ConnectLocale } from "./types.js";
 
 export default {
   signInWithGoogle: "Mag-sign in gamit ang Google",
@@ -53,4 +53,4 @@ export default {
   phonePlaceholder: "Ilagay ang iyong numero ng telepono",
   signInWithPhone: "Mag-login gamit ang numero ng telepono",
   phoneRequired: "Kinakailangan ang numero ng telepono",
-} satisfies InAppWalletLocale;
+} satisfies ConnectLocale;

package/src/react/web/wallets/{in-app → shared}/locale/types.ts

@@ -1,4 +1,4 @@
-export type InAppWalletLocale = {
+export type ConnectLocale = {
   createPassword: {
     confirmation: string;
     failedToSetPassword: string;

package/src/storage/upload/mobile.ts

@@ -1,6 +1,6 @@
 import type { ThirdwebClient } from "../../client/client.js";
 import { getThirdwebDomains } from "../../utils/domains.js";
-import { getPlatformHeaders } from "../../utils/fetch.js";
+import { getClientFetch, getPlatformHeaders } from "../../utils/fetch.js";
 import type { UploadMobileOptions } from "../uploadMobile.js";
 import { isFileBufferOrStringEqual } from "./helpers.js";
 import type { UploadFile } from "./types.js";
@@ -9,7 +9,7 @@ const METADATA_NAME = "Storage React Native SDK";
 
 export async function uploadBatchMobile(
   client: ThirdwebClient,
-  data: (UploadFile | Record<string, unknown>)[],
+  data: UploadFile[],
   options?: UploadMobileOptions,
 ): Promise<string[]> {
   if (!data || data.length === 0 || !data[0]) {
@@ -144,14 +144,12 @@ export async function uploadBatchMobile(
   });
 
   try {
-    const res = await fetch(
+    const res = await getClientFetch(client)(
       `https://${getThirdwebDomains().storage}/ipfs/batch-pin-json`,
       {
         method: "POST",
         headers: {
-          ...(client.clientId ? { "x-client-id": client.clientId } : {}),
           "Content-Type": "application/json",
-          ...getPlatformHeaders(),
         },
         body: fetchBody,
       },

package/src/storage/upload/types.ts

@@ -30,7 +30,9 @@ export type UploadOptions<TFiles extends UploadableFile[]> = {
   files: TFiles;
 } & BuildFormDataOptions;
 
-export type UploadFile = { name?: string; type?: string; uri: string };
+export type UploadFile =
+  | { name?: string; type?: string; uri: string }
+  | Record<string, unknown>;
 
 export type InternalUploadMobileOptions = {
   files: UploadFile[];