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 (
{
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()}
);
}
}