import React, { PureComponent } from 'react' import PropTypes from 'prop-types' import infuraCurrencies from '../../../../infura-conversion.json' import validUrl from 'valid-url' import { exportAsFile } from '../../../../util' import SimpleDropdown from '../../../dropdowns/simple-dropdown' import ToggleButton from 'react-toggle-button' import { REVEAL_SEED_ROUTE } from '../../../../routes' import locales from '../../../../../../app/_locales/index.json' import TextField from '../../../text-field' import Button from '../../../button' const sortedCurrencies = infuraCurrencies.objects.sort((a, b) => { return a.quote.name.toLocaleLowerCase().localeCompare(b.quote.name.toLocaleLowerCase()) }) const infuraCurrencyOptions = sortedCurrencies.map(({ quote: { code, name } }) => { return { displayValue: `${code.toUpperCase()} - ${name}`, key: code, value: code, } }) const localeOptions = locales.map(locale => { return { displayValue: `${locale.name}`, key: locale.code, value: locale.code, } }) export default class SettingsTab extends PureComponent { static contextTypes = { t: PropTypes.func, } static propTypes = { metamask: PropTypes.object, setUseBlockie: PropTypes.func, setHexDataFeatureFlag: PropTypes.func, setPrivacyMode: PropTypes.func, privacyMode: PropTypes.bool, setCurrentCurrency: PropTypes.func, setRpcTarget: PropTypes.func, delRpcTarget: PropTypes.func, displayWarning: PropTypes.func, revealSeedConfirmation: PropTypes.func, setFeatureFlagToBeta: PropTypes.func, showClearApprovalModal: PropTypes.func, showResetAccountConfirmationModal: PropTypes.func, warning: PropTypes.string, history: PropTypes.object, isMascara: PropTypes.bool, updateCurrentLocale: PropTypes.func, currentLocale: PropTypes.string, useBlockie: PropTypes.bool, sendHexData: PropTypes.bool, currentCurrency: PropTypes.string, conversionDate: PropTypes.number, nativeCurrency: PropTypes.string, useNativeCurrencyAsPrimaryCurrency: PropTypes.bool, setUseNativeCurrencyAsPrimaryCurrencyPreference: PropTypes.func, } state = { newRpc: '', chainId: '', showOptions: false, ticker: '', nickname: '', } renderCurrentConversion () { const { t } = this.context const { currentCurrency, conversionDate, setCurrentCurrency } = this.props return (
{ t('currencyConversion') } { t('updatedWithDate', [Date(conversionDate)]) }
setCurrentCurrency(newCurrency)} />
) } renderCurrentLocale () { const { t } = this.context const { updateCurrentLocale, currentLocale } = this.props const currentLocaleMeta = locales.find(locale => locale.code === currentLocale) const currentLocaleName = currentLocaleMeta ? currentLocaleMeta.name : '' return (
{ t('currentLanguage') } { currentLocaleName }
updateCurrentLocale(newLocale)} />
) } 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)) { if (!!chainId && Number.isNaN(parseInt(chainId))) { return displayWarning(`${this.context.t('invalidInput')} chainId`) } setRpcTarget(newRpc, chainId, ticker, nickname) } else { const appendedRpc = `http://${newRpc}` if (validUrl.isWebUri(appendedRpc)) { displayWarning(this.context.t('uriErrorMsg')) } else { displayWarning(this.context.t('invalidRPC')) } } } renderStateLogs () { const { t } = this.context const { displayWarning } = this.props return (
{ t('stateLogs') } { t('stateLogsDescription') }
) } renderClearApproval () { const { t } = this.context const { showClearApprovalModal } = this.props return (
{ t('approvalData') } { t('approvalDataDescription') }
) } renderSeedWords () { const { t } = this.context const { history } = this.props return (
{ t('revealSeedWords') }
) } renderOldUI () { const { t } = this.context const { setFeatureFlagToBeta } = this.props return (
{ t('useOldUI') }
) } renderResetAccount () { const { t } = this.context const { showResetAccountConfirmationModal } = this.props return (
{ t('resetAccount') }
) } renderBlockieOptIn () { const { useBlockie, setUseBlockie } = this.props return (
{ this.context.t('blockiesIdenticon') }
setUseBlockie(!value)} activeLabel="" inactiveLabel="" />
) } renderHexDataOptIn () { const { t } = this.context const { sendHexData, setHexDataFeatureFlag } = this.props return (
{ t('showHexData') }
{ t('showHexDataDescription') }
setHexDataFeatureFlag(!value)} activeLabel="" inactiveLabel="" />
) } renderUsePrimaryCurrencyOptions () { const { t } = this.context const { nativeCurrency, setUseNativeCurrencyAsPrimaryCurrencyPreference, useNativeCurrencyAsPrimaryCurrency, } = this.props return (
{ t('primaryCurrencySetting') }
{ t('primaryCurrencySettingDescription') }
setUseNativeCurrencyAsPrimaryCurrencyPreference(true)} checked={Boolean(useNativeCurrencyAsPrimaryCurrency)} />
setUseNativeCurrencyAsPrimaryCurrencyPreference(false)} checked={!useNativeCurrencyAsPrimaryCurrency} />
) } renderPrivacyOptIn () { const { t } = this.context const { privacyMode, setPrivacyMode } = this.props return (
{ t('privacyMode') }
{ t('privacyModeDescription') }
setPrivacyMode(!value)} activeLabel="" inactiveLabel="" />
) } render () { const { warning, isMascara } = this.props return (
{ warning &&
{ warning }
} { this.renderCurrentConversion() } { this.renderUsePrimaryCurrencyOptions() } { this.renderCurrentLocale() } { this.renderNewRpcUrl() } { this.renderStateLogs() } { this.renderSeedWords() } { !isMascara && this.renderOldUI() } { this.renderResetAccount() } { this.renderClearApproval() } { this.renderPrivacyOptIn() } { this.renderHexDataOptIn() } { this.renderBlockieOptIn() }
) } }