thirdweb 5.56.0 → 5.57.0

package/src/react/native/ui/connect/InAppWalletUI.tsx

@@ -124,10 +124,40 @@ export function InAppWalletUI(props: InAppWalletFormUIProps) {
           }}
         />
       ) : null}
+      {authOptions.includes("guest") ? <GuestLogin {...props} /> : null}
     </View>
   );
 }
 
+function GuestLogin(props: InAppWalletFormUIProps) {
+  const { theme, wallet, client, connector } = props;
+  const connectInAppWallet = useCallback(() => {
+    connector({
+      wallet,
+      connectFn: async () => {
+        await wallet.connect({
+          client,
+          strategy: "guest",
+        });
+        await setLastAuthProvider("guest", nativeLocalStorage);
+        return wallet;
+      },
+      authMethod: "guest",
+    });
+  }, [connector, wallet, client]);
+
+  return (
+    <ThemedButtonWithIcon
+      theme={theme}
+      title="Continue as guest"
+      icon={getAuthProviderImage("guest")}
+      onPress={() => {
+        connectInAppWallet();
+      }}
+    />
+  );
+}
+
 function SocialLogin(
   props: InAppWalletFormUIProps & { auth: InAppWalletSocialAuth },
 ) {

package/src/react/native/ui/connect/TokenListScreen.tsx

@@ -88,18 +88,15 @@ export const TokenRow = (props: {
         <ThemedText theme={theme} type="defaultSemiBold">
           {tokenName}
         </ThemedText>
-        {address && (
-          <>
-            {balanceQuery.data ? (
-              <ThemedText theme={theme} type="subtext">
-                {formatBalanceOnButton(Number(balanceQuery.data.displayValue))}{" "}
-                {balanceQuery.data?.symbol}
-              </ThemedText>
-            ) : (
-              <Skeleton theme={theme} style={{ width: 80, height: 14 }} />
-            )}
-          </>
-        )}
+        {address &&
+          (balanceQuery.data ? (
+            <ThemedText theme={theme} type="subtext">
+              {formatBalanceOnButton(Number(balanceQuery.data.displayValue))}{" "}
+              {balanceQuery.data?.symbol}
+            </ThemedText>
+          ) : (
+            <Skeleton theme={theme} style={{ width: 80, height: 14 }} />
+          ))}
       </View>
       {props.onTokenSelected && (
         <>

package/src/react/native/ui/icons/svgs.ts

@@ -98,6 +98,8 @@ export const X_ICON = `<svg width="320" height="320" viewBox="0 0 320 320" fill=
 <path d="M177.315 145.335L245.068 67H229.013L170.182 135.017L123.195 67H69L140.055 169.854L69 252H85.0563L147.183 180.172L196.805 252H251L177.311 145.335H177.315ZM155.323 170.76L148.124 160.518L90.8417 79.022H115.503L161.731 144.792L168.93 155.034L229.02 240.525H204.359L155.323 170.764V170.76Z" fill="white"/>
 </svg>`;
 
+export const GUEST_ICON = `<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-user"><path d="M19 21v-2a4 4 0 0 0-4-4H9a4 4 0 0 0-4 4v2"/><circle cx="12" cy="7" r="4"/></svg>`;
+
 export const WALLET_ICON = `<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
 <path d="M12.6667 4.66667V2.66667C12.6667 2.48986 12.5964 2.32029 12.4714 2.19526C12.3464 2.07024 12.1768 2 12 2H3.33333C2.97971 2 2.64057 2.14048 2.39052 2.39052C2.14048 2.64057 2 2.97971 2 3.33333C2 3.68696 2.14048 4.02609 2.39052 4.27614C2.64057 4.52619 2.97971 4.66667 3.33333 4.66667H13.3333C13.5101 4.66667 13.6797 4.7369 13.8047 4.86193C13.9298 4.98695 14 5.15652 14 5.33333V8M14 8H12C11.6464 8 11.3072 8.14048 11.0572 8.39052C10.8071 8.64057 10.6667 8.97971 10.6667 9.33333C10.6667 9.68696 10.8071 10.0261 11.0572 10.2761C11.3072 10.5262 11.6464 10.6667 12 10.6667H14C14.1768 10.6667 14.3464 10.5964 14.4714 10.4714C14.5964 10.3464 14.6667 10.1768 14.6667 10V8.66667C14.6667 8.48986 14.5964 8.32029 14.4714 8.19526C14.3464 8.07024 14.1768 8 14 8Z" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>
 <path d="M2 3.3335V12.6668C2 13.0205 2.14048 13.3596 2.39052 13.6096C2.64057 13.8597 2.97971 14.0002 3.33333 14.0002H13.3333C13.5101 14.0002 13.6797 13.9299 13.8047 13.8049C13.9298 13.6799 14 13.5103 14 13.3335V10.6668" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round"/>

package/src/react/web/ui/ConnectWallet/Details.tsx

@@ -14,8 +14,10 @@ import { trackPayEvent } from "../../../../analytics/track.js";
 import type { Chain } from "../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { getContract } from "../../../../contract/contract.js";
+import { getLastAuthProvider } from "../../../../react/core/utils/storage.js";
 import { isContractDeployed } from "../../../../utils/bytecode/is-contract-deployed.js";
 import { formatNumber } from "../../../../utils/formatNumber.js";
+import { webLocalStorage } from "../../../../utils/storage/webStorage.js";
 import type { Account, Wallet } from "../../../../wallets/interfaces/wallet.js";
 import type { SmartWalletOptions } from "../../../../wallets/smart/types.js";
 import type { AppMetadata } from "../../../../wallets/types.js";
@@ -1062,6 +1064,17 @@ function InAppWalletUserInfo(props: {
   const activeWallet = useActiveWallet();
   const { data: walletInfo } = useWalletInfo(activeWallet?.id);
   const isSmartWallet = hasSmartAccount(activeWallet);
+  const { data: walletName } = useQuery({
+    queryKey: [activeWallet?.id, "wallet-name"],
+    queryFn: async () => {
+      const lastAuthProvider = await getLastAuthProvider(webLocalStorage);
+      if (lastAuthProvider === "guest") {
+        return "Guest";
+      }
+      return walletInfo?.name;
+    },
+    enabled: !!activeWallet?.id,
+  });
 
   const userInfoQuery = useQuery({
     queryKey: ["in-app-wallet-user", client, account?.address],
@@ -1088,10 +1101,10 @@ function InAppWalletUserInfo(props: {
     return <ConnectedToSmartWallet client={client} connectLocale={locale} />;
   }
 
-  if (userInfoQuery.data || walletInfo) {
+  if (userInfoQuery.data || walletName) {
     return (
       <Text size="xs" weight={400}>
-        {userInfoQuery.data || walletInfo?.name}
+        {userInfoQuery.data || walletName}
       </Text>
     );
   }

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

@@ -259,45 +259,43 @@ function HeadlessSignIn({
         {status === "signing" && <Spinner size="xl" color="accentText" />}
 
         {status === "failed" && (
-          <>
-            <Container>
-              <Spacer y="lg" />
-              <Text size="lg" center color="danger">
-                {locale.signingScreen.failedToSignIn}
-              </Text>
+          <Container>
+            <Spacer y="lg" />
+            <Text size="lg" center color="danger">
+              {locale.signingScreen.failedToSignIn}
+            </Text>
 
-              <Spacer y="lg" />
-              <Button
-                fullWidth
-                variant="accent"
-                onClick={() => {
-                  signIn();
-                }}
-                style={{
-                  gap: spacing.xs,
-                  alignItems: "center",
-                  padding: spacing.md,
-                }}
-              >
-                <ReloadIcon width={iconSize.sm} height={iconSize.sm} />
-                {locale.signingScreen.tryAgain}
-              </Button>
-              <Spacer y="sm" />
-              <Button
-                fullWidth
-                variant="secondary"
-                onClick={() => {
-                  disconnect(wallet);
-                }}
-                style={{
-                  alignItems: "center",
-                  padding: spacing.md,
-                }}
-              >
-                {locale.instructionScreen.disconnectWallet}
-              </Button>
-            </Container>
-          </>
+            <Spacer y="lg" />
+            <Button
+              fullWidth
+              variant="accent"
+              onClick={() => {
+                signIn();
+              }}
+              style={{
+                gap: spacing.xs,
+                alignItems: "center",
+                padding: spacing.md,
+              }}
+            >
+              <ReloadIcon width={iconSize.sm} height={iconSize.sm} />
+              {locale.signingScreen.tryAgain}
+            </Button>
+            <Spacer y="sm" />
+            <Button
+              fullWidth
+              variant="secondary"
+              onClick={() => {
+                disconnect(wallet);
+              }}
+              style={{
+                alignItems: "center",
+                padding: spacing.md,
+              }}
+            >
+              {locale.instructionScreen.disconnectWallet}
+            </Button>
+          </Container>
         )}
       </Container>
     </Container>

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

@@ -154,43 +154,41 @@ export function TokenSelector(props: {
         <Spacer y="md" />
 
         {props.chainSelection && (
-          <>
-            <Container px="lg">
-              <Text size="sm">Select Network</Text>
-              <Spacer y="xxs" />
-              <SelectTokenBtn
-                fullWidth
-                variant="secondary"
-                onClick={() => {
-                  setScreen("select-chain");
-                }}
-              >
-                <ChainIcon
-                  chainIconUrl={chainIconQuery.url}
-                  size={iconSize.lg}
-                  client={props.client}
-                />
+          <Container px="lg">
+            <Text size="sm">Select Network</Text>
+            <Spacer y="xxs" />
+            <SelectTokenBtn
+              fullWidth
+              variant="secondary"
+              onClick={() => {
+                setScreen("select-chain");
+              }}
+            >
+              <ChainIcon
+                chainIconUrl={chainIconQuery.url}
+                size={iconSize.lg}
+                client={props.client}
+              />
 
-                {chainNameQuery.name ? (
-                  <Text color="primaryText" size="sm">
-                    {chainNameQuery.name}
-                  </Text>
-                ) : (
-                  <Skeleton height={fontSize.md} />
-                )}
-
-                <ChevronDownIcon
-                  width={iconSize.sm}
-                  height={iconSize.sm}
-                  style={{
-                    marginLeft: "auto",
-                  }}
-                />
-              </SelectTokenBtn>
-              <Spacer y="xl" />
-              <Text size="sm">Select Token</Text>
-            </Container>
-          </>
+              {chainNameQuery.name ? (
+                <Text color="primaryText" size="sm">
+                  {chainNameQuery.name}
+                </Text>
+              ) : (
+                <Skeleton height={fontSize.md} />
+              )}
+
+              <ChevronDownIcon
+                width={iconSize.sm}
+                height={iconSize.sm}
+                style={{
+                  marginLeft: "auto",
+                }}
+              />
+            </SelectTokenBtn>
+            <Spacer y="xl" />
+            <Text size="sm">Select Token</Text>
+          </Container>
         )}
 
         <Container px="lg">

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

@@ -549,7 +549,7 @@ const IframePlayer = /* @__PURE__ */ (() =>
       <div style={{ position: "relative", ...style }} {...restProps}>
         <iframe
           title={alt || "thirdweb iframe player"}
-          src={playing ? src ?? undefined : undefined}
+          src={playing ? (src ?? undefined) : undefined}
           ref={ref}
           style={{
             objectFit: "contain",

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

@@ -23,26 +23,24 @@ export function EcosystemWalletHeader(props: {
     <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>
-            </>
-          )}
-        </>
+        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>
+          </>
+        )
       }
       leftAligned
     />

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

@@ -9,6 +9,7 @@ import {
 import { useScreenContext } from "../../ui/ConnectWallet/Modal/screen.js";
 import type { ConnectLocale } from "../../ui/ConnectWallet/locale/types.js";
 import type { ConnectWalletSelectUIState } from "../shared/ConnectWalletSocialOptions.js";
+import { GuestLogin } from "../shared/GuestLogin.js";
 import { LoadingScreen } from "../shared/LoadingScreen.js";
 import { OTPLoginUI } from "../shared/OTPLoginUI.js";
 import { PassKeyLogin } from "../shared/PassKeyLogin.js";
@@ -135,6 +136,21 @@ function InAppWalletConnectUI(props: {
     );
   }
 
+  if (state?.guestLogin) {
+    return (
+      <GuestLogin
+        locale={locale}
+        done={done}
+        goBack={goBackToMain}
+        wallet={props.wallet}
+        state={state}
+        client={props.client}
+        size={props.size}
+        connectLocale={props.connectLocale}
+      />
+    );
+  }
+
   return (
     <InAppWalletFormUIScreen
       select={() => {}}

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

@@ -53,6 +53,9 @@ export type ConnectWalletSelectUIState =
         type: SocialAuthOption;
         connectionPromise: Promise<Account | Profile[]>;
       };
+      guestLogin?: {
+        connectionPromise: Promise<Account | Profile[]>;
+      };
       passkeyLogin?: boolean;
       walletLogin?: boolean;
     };
@@ -124,8 +127,8 @@ export const ConnectWalletSocialOptions = (
     retry: false,
   });
   const authOptions = isEcosystemWallet(wallet)
-    ? ecosystemAuthOptions ?? defaultAuthOptions
-    : wallet.getConfig()?.auth?.options ?? defaultAuthOptions;
+    ? (ecosystemAuthOptions ?? defaultAuthOptions)
+    : (wallet.getConfig()?.auth?.options ?? defaultAuthOptions);
 
   const emailIndex = authOptions.indexOf("email");
   const isEmailEnabled = emailIndex !== -1;
@@ -157,6 +160,7 @@ export const ConnectWalletSocialOptions = (
   }
 
   const passKeyEnabled = authOptions.includes("passkey");
+  const guestEnabled = authOptions.includes("guest");
 
   const placeholder =
     inputMode === "email" ? locale.emailPlaceholder : locale.phonePlaceholder;
@@ -182,6 +186,27 @@ export const ConnectWalletSocialOptions = (
       }
     : undefined;
 
+  const handleGuestLogin = async () => {
+    const connectOptions = {
+      client: props.client,
+      ecosystem: ecosystemInfo,
+      strategy: "guest" as const,
+    };
+    const connectPromise = (async () => {
+      const result = await wallet.connect(connectOptions);
+      setLastAuthProvider("guest", webLocalStorage);
+      return result;
+    })();
+
+    setData({
+      guestLogin: {
+        connectionPromise: connectPromise,
+      },
+    });
+
+    props.select(); // show Connect UI
+  };
+
   // Need to trigger login on button click to avoid popup from being blocked
   const handleSocialLogin = async (strategy: SocialAuthOption) => {
     const walletConfig = wallet.getConfig();
@@ -227,11 +252,11 @@ export const ConnectWalletSocialOptions = (
             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;
         }
+
+        const connectPromise = wallet.connect(connectOptions);
+        setLastAuthProvider(strategy, webLocalStorage);
+        return connectPromise;
       })();
 
       setData({
@@ -303,12 +328,11 @@ export const ConnectWalletSocialOptions = (
             const imgIconSize = (() => {
               if (!showOnlyIcons) {
                 return iconSize.md;
-              } else {
-                if (socialLogins.length > 4) {
-                  return iconSize.md;
-                }
-                return iconSize.lg;
               }
+              if (socialLogins.length > 4) {
+                return iconSize.md;
+              }
+              return iconSize.lg;
             })();
 
             return (
@@ -341,108 +365,111 @@ export const ConnectWalletSocialOptions = (
         (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;
-              }}
-              disabled={props.disabled}
-              emptyErrorMessage={emptyErrorMessage}
-              submitButtonText={locale.submitEmail}
-            />
-          ) : (
-            <WalletTypeRowButton
-              client={props.client}
-              icon={emailIcon}
-              onClick={() => {
-                setManualInputMode("email");
-              }}
-              title={locale.emailPlaceholder}
-              disabled={props.disabled}
-            />
-          )}
-        </>
-      )}
-      {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;
-              }}
-              disabled={props.disabled}
-              emptyErrorMessage={emptyErrorMessage}
-              submitButtonText={locale.submitEmail}
-            />
-          ) : (
-            <WalletTypeRowButton
-              client={props.client}
-              icon={phoneIcon}
-              onClick={() => {
-                setManualInputMode("phone");
-              }}
-              title={locale.phonePlaceholder}
-              disabled={props.disabled}
-            />
-          )}
-        </>
-      )}
-
-      {passKeyEnabled && (
-        <>
+      {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;
+            }}
+            disabled={props.disabled}
+            emptyErrorMessage={emptyErrorMessage}
+            submitButtonText={locale.submitEmail}
+          />
+        ) : (
           <WalletTypeRowButton
             client={props.client}
-            icon={passkeyIcon}
+            icon={emailIcon}
             onClick={() => {
-              handlePassKeyLogin();
+              setManualInputMode("email");
             }}
-            title={locale.passkey}
+            title={locale.emailPlaceholder}
             disabled={props.disabled}
           />
-        </>
-      )}
+        ))}
+      {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;
+              }
 
-      {props.isLinking && (
-        <>
+              return undefined;
+            }}
+            disabled={props.disabled}
+            emptyErrorMessage={emptyErrorMessage}
+            submitButtonText={locale.submitEmail}
+          />
+        ) : (
           <WalletTypeRowButton
             client={props.client}
-            icon={getWalletIcon("")}
+            icon={phoneIcon}
             onClick={() => {
-              handleWalletLogin();
+              setManualInputMode("phone");
             }}
-            title={locale.linkWallet}
+            title={locale.phonePlaceholder}
+            disabled={props.disabled}
           />
-        </>
+        ))}
+
+      {passKeyEnabled && (
+        <WalletTypeRowButton
+          client={props.client}
+          icon={passkeyIcon}
+          onClick={() => {
+            handlePassKeyLogin();
+          }}
+          title={locale.passkey}
+          disabled={props.disabled}
+        />
+      )}
+
+      {/* Guest login */}
+      {guestEnabled && (
+        <WalletTypeRowButton
+          client={props.client}
+          icon={getWalletIcon("guest")}
+          onClick={() => {
+            handleGuestLogin();
+          }}
+          title={locale.loginAsGuest}
+          disabled={props.disabled}
+        />
+      )}
+
+      {props.isLinking && (
+        <WalletTypeRowButton
+          client={props.client}
+          icon={getWalletIcon("")}
+          onClick={() => {
+            handleWalletLogin();
+          }}
+          title={locale.linkWallet}
+        />
       )}
     </Container>
   );