import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import validUrl from 'valid-url' import PageContainerFooter from '../../../../components/ui/page-container/page-container-footer' import TextField from '../../../../components/ui/text-field' export default class NetworksTab extends PureComponent { static contextTypes = { t: PropTypes.func.isRequired, metricsEvent: PropTypes.func.isRequired, } static propTypes = { editRpc: PropTypes.func.isRequired, rpcUrl: PropTypes.string, chainId: PropTypes.string, ticker: PropTypes.string, viewOnly: PropTypes.bool, networkName: PropTypes.string, onClear: PropTypes.func.isRequired, setRpcTarget: PropTypes.func.isRequired, networksTabIsInAddMode: PropTypes.bool, blockExplorerUrl: PropTypes.string, rpcPrefs: PropTypes.object, } state = { rpcUrl: this.props.rpcUrl, chainId: this.props.chainId, ticker: this.props.ticker, networkName: this.props.networkName, blockExplorerUrl: this.props.blockExplorerUrl, errors: {}, } componentDidUpdate (prevProps) { const { rpcUrl: prevRpcUrl, networksTabIsInAddMode: prevAddMode } = prevProps const { rpcUrl, chainId, ticker, networkName, networksTabIsInAddMode, blockExplorerUrl, } = this.props if (!prevAddMode && networksTabIsInAddMode) { this.setState({ rpcUrl: '', chainId: '', ticker: '', networkName: '', blockExplorerUrl: '', errors: {}, }) } else if (prevRpcUrl !== rpcUrl) { this.setState({ rpcUrl, chainId, ticker, networkName, blockExplorerUrl, errors: {} }) } } componentWillUnmount () { this.props.onClear() this.setState({ rpcUrl: '', chainId: '', ticker: '', networkName: '', blockExplorerUrl: '', errors: {}, }) } stateIsUnchanged () { const { rpcUrl, chainId, ticker, networkName, blockExplorerUrl, } = this.props const { rpcUrl: stateRpcUrl, chainId: stateChainId, ticker: stateTicker, networkName: stateNetworkName, blockExplorerUrl: stateBlockExplorerUrl, } = this.state return ( stateRpcUrl === rpcUrl && stateChainId === chainId && stateTicker === ticker && stateNetworkName === networkName && stateBlockExplorerUrl === blockExplorerUrl ) } renderFormTextField (fieldKey, textFieldId, onChange, value, optionalTextFieldKey) { const { errors } = this.state const { viewOnly } = this.props return (