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

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

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

@@ -8,10 +8,8 @@ import {
   spacing,
 } from "../../../../core/design-system/index.js";
 import { useWalletBalance } from "../../../../core/hooks/others/useWalletBalance.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 { Spacer } from "../../components/Spacer.js";
 import { Spinner } from "../../components/Spinner.js";

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

@@ -10,11 +10,9 @@ import {
   spacing,
 } from "../../../../core/design-system/index.js";
 import { useSiweAuth } from "../../../../core/hooks/auth/useSiweAuth.js";
-import {
-  useActiveWallet,
-  useDisconnect,
-} from "../../../../core/hooks/wallets/wallet-hooks.js";
 import { wait } from "../../../../core/utils/wait.js";
+import { useActiveWallet } from "../../../hooks/wallets/useActiveWallet.js";
+import { useDisconnect } from "../../../hooks/wallets/useDisconnect.js";
 import { LoadingScreen } from "../../../wallets/shared/LoadingScreen.js";
 import { Spacer } from "../../components/Spacer.js";
 import { Spinner } from "../../components/Spinner.js";
@@ -47,7 +45,8 @@ export const SignatureScreen: React.FC<{
     connectLocale,
   } = props;
 
-  const siweAuth = useSiweAuth(props.auth);
+  const activeWallet = useActiveWallet();
+  const siweAuth = useSiweAuth(activeWallet, props.auth);
   const [status, setStatus] = useState<Status>("idle");
   const { disconnect } = useDisconnect();
   const wallet = useActiveWallet();

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

@@ -14,7 +14,7 @@ import {
 } from "../../../../core/design-system/index.js";
 import { useChainQuery } from "../../../../core/hooks/others/useChainQuery.js";
 import { useTokenInfo } from "../../../../core/hooks/others/useTokenInfo.js";
-import { useActiveAccount } from "../../../../core/hooks/wallets/wallet-hooks.js";
+import { useActiveAccount } from "../../../hooks/wallets/useActiveAccount.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/ViewFunds.tsx

@@ -2,10 +2,8 @@ import type { Chain } from "../../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../../client/client.js";
 import { fontSize } from "../../../../core/design-system/index.js";
 import { useWalletBalance } from "../../../../core/hooks/others/useWalletBalance.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 { Spacer } from "../../components/Spacer.js";
 import { TokenIcon } from "../../components/TokenIcon.js";

package/src/react/web/ui/TransactionButton/TransactionButton.test.tsx

