thirdweb 5.29.3-nightly-f8e0c5f84bb3a07a2911b5fce51da3983bb2e9e9-20240614190203 → 5.29.3-nightly-b051d844d0bb2d08b0d885d8c23e75ee97209976-20240614190954

package/src/react/native/hooks/wallets/useCallsStatus.ts

@@ -0,0 +1,29 @@
+import type { UseQueryOptions, UseQueryResult } from "@tanstack/react-query";
+import type { ThirdwebClient } from "../../../../client/client.js";
+import type { GetCallsStatusResponse } from "../../../../wallets/eip5792/types.js";
+import { useCallsStatusCore } from "../../../core/hooks/wallets/useCallsStatus.js";
+import { useActiveWallet } from "./useActiveWallet.js";
+
+/**
+ * A hook to get a call bundle's current status according to [EIP-5792](https://eips.ethereum.org/EIPS/eip-5792).
+ *
+ * @note This function is dependent on the wallet's support for EIP-5792 and could throw an error if it's not supported.
+ *
+ * @returns a React Query object.
+ * @beta
+ * @example
+ * ```tsx
+ * import { useCallsStatus } from "thirdweb/react";
+ * const { data: status, isLoading } = useCallsStatus({ bundleId, client });
+ * ```
+ * @extension EIP5792
+ */
+export function useCallsStatus(options: {
+  bundleId: string;
+  client: ThirdwebClient;
+  queryOptions?: Pick<UseQueryOptions, "enabled" | "retry">;
+}): UseQueryResult<GetCallsStatusResponse> {
+  const wallet = useActiveWallet();
+
+  return useCallsStatusCore(options, wallet);
+}

package/src/react/native/hooks/wallets/useCapabilities.ts

@@ -0,0 +1,26 @@
+import type { UseQueryOptions, UseQueryResult } from "@tanstack/react-query";
+import type { GetCapabilitiesResult } from "../../../../wallets/eip5792/get-capabilities.js";
+import { useCapabilitiesCore } from "../../../core/hooks/wallets/useCapabilities.js";
+import { useActiveWallet } from "./useActiveWallet.js";
+
+/**
+ * A hook to get the current wallet's capabilities according to [EIP-5792](https://eips.ethereum.org/EIPS/eip-5792).
+ *
+ * @note This function is dependent on the wallet's support for EIP-5792, but will not throw.
+ * **The returned object contains a `message` field detailing any issues with the wallet's support for EIP-5792.**
+ *
+ * @returns a React Query object.
+ * @beta
+ * @example
+ * ```tsx
+ * import { useCapabilities } from "thirdweb/react";
+ * const { data: capabilities, isLoading } = useCapabilities();
+ * ```
+ * @extension EIP5792
+ */
+export function useCapabilities(options?: {
+  queryOptions?: Pick<UseQueryOptions, "enabled" | "retry">;
+}): UseQueryResult<GetCapabilitiesResult> {
+  const wallet = useActiveWallet();
+  return useCapabilitiesCore(options, wallet);
+}

package/src/react/native/hooks/wallets/useConnect.ts

@@ -0,0 +1,37 @@
+import type { ConnectManagerOptions } from "../../../../wallets/manager/index.js";
+import { useConnectCore } from "../../../core/hooks/wallets/useConnect.js";
+import { connectionManager } from "../../index.js";
+
+/**
+ * A hook to set a wallet as active wallet
+ * @returns A function that lets you connect a wallet.
+ * @example
+ * ```jsx
+ * import { useConnect } from "thirdweb/react";
+ * import { createWallet } from "thirdweb/wallets";
+ *
+ * function Example() {
+ *   const { connect, isConnecting, error } = useConnect();
+ *   return (
+ *     <button
+ *       onClick={() =>
+ *         connect(async () => {
+ *           // instantiate wallet
+ *           const wallet = createWallet("io.metamask");
+ *           // connect wallet
+ *           await wallet.connect();
+ *           // return the wallet
+ *           return wallet;
+ *         })
+ *       }
+ *     >
+ *       Connect
+ *     </button>
+ *   );
+ * }
+ * ```
+ * @walletConnection
+ */
+export function useConnect(options?: ConnectManagerOptions) {
+  return useConnectCore(connectionManager, options);
+}

package/src/react/native/hooks/wallets/useConnectedWallets.ts

