diff --git a/.changeset/all-windows-travel.md b/.changeset/all-windows-travel.md
new file mode 100644
index 00000000000..ce8f20fc147
--- /dev/null
+++ b/.changeset/all-windows-travel.md
@@ -0,0 +1,5 @@
+---
+"thirdweb": patch
+---
+
+Improve swap status UI 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 2da2295520c..6f8f9841f88 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
@@ -3,7 +3,6 @@ import { getCachedChain } from "../../../../../../../chains/utils.js";
import type { ThirdwebClient } from "../../../../../../../client/client.js";
import type { BuyWithCryptoQuote } from "../../../../../../../pay/buyWithCrypto/getQuote.js";
import type { ValidBuyWithCryptoStatus } from "../../../../../../../pay/buyWithCrypto/getStatus.js";
-import { shortenAddress } from "../../../../../../../utils/address.js";
import { formatExplorerTxUrl } from "../../../../../../../utils/url.js";
import {
fontSize,
@@ -19,7 +18,7 @@ import { Spacer } from "../../../../components/Spacer.js";
import { Container, Line, ModalHeader } from "../../../../components/basic.js";
import { ButtonLink } from "../../../../components/buttons.js";
import { Text } from "../../../../components/text.js";
-import { formatSeconds } from "../swap/formatSeconds.js";
+import { WalletRow } from "../swap/WalletRow.js";
import { TokenInfoRow } from "./TokenInfoRow.js";
import { type StatusMeta, getBuyWithCryptoStatusMeta } from "./statusMeta.js";
@@ -174,7 +173,6 @@ export function SwapTxDetailsTable(
destinationTxHash,
isPartialSuccess,
gotToken,
- estimatedDuration,
} = uiData;
const fromChainId = fromToken.chainId;
@@ -222,6 +220,17 @@ export function SwapTxDetailsTable(
return (
+ {/* Pay */}
+
+
+ {lineSpacer}
{isPartialSuccess && gotToken ? (
// Expected + Got
<>
@@ -252,42 +261,25 @@ export function SwapTxDetailsTable(
)}
- {lineSpacer}
-
- {/* Pay */}
-
-
- {lineSpacer}
-
- {/* Duration */}
-
- Time
-
-
- ~{formatSeconds(estimatedDuration || 0)}
-
+ <>
+ {lineSpacer}
+
+ Recipient
+
-
+ >
{/* Status */}
{statusMeta && showStatusRow && (
@@ -295,40 +287,28 @@ export function SwapTxDetailsTable(
{lineSpacer}
- Status
-
- {statusMeta.status}
-
-
- >
- )}
-
- {uiData.fromAddress.toLowerCase() !== uiData.toAddress.toLowerCase() && (
- <>
- {lineSpacer}
-
- Send to
-
-
- {shortenAddress(uiData.toAddress)}
+ Status
+
+
+ {statusMeta.status}
>
)}
- {lineSpacer}
+
{/* source chain Tx hash link */}
{fromChainExplorers.explorers?.[0]?.url && sourceTxHash && (
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/pay-transactions/TokenInfoRow.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/pay-transactions/TokenInfoRow.tsx
index efd96cf7a9d..ed1bb52d10f 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/pay-transactions/TokenInfoRow.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/pay-transactions/TokenInfoRow.tsx
@@ -31,7 +31,7 @@ export function TokenInfoRow(props: {
{props.label}
-
+
{formatNumber(Number(props.tokenAmount), 6)} {props.tokenSymbol}
- {name}
+ {name}
);
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 cd930784600..02fb5cac559 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
@@ -142,95 +142,42 @@ export function SwapConfirmationScreen(props: {
)}
{props.payer.chain.id !== props.fromChain.id ? (
- {
- await props.payer.wallet.switchChain(props.fromChain);
- }}
- />
+ <>
+
+ {
+ await props.payer.wallet.switchChain(props.fromChain);
+ }}
+ />
+ >
) : (
-
+ >
)}
);
diff --git a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/SwapStatusScreen.tsx b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/SwapStatusScreen.tsx
index d6374b3635b..89f08f2405d 100644
--- a/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/SwapStatusScreen.tsx
+++ b/packages/thirdweb/src/react/web/ui/ConnectWallet/screens/Buy/swap/SwapStatusScreen.tsx
@@ -1,6 +1,6 @@
import { CheckCircledIcon } from "@radix-ui/react-icons";
import { useQueryClient } from "@tanstack/react-query";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, 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";
@@ -32,6 +32,7 @@ export function SwapStatusScreen(props: {
onSuccess: ((status: BuyWithCryptoStatus) => void) | undefined;
}) {
const { onSuccess } = props;
+ const [showDetails, setShowDetails] = useState(false);
const swapStatus = useBuyWithCryptoStatus({
client: props.client,
@@ -82,7 +83,6 @@ export function SwapStatusScreen(props: {
) : props.quote ? (
@@ -93,6 +93,21 @@ export function SwapStatusScreen(props: {
/>
) : null;
+ if (showDetails) {
+ return (
+
+
+ setShowDetails(false)}
+ />
+
+ {swapDetails}
+
+
+ );
+ }
+
return (
@@ -114,7 +129,13 @@ export function SwapStatusScreen(props: {
- {swapDetails}
+ setShowDetails(true)}
+ >
+ View transaction details
+
{props.transactionMode ? "Continue Transaction" : "Done"}
@@ -140,7 +161,6 @@ export function SwapStatusScreen(props: {
- {swapDetails}
>
)}
@@ -162,15 +182,20 @@ export function SwapStatusScreen(props: {
-
+
+ setShowDetails(true)}
+ >
+ View transaction details
+
+
+
Try Again
-
-
-
- {swapDetails}
>
)}
@@ -193,9 +218,12 @@ export function SwapStatusScreen(props: {
Buy Pending
+
+
+ This may take a minute to complete
+
-
- {swapDetails}
+
>
)}