Onboarding V2 Privacy settings view (#12253)
* add Set Advanced Privacy Settings onboarding viewfeature/default_network_editable
Alex Donesky
3 years ago
committed by
GitHub
parent
78b7f32d97
commit
3d36fbd8ce
@ -0,0 +1,50 @@ |
||||
.privacy-settings { |
||||
display: flex; |
||||
flex-direction: column; |
||||
justify-content: center; |
||||
align-items: center; |
||||
|
||||
&__header { |
||||
display: flex; |
||||
justify-content: center; |
||||
flex-direction: column; |
||||
text-align: center; |
||||
max-width: 500px; |
||||
margin: 24px; |
||||
} |
||||
|
||||
&__settings { |
||||
display: flex; |
||||
justify-content: center; |
||||
flex-direction: column; |
||||
text-align: center; |
||||
max-width: 620px; |
||||
margin-bottom: 20px; |
||||
|
||||
a { |
||||
color: $Blue-500; |
||||
|
||||
&:hover { |
||||
cursor: pointer; |
||||
color: $Blue-300; |
||||
} |
||||
} |
||||
} |
||||
|
||||
&__setting { |
||||
display: flex; |
||||
justify-content: center; |
||||
flex-direction: column; |
||||
text-align: left; |
||||
max-width: 430px; |
||||
|
||||
&__toggle { |
||||
margin-left: 42px; |
||||
} |
||||
} |
||||
|
||||
& button { |
||||
max-width: 50%; |
||||
padding: 15px; |
||||
} |
||||
} |
||||
@ -0,0 +1,113 @@ |
||||
import React, { useState } from 'react'; |
||||
import { useHistory } from 'react-router-dom'; |
||||
import { useDispatch } from 'react-redux'; |
||||
|
||||
import Button from '../../../components/ui/button'; |
||||
import Typography from '../../../components/ui/typography'; |
||||
import { |
||||
FONT_WEIGHT, |
||||
TYPOGRAPHY, |
||||
} from '../../../helpers/constants/design-system'; |
||||
import { useI18nContext } from '../../../hooks/useI18nContext'; |
||||
import { |
||||
setFeatureFlag, |
||||
setUsePhishDetect, |
||||
setUseTokenDetection, |
||||
} from '../../../store/actions'; |
||||
import { ONBOARDING_PIN_EXTENSION_ROUTE } from '../../../helpers/constants/routes'; |
||||
import { Setting } from './setting'; |
||||
|
||||
export default function PrivacySettings() { |
||||
const t = useI18nContext(); |
||||
const dispatch = useDispatch(); |
||||
const history = useHistory(); |
||||
const [usePhishingDetection, setUsePhishingDetection] = useState(true); |
||||
const [turnOnTokenDetection, setTurnOnTokenDetection] = useState(true); |
||||
const [showIncomingTransactions, setShowIncomingTransactions] = useState( |
||||
true, |
||||
); |
||||
|
||||
const handleSubmit = () => { |
||||
dispatch( |
||||
setFeatureFlag('showIncomingTransactions', showIncomingTransactions), |
||||
); |
||||
dispatch(setUsePhishDetect(usePhishingDetection)); |
||||
dispatch(setUseTokenDetection(turnOnTokenDetection)); |
||||
history.push(ONBOARDING_PIN_EXTENSION_ROUTE); |
||||
}; |
||||
|
||||
return ( |
||||
<> |
||||
<div className="privacy-settings"> |
||||
<div className="privacy-settings__header"> |
||||
<Typography variant={TYPOGRAPHY.H2} fontWeight={FONT_WEIGHT.BOLD}> |
||||
{t('setAdvancedPrivacySettings')} |
||||
</Typography> |
||||
<Typography variant={TYPOGRAPHY.H4}> |
||||
{t('setAdvancedPrivacySettingsDetails')} |
||||
</Typography> |
||||
</div> |
||||
<div |
||||
className="privacy-settings__settings" |
||||
data-testid="privacy-settings-settings" |
||||
> |
||||
<Setting |
||||
value={showIncomingTransactions} |
||||
setValue={setShowIncomingTransactions} |
||||
title={t('showIncomingTransactions')} |
||||
description={t('onboardingShowIncomingTransactionsDescription', [ |
||||
<a |
||||
key="etherscan" |
||||
href="https://etherscan.io/" |
||||
target="_blank" |
||||
rel="noreferrer" |
||||
> |
||||
{t('etherscan')} |
||||
</a>, |
||||
<a |
||||
href="https://cn.etherscan.com/privacyPolicy" |
||||
target="_blank" |
||||
rel="noreferrer" |
||||
key="privacyMsg" |
||||
> |
||||
{t('privacyMsg')} |
||||
</a>, |
||||
])} |
||||
/> |
||||
<Setting |
||||
value={usePhishingDetection} |
||||
setValue={setUsePhishingDetection} |
||||
title={t('usePhishingDetection')} |
||||
description={t('onboardingUsePhishingDetectionDescription', [ |
||||
<a |
||||
href="https://www.jsdelivr.com" |
||||
target="_blank" |
||||
rel="noreferrer" |
||||
key="jsDeliver" |
||||
> |
||||
{t('jsDeliver')} |
||||
</a>, |
||||
<a |
||||
href="https://www.jsdelivr.com/terms/privacy-policy-jsdelivr-com" |
||||
target="_blank" |
||||
rel="noreferrer" |
||||
key="privacyMsg" |
||||
> |
||||
{t('privacyMsg')} |
||||
</a>, |
||||
])} |
||||
/> |
||||
<Setting |
||||
value={turnOnTokenDetection} |
||||
setValue={setTurnOnTokenDetection} |
||||
title={t('turnOnTokenDetection')} |
||||
description={t('useTokenDetectionDescription')} |
||||
/> |
||||
</div> |
||||
<Button type="primary" rounded onClick={handleSubmit}> |
||||
{t('done')} |
||||
</Button> |
||||
</div> |
||||
</> |
||||
); |
||||
} |
||||
@ -0,0 +1,15 @@ |
||||
import React from 'react'; |
||||
import PrivacySettings from './privacy-settings'; |
||||
|
||||
export default { |
||||
title: 'Onboarding - Privacy Settings', |
||||
id: __filename, |
||||
}; |
||||
|
||||
export const Base = () => { |
||||
return ( |
||||
<div style={{ maxHeight: '2000px' }}> |
||||
<PrivacySettings /> |
||||
</div> |
||||
); |
||||
}; |
||||
@ -0,0 +1,66 @@ |
||||
import React from 'react'; |
||||
import { fireEvent } from '@testing-library/react'; |
||||
import configureMockStore from 'redux-mock-store'; |
||||
import thunk from 'redux-thunk'; |
||||
import * as actions from '../../../store/actions'; |
||||
import { renderWithProvider } from '../../../../test/jest'; |
||||
import PrivacySettings from './privacy-settings'; |
||||
|
||||
describe('Privacy Settings Onboarding View', () => { |
||||
const mockStore = { |
||||
metamask: { |
||||
provider: { |
||||
type: 'test', |
||||
}, |
||||
}, |
||||
}; |
||||
|
||||
const store = configureMockStore([thunk])(mockStore); |
||||
const setFeatureFlagStub = jest.fn(); |
||||
const setUsePhishDetectStub = jest.fn(); |
||||
const setUseTokenDetectionStub = jest.fn(); |
||||
|
||||
actions._setBackgroundConnection({ |
||||
setFeatureFlag: setFeatureFlagStub, |
||||
setUsePhishDetect: setUsePhishDetectStub, |
||||
setUseTokenDetection: setUseTokenDetectionStub, |
||||
}); |
||||
|
||||
it('should update preferences', () => { |
||||
const { container, getByText } = renderWithProvider( |
||||
<PrivacySettings />, |
||||
store, |
||||
); |
||||
// All settings are initialized toggled to true
|
||||
expect(setFeatureFlagStub).toHaveBeenCalledTimes(0); |
||||
expect(setUsePhishDetectStub).toHaveBeenCalledTimes(0); |
||||
expect(setUseTokenDetectionStub).toHaveBeenCalledTimes(0); |
||||
const toggles = container.querySelectorAll('input[type=checkbox]'); |
||||
const submitButton = getByText('Done'); |
||||
|
||||
// toggle to false
|
||||
fireEvent.click(toggles[0]); |
||||
fireEvent.click(toggles[1]); |
||||
fireEvent.click(toggles[2]); |
||||
fireEvent.click(submitButton); |
||||
|
||||
expect(setFeatureFlagStub).toHaveBeenCalledTimes(1); |
||||
expect(setUsePhishDetectStub).toHaveBeenCalledTimes(1); |
||||
expect(setUseTokenDetectionStub).toHaveBeenCalledTimes(1); |
||||
expect(setFeatureFlagStub.mock.calls[0][1]).toStrictEqual(false); |
||||
expect(setUsePhishDetectStub.mock.calls[0][0]).toStrictEqual(false); |
||||
expect(setUseTokenDetectionStub.mock.calls[0][0]).toStrictEqual(false); |
||||
|
||||
// toggle back to true
|
||||
fireEvent.click(toggles[0]); |
||||
fireEvent.click(toggles[1]); |
||||
fireEvent.click(toggles[2]); |
||||
fireEvent.click(submitButton); |
||||
expect(setFeatureFlagStub).toHaveBeenCalledTimes(2); |
||||
expect(setUsePhishDetectStub).toHaveBeenCalledTimes(2); |
||||
expect(setUseTokenDetectionStub).toHaveBeenCalledTimes(2); |
||||
expect(setFeatureFlagStub.mock.calls[1][1]).toStrictEqual(true); |
||||
expect(setUsePhishDetectStub.mock.calls[1][0]).toStrictEqual(true); |
||||
expect(setUseTokenDetectionStub.mock.calls[1][0]).toStrictEqual(true); |
||||
}); |
||||
}); |
||||
@ -0,0 +1,33 @@ |
||||
import React from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
import Box from '../../../components/ui/box'; |
||||
import Typography from '../../../components/ui/typography'; |
||||
import ToggleButton from '../../../components/ui/toggle-button'; |
||||
import { |
||||
JUSTIFY_CONTENT, |
||||
TYPOGRAPHY, |
||||
FONT_WEIGHT, |
||||
} from '../../../helpers/constants/design-system'; |
||||
|
||||
export const Setting = ({ value, setValue, title, description }) => { |
||||
return ( |
||||
<Box justifyContent={JUSTIFY_CONTENT.CENTER} margin={3}> |
||||
<div className="privacy-settings__setting"> |
||||
<Typography variant={TYPOGRAPHY.H5} fontWeight={FONT_WEIGHT.BOLD}> |
||||
{title} |
||||
</Typography> |
||||
<Typography variant={TYPOGRAPHY.H6}>{description}</Typography> |
||||
</div> |
||||
<div className="privacy-settings__setting__toggle"> |
||||
<ToggleButton value={value} onToggle={(val) => setValue(!val)} /> |
||||
</div> |
||||
</Box> |
||||
); |
||||
}; |
||||
|
||||
Setting.propTypes = { |
||||
value: PropTypes.bool, |
||||
setValue: PropTypes.func, |
||||
title: PropTypes.string, |
||||
description: PropTypes.string, |
||||
}; |
||||
Loading…
Reference in new issue