Create warp deploy card

Add icons for gas pump and stop

src/components/icons/GasIcon.tsx

@@ -0,0 +1,24 @@
+import { DefaultIconProps } from '@hyperlane-xyz/widgets';
+import { memo } from 'react';
+import { Color } from '../../styles/Color';
+
+// TODO move to widgets lib
+function _GasIcon({ color, ...rest }: DefaultIconProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 50 50" {...rest}>
+      <g clipPath="url(#a)">
+        <path
+          fill={color || Color.black}
+          d="M3.1 6.3A6.3 6.3 0 0 1 9.4 0H28a6.2 6.2 0 0 1 6.3 6.3v25a6.2 6.2 0 0 1 6.2 6.2v1.6a1.6 1.6 0 0 0 3.1 0V25h-1.5a1.6 1.6 0 0 1-1.6-1.6v-9.7a1.6 1.6 0 0 1 1.6-1.6h4.7a10 10 0 0 0-.7-3.8A3 3 0 0 0 45 6.9a5 5 0 0 0-2.8-.7 1.6 1.6 0 0 1 0-3c1.8 0 3.2.3 4.4 1 1.2.7 2 1.7 2.5 2.8.9 2 .9 4.6.9 6.5v10a1.6 1.6 0 0 1-1.6 1.5H47v14a4.7 4.7 0 0 1-9.4 0v-1.5a3.1 3.1 0 0 0-3.1-3.1v12.5H36a1.6 1.6 0 0 1 0 3.1H1.6a1.6 1.6 0 1 1 0-3.1H3V6.3Zm7.8 0a1.6 1.6 0 0 0-1.5 1.5v15.6a1.6 1.6 0 0 0 1.5 1.6h15.7a1.6 1.6 0 0 0 1.5-1.6V7.8a1.6 1.6 0 0 0-1.5-1.5H10.9Z"
+        />
+      </g>
+      <defs>
+        <clipPath id="a">
+          <path fill="#fff" d="M0 0h50v50H0z" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
+
+export const GasIcon = memo(_GasIcon);

src/components/icons/StopIcon.tsx

@@ -0,0 +1,24 @@
+import { DefaultIconProps } from '@hyperlane-xyz/widgets';
+import { memo } from 'react';
+import { Color } from '../../styles/Color';
+
+// TODO move to widgets lib
+function _StopIcon({ color, ...rest }: DefaultIconProps) {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 12 12" {...rest}>
+      <g clipPath="url(#a)">
+        <path
+          fill={color || Color.black}
+          d="M3.5 12 0 8.5v-5L3.5 0h5L12 3.5v5L8.5 12h-5Zm.6-3.2L6 7l1.9 2 1-1-2-1.9 2-1.9-1-1-1.9 2-1.9-2-1 1 2 1.9-2 1.9 1 1Zm0 1.9h3.8l2.8-2.8V4.1L7.9 1.3H4.1L1.3 4.1v3.8l2.8 2.8Z"
+        />
+      </g>
+      <defs>
+        <clipPath id="a">
+          <path fill="#fff" d="M0 0h12v12H0z" />
+        </clipPath>
+      </defs>
+    </svg>
+  );
+}
+
+export const StopIcon = memo(_StopIcon);

src/components/text/H1.tsx

