Modify lading copy

Memoize deploy callbacks

Author: jmrossy

src/components/text/A.tsx

@@ -5,3 +5,11 @@ type Props = PropsWithChildren<AnchorHTMLAttributes<HTMLAnchorElement>>;
 export function A(props: Props) {
   return <a target="_blank" rel="noopener noreferrer" {...props} />;
 }
+
+export function AUnderline(props: Props) {
+  return <A {...props} className={LinkStyles.underline} />;
+}
+
+export const LinkStyles = {
+  underline: 'underline underline-offset-2 cursor-pointer hover:text-primary-500',
+};

src/features/deployerWallet/refund.ts

@@ -19,7 +19,7 @@ import { getTransferTx, sendTxFromWallet } from './transactions';
 import { DeployerWallets } from './types';
 import { useDeployerWallets } from './wallets';
 
-export function useRefundDeployerAccounts(onSettled?: () => void) {
+export function useRefundDeployerAccounts() {
   const multiProvider = useMultiProvider();
   const { chains } = usePastDeploymentChains();
   const { wallets } = useDeployerWallets();
@@ -29,7 +29,6 @@ export function useRefundDeployerAccounts(onSettled?: () => void) {
     mutationKey: ['refundDeployerAccounts', chains, accounts],
     mutationFn: () => refundDeployerAccounts(chains, wallets, multiProvider, accounts),
     retry: false,
-    onSettled,
   });
 
   useToastError(

src/features/deployment/warp/TokenTypeSelectField.tsx

@@ -32,7 +32,7 @@ export const TokenTypeDescriptions: Record<TokenType, { label: string; descripti
   },
   [TokenType.fastSynthetic]: {
     label: 'Fast Synthetic',
-    description: 'A synthetic HypErc20 token to pair with a Fast Collateral token.',
+    description: 'A synthetic HypERC20 token to pair with a Fast Collateral token.',
   },
   [TokenType.native]: {
     label: 'Native',
@@ -44,11 +44,11 @@ export const TokenTypeDescriptions: Record<TokenType, { label: string; descripti
   },
   [TokenType.synthetic]: {
     label: 'Synthetic',
-    description: 'A synthetic HypErc20 token to pair with any collateralized type.',
+    description: 'A synthetic HypERC20 token to pair with any collateralized type.',
   },
   [TokenType.syntheticRebase]: {
     label: 'Synthetic Rebased',
-    description: 'A synthetic HypErc20 token to pair with a Collateral Rebased Vault.',
+    description: 'A synthetic HypERC20 token to pair with a Collateral Rebased Vault.',
   },
   [TokenType.syntheticUri]: {
     label: 'Synthetic NFT',

src/features/deployment/warp/WarpDeploymentDeploy.tsx

@@ -2,7 +2,7 @@ import { MultiProtocolProvider, WarpCoreConfig } from '@hyperlane-xyz/sdk';
 import { errorToString, sleep } from '@hyperlane-xyz/utils';
 import { Button, SpinnerIcon, useModal } from '@hyperlane-xyz/widgets';
 import clsx from 'clsx';
-import { useMemo, useState } from 'react';
+import { useCallback, useMemo, useState } from 'react';
 import { PlanetSpinner } from '../../../components/animation/PlanetSpinner';
 import { SlideIn } from '../../../components/animation/SlideIn';
 import { SolidButton } from '../../../components/buttons/SolidButton';
@@ -48,19 +48,25 @@ export function WarpDeploymentDeploy() {
 
   const { refundAsync } = useRefundDeployerAccounts();
 
-  const onFailure = (error: Error) => {
-    const errMsg = errorToString(error, 5000);
-    failDeployment(currentIndex, errMsg);
-    refundAsync().finally(() => setPage(CardPage.WarpFailure));
-  };
+  const onFailure = useCallback(
+    (error: Error) => {
+      const errMsg = errorToString(error, 5000);
+      failDeployment(currentIndex, errMsg);
+      refundAsync().finally(() => setPage(CardPage.WarpFailure));
+    },
+    [currentIndex, failDeployment, refundAsync, setPage],
+  );
 
-  const onDeploymentSuccess = (config: WarpCoreConfig) => {
-    completeDeployment(currentIndex, {
-      type: DeploymentType.Warp,
-      result: config,
-    });
-    refundAsync().finally(() => setPage(CardPage.WarpSuccess));
-  };
+  const onDeploymentSuccess = useCallback(
+    (config: WarpCoreConfig) => {
+      completeDeployment(currentIndex, {
+        type: DeploymentType.Warp,
+        result: config,
+      });
+      refundAsync().finally(() => setPage(CardPage.WarpSuccess));
+    },
+    [currentIndex, completeDeployment, refundAsync, setPage],
+  );
 
   const {
     deploy,
@@ -69,12 +75,12 @@ export function WarpDeploymentDeploy() {
     cancel: cancelDeployment,
   } = useWarpDeployment(deploymentConfig, onDeploymentSuccess, onFailure);
 
-  const onDeployerFunded = () => {
+  const onDeployerFunded = useCallback(() => {
     setStep(DeployStep.ExecuteDeploy);
     if (isDeploymentIdle) deploy();
-  };
+  }, [isDeploymentIdle, deploy, setStep]);
 
-  const onCancel = async () => {
+  const onCancel = useCallback(async () => {
     if (isDeploymentPending) cancelDeployment();
     updateDeploymentStatus(currentIndex, DeploymentStatus.Cancelled);
     setStep(DeployStep.CancelDeploy);
@@ -86,7 +92,14 @@ export function WarpDeploymentDeploy() {
     await sleep(CANCEL_SLEEP_DELAY);
 
     refundAsync().finally(() => setPage(CardPage.WarpForm));
-  };
+  }, [
+    isDeploymentPending,
+    currentIndex,
+    cancelDeployment,
+    refundAsync,
+    setPage,
+    updateDeploymentStatus,
+  ]);
 
   if (!deploymentConfig) throw new Error('Deployment config is required');
 

src/features/deployment/warp/WarpDeploymentReview.tsx

@@ -5,7 +5,7 @@ import Image from 'next/image';
 import { toast } from 'react-toastify';
 import { BackButton } from '../../../components/buttons/BackButton';
 import { SolidButton } from '../../../components/buttons/SolidButton';
-import { A } from '../../../components/text/A';
+import { AUnderline, LinkStyles } from '../../../components/text/A';
 import { H1 } from '../../../components/text/Headers';
 import { links } from '../../../consts/links';
 import { CardPage } from '../../../flows/CardPage';
@@ -165,17 +165,11 @@ function InfoSection() {
       <Image src={InfoCircle} width={16} alt="" />
       <p className="text-xs">
         To use more advanced settings, such as a custom{' '}
-        <A className={styles.infoBtn} href={links.ismDocs}>
-          Interchain Security Module
-        </A>{' '}
-        (ISM), you can{' '}
-        <button onClick={onClickCopy} className={styles.infoBtn}>
+        <AUnderline href={links.ismDocs}>Interchain Security Module</AUnderline> (ISM), you can{' '}
+        <button onClick={onClickCopy} className={LinkStyles.underline}>
           copy this config
         </button>{' '}
-        and use the{' '}
-        <A className={styles.infoBtn} href={links.cliDocs}>
-          Hyperlane CLI.
-        </A>
+        and use the <AUnderline href={links.cliDocs}>Hyperlane CLI.</AUnderline>
       </p>
     </div>
   );
@@ -226,7 +220,3 @@ function ButtonSection() {
     </div>
   );
 }
-
-const styles = {
-  infoBtn: 'underline underline-offset-2 cursor-pointer hover:text-primary-500',
-};

src/flows/LandingCard.tsx

@@ -1,5 +1,6 @@
 import Image from 'next/image';
 import { SolidButton } from '../components/buttons/SolidButton';
+import { AUnderline } from '../components/text/A';
 import { links } from '../consts/links';
 import BlueWave from '../images/illustrations/blue-wave.svg';
 import SpaceCraft from '../images/illustrations/spacecraft.webp';
@@ -10,7 +11,7 @@ export function LandingPage() {
   const { setPage } = useCardNav();
 
   return (
-    <div className="max-w-full space-y-6 p-4 text-center">
+    <div className="max-w-full space-y-5 p-4 text-center">
       <div className="relative -mx-8 flex items-center justify-center">
         <Image src={BlueWave} alt="" className="absolute left-0 right-0 top-[0.4rem] rotate-6" />
         <Image width={110} height={110} src={SpaceCraft} alt="" className="z-[5] -rotate-[16deg]" />
@@ -24,6 +25,10 @@ export function LandingPage() {
         Follow three steps to create a new route: configure your options, deploy your contracts, and
         set up a bridge UI.
       </p>
+      <p className="max-w-md px-2 text-sm leading-relaxed">
+        To use more advanced settings, use the{' '}
+        <AUnderline href={links.cliDocs}>Hyperlane CLI.</AUnderline>
+      </p>
       <div className="flex justify-center gap-12 pt-1">
         <a
           href={links.warpDocs}