AddressBook fixes (#3827)

* Fix issue with updating Address Book notes * Use GeneralLookupField for AddressBook address input * Fix onBlur type
MyCryptoHQ · Feb 9, 2021 · db6259d · db6259d
1 parent 75b98b6
commit db6259d
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 23 deletions.
diff --git a/src/components/GeneralLookupField.tsx b/src/components/GeneralLookupField.tsx
@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect, useRef, useState } from 'react';
+import React, { FocusEventHandler, useCallback, useEffect, useRef, useState } from 'react';
 
 import { ResolutionError } from '@unstoppabledomains/resolution/build/resolutionError';
 
@@ -22,7 +22,7 @@ export interface IGeneralLookupFieldComponentProps {
   value: IReceiverAddress;
   options: LabeledAddress[];
   placeholder?: string;
-  onBlur?(): void;
+  onBlur?: FocusEventHandler;
   setIsResolvingDomain(isResolving: boolean): void;
   handleEthAddress?(inputString: string): IReceiverAddress;
   handleENSName?(resolvedAddress: string, inputString: string): IReceiverAddress;
@@ -196,12 +196,12 @@ const GeneralLookupField = ({
               onSelect(option);
             }
           }}
-          onBlur={() => {
+          onBlur={(e) => {
             handleNewInput(inputValue.current);
             if (setFieldTouched) {
               setFieldTouched(name, true, false);
             }
-            if (onBlur) onBlur();
+            if (onBlur) onBlur(e);
             if (onChange) onChange(inputValue.current);
           }}
           onEnterKeyDown={handleEnterKeyDown}

diff --git a/src/features/Settings/components/AddToAddressBook.tsx b/src/features/Settings/components/AddToAddressBook.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 
 import { Button } from '@mycrypto/ui';
 import { Field, FieldProps, Form, Formik } from 'formik';
@@ -7,9 +7,10 @@ import { object, string } from 'yup';
 
 import backArrowIcon from '@assets/images/icn-back-arrow.svg';
 import { DashboardPanel, InputField, NetworkSelector } from '@components';
+import GeneralLookupField from '@components/GeneralLookupField';
 import { DEFAULT_NETWORK } from '@config/constants';
 import { useToasts } from '@features/Toasts';
-import { useContacts } from '@services';
+import { useContacts, useNetworks } from '@services';
 import { isValidETHAddress } from '@services/EthService';
 import { translateRaw } from '@translations';
 import { Contact, NetworkId } from '@types';
@@ -56,15 +57,17 @@ interface Props {
 
 export default function AddToAddressBook({ toggleFlipped, createContact }: Props) {
   const { getContactByAddress } = useContacts();
+  const { getNetworkById } = useNetworks();
+  const [isResolvingDomain, setIsResolvingDomain] = useState(false);
 
   const Schema = object().shape({
     label: string().required(translateRaw('REQUIRED')),
-    address: string()
+    address: object()
       .test('check-eth-address', translateRaw('TO_FIELD_ERROR'), (value) =>
-        isValidETHAddress(value)
+        isValidETHAddress(value.value)
       )
       .test('doesnt-exist', translateRaw('ADDRESS_ALREADY_ADDED'), function (value) {
-        const contact = getContactByAddress(value);
+        const contact = getContactByAddress(value.value);
         if (contact !== undefined) {
           return this.createError({
             message: translateRaw('ADDRESS_ALREADY_ADDED', { $label: contact.label })
@@ -92,18 +95,29 @@ export default function AddToAddressBook({ toggleFlipped, createContact }: Props
         validationSchema={Schema}
         initialValues={{
           label: '',
-          address: '',
+          address: {
+            value: '',
+            display: ''
+          },
           notes: '',
           network: DEFAULT_NETWORK
         }}
-        onSubmit={(values: Contact, { setSubmitting }) => {
-          createContact(values);
+        onSubmit={(values, { setSubmitting }) => {
+          createContact({ ...values, address: values.address.value });
           setSubmitting(false);
           displayToast(toastTemplates.addedAddress, { label: values.label });
           toggleFlipped();
         }}
       >
-        {({ isSubmitting, errors }) => (
+        {({
+          isSubmitting,
+          errors,
+          values,
+          touched,
+          setFieldValue,
+          setFieldError,
+          setFieldTouched
+        }) => (
           <Form>
             <AddressFieldset>
               <label htmlFor="label">{translateRaw('ACCOUNT_LIST_LABEL')}</label>
@@ -118,15 +132,23 @@ export default function AddToAddressBook({ toggleFlipped, createContact }: Props
             </AddressFieldset>
             <AddressFieldset>
               <label htmlFor="address">{translateRaw('ADDRESSBOOK_ADDRESS')}</label>
-              <Field name="address">
-                {({ field }: FieldProps<string>) => (
-                  <InputField
-                    inputError={errors && errors.address}
-                    {...field}
-                    placeholder={translateRaw('ADDRESSBOOK_ADDRESS_PLACEHOLDER')}
-                  />
-                )}
-              </Field>
+              <GeneralLookupField
+                name="address"
+                value={values.address}
+                options={[]}
+                isResolvingName={isResolvingDomain}
+                setIsResolvingDomain={setIsResolvingDomain}
+                network={getNetworkById(values.network)}
+                error={
+                  errors && touched.address && errors.address
+                    ? (errors.address as string)
+                    : undefined
+                }
+                setFieldValue={setFieldValue}
+                setFieldTouched={setFieldTouched}
+                setFieldError={setFieldError}
+                placeholder={translateRaw('ADDRESSBOOK_ADDRESS_PLACEHOLDER')}
+              />
             </AddressFieldset>
             <AddressFieldset>
               <Field name="network">

diff --git a/src/features/Settings/components/AddressBook.tsx b/src/features/Settings/components/AddressBook.tsx
@@ -258,7 +258,7 @@ export default function AddressBook({
           <EditableText
             truncate={true}
             value={notes}
-            saveValue={(value) => updateContact({ address, label: value, network, notes, uuid })}
+            saveValue={(value) => updateContact({ address, label, network, notes: value, uuid })}
           />,
           <DeleteButton onClick={() => setDeletingIndex(index)} icon="exit" />
           /* eslint-enable react/jsx-key */