@@ -1,3 +1,8 @@
-export function H1({ children }: { children: React.ReactNode }) {
-  return <h1 className="text-xl text-primary-500">{children}</h1>;
+import clsx from 'clsx';
+import { HTMLAttributes, PropsWithChildren } from 'react';
+
+type Props = PropsWithChildren<HTMLAttributes<HTMLHeadingElement>>;
+
+export function H1({ className, ...props }: Props) {
+  return <h1 className={clsx('text-xl text-primary-500', className)} {...props} />;
 }

src/features/deployment/warp/WarpDeploymentDeploy.tsx

@@ -0,0 +1,87 @@
+import { ArrowIcon, Button, WalletIcon } from '@hyperlane-xyz/widgets';
+import { useState } from 'react';
+import { toast } from 'react-toastify';
+import { SolidButton } from '../../../components/buttons/SolidButton';
+import { GasIcon } from '../../../components/icons/GasIcon';
+import { StopIcon } from '../../../components/icons/StopIcon';
+import { H1 } from '../../../components/text/H1';
+import { CardPage } from '../../../flows/CardPage';
+import { useCardNav } from '../../../flows/hooks';
+import { Color } from '../../../styles/Color';
+import { useWarpDeploymentConfig } from '../hooks';
+
+export function WarpDeploymentDeploy() {
+  return (
+    <div className="flex w-full flex-col items-center space-y-8 py-2 xs:min-w-100">
+      <HeaderSection />
+      <StatusSection />
+      <ButtonSection />
+    </div>
+  );
+}
+
+function HeaderSection() {
+  return <H1 className="text-center">Deploying Warp Route</H1>;
+}
+
+function StatusSection() {
+  const { deploymentConfig } = useWarpDeploymentConfig();
+  const _chains = deploymentConfig?.chains || [];
+
+  return (
+    <div className="space-y-3">
+      <FundAccounts />
+    </div>
+  );
+}
+
+function FundAccounts() {
+  const { deploymentConfig } = useWarpDeploymentConfig();
+  const chains = deploymentConfig?.chains || [];
+  const numChains = chains.length;
+
+  const [currentChainIndex, setCurrentChainIndex] = useState(0);
+  const currentChain = chains[currentChainIndex];
+
+  const onClickFund = () => {
+    // TODO create a temp deployer account and trigger a
+    if (currentChainIndex < numChains - 1) {
+      setCurrentChainIndex(currentChainIndex + 1);
+    }
+  };
+
+  return (
+    <div className="flex flex-col items-center space-y-5">
+      <div className="flex items-center justify-center gap-3">
+        <WalletIcon width={40} height={40} color={Color.primary['500']} />
+        <ArrowIcon width={30} height={30} color={Color.primary['500']} direction="e" />
+        <GasIcon width={38} height={38} color={Color.primary['500']} />
+      </div>
+      <p className="max-w-sm text-center text-sm leading-relaxed">
+        To deploy your route, a temporary account must be funded for each chain. Unused amounts are
+        refunded.
+      </p>
+      <SolidButton
+        color="accent"
+        className="px-3 py-1.5 text-sm"
+        onClick={onClickFund}
+      >{`Fund on ${currentChain} (Chain ${currentChainIndex + 1} / ${numChains})`}</SolidButton>
+    </div>
+  );
+}
+
+function ButtonSection() {
+  const { setPage } = useCardNav();
+  const onClickCancel = () => {
+    // TODO cancel in SDK if possible?
+    toast.warn('Deployment cancelled');
+    setPage(CardPage.WarpReview);
+  };
+
+  return (
+    <Button onClick={onClickCancel} className="gap-2.5">
+      <StopIcon width={16} height={16} color={Color.accent['500']} />
+      <span className="text-md text-accent-500">Cancel deployment</span>
+    </Button>
+  );
+}

src/flows/CardFlow.tsx

@@ -1,4 +1,5 @@
 import { AnimatePresence, motion } from 'framer-motion';
+import { WarpDeploymentDeploy } from '../features/deployment/warp/WarpDeploymentDeploy';
 import { WarpDeploymentForm } from '../features/deployment/warp/WarpDeploymentForm';
 import { WarpDeploymentReview } from '../features/deployment/warp/WarpDeploymentReview';
 import { CardPage } from './CardPage';
@@ -25,6 +26,7 @@ export function CardFlow() {
         {page === CardPage.Landing && <LandingPage />}
         {page === CardPage.WarpForm && <WarpDeploymentForm />}
         {page === CardPage.WarpReview && <WarpDeploymentReview />}
+        {page === CardPage.WarpDeploy && <WarpDeploymentDeploy />}
       </motion.div>
       ;
     </AnimatePresence>

src/flows/LandingCard.tsx

@@ -10,17 +10,17 @@ export function LandingPage() {
   const { setPage } = useCardNav();
 
   return (
-    <div className="max-w-full space-y-6 p-4 text-center sm:max-w-screen-xs">
+    <div className="max-w-full space-y-6 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.5rem] rotate-6" />
+        <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]" />
       </div>
       <h1 className="text-2xl text-primary-500">Deploy a Warp Route</h1>
-      <h2 className="px-2 text-md leading-relaxed">
+      <h2 className="max-w-md px-2 text-md leading-relaxed">
         Anyone can permissionlessly create an interchain token bridge by deploying Hyperlane Warp
         Route contracts.
       </h2>
-      <p className="px-2 text-sm leading-relaxed">
+      <p className="max-w-md px-2 text-sm leading-relaxed">
         Follow three steps to create a new route: configure your options, deploy your contracts, and
         set up a bridge UI.
       </p>