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

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

@@ -0,0 +1,255 @@
+import { CheckCircledIcon } from "@radix-ui/react-icons";
+import { useCallback, useContext, useEffect, useRef, useState } from "react";
+import type { ThirdwebClient } from "../../../../client/client.js";
+import type { PreparedTransaction } from "../../../../transaction/prepare-transaction.js";
+import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
+import { CustomThemeProvider } from "../../../core/design-system/CustomThemeProvider.js";
+import { type Theme, iconSize } from "../../../core/design-system/index.js";
+import {
+  type SendTransactionConfig,
+  useSendTransactionCore,
+} from "../../../core/hooks/transaction/useSendTransaction.js";
+import { SetRootElementContext } from "../../../core/providers/RootElementContext.js";
+import type { PayUIOptions } from "../../ui/ConnectWallet/ConnectButtonProps.js";
+import type { SupportedTokens } from "../../ui/ConnectWallet/defaultTokens.js";
+import { AccentFailIcon } from "../../ui/ConnectWallet/icons/AccentFailIcon.js";
+import { useConnectLocale } from "../../ui/ConnectWallet/locale/getConnectLocale.js";
+import { LazyBuyScreen } from "../../ui/ConnectWallet/screens/Buy/LazyBuyScreen.js";
+import { BuyTxHistory } from "../../ui/ConnectWallet/screens/Buy/tx-history/BuyTxHistory.js";
+import { Modal } from "../../ui/components/Modal.js";
+import { Spacer } from "../../ui/components/Spacer.js";
+import { Spinner } from "../../ui/components/Spinner.js";
+import { Container, ModalHeader } from "../../ui/components/basic.js";
+import { Button } from "../../ui/components/buttons.js";
+import { Text } from "../../ui/components/text.js";
+import type { LocaleId } from "../../ui/types.js";
+import { LoadingScreen } from "../../wallets/shared/LoadingScreen.js";
+import { useActiveWallet } from "../wallets/useActiveWallet.js";
+import { useSwitchActiveWalletChain } from "../wallets/useSwitchActiveWalletChain.js";
+
+/**
+ * A hook to send a transaction.
+ * @returns A mutation object to send a transaction.
+ * @param config Configuration for the `useSendTransaction` hook.
+ * Refer to [`SendTransactionConfig`](https://portal.thirdweb.com/references/typescript/v5/SendTransactionConfig) for more details.
+ * @example
+ * ```tsx
+ * import { useSendTransaction } from "thirdweb/react";
+ * const { mutate: sendTx, data: transactionResult } = useSendTransaction();
+ *
+ * // later
+ * sendTx(tx);
+ * ```
+ *
+ * @transaction
+ */
+export function useSendTransaction(config: SendTransactionConfig = {}) {
+  const activeWallet = useActiveWallet();
+  const switchChain = useSwitchActiveWalletChain();
+  const wallet = useActiveWallet();
+  const payModal = config.payModal;
+
+  let payModalEnabled = true;
+
+  if (payModal === false || config.gasless) {
+    payModalEnabled = false;
+  }
+
+  // if active wallet is smart wallet with gasless enabled, don't show the pay modal
+  if (activeWallet && activeWallet.id === "smart") {
+    const options = (activeWallet as Wallet<"smart">).getConfig();
+
+    if ("sponsorGas" in options && options.sponsorGas === true) {
+      payModalEnabled = false;
+    }
+
+    if ("gasless" in options && options.gasless === true) {
+      payModalEnabled = false;
+    }
+  }
+
+  const setRootEl = useContext(SetRootElementContext);
+  return useSendTransactionCore({
+    showPayModal:
+      !payModalEnabled || payModal === false
+        ? undefined
+        : (data) => {
+            setRootEl(
+              <TxModal
+                tx={data.tx}
+                onComplete={data.sendTx}
+                onClose={() => {
+                  setRootEl(null);
+                  data.rejectTx();
+                }}
+                client={data.tx.client}
+                localeId={payModal?.locale || "en_US"}
+                supportedTokens={payModal?.supportedTokens}
+                theme={payModal?.theme || "dark"}
+                txCostWei={data.totalCostWei}
+                walletBalanceWei={data.walletBalance.value}
+                nativeTokenSymbol={data.walletBalance.symbol}
+                payOptions={{
+                  buyWithCrypto: payModal?.buyWithCrypto,
+                  buyWithFiat: payModal?.buyWithFiat,
+                }}
+              />,
+            );
+          },
+    gasless: config.gasless,
+    switchChain,
+    wallet,
+  });
+}
+
+type ModalProps = {
+  onComplete: () => void;
+  onClose: () => void;
+  client: ThirdwebClient;
+  localeId: LocaleId;
+  supportedTokens?: SupportedTokens;
+  theme: Theme | "light" | "dark";
+  txCostWei: bigint;
+  walletBalanceWei: bigint;
+  nativeTokenSymbol: string;
+  tx: PreparedTransaction;
+  payOptions: PayUIOptions;
+};
+
+function TxModal(props: ModalProps) {
+  return (
+    <CustomThemeProvider theme={props.theme}>
+      <Modal
+        open={true}
+        size="compact"
+        setOpen={(_open) => {
+          if (!_open) {
+            props.onClose();
+          }
+        }}
+      >
+        <ModalContent {...props} />
+      </Modal>
+    </CustomThemeProvider>
+  );
+}
+
+function ModalContent(props: ModalProps) {
+  const localeQuery = useConnectLocale(props.localeId);
+  const [screen, setScreen] = useState<"buy" | "tx-history" | "execute-tx">(
+    "buy",
+  );
+
+  if (!localeQuery.data) {
+    return <LoadingScreen />;
+  }
+
+  if (screen === "execute-tx") {
+    return <ExecutingTxScreen tx={props.tx} closeModal={props.onClose} />;
+  }
+
+  if (screen === "tx-history") {
+    return (
+      <BuyTxHistory
+        client={props.client}
+        onBack={() => {
+          setScreen("buy");
+        }}
+        onDone={() => {
+          setScreen("execute-tx");
+        }}
+        isBuyForTx={true}
+        isEmbed={false}
+      />
+    );
+  }
+
+  return (
+    <LazyBuyScreen
+      isEmbed={false}
+      client={props.client}
+      onViewPendingTx={() => {
+        setScreen("tx-history");
+      }}
+      supportedTokens={props.supportedTokens}
+      connectLocale={localeQuery.data}
+      buyForTx={{
+        balance: props.walletBalanceWei,
+        cost: props.txCostWei,
+        tx: props.tx,
+        tokenSymbol: props.nativeTokenSymbol,
+      }}
+      theme={typeof props.theme === "string" ? props.theme : props.theme.type}
+      payOptions={props.payOptions}
+      onDone={() => {
+        setScreen("execute-tx");
+      }}
+    />
+  );
+}
+
+function ExecutingTxScreen(props: {
+  tx: PreparedTransaction;
+  closeModal: () => void;
+}) {
+  const sendTxCore = useSendTransaction({
+    payModal: false,
+  });
+  const [status, setStatus] = useState<"loading" | "failed" | "sent">(
+    "loading",
+  );
+
+  const sendTx = useCallback(async () => {
+    setStatus("loading");
+    try {
+      await sendTxCore.mutateAsync(props.tx);
+      setStatus("sent");
+    } catch (e) {
+      console.error(e);
+      setStatus("failed");
+    }
+  }, [sendTxCore, props.tx]);
+
+  const done = useRef(false);
+  useEffect(() => {
+    if (done.current) {
+      return;
+    }
+
+    done.current = true;
+    sendTx();
+  }, [sendTx]);
+
+  return (
+    <Container p="lg">
+      <ModalHeader title="Transaction" />
+      <Spacer y="xxl" />
+      <Spacer y="xxl" />
+      <Container flex="row" center="x">
+        {status === "loading" && <Spinner size="3xl" 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="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>
+      )
+    </Container>
+  );
+}

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