@@ -37,9 +37,13 @@ const mocks = vi.hoisted(() => {
 
 describe.sequential("TransactionButton", () => {
   beforeAll(() => {
-    vi.mock("../../../core/hooks/wallets/wallet-hooks.js", () => ({
+    vi.mock("../../../web/hooks/wallets/useActiveAccount.js", () => ({
       useActiveAccount: mocks.activeAccount,
+    }));
+    vi.mock("../../../web/hooks/wallets/useActiveWallet.js", () => ({
       useActiveWallet: mocks.activeWallet,
+    }));
+    vi.mock("../../../web/hooks/wallets/useSwitchActiveWalletChain.js", () => ({
       useSwitchActiveWalletChain: mocks.switchActiveWalletChain,
     }));
   });

package/src/react/web/ui/TransactionButton/index.tsx

@@ -2,8 +2,10 @@
 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 { Spinner } from "../components/Spinner.js";
 import { Button } from "../components/buttons.js";
 
@@ -50,7 +52,12 @@ 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,
+  );
 
   return (
     <Button
@@ -59,7 +66,7 @@ export function TransactionButton(props: TransactionButtonProps) {
       variant={"primary"}
       unstyled={unstyled}
       data-is-loading={isPending}
-      onClick={handleClick}
+      onClick={() => handleClick()}
       {...buttonProps}
       style={
         !unstyled

package/src/react/web/ui/components/SwitchNetwork.tsx

@@ -1,6 +1,6 @@
 import { useState } from "react";
 import type { Chain } from "../../../../chains/types.js";
-import { useSwitchActiveWalletChain } from "../../../core/hooks/wallets/wallet-hooks.js";
+import { useSwitchActiveWalletChain } from "../../hooks/wallets/useSwitchActiveWalletChain.js";
 import { Spinner } from "./Spinner.js";
 import { Button, type ButtonProps } from "./buttons.js";
 

package/src/react/web/ui/components/WalletImage.tsx

@@ -1,12 +1,12 @@
 "use client";
 import { useEffect, useState } from "react";
 import type { ThirdwebClient } from "../../../../client/client.js";
+import { webLocalStorage } from "../../../../utils/storage/webStorage.js";
 import { getInstalledWalletProviders } from "../../../../wallets/injected/mipdStore.js";
 import { getStoredActiveWalletId } from "../../../../wallets/manager/index.js";
 import type { WalletId } from "../../../../wallets/wallet-types.js";
 import { radius } from "../../../core/design-system/index.js";
-import { useActiveWallet } from "../../../core/hooks/wallets/wallet-hooks.js";
-import { getStorage } from "../../../core/storage.js";
+import { useActiveWallet } from "../../hooks/wallets/useActiveWallet.js";
 import { getLastAuthProvider } from "../../wallets/in-app/storage.js";
 import {
   emailIcon,
@@ -39,7 +39,7 @@ export function WalletImage(props: {
       // show EOA icon for external wallets
       // show auth provider icon for in-app wallets
       // show the admin EOA icon for smart
-      const storage = getStorage();
+      const storage = webLocalStorage;
       let activeEOAId = props.id;
       if (props.id === "smart") {
         const storedId = await getStoredActiveWalletId(storage);

package/src/react/web/ui/hooks/useSendToken.ts

@@ -5,8 +5,8 @@ import { transfer } from "../../../../extensions/erc20/write/transfer.js";
 import { waitForReceipt } from "../../../../transaction/actions/wait-for-tx-receipt.js";
 import { prepareTransaction } from "../../../../transaction/prepare-transaction.js";
 import { toWei } from "../../../../utils/units.js";
-import { useSendTransactionCore } from "../../../core/hooks/contract/useSendTransaction.js";
-import { useActiveWalletChain } from "../../../core/hooks/wallets/wallet-hooks.js";
+import { useSendTransaction } from "../../hooks/transaction/useSendTransaction.js";
+import { useActiveWalletChain } from "../../hooks/wallets/useActiveWalletChain.js";
 
 // Q: Should we expose this hook?
 
@@ -15,7 +15,9 @@ import { useActiveWalletChain } from "../../../core/hooks/wallets/wallet-hooks.j
  * @internal
  */
 export function useSendToken(client: ThirdwebClient) {
-  const sendTransaction = useSendTransactionCore();
+  const sendTransaction = useSendTransaction({
+    payModal: false,
+  });
   const activeChain = useActiveWalletChain();
 
   return useMutation({

package/src/react/web/wallets/in-app/InAppWalletFormUI.tsx

@@ -1,6 +1,7 @@
 "use client";
 import styled from "@emotion/styled";
 import { useState } from "react";
+import { webLocalStorage } from "../../../../utils/storage/webStorage.js";
 import type {
   InAppWalletAuth,
   InAppWalletSocialAuth,
@@ -131,7 +132,7 @@ export const InAppWalletFormUI = (props: InAppWalletFormUIProps) => {
         },
       });
 
-      await setLastAuthProvider(strategy);
+      await setLastAuthProvider(strategy, webLocalStorage);
 
       setData({
         socialLogin: {

package/src/react/web/wallets/in-app/InAppWalletOTPLoginUI.tsx

@@ -1,5 +1,6 @@
 "use client";
 import { useCallback, useEffect, useRef, useState } from "react";
+import { webLocalStorage } from "../../../../utils/storage/webStorage.js";
 import type { SendEmailOtpReturnType } from "../../../../wallets/in-app/core/authentication/type.js";
 import { preAuthenticate } from "../../../../wallets/in-app/web/lib/auth/index.js";
 import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
@@ -85,7 +86,7 @@ export function InAppWalletOTPLoginUI(props: {
         verificationCode: otp,
         client,
       });
-      await setLastAuthProvider("email");
+      await setLastAuthProvider("email", webLocalStorage);
     } else if ("phone" in userInfo) {
       await wallet.connect({
         chain,
@@ -94,7 +95,7 @@ export function InAppWalletOTPLoginUI(props: {
         verificationCode: otp,
         client,
       });
-      await setLastAuthProvider("phone");
+      await setLastAuthProvider("phone", webLocalStorage);
     } else {
       throw new Error("Invalid userInfo");
     }

package/src/react/web/wallets/in-app/InAppWalletPassKeyLogin.tsx

@@ -2,6 +2,7 @@ import { useEffect, useRef, useState } from "react";
 import type { Chain } from "../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import type { Wallet } from "../../../../exports/wallets.js";
+import { webLocalStorage } from "../../../../utils/storage/webStorage.js";
 import { hasStoredPasskey } from "../../../../wallets/in-app/web/lib/auth/passkeys.js";
 import { iconSize } from "../../../core/design-system/index.js";
 import { useConnectUI } from "../../../core/hooks/others/useWalletConnectionCtx.js";
@@ -127,7 +128,7 @@ function LoginScreen(props: {
         type: "sign-in",
         chain,
       });
-      await setLastAuthProvider("passkey");
+      await setLastAuthProvider("passkey", webLocalStorage);
       done();
     } catch {
       setStatus("error");
@@ -187,7 +188,7 @@ function SignupScreen(props: {
         type: "sign-up",
         chain,
       });
-      await setLastAuthProvider("passkey");
+      await setLastAuthProvider("passkey", webLocalStorage);
       done();
     } catch {
       setStatus("error");