From 2609b1c4eb9885349b42aa8d72282516a4779ffa Mon Sep 17 00:00:00 2001
From: Joaquim Verges <joaquim.verges@gmail.com>
Date: Fri, 21 Mar 2025 22:26:41 +1300
Subject: [PATCH] [SDK] fix: Improve swap transaction details UI

---
 .changeset/all-windows-travel.md              |   5 +
 .../pay-transactions/SwapDetailsScreen.tsx    |  92 +++---
 .../Buy/pay-transactions/TokenInfoRow.tsx     |   6 +-
 .../screens/Buy/swap/ConfirmationScreen.tsx   | 261 +++++++++---------
 .../screens/Buy/swap/SwapStatusScreen.tsx     |  50 +++-
 5 files changed, 218 insertions(+), 196 deletions(-)
 create mode 100644 .changeset/all-windows-travel.md

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 (
     <div>
+      {/* Pay */}
+      <TokenInfoRow
+        chainId={fromToken.chainId}
+        client={client}
+        label="Paid"
+        tokenAmount={fromToken.amount}
+        tokenSymbol={fromToken.symbol || ""}
+        tokenAddress={fromToken.address}
+      />
+
+      {lineSpacer}
       {isPartialSuccess && gotToken ? (
         // Expected + Got
         <>
@@ -252,42 +261,25 @@ export function SwapTxDetailsTable(
         <TokenInfoRow
           chainId={toToken.chainId}
           client={client}
-          label="Receive"
+          label="Received"
           tokenAmount={toToken.amount}
           tokenSymbol={toToken.symbol || ""}
           tokenAddress={toToken.address}
         />
       )}
 
-      {lineSpacer}
-
-      {/* Pay */}
-      <TokenInfoRow
-        chainId={fromToken.chainId}
-        client={client}
-        label="Pay"
-        tokenAmount={fromToken.amount}
-        tokenSymbol={fromToken.symbol || ""}
-        tokenAddress={fromToken.address}
-      />
-
-      {lineSpacer}
-
-      {/* Duration */}
-      <Container
-        flex="row"
-        center="y"
-        style={{
-          justifyContent: "space-between",
-        }}
-      >
-        <Text> Time </Text>
-        <Container flex="row" gap="xs" center="y">
-          <Text color="primaryText">
-            ~{formatSeconds(estimatedDuration || 0)}
-          </Text>
+      <>
+        {lineSpacer}
+        <Container
+          flex="row"
+          style={{
+            justifyContent: "space-between",
+          }}
+        >
+          <Text size="sm">Recipient</Text>
+          <WalletRow address={uiData.toAddress} iconSize="sm" client={client} />
         </Container>
-      </Container>
+      </>
 
       {/* Status */}
       {statusMeta && showStatusRow && (
@@ -295,40 +287,28 @@ export function SwapTxDetailsTable(
           {lineSpacer}
           <Container
             flex="row"
-            center="y"
-            style={{
-              justifyContent: "space-between",
-            }}
-          >
-            <Text>Status</Text>
-            <Container flex="row" gap="xs" center="y">
-              <Text color={statusMeta.color}>{statusMeta.status}</Text>
-            </Container>
-          </Container>
-        </>
-      )}
-
-      {uiData.fromAddress.toLowerCase() !== uiData.toAddress.toLowerCase() && (
-        <>
-          {lineSpacer}
-          <Container
-            flex="row"
-            center="y"
             style={{
               justifyContent: "space-between",
             }}
           >
-            <Text>Send to</Text>
-            <Container flex="row" gap="xs" center="y">
-              <Text color="primaryText" size="sm">
-                {shortenAddress(uiData.toAddress)}
+            <Text size="sm">Status</Text>
+            <Container
+              flex="column"
+              gap="3xs"
+              center="y"
+              style={{
+                alignItems: "flex-end",
+              }}
+            >
+              <Text color={statusMeta.color} size="sm">
+                {statusMeta.status}
               </Text>
             </Container>
           </Container>
         </>
       )}
 
-      {lineSpacer}
+      <Spacer y="lg" />
 
       {/* 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: {
       <Text size="sm">{props.label}</Text>
       <Container
         flex="column"
-        gap="xxs"
+        gap="3xs"
         style={{
           alignItems: "flex-end",
         }}
@@ -45,11 +45,11 @@ export function TokenInfoRow(props: {
             }}
             client={props.client}
           />
-          <Text color="primaryText">
+          <Text color="primaryText" size="sm">
             {formatNumber(Number(props.tokenAmount), 6)} {props.tokenSymbol}
           </Text>
         </Container>
-        <Text size="sm">{name}</Text>
+        <Text size="xs">{name}</Text>
       </Container>
     </Container>
   );
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 ? (
-        <SwitchNetworkButton
-          fullWidth
-          variant="accent"
-          switchChain={async () => {
-            await props.payer.wallet.switchChain(props.fromChain);
-          }}
-        />
+        <>
+          <Spacer y="xs" />
+          <SwitchNetworkButton
+            fullWidth
+            variant="accent"
+            switchChain={async () => {
+              await props.payer.wallet.switchChain(props.fromChain);
+            }}
+          />
+        </>
       ) : (
-        <Button
-          variant="accent"
-          fullWidth
-          disabled={status === "pending"}
-          onClick={async () => {
-            if (step === "approval" && props.quote.approvalData) {
-              try {
-                setStatus("pending");
-
-                trackPayEvent({
-                  event: "prompt_swap_approval",
-                  client: props.client,
-                  walletAddress: props.payer.account.address,
-                  walletType: props.payer.wallet.id,
-                  fromToken: props.quote.swapDetails.fromToken.tokenAddress,
-                  fromAmount: props.quote.swapDetails.fromAmountWei,
-                  toToken: props.quote.swapDetails.toToken.tokenAddress,
-                  toAmount: props.quote.swapDetails.toAmountWei,
-                  chainId: props.quote.swapDetails.fromToken.chainId,
-                  dstChainId: props.quote.swapDetails.toToken.chainId,
-                });
+        <>
+          <Spacer y="xs" />
+          <Button
+            variant="accent"
+            fullWidth
+            disabled={status === "pending"}
+            onClick={async () => {
+              if (step === "approval" && props.quote.approvalData) {
+                try {
+                  setStatus("pending");
 
-                const transaction = approve({
-                  contract: getContract({
+                  trackPayEvent({
+                    event: "prompt_swap_approval",
                     client: props.client,
-                    address: props.quote.swapDetails.fromToken.tokenAddress,
-                    chain: props.fromChain,
-                  }),
-                  spender: props.quote.approvalData.spenderAddress,
-                  amountWei: BigInt(props.quote.approvalData.amountWei),
-                });
-
-                const tx = await sendTransaction({
-                  account: props.payer.account,
-                  transaction,
-                });
-
-                await waitForReceipt({ ...tx, maxBlocksWaitTime: 50 });
-
-                trackPayEvent({
-                  event: "swap_approval_success",
-                  client: props.client,
-                  walletAddress: props.payer.account.address,
-                  walletType: props.payer.wallet.id,
-                  fromToken: props.quote.swapDetails.fromToken.tokenAddress,
-                  fromAmount: props.quote.swapDetails.fromAmountWei,
-                  toToken: props.quote.swapDetails.toToken.tokenAddress,
-                  toAmount: props.quote.swapDetails.toAmountWei,
-                  chainId: props.quote.swapDetails.fromToken.chainId,
-                  dstChainId: props.quote.swapDetails.toToken.chainId,
-                });
-
-                setStep("swap");
-                setStatus("idle");
-              } catch (e) {
-                console.error(e);
-                setStatus("error");
-              }
-            }
+                    walletAddress: props.payer.account.address,
+                    walletType: props.payer.wallet.id,
+                    fromToken: props.quote.swapDetails.fromToken.tokenAddress,
+                    fromAmount: props.quote.swapDetails.fromAmountWei,
+                    toToken: props.quote.swapDetails.toToken.tokenAddress,
+                    toAmount: props.quote.swapDetails.toAmountWei,
+                    chainId: props.quote.swapDetails.fromToken.chainId,
+                    dstChainId: props.quote.swapDetails.toToken.chainId,
+                  });
 
-            if (step === "swap") {
-              setStatus("pending");
-              try {
-                trackPayEvent({
-                  event: "prompt_swap_execution",
-                  client: props.client,
-                  walletAddress: props.payer.account.address,
-                  walletType: props.payer.wallet.id,
-                  fromToken: props.quote.swapDetails.fromToken.tokenAddress,
-                  fromAmount: props.quote.swapDetails.fromAmountWei,
-                  toToken: props.quote.swapDetails.toToken.tokenAddress,
-                  toAmount: props.quote.swapDetails.toAmountWei,
-                  chainId: props.quote.swapDetails.fromToken.chainId,
-                  dstChainId: props.quote.swapDetails.toToken.chainId,
-                });
-                const tx = props.quote.transactionRequest;
-                let _swapTx: WaitForReceiptOptions;
-                // check if we can batch approval and swap
-                const canBatch = props.payer.account.sendBatchTransaction;
-                if (canBatch && props.quote.approvalData && approveTxRequired) {
-                  const approveTx = approve({
+                  const transaction = approve({
                     contract: getContract({
                       client: props.client,
                       address: props.quote.swapDetails.fromToken.tokenAddress,
@@ -240,57 +187,119 @@ export function SwapConfirmationScreen(props: {
                     amountWei: BigInt(props.quote.approvalData.amountWei),
                   });
 
-                  _swapTx = await sendBatchTransaction({
+                  const tx = await sendTransaction({
                     account: props.payer.account,
-                    transactions: [approveTx, tx],
+                    transaction,
                   });
-                } else {
-                  _swapTx = await sendTransaction({
-                    account: props.payer.account,
-                    transaction: tx,
+
+                  await waitForReceipt({ ...tx, maxBlocksWaitTime: 50 });
+
+                  trackPayEvent({
+                    event: "swap_approval_success",
+                    client: props.client,
+                    walletAddress: props.payer.account.address,
+                    walletType: props.payer.wallet.id,
+                    fromToken: props.quote.swapDetails.fromToken.tokenAddress,
+                    fromAmount: props.quote.swapDetails.fromAmountWei,
+                    toToken: props.quote.swapDetails.toToken.tokenAddress,
+                    toAmount: props.quote.swapDetails.toAmountWei,
+                    chainId: props.quote.swapDetails.fromToken.chainId,
+                    dstChainId: props.quote.swapDetails.toToken.chainId,
                   });
+
+                  setStep("swap");
+                  setStatus("idle");
+                } catch (e) {
+                  console.error(e);
+                  setStatus("error");
                 }
+              }
 
-                await waitForReceipt({ ..._swapTx, maxBlocksWaitTime: 50 });
+              if (step === "swap") {
+                setStatus("pending");
+                try {
+                  trackPayEvent({
+                    event: "prompt_swap_execution",
+                    client: props.client,
+                    walletAddress: props.payer.account.address,
+                    walletType: props.payer.wallet.id,
+                    fromToken: props.quote.swapDetails.fromToken.tokenAddress,
+                    fromAmount: props.quote.swapDetails.fromAmountWei,
+                    toToken: props.quote.swapDetails.toToken.tokenAddress,
+                    toAmount: props.quote.swapDetails.toAmountWei,
+                    chainId: props.quote.swapDetails.fromToken.chainId,
+                    dstChainId: props.quote.swapDetails.toToken.chainId,
+                  });
+                  const tx = props.quote.transactionRequest;
+                  let _swapTx: WaitForReceiptOptions;
+                  // check if we can batch approval and swap
+                  const canBatch = props.payer.account.sendBatchTransaction;
+                  if (
+                    canBatch &&
+                    props.quote.approvalData &&
+                    approveTxRequired
+                  ) {
+                    const approveTx = approve({
+                      contract: getContract({
+                        client: props.client,
+                        address: props.quote.swapDetails.fromToken.tokenAddress,
+                        chain: props.fromChain,
+                      }),
+                      spender: props.quote.approvalData.spenderAddress,
+                      amountWei: BigInt(props.quote.approvalData.amountWei),
+                    });
 
-                trackPayEvent({
-                  event: "swap_execution_success",
-                  client: props.client,
-                  walletAddress: props.payer.account.address,
-                  walletType: props.payer.wallet.id,
-                  fromToken: props.quote.swapDetails.fromToken.tokenAddress,
-                  fromAmount: props.quote.swapDetails.fromAmountWei,
-                  toToken: props.quote.swapDetails.toToken.tokenAddress,
-                  toAmount: props.quote.swapDetails.toAmountWei,
-                  chainId: props.quote.swapDetails.fromToken.chainId,
-                  dstChainId: props.quote.swapDetails.toToken.chainId,
-                });
+                    _swapTx = await sendBatchTransaction({
+                      account: props.payer.account,
+                      transactions: [approveTx, tx],
+                    });
+                  } else {
+                    _swapTx = await sendTransaction({
+                      account: props.payer.account,
+                      transaction: tx,
+                    });
+                  }
 
-                // do not add pending tx if the swap is part of fiat flow
-                if (!props.isFiatFlow) {
-                  addPendingTx({
-                    type: "swap",
-                    txHash: _swapTx.transactionHash,
-                    chainId: _swapTx.chain.id,
+                  trackPayEvent({
+                    event: "swap_execution_success",
+                    client: props.client,
+                    walletAddress: props.payer.account.address,
+                    walletType: props.payer.wallet.id,
+                    fromToken: props.quote.swapDetails.fromToken.tokenAddress,
+                    fromAmount: props.quote.swapDetails.fromAmountWei,
+                    toToken: props.quote.swapDetails.toToken.tokenAddress,
+                    toAmount: props.quote.swapDetails.toAmountWei,
+                    chainId: props.quote.swapDetails.fromToken.chainId,
+                    dstChainId: props.quote.swapDetails.toToken.chainId,
                   });
-                }
 
-                props.setSwapTxHash(_swapTx.transactionHash);
-              } catch (e) {
-                console.error(e);
-                setStatus("error");
+                  // do not add pending tx if the swap is part of fiat flow
+                  if (!props.isFiatFlow) {
+                    addPendingTx({
+                      type: "swap",
+                      txHash: _swapTx.transactionHash,
+                      chainId: _swapTx.chain.id,
+                    });
+                  }
+
+                  props.setSwapTxHash(_swapTx.transactionHash);
+                } catch (e) {
+                  console.error(e);
+                  setStatus("error");
+                }
               }
-            }
-          }}
-          gap="xs"
-        >
-          {step === "approval" &&
-            (status === "pending" ? "Approving" : "Approve")}
-          {step === "swap" && (status === "pending" ? "Confirming" : "Confirm")}
-          {status === "pending" && (
-            <Spinner size="sm" color="accentButtonText" />
-          )}
-        </Button>
+            }}
+            gap="xs"
+          >
+            {step === "approval" &&
+              (status === "pending" ? "Approving" : "Approve")}
+            {step === "swap" &&
+              (status === "pending" ? "Confirming" : "Confirm")}
+            {status === "pending" && (
+              <Spinner size="sm" color="accentButtonText" />
+            )}
+          </Button>
+        </>
       )}
     </Container>
   );
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: {
       <SwapTxDetailsTable
         status={swapStatus.data}
         type="status"
-        hideStatusRow={true}
         client={props.client}
       />
     ) : props.quote ? (
@@ -93,6 +93,21 @@ export function SwapStatusScreen(props: {
       />
     ) : null;
 
+  if (showDetails) {
+    return (
+      <Container animate="fadein">
+        <Container p="lg">
+          <ModalHeader
+            title={"Transaction Details"}
+            onBack={() => setShowDetails(false)}
+          />
+          <Spacer y="xl" />
+          {swapDetails}
+        </Container>
+      </Container>
+    );
+  }
+
   return (
     <Container animate="fadein">
       <Container p="lg">
@@ -114,7 +129,13 @@ export function SwapStatusScreen(props: {
             </Container>
 
             <Spacer y="xl" />
-            {swapDetails}
+            <Button
+              variant="outline"
+              fullWidth
+              onClick={() => setShowDetails(true)}
+            >
+              View transaction details
+            </Button>
             <Spacer y="sm" />
             <Button variant="accent" fullWidth onClick={props.onDone}>
               {props.transactionMode ? "Continue Transaction" : "Done"}
@@ -140,7 +161,6 @@ export function SwapStatusScreen(props: {
                 </Text>
               </Container>
               <Spacer y="xl" />
-              {swapDetails}
             </>
           )}
 
@@ -162,15 +182,20 @@ export function SwapStatusScreen(props: {
                 </Text>
               </Container>
 
-              <Spacer y="md" />
+              <Spacer y="xl" />
+              <Button
+                variant="outline"
+                fullWidth
+                onClick={() => setShowDetails(true)}
+              >
+                View transaction details
+              </Button>
+
+              <Spacer y="sm" />
 
               <Button variant="accent" fullWidth onClick={props.onTryAgain}>
                 Try Again
               </Button>
-
-              <Spacer y="xl" />
-
-              {swapDetails}
             </Container>
           </>
         )}
@@ -193,9 +218,12 @@ export function SwapStatusScreen(props: {
               <Text color="primaryText" size="lg">
                 Buy Pending
               </Text>
+              <Spacer y="sm" />
+              <Text color="secondaryText" size="sm">
+                This may take a minute to complete
+              </Text>
             </Container>
-            <Spacer y="xxl" />
-            {swapDetails}
+            <Spacer y="xl" />
           </>
         )}
       </Container>