1
0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-04 23:14:56 +01:00
metamask-extension/ui/pages/settings/experimental-tab/experimental-tab.component.js

287 lines
8.7 KiB
JavaScript
Raw Normal View History

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,
2022-03-29 15:46:24 +02:00
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 (
<div
ref={this.settingsRefs[2]}
className="settings-page__content-row--dependent"
>
<div className="settings-page__content-item">
<span>{t('useCollectibleDetection')}</span>
<div className="settings-page__content-description">
{t('useCollectibleDetectionDescription')}
</div>
</div>
<div className="settings-page__content-item">
<div className="settings-page__content-item-col">
<ToggleButton
value={useNftDetection}
onToggle={(value) => {
2022-03-29 15:46:24 +02:00
this.context.trackEvent({
category: EVENT.CATEGORIES.SETTINGS,
2022-03-29 15:46:24 +02:00
event: 'Collectible Detection',
properties: {
action: 'Collectible Detection',
2022-03-29 15:46:24 +02:00
legacy_event: true,
},
});
if (!value && !openSeaEnabled) {
setOpenSeaEnabled(!value);
}
setUseNftDetection(!value);
}}
offLabel={t('off')}
onLabel={t('on')}
/>
</div>
</div>
</div>
);
}
renderOpenSeaEnabledToggle() {
if (!process.env.COLLECTIBLES_V1) {
return null;
}
const { t } = this.context;
const {
openSeaEnabled,
setOpenSeaEnabled,
useNftDetection,
setUseNftDetection,
} = this.props;
return (
<div
ref={this.settingsRefs[1]}
className="settings-page__content-row--parent"
>
<div className="settings-page__content-item">
<span>{t('enableOpenSeaAPI')}</span>
<div className="settings-page__content-description">
{t('enableOpenSeaAPIDescription')}
</div>
</div>
<div className="settings-page__content-item">
<div className="settings-page__content-item-col">
<ToggleButton
value={openSeaEnabled}
onToggle={(value) => {
2022-03-29 15:46:24 +02:00
this.context.trackEvent({
category: EVENT.CATEGORIES.SETTINGS,
2022-03-29 15:46:24 +02:00
event: 'Enabled/Disable OpenSea',
properties: {
action: 'Enabled/Disable OpenSea',
2022-03-29 15:46:24 +02:00
legacy_event: true,
},
});
// value is positive when being toggled off
if (value && useNftDetection) {
setUseNftDetection(false);
}
setOpenSeaEnabled(!value);
}}
offLabel={t('off')}
onLabel={t('on')}
/>
</div>
</div>
</div>
);
}
renderEIP1559V2EnabledToggle() {
const { t } = this.context;
const { eip1559V2Enabled, setEIP1559V2Enabled } = this.props;
return (
<div ref={this.settingsRefs[3]} className="settings-page__content-row">
<div className="settings-page__content-item">
<span>{t('enableEIP1559V2')}</span>
<div className="settings-page__content-description">
{t('enableEIP1559V2Description', [
<a
key="eip_page_link"
href="https://metamask.io/1559.html"
rel="noopener noreferrer"
target="_blank"
>
{t('learnMoreUpperCase')}
</a>,
])}
</div>
</div>
<div className="settings-page__content-item">
<div className="settings-page__content-item-col">
<ToggleButton
value={eip1559V2Enabled}
onToggle={(value) => {
2022-03-29 15:46:24 +02:00
this.context.trackEvent({
category: EVENT.CATEGORIES.SETTINGS,
event: 'Enable/Disable Advanced Gas UI',
2022-03-29 15:46:24 +02:00
properties: {
action: 'Enable/Disable Advanced Gas UI',
2022-03-29 15:46:24 +02:00
legacy_event: true,
},
});
setEIP1559V2Enabled(!value);
}}
offLabel={t('off')}
onLabel={t('on')}
/>
</div>
</div>
</div>
);
}
renderImprovedTokenAllowanceToggle() {
const { t } = this.context;
const { improvedTokenAllowanceEnabled, setImprovedTokenAllowanceEnabled } =
this.props;
return (
<div ref={this.settingsRefs[2]} className="settings-page__content-row">
<div className="settings-page__content-item">
<span>{t('improvedTokenAllowance')}</span>
<div className="settings-page__content-description">
{t('improvedTokenAllowanceDescription')}
</div>
</div>
<div className="settings-page__content-item">
<div className="settings-page__content-item-col">
<ToggleButton
value={improvedTokenAllowanceEnabled}
onToggle={(value) => {
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')}
/>
</div>
</div>
</div>
);
}
renderTransactionSecurityCheckToggle() {
const { t } = this.context;
const {
transactionSecurityCheckEnabled,
setTransactionSecurityCheckEnabled,
} = this.props;
return (
<div ref={this.settingsRefs[1]} className="settings-page__content-row">
<div className="settings-page__content-item">
<span>{t('transactionSecurityCheck')}</span>
<div className="settings-page__content-description">
{t('transactionSecurityCheckDescription')}
</div>
</div>
<div className="settings-page__content-item">
<div className="settings-page__content-item-col">
<ToggleButton
value={transactionSecurityCheckEnabled}
onToggle={(value) => {
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')}
/>
</div>
</div>
</div>
);
}
render() {
return (
<div className="settings-page__body">
{process.env.TRANSACTION_SECURITY_PROVIDER &&
this.renderTransactionSecurityCheckToggle()}
{this.renderImprovedTokenAllowanceToggle()}
{this.renderOpenSeaEnabledToggle()}
{this.renderCollectibleDetectionToggle()}
{this.renderEIP1559V2EnabledToggle()}
</div>
);
}
}