Merge branch 'develop' into jl/mmp-1033/preferences-controller-networ…

…k-meta

test/e2e/fixture-builder.js

@@ -381,7 +381,7 @@ function onboardingFixture() {
         featureFlags: {},
         forgottenPassword: false,
         identities: {},
-        ipfsGateway: 'dweb.link',
+        ipfsGateway: 'dweb.linkssssss',
         knownMethodData: {},
         ledgerTransportType: 'webhid',
         lostIdentities: {},

ui/components/app/incoming-trasaction-toggle/__snapshots__/incoming-transaction-toggle.test.js.snap

@@ -6,7 +6,7 @@ exports[`IncomingTransactionToggle should render existing incoming transaction p
     class="mm-box mm-incoming-transaction-toggle"
   >
     <p
-      class="mm-box mm-text mm-text--body-md-medium mm-box--color-text-default"
+      class="mm-box mm-text mm-text--body-md mm-box--color-text-default"
     >
       Show incoming transactions
     </p>
@@ -15,61 +15,6 @@ exports[`IncomingTransactionToggle should render existing incoming transaction p
     >
       This relies on different third-party APIs for each network, which expose your Ethereum address and your IP address.
     </p>
-    <div
-      class="mm-box mm-box--margin-top-3 mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-row mm-box--justify-content-space-between"
-      data-testid="incoming-transaction-toggle-enable-all"
-    >
-      <p
-        class="mm-box mm-text mm-text--body-sm-bold mm-box--color-text-default"
-      >
-        Enable for all networks
-      </p>
-      <label
-        class="toggle-button toggle-button--off"
-        tabindex="0"
-      >
-        <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;"
-        >
-          <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);"
-          >
-            <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;"
-            />
-            <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;"
-            />
-          </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;"
-            />
-          </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>
-    </div>
     <div
       class="mm-box network-toggle-wrapper mm-box--margin-top-6 mm-box--margin-bottom-6 mm-box--display-flex mm-box--flex-direction-row mm-box--justify-content-space-between"
       data-testid="network-toggle-0x1"

ui/components/app/incoming-trasaction-toggle/incoming-transaction-toggle.test.js

@@ -32,10 +32,6 @@ describe('IncomingTransactionToggle', () => {
       mockStore,
     );
     expect(container).toMatchSnapshot();
-    const enableForAllCheckbox = within(
-      getByTestId('incoming-transaction-toggle-enable-all'),
-    ).getByRole('checkbox');
-    expect(enableForAllCheckbox.checked).toStrictEqual(false);
 
     const ethMainnetCheckbox = within(
       getByTestId(`network-toggle-${ALL_NETWORKS_DATA[0].chainId}`),
@@ -63,40 +59,7 @@ describe('IncomingTransactionToggle', () => {
     expect(lineaGoerliCheckbox.value).toStrictEqual('true');
   });
 
-  it('should trigger settle for all when click toggle all button', () => {
-    const { getByTestId } = renderWithProvider(
-      <MetaMetricsContext.Provider value={mockTrackEvent}>
-        <IncomingTransactionToggle
-          setIncomingTransactionsPreferences={
-            setIncomingTransactionsPreferencesStub
-          }
-          allNetworks={ALL_NETWORKS_DATA}
-          incomingTransactionsPreferences={INCOMING_DATA}
-        />
-      </MetaMetricsContext.Provider>,
-      mockStore,
-    );
-    const enableForAllCheckbox = within(
-      getByTestId('incoming-transaction-toggle-enable-all'),
-    ).getByRole('checkbox');
-    fireEvent.click(enableForAllCheckbox);
-    // set 2 false to true
-    expect(setIncomingTransactionsPreferencesStub).toHaveBeenCalledTimes(2);
-    expect(
-      setIncomingTransactionsPreferencesStub.mock.calls[0][0],
-    ).toStrictEqual('0xe708');
-    expect(
-      setIncomingTransactionsPreferencesStub.mock.calls[0][1],
-    ).toStrictEqual(true);
-    expect(
-      setIncomingTransactionsPreferencesStub.mock.calls[1][0],
-    ).toStrictEqual('0x5');
-    expect(
-      setIncomingTransactionsPreferencesStub.mock.calls[1][1],
-    ).toStrictEqual(true);
-  });
-
-  it('should trigger settle for one when click toggle one button', () => {
+  it('should settle the preference when click toggle one button', () => {
     const { getByTestId } = renderWithProvider(
       <MetaMetricsContext.Provider value={mockTrackEvent}>
         <IncomingTransactionToggle

ui/components/app/incoming-trasaction-toggle/incoming-transaction-toggle.tsx

@@ -3,12 +3,8 @@ import React, { useContext, useEffect, useState } from 'react';
 import PropTypes from 'prop-types';
 import { I18nContext } from '../../../contexts/i18n';
 
-import ToggleButton from '../../ui/toggle-button';
 import { Box, Text } from '../../component-library';
 import {
-  Display,
-  FlexDirection,
-  JustifyContent,
   TextVariant,
   TextColor,
 } from '../../../helpers/constants/design-system';
@@ -42,10 +38,6 @@ const IncomingTransactionToggle = ({
     ),
   );
 
-  const [isAllEnabled, setIsAllEnabled] = useState(
-    checkAllNetworks(incomingTransactionsPreferences),
-  );
-
   useEffect(() => {
     setNetworkPreferences(
       generateIncomingNetworkPreferences(
@@ -55,49 +47,16 @@ const IncomingTransactionToggle = ({
     );
   }, [incomingTransactionsPreferences, allNetworks]);
 
-  useEffect(() => {
-    setIsAllEnabled(checkAllNetworks(incomingTransactionsPreferences));
-  }, [incomingTransactionsPreferences]);
-
-  const toggleAllEnabled = (isAllEnabledValue: boolean): void => {
-    Object.keys(incomingTransactionsPreferences).forEach((chainId) => {
-      if (incomingTransactionsPreferences[chainId] !== isAllEnabledValue) {
-        setIncomingTransactionsPreferences(chainId, isAllEnabledValue);
-      }
-    });
-  };
-
   const toggleSingleNetwork = (chainId: string, value: boolean): void => {
     setIncomingTransactionsPreferences(chainId, value);
   };
 
   return (
     <Box ref={wrapperRef} className="mm-incoming-transaction-toggle">
-      <Text variant={TextVariant.bodyMdMedium}>
-        {t('showIncomingTransactions')}
-      </Text>
-
+      <Text variant={TextVariant.bodyMd}>{t('showIncomingTransactions')}</Text>
       <Text variant={TextVariant.bodySm} color={TextColor.textAlternative}>
         {t('showIncomingTransactionsExplainer')}
       </Text>
-      <Box
-        marginTop={3}
-        display={Display.Flex}
-        flexDirection={FlexDirection.Row}
-        justifyContent={JustifyContent.spaceBetween}
-        gap={4}
-        data-testid="incoming-transaction-toggle-enable-all"
-      >
-        <Text variant={TextVariant.bodySmBold}>
-          {t('enableForAllNetworks')}
-        </Text>
-        <ToggleButton
-          value={isAllEnabled}
-          onToggle={(value) => toggleAllEnabled(!value)}
-          offLabel={t('off')}
-          onLabel={t('on')}
-        />
-      </Box>
       {Object.keys(networkPreferences).map((chainId, index) => {
         return (
           <NetworkToggle
@@ -139,9 +98,3 @@ function generateIncomingNetworkPreferences(
 
   return incomingTxnPreferences;
 }
-
-function checkAllNetworks(
-  incomingTransactionsPreferences: Record<string, boolean>,
-): boolean {
-  return Object.values(incomingTransactionsPreferences).every(Boolean);
-}

ui/components/app/incoming-trasaction-toggle/network-toggle.tsx

@@ -46,26 +46,13 @@ const NetworkToggle = ({
 
   const networkName = networkPreferences.label;
 
-  // console.log({ ETHERSCAN_SUPPORTED_NETWORKS, chainId });
-
   type SupportedChainId = keyof typeof ETHERSCAN_SUPPORTED_NETWORKS;
 
   const networkDomainAndSubdomain =
     ETHERSCAN_SUPPORTED_NETWORKS?.[chainId as SupportedChainId];
 
-  // console.log({ stuff });
-
   const domain = networkDomainAndSubdomain?.domain;
 
-  // console.log({ domain });
-
-  console.log({
-    ETHERSCAN_SUPPORTED_NETWORKS,
-    domain,
-    chainId,
-  });
-
-  // const upperCaseDomain = domain?.charAt(0)?.toUpperCase() + domain?.slice(1);
   const upperCaseDomain = domain?.charAt(0)?.toUpperCase() + domain?.slice(1);
 
   return (