From acb1bbd68ec4beb1a5cb7afaeb39e38cff52b80b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=ABck=20V=C3=A9zien?= <nainpuissant@gmail.com>
Date: Wed, 31 Jan 2018 18:21:50 +0100
Subject: [PATCH 1/5] Fix Select wallet component

---
 src/components/modals/AddAccount/index.js | 15 +++++++++------
 1 file changed, 9 insertions(+), 6 deletions(-)

diff --git a/src/components/modals/AddAccount/index.js b/src/components/modals/AddAccount/index.js
index 00326463..6c210bf8 100644
--- a/src/components/modals/AddAccount/index.js
+++ b/src/components/modals/AddAccount/index.js
@@ -26,6 +26,13 @@ import Select from 'components/base/Select'
 import CreateAccount from './CreateAccount'
 import ImportAccounts from './ImportAccounts'
 
+const currencies = [
+  {
+    key: 'btc',
+    name: 'Bitcoin',
+  },
+]
+
 const Steps = {
   chooseWallet: (props: Object) => (
     <form onSubmit={props.onSubmit}>
@@ -36,12 +43,8 @@ const Steps = {
             placeholder="Choose a wallet..."
             onChange={item => props.onChangeInput('wallet')(item.key)}
             renderSelected={item => item.name}
-            items={[
-              {
-                key: 'btc',
-                name: 'Bitcoin',
-              },
-            ]}
+            items={currencies}
+            value={currencies.find(c => c.key === props.value.wallet)}
           />
         </Box>
         <Box horizontal justify="flex-end">

From f6e01ac9d69d1b0371462553a7097db33e576507 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=ABck=20V=C3=A9zien?= <nainpuissant@gmail.com>
Date: Thu, 1 Feb 2018 10:49:32 +0100
Subject: [PATCH 2/5] Add simple Breadcrumb for Send modal

---
 package.json                        |  20 +--
 src/components/AccountPage.js       |   2 +-
 src/components/base/Button/index.js |  78 +++++----
 src/components/base/Modal/index.js  |   5 +-
 src/components/base/Select/index.js |  11 +-
 src/components/modals/Send.js       | 119 +++++++++++--
 yarn.lock                           | 259 ++++++++++++++++------------
 7 files changed, 321 insertions(+), 173 deletions(-)

diff --git a/package.json b/package.json
index d1a38e03..df17e253 100644
--- a/package.json
+++ b/package.json
@@ -42,18 +42,18 @@
     "@fortawesome/fontawesome-free-regular": "^5.0.6",
     "@fortawesome/fontawesome-free-solid": "^5.0.6",
     "@fortawesome/react-fontawesome": "^0.0.17",
-    "@ledgerhq/common": "2.0.5",
-    "@ledgerhq/hw-app-btc": "^2.1.0",
-    "@ledgerhq/hw-app-eth": "^2.1.0",
-    "@ledgerhq/hw-transport": "^2.1.0",
-    "@ledgerhq/hw-transport-node-hid": "^2.1.0",
+    "@ledgerhq/common": "2.1.3",
+    "@ledgerhq/hw-app-btc": "^2.1.3",
+    "@ledgerhq/hw-app-eth": "^2.1.3",
+    "@ledgerhq/hw-transport": "^2.1.3",
+    "@ledgerhq/hw-transport-node-hid": "^2.1.3",
     "axios": "^0.17.1",
     "bcryptjs": "^2.4.3",
     "bitcoinjs-lib": "^3.3.2",
     "bs58check": "^2.1.1",
     "color": "^3.0.0",
     "cross-env": "^5.1.3",
-    "downshift": "^1.26.1",
+    "downshift": "^1.27.0",
     "electron-store": "^1.3.0",
     "electron-updater": "^2.20.1",
     "fuse.js": "^3.2.0",
@@ -83,7 +83,7 @@
     "shortid": "^2.2.8",
     "smooth-scrollbar": "^8.2.5",
     "source-map-support": "^0.5.3",
-    "styled-components": "^3.1.4",
+    "styled-components": "^3.1.5",
     "styled-system": "^1.1.1"
   },
   "devDependencies": {
@@ -104,10 +104,10 @@
     "chance": "^1.0.13",
     "concurrently": "^3.5.1",
     "dotenv": "^5.0.0",
-    "electron": "1.7.11",
-    "electron-builder": "^19.55.2",
+    "electron": "1.7.12",
+    "electron-builder": "^19.55.3",
     "electron-devtools-installer": "^2.2.3",
-    "electron-webpack": "1.11.0",
+    "electron-webpack": "1.12.1",
     "eslint": "^4.16.0",
     "eslint-config-airbnb": "^16.1.0",
     "eslint-config-prettier": "^2.9.0",
diff --git a/src/components/AccountPage.js b/src/components/AccountPage.js
index 81e65f0b..e3db5bff 100644
--- a/src/components/AccountPage.js
+++ b/src/components/AccountPage.js
@@ -70,7 +70,7 @@ class AccountPage extends PureComponent<Props> {
               </Button>
             </Box>
             <Box>
-              <Button icon="sliders-h" />
+              <Button icon="sliders-h" color="white" />
             </Box>
           </Box>
         </Box>
diff --git a/src/components/base/Button/index.js b/src/components/base/Button/index.js
index 1343403a..7da76f0e 100644
--- a/src/components/base/Button/index.js
+++ b/src/components/base/Button/index.js
@@ -3,6 +3,7 @@
 import React from 'react'
 import styled from 'styled-components'
 import { borderColor, borderWidth, space, fontSize, fontWeight, color } from 'styled-system'
+import noop from 'lodash/noop'
 
 import Box from 'components/base/Box'
 import Icon from 'components/base/Icon'
@@ -15,7 +16,7 @@ const Base = styled.button`
   ${fontSize};
   ${fontWeight};
   border-radius: 5px;
-  cursor: pointer;
+  cursor: ${p => (p.disabled ? 'default' : 'pointer')};
   height: 40px;
   box-shadow: ${p => (p.withShadow ? 'rgba(0, 0, 0, 0.2) 0 3px 10px' : '')};
   outline: none;
@@ -25,9 +26,47 @@ type Props = {
   children?: any,
   icon?: string,
   primary?: boolean,
+  disabled?: boolean,
+  onClick?: Function,
 }
 
-const Button = ({ primary, children, icon, ...props }: Props) => {
+function getProps({ disabled, icon, primary }: Object) {
+  const props = (predicate, props, defaults = {}) => (predicate ? props : defaults)
+
+  return {
+    ...props(
+      icon,
+      {
+        fontSize: 3,
+        px: 1,
+      },
+      {
+        fontSize: 1,
+        px: 3,
+      },
+    ),
+    ...props(
+      primary,
+      {
+        color: 'white',
+        bg: 'blue',
+        borderWidth: 0,
+        withShadow: true,
+      },
+      {
+        borderColor: 'mouse',
+        borderWidth: 1,
+      },
+    ),
+    ...props(disabled, {
+      color: 'white',
+      bg: 'argile',
+      withShadow: false,
+    }),
+  }
+}
+
+const Button = ({ children, onClick, primary, icon, disabled, ...props }: Props) => {
   children = icon ? (
     <Box align="center" justify="center">
       <Icon name={icon} />
@@ -36,34 +75,13 @@ const Button = ({ primary, children, icon, ...props }: Props) => {
     children
   )
 
-  props = {
-    ...props,
-    bg: 'transparent',
-    color: 'mouse',
-    ...(icon
-      ? {
-          fontSize: 3,
-          px: 1,
-        }
-      : {
-          fontSize: 1,
-          px: 3,
-        }),
-    ...(primary
-      ? {
-          color: 'white',
-          bg: 'blue',
-          borderWidth: 0,
-          withShadow: true,
-        }
-      : {
-          borderColor: 'mouse',
-          borderWidth: 1,
-        }),
-  }
-
   return (
-    <Base {...props} icon={icon}>
+    <Base
+      {...props}
+      {...getProps({ primary, icon, disabled })}
+      disabled={disabled}
+      onClick={disabled ? undefined : onClick}
+    >
       {children}
     </Base>
   )
@@ -72,7 +90,9 @@ const Button = ({ primary, children, icon, ...props }: Props) => {
 Button.defaultProps = {
   children: undefined,
   icon: undefined,
+  disabled: undefined,
   primary: false,
+  onClick: noop,
 }
 
 export default Button
diff --git a/src/components/base/Modal/index.js b/src/components/base/Modal/index.js
index 61b4a9b0..2f9812a1 100644
--- a/src/components/base/Modal/index.js
+++ b/src/components/base/Modal/index.js
@@ -85,7 +85,6 @@ const Wrapper = styled(Box).attrs({
 
 const Body = styled(Box).attrs({
   bg: p => p.theme.colors.white,
-  p: 3,
   relative: true,
 })`
   border-radius: 5px;
@@ -158,7 +157,9 @@ export const ModalBody = ({
         <Icon fontSize={3} name="times" />
       </CloseContainer>
     )}
-    <Box {...props}>{children}</Box>
+    <Box p={3} {...props}>
+      {children}
+    </Box>
   </Body>
 )
 
diff --git a/src/components/base/Select/index.js b/src/components/base/Select/index.js
index 0144fb9a..8741089f 100644
--- a/src/components/base/Select/index.js
+++ b/src/components/base/Select/index.js
@@ -67,13 +67,14 @@ const ItemWrapper = styled(Box)`
 const Dropdown = styled(Box).attrs({
   mt: 1,
 })`
-  position: absolute;
-  top: 100%;
-  left: 0;
-  right: 0;
-  border: 1px solid ${p => p.theme.colors.mouse};
   border-radius: 3px;
+  border: 1px solid ${p => p.theme.colors.mouse};
   box-shadow: rgba(0, 0, 0, 0.05) 0 2px 2px;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 100%;
+  z-index: 1;
 `
 
 const FloatingTriangles = styled(Box).attrs({
diff --git a/src/components/modals/Send.js b/src/components/modals/Send.js
index cec64a01..36f77de3 100644
--- a/src/components/modals/Send.js
+++ b/src/components/modals/Send.js
@@ -2,6 +2,7 @@
 
 import React, { Fragment, PureComponent } from 'react'
 import { translate } from 'react-i18next'
+import styled from 'styled-components'
 import get from 'lodash/get'
 
 import type { T } from 'types/common'
@@ -17,21 +18,62 @@ import RecipientAddress from 'components/RecipientAddress'
 import SelectAccount from 'components/SelectAccount'
 import Text from 'components/base/Text'
 
+const BreadcrumbWrapper = styled(Box).attrs({
+  horizontal: true,
+  align: 'center',
+  flow: 20,
+  relative: true,
+})``
+const BreadcrumbStep = styled(({ start, active, end, ...props }) => (
+  <Box start={start} end={end} active={active} {...props} />
+)).attrs({
+  color: p => (p.active ? 'blue' : 'mouse'),
+  align: 'center',
+  flow: 5,
+  grow: p => !p.start && !p.end,
+  ml: p => p.end && 20,
+  mr: p => p.start && 20,
+})`
+  &:before {
+    content: ' ';
+    display: block;
+    height: 2px;
+    position: absolute;
+    left: 20px;
+    right: 20px;
+    background: ${p => p.theme.colors.pearl};
+    margin-top: 8px;
+  }
+`
+const BreadcrumbNumberWrapper = styled(Box).attrs({
+  bg: 'white',
+  px: 3,
+  relative: true,
+})`
+  z-index: 1;
+`
+const BreadcrumbNumber = styled(Box).attrs({
+  color: p => (p.active ? 'white' : 'mouse'),
+  bg: p => (p.active ? 'blue' : 'pearl'),
+  align: 'center',
+  justify: 'center',
+})`
+  border-radius: 50%;
+  box-shadow: ${p => p.active && `0 0 0 4px ${p.theme.colors.cream}`};
+  font-size: 9px;
+  height: 20px;
+  width: 20px;
+`
+
 const Steps = {
-  amount: ({ t, ...props }: Object) => (
+  '1': ({ t, ...props }: Object) => (
     <form
       onSubmit={(e: SyntheticEvent<HTMLFormElement>) => {
         e.preventDefault()
 
-        if (
-          !props.value.account ||
-          props.value.address.trim() === '' ||
-          props.value.amount.trim() === ''
-        ) {
-          return
+        if (props.canSubmit) {
+          props.onChangeStep('2')
         }
-
-        props.onChangeStep('summary')
       }}
     >
       <Box flow={3}>
@@ -55,7 +97,7 @@ const Steps = {
             <Text>Cancel</Text>
           </Box>
           <Box justify="flex-end">
-            <Button type="submit" primary>
+            <Button type="submit" primary disabled={!props.canSubmit}>
               Next
             </Button>
           </Box>
@@ -63,7 +105,7 @@ const Steps = {
       </Box>
     </form>
   ),
-  summary: (props: Object) => (
+  '2': (props: Object) => (
     <div>
       <div>summary</div>
       <div>{props.value.amount}</div>
@@ -79,7 +121,7 @@ type InputValue = {
   amount: string,
 }
 
-type Step = 'amount' | 'summary'
+type Step = '1' | '2'
 
 type State = {
   inputValue: InputValue,
@@ -96,7 +138,7 @@ const defaultState = {
     address: '',
     amount: '',
   },
-  step: 'amount',
+  step: '1',
 }
 
 class Send extends PureComponent<Props, State> {
@@ -108,18 +150,24 @@ class Send extends PureComponent<Props, State> {
     const { inputValue, step } = this.state
     const { t } = this.props
 
-    const props = (predicate, props) => (predicate ? props : {})
+    const props = (predicate, props, defaults = {}) => (predicate ? props : defaults)
+
+    const account = inputValue.account || get(data, 'account')
 
     return {
-      ...props(step === 'amount', {
+      ...props(step === '1', {
+        canSubmit: account && inputValue.address.trim() !== '' && inputValue.amount.trim() !== '',
         onChangeInput: this.handleChangeInput,
         value: {
           ...inputValue,
-          account: inputValue.account || get(data, 'account'),
+          account,
         },
       }),
-      ...props(step === 'summary', {
-        value: inputValue,
+      ...props(step === '2', {
+        value: {
+          ...inputValue,
+          account,
+        },
       }),
       onChangeStep: this.handleChangeStep,
       t,
@@ -155,7 +203,17 @@ class Send extends PureComponent<Props, State> {
         onClose={this.handleClose}
         render={({ data, onClose }) => (
           <Fragment>
-            <ModalBody>{step}</ModalBody>
+            <ModalBody p={2}>
+              <Breadcrumb
+                currentStep={step}
+                items={[
+                  { label: 'Amount' },
+                  { label: 'Summary' },
+                  { label: 'Secure validation' },
+                  { label: 'Confirmation' },
+                ]}
+              />
+            </ModalBody>
             <ModalBody onClose={onClose}>
               <Step {...this.getStepProps(data)} />
             </ModalBody>
@@ -166,4 +224,27 @@ class Send extends PureComponent<Props, State> {
   }
 }
 
+const Breadcrumb = ({ items, currentStep }: Object) => (
+  <BreadcrumbWrapper>
+    {items.map((item, i) => {
+      const active = i < currentStep
+      const start = i === 0
+      const end = i + 1 === items.length
+      return (
+        <BreadcrumbStep
+          key={i} // eslint-disable-line react/no-array-index-key
+          start={start}
+          end={end}
+          active={active}
+        >
+          <BreadcrumbNumberWrapper>
+            <BreadcrumbNumber active={active}>{i + 1}</BreadcrumbNumber>
+          </BreadcrumbNumberWrapper>
+          <Box fontSize={0}>{item.label}</Box>
+        </BreadcrumbStep>
+      )
+    })}
+  </BreadcrumbWrapper>
+)
+
 export default translate()(Send)
diff --git a/yarn.lock b/yarn.lock
index ea7903f3..a67b4a28 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -48,6 +48,13 @@
   dependencies:
     "@babel/types" "7.0.0-beta.36"
 
+"@babel/helper-module-imports@7.0.0-beta.35":
+  version "7.0.0-beta.35"
+  resolved "https://registry.yarnpkg.com/@babel/helper-module-imports/-/helper-module-imports-7.0.0-beta.35.tgz#308e350e731752cdb4d0f058df1d704925c64e0a"
+  dependencies:
+    "@babel/types" "7.0.0-beta.35"
+    lodash "^4.2.0"
+
 "@babel/template@7.0.0-beta.36":
   version "7.0.0-beta.36"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.0.0-beta.36.tgz#02e903de5d68bd7899bce3c5b5447e59529abb00"
@@ -70,6 +77,14 @@
     invariant "^2.2.0"
     lodash "^4.2.0"
 
+"@babel/types@7.0.0-beta.35":
+  version "7.0.0-beta.35"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.35.tgz#cf933a9a9a38484ca724b335b88d83726d5ab960"
+  dependencies:
+    esutils "^2.0.2"
+    lodash "^4.2.0"
+    to-fast-properties "^2.0.0"
+
 "@babel/types@7.0.0-beta.36":
   version "7.0.0-beta.36"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.0.0-beta.36.tgz#64f2004353de42adb72f9ebb4665fc35b5499d23"
@@ -106,9 +121,9 @@
   dependencies:
     humps "^2.0.1"
 
-"@ledgerhq/common@2.0.5":
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/@ledgerhq/common/-/common-2.0.5.tgz#5f5eca4ac907914d700540c20b3d733cd7a25a93"
+"@ledgerhq/common@2.1.3":
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/@ledgerhq/common/-/common-2.1.3.tgz#02ee37050a5a7c22f4b88c6f26d78cf103b5c284"
   dependencies:
     fbjs "^0.8.16"
     invariant "^2.2.2"
@@ -121,28 +136,28 @@
     redux "^3.7.2"
     redux-thunk "^2.2.0"
 
-"@ledgerhq/hw-app-btc@^2.1.0":
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/@ledgerhq/hw-app-btc/-/hw-app-btc-2.1.0.tgz#6f7354ac4838eda4d78252b4fe984cd034a317bf"
+"@ledgerhq/hw-app-btc@^2.1.3":
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/@ledgerhq/hw-app-btc/-/hw-app-btc-2.1.3.tgz#13eb7fef76b4a1ea027d276207fd53721403fb15"
   dependencies:
-    "@ledgerhq/hw-transport" "^2.1.0"
+    "@ledgerhq/hw-transport" "^2.1.3"
 
-"@ledgerhq/hw-app-eth@^2.1.0":
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/@ledgerhq/hw-app-eth/-/hw-app-eth-2.1.0.tgz#66dfbe4b11be9e22ab5574db603cd70aa9b82bf0"
+"@ledgerhq/hw-app-eth@^2.1.3":
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/@ledgerhq/hw-app-eth/-/hw-app-eth-2.1.3.tgz#77026c248154234352747865b728e495590017c0"
   dependencies:
-    "@ledgerhq/hw-transport" "^2.1.0"
+    "@ledgerhq/hw-transport" "^2.1.3"
 
-"@ledgerhq/hw-transport-node-hid@^2.1.0":
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/@ledgerhq/hw-transport-node-hid/-/hw-transport-node-hid-2.1.0.tgz#bcaeab27feb7d869f8a8d96cee1e4934f3c87040"
+"@ledgerhq/hw-transport-node-hid@^2.1.3":
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/@ledgerhq/hw-transport-node-hid/-/hw-transport-node-hid-2.1.3.tgz#a42b6c04af54fe5659622158f9c61a2ba713422e"
   dependencies:
-    "@ledgerhq/hw-transport" "^2.1.0"
+    "@ledgerhq/hw-transport" "^2.1.3"
     node-hid "^0.7.2"
 
-"@ledgerhq/hw-transport@^2.1.0":
-  version "2.1.0"
-  resolved "https://registry.yarnpkg.com/@ledgerhq/hw-transport/-/hw-transport-2.1.0.tgz#7d8460a2ea8d5344796482458b6adb11c1cfc706"
+"@ledgerhq/hw-transport@^2.1.3":
+  version "2.1.3"
+  resolved "https://registry.yarnpkg.com/@ledgerhq/hw-transport/-/hw-transport-2.1.3.tgz#d9cca5fe70629eebd23fac5b85b8720f54d806ff"
   dependencies:
     events "^1.1.1"
 
@@ -355,9 +370,9 @@
   version "16.0.34"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.0.34.tgz#7a8f795afd8a404a9c4af9539b24c75d3996914e"
 
-"@types/webpack-env@^1.13.2":
-  version "1.13.3"
-  resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.13.3.tgz#0ecbe70f87341767793774d3683b51aa3246434c"
+"@types/webpack-env@^1.13.4":
+  version "1.13.5"
+  resolved "https://registry.yarnpkg.com/@types/webpack-env/-/webpack-env-1.13.5.tgz#ca854e9fbdbcdf45d7376882875f28e2c60593f8"
 
 abbrev@1:
   version "1.1.1"
@@ -411,7 +426,7 @@ airbnb-js-shims@^1.4.0:
     string.prototype.padend "^3.0.0"
     string.prototype.padstart "^3.0.0"
 
-ajv-keywords@^2.0.0, ajv-keywords@^2.1.0, ajv-keywords@^2.1.1:
+ajv-keywords@^2.0.0, ajv-keywords@^2.1.0:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/ajv-keywords/-/ajv-keywords-2.1.1.tgz#617997fc5f60576894c435f940d819e135b80762"
 
@@ -422,7 +437,7 @@ ajv@^4.9.1:
     co "^4.6.0"
     json-stable-stringify "^1.0.1"
 
-ajv@^5.0.0, ajv@^5.1.0, ajv@^5.1.5, ajv@^5.2.3, ajv@^5.3.0, ajv@^5.5.0, ajv@^5.5.2:
+ajv@^5.0.0, ajv@^5.1.0, ajv@^5.1.5, ajv@^5.2.3, ajv@^5.3.0, ajv@^5.5.0:
   version "5.5.2"
   resolved "https://registry.yarnpkg.com/ajv/-/ajv-5.5.2.tgz#73b5eeca3fab653e3d3f9422b341ad42205dc965"
   dependencies:
@@ -975,9 +990,11 @@ babel-plugin-check-es2015-constants@^6.22.0:
   dependencies:
     babel-runtime "^6.22.0"
 
-babel-plugin-component@^0.10.1:
-  version "0.10.1"
-  resolved "https://registry.yarnpkg.com/babel-plugin-component/-/babel-plugin-component-0.10.1.tgz#cfac25045e5c6e1353e89f05ff5a675af9712759"
+babel-plugin-component@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-component/-/babel-plugin-component-1.1.0.tgz#74fa3446814bca990f52bcad6700465361b011b7"
+  dependencies:
+    "@babel/helper-module-imports" "7.0.0-beta.35"
 
 babel-plugin-dynamic-import-node@1.1.0:
   version "1.1.0"
@@ -2745,9 +2762,9 @@ css-color-names@0.0.4:
   version "0.0.4"
   resolved "https://registry.yarnpkg.com/css-color-names/-/css-color-names-0.0.4.tgz#808adc2e79cf84738069b646cb20ec27beb629e0"
 
-css-hot-loader@^1.3.2:
-  version "1.3.5"
-  resolved "https://registry.yarnpkg.com/css-hot-loader/-/css-hot-loader-1.3.5.tgz#bc070307cc5f881dbaea12bc54d354133d08a28b"
+css-hot-loader@^1.3.6:
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/css-hot-loader/-/css-hot-loader-1.3.6.tgz#6da65f21ce40920ea2c46a87158c53831b83dcb8"
   dependencies:
     loader-utils "^1.1.0"
     normalize-url "^1.9.1"
@@ -2758,7 +2775,7 @@ css-in-js-utils@^2.0.0:
   dependencies:
     hyphenate-style-name "^1.0.2"
 
-css-loader@^0.28.7, css-loader@^0.28.8:
+css-loader@^0.28.8:
   version "0.28.8"
   resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.8.tgz#ff36381464dea18fe60f2601a060ba6445886bd5"
   dependencies:
@@ -2777,6 +2794,25 @@ css-loader@^0.28.7, css-loader@^0.28.8:
     postcss-value-parser "^3.3.0"
     source-list-map "^2.0.0"
 
+css-loader@^0.28.9:
+  version "0.28.9"
+  resolved "https://registry.yarnpkg.com/css-loader/-/css-loader-0.28.9.tgz#68064b85f4e271d7ce4c48a58300928e535d1c95"
+  dependencies:
+    babel-code-frame "^6.26.0"
+    css-selector-tokenizer "^0.7.0"
+    cssnano "^3.10.0"
+    icss-utils "^2.1.0"
+    loader-utils "^1.0.2"
+    lodash.camelcase "^4.3.0"
+    object-assign "^4.1.1"
+    postcss "^5.0.6"
+    postcss-modules-extract-imports "^1.2.0"
+    postcss-modules-local-by-default "^1.2.0"
+    postcss-modules-scope "^1.1.0"
+    postcss-modules-values "^1.3.0"
+    postcss-value-parser "^3.3.0"
+    source-list-map "^2.0.0"
+
 css-select@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/css-select/-/css-select-1.2.0.tgz#2b3a110539c5355f1cd8d314623e870b121ec858"
@@ -3146,9 +3182,9 @@ dotenv@^5.0.0:
   version "5.0.0"
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-5.0.0.tgz#0206eb5b336639bf377618a2a304ff00c6a1fddb"
 
-downshift@^1.26.1:
-  version "1.26.1"
-  resolved "https://registry.yarnpkg.com/downshift/-/downshift-1.26.1.tgz#ae45a016f211d02f8000584d0b466142fde2dd6b"
+downshift@^1.27.0:
+  version "1.27.0"
+  resolved "https://registry.yarnpkg.com/downshift/-/downshift-1.27.0.tgz#e04987a6ee37c99772e76febad0955f874dd0696"
 
 duplexer3@^0.1.4:
   version "0.1.4"
@@ -3184,9 +3220,9 @@ ejs@^2.5.7:
   version "2.5.7"
   resolved "https://registry.yarnpkg.com/ejs/-/ejs-2.5.7.tgz#cc872c168880ae3c7189762fd5ffc00896c9518a"
 
-electron-builder-lib@19.55.2:
-  version "19.55.2"
-  resolved "https://registry.yarnpkg.com/electron-builder-lib/-/electron-builder-lib-19.55.2.tgz#9808495613cd947a0d1abf83b962c16da6402f9c"
+electron-builder-lib@19.55.3:
+  version "19.55.3"
+  resolved "https://registry.yarnpkg.com/electron-builder-lib/-/electron-builder-lib-19.55.3.tgz#06fd10374c3c2315eade512c408f857baa5921e5"
   dependencies:
     "7zip-bin" "^2.4.1"
     asar-integrity "0.2.4"
@@ -3214,15 +3250,15 @@ electron-builder-lib@19.55.2:
     semver "^5.5.0"
     temp-file "^3.1.1"
 
-electron-builder@^19.55.2:
-  version "19.55.2"
-  resolved "https://registry.yarnpkg.com/electron-builder/-/electron-builder-19.55.2.tgz#af709037a97e85fe55cf87e87255bf96333750a3"
+electron-builder@^19.55.3:
+  version "19.55.3"
+  resolved "https://registry.yarnpkg.com/electron-builder/-/electron-builder-19.55.3.tgz#01d3070af8a2eb97d91e6d029f28104b4bf8a068"
   dependencies:
     bluebird-lst "^1.0.5"
     builder-util "4.2.1"
     builder-util-runtime "4.0.3"
     chalk "^2.3.0"
-    electron-builder-lib "19.55.2"
+    electron-builder-lib "19.55.3"
     electron-download-tf "4.3.4"
     fs-extra-p "^4.5.0"
     is-ci "^1.1.0"
@@ -3230,9 +3266,9 @@ electron-builder@^19.55.2:
     read-config-file "2.1.1"
     sanitize-filename "^1.6.1"
     update-notifier "^2.3.0"
-    yargs "^10.1.1"
+    yargs "^11.0.0"
 
-electron-devtools-installer@^2.2.1, electron-devtools-installer@^2.2.3:
+electron-devtools-installer@^2.2.3:
   version "2.2.3"
   resolved "https://registry.yarnpkg.com/electron-devtools-installer/-/electron-devtools-installer-2.2.3.tgz#58b9a4ec507377bc46e091cd43714188e0c369be"
   dependencies:
@@ -3325,51 +3361,51 @@ electron-updater@^2.20.1:
     semver "^5.5.0"
     source-map-support "^0.5.2"
 
-electron-webpack-js@~1.1.0:
-  version "1.1.0"
-  resolved "https://registry.yarnpkg.com/electron-webpack-js/-/electron-webpack-js-1.1.0.tgz#c7c1cf375f6d32638ba62f46e1bd31445b7f1018"
+electron-webpack-js@~1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/electron-webpack-js/-/electron-webpack-js-1.2.0.tgz#0d53038ba36dd9802df30647570957ec4347fe20"
   dependencies:
     babel-core "^6.26.0"
     babel-loader "^7.1.2"
-    babel-plugin-component "^0.10.1"
+    babel-plugin-component "^1.1.0"
     babel-plugin-syntax-dynamic-import "^6.18.0"
     babel-preset-env "^1.6.1"
 
-electron-webpack@1.11.0:
-  version "1.11.0"
-  resolved "https://registry.yarnpkg.com/electron-webpack/-/electron-webpack-1.11.0.tgz#51cbdc1a6ba1e73af8504fba135996eb1f28ca52"
+electron-webpack@1.12.1:
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/electron-webpack/-/electron-webpack-1.12.1.tgz#34e424b9d2c5ccc9adac3019173f6899d89f4498"
   dependencies:
-    "@types/webpack-env" "^1.13.2"
+    "@types/webpack-env" "^1.13.4"
     async-exit-hook "^2.0.1"
     babel-minify-webpack-plugin "^0.2.0"
     bluebird-lst "^1.0.5"
     chalk "^2.3.0"
     crocket "^0.9.11"
-    css-hot-loader "^1.3.2"
-    css-loader "^0.28.7"
+    css-hot-loader "^1.3.6"
+    css-loader "^0.28.9"
     debug "^3.1.0"
-    electron-devtools-installer "^2.2.1"
-    electron-webpack-js "~1.1.0"
+    electron-devtools-installer "^2.2.3"
+    electron-webpack-js "~1.2.0"
     extract-text-webpack-plugin "^3.0.2"
-    file-loader "^1.1.5"
-    fs-extra-p "^4.4.4"
-    html-loader "^0.5.1"
+    file-loader "^1.1.6"
+    fs-extra-p "^4.5.0"
+    html-loader "^0.5.5"
     html-webpack-plugin "^2.30.1"
-    lazy-val "^1.0.2"
+    lazy-val "^1.0.3"
     node-loader "^0.6.0"
-    read-config-file "^1.2.0"
-    semver "^5.4.1"
-    source-map-support "^0.5.0"
-    style-loader "^0.19.0"
+    read-config-file "^2.1.1"
+    semver "^5.5.0"
+    source-map-support "^0.5.3"
+    style-loader "^0.20.1"
     url-loader "^0.6.2"
     virtual-module-webpack-plugin "^0.3.0"
-    webpack-dev-server "^2.9.3"
-    webpack-merge "^4.1.0"
-    yargs "^10.0.3"
+    webpack-dev-server "^2.11.1"
+    webpack-merge "^4.1.1"
+    yargs "^11.0.0"
 
-electron@1.7.11:
-  version "1.7.11"
-  resolved "https://registry.yarnpkg.com/electron/-/electron-1.7.11.tgz#993b6aa79e0e79a7cfcc369f4c813fbd9a0b08d9"
+electron@1.7.12:
+  version "1.7.12"
+  resolved "https://registry.yarnpkg.com/electron/-/electron-1.7.12.tgz#dcc61a2c1b0c3df25f68b3425379a01abd01190e"
   dependencies:
     "@types/node" "^7.0.18"
     electron-download "^3.0.1"
@@ -3995,7 +4031,7 @@ file-entry-cache@^2.0.0:
     flat-cache "^1.2.1"
     object-assign "^4.0.1"
 
-file-loader@^1.1.5, file-loader@^1.1.6:
+file-loader@^1.1.6:
   version "1.1.6"
   resolved "https://registry.yarnpkg.com/file-loader/-/file-loader-1.1.6.tgz#7b9a8f2c58f00a77fddf49e940f7ac978a3ea0e8"
   dependencies:
@@ -4174,7 +4210,7 @@ from2@^2.1.0:
     inherits "^2.0.1"
     readable-stream "^2.0.0"
 
-fs-extra-p@^4.4.4, fs-extra-p@^4.5.0:
+fs-extra-p@^4.5.0:
   version "4.5.0"
   resolved "https://registry.yarnpkg.com/fs-extra-p/-/fs-extra-p-4.5.0.tgz#b79f3f3fcc0b5e57b7e7caeb06159f958ef15fe8"
   dependencies:
@@ -4671,7 +4707,7 @@ html-entities@^1.2.0:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-1.2.1.tgz#0df29351f0721163515dfb9e5543e5f6eed5162f"
 
-html-loader@^0.5.1, html-loader@^0.5.4:
+html-loader@^0.5.4:
   version "0.5.4"
   resolved "https://registry.yarnpkg.com/html-loader/-/html-loader-0.5.4.tgz#70f36e30a923cc52536fdc812cec6f556aeb47a4"
   dependencies:
@@ -4681,6 +4717,16 @@ html-loader@^0.5.1, html-loader@^0.5.4:
     loader-utils "^1.1.0"
     object-assign "^4.1.1"
 
+html-loader@^0.5.5:
+  version "0.5.5"
+  resolved "https://registry.yarnpkg.com/html-loader/-/html-loader-0.5.5.tgz#6356dbeb0c49756d8ebd5ca327f16ff06ab5faea"
+  dependencies:
+    es6-templates "^0.2.3"
+    fastparse "^1.1.1"
+    html-minifier "^3.5.8"
+    loader-utils "^1.1.0"
+    object-assign "^4.1.1"
+
 html-minifier@^3.2.3, html-minifier@^3.5.8:
   version "3.5.8"
   resolved "https://registry.yarnpkg.com/html-minifier/-/html-minifier-3.5.8.tgz#5ccdb1f73a0d654e6090147511f6e6b2ee312700"
@@ -5409,9 +5455,9 @@ jsprim@^1.2.2:
     json-schema "0.2.3"
     verror "1.10.0"
 
-"jsqr@git+https://github.com/cozmo/jsQR.git":
+"jsqr@https://github.com/cozmo/jsQR.git":
   version "1.0.1"
-  resolved "git+https://github.com/cozmo/jsQR.git#1fb946a235abdc7709f04cd0e4aa316a3b6eae70"
+  resolved "https://github.com/cozmo/jsQR.git#1fb946a235abdc7709f04cd0e4aa316a3b6eae70"
 
 jsx-ast-utils@^2.0.0, jsx-ast-utils@^2.0.1:
   version "2.0.1"
@@ -5469,7 +5515,7 @@ lazy-cache@^2.0.2:
   dependencies:
     set-getter "^0.1.0"
 
-lazy-val@^1.0.2, lazy-val@^1.0.3:
+lazy-val@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/lazy-val/-/lazy-val-1.0.3.tgz#bb97b200ef00801d94c317e29dc6ed39e31c5edc"
 
@@ -6859,6 +6905,12 @@ postcss-modules-extract-imports@^1.1.0:
   dependencies:
     postcss "^6.0.1"
 
+postcss-modules-extract-imports@^1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/postcss-modules-extract-imports/-/postcss-modules-extract-imports-1.2.0.tgz#66140ecece38ef06bf0d3e355d69bf59d141ea85"
+  dependencies:
+    postcss "^6.0.1"
+
 postcss-modules-local-by-default@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/postcss-modules-local-by-default/-/postcss-modules-local-by-default-1.2.0.tgz#f7d80c398c5a393fa7964466bd19500a7d61c069"
@@ -7523,7 +7575,7 @@ reactcss@^1.2.0:
   dependencies:
     lodash "^4.0.1"
 
-read-config-file@2.1.1:
+read-config-file@2.1.1, read-config-file@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/read-config-file/-/read-config-file-2.1.1.tgz#bd6c2b93e97a82a35f71a3c9eb43161e16692054"
   dependencies:
@@ -7537,20 +7589,6 @@ read-config-file@2.1.1:
     json5 "^0.5.1"
     lazy-val "^1.0.3"
 
-read-config-file@^1.2.0:
-  version "1.2.2"
-  resolved "https://registry.yarnpkg.com/read-config-file/-/read-config-file-1.2.2.tgz#15855eaebc7e0b04d70d7c3da6bd7d45c89748f9"
-  dependencies:
-    ajv "^5.5.2"
-    ajv-keywords "^2.1.1"
-    bluebird-lst "^1.0.5"
-    dotenv "^4.0.0"
-    dotenv-expand "^4.0.1"
-    fs-extra-p "^4.5.0"
-    js-yaml "^3.10.0"
-    json5 "^0.5.1"
-    lazy-val "^1.0.3"
-
 read-pkg-up@^1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/read-pkg-up/-/read-pkg-up-1.0.1.tgz#9d63c13276c065918d57f002a57f40a1b643fb02"
@@ -7999,7 +8037,7 @@ schema-utils@^0.3.0:
   dependencies:
     ajv "^5.0.0"
 
-schema-utils@^0.4.2:
+schema-utils@^0.4.2, schema-utils@^0.4.3:
   version "0.4.3"
   resolved "https://registry.yarnpkg.com/schema-utils/-/schema-utils-0.4.3.tgz#e2a594d3395834d5e15da22b48be13517859458e"
   dependencies:
@@ -8301,7 +8339,7 @@ source-map-support@^0.4.15:
   dependencies:
     source-map "^0.5.6"
 
-source-map-support@^0.5.0, source-map-support@^0.5.1:
+source-map-support@^0.5.1:
   version "0.5.1"
   resolved "https://registry.yarnpkg.com/source-map-support/-/source-map-support-0.5.1.tgz#72291517d1fd0cb9542cee6c27520884b5da1a07"
   dependencies:
@@ -8570,16 +8608,23 @@ strip-json-comments@~2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-2.0.1.tgz#3c531942e908c2697c0ec344858c286c7ca0a60a"
 
-style-loader@^0.19.0, style-loader@^0.19.1:
+style-loader@^0.19.1:
   version "0.19.1"
   resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.19.1.tgz#591ffc80bcefe268b77c5d9ebc0505d772619f85"
   dependencies:
     loader-utils "^1.0.2"
     schema-utils "^0.3.0"
 
-styled-components@^3.1.4:
-  version "3.1.4"
-  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-3.1.4.tgz#1bdc1409c9bacafee3510c573d23b73039b0d875"
+style-loader@^0.20.1:
+  version "0.20.1"
+  resolved "https://registry.yarnpkg.com/style-loader/-/style-loader-0.20.1.tgz#33ac2bf4d5c65a8906bc586ad253334c246998d0"
+  dependencies:
+    loader-utils "^1.1.0"
+    schema-utils "^0.4.3"
+
+styled-components@^3.1.5:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-3.1.5.tgz#7aaf0a97f8c5cd49791e924887f9d8f428fb010c"
   dependencies:
     buffer "^5.0.3"
     css-to-react-native "^2.0.3"
@@ -9223,9 +9268,9 @@ webpack-dev-middleware@1.12.2, webpack-dev-middleware@^1.12.2:
     range-parser "^1.0.3"
     time-stamp "^2.0.0"
 
-webpack-dev-server@^2.9.3:
-  version "2.11.0"
-  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-2.11.0.tgz#e9d4830ab7eb16c6f92ed68b92f6089027960e1b"
+webpack-dev-server@^2.11.1:
+  version "2.11.1"
+  resolved "https://registry.yarnpkg.com/webpack-dev-server/-/webpack-dev-server-2.11.1.tgz#6f9358a002db8403f016e336816f4485384e5ec0"
   dependencies:
     ansi-html "0.0.7"
     array-includes "^3.0.3"
@@ -9250,7 +9295,7 @@ webpack-dev-server@^2.9.3:
     sockjs "0.3.19"
     sockjs-client "1.1.4"
     spdy "^3.4.1"
-    strip-ansi "^4.0.0"
+    strip-ansi "^3.0.0"
     supports-color "^5.1.0"
     webpack-dev-middleware "1.12.2"
     yargs "6.6.0"
@@ -9264,7 +9309,7 @@ webpack-hot-middleware@^2.21.0:
     querystring "^0.2.0"
     strip-ansi "^3.0.0"
 
-webpack-merge@^4.1.0:
+webpack-merge@^4.1.1:
   version "4.1.1"
   resolved "https://registry.yarnpkg.com/webpack-merge/-/webpack-merge-4.1.1.tgz#f1197a0a973e69c6fbeeb6d658219aa8c0c13555"
   dependencies:
@@ -9471,9 +9516,9 @@ yargs-parser@^7.0.0:
   dependencies:
     camelcase "^4.1.0"
 
-yargs-parser@^8.1.0:
-  version "8.1.0"
-  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-8.1.0.tgz#f1376a33b6629a5d063782944da732631e966950"
+yargs-parser@^9.0.2:
+  version "9.0.2"
+  resolved "https://registry.yarnpkg.com/yargs-parser/-/yargs-parser-9.0.2.tgz#9ccf6a43460fe4ed40a9bb68f48d43b8a68cc077"
   dependencies:
     camelcase "^4.1.0"
 
@@ -9495,9 +9540,9 @@ yargs@6.6.0:
     y18n "^3.2.1"
     yargs-parser "^4.2.0"
 
-yargs@^10.0.3, yargs@^10.1.1:
-  version "10.1.1"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-10.1.1.tgz#5fe1ea306985a099b33492001fa19a1e61efe285"
+yargs@^11.0.0:
+  version "11.0.0"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-11.0.0.tgz#c052931006c5eee74610e5fc0354bedfd08a201b"
   dependencies:
     cliui "^4.0.0"
     decamelize "^1.1.1"
@@ -9510,7 +9555,7 @@ yargs@^10.0.3, yargs@^10.1.1:
     string-width "^2.0.0"
     which-module "^2.0.0"
     y18n "^3.2.1"
-    yargs-parser "^8.1.0"
+    yargs-parser "^9.0.2"
 
 yargs@^4.2.0:
   version "4.8.1"

From 89c3c98dacb1631e84196aa08e90ce51d9d98304 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=ABck=20V=C3=A9zien?= <nainpuissant@gmail.com>
Date: Thu, 1 Feb 2018 12:02:25 +0100
Subject: [PATCH 3/5] Try simple animation on Breadcrumb

---
 src/components/Breadcrumb/index.js   | 87 ++++++++++++++++++++++++++++
 src/components/Breadcrumb/stories.js | 21 +++++++
 src/components/modals/Send.js        | 72 +----------------------
 3 files changed, 109 insertions(+), 71 deletions(-)
 create mode 100644 src/components/Breadcrumb/index.js
 create mode 100644 src/components/Breadcrumb/stories.js

diff --git a/src/components/Breadcrumb/index.js b/src/components/Breadcrumb/index.js
new file mode 100644
index 00000000..60a446f3
--- /dev/null
+++ b/src/components/Breadcrumb/index.js
@@ -0,0 +1,87 @@
+// @flow
+
+import React from 'react'
+import styled from 'styled-components'
+
+import Box from 'components/base/Box'
+
+const BreadcrumbWrapper = styled(Box).attrs({
+  horizontal: true,
+  align: 'center',
+  flow: 20,
+  relative: true,
+})``
+const BreadcrumbStep = styled(({ start, active, end, ...props }) => (
+  <Box start={start} end={end} active={active} {...props} />
+)).attrs({
+  color: p => (p.active ? 'blue' : 'mouse'),
+  align: 'center',
+  flow: 5,
+  grow: p => !p.start && !p.end,
+  ml: p => p.end && 20,
+  mr: p => p.start && 20,
+  relative: true,
+})`
+  &:before,
+  &:after {
+    content: ' ';
+    display: ${p => (p.start ? 'none' : 'block')};
+    height: 2px;
+    position: absolute;
+    left: -120px;
+    background: ${p => p.theme.colors.pearl};
+    margin-top: 8px;
+    width: 200px;
+  }
+
+  &:after {
+    background: ${p => p.theme.colors.blue};
+    width: ${p => (p.active ? 200 : 0)}px;
+    transition: width ease-in-out 0.4s;
+  }
+`
+const BreadcrumbNumberWrapper = styled(Box).attrs({
+  bg: 'white',
+  px: 3,
+  relative: true,
+})`
+  z-index: 1;
+`
+const BreadcrumbNumber = styled(Box).attrs({
+  color: p => (p.active ? 'white' : 'mouse'),
+  bg: p => (p.active ? 'blue' : 'pearl'),
+  align: 'center',
+  justify: 'center',
+})`
+  border-radius: 50%;
+  box-shadow: ${p => `0 0 0 ${p.active ? 4 : 0}px ${p.theme.colors.cream}`};
+  font-size: 9px;
+  height: 20px;
+  width: 20px;
+  transition: all ease-in-out 0.1s;
+`
+
+const Breadcrumb = ({ items, currentStep }: Object) => (
+  <BreadcrumbWrapper>
+    {items.map((item, i) => {
+      const active = i < currentStep
+      const start = i === 0
+      const end = i + 1 === items.length
+      return (
+        <BreadcrumbStep
+          key={i} // eslint-disable-line react/no-array-index-key
+          start={start}
+          end={end}
+          active={active}
+        >
+          <BreadcrumbNumberWrapper>
+            <BreadcrumbNumber active={active}>{i + 1}</BreadcrumbNumber>
+          </BreadcrumbNumberWrapper>
+          <Box fontSize={0}>{item.label}</Box>
+        </BreadcrumbStep>
+      )
+    })}
+  </BreadcrumbWrapper>
+)
+
+export default Breadcrumb
diff --git a/src/components/Breadcrumb/stories.js b/src/components/Breadcrumb/stories.js
new file mode 100644
index 00000000..78c92c48
--- /dev/null
+++ b/src/components/Breadcrumb/stories.js
@@ -0,0 +1,21 @@
+// @flow
+
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import { number } from '@storybook/addon-knobs'
+
+import Breadcrumb from 'components/Breadcrumb'
+
+const stories = storiesOf('Breadcrumb', module)
+
+stories.add('basic', () => (
+  <Breadcrumb
+    currentStep={number('currentStep', 1)}
+    items={[
+      { label: 'Amount' },
+      { label: 'Summary' },
+      { label: 'Secure validation' },
+      { label: 'Confirmation' },
+    ]}
+  />
+))
diff --git a/src/components/modals/Send.js b/src/components/modals/Send.js
index 36f77de3..43292995 100644
--- a/src/components/modals/Send.js
+++ b/src/components/modals/Send.js
@@ -2,7 +2,6 @@
 
 import React, { Fragment, PureComponent } from 'react'
 import { translate } from 'react-i18next'
-import styled from 'styled-components'
 import get from 'lodash/get'
 
 import type { T } from 'types/common'
@@ -14,57 +13,11 @@ import Button from 'components/base/Button'
 import Input from 'components/base/Input'
 import Label from 'components/base/Label'
 import Modal, { ModalBody } from 'components/base/Modal'
+import Breadcrumb from 'components/Breadcrumb'
 import RecipientAddress from 'components/RecipientAddress'
 import SelectAccount from 'components/SelectAccount'
 import Text from 'components/base/Text'
 
-const BreadcrumbWrapper = styled(Box).attrs({
-  horizontal: true,
-  align: 'center',
-  flow: 20,
-  relative: true,
-})``
-const BreadcrumbStep = styled(({ start, active, end, ...props }) => (
-  <Box start={start} end={end} active={active} {...props} />
-)).attrs({
-  color: p => (p.active ? 'blue' : 'mouse'),
-  align: 'center',
-  flow: 5,
-  grow: p => !p.start && !p.end,
-  ml: p => p.end && 20,
-  mr: p => p.start && 20,
-})`
-  &:before {
-    content: ' ';
-    display: block;
-    height: 2px;
-    position: absolute;
-    left: 20px;
-    right: 20px;
-    background: ${p => p.theme.colors.pearl};
-    margin-top: 8px;
-  }
-`
-const BreadcrumbNumberWrapper = styled(Box).attrs({
-  bg: 'white',
-  px: 3,
-  relative: true,
-})`
-  z-index: 1;
-`
-const BreadcrumbNumber = styled(Box).attrs({
-  color: p => (p.active ? 'white' : 'mouse'),
-  bg: p => (p.active ? 'blue' : 'pearl'),
-  align: 'center',
-  justify: 'center',
-})`
-  border-radius: 50%;
-  box-shadow: ${p => p.active && `0 0 0 4px ${p.theme.colors.cream}`};
-  font-size: 9px;
-  height: 20px;
-  width: 20px;
-`
-
 const Steps = {
   '1': ({ t, ...props }: Object) => (
     <form
@@ -224,27 +177,4 @@ class Send extends PureComponent<Props, State> {
   }
 }
 
-const Breadcrumb = ({ items, currentStep }: Object) => (
-  <BreadcrumbWrapper>
-    {items.map((item, i) => {
-      const active = i < currentStep
-      const start = i === 0
-      const end = i + 1 === items.length
-      return (
-        <BreadcrumbStep
-          key={i} // eslint-disable-line react/no-array-index-key
-          start={start}
-          end={end}
-          active={active}
-        >
-          <BreadcrumbNumberWrapper>
-            <BreadcrumbNumber active={active}>{i + 1}</BreadcrumbNumber>
-          </BreadcrumbNumberWrapper>
-          <Box fontSize={0}>{item.label}</Box>
-        </BreadcrumbStep>
-      )
-    })}
-  </BreadcrumbWrapper>
-)
-
 export default translate()(Send)

From 5dffc1fded7cf996ac82c1a1616cb466d63e3d20 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=ABck=20V=C3=A9zien?= <nainpuissant@gmail.com>
Date: Thu, 1 Feb 2018 14:09:03 +0100
Subject: [PATCH 4/5] Improved Breadcrumb component

---
 src/components/Breadcrumb/index.js | 58 +++++++++++++++++-------------
 1 file changed, 33 insertions(+), 25 deletions(-)

diff --git a/src/components/Breadcrumb/index.js b/src/components/Breadcrumb/index.js
index 60a446f3..794f3dbe 100644
--- a/src/components/Breadcrumb/index.js
+++ b/src/components/Breadcrumb/index.js
@@ -1,6 +1,6 @@
 // @flow
 
-import React from 'react'
+import React, { Fragment } from 'react'
 import styled from 'styled-components'
 
 import Box from 'components/base/Box'
@@ -8,7 +8,6 @@ import Box from 'components/base/Box'
 const BreadcrumbWrapper = styled(Box).attrs({
   horizontal: true,
   align: 'center',
-  flow: 20,
   relative: true,
 })``
 const BreadcrumbStep = styled(({ start, active, end, ...props }) => (
@@ -17,29 +16,34 @@ const BreadcrumbStep = styled(({ start, active, end, ...props }) => (
   color: p => (p.active ? 'blue' : 'mouse'),
   align: 'center',
   flow: 5,
-  grow: p => !p.start && !p.end,
-  ml: p => p.end && 20,
-  mr: p => p.start && 20,
+  relative: true,
+})`
+  transition: color ease-in-out 0.1s ${p => (p.active ? 0.4 : 0)}s;
+`
+
+const BreadcrumbSeparator = styled(Box).attrs({
+  grow: true,
   relative: true,
 })`
   &:before,
   &:after {
+    background: ${p => p.theme.colors.pearl};
     content: ' ';
-    display: ${p => (p.start ? 'none' : 'block')};
+    display: block;
     height: 2px;
+    left: -20px;
     position: absolute;
-    left: -120px;
-    background: ${p => p.theme.colors.pearl};
-    margin-top: 8px;
-    width: 200px;
+    right: -20px;
+    top: -13px;
   }
 
   &:after {
     background: ${p => p.theme.colors.blue};
-    width: ${p => (p.active ? 200 : 0)}px;
-    transition: width ease-in-out 0.4s;
+    right: ${p => (p.active ? '-20px' : 'calc(100% + 20px)')};
+    transition: right ease-in-out 0.4s;
   }
 `
+
 const BreadcrumbNumberWrapper = styled(Box).attrs({
   bg: 'white',
   px: 3,
@@ -58,27 +62,31 @@ const BreadcrumbNumber = styled(Box).attrs({
   font-size: 9px;
   height: 20px;
   width: 20px;
-  transition: all ease-in-out 0.1s;
+  transition: all ease-in-out 0.1s ${p => (p.active ? 0.4 : 0)}s;
 `
 
-const Breadcrumb = ({ items, currentStep }: Object) => (
+type Props = {
+  items: Array<Object>,
+  currentStep: number | string,
+}
+
+const Breadcrumb = ({ items, currentStep }: Props) => (
   <BreadcrumbWrapper>
     {items.map((item, i) => {
-      const active = i < currentStep
+      const active = i < parseInt(currentStep, 10)
       const start = i === 0
-      const end = i + 1 === items.length
       return (
-        <BreadcrumbStep
+        <Fragment
           key={i} // eslint-disable-line react/no-array-index-key
-          start={start}
-          end={end}
-          active={active}
         >
-          <BreadcrumbNumberWrapper>
-            <BreadcrumbNumber active={active}>{i + 1}</BreadcrumbNumber>
-          </BreadcrumbNumberWrapper>
-          <Box fontSize={0}>{item.label}</Box>
-        </BreadcrumbStep>
+          {!start && <BreadcrumbSeparator active={active} />}
+          <BreadcrumbStep active={active}>
+            <BreadcrumbNumberWrapper>
+              <BreadcrumbNumber active={active}>{i + 1}</BreadcrumbNumber>
+            </BreadcrumbNumberWrapper>
+            <Box fontSize={0}>{item.label}</Box>
+          </BreadcrumbStep>
+        </Fragment>
       )
     })}
   </BreadcrumbWrapper>

From f8fb002e96ff15d7387e3293436b774f693c5fa1 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=ABck=20V=C3=A9zien?= <nainpuissant@gmail.com>
Date: Thu, 1 Feb 2018 14:21:52 +0100
Subject: [PATCH 5/5] Clean stories

---
 src/components/Breadcrumb/stories.js | 5 ++++-
 src/components/base/Tabs/stories.js  | 5 ++++-
 2 files changed, 8 insertions(+), 2 deletions(-)

diff --git a/src/components/Breadcrumb/stories.js b/src/components/Breadcrumb/stories.js
index 78c92c48..9ff78dcf 100644
--- a/src/components/Breadcrumb/stories.js
+++ b/src/components/Breadcrumb/stories.js
@@ -10,7 +10,10 @@ const stories = storiesOf('Breadcrumb', module)
 
 stories.add('basic', () => (
   <Breadcrumb
-    currentStep={number('currentStep', 1)}
+    currentStep={number('currentStep', 1, {
+      min: 1,
+      max: 4,
+    })}
     items={[
       { label: 'Amount' },
       { label: 'Summary' },
diff --git a/src/components/base/Tabs/stories.js b/src/components/base/Tabs/stories.js
index 9479da94..2d91445d 100644
--- a/src/components/base/Tabs/stories.js
+++ b/src/components/base/Tabs/stories.js
@@ -12,7 +12,10 @@ const stories = storiesOf('Tabs', module)
 
 stories.add('basic', () => (
   <Tabs
-    index={number('index', 0)}
+    index={number('index', 0, {
+      min: 0,
+      max: 1,
+    })}
     onTabClick={action('onTabClick')}
     items={[
       {