diff --git a/packages/thirdweb/src/exports/react.ts b/packages/thirdweb/src/exports/react.ts
index 243afcb505d..659e70588e3 100644
--- a/packages/thirdweb/src/exports/react.ts
+++ b/packages/thirdweb/src/exports/react.ts
@@ -121,4 +121,10 @@ export {
   type PayEmbedProps,
   type PayEmbedConnectOptions,
 } from "../react/web/ui/PayEmbed.js";
+
+export {
+  PayEmbedUI,
+  type PayEmbedUIProps,
+} from "../react/web/ui/PayEmbedUI.js";
+
 export type { PayUIOptions } from "../react/web/ui/ConnectWallet/ConnectButtonProps.js";
diff --git a/packages/thirdweb/src/react/web/hooks/useSendTransaction.tsx b/packages/thirdweb/src/react/web/hooks/useSendTransaction.tsx
index ce4709f29b5..b69e3fbb5ea 100644
--- a/packages/thirdweb/src/react/web/hooks/useSendTransaction.tsx
+++ b/packages/thirdweb/src/react/web/hooks/useSendTransaction.tsx
@@ -5,7 +5,12 @@ import type { GaslessOptions } from "../../../transaction/actions/gasless/types.
 import type { PreparedTransaction } from "../../../transaction/prepare-transaction.js";
 import type { Wallet } from "../../../wallets/interfaces/wallet.js";
 import { useSendTransactionCore } from "../../core/hooks/contract/useSendTransaction.js";
-import { useActiveWallet } from "../../core/hooks/wallets/wallet-hooks.js";
+import {
+  useActiveAccount,
+  useActiveWallet,
+  useActiveWalletChain,
+  useSwitchActiveWalletChain,
+} from "../../core/hooks/wallets/wallet-hooks.js";
 import { SetRootElementContext } from "../../core/providers/RootElementContext.js";
 import type { PayUIOptions } from "../ui/ConnectWallet/ConnectButtonProps.js";
 import type { SupportedTokens } from "../ui/ConnectWallet/defaultTokens.js";
@@ -182,7 +187,11 @@ function ModalContent(props: ModalProps) {
     "buy",
   );
 
-  if (!localeQuery.data) {
+  const account = useActiveAccount();
+  const activeChain = useActiveWalletChain();
+  const switchChain = useSwitchActiveWalletChain();
+
+  if (!localeQuery.data || !account || !activeChain) {
     return <LoadingScreen />;
   }
 
@@ -202,6 +211,9 @@ function ModalContent(props: ModalProps) {
         }}
         isBuyForTx={true}
         isEmbed={false}
+        account={account}
+        activeChain={activeChain}
+        switchChain={switchChain}
       />
     );
   }
@@ -226,6 +238,9 @@ function ModalContent(props: ModalProps) {
       onDone={() => {
         setScreen("execute-tx");
       }}
+      account={account}
+      activeChain={activeChain}
+      switchChain={switchChain}
     />
   );
 }
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButton.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButton.tsx
index dfba3ded8c0..45c9de8d9fb 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButton.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/ConnectButton.tsx
@@ -6,6 +6,8 @@ import { useSiweAuth } from "../../../core/hooks/auth/useSiweAuth.js";
 import { AutoConnect } from "../../../core/hooks/connection/useAutoConnect.js";
 import {
   useActiveAccount,
+  useActiveWallet,
+  useActiveWalletChain,
   useActiveWalletConnectionStatus,
 } from "../../../core/hooks/wallets/wallet-hooks.js";
 import { ConnectUIContext } from "../../../core/providers/wallet-connection.js";
@@ -135,6 +137,9 @@ function ConnectButtonInner(
   },
 ) {
   const activeAccount = useActiveAccount();
+  const activeChain = useActiveWalletChain();
+  const activeWallet = useActiveWallet();
+
   const siweAuth = useSiweAuth(props.auth);
   const [showSignatureModal, setShowSignatureModal] = useState(false);
 
@@ -173,7 +178,7 @@ function ConnectButtonInner(
     return tokens;
   }, [props.supportedTokens]);
 
