2021-02-04 19:15:23 +01:00
|
|
|
import React, { PureComponent } from 'react';
|
|
|
|
import PropTypes from 'prop-types';
|
|
|
|
import classnames from 'classnames';
|
|
|
|
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';
|
2021-10-21 21:17:03 +02:00
|
|
|
import Dropdown from '../../../components/ui/dropdown';
|
2021-10-29 01:38:58 +02:00
|
|
|
import Dialog from '../../../components/ui/dialog';
|
2019-03-25 17:13:23 +01:00
|
|
|
|
2021-11-02 08:24:24 +01:00
|
|
|
import { getPlatform } from '../../../../app/scripts/lib/util';
|
|
|
|
|
|
|
|
import { PLATFORM_FIREFOX } from '../../../../shared/constants/app';
|
2022-02-22 21:58:21 +01:00
|
|
|
import {
|
2022-04-06 22:27:08 +02:00
|
|
|
getNumberOfSettingsInSection,
|
2022-02-22 21:58:21 +01:00
|
|
|
handleSettingsRefs,
|
|
|
|
} from '../../../helpers/utils/settings-search';
|
2021-11-02 08:24:24 +01:00
|
|
|
|
2021-10-21 21:17:03 +02:00
|
|
|
import {
|
|
|
|
LEDGER_TRANSPORT_TYPES,
|
|
|
|
LEDGER_USB_VENDOR_ID,
|
|
|
|
} from '../../../../shared/constants/hardware-wallets';
|
2022-08-16 18:39:23 +02:00
|
|
|
import { EVENT, EVENT_NAMES } from '../../../../shared/constants/metametrics';
|
2022-08-09 20:36:32 +02:00
|
|
|
import { exportAsFile } from '../../../../shared/modules/export-utils';
|
|
|
|
import ActionableMessage from '../../../components/ui/actionable-message';
|
2022-08-23 16:19:31 +02:00
|
|
|
import ZENDESK_URLS from '../../../helpers/constants/zendesk-url';
|
2021-05-24 23:11:17 +02:00
|
|
|
|
2022-09-14 02:59:04 +02:00
|
|
|
const CORRUPT_JSON_FILE = 'CORRUPT_JSON_FILE';
|
|
|
|
|
2019-03-25 17:13:23 +01:00
|
|
|
export default class AdvancedTab extends PureComponent {
|
|
|
|
static contextTypes = {
|
|
|
|
t: PropTypes.func,
|
2022-03-29 15:46:24 +02:00
|
|
|
trackEvent: PropTypes.func,
|
2021-02-04 19:15:23 +01:00
|
|
|
};
|
2019-03-25 17:13:23 +01:00
|
|
|
|
|
|
|
static propTypes = {
|
2019-09-27 06:30:36 +02:00
|
|
|
setUseNonceField: PropTypes.func,
|
|
|
|
useNonceField: PropTypes.bool,
|
2019-03-25 17:13:23 +01:00
|
|
|
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,
|
2021-10-28 21:31:05 +02:00
|
|
|
showTestNetworks: PropTypes.bool,
|
2020-01-21 23:09:53 +01:00
|
|
|
autoLockTimeLimit: PropTypes.number,
|
|
|
|
setAutoLockTimeLimit: PropTypes.func.isRequired,
|
2019-03-25 17:13:23 +01:00
|
|
|
setShowFiatConversionOnTestnetsPreference: PropTypes.func.isRequired,
|
2021-10-28 21:31:05 +02:00
|
|
|
setShowTestNetworks: PropTypes.func.isRequired,
|
2019-09-16 19:11:01 +02:00
|
|
|
threeBoxSyncingAllowed: PropTypes.bool.isRequired,
|
|
|
|
setThreeBoxSyncingPermission: PropTypes.func.isRequired,
|
|
|
|
threeBoxDisabled: PropTypes.bool.isRequired,
|
2019-12-12 20:28:07 +01:00
|
|
|
setIpfsGateway: PropTypes.func.isRequired,
|
|
|
|
ipfsGateway: PropTypes.string.isRequired,
|
2021-10-21 21:17:03 +02:00
|
|
|
ledgerTransportType: PropTypes.oneOf(Object.values(LEDGER_TRANSPORT_TYPES)),
|
2021-11-08 16:28:40 +01:00
|
|
|
setLedgerTransportPreference: PropTypes.func.isRequired,
|
2021-05-05 15:58:29 +02:00
|
|
|
setDismissSeedBackUpReminder: PropTypes.func.isRequired,
|
|
|
|
dismissSeedBackUpReminder: PropTypes.bool.isRequired,
|
2021-10-21 21:17:03 +02:00
|
|
|
userHasALedgerAccount: PropTypes.bool.isRequired,
|
2022-03-22 20:14:59 +01:00
|
|
|
useTokenDetection: PropTypes.bool.isRequired,
|
|
|
|
setUseTokenDetection: PropTypes.func.isRequired,
|
2022-08-09 20:36:32 +02:00
|
|
|
backupUserData: PropTypes.func.isRequired,
|
|
|
|
restoreUserData: PropTypes.func.isRequired,
|
2021-02-04 19:15:23 +01:00
|
|
|
};
|
2019-03-25 17:13:23 +01:00
|
|
|
|
2019-10-17 17:25:37 +02:00
|
|
|
state = {
|
2020-01-21 23:09:53 +01:00
|
|
|
autoLockTimeLimit: this.props.autoLockTimeLimit,
|
|
|
|
lockTimeError: '',
|
2019-12-12 20:28:07 +01:00
|
|
|
ipfsGateway: this.props.ipfsGateway,
|
|
|
|
ipfsGatewayError: '',
|
2021-10-29 01:38:58 +02:00
|
|
|
showLedgerTransportWarning: false,
|
2022-08-09 20:36:32 +02:00
|
|
|
showResultMessage: false,
|
|
|
|
restoreSuccessful: true,
|
2022-09-14 02:59:04 +02:00
|
|
|
restoreMessage: null,
|
2021-02-04 19:15:23 +01:00
|
|
|
};
|
2019-03-25 17:13:23 +01:00
|
|
|
|
2022-02-22 21:58:21 +01:00
|
|
|
settingsRefs = Array(
|
2022-04-06 22:27:08 +02:00
|
|
|
getNumberOfSettingsInSection(this.context.t, this.context.t('advanced')),
|
2022-02-22 21:58:21 +01:00
|
|
|
)
|
|
|
|
.fill(undefined)
|
|
|
|
.map(() => {
|
|
|
|
return React.createRef();
|
|
|
|
});
|
|
|
|
|
|
|
|
componentDidUpdate() {
|
|
|
|
const { t } = this.context;
|
|
|
|
handleSettingsRefs(t, t('advanced'), this.settingsRefs);
|
|
|
|
}
|
2021-11-16 01:00:23 +01:00
|
|
|
|
|
|
|
componentDidMount() {
|
2022-02-22 21:58:21 +01:00
|
|
|
const { t } = this.context;
|
|
|
|
handleSettingsRefs(t, t('advanced'), this.settingsRefs);
|
2021-11-16 01:00:23 +01:00
|
|
|
}
|
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
renderMobileSync() {
|
2021-02-04 19:15:23 +01:00
|
|
|
const { t } = this.context;
|
|
|
|
const { history } = this.props;
|
2020-01-14 22:27:36 +01:00
|
|
|
|
2019-03-25 17:13:23 +01:00
|
|
|
return (
|
2020-11-03 00:41:28 +01:00
|
|
|
<div
|
2022-02-22 21:58:21 +01:00
|
|
|
ref={this.settingsRefs[1]}
|
2020-11-03 00:41:28 +01:00
|
|
|
className="settings-page__content-row"
|
|
|
|
data-testid="advanced-setting-mobile-sync"
|
|
|
|
>
|
2019-03-25 17:13:23 +01:00
|
|
|
<div className="settings-page__content-item">
|
2020-11-03 00:41:28 +01:00
|
|
|
<span>{t('syncWithMobile')}</span>
|
2019-03-25 17:13:23 +01:00
|
|
|
</div>
|
|
|
|
<div className="settings-page__content-item">
|
|
|
|
<div className="settings-page__content-item-col">
|
|
|
|
<Button
|
2019-04-16 21:35:22 +02:00
|
|
|
type="secondary"
|
2019-03-25 17:13:23 +01:00
|
|
|
large
|
2020-02-15 21:34:12 +01:00
|
|
|
onClick={(event) => {
|
2021-02-04 19:15:23 +01:00
|
|
|
event.preventDefault();
|
|
|
|
history.push(MOBILE_SYNC_ROUTE);
|
2019-03-25 17:13:23 +01:00
|
|
|
}}
|
|
|
|
>
|
2020-11-03 00:41:28 +01:00
|
|
|
{t('syncWithMobile')}
|
2019-03-25 17:13:23 +01:00
|
|
|
</Button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2021-02-04 19:15:23 +01:00
|
|
|
);
|
2019-03-25 17:13:23 +01:00
|
|
|
}
|
|
|
|
|
2022-08-09 20:36:32 +02:00
|
|
|
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 = '';
|
2022-09-14 02:59:04 +02:00
|
|
|
try {
|
|
|
|
const result = await this.props.restoreUserData(jsonString);
|
|
|
|
this.setState({
|
|
|
|
showResultMessage: true,
|
|
|
|
restoreSuccessful: result,
|
|
|
|
restoreMessage: null,
|
|
|
|
});
|
|
|
|
} catch (e) {
|
|
|
|
if (e.message.match(/Unexpected.+JSON/u)) {
|
|
|
|
this.setState({
|
|
|
|
showResultMessage: true,
|
|
|
|
restoreSuccessful: false,
|
|
|
|
restoreMessage: CORRUPT_JSON_FILE,
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}
|
2022-08-09 20:36:32 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
renderRestoreUserData() {
|
|
|
|
const { t } = this.context;
|
2022-09-14 02:59:04 +02:00
|
|
|
const { showResultMessage, restoreSuccessful, restoreMessage } = this.state;
|
|
|
|
|
|
|
|
const defaultRestoreMessage = restoreSuccessful
|
|
|
|
? t('restoreSuccessful')
|
|
|
|
: t('restoreFailed');
|
|
|
|
const restoreMessageToRender =
|
|
|
|
restoreMessage === CORRUPT_JSON_FILE
|
|
|
|
? t('dataBackupSeemsCorrupt')
|
|
|
|
: defaultRestoreMessage;
|
2022-08-09 20:36:32 +02:00
|
|
|
|
|
|
|
return (
|
|
|
|
<div
|
2022-08-16 16:22:05 +02:00
|
|
|
ref={this.settingsRefs[15]}
|
2022-08-09 20:36:32 +02:00
|
|
|
className="settings-page__content-row"
|
|
|
|
data-testid="advanced-setting-data-restore"
|
|
|
|
>
|
|
|
|
<div className="settings-page__content-item">
|
|
|
|
<span>{t('restoreUserData')}</span>
|
|
|
|
<span className="settings-page__content-description">
|
|
|
|
{t('restoreUserDataDescription')}
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
<div className="settings-page__content-item">
|
|
|
|
<div className="settings-page__content-item-col">
|
|
|
|
<label
|
|
|
|
htmlFor="restore-file"
|
|
|
|
className="button btn btn--rounded btn-secondary btn--large settings-page__button"
|
|
|
|
>
|
|
|
|
{t('restore')}
|
|
|
|
</label>
|
|
|
|
<input
|
|
|
|
id="restore-file"
|
|
|
|
style={{ visibility: 'hidden' }}
|
|
|
|
type="file"
|
|
|
|
accept=".json"
|
|
|
|
onChange={(e) => this.handleFileUpload(e)}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
{showResultMessage && (
|
|
|
|
<ActionableMessage
|
|
|
|
type={restoreSuccessful ? 'success' : 'danger'}
|
2022-09-14 02:59:04 +02:00
|
|
|
message={restoreMessageToRender}
|
|
|
|
primaryActionV2={{
|
|
|
|
label: t('dismiss'),
|
|
|
|
onClick: () => {
|
|
|
|
this.setState({
|
|
|
|
showResultMessage: false,
|
|
|
|
restoreSuccessful: true,
|
|
|
|
restoreMessage: null,
|
|
|
|
});
|
|
|
|
},
|
|
|
|
}}
|
2022-08-09 20:36:32 +02:00
|
|
|
/>
|
|
|
|
)}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
|
|
|
renderUserDataBackup() {
|
|
|
|
const { t } = this.context;
|
|
|
|
return (
|
|
|
|
<div
|
2022-08-16 16:22:05 +02:00
|
|
|
ref={this.settingsRefs[14]}
|
2022-08-09 20:36:32 +02:00
|
|
|
className="settings-page__content-row"
|
|
|
|
data-testid="advanced-setting-data-backup"
|
|
|
|
>
|
|
|
|
<div className="settings-page__content-item">
|
|
|
|
<span>{t('backupUserData')}</span>
|
|
|
|
<span className="settings-page__content-description">
|
|
|
|
{t('backupUserDataDescription')}
|
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
<div className="settings-page__content-item">
|
|
|
|
<div className="settings-page__content-item-col">
|
|
|
|
<Button
|
|
|
|
type="secondary"
|
|
|
|
large
|
|
|
|
onClick={() => {
|
|
|
|
this.props.backupUserData();
|
|
|
|
}}
|
|
|
|
>
|
|
|
|
{t('backup')}
|
|
|
|
</Button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
renderStateLogs() {
|
2021-02-04 19:15:23 +01:00
|
|
|
const { t } = this.context;
|
|
|
|
const { displayWarning } = this.props;
|
2019-03-25 17:13:23 +01:00
|
|
|
|
|
|
|
return (
|
2020-11-03 00:41:28 +01:00
|
|
|
<div
|
2022-02-22 21:58:21 +01:00
|
|
|
ref={this.settingsRefs[0]}
|
2020-11-03 00:41:28 +01:00
|
|
|
className="settings-page__content-row"
|
|
|
|
data-testid="advanced-setting-state-logs"
|
|
|
|
>
|
2019-03-25 17:13:23 +01:00
|
|
|
<div className="settings-page__content-item">
|
2020-11-03 00:41:28 +01:00
|
|
|
<span>{t('stateLogs')}</span>
|
2019-03-25 17:13:23 +01:00
|
|
|
<span className="settings-page__content-description">
|
2020-11-03 00:41:28 +01:00
|
|
|
{t('stateLogsDescription')}
|
2019-03-25 17:13:23 +01:00
|
|
|
</span>
|
|
|
|
</div>
|
|
|
|
<div className="settings-page__content-item">
|
|
|
|
<div className="settings-page__content-item-col">
|
|
|
|
<Button
|
2019-04-16 21:35:22 +02:00
|
|
|
type="secondary"
|
2019-03-25 17:13:23 +01:00
|
|
|
large
|
|
|
|
onClick={() => {
|
|
|
|
window.logStateString((err, result) => {
|
|
|
|
if (err) {
|
2021-02-04 19:15:23 +01:00
|
|
|
displayWarning(t('stateLogError'));
|
2019-03-25 17:13:23 +01:00
|
|
|
} else {
|
2021-02-04 19:15:23 +01:00
|
|
|
exportAsFile(`${t('stateLogFileName')}.json`, result);
|
2019-03-25 17:13:23 +01:00
|
|
|
}
|
2021-02-04 19:15:23 +01:00
|
|
|
});
|
2019-03-25 17:13:23 +01:00
|
|
|
}}
|
|
|
|
>
|
2020-11-03 00:41:28 +01:00
|
|
|
{t('downloadStateLogs')}
|
2019-03-25 17:13:23 +01:00
|
|
|
</Button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2021-02-04 19:15:23 +01:00
|
|
|
);
|
2019-03-25 17:13:23 +01:00
|
|
|
}
|
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
renderResetAccount() {
|
2021-02-04 19:15:23 +01:00
|
|
|
const { t } = this.context;
|
|
|
|
const { showResetAccountConfirmationModal } = this.props;
|
2019-03-25 17:13:23 +01:00
|
|
|
|
|
|
|
return (
|
2020-11-03 00:41:28 +01:00
|
|
|
<div
|
2022-02-22 21:58:21 +01:00
|
|
|
ref={this.settingsRefs[2]}
|
2020-11-03 00:41:28 +01:00
|
|
|
className="settings-page__content-row"
|
|
|
|
data-testid="advanced-setting-reset-account"
|
|
|
|
>
|
2019-03-25 17:13:23 +01:00
|
|
|
<div className="settings-page__content-item">
|
2020-11-03 00:41:28 +01:00
|
|
|
<span>{t('resetAccount')}</span>
|
2019-12-12 16:40:30 +01:00
|
|
|
<span className="settings-page__content-description">
|
2020-11-03 00:41:28 +01:00
|
|
|
{t('resetAccountDescription')}
|
2019-12-12 16:40:30 +01:00
|
|
|
</span>
|
2019-03-25 17:13:23 +01:00
|
|
|
</div>
|
|
|
|
<div className="settings-page__content-item">
|
|
|
|
<div className="settings-page__content-item-col">
|
|
|
|
<Button
|
2022-03-11 18:09:15 +01:00
|
|
|
type="danger"
|
2019-03-25 17:13:23 +01:00
|
|
|
large
|
2019-12-12 21:33:05 +01:00
|
|
|
className="settings-tab__button--red"
|
2020-02-15 21:34:12 +01:00
|
|
|
onClick={(event) => {
|
2021-02-04 19:15:23 +01:00
|
|
|
event.preventDefault();
|
2022-03-29 15:46:24 +02:00
|
|
|
this.context.trackEvent({
|
2022-04-22 18:09:10 +02:00
|
|
|
category: EVENT.CATEGORIES.SETTINGS,
|
2022-08-16 18:39:23 +02:00
|
|
|
event: EVENT_NAMES.ACCOUNT_RESET,
|
|
|
|
properties: {},
|
2021-02-04 19:15:23 +01:00
|
|
|
});
|
|
|
|
showResetAccountConfirmationModal();
|
2019-03-25 17:13:23 +01:00
|
|
|
}}
|
|
|
|
>
|
2020-11-03 00:41:28 +01:00
|
|
|
{t('resetAccount')}
|
2019-03-25 17:13:23 +01:00
|
|
|
</Button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2021-02-04 19:15:23 +01:00
|
|
|
);
|
2019-03-25 17:13:23 +01:00
|
|
|
}
|
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
renderHexDataOptIn() {
|
2021-02-04 19:15:23 +01:00
|
|
|
const { t } = this.context;
|
|
|
|
const { sendHexData, setHexDataFeatureFlag } = this.props;
|
2019-03-25 17:13:23 +01:00
|
|
|
|
|
|
|
return (
|
2020-11-03 00:41:28 +01:00
|
|
|
<div
|
2022-02-22 21:58:21 +01:00
|
|
|
ref={this.settingsRefs[4]}
|
2020-11-03 00:41:28 +01:00
|
|
|
className="settings-page__content-row"
|
|
|
|
data-testid="advanced-setting-hex-data"
|
|
|
|
>
|
2019-03-25 17:13:23 +01:00
|
|
|
<div className="settings-page__content-item">
|
2020-11-03 00:41:28 +01:00
|
|
|
<span>{t('showHexData')}</span>
|
2019-03-25 17:13:23 +01:00
|
|
|
<div className="settings-page__content-description">
|
2020-11-03 00:41:28 +01:00
|
|
|
{t('showHexDataDescription')}
|
2019-03-25 17:13:23 +01:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="settings-page__content-item">
|
|
|
|
<div className="settings-page__content-item-col">
|
|
|
|
<ToggleButton
|
|
|
|
value={sendHexData}
|
2020-02-15 21:34:12 +01:00
|
|
|
onToggle={(value) => setHexDataFeatureFlag(!value)}
|
2019-07-08 19:58:35 +02:00
|
|
|
offLabel={t('off')}
|
|
|
|
onLabel={t('on')}
|
2019-03-25 17:13:23 +01:00
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2021-02-04 19:15:23 +01:00
|
|
|
);
|
2019-03-25 17:13:23 +01:00
|
|
|
}
|
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
renderAdvancedGasInputInline() {
|
2021-02-04 19:15:23 +01:00
|
|
|
const { t } = this.context;
|
|
|
|
const { advancedInlineGas, setAdvancedInlineGasFeatureFlag } = this.props;
|
2019-03-25 17:13:23 +01:00
|
|
|
|
|
|
|
return (
|
2020-11-03 00:41:28 +01:00
|
|
|
<div
|
2022-02-22 21:58:21 +01:00
|
|
|
ref={this.settingsRefs[3]}
|
2020-11-03 00:41:28 +01:00
|
|
|
className="settings-page__content-row"
|
|
|
|
data-testid="advanced-setting-advanced-gas-inline"
|
|
|
|
>
|
2019-03-25 17:13:23 +01:00
|
|
|
<div className="settings-page__content-item">
|
2020-11-03 00:41:28 +01:00
|
|
|
<span>{t('showAdvancedGasInline')}</span>
|
2019-03-25 17:13:23 +01:00
|
|
|
<div className="settings-page__content-description">
|
2020-11-03 00:41:28 +01:00
|
|
|
{t('showAdvancedGasInlineDescription')}
|
2019-03-25 17:13:23 +01:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="settings-page__content-item">
|
|
|
|
<div className="settings-page__content-item-col">
|
|
|
|
<ToggleButton
|
|
|
|
value={advancedInlineGas}
|
2020-02-15 21:34:12 +01:00
|
|
|
onToggle={(value) => setAdvancedInlineGasFeatureFlag(!value)}
|
2019-07-08 19:58:35 +02:00
|
|
|
offLabel={t('off')}
|
|
|
|
onLabel={t('on')}
|
2019-03-25 17:13:23 +01:00
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2021-02-04 19:15:23 +01:00
|
|
|
);
|
2019-03-25 17:13:23 +01:00
|
|
|
}
|
|
|
|
|
2021-10-28 21:31:05 +02:00
|
|
|
renderToggleTestNetworks() {
|
|
|
|
const { t } = this.context;
|
|
|
|
const { showTestNetworks, setShowTestNetworks } = this.props;
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div
|
2022-02-22 21:58:21 +01:00
|
|
|
ref={this.settingsRefs[6]}
|
2021-10-28 21:31:05 +02:00
|
|
|
className="settings-page__content-row"
|
|
|
|
data-testid="advanced-setting-show-testnet-conversion"
|
|
|
|
>
|
|
|
|
<div className="settings-page__content-item">
|
|
|
|
<span>{t('showTestnetNetworks')}</span>
|
|
|
|
<div className="settings-page__content-description">
|
|
|
|
{t('showTestnetNetworksDescription')}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="settings-page__content-item">
|
|
|
|
<div className="settings-page__content-item-col">
|
|
|
|
<ToggleButton
|
|
|
|
value={showTestNetworks}
|
|
|
|
onToggle={(value) => setShowTestNetworks(!value)}
|
|
|
|
offLabel={t('off')}
|
|
|
|
onLabel={t('on')}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
renderShowConversionInTestnets() {
|
2021-02-04 19:15:23 +01:00
|
|
|
const { t } = this.context;
|
2022-07-31 20:26:40 +02:00
|
|
|
const { showFiatInTestnets, setShowFiatConversionOnTestnetsPreference } =
|
|
|
|
this.props;
|
2019-03-25 17:13:23 +01:00
|
|
|
|
|
|
|
return (
|
2020-11-03 00:41:28 +01:00
|
|
|
<div
|
2022-02-22 21:58:21 +01:00
|
|
|
ref={this.settingsRefs[5]}
|
2020-11-03 00:41:28 +01:00
|
|
|
className="settings-page__content-row"
|
|
|
|
data-testid="advanced-setting-show-testnet-conversion"
|
|
|
|
>
|
2019-03-25 17:13:23 +01:00
|
|
|
<div className="settings-page__content-item">
|
2020-11-03 00:41:28 +01:00
|
|
|
<span>{t('showFiatConversionInTestnets')}</span>
|
2019-03-25 17:13:23 +01:00
|
|
|
<div className="settings-page__content-description">
|
2020-11-03 00:41:28 +01:00
|
|
|
{t('showFiatConversionInTestnetsDescription')}
|
2019-03-25 17:13:23 +01:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="settings-page__content-item">
|
|
|
|
<div className="settings-page__content-item-col">
|
|
|
|
<ToggleButton
|
|
|
|
value={showFiatInTestnets}
|
2020-11-03 00:41:28 +01:00
|
|
|
onToggle={(value) =>
|
|
|
|
setShowFiatConversionOnTestnetsPreference(!value)
|
|
|
|
}
|
2019-07-08 19:58:35 +02:00
|
|
|
offLabel={t('off')}
|
|
|
|
onLabel={t('on')}
|
2019-03-25 17:13:23 +01:00
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2021-02-04 19:15:23 +01:00
|
|
|
);
|
2019-03-25 17:13:23 +01:00
|
|
|
}
|
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
renderUseNonceOptIn() {
|
2021-02-04 19:15:23 +01:00
|
|
|
const { t } = this.context;
|
|
|
|
const { useNonceField, setUseNonceField } = this.props;
|
2019-09-27 06:30:36 +02:00
|
|
|
|
|
|
|
return (
|
2020-11-03 00:41:28 +01:00
|
|
|
<div
|
2022-02-22 21:58:21 +01:00
|
|
|
ref={this.settingsRefs[7]}
|
2020-11-03 00:41:28 +01:00
|
|
|
className="settings-page__content-row"
|
|
|
|
data-testid="advanced-setting-custom-nonce"
|
|
|
|
>
|
2019-09-27 06:30:36 +02:00
|
|
|
<div className="settings-page__content-item">
|
2021-05-05 15:58:29 +02:00
|
|
|
<span>{t('nonceField')}</span>
|
2019-09-27 06:30:36 +02:00
|
|
|
<div className="settings-page__content-description">
|
2020-11-03 00:41:28 +01:00
|
|
|
{t('nonceFieldDescription')}
|
2019-09-27 06:30:36 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="settings-page__content-item">
|
|
|
|
<div className="settings-page__content-item-col">
|
|
|
|
<ToggleButton
|
|
|
|
value={useNonceField}
|
2020-02-15 21:34:12 +01:00
|
|
|
onToggle={(value) => setUseNonceField(!value)}
|
2019-09-27 06:30:36 +02:00
|
|
|
offLabel={t('off')}
|
|
|
|
onLabel={t('on')}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2021-02-04 19:15:23 +01:00
|
|
|
);
|
2019-09-27 06:30:36 +02:00
|
|
|
}
|
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
handleLockChange(time) {
|
2021-02-04 19:15:23 +01:00
|
|
|
const { t } = this.context;
|
|
|
|
const autoLockTimeLimit = Math.max(Number(time), 0);
|
2019-10-17 17:25:37 +02:00
|
|
|
|
|
|
|
this.setState(() => {
|
2021-02-04 19:15:23 +01:00
|
|
|
let lockTimeError = '';
|
2019-10-17 17:25:37 +02:00
|
|
|
|
2020-01-21 23:09:53 +01:00
|
|
|
if (autoLockTimeLimit > 10080) {
|
2021-02-04 19:15:23 +01:00
|
|
|
lockTimeError = t('lockTimeTooGreat');
|
2019-10-17 17:25:37 +02:00
|
|
|
}
|
|
|
|
|
|
|
|
return {
|
2020-01-21 23:09:53 +01:00
|
|
|
autoLockTimeLimit,
|
|
|
|
lockTimeError,
|
2021-02-04 19:15:23 +01:00
|
|
|
};
|
|
|
|
});
|
2019-10-17 17:25:37 +02:00
|
|
|
}
|
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
renderAutoLockTimeLimit() {
|
2021-02-04 19:15:23 +01:00
|
|
|
const { t } = this.context;
|
|
|
|
const { lockTimeError } = this.state;
|
2022-05-10 18:57:11 +02:00
|
|
|
const { setAutoLockTimeLimit } = this.props;
|
2019-05-08 20:57:21 +02:00
|
|
|
|
|
|
|
return (
|
2020-11-03 00:41:28 +01:00
|
|
|
<div
|
2022-02-22 21:58:21 +01:00
|
|
|
ref={this.settingsRefs[8]}
|
2020-11-03 00:41:28 +01:00
|
|
|
className="settings-page__content-row"
|
|
|
|
data-testid="advanced-setting-auto-lock"
|
|
|
|
>
|
2019-05-08 20:57:21 +02:00
|
|
|
<div className="settings-page__content-item">
|
2020-11-03 00:41:28 +01:00
|
|
|
<span>{t('autoLockTimeLimit')}</span>
|
2019-05-08 20:57:21 +02:00
|
|
|
<div className="settings-page__content-description">
|
2020-11-03 00:41:28 +01:00
|
|
|
{t('autoLockTimeLimitDescription')}
|
2019-05-08 20:57:21 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="settings-page__content-item">
|
|
|
|
<div className="settings-page__content-item-col">
|
|
|
|
<TextField
|
|
|
|
type="number"
|
|
|
|
id="autoTimeout"
|
|
|
|
placeholder="5"
|
2020-01-21 23:09:53 +01:00
|
|
|
value={this.state.autoLockTimeLimit}
|
2020-02-15 21:34:12 +01:00
|
|
|
onChange={(e) => this.handleLockChange(e.target.value)}
|
2020-01-21 23:09:53 +01:00
|
|
|
error={lockTimeError}
|
2019-05-08 20:57:21 +02:00
|
|
|
fullWidth
|
|
|
|
margin="dense"
|
|
|
|
min={0}
|
|
|
|
/>
|
2019-10-17 17:25:37 +02:00
|
|
|
<Button
|
|
|
|
type="primary"
|
|
|
|
className="settings-tab__rpc-save-button"
|
2020-01-21 23:09:53 +01:00
|
|
|
disabled={lockTimeError !== ''}
|
2019-05-08 20:57:21 +02:00
|
|
|
onClick={() => {
|
2021-02-04 19:15:23 +01:00
|
|
|
setAutoLockTimeLimit(this.state.autoLockTimeLimit);
|
2019-05-08 20:57:21 +02:00
|
|
|
}}
|
|
|
|
>
|
2020-11-03 00:41:28 +01:00
|
|
|
{t('save')}
|
2019-10-17 17:25:37 +02:00
|
|
|
</Button>
|
2019-05-08 20:57:21 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2021-02-04 19:15:23 +01:00
|
|
|
);
|
2019-05-08 20:57:21 +02:00
|
|
|
}
|
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
renderThreeBoxControl() {
|
2021-02-04 19:15:23 +01:00
|
|
|
const { t } = this.context;
|
2019-09-16 19:11:01 +02:00
|
|
|
const {
|
|
|
|
threeBoxSyncingAllowed,
|
|
|
|
setThreeBoxSyncingPermission,
|
|
|
|
threeBoxDisabled,
|
2021-02-04 19:15:23 +01:00
|
|
|
} = this.props;
|
2019-09-16 19:11:01 +02:00
|
|
|
|
2021-02-04 19:15:23 +01:00
|
|
|
let allowed = threeBoxSyncingAllowed;
|
|
|
|
let description = t('syncWithThreeBoxDescription');
|
2019-09-16 19:11:01 +02:00
|
|
|
|
|
|
|
if (threeBoxDisabled) {
|
2021-02-04 19:15:23 +01:00
|
|
|
allowed = false;
|
|
|
|
description = t('syncWithThreeBoxDisabled');
|
2019-09-16 19:11:01 +02:00
|
|
|
}
|
|
|
|
return (
|
2020-11-03 00:41:28 +01:00
|
|
|
<div
|
2022-02-22 21:58:21 +01:00
|
|
|
ref={this.settingsRefs[9]}
|
2020-11-03 00:41:28 +01:00
|
|
|
className="settings-page__content-row"
|
|
|
|
data-testid="advanced-setting-3box"
|
|
|
|
>
|
2019-09-16 19:11:01 +02:00
|
|
|
<div className="settings-page__content-item">
|
2020-11-03 00:41:28 +01:00
|
|
|
<span>{t('syncWithThreeBox')}</span>
|
2019-09-16 19:11:01 +02:00
|
|
|
<div className="settings-page__content-description">
|
2020-11-03 00:41:28 +01:00
|
|
|
{description}
|
2019-09-16 19:11:01 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div
|
|
|
|
className={classnames('settings-page__content-item', {
|
|
|
|
'settings-page__content-item--disabled': threeBoxDisabled,
|
|
|
|
})}
|
|
|
|
>
|
|
|
|
<div className="settings-page__content-item-col">
|
|
|
|
<ToggleButton
|
|
|
|
value={allowed}
|
2020-02-15 21:34:12 +01:00
|
|
|
onToggle={(value) => {
|
2019-09-16 19:11:01 +02:00
|
|
|
if (!threeBoxDisabled) {
|
2021-02-04 19:15:23 +01:00
|
|
|
setThreeBoxSyncingPermission(!value);
|
2019-09-16 19:11:01 +02:00
|
|
|
}
|
|
|
|
}}
|
|
|
|
offLabel={t('off')}
|
|
|
|
onLabel={t('on')}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2021-02-04 19:15:23 +01:00
|
|
|
);
|
2019-09-16 19:11:01 +02:00
|
|
|
}
|
|
|
|
|
2021-04-26 20:05:48 +02:00
|
|
|
renderLedgerLiveControl() {
|
|
|
|
const { t } = this.context;
|
2021-10-21 21:17:03 +02:00
|
|
|
const {
|
|
|
|
ledgerTransportType,
|
2021-11-08 16:28:40 +01:00
|
|
|
setLedgerTransportPreference,
|
2021-10-21 21:17:03 +02:00
|
|
|
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;
|
2021-04-26 20:05:48 +02:00
|
|
|
|
|
|
|
return (
|
2022-02-22 21:58:21 +01:00
|
|
|
<div ref={this.settingsRefs[11]} className="settings-page__content-row">
|
2021-04-26 20:05:48 +02:00
|
|
|
<div className="settings-page__content-item">
|
2021-10-21 21:17:03 +02:00
|
|
|
<span>{t('preferredLedgerConnectionType')}</span>
|
2021-04-26 20:05:48 +02:00
|
|
|
<div className="settings-page__content-description">
|
2021-10-21 21:17:03 +02:00
|
|
|
{t('ledgerConnectionPreferenceDescription', [
|
|
|
|
recommendedLedgerOption,
|
|
|
|
<Button
|
|
|
|
key="ledger-connection-settings-learn-more"
|
|
|
|
type="link"
|
2022-08-23 16:19:31 +02:00
|
|
|
href={ZENDESK_URLS.HARDWARE_CONNECTION}
|
2021-10-21 21:17:03 +02:00
|
|
|
target="_blank"
|
|
|
|
rel="noopener noreferrer"
|
|
|
|
className="settings-page__inline-link"
|
|
|
|
>
|
|
|
|
{t('learnMore')}
|
|
|
|
</Button>,
|
|
|
|
])}
|
2021-04-26 20:05:48 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="settings-page__content-item">
|
|
|
|
<div className="settings-page__content-item-col">
|
2021-10-21 21:17:03 +02:00
|
|
|
<Dropdown
|
|
|
|
id="select-ledger-transport-type"
|
|
|
|
options={transportTypeOptions}
|
|
|
|
selectedOption={ledgerTransportType}
|
|
|
|
onChange={async (transportType) => {
|
2021-10-29 01:38:58 +02:00
|
|
|
if (
|
|
|
|
ledgerTransportType === LEDGER_TRANSPORT_TYPES.LIVE &&
|
|
|
|
transportType === LEDGER_TRANSPORT_TYPES.WEBHID
|
|
|
|
) {
|
|
|
|
this.setState({ showLedgerTransportWarning: true });
|
|
|
|
}
|
2021-11-08 16:28:40 +01:00
|
|
|
setLedgerTransportPreference(transportType);
|
2021-10-21 21:17:03 +02:00
|
|
|
if (
|
|
|
|
transportType === LEDGER_TRANSPORT_TYPES.WEBHID &&
|
|
|
|
userHasALedgerAccount
|
|
|
|
) {
|
|
|
|
await window.navigator.hid.requestDevice({
|
|
|
|
filters: [{ vendorId: LEDGER_USB_VENDOR_ID }],
|
|
|
|
});
|
|
|
|
}
|
|
|
|
}}
|
2021-04-26 20:05:48 +02:00
|
|
|
/>
|
2021-10-29 01:38:58 +02:00
|
|
|
{this.state.showLedgerTransportWarning ? (
|
|
|
|
<Dialog type="message">
|
|
|
|
<div className="settings-page__content-item-dialog">
|
|
|
|
{t('ledgerTransportChangeWarning')}
|
|
|
|
</div>
|
|
|
|
</Dialog>
|
|
|
|
) : null}
|
2021-04-26 20:05:48 +02:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
handleIpfsGatewayChange(url) {
|
2021-02-04 19:15:23 +01:00
|
|
|
const { t } = this.context;
|
2019-12-12 20:28:07 +01:00
|
|
|
|
|
|
|
this.setState(() => {
|
2021-02-04 19:15:23 +01:00
|
|
|
let ipfsGatewayError = '';
|
2019-12-12 20:28:07 +01:00
|
|
|
|
|
|
|
try {
|
2021-02-04 19:15:23 +01:00
|
|
|
const urlObj = new URL(addUrlProtocolPrefix(url));
|
2019-12-12 20:28:07 +01:00
|
|
|
if (!urlObj.host) {
|
2021-02-04 19:15:23 +01:00
|
|
|
throw new Error();
|
2019-12-12 20:28:07 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
// don't allow the use of this gateway
|
|
|
|
if (urlObj.host === 'gateway.ipfs.io') {
|
2021-02-04 19:15:23 +01:00
|
|
|
throw new Error('Forbidden gateway');
|
2019-12-12 20:28:07 +01:00
|
|
|
}
|
|
|
|
} catch (error) {
|
2020-11-03 00:41:28 +01:00
|
|
|
ipfsGatewayError =
|
2019-12-12 20:28:07 +01:00
|
|
|
error.message === 'Forbidden gateway'
|
|
|
|
? t('forbiddenIpfsGateway')
|
2021-02-04 19:15:23 +01:00
|
|
|
: t('invalidIpfsGateway');
|
2019-12-12 20:28:07 +01:00
|
|
|
}
|
|
|
|
|
|
|
|
return {
|
|
|
|
ipfsGateway: url,
|
|
|
|
ipfsGatewayError,
|
2021-02-04 19:15:23 +01:00
|
|
|
};
|
|
|
|
});
|
2019-12-12 20:28:07 +01:00
|
|
|
}
|
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
handleIpfsGatewaySave() {
|
2021-12-02 00:46:26 +01:00
|
|
|
const url = new URL(addUrlProtocolPrefix(this.state.ipfsGateway));
|
|
|
|
const { host } = url;
|
|
|
|
|
|
|
|
this.props.setIpfsGateway(host);
|
2019-12-12 20:28:07 +01:00
|
|
|
}
|
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
renderIpfsGatewayControl() {
|
2021-02-04 19:15:23 +01:00
|
|
|
const { t } = this.context;
|
|
|
|
const { ipfsGatewayError } = this.state;
|
2019-12-12 20:28:07 +01:00
|
|
|
|
|
|
|
return (
|
2020-11-03 00:41:28 +01:00
|
|
|
<div
|
2022-02-22 21:58:21 +01:00
|
|
|
ref={this.settingsRefs[10]}
|
2020-11-03 00:41:28 +01:00
|
|
|
className="settings-page__content-row"
|
|
|
|
data-testid="advanced-setting-ipfs-gateway"
|
|
|
|
>
|
2019-12-12 20:28:07 +01:00
|
|
|
<div className="settings-page__content-item">
|
2020-11-03 00:41:28 +01:00
|
|
|
<span>{t('ipfsGateway')}</span>
|
2019-12-12 20:28:07 +01:00
|
|
|
<div className="settings-page__content-description">
|
2020-11-03 00:41:28 +01:00
|
|
|
{t('ipfsGatewayDescription')}
|
2019-12-12 20:28:07 +01:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="settings-page__content-item">
|
|
|
|
<div className="settings-page__content-item-col">
|
|
|
|
<TextField
|
|
|
|
type="text"
|
|
|
|
value={this.state.ipfsGateway}
|
2020-02-15 21:34:12 +01:00
|
|
|
onChange={(e) => this.handleIpfsGatewayChange(e.target.value)}
|
2019-12-12 20:28:07 +01:00
|
|
|
error={ipfsGatewayError}
|
|
|
|
fullWidth
|
|
|
|
margin="dense"
|
|
|
|
/>
|
|
|
|
<Button
|
|
|
|
type="primary"
|
|
|
|
className="settings-tab__rpc-save-button"
|
|
|
|
disabled={Boolean(ipfsGatewayError)}
|
|
|
|
onClick={() => {
|
2021-02-04 19:15:23 +01:00
|
|
|
this.handleIpfsGatewaySave();
|
2019-12-12 20:28:07 +01:00
|
|
|
}}
|
|
|
|
>
|
2020-11-03 00:41:28 +01:00
|
|
|
{t('save')}
|
2019-12-12 20:28:07 +01:00
|
|
|
</Button>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
2021-02-04 19:15:23 +01:00
|
|
|
);
|
2019-12-12 20:28:07 +01:00
|
|
|
}
|
|
|
|
|
2021-05-05 15:58:29 +02:00
|
|
|
renderDismissSeedBackupReminderControl() {
|
|
|
|
const { t } = this.context;
|
2022-07-31 20:26:40 +02:00
|
|
|
const { dismissSeedBackUpReminder, setDismissSeedBackUpReminder } =
|
|
|
|
this.props;
|
2021-05-05 15:58:29 +02:00
|
|
|
|
|
|
|
return (
|
|
|
|
<div
|
2022-02-22 21:58:21 +01:00
|
|
|
ref={this.settingsRefs[12]}
|
2021-05-05 15:58:29 +02:00
|
|
|
className="settings-page__content-row"
|
|
|
|
data-testid="advanced-setting-dismiss-reminder"
|
|
|
|
>
|
|
|
|
<div className="settings-page__content-item">
|
|
|
|
<span>{t('dismissReminderField')}</span>
|
|
|
|
<div className="settings-page__content-description">
|
|
|
|
{t('dismissReminderDescriptionField')}
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="settings-page__content-item">
|
|
|
|
<div className="settings-page__content-item-col">
|
|
|
|
<ToggleButton
|
|
|
|
value={dismissSeedBackUpReminder}
|
|
|
|
onToggle={(value) => setDismissSeedBackUpReminder(!value)}
|
|
|
|
offLabel={t('off')}
|
|
|
|
onLabel={t('on')}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2022-03-22 20:14:59 +01:00
|
|
|
renderTokenDetectionToggle() {
|
|
|
|
const { t } = this.context;
|
|
|
|
const { useTokenDetection, setUseTokenDetection } = this.props;
|
|
|
|
|
|
|
|
return (
|
|
|
|
<div
|
|
|
|
ref={this.settingsRefs[13]}
|
|
|
|
className="settings-page__content-row"
|
|
|
|
data-testid="advanced-setting-token-detection"
|
|
|
|
>
|
|
|
|
<div className="settings-page__content-item">
|
|
|
|
<span>{t('tokenDetection')}</span>
|
|
|
|
<div className="settings-page__content-description">
|
2022-08-10 03:26:25 +02:00
|
|
|
{t('tokenDetectionDescription')}
|
2022-03-22 20:14:59 +01:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div className="settings-page__content-item">
|
|
|
|
<div className="settings-page__content-item-col">
|
|
|
|
<ToggleButton
|
|
|
|
value={useTokenDetection}
|
|
|
|
onToggle={(value) => {
|
2022-03-29 15:46:24 +02:00
|
|
|
this.context.trackEvent({
|
2022-04-22 18:09:10 +02:00
|
|
|
category: EVENT.CATEGORIES.SETTINGS,
|
2022-03-29 15:46:24 +02:00
|
|
|
event: 'Token Detection',
|
|
|
|
properties: {
|
2022-03-22 20:14:59 +01:00
|
|
|
action: 'Token Detection',
|
2022-03-29 15:46:24 +02:00
|
|
|
legacy_event: true,
|
2022-03-22 20:14:59 +01:00
|
|
|
},
|
|
|
|
});
|
|
|
|
setUseTokenDetection(!value);
|
|
|
|
}}
|
|
|
|
offLabel={t('off')}
|
|
|
|
onLabel={t('on')}
|
|
|
|
/>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
);
|
|
|
|
}
|
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
render() {
|
2021-02-04 19:15:23 +01:00
|
|
|
const { warning } = this.props;
|
2019-03-25 17:13:23 +01:00
|
|
|
|
2021-11-02 08:24:24 +01:00
|
|
|
const notUsingFirefox = getPlatform() !== PLATFORM_FIREFOX;
|
|
|
|
|
2019-03-25 17:13:23 +01:00
|
|
|
return (
|
|
|
|
<div className="settings-page__body">
|
2021-10-21 18:11:31 +02:00
|
|
|
{warning ? <div className="settings-tab__error">{warning}</div> : null}
|
2020-11-03 00:41:28 +01:00
|
|
|
{this.renderStateLogs()}
|
|
|
|
{this.renderMobileSync()}
|
|
|
|
{this.renderResetAccount()}
|
|
|
|
{this.renderAdvancedGasInputInline()}
|
2022-03-22 20:14:59 +01:00
|
|
|
{this.renderTokenDetectionToggle()}
|
2020-11-03 00:41:28 +01:00
|
|
|
{this.renderHexDataOptIn()}
|
|
|
|
{this.renderShowConversionInTestnets()}
|
2021-10-28 21:31:05 +02:00
|
|
|
{this.renderToggleTestNetworks()}
|
2020-11-03 00:41:28 +01:00
|
|
|
{this.renderUseNonceOptIn()}
|
|
|
|
{this.renderAutoLockTimeLimit()}
|
2022-08-09 20:36:32 +02:00
|
|
|
{this.renderUserDataBackup()}
|
|
|
|
{this.renderRestoreUserData()}
|
2020-11-03 00:41:28 +01:00
|
|
|
{this.renderThreeBoxControl()}
|
|
|
|
{this.renderIpfsGatewayControl()}
|
2021-11-02 08:24:24 +01:00
|
|
|
{notUsingFirefox ? this.renderLedgerLiveControl() : null}
|
2021-05-05 15:58:29 +02:00
|
|
|
{this.renderDismissSeedBackupReminderControl()}
|
2019-03-25 17:13:23 +01:00
|
|
|
</div>
|
2021-02-04 19:15:23 +01:00
|
|
|
);
|
2019-03-25 17:13:23 +01:00
|
|
|
}
|
|
|
|
}
|
2019-12-12 20:28:07 +01:00
|
|
|
|
2020-11-03 00:41:28 +01:00
|
|
|
function addUrlProtocolPrefix(urlString) {
|
|
|
|
if (!urlString.match(/(^http:\/\/)|(^https:\/\/)/u)) {
|
2021-02-04 19:15:23 +01:00
|
|
|
return `https://${urlString}`;
|
2019-12-12 20:28:07 +01:00
|
|
|
}
|
2021-02-04 19:15:23 +01:00
|
|
|
return urlString;
|
2019-12-12 20:28:07 +01:00
|
|
|
}
|