@@ -0,0 +1,17 @@
+import { useConnectedWalletsCore } from "../../../core/hooks/wallets/useConnectedWallets.js";
+import { connectionManager } from "../../index.js";
+
+/**
+ * A hook that returns all connected wallets
+ * @returns An array of all connected wallets
+ * @example
+ * ```jsx
+ * import { useConnectedWallets } from "thirdweb/react";
+ *
+ * const wallets = useConnectedWallets();
+ * ```
+ * @walletConnection
+ */
+export function useConnectedWallets() {
+  return useConnectedWalletsCore(connectionManager);
+}

package/src/react/native/hooks/wallets/useDisconnect.ts

@@ -0,0 +1,26 @@
+import { useDisconnectCore } from "../../../core/hooks/wallets/useDisconnect.js";
+import { connectionManager } from "../../index.js";
+
+/**
+ * Disconnect from given account
+ * @example
+ * ```jsx
+ * import { useDisconnect, useActiveWallet } from "thirdweb/react";
+ *
+ * function Example() {
+ *   const { disconnect } = useDisconnect();
+ *   const wallet = useActiveWallet();
+ *
+ *   return (
+ *     <button onClick={() => disconnect(wallet)}>
+ *       Disconnect
+ *     </button>
+ *   );
+ * }
+ * ```
+ * @walletConnection
+ * @returns An object with a function to disconnect an account
+ */
+export function useDisconnect() {
+  return useDisconnectCore(connectionManager);
+}

package/src/react/native/hooks/wallets/useIsAutoConnecting.ts

@@ -0,0 +1,19 @@
+import { useIsAutoConnectingCore } from "../../../core/hooks/wallets/useIsAutoConnecting.js";
+import { connectionManager } from "../../index.js";
+
+/**
+ * A hook to check if the auto connect is in progress.
+ * @example
+ * ```jsx
+ * function Example() {
+ *   const isAutoConnecting = useIsAutoConnecting();
+ *
+ *   return <div> ... </div>;
+ * }
+ * ```
+ * @returns A boolean indicating if the auto connect is in progress.
+ * @walletConnection
+ */
+export function useIsAutoConnecting() {
+  return useIsAutoConnectingCore(connectionManager);
+}

package/src/react/native/hooks/wallets/useSendCalls.ts

@@ -0,0 +1,86 @@
+import type { UseMutationResult } from "@tanstack/react-query";
+import type { ThirdwebClient } from "../../../../client/client.js";
+import {
+  type SendCallsOptions,
+  sendCalls,
+} from "../../../../wallets/eip5792/send-calls.js";
+import type {
+  GetCallsStatusResponse,
+  WalletSendCallsId,
+} from "../../../../wallets/eip5792/types.js";
+import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
+import { useSendCallsCore } from "../../../core/hooks/wallets/useSendCalls.js";
+import { useActiveWallet } from "./useActiveWallet.js";
+
+/**
+ * A hook to send [EIP-5792](https://eips.ethereum.org/EIPS/eip-5792) calls to a wallet.
+ * This hook works with all Thirdweb wallets (in-app and smart) and certain injected wallets that already support EIP-5792.
+ * Transactions will be bundled and sponsored when those capabilities are supported, otherwise they will be sent as individual transactions.
+ * 
+ * When calls are sent, all contracts that are interacted with will have their corresponding reads revalidated via React Query.
+ *
+ * @note This hook is dependent on the wallet's support for EIP-5792 and could fail.
+ * @note The mutatuon function will use your currently connected wallet by default, but you can pass it a specific wallet to use if you'd like.
+ *
+ * @returns A React Query mutatuon object to interact with {@link sendCalls}
+ * @throws an error if the wallet does not support EIP-5792.
+ * @returns The ID of the bundle of the calls.
+ *
+ * @beta
+ * @example
+ * ```tsx
+ * import { useSendCalls } from "thirdweb/react";
+ * 
+ * const sendTx1 = approve({
+      contract: USDT_CONTRACT,
+      amount: 100,
+      spender: "0x33d9B8BEfE81027E2C859EDc84F5636cbb202Ed6",
+    });
+ * const sendTx2 = approve({
+      contract: USDT_CONTRACT,
+      amount: 100,
+      spender: "0x2a4f24F935Eb178e3e7BA9B53A5Ee6d8407C0709",
+    });
+ * const { mutate: sendCalls, data: bundleId } = useSendCalls({ client });
+ * await sendCalls({
+ *   wallet,
+ *   client,
+ *   calls: [sendTx1, sendTx2],
+ * });
+ * ```
+ * Await the bundle's full confirmation:
+ * ```tsx
+ * const { mutate: sendCalls, data: bundleId } = useSendCalls({ client, waitForResult: true });
+ * await sendCalls({
+ *   wallet,
+ *   client,
+ *   calls: [sendTx1, sendTx2],
+ * });
+ * ```
+ * Sponsor transactions with a paymaster:
+ * ```ts
+ * const { mutate: sendCalls, data: bundleId } = useSendCalls();
+ * await sendCalls({
+ *   client,
+ *   calls: [sendTx1, sendTx2],
+ *   capabilities: {
+ *     paymasterService: {
+ *       url: `https://${CHAIN.id}.bundler.thirdweb.com/${client.clientId}`
+ *     }
+ *   }
+ * });
+ * @note We recommend proxying any paymaster calls via an API route you setup and control.
+ * ```
+ * @extension EIP5792
+ */
+export function useSendCalls({
+  client,
+  waitForResult = true,
+}: { client: ThirdwebClient; waitForResult?: boolean }): UseMutationResult<
+  GetCallsStatusResponse | WalletSendCallsId,
+  Error,
+  Omit<SendCallsOptions, "chain" | "wallet"> & { wallet?: Wallet } // Optional wallet override
+> {
+  const wallet = useActiveWallet();
+  return useSendCallsCore({ client, waitForResult }, wallet);
+}

