diff --git a/src/components/WarnBox/index.js b/src/components/WarnBox/index.js new file mode 100644 index 00000000..7426869b --- /dev/null +++ b/src/components/WarnBox/index.js @@ -0,0 +1,53 @@ +// @flow + +import * as React from 'react' +import styled from 'styled-components' + +import Box from 'components/base/Box' + +const Container = styled(Box).attrs({ + color: 'graphite', + borderRadius: 1, + px: 4, + py: 3, + horizontal: true, + ff: 'Open Sans', + fontSize: 4, + flow: 4, +})` + border: solid 1px; + border-color: ${p => p.theme.colors.fog}; + align-items: center; +` + +const svg = ( + + + + + + + +) + +type Props = { + children: React.Node, +} + +export default (props: Props) => ( + + {svg} + {props.children} + +) diff --git a/src/components/WarnBox/stories.js b/src/components/WarnBox/stories.js new file mode 100644 index 00000000..1ffd1539 --- /dev/null +++ b/src/components/WarnBox/stories.js @@ -0,0 +1,18 @@ +// @flow + +import React from 'react' +import { storiesOf } from '@storybook/react' +import { text } from '@storybook/addon-knobs' + +import WarnBox from 'components/WarnBox' + +const stories = storiesOf('Components', module) + +stories.add('WarnBox', () => ( + + {text( + 'children', + 'Nulla ornare ligula nec velit fermentum accumsan. Mauris sagittis iaculis pretium. Maecenas tincidunt tortor ullamcorper neque scelerisque lacinia sit amet sit amet elit. Quisque vulputate at tellus ut fringilla. Sed varius neque accumsan nunc consequat semper. In interdum euismod velit, sed pulvinar justo finibus ac. Nullam euismod felis non pellentesque fermentum. Nullam sed libero eu ligula porta accumsan eget et neque. Sed varius lobortis vestibulum. Morbi efficitur leo at augue venenatis, vitae faucibus ante lobortis. Nunc tincidunt, sem eget ultricies convallis, dolor est gravida sem, non vestibulum urna lorem a justo. Quisque ultrices feugiat arcu, sit amet tristique tellus maximus in. Phasellus ultricies mattis erat vitae laoreet. Fusce ac dignissim dui. Etiam semper purus nisi, eu semper tortor mollis nec.', + )} + +)) diff --git a/src/components/modals/Send/03-step-verification.js b/src/components/modals/Send/03-step-verification.js index cb8ea748..674c4d0e 100644 --- a/src/components/modals/Send/03-step-verification.js +++ b/src/components/modals/Send/03-step-verification.js @@ -1,7 +1,44 @@ +// @flow + import React from 'react' +import styled from 'styled-components' +import uniqueId from 'lodash/uniqueId' + +import Box from 'components/base/Box' +import WarnBox from 'components/WarnBox' +import DeviceConfirm from 'components/DeviceConfirm' + +import type { T } from 'types/common' + +const Container = styled(Box).attrs({ + alignItems: 'center', + fontSize: 4, + pb: 4, +})`` + +const Info = styled(Box).attrs({ + ff: 'Open Sans|SemiBold', + color: 'dark', + mt: 6, + mb: 4, + px: 5, +})` + text-align: center; +` -function StepVerification() { - return
step verification
+type Props = { + t: T, } -export default StepVerification +export default (props: Props) => ( + + + {props + .t('send:steps.verification.warning') + .split('\n') + .map(line =>

{line}

)} + + {props.t('send:steps.verification.body')} + + +) diff --git a/src/components/modals/Send/Footer.js b/src/components/modals/Send/Footer.js index 978da05a..162f2848 100644 --- a/src/components/modals/Send/Footer.js +++ b/src/components/modals/Send/Footer.js @@ -20,42 +20,47 @@ type Props = { fees: number, onNext: Function, canNext: boolean, + showTotal: boolean, } -function Footer({ account, amount, fees, t, onNext, canNext }: Props) { +function Footer({ account, amount, fees, t, onNext, canNext, showTotal }: Props) { return ( - - - - - - - - {'('} - - - - {')'} - + + + {showTotal && ( + + + + + + + {'('} + + + + {')'} + + + - + )} + - ) } diff --git a/src/components/modals/Send/index.js b/src/components/modals/Send/index.js index 3719eac8..b90a839a 100644 --- a/src/components/modals/Send/index.js +++ b/src/components/modals/Send/index.js @@ -210,13 +210,14 @@ class SendModal extends PureComponent { {this.renderStep()} {this._account && - stepIndex !== 3 && ( + stepIndex < 2 && (