stability fee in additional info

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 && (