fixing lint and Jest

MetaMask · Aug 5, 2023 · 777c5bf · 777c5bf
1 parent cb8f946
commit 777c5bf
Show file tree

Hide file tree

Showing 4 changed files with 82 additions and 75 deletions.
diff --git a/app/scripts/lib/util.ts b/app/scripts/lib/util.ts
@@ -1,4 +1,4 @@
-import url from 'url';
+import urlLib from 'url';
 import { AccessList } from '@ethereumjs/tx';
 import BN from 'bn.js';
 import { memoize } from 'lodash';
@@ -237,7 +237,7 @@ export function previousValueComparator<A>(
 export function addUrlProtocolPrefix(urlString: string) {
   let trimmed = urlString.trim();
 
-  if (trimmed.length && !url.parse(trimmed).protocol) {
+  if (trimmed.length && !urlLib.parse(trimmed).protocol) {
     trimmed = `https://${trimmed}`;
   }
 

diff --git a/ui/pages/settings/security-tab/__snapshots__/security-tab.test.js.snap b/ui/pages/settings/security-tab/__snapshots__/security-tab.test.js.snap
@@ -448,6 +448,7 @@ exports[`Security Tab should match snapshot 1`] = `
         </div>
         <div
           class="settings-page__content-item-col"
+          data-testid="ipfsToggle"
         >
           <label
             class="toggle-button toggle-button--on"
@@ -785,54 +786,58 @@ exports[`Security Tab should match snapshot 1`] = `
           </div>
         </div>
         <div
-          class="settings-page__content-item-col"
-          data-testid="displayNftMedia"
+          class="settings-page__content-item"
         >
-          <label
-            class="toggle-button toggle-button--off"
-            tabindex="0"
+          <div
+            class="settings-page__content-item-col"
+            data-testid="enableOpenSeaAPI"
           >
-            <div
-              style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
+            <label
+              class="toggle-button toggle-button--on"
+              tabindex="0"
             >
               <div
-                style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
+                style="display: flex; width: 52px; align-items: center; justify-content: flex-start; position: relative; cursor: pointer; background-color: transparent; border: 0px; padding: 0px; user-select: none;"
               >
                 <div
-                  style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 0; width: 26px; height: 20px; left: 4px;"
-                />
+                  style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
+                >
+                  <div
+                    style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 1; width: 26px; height: 20px; left: 4px;"
+                  />
+                  <div
+                    style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 0;"
+                  />
+                </div>
                 <div
-                  style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 1;"
+                  style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
+                >
+                  <div
+                    style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(3, 125, 214); left: 18px;"
+                  />
+                </div>
+                <input
+                  style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
+                  type="checkbox"
+                  value="true"
                 />
               </div>
               <div
-                style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
+                class="toggle-button__status"
               >
-                <div
-                  style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(106, 115, 125); left: 3px;"
-                />
+                <span
+                  class="toggle-button__label-off"
+                >
+                  Off
+                </span>
+                <span
+                  class="toggle-button__label-on"
+                >
+                  On
+                </span>
               </div>
-              <input
-                style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
-                type="checkbox"
-                value="false"
-              />
-            </div>
-            <div
-              class="toggle-button__status"
-            >
-              <span
-                class="toggle-button__label-off"
-              >
-                Off
-              </span>
-              <span
-                class="toggle-button__label-on"
-              >
-                On
-              </span>
-            </div>
-          </label>
+            </label>
+          </div>
         </div>
       </div>
       <div
@@ -877,7 +882,7 @@ exports[`Security Tab should match snapshot 1`] = `
           data-testid="useNftDetection"
         >
           <label
-            class="toggle-button toggle-button--off"
+            class="toggle-button toggle-button--on"
             tabindex="0"
           >
             <div
@@ -887,23 +892,23 @@ exports[`Security Tab should match snapshot 1`] = `
                 style="width: 40px; height: 24px; padding: 0px; border-radius: 26px; display: flex; align-items: center; justify-content: center; background-color: rgb(242, 244, 246);"
               >
                 <div
-                  style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 0; width: 26px; height: 20px; left: 4px;"
+                  style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgb(250, 250, 250); margin-top: auto; margin-bottom: auto; line-height: 0; opacity: 1; width: 26px; height: 20px; left: 4px;"
                 />
                 <div
-                  style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 1;"
+                  style="font-size: 11px; display: flex; align-items: center; justify-content: center; font-family: 'Helvetica Neue', Helvetica, sans-serif; position: relative; color: rgba(255, 255, 255, 0.6); bottom: 0px; margin-top: auto; margin-bottom: auto; padding-right: 5px; line-height: 0; width: 26px; height: 20px; opacity: 0;"
                 />
               </div>
               <div
                 style="position: absolute; height: 100%; top: 0px; left: 0px; display: flex; flex: 1; align-self: stretch; align-items: center; justify-content: flex-start;"
               >
                 <div
-                  style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(106, 115, 125); left: 3px;"
+                  style="width: 18px; height: 18px; display: flex; align-self: center; box-shadow: none; border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(3, 125, 214); left: 18px;"
                 />
               </div>
               <input
                 style="border: 0px; height: 1px; margin: -1px; overflow: hidden; padding: 0px; position: absolute; width: 1px;"
                 type="checkbox"
-                value="false"
+                value="true"
               />
             </div>
             <div

diff --git a/ui/pages/settings/security-tab/security-tab.component.js b/ui/pages/settings/security-tab/security-tab.component.js
@@ -21,16 +21,18 @@ import {
   PRIVACY_POLICY_LINK,
 } from '../../../../shared/lib/ui-utils';
 import SRPQuiz from '../../../components/app/srp-quiz-modal/SRPQuiz';
-import { Box, Text } from '../../../components/component-library';
 import {
   BUTTON_SIZES,
-  Button,
   Box,
+  Button,
   Text,
 } from '../../../components/component-library';
 import TextField from '../../../components/ui/text-field';
 import ToggleButton from '../../../components/ui/toggle-button';
 import {
+  Display,
+  FlexDirection,
+  JustifyContent,
   TextColor,
   TextVariant,
 } from '../../../helpers/constants/design-system';
@@ -413,7 +415,10 @@ export default class SecurityTab extends PureComponent {
             {t('ipfsGatewayDescription')}
           </div>
         </div>
-        <div className="settings-page__content-item-col" data-testid="ipfsToggle">
+        <div
+          className="settings-page__content-item-col"
+          data-testid="ipfsToggle"
+        >
           <ToggleButton
             value={this.state.ipfsToggle}
             onToggle={(value) => {
@@ -690,31 +695,32 @@ export default class SecurityTab extends PureComponent {
             {t('displayNftMediaDescription')}
           </div>
         </div>
-
-        <div
-          className="settings-page__content-item-col"
-          data-testid="displayNftMedia"
-        >
-          <ToggleButton
-            value={openSeaEnabled}
-            onToggle={(value) => {
-              this.context.trackEvent({
-                category: MetaMetricsEventCategory.Settings,
-                event: 'Enabled/Disable OpenSea',
-                properties: {
-                  action: 'Enabled/Disable OpenSea',
-                  legacy_event: true,
-                },
-              });
-              // value is positive when being toggled off
-              if (value && useNftDetection) {
-                setUseNftDetection(false);
-              }
-              setOpenSeaEnabled(!value);
-            }}
-            offLabel={t('off')}
-            onLabel={t('on')}
-          />
+        <div className="settings-page__content-item">
+          <div
+            className="settings-page__content-item-col"
+            data-testid="enableOpenSeaAPI"
+          >
+            <ToggleButton
+              value={openSeaEnabled}
+              onToggle={(value) => {
+                this.context.trackEvent({
+                  category: MetaMetricsEventCategory.Settings,
+                  event: 'Enabled/Disable OpenSea',
+                  properties: {
+                    action: 'Enabled/Disable OpenSea',
+                    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>
       </Box>
     );

diff --git a/ui/pages/settings/security-tab/security-tab.test.js b/ui/pages/settings/security-tab/security-tab.test.js
@@ -65,10 +65,6 @@ describe('Security Tab', () => {
     expect(await toggleCheckbox('enableOpenSeaAPI', false, true)).toBe(true);
   });
 
-  it('toggles Display NFT media enabled', async () => {
-    expect(await toggleCheckbox('displayNftMedia', false)).toBe(true);
-  });
-
   it('toggles nft detection', async () => {
     expect(await toggleCheckbox('useNftDetection', true)).toBe(true);
   });