Implement DeploymentsDetailsModal

Remove unused token component + hook
Modify DeploymentContext schema

Author: jmrossy

src/features/deployerWallet/fund.ts

@@ -20,6 +20,9 @@ import { logger } from '../../utils/logger';
 import { useMultiProvider } from '../chains/hooks';
 import { getChainDisplayName } from '../chains/utils';
 
+const USER_REJECTED_ERROR = 'User rejected';
+const CHAIN_MISMATCH_ERROR = 'ChainMismatchError';
+
 export function useFundDeployerAccount(
   chainName: ChainName,
   gasUnits: bigint,
@@ -86,16 +89,27 @@ async function executeTransfer({
   const amount = await getFundingAmount(chainName, gasUnits, multiProvider);
   await assertSenderBalance(sender, chainName, amount, multiProvider);
   const tx = await getFundingTx(deployerAddress, chainName, amount, multiProvider);
-  const { hash, confirm } = await sendTransaction({
-    tx,
-    chainName,
-    activeChainName,
-  });
 
-  const txReceipt = await confirm();
-  logger.debug(`Deployer funding tx confirmed on ${chainName}, hash: ${hash}`);
-  toastTxSuccess(`Deployer funded on ${chainName}!`, hash, origin);
-  return txReceipt;
+  try {
+    const { hash, confirm } = await sendTransaction({
+      tx,
+      chainName,
+      activeChainName,
+    });
+    const txReceipt = await confirm();
+    logger.debug(`Deployer funding tx confirmed on ${chainName}, hash: ${hash}`);
+    toastTxSuccess(`Deployer funded on ${chainName}!`, hash, origin);
+    return txReceipt;
+  } catch (error: any) {
+    const errorDetails = error.message || error.toString();
+    if (errorDetails.includes(CHAIN_MISMATCH_ERROR)) {
+      throw new Error(`Wallet must be connected to ${chainName}`);
+    } else if (errorDetails.includes(USER_REJECTED_ERROR)) {
+      throw new Error('User rejected transaction');
+    } else {
+      throw error;
+    }
+  }
 }
 
 async function getFundingAmount(

src/features/deployment/DeploymentDetailsModal.tsx

@@ -1,6 +1,11 @@
-import { Modal } from '@hyperlane-xyz/widgets';
-import { useMemo } from 'react';
-import { formatTimestamp } from '../../utils/date';
+import { Disclosure, DisclosureButton, DisclosurePanel } from '@headlessui/react';
+import { toTitleCase } from '@hyperlane-xyz/utils';
+import { ChevronIcon, CopyButton, Modal } from '@hyperlane-xyz/widgets';
+import { stringify } from 'yaml';
+import { Color } from '../../styles/Color';
+import { useMultiProvider } from '../chains/hooks';
+import { getChainDisplayName } from '../chains/utils';
+import { DeploymentStatusIcon } from './DeploymentStatusIcon';
 import { DeploymentContext } from './types';
 
 export function DeploymentsDetailsModal({
@@ -12,45 +17,70 @@ export function DeploymentsDetailsModal({
   onClose: () => void;
   deployment: DeploymentContext;
 }) {
-  const { status, timestamp } = deployment || {};
+  const { id, status, timestamp, config, result } = deployment || {};
+  const { chains, type } = config;
 
-  const date = useMemo(
-    () => (timestamp ? formatTimestamp(timestamp) : formatTimestamp(new Date().getTime())),
-    [timestamp],
-  );
+  const multiProvider = useMultiProvider();
+  const chainNames = chains.map((c) => getChainDisplayName(multiProvider, c)).join(', ');
 
   return (
-    <Modal isOpen={isOpen} close={onClose} panelClassname="p-4 md:p-5 max-w-sm">
-      {status}
-      {date}
+    <Modal isOpen={isOpen} close={onClose} panelClassname="p-4 md:p-5 max-w-[30rem] space-y-3">
+      <div className="flex items-center justify-between">
+        <h2 className="text-lg text-primary-500">{`Deployment #${id}`}</h2>
+        <DeploymentStatusIcon status={status} size={22} />
+      </div>
+      <div className="grid grid-cols-2 gap-2.5">
+        <DeploymentProperty name="Type" value={toTitleCase(type)} />
+        <DeploymentProperty name="Status" value={toTitleCase(status)} />
+        <DeploymentProperty name="Date Created" value={new Date(timestamp).toLocaleDateString()} />
+        <DeploymentProperty name="Time Created" value={new Date(timestamp).toLocaleTimeString()} />
+        <DeploymentProperty name="Chains" value={chainNames} />
+      </div>
+      <CollapsibleData data={config.config} label="Deployment Config" />
+      {result && <CollapsibleData data={result} label="Deployment Result" />}
     </Modal>
   );
 }
+function DeploymentProperty({ name, value }: { name: string; value: string }) {
+  return (
+    <div>
+      <label className="text-sm text-gray-600">{name}</label>
+      <div className="truncate text-md">{value}</div>
+    </div>
+  );
+}
 
-// TODO remove?
-// function DeploymentProperty({
-//   name,
-//   value,
-//   url,
-// }: {
-//   name: string;
-//   value: string;
-//   url?: string;
-// }) {
-//   return (
-//     <div>
-//       <div className="flex items-center justify-between">
-//         <label className="text-sm leading-normal tracking-wider text-gray-350">{name}</label>
-//         <div className="flex items-center space-x-2">
-//           {url && (
-//             <a href={url} target="_blank" rel="noopener noreferrer">
-//               <Image src={LinkIcon} width={14} height={14} alt="" />
-//             </a>
-//           )}
-//           <CopyButton copyValue={value} width={14} height={14} className="opacity-40" />
-//         </div>
-//       </div>
-//       <div className="mt-1 truncate text-sm leading-normal tracking-wider">{value}</div>
-//     </div>
-//   );
-// }
+function CollapsibleData({ data, label }: { data: any; label: string }) {
+  const yamlConfig = stringify(data, { indent: 2 });
+
+  return (
+    <Disclosure as="div">
+      {({ open }) => (
+        <>
+          <DisclosureButton className="data-[open] flex items-center gap-2 text-sm text-gray-600">
+            <span>{label}</span>
+            <ChevronIcon
+              width={11}
+              height={7}
+              direction={open ? 'n' : 's'}
+              color={Color.gray['600']}
+              className="pt-px"
+            />
+          </DisclosureButton>
+          <DisclosurePanel
+            transition
+            className="relative mt-1 overflow-x-auto rounded-md bg-primary-500/5 px-1.5 py-1 text-xs transition duration-200 data-[closed]:-translate-y-4 data-[closed]:opacity-0"
+          >
+            <pre>{yamlConfig}</pre>
+            <CopyButton
+              copyValue={yamlConfig}
+              width={14}
+              height={14}
+              className="absolute right-2 top-2 opacity-60"
+            />
+          </DisclosurePanel>
+        </>
+      )}
+    </Disclosure>
+  );
+}

src/features/deployment/DeploymentStatusIcon.tsx

@@ -0,0 +1,22 @@
+import { ErrorIcon, SpinnerIcon } from '@hyperlane-xyz/widgets';
+import { ConfirmedIcon } from '../../components/icons/ConfirmedIcon';
+import { LogsIcon } from '../../components/icons/LogsIcon';
+import { StopIcon } from '../../components/icons/StopIcon';
+import { Color } from '../../styles/Color';
+import { DeploymentStatus } from './types';
+
+export function DeploymentStatusIcon({ status, size }: { status: DeploymentStatus; size: number }) {
+  switch (status) {
+    case DeploymentStatus.Configured:
+      return <LogsIcon width={size - 3} height={size - 3} color={Color.primary['500']} />;
+    case DeploymentStatus.Deploying:
+      return <SpinnerIcon width={size} height={size} />;
+    case DeploymentStatus.Complete:
+      return <ConfirmedIcon width={size} height={size} color={Color.primary['500']} />;
+    case DeploymentStatus.Cancelled:
+      return <StopIcon width={size - 2} height={size - 2} color={Color.red['500']} />;
+    case DeploymentStatus.Failed:
+    default:
+      return <ErrorIcon width={size} height={size} color={Color.red['500']} />;
+  }
+}

src/features/deployment/hooks.ts

@@ -21,9 +21,13 @@ export function useCoreDeploymentConfig() {
 }
 
 export function useDeploymentHistory() {
-  return useStore((s) => ({
+  const state = useStore((s) => ({
     deployments: s.deployments,
     addDeployment: s.addDeployment,
     updateDeploymentStatus: s.updateDeploymentStatus,
   }));
+  return {
+    ...state,
+    currentIndex: state.deployments.length - 1,
+  };
 }

src/features/deployment/types.ts

@@ -21,9 +21,9 @@ export const FinalDeploymentStatuses = [
 ];
 
 export interface DeploymentContext {
+  id: number;
   timestamp: number;
   status: DeploymentStatus;
-  type: DeploymentType;
   config: DeploymentConfig;
   result?: DeploymentResult;
 }

src/features/deployment/utils.ts

@@ -1,26 +1,7 @@
-import { ErrorIcon, tryClipboardSet } from '@hyperlane-xyz/widgets';
-import { FC } from 'react';
+import { tryClipboardSet } from '@hyperlane-xyz/widgets';
 import { toast } from 'react-toastify';
 import { stringify } from 'yaml';
-import { ConfirmedIcon } from '../../components/icons/ConfirmedIcon';
-import { LogsIcon } from '../../components/icons/LogsIcon';
-import { StopIcon } from '../../components/icons/StopIcon';
-import { DeploymentConfig, DeploymentStatus } from './types';
-
-export function getIconByDeploymentStatus(status: DeploymentStatus): FC<any> {
-  switch (status) {
-    case DeploymentStatus.Configured:
-      return LogsIcon;
-    case DeploymentStatus.Complete:
-      return ConfirmedIcon;
-    case DeploymentStatus.Failed:
-      return ErrorIcon;
-    case DeploymentStatus.Cancelled:
-      return StopIcon;
-    default:
-      return ErrorIcon;
-  }
-}
+import { DeploymentConfig } from './types';
 
 export async function tryCopyConfig(deploymentConfig: DeploymentConfig | undefined) {
   if (!deploymentConfig) return;

src/features/deployment/warp/WarpDeploymentDeploy.tsx

@@ -15,7 +15,8 @@ import { useMultiProvider } from '../../chains/hooks';
 import { getChainDisplayName } from '../../chains/utils';
 import { useFundDeployerAccount } from '../../deployerWallet/fund';
 import { getDeployerAddressForProtocol, useTempDeployerWallets } from '../../deployerWallet/hooks';
-import { useWarpDeploymentConfig } from '../hooks';
+import { useDeploymentHistory, useWarpDeploymentConfig } from '../hooks';
+import { DeploymentStatus } from '../types';
 
 enum DeployStep {
   FundDeployer,
@@ -181,10 +182,12 @@ function ExecuteDeploy() {
 }
 
 function ButtonSection() {
+  const { updateDeploymentStatus, currentIndex } = useDeploymentHistory();
   const { setPage } = useCardNav();
   const onClickCancel = () => {
     // TODO cancel in SDK if possible?
     toast.warn('Deployment cancelled');
+    updateDeploymentStatus(currentIndex, DeploymentStatus.Cancelled);
     setPage(CardPage.WarpForm);
   };
 

src/features/deployment/warp/WarpDeploymentReview.tsx

@@ -21,7 +21,7 @@ import { isSyntheticTokenType } from './utils';
 
 // TODO move to widgets lib
 import InfoCircle from '../../../images/icons/info-circle.svg';
-import { DeploymentStatus, DeploymentType } from '../types';
+import { DeploymentStatus } from '../types';
 import { tryCopyConfig } from '../utils';
 
 export function WarpDeploymentReview() {
@@ -196,9 +196,7 @@ function ButtonSection() {
       return;
     }
     addDeployment({
-      timestamp: Date.now(),
       status: DeploymentStatus.Configured,
-      type: DeploymentType.Warp,
       config: deploymentConfig,
     });
     setPage(CardPage.WarpDeploy);

src/features/store.ts

@@ -42,9 +42,9 @@ export interface AppState {
 
   // User history
   deployments: DeploymentContext[];
-  addDeployment: (t: DeploymentContext) => void;
+  addDeployment: (t: Omit<DeploymentContext, 'id' | 'timestamp'>) => void;
   updateDeploymentStatus: (i: number, s: DeploymentStatus) => void;
-  failUnconfirmedDeployments: () => void;
+  cancelPendingDeployments: () => void;
 
   // Shared component state
   cardPage: CardPage;
@@ -104,7 +104,9 @@ export const useStore = create<AppState>()(
       // User history
       deployments: [],
       addDeployment: (t) => {
-        set((state) => ({ deployments: [...state.deployments, t] }));
+        const currentDeployments = get().deployments;
+        const newDeployment = { ...t, id: currentDeployments.length + 1, timestamp: Date.now() };
+        set({ deployments: [...currentDeployments, newDeployment] });
       },
       updateDeploymentStatus: (i, s) => {
         set((state) => {
@@ -116,12 +118,12 @@ export const useStore = create<AppState>()(
           };
         });
       },
-      failUnconfirmedDeployments: () => {
+      cancelPendingDeployments: () => {
         set((state) => ({
           deployments: state.deployments.map((t) =>
             FinalDeploymentStatuses.includes(t.status)
               ? t
-              : { ...t, status: DeploymentStatus.Failed },
+              : { ...t, status: DeploymentStatus.Cancelled },
           ),
         }));
       },
@@ -162,7 +164,7 @@ export const useStore = create<AppState>()(
       onRehydrateStorage: () => {
         logger.debug('Rehydrating state');
         return (state, error) => {
-          state?.failUnconfirmedDeployments();
+          state?.cancelPendingDeployments();
           if (error || !state) {
             logger.error('Error during hydration', error);
             return;