thirdweb 5.29.3-nightly-476b6cc271b0891fa01fb09ca509c564b850ccfa-20240614185219 → 5.29.3-nightly-b051d844d0bb2d08b0d885d8c23e75ee97209976-20240614190954

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);

package/src/react/web/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/web/ui/ConnectWallet/ConnectButton.tsx

@@ -4,18 +4,17 @@ import styled from "@emotion/styled";
 import { useEffect, useMemo, useState } from "react";
 import { iconSize } from "../../../core/design-system/index.js";
 import { useSiweAuth } from "../../../core/hooks/auth/useSiweAuth.js";
-import { AutoConnect } from "../../../core/hooks/connection/AutoConnect.js";
-import {
-  useActiveAccount,
-  useActiveWalletConnectionStatus,
-} from "../../../core/hooks/wallets/wallet-hooks.js";
 import { ConnectUIContext } from "../../../core/providers/wallet-connection.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,
 } from "../../providers/wallet-ui-states-provider.js";
 import { canFitWideModal } from "../../utils/canFitWideModal.js";
 import { getDefaultWallets } from "../../wallets/defaultWallets.js";
+import { AutoConnect } from "../AutoConnect/AutoConnect.js";
 import { Modal } from "../components/Modal.js";
 import { Spinner } from "../components/Spinner.js";
 import { Container } from "../components/basic.js";
