[FLASK] Update Snaps privacy notice (#19501)

* Update Snaps privacy notice

* Add changes to finalize update requirements

* Update scroll icon color

* Fix unit tests

* Update link

* Address small change requests

* Fix unit test

* move terms of use link to variable

---------

Co-authored-by: Guillaume Roux <guillaumeroux123@gmail.com>

app/_locales/en/messages.json

@@ -1559,10 +1559,6 @@
   "followUsOnTwitter": {
     "message": "Follow us on Twitter"
   },
-  "forMoreDetails": {
-    "message": "for more details.",
-    "description": "Click for more details message in popup modal displayed when installing a snap for the first time."
-  },
   "forbiddenIpfsGateway": {
     "message": "Forbidden IPFS Gateway: Please specify a CID gateway"
   },
@@ -3853,27 +3849,22 @@
     "message": "The snap didn't return any insight"
   },
   "snapsPrivacyWarningFirstMessage": {
-    "message": "Installing a snap retrieves data from third parties. They may collect your personal information.",
+    "message": "You acknowledge that the snap that you are about to install is a Third Party Service as defined in the Consensys $1. Your use of Third Party Services is governed by separate terms and conditions set forth by the Third Party Service provider. You access, rely upon or use the Third Party Service at your own risk. Consensys disclaims all responsibility and liability for any losses on account of your use of Third Party Services.",
-    "description": "First part of a message in popup modal displayed when installing a snap for the first time."
+    "description": "First part of a message in popup modal displayed when installing a snap for the first time. $1 is terms of use link."
   },
   "snapsPrivacyWarningSecondMessage": {
-    "message": "MetaMask has no access to this information.",
+    "message": "Any information you share with Third Party Services will be collected directly by those Third Party Services in accordance with their privacy policies. Please refer to their privacy policies for more information.",
     "description": "Second part of a message in popup modal displayed when installing a snap for the first time."
   },
+  "snapsPrivacyWarningThirdMessage": {
+    "message": "Consensys has no access to information you share with these third parties.",
+    "description": "Third part of a message in popup modal displayed when installing a snap for the first time."
+  },
   "snapsSettingsDescription": {
     "message": "Manage your Snaps"
   },