@@ -0,0 +1,17 @@
+import { useActiveAccountCore } from "../../../core/hooks/wallets/useActiveAccount.js";
+import { connectionManager } from "../../index.js";
+
+/**
+ * A hook that returns the active account
+ * @returns The active `Account` or `undefined` if no active account is set.
+ * @example
+ * ```jsx
+ * import { useActiveAccount } from "thirdweb/react";
+ *
+ * const activeAccount = useActiveAccount();
+ * ```
+ * @walletConnection
+ */
+export function useActiveAccount() {
+  return useActiveAccountCore(connectionManager);
+}

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

@@ -0,0 +1,17 @@
+import { useActiveWalletCore } from "../../../core/hooks/wallets/useActiveWallet.js";
+import { connectionManager } from "../../index.js";
+
+/**
+ * A hook that returns the active wallet
+ * @returns The active `Wallet` or `undefined` if no active wallet is set.
+ * @example
+ * ```jsx
+ * import { useActiveWallet } from "thirdweb/react";
+ *
+ * const wallet = useActiveWallet();
+ * ```
+ * @walletConnection
+ */
+export function useActiveWallet() {
+  return useActiveWalletCore(connectionManager);
+}

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

@@ -0,0 +1,17 @@
+import { useActiveWalletChainCore } from "../../../core/hooks/wallets/useActiveWalletChain.js";
+import { connectionManager } from "../../index.js";
+
+/**
+ * A hook that returns the chain the active wallet is connected to
+ * @returns The chain the active wallet is connected to or null if no active wallet.
+ * @example
+ * ```jsx
+ * import { useActiveWalletChain } from "thirdweb/react";
+ *
+ * const chainId = useActiveWalletChain();
+ * ```
+ * @walletConnection
+ */
+export function useActiveWalletChain() {
+  return useActiveWalletChainCore(connectionManager);
+}

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

@@ -0,0 +1,21 @@
+import { useActiveWalletConnectionStatusCore } from "../../../core/hooks/wallets/useActiveWalletConnectionStatus.js";
+import { connectionManager } from "../../index.js";
+
+/**
+ * A hook that returns the active account's connection status.
+ * @example
+ * ```jsx
+ * import { useActiveWalletConnectionStatus } from "thirdweb/react";
+ *
+ * function Example() {
+ *   const status = useActiveWalletConnectionStatus();
+ *   console.log(status);
+ *   return <div> ... </div>;
+ * }
+ * ```
+ * @returns The active wallet's connection status.
+ * @walletConnection
+ */
+export function useActiveWalletConnectionStatus() {
+  return useActiveWalletConnectionStatusCore(connectionManager);
+}

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

@@ -0,0 +1,27 @@
+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";
+
+/**
+ * Autoconnect the last previously connected wallet.
+ *
+ * @example
+ * ```tsx
+ * import { useAutoConnect } from "thirdweb/react";
+ *
+ * const { data: autoConnected, isLoading } = useAutoConnect({
+ *  client,
+ *  accountAbstraction,
+ *  wallets,
+ *  onConnect,
+ *  timeout,
+ * });
+ * ```
+ * @walletConnection
+ * @param props - The props for auto connect.
+ * @returns whether the auto connect was successful.
+ */
+export function useAutoConnect(props: AutoConnectProps) {
+  return useAutoConnectCore(connectionManager, nativeLocalStorage, props);
+}

package/src/react/web/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/web/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/web/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/web/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/web/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/web/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/web/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/web/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/web/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/web/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/web/index.ts

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