package/src/react/native/hooks/wallets/useSetActiveWallet.ts

@@ -0,0 +1,20 @@
+import { useSetActiveWalletCore } from "../../../core/hooks/wallets/useSetActiveWallet.js";
+import { connectionManager } from "../../index.js";
+
+/**
+ * A hook that lets you set the active wallet.
+ * @returns A function that lets you set the active wallet.
+ * @example
+ * ```jsx
+ * import { useSetActiveWallet } from "thirdweb/react";
+ *
+ * const setActiveAccount = useSetActiveWallet();
+ *
+ * // later in your code
+ * await setActiveAccount(account);
+ * ```
+ * @walletConnection
+ */
+export function useSetActiveWallet() {
+  return useSetActiveWalletCore(connectionManager);
+}

package/src/react/native/hooks/wallets/useSetActiveWalletConnectionStatus.ts

@@ -0,0 +1,20 @@
+import { useSetActiveWalletConnectionStatusCore } from "../../../core/hooks/wallets/useSetActiveWalletConnectionStatus.js";
+import { connectionManager } from "../../index.js";
+
+/**
+ * A hook that returns the active wallet's connection status.
+ * @example
+ * ```jsx
+ * function Example() {
+ *   const setActiveStatus = useSetActiveWalletConnectionStatus();
+ *
+ *   // when you want to set the connection status of the wallet
+ *   setActiveStatus(status)
+ * }
+ * ```
+ * @returns The active wallet's connection status.
+ * @internal
+ */
+export function useSetActiveWalletConnectionStatus() {
+  return useSetActiveWalletConnectionStatusCore(connectionManager);
+}

package/src/react/native/hooks/wallets/useSwitchActiveWalletChain.ts

@@ -0,0 +1,21 @@
+import { useSwitchActiveWalletChainCore } from "../../../core/hooks/wallets/useSwitchActiveWalletChain.js";
+import { connectionManager } from "../../index.js";
+
+/**
+ * Switch to blockchain with given chain id in the active wallet.
+ * @returns A function to switch to blockchain with given chain id in the active wallet.
+ * @example
+ * ```jsx
+ * import { useSwitchActiveWalletChain } from "thirdweb/react";
+ * import { sepolia } from "thirdweb/chains";
+ *
+ * const switchChain = useSwitchActiveWalletChain();
+ *
+ * // later in your code
+ * <button onClick={() => switchChain(sepolia)}>Switch Chain</button>
+ * ```
+ * @walletConnection
+ */
+export function useSwitchActiveWalletChain() {
+  return useSwitchActiveWalletChainCore(connectionManager);
+}

package/src/react/native/index.ts

@@ -0,0 +1,4 @@
+import { nativeLocalStorage } from "../../utils/storage/nativeStorage.js";
+import { connectionManagerSingleton } from "../core/connectionManager.js";
+
+export const connectionManager = connectionManagerSingleton(nativeLocalStorage);

package/src/react/native/ui/AutoConnect/AutoConnect.tsx

