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 <[email protected]>

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<number>(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) {