Merge pull request #1308 from blockscout/zero-fee-fix

stability fixes

ui/shared/tx/TxFeeStability.tsx

@@ -27,7 +27,7 @@ const TxFeeStability = ({ data, isLoading, hideUsd, accuracy, className }: Props
   return (
     <Skeleton whiteSpace="pre" isLoaded={ !isLoading } display="flex" className={ className }>
       <span>{ valueStr } </span>
-      <TokenEntity token={ data.token } noIcon noCopy onlySymbol w="auto"/>
+      { valueStr !== '0' && <TokenEntity token={ data.token } noIcon noCopy onlySymbol w="auto"/> }
       { usd && !hideUsd && <chakra.span color="text_secondary"> (${ usd })</chakra.span> }
     </Skeleton>
   );

ui/txs/TxAdditionalInfoContent.tsx

@@ -11,6 +11,7 @@ import getValueWithUnit from 'lib/getValueWithUnit';
 import CurrencyValue from 'ui/shared/CurrencyValue';
 import LinkInternal from 'ui/shared/LinkInternal';
 import TextSeparator from 'ui/shared/TextSeparator';
+import TxFeeStability from 'ui/shared/tx/TxFeeStability';
 import Utilization from 'ui/shared/Utilization/Utilization';
 
 const TxAdditionalInfoContent = ({ tx }: { tx: Transaction }) => {
@@ -33,6 +34,9 @@ const TxAdditionalInfoContent = ({ tx }: { tx: Transaction }) => {
       { !config.UI.views.tx.hiddenFields?.tx_fee && (
         <Box { ...sectionProps } mb={ 4 }>
           <Text { ...sectionTitleProps }>Transaction fee</Text>
+          { tx.stability_fee ? (
+            <TxFeeStability data={ tx.stability_fee }/>
+          ) : (
             <Flex>
               <CurrencyValue
                 value={ tx.fee.value }
@@ -43,6 +47,7 @@ const TxAdditionalInfoContent = ({ tx }: { tx: Transaction }) => {
                 rowGap={ 0 }
               />
             </Flex>
+          ) }
         </Box>
       ) }
       { tx.gas_used !== null && (