tx info: tac operation stage could be an array

lib/operations/tac.ts

@@ -22,11 +22,11 @@ export function getTacOperationStatus(type: tac.OperationType) {
 }
 
 export function getTacOperationStage(data: tac.OperationDetails, txHash: string) {
-  const currentStep = data.status_history.find((step) => step.transactions.some((tx) => tx.hash.toLowerCase() === txHash.toLowerCase()));
-  if (!currentStep) {
-    return null;
+  const currentStep = data.status_history.filter((step) => step.transactions.some((tx) => tx.hash.toLowerCase() === txHash.toLowerCase()));
+  if (currentStep.length === 0) {
+    return;
   }
-  return STATUS_LABELS[currentStep.type];
+  return currentStep.map((step) => STATUS_LABELS[step.type]);
 }
 
 export const STATUS_SEQUENCE: Array<tac.OperationStage_StageType> = [

ui/tx/details/TxDetailsTacOperation.tsx

@@ -35,7 +35,7 @@ const TxDetailsTacOperation = ({ tacOperations, isLoading, txHash }: Props) => {
       >
         { tacOperations.map((tacOperation) => {
           const tags = [
-            getTacOperationStage(tacOperation, txHash),
+            ...(getTacOperationStage(tacOperation, txHash) || []),
             getTacOperationStatus(tacOperation.type),
           ];
 
@@ -46,8 +46,8 @@ const TxDetailsTacOperation = ({ tacOperations, isLoading, txHash }: Props) => {
                 isLoading={ isLoading }
               />
               { tags.length > 0 && (
-                <HStack flexShrink={ 0 }>
-                  { tags.map((tag) => <Tag key={ tag } loading={ isLoading }>{ tag }</Tag>) }
+                <HStack flexShrink={ 0 } flexWrap="wrap">
+                  { tags.map((tag) => <Tag key={ tag } loading={ isLoading } flexShrink={ 0 }>{ tag }</Tag>) }
                 </HStack>
               ) }
             </HStack>