From 4359f257a47a5c5cb240b7700be6564f23754a51 Mon Sep 17 00:00:00 2001
From: IF <139582705+infiniteflower@users.noreply.github.com>
Date: Wed, 13 Nov 2024 17:02:04 -0500
Subject: [PATCH] chore: display steps even though we only have txMeta.id

---
 .../bridge-step-description.tsx               | 18 +++++++---
 .../transaction-details/bridge-step-list.tsx  | 34 ++++++++++++++----
 .../step-progress-bar-item.tsx                |  2 +-
 .../transaction-details.tsx                   | 36 +++++++++----------
 4 files changed, 59 insertions(+), 31 deletions(-)

diff --git a/ui/pages/bridge/transaction-details/bridge-step-description.tsx b/ui/pages/bridge/transaction-details/bridge-step-description.tsx
index ef69ea4ed116..03abb77a32e2 100644
--- a/ui/pages/bridge/transaction-details/bridge-step-description.tsx
+++ b/ui/pages/bridge/transaction-details/bridge-step-description.tsx
@@ -117,11 +117,19 @@ const getSwapActionText = (
       ]);
 };
 
-export const getStepStatus = (
-  bridgeHistoryItem: BridgeHistoryItem,
-  step: Step,
-  srcChainTxMeta?: TransactionMeta,
-) => {
+export const getStepStatus = ({
+  bridgeHistoryItem,
+  step,
+  srcChainTxMeta,
+}: {
+  bridgeHistoryItem?: BridgeHistoryItem;
+  step: Step;
+  srcChainTxMeta?: TransactionMeta;
+}) => {
+  if (!bridgeHistoryItem) {
+    return StatusTypes.UNKNOWN;
+  }
+
   if (step.action === ActionTypes.SWAP) {
     return getSwapActionStatus(bridgeHistoryItem, step, srcChainTxMeta);
   } else if (step.action === ActionTypes.BRIDGE) {
diff --git a/ui/pages/bridge/transaction-details/bridge-step-list.tsx b/ui/pages/bridge/transaction-details/bridge-step-list.tsx
index b715c29e1f0e..112cc05243a0 100644
--- a/ui/pages/bridge/transaction-details/bridge-step-list.tsx
+++ b/ui/pages/bridge/transaction-details/bridge-step-list.tsx
@@ -6,8 +6,10 @@ import { Box } from '../../../components/component-library';
 import {
   BridgeHistoryItem,
   StatusTypes,
+  Step,
 } from '../../../../shared/types/bridge-status';
 import { formatDate } from '../../../helpers/utils/util';
+import { Numeric } from '../../../../shared/modules/Numeric';
 import BridgeStepDescription, {
   getStepStatus,
 } from './bridge-step-description';
@@ -29,7 +31,7 @@ const getTime = (
 };
 
 type BridgeStepsProps = {
-  bridgeHistoryItem: BridgeHistoryItem;
+  bridgeHistoryItem?: BridgeHistoryItem;
   srcChainTxMeta?: TransactionMeta;
   networkConfigurationsByChainId: Record<Hex, NetworkConfiguration>;
 };
@@ -39,9 +41,29 @@ export default function BridgeStepList({
   srcChainTxMeta,
   networkConfigurationsByChainId,
 }: BridgeStepsProps) {
-  const { steps } = bridgeHistoryItem.quote;
+  const steps =
+    bridgeHistoryItem?.quote.steps ||
+    srcChainTxMeta?.bridgeSteps?.map((step) => ({
+      // Convert hex to numbers
+      ...step,
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
+      action: step.action as any,
+      srcChainId: new Numeric(step.srcChainId, 16).toBase(10).toNumber(),
+      destChainId: step.destChainId
+        ? new Numeric(step.destChainId, 16).toBase(10).toNumber()
+        : undefined,
+      srcAsset: {
+        ...step.srcAsset,
+        chainId: new Numeric(step.srcAsset.chainId, 16).toBase(10).toNumber(),
+      },
+      destAsset: {
+        ...step.destAsset,
+        chainId: new Numeric(step.destAsset.chainId, 16).toBase(10).toNumber(),
+      },
+    })) ||
+    [];
   const stepStatuses = steps.map((step) =>
-    getStepStatus(bridgeHistoryItem, step, srcChainTxMeta),
+    getStepStatus({ bridgeHistoryItem, step: step as Step, srcChainTxMeta }),
   );
 
   return (
@@ -71,8 +93,8 @@ export default function BridgeStepList({
           getTime(
             i,
             i === steps.length - 1,
-            bridgeHistoryItem.startTime,
-            bridgeHistoryItem.estimatedProcessingTimeInSeconds,
+            bridgeHistoryItem?.startTime || srcChainTxMeta?.time,
+            bridgeHistoryItem?.estimatedProcessingTimeInSeconds || 0,
           ),
           'hh:mm a',
         );
@@ -85,7 +107,7 @@ export default function BridgeStepList({
             isEdgeComplete={isEdgeComplete}
           >
             <BridgeStepDescription
-              step={step}
+              step={step as Step}
               networkConfigurationsByChainId={networkConfigurationsByChainId}
               stepStatus={displayedStepStatus}
               time={time}
diff --git a/ui/pages/bridge/transaction-details/step-progress-bar-item.tsx b/ui/pages/bridge/transaction-details/step-progress-bar-item.tsx
index 504b2400b7be..95e0b52fcf78 100644
--- a/ui/pages/bridge/transaction-details/step-progress-bar-item.tsx
+++ b/ui/pages/bridge/transaction-details/step-progress-bar-item.tsx
@@ -49,7 +49,7 @@ export default function StepProgressBarItem({
   return (
     <>
       {/* Indicator dots */}
-      {stepStatus === null && (
+      {(stepStatus === null || stepStatus === StatusTypes.UNKNOWN) && (
         <HollowCircle size={ICON_SIZE} color={IconColor.iconMuted} />
       )}
       {stepStatus === StatusTypes.PENDING && (
diff --git a/ui/pages/bridge/transaction-details/transaction-details.tsx b/ui/pages/bridge/transaction-details/transaction-details.tsx
index 8a1b80aa90b2..766c82b9dd56 100644
--- a/ui/pages/bridge/transaction-details/transaction-details.tsx
+++ b/ui/pages/bridge/transaction-details/transaction-details.tsx
@@ -156,26 +156,24 @@ const CrossChainSwapTxDetails = () => {
             flexDirection={FlexDirection.Column}
             gap={4}
           >
-            {bridgeHistoryItem && (
-              <>
-                {status !== StatusTypes.COMPLETE && bridgeHistoryItem && (
-                  <BridgeStepList
-                    bridgeHistoryItem={bridgeHistoryItem}
-                    srcChainTxMeta={srcChainTxMeta}
-                    networkConfigurationsByChainId={
-                      networkConfigurationsByChainId
-                    }
-                  />
-                )}
-
-                {/* Links to block explorers */}
-                <BridgeExplorerLinks
-                  srcBlockExplorerUrl={srcBlockExplorerUrl}
-                  destBlockExplorerUrl={destBlockExplorerUrl}
+            {status !== StatusTypes.COMPLETE &&
+              (bridgeHistoryItem || srcChainTxMeta) && (
+                <BridgeStepList
+                  bridgeHistoryItem={bridgeHistoryItem}
+                  srcChainTxMeta={srcChainTxMeta}
+                  networkConfigurationsByChainId={
+                    networkConfigurationsByChainId
+                  }
                 />
-                <Divider />
-              </>
-            )}
+              )}
+
+            {/* Links to block explorers */}
+            <BridgeExplorerLinks
+              srcBlockExplorerUrl={srcBlockExplorerUrl}
+              destBlockExplorerUrl={destBlockExplorerUrl}
+            />
+            <Divider />
+
             {/* General tx details */}
             <Box
               display={Display.Flex}