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 Dropdown from '../../../components/ui/dropdown'; import { EVENT } from '../../../../shared/constants/metametrics'; import { THEME_TYPE } from './experimental-tab.constant'; export default class ExperimentalTab extends PureComponent { static contextTypes = { t: PropTypes.func, trackEvent: PropTypes.func, }; static propTypes = { useTokenDetection: PropTypes.bool, setUseTokenDetection: PropTypes.func, useCollectibleDetection: PropTypes.bool, setUseCollectibleDetection: PropTypes.func, setOpenSeaEnabled: PropTypes.func, openSeaEnabled: PropTypes.bool, eip1559V2Enabled: PropTypes.bool, setEIP1559V2Enabled: PropTypes.func, theme: PropTypes.string, setTheme: 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); } renderTokenDetectionToggle() { const { t } = this.context; const { useTokenDetection, setUseTokenDetection } = this.props; return (
{t('useTokenDetection')}
{t('useTokenDetectionDescription')}
{ 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')} />
); } renderCollectibleDetectionToggle() { if (!process.env.COLLECTIBLES_V1) { return null; } const { t } = this.context; const { useCollectibleDetection, setUseCollectibleDetection, 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); } setUseCollectibleDetection(!value); }} offLabel={t('off')} onLabel={t('on')} />
); } renderOpenSeaEnabledToggle() { if (!process.env.COLLECTIBLES_V1) { return null; } const { t } = this.context; const { openSeaEnabled, setOpenSeaEnabled, useCollectibleDetection, setUseCollectibleDetection, } = 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 && useCollectibleDetection) { setUseCollectibleDetection(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: 'Enabled/Disable OpenSea', properties: { action: 'Enabled/Disable OpenSea', legacy_event: true, }, }); setEIP1559V2Enabled(!value); }} offLabel={t('off')} onLabel={t('on')} />
); } renderTheme() { const { t } = this.context; const { theme, setTheme } = this.props; const themesOptions = [ { name: t('lightTheme'), value: THEME_TYPE.LIGHT, }, { name: t('darkTheme'), value: THEME_TYPE.DARK, }, { name: t('osTheme'), value: THEME_TYPE.OS, }, ]; const onChange = (newTheme) => { this.context.trackEvent({ category: EVENT.CATEGORIES.SETTINGS, event: 'Theme Changed', properties: { theme_selected: newTheme, }, }); setTheme(newTheme); }; return (
{this.context.t('theme')}
{this.context.t('themeDescription')}
); } render() { return (
{/* TODO: Remove during TOKEN_DETECTION_V2 feature flag clean up */} {process.env.TOKEN_DETECTION_V2 ? null : this.renderTokenDetectionToggle()} {this.renderOpenSeaEnabledToggle()} {this.renderCollectibleDetectionToggle()} {this.renderEIP1559V2EnabledToggle()} {this.renderTheme()}
); } }