Browse Source

Add DeviceConfirm component

master
Loëck Vézien 7 years ago
parent
commit
bb6c72e7f8
No known key found for this signature in database GPG Key ID: CBCDCE384E853AC4
  1. 20
      package.json
  2. 42
      src/components/DeviceConfirm/index.js
  3. 4
      src/components/DeviceConfirm/stories.js
  4. 118
      yarn.lock

20
package.json

@ -49,7 +49,7 @@
"@ledgerhq/hw-app-eth": "^4.7.3", "@ledgerhq/hw-app-eth": "^4.7.3",
"@ledgerhq/hw-transport": "^4.7.3", "@ledgerhq/hw-transport": "^4.7.3",
"@ledgerhq/hw-transport-node-hid": "^4.7.6", "@ledgerhq/hw-transport-node-hid": "^4.7.6",
"@ledgerhq/wallet-common": "^0.12.0", "@ledgerhq/wallet-common": "^0.13.0",
"axios": "^0.18.0", "axios": "^0.18.0",
"bcryptjs": "^2.4.3", "bcryptjs": "^2.4.3",
"bitcoinjs-lib": "^3.3.2", "bitcoinjs-lib": "^3.3.2",
@ -58,12 +58,12 @@
"cross-env": "^5.1.4", "cross-env": "^5.1.4",
"d3": "^5.0.0", "d3": "^5.0.0",
"debug": "^3.1.0", "debug": "^3.1.0",
"downshift": "^1.31.2", "downshift": "^1.31.4",
"electron-store": "^1.3.0", "electron-store": "^1.3.0",
"electron-updater": "^2.21.4", "electron-updater": "^2.21.4",
"fuse.js": "^3.2.0", "fuse.js": "^3.2.0",
"history": "^4.7.2", "history": "^4.7.2",
"i18next": "^10.6.0", "i18next": "^11.1.1",
"i18next-node-fs-backend": "^1.0.0", "i18next-node-fs-backend": "^1.0.0",
"ledger-test-library": "KhalilBellakrid/ledger-test-library-nodejs#7d37482", "ledger-test-library": "KhalilBellakrid/ledger-test-library-nodejs#7d37482",
"lodash": "^4.17.5", "lodash": "^4.17.5",
@ -73,8 +73,8 @@
"query-string": "^6.0.0", "query-string": "^6.0.0",
"raven": "^2.4.2", "raven": "^2.4.2",
"raven-js": "^3.24.0", "raven-js": "^3.24.0",
"react": "^16.3.0", "react": "^16.3.1",
"react-dom": "^16.3.0", "react-dom": "^16.3.1",
"react-i18next": "^7.5.1", "react-i18next": "^7.5.1",
"react-mortal": "^3.2.0", "react-mortal": "^3.2.0",
"react-motion": "^0.5.2", "react-motion": "^0.5.2",
@ -92,7 +92,7 @@
"source-map-support": "^0.5.4", "source-map-support": "^0.5.4",
"styled-components": "^3.2.5", "styled-components": "^3.2.5",
"styled-system": "^2.2.1", "styled-system": "^2.2.1",
"tippy.js": "^2.4.1", "tippy.js": "^2.5.0",
"ws": "^5.1.1" "ws": "^5.1.1"
}, },
"devDependencies": { "devDependencies": {
@ -137,14 +137,14 @@
"husky": "^0.14.3", "husky": "^0.14.3",
"jest": "^22.4.3", "jest": "^22.4.3",
"js-yaml": "^3.10.0", "js-yaml": "^3.10.0",
"lint-staged": "^7.0.2", "lint-staged": "^7.0.4",
"node-loader": "^0.6.0", "node-loader": "^0.6.0",
"prettier": "^1.11.1", "prettier": "^1.11.1",
"react-hot-loader": "^4.0.1", "react-hot-loader": "^4.0.1",
"react-test-renderer": "^16.3.0", "react-test-renderer": "^16.3.1",
"webpack": "^4.4.1", "webpack": "^4.5.0",
"webpack-bundle-analyzer": "^2.11.1", "webpack-bundle-analyzer": "^2.11.1",
"webpack-cli": "^2.0.13", "webpack-cli": "^2.0.14",
"yaml-loader": "^0.5.0" "yaml-loader": "^0.5.0"
} }
} }

