Migrate warp deployment code from CLI

Upgrade hyp libs Refactor WarpDeploymentDeploy hook calls
hyperlane-xyz · Dec 31, 2024 · 3e2c42c · 3e2c42c
1 parent 0c31dde
commit 3e2c42c
Show file tree

Hide file tree

Showing 13 changed files with 1,201 additions and 903 deletions.
diff --git a/package.json b/package.json
@@ -17,10 +17,10 @@
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
     "@headlessui/react": "^2.2.0",
-    "@hyperlane-xyz/registry": "6.1.0",
-    "@hyperlane-xyz/sdk": "7.1.0",
-    "@hyperlane-xyz/utils": "7.1.0",
-    "@hyperlane-xyz/widgets": "7.1.0",
+    "@hyperlane-xyz/registry": "6.10.0",
+    "@hyperlane-xyz/sdk": "8.0.0-beta.0",
+    "@hyperlane-xyz/utils": "8.0.0-beta.0",
+    "@hyperlane-xyz/widgets": "8.0.0-beta.0",
     "@interchain-ui/react": "^1.23.28",
     "@metamask/post-message-stream": "6.1.2",
     "@metamask/providers": "10.2.1",

diff --git a/src/features/deployerWallet/balances.ts b/src/features/deployerWallet/balances.ts
@@ -3,7 +3,7 @@ import { ProtocolType } from '@hyperlane-xyz/utils';
 import { useQuery } from '@tanstack/react-query';
 import { logger } from '../../utils/logger';
 import { useMultiProvider } from '../chains/hooks';
