[WIP] Send modal design up to step 3

7 years ago · 0255ed5cd2
6 changed files with 153 additions and 35 deletions
--- a/src/components/WarnBox/index.js
+++ 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 = (
+  <svg width="36" height="43">
+    <g fill="none">
+      <path
+        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
+        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"
+      />
+      <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"
+      />
+    </g>
+  </svg>
+)
+
+type Props = {
+  children: React.Node,
+}
+
+export default (props: Props) => (
+  <Container>
+    <Box mx={1}>{svg}</Box>
+    <Box shrink>{props.children}</Box>
+  </Container>
+)
--- a/src/components/WarnBox/stories.js
+++ 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', () => (
+  <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.',
+    )}
+  </WarnBox>
+))
--- 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 <div>step verification</div>
+type Props = {
+  t: T,
 }

-export default StepVerification
+export default (props: Props) => (
+  <Container>
+    <WarnBox>
+      {props
+        .t('send:steps.verification.warning')
+        .split('\n')
+        .map(line => <p key={uniqueId()}>{line}</p>)}
+    </WarnBox>
+    <Info>{props.t('send:steps.verification.body')}</Info>
+    <DeviceConfirm />
+  </Container>
+)
--- 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 (
-    <ModalFooter horizontal alignItems="center">
-      <Box grow>
-        <Label>{t('send:totalSpent')}</Label>
-        <Box horizontal flow={2} align="center">
-          <FormattedVal
-            disableRounding
-            color="dark"
-            val={amount + fees}
-            unit={account.unit}
-            showCode
-          />
-          <Box horizontal align="center">
-            <Text ff="Rubik" fontSize={3}>
-              {'('}
-            </Text>
-            <CounterValue
-              ticker={account.currency.units[0].code}
-              value={amount + fees}
-              disableRounding
-              color="grey"
-              fontSize={3}
-              showCode
-            />
-            <Text ff="Rubik" fontSize={3}>
-              {')'}
-            </Text>
+    <ModalFooter>
+      <Box horizontal alignItems="center" justifyContent="flex-end" flow={2}>
+        {showTotal && (
+          <Box grow>
+            <Label>{t('send:totalSpent')}</Label>
+            <Box horizontal flow={2} align="center">
+              <FormattedVal
+                disableRounding
+                color="dark"
+                val={amount + fees}
+                unit={account.unit}
+                showCode
+              />
+              <Box horizontal align="center">
+                <Text ff="Rubik" fontSize={3}>
+                  {'('}
+                </Text>
+                <CounterValue
+                  ticker={account.currency.units[0].code}
+                  value={amount + fees}
+                  disableRounding
+                  color="grey"
+                  fontSize={3}
+                  showCode
+                />
+                <Text ff="Rubik" fontSize={3}>
+                  {')'}
+                </Text>
+              </Box>
+            </Box>
          </Box>
-        </Box>
+        )}
+        <Button primary onClick={onNext} disabled={!canNext}>
+          {'Next'}
+        </Button>
      </Box>
-      <Button primary onClick={onNext} disabled={!canNext}>
-        {'Next'}
-      </Button>
    </ModalFooter>
  )
 }
--- a/src/components/modals/Send/index.js
+++ b/src/components/modals/Send/index.js
@ -210,13 +210,14 @@ class SendModal extends PureComponent<Props, State> {
                {this.renderStep()}
              </ModalContent>
              {this._account &&
-                stepIndex !== 3 && (
+                stepIndex < 2 && (
                  <Footer
                    canNext={canNext}
                    onNext={this.handleNextStep}
                    account={this._account}
                    amount={amount}
                    fees={fees}
+                    showTotal={stepIndex === 0}
                    t={t}
                  />
                )}
--- a/static/i18n/en/send.yml
+++ b/static/i18n/en/send.yml
@ -15,6 +15,10 @@ steps:
    title: Connect device
  verification:
    title: Verification
+    warning: |
+      You are about to validate a transaction.
+      Be careful, we strongly recommand you to verify that the informations on your Ledger device are correct.
+    body: Once you have checked everything is ok, you can validate securely the transaction on your device.
  confirmation:
    title: Confirmation
    cta: View operation details