thirdweb 5.40.0 → 5.40.1-nightly-b128530355f0dc47d897bd2ef7c3823752ea9b6c-20240727000321

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

@@ -15,24 +15,84 @@ import type {
 import { waitForBundle } from "../../../../wallets/eip5792/wait-for-bundle.js";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
 import { invalidateWalletBalance } from "../../providers/invalidateWalletBalance.js";
+import { useActiveWallet } from "./useActiveWallet.js";
 
-export function useSendCallsCore(
-  {
-    client,
-    waitForResult = true,
-  }: { client: ThirdwebClient; waitForResult?: boolean },
-  wallet?: Wallet,
-): UseMutationResult<
+/**
+ * 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 connectedWallet = wallet;
+  const activeWallet = useActiveWallet();
   const queryClient = useQueryClient();
 
   return useMutation({
     mutationFn: async (options) => {
-      const { wallet = connectedWallet } = options;
+      const { wallet = activeWallet } = options;
       const chain = wallet?.getChain();
       if (!wallet || !chain) {
         throw new Error(
@@ -55,15 +115,15 @@ export function useSendCallsCore(
     },
     onSettled: async (_result, _error, variables) => {
       // Attempt to invalidate any reads related to the sent transactions
-      const chain = connectedWallet?.getChain();
-      if (!_result || !connectedWallet || !chain) {
+      const chain = activeWallet?.getChain();
+      if (!_result || !activeWallet || !chain) {
         return;
       }
 
       if (typeof _result === "string") {
         await waitForBundle({
           bundleId: _result,
-          wallet: connectedWallet,
+          wallet: activeWallet,
           client,
           chain,
         }).catch((error) => {

package/src/react/core/hooks/wallets/useSendToken.ts

@@ -7,13 +7,31 @@ import { sendTransaction } from "../../../../transaction/actions/send-transactio
 import { prepareTransaction } from "../../../../transaction/prepare-transaction.js";
 import { isAddress } from "../../../../utils/address.js";
 import { toWei } from "../../../../utils/units.js";
-import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
+import { useActiveWallet } from "./useActiveWallet.js";
 
 /**
  * Send Native or ERC20 tokens from active wallet to given address.
- * @internal
+ * @example
+ * ```tsx
+ * const { mutate: sendToken } = useSendToken(client);
+ *
+ * // send native currency
+ * sendToken({
+ *    receiverAddress: "0x...",
+ *    amount: "0.1",
+ * });
+ *
+ * // send ERC20
+ * sendToken({
+ *   tokenAddress,
+ *   receiverAddress: "0x...",
+ *   amount: "0.5",
+ * });
+ * ```
+ * @wallet
  */
-export function useSendTokenCore(client: ThirdwebClient, wallet?: Wallet) {
+export function useSendToken(client: ThirdwebClient) {
+  const wallet = useActiveWallet();
   return useMutation({
     async mutationFn(option: {
       tokenAddress?: string;

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

@@ -1,5 +1,20 @@
-import type { ConnectionManager } from "../../../../wallets/manager/index.js";
+import { useConnectionManager } from "../../providers/connection-manager.js";
 
-export function useSetActiveWalletCore(manager: ConnectionManager) {
+/**
+ * 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() {
+  const manager = useConnectionManager();
   return manager.setActiveWallet;
 }

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

@@ -1,7 +1,20 @@
-import type { ConnectionManager } from "../../../../wallets/manager/index.js";
+import { useConnectionManager } from "../../providers/connection-manager.js";
 
-export function useSetActiveWalletConnectionStatusCore(
-  manager: ConnectionManager,
-) {
+/**
+ * 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() {
+  const manager = useConnectionManager();
   return manager.activeWalletConnectionStatusStore.setValue;
 }

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

@@ -1,5 +1,21 @@
-import type { ConnectionManager } from "../../../../wallets/manager/index.js";
+import { useConnectionManager } from "../../providers/connection-manager.js";
 
-export function useSwitchActiveWalletChainCore(manager: ConnectionManager) {
+/**
+ * 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() {
+  const manager = useConnectionManager();
   return manager.switchActiveWalletChain;
 }

package/src/react/core/providers/connection-manager.tsx

@@ -0,0 +1,16 @@
+import { createContext, useContext } from "react";
+import type { ConnectionManager } from "../../../wallets/manager/index.js";
+
+export const ConnectionManagerCtx = createContext<
+  ConnectionManager | undefined
+>(undefined);
+
+export function useConnectionManager() {
+  const connectionManager = useContext(ConnectionManagerCtx);
+  if (!connectionManager) {
+    throw new Error(
+      "useConnectionManager must be used within a ConnectionManager Provider",
+    );
+  }
+  return connectionManager;
+}

package/src/react/core/providers/thirdweb-provider.tsx

@@ -5,27 +5,18 @@ import { waitForReceipt } from "../../../transaction/actions/wait-for-tx-receipt
 import { isBaseTransactionOptions } from "../../../transaction/types.js";
 import type { Hex } from "../../../utils/encoding/hex.js";
 import { isObjectWithKeys } from "../../../utils/type-guards.js";
+import type { ConnectionManager } from "../../../wallets/manager/index.js";
 import { SetRootElementContext } from "./RootElementContext.js";
+import { ConnectionManagerCtx } from "./connection-manager.js";
 import { invalidateWalletBalance } from "./invalidateWalletBalance.js";
 
 /**
- * The ThirdwebProvider is component is a provider component that sets up the React Query client.
- * @param props - The props for the ThirdwebProvider
- * @example
- * ```jsx
- * import { ThirdwebProvider } from "thirdweb/react";
- *
- * function Example() {
- *  return (
- *    <ThirdwebProvider>
- *      <App />
- *    </ThirdwebProvider>
- *   )
- * }
- * ```
- * @component
+ * @internal
  */
-export function ThirdwebProvider(props: React.PropsWithChildren) {
+export function ThirdwebProviderCore(props: {
+  manager: ConnectionManager;
+  children: React.ReactNode;
+}) {
   const [el, setEl] = useState<React.ReactNode>(null);
   const [queryClient] = useState(
     () =>
@@ -78,11 +69,13 @@ export function ThirdwebProvider(props: React.PropsWithChildren) {
   );
 
   return (
-    <QueryClientProvider client={queryClient}>
-      <SetRootElementContext.Provider value={setEl}>
-        {props.children}
-      </SetRootElementContext.Provider>
-      {el}
-    </QueryClientProvider>
+    <ConnectionManagerCtx.Provider value={props.manager}>
+      <QueryClientProvider client={queryClient}>
+        <SetRootElementContext.Provider value={setEl}>
+          {props.children}
+        </SetRootElementContext.Provider>
+        {el}
+      </QueryClientProvider>
+    </ConnectionManagerCtx.Provider>
   );
 }

package/src/react/native/hooks/transaction/useSendTransaction.tsx

@@ -2,8 +2,8 @@ import {
   type SendTransactionConfig,
   useSendTransactionCore,
 } from "../../../core/hooks/transaction/useSendTransaction.js";
-import { useActiveWallet } from "../wallets/useActiveWallet.js";
-import { useSwitchActiveWalletChain } from "../wallets/useSwitchActiveWalletChain.js";
+import { useActiveWallet } from "../../../core/hooks/wallets/useActiveWallet.js";
+import { useSwitchActiveWalletChain } from "../../../core/hooks/wallets/useSwitchActiveWalletChain.js";
 
 /**
  * A hook to send a transaction.

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

@@ -1,7 +1,6 @@
 import { nativeLocalStorage } from "../../../../utils/storage/nativeStorage.js";
 import type { AutoConnectProps } from "../../../core/hooks/connection/types.js";
 import { useAutoConnectCore } from "../../../core/hooks/wallets/useAutoConnect.js";
-import { connectionManager } from "../../index.js";
 import { getDefaultWallets } from "../../wallets/defaultWallets.js";
 
 /**
@@ -24,7 +23,7 @@ import { getDefaultWallets } from "../../wallets/defaultWallets.js";
  * @returns whether the auto connect was successful.
  */
 export function useAutoConnect(props: AutoConnectProps) {
-  return useAutoConnectCore(connectionManager, nativeLocalStorage, {
+  return useAutoConnectCore(nativeLocalStorage, {
     ...props,
     wallets: props.wallets || getDefaultWallets(props),
   });

package/src/react/native/providers/thirdweb-provider.tsx

@@ -0,0 +1,43 @@
+"use client";
+import { useMemo } from "react";
+import { nativeLocalStorage } from "../../../utils/storage/nativeStorage.js";
+import {
+  type ConnectionManager,
+  createConnectionManager,
+} from "../../../wallets/manager/index.js";
+import { ThirdwebProviderCore } from "../../core/providers/thirdweb-provider.js";
+
+/**
+ * The ThirdwebProvider is component is a provider component that sets up the React Query client.
+ * @param props - The props for the ThirdwebProvider
+ * @example
+ * ```jsx
+ * import { ThirdwebProvider } from "thirdweb/react";
+ *
+ * function Example() {
+ *  return (
+ *    <ThirdwebProvider>
+ *      <App />
+ *    </ThirdwebProvider>
+ *   )
+ * }
+ * ```
+ * @component
+ */
+export function ThirdwebProvider(
+  props: React.PropsWithChildren<{
+    connectionManager?: ConnectionManager;
+  }>,
+) {
+  const connectionManager = useMemo(
+    () =>
+      props.connectionManager || createConnectionManager(nativeLocalStorage),
+    [props.connectionManager],
+  );
+
+  return (
+    <ThirdwebProviderCore manager={connectionManager}>
+      {props.children}
+    </ThirdwebProviderCore>
+  );
+}

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

@@ -1,8 +1,8 @@
 "use client";
 import { useEffect } from "react";
 import type { AutoConnectProps } from "../../../core/hooks/connection/types.js";
+import { useSetActiveWalletConnectionStatus } from "../../../core/hooks/wallets/useSetActiveWalletConnectionStatus.js";
 import { useAutoConnect } from "../../hooks/wallets/useAutoConnect.js";
-import { useSetActiveWalletConnectionStatus } from "../../hooks/wallets/useSetActiveWalletConnectionStatus.js";
 
 /**
  * AutoConnect last connected wallet on page reload or revisit.

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

@@ -13,9 +13,9 @@ import { cacheChains } from "../../../../chains/utils.js";
 import { parseTheme } from "../../../core/design-system/CustomThemeProvider.js";
 import { useSiweAuth } from "../../../core/hooks/auth/useSiweAuth.js";
 import type { ConnectButtonProps } from "../../../core/hooks/connection/ConnectButtonProps.js";
-import { useActiveAccount } from "../../hooks/wallets/useActiveAccount.js";
-import { useActiveWallet } from "../../hooks/wallets/useActiveWallet.js";
-import { useActiveWalletConnectionStatus } from "../../hooks/wallets/useActiveWalletConnectionStatus.js";
+import { useActiveAccount } from "../../../core/hooks/wallets/useActiveAccount.js";
+import { useActiveWallet } from "../../../core/hooks/wallets/useActiveWallet.js";
+import { useActiveWalletConnectionStatus } from "../../../core/hooks/wallets/useActiveWalletConnectionStatus.js";
 import { useAutoConnect } from "../../hooks/wallets/useAutoConnect.js";
 import { ThemedButton } from "../components/button.js";
 import { ThemedSpinner } from "../components/spinner.js";

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

@@ -9,11 +9,11 @@ import type { Theme } from "../../../core/design-system/index.js";
 import { useSiweAuth } from "../../../core/hooks/auth/useSiweAuth.js";
 import type { ConnectButtonProps } from "../../../core/hooks/connection/ConnectButtonProps.js";
 import type { ConnectEmbedProps } from "../../../core/hooks/connection/ConnectEmbedProps.js";
+import { useActiveWallet } from "../../../core/hooks/wallets/useActiveWallet.js";
+import { useDisconnect } from "../../../core/hooks/wallets/useDisconnect.js";
+import { useConnectionManager } from "../../../core/providers/connection-manager.js";
 import { useWalletInfo } from "../../../core/utils/wallet.js";
 import { radius, spacing } from "../../design-system/index.js";
-import { useActiveWallet } from "../../hooks/wallets/useActiveWallet.js";
-import { useDisconnect } from "../../hooks/wallets/useDisconnect.js";
-import { connectionManager } from "../../index.js";
 import { getDefaultWallets } from "../../wallets/defaultWallets.js";
 import { type ContainerType, Header } from "../components/Header.js";
 import { RNImage } from "../components/RNImage.js";
@@ -105,6 +105,7 @@ export function ConnectModal(
     | undefined;
   const externalWallets = wallets.filter((wallet) => wallet.id !== "inApp");
   const showBranding = props.connectModal?.showThirdwebBranding !== false;
+  const connectionManager = useConnectionManager();
 
   const connector = useCallback(
     async (args: {
@@ -145,7 +146,14 @@ export function ConnectModal(
         });
       }
     },
-    [client, accountAbstraction, onConnect, onClose, siweAuth],
+    [
+      client,
+      accountAbstraction,
+      onConnect,
+      onClose,
+      siweAuth,
+      connectionManager,
+    ],
   );
 
   let content: JSX.Element;

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

@@ -2,9 +2,9 @@ import { StyleSheet, View } from "react-native";
 import type { Account, Wallet } from "../../../../wallets/interfaces/wallet.js";
 import { parseTheme } from "../../../core/design-system/CustomThemeProvider.js";
 import type { ConnectButtonProps } from "../../../core/hooks/connection/ConnectButtonProps.js";
+import { useActiveWalletChain } from "../../../core/hooks/wallets/useActiveWalletChain.js";
 import { useConnectedWalletDetails } from "../../../core/utils/wallet.js";
 import { fontSize, spacing } from "../../design-system/index.js";
-import { useActiveWalletChain } from "../../hooks/wallets/useActiveWalletChain.js";
 import { Skeleton } from "../components/Skeleton.js";
 import { WalletImage } from "../components/WalletImage.js";
 import { ThemedButton } from "../components/button.js";

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

@@ -8,13 +8,13 @@ import type { Theme } from "../../../core/design-system/index.js";
 import { useSiweAuth } from "../../../core/hooks/auth/useSiweAuth.js";
 import type { ConnectButtonProps } from "../../../core/hooks/connection/ConnectButtonProps.js";
 import { useChainName } from "../../../core/hooks/others/useChainQuery.js";
+import { useActiveAccount } from "../../../core/hooks/wallets/useActiveAccount.js";
+import { useActiveWallet } from "../../../core/hooks/wallets/useActiveWallet.js";
+import { useActiveWalletChain } from "../../../core/hooks/wallets/useActiveWalletChain.js";
+import { useDisconnect } from "../../../core/hooks/wallets/useDisconnect.js";
 import { hasSmartAccount } from "../../../core/utils/isSmartWallet.js";
 import { useConnectedWalletDetails } from "../../../core/utils/wallet.js";
 import { fontSize, radius, spacing } from "../../design-system/index.js";
-import { useActiveAccount } from "../../hooks/wallets/useActiveAccount.js";
-import { useActiveWallet } from "../../hooks/wallets/useActiveWallet.js";
-import { useActiveWalletChain } from "../../hooks/wallets/useActiveWalletChain.js";
-import { useDisconnect } from "../../hooks/wallets/useDisconnect.js";
 import { Address } from "../components/Address.js";
 import { ChainIcon } from "../components/ChainIcon.js";
 import { type ContainerType, Header } from "../components/Header.js";

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

@@ -3,14 +3,14 @@ import { StyleSheet, View } from "react-native";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import type { Theme } from "../../../core/design-system/index.js";
 import { useChainSymbol } from "../../../core/hooks/others/useChainQuery.js";
+import { useActiveAccount } from "../../../core/hooks/wallets/useActiveAccount.js";
+import { useActiveWalletChain } from "../../../core/hooks/wallets/useActiveWalletChain.js";
+import { useSendToken } from "../../../core/hooks/wallets/useSendToken.js";
 import type {
   SupportedTokens,
   TokenInfo,
 } from "../../../core/utils/defaultTokens.js";
 import { radius, spacing } from "../../design-system/index.js";
-import { useActiveAccount } from "../../hooks/wallets/useActiveAccount.js";
-import { useActiveWalletChain } from "../../hooks/wallets/useActiveWalletChain.js";
-import { useSendToken } from "../../hooks/wallets/useSendToken.js";
 import { type ContainerType, Header } from "../components/Header.js";
 import { ThemedButton } from "../components/button.js";
 import { ThemedInput } from "../components/input.js";

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

@@ -3,14 +3,14 @@ import type { Chain } from "../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import type { Theme } from "../../../core/design-system/index.js";
 import { useWalletBalance } from "../../../core/hooks/others/useWalletBalance.js";
+import { useActiveAccount } from "../../../core/hooks/wallets/useActiveAccount.js";
+import { useActiveWalletChain } from "../../../core/hooks/wallets/useActiveWalletChain.js";
 import {
   type SupportedTokens,
   type TokenInfo,
   defaultTokens,
 } from "../../../core/utils/defaultTokens.js";
 import { spacing } from "../../design-system/index.js";
-import { useActiveAccount } from "../../hooks/wallets/useActiveAccount.js";
-import { useActiveWalletChain } from "../../hooks/wallets/useActiveWalletChain.js";
 import { RNImage } from "../components/RNImage.js";
 import { Skeleton } from "../components/Skeleton.js";
 import { TokenIcon } from "../components/TokenIcon.js";

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

@@ -4,8 +4,8 @@ import {
   type TransactionButtonProps,
   useTransactionButtonMutation,
 } from "../../../core/hooks/transaction/transaction-button-utils.js";
+import { useActiveAccount } from "../../../core/hooks/wallets/useActiveAccount.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";
 

package/src/react/web/hooks/transaction/useSendTransaction.tsx

@@ -4,10 +4,10 @@ import {
   type ShowModalData,
   useSendTransactionCore,
 } from "../../../core/hooks/transaction/useSendTransaction.js";
+import { useActiveWallet } from "../../../core/hooks/wallets/useActiveWallet.js";
+import { useSwitchActiveWalletChain } from "../../../core/hooks/wallets/useSwitchActiveWalletChain.js";
 import { SetRootElementContext } from "../../../core/providers/RootElementContext.js";
 import { TransactionModal } from "../../ui/TransactionButton/TransactionModal.js";
-import { useActiveWallet } from "../wallets/useActiveWallet.js";
-import { useSwitchActiveWalletChain } from "../wallets/useSwitchActiveWalletChain.js";
 
 /**
  * A hook to send a transaction.

package/src/react/web/hooks/wallets/useAutoConnect.ts

@@ -3,7 +3,6 @@ import { createWallet } from "../../../../wallets/create-wallet.js";
 import { getInstalledWalletProviders } from "../../../../wallets/injected/mipdStore.js";
 import type { AutoConnectProps } from "../../../core/hooks/connection/types.js";
 import { useAutoConnectCore } from "../../../core/hooks/wallets/useAutoConnect.js";
-import { connectionManager } from "../../index.js";
 import { getDefaultWallets } from "../../wallets/defaultWallets.js";
 
 /**
@@ -27,8 +26,8 @@ import { getDefaultWallets } from "../../wallets/defaultWallets.js";
  */
 export function useAutoConnect(props: AutoConnectProps) {
   const wallets = props.wallets || getDefaultWallets(props);
+
   return useAutoConnectCore(
-    connectionManager,
     webLocalStorage,
     {
       ...props,

package/src/react/web/providers/thirdweb-provider.tsx

@@ -0,0 +1,42 @@
+"use client";
+import { useMemo } from "react";
+import { webLocalStorage } from "../../../utils/storage/webStorage.js";
+import {
+  type ConnectionManager,
+  createConnectionManager,
+} from "../../../wallets/manager/index.js";
+import { ThirdwebProviderCore } from "../../core/providers/thirdweb-provider.js";
+
+/**
+ * The ThirdwebProvider is component is a provider component that sets up the React Query client.
+ * @param props - The props for the ThirdwebProvider
+ * @example
+ * ```jsx
+ * import { ThirdwebProvider } from "thirdweb/react";
+ *
+ * function Example() {
+ *  return (
+ *    <ThirdwebProvider>
+ *      <App />
+ *    </ThirdwebProvider>
+ *   )
+ * }
+ * ```
+ * @component
+ */
+export function ThirdwebProvider(
+  props: React.PropsWithChildren<{
+    connectionManager?: ConnectionManager;
+  }>,
+) {
+  const connectionManager = useMemo(
+    () => props.connectionManager || createConnectionManager(webLocalStorage),
+    [props.connectionManager],
+  );
+
+  return (
+    <ThirdwebProviderCore manager={connectionManager}>
+      {props.children}
+    </ThirdwebProviderCore>
+  );
+}

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

@@ -1,8 +1,8 @@
 "use client";
 import { useEffect } from "react";
 import type { AutoConnectProps } from "../../../core/hooks/connection/types.js";
+import { useSetActiveWalletConnectionStatus } from "../../../core/hooks/wallets/useSetActiveWalletConnectionStatus.js";
 import { useAutoConnect } from "../../hooks/wallets/useAutoConnect.js";
-import { useSetActiveWalletConnectionStatus } from "../../hooks/wallets/useSetActiveWalletConnectionStatus.js";
 
 /**
  * AutoConnect last connected wallet on page reload or revisit.

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

@@ -6,10 +6,10 @@ import { cacheChains } from "../../../../chains/utils.js";
 import { iconSize } from "../../../core/design-system/index.js";
 import { useSiweAuth } from "../../../core/hooks/auth/useSiweAuth.js";
 import type { ConnectButtonProps } from "../../../core/hooks/connection/ConnectButtonProps.js";
+import { useActiveAccount } from "../../../core/hooks/wallets/useActiveAccount.js";
+import { useActiveWallet } from "../../../core/hooks/wallets/useActiveWallet.js";
+import { useActiveWalletConnectionStatus } from "../../../core/hooks/wallets/useActiveWalletConnectionStatus.js";
 import { defaultTokens } from "../../../core/utils/defaultTokens.js";
-import { useActiveAccount } from "../../hooks/wallets/useActiveAccount.js";
-import { useActiveWallet } from "../../hooks/wallets/useActiveWallet.js";
-import { useActiveWalletConnectionStatus } from "../../hooks/wallets/useActiveWalletConnectionStatus.js";
 import {
   WalletUIStatesProvider,
   useSetIsWalletModalOpen,

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

@@ -41,6 +41,11 @@ import {
   useChainIconUrl,
   useChainName,
 } from "../../../core/hooks/others/useChainQuery.js";
+import { useActiveAccount } from "../../../core/hooks/wallets/useActiveAccount.js";
+import { useActiveWallet } from "../../../core/hooks/wallets/useActiveWallet.js";
+import { useActiveWalletChain } from "../../../core/hooks/wallets/useActiveWalletChain.js";
+import { useDisconnect } from "../../../core/hooks/wallets/useDisconnect.js";
+import { useSwitchActiveWalletChain } from "../../../core/hooks/wallets/useSwitchActiveWalletChain.js";
 import { SetRootElementContext } from "../../../core/providers/RootElementContext.js";
 import type {
   SupportedNFTs,
@@ -48,11 +53,6 @@ import type {
 } from "../../../core/utils/defaultTokens.js";
 import { hasSmartAccount } from "../../../core/utils/isSmartWallet.js";
 import { useConnectedWalletDetails } from "../../../core/utils/wallet.js";
-import { useActiveAccount } from "../../hooks/wallets/useActiveAccount.js";
-import { useActiveWallet } from "../../hooks/wallets/useActiveWallet.js";
-import { useActiveWalletChain } from "../../hooks/wallets/useActiveWalletChain.js";
-import { useDisconnect } from "../../hooks/wallets/useDisconnect.js";
-import { useSwitchActiveWalletChain } from "../../hooks/wallets/useSwitchActiveWalletChain.js";
 import { ChainIcon } from "../components/ChainIcon.js";
 import { CopyIcon } from "../components/CopyIcon.js";
 import { Img } from "../components/Img.js";