thirdweb 5.56.0-nightly-a5e605c65e360a9d3d2e553d6783e58582b50a70-20240917000331 → 5.57.0-nightly-cf1683c3feea6eb36ac6b902a1dd64c8ed8803c9-20240918000340

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

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

@@ -0,0 +1,159 @@
+"use client";
+import { useEffect, useRef, useState } from "react";
+import type { ThirdwebClient } from "../../../../client/client.js";
+import { webLocalStorage } from "../../../../utils/storage/webStorage.js";
+import { isEcosystemWallet } from "../../../../wallets/ecosystem/is-ecosystem-wallet.js";
+import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
+import { setLastAuthProvider } from "../../../core/utils/storage.js";
+import type { ConnectLocale } from "../../ui/ConnectWallet/locale/types.js";
+import { Spacer } from "../../ui/components/Spacer.js";
+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 { ConnectWalletSelectUIState } from "./ConnectWalletSocialOptions.js";
+import type { InAppWalletLocale } from "./locale/types.js";
+
+/**
+ * @internal
+ */
+export function GuestLogin(props: {
+  locale: InAppWalletLocale;
+  wallet: Wallet;
+  done: () => void;
+  goBack?: () => void;
+  state: ConnectWalletSelectUIState;
+  size: "compact" | "wide";
+  client: ThirdwebClient;
+  connectLocale: ConnectLocale;
+}) {
+  const ewLocale = props.locale;
+  const locale = ewLocale.socialLoginScreen;
+
+  const [authError, setAuthError] = useState<string | undefined>(undefined);
+  const { done, wallet } = props;
+  const [status, setStatus] = useState<"connecting" | "connected" | "error">(
+    "connecting",
+  );
+
+  const handleGuestLogin = async () => {
+    const connectOptions = {
+      client: props.client,
+      ecosystem: isEcosystemWallet(wallet)
+        ? {
+            id: wallet.id,
+            partnerId: wallet.getConfig()?.partnerId,
+          }
+        : undefined,
+      strategy: "guest" as const,
+    };
+    try {
+      await wallet.connect(connectOptions);
+      await setLastAuthProvider("guest", webLocalStorage);
+
+      setStatus("connected");
+      done();
+    } catch (e) {
+      setStatus("error");
+      // TODO this only happens on 'retry' button click, not on initial login
+      // should pass auth error message to this component
+      if (
+        e instanceof Error &&
+        e?.message?.includes("PAYMENT_METHOD_REQUIRED")
+      ) {
+        setAuthError(ewLocale.maxAccountsExceeded);
+      }
+      console.error("Error generating guest account", e);
+    }
+  };
+
+  const guestLogin = props.state?.guestLogin;
+
+  const socialLoginStarted = useRef(false);
+  useEffect(() => {
+    if (socialLoginStarted.current) {
+      return;
+    }
+
+    if (guestLogin) {
+      socialLoginStarted.current = true;
+      setStatus("connecting");
+      guestLogin.connectionPromise
+        .then(() => {
+          done();
+          setStatus("connected");
+        })
+        .catch((e) => {
+          setAuthError(e.message);
+          setStatus("error");
+        });
+    }
+  }, [done, guestLogin]);
+
+  return (
+    <Container animate="fadein" flex="column" fullHeight>
+      <Container
+        flex="column"
+        expand
+        p="lg"
+        style={{
+          paddingBottom: 0,
+        }}
+      >
+        {props.goBack && (
+          <ModalHeader title={locale.title} onBack={props.goBack} />
+        )}
+
+        {props.size === "compact" ? <Spacer y="xl" /> : null}
+
+        <Container
+          flex="column"
+          center="both"
+          expand
+          style={{
+            textAlign: "center",
+            minHeight: "250px",
+          }}
+        >
+          {status !== "error" && (
+            <Container animate="fadein">
+              <Text
+                color="primaryText"
+                center
+                multiline
+                style={{
+                  maxWidth: "250px",
+                }}
+              >
+                Generating your guest account
+              </Text>
+              <Spacer y="xl" />
+              <Container center="x" flex="row">
+                <Spinner size="lg" color="accentText" />
+              </Container>
+
+              <Spacer y="xxl" />
+            </Container>
+          )}
+
+          {status === "error" && (
+            <Container animate="fadein">
+              {authError ? (
+                <Text center color="danger">
+                  {authError}
+                </Text>
+              ) : (
+                <Text color="danger">{locale.failed}</Text>
+              )}
+              <Spacer y="lg" />
+              <Button variant="primary" onClick={handleGuestLogin}>
+                {locale.retry}
+              </Button>
+              <Spacer y="xxl" />
+            </Container>
+          )}
+        </Container>
+      </Container>
+    </Container>
+  );
+}

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

