import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; 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'; import Dropdown from '../../../components/ui/dropdown'; import Dialog from '../../../components/ui/dialog'; import { getPlatform } from '../../../../app/scripts/lib/util'; import { PLATFORM_FIREFOX } from '../../../../shared/constants/app'; import { getNumberOfSettingsInSection, handleSettingsRefs, } from '../../../helpers/utils/settings-search'; import { addUrlProtocolPrefix } from '../../../helpers/utils/ipfs'; import { LEDGER_TRANSPORT_TYPES, LEDGER_USB_VENDOR_ID, } from '../../../../shared/constants/hardware-wallets'; import { EVENT, EVENT_NAMES } from '../../../../shared/constants/metametrics'; import { exportAsFile } from '../../../helpers/utils/export-utils'; import ActionableMessage from '../../../components/ui/actionable-message'; import ZENDESK_URLS from '../../../helpers/constants/zendesk-url'; const CORRUPT_JSON_FILE = 'CORRUPT_JSON_FILE'; export default class AdvancedTab extends PureComponent { static contextTypes = { t: PropTypes.func, trackEvent: PropTypes.func, }; static propTypes = { setUseNonceField: PropTypes.func, useNonceField: PropTypes.bool, setHexDataFeatureFlag: 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, showTestNetworks: PropTypes.bool, autoLockTimeLimit: PropTypes.number, setAutoLockTimeLimit: PropTypes.func.isRequired, setShowFiatConversionOnTestnetsPreference: PropTypes.func.isRequired, setShowTestNetworks: PropTypes.func.isRequired, setIpfsGateway: PropTypes.func.isRequired, ipfsGateway: PropTypes.string.isRequired, ledgerTransportType: PropTypes.oneOf(Object.values(LEDGER_TRANSPORT_TYPES)), setLedgerTransportPreference: PropTypes.func.isRequired, setDismissSeedBackUpReminder: PropTypes.func.isRequired, dismissSeedBackUpReminder: PropTypes.bool.isRequired, userHasALedgerAccount: PropTypes.bool.isRequired, useTokenDetection: PropTypes.bool.isRequired, setUseTokenDetection: PropTypes.func.isRequired, backupUserData: PropTypes.func.isRequired, restoreUserData: PropTypes.func.isRequired, }; state = { autoLockTimeLimit: this.props.autoLockTimeLimit, lockTimeError: '', ipfsGateway: this.props.ipfsGateway, ipfsGatewayError: '', showLedgerTransportWarning: false, showResultMessage: false, restoreSuccessful: true, restoreMessage: null, }; settingsRefs = Array( getNumberOfSettingsInSection(this.context.t, this.context.t('advanced')), ) .fill(undefined) .map(() => { return React.createRef(); }); componentDidUpdate() { const { t } = this.context; handleSettingsRefs(t, t('advanced'), this.settingsRefs); } componentDidMount() { const { t } = this.context; handleSettingsRefs(t, t('advanced'), this.settingsRefs); } renderMobileSync() { const { t } = this.context; const { history } = this.props; return (
{t('syncWithMobile')}
); } async getTextFromFile(file) { return new Promise((resolve, reject) => { const reader = new window.FileReader(); reader.onload = (e) => { const text = e.target.result; resolve(text); }; reader.onerror = (e) => { reject(e); }; reader.readAsText(file); }); } async handleFileUpload(event) { /** * we need this to be able to access event.target after * the event handler has been called. [Synthetic Event Pooling, pre React 17] * * @see https://fb.me/react-event-pooling */ event.persist(); const file = event.target.files[0]; const jsonString = await this.getTextFromFile(file); /** * so that we can restore same file again if we want to. * chrome blocks uploading same file twice. */ event.target.value = ''; try { const result = await this.props.restoreUserData(jsonString); this.setState({ showResultMessage: true, restoreSuccessful: result, restoreMessage: null, }); } catch (e) { if (e.message.match(/Unexpected.+JSON/iu)) { this.setState({ showResultMessage: true, restoreSuccessful: false, restoreMessage: CORRUPT_JSON_FILE, }); } } } renderRestoreUserData() { const { t } = this.context; const { showResultMessage, restoreSuccessful, restoreMessage } = this.state; const defaultRestoreMessage = restoreSuccessful ? t('restoreSuccessful') : t('restoreFailed'); const restoreMessageToRender = restoreMessage === CORRUPT_JSON_FILE ? t('dataBackupSeemsCorrupt') : defaultRestoreMessage; return (
{t('restoreUserData')} {t('restoreUserDataDescription')}
this.handleFileUpload(e)} />
{showResultMessage && ( { this.setState({ showResultMessage: false, restoreSuccessful: true, restoreMessage: null, }); }, }} /> )}
); } backupUserData = async () => { const { fileName, data } = await this.props.backupUserData(); exportAsFile(fileName, data); this.context.trackEvent({ event: 'User Data Exported', category: 'Backup', properties: {}, }); }; renderUserDataBackup() { const { t } = this.context; return (
{t('backupUserData')} {t('backupUserDataDescription')}
); } 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')} {t('resetAccountDescription')}
); } renderHexDataOptIn() { const { t } = this.context; const { sendHexData, setHexDataFeatureFlag } = this.props; return (
{t('showHexData')}
{t('showHexDataDescription')}
setHexDataFeatureFlag(!value)} offLabel={t('off')} onLabel={t('on')} />
); } renderAdvancedGasInputInline() { const { t } = this.context; const { advancedInlineGas, setAdvancedInlineGasFeatureFlag } = this.props; return (
{t('showAdvancedGasInline')}
{t('showAdvancedGasInlineDescription')}
setAdvancedInlineGasFeatureFlag(!value)} offLabel={t('off')} onLabel={t('on')} />
); } renderToggleTestNetworks() { const { t } = this.context; const { showTestNetworks, setShowTestNetworks } = this.props; return (
{t('showTestnetNetworks')}
{t('showTestnetNetworksDescription')}
setShowTestNetworks(!value)} offLabel={t('off')} onLabel={t('on')} />
); } renderShowConversionInTestnets() { const { t } = this.context; const { showFiatInTestnets, setShowFiatConversionOnTestnetsPreference } = this.props; return (
{t('showFiatConversionInTestnets')}
{t('showFiatConversionInTestnetsDescription')}
setShowFiatConversionOnTestnetsPreference(!value) } offLabel={t('off')} onLabel={t('on')} />
); } renderUseNonceOptIn() { const { t } = this.context; const { useNonceField, setUseNonceField } = this.props; return (
{t('nonceField')}
{t('nonceFieldDescription')}
setUseNonceField(!value)} offLabel={t('off')} onLabel={t('on')} />
); } handleLockChange(time) { const { t } = this.context; const autoLockTimeLimit = Math.max(Number(time), 0); this.setState(() => { let lockTimeError = ''; if (autoLockTimeLimit > 10080) { lockTimeError = t('lockTimeTooGreat'); } return { autoLockTimeLimit, lockTimeError, }; }); } renderAutoLockTimeLimit() { const { t } = this.context; const { lockTimeError } = this.state; const { setAutoLockTimeLimit } = this.props; return (
{t('autoLockTimeLimit')}
{t('autoLockTimeLimitDescription')}
this.handleLockChange(e.target.value)} error={lockTimeError} fullWidth margin="dense" min={0} />
); } renderLedgerLiveControl() { const { t } = this.context; const { ledgerTransportType, setLedgerTransportPreference, userHasALedgerAccount, } = this.props; const LEDGER_TRANSPORT_NAMES = { LIVE: t('ledgerLive'), WEBHID: t('webhid'), U2F: t('u2f'), }; const transportTypeOptions = [ { name: LEDGER_TRANSPORT_NAMES.LIVE, value: LEDGER_TRANSPORT_TYPES.LIVE, }, { name: LEDGER_TRANSPORT_NAMES.U2F, value: LEDGER_TRANSPORT_TYPES.U2F, }, ]; if (window.navigator.hid) { transportTypeOptions.push({ name: LEDGER_TRANSPORT_NAMES.WEBHID, value: LEDGER_TRANSPORT_TYPES.WEBHID, }); } const recommendedLedgerOption = window.navigator.hid ? LEDGER_TRANSPORT_NAMES.WEBHID : LEDGER_TRANSPORT_NAMES.U2F; return (
{t('preferredLedgerConnectionType')}
{t('ledgerConnectionPreferenceDescription', [ recommendedLedgerOption, , ])}
{ if ( ledgerTransportType === LEDGER_TRANSPORT_TYPES.LIVE && transportType === LEDGER_TRANSPORT_TYPES.WEBHID ) { this.setState({ showLedgerTransportWarning: true }); } setLedgerTransportPreference(transportType); if ( transportType === LEDGER_TRANSPORT_TYPES.WEBHID && userHasALedgerAccount ) { await window.navigator.hid.requestDevice({ filters: [{ vendorId: LEDGER_USB_VENDOR_ID }], }); } }} /> {this.state.showLedgerTransportWarning ? (
{t('ledgerTransportChangeWarning')}
) : null}
); } handleIpfsGatewayChange(url) { const { t } = this.context; this.setState(() => { let ipfsGatewayError = ''; try { const urlObj = new URL(addUrlProtocolPrefix(url)); if (!urlObj.host) { throw new Error(); } // don't allow the use of this gateway if (urlObj.host === 'gateway.ipfs.io') { throw new Error('Forbidden gateway'); } } catch (error) { ipfsGatewayError = error.message === 'Forbidden gateway' ? t('forbiddenIpfsGateway') : t('invalidIpfsGateway'); } return { ipfsGateway: url, ipfsGatewayError, }; }); } handleIpfsGatewaySave() { const url = new URL(addUrlProtocolPrefix(this.state.ipfsGateway)); const { host } = url; this.props.setIpfsGateway(host); } renderIpfsGatewayControl() { const { t } = this.context; const { ipfsGatewayError } = this.state; return (
{t('ipfsGateway')}
{t('ipfsGatewayDescription')}
this.handleIpfsGatewayChange(e.target.value)} error={ipfsGatewayError} fullWidth margin="dense" />
); } renderDismissSeedBackupReminderControl() { const { t } = this.context; const { dismissSeedBackUpReminder, setDismissSeedBackUpReminder } = this.props; return (
{t('dismissReminderField')}
{t('dismissReminderDescriptionField')}
setDismissSeedBackUpReminder(!value)} offLabel={t('off')} onLabel={t('on')} />
); } renderTokenDetectionToggle() { const { t } = this.context; const { useTokenDetection, setUseTokenDetection } = this.props; return (
{t('enhancedTokenDetection')}
{t('enhancedTokenDetectionDescription')}
{ this.context.trackEvent({ category: EVENT.CATEGORIES.SETTINGS, event: 'Token Detection', properties: { action: 'Token Detection', legacy_event: true, }, }); setUseTokenDetection(!value); }} offLabel={t('off')} onLabel={t('on')} />
); } render() { const { warning } = this.props; const notUsingFirefox = getPlatform() !== PLATFORM_FIREFOX; return (
{warning ?
{warning}
: null} {this.renderStateLogs()} {this.renderMobileSync()} {this.renderResetAccount()} {this.renderAdvancedGasInputInline()} {this.renderTokenDetectionToggle()} {this.renderHexDataOptIn()} {this.renderShowConversionInTestnets()} {this.renderToggleTestNetworks()} {this.renderUseNonceOptIn()} {this.renderAutoLockTimeLimit()} {this.renderUserDataBackup()} {this.renderRestoreUserData()} {this.renderIpfsGatewayControl()} {notUsingFirefox ? this.renderLedgerLiveControl() : null} {this.renderDismissSeedBackupReminderControl()}
); } }