diff options
Diffstat (limited to 'ui/app/pages/settings/advanced-tab/advanced-tab.component.js')
| -rw-r--r-- | ui/app/pages/settings/advanced-tab/advanced-tab.component.js | 166 |
1 files changed, 8 insertions, 158 deletions
diff --git a/ui/app/pages/settings/advanced-tab/advanced-tab.component.js b/ui/app/pages/settings/advanced-tab/advanced-tab.component.js index 3d27fe349..105cd89f9 100644 --- a/ui/app/pages/settings/advanced-tab/advanced-tab.component.js +++ b/ui/app/pages/settings/advanced-tab/advanced-tab.component.js @@ -1,8 +1,7 @@ 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 ToggleButton from '../../../components/ui/toggle-button' import TextField from '../../../components/ui/text-field' import Button from '../../../components/ui/button' import { MOBILE_SYNC_ROUTE } from '../../../helpers/constants/routes' @@ -29,155 +28,7 @@ export default class AdvancedTab extends PureComponent { setShowFiatConversionOnTestnetsPreference: PropTypes.func.isRequired, } - state = { - newRpc: '', - chainId: '', - showOptions: false, - ticker: '', - nickname: '', - } - - renderNewRpcUrl () { - const { t } = this.context - const { newRpc, chainId, ticker, nickname } = this.state - - return ( - <div className="settings-page__content-row"> - <div className="settings-page__content-item"> - <span>{ t('newNetwork') }</span> - </div> - <div className="settings-page__content-item"> - <div className="settings-page__content-item-col"> - <TextField - type="text" - id="new-rpc" - placeholder={t('rpcUrl')} - value={newRpc} - onChange={e => this.setState({ newRpc: e.target.value })} - onKeyPress={e => { - if (e.key === 'Enter') { - this.validateRpc(newRpc, chainId, ticker, nickname) - } - }} - fullWidth - margin="dense" - /> - <TextField - type="text" - id="chainid" - placeholder={t('optionalChainId')} - value={chainId} - onChange={e => 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" - /> - <TextField - type="text" - id="ticker" - placeholder={t('optionalSymbol')} - value={ticker} - onChange={e => 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" - /> - <TextField - type="text" - id="nickname" - placeholder={t('optionalNickname')} - value={nickname} - onChange={e => 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" - /> - <div className="flex-row flex-align-center space-between"> - <span className="settings-tab__advanced-link" - onClick={e => { - e.preventDefault() - this.setState({ showOptions: !this.state.showOptions }) - }} - > - { t(this.state.showOptions ? 'hideAdvancedOptions' : 'showAdvancedOptions') } - </span> - <button - className="button btn-primary settings-tab__rpc-save-button" - onClick={e => { - e.preventDefault() - this.validateRpc(newRpc, chainId, ticker, nickname) - }} - > - { t('save') } - </button> - </div> - </div> - </div> - </div> - ) - } - - 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')) - } - } - } + state = { autoLogoutTimeLimit: this.props.autoLogoutTimeLimit } renderMobileSync () { const { t } = this.context @@ -293,8 +144,8 @@ export default class AdvancedTab extends PureComponent { <ToggleButton value={sendHexData} onToggle={value => setHexDataFeatureFlag(!value)} - activeLabel="" - inactiveLabel="" + offLabel={t('off')} + onLabel={t('on')} /> </div> </div> @@ -319,8 +170,8 @@ export default class AdvancedTab extends PureComponent { <ToggleButton value={advancedInlineGas} onToggle={value => setAdvancedInlineGasFeatureFlag(!value)} - activeLabel="" - inactiveLabel="" + offLabel={t('off')} + onLabel={t('on')} /> </div> </div> @@ -348,8 +199,8 @@ export default class AdvancedTab extends PureComponent { <ToggleButton value={showFiatInTestnets} onToggle={value => setShowFiatConversionOnTestnetsPreference(!value)} - activeLabel="" - inactiveLabel="" + offLabel={t('off')} + onLabel={t('on')} /> </div> </div> @@ -407,7 +258,6 @@ export default class AdvancedTab extends PureComponent { { warning && <div className="settings-tab__error">{ warning }</div> } { this.renderStateLogs() } { this.renderMobileSync() } - { this.renderNewRpcUrl() } { this.renderResetAccount() } { this.renderAdvancedGasInputInline() } { this.renderHexDataOptIn() } |