thirdweb 5.40.0-nightly-3848327373e49aa83c5902e6a16d5b8e96cf1eeb-20240726000343 → 5.40.1-nightly-b128530355f0dc47d897bd2ef7c3823752ea9b6c-20240727000321

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

@@ -1,35 +1,13 @@
-import { CheckCircledIcon } from "@radix-ui/react-icons";
-import { useCallback, useContext, useEffect, useRef, useState } from "react";
-import type { ThirdwebClient } from "../../../../client/client.js";
-import { isNativeTokenAddress } from "../../../../constants/addresses.js";
-import type { WaitForReceiptOptions } from "../../../../transaction/actions/wait-for-tx-receipt.js";
-import type { PreparedTransaction } from "../../../../transaction/prepare-transaction.js";
-import { toTokens } from "../../../../utils/units.js";
-import type { Wallet } from "../../../../wallets/interfaces/wallet.js";
-import type { GetWalletBalanceResult } from "../../../../wallets/utils/getWalletBalance.js";
-import { CustomThemeProvider } from "../../../core/design-system/CustomThemeProvider.js";
-import { type Theme, iconSize } from "../../../core/design-system/index.js";
-import type { PayUIOptions } from "../../../core/hooks/connection/ConnectButtonProps.js";
+import { useContext } from "react";
 import {
   type SendTransactionConfig,
+  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 type { SupportedTokens } from "../../../core/utils/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 { PayTxHistoryScreen } from "../../ui/ConnectWallet/screens/Buy/pay-transactions/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";
+import { TransactionModal } from "../../ui/TransactionButton/TransactionModal.js";
 
 /**
  * A hook to send a transaction.
@@ -48,9 +26,9 @@ import { useSwitchActiveWalletChain } from "../wallets/useSwitchActiveWalletChai
  * @transaction
  */
 export function useSendTransaction(config: SendTransactionConfig = {}) {
-  const activeWallet = useActiveWallet();
   const switchChain = useSwitchActiveWalletChain();
   const wallet = useActiveWallet();
+  const setRootEl = useContext(SetRootElementContext);
   const payModal = config.payModal;
 
   let payModalEnabled = true;
@@ -59,263 +37,41 @@ export function useSendTransaction(config: SendTransactionConfig = {}) {
     payModalEnabled = false;
   }
 
-  // TODO handle erc20 pay modal
-  // 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;
-    }
-  }
-
-  if (activeWallet && activeWallet.id === "inApp") {
-    const options = (activeWallet as Wallet<"inApp">).getConfig();
-
-    if (options && "smartAccount" in options && options.smartAccount) {
-      const smartOptions = options.smartAccount;
-      if ("sponsorGas" in smartOptions && smartOptions.sponsorGas === true) {
-        payModalEnabled = false;
-      }
-
-      if ("gasless" in smartOptions && smartOptions.gasless === true) {
-        payModalEnabled = false;
-      }
-    }
-  }
+  const showPayModal = (data: ShowModalData) => {
+    if (payModal === false) return;
+    setRootEl(
+      <TransactionModal
+        title={payModal?.metadata?.name || "Transaction"}
+        tx={data.tx}
+        onComplete={data.sendTx}
+        onClose={() => {
+          setRootEl(null);
+          data.rejectTx(
+            new Error("User rejected transaction by closing modal"),
+          );
+        }}
+        onTxSent={data.resolveTx}
+        client={data.tx.client}
+        localeId={payModal?.locale || "en_US"}
+        supportedTokens={payModal?.supportedTokens}
+        theme={payModal?.theme || "dark"}
+        payOptions={{
+          buyWithCrypto: payModal?.buyWithCrypto,
+          buyWithFiat: payModal?.buyWithFiat,
+          purchaseData: payModal?.purchaseData,
+          mode: "transaction",
+          transaction: data.tx,
+          metadata: payModal?.metadata,
+        }}
+      />,
+    );
+  };
 
