import React, { Component } from 'react'; import translate from 'translations'; import { NetworkContract, donationAddressMap } from 'config'; import { getNetworkContracts } from 'selectors/config'; import { connect } from 'react-redux'; import { AppState } from 'reducers'; import { isValidETHAddress, isValidAbiJson } from 'libs/validators'; import classnames from 'classnames'; import Select from 'react-select'; interface ContractOption { name: string; value: string; } interface StateProps { contracts: NetworkContract[]; } interface OwnProps { accessContract(contractAbi: string, address: string): (ev) => void; resetState(): void; } type Props = OwnProps & StateProps; interface State { address: string; abiJson: string; contract: ContractOption | null; contractPlaceholder: string; } const abiJsonPlaceholder = [ { type: 'constructor', inputs: [{ name: 'param1', type: 'uint256', indexed: true }], name: 'Event' }, { type: 'function', inputs: [{ name: 'a', type: 'uint256' }], name: 'foo', outputs: [] } ]; class InteractForm extends Component { private abiJsonPlaceholder = JSON.stringify(abiJsonPlaceholder, null, 0); constructor(props) { super(props); this.state = { address: '', abiJson: '', contract: null, contractPlaceholder: this.isContractsValid() ? 'Please select a contract...' : 'No contracts available' }; } public isContractsValid = () => { const { contracts } = this.props; return contracts && contracts.length; }; public render() { const { contracts, accessContract } = this.props; const { address, abiJson, contract } = this.state; const validEthAddress = isValidETHAddress(address); const validAbiJson = isValidAbiJson(abiJson); const showContractAccessButton = validEthAddress && validAbiJson; let contractOptions: ContractOption[] = []; if (this.isContractsValid()) { contractOptions = contracts.map(con => { const addr = con.address ? `(${con.address.substr(0, 10)}...)` : ''; return { name: `${con.name} ${addr}`, value: this.makeContractValue(con) }; }); } // TODO: Use common components for address, abi json return (