import React, { PureComponent } from 'react'; import PropTypes from 'prop-types'; import ToggleButton from '../../../components/ui/toggle-button'; import { getNumberOfSettingsInSection, handleSettingsRefs, } from '../../../helpers/utils/settings-search'; import { EVENT } from '../../../../shared/constants/metametrics'; export default class ExperimentalTab extends PureComponent { static contextTypes = { t: PropTypes.func, trackEvent: PropTypes.func, }; static propTypes = { useNftDetection: PropTypes.bool, setUseNftDetection: PropTypes.func, setOpenSeaEnabled: PropTypes.func, openSeaEnabled: PropTypes.bool, eip1559V2Enabled: PropTypes.bool, setEIP1559V2Enabled: PropTypes.func, improvedTokenAllowanceEnabled: PropTypes.bool, setImprovedTokenAllowanceEnabled: PropTypes.func, transactionSecurityCheckEnabled: PropTypes.bool, setTransactionSecurityCheckEnabled: PropTypes.func, }; settingsRefs = Array( getNumberOfSettingsInSection( this.context.t, this.context.t('experimental'), ), ) .fill(undefined) .map(() => { return React.createRef(); }); componentDidUpdate() { const { t } = this.context; handleSettingsRefs(t, t('experimental'), this.settingsRefs); } componentDidMount() { const { t } = this.context; handleSettingsRefs(t, t('experimental'), this.settingsRefs); } renderCollectibleDetectionToggle() { if (!process.env.COLLECTIBLES_V1) { return null; } const { t } = this.context; const { useNftDetection, setUseNftDetection, openSeaEnabled, setOpenSeaEnabled, } = this.props; return (
{t('useCollectibleDetection')}
{t('useCollectibleDetectionDescription')}
{ this.context.trackEvent({ category: EVENT.CATEGORIES.SETTINGS, event: 'Collectible Detection', properties: { action: 'Collectible Detection', legacy_event: true, }, }); if (!value && !openSeaEnabled) { setOpenSeaEnabled(!value); } setUseNftDetection(!value); }} offLabel={t('off')} onLabel={t('on')} />
); } renderOpenSeaEnabledToggle() { if (!process.env.COLLECTIBLES_V1) { return null; } const { t } = this.context; const { openSeaEnabled, setOpenSeaEnabled, useNftDetection, setUseNftDetection, } = this.props; return (
{t('enableOpenSeaAPI')}
{t('enableOpenSeaAPIDescription')}
{ this.context.trackEvent({ category: EVENT.CATEGORIES.SETTINGS, event: 'Enabled/Disable OpenSea', properties: { action: 'Enabled/Disable OpenSea', legacy_event: true, }, }); // value is positive when being toggled off if (value && useNftDetection) { setUseNftDetection(false); } setOpenSeaEnabled(!value); }} offLabel={t('off')} onLabel={t('on')} />
); } renderEIP1559V2EnabledToggle() { const { t } = this.context; const { eip1559V2Enabled, setEIP1559V2Enabled } = this.props; return (
{t('enableEIP1559V2')}
{t('enableEIP1559V2Description', [ {t('learnMoreUpperCase')} , ])}
{ this.context.trackEvent({ category: EVENT.CATEGORIES.SETTINGS, event: 'Enable/Disable Advanced Gas UI', properties: { action: 'Enable/Disable Advanced Gas UI', legacy_event: true, }, }); setEIP1559V2Enabled(!value); }} offLabel={t('off')} onLabel={t('on')} />
); } renderImprovedTokenAllowanceToggle() { const { t } = this.context; const { improvedTokenAllowanceEnabled, setImprovedTokenAllowanceEnabled } = this.props; return (
{t('improvedTokenAllowance')}
{t('improvedTokenAllowanceDescription')}
{ this.context.trackEvent({ category: EVENT.CATEGORIES.SETTINGS, event: 'Enabled/Disable ImprovedTokenAllowance', properties: { action: 'Enabled/Disable ImprovedTokenAllowance', legacy_event: true, }, }); setImprovedTokenAllowanceEnabled(!value); }} offLabel={t('off')} onLabel={t('on')} />
); } renderTransactionSecurityCheckToggle() { const { t } = this.context; const { transactionSecurityCheckEnabled, setTransactionSecurityCheckEnabled, } = this.props; return (
{t('transactionSecurityCheck')}
{t('transactionSecurityCheckDescription')}
{ this.context.trackEvent({ category: EVENT.CATEGORIES.SETTINGS, event: 'Enabled/Disable TransactionSecurityCheck', properties: { action: 'Enabled/Disable TransactionSecurityCheck', legacy_event: true, }, }); setTransactionSecurityCheckEnabled(!value); }} offLabel={t('off')} onLabel={t('on')} />
); } render() { return (
{process.env.TRANSACTION_SECURITY_PROVIDER && this.renderTransactionSecurityCheckToggle()} {this.renderImprovedTokenAllowanceToggle()} {this.renderOpenSeaEnabledToggle()} {this.renderCollectibleDetectionToggle()} {this.renderEIP1559V2EnabledToggle()}
); } }