diff --git a/ui/helpers/utils/settings-search.js b/ui/helpers/utils/settings-search.js index c9ca6376a..88bd66794 100644 --- a/ui/helpers/utils/settings-search.js +++ b/ui/helpers/utils/settings-search.js @@ -8,15 +8,32 @@ import { NETWORKS_ROUTE, CONTACT_LIST_ROUTE, EXPERIMENTAL_ROUTE, + ///: BEGIN:ONLY_INCLUDE_IN(flask) + SNAPS_LIST_ROUTE, + ///: END:ONLY_INCLUDE_IN } from '../constants/routes'; function showHideSettings(t, settings) { - if (!process.env.COLLECTIBLES_V1) { - return settings.filter( - (e) => - e.section !== t('enableOpenSeaAPI') && - e.section !== t('useCollectibleDetection'), - ); + if (process.env.COLLECTIBLES_V1) { + return [ + ...settings, + { + 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; } @@ -28,297 +45,254 @@ export function getSettingsRoutes(t) { section: t('currencyConversion'), description: '', route: `${GENERAL_ROUTE}#currency-conversion`, - image: 'general-icon.svg', - id: 1, + icon: 'fa fa-cog', }, { tab: t('general'), section: t('primaryCurrencySetting'), description: t('primaryCurrencySettingDescription'), route: `${GENERAL_ROUTE}#primary-currency`, - image: 'general-icon.svg', - id: 2, + icon: 'fa fa-cog', }, { tab: t('general'), section: t('currentLanguage'), description: '', route: `${GENERAL_ROUTE}#current-language`, - image: 'general-icon.svg', - id: 3, + icon: 'fa fa-cog', }, { tab: t('general'), section: t('accountIdenticon'), description: '', route: `${GENERAL_ROUTE}#account-identicon`, - image: 'general-icon.svg', - id: 4, + icon: 'fa fa-cog', }, { tab: t('general'), section: t('hideZeroBalanceTokens'), description: '', route: `${GENERAL_ROUTE}#zero-balancetokens`, - image: 'general-icon.svg', - id: 5, + icon: 'fa fa-cog', }, { tab: t('advanced'), section: t('stateLogs'), description: t('stateLogsDescription'), route: `${ADVANCED_ROUTE}#state-logs`, - image: 'advanced-icon.svg', - id: 6, + icon: 'fas fa-sliders-h', }, { tab: t('advanced'), section: t('syncWithMobile'), description: '', route: `${ADVANCED_ROUTE}#sync-withmobile`, - image: 'advanced-icon.svg', - id: 7, + icon: 'fas fa-sliders-h', }, { tab: t('advanced'), section: t('resetAccount'), description: t('resetAccountDescription'), route: `${ADVANCED_ROUTE}#reset-account`, - image: 'advanced-icon.svg', - id: 8, + icon: 'fas fa-sliders-h', }, { tab: t('advanced'), section: t('showAdvancedGasInline'), description: t('showAdvancedGasInlineDescription'), route: `${ADVANCED_ROUTE}#advanced-gascontrols`, - image: 'advanced-icon.svg', - id: 9, + icon: 'fas fa-sliders-h', }, { tab: t('advanced'), section: t('showHexData'), description: t('showHexDataDescription'), route: `${ADVANCED_ROUTE}#show-hexdata`, - image: 'advanced-icon.svg', - id: 10, + icon: 'fas fa-sliders-h', }, { tab: t('advanced'), section: t('showFiatConversionInTestnets'), description: t('showFiatConversionInTestnetsDescription'), route: `${ADVANCED_ROUTE}#conversion-testnetworks`, - image: 'advanced-icon.svg', - id: 11, + icon: 'fas fa-sliders-h', }, { tab: t('advanced'), section: t('showTestnetNetworks'), description: t('showTestnetNetworksDescription'), route: `${ADVANCED_ROUTE}#show-testnets`, - image: 'advanced-icon.svg', - id: 12, + icon: 'fas fa-sliders-h', }, { tab: t('advanced'), section: t('nonceField'), description: t('nonceFieldDescription'), route: `${ADVANCED_ROUTE}#customize-nonce`, - image: 'advanced-icon.svg', - id: 13, + icon: 'fas fa-sliders-h', }, { tab: t('advanced'), section: t('autoLockTimeLimit'), description: t('autoLockTimeLimitDescription'), route: `${ADVANCED_ROUTE}#autolock-timer`, - image: 'advanced-icon.svg', - id: 14, + icon: 'fas fa-sliders-h', }, { tab: t('advanced'), section: t('syncWithThreeBox'), description: t('syncWithThreeBoxDescription'), route: `${ADVANCED_ROUTE}#sync-with3box`, - image: 'advanced-icon.svg', - id: 15, + icon: 'fas fa-sliders-h', }, { tab: t('advanced'), section: t('ipfsGateway'), description: t('ipfsGatewayDescription'), route: `${ADVANCED_ROUTE}#ipfs-gateway`, - image: 'advanced-icon.svg', - id: 16, + icon: 'fas fa-sliders-h', }, { tab: t('advanced'), section: t('preferredLedgerConnectionType'), description: t('preferredLedgerConnectionType'), route: `${ADVANCED_ROUTE}#ledger-connection`, - image: 'advanced-icon.svg', - id: 17, + icon: 'fas fa-sliders-h', }, { tab: t('advanced'), section: t('dismissReminderField'), description: t('dismissReminderDescriptionField'), route: `${ADVANCED_ROUTE}#dimiss-secretrecovery`, - image: 'advanced-icon.svg', - id: 18, + icon: 'fas fa-sliders-h', }, { tab: t('contacts'), section: t('contacts'), description: t('contacts'), route: CONTACT_LIST_ROUTE, - image: 'contacts-icon.svg', - id: 19, + icon: 'fa fa-address-book', }, + ///: 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'), section: t('revealSeedWords'), description: t('revealSeedWords'), route: `${SECURITY_ROUTE}#reveal-secretrecovery`, - image: 'security-icon.svg', - id: 20, + icon: 'fa fa-lock', }, { tab: t('securityAndPrivacy'), section: t('showIncomingTransactions'), description: t('showIncomingTransactionsDescription'), route: `${SECURITY_ROUTE}#incoming-transaction`, - image: 'security-icon.svg', - id: 21, + icon: 'fa fa-lock', }, { tab: t('securityAndPrivacy'), section: t('usePhishingDetection'), description: t('usePhishingDetectionDescription'), route: `${SECURITY_ROUTE}#phishing-detection`, - image: 'security-icon.svg', - id: 22, + icon: 'fa fa-lock', }, { tab: t('securityAndPrivacy'), section: t('participateInMetaMetrics'), description: t('participateInMetaMetricsDescription'), route: `${SECURITY_ROUTE}#metrametrics`, - image: 'security-icon.svg', - id: 23, + icon: 'fa fa-lock', }, { tab: t('alerts'), section: t('alertSettingsUnconnectedAccount'), description: t('alertSettingsUnconnectedAccount'), route: `${ALERTS_ROUTE}#unconnected-account`, - image: 'alerts-icon.svg', - id: 24, + icon: 'fa fa-bell', }, { tab: t('alerts'), section: t('alertSettingsWeb3ShimUsage'), description: t('alertSettingsWeb3ShimUsage'), route: `${ALERTS_ROUTE}#web3-shimusage`, - image: 'alerts-icon.svg', - id: 25, + icon: 'fa fa-bell', }, { tab: t('networks'), section: t('mainnet'), description: t('mainnet'), route: `${NETWORKS_ROUTE}#networks-mainnet`, - image: 'network-icon.svg', - id: 26, + icon: 'fa fa-plug', }, { tab: t('networks'), section: t('ropsten'), description: t('ropsten'), route: `${NETWORKS_ROUTE}#networks-ropsten`, - image: 'network-icon.svg', - id: 27, + icon: 'fa fa-plug', }, { tab: t('networks'), section: t('rinkeby'), description: t('rinkeby'), route: `${NETWORKS_ROUTE}#networks-rinkeby`, - image: 'network-icon.svg', - id: 28, + icon: 'fa fa-plug', }, { tab: t('networks'), section: t('goerli'), description: t('goerli'), route: `${NETWORKS_ROUTE}#networks-goerli`, - image: 'network-icon.svg', - id: 29, + icon: 'fa fa-plug', }, { tab: t('networks'), section: t('kovan'), description: t('kovan'), - route: `${NETWORKS_ROUTE}#networtks-kovan`, - image: 'network-icon.svg', - id: 30, + route: `${NETWORKS_ROUTE}#networks-kovan`, + icon: 'fa fa-plug', }, { tab: t('networks'), section: t('localhost'), description: t('localhost'), - route: `${NETWORKS_ROUTE}#network-localhost`, - image: 'network-icon.svg', - id: 31, + route: `${NETWORKS_ROUTE}#networks-localhost`, + icon: 'fa fa-plug', }, - { - 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'), section: t('metamaskVersion'), description: t('builtAroundTheWorld'), route: `${ABOUT_US_ROUTE}#version`, - image: 'info-icon.svg', - id: 35, + icon: 'fa fa-info-circle', }, { tab: t('about'), section: t('links'), description: '', route: `${ABOUT_US_ROUTE}#links`, - image: 'info-icon.svg', - id: 36, + icon: 'fa fa-info-circle', }, { tab: t('about'), section: t('privacyMsg'), description: t('privacyMsg'), route: `${ABOUT_US_ROUTE}#privacy-policy`, - image: 'info-icon.svg', - id: 37, + icon: 'fa fa-info-circle', }, { tab: t('about'), section: t('terms'), description: t('terms'), route: `${ABOUT_US_ROUTE}#terms`, - image: 'info-icon.svg', - id: 38, + icon: 'fa fa-info-circle', }, { @@ -326,8 +300,7 @@ export function getSettingsRoutes(t) { section: t('attributions'), description: t('attributions'), route: `${ABOUT_US_ROUTE}#attributions`, - image: 'info-icon.svg', - id: 39, + icon: 'fa fa-info-circle', }, { @@ -335,8 +308,7 @@ export function getSettingsRoutes(t) { section: t('supportCenter'), description: t('supportCenter'), route: `${ABOUT_US_ROUTE}#supportcenter`, - image: 'info-icon.svg', - id: 40, + icon: 'fa fa-info-circle', }, { @@ -344,8 +316,7 @@ export function getSettingsRoutes(t) { section: t('visitWebSite'), description: t('visitWebSite'), route: `${ABOUT_US_ROUTE}#visitwebsite`, - image: 'info-icon.svg', - id: 41, + icon: 'fa fa-info-circle', }, { @@ -353,11 +324,9 @@ export function getSettingsRoutes(t) { section: t('contactUs'), description: t('contactUs'), route: `${ABOUT_US_ROUTE}#contactus`, - image: 'info-icon.svg', - id: 42, + icon: 'fa fa-info-circle', }, ]; - if (process.env.TOKEN_DETECTION_V2) { settingsRoutesList = [ ...settingsRoutesList, @@ -367,8 +336,7 @@ export function getSettingsRoutes(t) { section: t('tokenDetection'), description: t('tokenDetectionToggleDescription'), route: `${ADVANCED_ROUTE}#token-description`, - image: 'advanced-icon.svg', - id: 32, + icon: 'fas fa-sliders-h', }, ]; } else { @@ -380,12 +348,13 @@ export function getSettingsRoutes(t) { section: t('useTokenDetection'), description: t('useTokenDetectionDescription'), route: `${EXPERIMENTAL_ROUTE}#token-description`, - image: 'experimental-icon.svg', - id: 32, + icon: 'fa fa-flask', }, ]; } - + for (let i = 0; i < settingsRoutesList.length; i++) { + settingsRoutesList[i].id = i + 1; + } // TODO: write to json file? return showHideSettings(t, settingsRoutesList); } @@ -403,7 +372,6 @@ export function handleSettingsRefs(t, tabName, settingsRefs) { const settingsRefsIndex = settingsSearchJsonFiltered.findIndex( (s) => s.route.substring(1) === window.location.hash.substring(1), ); - if ( settingsRefsIndex !== -1 && settingsRefs[settingsRefsIndex].current !== null diff --git a/ui/helpers/utils/settings-search.test.js b/ui/helpers/utils/settings-search.test.js index b7249c6af..97b58f271 100644 --- a/ui/helpers/utils/settings-search.test.js +++ b/ui/helpers/utils/settings-search.test.js @@ -123,7 +123,7 @@ const t = (key) => { case 'enableOpenSeaAPI': return 'Enable OpenSea API'; 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': return 'Autodetect NFTs'; case 'useCollectibleDetectionDescription': @@ -148,7 +148,8 @@ const t = (key) => { return 'Visit our web site'; case 'contactUs': return 'Contact us'; - + case 'snaps': + return 'Snaps'; default: return ''; } @@ -157,11 +158,10 @@ const t = (key) => { describe('Settings Search Utils', () => { describe('getSettingsRoutes', () => { it('should get all settings', () => { - const settingsListExcepted = [ + const expectedSettingsList = [ { description: '', - id: 1, - image: 'general-icon.svg', + icon: 'fa fa-cog', route: '/settings/general#currency-conversion', section: 'Currency Conversion', tab: 'General', @@ -169,32 +169,28 @@ describe('Settings Search Utils', () => { { 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.', - id: 2, - image: 'general-icon.svg', + icon: 'fa fa-cog', route: '/settings/general#primary-currency', section: 'Primary Currenc', tab: 'General', }, { description: '', - id: 3, - image: 'general-icon.svg', + icon: 'fa fa-cog', route: '/settings/general#current-language', section: 'Current Language', tab: 'General', }, { description: '', - id: 4, - image: 'general-icon.svg', + icon: 'fa fa-cog', route: '/settings/general#account-identicon', section: 'Current Language"', tab: 'General', }, { description: '', - id: 5, - image: 'general-icon.svg', + icon: 'fa fa-cog', route: '/settings/general#zero-balancetokens', section: 'Hide Tokens Without Balance', tab: 'General', @@ -202,16 +198,14 @@ describe('Settings Search Utils', () => { { description: 'State logs contain your public account addresses and sent transactions.', - id: 6, - image: 'advanced-icon.svg', + icon: 'fas fa-sliders-h', route: '/settings/advanced#state-logs', section: 'State Logs', tab: 'Advanced', }, { description: '', - id: 7, - image: 'advanced-icon.svg', + icon: 'fas fa-sliders-h', route: '/settings/advanced#sync-withmobile', section: 'Sync with mobile', tab: 'Advanced', @@ -219,8 +213,7 @@ describe('Settings Search Utils', () => { { 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.', - id: 8, - image: 'advanced-icon.svg', + icon: 'fas fa-sliders-h', route: '/settings/advanced#reset-account', section: 'Reset Account', tab: 'Advanced', @@ -228,8 +221,7 @@ describe('Settings Search Utils', () => { { description: 'Select this to show gas price and limit controls directly on the send and confirm screens.', - id: 9, - image: 'advanced-icon.svg', + icon: 'fas fa-sliders-h', route: '/settings/advanced#advanced-gascontrols', section: 'Advanced gas controls', tab: 'Advanced', @@ -237,24 +229,21 @@ describe('Settings Search Utils', () => { { description: 'Select this to show the hex data field on the send screen', - id: 10, - image: 'advanced-icon.svg', + icon: 'fas fa-sliders-h', route: '/settings/advanced#show-hexdata', section: 'Show Hex Data', tab: 'Advanced', }, { description: 'Select this to show fiat conversion on test network', - id: 11, - image: 'advanced-icon.svg', + icon: 'fas fa-sliders-h', route: '/settings/advanced#conversion-testnetworks', section: 'Show Conversion on test networks', tab: 'Advanced', }, { description: 'Select this to show test networks in network list', - id: 12, - image: 'advanced-icon.svg', + icon: 'fas fa-sliders-h', route: '/settings/advanced#show-testnets', section: 'Show test networks', tab: 'Advanced', @@ -262,8 +251,7 @@ describe('Settings Search Utils', () => { { description: 'Turn this on to change the nonce (transaction number) on confirmation screens. This is an advanced feature, use cautiously.', - id: 13, - image: 'advanced-icon.svg', + icon: 'fas fa-sliders-h', route: '/settings/advanced#customize-nonce', section: 'Customize transaction nonce', tab: 'Advanced', @@ -271,8 +259,7 @@ describe('Settings Search Utils', () => { { description: 'Set the idle time in minutes before MetaMask will become locked.', - id: 14, - image: 'advanced-icon.svg', + icon: 'fas fa-sliders-h', route: '/settings/advanced#autolock-timer', section: 'Auto-Lock Timer (minutes)', tab: 'Advanced', @@ -280,8 +267,7 @@ describe('Settings Search Utils', () => { { description: 'Turn on to have your settings backed up with 3Box. This feature is currently experimental; use at your own risk.', - id: 15, - image: 'advanced-icon.svg', + icon: 'fas fa-sliders-h', route: '/settings/advanced#sync-with3box', section: 'Sync data with 3Box (experimental)', tab: 'Advanced', @@ -289,16 +275,14 @@ describe('Settings Search Utils', () => { { description: 'Enter the URL of the IPFS CID gateway to use for ENS content resolution.', - id: 16, - image: 'advanced-icon.svg', + icon: 'fas fa-sliders-h', route: '/settings/advanced#ipfs-gateway', section: 'IPFS Gateway', tab: 'Advanced', }, { description: 'Preferred Ledger Connection Type', - id: 17, - image: 'advanced-icon.svg', + icon: 'fas fa-sliders-h', route: '/settings/advanced#ledger-connection', section: 'Preferred Ledger Connection Type', tab: 'Advanced', @@ -306,24 +290,30 @@ describe('Settings Search Utils', () => { { 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', - id: 18, - image: 'advanced-icon.svg', + icon: 'fas fa-sliders-h', route: '/settings/advanced#dimiss-secretrecovery', section: 'Dismiss Secret Recovery Phrase backup reminder', tab: 'Advanced', }, { description: '', - id: 19, - image: 'contacts-icon.svg', + icon: 'fa fa-address-book', route: '/settings/contact-list', section: '', 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', - id: 20, - image: 'security-icon.svg', + icon: 'fa fa-lock', route: '/settings/security#reveal-secretrecovery', section: 'Reveal Secret Recovery Phrase', tab: 'Security & Privacy', @@ -331,8 +321,7 @@ describe('Settings Search Utils', () => { { description: 'Select this to use Etherscan to show incoming transactions in the transactions list', - id: 21, - image: 'security-icon.svg', + icon: 'fa fa-lock', route: '/settings/security#incoming-transaction', section: 'Show Incoming Transactions', tab: 'Security & Privacy', @@ -340,8 +329,7 @@ describe('Settings Search Utils', () => { { description: 'Display a warning for phishing domains targeting Ethereum users', - id: 22, - image: 'security-icon.svg', + icon: 'fa fa-lock', route: '/settings/security#phishing-detection', section: 'Use Phishing Detection', tab: 'Security & Privacy', @@ -349,8 +337,7 @@ describe('Settings Search Utils', () => { { description: 'Participate in MetaMetrics to help us make MetaMask better', - id: 23, - image: 'security-icon.svg', + icon: 'fa fa-lock', route: '/settings/security#metrametrics', section: 'Participate in MetaMetrics', tab: 'Security & Privacy', @@ -358,8 +345,7 @@ describe('Settings Search Utils', () => { { description: 'Browsing a website with an unconnected account selected', - id: 24, - image: 'alerts-icon.svg', + icon: 'fa fa-bell', route: '/settings/alerts#unconnected-account', section: 'Browsing a website with an unconnected account selected', tab: 'Alerts', @@ -367,120 +353,105 @@ describe('Settings Search Utils', () => { { description: 'When a website tries to use the removed window.web3 API', - id: 25, - image: 'alerts-icon.svg', + icon: 'fa fa-bell', route: '/settings/alerts#web3-shimusage', section: 'When a website tries to use the removed window.web3 API', tab: 'Alerts', }, { description: 'Ethereum Mainnet', - id: 26, - image: 'network-icon.svg', + icon: 'fa fa-plug', route: '/settings/networks#networks-mainnet', section: 'Ethereum Mainnet', tab: 'Networks', }, { description: 'Ropsten Test Network', - id: 27, - image: 'network-icon.svg', + icon: 'fa fa-plug', route: '/settings/networks#networks-ropsten', section: 'Ropsten Test Network', tab: 'Networks', }, { description: 'Rinkeby Test Network', - id: 28, - image: 'network-icon.svg', + icon: 'fa fa-plug', route: '/settings/networks#networks-rinkeby', section: 'Rinkeby Test Network', tab: 'Networks', }, { description: 'Goerli Test Network', - id: 29, - image: 'network-icon.svg', + icon: 'fa fa-plug', route: '/settings/networks#networks-goerli', section: 'Goerli Test Network', tab: 'Networks', }, { description: 'Kovan Test Network', - id: 30, - image: 'network-icon.svg', - route: '/settings/networks#networtks-kovan', + icon: 'fa fa-plug', + route: '/settings/networks#networks-kovan', section: 'Kovan Test Network', tab: 'Networks', }, { description: 'Localhost 8545', - id: 31, - image: 'network-icon.svg', - route: '/settings/networks#network-localhost', + icon: 'fa fa-plug', + route: '/settings/networks#networks-localhost', section: 'Localhost 8545', tab: 'Networks', }, { description: 'MetaMask is designed and built around the world.', - id: 35, - image: 'info-icon.svg', + icon: 'fa fa-info-circle', route: '/settings/about-us#version', section: 'MetaMask Version', tab: 'About', }, { description: '', - id: 36, - image: 'info-icon.svg', + icon: 'fa fa-info-circle', route: '/settings/about-us#links', section: 'Links', tab: 'About', }, { description: 'Privacy Policy', - id: 37, - image: 'info-icon.svg', + icon: 'fa fa-info-circle', route: '/settings/about-us#privacy-policy', section: 'Privacy Policy', tab: 'About', }, { description: 'Terms of Use', - id: 38, - image: 'info-icon.svg', + icon: 'fa fa-info-circle', route: '/settings/about-us#terms', section: 'Terms of Use', tab: 'About', }, { description: 'Attributions', - id: 39, - image: 'info-icon.svg', + icon: 'fa fa-info-circle', route: '/settings/about-us#attributions', section: 'Attributions', tab: 'About', }, { description: 'Visit our Support Center', - id: 40, - image: 'info-icon.svg', + icon: 'fa fa-info-circle', route: '/settings/about-us#supportcenter', section: 'Visit our Support Center', tab: 'About', }, { description: 'Visit our web site', - id: 41, - image: 'info-icon.svg', + icon: 'fa fa-info-circle', route: '/settings/about-us#visitwebsite', section: 'Visit our web site', tab: 'About', }, { description: 'Contact us', - id: 42, - image: 'info-icon.svg', + icon: 'fa fa-info-circle', route: '/settings/about-us#contactus', section: 'Contact us', tab: 'About', @@ -489,18 +460,20 @@ describe('Settings Search Utils', () => { /** 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', + icon: 'fa fa-flask', route: '/settings/experimental#token-description', section: 'Use Token Detection', 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', () => { - const settingsListExcepted = [ + const expectedSettingsList = [ { description: '', image: 'general-icon.svg', @@ -516,7 +489,7 @@ describe('Settings Search Utils', () => { tab: 'About', }, ]; - expect(getSettingsRoutes(t)).not.toStrictEqual(settingsListExcepted); + expect(getSettingsRoutes(t)).not.toStrictEqual(expectedSettingsList); }); }); diff --git a/ui/pages/settings/flask/snaps-list-tab/snap-list-tab.js b/ui/pages/settings/flask/snaps-list-tab/snap-list-tab.js index a4178c538..e030ddbf1 100644 --- a/ui/pages/settings/flask/snaps-list-tab/snap-list-tab.js +++ b/ui/pages/settings/flask/snaps-list-tab/snap-list-tab.js @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useMemo, useEffect } from 'react'; import { useDispatch, useSelector } from 'react-redux'; import { useHistory } from 'react-router-dom'; 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 { disableSnap, enableSnap } from '../../../../store/actions'; import { getSnaps } from '../../../../selectors'; +import { handleSettingsRefs } from '../../../../helpers/utils/settings-search'; const SnapListTab = () => { const t = useI18nContext(); const history = useHistory(); const dispatch = useDispatch(); const snaps = useSelector(getSnaps); + const settingsRef = useMemo(() => [React.createRef()], []); const onClick = (snap) => { const route = `${SNAPS_VIEW_ROUTE}/${window.btoa( unescape(encodeURIComponent(snap.id)), @@ -35,8 +37,12 @@ const SnapListTab = () => { } }; + useEffect(() => { + handleSettingsRefs(t, t('snaps'), settingsRef); + }, [t, settingsRef]); + return ( -
+
{Object.entries(snaps).length ? (
diff --git a/ui/pages/settings/settings-search-list/settings-search-list.js b/ui/pages/settings/settings-search-list/settings-search-list.js index 2c5bfbdf9..911871959 100644 --- a/ui/pages/settings/settings-search-list/settings-search-list.js +++ b/ui/pages/settings/settings-search-list/settings-search-list.js @@ -13,17 +13,19 @@ export default function SettingsSearchList({ results, onClickSetting }) { return (
{results.slice(0, 5).map((result) => { - const { image, tab, section, id } = result; + const { icon, tab, section, id } = result; return ( - Boolean(image || tab || section) && ( + Boolean(icon || tab || section) && (
onClickSetting(result)} > -