-  if (!activeAccount) {
+  if (!activeAccount || !activeChain || !activeWallet) {
     // Connect Wallet button
     return (
       <AnimatedButton
@@ -290,6 +295,9 @@ function ConnectButtonInner(
       chains={props?.chains || []}
       chain={props.chain}
       switchButton={props.switchButton}
+      activeAccount={activeAccount}
+      activeChain={activeChain}
+      activeWallet={activeWallet}
     />
   );
 }
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx
index 638c3404f21..b22b93e1880 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/Details.tsx
@@ -16,6 +16,7 @@ import { getContract } from "../../../../contract/contract.js";
 import { resolveAvatar } from "../../../../extensions/ens/resolve-avatar.js";
 import { resolveName } from "../../../../extensions/ens/resolve-name.js";
 import { isContractDeployed } from "../../../../utils/bytecode/is-contract-deployed.js";
+import type { Account, Wallet } from "../../../../wallets/interfaces/wallet.js";
 import {
   useChainQuery,
   useChainsQuery,
@@ -97,24 +98,26 @@ export const ConnectedWalletDetails: React.FC<{
   chains: Chain[];
   chain?: Chain;
   switchButton: ConnectButtonProps["switchButton"];
+  activeWallet: Wallet;
+  activeChain: Chain;
+  activeAccount: Account;
 }> = (props) => {
   const { connectLocale: locale, client } = useConnectUI();
+  const { activeChain, activeWallet, activeAccount } = props;
+  const switchChain = useSwitchActiveWalletChain();
 
-  const activeWallet = useActiveWallet();
-  const activeAccount = useActiveAccount();
-  const walletChain = useActiveWalletChain();
-  const chainQuery = useChainQuery(walletChain);
+  const chainQuery = useChainQuery(activeChain);
   const { disconnect } = useDisconnect();
   // prefetch chains metadata with low concurrency
   useChainsQuery(props.chains, 5);
 
   const tokenAddress =
-    walletChain && props.detailsButton?.displayBalanceToken
-      ? props.detailsButton.displayBalanceToken[Number(walletChain.id)]
+    activeChain && props.detailsButton?.displayBalanceToken
+      ? props.detailsButton.displayBalanceToken[Number(activeChain.id)]
       : undefined;
 
   const balanceQuery = useWalletBalance({
-    chain: walletChain ? walletChain : undefined,
+    chain: activeChain,
     tokenAddress,
     address: activeAccount?.address,
     client,
@@ -174,8 +177,7 @@ export const ConnectedWalletDetails: React.FC<{
   //   avatarOrWalletIconUrl = smartWalletMetadata.iconUrl;
   // }
 
-  const isNetworkMismatch =
-    props.chain && walletChain && walletChain.id !== props.chain.id;
+  const isNetworkMismatch = props.chain && activeChain.id !== props.chain.id;
 
   // Note: Must wrap the `SwitchNetworkButton` in a fragment to avoid warning from radix-ui
   // Note: Must wrap the `detailsButton.render` in an container element
@@ -293,7 +295,7 @@ export const ConnectedWalletDetails: React.FC<{
         <Skeleton height={"16px"} width={"200px"} />
       ) : (
         <Text color="primaryText" multiline>
-          {chainQuery.data?.name || `Unknown chain #${walletChain?.id}`}
+          {chainQuery.data?.name || `Unknown chain #${activeChain?.id}`}
         </Text>
       )}
 
@@ -604,6 +606,9 @@ export const ConnectedWalletDetails: React.FC<{
         onDone={() => {
           setIsOpen(false);
         }}
+        account={activeAccount}
+        activeChain={activeChain}
+        switchChain={switchChain}
       />
     );
   }
@@ -613,9 +618,8 @@ export const ConnectedWalletDetails: React.FC<{
       <NetworkSelectorContent
         // add currently connected chain to the list of chains if it's not already in the list
         chains={
-          walletChain &&
-          props.chains.find((c) => c.id === walletChain.id) === undefined
-            ? [walletChain, ...props.chains]
+          props.chains.find((c) => c.id === activeChain.id) === undefined
+            ? [activeChain, ...props.chains]
             : props.chains
         }
         closeModal={() => {
@@ -697,6 +701,9 @@ export const ConnectedWalletDetails: React.FC<{
         onDone={() => {
           setIsOpen(false);
         }}
+        account={activeAccount}
+        activeChain={activeChain}
+        switchChain={switchChain}
       />
     );
   }
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/BuyScreen.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/BuyScreen.tsx
index cc9df7e0c72..9e89f764e7e 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/BuyScreen.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/BuyScreen.tsx
@@ -14,10 +14,6 @@ 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 { LoadingScreen } from "../../../../wallets/shared/LoadingScreen.js";
 import {
   Drawer,
@@ -65,7 +61,7 @@ import {
   useBuySupportedSources,
 } from "./swap/useSwapSupportedChains.js";
 
-// NOTE: Must not use useConnectUI here because this UI can be used outside connect ui
+// NOTE: Can not use any wallet hooks or Context
 
 export type BuyScreenProps = {
   onBack?: () => void;
@@ -79,6 +75,9 @@ export type BuyScreenProps = {
   onDone: () => void;
   connectButton?: React.ReactNode;
   isEmbed: boolean;
+  account: Account | null;
+  activeChain: Chain | null;
+  switchChain: (chain: Chain) => Promise<void>;
 };
 
 /**
@@ -114,6 +113,9 @@ type BuyScreenContentProps = {
   onDone: () => void;
   connectButton?: React.ReactNode;
   isEmbed: boolean;
+  account: Account | null;
+  activeChain: Chain | null;
+  switchChain: (chain: Chain) => Promise<void>;
 };
 
 function useBuyScreenStates(options: {
@@ -166,11 +168,15 @@ function useBuyScreenStates(options: {
  * @internal
  */
 function BuyScreenContent(props: BuyScreenContentProps) {
-  const { client, supportedDestinations, connectLocale, payOptions, buyForTx } =
-    props;
-
-  const account = useActiveAccount();
-  const activeChain = useActiveWalletChain();
+  const {
+    client,
+    supportedDestinations,
+    connectLocale,
+    payOptions,
+    buyForTx,
+    activeChain,
+    account,
+  } = props;
 
   // prefetch chains metadata for destination chains
   useChainsQuery(supportedDestinations.map((x) => x.chain) || [], 50);
@@ -489,6 +495,8 @@ function BuyScreenContent(props: BuyScreenContentProps) {
                   // currently disabled because we are only using Stripe
                 }}
                 account={account}
+                activeChain={activeChain}
+                switchChain={props.switchChain}
               />
             )}
 
@@ -547,6 +555,7 @@ function SwapScreenContent(
     showFromTokenSelector: () => void;
     account: Account;
     activeChain: Chain;
+    switchChain: (chain: Chain) => Promise<void>;
   },
 ) {
   const {
@@ -650,6 +659,8 @@ function SwapScreenContent(
             });
             quoteQuery.refetch();
           }}
+          activeChain={props.activeChain}
+          switchChain={props.switchChain}
         />
       ),
     });
@@ -691,6 +702,7 @@ function SwapScreenContent(
             prefillSource?.allowEdits?.chain === false &&
             prefillSource?.allowEdits?.token === false
           }
+          account={account}
         />
         <EstimatedTimeAndFees
           quoteIsLoading={quoteQuery.isLoading}
@@ -713,7 +725,12 @@ function SwapScreenContent(
       !quoteQuery.isLoading &&
       !isNotEnoughBalance &&
       !quoteQuery.error ? (
-        <SwitchNetworkButton variant="accent" fullWidth chain={fromChain} />
+        <SwitchNetworkButton
+          variant="accent"
+          fullWidth
+          chain={fromChain}
+          switchChain={props.switchChain}
+        />
       ) : (
         <Button
           variant={disableContinue ? "outline" : "accent"}
@@ -754,6 +771,8 @@ function FiatScreenContent(
     selectedCurrency: CurrencyMeta;
     showCurrencySelector: () => void;
     account: Account;
+    activeChain: Chain;
+    switchChain: (chain: Chain) => Promise<void>;
   },
 ) {
   const {
@@ -830,6 +849,9 @@ function FiatScreenContent(
           openedWindow={openedWindow}
           onDone={props.onDone}
           isEmbed={props.isEmbed}
+          account={account}
+          activeChain={props.activeChain}
+          switchChain={props.switchChain}
         />
       ),
     });
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatFlow.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatFlow.tsx
index a101772fac0..f6f8ed0e177 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatFlow.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/FiatFlow.tsx
@@ -1,8 +1,10 @@
 import { useState } from "react";
+import type { Chain } from "../../../../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
 import type { BuyWithFiatQuote } from "../../../../../../../pay/buyWithFiat/getQuote.js";
 import type { BuyWithFiatStatus } from "../../../../../../../pay/buyWithFiat/getStatus.js";
 import { isSwapRequiredPostOnramp } from "../../../../../../../pay/buyWithFiat/isSwapRequiredPostOnramp.js";
+import type { Account } from "../../../../../../../wallets/interfaces/wallet.js";
 import { openOnrampPopup } from "../openOnRamppopup.js";
 import { addPendingTx } from "../swap/pendingSwapTx.js";
 import { OnrampStatusScreen } from "./FiatStatusScreen.js";
@@ -46,6 +48,9 @@ export function FiatFlow(props: {
   onDone: () => void;
   isBuyForTx: boolean;
   isEmbed: boolean;
+  account: Account;
+  activeChain: Chain;
+  switchChain: (chain: Chain) => Promise<void>;
 }) {
   const hasTwoSteps = isSwapRequiredPostOnramp(props.quote);
   const [screen, setScreen] = useState<Screen>(
@@ -116,6 +121,9 @@ export function FiatFlow(props: {
         }}
         isBuyForTx={props.isBuyForTx}
         isEmbed={props.isEmbed}
+        account={props.account}
+        activeChain={props.activeChain}
+        switchChain={props.switchChain}
       />
     );
   }
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/PostOnRampSwap.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/PostOnRampSwap.tsx
index 51448945ac5..748f0c9d324 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/PostOnRampSwap.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/PostOnRampSwap.tsx
@@ -1,10 +1,11 @@
 import { useQuery } from "@tanstack/react-query";
 import { useEffect, useState } from "react";
+import type { Chain } from "../../../../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
 import type { BuyWithCryptoQuote } from "../../../../../../../pay/buyWithCrypto/getQuote.js";
 import { getPostOnRampQuote } from "../../../../../../../pay/buyWithFiat/getPostOnRampQuote.js";
 import type { BuyWithFiatStatus } from "../../../../../../../pay/buyWithFiat/getStatus.js";
-import { useActiveAccount } from "../../../../../../core/hooks/wallets/wallet-hooks.js";
+import type { Account } from "../../../../../../../wallets/interfaces/wallet.js";
 import { Spacer } from "../../../../components/Spacer.js";
 import { Spinner } from "../../../../components/Spinner.js";
 import { Container, ModalHeader } from "../../../../components/basic.js";
@@ -22,9 +23,11 @@ export function PostOnRampSwap(props: {
   onDone: () => void;
   isBuyForTx: boolean;
   isEmbed: boolean;
+  account: Account;
+  activeChain: Chain;
+  switchChain: (chain: Chain) => Promise<void>;
 }) {
-  const account = useActiveAccount();
-
+  const { account } = props;
   const [lockedOnRampQuote, setLockedOnRampQuote] = useState<
     BuyWithCryptoQuote | undefined
   >(undefined);
@@ -131,6 +134,8 @@ export function PostOnRampSwap(props: {
       }}
       isBuyForTx={props.isBuyForTx}
       isEmbed={props.isEmbed}
+      activeChain={props.activeChain}
+      switchChain={props.switchChain}
     />
   );
 }
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/PostOnRampSwapFlow.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/PostOnRampSwapFlow.tsx
index 1de25646b10..8d2c33ddc32 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/PostOnRampSwapFlow.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/fiat/PostOnRampSwapFlow.tsx
@@ -1,6 +1,8 @@
 import { useState } from "react";
+import type { Chain } from "../../../../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
 import type { BuyWithFiatStatus } from "../../../../../../../pay/buyWithFiat/getStatus.js";
+import type { Account } from "../../../../../../../wallets/interfaces/wallet.js";
 import { type BuyWithFiatPartialQuote, FiatSteps } from "./FiatSteps.js";
 import { PostOnRampSwap } from "./PostOnRampSwap.js";
 
@@ -20,6 +22,9 @@ export function PostOnRampSwapFlow(props: {
   onSwapFlowStarted: () => void;
   isBuyForTx: boolean;
   isEmbed: boolean;
+  account: Account;
+  activeChain: Chain;
+  switchChain: (chain: Chain) => Promise<void>;
 }) {
   const [statusForSwap, setStatusForSwap] = useState<
     BuyWithFiatStatus | undefined
@@ -35,6 +40,9 @@ export function PostOnRampSwapFlow(props: {
         onDone={props.onDone}
         isBuyForTx={props.isBuyForTx}
         isEmbed={props.isEmbed}
+        account={props.account}
+        activeChain={props.activeChain}
+        switchChain={props.switchChain}
       />
     );
   }
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/main/useUISelectionStates.ts b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/main/useUISelectionStates.ts
index 69c1ad14dd6..cea7f4e0728 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/main/useUISelectionStates.ts
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/main/useUISelectionStates.ts
@@ -3,7 +3,6 @@ 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 { useDebouncedValue } from "../../../../hooks/useDebouncedValue.js";
 import type { PayUIOptions } from "../../../ConnectButtonProps.js";
 import { type ERC20OrNativeToken, NATIVE_TOKEN } from "../../nativeToken.js";
@@ -17,8 +16,9 @@ export function useUISelectionStates(options: {
   payOptions: PayUIOptions;
   buyForTx?: BuyForTx;
   supportedDestinations: SupportedChainAndTokens;
+  activeChain?: Chain;
 }) {
-  const activeChain = useActiveWalletChain();
+  const { activeChain } = options;
   const { payOptions, buyForTx, supportedDestinations } = options;
 
   // buy token amount ---------------------------------------------------------
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/ConfirmationScreen.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/ConfirmationScreen.tsx
index 2e15ae27a52..1d7d10848a7 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/ConfirmationScreen.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/ConfirmationScreen.tsx
@@ -3,14 +3,11 @@ import { useState } from "react";
 import type { Chain } from "../../../../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
 import type { BuyWithCryptoQuote } from "../../../../../../../pay/buyWithCrypto/getQuote.js";
+import { sendTransaction } from "../../../../../../../transaction/actions/send-transaction.js";
 import { waitForReceipt } from "../../../../../../../transaction/actions/wait-for-tx-receipt.js";
 import { formatNumber } from "../../../../../../../utils/formatNumber.js";
-import { useSendTransactionCore } from "../../../../../../core/hooks/contract/useSendTransaction.js";
+import type { Account } from "../../../../../../../wallets/interfaces/wallet.js";
 import { useChainQuery } from "../../../../../../core/hooks/others/useChainQuery.js";
-import {
-  useActiveWallet,
-  useActiveWalletChain,
-} from "../../../../../../core/hooks/wallets/wallet-hooks.js";
 import { Skeleton } from "../../../../components/Skeleton.js";
 import { Spacer } from "../../../../components/Spacer.js";
 import { Spinner } from "../../../../components/Spinner.js";
@@ -47,10 +44,11 @@ export function SwapConfirmationScreen(props: {
   fromToken: ERC20OrNativeToken;
   fromTokenSymbol: string;
   isFiatFlow: boolean;
+  activeChain: Chain;
+  account: Account;
+  switchChain: (chain: Chain) => Promise<void>;
 }) {
-  const sendTransactionMutation = useSendTransactionCore();
-  const activeChain = useActiveWalletChain();
-  const activeWallet = useActiveWallet();
+  const { activeChain } = props;
 
   const isApprovalRequired = props.quote.approval !== undefined;
   const initialStep = isApprovalRequired ? "approval" : "swap";
@@ -161,6 +159,7 @@ export function SwapConfirmationScreen(props: {
           fullWidth
           chain={props.fromChain}
           variant="accent"
+          switchChain={props.switchChain}
         />
       ) : (
         <Button
@@ -172,9 +171,10 @@ export function SwapConfirmationScreen(props: {
               try {
                 setStatus("pending");
 
-                const tx = await sendTransactionMutation.mutateAsync(
-                  props.quote.approval,
-                );
+                const tx = await sendTransaction({
+                  account: props.account,
+                  transaction: props.quote.approval,
+                });
 
                 await waitForReceipt({ ...tx, maxBlocksWaitTime: 50 });
                 // props.onQuoteFinalized(props.quote);
@@ -190,21 +190,15 @@ export function SwapConfirmationScreen(props: {
             if (step === "swap") {
               setStatus("pending");
               try {
-                let tx = props.quote.transactionRequest;
+                const tx = {
+                  ...props.quote.transactionRequest,
+                  gasPrice: undefined,
+                };
 
-                // Fix for inApp wallet
-                // Ideally - the pay server sends a non-legacy transaction to avoid this issue
-                if (
-                  activeWallet?.id === "inApp" ||
-                  activeWallet?.id === "embedded"
-                ) {
-                  tx = {
-                    ...props.quote.transactionRequest,
-                    gasPrice: undefined,
-                  };
-                }
-
-                const _swapTx = await sendTransactionMutation.mutateAsync(tx);
+                const _swapTx = await sendTransaction({
+                  transaction: tx,
+                  account: props.account,
+                });
 
                 await waitForReceipt({ ..._swapTx, maxBlocksWaitTime: 50 });
 
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/PayWithCrypto.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/PayWithCrypto.tsx
index d04a4b256a0..2ebcc368537 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/PayWithCrypto.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/PayWithCrypto.tsx
@@ -2,9 +2,9 @@ import { ChevronDownIcon } from "@radix-ui/react-icons";
 import type { Chain } from "../../../../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
 import { formatNumber } from "../../../../../../../utils/formatNumber.js";
+import type { Account } from "../../../../../../../wallets/interfaces/wallet.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 { Skeleton } from "../../../../components/Skeleton.js";
 import { TokenIcon } from "../../../../components/TokenIcon.js";
 import { Container } from "../../../../components/basic.js";
@@ -36,12 +36,11 @@ export function PayWithCrypto(props: {
   isLoading: boolean;
   client: ThirdwebClient;
   freezeChainAndTokenSelection?: boolean;
+  account: Account;
 }) {
   const chainQuery = useChainQuery(props.chain);
-  const activeAccount = useActiveAccount();
-
   const balanceQuery = useWalletBalance({
-    address: activeAccount?.address,
+    address: props.account.address,
     chain: props.chain,
     tokenAddress: isNativeToken(props.token) ? undefined : props.token.address,
     client: props.client,
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/SwapFlow.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/SwapFlow.tsx
index 1c05f6a7006..898ac560a4b 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/SwapFlow.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/SwapFlow.tsx
@@ -1,4 +1,5 @@
 import { useMemo, useState } from "react";
+import type { Chain } from "../../../../../../../chains/types.js";
 import { defineChain } from "../../../../../../../chains/utils.js";
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
 import { NATIVE_TOKEN_ADDRESS } from "../../../../../../../constants/addresses.js";
@@ -20,6 +21,8 @@ type SwapFlowProps = {
   onTryAgain: () => void;
   isBuyForTx: boolean;
   isEmbed: boolean;
+  activeChain: Chain;
+  switchChain: (chain: Chain) => Promise<void>;
 };
 
 export function SwapFlow(props: SwapFlowProps) {
@@ -104,6 +107,9 @@ export function SwapFlow(props: SwapFlowProps) {
       onTryAgain={props.onTryAgain}
       quote={quote}
       isFiatFlow={props.isFiatFlow}
+      activeChain={props.activeChain}
+      account={props.account}
+      switchChain={props.switchChain}
     />
   );
 }
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/BuyTxHistory.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/BuyTxHistory.tsx
index c46724b7152..23f214752a2 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/BuyTxHistory.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/BuyTxHistory.tsx
@@ -5,12 +5,10 @@ import {
   ExternalLinkIcon,
 } from "@radix-ui/react-icons";
 import { useState } from "react";
+import type { Chain } from "../../../../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
+import type { Account } from "../../../../../../../wallets/interfaces/wallet.js";
 import { useChainQuery } from "../../../../../../core/hooks/others/useChainQuery.js";
-import {
-  useActiveAccount,
-  useActiveWalletChain,
-} from "../../../../../../core/hooks/wallets/wallet-hooks.js";
 import { Skeleton } from "../../../../components/Skeleton.js";
 import { Spinner } from "../../../../components/Spinner.js";
 import { Container, Line, ModalHeader } from "../../../../components/basic.js";
@@ -31,6 +29,8 @@ import {
   useBuyTransactionsToShow,
 } from "./useBuyTransactionsToShow.js";
 
+// Note: Can not use hooks for getting ThirdwebProvider context or wallet manager hooks
+
 /**
  * @internal
  */
@@ -40,6 +40,9 @@ export function BuyTxHistory(props: {
   onDone: () => void;
   isBuyForTx: boolean;
   isEmbed: boolean;
+  account: Account;
+  activeChain: Chain;
+  switchChain: (chain: Chain) => Promise<void>;
 }) {
   const [selectedTx, setSelectedTx] = useState<TxStatusInfo | null>(null);
 
@@ -52,6 +55,9 @@ export function BuyTxHistory(props: {
         onDone={props.onDone}
         isBuyForTx={props.isBuyForTx}
         isEmbed={props.isEmbed}
+        account={props.account}
+        activeChain={props.activeChain}
+        switchChain={props.switchChain}
       />
     );
   }
@@ -67,6 +73,8 @@ export function BuyTxHistoryList(props: {
   client: ThirdwebClient;
   onDone: () => void;
   onSelectTx: (tx: TxStatusInfo) => void;
+  account: Account;
+  activeChain: Chain;
 }) {
   const {
     pageIndex,
@@ -75,11 +83,12 @@ export function BuyTxHistoryList(props: {
     hidePagination,
     isLoading,
     pagination,
-  } = useBuyTransactionsToShow(props.client);
+  } = useBuyTransactionsToShow({
+    client: props.client,
+    account: props.account,
+  });
 
-  const activeChain = useActiveWalletChain();
-  const chainQuery = useChainQuery(activeChain);
-  const activeAccount = useActiveAccount();
+  const chainQuery = useChainQuery(props.activeChain);
 
   const noTransactions = txInfosToShow.length === 0;
 
@@ -209,7 +218,7 @@ export function BuyTxHistoryList(props: {
         <ButtonLink
           fullWidth
           variant="outline"
-          href={`${chainQuery.data?.explorers?.[0]?.url}/address/${activeAccount?.address}`}
+          href={`${chainQuery.data?.explorers?.[0]?.url}/address/${props.account.address}`}
           target="_blank"
           as="a"
           gap="xs"
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/FiatDetailsScreen.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/FiatDetailsScreen.tsx
index 1c3fea795bb..25ccc0cd5d8 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/FiatDetailsScreen.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/FiatDetailsScreen.tsx
@@ -1,9 +1,11 @@
 import { useState } from "react";
+import type { Chain } from "../../../../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
 import type {
   BuyWithFiatStatus,
   ValidBuyWithFiatStatus,
 } from "../../../../../../../pay/buyWithFiat/getStatus.js";
+import type { Account } from "../../../../../../../wallets/interfaces/wallet.js";
 import { useBuyWithFiatStatus } from "../../../../../../core/hooks/pay/useBuyWithFiatStatus.js";
 import { Container, Line, ModalHeader } from "../../../../components/basic.js";
 import { OnRampTxDetailsTable } from "../fiat/FiatTxDetailsTable.js";
@@ -17,6 +19,9 @@ export function FiatDetailsScreen(props: {
   onDone: () => void;
   isBuyForTx: boolean;
   isEmbed: boolean;
+  account: Account;
+  activeChain: Chain;
+  switchChain: (chain: Chain) => Promise<void>;
 }) {
   const initialStatus = props.status;
   const [stopPolling, setStopPolling] = useState(false);
@@ -47,6 +52,7 @@ export function FiatDetailsScreen(props: {
         onViewPendingTx={props.onBack}
         isBuyForTx={props.isBuyForTx}
         isEmbed={props.isEmbed}
+        account={props.account}
         quote={{
           fromCurrencyAmount: fiatQuote.fromCurrencyWithFees.amount,
           fromCurrencySymbol: fiatQuote.fromCurrencyWithFees.currencySymbol,
@@ -69,6 +75,8 @@ export function FiatDetailsScreen(props: {
         onSwapFlowStarted={() => {
           setStopPolling(true);
         }}
+        activeChain={props.activeChain}
+        switchChain={props.switchChain}
       />
     );
   }
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/TxDetailsScreen.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/TxDetailsScreen.tsx
index 2e5d74f5d24..a8836db602c 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/TxDetailsScreen.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/TxDetailsScreen.tsx
@@ -1,4 +1,6 @@
+import type { Chain } from "../../../../../../../chains/types.js";
 import type { ThirdwebClient } from "../../../../../../../client/client.js";
+import type { Account } from "../../../../../../../wallets/interfaces/wallet.js";
 import { FiatDetailsScreen } from "./FiatDetailsScreen.js";
 import { SwapDetailsScreen } from "./SwapDetailsScreen.js";
 import type { TxStatusInfo } from "./useBuyTransactionsToShow.js";
@@ -10,6 +12,9 @@ export function TxDetailsScreen(props: {
   onDone: () => void;
   isBuyForTx: boolean;
   isEmbed: boolean;
+  account: Account;
+  activeChain: Chain;
+  switchChain: (chain: Chain) => Promise<void>;
 }) {
   const { statusInfo } = props;
 
@@ -32,6 +37,9 @@ export function TxDetailsScreen(props: {
         onDone={props.onDone}
         isBuyForTx={props.isBuyForTx}
         isEmbed={props.isEmbed}
+        account={props.account}
+        activeChain={props.activeChain}
+        switchChain={props.switchChain}
       />
     );
   }
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/useBuyTransactionsToShow.ts b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/useBuyTransactionsToShow.ts
index 39c68e7d24a..c37e93d426a 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/useBuyTransactionsToShow.ts
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/tx-history/useBuyTransactionsToShow.ts
@@ -9,10 +9,12 @@ import {
   type ValidBuyWithFiatStatus,
   getBuyWithFiatStatus,
 } from "../../../../../../../pay/buyWithFiat/getStatus.js";
+import type { Account } from "../../../../../../../wallets/interfaces/wallet.js";
 import { useBuyHistory } from "../../../../../../core/hooks/pay/useBuyHistory.js";
-import { useActiveAccount } from "../../../../../../core/hooks/wallets/wallet-hooks.js";
 import { pendingTransactions } from "../swap/pendingSwapTx.js";
 
+// Note: Can not use hooks for getting active wallet/account/chain here
+
 export type TxStatusInfo =
   | {
       type: "swap";
@@ -23,8 +25,11 @@ export type TxStatusInfo =
       status: ValidBuyWithFiatStatus;
     };
 
-export function useBuyTransactionsToShow(client: ThirdwebClient) {
-  const account = useActiveAccount();
+export function useBuyTransactionsToShow(options: {
+  client: ThirdwebClient;
+  account: Account;
+}) {
+  const { client, account } = options;
   const [pageIndex, setPageIndex] = useState(0);
   const txStatusList: TxStatusInfo[] = [];
   const PAGE_SIZE = 10;
diff --git a/packages/thirdweb/src/react/web/ui/PayEmbed.tsx b/packages/thirdweb/src/react/web/ui/PayEmbed.tsx
index b444e880d23..a9bcba488fd 100644
--- a/packages/thirdweb/src/react/web/ui/PayEmbed.tsx
+++ b/packages/thirdweb/src/react/web/ui/PayEmbed.tsx
@@ -1,10 +1,15 @@
 import { useState } from "react";
 import type { Chain } from "../../../chains/types.js";
 import type { ThirdwebClient } from "../../../client/client.js";
-import type { Wallet } from "../../../wallets/interfaces/wallet.js";
+import type { Account, Wallet } from "../../../wallets/interfaces/wallet.js";
 import type { SmartWalletOptions } from "../../../wallets/smart/types.js";
 import type { AppMetadata } from "../../../wallets/types.js";
 import type { SiweAuthOptions } from "../../core/hooks/auth/useSiweAuth.js";
+import {
+  useActiveAccount,
+  useActiveWalletChain,
+  useSwitchActiveWalletChain,
+} from "../../core/hooks/wallets/wallet-hooks.js";
 import { ConnectButton } from "./ConnectWallet/ConnectButton.js";
 import type {
   ConnectButton_connectModalOptions,
@@ -124,6 +129,16 @@ export type PayEmbedProps = {
   connectOptions?: PayEmbedConnectOptions;
 };
 
+type EmbedScreen =
+  | { id: "buy" }
+  | {
+      id: "tx-history";
+      data: {
+        account: Account;
+        activeChain: Chain;
+      };
+    };
+
 /**
  * Embed thirdweb Pay UI for Buy tokens using Crypto or Credit Card.
  *
@@ -148,7 +163,10 @@ export type PayEmbedProps = {
  */
 export function PayEmbed(props: PayEmbedProps) {
   const localeQuery = useConnectLocale(props.locale || "en_US");
-  const [screen, setScreen] = useState<"buy" | "tx-history">("buy");
+  const [screen, setScreen] = useState<EmbedScreen>({ id: "buy" });
+  const account = useActiveAccount();
+  const activeChain = useActiveWalletChain();
+  const switchChain = useSwitchActiveWalletChain();
 
   let content = null;
 
@@ -165,35 +183,51 @@ export function PayEmbed(props: PayEmbedProps) {
         <Spinner size="xl" color="secondaryText" />
       </div>
     );
-  } else if (screen === "tx-history") {
+  } else if (screen.id === "tx-history") {
     content = (
       <BuyTxHistory
         client={props.client}
         onBack={() => {
-          setScreen("buy");
+          setScreen({
+            id: "buy",
+          });
         }}
         onDone={() => {
           // noop
         }}
         isBuyForTx={false}
         isEmbed={true}
+        account={screen.data.account}
+        activeChain={screen.data.activeChain}
+        switchChain={switchChain}
       />
     );
   } else {
     content = (
       <BuyScreen
         isEmbed={true}
+        account={account || null}
+        activeChain={activeChain || null}
         supportedTokens={props.supportedTokens}
         theme={props.theme || "dark"}
         client={props.client}
         connectLocale={localeQuery.data}
         onViewPendingTx={() => {
-          setScreen("tx-history");
+          if (account && activeChain) {
+            setScreen({
+              id: "tx-history",
+              data: {
+                account: account,
+                activeChain: activeChain,
+              },
+            });
+          }
         }}
         payOptions={props.payOptions || {}}
         onDone={() => {
           // noop
         }}
+        switchChain={switchChain}
         connectButton={
           <ConnectButton
             {...props.connectOptions}
diff --git a/packages/thirdweb/src/react/web/ui/PayEmbedUI.tsx b/packages/thirdweb/src/react/web/ui/PayEmbedUI.tsx
new file mode 100644
index 00000000000..873be19c961
--- /dev/null
+++ b/packages/thirdweb/src/react/web/ui/PayEmbedUI.tsx
@@ -0,0 +1,110 @@
+import { useState } from "react";
+import type { Chain } from "../../../chains/types.js";
+import type { ThirdwebClient } from "../../../client/client.js";
+import type { Account } from "../../../wallets/interfaces/wallet.js";
+import type { PayUIOptions } from "./ConnectWallet/ConnectButtonProps.js";
+import type { SupportedTokens } from "./ConnectWallet/defaultTokens.js";
+import { useConnectLocale } from "./ConnectWallet/locale/getConnectLocale.js";
+import BuyScreen from "./ConnectWallet/screens/Buy/BuyScreen.js";
+import { BuyTxHistory } from "./ConnectWallet/screens/Buy/tx-history/BuyTxHistory.js";
+import { DynamicHeight } from "./components/DynamicHeight.js";
+import { Spinner } from "./components/Spinner.js";
+import { Container } from "./components/basic.js";
+import { CustomThemeProvider } from "./design-system/CustomThemeProvider.js";
+import { type Theme, radius } from "./design-system/index.js";
+import type { LocaleId } from "./types.js";
+
+/**
+ * @internal
+ */
+export type PayEmbedUIProps = {
+  supportedTokens?: SupportedTokens;
+  client: ThirdwebClient;
+  locale?: LocaleId;
+  payOptions?: PayUIOptions;
+  theme?: "light" | "dark" | Theme;
+  account: Account;
+  chain: Chain;
+  switchChain: (chain: Chain) => Promise<void>;
+};
+
+/**
+ * @internal
+ */
+export function PayEmbedUI(props: PayEmbedUIProps) {
+  const localeQuery = useConnectLocale(props.locale || "en_US");
+  const [screen, setScreen] = useState<"buy" | "tx-history">("buy");
+
+  let content = null;
+
+  if (!localeQuery.data) {
+    content = (
+      <div
+        style={{
+          minHeight: "350px",
+          display: "flex",
+          justifyContent: "center",
+          alignItems: "center",
+        }}
+      >
+        <Spinner size="xl" color="secondaryText" />
+      </div>
+    );
+  } else if (screen === "tx-history") {
+    content = (
+      <BuyTxHistory
+        client={props.client}
+        onBack={() => {
+          setScreen("buy");
+        }}
+        onDone={() => {
+          // noop
+        }}
+        isBuyForTx={false}
+        isEmbed={true}
+        account={props.account}
+        activeChain={props.chain}
+        switchChain={props.switchChain}
+      />
+    );
+  } else {
+    content = (
+      <BuyScreen
+        isEmbed={true}
+        supportedTokens={props.supportedTokens}
+        theme={props.theme || "dark"}
+        client={props.client}
+        connectLocale={localeQuery.data}
+        onViewPendingTx={() => {
+          setScreen("tx-history");
+        }}
+        payOptions={props.payOptions || {}}
+        onDone={() => {
+          // noop
+        }}
+        account={props.account}
+        activeChain={props.chain}
+        switchChain={props.switchChain}
+      />
+    );
+  }
+
+  return (
+    <CustomThemeProvider theme={props.theme || "dark"}>
+      <Container
+        bg="modalBg"
+        style={{
+          borderRadius: radius.lg,
+          minWidth: "360px",
+          borderWidth: "1px",
+          borderStyle: "solid",
+          position: "relative",
+          overflow: "hidden",
+        }}
+        borderColor="borderColor"
+      >
+        <DynamicHeight>{content}</DynamicHeight>
+      </Container>
+    </CustomThemeProvider>
+  );
+}
diff --git a/packages/thirdweb/src/react/web/ui/components/SwitchNetwork.tsx b/packages/thirdweb/src/react/web/ui/components/SwitchNetwork.tsx
index f86b142407d..24cdf20661e 100644
--- a/packages/thirdweb/src/react/web/ui/components/SwitchNetwork.tsx
+++ b/packages/thirdweb/src/react/web/ui/components/SwitchNetwork.tsx
@@ -1,6 +1,5 @@
 import { useState } from "react";
 import type { Chain } from "../../../../chains/types.js";
-import { useSwitchActiveWalletChain } from "../../../core/hooks/wallets/wallet-hooks.js";
 import { Spinner } from "./Spinner.js";
 import { Button, type ButtonProps } from "./buttons.js";
 
@@ -8,10 +7,10 @@ export function SwitchNetworkButton(
   props: ButtonProps & {
     chain: Chain;
     fullWidth?: boolean;
+    switchChain: (chain: Chain) => Promise<void>;
   },
 ) {
   const [isSwitching, setIsSwitching] = useState(false);
-  const switchActiveWalletChain = useSwitchActiveWalletChain();
 
   return (
     <Button
@@ -20,7 +19,7 @@ export function SwitchNetworkButton(
       onClick={async () => {
         setIsSwitching(true);
         try {
-          await switchActiveWalletChain(props.chain);
+          await props.switchChain(props.chain);
         } catch {}
         setIsSwitching(false);
       }}