-import { useDeploymentChains } from '../deployment/hooks';
+import { usePastDeploymentChains } from '../deployment/hooks';
 import { DeployerWallets } from './types';
 
 export interface Balance {
@@ -15,7 +15,7 @@ export interface Balance {
 
 export function useDeployerBalances(wallets: DeployerWallets) {
   const multiProvider = useMultiProvider();
-  const { chains } = useDeploymentChains();
+  const { chains } = usePastDeploymentChains();
 
   const { data, isFetching, refetch } = useQuery({
     // MultiProvider cannot be used here because it's not serializable

diff --git a/src/features/deployerWallet/refund.ts b/src/features/deployerWallet/refund.ts
@@ -13,15 +13,15 @@ import { REFUND_FEE_PADDING_FACTOR } from '../../consts/consts';
 import { logger } from '../../utils/logger';
 import { useMultiProvider } from '../chains/hooks';
 import { getChainDisplayName } from '../chains/utils';
-import { useDeploymentChains } from '../deployment/hooks';
+import { usePastDeploymentChains } from '../deployment/hooks';
 import { Balance, getDeployerBalances } from './balances';
 import { getTransferTx, sendTxFromWallet } from './transactions';
 import { DeployerWallets } from './types';
 import { useDeployerWallets } from './wallets';
 
 export function useRefundDeployerAccounts(onSettled?: () => void) {
   const multiProvider = useMultiProvider();
-  const { chains } = useDeploymentChains();
+  const { chains } = usePastDeploymentChains();
   const { wallets } = useDeployerWallets();
   const { accounts } = useAccounts(multiProvider);
 

diff --git a/src/features/deployment/hooks.ts b/src/features/deployment/hooks.ts
@@ -35,7 +35,7 @@ export function useDeploymentHistory() {
   };
 }
 
-export function useDeploymentChains() {
+export function usePastDeploymentChains() {
   const multiProvider = useMultiProvider();
   const { deployments } = useDeploymentHistory();
   return useMemo<{ chains: ChainName[]; protocols: ProtocolType[] }>(() => {

diff --git a/src/features/deployment/types.ts b/src/features/deployment/types.ts
@@ -28,6 +28,7 @@ export interface DeploymentContext {
   result?: DeploymentResult;
 }
 
+// A discriminated union wrapper for the SDK's deployment config shapes
 interface ConfigBase {
   type: DeploymentType;
   config: unknown;

diff --git a/src/features/deployment/warp/WarpDeploymentDeploy.tsx b/src/features/deployment/warp/WarpDeploymentDeploy.tsx
@@ -1,3 +1,4 @@
+import { MultiProtocolProvider } from '@hyperlane-xyz/sdk';
 import { errorToString } from '@hyperlane-xyz/utils';
 import { Button, Modal, SpinnerIcon, useModal } from '@hyperlane-xyz/widgets';
 import { useMemo, useState } from 'react';
@@ -13,14 +14,13 @@ import { WARP_DEPLOY_GAS_UNITS } from '../../../consts/consts';
 import { CardPage } from '../../../flows/CardPage';
 import { useCardNav } from '../../../flows/hooks';
 import { Color } from '../../../styles/Color';
-import { useMutationOnMount } from '../../../utils/useMutationOnMount';
 import { useMultiProvider } from '../../chains/hooks';
 import { getChainDisplayName } from '../../chains/utils';
 import { useFundDeployerAccount } from '../../deployerWallet/fund';
 import { useRefundDeployerAccounts } from '../../deployerWallet/refund';
 import { useOrCreateDeployerWallets } from '../../deployerWallet/wallets';
 import { useDeploymentHistory, useWarpDeploymentConfig } from '../hooks';
-import { DeploymentStatus } from '../types';
+import { DeploymentStatus, WarpDeploymentConfig } from '../types';
 import { useWarpDeployment } from './deploy';
 
 enum DeployStep {
@@ -35,65 +35,70 @@ export function WarpDeploymentDeploy() {
 
   return (
     <div className="flex w-full flex-col items-center space-y-4 py-2 xs:min-w-100">
-      <HeaderSection />
-      <MainSection step={step} setStep={setStep} />
-      <ButtonSection step={step} setStep={setStep} />
+      <H1 className="text-center">Deploying Warp Route</H1>
+      <Deployment step={step} setStep={setStep} />
+      <CancelButton step={step} setStep={setStep} />
     </div>
   );
 }
 
-function HeaderSection() {
-  return <H1 className="text-center">Deploying Warp Route</H1>;
-}
-
-function MainSection({ step, setStep }: { step: DeployStep; setStep: (s: DeployStep) => void }) {
+function Deployment({ step, setStep }: { step: DeployStep; setStep: (s: DeployStep) => void }) {
+  const multiProvider = useMultiProvider();
+  const { deploymentConfig } = useWarpDeploymentConfig();
   const { setPage } = useCardNav();
 
-  const onDeployerFunded = () => {
-    setStep(DeployStep.ExecuteDeploy);
+  const onFailure = (error: Error) => {
+    // TODO carry error over via store state
+    const errorMsg = errorToString(error, 150);
+    toast.error(errorMsg);
+    setPage(CardPage.WarpFailure);
   };
 
   const onDeploymentSuccess = () => {
     setPage(CardPage.WarpSuccess);
   };
 
-  const onCancelSettled = () => {
-    setPage(CardPage.WarpForm);
-  };
+  const { deploy, isIdle } = useWarpDeployment(deploymentConfig, onDeploymentSuccess, onFailure);
 
-  const onFailure = (error: Error) => {
-    // TODO carry error over via store state
-    const errorMsg = errorToString(error, 150);
-    toast.error(errorMsg);
-    setPage(CardPage.WarpFailure);
+  const onDeployerFunded = () => {
+    setStep(DeployStep.ExecuteDeploy);
+    if (isIdle) deploy();
   };
 
+  if (!deploymentConfig) throw new Error('Deployment config is required');
+
   return (
     <div className="flex grow flex-col items-center justify-center space-y-3 sm:min-h-[18rem]">
       <SlideIn motionKey={step} direction="forward">
         {step === DeployStep.FundDeployer && (
-          <FundDeployerAccounts onSuccess={onDeployerFunded} onFailure={onFailure} />
+          <FundDeployerAccounts
+            multiProvider={multiProvider}
+            deploymentConfig={deploymentConfig}
+            onSuccess={onDeployerFunded}
+            onFailure={onFailure}
+          />
         )}
         {step === DeployStep.ExecuteDeploy && (
-          <ExecuteDeploy onSuccess={onDeploymentSuccess} onFailure={onFailure} />
+          <ExecuteDeploy multiProvider={multiProvider} deploymentConfig={deploymentConfig} />
         )}
         {step === DeployStep.AddFunds && <FundSingleDeployerAccount />}
-        {step === DeployStep.CancelDeploy && <CancelDeploy onSettled={onCancelSettled} />}
+        {step === DeployStep.CancelDeploy && <CancelDeploy />}
       </SlideIn>
     </div>
   );
 }
 
 function FundDeployerAccounts({
+  multiProvider,
+  deploymentConfig,
   onSuccess,
   onFailure,
 }: {
+  multiProvider: MultiProtocolProvider;
+  deploymentConfig: WarpDeploymentConfig;
   onSuccess: () => void;
   onFailure: (error: Error) => void;
 }) {
-  const multiProvider = useMultiProvider();
-  const { deploymentConfig } = useWarpDeploymentConfig();
-
   const { chains, protocols } = useMemo(() => {
     const chains = deploymentConfig?.chains || [];
     const protocols = Array.from(new Set(chains.map((c) => multiProvider.getProtocol(c))));
@@ -174,20 +179,15 @@ function FundIcon({ color }: { color: string }) {
 }
 
 function ExecuteDeploy({
-  onSuccess,
-  onFailure,
+  multiProvider,
+  deploymentConfig,
 }: {
-  onSuccess: () => void;
-  onFailure: (error: Error) => void;
+  multiProvider: MultiProtocolProvider;
+  deploymentConfig: WarpDeploymentConfig;
 }) {
-  const multiProvider = useMultiProvider();
-  const { deploymentConfig } = useWarpDeploymentConfig();
   const chains = deploymentConfig?.chains || [];
   const chainListString = chains.map((c) => getChainDisplayName(multiProvider, c, true)).join(', ');
 
-  const { deploy, isIdle } = useWarpDeployment(deploymentConfig, onSuccess, onFailure);
-  useMutationOnMount(isIdle, deploy);
-
   const { isOpen, open, close } = useModal();
   const onClickViewLogs = () => {
     // TODO get logs somehow
@@ -215,10 +215,7 @@ function ExecuteDeploy({
   );
 }
 
-function CancelDeploy({ onSettled }: { onSettled: () => void }) {
-  const { refund, isIdle } = useRefundDeployerAccounts(onSettled);
-  useMutationOnMount(isIdle, refund);
-
+function CancelDeploy() {
   return (
     <div className="flex flex-col items-center space-y-7">
       <SpinnerIcon width={70} height={70} color={Color.primary['500']} />
@@ -230,11 +227,18 @@ function CancelDeploy({ onSettled }: { onSettled: () => void }) {
   );
 }
 
-function ButtonSection({ step, setStep }: { step: DeployStep; setStep: (s: DeployStep) => void }) {
+function CancelButton({ step, setStep }: { step: DeployStep; setStep: (s: DeployStep) => void }) {
   const { updateDeploymentStatus, currentIndex } = useDeploymentHistory();
+
+  const { setPage } = useCardNav();
+  const { refund, isIdle } = useRefundDeployerAccounts(() => {
+    setPage(CardPage.WarpForm);
+  });
+
   const onClickCancel = () => {
     updateDeploymentStatus(currentIndex, DeploymentStatus.Cancelled);
     setStep(DeployStep.CancelDeploy);
+    if (isIdle) refund();
   };
 
   return (