feat: cleanup step preview ui

Author: gregfromstl

packages/thirdweb/src/react/web/ui/Bridge/payment-details/PaymentDetails.tsx

@@ -1,9 +1,11 @@
 "use client";
 import { useQuery } from "@tanstack/react-query";
+import { useMemo } from "react";
 import { trackPayEvent } from "../../../../../analytics/track/pay.js";
 import type { ThirdwebClient } from "../../../../../client/client.js";
 import { useCustomTheme } from "../../../../core/design-system/CustomThemeProvider.js";
 import { radius, spacing } from "../../../../core/design-system/index.js";
+import { useChainsQuery } from "../../../../core/hooks/others/useChainQuery.js";
 import type { BridgePrepareResult } from "../../../../core/hooks/useBridgePrepare.js";
 import type { PaymentMethod } from "../../../../core/machines/paymentMachine.js";
 import {
@@ -102,6 +104,15 @@ export function PaymentDetails({
     queryKey: ["payment_details", preparedQuote.type],
   });
 
+  const chainsQuery = useChainsQuery(
+    preparedQuote.steps.flatMap((s) => s.transactions.map((t) => t.chain)),
+    10,
+  );
+  const chainsMetadata = useMemo(
+    () => chainsQuery.map((c) => c.data),
+    [chainsQuery],
+  ).filter((c) => !!c);
+
   // Extract common data based on quote type
   const getDisplayData = () => {
     switch (preparedQuote.type) {
@@ -321,12 +332,48 @@ export function PaymentDetails({
                     >
                       <Container flex="column" gap="3xs" style={{ flex: 1 }}>
                         <Text color="primaryText" size="sm">
-                          {step.originToken.symbol} →{" "}
-                          {step.destinationToken.symbol}
+                          {step.destinationToken.chainId !==
+                          step.originToken.chainId ? (
+                            <>
+                              Bridge{" "}
+                              {step.originToken.symbol ===
+                              step.destinationToken.symbol
+                                ? step.originToken.symbol
+                                : `${step.originToken.symbol} to ${step.destinationToken.symbol}`}
+                            </>
+                          ) : (
+                            <>
+                              Swap {step.originToken.symbol} to{" "}
+                              {step.destinationToken.symbol}
+                            </>
+                          )}
                         </Text>
                         <Text color="secondaryText" size="xs">
-                          {step.originToken.name} to{" "}
-                          {step.destinationToken.name}
+                          {step.originToken.chainId !==
+                          step.destinationToken.chainId ? (
+                            <>
+                              {
+                                chainsMetadata.find(
+                                  (c) => c.chainId === step.originToken.chainId,
+                                )?.name
+                              }{" "}
+                              to{" "}
+                              {
+                                chainsMetadata.find(
+                                  (c) =>
+                                    c.chainId === step.destinationToken.chainId,
+                                )?.name
+                              }
+                            </>
+                          ) : (
+                            <>
+                              {
+                                chainsMetadata.find(
+                                  (c) => c.chainId === step.originToken.chainId,
+                                )?.name
+                              }
+                            </>
+                          )}
                         </Text>
                       </Container>
                     </Container>