@@ -280,11 +280,9 @@ export function OTPLoginUI(props: {
 
             <Container p={isWideModal ? undefined : "lg"}>
               {accountStatus === "error" && (
-                <>
-                  <Text size="sm" center color="danger">
-                    {locale.emailLoginScreen.failedToSendCode}
-                  </Text>
-                </>
+                <Text size="sm" center color="danger">
+                  {locale.emailLoginScreen.failedToSendCode}
+                </Text>
               )}
 
               {accountStatus === "sending" && (

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

@@ -50,7 +50,7 @@ export function SocialLogin(props: {
     const walletConfig = wallet.getConfig();
     const authMode =
       walletConfig && "auth" in walletConfig
-        ? walletConfig?.auth?.mode ?? "popup"
+        ? (walletConfig?.auth?.mode ?? "popup")
         : "popup";
 
     if (

package/src/react/web/wallets/shared/locale/de.ts

@@ -56,5 +56,6 @@ export default {
   signInWithPhone: "Mit Telefonnummer anmelden",
   phoneRequired: "Telefonnummer ist erforderlich",
   passkey: "Passkey",
-  linkWallet: "Link a Wallet",
+  linkWallet: "Verknüpfen Sie eine Brieftasche",
+  loginAsGuest: "Melden Sie sich als Gast an",
 } satisfies InAppWalletLocale;

package/src/react/web/wallets/shared/locale/en.ts

@@ -56,4 +56,5 @@ export default {
   phoneRequired: "Phone number is required",
   passkey: "Passkey",
   linkWallet: "Link a Wallet",
+  loginAsGuest: "Continue as guest",
 } satisfies InAppWalletLocale;

package/src/react/web/wallets/shared/locale/es.ts

@@ -55,5 +55,6 @@ export default {
   phoneRequired: "Se requiere número de teléfono",
   signInWithEmail: "Iniciar sesión con correo electrónico",
   passkey: "Clave de acceso",
-  linkWallet: "Link a Wallet",
+  linkWallet: "Vincular una billetera",
+  loginAsGuest: "Inicia sesión como invitado",
 } satisfies InAppWalletLocale;

package/src/react/web/wallets/shared/locale/fr.ts

@@ -56,5 +56,6 @@ export default {
   signInWithPhone: "Se connecter avec le numéro de téléphone",
   phoneRequired: "Le numéro de téléphone est requis",
   passkey: "Passkey",
-  linkWallet: "Link a Wallet",
+  linkWallet: "Lier un portefeuille",
+  loginAsGuest: "Connectez-vous en tant qu'invité",
 } satisfies InAppWalletLocale;

package/src/react/web/wallets/shared/locale/ja.ts

@@ -54,5 +54,6 @@ export default {
   signInWithPhone: "電話番号でサインイン",
   phoneRequired: "電話番号は必須です",
   passkey: "パスキー",
-  linkWallet: "Link a Wallet",
+  linkWallet: "ウォレットをリンクする",
+  loginAsGuest: "ゲストとしてログイン",
 } satisfies InAppWalletLocale;

package/src/react/web/wallets/shared/locale/kr.ts

@@ -52,5 +52,6 @@ export default {
   signInWithPhone: "전화번호로 로그인",
   phoneRequired: "전화번호가 필요합니다",
   passkey: "비밀번호",
-  linkWallet: "Link a Wallet",
+  linkWallet: "지갑 연결",
+  loginAsGuest: "게스트로 로그인",
 } satisfies InAppWalletLocale;

package/src/react/web/wallets/shared/locale/tl.ts

@@ -55,5 +55,6 @@ export default {
   signInWithPhone: "Mag-login gamit ang numero ng telepono",
   phoneRequired: "Kinakailangan ang numero ng telepono",
   passkey: "Passkey",
-  linkWallet: "Link a Wallet",
+  linkWallet: "Mag-link ng Wallet",
+  loginAsGuest: "Mag-login bilang bisita",
 } satisfies InAppWalletLocale;

package/src/react/web/wallets/shared/locale/types.ts

@@ -50,5 +50,6 @@ export type InAppWalletLocale = {
   submitEmail: string;
   maxAccountsExceeded: string;
   passkey: string;
+  loginAsGuest: string;
   linkWallet: string;
 };

package/src/react/web/wallets/shared/locale/vi.ts

@@ -56,4 +56,5 @@ export default {
   phoneRequired: "Vui lòng nhập số điện thoại",
   passkey: "Passkey",
   linkWallet: "Link a Wallet",
+  loginAsGuest: "Đăng nhập với tư cách khách",
 } satisfies InAppWalletLocale;

package/src/react/web/wallets/shared/oauthSignIn.ts

@@ -1,6 +1,9 @@
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { getLoginUrl } from "../../../../wallets/in-app/core/authentication/getLoginPath.js";
-import type { InAppWalletSocialAuth } from "../../../../wallets/in-app/core/wallet/types.js";
+import type {
+  InAppWalletOAuth,
+  InAppWalletSocialAuth,
+} from "../../../../wallets/in-app/core/wallet/types.js";
 import type { Ecosystem } from "../../../../wallets/in-app/web/types.js";
 import type { Theme } from "../../../core/design-system/index.js";
 
@@ -25,7 +28,7 @@ function getWidthAndHeight(authOption: InAppWalletSocialAuth) {
 }
 
 function getOauthLoginPath(
-  authOption: InAppWalletSocialAuth,
+  authOption: InAppWalletOAuth,
   client: ThirdwebClient,
   ecosystem?: Ecosystem,
 ) {
@@ -37,6 +40,7 @@ function getOauthLoginPath(
     case "telegram":
     case "line":
     case "x":
+    case "guest":
     case "discord":
       return getLoginUrl({ authOption, client, ecosystem });
     default:

package/src/transaction/resolve-method.test.ts

@@ -0,0 +1,78 @@
+import { describe, expect, it } from "vitest";
+import {
+  USDT_CONTRACT,
+  USDT_CONTRACT_WITH_ABI,
+} from "../../test/src/test-contracts.js";
+import { resolveMethod } from "./resolve-method.js";
+
+describe.runIf(process.env.TW_SECRET_KEY)("resolveMethod", () => {
+  it("should return parseAbiItem result for function signature", async () => {
+    const result = await resolveMethod(
+      "function transfer(address to, uint256 amount)",
+    )(USDT_CONTRACT);
+    expect(result).toMatchInlineSnapshot(`
+      {
+        "inputs": [
+          {
+            "name": "to",
+            "type": "address",
+          },
+          {
+            "name": "amount",
+            "type": "uint256",
+          },
+        ],
+        "name": "transfer",
+        "outputs": [],
+        "stateMutability": "nonpayable",
+        "type": "function",
+      }
+    `);
+  });
+
+  it("should return parseAbiItem result for abi", async () => {
+    const result = await resolveMethod("transfer")(USDT_CONTRACT_WITH_ABI);
+    expect(result).toMatchInlineSnapshot(`
+      {
+        "inputs": [
+          {
+            "name": "_to",
+            "type": "address",
+          },
+          {
+            "name": "_value",
+            "type": "uint256",
+          },
+        ],
+        "name": "transfer",
+        "outputs": [],
+        "stateMutability": "nonpayable",
+        "type": "function",
+      }
+    `);
+  });
+
+  it("should return parseAbiItem result for abi", async () => {
+    const result = await resolveMethod("transfer")(USDT_CONTRACT);
+    expect(result).toMatchInlineSnapshot(`
+      {
+        "constant": false,
+        "inputs": [
+          {
+            "name": "_to",
+            "type": "address",
+          },
+          {
+            "name": "_value",
+            "type": "uint256",
+          },
+        ],
+        "name": "transfer",
+        "outputs": [],
+        "payable": false,
+        "stateMutability": "nonpayable",
+        "type": "function",
+      }
+    `);
+  });
+});