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,16 +34,20 @@ const TxAdditionalInfoContent = ({ tx }: { tx: Transaction }) => {
       { !config.UI.views.tx.hiddenFields?.tx_fee && (
         <Box { ...sectionProps } mb={ 4 }>
           <Text { ...sectionTitleProps }>Transaction fee</Text>
-          <Flex>
-            <CurrencyValue
-              value={ tx.fee.value }
-              currency={ config.UI.views.tx.hiddenFields?.fee_currency ? '' : config.chain.currency.symbol }
-              exchangeRate={ tx.exchange_rate }
-              accuracyUsd={ 2 }
-              flexWrap="wrap"
-              rowGap={ 0 }
-            />
-          </Flex>
+          { tx.stability_fee ? (
+            <TxFeeStability data={ tx.stability_fee }/>
+          ) : (
+            <Flex>
+              <CurrencyValue
+                value={ tx.fee.value }
+                currency={ config.UI.views.tx.hiddenFields?.fee_currency ? '' : config.chain.currency.symbol }
+                exchangeRate={ tx.exchange_rate }
+                accuracyUsd={ 2 }
+                flexWrap="wrap"
+                rowGap={ 0 }
+              />
+            </Flex>
+          ) }
         </Box>
       ) }
       { tx.gas_used !== null && (