-  const setRootEl = useContext(SetRootElementContext);
   return useSendTransactionCore({
     showPayModal:
-      !payModalEnabled || payModal === false
-        ? undefined
-        : (data) => {
-            const prefillBuy: PayUIOptions["prefillBuy"] =
-              data.currency && !isNativeTokenAddress(data.currency.address)
-                ? {
-                    chain: data.tx.chain,
-                    amount: toTokens(data.totalCostWei, data.currency.decimals),
-                    token: data.currency,
-                  }
-                : undefined;
-            setRootEl(
-              <TxModal
-                title={payModal?.metadata?.title || "Buy"}
-                tx={data.tx}
-                onComplete={data.sendTx}
-                onClose={() => {
-                  setRootEl(null);
-                  data.rejectTx(
-                    new Error("User rejected transaction by closing modal"),
-                  );
-                }}
-                onTxSent={data.resolveTx}
-                client={data.tx.client}
-                localeId={payModal?.locale || "en_US"}
-                supportedTokens={payModal?.supportedTokens}
-                theme={payModal?.theme || "dark"}
-                txCostWei={data.totalCostWei}
-                walletBalance={data.walletBalance}
-                payOptions={{
-                  buyWithCrypto: payModal?.buyWithCrypto,
-                  buyWithFiat: payModal?.buyWithFiat,
-                  purchaseData: payModal?.purchaseData,
-                  prefillBuy,
-                }}
-              />,
-            );
-          },
+      !payModalEnabled || payModal === false ? undefined : showPayModal,
     gasless: config.gasless,
     switchChain,
     wallet,
   });
 }