@@ -0,0 +1,59 @@
+"use client";
+import { useEffect } from "react";
+import type { AutoConnectProps } from "../../../core/hooks/connection/types.js";
+import { useAutoConnect } from "../../hooks/wallets/useAutoConnect.js";
+import { useSetActiveWalletConnectionStatus } from "../../hooks/wallets/useSetActiveWalletConnectionStatus.js";
+
+/**
+ * AutoConnect last connected wallet on page reload or revisit.
+ * Note: If you are using `ConnectButton` or `ConnectEmbed` components, You don't need to use this component as it is already included.
+ *
+ * This is useful if you are manually connecting the wallets using the [`useConnect`](https://portal.thirdweb.com/references/typescript/v5/useConnect) hook and want to auto connect the last connected wallets on page reload or revisit.
+ * @param props - Object of type `AutoConnectProps`. Refer to [`AutoConnectProps`](https://portal.thirdweb.com/references/typescript/v5/AutoConnectProps)
+ * @example
+ * ```tsx
+ * import { AutoConnect } from "thirdweb/react";
+ * import { createWallet, inAppWallet } from "thirdweb/wallets";
+ *
+ *
+ * // list of wallets that your app uses
+ * const wallets = [
+ *  inAppWallet(),
+ *  createWallet('io.metamask'),
+ *  createWallet("me.rainbow"),
+ * ]
+ *
+ * function Example() {
+ *  return (
+ *    <AutoConnect
+ *      wallets={wallets}
+ *      client={client}
+ *      appMetadata={appMetadata}
+ *    />
+ *  );
+ * }
+ * ```
+ * @component
+ */
+export function AutoConnect(props: AutoConnectProps) {
+  useAutoConnect(props);
+  return <></>;
+}
+
+let noAutoConnectDone = false;
+
+/**
+ * @internal
+ */
+export function NoAutoConnect() {
+  const setConnectionStatus = useSetActiveWalletConnectionStatus();
+  useEffect(() => {
+    if (noAutoConnectDone) {
+      return;
+    }
+    noAutoConnectDone = true;
+    setConnectionStatus("disconnected");
+  });
+
+  return null;
+}

package/src/react/native/ui/TransactionButton/TrabsactionButton.tsx

@@ -2,8 +2,10 @@ import { type StyleProp, View, type ViewStyle } from "react-native";
 import { parseTheme } from "../../../core/design-system/CustomThemeProvider.js";
 import {
   type TransactionButtonProps,
-  useTransactionButtonCore,
-} from "../../../core/hooks/transaction/button-core.js";
+  useTransactionButtonMutation,
+} from "../../../core/hooks/transaction/transaction-button-utils.js";
+import { useSendTransaction } from "../../hooks/transaction/useSendTransaction.js";
+import { useActiveAccount } from "../../hooks/wallets/useActiveAccount.js";
 import { ThemedButton } from "../components/button.js";
 import { ThemedSpinner } from "../components/spinner.js";
 
@@ -38,14 +40,19 @@ export function TransactionButton(props: TransactionButtonProps) {
     unstyled,
     ...buttonProps
   } = props;
