chore: components dedup

src/components/banner/WarningBanner.tsx

@@ -1,6 +1,5 @@
-import Image from 'next/image';
+import { WarningIcon } from '@hyperlane-xyz/widgets';
 import { PropsWithChildren, ReactNode } from 'react';
-import WarningIcon from '../../images/icons/warning.svg';
 
 export function WarningBanner({
   isVisible,
@@ -21,7 +20,7 @@ export function WarningBanner({
       } overflow-hidden transition-all duration-500 ${className}`}
     >
       <div className="flex items-center gap-2">
-        <Image src={WarningIcon} width={20} height={20} alt="Warning:" />
+        <WarningIcon width={20} height={20} />
         {children}
       </div>
       <button

src/components/buttons/CopyButton.tsx

@@ -1,6 +1,6 @@
+import { CheckmarkIcon } from '@hyperlane-xyz/widgets';
 import Image from 'next/image';
 import { useState } from 'react';
-import CheckmarkIcon from '../../images/icons/checkmark.svg';
 import CopyIcon from '../../images/icons/copy-stack.svg';
 import { tryClipboardSet } from '../../utils/clipboard';
 
@@ -32,7 +32,7 @@ export function CopyButton({ width, height, copyValue, classes }: Props) {
       } hover:opacity-70 active:opacity-90 ${classes}`}
     >
       {showCheckmark ? (
-        <Image src={CheckmarkIcon} width={width} height={height} alt="" />
+        <CheckmarkIcon width={width} height={height} />
       ) : (
         <Image src={CopyIcon} width={width} height={height} alt="" />
       )}

src/consts/warpRoutes.yaml

@@ -2,5 +2,23 @@
 # These configs will be merged with the warp routes in the configured registry
 # The input here is typically the output of the Hyperlane CLI warp deploy command
 ---
-tokens: []
+tokens:
+  - addressOrDenom: '0x78fe869f19f917fde4192c51c446Fbd3721788ee'
+    chainName: alfajores
+    connections:
+      - token: ethereum|sepolia|0xeDF994D49F865D3a4bd6F74AeFbe1DcCAE7204F2
+    decimals: 18
+    logoURI: /deployments/warp_routes/ETH/logo.svg
+    name: Ether
+    standard: EvmHypSynthetic
+    symbol: ETH
+  - addressOrDenom: '0xeDF994D49F865D3a4bd6F74AeFbe1DcCAE7204F2'
+    chainName: sepolia
+    connections:
+      - token: ethereum|alfajores|0x78fe869f19f917fde4192c51c446Fbd3721788ee
+    decimals: 18
+    logoURI: /deployments/warp_routes/ETH/logo.svg
+    name: Ether
+    standard: EvmHypNative
+    symbol: ETH
 options: {}

src/features/WarpContextInitGate.tsx

@@ -1,5 +1,5 @@
+import { ColorPalette, SpinnerIcon } from '@hyperlane-xyz/widgets';
 import { PropsWithChildren, useState } from 'react';
-import { Spinner } from '../components/animation/Spinner';
 import { useTimeout } from '../utils/timeout';
 import { useReadyMultiProvider } from './chains/hooks';
 
@@ -21,7 +21,7 @@ export function WarpContextInitGate({ children }: PropsWithChildren<unknown>) {
     } else {
       return (
         <div className="flex h-screen items-center justify-center bg-primary-500">
-          <Spinner classes="opacity-50" white />
+          <SpinnerIcon width={80} height={80} color={ColorPalette.White} className="opacity-50" />
         </div>
       );
     }

src/features/chains/ChainSelectField.tsx

@@ -1,8 +1,7 @@
+import { ChevronIcon } from '@hyperlane-xyz/widgets';
 import { useField, useFormikContext } from 'formik';
-import Image from 'next/image';
 import { useState } from 'react';
 import { ChainLogo } from '../../components/icons/ChainLogo';
-import ChevronIcon from '../../images/icons/chevron-down.svg';
 import { TransferFormValues } from '../transfer/types';
 import { ChainSelectListModal } from './ChainSelectModal';
 import { useChainDisplayName } from './hooks';
@@ -55,7 +54,7 @@ export function ChainSelectField({ name, label, chains, onChange, disabled }: Pr
             {displayName}
           </div>
         </div>
-        <Image src={ChevronIcon} width={12} height={8} alt="" />
+        <ChevronIcon width={12} height={8} direction="s" />
       </button>
       <ChainSelectListModal
         isOpen={isModalOpen}

src/features/chains/ChainSelectModal.tsx

@@ -1,6 +1,6 @@
+import { Modal } from '@hyperlane-xyz/widgets';
 import { useMemo } from 'react';
 import { ChainLogo } from '../../components/icons/ChainLogo';
-import { Modal } from '../../components/layout/Modal';
 import { useMultiProvider } from './hooks';
 import { getChainDisplayName } from './utils';
 
@@ -27,7 +27,13 @@ export function ChainSelectListModal({
   };
 
   return (
-    <Modal isOpen={isOpen} title="Select Chain" close={close}>
+    <Modal
+      isOpen={isOpen}
+      close={close}
+      title="Select Chain"
+      panelClassname="p-4 max-w-xs"
+      showCloseButton
+    >
       <div className="mt-2 flex flex-col space-y-1">
         {sortedChains.map((c) => (
           <button

src/features/tokens/SelectTokenIdField.tsx

@@ -1,9 +1,6 @@
+import { ChevronIcon, Modal, SpinnerIcon } from '@hyperlane-xyz/widgets';
 import { useField } from 'formik';
-import Image from 'next/image';
 import { useState } from 'react';
-import { Spinner } from '../../components/animation/Spinner';
-import { Modal } from '../../components/layout/Modal';
-import ChevronIcon from '../../images/icons/chevron-down.svg';
 
 type Props = {
   name: string;
@@ -36,7 +33,7 @@ export function SelectTokenIdField({ name, disabled }: Props) {
             {tokenId ? tokenId : 'Select Token Id'}
           </span>
         </div>
-        <Image src={ChevronIcon} width={12} height={8} alt="" />
+        <ChevronIcon width={12} height={8} direction="s" />
       </button>
       <SelectTokenIdModal
         isOpen={isModalOpen}
@@ -70,11 +67,17 @@ export function SelectTokenIdModal({
   };
 
   return (
-    <Modal isOpen={isOpen} title="Select Token Id" close={close}>
+    <Modal
+      isOpen={isOpen}
+      title="Select Token Id"
+      close={close}
+      showCloseButton
+      panelClassname="p-4"
+    >
       <div className="mt-2 flex flex-col space-y-1">
         {isLoading ? (
           <div className="my-24 flex flex-col items-center">
-            <Spinner />
+            <SpinnerIcon width={80} height={80} />
             <h3 className="mt-5 text-sm text-gray-500">Finding token IDs</h3>
           </div>
         ) : tokenIds && tokenIds.length !== 0 ? (

src/features/tokens/TokenListModal.tsx

@@ -1,9 +1,9 @@
 import { IToken } from '@hyperlane-xyz/sdk';
+import { Modal } from '@hyperlane-xyz/widgets';
 import Image from 'next/image';
 import { useMemo, useState } from 'react';
 import { TokenIcon } from '../../components/icons/TokenIcon';
 import { TextInput } from '../../components/input/TextField';
-import { Modal } from '../../components/layout/Modal';
 import { config } from '../../consts/config';
 import InfoIcon from '../../images/icons/info-circle.svg';
 import { useMultiProvider } from '../chains/hooks';
@@ -40,7 +40,8 @@ export function TokenListModal({
       isOpen={isOpen}
       title="Select Token"
       close={onClose}
-      width="max-w-100 sm:max-w-[31rem] min-h-[24rem]"
+      panelClassname="p-4 max-w-100 sm:max-w-[31rem] min-h-[24rem]"
+      showCloseButton
     >
       <TextInput
         value={search}