-  "snapsThirdPartyNoticeReadMorePartOne": {
+  "snapsTermsOfUse": {
-    "message": "Any information you share with third-party-developed snaps will be collected directly by those snaps in accordance with their privacy policies. ",
+    "message": "Terms of Use"
-    "description": "First part of a tooltip content in popup modal displayed when installing a snap for the first time."
-  },
-  "snapsThirdPartyNoticeReadMorePartThree": {
-    "message": "MetaMask has no access to information you share with these third parties.",
-    "description": "Third part of a tooltip content in popup modal displayed when installing a snap for the first time."
-  },
-  "snapsThirdPartyNoticeReadMorePartTwo": {
-    "message": "During the installation of a snap, npmjs (npmjs.com) and AWS (aws.amazon.com) may collect your IP address. Please refer to their privacy policies for more information.",
-    "description": "Second part of a tooltip content in popup modal displayed when installing a snap for the first time."
   },
   "snapsToggle": {
     "message": "A snap will only run if it is enabled"
@@ -4493,7 +4484,7 @@
     "message": "Things to keep in mind:"
   },
   "thirdPartySoftware": {
-    "message": "Third party software",
+    "message": "Third-party software notice",
     "description": "Title of a popup modal displayed when installing a snap for the first time."
   },
   "thisCollection": {

shared/constants/terms.js

@@ -1 +1,2 @@
+export const TERMS_OF_USE_LINK = 'https://consensys.net/terms-of-use/';
 export const TERMS_OF_USE_LAST_UPDATED = '2023-03-25';

ui/components/app/app-components.scss

@@ -64,6 +64,7 @@
 @import 'signature-request-original/index';
 @import 'signature-request-original/signature-request-original-warning/index';
 @import 'srp-input/srp-input';
+@import 'snaps/snap-privacy-warning/index';
 @import 'tab-bar/index';
 @import 'token-cell/token-cell';
 @import 'token-list-display/token-list-display';

ui/components/app/snaps/snap-privacy-warning/index.scss

@@ -0,0 +1,15 @@
+.snap-privacy-warning {
+  &__content {
+    max-height: 325px;
+    overflow-y: auto;
+
+    &__scroll-button {
+      position: absolute;
+      margin-left: auto;
+      margin-right: auto;
+      right: 0;
+      left: 0;
+      bottom: 110px;
+    }
+  }
+}

ui/components/app/snaps/snap-privacy-warning/snap-privacy-warning.js

@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { useI18nContext } from '../../../../hooks/useI18nContext';
 import Box from '../../../ui/box/box';
@@ -19,109 +19,130 @@ import {
   BackgroundColor,
   BLOCK_SIZES,
   DISPLAY,
+  FontWeight,
   IconColor,
   JustifyContent,
   TextVariant,
 } from '../../../../helpers/constants/design-system';
+import { useScrollRequired } from '../../../../hooks/useScrollRequired';
+import { TERMS_OF_USE_LINK } from '../../../../../shared/constants/terms';
 
 export default function SnapPrivacyWarning({ onAccepted, onCanceled }) {
   const t = useI18nContext();
-  const [isDescriptionOpen, setIsDescriptionOpen] = useState(false);
+  const { isScrollable, isScrolledToBottom, scrollToBottom, ref, onScroll } =
-
+    useScrollRequired();
-  const handleReadMoreClick = () => {
-    setIsDescriptionOpen(true);
-  };
 
   return (
     <Popover className="snap-privacy-warning">
-      <Box padding={4}>
+      <Box>
         <Box
-          className="snap-privacy-warning__info-icon"
+          className="snap-privacy-warning__header"
-          display={DISPLAY.FLEX}
+          paddingLeft={4}
-          justifyContent={JustifyContent.center}
+          paddingRight={4}
-          alignItems={AlignItems.center}
         >
-          <AvatarIcon
+          <Box
-            iconName={IconName.Info}
+            marginTop={4}
-            color={IconColor.infoDefault}
+            className="snap-privacy-warning__header__info-icon"
-            backgroundColor={BackgroundColor.primaryMuted}
+            display={DISPLAY.FLEX}
-            size={IconSize.Md}
+            justifyContent={JustifyContent.center}
-          />
+            alignItems={AlignItems.center}
+          >
+            <AvatarIcon
+              iconName={IconName.Info}
+              color={IconColor.infoDefault}
+              backgroundColor={BackgroundColor.primaryMuted}
+              size={IconSize.Md}
+            />
+          </Box>
+          <Box
+            className="snap-privacy-warning__header__title"
+            marginTop={4}
+            marginBottom={4}
+            display={DISPLAY.FLEX}
+            justifyContent={JustifyContent.center}
+            alignItems={AlignItems.center}
+          >
+            <Text variant={TextVariant.headingMd} fontWeight={FontWeight.Bold}>
+              {t('thirdPartySoftware')}
+            </Text>
+          </Box>
         </Box>
         <Box
-          className="snap-privacy-warning__title"
+          paddingLeft={4}
-          marginTop={4}
+          paddingRight={4}
-          marginBottom={6}
+          className="snap-privacy-warning__content"
-          display={DISPLAY.FLEX}
+          ref={ref}
-          justifyContent={JustifyContent.center}
+          onScroll={onScroll}
-          alignItems={AlignItems.center}
         >
-          <Text variant={TextVariant.headingMd}>{t('thirdPartySoftware')}</Text>
+          <Box className="snap-privacy-warning__message">
-        </Box>
+            <Text variant={TextVariant.bodyMd}>
-        <Box className="snap-privacy-warning__message">
+              {t('snapsPrivacyWarningFirstMessage', [
-          <Text variant={TextVariant.bodyMd}>
-            {t('snapsPrivacyWarningFirstMessage')}
-          </Text>
-          {!isDescriptionOpen && (
-            <>
-              <Text variant={TextVariant.bodyMd} paddingTop={6}>
-                {t('snapsPrivacyWarningSecondMessage')}
-              </Text>
-              <Text
-                variant={TextVariant.bodyMd}
-                className="snap-privacy-warning__more-details"
-              >
-                {t('click')}
                 <ButtonLink
+                  key="privacyNoticeTermsOfUseLink"
                   size={BUTTON_LINK_SIZES.INHERIT}
-                  onClick={handleReadMoreClick}
+                  href={TERMS_OF_USE_LINK}
-                  data-testid="snapsPrivacyPopup_readMoreButton"
+                  target="_blank"
                 >
-                  &nbsp;{t('here')}&nbsp;
+                  &nbsp;{t('snapsTermsOfUse')}&nbsp;
-                </ButtonLink>
+                </ButtonLink>,
-                {t('forMoreDetails')}
+              ])}
-              </Text>
+            </Text>
-            </>
+            <Text variant={TextVariant.bodyMd} paddingTop={6}>
-          )}
+              {t('snapsPrivacyWarningSecondMessage')}
-          {isDescriptionOpen && (
+            </Text>
-            <>
+            <Text
-              <Text variant={TextVariant.bodyMd} paddingTop={6}>
+              variant={TextVariant.bodyMd}
-                {t('snapsThirdPartyNoticeReadMorePartOne')}
+              fontWeight={FontWeight.Bold}
-              </Text>
+              paddingTop={6}
-              <Text variant={TextVariant.bodyMd} paddingTop={6}>
+            >
-                {t('snapsThirdPartyNoticeReadMorePartTwo')}
+              {t('snapsPrivacyWarningThirdMessage')}
-              </Text>
+            </Text>
-              <Text variant={TextVariant.bodyMd} paddingTop={6}>
+          </Box>
-                {t('snapsThirdPartyNoticeReadMorePartThree')}
+          {isScrollable && !isScrolledToBottom ? (
-              </Text>
+            <AvatarIcon
-            </>
+              className="snap-privacy-warning__content__scroll-button"
-          )}
+              data-testid="snap-privacy-warning-scroll"
+              iconName={IconName.Arrow2Down}
+              backgroundColor={BackgroundColor.infoDefault}
+              color={IconColor.primaryInverse}
+              onClick={scrollToBottom}
+              style={{ cursor: 'pointer' }}
+            />
+          ) : null}
         </Box>
         <Box
-          className="snap-privacy-warning__ok-button"
+          paddingLeft={4}
-          marginTop={6}
+          paddingRight={4}
-          display={DISPLAY.FLEX}
+          paddingBottom={4}
+          className="snap-privacy-warning__footer"
         >
-          <Button
+          <Box
-            variant={BUTTON_VARIANT.SECONDARY}
+            className="snap-privacy-warning__footer"
-            size={BUTTON_PRIMARY_SIZES.LG}
+            marginTop={6}
-            width={BLOCK_SIZES.FULL}
+            display={DISPLAY.FLEX}
-            className="snap-privacy-warning__cancel-button"
-            onClick={onCanceled}
-            marginRight={2}
           >
-            {t('cancel')}
+            <Button
-          </Button>
+              variant={BUTTON_VARIANT.SECONDARY}
-          <Button
+              size={BUTTON_PRIMARY_SIZES.LG}
-            variant={BUTTON_VARIANT.PRIMARY}
+              width={BLOCK_SIZES.FULL}
-            size={BUTTON_PRIMARY_SIZES.LG}
+              className="snap-privacy-warning__cancel-button"
-            width={BLOCK_SIZES.FULL}
+              onClick={onCanceled}
-            className="snap-privacy-warning__ok-button"
+              marginRight={2}
-            onClick={onAccepted}
+            >
-            marginLeft={2}
+              {t('cancel')}
-          >
+            </Button>
-            {t('accept')}
+            <Button
-          </Button>
+              variant={BUTTON_VARIANT.PRIMARY}
+              size={BUTTON_PRIMARY_SIZES.LG}
+              width={BLOCK_SIZES.FULL}
+              className="snap-privacy-warning__ok-button"
+              onClick={onAccepted}
+              marginLeft={2}
+              disabled={!isScrolledToBottom}
+            >
+              {t('accept')}
+            </Button>
+          </Box>
         </Box>
       </Box>
     </Popover>

ui/components/app/snaps/snap-privacy-warning/snap-privacy-warning.test.js

@@ -6,35 +6,22 @@ import SnapPrivacyWarning from './snap-privacy-warning';
 describe('Snap Privacy Warning Popover', () => {
   it('renders snaps privacy warning popover and works with accept flow', () => {
     const mockOnAcceptCallback = jest.fn();
-    const { getByTestId } = renderWithProvider(
+    renderWithProvider(
       <SnapPrivacyWarning
         onAccepted={mockOnAcceptCallback}
         onCanceled={jest.fn()}
       />,
     );
 
-    expect(screen.getByText('Third party software')).toBeInTheDocument();
+    expect(screen.getByText('Third-party software notice')).toBeInTheDocument();
     expect(
       screen.getByText(
-        'Installing a snap retrieves data from third parties. They may collect your personal information.',
+        'Any information you share with Third Party Services will be collected directly by those Third Party Services in accordance with their privacy policies. Please refer to their privacy policies for more information.',
-      ),
-    ).toBeInTheDocument();
-    expect(
-      screen.getByText('MetaMask has no access to this information.'),
-    ).toBeInTheDocument();
-    const clickHereToReadMoreButton = getByTestId(
-      'snapsPrivacyPopup_readMoreButton',
-    );
-    expect(clickHereToReadMoreButton).toBeDefined();
-    clickHereToReadMoreButton.click();
-    expect(
-      screen.getByText(
-        'Any information you share with third-party-developed snaps will be collected directly by those snaps in accordance with their privacy policies.',
       ),
     ).toBeInTheDocument();
     expect(
       screen.getByText(
-        'During the installation of a snap, npmjs (npmjs.com) and AWS (aws.amazon.com) may collect your IP address. Please refer to their privacy policies for more information.',
+        'Consensys has no access to information you share with these third parties.',
       ),
     ).toBeInTheDocument();
     expect(
@@ -60,7 +47,7 @@ describe('Snap Privacy Warning Popover', () => {
       />,
     );
 
-    expect(screen.getByText('Third party software')).toBeInTheDocument();
+    expect(screen.getByText('Third-party software notice')).toBeInTheDocument();
     expect(
       screen.getByRole('button', {
         name: /Cancel/iu,

ui/pages/permissions-connect/snaps/snap-install/snap-install.js

@@ -14,6 +14,7 @@ import {
   TextVariant,
   TEXT_ALIGN,
   FontWeight,
+  IconColor,
 } from '../../../../helpers/constants/design-system';
 import { getSnapInstallWarnings } from '../util';
 import PulseLoader from '../../../../components/ui/pulse-loader/pulse-loader';
@@ -146,7 +147,7 @@ export default function SnapInstall({
                 data-testid="snap-install-scroll"
                 iconName={IconName.Arrow2Down}
                 backgroundColor={BackgroundColor.infoDefault}
-                color={BackgroundColor.backgroundDefault}
+                color={IconColor.primaryInverse}
                 onClick={scrollToBottom}
                 style={{ cursor: 'pointer' }}
               />

ui/pages/permissions-connect/snaps/snap-update/snap-update.js

@@ -14,6 +14,7 @@ import {
   JustifyContent,
   TextVariant,
   TEXT_ALIGN,
+  IconColor,
 } from '../../../../helpers/constants/design-system';
 
 import UpdateSnapPermissionList from '../../../../components/app/snaps/update-snap-permission-list';
@@ -173,7 +174,7 @@ export default function SnapUpdate({
                 data-testid="snap-update-scroll"
                 iconName={IconName.Arrow2Down}
                 backgroundColor={BackgroundColor.infoDefault}
-                color={BackgroundColor.backgroundDefault}
+                color={IconColor.primaryInverse}
                 onClick={scrollToBottom}
                 style={{ cursor: 'pointer' }}
               />