diff --git a/.changeset/purple-rice-bet.md b/.changeset/purple-rice-bet.md
new file mode 100644
index 00000000000..624d538cfe3
--- /dev/null
+++ b/.changeset/purple-rice-bet.md
@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Show correct transfer from amount for transfer flow in PayEmbed
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/pay-transactions/SwapDetailsScreen.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/pay-transactions/SwapDetailsScreen.tsx
index 6f8f9841f88..2280b771d64 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/pay-transactions/SwapDetailsScreen.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/pay-transactions/SwapDetailsScreen.tsx
@@ -101,9 +101,7 @@ export function SwapTxDetailsTable(
) {
let uiData: SwapTxDetailsData;
let showStatusRow = true;
- let isTransfer = false;
if (props.type === "status") {
- isTransfer = props.status.swapType === "TRANSFER";
const status = props.status;
if (props.hideStatusRow) {
showStatusRow = false;
@@ -191,33 +189,6 @@ export function SwapTxDetailsTable(
>
);
- if (isTransfer) {
- return (
-
- {/* source chain Tx hash link */}
- {fromChainExplorers.explorers?.[0]?.url && sourceTxHash && (
-
- View on {fromChainName.name} Explorer
-
-
- )}
-
- );
- }
-
return (
{/* Pay */}
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/TransferConfirmationScreen.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/TransferConfirmationScreen.tsx
index 6927de5e0d9..7f57a371784 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/TransferConfirmationScreen.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/TransferConfirmationScreen.tsx
@@ -1,4 +1,5 @@
import { CheckCircledIcon } from "@radix-ui/react-icons";
+import { useQuery } from "@tanstack/react-query";
import { useState } from "react";
import type { Chain } from "../../../../../../../chains/types.js";
import { getCachedChain } from "../../../../../../../chains/utils.js";
@@ -78,6 +79,48 @@ export function TransferConfirmationScreen(
| { id: "done" }
>({ id: "idle" });
+ const transferQuery = useQuery({
+ queryKey: [
+ "transfer",
+ isNativeToken(token) ? NATIVE_TOKEN_ADDRESS : token.address,
+ tokenAmount,
+ receiverAddress,
+ payer.account.address,
+ payOptions?.purchaseData,
+ ],
+ queryFn: async () => {
+ const transferResponse = await getBuyWithCryptoTransfer({
+ client,
+ fromAddress: payer.account.address,
+ toAddress: receiverAddress,
+ chainId: chain.id,
+ tokenAddress: isNativeToken(token)
+ ? NATIVE_TOKEN_ADDRESS
+ : token.address,
+ amount: tokenAmount,
+ purchaseData: payOptions?.purchaseData,
+ });
+ return transferResponse;
+ },
+ refetchInterval: 30 * 1000,
+ });
+
+ if (transferQuery.isLoading) {
+ return (
+
+
+
+
+
+
+
+
+ );
+ }
+
+ const transferFromAmountWithFees =
+ transferQuery.data?.paymentToken.amount || tokenAmount;
+
return (
@@ -109,7 +152,7 @@ export function TransferConfirmationScreen(
fromChain={chain}
toToken={token}
toChain={chain}
- fromAmount={tokenAmount}
+ fromAmount={transactionMode ? tokenAmount : transferFromAmountWithFees}
toAmount={tokenAmount}
/>
@@ -230,7 +273,9 @@ export function TransferConfirmationScreen(
token,
chain,
tokenMetadata,
- tokenAmount,
+ tokenAmount: transactionMode
+ ? tokenAmount
+ : transferFromAmountWithFees,
fromAddress: payer.account.address,
toAddress: receiverAddress,
transaction: txResult,
@@ -240,17 +285,11 @@ export function TransferConfirmationScreen(
setStep("execute");
setStatus({ id: "idle" });
} else {
- const transferResponse = await getBuyWithCryptoTransfer({
- client,
- fromAddress: payer.account.address,
- toAddress: receiverAddress,
- chainId: chain.id,
- tokenAddress: isNativeToken(token)
- ? NATIVE_TOKEN_ADDRESS
- : token.address,
- amount: tokenAmount,
- purchaseData: payOptions?.purchaseData,
- });
+ const transferResponse = transferQuery.data;
+
+ if (!transferResponse) {
+ throw new Error("Transfer data not found");
+ }
if (transferResponse.approvalData) {
// check allowance