fix: valid address

Author: Jeday

features/create-vault/create-vault-form/stages/main-settings/create-vault-input/address-input-base.tsx

@@ -1,5 +1,5 @@
 import { forwardRef, useState } from 'react';
-import { Address, isAddress } from 'viem';
+import { Address } from 'viem';
 import {
   UseFormRegisterReturn,
   useFormContext,
@@ -11,6 +11,7 @@ import { AddressLinkEtherscan } from 'shared/components';
 import { AddressInputWrapper, EtherScanLink } from './styles';
 
 import { ReactComponent as ErrorTriangle } from 'assets/icons/error-triangle.svg';
+import { addressSchema } from 'utils/validate-form-value';
 
 type AddressInputProps = Omit<UseFormRegisterReturn, 'ref'> &
   React.ComponentProps<typeof Input>;
@@ -24,10 +25,12 @@ export const AddressInputBase = forwardRef<HTMLInputElement, AddressInputProps>(
 
     const { invalid, isDirty, isValidating, error } = getFieldState(name);
 
-    const value = useWatch<{ value: Address }>({ name });
+    const { data: value } = addressSchema.safeParse(
+      useWatch<{ value: Address }>({ name }),
+    );
 
     const decorator = (() => {
-      if (isAddress(value)) {
+      if (value) {
         if (invalid) return <ErrorTriangle />;
         if (invalid && isValidating) return <Loader size="small" />;
         if (!isDirty) return null;

features/create-vault/create-vault-form/validation.ts

@@ -1,7 +1,5 @@
-import { Address } from 'viem';
 import { z, ZodTypeAny } from 'zod';
 
-import { isValidAnyAddress } from 'utils/address-validation';
 import {
   MIN_FEE_VALUE,
   MAX_FEE_VALUE,
@@ -13,8 +11,7 @@ import {
 } from 'modules/vaults';
 
 import type { PermissionKeys } from 'features/create-vault/types';
-
-const INVALID_ADDRESS_MESSAGE = 'Invalid ethereum address';
+import { addressSchema } from 'utils/validate-form-value';
 
 const INVALID_NUMBER_MIN_MESSAGE = `Must be ${MIN_FEE_VALUE} or above`;
 const INVALID_NUMBER_MAX_MESSAGE = `Must be ${MAX_FEE_VALUE} or less`;
@@ -41,15 +38,6 @@ const validateBasisPoints = (value: number) =>
     Math.floor(value * VAULT_TOTAL_BASIS_POINTS) ===
   0;
 
-const validateAddress = (value: string | null) =>
-  !!(value && isValidAnyAddress(value));
-
-const addressSchema = z
-  .string()
-  .trim()
-  .refine(validateAddress, { message: INVALID_ADDRESS_MESSAGE })
-  .transform((value) => value.toLocaleLowerCase() as Address);
-
 const numberSchema = (zodPipe: ZodTypeAny) =>
   z.coerce
     .string(INVALID_NUMBER_DATA_OBJECT_MESSAGE)

shared/components/address-badge/address-badge.tsx

@@ -9,6 +9,7 @@ import {
 
 import { AddressPopover } from './address-popover';
 import { PillContainer, AddressText } from './styles';
+import { addressSchema } from 'utils/validate-form-value';
 
 export type AddressBadgeProps = {
   address?: string;
@@ -40,8 +41,7 @@ export const AddressBadge = forwardRef<HTMLDivElement, AddressBadgeProps>(
     const backupRef = useRef<HTMLDivElement>(null);
     const ref = forwardedRef || backupRef;
     const [isOpen, setIsOpen] = useState(false);
-
-    const address = props.address?.trim().toLowerCase();
+    const parsing = addressSchema.safeParse(props.address);
 
     const onClick = showPopover
       ? (event: MouseEvent) => {
@@ -65,9 +65,9 @@ export const AddressBadge = forwardRef<HTMLDivElement, AddressBadgeProps>(
       );
     }
 
-    if (!address) {
-      return null;
-    }
+    if (!parsing.success) return null;
+
+    const address = parsing.data;
 
     return (
       <>

utils/validate-form-value.ts

@@ -1,7 +1,10 @@
 import { z, ZodSchema } from 'zod';
+import { type Address, isAddress } from 'viem';
 import { appendErrors, FieldError, Resolver } from 'react-hook-form';
 import { isZodError } from 'utils/errors';
 
+const INVALID_ADDRESS_MESSAGE = 'Invalid ethereum address';
+
 export const parseZodErrorSchema = (
   zodErrors: z.ZodIssue[],
   validateAllFieldCriteria: boolean,
@@ -77,3 +80,11 @@ export const validateFormWithZod = <T extends ZodSchema>(
     }
   };
 };
+
+const validateAddress = (value: string | null) => !!(value && isAddress(value));
+
+export const addressSchema = z
+  .string()
+  .trim()
+  .refine(validateAddress, { message: INVALID_ADDRESS_MESSAGE })
+  .transform((value) => value.toLocaleLowerCase() as Address);