1  import React from 'react';
 2  import { Result } from 'mycrypto-nano-result';
 3  
 4  import { translateRaw } from 'translations';
 5  import { IGenerateSymbolLookup } from './AddCustomTokenForm';
 6  import { FieldInput } from './FieldInput';
 7  
 8  interface OwnProps {
 9    address?: string;
10    symbolLookup: IGenerateSymbolLookup;
11    onChange(symbol: Result<string>): void;
12  }
13  
14  export class SymbolField extends React.Component<OwnProps> {
15    public render() {
16      return (
17        <FieldInput
18          fieldName={translateRaw('TOKEN_SYMBOL')}
19          fieldToFetch={'symbol'}
20          shouldEnableAutoField={req => !req.err()}
21          address={this.props.address}
22          userInputValidator={this.isValidUserInput}
23          fetchedFieldValidator={field =>
24            field
25              ? Result.from({ res: field })
26              : Result.from({ err: 'No Symbol found, please input the token symbol manually' })
27          }
28          onChange={this.props.onChange}
29        />
30      );
31    }
32  
33    private isValidUserInput = (userInput: string) => {
34      const validSymbol = !this.props.symbolLookup[userInput];
35      const symbol: Result<string> = validSymbol
36        ? Result.from({ res: userInput })
37        : Result.from({ err: 'A token with this symbol already exists' });
38      return symbol;
39    };
40  }