thirdweb 5.39.0 → 5.40.0

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

@@ -18,7 +18,7 @@ import type { SupportedTokens } from "../../core/utils/defaultTokens.js";
 import { EmbedContainer } from "./ConnectWallet/Modal/ConnectEmbed.js";
 import { useConnectLocale } from "./ConnectWallet/locale/getConnectLocale.js";
 import BuyScreen from "./ConnectWallet/screens/Buy/BuyScreen.js";
-import { PayTxHistoryScreen } from "./ConnectWallet/screens/Buy/pay-transactions/BuyTxHistory.js";
+import { ExecutingTxScreen } from "./TransactionButton/ExecutingScreen.js";
 import { DynamicHeight } from "./components/DynamicHeight.js";
 import { Spinner } from "./components/Spinner.js";
 import type { LocaleId } from "./types.js";
@@ -125,13 +125,6 @@ export type PayEmbedProps = {
    */
   connectOptions?: PayEmbedConnectOptions;
 
-  /**
-   * Customize the display of the PayEmbed UI.
-   */
-  metadata?: {
-    title?: string;
-  };
-
   style?: React.CSSProperties;
 };
 
@@ -159,7 +152,7 @@ export type PayEmbedProps = {
  */
 export function PayEmbed(props: PayEmbedProps) {
   const localeQuery = useConnectLocale(props.locale || "en_US");
-  const [screen, setScreen] = useState<"buy" | "tx-history">("buy");
+  const [screen, setScreen] = useState<"buy" | "execute-tx">("buy");
   const theme = props.theme || "dark";
 
   // to update cached chains ASAP, we skip using useEffect - this does not trigger a re-render so it's fine
@@ -172,6 +165,10 @@ export function PayEmbed(props: PayEmbedProps) {
   }
 
   let content = null;
+  const metadata =
+    props.payOptions && "metadata" in props.payOptions
+      ? props.payOptions.metadata
+      : null;
 
   if (!localeQuery.data) {
     content = (
@@ -190,41 +187,43 @@ export function PayEmbed(props: PayEmbedProps) {
     // show and hide screens with CSS to not lose state when switching between them
     content = (
       <>
-        <div style={{ display: screen === "tx-history" ? "none" : "inherit" }}>
+        <div style={{ display: screen === "buy" ? "inherit" : "none" }}>
           <BuyScreen
-            title={props.metadata?.title || "Buy"}
+            title={metadata?.name || "Buy"}
             isEmbed={true}
             supportedTokens={props.supportedTokens}
             theme={theme}
             client={props.client}
             connectLocale={localeQuery.data}
-            onViewPendingTx={() => {
-              setScreen("tx-history");
-            }}
-            payOptions={props.payOptions || {}}
+            payOptions={
+              props.payOptions || {
+                mode: "fund_wallet",
+              }
+            }
             onDone={() => {
-              // noop
+              if (props.payOptions?.mode === "transaction") {
+                setScreen("execute-tx");
+              }
             }}
             connectOptions={props.connectOptions}
-            buyForTx={undefined}
             onBack={undefined}
           />
         </div>
-        {/* this does not need to persist so we can just show-hide it with JS */}
-        {screen === "tx-history" && (
-          <PayTxHistoryScreen
-            title={props.metadata?.title || "Buy"}
-            client={props.client}
-            onBack={() => {
-              setScreen("buy");
-            }}
-            onDone={() => {
-              // noop
-            }}
-            isBuyForTx={false}
-            isEmbed={true}
-          />
-        )}
+
+        {screen === "execute-tx" &&
+          props.payOptions?.mode === "transaction" &&
+          props.payOptions.transaction && (
+            <ExecutingTxScreen
+              tx={props.payOptions.transaction}
+              closeModal={() => {
+                setScreen("buy");
+              }}
+              onBack={() => {
+                setScreen("buy");
+              }}
+              onTxSent={() => {}}
+            />
+          )}
       </>
     );
   }

package/src/react/web/ui/TransactionButton/ExecutingScreen.tsx

@@ -0,0 +1,127 @@
+import { CheckCircledIcon, ExternalLinkIcon } from "@radix-ui/react-icons";
+import { useCallback, useEffect, useRef, useState } from "react";
+import type { Hex } from "viem";
+import type { WaitForReceiptOptions } from "../../../../transaction/actions/wait-for-tx-receipt.js";
+import type { PreparedTransaction } from "../../../../transaction/prepare-transaction.js";
+import { iconSize } from "../../../core/design-system/index.js";
+import { useChainExplorers } from "../../../core/hooks/others/useChainQuery.js";
+import { useSendTransaction } from "../../hooks/transaction/useSendTransaction.js";
+import { AccentFailIcon } from "../ConnectWallet/icons/AccentFailIcon.js";
+import { Spacer } from "../components/Spacer.js";
+import { Spinner } from "../components/Spinner.js";
+import { Container, ModalHeader } from "../components/basic.js";
+import { Button, ButtonLink } from "../components/buttons.js";
+import { Text } from "../components/text.js";
+
+export function ExecutingTxScreen(props: {
+  tx: PreparedTransaction;
+  closeModal: () => void;
+  onTxSent: (data: WaitForReceiptOptions) => void;
+  onBack?: () => void;
+}) {
+  const sendTxCore = useSendTransaction({
+    payModal: false,
+  });
+  const [txHash, setTxHash] = useState<Hex | undefined>();
+  const chainExplorers = useChainExplorers(props.tx.chain);
+  const [status, setStatus] = useState<"loading" | "failed" | "sent">(
+    "loading",
+  );
+
+  const sendTx = useCallback(async () => {
+    setStatus("loading");
+    try {
+      const txData = await sendTxCore.mutateAsync(props.tx);
+      setTxHash(txData.transactionHash);
+      props.onTxSent(txData);
+      setStatus("sent");
+    } catch (e) {
+      // Do not reject the transaction here, because the user may want to try again
+      // we only reject on modal close
+      console.error(e);
+      setStatus("failed");
+    }
+  }, [sendTxCore, props.tx, props.onTxSent]);
+
+  const done = useRef(false);
+  useEffect(() => {
+    if (done.current) {
+      return;
+    }
+
+    done.current = true;
+    sendTx();
+  }, [sendTx]);
+
+  return (
+    <Container p="lg">
+      <ModalHeader title="Transaction" onBack={props.onBack} />
+
+      <Spacer y="xxl" />
+      <Spacer y="xxl" />
+
+      <Container flex="row" center="x">
+        {status === "loading" && <Spinner size="xxl" color="accentText" />}
+        {status === "failed" && <AccentFailIcon size={iconSize["3xl"]} />}
+        {status === "sent" && (
+          <Container color="success" flex="row" center="both">
+            <CheckCircledIcon
+              width={iconSize["3xl"]}
+              height={iconSize["3xl"]}
+            />
+          </Container>
+        )}
+      </Container>
+      <Spacer y="lg" />
+
+      <Text color="primaryText" center size="lg">
+        {status === "loading" && "Sending transaction"}
+        {status === "failed" && "Transaction failed"}
+        {status === "sent" && "Transaction sent"}
+      </Text>
+      <Spacer y="sm" />
+      <Text color="danger" center size="sm">
+        {status === "failed" && sendTxCore.error
+          ? sendTxCore.error.message
+          : ""}
+      </Text>
+
+      <Spacer y="xxl" />
+      <Spacer y="xxl" />
+
+      {status === "failed" && (
+        <Button variant="accent" fullWidth onClick={sendTx}>
+          Try Again
+        </Button>
+      )}
+
+      {status === "sent" && (
+        <>
+          <Button variant="accent" fullWidth onClick={props.closeModal}>
+            Done
+          </Button>
+          {txHash && (
+            <>
+              <Spacer y="sm" />
+              <ButtonLink
+                fullWidth
+                variant="outline"
+                href={`${chainExplorers.explorers[0]?.url}/tx/${txHash}`}
+                target="_blank"
+                as="a"
+                gap="xs"
+                style={{
+                  textDecoration: "none",
+                  color: "inherit",
+                }}
+              >
+                View on Explorer{" "}
+                <ExternalLinkIcon width={iconSize.sm} height={iconSize.sm} />
+              </ButtonLink>
+            </>
+          )}
+        </>
+      )}
+    </Container>
+  );
+}

package/src/react/web/ui/TransactionButton/TransactionModal.tsx

@@ -0,0 +1,83 @@
+import { useState } from "react";
+import type { ThirdwebClient } from "../../../../client/client.js";
+import type { WaitForReceiptOptions } from "../../../../transaction/actions/wait-for-tx-receipt.js";
+import type { PreparedTransaction } from "../../../../transaction/prepare-transaction.js";
+import { CustomThemeProvider } from "../../../core/design-system/CustomThemeProvider.js";
+import type { Theme } from "../../../core/design-system/index.js";
+import type { PayUIOptions } from "../../../core/hooks/connection/ConnectButtonProps.js";
+import type { SupportedTokens } from "../../../core/utils/defaultTokens.js";
+import { LoadingScreen } from "../../wallets/shared/LoadingScreen.js";
+import { useConnectLocale } from "../ConnectWallet/locale/getConnectLocale.js";
+import { LazyBuyScreen } from "../ConnectWallet/screens/Buy/LazyBuyScreen.js";
+import { Modal } from "../components/Modal.js";
+import type { LocaleId } from "../types.js";
+import { ExecutingTxScreen } from "./ExecutingScreen.js";
+
+export type ModalProps = {
+  title: string;
+  onComplete: () => void;
+  onClose: () => void;
+  client: ThirdwebClient;
+  localeId: LocaleId;
+  supportedTokens?: SupportedTokens;
+  theme: Theme | "light" | "dark";
+  tx: PreparedTransaction;
+  payOptions: PayUIOptions;
+  onTxSent: (data: WaitForReceiptOptions) => void;
+};
+
+export function TransactionModal(props: ModalProps) {
+  return (
+    <CustomThemeProvider theme={props.theme}>
+      <Modal
+        open={true}
+        size="compact"
+        setOpen={(_open) => {
+          if (!_open) {
+            props.onClose();
+          }
+        }}
+      >
+        <TransactionModalContent {...props} />
+      </Modal>
+    </CustomThemeProvider>
+  );
+}
+
+export function TransactionModalContent(
+  props: ModalProps & { onBack?: () => void },
+) {
+  const localeQuery = useConnectLocale(props.localeId);
+  const [screen, setScreen] = useState<"buy" | "execute-tx">("buy");
+
+  if (!localeQuery.data) {
+    return <LoadingScreen />;
+  }
+
+  if (screen === "execute-tx") {
+    return (
+      <ExecutingTxScreen
+        tx={props.tx}
+        closeModal={props.onClose}
+        onTxSent={props.onTxSent}
+      />
+    );
+  }
+
+  return (
+    <LazyBuyScreen
+      title={props.title}
+      isEmbed={false}
+      client={props.client}
+      onBack={props.onBack}
+      supportedTokens={props.supportedTokens}
+      connectLocale={localeQuery.data}
+      theme={typeof props.theme === "string" ? props.theme : props.theme.type}
+      payOptions={props.payOptions}
+      onDone={() => {
+        setScreen("execute-tx");
+      }}
+      connectOptions={undefined}
+    />
+  );
+}

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

@@ -7,6 +7,7 @@ import type { ThirdwebClient } from "../../../../client/client.js";
 import { webLocalStorage } from "../../../../utils/storage/webStorage.js";
 import { getEcosystemWalletAuthOptions } from "../../../../wallets/ecosystem/get-ecosystem-wallet-auth-options.js";
 import { isEcosystemWallet } from "../../../../wallets/ecosystem/is-ecosystem-wallet.js";
+import { loginWithOauthRedirect } from "../../../../wallets/in-app/web/lib/auth/oauth.js";
 import type { Account, Wallet } from "../../../../wallets/interfaces/wallet.js";
 import {
   type AuthOption,
@@ -37,7 +38,7 @@ import { InputSelectionUI } from "../in-app/InputSelectionUI.js";
 import { validateEmail } from "../in-app/validateEmail.js";
 import { LoadingScreen } from "./LoadingScreen.js";
 import type { InAppWalletLocale } from "./locale/types.js";
-import { openOauthSignInWindow } from "./openOauthSignInWindow.js";
+import { openOauthSignInWindow } from "./oauthSignIn.js";
 
 export type ConnectWalletSelectUIState =
   | undefined
@@ -164,6 +165,19 @@ export const ConnectWalletSocialOptions = (
 
   // Need to trigger login on button click to avoid popup from being blocked
   const handleSocialLogin = async (strategy: SocialAuthOption) => {
+    const walletConfig = wallet.getConfig();
+    if (
+      walletConfig &&
+      "auth" in walletConfig &&
+      walletConfig?.auth?.mode === "redirect"
+    ) {
+      return loginWithOauthRedirect({
+        authOption: strategy,
+        client: props.client,
+        ecosystem: ecosystemInfo,
+      });
+    }
+
     try {
       const socialLoginWindow = openOauthSignInWindow({
         authOption: strategy,
@@ -205,10 +219,10 @@ export const ConnectWalletSocialOptions = (
 
       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
+      // Note: do not call done() here, it will be called SocialLogin component
+      // we simply trigger the connect and save promise here - its resolution is handled in SocialLogin
     } catch (e) {
-      console.error(`Error sign in with ${strategy}`, e);
+      console.error(`Error signing in with ${strategy}`, e);
     }
   };
 

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

@@ -5,6 +5,7 @@ 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 { InAppWalletSocialAuth } from "../../../../wallets/in-app/core/wallet/types.js";
+import { loginWithOauthRedirect } from "../../../../wallets/in-app/web/lib/auth/oauth.js";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import { useCustomTheme } from "../../../core/design-system/CustomThemeProvider.js";
 import { setLastAuthProvider } from "../../../core/utils/storage.js";
@@ -15,7 +16,7 @@ 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";
-import { openOauthSignInWindow } from "./openOauthSignInWindow.js";
+import { openOauthSignInWindow } from "./oauthSignIn.js";
 
 /**
  * @internal
@@ -42,6 +43,24 @@ export function SocialLogin(props: {
   );
 
   const handleSocialLogin = async () => {
+    const walletConfig = wallet.getConfig();
+    if (
+      walletConfig &&
+      "auth" in walletConfig &&
+      walletConfig?.auth?.mode === "redirect"
+    ) {
+      return loginWithOauthRedirect({
+        authOption: props.socialAuth,
+        client: props.client,
+        ecosystem: isEcosystemWallet(wallet)
+          ? {
+              id: wallet.id,
+              partnerId: wallet.getConfig()?.partnerId,
+            }
+          : undefined,
+      });
+    }
+
     try {
       const socialWindow = openOauthSignInWindow({
         authOption: props.socialAuth,

package/src/react/web/wallets/shared/{openOauthSignInWindow.ts → oauthSignIn.ts}

@@ -41,7 +41,6 @@ function getOauthLoginPath(
 }
 
 /**
- *
  * @internal
  */
 export function openOauthSignInWindow({
@@ -137,7 +136,7 @@ const spinnerWindowHtml = `
   @keyframes spin {
     100% {
       transform: rotate(360deg);
-    }
+        }
   }
 </style>
 `;

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.39.0";
+export const version = "5.40.0";

package/src/wallets/ecosystem/types.ts

@@ -6,6 +6,9 @@ import type { Ecosystem } from "../in-app/web/types.js";
 
 export type EcosystemWalletCreationOptions = {
   partnerId?: string;
+  auth?: {
+    mode?: "popup" | "redirect";
+  };
 };
 
 export type EcosystemWalletConnectionOptions = InAppWalletConnectionOptions & {

package/src/wallets/in-app/core/interfaces/connector.ts

@@ -1,7 +1,9 @@
+import type { SocialAuthOption } from "../../../../wallets/types.js";
 import type { Account } from "../../../interfaces/wallet.js";
 import type {
   AuthArgsType,
   AuthLoginReturnType,
+  AuthStoredTokenWithCookieReturnType,
   GetUser,
   LogoutReturnType,
   PreAuthArgsType,
@@ -12,6 +14,10 @@ export interface InAppConnector {
   getUser(): Promise<GetUser>;
   getAccount(): Promise<Account>;
   preAuthenticate(args: PreAuthArgsType): Promise<SendEmailOtpReturnType>;
+  authenticateWithRedirect?(strategy: SocialAuthOption): void;
+  loginWithAuthToken?(
+    authResult: AuthStoredTokenWithCookieReturnType,
+  ): Promise<AuthLoginReturnType>;
   authenticate(args: AuthArgsType): Promise<AuthLoginReturnType>;
   logout(): Promise<LogoutReturnType>;
 }

package/src/wallets/in-app/core/wallet/index.ts

@@ -1,6 +1,10 @@
 import { ethereum } from "../../../../chains/chain-definitions/ethereum.js";
 import type { Chain } from "../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
+import {
+  type SocialAuthOption,
+  socialAuthOptions,
+} from "../../../../wallets/types.js";
 import type { Account, Wallet } from "../../../interfaces/wallet.js";
 import type { EcosystemWalletId, WalletId } from "../../../wallet-types.js";
 import type {
@@ -35,6 +39,20 @@ export async function connectInAppWallet(
     | CreateWalletArgs<EcosystemWalletId>[1],
   connector: InAppConnector,
 ): Promise<[Account, Chain]> {
+  if (
+    createOptions?.auth?.mode === "redirect" &&
+    connector.authenticateWithRedirect
+  ) {
+    const strategy = options.strategy;
+    if (!socialAuthOptions.includes(strategy as SocialAuthOption)) {
+      throw new Error("This authentication method does not support redirects");
+    }
+    connector.authenticateWithRedirect(strategy as SocialAuthOption);
+  }
+  // If we don't have authenticateWithRedirect then it's likely react native, so the default is to redirect and we can carry on
+  // IF WE EVER ADD MORE CONNECTOR TYPES, this could cause redirect to be ignored despite being specified
+  // TODO: In V6, make everything redirect auth
+
   const authResult = await connector.authenticate(options);
   const authAccount = authResult.user.account;
 
@@ -66,6 +84,10 @@ export async function autoConnectInAppWallet(
     | CreateWalletArgs<EcosystemWalletId>[1],
   connector: InAppConnector,
 ): Promise<[Account, Chain]> {
+  if (options.authResult && connector.loginWithAuthToken) {
+    await connector.loginWithAuthToken(options.authResult);
+  }
+
   const user = await getAuthenticatedUser(connector);
   if (!user) {
     throw new Error("Failed to authenticate user.");

package/src/wallets/in-app/core/wallet/types.ts

@@ -3,6 +3,7 @@ import type { ThirdwebClient } from "../../../../client/client.js";
 import type { SmartWalletOptions } from "../../../smart/types.js";
 import type { AuthOption, SocialAuthOption } from "../../../types.js";
 import type {
+  AuthStoredTokenWithCookieReturnType,
   MultiStepAuthArgsType,
   SingleStepAuthArgsType,
 } from "../authentication/type.js";
@@ -13,10 +14,12 @@ export type InAppWalletConnectionOptions = (
 ) & {
   client: ThirdwebClient;
   chain?: Chain;
+  redirect?: boolean;
 };
 
 export type InAppWalletAutoConnectOptions = {
   client: ThirdwebClient;
+  authResult?: AuthStoredTokenWithCookieReturnType;
   chain?: Chain;
 };
 
@@ -27,6 +30,7 @@ export type InAppWalletCreationOptions =
   | {
       auth?: {
         options: InAppWalletAuth[];
+        mode?: "popup" | "redirect";
       };
       metadata?: {
         image?: {

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

@@ -53,6 +53,16 @@ import { createInAppWallet } from "../core/wallet/in-app-core.js";
  *  hidePrivateKeyExport: true
  * });
  * ```
+ *
+ * Open the Oauth window in the same tab
+ * ```ts
+ * import { inAppWallet } from "thirdweb/wallets";
+ * const wallet = inAppWallet({
+ *  auth: {
+ *    mode: "redirect"
+ *  }
+ * });
+ * ```
  * @wallet
  */
 export function inAppWallet(

package/src/wallets/in-app/web/lib/auth/index.ts

@@ -1,7 +1,8 @@
 import type { ThirdwebClient } from "../../../../../client/client.js";
+import type { OneOf } from "../../../../../utils/type-utils.js";
+import type { SocialAuthOption } from "../../../../../wallets/types.js";
 import {
   type AuthArgsType,
-  type AuthLoginReturnType,
   type GetAuthenticatedUserParams,
   type PreAuthArgsType,
   UserWalletStatus,
@@ -143,8 +144,18 @@ export async function preAuthenticate(args: PreAuthArgsType) {
  * @wallet
  */
 export async function authenticate(
-  args: AuthArgsType,
-): Promise<AuthLoginReturnType> {
+  args: OneOf<
+    | AuthArgsType
+    | {
+        strategy: SocialAuthOption;
+        client: ThirdwebClient;
+        ecosystem?: Ecosystem;
+        redirect: boolean;
+      }
+  >,
+) {
   const connector = await getInAppWalletConnector(args.client, args.ecosystem);
+  if (args.redirect && connector.authenticateWithRedirect)
+    return connector.authenticateWithRedirect(args.strategy);
   return connector.authenticate(args);
 }

package/src/wallets/in-app/web/lib/auth/oauth.ts

@@ -40,6 +40,18 @@ export const getSocialAuthLoginPath = (
   return baseUrl;
 };
 
+export const loginWithOauthRedirect = (options: {
+  authOption: SocialAuthOption;
+  client: ThirdwebClient;
+  ecosystem?: Ecosystem;
+}): void => {
+  const redirectUrl = new URL(window.location.href);
+  redirectUrl.searchParams.set("walletId", options.ecosystem?.id || "inApp");
+  redirectUrl.searchParams.set("authProvider", options.authOption);
+  const loginUrl = `${getSocialAuthLoginPath(options.authOption, options.client, options.ecosystem)}&redirectUrl=${encodeURIComponent(redirectUrl.toString())}`;
+  window.location.href = loginUrl;
+};
+
 export const loginWithOauth = async (options: {
   authOption: SocialAuthOption;
   client: ThirdwebClient;

package/src/wallets/in-app/web/lib/get-url-token.ts

@@ -0,0 +1,36 @@
+import type { AuthOption } from "../../../../wallets/types.js";
+import type { WalletId } from "../../../wallet-types.js";
+import type { AuthStoredTokenWithCookieReturnType } from "../../core/authentication/type.js";
+
+/**
+ * Checks for an auth token and associated metadata in the current URL
+ */
+export function getUrlToken(): {
+  walletId?: WalletId;
+  authResult?: AuthStoredTokenWithCookieReturnType;
+  authProvider?: AuthOption;
+} {
+  if (!window) {
+    throw new Error("Attempted to fetch a URL token on the server");
+  }
+
+  const queryString = window.location.search;
+  const params = new URLSearchParams(queryString);
+  const authResultString = params.get("authResult");
+  const walletId = params.get("walletId") as WalletId | undefined;
+  const authProvider = params.get("authProvider") as AuthOption | undefined;
+
+  if (authResultString && walletId) {
+    const authResult = JSON.parse(authResultString);
+    params.delete("authResult");
+    params.delete("walletId");
+    params.delete("authProvider");
+    window.history.pushState(
+      {},
+      "",
+      `${window.location.pathname}?${params.toString()}`,
+    );
+    return { walletId, authResult, authProvider };
+  }
+  return {};
+}