42
src/components/DeviceConfirmAddr/index.js → src/components/DeviceConfirm/index.js

@ -1,7 +1,7 @@
// @flow // @flow
import React from 'react' import React from 'react'
import styled from 'styled-components' import styled, { keyframes } from 'styled-components'
import { rgba } from 'styles/helpers' import { rgba } from 'styles/helpers'
@ -10,18 +10,31 @@ import Box from 'components/base/Box'
import IconCheck from 'icons/Check' import IconCheck from 'icons/Check'
import IconCross from 'icons/Cross' import IconCross from 'icons/Cross'
const pulseAnimation = p => keyframes`
0% {
box-shadow: 0 0 0 1px ${rgba(p.theme.colors.wallet, 0.4)};
}
70% {
box-shadow: 0 0 0 8px ${rgba(p.theme.colors.wallet, 0)};
}
100% {
box-shadow: 0 0 0 0 ${rgba(p.theme.colors.wallet, 0)};
}
`
const Wrapper = styled(Box).attrs({ const Wrapper = styled(Box).attrs({
color: p => (p.notValid ? 'alertRed' : 'wallet'), color: p => (p.notValid ? 'alertRed' : 'wallet'),
relative: true, relative: true,
})` })`
padding-top: 40px;
transition: all ease-in-out 0.1s; transition: all ease-in-out 0.1s;
` `
const WrapperIcon = styled(Box)` const WrapperIcon = styled(Box)`
color: ${p => (p.notValid ? p.theme.colors.alertRed : p.theme.colors.positiveGreen)}; color: ${p => (p.notValid ? p.theme.colors.alertRed : p.theme.colors.positiveGreen)};
position: absolute; position: absolute;
left: 195px; left: 193px;
top: 18px; bottom: 16px;
svg { svg {
transition: all ease-in-out 0.1s; transition: all ease-in-out 0.1s;
@ -30,15 +43,16 @@ const WrapperIcon = styled(Box)`
const Check = ({ notValid }: { notValid: boolean }) => ( const Check = ({ notValid }: { notValid: boolean }) => (
<WrapperIcon notValid={notValid}> <WrapperIcon notValid={notValid}>
{notValid ? <IconCross size={10} /> : <IconCheck size={10} />} {notValid ? <IconCross size={11} /> : <IconCheck size={11} />}
</WrapperIcon> </WrapperIcon>
) )
const PushButton = styled(Box)` const PushButton = styled(Box)`
background: linear-gradient(to bottom, #ffffff, ${p => p.theme.colors.wallet}); background: linear-gradient(to bottom, #ffffff, ${p => p.theme.colors.wallet});
height: 35px; bottom: 53px;
height: 28px;
left: 205px;
position: absolute; position: absolute;
padding-right: 1px;
width: 1px; width: 1px;
&:before, &:before,
@ -52,21 +66,21 @@ const PushButton = styled(Box)`
} }
&:before { &:before {
animation: ${p => pulseAnimation(p)} 1s linear infinite;
background-color: ${p => p.theme.colors.wallet}; background-color: ${p => p.theme.colors.wallet};
height: 8px; height: 9px;
margin-left: -4px;
width: 8px;
margin-bottom: -4px; margin-bottom: -4px;
margin-left: -5px;
width: 9px;
z-index: 1; z-index: 1;
} }
&:after { &:after {
background-color: ${p => rgba(p.theme.colors.wallet, 0.4)}; background-color: ${p => rgba(p.theme.colors.wallet, 0.4)};
box-shadow: 0 0 0 1px ${p => rgba(p.theme.colors.wallet, 0.6)}; height: 15px;
height: 14px;
margin-left: -7px;
margin-bottom: -7px; margin-bottom: -7px;
width: 14px; margin-left: -8px;
width: 15px;
} }
` `
@ -76,7 +90,7 @@ type Props = {
export default (props: Props) => ( export default (props: Props) => (
<Wrapper {...props}> <Wrapper {...props}>
<PushButton /> {!props.notValid && <PushButton />}
<Check notValid={props.notValid} /> <Check notValid={props.notValid} />
<svg width="365" height="44"> <svg width="365" height="44">
<defs> <defs>

4
src/components/DeviceConfirmAddr/stories.js → src/components/DeviceConfirm/stories.js

@ -4,8 +4,8 @@ import React from 'react'
import { storiesOf } from '@storybook/react' import { storiesOf } from '@storybook/react'
import { boolean } from '@storybook/addon-knobs' import { boolean } from '@storybook/addon-knobs'
import DeviceConfirmAddr from 'components/DeviceConfirmAddr' import DeviceConfirm from 'components/DeviceConfirm'
const stories = storiesOf('Components', module) const stories = storiesOf('Components', module)
stories.add('DeviceConfirmAddr', () => <DeviceConfirmAddr notValid={boolean('notValid', false)} />) stories.add('DeviceConfirm', () => <DeviceConfirm notValid={boolean('notValid', false)} />)

118
yarn.lock

@ -947,9 +947,9 @@
dependencies: dependencies:
events "^2.0.0" events "^2.0.0"
"@ledgerhq/wallet-common@^0.12.0": "@ledgerhq/wallet-common@^0.13.0":
version "0.12.0" version "0.13.0"
resolved "https://registry.yarnpkg.com/@ledgerhq/wallet-common/-/wallet-common-0.12.0.tgz#50ac697929062772182735e4013266c41a661fe2" resolved "https://registry.yarnpkg.com/@ledgerhq/wallet-common/-/wallet-common-0.13.0.tgz#e35613692f6da6549047becf09ebbdc264d6ff85"
dependencies: dependencies:
"@ledgerhq/currencies" "^4.10.1" "@ledgerhq/currencies" "^4.10.1"
axios "^0.18.0" axios "^0.18.0"
@ -4668,9 +4668,9 @@ dotenv@^5.0.0, dotenv@^5.0.1:
version "5.0.1" version "5.0.1"
resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-5.0.1.tgz#a5317459bd3d79ab88cff6e44057a6a3fbb1fcef" resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-5.0.1.tgz#a5317459bd3d79ab88cff6e44057a6a3fbb1fcef"
downshift@^1.31.2: downshift@^1.31.4:
version "1.31.2" version "1.31.4"
resolved "https://registry.yarnpkg.com/downshift/-/downshift-1.31.2.tgz#6f638e9720d7540d9dffa0b4c4587cf10811cf8c" resolved "https://registry.yarnpkg.com/downshift/-/downshift-1.31.4.tgz#72ab0b8ac4c5801221ed098f97817c70899c9d16"
duplexer2@~0.1.4: duplexer2@~0.1.4:
version "0.1.4" version "0.1.4"
@ -5035,6 +5035,10 @@ env-paths@^1.0.0:
version "1.0.0" version "1.0.0"
resolved "https://registry.yarnpkg.com/env-paths/-/env-paths-1.0.0.tgz#4168133b42bb05c38a35b1ae4397c8298ab369e0" resolved "https://registry.yarnpkg.com/env-paths/-/env-paths-1.0.0.tgz#4168133b42bb05c38a35b1ae4397c8298ab369e0"
envinfo@^4.4.2:
version "4.4.2"
resolved "https://registry.yarnpkg.com/envinfo/-/envinfo-4.4.2.tgz#472c49f3a8b9bca73962641ce7cb692bf623cd1c"
errno@^0.1.3, errno@~0.1.7: errno@^0.1.3, errno@~0.1.7:
version "0.1.7" version "0.1.7"
resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.7.tgz#4684d71779ad39af177e3f007996f7c67c852618" resolved "https://registry.yarnpkg.com/errno/-/errno-0.1.7.tgz#4684d71779ad39af177e3f007996f7c67c852618"
@ -6708,9 +6712,9 @@ i18next-node-fs-backend@^1.0.0:
js-yaml "3.5.4" js-yaml "3.5.4"
json5 "0.5.0" json5 "0.5.0"
i18next@^10.6.0: i18next@^11.1.1:
version "10.6.0" version "11.1.1"
resolved "https://registry.yarnpkg.com/i18next/-/i18next-10.6.0.tgz#90ffd9f9bc617f34b9a12e037260f524445f7684" resolved "https://registry.yarnpkg.com/i18next/-/i18next-11.1.1.tgz#df3a683542d7756a8aa8d6b884b61141239c394a"
iconv-lite@0.4, iconv-lite@0.4.19, iconv-lite@^0.4.17, iconv-lite@^0.4.19, iconv-lite@~0.4.13: iconv-lite@0.4, iconv-lite@0.4.19, iconv-lite@^0.4.17, iconv-lite@^0.4.19, iconv-lite@~0.4.13:
version "0.4.19" version "0.4.19"
@ -7977,6 +7981,9 @@ ledger-test-library@KhalilBellakrid/ledger-test-library-nodejs#7d37482:
dependencies: dependencies:
axios "^0.17.1" axios "^0.17.1"
bindings "^1.3.0" bindings "^1.3.0"
electron "^1.8.2"
electron-builder "^20.0.4"
electron-rebuild "^1.7.3"
nan "^2.6.2" nan "^2.6.2"
prebuild-install "^2.2.2" prebuild-install "^2.2.2"
@ -7995,9 +8002,9 @@ levn@^0.3.0, levn@~0.3.0:
prelude-ls "~1.1.2" prelude-ls "~1.1.2"
type-check "~0.3.2" type-check "~0.3.2"
lint-staged@^7.0.2: lint-staged@^7.0.4:
version "7.0.2" version "7.0.4"
resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-7.0.2.tgz#c99f6800e0525fa9c16f04c13ebe137edfd4fcd7" resolved "https://registry.yarnpkg.com/lint-staged/-/lint-staged-7.0.4.tgz#1aa7f27427e4c4c85d4d6524ac98aac10cbaf1b8"
dependencies: dependencies:
app-root-path "^2.0.1" app-root-path "^2.0.1"
chalk "^2.3.1" chalk "^2.3.1"
@ -8019,6 +8026,7 @@ lint-staged@^7.0.2:
pify "^3.0.0" pify "^3.0.0"
please-upgrade-node "^3.0.1" please-upgrade-node "^3.0.1"
staged-git-files "1.1.1" staged-git-files "1.1.1"
string-argv "^0.0.2"
stringify-object "^3.2.2" stringify-object "^3.2.2"
listenercount@~1.0.1: listenercount@~1.0.1:
@ -9391,9 +9399,9 @@ pngjs@^3.3.0:
version "3.3.2" version "3.3.2"
resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-3.3.2.tgz#097c3c2a75feb223eadddea6bc9f0050cf830bc3" resolved "https://registry.yarnpkg.com/pngjs/-/pngjs-3.3.2.tgz#097c3c2a75feb223eadddea6bc9f0050cf830bc3"
popper.js@^1.14.1: popper.js@^1.14.2:
version "1.14.1" version "1.14.3"
resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.1.tgz#b8815e5cda6f62fc2042e47618649f75866e6753" resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.14.3.tgz#1438f98d046acf7b4d78cd502bf418ac64d4f095"
portfinder@^1.0.9: portfinder@^1.0.9:
version "1.0.13" version "1.0.13"
@ -10094,7 +10102,7 @@ react-docgen@^3.0.0-beta11:
node-dir "^0.1.10" node-dir "^0.1.10"
recast "^0.12.6" recast "^0.12.6"
react-dom@^16.0.0, react-dom@^16.3.0: react-dom@^16.0.0:
version "16.3.0" version "16.3.0"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.3.0.tgz#b318e52184188ecb5c3e81117420cca40618643e" resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.3.0.tgz#b318e52184188ecb5c3e81117420cca40618643e"
dependencies: dependencies:
@ -10103,6 +10111,15 @@ react-dom@^16.0.0, react-dom@^16.3.0:
object-assign "^4.1.1" object-assign "^4.1.1"
prop-types "^15.6.0" prop-types "^15.6.0"
react-dom@^16.3.1:
version "16.3.1"
resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-16.3.1.tgz#6a3c90a4fb62f915bdbcf6204422d93a7d4ca573"
dependencies:
fbjs "^0.8.16"
loose-envify "^1.1.0"
object-assign "^4.1.1"
prop-types "^15.6.0"
react-error-overlay@^4.0.0: react-error-overlay@^4.0.0:
version "4.0.0" version "4.0.0"
resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-4.0.0.tgz#d198408a85b4070937a98667f500c832f86bd5d4" resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-4.0.0.tgz#d198408a85b4070937a98667f500c832f86bd5d4"
@ -10157,9 +10174,9 @@ react-inspector@^2.2.2:
babel-runtime "^6.26.0" babel-runtime "^6.26.0"
is-dom "^1.0.9" is-dom "^1.0.9"
react-is@^16.3.0: react-is@^16.3.1:
version "16.3.0" version "16.3.1"
resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.3.0.tgz#f0e8bfd8c09b480dd610b8639d9ed65c13601224" resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.3.1.tgz#ee66e6d8283224a83b3030e110056798488359ba"
react-modal@^3.3.2: react-modal@^3.3.2:
version "3.3.2" version "3.3.2"
@ -10264,14 +10281,14 @@ react-style-proptype@^3.0.0:
dependencies: dependencies:
prop-types "^15.5.4" prop-types "^15.5.4"
react-test-renderer@^16.3.0: react-test-renderer@^16.3.1:
version "16.3.0" version "16.3.1"
resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.3.0.tgz#7e88d8cb4c2b95c161b6c6c998991166f74d473e" resolved "https://registry.yarnpkg.com/react-test-renderer/-/react-test-renderer-16.3.1.tgz#d9257936d8535bd40f57f3d5a84e7b0452fb17f2"
dependencies: dependencies:
fbjs "^0.8.16" fbjs "^0.8.16"
object-assign "^4.1.1" object-assign "^4.1.1"
prop-types "^15.6.0" prop-types "^15.6.0"
react-is "^16.3.0" react-is "^16.3.1"
react-textarea-autosize@^5.2.1: react-textarea-autosize@^5.2.1:
version "5.2.1" version "5.2.1"
@ -10309,9 +10326,9 @@ react@^16.0.0, react@^16.2.0:
object-assign "^4.1.1" object-assign "^4.1.1"
prop-types "^15.6.0" prop-types "^15.6.0"
react@^16.3.0: react@^16.3.1:
version "16.3.0" version "16.3.1"
resolved "https://registry.yarnpkg.com/react/-/react-16.3.0.tgz#fc5a01c68f91e9b38e92cf83f7b795ebdca8ddff" resolved "https://registry.yarnpkg.com/react/-/react-16.3.1.tgz#4a2da433d471251c69b6033ada30e2ed1202cfd8"
dependencies: dependencies:
fbjs "^0.8.16" fbjs "^0.8.16"
loose-envify "^1.1.0" loose-envify "^1.1.0"
@ -11526,6 +11543,10 @@ strict-uri-encode@^2.0.0:
version "2.0.0" version "2.0.0"
resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546" resolved "https://registry.yarnpkg.com/strict-uri-encode/-/strict-uri-encode-2.0.0.tgz#b9c7330c7042862f6b142dc274bbcc5866ce3546"
string-argv@^0.0.2:
version "0.0.2"
resolved "https://registry.yarnpkg.com/string-argv/-/string-argv-0.0.2.tgz#dac30408690c21f3c3630a3ff3a05877bdcbd736"
string-length@^2.0.0: string-length@^2.0.0:
version "2.0.0" version "2.0.0"
resolved "https://registry.yarnpkg.com/string-length/-/string-length-2.0.0.tgz#d40dbb686a3ace960c1cffca562bf2c45f8363ed" resolved "https://registry.yarnpkg.com/string-length/-/string-length-2.0.0.tgz#d40dbb686a3ace960c1cffca562bf2c45f8363ed"
@ -11937,11 +11958,11 @@ tinycolor2@^1.4.1:
version "1.4.1" version "1.4.1"
resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8" resolved "https://registry.yarnpkg.com/tinycolor2/-/tinycolor2-1.4.1.tgz#f4fad333447bc0b07d4dc8e9209d8f39a8ac77e8"
tippy.js@^2.4.1: tippy.js@^2.5.0:
version "2.4.1" version "2.5.0"
resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-2.4.1.tgz#ae9b6418dbfed2563f46bd3cf9e277d893ccc740" resolved "https://registry.yarnpkg.com/tippy.js/-/tippy.js-2.5.0.tgz#393826b42aa1750268e0d2a4d6f047abe4c96d50"
dependencies: dependencies:
popper.js "^1.14.1" popper.js "^1.14.2"
tmp@^0.0.33: tmp@^0.0.33:
version "0.0.33" version "0.0.33"
@ -12555,6 +12576,37 @@ webpack-cli@^2.0.13:
yeoman-environment "^2.0.0" yeoman-environment "^2.0.0"
yeoman-generator "^2.0.3" yeoman-generator "^2.0.3"
webpack-cli@^2.0.14:
version "2.0.14"
resolved "https://registry.yarnpkg.com/webpack-cli/-/webpack-cli-2.0.14.tgz#71d03d8c10547c1dfd674f71ff3b0457c33a74cd"
dependencies:
chalk "^2.3.2"
cross-spawn "^6.0.5"
diff "^3.5.0"
enhanced-resolve "^4.0.0"
envinfo "^4.4.2"
glob-all "^3.1.0"
global-modules "^1.0.0"
got "^8.2.0"
import-local "^1.0.0"
inquirer "^5.1.0"
interpret "^1.0.4"
jscodeshift "^0.5.0"
listr "^0.13.0"
loader-utils "^1.1.0"
lodash "^4.17.5"
log-symbols "^2.2.0"
mkdirp "^0.5.1"
p-each-series "^1.0.0"
p-lazy "^1.0.0"
prettier "^1.5.3"
supports-color "^5.3.0"
v8-compile-cache "^1.1.2"
webpack-addons "^1.1.5"
yargs "^11.1.0"
yeoman-environment "^2.0.0"
yeoman-generator "^2.0.3"
webpack-core@~0.6.0: webpack-core@~0.6.0:
version "0.6.9" version "0.6.9"
resolved "https://registry.yarnpkg.com/webpack-core/-/webpack-core-0.6.9.tgz#fc571588c8558da77be9efb6debdc5a3b172bdc2" resolved "https://registry.yarnpkg.com/webpack-core/-/webpack-core-0.6.9.tgz#fc571588c8558da77be9efb6debdc5a3b172bdc2"
@ -12675,9 +12727,9 @@ webpack@^3.11.0:
webpack-sources "^1.0.1" webpack-sources "^1.0.1"
yargs "^8.0.2" yargs "^8.0.2"
webpack@^4.4.1: webpack@^4.5.0:
version "4.4.1" version "4.5.0"
resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.4.1.tgz#b0105789890c28bfce9f392623ef5850254328a4" resolved "https://registry.yarnpkg.com/webpack/-/webpack-4.5.0.tgz#1e6f71e148ead02be265ff2879c9cd6bb30b8848"
dependencies: dependencies:
acorn "^5.0.0" acorn "^5.0.0"
acorn-dynamic-import "^3.0.0" acorn-dynamic-import "^3.0.0"

Loading…
Cancel
Save