@@ -135,8 +134,9 @@ function ConnectButtonInner(
     connectLocale: ConnectLocale;
   },
 ) {
+  const activeWallet = useActiveWallet();
   const activeAccount = useActiveAccount();
-  const siweAuth = useSiweAuth(props.auth);
+  const siweAuth = useSiweAuth(activeWallet, 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/Details.tsx

@@ -37,15 +37,13 @@ import {
   useChainsQuery,
 } from "../../../core/hooks/others/useChainQuery.js";
 import { useWalletBalance } from "../../../core/hooks/others/useWalletBalance.js";
-import {
-  useActiveAccount,
-  useActiveWallet,
-  useActiveWalletChain,
-  useDisconnect,
-  useSwitchActiveWalletChain,
-} from "../../../core/hooks/wallets/wallet-hooks.js";
 import { SetRootElementContext } from "../../../core/providers/RootElementContext.js";
 import { shortenString } from "../../../core/utils/addresses.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 { hasSmartAccount } from "../../utils/isSmartWallet.js";
 import { ChainIcon } from "../components/ChainIcon.js";
 import { CopyIcon } from "../components/CopyIcon.js";

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

@@ -12,16 +12,15 @@ import {
 import { type Theme, radius } from "../../../../core/design-system/index.js";
 import type { SiweAuthOptions } from "../../../../core/hooks/auth/useSiweAuth.js";
 import { useSiweAuth } from "../../../../core/hooks/auth/useSiweAuth.js";
-import { AutoConnect } from "../../../../core/hooks/connection/AutoConnect.js";
-import {
-  useActiveAccount,
-  useIsAutoConnecting,
-} from "../../../../core/hooks/wallets/wallet-hooks.js";
 import { ConnectUIContext } from "../../../../core/providers/wallet-connection.js";
+import { useActiveAccount } from "../../../hooks/wallets/useActiveAccount.js";
+import { useActiveWallet } from "../../../hooks/wallets/useActiveWallet.js";
+import { useIsAutoConnecting } from "../../../hooks/wallets/useIsAutoConnecting.js";
 import { WalletUIStatesProvider } from "../../../providers/wallet-ui-states-provider.js";
 import { canFitWideModal } from "../../../utils/canFitWideModal.js";
 import { getDefaultWallets } from "../../../wallets/defaultWallets.js";
 import { LoadingScreen } from "../../../wallets/shared/LoadingScreen.js";
+import { AutoConnect } from "../../AutoConnect/AutoConnect.js";
 import { DynamicHeight } from "../../components/DynamicHeight.js";
 import { StyledDiv } from "../../design-system/elements.js";
 import type { LocaleId } from "../../types.js";
@@ -335,8 +334,9 @@ export type ConnectEmbedProps = {
  * @component
  */
 export function ConnectEmbed(props: ConnectEmbedProps) {
+  const activeWallet = useActiveWallet();
   const activeAccount = useActiveAccount();
-  const siweAuth = useSiweAuth(props.auth);
+  const siweAuth = useSiweAuth(activeWallet, props.auth);
   const show =
     !activeAccount || (siweAuth.requiresAuth && !siweAuth.isLoggedIn);
 
@@ -433,7 +433,8 @@ const ConnectEmbedContent = (
   // const requiresSignIn = false;
   const screenSetup = useSetupScreen();
   const { setScreen, initialScreen } = screenSetup;
-  const siweAuth = useSiweAuth(props.auth);
+  const activeWallet = useActiveWallet();
+  const siweAuth = useSiweAuth(activeWallet, props.auth);
   const activeAccount = useActiveAccount();
 
   const isAutoConnecting = useIsAutoConnecting();

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

@@ -1,7 +1,7 @@
 "use client";
 import { useCallback, useEffect, useState } from "react";
 import { useConnectUI } from "../../../../core/hooks/others/useWalletConnectionCtx.js";
-import { useActiveAccount } from "../../../../core/hooks/wallets/wallet-hooks.js";
+import { useActiveAccount } from "../../../hooks/wallets/useActiveAccount.js";
 import {
   useIsWalletModalOpen,
   useSetIsWalletModalOpen,

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

@@ -3,7 +3,8 @@ import { Suspense, lazy, useCallback } from "react";
 import type { Wallet } from "../../../../../wallets/interfaces/wallet.js";
 import { useSiweAuth } from "../../../../core/hooks/auth/useSiweAuth.js";
 import { useConnectUI } from "../../../../core/hooks/others/useWalletConnectionCtx.js";
-import { useSetActiveWallet } from "../../../../core/hooks/wallets/wallet-hooks.js";
+import { useActiveWallet } from "../../../hooks/wallets/useActiveWallet.js";
+import { useSetActiveWallet } from "../../../hooks/wallets/useSetActiveWallet.js";
 import { useSetSelectionData } from "../../../providers/wallet-ui-states-provider.js";
 import { LoadingScreen } from "../../../wallets/shared/LoadingScreen.js";
 import { WalletSelector } from "../WalletSelector.js";
@@ -44,7 +45,8 @@ export const ConnectModalContent = (props: {
   const setActiveWallet = useSetActiveWallet();
   const setSelectionData = useSetSelectionData();
 
-  const siweAuth = useSiweAuth(auth);
+  const activeWallet = useActiveWallet();
+  const siweAuth = useSiweAuth(activeWallet, auth);
   const showSignatureScreen = siweAuth.requiresAuth && !siweAuth.isLoggedIn;
 
   const handleConnected = useCallback(

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

@@ -1,10 +1,11 @@
 "use client";
 import { ExclamationTriangleIcon } from "@radix-ui/react-icons";
 import { useCallback, useEffect, useRef, useState } from "react";
+import { webLocalStorage } from "../../../../../utils/storage/webStorage.js";
 import type { Wallet } from "../../../../../wallets/interfaces/wallet.js";
 import type { SmartWalletOptions } from "../../../../../wallets/smart/types.js";
 import type { WalletInfo } from "../../../../../wallets/wallet-info.js";
-import { connectionManager } from "../../../../core/connectionManager.js";
+import { connectionManagerSingleton } from "../../../../core/connectionManager.js";
 import {
   fontSize,
   iconSize,
@@ -114,13 +115,12 @@ function SmartWalletConnecting(props: {
     setSmartWalletConnectionStatus("connecting");
 
     try {
-      const connected = await connectionManager.handleConnection(
-        personalWallet,
-        {
-          accountAbstraction: props.accountAbstraction,
-          client,
-        },
-      );
+      const connected = await connectionManagerSingleton(
+        webLocalStorage,
+      ).handleConnection(personalWallet, {
+        accountAbstraction: props.accountAbstraction,
+        client,
+      });
       done(connected);
       setSmartWalletConnectionStatus("idle");
     } catch (e) {

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

@@ -2,7 +2,7 @@
 import { createContext, useContext, useEffect, useRef, useState } from "react";
 import type { Wallet } from "../../../../../wallets/interfaces/wallet.js";
 import { useConnectUI } from "../../../../core/hooks/others/useWalletConnectionCtx.js";
-import { useActiveAccount } from "../../../../core/hooks/wallets/wallet-hooks.js";
+import { useActiveAccount } from "../../../hooks/wallets/useActiveAccount.js";
 import { reservedScreens } from "../constants.js";
 
 type Screen = string | Wallet;

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

@@ -19,10 +19,8 @@ import {
   useChainQuery,
   useChainsQuery,
 } from "../../../core/hooks/others/useChainQuery.js";
-import {
-  useActiveWalletChain,
-  useSwitchActiveWalletChain,
-} from "../../../core/hooks/wallets/wallet-hooks.js";
+import { useActiveWalletChain } from "../../hooks/wallets/useActiveWalletChain.js";
+import { useSwitchActiveWalletChain } from "../../hooks/wallets/useSwitchActiveWalletChain.js";
 import { ChainIcon } from "../components/ChainIcon.js";
 import { Skeleton } from "../components/Skeleton.js";
 import { Spacer } from "../components/Spacer.js";

package/src/react/web/ui/ConnectWallet/screens/Buy/BuyScreen.tsx

@@ -19,10 +19,8 @@ import {
 import { useWalletBalance } from "../../../../../core/hooks/others/useWalletBalance.js";
 import { useBuyWithCryptoQuote } from "../../../../../core/hooks/pay/useBuyWithCryptoQuote.js";
 import { useBuyWithFiatQuote } from "../../../../../core/hooks/pay/useBuyWithFiatQuote.js";
-import {
-  useActiveAccount,
-  useActiveWalletChain,
-} from "../../../../../core/hooks/wallets/wallet-hooks.js";
+import { useActiveAccount } from "../../../../hooks/wallets/useActiveAccount.js";
+import { useActiveWalletChain } from "../../../../hooks/wallets/useActiveWalletChain.js";
 import { LoadingScreen } from "../../../../wallets/shared/LoadingScreen.js";
 import {
   Drawer,

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

@@ -5,7 +5,7 @@ import type { BuyWithCryptoQuote } from "../../../../../../../pay/buyWithCrypto/
 import { getPostOnRampQuote } from "../../../../../../../pay/buyWithFiat/getPostOnRampQuote.js";
 import type { BuyWithFiatStatus } from "../../../../../../../pay/buyWithFiat/getStatus.js";
 import { iconSize } from "../../../../../../core/design-system/index.js";
-import { useActiveAccount } from "../../../../../../core/hooks/wallets/wallet-hooks.js";
+import { useActiveAccount } from "../../../../../hooks/wallets/useActiveAccount.js";
 import { Spacer } from "../../../../components/Spacer.js";
 import { Spinner } from "../../../../components/Spinner.js";
 import { Container, ModalHeader } from "../../../../components/basic.js";

package/src/react/web/ui/ConnectWallet/screens/Buy/main/useBuyTxStates.ts

@@ -2,7 +2,7 @@ import { useEffect, useState } from "react";
 import { formatNumber } from "../../../../../../../utils/formatNumber.js";
 import { toEther } from "../../../../../../../utils/units.js";
 import type { Account } from "../../../../../../../wallets/interfaces/wallet.js";
-import { getTotalTxCostForBuy } from "../../../../../../core/hooks/contract/useSendTransaction.js";
+import { getTotalTxCostForBuy } from "../../../../../../core/hooks/transaction/useSendTransaction.js";
 import { wait } from "../../../../../../core/utils/wait.js";
 import type { BuyForTx } from "./types.js";
 

package/src/react/web/ui/ConnectWallet/screens/Buy/main/useUISelectionStates.ts

@@ -3,7 +3,7 @@ import { polygon } from "../../../../../../../chains/chain-definitions/polygon.j
 import type { Chain } from "../../../../../../../chains/types.js";
 import { formatNumber } from "../../../../../../../utils/formatNumber.js";
 import { toEther } from "../../../../../../../utils/units.js";
-import { useActiveWalletChain } from "../../../../../../core/hooks/wallets/wallet-hooks.js";
+import { useActiveWalletChain } from "../../../../../hooks/wallets/useActiveWalletChain.js";
 import { useDebouncedValue } from "../../../../hooks/useDebouncedValue.js";
 import type { PayUIOptions } from "../../../ConnectButtonProps.js";
 import { type ERC20OrNativeToken, NATIVE_TOKEN } from "../../nativeToken.js";

package/src/react/web/ui/ConnectWallet/screens/Buy/swap/ConfirmationScreen.tsx

@@ -10,12 +10,11 @@ import {
   fontSize,
   iconSize,
 } from "../../../../../../core/design-system/index.js";
-import { useSendTransactionCore } from "../../../../../../core/hooks/contract/useSendTransaction.js";
 import { useChainQuery } from "../../../../../../core/hooks/others/useChainQuery.js";
-import {
-  useActiveWallet,
-  useActiveWalletChain,
-} from "../../../../../../core/hooks/wallets/wallet-hooks.js";
+import { useSendTransactionCore } from "../../../../../../core/hooks/transaction/useSendTransaction.js";
+import { useActiveWallet } from "../../../../../hooks/wallets/useActiveWallet.js";
+import { useActiveWalletChain } from "../../../../../hooks/wallets/useActiveWalletChain.js";
+import { useSwitchActiveWalletChain } from "../../../../../hooks/wallets/useSwitchActiveWalletChain.js";
 import { Skeleton } from "../../../../components/Skeleton.js";
 import { Spacer } from "../../../../components/Spacer.js";
 import { Spinner } from "../../../../components/Spinner.js";
@@ -51,9 +50,13 @@ export function SwapConfirmationScreen(props: {
   fromTokenSymbol: string;
   isFiatFlow: boolean;
 }) {
-  const sendTransactionMutation = useSendTransactionCore();
   const activeChain = useActiveWalletChain();
   const activeWallet = useActiveWallet();
+  const switchChain = useSwitchActiveWalletChain();
+  const sendTransactionMutation = useSendTransactionCore({
+    wallet: activeWallet,
+    switchChain,
+  });
 
   const isApprovalRequired = props.quote.approval !== undefined;
   const initialStep = isApprovalRequired ? "approval" : "swap";

package/src/react/web/ui/ConnectWallet/screens/Buy/swap/PayWithCrypto.tsx

@@ -10,7 +10,7 @@ import {
 } from "../../../../../../core/design-system/index.js";
 import { useChainQuery } from "../../../../../../core/hooks/others/useChainQuery.js";
 import { useWalletBalance } from "../../../../../../core/hooks/others/useWalletBalance.js";
-import { useActiveAccount } from "../../../../../../core/hooks/wallets/wallet-hooks.js";
+import { useActiveAccount } from "../../../../../hooks/wallets/useActiveAccount.js";
 import { Skeleton } from "../../../../components/Skeleton.js";
 import { TokenIcon } from "../../../../components/TokenIcon.js";
 import { Container } from "../../../../components/basic.js";

package/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/BuyTxHistory.tsx

@@ -12,10 +12,8 @@ import {
   spacing,
 } from "../../../../../../core/design-system/index.js";
 import { useChainQuery } from "../../../../../../core/hooks/others/useChainQuery.js";
-import {
-  useActiveAccount,
-  useActiveWalletChain,
-} from "../../../../../../core/hooks/wallets/wallet-hooks.js";
+import { useActiveAccount } from "../../../../../hooks/wallets/useActiveAccount.js";
+import { useActiveWalletChain } from "../../../../../hooks/wallets/useActiveWalletChain.js";
 import { Skeleton } from "../../../../components/Skeleton.js";
 import { Spinner } from "../../../../components/Spinner.js";
 import { Container, Line, ModalHeader } from "../../../../components/basic.js";

package/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/useBuyTransactionsToShow.ts

@@ -10,7 +10,7 @@ import {
   getBuyWithFiatStatus,
 } from "../../../../../../../pay/buyWithFiat/getStatus.js";
 import { useBuyHistory } from "../../../../../../core/hooks/pay/useBuyHistory.js";
-import { useActiveAccount } from "../../../../../../core/hooks/wallets/wallet-hooks.js";
+import { useActiveAccount } from "../../../../../hooks/wallets/useActiveAccount.js";
 import { pendingTransactions } from "../swap/pendingSwapTx.js";
 
 export type TxStatusInfo =

package/src/react/web/ui/ConnectWallet/screens/ReceiveFunds.tsx

@@ -6,8 +6,8 @@ import {
   radius,
   spacing,
 } from "../../../../core/design-system/index.js";
-import { useActiveAccount } from "../../../../core/hooks/wallets/wallet-hooks.js";
 import { shortenString } from "../../../../core/utils/addresses.js";
+import { useActiveAccount } from "../../../hooks/wallets/useActiveAccount.js";
 import { CopyIcon } from "../../components/CopyIcon.js";
 import { QRCode } from "../../components/QRCode.js";
 import { Spacer } from "../../components/Spacer.js";