// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Security Tab should match snapshot 1`] = `
<div>
  <div
    class="settings-page__body"
  >
    <div
      class="mm-box settings-page__content-row mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-row mm-box--justify-content-space-between"
      data-testid="advanced-setting-show-testnet-conversion"
    >
      <div
        class="settings-page__content-item"
      >
        <span>
          Basic functionality
        </span>
        <div
          class="settings-page__content-description"
        >
          <span>
             
            MetaMask offers basic features like token details and gas settings through internet services. When you use internet services, your IP address is shared, in this case with MetaMask. This is just like when you visit any website. MetaMask uses this data temporarily and never sells your data. You can use a VPN or turn off these services, but it may affect your MetaMask experience. To learn more read our 
            <a
              href="https://consensys.io/privacy-policy"
              rel="noreferrer noopener"
              target="_blank"
            >
              Privacy policy
            </a>
            .
             
          </span>
        </div>
      </div>
      <div
        class="settings-page__content-item-col"
      >
        <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(132, 140, 150);"
            >
              <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: var(--shadow-size-xs) var(--color-shadow-default); border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(255, 255, 255); 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>
    <span
      class="settings-page__security-tab-sub-header__bold"
    >
      Security
    </span>
    <div
      class="settings-page__security-tab-sub-header"
    >
      Secret Recovery Phrase
    </div>
    <div
      class="settings-page__content-padded"
    >
      <button
        class="mm-box mm-text mm-button-base mm-button-base--size-lg mm-button-primary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
        data-testid="reveal-seed-words"
        data-theme="light"
        type="danger"
      >
        Reveal Secret Recovery Phrase
      </button>
    </div>
    <div>
      <span
        class="settings-page__security-tab-sub-header"
      >
        Security alerts
      </span>
    </div>
    <div
      class="settings-page__content-padded"
    >
      <div
        class="mm-box settings-page__content-row mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-row mm-box--justify-content-space-between"
      >
        <div
          class="settings-page__content-item"
        >
          <div
            class="settings-page__content-description"
          >
            <span>
               
              This feature alerts you to malicious activity by actively reviewing transaction and signature requests. 
              <a
                href="https://support.metamask.io/privacy-and-security/how-to-turn-on-security-alerts/"
                rel="noreferrer"
                target="_blank"
              >
                Learn more
              </a>
              
               
            </span>
          </div>
        </div>
        <div
          class="settings-page__content-item-col"
          data-testid="securityAlert"
        >
          <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(132, 140, 150);"
              >
                <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: var(--shadow-size-xs) var(--color-shadow-default); border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(255, 255, 255); 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>
    </div>
    <span
      class="settings-page__security-tab-sub-header__bold"
    >
      Privacy
    </span>
    <div
      class="settings-page__content-padded"
    >
      <div
        class="mm-box"
      >
        <div
          class="mm-box settings-page__content-row mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-row mm-box--justify-content-space-between"
          data-testid="profileSyncToggle"
        >
          <div
            class="settings-page__content-item"
            id="profileSyncLabel"
          >
            <span>
              Profile Sync
            </span>
            <div
              class="settings-page__content-description"
              data-testid="profileSyncDescription"
            >
              <span>
                 
                Creates a profile that MetaMask uses to sync some settings among your devices. This is required to get notifications. 
                <a
                  data-testid="privacyPolicyLink"
                  href="https://support.metamask.io/privacy-and-security/profile-privacy"
                  rel="noopener noreferrer"
                  target="_blank"
                >
                  Learn how we protect your privacy
                </a>
                .
                 
              </span>
            </div>
          </div>
          <div
            class="settings-page__content-item-col"
          >
            <label
              class="toggle-button toggle-button--off toggle-button--disabled"
              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(132, 140, 150);"
                >
                  <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: var(--shadow-size-xs) var(--color-shadow-default); border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(255, 255, 255); left: 3px;"
                  />
                </div>
                <input
                  data-testid="toggleButton"
                  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>
      </div>
    </div>
    <div>
      <span
        class="settings-page__security-tab-sub-header"
      >
        Alerts
      </span>
    </div>
    <div
      class="settings-page__content-padded"
    >
      <div
        class="mm-box settings-page__content-row mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-row mm-box--justify-content-space-between"
      >
        <div
          class="settings-page__content-item"
        >
          <span>
            Use phishing detection
          </span>
          <div
            class="settings-page__content-description"
          >
            Display a warning for phishing domains targeting Ethereum users
          </div>
        </div>
        <div
          class="settings-page__content-item-col"
          data-testid="usePhishingDetection"
        >
          <label
            class="toggle-button toggle-button--on"
            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(67, 174, 252);"
              >
                <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="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: var(--shadow-size-xs) var(--color-shadow-default); border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(255, 255, 255); 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
              class="toggle-button__status"
            >
              <span
                class="toggle-button__label-off"
              >
                Off
              </span>
              <span
                class="toggle-button__label-on"
              >
                On
              </span>
            </div>
          </label>
        </div>
      </div>
    </div>
    <div>
      <span
        class="settings-page__security-tab-sub-header"
      >
        Smart contracts
      </span>
    </div>
    <div
      class="settings-page__content-padded"
    >
      <div
        class="mm-box settings-page__content-row mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-row mm-box--justify-content-space-between"
      >
        <div
          class="settings-page__content-item"
        >
          <span>
            Decode smart contracts
          </span>
          <div
            class="settings-page__content-description"
          >
            To improve user experience, we customize the activity tab with messages based on the smart contracts you interact with. MetaMask uses a service called 4byte.directory to decode data and show you a version of a smart contract that's easier to read. This helps reduce your chances of approving malicious smart contract actions, but can result in your IP address being shared.
          </div>
        </div>
        <div
          class="settings-page__content-item-col"
          data-testid="4byte-resolution-container"
        >
          <label
            class="toggle-button toggle-button--on"
            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(67, 174, 252);"
              >
                <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="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: var(--shadow-size-xs) var(--color-shadow-default); border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(255, 255, 255); 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
              class="toggle-button__status"
            >
              <span
                class="toggle-button__label-off"
              >
                Off
              </span>
              <span
                class="toggle-button__label-on"
              >
                On
              </span>
            </div>
          </label>
        </div>
      </div>
    </div>
    <span
      class="settings-page__security-tab-sub-header"
    >
      Transactions
    </span>
    <div
      class="settings-page__content-padded"
    >
      <div
        class="mm-box settings-page__content-row mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-row mm-box--justify-content-space-between"
      >
        <div
          class="settings-page__content-item"
        >
          <span>
            Show balance and token price checker
          </span>
          <div
            class="settings-page__content-description"
          >
            <span>
               
              We use 
              <a
                href="https://www.coingecko.com/"
                rel="noreferrer"
                target="_blank"
              >
                CoinGecko
              </a>
               and 
              <a
                href="https://www.cryptocompare.com/"
                rel="noreferrer"
                target="_blank"
              >
                CryptoCompare
              </a>
               APIs to display your balance and token price. 
              <a
                href="https://consensys.io/privacy-policy/"
                rel="noreferrer"
                target="_blank"
              >
                Privacy policy
              </a>
              
               
            </span>
          </div>
        </div>
        <div
          class="settings-page__content-item-col"
          data-testid="currencyRateCheckToggle"
        >
          <label
            class="toggle-button toggle-button--on"
            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(67, 174, 252);"
              >
                <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="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: var(--shadow-size-xs) var(--color-shadow-default); border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(255, 255, 255); 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
              class="toggle-button__status"
            >
              <span
                class="toggle-button__label-off"
              >
                Off
              </span>
              <span
                class="toggle-button__label-on"
              >
                On
              </span>
            </div>
          </label>
        </div>
      </div>
      <div
        class="mm-box mm-incoming-transaction-toggle"
      >
        <p
          class="mm-box mm-text mm-text--body-md-medium mm-box--color-text-default"
        >
          Show incoming transactions
        </p>
        <p
          class="mm-box mm-text mm-text--body-sm mm-box--color-text-alternative"
        >
          This relies on different third-party APIs for each network, which expose your Ethereum address and your IP address.
        </p>
        <div
          class="mm-box network-toggle-wrapper mm-box--margin-top-6 mm-box--margin-bottom-6 mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-row mm-box--justify-content-space-between"
          data-testid="network-toggle-0x1"
        >
          <div
            class="mm-box network-toggle-wrapper__overflow-container mm-box--display-flex mm-box--gap-4 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
          >
            <div
              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
            >
              <img
                alt="Custom Mainnet RPC logo"
                class="mm-avatar-network__network-image"
                src="./images/eth_logo.svg"
              />
            </div>
            <div
              class="mm-box network-toggle-wrapper__overflow-container mm-box--display-flex mm-box--flex-direction-column"
            >
              <p
                class="mm-box mm-text mm-text--body-md mm-text--ellipsis mm-box--color-text-default mm-box--background-color-transparent"
              >
                Custom Mainnet RPC
              </p>
              <p
                class="mm-box mm-text mm-text--body-sm mm-text--ellipsis mm-box--color-primary-default mm-box--background-color-transparent"
              >
                <a
                  href="https://etherscan.io"
                  rel="noreferrer"
                  target="_blank"
                >
                  Etherscan.io
                </a>
              </p>
            </div>
          </div>
          <div
            class="mm-box mm-box--margin-left-auto"
          >
            <label
              class="toggle-button toggle-button--on"
              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(67, 174, 252);"
                >
                  <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="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: var(--shadow-size-xs) var(--color-shadow-default); border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(255, 255, 255); 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
                class="toggle-button__status"
              >
                <span
                  class="toggle-button__label-off"
                >
                  Off
                </span>
                <span
                  class="toggle-button__label-on"
                >
                  On
                </span>
              </div>
            </label>
          </div>
        </div>
        <div
          class="mm-box network-toggle-wrapper mm-box--margin-top-6 mm-box--margin-bottom-6 mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-row mm-box--justify-content-space-between"
          data-testid="network-toggle-0x5"
        >
          <div
            class="mm-box network-toggle-wrapper__overflow-container mm-box--display-flex mm-box--gap-4 mm-box--align-items-center mm-box--width-full mm-box--background-color-transparent"
          >
            <div
              class="mm-box mm-text mm-avatar-base mm-avatar-base--size-sm mm-avatar-network mm-text--body-sm mm-text--text-transform-uppercase mm-box--display-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-text-default mm-box--background-color-background-alternative mm-box--rounded-full mm-box--border-color-transparent box--border-style-solid box--border-width-1"
            >
              G
            </div>
            <div
              class="mm-box network-toggle-wrapper__overflow-container mm-box--display-flex mm-box--flex-direction-column"
            >
              <p
                class="mm-box mm-text mm-text--body-md mm-text--ellipsis mm-box--color-text-default mm-box--background-color-transparent"
              >
                Goerli
              </p>
              <p
                class="mm-box mm-text mm-text--body-sm mm-text--ellipsis mm-box--color-primary-default mm-box--background-color-transparent"
              >
                <a
                  href="https://etherscan.io"
                  rel="noreferrer"
                  target="_blank"
                >
                  Etherscan.io
                </a>
              </p>
            </div>
          </div>
          <div
            class="mm-box mm-box--margin-left-auto"
          >
            <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(132, 140, 150);"
                >
                  <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: var(--shadow-size-xs) var(--color-shadow-default); border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(255, 255, 255); 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>
      </div>
      <div
        class="mm-box settings-page__content-row mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-row mm-box--justify-content-space-between"
      >
        <div
          class="settings-page__content-item"
        >
          <span>
            Estimate balance changes
          </span>
          <div
            class="settings-page__content-description"
          >
            <span>
               
              Turn this on to estimate balance changes of transactions before you confirm them. This doesn't guarantee the final outcome of your transactions. 
              <a
                href="https://support.metamask.io/transactions-and-gas/transactions/simulations/"
                rel="noreferrer"
                target="_blank"
              >
                Learn more
              </a>
              
               
            </span>
          </div>
        </div>
        <div
          class="settings-page__content-item-col"
          data-testid="useTransactionSimulations"
        >
          <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(132, 140, 150);"
              >
                <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: var(--shadow-size-xs) var(--color-shadow-default); border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(255, 255, 255); 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>
    </div>
    <span
      class="settings-page__security-tab-sub-header"
    >
      Network provider
    </span>
    <div
      class="settings-page__content-padded"
    >
      <div
        class="mm-box settings-page__content-row mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-column"
        data-testid="advanced-setting-choose-your-network"
      >
        <div
          class="settings-page__content-item"
        >
          <span>
            Choose your network
          </span>
          <div
            class="settings-page__content-description"
          >
            <span>
               
              We use Infura as our remote procedure call (RPC) provider to offer the most reliable and private access to Ethereum data we can. You can choose your own RPC, but remember that any RPC will receive your IP address and Ethereum wallet to make transactions. Read our 
              <a
                href="https://consensys.io/privacy-policy/"
                rel="noopener noreferrer"
                target="_blank"
              >
                Privacy policy
              </a>
               to learn more about how Infura handles data.
               
            </span>
          </div>
        </div>
        <div
          class="settings-page__content-item-col"
        >
          <button
            class="mm-box mm-text mm-button-base mm-button-base--size-md settings-page__button mm-button-primary mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
            data-theme="light"
            type="secondary"
          >
            Add custom network
          </button>
        </div>
      </div>
      <div
        class="mm-box settings-page__content-row mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-column"
        data-testid="setting-safe-chains-validation"
      >
        <div
          class="mm-box settings-page__content-row mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-row mm-box--justify-content-space-between"
        >
          <div
            class="settings-page__content-item"
          >
            <span>
              Network details check
            </span>
            <div
              class="settings-page__content-description"
            >
              <span>
                 
                MetaMask uses a third-party service called 
                <b>
                  chainid.network
                </b>
                 to show accurate and standardized network details. This reduces your chances of connecting to malicious or incorrect network. When using this feature, your IP address is exposed to chainid.network.
                 
              </span>
            </div>
          </div>
          <div
            class="settings-page__content-item-col"
            data-testid="useSafeChainsListValidation"
          >
            <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(132, 140, 150);"
                >
                  <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: var(--shadow-size-xs) var(--color-shadow-default); border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(255, 255, 255); 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>
      </div>
      <div
        class="mm-box settings-page__content-row mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-column"
        data-testid="setting-ipfs-gateway"
      >
        <div
          class="mm-box settings-page__content-row mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-row mm-box--justify-content-space-between"
        >
          <div
            class="settings-page__content-item"
          >
            <span>
              IPFS gateway
            </span>
            <div
              class="settings-page__content-description"
            >
              MetaMask uses third-party services to show images of your NFTs stored on IPFS, display information related to ENS addresses entered in your browser's address bar, and fetch icons for different tokens. Your IP address may be exposed to these services when you’re using them.
            </div>
          </div>
          <div
            class="settings-page__content-item-col"
            data-testid="ipfsToggle"
          >
            <label
              class="toggle-button toggle-button--on"
              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(67, 174, 252);"
                >
                  <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="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: var(--shadow-size-xs) var(--color-shadow-default); border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(255, 255, 255); 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
                class="toggle-button__status"
              >
                <span
                  class="toggle-button__label-off"
                >
                  Off
                </span>
                <span
                  class="toggle-button__label-on"
                >
                  On
                </span>
              </div>
            </label>
          </div>
        </div>
        <div
          class="settings-page__content-item"
        >
          <span>
            Add your preferred IPFS gateway
          </span>
          <div
            class="settings-page__content-item-col"
          >
            <div
              class="MuiFormControl-root MuiTextField-root MuiFormControl-marginDense MuiFormControl-fullWidth"
            >
              <div
                class="MuiInputBase-root MuiInput-root TextField-inputRoot-12 MuiInputBase-fullWidth MuiInput-fullWidth MuiInputBase-formControl MuiInput-formControl MuiInputBase-marginDense MuiInput-marginDense"
              >
                <input
                  aria-invalid="false"
                  class="MuiInputBase-input MuiInput-input MuiInputBase-inputMarginDense MuiInput-inputMarginDense"
                  dir="auto"
                  type="text"
                  value="dweb.link"
                />
              </div>
              
            </div>
          </div>
        </div>
        <div
          class="mm-box settings-page__content-row mm-box--margin-top-3 mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-row mm-box--justify-content-space-between"
          id="ens-domains"
        >
          <div>
            Show ENS domains in address bar
            <div
              class="settings-page__content-description"
            >
              <span
                class="mm-box mm-text mm-text--inherit mm-box--color-inherit"
              >
                MetaMask lets you see ENS domains right in your browser's address bar. Here's how it works:
              </span>
              <ul
                class="mm-box mm-box--margin-top-4 mm-box--margin-bottom-4 mm-box--padding-inline-start-4"
                style="list-style-type: circle;"
              >
                <li
                  class="mm-box mm-text mm-text--inherit mm-box--color-inherit"
                >
                  MetaMask checks with Ethereum's ENS contract to find the code connected to the ENS name.
                </li>
                <li
                  class="mm-box mm-text mm-text--inherit mm-box--color-inherit"
                >
                  If the code links to IPFS, you can see the content associated with it (usually a website).
                </li>
              </ul>
              <span
                class="mm-box mm-text mm-text--inherit mm-box--color-inherit"
              >
                Keep in mind that using this feature exposes your IP address to IPFS third-party services.
              </span>
            </div>
          </div>
          <div
            class="settings-page__content-item-col"
            data-testid="ipfs-gateway-resolution-container"
          >
            <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(132, 140, 150);"
                >
                  <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: var(--shadow-size-xs) var(--color-shadow-default); border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(255, 255, 255); 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>
      </div>
    </div>
    <span
      class="settings-page__security-tab-sub-header"
    >
      Token autodetection
    </span>
    <div
      class="settings-page__content-padded"
    >
      <div
        class="mm-box settings-page__content-row mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-row mm-box--justify-content-space-between"
        data-testid="advanced-setting-gas-fee-estimation"
        id="advanced-settings-autodetect-tokens"
      >
        <div
          class="settings-page__content-item"
        >
          <span>
            Autodetect tokens
          </span>
          <div
            class="settings-page__content-description"
          >
            <span>
               
              We use third-party APIs to detect and display new tokens sent to your wallet. Turn off if you don’t want the app to automatically pull data from those services. 
              <a
                href="https://consensys.io/privacy-policy/"
                rel="noopener noreferrer"
                target="_blank"
              >
                Learn More
              </a>
              
               
            </span>
          </div>
        </div>
        <div
          class="settings-page__content-item-col"
          data-testid="autoDetectTokens"
        >
          <label
            class="toggle-button toggle-button--on"
            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(67, 174, 252);"
              >
                <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="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: var(--shadow-size-xs) var(--color-shadow-default); border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(255, 255, 255); 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
              class="toggle-button__status"
            >
              <span
                class="toggle-button__label-off"
              >
                Off
              </span>
              <span
                class="toggle-button__label-on"
              >
                On
              </span>
            </div>
          </label>
        </div>
      </div>
      <div
        class="mm-box settings-page__content-row mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-row mm-box--justify-content-space-between"
      >
        <div
          class="settings-page__content-item"
        >
          <span>
            Batch account balance requests
          </span>
          <div
            class="settings-page__content-description"
          >
            Get faster balance updates by batching account balance requests. This lets us fetch your account balances together, so you get quicker updates for an improved experience. When this feature is off, third parties may be less likely to associate your accounts with each other.
          </div>
        </div>
        <div
          class="settings-page__content-item-col"
          data-testid="useMultiAccountBalanceChecker"
        >
          <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(132, 140, 150);"
              >
                <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: var(--shadow-size-xs) var(--color-shadow-default); border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(255, 255, 255); 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>
      <div
        class="mm-box settings-page__content-row mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-row mm-box--justify-content-space-between"
        id="display-nft-media"
      >
        <div
          class="settings-page__content-item"
        >
          <span>
            Display NFT media
          </span>
          <div
            class="settings-page__content-description"
          >
            Displaying NFT media and data exposes your IP address to OpenSea or other third parties. This can allow attackers to associate your IP address with your Ethereum address. NFT autodetection relies on this setting, and won't be available when this is turned off.
          </div>
        </div>
        <div
          class="settings-page__content-item-col"
          data-testid="displayNftMedia"
        >
          <label
            class="toggle-button toggle-button--on"
            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(67, 174, 252);"
              >
                <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="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: var(--shadow-size-xs) var(--color-shadow-default); border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(255, 255, 255); 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
              class="toggle-button__status"
            >
              <span
                class="toggle-button__label-off"
              >
                Off
              </span>
              <span
                class="toggle-button__label-on"
              >
                On
              </span>
            </div>
          </label>
        </div>
      </div>
      <div
        class="mm-box settings-page__content-row mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-row mm-box--justify-content-space-between"
      >
        <div
          class="settings-page__content-item"
        >
          <span>
            Autodetect NFTs
          </span>
          <div
            class="settings-page__content-description"
          >
            Let MetaMask add NFTs you own using third-party services. Autodetecting NFTs exposes your IP and account address to these services. Enabling this feature could associate your IP address with your Ethereum address and display fake NFTs airdropped by scammers. You can add tokens manually to avoid this risk.
          </div>
        </div>
        <div
          class="settings-page__content-item-col"
          data-testid="useNftDetection"
        >
          <label
            class="toggle-button toggle-button--on"
            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(67, 174, 252);"
              >
                <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="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: var(--shadow-size-xs) var(--color-shadow-default); border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(255, 255, 255); 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
              class="toggle-button__status"
            >
              <span
                class="toggle-button__label-off"
              >
                Off
              </span>
              <span
                class="toggle-button__label-on"
              >
                On
              </span>
            </div>
          </label>
        </div>
      </div>
    </div>
    <span
      class="settings-page__security-tab-sub-header"
    >
      Metrics
    </span>
    <div
      class="settings-page__content-padded"
    >
      <div
        class="mm-box"
      >
        <div
          class="mm-box settings-page__content-row mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-row mm-box--justify-content-space-between"
          data-testid="profileSyncToggle"
        >
          <div
            class="settings-page__content-item"
            id="profileSyncLabel"
          >
            <span>
              Participate in MetaMetrics
            </span>
            <div
              class="settings-page__content-description"
              data-testid="profileSyncDescription"
            >
              Participate in MetaMetrics to help us make MetaMask better
            </div>
          </div>
          <div
            class="settings-page__content-item-col"
            data-testid="participateInMetaMetrics"
          >
            <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(132, 140, 150);"
                >
                  <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: var(--shadow-size-xs) var(--color-shadow-default); border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(255, 255, 255); left: 3px;"
                  />
                </div>
                <input
                  data-testid="toggleButton"
                  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>
      </div>
      <div
        class="mm-box settings-page__content-row mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-row mm-box--justify-content-space-between"
      >
        <div
          class="settings-page__content-item"
        >
          <span>
            Data collection for marketing
          </span>
          <div
            class="settings-page__content-description"
          >
            <span>
              We'll use MetaMetrics to learn how you interact with our marketing communications. We may share relevant news (like product features and other materials).
            </span>
          </div>
        </div>
        <div
          class="settings-page__content-item-col"
          data-testid="dataCollectionForMarketing"
        >
          <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(132, 140, 150);"
              >
                <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: var(--shadow-size-xs) var(--color-shadow-default); border-radius: 50%; box-sizing: border-box; position: relative; background-color: rgb(255, 255, 255); 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>
      <div
        class="mm-box settings-page__content-row mm-box--display-flex mm-box--gap-4 mm-box--flex-direction-column"
        data-testid="delete-metametrics-data-button"
      >
        <div
          class="settings-page__content-item"
        >
          <span>
            Delete MetaMetrics data
          </span>
          <div
            class="settings-page__content-description"
          >
            <span>
               
              This will delete historical MetaMetrics data associated with your use on this device. Your wallet and accounts will remain exactly as they are now after this data has been deleted. This process may take up to 30 days. View our 
              <a
                href="https://consensys.io/privacy-policy/"
                rel="noopener noreferrer"
                target="_blank"
              >
                Privacy policy
              </a>
              .
               
            </span>
          </div>
        </div>
        <div
          class="settings-page__content-item-col"
        >
          <div
            class="mm-box mm-box--display-inline-flex"
          >
            <span
              class="mm-box mm-icon mm-icon--size-sm mm-box--display-inline-block mm-box--color-inherit"
              style="mask-image: url('./images/icons/info.svg');"
            />
            <p
              class="mm-box mm-text mm-text--body-xs mm-box--margin-bottom-2 mm-box--margin-left-1 mm-box--color-text-default"
            >
              Since you've never opted into MetaMetrics, there's no data to delete here.
            </p>
          </div>
          <button
            class="mm-box mm-text mm-button-base mm-button-base--size-md mm-button-base--disabled settings-page__button mm-button-primary mm-button-primary--disabled mm-text--body-md-medium mm-box--padding-0 mm-box--padding-right-4 mm-box--padding-left-4 mm-box--display-inline-flex mm-box--justify-content-center mm-box--align-items-center mm-box--color-primary-inverse mm-box--background-color-primary-default mm-box--rounded-pill"
            data-theme="light"
            disabled=""
          >
            Delete MetaMetrics data
          </button>
        </div>
      </div>
    </div>
  </div>
</div>
`;
