feat: support vm chains in deploy and register state

axelarnetwork · Jan 9, 2025 · 5b3648a · 5b3648a
1 parent e1ad951
commit 5b3648a
Show file tree

Hide file tree

Showing 2 changed files with 36 additions and 22 deletions.
diff --git a/...c/features/InterchainTokenDeployment/steps/deploy-and-register/DeployAndRegister.state.ts b/...c/features/InterchainTokenDeployment/steps/deploy-and-register/DeployAndRegister.state.ts
@@ -1,6 +1,6 @@
-import type { EVMChainConfig } from "@axelarjs/api/axelarscan";
+import type { EVMChainConfig, VMChainConfig } from "@axelarjs/api/axelarscan";
 import { Maybe } from "@axelarjs/utils";
-import { useEffect, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 
 import { formatEther } from "viem";
 import { useChainId } from "wagmi";
@@ -11,22 +11,31 @@ import {
 } from "~/config/env";
 import { toNumericString } from "~/lib/utils/bigint";
 import { useEstimateGasFeeMultipleChainsQuery } from "~/services/axelarjsSDK/hooks";
-import { useEVMChainConfigsQuery } from "~/services/axelarscan/hooks";
+import { useEVMChainConfigsQuery, useVMChainConfigsQuery } from "~/services/axelarscan/hooks";
 import { useInterchainTokenDeploymentStateContainer } from "../../InterchainTokenDeployment.state";
 
+type ChainConfig = EVMChainConfig | VMChainConfig;
+
 export type UseStep2ChainSelectionStateProps = {
   selectedChains: Set<string>;
 };
 
 export function useStep2ChainSelectionState() {
   const { data: evmChains } = useEVMChainConfigsQuery();
+  const { data: vmChains } = useVMChainConfigsQuery();
   const chainId = useChainId();
   const [isDeploying, setIsDeploying] = useState(false);
   const [totalGasFee, setTotalGasFee] = useState(formatEther(0n));
-  const [sourceChainId, setSourceChainId] = useState(
-    evmChains?.find((evmChain: EVMChainConfig) => evmChain.chain_id === chainId)
-      ?.id as string
-  );
+
+  // Combine VM and EVM chains
+  const allChains = useMemo(() => {
+    return [...(evmChains || []), ...(vmChains || [])];
+  }, [evmChains, vmChains]);
+
+  const [sourceChainId, setSourceChainId] = useState<string>(() => {
+    const chain = allChains?.find((chain: ChainConfig) => chain.chain_id === chainId);
+    return chain?.id || "";
+  });
 
   const { state: rootState } = useInterchainTokenDeploymentStateContainer();
 
@@ -54,20 +63,22 @@ export function useStep2ChainSelectionState() {
   };
 
   useEffect(() => {
-    const candidateChain = evmChains?.find(
-      (evmChain) => evmChain.chain_id === chainId
+    const candidateChain = allChains?.find(
+      (chain) => chain.chain_id === chainId
     );
     if (!candidateChain || candidateChain.chain_name === sourceChainId) return;
 
     setSourceChainId(candidateChain.chain_name);
-  }, [evmChains, chainId, sourceChainId]);
+  }, [allChains, chainId, sourceChainId]);
 
   return {
     state: {
       isDeploying,
       totalGasFee,
       sourceChainId,
+      chains: allChains,
       evmChains,
+      vmChains,
       isEstimatingGasFees: isRemoteDeploymentGasFeeLoading,
       hasGasFeesEstimationError: isRemoteDeploymentGasFeeError,
       remoteDeploymentGasFees,

diff --git a/apps/maestro/src/ui/components/ChainsDropdown/ChainsDropdown.tsx b/apps/maestro/src/ui/components/ChainsDropdown/ChainsDropdown.tsx
@@ -166,7 +166,7 @@ const ChainsDropdown: FC<Props> = (props) => {
     });
 
     return Array.from(chainMap.values());
-  }, [evmChains, vmChains, props.chainType]);
+  }, [evmChains, vmChains]);
 
   const selectedChain = useMemo(
     () =>
@@ -179,7 +179,9 @@ const ChainsDropdown: FC<Props> = (props) => {
   // const eligibleChains = Maybe.of(props.chains ?? chains).mapOr([], (chains) =>
   //   chains.filter((chain) => chain.chain_id !== selectedChain?.chain_id)
   // );
-  const eligibleChains = Maybe.of(props.chains ?? chains).mapOr([], (chains) => chains.filter((chain) => chain.chain_id !== selectedChain?.chain_id));
+  const eligibleChains = Maybe.of(props.chains ?? chains).mapOr([], (chains) =>
+    chains.filter((chain) => chain.chain_id !== selectedChain?.chain_id)
+  );
 
   const handleChainChange = async (chainId: number) => {
     try {
@@ -188,18 +190,19 @@ const ChainsDropdown: FC<Props> = (props) => {
           eligibleChains.find(propEq(chainId, "chain_id")) ?? null
         );
       } else {
-        // Only attempt to switch chain if it's an EVM chain
-        const isEVMChain = evmChains?.some(
+        const selectedChain = eligibleChains.find(
           (chain) => chain.chain_id === chainId
         );
-        if (isEVMChain) {
-          await switchChainAsync?.({ chainId });
-          if (!chain) {
-            actions.selectChainId(chainId);
-          }
-        } else {
-          // Handle VM chain selection
-          actions.selectChainId(chainId);
+
+        if (!selectedChain) {
+          toast.error("Chain not found");
+          return;
+        }
+
+        // Determine chain type and handle accordingly
+        await switchChainAsync?.({ chainId });
+        if (!chain) {
+          actions.selectChainId(chainId, "evm");
         }
       }
     } catch (error) {