diff --git a/apps/maestro/src/features/InterchainTokenDeployment/steps/deploy-and-register/DeployAndRegister.state.ts b/apps/maestro/src/features/InterchainTokenDeployment/steps/deploy-and-register/DeployAndRegister.state.ts index 9ae2c03ef..da987e12c 100644 --- a/apps/maestro/src/features/InterchainTokenDeployment/steps/deploy-and-register/DeployAndRegister.state.ts +++ b/apps/maestro/src/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; }; 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(() => { + 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 index 5e234b26f..f4b6c423d 100644 --- 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) => { }); return Array.from(chainMap.values()); - }, [evmChains, vmChains, props.chainType]); + }, [evmChains, vmChains]); const selectedChain = useMemo( () => @@ -179,7 +179,9 @@ const ChainsDropdown: FC = (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) => { 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) {