From 134d1cbd02fd2b28fb16364a2f2b0dd5d18f93d5 Mon Sep 17 00:00:00 2001 From: The Butcher <107277499+butcher73@users.noreply.github.com> Date: Fri, 15 Nov 2024 00:27:36 +0700 Subject: [PATCH] Fix Initial Decimal Display Issue and Improve Gas Payment Formatting in Hyperlane Explorer (#138) Setting the initial display to use the correct native token decimals in GasDetailsCard. This ensures accurate Total paid values are shown --------- Co-authored-by: J M Rossy --- src/features/messages/cards/GasDetailsCard.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/src/features/messages/cards/GasDetailsCard.tsx b/src/features/messages/cards/GasDetailsCard.tsx index e324855..d8d4b80 100644 --- a/src/features/messages/cards/GasDetailsCard.tsx +++ b/src/features/messages/cards/GasDetailsCard.tsx @@ -29,14 +29,15 @@ export function GasDetailsCard({ message, blur, igpPayments = {} }: Props) { const unitOptions = useMemo(() => { const originMetadata = multiProvider.tryGetChainMetadata(message.originDomainId); const nativeCurrencyName = originMetadata?.nativeToken?.symbol || 'Eth'; + const nativeDecimals = originMetadata?.nativeToken?.decimals || 18; return [ - { value: 18, display: toTitleCase(nativeCurrencyName) }, + { value: nativeDecimals, display: toTitleCase(nativeCurrencyName) }, { value: 9, display: 'Gwei' }, { value: 0, display: 'Wei' }, ]; }, [message, multiProvider]); - const [decimals, setDecimals] = useState(unitOptions[0].value); + const [decimals, setDecimals] = useState(unitOptions[1].value); const { totalGasAmount, paymentFormatted, numPayments, avgPrice, paymentsWithAddr } = useMemo(() => { @@ -179,7 +180,7 @@ function computeAvgGasPrice( const gasBN = new BigNumber(gasAmount); const paymentBN = new BigNumber(payment); if (gasBN.isZero() || paymentBN.isZero()) return null; - const wei = paymentBN.div(gasAmount).toFixed(0); + const wei = paymentBN.div(gasBN).toFixed(0); const formatted = utils.formatUnits(wei, decimals).toString(); return { wei, formatted }; } catch (error) {