Fixing scroll references for Advanced and Security settings (#19771)

MetaMask · Jul 11, 2023 · 8e55e95 · 8e55e95
1 parent 13b1f8c
commit 8e55e95
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 23 deletions.
diff --git a/ui/helpers/constants/settings.js b/ui/helpers/constants/settings.js
@@ -116,7 +116,7 @@ export const SETTINGS_CONSTANTS = [
     tabMessage: (t) => t('advanced'),
     sectionMessage: (t) => t('dismissReminderField'),
     descriptionMessage: (t) => t('dismissReminderDescriptionField'),
-    route: `${ADVANCED_ROUTE}#dimiss-secretrecovery`,
+    route: `${ADVANCED_ROUTE}#dismiss-secretrecovery`,
     icon: 'fas fa-sliders-h',
   },
   {
@@ -167,35 +167,35 @@ export const SETTINGS_CONSTANTS = [
     tabMessage: (t) => t('securityAndPrivacy'),
     sectionMessage: (t) => t('participateInMetaMetrics'),
     descriptionMessage: (t) => t('participateInMetaMetricsDescription'),
-    route: `${SECURITY_ROUTE}#metrametrics`,
+    route: `${SECURITY_ROUTE}#metametrics`,
     icon: 'fa fa-lock',
   },
   {
     tabMessage: (t) => t('securityAndPrivacy'),
     sectionMessage: (t) => t('chooseYourNetwork'),
     descriptionMessage: (t) => t('chooseYourNetworkDescription'),
-    route: `${SECURITY_ROUTE}#-chose-your-network`,
+    route: `${SECURITY_ROUTE}#choose-your-network`,
     icon: 'fa fa-lock',
   },
   {
     tabMessage: (t) => t('securityAndPrivacy'),
     sectionMessage: (t) => t('addCustomIPFSGateway'),
     descriptionMessage: (t) => t('addCustomIPFSGatewayDescription'),
-    route: `${SECURITY_ROUTE}#-add-custom-ipfs-gateway`,
+    route: `${SECURITY_ROUTE}#add-custom-ipfs-gateway`,
     icon: 'fa fa-lock',
   },
   {
     tabMessage: (t) => t('securityAndPrivacy'),
     sectionMessage: (t) => t('autoDetectTokens'),
     descriptionMessage: (t) => t('autoDetectTokensDescription'),
-    route: `${SECURITY_ROUTE}#-auto-detect-tokens`,
+    route: `${SECURITY_ROUTE}#auto-detect-tokens`,
     icon: 'fa fa-lock',
   },
   {
     tabMessage: (t) => t('securityAndPrivacy'),
     sectionMessage: (t) => t('useMultiAccountBalanceChecker'),
     descriptionMessage: (t) => t('useMultiAccountBalanceCheckerDescription'),
-    route: `${SECURITY_ROUTE}#-use-milti-account-balance-checker`,
+    route: `${SECURITY_ROUTE}#use-multi-account-balance-checker`,
     icon: 'fa fa-lock',
   },
   {

diff --git a/ui/pages/settings/advanced-tab/advanced-tab.component.js b/ui/pages/settings/advanced-tab/advanced-tab.component.js
@@ -204,7 +204,7 @@ export default class AdvancedTab extends PureComponent {
 
     return (
       <div
-        ref={this.settingsRefs[2]}
+        ref={this.settingsRefs[1]}
         className="settings-page__content-row"
         data-testid="advanced-setting-reset-account"
       >
@@ -244,7 +244,7 @@ export default class AdvancedTab extends PureComponent {
 
     return (
       <div
-        ref={this.settingsRefs[3]}
+        ref={this.settingsRefs[2]}
         className="settings-page__content-row"
         data-testid="advanced-setting-hex-data"
       >
@@ -275,7 +275,7 @@ export default class AdvancedTab extends PureComponent {
 
     return (
       <div
-        ref={this.settingsRefs[4]}
+        ref={this.settingsRefs[3]}
         className="settings-page__content-row"
         data-testid="advanced-setting-show-testnet-conversion"
       >
@@ -307,7 +307,7 @@ export default class AdvancedTab extends PureComponent {
 
     return (
       <div
-        ref={this.settingsRefs[5]}
+        ref={this.settingsRefs[4]}
         className="settings-page__content-row"
         data-testid="advanced-setting-show-testnet-conversion"
       >
@@ -337,7 +337,7 @@ export default class AdvancedTab extends PureComponent {
 
     return (
       <div
-        ref={this.settingsRefs[6]}
+        ref={this.settingsRefs[5]}
         className="settings-page__content-row"
         data-testid="advanced-setting-custom-nonce"
       >
@@ -368,7 +368,7 @@ export default class AdvancedTab extends PureComponent {
 
     return (
       <div
-        ref={this.settingsRefs[7]}
+        ref={this.settingsRefs[6]}
         className="settings-page__content-row"
         data-testid="advanced-setting-auto-lock"
       >
@@ -455,7 +455,7 @@ export default class AdvancedTab extends PureComponent {
 
     return (
       <div
-        ref={this.settingsRefs[8]}
+        ref={this.settingsRefs[7]}
         className="settings-page__content-row"
         data-testId="ledger-live-control"
       >
@@ -521,7 +521,7 @@ export default class AdvancedTab extends PureComponent {
 
     return (
       <div
-        ref={this.settingsRefs[9]}
+        ref={this.settingsRefs[8]}
         className="settings-page__content-row"
         data-testid="advanced-setting-dismiss-reminder"
       >
@@ -565,7 +565,7 @@ export default class AdvancedTab extends PureComponent {
     };
     return (
       <div
-        ref={this.settingsRefs[10]}
+        ref={this.settingsRefs[9]}
         className="settings-page__content-row"
         data-testid="advanced-setting-toggle-ethsign"
       >
@@ -644,7 +644,7 @@ export default class AdvancedTab extends PureComponent {
     const { t } = this.context;
     return (
       <div
-        ref={this.settingsRefs[11]}
+        ref={this.settingsRefs[10]}
         className="settings-page__content-row"
         data-testid="advanced-setting-data-backup"
       >
@@ -684,7 +684,7 @@ export default class AdvancedTab extends PureComponent {
 
     return (
       <div
-        ref={this.settingsRefs[12]}
+        ref={this.settingsRefs[11]}
         className="settings-page__content-row"
         data-testid="advanced-setting-data-restore"
       >

diff --git a/ui/pages/settings/security-tab/security-tab.component.js b/ui/pages/settings/security-tab/security-tab.component.js
@@ -105,7 +105,10 @@ export default class SecurityTab extends PureComponent {
 
     return (
       <>
-        <div className="settings-page__security-tab-sub-header">
+        <div
+          ref={this.settingsRefs[0]}
+          className="settings-page__security-tab-sub-header"
+        >
           {t('secretRecoveryPhrase')}
         </div>
         <div className="settings-page__content-padded">
@@ -262,7 +265,7 @@ export default class SecurityTab extends PureComponent {
 
     return (
       <div
-        ref={this.settingsRefs[5]}
+        ref={this.settingsRefs[4]}
         className="settings-page__content-row"
         data-testid="advanced-setting-choose-your-network"
       >
@@ -345,7 +348,7 @@ export default class SecurityTab extends PureComponent {
 
     return (
       <div
-        ref={this.settingsRefs[6]}
+        ref={this.settingsRefs[5]}
         className="settings-page__content-row"
         data-testid="setting-ipfs-gateway"
       >
@@ -377,7 +380,7 @@ export default class SecurityTab extends PureComponent {
 
     return (
       <div
-        ref={this.settingsRefs[4]}
+        ref={this.settingsRefs[6]}
         className="settings-page__content-row"
         data-testid="advanced-setting-gas-fee-estimation"
       >
@@ -427,7 +430,7 @@ export default class SecurityTab extends PureComponent {
       this.props;
 
     return (
-      <div ref={this.settingsRefs[8]} className="settings-page__content-row">
+      <div ref={this.settingsRefs[7]} className="settings-page__content-row">
         <div className="settings-page__content-item">
           <span>{t('useMultiAccountBalanceChecker')}</span>
           <div className="settings-page__content-description">
@@ -463,7 +466,7 @@ export default class SecurityTab extends PureComponent {
     const { useCurrencyRateCheck, setUseCurrencyRateCheck } = this.props;
 
     return (
-      <div ref={this.settingsRefs[9]} className="settings-page__content-row">
+      <div ref={this.settingsRefs[8]} className="settings-page__content-row">
         <div className="settings-page__content-item">
           <span>{t('currencyRateCheckToggle')}</span>
           <div className="settings-page__content-description">