import React from 'react'; import { HELP_ARTICLE } from 'config'; import { isPositiveIntegerOrZero, isValidETHAddress } from 'libs/validators'; import translate, { translateRaw } from 'translations'; import { HelpLink, Input } from 'components/ui'; import './AddCustomTokenForm.scss'; import { Token } from 'types/network'; interface Props { allTokens: Token[]; onSave(params: Token): void; toggleForm(): void; } interface IGenerateSymbolLookup { [tokenSymbol: string]: boolean; } interface State { tokenSymbolLookup: IGenerateSymbolLookup; address: string; symbol: string; decimal: string; } export default class AddCustomTokenForm extends React.PureComponent { public state: State = { tokenSymbolLookup: {}, address: '', symbol: '', decimal: '' }; constructor(props: Props) { super(props); this.state = { ...this.state, tokenSymbolLookup: this.generateSymbolLookup(props.allTokens) }; } public render() { const { address, symbol, decimal } = this.state; const errors = this.getErrors(); const fields = [ { name: 'symbol', value: symbol, label: translateRaw('TOKEN_SYMBOL') }, { name: 'address', value: address, label: translateRaw('TOKEN_ADDR') }, { name: 'decimal', value: decimal, label: translateRaw('TOKEN_DEC') } ]; return (
{fields.map(field => { return ( ); })} {translate('ADD_CUSTOM_TKN_HELP')}
); } public getErrors() { const { address, symbol, decimal } = this.state; const errors: { [key: string]: boolean | string } = {}; // Formatting errors if (decimal && !isPositiveIntegerOrZero(parseInt(decimal, 10))) { errors.decimal = true; } if (address && !isValidETHAddress(address)) { errors.address = true; } // Message errors if (symbol && this.state.tokenSymbolLookup[symbol]) { errors.symbol = 'A token with this symbol already exists'; } return errors; } public isValid() { const { address, symbol, decimal } = this.state; return !Object.keys(this.getErrors()).length && address && symbol && decimal; } public onFieldChange = (e: React.FormEvent) => { // TODO: typescript bug: https://github.com/Microsoft/TypeScript/issues/13948 const name: any = e.currentTarget.name; const value = e.currentTarget.value; this.setState({ [name]: value }); }; public onSave = (ev: React.FormEvent) => { ev.preventDefault(); if (!this.isValid()) { return; } const { address, symbol, decimal } = this.state; this.props.onSave({ address, symbol, decimal: parseInt(decimal, 10) }); }; private generateSymbolLookup(tokens: Token[]) { return tokens.reduce( (prev, tk) => { prev[tk.symbol] = true; return prev; }, {} as IGenerateSymbolLookup ); } }