change tac operation status once again

ui/operation/tac/TacOperationDetails.tsx

@@ -7,6 +7,7 @@ import { sortStatusHistory } from 'lib/operations/tac';
 import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
 import DetailedInfoTimestamp from 'ui/shared/DetailedInfo/DetailedInfoTimestamp';
 import AddressEntityTacTon from 'ui/shared/entities/address/AddressEntityTacTon';
+import TacOperationStatus from 'ui/shared/statusTag/TacOperationStatus';
 
 import TacOperationLifecycleAccordion from './TacOperationLifecycleAccordion';
 
@@ -43,6 +44,16 @@ const TacOperationDetails = ({ isLoading, data }: Props) => {
         </>
       ) }
 
+      <DetailedInfo.ItemLabel
+        hint="The status of the operation"
+        isLoading={ isLoading }
+      >
+        Status
+      </DetailedInfo.ItemLabel>
+      <DetailedInfo.ItemValue>
+        <TacOperationStatus status={ data.type } isLoading={ isLoading }/>
+      </DetailedInfo.ItemValue>
+
       { data.timestamp && (
         <>
           <DetailedInfo.ItemLabel

ui/searchResults/SearchResultListItem.tsx

@@ -32,7 +32,7 @@ import IconSvg from 'ui/shared/IconSvg';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 import type { SearchResultAppItem } from 'ui/shared/search/utils';
 import { getItemCategory, searchItemTitles } from 'ui/shared/search/utils';
-import TacOperationTag from 'ui/shared/TacOperationTag';
+import TacOperationStatus from 'ui/shared/statusTag/TacOperationStatus';
 
 import SearchResultEntityTag from './SearchResultEntityTag';
 
@@ -233,7 +233,7 @@ const SearchResultListItem = ({ data, searchTerm, isLoading, addressFormat }: Pr
                 mr={ 2 }
               />
             </OperationEntity.Link>
-            <TacOperationTag type={ data.tac_operation.type }/>
+            <TacOperationStatus status={ data.tac_operation.type }/>
           </OperationEntity.Container>
         );
       }

ui/searchResults/SearchResultTableItem.tsx

@@ -32,7 +32,7 @@ import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
 import IconSvg from 'ui/shared/IconSvg';
 import type { SearchResultAppItem } from 'ui/shared/search/utils';
 import { getItemCategory, searchItemTitles } from 'ui/shared/search/utils';
-import TacOperationTag from 'ui/shared/TacOperationTag';
+import TacOperationStatus from 'ui/shared/statusTag/TacOperationStatus';
 
 import SearchResultEntityTag from './SearchResultEntityTag';
 
@@ -345,7 +345,7 @@ const SearchResultTableItem = ({ data, searchTerm, isLoading, addressFormat }: P
                     mr={ 2 }
                   />
                 </OperationEntity.Link>
-                <TacOperationTag type={ data.tac_operation.type }/>
+                <TacOperationStatus status={ data.tac_operation.type }/>
               </OperationEntity.Container>
             </TableCell>
             <TableCell fontSize="sm" verticalAlign="middle" isNumeric>

ui/shared/entities/operation/OperationEntity.tsx

@@ -32,26 +32,9 @@ const Icon = (props: IconProps) => {
       return <Spinner size="md" marginRight={ props.marginRight ?? '8px' }/>;
     }
     default: {
-      const color = (() => {
-        switch (props.type) {
-          case tac.OperationType.ERROR:
-          case tac.OperationType.ROLLBACK: {
-            return 'red.500';
-          }
-          case tac.OperationType.TAC_TON:
-          case tac.OperationType.TON_TAC_TON:
-          case tac.OperationType.TON_TAC: {
-            return 'green.500';
-          }
-          default:
-            return;
-        }
-      })();
-
       return (
         <EntityBase.Icon
           { ...props }
-          color={ color }
           name={ props.name ?? 'operation_slim' }
           borderRadius="none"
         />

ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestTacOperation.tsx

@@ -7,7 +7,7 @@ import type { SearchResultTacOperation } from 'types/api/search';
 import dayjs from 'lib/date/dayjs';
 import * as OperationEntity from 'ui/shared/entities/operation/OperationEntity';
 import HashStringShortenDynamic from 'ui/shared/HashStringShortenDynamic';
-import TacOperationTag from 'ui/shared/TacOperationTag';
+import TacOperationStatus from 'ui/shared/statusTag/TacOperationStatus';
 
 const SearchBarSuggestTacOperation = ({ data, isMobile }: ItemsProps<SearchResultTacOperation>) => {
   const icon = <OperationEntity.Icon type={ data.tac_operation.type }/>;
@@ -16,7 +16,7 @@ const SearchBarSuggestTacOperation = ({ data, isMobile }: ItemsProps<SearchResul
       <HashStringShortenDynamic hash={ data.tac_operation.operation_id } noTooltip/>
     </chakra.mark>
   );
-  const status = <TacOperationTag type={ data.tac_operation.type }/>;
+  const status = <TacOperationStatus status={ data.tac_operation.type }/>;
   const date = dayjs(data.tac_operation.timestamp).format('llll');
 
   if (isMobile) {

ui/tx/details/TxDetailsTacOperation.tsx

@@ -3,10 +3,11 @@ import React from 'react';
 
 import type * as tac from '@blockscout/tac-operation-lifecycle-types';
 
-import { getTacOperationStatus, getTacOperationStage } from 'lib/operations/tac';
+import { getTacOperationStage } from 'lib/operations/tac';
 import { Tag } from 'toolkit/chakra/tag';
 import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
 import OperationEntity from 'ui/shared/entities/operation/OperationEntity';
+import TacOperationStatus from 'ui/shared/statusTag/TacOperationStatus';
 
 interface Props {
   tacOperations: Array<tac.OperationDetails>;
@@ -36,7 +37,6 @@ const TxDetailsTacOperation = ({ tacOperations, isLoading, txHash }: Props) => {
         { tacOperations.map((tacOperation) => {
           const tags = [
             ...(getTacOperationStage(tacOperation, txHash) || []),
-            getTacOperationStatus(tacOperation.type),
           ];
 
           return (
@@ -48,6 +48,7 @@ const TxDetailsTacOperation = ({ tacOperations, isLoading, txHash }: Props) => {
               />
               { tags.length > 0 && (
                 <HStack flexShrink={ 0 } flexWrap="wrap">
+                  <TacOperationStatus status={ tacOperation.type } isLoading={ isLoading }/>
                   { tags.map((tag) => <Tag key={ tag } loading={ isLoading } flexShrink={ 0 }>{ tag }</Tag>) }
                 </HStack>
               ) }