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