thirdweb 5.98.1 → 5.99.0

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

@@ -297,6 +297,9 @@ export function ConnectButton(props: ConnectButtonProps) {
   );
   const localeQuery = useConnectLocale(props.locale || "en_US");
   const connectionManager = useConnectionManager();
+  const activeAccount = useActiveAccount();
+  const activeWallet = useActiveWallet();
+  const siweAuth = useSiweAuth(activeWallet, activeAccount, props.auth);
 
   usePreloadWalletProviders({
     wallets,
@@ -337,6 +340,7 @@ export function ConnectButton(props: ConnectButtonProps) {
       }
       accountAbstraction={props.accountAbstraction}
       onConnect={props.onConnect}
+      siweAuth={siweAuth}
     />
   );
 
@@ -362,7 +366,11 @@ export function ConnectButton(props: ConnectButtonProps) {
 
   return (
     <WalletUIStatesProvider theme={props.theme} isOpen={false}>
-      <ConnectButtonInner {...props} connectLocale={localeQuery.data} />
+      <ConnectButtonInner
+        {...props}
+        siweAuth={siweAuth}
+        connectLocale={localeQuery.data}
+      />
       <ConnectModal
         shouldSetActive={true}
         accountAbstraction={props.accountAbstraction}
@@ -396,11 +404,11 @@ export function ConnectButton(props: ConnectButtonProps) {
 function ConnectButtonInner(
   props: ConnectButtonProps & {
     connectLocale: ConnectLocale;
+    siweAuth: ReturnType<typeof useSiweAuth>;
   },
 ) {
-  const activeWallet = useActiveWallet();
+  const siweAuth = props.siweAuth;
   const activeAccount = useActiveAccount();
-  const siweAuth = useSiweAuth(activeWallet, activeAccount, props.auth);
   const [showSignatureModal, setShowSignatureModal] = useState(false);
 
   // if wallet gets disconnected suddently, close the signature modal if it's open

package/src/react/web/ui/ConnectWallet/Modal/ConnectEmbed.tsx

@@ -247,6 +247,7 @@ export function ConnectEmbed(props: ConnectEmbedProps) {
       chain={preferredChain}
       appMetadata={props.appMetadata}
       client={props.client}
+      siweAuth={siweAuth}
       wallets={wallets}
       accountAbstraction={props.accountAbstraction}
       timeout={

package/src/react/web/ui/ConnectWallet/screens/Buy/fiat/OnRampScreen.tsx

@@ -23,10 +23,7 @@ import { sendTransaction } from "../../../../../../../transaction/actions/send-t
 import type { WaitForReceiptOptions } from "../../../../../../../transaction/actions/wait-for-tx-receipt.js";
 import { waitForReceipt } from "../../../../../../../transaction/actions/wait-for-tx-receipt.js";
 import { formatNumber } from "../../../../../../../utils/formatNumber.js";
-import { isEcosystemWallet } from "../../../../../../../wallets/ecosystem/is-ecosystem-wallet.js";
-import { isInAppWallet } from "../../../../../../../wallets/in-app/core/wallet/index.js";
-import type { Wallet } from "../../../../../../../wallets/interfaces/wallet.js";
-import { isSmartWallet } from "../../../../../../../wallets/smart/is-smart-wallet.js";
+import { isInAppSigner } from "../../../../../../../wallets/in-app/core/wallet/is-in-app-signer.js";
 import { spacing } from "../../../../../../core/design-system/index.js";
 import { useChainName } from "../../../../../../core/hooks/others/useChainQuery.js";
 import { useBuyWithCryptoStatus } from "../../../../../../core/hooks/pay/useBuyWithCryptoStatus.js";
@@ -779,20 +776,3 @@ function useSwapMutation(props: {
     },
   });
 }
-
-function isInAppSigner(options: {
-  wallet: Wallet;
-  connectedWallets: Wallet[];
-}) {
-  const isInAppOrEcosystem = (w: Wallet) =>
-    isInAppWallet(w) || isEcosystemWallet(w);
-  const isSmartWalletWithAdmin =
-    isSmartWallet(options.wallet) &&
-    options.connectedWallets.some(
-      (w) =>
-        isInAppOrEcosystem(w) &&
-        w.getAccount()?.address?.toLowerCase() ===
-          options.wallet.getAdminAccount?.()?.address?.toLowerCase(),
-    );
-  return isInAppOrEcosystem(options.wallet) || isSmartWalletWithAdmin;
-}

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

@@ -9,13 +9,19 @@ import type { AppMetadata } from "../../../wallets/types.js";
 import type { WalletId } from "../../../wallets/wallet-types.js";
 import { CustomThemeProvider } from "../../core/design-system/CustomThemeProvider.js";
 import type { Theme } from "../../core/design-system/index.js";
-import type { SiweAuthOptions } from "../../core/hooks/auth/useSiweAuth.js";
+import {
+  type SiweAuthOptions,
+  useSiweAuth,
+} from "../../core/hooks/auth/useSiweAuth.js";
 import type {
   ConnectButton_connectModalOptions,
   PayUIOptions,
 } from "../../core/hooks/connection/ConnectButtonProps.js";
+import { useActiveAccount } from "../../core/hooks/wallets/useActiveAccount.js";
+import { useActiveWallet } from "../../core/hooks/wallets/useActiveWallet.js";
 import { useConnectionManager } from "../../core/providers/connection-manager.js";
 import type { SupportedTokens } from "../../core/utils/defaultTokens.js";
+import { AutoConnect } from "../../web/ui/AutoConnect/AutoConnect.js";
 import { EmbedContainer } from "./ConnectWallet/Modal/ConnectEmbed.js";
 import { useConnectLocale } from "./ConnectWallet/locale/getConnectLocale.js";
 import BuyScreen from "./ConnectWallet/screens/Buy/BuyScreen.js";
@@ -300,6 +306,13 @@ export function PayEmbed(props: PayEmbedProps) {
   const [screen, setScreen] = useState<"buy" | "execute-tx">("buy");
   const theme = props.theme || "dark";
   const connectionManager = useConnectionManager();
+  const activeAccount = useActiveAccount();
+  const activeWallet = useActiveWallet();
+  const siweAuth = useSiweAuth(
+    activeWallet,
+    activeAccount,
+    props.connectOptions?.auth,
+  );
 
   // Add props.chain and props.chains to defined chains store
   useEffect(() => {
@@ -342,6 +355,7 @@ export function PayEmbed(props: PayEmbedProps) {
   } else {
     content = (
       <>
+        <AutoConnect client={props.client} siweAuth={siweAuth} />
         {screen === "buy" && (
           <BuyScreen
             title={metadata?.name || "Buy"}

package/src/version.ts

@@ -1 +1 @@
-export const version = "5.98.1";
+export const version = "5.99.0";

package/src/wallets/coinbase/coinbase-web.ts

@@ -1,14 +1,8 @@
 import type { ProviderInterface } from "@coinbase/wallet-sdk";
+import type { Preference } from "@coinbase/wallet-sdk/dist/core/provider/interface.js";
 import type { Address } from "abitype";
 import * as ox__Hex from "ox/Hex";
 import * as ox__TypedData from "ox/TypedData";
-import type { Account, Wallet } from "../interfaces/wallet.js";
-import type { SendTransactionOption } from "../interfaces/wallet.js";
-import type { AppMetadata, DisconnectFn, SwitchChainFn } from "../types.js";
-import { getValidPublicRPCUrl } from "../utils/chains.js";
-import { normalizeChainId } from "../utils/normalizeChainId.js";
-
-import type { Preference } from "@coinbase/wallet-sdk/dist/core/provider/interface.js";
 import { trackTransaction } from "../../analytics/track/transaction.js";
 import type { Chain } from "../../chains/types.js";
 import { getCachedChain, getChainMetadata } from "../../chains/utils.js";
@@ -22,14 +16,12 @@ import {
 } from "../../utils/encoding/hex.js";
 import { parseTypedData } from "../../utils/signatures/helpers/parse-typed-data.js";
 import { COINBASE } from "../constants.js";
-import type {
-  GetCallsStatusResponse,
-  WalletCapabilities,
-  WalletCapabilitiesRecord,
-  WalletSendCallsId,
-  WalletSendCallsParameters,
-} from "../eip5792/types.js";
+import type { Account, Wallet } from "../interfaces/wallet.js";
+import type { SendTransactionOption } from "../interfaces/wallet.js";
+import type { AppMetadata, DisconnectFn, SwitchChainFn } from "../types.js";
+import { getValidPublicRPCUrl } from "../utils/chains.js";
 import { getDefaultAppMetadata } from "../utils/defaultDappMetadata.js";
+import { normalizeChainId } from "../utils/normalizeChainId.js";
 import type { WalletEmitter } from "../wallet-emitter.js";
 import type {
   CreateWalletArgs,
@@ -171,109 +163,6 @@ export function isCoinbaseSDKWallet(
   return wallet.id === COINBASE;
 }
 
-/**
- * @internal
- */
-export async function coinbaseSDKWalletGetCapabilities(args: {
-  wallet: Wallet<typeof COINBASE>;
-}) {
-  const { wallet } = args;
-
-  const account = wallet.getAccount();
-  if (!account) {
-    return {
-      message: `Can't get capabilities, no account connected for wallet: ${wallet.id}`,
-    };
-  }
-
-  const config = wallet.getConfig();
-  const provider = await getCoinbaseWebProvider(config);
-  try {
-    return (await provider.request({
-      method: "wallet_getCapabilities",
-      params: [account.address],
-    })) as WalletCapabilitiesRecord<WalletCapabilities, number>;
-  } catch (error: unknown) {
-    if (/unsupport|not support/i.test((error as Error).message)) {
-      return {
-        message: `${wallet.id} does not support wallet_getCapabilities, reach out to them directly to request EIP-5792 support.`,
-      };
-    }
-    throw error;
-  }
-}
-
-/**
- * @internal
- */
-export async function coinbaseSDKWalletSendCalls(args: {
-  wallet: Wallet<typeof COINBASE>;
-  params: WalletSendCallsParameters;
-}) {
-  const { wallet, params } = args;
-
-  const config = wallet.getConfig();
-  const provider = await getCoinbaseWebProvider(config);
-
-  try {
-    return (await provider.request({
-      method: "wallet_sendCalls",
-      params,
-    })) as WalletSendCallsId;
-  } catch (error) {
-    if (/unsupport|not support/i.test((error as Error).message)) {
-      throw new Error(
-        `${wallet.id} does not support wallet_sendCalls, reach out to them directly to request EIP-5792 support.`,
-      );
-    }
-    throw error;
-  }
-}
-
-/**
- * @internal
- */
-export async function coinbaseSDKWalletShowCallsStatus(args: {
-  wallet: Wallet<typeof COINBASE>;
-  bundleId: string;
-}) {
-  const { wallet, bundleId } = args;
-
-  const provider = await getCoinbaseWebProvider(wallet.getConfig());
-
-  try {
-    return await provider.request({
-      method: "wallet_showCallsStatus",
-      params: [bundleId],
-    });
-  } catch (error: unknown) {
-    if (/unsupport|not support/i.test((error as Error).message)) {
-      throw new Error(
-        `${wallet.id} does not support wallet_showCallsStatus, reach out to them directly to request EIP-5792 support.`,
-      );
-    }
-    throw error;
-  }
-}
-
-/**
- * @internal
- */
-export async function coinbaseSDKWalletGetCallsStatus(args: {
-  wallet: Wallet<typeof COINBASE>;
-  bundleId: string;
-}) {
-  const { wallet, bundleId } = args;
-
-  const config = wallet.getConfig();
-  const provider = await getCoinbaseWebProvider(config);
-
-  return provider.request({
-    method: "wallet_getCallsStatus",
-    params: [bundleId],
-  }) as Promise<GetCallsStatusResponse>;
-}
-
 function createAccount({
   provider,
   address,

package/src/wallets/connection/autoConnectCore.ts

@@ -8,6 +8,7 @@ import type {
   AuthArgsType,
   AuthStoredTokenWithCookieReturnType,
 } from "../in-app/core/authentication/types.js";
+import { isInAppSigner } from "../in-app/core/wallet/is-in-app-signer.js";
 import { getUrlToken } from "../in-app/web/lib/get-url-token.js";
 import type { Wallet } from "../interfaces/wallet.js";
 import {
@@ -82,11 +83,11 @@ const _autoConnectCore = async ({
     getStoredActiveWalletId(storage),
   ]);
 
-  const result = getUrlToken();
+  const urlToken = getUrlToken();
 
   // If an auth cookie is found and this site supports the wallet, we'll set the auth cookie in the client storage
-  const wallet = wallets.find((w) => w.id === result?.walletId);
-  if (result?.authCookie && wallet) {
+  const wallet = wallets.find((w) => w.id === urlToken?.walletId);
+  if (urlToken?.authCookie && wallet) {
     const clientStorage = new ClientScopedStorage({
       storage,
       clientId: props.client.clientId,
@@ -97,17 +98,17 @@ const _autoConnectCore = async ({
           }
         : undefined,
     });
-    await clientStorage.saveAuthCookie(result.authCookie);
+    await clientStorage.saveAuthCookie(urlToken.authCookie);
   }
-  if (result?.walletId) {
-    lastActiveWalletId = result.walletId;
-    lastConnectedWalletIds = lastConnectedWalletIds?.includes(result.walletId)
+  if (urlToken?.walletId) {
+    lastActiveWalletId = urlToken.walletId;
+    lastConnectedWalletIds = lastConnectedWalletIds?.includes(urlToken.walletId)
       ? lastConnectedWalletIds
-      : [result.walletId, ...(lastConnectedWalletIds || [])];
+      : [urlToken.walletId, ...(lastConnectedWalletIds || [])];
   }
 
-  if (result?.authProvider) {
-    await setLastAuthProvider?.(result.authProvider, storage);
+  if (urlToken?.authProvider) {
+    await setLastAuthProvider?.(urlToken.authProvider, storage);
   }
 
   // if no wallets were last connected or we didn't receive an auth token
@@ -132,7 +133,7 @@ const _autoConnectCore = async ({
         wallet: activeWallet,
         client: props.client,
         lastConnectedChain,
-        authResult: result?.authResult,
+        authResult: urlToken?.authResult,
       }),
       {
         ms: timeout,
@@ -183,13 +184,33 @@ const _autoConnectCore = async ({
         wallet,
         client: props.client,
         lastConnectedChain,
-        authResult: result?.authResult,
+        authResult: urlToken?.authResult,
       });
       manager.addConnectedWallet(wallet);
     } catch {
       // no-op
     }
   }
+
+  // Auto-login with SIWE
+  const isIAW =
+    activeWallet &&
+    isInAppSigner({
+      wallet: activeWallet,
+      connectedWallets: activeWallet
+        ? [activeWallet, ...otherWallets]
+        : otherWallets,
+    });
+  if (
+    isIAW &&
+    props.siweAuth?.requiresAuth &&
+    !props.siweAuth?.isLoggedIn &&
+    !props.siweAuth?.isLoggingIn
+  ) {
+    await props.siweAuth?.doLogin().catch((err) => {
+      console.warn("Error signing in with SIWE:", err.message);
+    });
+  }
   manager.isAutoConnecting.setValue(false);
   return autoConnected; // useQuery needs a return value
 };

package/src/wallets/connection/types.ts

@@ -118,4 +118,14 @@ export type AutoConnectProps = {
    * Callback to be called when the connection is timeout-ed
    */
   onTimeout?: () => void;
+
+  /**
+   * @hidden
+   */
+  siweAuth?: {
+    requiresAuth: boolean;
+    doLogin: () => Promise<void>;
+    isLoggedIn: boolean | undefined;
+    isLoggingIn: boolean | undefined;
+  };
 };

package/src/wallets/eip5792/get-calls-status.test.ts

@@ -89,7 +89,7 @@ describe.sequential("injected wallet", async () => {
     const promise = getCallsStatus({
       wallet: wallet,
       client: TEST_CLIENT,
-      bundleId: "test",
+      id: "test",
     });
 
     await expect(promise).rejects.toMatchInlineSnapshot(
@@ -107,17 +107,23 @@ describe.sequential("injected wallet", async () => {
     const result = await getCallsStatus({
       wallet: wallet,
       client: TEST_CLIENT,
-      bundleId: "test",
+      id: "test",
     });
 
     expect(mocks.injectedRequest).toHaveBeenCalledWith({
       method: "wallet_getCallsStatus",
       params: ["test"],
     });
-    expect(result).toEqual({
-      status: "CONFIRMED",
-      receipts: [],
-    });
+    expect(result).toMatchInlineSnapshot(`
+      {
+        "atomic": false,
+        "chainId": undefined,
+        "receipts": [],
+        "status": "success",
+        "statusCode": 200,
+        "version": "2.0.0",
+      }
+    `);
   });
 
   test("without support should fail", async () => {
@@ -127,7 +133,7 @@ describe.sequential("injected wallet", async () => {
     const promise = getCallsStatus({
       wallet: wallet,
       client: TEST_CLIENT,
-      bundleId: "test",
+      id: "test",
     });
 
     await expect(promise).rejects.toMatchInlineSnapshot(
@@ -152,19 +158,15 @@ describe.sequential("in-app wallet", async () => {
     });
     wallet.getChain = vi.fn().mockReturnValue(ANVIL_CHAIN);
 
-    const bundleId = await sendCalls({
+    const callResult = await sendCalls({
       wallet: wallet,
       ...SEND_CALLS_OPTIONS,
     });
 
-    const result = await getCallsStatus({
-      wallet: wallet,
-      client: TEST_CLIENT,
-      bundleId,
-    });
+    const result = await getCallsStatus(callResult);
 
-    expect(result.status).toEqual("CONFIRMED");
-    expect(result.receipts.length).toEqual(2);
+    expect(result.status).toEqual("success");
+    expect(result.receipts?.length).toEqual(2);
   });
 
   test("with smart account", async () => {
@@ -177,19 +179,15 @@ describe.sequential("in-app wallet", async () => {
       sendBatchTransaction,
     });
 
-    const bundleId = await sendCalls({
+    const callResult = await sendCalls({
       wallet: wallet,
       ...SEND_CALLS_OPTIONS,
     });
 
-    const result = await getCallsStatus({
-      wallet: wallet,
-      client: TEST_CLIENT,
-      bundleId,
-    });
+    const result = await getCallsStatus(callResult);
 
-    expect(result.status).toEqual("CONFIRMED");
-    expect(result.receipts.length).toEqual(1);
+    expect(result.status).toEqual("success");
+    expect(result.receipts?.length).toEqual(1);
   });
 
   test("with pending transaction", async () => {
@@ -202,26 +200,22 @@ describe.sequential("in-app wallet", async () => {
       sendTransaction,
     });
 
-    const bundleId = await sendCalls({
+    const callResult = await sendCalls({
       wallet: wallet,
       ...SEND_CALLS_OPTIONS,
     });
 
-    const result = await getCallsStatus({
-      wallet: wallet,
-      client: TEST_CLIENT,
-      bundleId,
-    });
+    const result = await getCallsStatus(callResult);
 
-    expect(result.status).toEqual("PENDING");
-    expect(result.receipts.length).toEqual(0);
+    expect(result.status).toEqual("pending");
+    expect(result.receipts?.length).toEqual(0);
   });
 
   test("unknown bundle id should fail", async () => {
     const promise = getCallsStatus({
       wallet: wallet,
       client: TEST_CLIENT,
-      bundleId: "unknown",
+      id: "unknown",
     });
 
     await expect(promise).rejects.toMatchInlineSnapshot(
@@ -235,7 +229,7 @@ describe.sequential("in-app wallet", async () => {
     const promise = getCallsStatus({
       wallet: wallet,
       client: TEST_CLIENT,
-      bundleId: "test",
+      id: "test",
     });
 
     await expect(promise).rejects.toMatchInlineSnapshot(

package/src/wallets/eip5792/get-calls-status.ts

@@ -1,16 +1,23 @@
 import type { ThirdwebClient } from "../../client/client.js";
+import { hexToBigInt } from "../../utils/encoding/hex.js";
+import { hexToNumber } from "../../utils/encoding/hex.js";
 import { isCoinbaseSDKWallet } from "../coinbase/coinbase-web.js";
 import { isInAppWallet } from "../in-app/core/wallet/index.js";
 import { getInjectedProvider } from "../injected/index.js";
+import type { Ethereum } from "../interfaces/ethereum.js";
 import type { Wallet } from "../interfaces/wallet.js";
 import { isSmartWallet } from "../smart/index.js";
 import { isWalletConnect } from "../wallet-connect/controller.js";
-import type { GetCallsStatusResponse, WalletSendCallsId } from "./types.js";
+import type {
+  GetCallsStatusRawResponse,
+  GetCallsStatusResponse,
+  WalletSendCallsId,
+} from "./types.js";
 
 export type GetCallsStatusOptions = {
   wallet: Wallet;
   client: ThirdwebClient;
-  bundleId: WalletSendCallsId;
+  id: WalletSendCallsId;
 };
 
 /**
@@ -32,20 +39,19 @@ export type GetCallsStatusOptions = {
  *
  *  const client = createThirdwebClient({ clientId: ... });
  *
- *  const bundleId = await sendCalls({ wallet, client, calls });
+ *  const result = await sendCalls({ wallet, client, calls });
  *
  *  let result;
- *  while (result.status !== "CONFIRMED") {
- *    result = await getCallsStatus({ wallet, client, bundleId });
+ *  while (result.status !== "success") {
+ *    result = await getCallsStatus(result);
  *  }
  * ```
  * @extension EIP5792
- * @extension EIP5792
  */
 export async function getCallsStatus({
   wallet,
   client,
-  bundleId,
+  id,
 }: GetCallsStatusOptions): Promise<GetCallsStatusResponse> {
   const account = wallet.getAccount();
   if (!account) {
@@ -59,27 +65,65 @@ export async function getCallsStatus({
     const { inAppWalletGetCallsStatus } = await import(
       "../in-app/core/eip5972/in-app-wallet-calls.js"
     );
-    return inAppWalletGetCallsStatus({ wallet, client, bundleId });
+    return inAppWalletGetCallsStatus({ wallet, client, id });
+  }
+
+  if (isWalletConnect(wallet)) {
+    throw new Error("getCallsStatus is not yet supported for Wallet Connect");
   }
 
+  let provider: Ethereum;
   if (isCoinbaseSDKWallet(wallet)) {
-    const { coinbaseSDKWalletGetCallsStatus } = await import(
+    const { getCoinbaseWebProvider } = await import(
       "../coinbase/coinbase-web.js"
     );
-    return coinbaseSDKWalletGetCallsStatus({ wallet, bundleId });
+    const config = wallet.getConfig();
+    provider = (await getCoinbaseWebProvider(config)) as Ethereum;
+  } else {
+    provider = getInjectedProvider(wallet.id);
   }
 
-  if (isWalletConnect(wallet)) {
-    throw new Error("getCallsStatus is not yet supported for Wallet Connect");
-  }
-
-  // Default to injected wallet
-  const provider = getInjectedProvider(wallet.id);
   try {
-    return await provider.request({
+    const {
+      atomic = false,
+      chainId,
+      receipts,
+      version = "2.0.0",
+      ...response
+    } = (await provider.request({
       method: "wallet_getCallsStatus",
-      params: [bundleId],
-    });
+      params: [id],
+    })) as GetCallsStatusRawResponse;
+    const [status, statusCode] = (() => {
+      const statusCode = response.status;
+      if (statusCode >= 100 && statusCode < 200)
+        return ["pending", statusCode] as const;
+      if (statusCode >= 200 && statusCode < 300)
+        return ["success", statusCode] as const;
+      if (statusCode >= 300 && statusCode < 700)
+        return ["failure", statusCode] as const;
+      // @ts-expect-error: for backwards compatibility
+      if (statusCode === "CONFIRMED") return ["success", 200] as const;
+      // @ts-expect-error: for backwards compatibility
+      if (statusCode === "PENDING") return ["pending", 100] as const;
+      return [undefined, statusCode];
+    })();
+    return {
+      ...response,
+      atomic,
+      // @ts-expect-error: for backwards compatibility
+      chainId: chainId ? hexToNumber(chainId) : undefined,
+      receipts:
+        receipts?.map((receipt) => ({
+          ...receipt,
+          blockNumber: hexToBigInt(receipt.blockNumber),
+          gasUsed: hexToBigInt(receipt.gasUsed),
+          status: receiptStatuses[receipt.status as "0x0" | "0x1"],
+        })) ?? [],
+      statusCode,
+      status,
+      version,
+    };
   } catch (error) {
     if (/unsupport|not support/i.test((error as Error).message)) {
       throw new Error(
@@ -89,3 +133,8 @@ export async function getCallsStatus({
     throw error;
   }
 }
+
+const receiptStatuses = {
+  "0x0": "reverted",
+  "0x1": "success",
+} as const;