m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 01:47:00 +01:00
Code

Move Token Detection toggle to Advanced tab. (#13977)

Browse Source
This commit is contained in:
Niranjana Binoy 2022-03-22 15:14:59 -04:00 committed by GitHub
parent 8d295f189b
commit 90d6143071
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
11 changed files with 200 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.metamaskrc.dist
View File

@ -5,3 +5,4 @@ SEGMENT_WRITE_KEY=
ONBOARDING_V2=
SWAPS_USE_DEV_APIS=
COLLECTIBLES_V1=
TOKEN_DETECTION_V2=

6
app/_locales/en/messages.json generated
View File

@ -3542,9 +3542,15 @@
"tokenDetails": {
"message": "Token details"
},
"tokenDetection": {
"message": "Token detection"
},
"tokenDetectionAnnouncement": {
"message": "New! Improved token detection is available on Ethereum Mainnet as an experimental feature. $1"
},
"tokenDetectionToggleDescription": {
"message": "ConsenSys’ token API aggregates a list of tokens from various third party token lists. Turning it off will stop detecting new tokens added to your wallet, but will keep the option to search for tokens to import."
},
"tokenId": {
"message": "Token ID"
},

2
development/build/scripts.js
View File

@ -35,6 +35,7 @@ const metamaskrc = require('rc')('metamask', {
ONBOARDING_V2: process.env.ONBOARDING_V2,
COLLECTIBLES_V1: process.env.COLLECTIBLES_V1,
DARK_MODE_V1: process.env.DARK_MODE_V1,
TOKEN_DETECTION_V2: process.env.TOKEN_DETECTION_V2,
SEGMENT_HOST: process.env.SEGMENT_HOST,
SEGMENT_WRITE_KEY: process.env.SEGMENT_WRITE_KEY,
SEGMENT_BETA_WRITE_KEY: process.env.SEGMENT_BETA_WRITE_KEY,
@ -812,6 +813,7 @@ function getEnvironmentVariables({ buildType, devMode, testing, version }) {
ONBOARDING_V2: metamaskrc.ONBOARDING_V2 === '1',
COLLECTIBLES_V1: metamaskrc.COLLECTIBLES_V1 === '1',
DARK_MODE_V1: metamaskrc.DARK_MODE_V1 === '1',
TOKEN_DETECTION_V2: metamaskrc.TOKEN_DETECTION_V2 === '1',
};
}

38
ui/helpers/utils/settings-search.js
View File

@ -22,7 +22,7 @@ function showHideSettings(t, settings) {
}
export function getSettingsRoutes(t) {
const settingsRoutesList = [
let settingsRoutesList = [
{
tab: t('general'),
section: t('currencyConversion'),
@ -271,14 +271,6 @@ export function getSettingsRoutes(t) {
image: 'network-icon.svg',
id: 31,
},
{
tab: t('experimental'),
section: t('useTokenDetection'),
description: t('useTokenDetectionDescription'),
route: `${EXPERIMENTAL_ROUTE}#token-description`,
image: 'experimental-icon.svg',
id: 32,
},
{
tab: t('experimental'),
section: t('enableOpenSeaAPI'),
@ -366,6 +358,34 @@ export function getSettingsRoutes(t) {
},
];
if (process.env.TOKEN_DETECTION_V2) {
settingsRoutesList = [
...settingsRoutesList,
{
/** TODO: Remove during TOKEN_DETECTION_V2 feature flag clean up */
tab: t('advanced'),
section: t('tokenDetection'),
description: t('tokenDetectionToggleDescription'),
route: `${ADVANCED_ROUTE}#token-description`,
image: 'advanced-icon.svg',
id: 32,
},
];
} else {
settingsRoutesList = [
...settingsRoutesList,
{
/** TODO: Remove during TOKEN_DETECTION_V2 feature flag clean up */
tab: t('experimental'),
section: t('useTokenDetection'),
description: t('useTokenDetectionDescription'),
route: `${EXPERIMENTAL_ROUTE}#token-description`,
image: 'experimental-icon.svg',
id: 32,
},
];
}
// TODO: write to json file?
return showHideSettings(t, settingsRoutesList);
}

24
ui/helpers/utils/settings-search.test.js
View File

@ -111,10 +111,15 @@ const t = (key) => {
return 'Localhost 8545';
case 'experimental':
return 'Experimental';
/** TODO: Remove during TOKEN_DETECTION_V2 feature flag clean up */
case 'useTokenDetection':
return 'Use Token Detection';
case 'useTokenDetectionDescription':
return 'We use third-party APIs to detect and display new tokens sent to your wallet. Turn off if you don’t want MetaMask to pull data from those services.';
case 'tokenDetection':
return 'Token detection';
case 'tokenDetectionToggleDescription':
return 'ConsenSys’ token API aggregates a list of tokens from various third party token lists. Turning it off will stop detecting new tokens added to your wallet, but will keep the option to search for tokens to import.';
case 'enableOpenSeaAPI':
return 'Enable OpenSea API';
case 'enableOpenSeaAPIDescription':
@ -416,15 +421,6 @@ describe('Settings Search Utils', () => {
section: 'Localhost 8545',
tab: 'Networks',
},
{
description:
'We use third-party APIs to detect and display new tokens sent to your wallet. Turn off if you don’t want MetaMask to pull data from those services.',
id: 32,
image: 'experimental-icon.svg',
route: '/settings/experimental#token-description',
section: 'Use Token Detection',
tab: 'Experimental',
},
{
description: 'MetaMask is designed and built around the world.',
id: 35,
@ -489,6 +485,16 @@ describe('Settings Search Utils', () => {
section: 'Contact us',
tab: 'About',
},
{
/** TODO: Remove during TOKEN_DETECTION_V2 feature flag clean up */
description:
'We use third-party APIs to detect and display new tokens sent to your wallet. Turn off if you don’t want MetaMask to pull data from those services.',
id: 32,
image: 'experimental-icon.svg',
route: '/settings/experimental#token-description',
section: 'Use Token Detection',
tab: 'Experimental',
},
];
expect(getSettingsRoutes(t)).toStrictEqual(settingsListExcepted);
});

46
ui/pages/settings/advanced-tab/advanced-tab.component.js
View File

@ -55,6 +55,8 @@ export default class AdvancedTab extends PureComponent {
setDismissSeedBackUpReminder: PropTypes.func.isRequired,
dismissSeedBackUpReminder: PropTypes.bool.isRequired,
userHasALedgerAccount: PropTypes.bool.isRequired,
useTokenDetection: PropTypes.bool.isRequired,
setUseTokenDetection: PropTypes.func.isRequired,
};
state = {
@ -669,6 +671,49 @@ export default class AdvancedTab extends PureComponent {
);
}
renderTokenDetectionToggle() {
if (!process.env.TOKEN_DETECTION_V2) {
return null;
}
const { t } = this.context;
const { useTokenDetection, setUseTokenDetection } = this.props;
return (
<div
ref={this.settingsRefs[13]}
className="settings-page__content-row"
data-testid="advanced-setting-token-detection"
>
<div className="settings-page__content-item">
<span>{t('tokenDetection')}</span>
<div className="settings-page__content-description">
{t('tokenDetectionToggleDescription')}
</div>
</div>
<div className="settings-page__content-item">
<div className="settings-page__content-item-col">
<ToggleButton
value={useTokenDetection}
onToggle={(value) => {
this.context.metricsEvent({
eventOpts: {
category: 'Settings',
action: 'Token Detection',
name: 'Token Detection',
},
});
setUseTokenDetection(!value);
}}
offLabel={t('off')}
onLabel={t('on')}
/>
</div>
</div>
</div>
);
}
render() {
const { warning } = this.props;
@ -681,6 +726,7 @@ export default class AdvancedTab extends PureComponent {
{this.renderMobileSync()}
{this.renderResetAccount()}
{this.renderAdvancedGasInputInline()}
{this.renderTokenDetectionToggle()}
{this.renderHexDataOptIn()}
{this.renderShowConversionInTestnets()}
{this.renderToggleTestNetworks()}

70
ui/pages/settings/advanced-tab/advanced-tab.component.test.js
View File

@ -10,6 +10,7 @@ describe('AdvancedTab Component', () => {
let component;
let setAutoLockTimeLimitSpy = sinon.spy();
const toggleTestnet = sinon.spy();
const toggleTokenDetection = sinon.spy();
beforeAll(() => {
component = shallow(
@ -27,6 +28,8 @@ describe('AdvancedTab Component', () => {
setLedgerTransportPreference={() => undefined}
setDismissSeedBackUpReminder={() => undefined}
dismissSeedBackUpReminder={false}
useTokenDetection
setUseTokenDetection={toggleTokenDetection}
/>,
{
context: {
@ -80,4 +83,71 @@ describe('AdvancedTab Component', () => {
toggleButton.first().simulate('toggle');
expect(toggleTestnet.calledOnce).toStrictEqual(true);
});
it('should toggle token detection', () => {
process.env.TOKEN_DETECTION_V2 = true;
component = shallow(
<AdvancedTab
ipfsGateway=""
setAutoLockTimeLimit={setAutoLockTimeLimitSpy}
setIpfsGateway={() => undefined}
setShowFiatConversionOnTestnetsPreference={() => undefined}
setThreeBoxSyncingPermission={() => undefined}
setShowTestNetworks={toggleTestnet}
showTestNetworks={false}
threeBoxDisabled
threeBoxSyncingAllowed={false}
ledgerTransportType={LEDGER_TRANSPORT_TYPES.U2F}
setLedgerTransportPreference={() => undefined}
setDismissSeedBackUpReminder={() => undefined}
dismissSeedBackUpReminder={false}
useTokenDetection
setUseTokenDetection={toggleTokenDetection}
/>,
{
context: {
metricsEvent: () => undefined,
t: (s) => `_${s}`,
},
},
);
const useTokenDetection = component
.find('.settings-page__content-row')
.at(4);
const toggleButton = useTokenDetection.find(ToggleButton);
toggleButton.first().simulate('toggle');
expect(toggleTokenDetection.calledOnce).toStrictEqual(true);
});
/** TODO: Remove during TOKEN_DETECTION_V2 feature flag clean up */
it('should not show token detection toggle', () => {
process.env.TOKEN_DETECTION_V2 = false;
component = shallow(
<AdvancedTab
ipfsGateway=""
setAutoLockTimeLimit={setAutoLockTimeLimitSpy}
setIpfsGateway={() => undefined}
setShowFiatConversionOnTestnetsPreference={() => undefined}
setThreeBoxSyncingPermission={() => undefined}
setShowTestNetworks={toggleTestnet}
showTestNetworks={false}
threeBoxDisabled
threeBoxSyncingAllowed={false}
ledgerTransportType={LEDGER_TRANSPORT_TYPES.U2F}
setLedgerTransportPreference={() => undefined}
setDismissSeedBackUpReminder={() => undefined}
dismissSeedBackUpReminder={false}
useTokenDetection
setUseTokenDetection={toggleTokenDetection}
/>,
{
context: {
metricsEvent: () => undefined,
t: (s) => `_${s}`,
},
},
);
const tokenDetectionText = component.find({ text: 'Token detection' });
expect(tokenDetectionText).toHaveLength(0);
});
});

6
ui/pages/settings/advanced-tab/advanced-tab.container.js
View File

@ -14,6 +14,7 @@ import {
setIpfsGateway,
setLedgerTransportPreference,
setDismissSeedBackUpReminder,
setUseTokenDetection,
} from '../../../store/actions';
import { getPreferences } from '../../../selectors';
import { doesUserHaveALedgerAccount } from '../../../ducks/metamask/metamask';
@ -32,6 +33,7 @@ export const mapStateToProps = (state) => {
ipfsGateway,
ledgerTransportType,
dismissSeedBackUpReminder,
useTokenDetection,
} = metamask;
const {
showFiatInTestnets,
@ -55,6 +57,7 @@ export const mapStateToProps = (state) => {
ledgerTransportType,
dismissSeedBackUpReminder,
userHasALedgerAccount,
useTokenDetection,
};
};
@ -93,6 +96,9 @@ export const mapDispatchToProps = (dispatch) => {
setDismissSeedBackUpReminder: (value) => {
return dispatch(setDismissSeedBackUpReminder(value));
},
setUseTokenDetection: (value) => {
return dispatch(setUseTokenDetection(value));
},
};
};

5
ui/pages/settings/experimental-tab/experimental-tab.component.js
View File

@ -271,7 +271,10 @@ export default class ExperimentalTab extends PureComponent {
render() {
return (
<div className="settings-page__body">
{this.renderTokenDetectionToggle()}
{/* TODO: Remove during TOKEN_DETECTION_V2 feature flag clean up */}
{process.env.TOKEN_DETECTION_V2
? null
: this.renderTokenDetectionToggle()}
{this.renderOpenSeaEnabledToggle()}
{this.renderCollectibleDetectionToggle()}
{this.renderEIP1559V2EnabledToggle()}

18
ui/pages/settings/experimental-tab/experimental-tab.component.test.js
View File

@ -11,18 +11,28 @@ describe('Experimental Tab', () => {
setUseTokenDetection: sinon.spy(),
};
beforeEach(() => {
it('toggles Use Token detection', () => {
wrapper = mount(<ExperimentalTab.WrappedComponent {...props} />, {
context: {
t: (str) => str,
metricsEvent: () => undefined,
},
});
});
it('toggles Use Token detection', () => {
const useTokenDetection = wrapper.find({ type: 'checkbox' }).at(0);
useTokenDetection.simulate('click');
expect(props.setUseTokenDetection.calledOnce).toStrictEqual(true);
});
/** TODO: Remove during TOKEN_DETECTION_V2 feature flag clean up */
it('should not show use token detection toggle', () => {
process.env.TOKEN_DETECTION_V2 = true;
wrapper = mount(<ExperimentalTab.WrappedComponent {...props} />, {
context: {
t: (str) => str,
metricsEvent: () => undefined,
},
});
const useTokenDetectionText = wrapper.find({ text: 'Use Token Detection' });
expect(useTokenDetectionText).toHaveLength(0);
});
});

9
ui/pages/settings/experimental-tab/experimental-tab.container.js
View File

@ -19,7 +19,9 @@ import ExperimentalTab from './experimental-tab.component';
const mapStateToProps = (state) => {
return {
useTokenDetection: getUseTokenDetection(state),
useTokenDetection: getUseTokenDetection(
state,
) /** TODO: Remove during TOKEN_DETECTION_V2 feature flag clean up */,
useCollectibleDetection: getUseCollectibleDetection(state),
openSeaEnabled: getOpenSeaEnabled(state),
eip1559V2Enabled: getEIP1559V2Enabled(state),
@ -29,7 +31,10 @@ const mapStateToProps = (state) => {
const mapDispatchToProps = (dispatch) => {
return {
setUseTokenDetection: (val) => dispatch(setUseTokenDetection(val)),
setUseTokenDetection: (val) =>
dispatch(
setUseTokenDetection(val),
) /** TODO: Remove during TOKEN_DETECTION_V2 feature flag clean up */,
setUseCollectibleDetection: (val) =>
dispatch(setUseCollectibleDetection(val)),
setOpenSeaEnabled: (val) => dispatch(setOpenSeaEnabled(val)),