import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import validUrl from 'valid-url' import { exportAsFile } from '../../../helpers/utils/util' import ToggleButton from 'react-toggle-button' import TextField from '../../../components/ui/text-field' import Button from '../../../components/ui/button' import { MOBILE_SYNC_ROUTE } from '../../../helpers/constants/routes' export default class AdvancedTab extends PureComponent { static contextTypes = { t: PropTypes.func, metricsEvent: PropTypes.func, } static propTypes = { setHexDataFeatureFlag: PropTypes.func, setRpcTarget: PropTypes.func, displayWarning: PropTypes.func, showResetAccountConfirmationModal: PropTypes.func, warning: PropTypes.string, history: PropTypes.object, sendHexData: PropTypes.bool, setAdvancedInlineGasFeatureFlag: PropTypes.func, advancedInlineGas: PropTypes.bool, showFiatInTestnets: PropTypes.bool, setShowFiatConversionOnTestnetsPreference: PropTypes.func.isRequired, } state = { newRpc: '', chainId: '', showOptions: false, ticker: '', nickname: '', } renderNewRpcUrl () { const { t } = this.context const { newRpc, chainId, ticker, nickname } = this.state return (
{ t('newNetwork') }
this.setState({ newRpc: e.target.value })} onKeyPress={e => { if (e.key === 'Enter') { this.validateRpc(newRpc, chainId, ticker, nickname) } }} fullWidth margin="dense" /> this.setState({ chainId: e.target.value })} onKeyPress={e => { if (e.key === 'Enter') { this.validateRpc(newRpc, chainId, ticker, nickname) } }} style={{ display: this.state.showOptions ? null : 'none', }} fullWidth margin="dense" /> this.setState({ ticker: e.target.value })} onKeyPress={e => { if (e.key === 'Enter') { this.validateRpc(newRpc, chainId, ticker, nickname) } }} style={{ display: this.state.showOptions ? null : 'none', }} fullWidth margin="dense" /> this.setState({ nickname: e.target.value })} onKeyPress={e => { if (e.key === 'Enter') { this.validateRpc(newRpc, chainId, ticker, nickname) } }} style={{ display: this.state.showOptions ? null : 'none', }} fullWidth margin="dense" />
{ e.preventDefault() this.setState({ showOptions: !this.state.showOptions }) }} > { t(this.state.showOptions ? 'hideAdvancedOptions' : 'showAdvancedOptions') }
) } validateRpc (newRpc, chainId, ticker = 'ETH', nickname) { const { setRpcTarget, displayWarning } = this.props if (validUrl.isWebUri(newRpc)) { this.context.metricsEvent({ eventOpts: { category: 'Settings', action: 'Custom RPC', name: 'Success', }, customVariables: { networkId: newRpc, chainId, }, }) if (!!chainId && Number.isNaN(parseInt(chainId))) { return displayWarning(`${this.context.t('invalidInput')} chainId`) } setRpcTarget(newRpc, chainId, ticker, nickname) } else { this.context.metricsEvent({ eventOpts: { category: 'Settings', action: 'Custom RPC', name: 'Error', }, customVariables: { networkId: newRpc, chainId, }, }) const appendedRpc = `http://${newRpc}` if (validUrl.isWebUri(appendedRpc)) { displayWarning(this.context.t('uriErrorMsg')) } else { displayWarning(this.context.t('invalidRPC')) } } } renderMobileSync () { const { t } = this.context const { history } = this.props // return (
{ t('syncWithMobile') }
) } renderStateLogs () { const { t } = this.context const { displayWarning } = this.props return (
{ t('stateLogs') } { t('stateLogsDescription') }
) } renderResetAccount () { const { t } = this.context const { showResetAccountConfirmationModal } = this.props return (
{ t('resetAccount') }
) } renderHexDataOptIn () { const { t } = this.context const { sendHexData, setHexDataFeatureFlag } = this.props return (
{ t('showHexData') }
{ t('showHexDataDescription') }
setHexDataFeatureFlag(!value)} activeLabel="" inactiveLabel="" />
) } renderAdvancedGasInputInline () { const { t } = this.context const { advancedInlineGas, setAdvancedInlineGasFeatureFlag } = this.props return (
{ t('showAdvancedGasInline') }
{ t('showAdvancedGasInlineDescription') }
setAdvancedInlineGasFeatureFlag(!value)} activeLabel="" inactiveLabel="" />
) } renderShowConversionInTestnets () { const { t } = this.context const { showFiatInTestnets, setShowFiatConversionOnTestnetsPreference, } = this.props return (
{ t('showFiatConversionInTestnets') }
{ t('showFiatConversionInTestnetsDescription') }
setShowFiatConversionOnTestnetsPreference(!value)} activeLabel="" inactiveLabel="" />
) } renderContent () { const { warning } = this.props return (
{ warning &&
{ warning }
} { this.renderStateLogs() } { this.renderMobileSync() } { this.renderNewRpcUrl() } { this.renderResetAccount() } { this.renderAdvancedGasInputInline() } { this.renderHexDataOptIn() } { this.renderShowConversionInTestnets() }
) } render () { return this.renderContent() } }