-
-type ModalProps = {
-  title: string;
-  onComplete: () => void;
-  onClose: () => void;
-  client: ThirdwebClient;
-  localeId: LocaleId;
-  supportedTokens?: SupportedTokens;
-  theme: Theme | "light" | "dark";
-  txCostWei: bigint;
-  walletBalance: GetWalletBalanceResult;
-  tx: PreparedTransaction;
-  payOptions: PayUIOptions;
-  onTxSent: (data: WaitForReceiptOptions) => void;
-};
-
-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}
-        onTxSent={props.onTxSent}
-      />
-    );
-  }
-
-  if (screen === "tx-history") {
-    return (
-      <PayTxHistoryScreen
-        title={props.title}
-        client={props.client}
-        onBack={() => {
-          setScreen("buy");
-        }}
-        onDone={() => {
-          setScreen("execute-tx");
-        }}
-        isBuyForTx={true}
-        isEmbed={false}
-      />
-    );
-  }
-
-  return (
-    <LazyBuyScreen
-      title={props.title}
-      isEmbed={false}
-      client={props.client}
-      onViewPendingTx={() => {
-        setScreen("tx-history");
-      }}
-      supportedTokens={props.supportedTokens}
-      connectLocale={localeQuery.data}
-      buyForTx={{
-        balance: props.walletBalance.value,
-        cost: props.txCostWei,
-        tx: props.tx,
-        tokenSymbol: props.walletBalance.symbol,
-        tokenDecimals: props.walletBalance.decimals,
-      }}
-      theme={typeof props.theme === "string" ? props.theme : props.theme.type}
-      payOptions={props.payOptions}
-      onDone={() => {
-        setScreen("execute-tx");
-      }}
-      connectOptions={undefined}
-      onBack={undefined}
-    />
-  );
-}
-
-function ExecutingTxScreen(props: {
-  tx: PreparedTransaction;
-  closeModal: () => void;
-  onTxSent: (data: WaitForReceiptOptions) => void;
-}) {
-  const sendTxCore = useSendTransaction({
-    payModal: false,
-  });
-  const [status, setStatus] = useState<"loading" | "failed" | "sent">(
-    "loading",
-  );
-
-  const sendTx = useCallback(async () => {
-    setStatus("loading");
-    try {
-      const txData = await sendTxCore.mutateAsync(props.tx);
-      props.onTxSent(txData);
-      setStatus("sent");
-    } catch (e) {
-      // Do not reject the transaction here, because the user may want to try again
-      // we only reject on modal close
-      console.error(e);
-      setStatus("failed");
-    }
-  }, [sendTxCore, props.tx, props.onTxSent]);
-
-  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="sm" />
-      <Text color="danger" center size="sm">
-        {status === "failed" && sendTxCore.error
-          ? sendTxCore.error.message
-          : ""}
-      </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/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";
@@ -816,13 +816,15 @@ function DetailsModal(props: {
         client={client}
         onBack={() => setScreen("main")}
         supportedTokens={props.supportedTokens}
-        onViewPendingTx={() => setScreen("transactions")}
         connectLocale={locale}
-        payOptions={props.detailsModal?.payOptions || {}}
+        payOptions={
+          props.detailsModal?.payOptions || {
+            mode: "fund_wallet",
+          }
+        }
         theme={typeof props.theme === "string" ? props.theme : props.theme.type}
         onDone={closeModal}
         connectOptions={undefined}
-        buyForTx={undefined}
       />
     );
   }
@@ -1246,7 +1248,7 @@ export type UseWalletDetailsModalOptions = {
    *
    * thirdweb Pay allows users to buy tokens using crypto or fiat currency.
    */
-  payOptions?: PayUIOptions;
+  payOptions?: Extract<PayUIOptions, { mode?: "fund_wallet" }>;
 
   /**
    * Display the balance of a token instead of the native token

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

@@ -15,9 +15,9 @@ import {
   useSiweAuth,
 } from "../../../../core/hooks/auth/useSiweAuth.js";
 import type { ConnectEmbedProps } from "../../../../core/hooks/connection/ConnectEmbedProps.js";
-import { useActiveAccount } from "../../../hooks/wallets/useActiveAccount.js";
-import { useActiveWallet } from "../../../hooks/wallets/useActiveWallet.js";
-import { useIsAutoConnecting } from "../../../hooks/wallets/useIsAutoConnecting.js";
+import { useActiveAccount } from "../../../../core/hooks/wallets/useActiveAccount.js";
+import { useActiveWallet } from "../../../../core/hooks/wallets/useActiveWallet.js";
+import { useIsAutoConnecting } from "../../../../core/hooks/wallets/useIsAutoConnecting.js";
 import { WalletUIStatesProvider } from "../../../providers/wallet-ui-states-provider.js";
 import { canFitWideModal } from "../../../utils/canFitWideModal.js";
 import { usePreloadWalletProviders } from "../../../utils/usePreloadWalletProviders.js";
@@ -35,6 +35,7 @@ import {
 } from "../constants.js";
 import { useConnectLocale } from "../locale/getConnectLocale.js";
 import type { ConnectLocale } from "../locale/types.js";
+import type { WelcomeScreen } from "../screens/types.js";
 import { ConnectModalContent } from "./ConnectModalContent.js";
 import { useSetupScreen } from "./screen.js";
 
@@ -148,8 +149,6 @@ export function ConnectEmbed(props: ConnectEmbedProps) {
           client={props.client}
           connectLocale={localeQuery.data}
           size={modalSize}
-          // TODO: no welcome screen for embed right now?
-          // welcomeScreen={undefined}
           meta={meta}
           isEmbed={true}
           localeId={props.locale || "en_US"}
@@ -161,6 +160,7 @@ export function ConnectEmbed(props: ConnectEmbedProps) {
           className={props.className}
           modalSize={modalSize}
           style={props.style}
+          welcomeScreen={props.welcomeScreen}
         />
         {autoConnectComp}
       </WalletUIStatesProvider>
@@ -203,6 +203,7 @@ const ConnectEmbedContent = (props: {
       }
     | undefined;
   wallets: Wallet[];
+  welcomeScreen: WelcomeScreen | undefined;
 }) => {
   // const requiresSignIn = false;
   const screenSetup = useSetupScreen({
@@ -258,9 +259,7 @@ const ConnectEmbedContent = (props: {
         connectLocale={props.connectLocale}
         meta={props.meta}
         size={props.size}
-        // TODO: no welcome screen for embed right now?
-        // welcomeScreen={undefined}
-        welcomeScreen={undefined}
+        welcomeScreen={props.welcomeScreen}
         isEmbed={props.isEmbed}
         onConnect={props.onConnect}
         recommendedWallets={props.recommendedWallets}

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

@@ -5,7 +5,7 @@ import type { ThirdwebClient } from "../../../../../client/client.js";
 import type { Wallet } from "../../../../../wallets/interfaces/wallet.js";
 import type { SmartWalletOptions } from "../../../../../wallets/smart/types.js";
 import type { SiweAuthOptions } from "../../../../core/hooks/auth/useSiweAuth.js";
-import { useActiveAccount } from "../../../hooks/wallets/useActiveAccount.js";
+import { useActiveAccount } from "../../../../core/hooks/wallets/useActiveAccount.js";
 import {
   useIsWalletModalOpen,
   useSetIsWalletModalOpen,

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

@@ -9,9 +9,9 @@ import {
   type SiweAuthOptions,
   useSiweAuth,
 } from "../../../../core/hooks/auth/useSiweAuth.js";
-import { useActiveWallet } from "../../../hooks/wallets/useActiveWallet.js";
-import { useSetActiveWallet } from "../../../hooks/wallets/useSetActiveWallet.js";
-import { connectionManager } from "../../../index.js";
+import { useActiveWallet } from "../../../../core/hooks/wallets/useActiveWallet.js";
+import { useSetActiveWallet } from "../../../../core/hooks/wallets/useSetActiveWallet.js";
+import { useConnectionManager } from "../../../../core/providers/connection-manager.js";
 import { useSetSelectionData } from "../../../providers/wallet-ui-states-provider.js";
 import { LoadingScreen } from "../../../wallets/shared/LoadingScreen.js";
 import { WalletSelector } from "../WalletSelector.js";
@@ -80,6 +80,7 @@ export const ConnectModalContent = (props: {
   const activeWallet = useActiveWallet();
   const siweAuth = useSiweAuth(activeWallet, props.auth);
   const showSignatureScreen = siweAuth.requiresAuth && !siweAuth.isLoggedIn;
+  const connectionManager = useConnectionManager();
 
   const handleConnected = useCallback(
     (wallet: Wallet) => {
@@ -116,6 +117,7 @@ export const ConnectModalContent = (props: {
       setSelectionData,
       shouldSetActive,
       initialScreen,
+      connectionManager,
     ],
   );
 

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

@@ -12,8 +12,8 @@ import {
   iconSize,
   spacing,
 } from "../../../../core/design-system/index.js";
+import { useConnectionManager } from "../../../../core/providers/connection-manager.js";
 import { useWalletInfo } from "../../../../core/utils/wallet.js";
-import { connectionManager } from "../../../index.js";
 import { LoadingScreen } from "../../../wallets/shared/LoadingScreen.js";
 import { getSmartWalletLocale } from "../../../wallets/smartWallet/locale/getSmartWalletLocale.js";
 import type { SmartWalletLocale } from "../../../wallets/smartWallet/locale/types.js";
@@ -135,6 +135,7 @@ function SmartWalletConnecting(props: {
     useState<"connecting" | "connect-error" | "idle">("idle");
   const [personalWalletChainSwitchStatus, setPersonalWalletChainSwitchStatus] =
     useState<"switching" | "switch-error" | "idle">("idle");
+  const connectionManager = useConnectionManager();
 
   const handleConnect = useCallback(async () => {
     if (!personalWallet) {
@@ -157,7 +158,13 @@ function SmartWalletConnecting(props: {
       console.error(e);
       setSmartWalletConnectionStatus("connect-error");
     }
-  }, [done, personalWallet, props.client, props.accountAbstraction]);
+  }, [
+    done,
+    personalWallet,
+    props.client,
+    props.accountAbstraction,
+    connectionManager,
+  ]);
 
   const connectStarted = useRef(false);
   useEffect(() => {

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

@@ -1,7 +1,7 @@
 "use client";
 import { createContext, useContext, useEffect, useRef, useState } from "react";
 import type { Wallet } from "../../../../../wallets/interfaces/wallet.js";
-import { useActiveAccount } from "../../../hooks/wallets/useActiveAccount.js";
+import { useActiveAccount } from "../../../../core/hooks/wallets/useActiveAccount.js";
 import { reservedScreens } from "../constants.js";
 import type { WelcomeScreen } from "../screens/types.js";
 

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

@@ -32,9 +32,9 @@ import {
   useChainName,
   useChainsQuery,
 } from "../../../core/hooks/others/useChainQuery.js";
+import { useActiveWalletChain } from "../../../core/hooks/wallets/useActiveWalletChain.js";
+import { useSwitchActiveWalletChain } from "../../../core/hooks/wallets/useSwitchActiveWalletChain.js";
 import { SetRootElementContext } from "../../../core/providers/RootElementContext.js";
-import { useActiveWalletChain } from "../../hooks/wallets/useActiveWalletChain.js";
-import { useSwitchActiveWalletChain } from "../../hooks/wallets/useSwitchActiveWalletChain.js";
 import { ChainIcon } from "../components/ChainIcon.js";
 import { Modal } from "../components/Modal.js";
 import { Skeleton } from "../components/Skeleton.js";

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

@@ -5,9 +5,9 @@ import { useState } from "react";
 import type { ThirdwebClient } from "../../../../client/client.js";
 import { iconSize } from "../../../core/design-system/index.js";
 import { useChainExplorers } from "../../../core/hooks/others/useChainQuery.js";
-import { useActiveAccount } from "../../hooks/wallets/useActiveAccount.js";
-import { useActiveWallet } from "../../hooks/wallets/useActiveWallet.js";
-import { useActiveWalletChain } from "../../hooks/wallets/useActiveWalletChain.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 { LoadingScreen } from "../../wallets/shared/LoadingScreen.js";
 import { Spacer } from "../components/Spacer.js";
 import Tabs from "../components/Tabs.js";
@@ -61,7 +61,7 @@ export function TransactionsScreen(props: {
         onBack={() => setSelectedTx(null)}
         onDone={() => setSelectedTx(null)}
         payer={payer}
-        isBuyForTx={false}
+        transactionMode={false}
         isEmbed={false}
       />
     );