1  import React from 'react';
 2  import { Result } from 'mycrypto-nano-result';
 3  
 4  import { translateRaw } from 'translations';
 5  import { isValidETHAddress } from 'libs/validators';
 6  import { Input } from 'components/ui';
 7  import { IGenerateAddressLookup } from './AddCustomTokenForm';
 8  
 9  interface OwnProps {
10    addressLookup: IGenerateAddressLookup;
11    onChange(address: Result<string>): void;
12  }
13  
14  enum ErrType {
15    INVALIDADDR = 'Not a valid address',
16    ADDRTAKEN = 'A token with this address already exists'
17  }
18  
19  interface State {
20    address: Result<string>;
21    userInput: string;
22  }
23  
24  export class AddressField extends React.Component<OwnProps, State> {
25    public state: State = {
26      address: Result.from({ res: '' }),
27      userInput: ''
28    };
29  
30    public render() {
31      const { userInput, address } = this.state;
32  
33      return (
34        <label className="AddCustom-field form-group">
35          <div className="input-group-header">{translateRaw('TOKEN_ADDR')}</div>
36          <Input
37            isValid={address.ok()}
38            className="input-group-input-small"
39            type="text"
40            name="Address"
41            value={address.ok() ? address.unwrap() : userInput}
42            onChange={this.handleFieldChange}
43          />
44          {address.err() && <div className="AddCustom-field-error">{address.err()}</div>}
45        </label>
46      );
47    }
48  
49    private handleFieldChange = (e: React.FormEvent<HTMLInputElement>) => {
50      const userInput = e.currentTarget.value;
51      const addrTaken = this.props.addressLookup[userInput];
52      const validAddr = isValidETHAddress(userInput);
53      const err = addrTaken ? ErrType.ADDRTAKEN : !validAddr ? ErrType.INVALIDADDR : undefined;
54      const address: Result<string> = err ? Result.from({ err }) : Result.from({ res: userInput });
55  
56      this.setState({ userInput, address });
57      this.props.onChange(address);
58    };
59  }