diff --git a/src/components/Onboarding/index.js b/src/components/Onboarding/index.js index f212c8b0..9c6932bc 100644 --- a/src/components/Onboarding/index.js +++ b/src/components/Onboarding/index.js @@ -10,7 +10,9 @@ import type { T } from 'types/common' import type { OnboardingState } from 'reducers/onboarding' import type { SettingsState } from 'reducers/settings' +import { MODAL_DISCLAIMER, MODAL_DISCLAIMER_DELAY } from 'config/constants' import { saveSettings } from 'actions/settings' +import { openModal } from 'reducers/modals' import { nextStep, prevStep, @@ -64,6 +66,7 @@ const mapDispatchToProps = { prevStep, jumpStep, unlock, + openModal, } type Props = { @@ -77,6 +80,7 @@ type Props = { jumpStep: Function, getCurrentDevice: Function, unlock: Function, + openModal: string => void, } export type StepProps = { @@ -97,7 +101,12 @@ export type StepProps = { class Onboarding extends PureComponent { getDeviceInfo = () => this.props.getCurrentDevice - finish = () => this.props.saveSettings({ hasCompletedOnboarding: true }) + finish = () => { + this.props.saveSettings({ hasCompletedOnboarding: true }) + setTimeout(() => { + this.props.openModal(MODAL_DISCLAIMER) + }, MODAL_DISCLAIMER_DELAY) + } savePassword = hash => { this.props.saveSettings({ password: { diff --git a/src/components/WarnBox/index.js b/src/components/WarnBox/index.js index 7426869b..dda50b24 100644 --- a/src/components/WarnBox/index.js +++ b/src/components/WarnBox/index.js @@ -20,27 +20,29 @@ const Container = styled(Box).attrs({ align-items: center; ` -const svg = ( - - +export const HandShield = ({ size }: { size: number }) => ( + + ) +const svg = + type Props = { children: React.Node, } diff --git a/src/components/modals/Disclaimer.js b/src/components/modals/Disclaimer.js new file mode 100644 index 00000000..4ceaa006 --- /dev/null +++ b/src/components/modals/Disclaimer.js @@ -0,0 +1,48 @@ +// @flow + +import React, { PureComponent } from 'react' +import { translate } from 'react-i18next' + +import type { T } from 'types/common' + +import { MODAL_DISCLAIMER } from 'config/constants' + +import Modal, { ModalBody, ModalTitle, ModalContent, ModalFooter } from 'components/base/Modal' +import Button from 'components/base/Button' +import Box from 'components/base/Box' +import { HandShield } from 'components/WarnBox' + +type Props = { + t: T, +} + +class DisclaimerModal extends PureComponent { + render() { + const { t } = this.props + + return ( + ( + + {t('app:disclaimerModal.title')} + + + + +

{t('app:disclaimerModal.desc_1')}

+

{t('app:disclaimerModal.desc_2')}

+ + + + + + )} + /> + ) + } +} + +export default translate()(DisclaimerModal) diff --git a/src/components/modals/index.js b/src/components/modals/index.js index 2f942504..adae65fd 100644 --- a/src/components/modals/index.js +++ b/src/components/modals/index.js @@ -5,3 +5,4 @@ export Receive from './Receive' export Send from './Send' export SettingsAccount from './SettingsAccount' export ReleaseNotes from './ReleaseNotes' +export Disclaimer from './Disclaimer' diff --git a/src/config/constants.js b/src/config/constants.js index 78b564f7..b9a4b4ce 100644 --- a/src/config/constants.js +++ b/src/config/constants.js @@ -96,3 +96,6 @@ export const MODAL_RECEIVE = 'MODAL_RECEIVE' export const MODAL_SEND = 'MODAL_SEND' export const MODAL_SETTINGS_ACCOUNT = 'MODAL_SETTINGS_ACCOUNT' export const MODAL_RELEASES_NOTES = 'MODAL_RELEASES_NOTES' + +export const MODAL_DISCLAIMER = 'MODAL_DISCLAIMER' +export const MODAL_DISCLAIMER_DELAY = 1 * 1000 diff --git a/static/i18n/en/app.yml b/static/i18n/en/app.yml index 400b01dc..0ac3f0d9 100644 --- a/static/i18n/en/app.yml +++ b/static/i18n/en/app.yml @@ -414,3 +414,8 @@ crash: createTicket: Ledger Support showDetails: Show details showError: Show error +disclaimerModal: + title: Trade Safely + desc_1: Before sending and receiving crypto assets, educate yourself to make informed decisions. Crypto assets are volatile and the prices can go up and down. Carefully evaluate your trading goals and the financial risk you are willing to take. + desc_2: Please beware that Ledger does not provide financial, tax, or legal advice. You should take such decisions on your own or rely on opinions of licensed experts. + cta: Got it