Merge pull request #803 from meriadec/disclaimer-modal

Disclaimer modal

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<Props> {
   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: {

src/components/WarnBox/index.js

@@ -20,27 +20,29 @@ const Container = styled(Box).attrs({
   align-items: center;
 `
 
-const svg = (
-  <svg width="36" height="43">
-    <g fill="none">
+export const HandShield = ({ size }: { size: number }) => (
+  <svg width={size} height={size} viewBox="0 0 50.8 56.914">
+    <g transform="translate(-.6 -.48644)" fill="none">
       <path
-        fill="#4B84FF"
+        d="m26.25 2c-0.167 30.976-0.25 49.258-0.25 54.843h0.5c13.25-3.1 23.5-15.976 23.5-29.806v-15.022z"
+        fill="#4b84ff"
         fillOpacity=".08"
-        d="M18.177 2C18.06 24.126 18 37.184 18 41.174h.354C27.74 38.96 35 29.762 35 19.884V9.154L18.177 2z"
       />
       <path
+        d="m26 2-24 9.86v14.792c0 13.618 10.105 26.296 23.747 29.348h0.506c13.39-3.052 23.747-15.73 23.747-29.348v-14.791z"
         stroke="#142533"
-        strokeWidth="2"
-        d="M18 2L1 9.153v10.73c0 9.88 7.158 19.077 16.821 21.29h.358C27.663 38.96 35 29.764 35 19.884V9.154L18 2z"
+        strokeWidth="2.8"
       />
       <path
-        fill="#4B84FF"
-        d="M23.733 15.036c-.568 0-1.03.448-1.03 1.001l-.019 4.488s.002.313-.308.313c-.316 0-.307-.313-.307-.313v-6.474c0-.553-.456-.982-1.024-.982-.57 0-.974.43-.974.982v6.474s-.035.316-.34.316c-.303 0-.327-.316-.327-.316v-7.553c0-.552-.428-.972-.996-.972-.569 0-1 .42-1 .972v7.553s-.016.303-.344.303c-.321 0-.323-.303-.323-.303v-5.611c0-.553-.445-.9-1.013-.9-.57 0-.985.347-.985.9v8.2s-.056.365-.594-.237c-1.378-1.543-2.097-1.85-2.097-1.85s-1.31-.622-1.889.503c-.42.816.025.86.712 1.861.607.888 2.529 3.221 2.529 3.221s2.28 3.126 5.355 3.126c0 0 6.024.25 6.024-5.544l-.021-8.157c0-.553-.46-1.001-1.03-1.001"
+        d="m33.58 20.108c-0.769 0-1.394 0.606-1.394 1.354l-0.025 6.072s3e-3 0.424-0.416 0.424c-0.428 0-0.417-0.424-0.417-0.424v-8.76c0-0.747-0.616-1.327-1.385-1.327-0.77 0-1.318 0.58-1.318 1.328v8.759s-0.047 0.428-0.46 0.428c-0.41 0-0.441-0.428-0.441-0.428v-10.219c0-0.747-0.58-1.315-1.349-1.315-0.77 0-1.353 0.568-1.353 1.315v10.219s-0.022 0.41-0.465 0.41c-0.435 0-0.437-0.41-0.437-0.41v-7.591c0-0.748-0.602-1.217-1.37-1.217-0.77 0-1.333 0.469-1.333 1.217v11.094s-0.076 0.493-0.803-0.321c-1.865-2.087-2.838-2.502-2.838-2.502s-1.77-0.843-2.555 0.68c-0.568 1.103 0.034 1.162 0.963 2.518 0.822 1.2 3.421 4.357 3.421 4.357s3.084 4.229 7.245 4.229c0 0 8.15 0.338 8.15-7.5l-0.028-11.036c0-0.748-0.623-1.354-1.392-1.354"
+        fill="#4b84ff"
       />
     </g>
   </svg>
 )
 
+const svg = <HandShield size={43} />
+
 type Props = {
   children: React.Node,
 }

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<Props> {
+  render() {
+    const { t } = this.props
+
+    return (
+      <Modal
+        name={MODAL_DISCLAIMER}
+        render={({ onClose }) => (
+          <ModalBody onClose={onClose}>
+            <ModalTitle>{t('app:disclaimerModal.title')}</ModalTitle>
+            <ModalContent flow={4} ff="Open Sans|Regular" fontSize={4} color="smoke">
+              <Box align="center" mt={4} pb={4}>
+                <HandShield size={55} />
+              </Box>
+              <p>{t('app:disclaimerModal.desc_1')}</p>
+              <p>{t('app:disclaimerModal.desc_2')}</p>
+            </ModalContent>
+            <ModalFooter horizontal justifyContent="flex-end">
+              <Button onClick={onClose} primary>
+                {t('app:disclaimerModal.cta')}
+              </Button>
+            </ModalFooter>
+          </ModalBody>
+        )}
+      />
+    )
+  }
+}
+
+export default translate()(DisclaimerModal)

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'

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

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