[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>

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 handleReadMoreClick = () => {
-    setIsDescriptionOpen(true);
-  };
+  const { isScrollable, isScrolledToBottom, scrollToBottom, ref, onScroll } =
+    useScrollRequired();
 
   return (
     <Popover className="snap-privacy-warning">
-      <Box padding={4}>
+      <Box>
         <Box
-          className="snap-privacy-warning__info-icon"
-          display={DISPLAY.FLEX}
-          justifyContent={JustifyContent.center}
-          alignItems={AlignItems.center}
+          className="snap-privacy-warning__header"
+          paddingLeft={4}
+          paddingRight={4}
         >
-          <AvatarIcon
-            iconName={IconName.Info}
-            color={IconColor.infoDefault}
-            backgroundColor={BackgroundColor.primaryMuted}
-            size={IconSize.Md}
-          />
+          <Box
+            marginTop={4}
+            className="snap-privacy-warning__header__info-icon"
+            display={DISPLAY.FLEX}
+            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"
-          marginTop={4}
-          marginBottom={6}
-          display={DISPLAY.FLEX}
-          justifyContent={JustifyContent.center}
-          alignItems={AlignItems.center}
+          paddingLeft={4}
+          paddingRight={4}
+          className="snap-privacy-warning__content"
+          ref={ref}
+          onScroll={onScroll}
         >
-          <Text variant={TextVariant.headingMd}>{t('thirdPartySoftware')}</Text>
-        </Box>
-        <Box className="snap-privacy-warning__message">
-          <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')}
+          <Box className="snap-privacy-warning__message">
+            <Text variant={TextVariant.bodyMd}>
+              {t('snapsPrivacyWarningFirstMessage', [
                 <ButtonLink
+                  key="privacyNoticeTermsOfUseLink"
                   size={BUTTON_LINK_SIZES.INHERIT}
-                  onClick={handleReadMoreClick}
-                  data-testid="snapsPrivacyPopup_readMoreButton"
+                  href={TERMS_OF_USE_LINK}
+                  target="_blank"
                 >
-                  &nbsp;{t('here')}&nbsp;
-                </ButtonLink>
-                {t('forMoreDetails')}
-              </Text>
-            </>
-          )}
-          {isDescriptionOpen && (
-            <>
-              <Text variant={TextVariant.bodyMd} paddingTop={6}>
-                {t('snapsThirdPartyNoticeReadMorePartOne')}
-              </Text>
-              <Text variant={TextVariant.bodyMd} paddingTop={6}>
-                {t('snapsThirdPartyNoticeReadMorePartTwo')}
-              </Text>
-              <Text variant={TextVariant.bodyMd} paddingTop={6}>
-                {t('snapsThirdPartyNoticeReadMorePartThree')}
-              </Text>
-            </>
-          )}
+                  &nbsp;{t('snapsTermsOfUse')}&nbsp;
+                </ButtonLink>,
+              ])}
+            </Text>
+            <Text variant={TextVariant.bodyMd} paddingTop={6}>
+              {t('snapsPrivacyWarningSecondMessage')}
+            </Text>
+            <Text
+              variant={TextVariant.bodyMd}
+              fontWeight={FontWeight.Bold}
+              paddingTop={6}
+            >
+              {t('snapsPrivacyWarningThirdMessage')}
+            </Text>
+          </Box>
+          {isScrollable && !isScrolledToBottom ? (
+            <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"
-          marginTop={6}
-          display={DISPLAY.FLEX}
+          paddingLeft={4}
+          paddingRight={4}
+          paddingBottom={4}
+          className="snap-privacy-warning__footer"
         >
-          <Button
-            variant={BUTTON_VARIANT.SECONDARY}
-            size={BUTTON_PRIMARY_SIZES.LG}
-            width={BLOCK_SIZES.FULL}
-            className="snap-privacy-warning__cancel-button"
-            onClick={onCanceled}
-            marginRight={2}
-          >
-            {t('cancel')}
-          </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}
+          <Box
+            className="snap-privacy-warning__footer"
+            marginTop={6}
+            display={DISPLAY.FLEX}
           >
-            {t('accept')}
-          </Button>
+            <Button
+              variant={BUTTON_VARIANT.SECONDARY}
+              size={BUTTON_PRIMARY_SIZES.LG}
+              width={BLOCK_SIZES.FULL}
+              className="snap-privacy-warning__cancel-button"
+              onClick={onCanceled}
+              marginRight={2}
+            >
+              {t('cancel')}
+            </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(
-        'Installing a snap retrieves data from third parties. They may collect your personal 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('Third-party software notice')).toBeInTheDocument();
     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.',
+        '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(
-        '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' }}
               />