m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Add snaps search (#14100)

Browse Source 
* added snaps routes

* changed settings search icons to font-awesome

* removed manual input of id

* added snap list to search

* removed console.logs and changed settingsRef to an array to work with settings search helper functions

* lint fixes

* updated tests

* test fix

* fixed util function

* renamed vars

* fixed spelling

* deps fix
This commit is contained in:
Hassan Malik 2022-03-23 12:47:54 -04:00 committed by GitHub
parent 656fd276c0
commit f192929a04
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 154 additions and 205 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -8,15 +8,32 @@ import {
NETWORKS_ROUTE, NETWORKS_ROUTE,
CONTACT_LIST_ROUTE, CONTACT_LIST_ROUTE,
EXPERIMENTAL_ROUTE, EXPERIMENTAL_ROUTE,
///: BEGIN:ONLY_INCLUDE_IN(flask)
SNAPS_LIST_ROUTE,
///: END:ONLY_INCLUDE_IN
} from '../constants/routes'; } from '../constants/routes';
function showHideSettings(t, settings) { function showHideSettings(t, settings) {
if (!process.env.COLLECTIBLES_V1) { if (process.env.COLLECTIBLES_V1) {
return settings.filter( return [
(e) => ...settings,
e.section !== t('enableOpenSeaAPI') && {
e.section !== t('useCollectibleDetection'), tab: t('experimental'),
); section: t('enableOpenSeaAPI'),
description: t('enableOpenSeaAPIDescription'),
route: `${EXPERIMENTAL_ROUTE}#opensea-api`,
icon: 'fa fa-flask',
id: settings.length + 1,
},
{
tab: t('experimental'),
section: t('useCollectibleDetection'),
description: t('useCollectibleDetectionDescription'),
route: `${EXPERIMENTAL_ROUTE}#autodetect-nfts`,
icon: 'fa fa-flask',
id: settings.length + 2,
},
];
} }
return settings; return settings;
} }
@ -28,297 +45,254 @@ export function getSettingsRoutes(t) {
section: t('currencyConversion'), section: t('currencyConversion'),
description: '', description: '',
route: `${GENERAL_ROUTE}#currency-conversion`, route: `${GENERAL_ROUTE}#currency-conversion`,
image: 'general-icon.svg', icon: 'fa fa-cog',
id: 1,
}, },
{ {
tab: t('general'), tab: t('general'),
section: t('primaryCurrencySetting'), section: t('primaryCurrencySetting'),
description: t('primaryCurrencySettingDescription'), description: t('primaryCurrencySettingDescription'),
route: `${GENERAL_ROUTE}#primary-currency`, route: `${GENERAL_ROUTE}#primary-currency`,
image: 'general-icon.svg', icon: 'fa fa-cog',
id: 2,
}, },
{ {
tab: t('general'), tab: t('general'),
section: t('currentLanguage'), section: t('currentLanguage'),
description: '', description: '',
route: `${GENERAL_ROUTE}#current-language`, route: `${GENERAL_ROUTE}#current-language`,
image: 'general-icon.svg', icon: 'fa fa-cog',
id: 3,
}, },
{ {
tab: t('general'), tab: t('general'),
section: t('accountIdenticon'), section: t('accountIdenticon'),
description: '', description: '',
route: `${GENERAL_ROUTE}#account-identicon`, route: `${GENERAL_ROUTE}#account-identicon`,
image: 'general-icon.svg', icon: 'fa fa-cog',
id: 4,
}, },
{ {
tab: t('general'), tab: t('general'),
section: t('hideZeroBalanceTokens'), section: t('hideZeroBalanceTokens'),
description: '', description: '',
route: `${GENERAL_ROUTE}#zero-balancetokens`, route: `${GENERAL_ROUTE}#zero-balancetokens`,
image: 'general-icon.svg', icon: 'fa fa-cog',
id: 5,
}, },
{ {
tab: t('advanced'), tab: t('advanced'),
section: t('stateLogs'), section: t('stateLogs'),
description: t('stateLogsDescription'), description: t('stateLogsDescription'),
route: `${ADVANCED_ROUTE}#state-logs`, route: `${ADVANCED_ROUTE}#state-logs`,
image: 'advanced-icon.svg', icon: 'fas fa-sliders-h',
id: 6,
}, },
{ {
tab: t('advanced'), tab: t('advanced'),
section: t('syncWithMobile'), section: t('syncWithMobile'),
description: '', description: '',
route: `${ADVANCED_ROUTE}#sync-withmobile`, route: `${ADVANCED_ROUTE}#sync-withmobile`,
image: 'advanced-icon.svg', icon: 'fas fa-sliders-h',
id: 7,
}, },
{ {
tab: t('advanced'), tab: t('advanced'),
section: t('resetAccount'), section: t('resetAccount'),
description: t('resetAccountDescription'), description: t('resetAccountDescription'),
route: `${ADVANCED_ROUTE}#reset-account`, route: `${ADVANCED_ROUTE}#reset-account`,
image: 'advanced-icon.svg', icon: 'fas fa-sliders-h',
id: 8,
}, },
{ {
tab: t('advanced'), tab: t('advanced'),
section: t('showAdvancedGasInline'), section: t('showAdvancedGasInline'),
description: t('showAdvancedGasInlineDescription'), description: t('showAdvancedGasInlineDescription'),
route: `${ADVANCED_ROUTE}#advanced-gascontrols`, route: `${ADVANCED_ROUTE}#advanced-gascontrols`,
image: 'advanced-icon.svg', icon: 'fas fa-sliders-h',
id: 9,
}, },
{ {
tab: t('advanced'), tab: t('advanced'),
section: t('showHexData'), section: t('showHexData'),
description: t('showHexDataDescription'), description: t('showHexDataDescription'),
route: `${ADVANCED_ROUTE}#show-hexdata`, route: `${ADVANCED_ROUTE}#show-hexdata`,
image: 'advanced-icon.svg', icon: 'fas fa-sliders-h',
id: 10,
}, },
{ {
tab: t('advanced'), tab: t('advanced'),
section: t('showFiatConversionInTestnets'), section: t('showFiatConversionInTestnets'),
description: t('showFiatConversionInTestnetsDescription'), description: t('showFiatConversionInTestnetsDescription'),
route: `${ADVANCED_ROUTE}#conversion-testnetworks`, route: `${ADVANCED_ROUTE}#conversion-testnetworks`,
image: 'advanced-icon.svg', icon: 'fas fa-sliders-h',
id: 11,
}, },
{ {
tab: t('advanced'), tab: t('advanced'),
section: t('showTestnetNetworks'), section: t('showTestnetNetworks'),
description: t('showTestnetNetworksDescription'), description: t('showTestnetNetworksDescription'),
route: `${ADVANCED_ROUTE}#show-testnets`, route: `${ADVANCED_ROUTE}#show-testnets`,
image: 'advanced-icon.svg', icon: 'fas fa-sliders-h',
id: 12,
}, },
{ {
tab: t('advanced'), tab: t('advanced'),
section: t('nonceField'), section: t('nonceField'),
description: t('nonceFieldDescription'), description: t('nonceFieldDescription'),
route: `${ADVANCED_ROUTE}#customize-nonce`, route: `${ADVANCED_ROUTE}#customize-nonce`,
image: 'advanced-icon.svg', icon: 'fas fa-sliders-h',
id: 13,
}, },
{ {
tab: t('advanced'), tab: t('advanced'),
section: t('autoLockTimeLimit'), section: t('autoLockTimeLimit'),
description: t('autoLockTimeLimitDescription'), description: t('autoLockTimeLimitDescription'),
route: `${ADVANCED_ROUTE}#autolock-timer`, route: `${ADVANCED_ROUTE}#autolock-timer`,
image: 'advanced-icon.svg', icon: 'fas fa-sliders-h',
id: 14,
}, },
{ {
tab: t('advanced'), tab: t('advanced'),
section: t('syncWithThreeBox'), section: t('syncWithThreeBox'),
description: t('syncWithThreeBoxDescription'), description: t('syncWithThreeBoxDescription'),
route: `${ADVANCED_ROUTE}#sync-with3box`, route: `${ADVANCED_ROUTE}#sync-with3box`,
image: 'advanced-icon.svg', icon: 'fas fa-sliders-h',
id: 15,
}, },
{ {
tab: t('advanced'), tab: t('advanced'),
section: t('ipfsGateway'), section: t('ipfsGateway'),
description: t('ipfsGatewayDescription'), description: t('ipfsGatewayDescription'),
route: `${ADVANCED_ROUTE}#ipfs-gateway`, route: `${ADVANCED_ROUTE}#ipfs-gateway`,
image: 'advanced-icon.svg', icon: 'fas fa-sliders-h',
id: 16,
}, },
{ {
tab: t('advanced'), tab: t('advanced'),
section: t('preferredLedgerConnectionType'), section: t('preferredLedgerConnectionType'),
description: t('preferredLedgerConnectionType'), description: t('preferredLedgerConnectionType'),
route: `${ADVANCED_ROUTE}#ledger-connection`, route: `${ADVANCED_ROUTE}#ledger-connection`,
image: 'advanced-icon.svg', icon: 'fas fa-sliders-h',
id: 17,
}, },
{ {
tab: t('advanced'), tab: t('advanced'),
section: t('dismissReminderField'), section: t('dismissReminderField'),
description: t('dismissReminderDescriptionField'), description: t('dismissReminderDescriptionField'),
route: `${ADVANCED_ROUTE}#dimiss-secretrecovery`, route: `${ADVANCED_ROUTE}#dimiss-secretrecovery`,
image: 'advanced-icon.svg', icon: 'fas fa-sliders-h',
id: 18,
}, },
{ {
tab: t('contacts'), tab: t('contacts'),
section: t('contacts'), section: t('contacts'),
description: t('contacts'), description: t('contacts'),
route: CONTACT_LIST_ROUTE, route: CONTACT_LIST_ROUTE,
image: 'contacts-icon.svg', icon: 'fa fa-address-book',
id: 19,
}, },
///: BEGIN:ONLY_INCLUDE_IN(flask)
{
tab: t('snaps'),
section: t('snaps'),
description: t('snaps'),
route: SNAPS_LIST_ROUTE,
icon: 'fa fa-flask',
},
///: END:ONLY_INCLUDE_IN
{ {
tab: t('securityAndPrivacy'), tab: t('securityAndPrivacy'),
section: t('revealSeedWords'), section: t('revealSeedWords'),
description: t('revealSeedWords'), description: t('revealSeedWords'),
route: `${SECURITY_ROUTE}#reveal-secretrecovery`, route: `${SECURITY_ROUTE}#reveal-secretrecovery`,
image: 'security-icon.svg', icon: 'fa fa-lock',
id: 20,
}, },
{ {
tab: t('securityAndPrivacy'), tab: t('securityAndPrivacy'),
section: t('showIncomingTransactions'), section: t('showIncomingTransactions'),
description: t('showIncomingTransactionsDescription'), description: t('showIncomingTransactionsDescription'),
route: `${SECURITY_ROUTE}#incoming-transaction`, route: `${SECURITY_ROUTE}#incoming-transaction`,
image: 'security-icon.svg', icon: 'fa fa-lock',
id: 21,
}, },
{ {
tab: t('securityAndPrivacy'), tab: t('securityAndPrivacy'),
section: t('usePhishingDetection'), section: t('usePhishingDetection'),
description: t('usePhishingDetectionDescription'), description: t('usePhishingDetectionDescription'),
route: `${SECURITY_ROUTE}#phishing-detection`, route: `${SECURITY_ROUTE}#phishing-detection`,
image: 'security-icon.svg', icon: 'fa fa-lock',
id: 22,
}, },
{ {
tab: t('securityAndPrivacy'), tab: t('securityAndPrivacy'),
section: t('participateInMetaMetrics'), section: t('participateInMetaMetrics'),
description: t('participateInMetaMetricsDescription'), description: t('participateInMetaMetricsDescription'),
route: `${SECURITY_ROUTE}#metrametrics`, route: `${SECURITY_ROUTE}#metrametrics`,
image: 'security-icon.svg', icon: 'fa fa-lock',
id: 23,
}, },
{ {
tab: t('alerts'), tab: t('alerts'),
section: t('alertSettingsUnconnectedAccount'), section: t('alertSettingsUnconnectedAccount'),
description: t('alertSettingsUnconnectedAccount'), description: t('alertSettingsUnconnectedAccount'),
route: `${ALERTS_ROUTE}#unconnected-account`, route: `${ALERTS_ROUTE}#unconnected-account`,
image: 'alerts-icon.svg', icon: 'fa fa-bell',
id: 24,
}, },
{ {
tab: t('alerts'), tab: t('alerts'),
section: t('alertSettingsWeb3ShimUsage'), section: t('alertSettingsWeb3ShimUsage'),
description: t('alertSettingsWeb3ShimUsage'), description: t('alertSettingsWeb3ShimUsage'),
route: `${ALERTS_ROUTE}#web3-shimusage`, route: `${ALERTS_ROUTE}#web3-shimusage`,
image: 'alerts-icon.svg', icon: 'fa fa-bell',
id: 25,
}, },
{ {
tab: t('networks'), tab: t('networks'),
section: t('mainnet'), section: t('mainnet'),
description: t('mainnet'), description: t('mainnet'),
route: `${NETWORKS_ROUTE}#networks-mainnet`, route: `${NETWORKS_ROUTE}#networks-mainnet`,
image: 'network-icon.svg', icon: 'fa fa-plug',
id: 26,
}, },
{ {
tab: t('networks'), tab: t('networks'),
section: t('ropsten'), section: t('ropsten'),
description: t('ropsten'), description: t('ropsten'),
route: `${NETWORKS_ROUTE}#networks-ropsten`, route: `${NETWORKS_ROUTE}#networks-ropsten`,
image: 'network-icon.svg', icon: 'fa fa-plug',
id: 27,
}, },
{ {
tab: t('networks'), tab: t('networks'),
section: t('rinkeby'), section: t('rinkeby'),
description: t('rinkeby'), description: t('rinkeby'),
route: `${NETWORKS_ROUTE}#networks-rinkeby`, route: `${NETWORKS_ROUTE}#networks-rinkeby`,
image: 'network-icon.svg', icon: 'fa fa-plug',
id: 28,
}, },
{ {
tab: t('networks'), tab: t('networks'),
section: t('goerli'), section: t('goerli'),
description: t('goerli'), description: t('goerli'),
route: `${NETWORKS_ROUTE}#networks-goerli`, route: `${NETWORKS_ROUTE}#networks-goerli`,
image: 'network-icon.svg', icon: 'fa fa-plug',
id: 29,
}, },
{ {
tab: t('networks'), tab: t('networks'),
section: t('kovan'), section: t('kovan'),
description: t('kovan'), description: t('kovan'),
route: `${NETWORKS_ROUTE}#networtks-kovan`, route: `${NETWORKS_ROUTE}#networks-kovan`,
image: 'network-icon.svg', icon: 'fa fa-plug',
id: 30,
}, },
{ {
tab: t('networks'), tab: t('networks'),
section: t('localhost'), section: t('localhost'),
description: t('localhost'), description: t('localhost'),
route: `${NETWORKS_ROUTE}#network-localhost`, route: `${NETWORKS_ROUTE}#networks-localhost`,
image: 'network-icon.svg', icon: 'fa fa-plug',
id: 31,
}, },
{
tab: t('experimental'),
section: t('enableOpenSeaAPI'),
description: t('enableOpenSeaAPIDescription'),
route: `${EXPERIMENTAL_ROUTE}#opensea-api`,
image: 'experimental-icon.svg',
id: 33,
},
{
tab: t('experimental'),
section: t('useCollectibleDetection'),
description: t('useCollectibleDetectionDescription'),
route: `${EXPERIMENTAL_ROUTE}#autodetect-nfts`,
image: 'experimental-icon.svg',
id: 34,
},
{ {
tab: t('about'), tab: t('about'),
section: t('metamaskVersion'), section: t('metamaskVersion'),
description: t('builtAroundTheWorld'), description: t('builtAroundTheWorld'),
route: `${ABOUT_US_ROUTE}#version`, route: `${ABOUT_US_ROUTE}#version`,
image: 'info-icon.svg', icon: 'fa fa-info-circle',
id: 35,
}, },
{ {
tab: t('about'), tab: t('about'),
section: t('links'), section: t('links'),
description: '', description: '',
route: `${ABOUT_US_ROUTE}#links`, route: `${ABOUT_US_ROUTE}#links`,
image: 'info-icon.svg', icon: 'fa fa-info-circle',
id: 36,
}, },
{ {
tab: t('about'), tab: t('about'),
section: t('privacyMsg'), section: t('privacyMsg'),
description: t('privacyMsg'), description: t('privacyMsg'),
route: `${ABOUT_US_ROUTE}#privacy-policy`, route: `${ABOUT_US_ROUTE}#privacy-policy`,
image: 'info-icon.svg', icon: 'fa fa-info-circle',
id: 37,
}, },
{ {
tab: t('about'), tab: t('about'),
section: t('terms'), section: t('terms'),
description: t('terms'), description: t('terms'),
route: `${ABOUT_US_ROUTE}#terms`, route: `${ABOUT_US_ROUTE}#terms`,
image: 'info-icon.svg', icon: 'fa fa-info-circle',
id: 38,
}, },
{ {
@ -326,8 +300,7 @@ export function getSettingsRoutes(t) {
section: t('attributions'), section: t('attributions'),
description: t('attributions'), description: t('attributions'),
route: `${ABOUT_US_ROUTE}#attributions`, route: `${ABOUT_US_ROUTE}#attributions`,
image: 'info-icon.svg', icon: 'fa fa-info-circle',
id: 39,
}, },
{ {
@ -335,8 +308,7 @@ export function getSettingsRoutes(t) {
section: t('supportCenter'), section: t('supportCenter'),
description: t('supportCenter'), description: t('supportCenter'),
route: `${ABOUT_US_ROUTE}#supportcenter`, route: `${ABOUT_US_ROUTE}#supportcenter`,
image: 'info-icon.svg', icon: 'fa fa-info-circle',
id: 40,
}, },
{ {
@ -344,8 +316,7 @@ export function getSettingsRoutes(t) {
section: t('visitWebSite'), section: t('visitWebSite'),
description: t('visitWebSite'), description: t('visitWebSite'),
route: `${ABOUT_US_ROUTE}#visitwebsite`, route: `${ABOUT_US_ROUTE}#visitwebsite`,
image: 'info-icon.svg', icon: 'fa fa-info-circle',
id: 41,
}, },
{ {
@ -353,11 +324,9 @@ export function getSettingsRoutes(t) {
section: t('contactUs'), section: t('contactUs'),
description: t('contactUs'), description: t('contactUs'),
route: `${ABOUT_US_ROUTE}#contactus`, route: `${ABOUT_US_ROUTE}#contactus`,
image: 'info-icon.svg', icon: 'fa fa-info-circle',
id: 42,
}, },
]; ];
if (process.env.TOKEN_DETECTION_V2) { if (process.env.TOKEN_DETECTION_V2) {
settingsRoutesList = [ settingsRoutesList = [
...settingsRoutesList, ...settingsRoutesList,
@ -367,8 +336,7 @@ export function getSettingsRoutes(t) {
section: t('tokenDetection'), section: t('tokenDetection'),
description: t('tokenDetectionToggleDescription'), description: t('tokenDetectionToggleDescription'),
route: `${ADVANCED_ROUTE}#token-description`, route: `${ADVANCED_ROUTE}#token-description`,
image: 'advanced-icon.svg', icon: 'fas fa-sliders-h',
id: 32,
}, },
]; ];
} else { } else {
@ -380,12 +348,13 @@ export function getSettingsRoutes(t) {
section: t('useTokenDetection'), section: t('useTokenDetection'),
description: t('useTokenDetectionDescription'), description: t('useTokenDetectionDescription'),
route: `${EXPERIMENTAL_ROUTE}#token-description`, route: `${EXPERIMENTAL_ROUTE}#token-description`,
image: 'experimental-icon.svg', icon: 'fa fa-flask',
id: 32,
}, },
]; ];
} }
for (let i = 0; i < settingsRoutesList.length; i++) {
settingsRoutesList[i].id = i + 1;
}
// TODO: write to json file? // TODO: write to json file?
return showHideSettings(t, settingsRoutesList); return showHideSettings(t, settingsRoutesList);
} }
@ -403,7 +372,6 @@ export function handleSettingsRefs(t, tabName, settingsRefs) {
const settingsRefsIndex = settingsSearchJsonFiltered.findIndex( const settingsRefsIndex = settingsSearchJsonFiltered.findIndex(
(s) => s.route.substring(1) === window.location.hash.substring(1), (s) => s.route.substring(1) === window.location.hash.substring(1),
); );
if ( if (
settingsRefsIndex !== -1 && settingsRefsIndex !== -1 &&
settingsRefs[settingsRefsIndex].current !== null settingsRefs[settingsRefsIndex].current !== null

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

@ -123,7 +123,7 @@ const t = (key) => {
case 'enableOpenSeaAPI': case 'enableOpenSeaAPI':
return 'Enable OpenSea API'; return 'Enable OpenSea API';
case 'enableOpenSeaAPIDescription': case 'enableOpenSeaAPIDescription':
return 'Use OpenSea API to fetch NFT data.NFT auto - detection relies on OpenSea API, and will not be available when this is turned off.'; return "Use OpenSea's API to fetch NFT data. NFT auto-detection relies on OpenSea's API, and will not be available when this is turned off.";
case 'useCollectibleDetection': case 'useCollectibleDetection':
return 'Autodetect NFTs'; return 'Autodetect NFTs';
case 'useCollectibleDetectionDescription': case 'useCollectibleDetectionDescription':
@ -148,7 +148,8 @@ const t = (key) => {
return 'Visit our web site'; return 'Visit our web site';
case 'contactUs': case 'contactUs':
return 'Contact us'; return 'Contact us';
case 'snaps':
return 'Snaps';
default: default:
return ''; return '';
} }
@ -157,11 +158,10 @@ const t = (key) => {
describe('Settings Search Utils', () => { describe('Settings Search Utils', () => {
describe('getSettingsRoutes', () => { describe('getSettingsRoutes', () => {
it('should get all settings', () => { it('should get all settings', () => {
const settingsListExcepted = [ const expectedSettingsList = [
{ {
description: '', description: '',
id: 1, icon: 'fa fa-cog',
image: 'general-icon.svg',
route: '/settings/general#currency-conversion', route: '/settings/general#currency-conversion',
section: 'Currency Conversion', section: 'Currency Conversion',
tab: 'General', tab: 'General',
@ -169,32 +169,28 @@ describe('Settings Search Utils', () => {
{ {
description: description:
'Select native to prioritize displaying values in the native currency of the chain (e.g. ETH). Select Fiat to prioritize displaying values in your selected fiat currency.', 'Select native to prioritize displaying values in the native currency of the chain (e.g. ETH). Select Fiat to prioritize displaying values in your selected fiat currency.',
id: 2, icon: 'fa fa-cog',
image: 'general-icon.svg',
route: '/settings/general#primary-currency', route: '/settings/general#primary-currency',
section: 'Primary Currenc', section: 'Primary Currenc',
tab: 'General', tab: 'General',
}, },
{ {
description: '', description: '',
id: 3, icon: 'fa fa-cog',
image: 'general-icon.svg',
route: '/settings/general#current-language', route: '/settings/general#current-language',
section: 'Current Language', section: 'Current Language',
tab: 'General', tab: 'General',
}, },
{ {
description: '', description: '',
id: 4, icon: 'fa fa-cog',
image: 'general-icon.svg',
route: '/settings/general#account-identicon', route: '/settings/general#account-identicon',
section: 'Current Language"', section: 'Current Language"',
tab: 'General', tab: 'General',
}, },
{ {
description: '', description: '',
id: 5, icon: 'fa fa-cog',
image: 'general-icon.svg',
route: '/settings/general#zero-balancetokens', route: '/settings/general#zero-balancetokens',
section: 'Hide Tokens Without Balance', section: 'Hide Tokens Without Balance',
tab: 'General', tab: 'General',
@ -202,16 +198,14 @@ describe('Settings Search Utils', () => {
{ {
description: description:
'State logs contain your public account addresses and sent transactions.', 'State logs contain your public account addresses and sent transactions.',
id: 6, icon: 'fas fa-sliders-h',
image: 'advanced-icon.svg',
route: '/settings/advanced#state-logs', route: '/settings/advanced#state-logs',
section: 'State Logs', section: 'State Logs',
tab: 'Advanced', tab: 'Advanced',
}, },
{ {
description: '', description: '',
id: 7, icon: 'fas fa-sliders-h',
image: 'advanced-icon.svg',
route: '/settings/advanced#sync-withmobile', route: '/settings/advanced#sync-withmobile',
section: 'Sync with mobile', section: 'Sync with mobile',
tab: 'Advanced', tab: 'Advanced',
@ -219,8 +213,7 @@ describe('Settings Search Utils', () => {
{ {
description: description:
'Resetting your account will clear your transaction history. This will not change the balances in your accounts or require you to re-enter your Secret Recovery Phrase.', 'Resetting your account will clear your transaction history. This will not change the balances in your accounts or require you to re-enter your Secret Recovery Phrase.',
id: 8, icon: 'fas fa-sliders-h',
image: 'advanced-icon.svg',
route: '/settings/advanced#reset-account', route: '/settings/advanced#reset-account',
section: 'Reset Account', section: 'Reset Account',
tab: 'Advanced', tab: 'Advanced',
@ -228,8 +221,7 @@ describe('Settings Search Utils', () => {
{ {
description: description:
'Select this to show gas price and limit controls directly on the send and confirm screens.', 'Select this to show gas price and limit controls directly on the send and confirm screens.',
id: 9, icon: 'fas fa-sliders-h',
image: 'advanced-icon.svg',
route: '/settings/advanced#advanced-gascontrols', route: '/settings/advanced#advanced-gascontrols',
section: 'Advanced gas controls', section: 'Advanced gas controls',
tab: 'Advanced', tab: 'Advanced',
@ -237,24 +229,21 @@ describe('Settings Search Utils', () => {
{ {
description: description:
'Select this to show the hex data field on the send screen', 'Select this to show the hex data field on the send screen',
id: 10, icon: 'fas fa-sliders-h',
image: 'advanced-icon.svg',
route: '/settings/advanced#show-hexdata', route: '/settings/advanced#show-hexdata',
section: 'Show Hex Data', section: 'Show Hex Data',
tab: 'Advanced', tab: 'Advanced',
}, },
{ {
description: 'Select this to show fiat conversion on test network', description: 'Select this to show fiat conversion on test network',
id: 11, icon: 'fas fa-sliders-h',
image: 'advanced-icon.svg',
route: '/settings/advanced#conversion-testnetworks', route: '/settings/advanced#conversion-testnetworks',
section: 'Show Conversion on test networks', section: 'Show Conversion on test networks',
tab: 'Advanced', tab: 'Advanced',
}, },
{ {
description: 'Select this to show test networks in network list', description: 'Select this to show test networks in network list',
id: 12, icon: 'fas fa-sliders-h',
image: 'advanced-icon.svg',
route: '/settings/advanced#show-testnets', route: '/settings/advanced#show-testnets',
section: 'Show test networks', section: 'Show test networks',
tab: 'Advanced', tab: 'Advanced',
@ -262,8 +251,7 @@ describe('Settings Search Utils', () => {
{ {
description: description:
'Turn this on to change the nonce (transaction number) on confirmation screens. This is an advanced feature, use cautiously.', 'Turn this on to change the nonce (transaction number) on confirmation screens. This is an advanced feature, use cautiously.',
id: 13, icon: 'fas fa-sliders-h',
image: 'advanced-icon.svg',
route: '/settings/advanced#customize-nonce', route: '/settings/advanced#customize-nonce',
section: 'Customize transaction nonce', section: 'Customize transaction nonce',
tab: 'Advanced', tab: 'Advanced',
@ -271,8 +259,7 @@ describe('Settings Search Utils', () => {
{ {
description: description:
'Set the idle time in minutes before MetaMask will become locked.', 'Set the idle time in minutes before MetaMask will become locked.',
id: 14, icon: 'fas fa-sliders-h',
image: 'advanced-icon.svg',
route: '/settings/advanced#autolock-timer', route: '/settings/advanced#autolock-timer',
section: 'Auto-Lock Timer (minutes)', section: 'Auto-Lock Timer (minutes)',
tab: 'Advanced', tab: 'Advanced',
@ -280,8 +267,7 @@ describe('Settings Search Utils', () => {
{ {
description: description:
'Turn on to have your settings backed up with 3Box. This feature is currently experimental; use at your own risk.', 'Turn on to have your settings backed up with 3Box. This feature is currently experimental; use at your own risk.',
id: 15, icon: 'fas fa-sliders-h',
image: 'advanced-icon.svg',
route: '/settings/advanced#sync-with3box', route: '/settings/advanced#sync-with3box',
section: 'Sync data with 3Box (experimental)', section: 'Sync data with 3Box (experimental)',
tab: 'Advanced', tab: 'Advanced',
@ -289,16 +275,14 @@ describe('Settings Search Utils', () => {
{ {
description: description:
'Enter the URL of the IPFS CID gateway to use for ENS content resolution.', 'Enter the URL of the IPFS CID gateway to use for ENS content resolution.',
id: 16, icon: 'fas fa-sliders-h',
image: 'advanced-icon.svg',
route: '/settings/advanced#ipfs-gateway', route: '/settings/advanced#ipfs-gateway',
section: 'IPFS Gateway', section: 'IPFS Gateway',
tab: 'Advanced', tab: 'Advanced',
}, },
{ {
description: 'Preferred Ledger Connection Type', description: 'Preferred Ledger Connection Type',
id: 17, icon: 'fas fa-sliders-h',
image: 'advanced-icon.svg',
route: '/settings/advanced#ledger-connection', route: '/settings/advanced#ledger-connection',
section: 'Preferred Ledger Connection Type', section: 'Preferred Ledger Connection Type',
tab: 'Advanced', tab: 'Advanced',
@ -306,24 +290,30 @@ describe('Settings Search Utils', () => {
{ {
description: description:
'Turn this on to dismiss the Secret Recovery Phrase backup reminder message. We highly recommend that you back up your Secret Recovery Phrase to avoid loss of funds', 'Turn this on to dismiss the Secret Recovery Phrase backup reminder message. We highly recommend that you back up your Secret Recovery Phrase to avoid loss of funds',
id: 18, icon: 'fas fa-sliders-h',
image: 'advanced-icon.svg',
route: '/settings/advanced#dimiss-secretrecovery', route: '/settings/advanced#dimiss-secretrecovery',
section: 'Dismiss Secret Recovery Phrase backup reminder', section: 'Dismiss Secret Recovery Phrase backup reminder',
tab: 'Advanced', tab: 'Advanced',
}, },
{ {
description: '', description: '',
id: 19, icon: 'fa fa-address-book',
image: 'contacts-icon.svg',
route: '/settings/contact-list', route: '/settings/contact-list',
section: '', section: '',
tab: '', tab: '',
}, },
///: BEGIN:ONLY_INCLUDE_IN(flask)
{
description: 'Snaps',
icon: 'fa fa-flask',
route: '/settings/snaps-list',
section: 'Snaps',
tab: 'Snaps',
},
///: END:ONLY_INCLUDE_IN
{ {
description: 'Reveal Secret Recovery Phrase', description: 'Reveal Secret Recovery Phrase',
id: 20, icon: 'fa fa-lock',
image: 'security-icon.svg',
route: '/settings/security#reveal-secretrecovery', route: '/settings/security#reveal-secretrecovery',
section: 'Reveal Secret Recovery Phrase', section: 'Reveal Secret Recovery Phrase',
tab: 'Security & Privacy', tab: 'Security & Privacy',
@ -331,8 +321,7 @@ describe('Settings Search Utils', () => {
{ {
description: description:
'Select this to use Etherscan to show incoming transactions in the transactions list', 'Select this to use Etherscan to show incoming transactions in the transactions list',
id: 21, icon: 'fa fa-lock',
image: 'security-icon.svg',
route: '/settings/security#incoming-transaction', route: '/settings/security#incoming-transaction',
section: 'Show Incoming Transactions', section: 'Show Incoming Transactions',
tab: 'Security & Privacy', tab: 'Security & Privacy',
@ -340,8 +329,7 @@ describe('Settings Search Utils', () => {
{ {
description: description:
'Display a warning for phishing domains targeting Ethereum users', 'Display a warning for phishing domains targeting Ethereum users',
id: 22, icon: 'fa fa-lock',
image: 'security-icon.svg',
route: '/settings/security#phishing-detection', route: '/settings/security#phishing-detection',
section: 'Use Phishing Detection', section: 'Use Phishing Detection',
tab: 'Security & Privacy', tab: 'Security & Privacy',
@ -349,8 +337,7 @@ describe('Settings Search Utils', () => {
{ {
description: description:
'Participate in MetaMetrics to help us make MetaMask better', 'Participate in MetaMetrics to help us make MetaMask better',
id: 23, icon: 'fa fa-lock',
image: 'security-icon.svg',
route: '/settings/security#metrametrics', route: '/settings/security#metrametrics',
section: 'Participate in MetaMetrics', section: 'Participate in MetaMetrics',
tab: 'Security & Privacy', tab: 'Security & Privacy',
@ -358,8 +345,7 @@ describe('Settings Search Utils', () => {
{ {
description: description:
'Browsing a website with an unconnected account selected', 'Browsing a website with an unconnected account selected',
id: 24, icon: 'fa fa-bell',
image: 'alerts-icon.svg',
route: '/settings/alerts#unconnected-account', route: '/settings/alerts#unconnected-account',
section: 'Browsing a website with an unconnected account selected', section: 'Browsing a website with an unconnected account selected',
tab: 'Alerts', tab: 'Alerts',
@ -367,120 +353,105 @@ describe('Settings Search Utils', () => {
{ {
description: description:
'When a website tries to use the removed window.web3 API', 'When a website tries to use the removed window.web3 API',
id: 25, icon: 'fa fa-bell',
image: 'alerts-icon.svg',
route: '/settings/alerts#web3-shimusage', route: '/settings/alerts#web3-shimusage',
section: 'When a website tries to use the removed window.web3 API', section: 'When a website tries to use the removed window.web3 API',
tab: 'Alerts', tab: 'Alerts',
}, },
{ {
description: 'Ethereum Mainnet', description: 'Ethereum Mainnet',
id: 26, icon: 'fa fa-plug',
image: 'network-icon.svg',
route: '/settings/networks#networks-mainnet', route: '/settings/networks#networks-mainnet',
section: 'Ethereum Mainnet', section: 'Ethereum Mainnet',
tab: 'Networks', tab: 'Networks',
}, },
{ {
description: 'Ropsten Test Network', description: 'Ropsten Test Network',
id: 27, icon: 'fa fa-plug',
image: 'network-icon.svg',
route: '/settings/networks#networks-ropsten', route: '/settings/networks#networks-ropsten',
section: 'Ropsten Test Network', section: 'Ropsten Test Network',
tab: 'Networks', tab: 'Networks',
}, },
{ {
description: 'Rinkeby Test Network', description: 'Rinkeby Test Network',
id: 28, icon: 'fa fa-plug',
image: 'network-icon.svg',
route: '/settings/networks#networks-rinkeby', route: '/settings/networks#networks-rinkeby',
section: 'Rinkeby Test Network', section: 'Rinkeby Test Network',
tab: 'Networks', tab: 'Networks',
}, },
{ {
description: 'Goerli Test Network', description: 'Goerli Test Network',
id: 29, icon: 'fa fa-plug',
image: 'network-icon.svg',
route: '/settings/networks#networks-goerli', route: '/settings/networks#networks-goerli',
section: 'Goerli Test Network', section: 'Goerli Test Network',
tab: 'Networks', tab: 'Networks',
}, },
{ {
description: 'Kovan Test Network', description: 'Kovan Test Network',
id: 30, icon: 'fa fa-plug',
image: 'network-icon.svg', route: '/settings/networks#networks-kovan',
route: '/settings/networks#networtks-kovan',
section: 'Kovan Test Network', section: 'Kovan Test Network',
tab: 'Networks', tab: 'Networks',
}, },
{ {
description: 'Localhost 8545', description: 'Localhost 8545',
id: 31, icon: 'fa fa-plug',
image: 'network-icon.svg', route: '/settings/networks#networks-localhost',
route: '/settings/networks#network-localhost',
section: 'Localhost 8545', section: 'Localhost 8545',
tab: 'Networks', tab: 'Networks',
}, },
{ {
description: 'MetaMask is designed and built around the world.', description: 'MetaMask is designed and built around the world.',
id: 35, icon: 'fa fa-info-circle',
image: 'info-icon.svg',
route: '/settings/about-us#version', route: '/settings/about-us#version',
section: 'MetaMask Version', section: 'MetaMask Version',
tab: 'About', tab: 'About',
}, },
{ {
description: '', description: '',
id: 36, icon: 'fa fa-info-circle',
image: 'info-icon.svg',
route: '/settings/about-us#links', route: '/settings/about-us#links',
section: 'Links', section: 'Links',
tab: 'About', tab: 'About',
}, },
{ {
description: 'Privacy Policy', description: 'Privacy Policy',
id: 37, icon: 'fa fa-info-circle',
image: 'info-icon.svg',
route: '/settings/about-us#privacy-policy', route: '/settings/about-us#privacy-policy',
section: 'Privacy Policy', section: 'Privacy Policy',
tab: 'About', tab: 'About',
}, },
{ {
description: 'Terms of Use', description: 'Terms of Use',
id: 38, icon: 'fa fa-info-circle',
image: 'info-icon.svg',
route: '/settings/about-us#terms', route: '/settings/about-us#terms',
section: 'Terms of Use', section: 'Terms of Use',
tab: 'About', tab: 'About',
}, },
{ {
description: 'Attributions', description: 'Attributions',
id: 39, icon: 'fa fa-info-circle',
image: 'info-icon.svg',
route: '/settings/about-us#attributions', route: '/settings/about-us#attributions',
section: 'Attributions', section: 'Attributions',
tab: 'About', tab: 'About',
}, },
{ {
description: 'Visit our Support Center', description: 'Visit our Support Center',
id: 40, icon: 'fa fa-info-circle',
image: 'info-icon.svg',
route: '/settings/about-us#supportcenter', route: '/settings/about-us#supportcenter',
section: 'Visit our Support Center', section: 'Visit our Support Center',
tab: 'About', tab: 'About',
}, },
{ {
description: 'Visit our web site', description: 'Visit our web site',
id: 41, icon: 'fa fa-info-circle',
image: 'info-icon.svg',
route: '/settings/about-us#visitwebsite', route: '/settings/about-us#visitwebsite',
section: 'Visit our web site', section: 'Visit our web site',
tab: 'About', tab: 'About',
}, },
{ {
description: 'Contact us', description: 'Contact us',
id: 42, icon: 'fa fa-info-circle',
image: 'info-icon.svg',
route: '/settings/about-us#contactus', route: '/settings/about-us#contactus',
section: 'Contact us', section: 'Contact us',
tab: 'About', tab: 'About',
@ -489,18 +460,20 @@ describe('Settings Search Utils', () => {
/** TODO: Remove during TOKEN_DETECTION_V2 feature flag clean up */ /** TODO: Remove during TOKEN_DETECTION_V2 feature flag clean up */
description: 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.', '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, icon: 'fa fa-flask',
image: 'experimental-icon.svg',
route: '/settings/experimental#token-description', route: '/settings/experimental#token-description',
section: 'Use Token Detection', section: 'Use Token Detection',
tab: 'Experimental', tab: 'Experimental',
}, },
]; ];
expect(getSettingsRoutes(t)).toStrictEqual(settingsListExcepted); for (let i = 0; i < expectedSettingsList.length; i++) {
expectedSettingsList[i].id = i + 1;
}
expect(getSettingsRoutes(t)).toStrictEqual(expectedSettingsList);
}); });
it('should not get all settings', () => { it('should not get all settings', () => {
const settingsListExcepted = [ const expectedSettingsList = [
{ {
description: '', description: '',
image: 'general-icon.svg', image: 'general-icon.svg',
@ -516,7 +489,7 @@ describe('Settings Search Utils', () => {
tab: 'About', tab: 'About',
}, },
]; ];
expect(getSettingsRoutes(t)).not.toStrictEqual(settingsListExcepted); expect(getSettingsRoutes(t)).not.toStrictEqual(expectedSettingsList);
}); });
}); });

10
ui/pages/settings/flask/snaps-list-tab/snap-list-tab.js
View File

@ -1,4 +1,4 @@
import React from 'react'; import React, { useMemo, useEffect } from 'react';
import { useDispatch, useSelector } from 'react-redux'; import { useDispatch, useSelector } from 'react-redux';
import { useHistory } from 'react-router-dom'; import { useHistory } from 'react-router-dom';
import SnapSettingsCard from '../../../../components/app/flask/snap-settings-card'; import SnapSettingsCard from '../../../../components/app/flask/snap-settings-card';
@ -15,12 +15,14 @@ import Box from '../../../../components/ui/box';
import { SNAPS_VIEW_ROUTE } from '../../../../helpers/constants/routes'; import { SNAPS_VIEW_ROUTE } from '../../../../helpers/constants/routes';
import { disableSnap, enableSnap } from '../../../../store/actions'; import { disableSnap, enableSnap } from '../../../../store/actions';
import { getSnaps } from '../../../../selectors'; import { getSnaps } from '../../../../selectors';
import { handleSettingsRefs } from '../../../../helpers/utils/settings-search';
const SnapListTab = () => { const SnapListTab = () => {
const t = useI18nContext(); const t = useI18nContext();
const history = useHistory(); const history = useHistory();
const dispatch = useDispatch(); const dispatch = useDispatch();
const snaps = useSelector(getSnaps); const snaps = useSelector(getSnaps);
const settingsRef = useMemo(() => [React.createRef()], []);
const onClick = (snap) => { const onClick = (snap) => {
const route = `${SNAPS_VIEW_ROUTE}/${window.btoa( const route = `${SNAPS_VIEW_ROUTE}/${window.btoa(
unescape(encodeURIComponent(snap.id)), unescape(encodeURIComponent(snap.id)),
@ -35,8 +37,12 @@ const SnapListTab = () => {
} }
}; };
useEffect(() => {
handleSettingsRefs(t, t('snaps'), settingsRef);
}, [t, settingsRef]);
return ( return (
<div className="snap-list-tab"> <div className="snap-list-tab" ref={settingsRef}>
{Object.entries(snaps).length ? ( {Object.entries(snaps).length ? (
<div className="snap-list-tab__body"> <div className="snap-list-tab__body">
<Box display="flex" flexDirection={FLEX_DIRECTION.COLUMN}> <Box display="flex" flexDirection={FLEX_DIRECTION.COLUMN}>

12
ui/pages/settings/settings-search-list/settings-search-list.js
View File

@ -13,17 +13,19 @@ export default function SettingsSearchList({ results, onClickSetting }) {
return ( return (
<div className="settings-page__header__search__list"> <div className="settings-page__header__search__list">
{results.slice(0, 5).map((result) => { {results.slice(0, 5).map((result) => {
const { image, tab, section, id } = result; const { icon, tab, section, id } = result;
return ( return (
Boolean(image || tab || section) && ( Boolean(icon || tab || section) && (
<div key={`settings_${id}`}> <div key={`settings_${id}`}>
<div <div
className="settings-page__header__search__list__item" className="settings-page__header__search__list__item"
onClick={() => onClickSetting(result)} onClick={() => onClickSetting(result)}
> >
<img <i
className="settings-page__header__search__list__item__icon" className={classnames(
src={`./images/${image}`} 'settings-page__header__search__list__item__icon',
icon,
)}
/> />
<span <span