-  const { account, handleClick, isPending } = useTransactionButtonCore(props);
+  const account = useActiveAccount();
+  const sendTransaction = useSendTransaction({ gasless, payModal });
+  const { mutate: handleClick, isPending } = useTransactionButtonMutation(
+    props,
+    sendTransaction.mutateAsync,
+  );
   const theme = parseTheme(buttonProps.theme);
 
   return (
     <ThemedButton
       disabled={!account || disabled || isPending}
       variant={"primary"}
-      onPress={handleClick}
+      onPress={() => handleClick()}
       style={buttonProps.style as StyleProp<ViewStyle>}
       theme={theme}
     >

package/src/react/{core/hooks/contract → web/hooks/transaction}/useEstimateGas.ts

@@ -1,13 +1,11 @@
-import { type UseMutationResult, useMutation } from "@tanstack/react-query";
-import {
-  type EstimateGasResult,
-  estimateGas,
-} from "../../../../transaction/actions/estimate-gas.js";
+import type { UseMutationResult } from "@tanstack/react-query";
+import type { EstimateGasResult } from "../../../../transaction/actions/estimate-gas.js";
 import type { PreparedTransaction } from "../../../../transaction/prepare-transaction.js";
-import { useActiveAccount } from "../wallets/wallet-hooks.js";
+import { useEstimateGasCore } from "../../../core/hooks/transaction/useEstimateGas.js";
+import { useActiveAccount } from "../wallets/useActiveAccount.js";
 
 /**
- * A hook to estimate the gas used by given transaction.
+ * A hook to estimate the gas for a given transaction.
  * @returns A mutation object to estimate gas.
  * @example
  * ```jsx
@@ -17,7 +15,6 @@ import { useActiveAccount } from "../wallets/wallet-hooks.js";
  * // later
  * const estimatedGas = await estimateGas(tx);
  * ```
- * @transaction
  */
 export function useEstimateGas(): UseMutationResult<
   EstimateGasResult,
@@ -25,8 +22,5 @@ export function useEstimateGas(): UseMutationResult<
   PreparedTransaction
 > {
   const account = useActiveAccount();
-
-  return useMutation({
-    mutationFn: (transaction) => estimateGas({ transaction, account }),
-  });
+  return useEstimateGasCore(account);
 }

package/src/react/web/hooks/transaction/useEstimateGasCost.ts

@@ -0,0 +1,33 @@
+import { type UseMutationResult, useMutation } from "@tanstack/react-query";
+import {
+  type EstimateGasCostResult,
+  estimateGasCost,
+} from "../../../../transaction/actions/estimate-gas-cost.js";
+import type { PreparedTransaction } from "../../../../transaction/prepare-transaction.js";
+import { useActiveAccount } from "../wallets/useActiveAccount.js";
+
+/**
+ * A hook to estimate the gas cost in ether and wei for a given transaction.
+ * @returns A mutation object to estimate gas cost.
+ * @example
+ * ```jsx
+ * import { useEstimateGasCost } from "thirdweb/react";
+ * const { mutate: estimateGasCost, data: gasEstimate } = useEstimateGas();
+ *
+ * // later
+ * const estimatedGas = await estimateGasCost(tx);
+ * console.log("gas cost in ether", estimatedGas.ether);
+ * ```
+ * @transaction
+ */
+export function useEstimateGasCost(): UseMutationResult<
+  EstimateGasCostResult,
+  Error,
+  PreparedTransaction
+> {
+  const account = useActiveAccount();
+
+  return useMutation({
+    mutationFn: (transaction) => estimateGasCost({ transaction, account }),
+  });
+}

package/src/react/web/hooks/transaction/useSendAndConfirmTransaction.ts

@@ -0,0 +1,27 @@
+import type { UseMutationResult } from "@tanstack/react-query";
+import type { PreparedTransaction } from "../../../../transaction/prepare-transaction.js";
+import type { TransactionReceipt } from "../../../../transaction/types.js";
+import { useSendAndConfirmTransactionCore } from "../../../core/hooks/transaction/useSendAndConfirmTransaction.js";
+import { useActiveAccount } from "../wallets/useActiveAccount.js";
+
+/**
+ * A hook to send a transaction.
+ * @returns A mutation object to send a transaction.
+ * @example
+ * ```jsx
+ * import { useSendAndConfirmTransaction } from "thirdweb/react";
+ * const { mutate: sendAndConfirmTx, data: transactionReceipt } = useSendAndConfirmTransaction();
+ *
+ * // later
+ * sendAndConfirmTx(tx);
+ * ```
+ * @transaction
+ */
+export function useSendAndConfirmTransaction(): UseMutationResult<
+  TransactionReceipt,
+  Error,
+  PreparedTransaction
+> {
+  const account = useActiveAccount();
+  return useSendAndConfirmTransactionCore(account);
+}

package/src/react/web/hooks/transaction/useSendBatchTransaction.ts

@@ -0,0 +1,27 @@
+import type { UseMutationResult } from "@tanstack/react-query";
+import type { WaitForReceiptOptions } from "../../../../transaction/actions/wait-for-tx-receipt.js";
+import type { PreparedTransaction } from "../../../../transaction/prepare-transaction.js";
+import { useSendBatchTransactionCore } from "../../../core/hooks/transaction/useSendBatchTransaction.js";
+import { useActiveAccount } from "../wallets/useActiveAccount.js";
+
+/**
+ * A hook to send a transaction.
+ * @returns A mutation object to send a transaction.
+ * @example
+ * ```jsx
+ * import { useSendBatchTransaction } from "thirdweb/react";
+ * const { mutate: sendBatch, data: transactionResult } = useSendBatchTransaction();
+ *
+ * // later
+ * sendBatch([tx1, tx2]);
+ * ```
+ * @transaction
+ */
+export function useSendBatchTransaction(): UseMutationResult<
+  WaitForReceiptOptions,
+  Error,
+  PreparedTransaction[]
+> {
+  const account = useActiveAccount();
+  return useSendBatchTransactionCore(account);
+}