feat: integrate estimate gas fee api (#480)

axelarnetwork · Dec 23, 2024 · 6fe339c · 6fe339c
1 parent 2f2f0c9
commit 6fe339c
Show file tree

Hide file tree

Showing 8 changed files with 126 additions and 84 deletions.
diff --git a/apps/maestro/package.json b/apps/maestro/package.json
@@ -35,7 +35,7 @@
   },
   "dependencies": {
     "@axelar-network/axelar-cgp-sui": "0.0.0-snapshot.424bc13",
-    "@axelar-network/axelarjs-sdk": "0.17.1-alpha.5",
+    "@axelar-network/axelarjs-sdk": "0.17.1-alpha.10",
     "@axelarjs/api": "workspace:*",
     "@axelarjs/core": "workspace:*",
     "@axelarjs/evm": "workspace:*",

diff --git a/...rc/features/CanonicalTokenDeployment/steps/deploy-and-register/DeployAndRegister.state.ts b/...rc/features/CanonicalTokenDeployment/steps/deploy-and-register/DeployAndRegister.state.ts
@@ -1,3 +1,4 @@
+import { Maybe } from "@axelarjs/utils";
 import { useEffect, useState } from "react";
 
 import { formatEther } from "viem";
@@ -6,7 +7,8 @@ import {
   NEXT_PUBLIC_INTERCHAIN_DEPLOYMENT_EXECUTE_DATA,
   NEXT_PUBLIC_INTERCHAIN_DEPLOYMENT_GAS_LIMIT,
 } from "~/config/env";
-import { useChainId } from "~/lib/hooks";
+import { useBalance, useChainId } from "~/lib/hooks";
+import { toNumericString } from "~/lib/utils/bigint";
 import { useEstimateGasFeeMultipleChainsQuery } from "~/services/axelarjsSDK/hooks";
 import { useEVMChainConfigsQuery } from "~/services/axelarscan/hooks";
 import { useCanonicalTokenDeploymentStateContainer } from "../../CanonicalTokenDeployment.state";
@@ -18,6 +20,7 @@ export type UseStep3ChainSelectionStateProps = {
 export function useStep3ChainSelectionState() {
   const { data: evmChains } = useEVMChainConfigsQuery();
   const chainId = useChainId();
+  const userBalance = useBalance();
   const [isDeploying, setIsDeploying] = useState(false);
   const [totalGasFee, $setTotalGasFee] = useState(formatEther(0n));
   const [sourceChainId, setSourceChainId] = useState(
@@ -38,23 +41,17 @@ export function useStep3ChainSelectionState() {
     gasMultiplier: "auto",
   });
 
-  useEffect(
-    () =>
-      remoteDeploymentGasFees &&
-      setTotalGasFee(remoteDeploymentGasFees.totalGasFee),
-    [remoteDeploymentGasFees]
-  );
+  useEffect(() => {
+    Maybe.of(remoteDeploymentGasFees?.totalGasFee)
+      .map((value) => toNumericString(value, userBalance?.decimals || 18))
+      .map($setTotalGasFee);
+  }, [remoteDeploymentGasFees, $setTotalGasFee, userBalance?.decimals]);
 
   const resetState = () => {
     setIsDeploying(false);
     $setTotalGasFee(formatEther(0n));
   };
 
-  const setTotalGasFee = (total: bigint) => {
-    const num = Number(formatEther(total));
-    $setTotalGasFee(num.toFixed(4));
-  };
-
   useEffect(() => {
     const candidateChain = evmChains?.find(
       (evmChain) => evmChain.chain_id === chainId
@@ -77,7 +74,7 @@ export function useStep3ChainSelectionState() {
     actions: {
       resetState,
       setIsDeploying,
-      setTotalGasFee,
+      $setTotalGasFee,
       setSourceChainId,
     },
   };

diff --git a/...c/features/InterchainTokenDeployment/steps/deploy-and-register/DeployAndRegister.state.ts b/...c/features/InterchainTokenDeployment/steps/deploy-and-register/DeployAndRegister.state.ts
@@ -7,7 +7,7 @@ import {
   NEXT_PUBLIC_INTERCHAIN_DEPLOYMENT_EXECUTE_DATA,
   NEXT_PUBLIC_INTERCHAIN_DEPLOYMENT_GAS_LIMIT,
 } from "~/config/env";
-import { useChainId } from "~/lib/hooks";
+import { useBalance, useChainId } from "~/lib/hooks";
 import { toNumericString } from "~/lib/utils/bigint";
 import { useEstimateGasFeeMultipleChainsQuery } from "~/services/axelarjsSDK/hooks";
 import { useEVMChainConfigsQuery } from "~/services/axelarscan/hooks";
@@ -20,6 +20,7 @@ export type UseStep2ChainSelectionStateProps = {
 export function useStep2ChainSelectionState() {
   const { data: evmChains } = useEVMChainConfigsQuery();
   const chainId = useChainId();
+  const userBalance = useBalance();
   const [isDeploying, setIsDeploying] = useState(false);
   const [totalGasFee, setTotalGasFee] = useState(formatEther(0n));
   const [sourceChainId, setSourceChainId] = useState(
@@ -42,9 +43,9 @@ export function useStep2ChainSelectionState() {
 
   useEffect(() => {
     Maybe.of(remoteDeploymentGasFees?.totalGasFee)
-      .map(toNumericString)
+      .map((value) => toNumericString(value, userBalance?.decimals || 18))
       .map(setTotalGasFee);
-  }, [remoteDeploymentGasFees, setTotalGasFee]);
+  }, [remoteDeploymentGasFees, setTotalGasFee, userBalance?.decimals]);
 
   const resetState = () => {
     setIsDeploying(false);

diff --git a/apps/maestro/src/lib/utils/bigint.ts b/apps/maestro/src/lib/utils/bigint.ts
@@ -1,7 +1,7 @@
-import { formatEther } from "viem";
+import { formatUnits } from "viem";
 
-export const toNumericString = (num: bigint) =>
-  Number(formatEther(num)).toLocaleString("en", {
+export const toNumericString = (num: bigint, decimals = 18) =>
+  Number(formatUnits(num, decimals)).toLocaleString("en", {
     minimumFractionDigits: 2,
     maximumFractionDigits: 4,
   });
diff --git a/apps/maestro/src/server/routers/sui/index.ts b/apps/maestro/src/server/routers/sui/index.ts
@@ -76,7 +76,8 @@ export const suiRouter = router({
         const response = await fetch(
           `${suiServiceBaseUrl}/chain/devnet-amplifier`
         );
-        const chainConfig = await response.json();
+        const _chainConfig = await response.json();
+        const chainConfig = _chainConfig.chains.sui;
         const {
           sender,
           symbol,

diff --git a/apps/maestro/src/services/axelarjsSDK/index.ts b/apps/maestro/src/services/axelarjsSDK/index.ts
@@ -16,35 +16,24 @@ export const client = new AxelarQueryAPI({
 });
 
 async function estimateGasFee(params: EstimateGasFeeInput): Promise<bigint> {
-  let response;
-  console.log("params estimateGasFee", params);
-  // TODO: remove when sdk support for sui is ready
-  if (
-    params.sourceChainId.includes("sui") ||
-    params.destinationChainId.includes("sui")
-  ) {
-    response = "20000000000000000";
-  } else
-    response = await client.estimateGasFee(
-      params.sourceChainId,
-      params.destinationChainId,
-      params.gasLimit,
-      params.gasMultiplier,
-      params.sourceChainTokenSymbol,
-      params.minGasPrice,
-      params.executeData as `0x${string}` | undefined
-    );
-
-  const rawFee =
-    typeof response === "string"
-      ? response
-      : response.baseFee +
-        response.l1ExecutionFeeWithMultiplier +
-        response.executionFeeWithMultiplier;
-
-  console.log("rawFee", rawFee);
-
-  return BigInt(rawFee);
+  const hopParams = [
+    {
+      ...params,
+      sourceChain: params.sourceChainId,
+      destinationChain: "axelar",
+      gasLimit: params.gasLimit.toString(),
+    },
+    {
+      ...params,
+      sourceChain: "axelar",
+      destinationChain: params.destinationChainId,
+      gasLimit: params.gasLimit.toString(),
+    },
+  ];
+
+  const fee = await client.estimateMultihopFee(hopParams);
+
+  return BigInt(fee as string);
 }
 
 async function estimateGasFeeMultipleChains(

diff --git a/apps/maestro/src/ui/pages/InterchainTokenDetailsPage/ConnectedInterchainTokensPage.tsx b/apps/maestro/src/ui/pages/InterchainTokenDetailsPage/ConnectedInterchainTokensPage.tsx
@@ -382,7 +382,7 @@ const ConnectedInterchainTokensPage: FC<ConnectedInterchainTokensPageProps> = (
               <div className="flex items-center justify-end gap-1 text-sm md:ml-2">
                 ≈{" "}
                 <BigNumberText
-                  decimals={18}
+                  decimals={userGasBalance?.decimals || 18}
                   localeOptions={{
                     style: "decimal",
                     maximumFractionDigits: 4,