Add deployment err msg to store data

src/consts/consts.ts

@@ -1,4 +1,5 @@
 export const MIN_CHAIN_BALANCE = 1; // 1 Wei
+// TODO edit this based on experiments
 export const WARP_DEPLOY_GAS_UNITS = BigInt(1e7);
 export const REFUND_FEE_PADDING_FACTOR = 1.1;
 export const MIN_DEPLOYER_BALANCE_TO_SHOW = BigInt(1e15); // 0.001 ETH

src/features/deployment/hooks.ts

@@ -29,6 +29,7 @@ export function useDeploymentHistory() {
     addDeployment: s.addDeployment,
     updateDeploymentStatus: s.updateDeploymentStatus,
     completeDeployment: s.completeDeployment,
+    failDeployment: s.failDeployment,
   }));
   return {
     ...state,

src/features/deployment/types.ts

@@ -26,6 +26,7 @@ export interface DeploymentContext {
   status: DeploymentStatus;
   config: DeploymentConfig;
   result?: DeploymentResult;
+  error?: string;
 }
 
 // A discriminated union wrapper for the SDK's deployment config shapes

src/features/deployment/warp/WarpDeploymentDeploy.tsx

@@ -2,7 +2,6 @@ import { MultiProtocolProvider, WarpCoreConfig } from '@hyperlane-xyz/sdk';
 import { errorToString, sleep } from '@hyperlane-xyz/utils';
 import { Button, Modal, SpinnerIcon, useModal } from '@hyperlane-xyz/widgets';
 import { useMemo, useState } from 'react';
-import { toast } from 'react-toastify';
 import { PlanetSpinner } from '../../../components/animation/PlanetSpinner';
 import { SlideIn } from '../../../components/animation/SlideIn';
 import { SolidButton } from '../../../components/buttons/SolidButton';
@@ -39,16 +38,15 @@ export function WarpDeploymentDeploy() {
 
   const multiProvider = useMultiProvider();
   const { deploymentConfig } = useWarpDeploymentConfig();
-  const { updateDeploymentStatus, currentIndex, completeDeployment } = useDeploymentHistory();
+  const { updateDeploymentStatus, currentIndex, completeDeployment, failDeployment } =
+    useDeploymentHistory();
 
   const { refundAsync } = useRefundDeployerAccounts();
 
   const onFailure = (error: Error) => {
-    // TODO carry error over via store state
-    updateDeploymentStatus(currentIndex, DeploymentStatus.Failed);
-    const errorMsg = errorToString(error, 150);
-    toast.error(errorMsg);
-    setPage(CardPage.WarpFailure);
+    const errMsg = errorToString(error, 5000);
+    failDeployment(currentIndex, errMsg);
+    refundAsync().finally(() => setPage(CardPage.WarpFailure));
   };
 
   const onDeploymentSuccess = (config: WarpCoreConfig) => {

src/features/deployment/warp/WarpDeploymentFailure.tsx

@@ -1,15 +1,16 @@
 import { RestartButton } from '../../../components/buttons/RestartButton';
 import { H1 } from '../../../components/text/Headers';
+import { useLatestDeployment } from '../hooks';
 
 export function WarpDeploymentFailure() {
+  const deploymentContext = useLatestDeployment();
+
+  const errorMsg = deploymentContext?.error || 'Unknown error';
+
   return (
     <div className="flex w-full flex-col items-center space-y-4 py-2 text-md">
       <H1 className="text-center text-red-500">Deployment has failed</H1>
-      <p className="max-w-lg rounded-lg bg-blue-500/5 p-2 text-xs text-gray-800">
-        Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nemo modi consequatur quod animi,
-        dolorum asperiores hic molestias veniam, voluptatibus sit blanditiis eaque nostrum maxime.
-        Et, voluptates. Nemo quas doloribus molestias?
-      </p>
+      <p className="max-w-lg rounded-lg bg-blue-500/5 p-2 text-xs text-gray-800">{errorMsg}</p>
       <RestartButton />
     </div>
   );

src/features/store.ts

@@ -45,7 +45,8 @@ export interface AppState {
   deployments: DeploymentContext[];
   addDeployment: (t: Omit<DeploymentContext, 'id' | 'timestamp'>) => void;
   updateDeploymentStatus: (i: number, s: DeploymentStatus) => void;
-  completeDeployment: (i: number, s: DeploymentResult) => void;
+  completeDeployment: (i: number, r: DeploymentResult) => void;
+  failDeployment: (i: number, e: string) => void;
   cancelPendingDeployments: () => void;
 
   // Shared component state
@@ -127,6 +128,15 @@ export const useStore = create<AppState>()(
           return { deployments: txs };
         });
       },
+      failDeployment: (i, e) => {
+        set((state) => {
+          if (i >= state.deployments.length) return state;
+          const txs = [...state.deployments];
+          txs[i].error = e;
+          txs[i].status = DeploymentStatus.Failed;
+          return { deployments: txs };
+        });
+      },
       cancelPendingDeployments: () => {
         set((state) => ({
           deployments: state.deployments.map((t) =>