From 62c9283fae07e4994e981ad6e12fbc6b1f946a59 Mon Sep 17 00:00:00 2001 From: Satoshi Okamoto Date: Sat, 9 Nov 2024 20:39:32 +0700 Subject: [PATCH 1/5] fix: use BigNumber for gasAmount in computeAvgGasPrice to ensure accurate division --- src/features/messages/cards/GasDetailsCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/features/messages/cards/GasDetailsCard.tsx b/src/features/messages/cards/GasDetailsCard.tsx index e324855..75cde8a 100644 --- a/src/features/messages/cards/GasDetailsCard.tsx +++ b/src/features/messages/cards/GasDetailsCard.tsx @@ -179,7 +179,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) { From 3221177f73025cac9a663821ff6e1333d69714ff Mon Sep 17 00:00:00 2001 From: Satoshi Okamoto Date: Sat, 9 Nov 2024 21:18:40 +0700 Subject: [PATCH 2/5] Fix decimal display issue on initial load in GasDetailsCard --- src/features/messages/cards/GasDetailsCard.tsx | 15 ++++++++++++--- 1 file changed, 12 insertions(+), 3 deletions(-) diff --git a/src/features/messages/cards/GasDetailsCard.tsx b/src/features/messages/cards/GasDetailsCard.tsx index 75cde8a..f4d15ac 100644 --- a/src/features/messages/cards/GasDetailsCard.tsx +++ b/src/features/messages/cards/GasDetailsCard.tsx @@ -1,7 +1,7 @@ import BigNumber from 'bignumber.js'; import { utils } from 'ethers'; import Image from 'next/image'; -import { useMemo, useState } from 'react'; +import { useEffect, useMemo, useState } from 'react'; import { fromWei, toTitleCase } from '@hyperlane-xyz/utils'; import { Tooltip } from '@hyperlane-xyz/widgets'; @@ -26,17 +26,25 @@ interface Props { export function GasDetailsCard({ message, blur, igpPayments = {} }: Props) { const multiProvider = useMultiProvider(); + 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[0].value); + + // Update `decimals` after the component mounts to ensure it matches the initial `unitOptions` value + useEffect(() => { + setDecimals(unitOptions[0].value); + }, [unitOptions]); const { totalGasAmount, paymentFormatted, numPayments, avgPrice, paymentsWithAddr } = useMemo(() => { @@ -179,6 +187,7 @@ function computeAvgGasPrice( const gasBN = new BigNumber(gasAmount); const paymentBN = new BigNumber(payment); if (gasBN.isZero() || paymentBN.isZero()) return null; + const wei = paymentBN.div(gasBN).toFixed(0); const formatted = utils.formatUnits(wei, decimals).toString(); return { wei, formatted }; From 429202fa53673066a6061cda4e1dfcf44bf600e9 Mon Sep 17 00:00:00 2001 From: Satoshi Okamoto Date: Sat, 9 Nov 2024 21:21:06 +0700 Subject: [PATCH 3/5] get rid of uwrite space --- src/features/messages/cards/GasDetailsCard.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/src/features/messages/cards/GasDetailsCard.tsx b/src/features/messages/cards/GasDetailsCard.tsx index f4d15ac..efefe7d 100644 --- a/src/features/messages/cards/GasDetailsCard.tsx +++ b/src/features/messages/cards/GasDetailsCard.tsx @@ -26,12 +26,10 @@ interface Props { export function GasDetailsCard({ message, blur, igpPayments = {} }: Props) { const multiProvider = useMultiProvider(); - const unitOptions = useMemo(() => { const originMetadata = multiProvider.tryGetChainMetadata(message.originDomainId); const nativeCurrencyName = originMetadata?.nativeToken?.symbol || 'Eth'; const nativeDecimals = originMetadata?.nativeToken?.decimals || 18; - return [ { value: nativeDecimals, display: toTitleCase(nativeCurrencyName) }, { value: 9, display: 'Gwei' }, @@ -187,7 +185,6 @@ function computeAvgGasPrice( const gasBN = new BigNumber(gasAmount); const paymentBN = new BigNumber(payment); if (gasBN.isZero() || paymentBN.isZero()) return null; - const wei = paymentBN.div(gasBN).toFixed(0); const formatted = utils.formatUnits(wei, decimals).toString(); return { wei, formatted }; From 31ea6c09e0bde7d165e28a74e94cc0ca4cddcb93 Mon Sep 17 00:00:00 2001 From: Satoshi Okamoto Date: Thu, 14 Nov 2024 05:29:51 +0700 Subject: [PATCH 4/5] Another trick to simplify the logic is to set the default to Gwei. Actually, I like this approach better. --- src/features/messages/cards/GasDetailsCard.tsx | 9 ++------- 1 file changed, 2 insertions(+), 7 deletions(-) diff --git a/src/features/messages/cards/GasDetailsCard.tsx b/src/features/messages/cards/GasDetailsCard.tsx index efefe7d..0078cf0 100644 --- a/src/features/messages/cards/GasDetailsCard.tsx +++ b/src/features/messages/cards/GasDetailsCard.tsx @@ -1,7 +1,7 @@ import BigNumber from 'bignumber.js'; import { utils } from 'ethers'; import Image from 'next/image'; -import { useEffect, useMemo, useState } from 'react'; +import { useMemo, useState } from 'react'; import { fromWei, toTitleCase } from '@hyperlane-xyz/utils'; import { Tooltip } from '@hyperlane-xyz/widgets'; @@ -37,12 +37,7 @@ export function GasDetailsCard({ message, blur, igpPayments = {} }: Props) { ]; }, [message, multiProvider]); - const [decimals, setDecimals] = useState(unitOptions[0].value); - - // Update `decimals` after the component mounts to ensure it matches the initial `unitOptions` value - useEffect(() => { - setDecimals(unitOptions[0].value); - }, [unitOptions]); + const [decimals, setDecimals] = useState(9); const { totalGasAmount, paymentFormatted, numPayments, avgPrice, paymentsWithAddr } = useMemo(() => { From b5f8f33803f5a7236f875cee54a9958bcd7f0e58 Mon Sep 17 00:00:00 2001 From: J M Rossy Date: Thu, 14 Nov 2024 12:12:17 -0500 Subject: [PATCH 5/5] Update src/features/messages/cards/GasDetailsCard.tsx --- src/features/messages/cards/GasDetailsCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/features/messages/cards/GasDetailsCard.tsx b/src/features/messages/cards/GasDetailsCard.tsx index 0078cf0..d8d4b80 100644 --- a/src/features/messages/cards/GasDetailsCard.tsx +++ b/src/features/messages/cards/GasDetailsCard.tsx @@ -37,7 +37,7 @@ export function GasDetailsCard({ message, blur, igpPayments = {} }: Props) { ]; }, [message, multiProvider]); - const [decimals, setDecimals] = useState(9); + const [decimals, setDecimals] = useState(unitOptions[1].value); const { totalGasAmount, paymentFormatted, numPayments, avgPrice, paymentsWithAddr } = useMemo(() => {