feat: Improve UX of token list modal (#330)

- Autofocus text input field
- Make appearance more consistent with chain picker
- Hide disabled tokens by default

src/components/input/TextField.tsx

@@ -1,29 +1,33 @@
+import clsx from 'clsx';
 import { Field, FieldAttributes } from 'formik';
-import { ChangeEvent, InputHTMLAttributes } from 'react';
+import { ChangeEvent, InputHTMLAttributes, Ref, forwardRef } from 'react';
 
-export function TextField({ classes, ...props }: FieldAttributes<{ classes: string }>) {
-  return <Field className={`${defaultInputClasses} ${classes}`} {...props} />;
+export function TextField({ className, ...props }: FieldAttributes<unknown>) {
+  return <Field className={clsx(defaultClassName, className)} {...props} />;
 }
 
 type InputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'onChange'> & {
   onChange: (v: string) => void;
-  classes?: string;
 };
 
-export function TextInput({ onChange, classes, ...props }: InputProps) {
+export const TextInput = forwardRef(function _TextInput(
+  { onChange, className, ...props }: InputProps,
+  ref: Ref<HTMLInputElement>,
+) {
   const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
     onChange(e?.target?.value || '');
   };
   return (
     <input
+      ref={ref}
       type="text"
       autoComplete="off"
       onChange={handleChange}
-      className={`${defaultInputClasses} ${classes}`}
+      className={clsx(defaultClassName, className)}
       {...props}
     />
   );
-}
+});
 
-const defaultInputClasses =
+const defaultClassName =
   'mt-1.5 px-2.5 py-2.5 text-sm rounded-lg border border-primary-300 focus:border-primary-500 disabled:bg-gray-150 outline-none transition-all duration-300';

src/consts/config.ts

@@ -35,7 +35,7 @@ export const config: Config = Object.freeze({
   isDevMode,
   registryUrl,
   registryProxyUrl,
-  showDisabledTokens: true,
+  showDisabledTokens: false,
   showTipBox: true,
   version,
   transferBlacklist,

src/features/tokens/SelectOrInputTokenIds.tsx

@@ -34,7 +34,7 @@ function InputTokenId({ disabled }: { disabled: boolean; tokenIndex?: number })
       <TextField
         name="amount"
         placeholder="Input Token Id"
-        classes="w-full"
+        className="w-full"
         type="number"
         step="any"
         disabled={disabled}

src/features/tokens/TokenListModal.tsx

@@ -1,7 +1,7 @@
 import { IToken } from '@hyperlane-xyz/sdk';
-import { Modal } from '@hyperlane-xyz/widgets';
+import { Modal, SearchIcon } from '@hyperlane-xyz/widgets';
 import Image from 'next/image';
-import { useMemo, useState } from 'react';
+import { useEffect, useMemo, useRef, useState } from 'react';
 import { TokenIcon } from '../../components/icons/TokenIcon';
 import { TextInput } from '../../components/input/TextField';
 import { config } from '../../consts/config';
@@ -38,19 +38,10 @@ export function TokenListModal({
   return (
     <Modal
       isOpen={isOpen}
-      title="Select Token"
       close={onClose}
-      panelClassname="p-4 max-w-100 sm:max-w-[31rem] min-h-[24rem]"
-      showCloseButton
+      panelClassname="px-4 py-3 max-w-100 sm:max-w-[31rem] min-h-[24rem]"
     >
-      <TextInput
-        value={search}
-        onChange={setSearch}
-        placeholder="Name, symbol, or address"
-        name="token-search"
-        classes="mt-3 mb-4 sm:py-2.5 w-full"
-        autoComplete="off"
-      />
+      <SearchBar search={search} setSearch={setSearch} />
       <TokenList
         origin={origin}
         destination={destination}
@@ -61,6 +52,32 @@ export function TokenListModal({
   );
 }
 
+function SearchBar({ search, setSearch }: { search: string; setSearch: (s: string) => void }) {
+  const inputRef = useRef<HTMLInputElement>(null);
+  useEffect(() => {
+    inputRef.current?.focus();
+  }, []);
+
+  return (
+    <div className="relative">
+      <SearchIcon
+        width={20}
+        height={20}
+        className="absolute left-3 top-1/2 -translate-y-1/2 pb-1 opacity-50"
+      />
+      <TextInput
+        ref={inputRef}
+        value={search}
+        onChange={setSearch}
+        placeholder="Token name, symbol, or address"
+        name="token-search"
+        className="mb-4 mt-3 w-full pl-10 all:border-gray-200 all:py-3 all:focus:border-gray-400"
+        autoComplete="off"
+      />
+    </div>
+  );
+}
+
 export function TokenList({
   origin,
   destination,

src/features/transfer/TransferTokenForm.tsx

@@ -183,7 +183,7 @@ function AmountSection({ isNft, isReview }: { isNft: boolean; isReview: boolean
           <TextField
             name="amount"
             placeholder="0.00"
-            classes="w-full"
+            className="w-full"
             type="number"
             step="any"
             disabled={isReview}
@@ -212,7 +212,7 @@ function RecipientSection({ isReview }: { isReview: boolean }) {
         <TextField
           name="recipient"
           placeholder="0x123456..."
-          classes="w-full"
+          className="w-full"
           disabled={isReview}
         />
         <SelfButton disabled={isReview} />