diff --git a/ui/txs/TxAdditionalInfoContent.tsx b/ui/txs/TxAdditionalInfoContent.tsx index e296435e12..b9e2ed66f9 100644 --- a/ui/txs/TxAdditionalInfoContent.tsx +++ b/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 && (