Remove success status from txs lists (#3276)

Resolves #3274

ui/home/LatestTxsItem.tsx

@@ -60,7 +60,7 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
         <Box ml={ 3 } w="calc(100% - 40px)">
           <HStack flexWrap={ tagsCount <= 3 ? 'nowrap' : 'wrap' } my="3px">
             <TxType types={ tx.transaction_types } isLoading={ isLoading }/>
-            <TxStatus status={ tx.status } errorText={ tx.status === 'error' ? tx.result : undefined } isLoading={ isLoading }/>
+            { tx.status !== 'ok' && <TxStatus status={ tx.status } errorText={ tx.status === 'error' ? tx.result : undefined } isLoading={ isLoading }/> }
             <TxWatchListTags tx={ tx } isLoading={ isLoading }/>
             { protocolTag && <EntityTag data={ protocolTag } isLoading={ isLoading } minW="0"/> }
           </HStack>

ui/home/LatestTxsItemMobile.tsx

@@ -43,7 +43,7 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
       <Flex justifyContent="space-between">
         <HStack>
           <TxType types={ tx.transaction_types } isLoading={ isLoading }/>
-          <TxStatus status={ tx.status } errorText={ tx.status === 'error' ? tx.result : undefined } isLoading={ isLoading }/>
+          { tx.status !== 'ok' && <TxStatus status={ tx.status } errorText={ tx.status === 'error' ? tx.result : undefined } isLoading={ isLoading }/> }
           <TxWatchListTags tx={ tx } isLoading={ isLoading }/>
           { protocolTag && <EntityTag data={ protocolTag } isLoading={ isLoading } minW="0"/> }
         </HStack>

ui/internalTxs/InternalTxsListItem.tsx

@@ -41,7 +41,7 @@ const InternalTxsListItem = ({
     <ListItemMobile rowGap={ 3 }>
       <Flex columnGap={ 2 }>
         { typeTitle && <Badge colorPalette="cyan" loading={ isLoading }>{ typeTitle }</Badge> }
-        <TxStatus status={ success ? 'ok' : 'error' } errorText={ error } isLoading={ isLoading }/>
+        { !success && <TxStatus status="error" errorText={ error } isLoading={ isLoading }/> }
       </Flex>
       <Flex justifyContent="space-between" width="100%">
         <TxEntity

ui/internalTxs/InternalTxsTableItem.tsx

@@ -40,11 +40,11 @@ const InternalTxsTableItem = ({
     <TableRow alignItems="top">
       { chainData && (
         <TableCell>
-          <ChainIcon data={ chainData } isLoading={ isLoading } my="3px"/>
+          <ChainIcon data={ chainData } isLoading={ isLoading } my="2px"/>
         </TableCell>
       ) }
-      <TableCell verticalAlign="middle">
-        <Flex rowGap={ 3 } flexDir="column">
+      <TableCell>
+        <Flex rowGap={ 3 } flexDir="column" my="2px">
           <TxEntity
             hash={ txnHash }
             isLoading={ isLoading }
@@ -63,41 +63,43 @@ const InternalTxsTableItem = ({
           />
         </Flex>
       </TableCell>
-      <TableCell verticalAlign="middle">
-        <Flex rowGap={ 3 } flexDir="column">
+      <TableCell>
+        <Flex rowGap={ 2 } flexDir="column">
           { typeTitle && (
             <Badge colorPalette="cyan" loading={ isLoading }>{ typeTitle }</Badge>
           ) }
-          <TxStatus status={ success ? 'ok' : 'error' } errorText={ error } isLoading={ isLoading }/>
+          { !success && <TxStatus status="error" errorText={ error } isLoading={ isLoading }/> }
         </Flex>
       </TableCell>
       { showBlockInfo && (
-        <TableCell verticalAlign="middle">
+        <TableCell>
           <BlockEntity
             isLoading={ isLoading }
             number={ blockNumber }
             noIcon
             textStyle="sm"
             fontWeight={ 500 }
+            my="2px"
           />
         </TableCell>
       ) }
-      <TableCell verticalAlign="middle">
+      <TableCell>
         <AddressFromTo
           from={ from }
           to={ toData }
           current={ currentAddress }
           isLoading={ isLoading }
+          my="2px"
         />
       </TableCell>
-      <TableCell isNumeric verticalAlign="middle">
+      <TableCell isNumeric>
         <NativeCoinValue
           amount={ value }
           noSymbol
           accuracy={ 0 }
           loading={ isLoading }
           minW={ 6 }
-          verticalAlign="middle"
+          my="2px"
         />
       </TableCell>
     </TableRow>

ui/shared/statusTag/TxStatus.tsx

@@ -2,16 +2,18 @@ import React from 'react';
 
 import type { Transaction } from 'types/api/transaction';
 
+import type { BadgeProps } from 'toolkit/chakra/badge';
+
 import type { StatusTagType } from './StatusTag';
 import StatusTag from './StatusTag';
 
-export interface Props {
+export interface Props extends BadgeProps {
   status: Transaction['status'];
   errorText?: string | null;
   isLoading?: boolean;
 }
 
-const TxStatus = ({ status, errorText, isLoading }: Props) => {
+const TxStatus = ({ status, errorText, isLoading, ...rest }: Props) => {
   if (status === undefined) {
     return null;
   }
@@ -34,7 +36,7 @@ const TxStatus = ({ status, errorText, isLoading }: Props) => {
       break;
   }
 
-  return <StatusTag type={ type } text={ text } errorText={ errorText } loading={ isLoading }/>;
+  return <StatusTag type={ type } text={ text } errorText={ errorText } loading={ isLoading } { ...rest }/>;
 };
 
 export default TxStatus;

ui/tx/internals/TxInternalsListItem.tsx

@@ -22,7 +22,7 @@ const TxInternalsListItem = ({ type, from, to, value, success, error, gas_limit:
     <ListItemMobile rowGap={ 3 }>
       <Flex columnGap={ 2 }>
         { typeTitle && <Badge colorPalette="cyan" loading={ isLoading }>{ typeTitle }</Badge> }
-        <TxStatus status={ success ? 'ok' : 'error' } errorText={ error } isLoading={ isLoading }/>
+        { !success && <TxStatus status="error" errorText={ error } isLoading={ isLoading }/> }
       </Flex>
       <AddressFromTo
         from={ from }

ui/tx/internals/TxInternalsTableItem.tsx

@@ -27,7 +27,7 @@ const TxInternalTableItem = ({ type, from, to, value, success, error, gas_limit:
               <Badge colorPalette="cyan" mr={ 5 } loading={ isLoading }>{ typeTitle }</Badge>
             </Box>
           ) }
-          <TxStatus status={ success ? 'ok' : 'error' } errorText={ error } isLoading={ isLoading }/>
+          { !success && <TxStatus status="error" errorText={ error } isLoading={ isLoading }/> }
         </Flex>
       </TableCell>
       <TableCell verticalAlign="middle">

ui/txs/TxAdditionalInfo.tsx

@@ -52,7 +52,7 @@ const TxAdditionalInfo = ({ hash, tx, isMobile, isLoading, className }: Props) =
       </PopoverTrigger>
       <PopoverContent w="330px">
         <PopoverBody>
-          <Heading level="3" mb={ 6 }>Additional info </Heading>
+          <Heading level="3" mb={ 4 }>Additional info </Heading>
           { content }
         </PopoverBody>
       </PopoverContent>

ui/txs/TxAdditionalInfoContainer.tsx

@@ -22,6 +22,7 @@ const TxAdditionalInfoContainer = ({ hash }: Props) => {
   if (isPending) {
     return (
       <Box>
+        <Skeleton loading w="80px" h="24px" borderRadius="sm" mb={ 3 }/>
         <Box>
           <Skeleton loading w="110px" h="16px" borderRadius="full" mb={ 3 }/>
           <Skeleton loading w="100%" h="16px" borderRadius="full"/>

ui/txs/TxAdditionalInfoContent.tsx

@@ -11,6 +11,7 @@ import { useMultichainContext } from 'lib/contexts/multichain';
 import { currencyUnits } from 'lib/units';
 import { Link } from 'toolkit/chakra/link';
 import BlobEntity from 'ui/shared/entities/blob/BlobEntity';
+import TxStatus from 'ui/shared/statusTag/TxStatus';
 import TextSeparator from 'ui/shared/TextSeparator';
 import TxFee from 'ui/shared/tx/TxFee';
 import Utilization from 'ui/shared/Utilization/Utilization';
@@ -33,6 +34,7 @@ const TxAdditionalInfoContent = ({ tx }: { tx: Transaction }) => {
 
   return (
     <>
+      <TxStatus status={ tx.status } errorText={ tx.status === 'error' ? tx.result : undefined } mb={ 3 }/>
       { tx.blob_versioned_hashes && tx.blob_versioned_hashes.length > 0 && (
         <Box { ...sectionProps } mb={ 4 }>
           <Flex alignItems="center" justifyContent="space-between">

ui/txs/TxsListItem.tsx

@@ -65,7 +65,7 @@ const TxsListItem = ({
           ) :
             <TxType types={ tx.transaction_types } isLoading={ isLoading }/>
           }
-          <TxStatus status={ tx.status } errorText={ tx.status === 'error' ? tx.result : undefined } isLoading={ isLoading }/>
+          { tx.status !== 'ok' && <TxStatus status={ tx.status } errorText={ tx.status === 'error' ? tx.result : undefined } isLoading={ isLoading }/> }
           <TxWatchListTags tx={ tx } isLoading={ isLoading }/>
           { protocolTag && <EntityTag data={ protocolTag } isLoading={ isLoading }/> }
         </HStack>

ui/txs/TxsTableItem.tsx

@@ -92,7 +92,7 @@ const TxsTableItem = ({
           ) :
             <TxType types={ tx.transaction_types } isLoading={ isLoading }/>
           }
-          <TxStatus status={ tx.status } errorText={ tx.status === 'error' ? tx.result : undefined } isLoading={ isLoading }/>
+          { tx.status !== 'ok' && <TxStatus status={ tx.status } errorText={ tx.status === 'error' ? tx.result : undefined } isLoading={ isLoading }/> }
           <TxWatchListTags tx={ tx } isLoading={ isLoading }/>
         </VStack>
       </TableCell>