Setup deploy hook skeleton

src/features/deployerWallet/refund.ts

@@ -25,7 +25,7 @@ export function useRefundDeployerAccounts(onSettled?: () => void) {
   const { wallets } = useDeployerWallets();
   const { accounts } = useAccounts(multiProvider);
 
-  const { error, mutate, mutateAsync, submittedAt, isIdle, isPending } = useMutation({
+  const { error, mutate, isIdle, isPending } = useMutation({
     mutationKey: ['refundDeployerAccounts', chains, wallets, accounts],
     mutationFn: () => refundDeployerAccounts(chains, wallets, multiProvider, accounts),
     retry: false,
@@ -39,9 +39,7 @@ export function useRefundDeployerAccounts(onSettled?: () => void) {
 
   return {
     refund: mutate,
-    refundAsync: mutateAsync,
     isIdle,
-    hasRun: !!submittedAt,
     isPending,
   };
 }

src/features/deployment/warp/WarpDeploymentDeploy.tsx

@@ -1,5 +1,6 @@
+import { errorToString } from '@hyperlane-xyz/utils';
 import { Button, Modal, SpinnerIcon, useModal } from '@hyperlane-xyz/widgets';
-import { useEffect, useMemo, useState } from 'react';
+import { useMemo, useState } from 'react';
 import { toast } from 'react-toastify';
 import { PlanetSpinner } from '../../../components/animation/PlanetSpinner';
 import { SlideIn } from '../../../components/animation/SlideIn';
@@ -12,14 +13,15 @@ import { WARP_DEPLOY_GAS_UNITS } from '../../../consts/consts';
 import { CardPage } from '../../../flows/CardPage';
 import { useCardNav } from '../../../flows/hooks';
 import { Color } from '../../../styles/Color';
-import { useThrottle } from '../../../utils/useThrottle';
+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 { useWarpDeployment } from './deploy';
 
 enum DeployStep {
   FundDeployer,
@@ -51,9 +53,18 @@ function MainSection({ step, setStep }: { step: DeployStep; setStep: (s: DeployS
     setStep(DeployStep.ExecuteDeploy);
   };
 
+  const onDeploymentSuccess = () => {
+    setPage(CardPage.WarpSuccess);
+  };
+
+  const onCancelSettled = () => {
+    setPage(CardPage.WarpForm);
+  };
+
   const onFailure = (error: Error) => {
     // TODO carry error over via store state
-    toast.error(error.message);
+    const errorMsg = errorToString(error, 150);
+    toast.error(errorMsg);
     setPage(CardPage.WarpFailure);
   };
 
@@ -63,9 +74,11 @@ function MainSection({ step, setStep }: { step: DeployStep; setStep: (s: DeployS
         {step === DeployStep.FundDeployer && (
           <FundDeployerAccounts onSuccess={onDeployerFunded} onFailure={onFailure} />
         )}
-        {step === DeployStep.ExecuteDeploy && <ExecuteDeploy />}
+        {step === DeployStep.ExecuteDeploy && (
+          <ExecuteDeploy onSuccess={onDeploymentSuccess} onFailure={onFailure} />
+        )}
         {step === DeployStep.AddFunds && <FundSingleDeployerAccount />}
-        {step === DeployStep.CancelDeploy && <CancelDeploy />}
+        {step === DeployStep.CancelDeploy && <CancelDeploy onSettled={onCancelSettled} />}
       </SlideIn>
     </div>
   );
@@ -160,12 +173,21 @@ function FundIcon({ color }: { color: string }) {
   );
 }
 
-function ExecuteDeploy() {
+function ExecuteDeploy({
+  onSuccess,
+  onFailure,
+}: {
+  onSuccess: () => void;
+  onFailure: (error: Error) => void;
+}) {
   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
@@ -193,14 +215,9 @@ function ExecuteDeploy() {
   );
 }
 
-function CancelDeploy() {
-  const { setPage } = useCardNav();
-  const onSettled = () => setPage(CardPage.WarpForm);
+function CancelDeploy({ onSettled }: { onSettled: () => void }) {
   const { refund, isIdle } = useRefundDeployerAccounts(onSettled);
-  const throttledRefund = useThrottle(refund, 10_000);
-  useEffect(() => {
-    if (isIdle) throttledRefund();
-  }, [isIdle, throttledRefund]);
+  useMutationOnMount(isIdle, refund);
 
   return (
     <div className="flex flex-col items-center space-y-7">

src/features/deployment/warp/deploy.ts

@@ -0,0 +1,45 @@
+import { MultiProtocolProvider } from '@hyperlane-xyz/sdk';
+import { useMutation } from '@tanstack/react-query';
+import { useToastError } from '../../../components/toast/useToastError';
+import { logger } from '../../../utils/logger';
+import { useMultiProvider } from '../../chains/hooks';
+import { DeployerWallets } from '../../deployerWallet/types';
+import { useDeployerWallets } from '../../deployerWallet/wallets';
+import { WarpDeploymentConfig } from '../types';
+
+export function useWarpDeployment(
+  deploymentConfig?: WarpDeploymentConfig,
+  onSuccess?: () => void,
+  onFailure?: (error: Error) => void,
+) {
+  const multiProvider = useMultiProvider();
+  const { wallets } = useDeployerWallets();
+
+  const { error, mutate, isIdle, isPending } = useMutation({
+    mutationKey: ['warpDeploy', deploymentConfig, wallets],
+    mutationFn: () => {
+      if (!deploymentConfig) return Promise.resolve(null);
+      return executeDeploy(deploymentConfig, multiProvider, wallets);
+    },
+    retry: false,
+    onError: onFailure,
+    onSuccess,
+  });
+
+  useToastError(error, 'Error deploying warp route.');
+
+  return {
+    deploy: mutate,
+    isIdle,
+    isPending,
+  };
+}
+
+export async function executeDeploy(
+  config: WarpDeploymentConfig,
+  multiProvider: MultiProtocolProvider,
+  wallets: DeployerWallets,
+) {
+  //TODO
+  logger.info('Deploying warp route', multiProvider, config, wallets);
+}

src/utils/useMutationOnMount.ts

@@ -0,0 +1,14 @@
+import { useEffect } from 'react';
+import { useThrottle } from './useThrottle';
+
+export function useMutationOnMount<T>(
+  isIdle: boolean,
+  run: () => Promise<T> | null | undefined | void,
+  restartDelay = 10_000,
+) {
+  const throttledRun = useThrottle(run, restartDelay);
+
+  useEffect(() => {
+    if (isIdle) throttledRun();
+  }, [isIdle, throttledRun]);
+}

src/utils/useThrottle.ts

@@ -1,10 +1,10 @@
 import { useCallback, useRef } from 'react';
 
-export function useThrottle(cb: () => void, limit: number) {
+export function useThrottle(cb?: () => void, limit: number = 1_000) {
   const lastRun = useRef<number | undefined>(undefined);
 
   return useCallback(() => {
-    if (!lastRun.current || Date.now() - lastRun.current >= limit) {
+    if ((!lastRun.current || Date.now() - lastRun.current >= limit) && cb) {
       cb(); // Execute the callback
       lastRun.current = Date.now(); // Update last execution time
     }