m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-25 03:20:23 +01:00
Code

[FLASK] Update Snaps privacy notice (#19501)

Browse Source 
* 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>
This commit is contained in:
David Drazic 2023-06-09 14:22:31 +02:00 committed by GitHub
parent c84b85f953
commit 8eff1fc1ff
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
8 changed files with 139 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

29
app/_locales/en/messages.json generated
View File

@ -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.",
"description": "First part of a message in popup modal displayed when installing a snap for the first time."
"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. $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": {
"message": "Any information you share with third-party-developed snaps will be collected directly by those snaps in accordance with their privacy policies. ",
"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."
"snapsTermsOfUse": {
"message": "Terms of Use"
},
"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": {

1
shared/constants/terms.js
View File

@ -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';

1
ui/components/app/app-components.scss
View File

@ -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';

15
ui/components/app/snaps/snap-privacy-warning/index.scss Normal file
View File

@ -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;
}
}
}

185
ui/components/app/snaps/snap-privacy-warning/snap-privacy-warning.js
View File

@ -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}
<Box
className="snap-privacy-warning__footer"
marginTop={6}
display={DISPLAY.FLEX}
>
{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}
>
{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>

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

@ -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.',
),
).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.',
'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,

3
ui/pages/permissions-connect/snaps/snap-install/snap-install.js
View File

@ -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' }}
/>

3
ui/pages/permissions-connect/snaps/snap-update/snap-update.js
View File

@ -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' }}
/>