Advanced filter: validate address input (#3295)

Author: isstuev

ui/advancedFilter/FilterByColumn.pw.tsx

@@ -22,8 +22,8 @@ const filters = {
   methods: [ '0xa9059cbb' ],
   age: '7d' as const,
   address_relation: 'or' as const,
-  from_address_hashes_to_include: [ '0x123' ],
-  to_address_hashes_to_include: [ '0x456' ],
+  from_address_hashes_to_include: [ '0x1230000000000000000000000000000000000000' ],
+  to_address_hashes_to_include: [ '0x4560000000000000000000000000000000000000' ],
   amount_from: '100',
   token_contract_symbols_to_include: [ 'ETH' ],
   token_contract_address_hashes_to_include: [ 'native' ],

ui/advancedFilter/__screenshots__/FilterByColumn.pw.tsx_dark-color-mode_from-filter-dark-mode-1.png

@@ -5,11 +5,13 @@ import React from 'react';
 
 import type { AdvancedFilterParams } from 'types/api/advancedFilter';
 
+import { Field } from 'toolkit/chakra/field';
 import { Input } from 'toolkit/chakra/input';
 import { InputGroup } from 'toolkit/chakra/input-group';
 import { Select } from 'toolkit/chakra/select';
 import AddButton from 'toolkit/components/buttons/AddButton';
 import { ClearButton } from 'toolkit/components/buttons/ClearButton';
+import { ADDRESS_REGEXP } from 'toolkit/utils/regexp';
 import TableColumnFilter from 'ui/shared/filters/TableColumnFilter';
 
 const FILTER_PARAM_TO_INCLUDE = 'to_address_hashes_to_include';
@@ -42,8 +44,10 @@ type InputProps = {
   isLast: boolean;
   onModeChange: ({ value }: { value: Array<string> }) => void;
   onChange: (event: ChangeEvent<HTMLInputElement>) => void;
+  onBlur: () => void;
   onClear: () => void;
   onAddFieldClick: () => void;
+  isInvalid: boolean;
 };
 
 type AddressFilter = {
@@ -55,9 +59,9 @@ function addressFilterToKey(filter: AddressFilter) {
   return `${ filter.address.toLowerCase() }-${ filter.mode }`;
 }
 
-const AddressFilterInput = ({ address, mode, onModeChange, onChange, onClear, isLast, onAddFieldClick }: InputProps) => {
+const AddressFilterInput = ({ address, mode, onModeChange, onChange, onBlur, onClear, isLast, onAddFieldClick, isInvalid }: InputProps) => {
   return (
-    <Flex alignItems="center" w="100%">
+    <Flex alignItems="flex-start" w="100%">
       <Select
         collection={ collection }
         placeholder="Select mode"
@@ -68,12 +72,17 @@ const AddressFilterInput = ({ address, mode, onModeChange, onChange, onClear, is
         flexShrink={ 0 }
         mr={ 3 }
       />
-      <InputGroup
+      <Field
         flexGrow={ 1 }
-        endElement={ <ClearButton onClick={ onClear } mx={ 2 } disabled={ !address }/> }
+        invalid={ isInvalid }
+        errorText="Invalid address format"
       >
-        <Input value={ address } onChange={ onChange } placeholder="Smart contract / Address (0x...)*" size="sm" autoComplete="off"/>
-      </InputGroup>
+        <InputGroup
+          endElement={ <ClearButton onClick={ onClear } mx={ 2 } disabled={ !address }/> }
+        >
+          <Input value={ address } onChange={ onChange } onBlur={ onBlur } placeholder="Smart contract / Address (0x...)*" size="sm" autoComplete="off"/>
+        </InputGroup>
+      </Field>
       { isLast && (
         <AddButton
           ml={ 2 }
@@ -89,6 +98,7 @@ const emptyItem = { address: '', mode: 'include' as AddressFilterMode };
 const AddressFilter = ({ type, value = [], handleFilterChange }: Props) => {
   const [ currentValue, setCurrentValue ] =
     React.useState<Array<AddressFilter>>([ ...value, emptyItem ]);
+  const [ touched, setTouched ] = React.useState<Array<boolean>>(value.map(() => true).concat(false));
 
   const handleModeSelectChange = React.useCallback((index: number) => ({ value }: { value: Array<string> }) => {
     setCurrentValue(prev => {
@@ -103,6 +113,11 @@ const AddressFilter = ({ type, value = [], handleFilterChange }: Props) => {
       newVal[index] = { ...newVal[index], address: '' };
       return newVal;
     });
+    setTouched(prev => {
+      const newTouched = [ ...prev ];
+      newTouched[index] = false;
+      return newTouched;
+    });
   }, []);
 
   const handleAddressChange = React.useCallback((index: number) => (event: React.ChangeEvent<HTMLInputElement>) => {
@@ -115,11 +130,23 @@ const AddressFilter = ({ type, value = [], handleFilterChange }: Props) => {
     });
   }, []);
 
+  const handleAddressBlur = React.useCallback((index: number) => () => {
+    setTouched(prev => {
+      const newTouched = [ ...prev ];
+      newTouched[index] = true;
+      return newTouched;
+    });
+  }, []);
+
   const onAddFieldClick = React.useCallback(() => {
     setCurrentValue(prev => [ ...prev, emptyItem ]);
+    setTouched(prev => [ ...prev, false ]);
   }, []);
 
-  const onReset = React.useCallback(() => setCurrentValue([ emptyItem ]), []);
+  const onReset = React.useCallback(() => {
+    setCurrentValue([ emptyItem ]);
+    setTouched([ false ]);
+  }, []);
 
   const onFilter = React.useCallback(() => {
     const includeFilterParam = type === 'from' ? FILTER_PARAM_FROM_INCLUDE : FILTER_PARAM_TO_INCLUDE;
@@ -131,11 +158,14 @@ const AddressFilter = ({ type, value = [], handleFilterChange }: Props) => {
     handleFilterChange(excludeFilterParam, excludeValue.length ? excludeValue : undefined);
   }, [ handleFilterChange, currentValue, type ]);
 
+  const hasErrors = currentValue.some(i => Boolean(i.address) && !ADDRESS_REGEXP.test(i.address));
+  const isTouched = !isEqual(currentValue.filter(i => i.address).map(addressFilterToKey).sort(), value.map(addressFilterToKey).sort());
+
   return (
     <TableColumnFilter
       title={ type === 'from' ? 'From address' : 'To address' }
       isFilled={ Boolean(currentValue[0].address) }
-      isTouched={ !isEqual(currentValue.filter(i => i.address).map(addressFilterToKey).sort(), value.map(addressFilterToKey).sort()) }
+      isTouched={ isTouched && !hasErrors }
       onFilter={ onFilter }
       onReset={ onReset }
       hasReset
@@ -149,8 +179,10 @@ const AddressFilter = ({ type, value = [], handleFilterChange }: Props) => {
             isLast={ index === currentValue.length - 1 }
             onModeChange={ handleModeSelectChange(index) }
             onChange={ handleAddressChange(index) }
+            onBlur={ handleAddressBlur(index) }
             onClear={ handleAddressClear(index) }
             onAddFieldClick={ onAddFieldClick }
+            isInvalid={ Boolean(touched[index]) && Boolean(item.address) && !ADDRESS_REGEXP.test(item.address) }
           />
         )) }
       </VStack>