Wire up chain selector

hyperlane-xyz · Dec 6, 2024 · a51a21a · a51a21a
1 parent cd8224c
commit a51a21a
Show file tree

Hide file tree

Showing 5 changed files with 57 additions and 57 deletions.
diff --git a/src/components/buttons/FormButton.tsx b/src/components/buttons/FormButton.tsx
@@ -0,0 +1,15 @@
+import { Button } from '@hyperlane-xyz/widgets';
+import clsx from 'clsx';
+import { ComponentProps } from 'react';
+
+export function FormButton({ className, ...props }: ComponentProps<typeof Button>) {
+  return (
+    <Button
+      className={clsx(
+        'flex items-center justify-between rounded-lg border border-primary-300 px-2 py-1.5 text-sm',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
diff --git a/src/features/chains/ChainSelectField.tsx b/src/features/chains/ChainSelectField.tsx
@@ -1,67 +1,34 @@
-import { ChainSearchMenuProps, ChevronIcon } from '@hyperlane-xyz/widgets';
-import { useField } from 'formik';
-import { useState } from 'react';
+import { ChevronIcon, useModal } from '@hyperlane-xyz/widgets';
+import { FormButton } from '../../components/buttons/FormButton';
 import { ChainLogo } from '../../components/icons/ChainLogo';
 import { ChainSelectListModal } from './ChainSelectModal';
 import { useChainDisplayName } from './hooks';
 
 type Props = {
-  name: string;
-  label: string;
-  onChange?: (id: ChainName) => void;
-  disabled?: boolean;
-  customListItemField?: ChainSearchMenuProps['customListItemField'];
+  value: ChainName;
+  onChange: (chain: ChainName) => void;
 };
 
-export function ChainSelectField({ name, label, onChange, disabled, customListItemField }: Props) {
-  const [field, , helpers] = useField<ChainName>(name);
+export function ChainSelectField({ value, onChange }: Props) {
+  const displayName = useChainDisplayName(value, true);
 
-  const displayName = useChainDisplayName(field.value, true);
-
-  const handleChange = (chainName: ChainName) => {
-    helpers.setValue(chainName);
-    if (onChange) onChange(chainName);
-  };
-
-  const [isModalOpen, setIsModalOpen] = useState(false);
-
-  const onClick = () => {
-    if (!disabled) setIsModalOpen(true);
-  };
+  const { isOpen, close, open } = useModal();
 
   return (
-    <div className="flex-[4]">
-      <button
-        type="button"
-        name={field.name}
-        className={`${styles.base} ${disabled ? styles.disabled : styles.enabled}`}
-        onClick={onClick}
-      >
+    <div>
+      <FormButton onClick={open}>
         <div className="flex items-center gap-3">
           <div className="max-w-[1.4rem] sm:max-w-fit">
-            <ChainLogo chainName={field.value} size={32} />
+            <ChainLogo chainName={value} size={32} />
           </div>
-          <div className="flex flex-col items-start gap-1">
-            <label htmlFor={name} className="text-xs text-gray-600">
-              {label}
-            </label>
+          <div className="gap- flex flex-col items-start">
+            <label className="text-xs text-gray-600">Chain</label>
             {displayName}
           </div>
         </div>
         <ChevronIcon width={12} height={8} direction="s" />
-      </button>
-      <ChainSelectListModal
-        isOpen={isModalOpen}
-        close={() => setIsModalOpen(false)}
-        onSelect={handleChange}
-        customListItemField={customListItemField}
-      />
+      </FormButton>
+      <ChainSelectListModal isOpen={isOpen} close={close} onSelect={onChange} />
     </div>
   );
 }
-
-const styles = {
-  base: 'px-2 py-1.5 w-full flex items-center justify-between text-sm bg-white rounded-lg border border-primary-300 outline-none transition-colors duration-500',
-  enabled: 'hover:bg-gray-100 active:scale-95 focus:border-primary-500',
-  disabled: 'bg-gray-150 cursor-default',
-};
diff --git a/src/features/chains/ChainSelectModal.tsx b/src/features/chains/ChainSelectModal.tsx
@@ -6,13 +6,11 @@ export function ChainSelectListModal({
   isOpen,
   close,
   onSelect,
-  customListItemField,
   showChainDetails,
 }: {
   isOpen: boolean;
   close: () => void;
   onSelect: (chain: ChainName) => void;
-  customListItemField?: ChainSearchMenuProps['customListItemField'];
   showChainDetails?: ChainSearchMenuProps['showChainDetails'];
 }) {
   const { chainMetadata, chainMetadataOverrides, setChainMetadataOverrides } = useStore((s) => ({
@@ -33,7 +31,6 @@ export function ChainSelectListModal({
         onClickChain={onSelectChain}
         overrideChainMetadata={chainMetadataOverrides}
         onChangeOverrideMetadata={setChainMetadataOverrides}
-        customListItemField={customListItemField}
         defaultSortField="custom"
         showChainDetails={showChainDetails}
       />

diff --git a/src/features/deployment/warp/TokenTypeSelectField.tsx b/src/features/deployment/warp/TokenTypeSelectField.tsx
@@ -1,5 +1,7 @@
 import { TokenType } from '@hyperlane-xyz/sdk';
+import { toTitleCase } from '@hyperlane-xyz/utils';
 import { Button, Modal, useModal } from '@hyperlane-xyz/widgets';
+import { FormButton } from '../../../components/buttons/FormButton';
 
 const TokenTypes = Object.values(TokenType);
 
@@ -12,7 +14,7 @@ export function TokenTypeSelectField({
   const { isOpen, close, open } = useModal();
 
   return (
-    <div className="mt-2 flex items-center justify-between gap-4">
+    <div>
       <TokenTypeButton value={value} onClick={open} />
       <Modal isOpen={isOpen} close={close} panelClassname="p-4 md:p-5 max-w-sm">
         {TokenTypes.map((t, i) => (
@@ -25,12 +27,12 @@ export function TokenTypeSelectField({
 
 function TokenTypeButton({ value, onClick }: { value: TokenType; onClick: () => void }) {
   return (
-    <Button onClick={onClick} className="flex items-center gap-2 px-4 py-2">
-      <label htmlFor="tokenIndex" className="block pl-0.5 text-sm text-gray-600">
+    <FormButton onClick={onClick} className="flex-col">
+      <label htmlFor="tokenIndex" className="text-xs text-gray-600">
         Token Type
       </label>
-      <div>{value}</div>
-    </Button>
+      <div>{toTitleCase(value)}</div>
+    </FormButton>
   );
 }
 

diff --git a/src/features/deployment/warp/WarpDeploymentForm.tsx b/src/features/deployment/warp/WarpDeploymentForm.tsx
@@ -86,10 +86,29 @@ function ConfigListSection() {
 }
 
 function ChainTokenConfig({ config, index }: { config: WarpDeploymentConfigEntry; index: number }) {
+  const { values, setValues } = useFormikContext<WarpDeploymentFormValues>();
+
+  const onChange = (update: Partial<WarpDeploymentConfigEntry>) => {
+    const allConfigs = [...values.configs];
+    const updatedConfig = { ...allConfigs[index], ...update };
+    allConfigs[index] = updatedConfig;
+    setValues({ configs: allConfigs });
+  };
+
   return (
     <div className="mt-2 flex items-center justify-between gap-4">
-      <ChainSelectField name={`chainName-${index}`} label="Chain" />
-      <TokenTypeSelectField value={config.tokenType} onChange={() => {}} />
+      <ChainSelectField
+        value={config.chainName}
+        onChange={(v) => {
+          onChange({ chainName: v });
+        }}
+      />
+      <TokenTypeSelectField
+        value={config.tokenType}
+        onChange={(v) => {
+          onChange({ tokenType: v });
+        }}
+      />
     </div>
   );
 }