diff --git a/package.json b/package.json
index 85e2aa74..12b72da0 100644
--- a/package.json
+++ b/package.json
@@ -49,7 +49,7 @@
"@ledgerhq/hw-app-eth": "^4.7.3",
"@ledgerhq/hw-transport": "^4.7.3",
"@ledgerhq/hw-transport-node-hid": "^4.7.6",
- "@ledgerhq/wallet-common": "^0.12.0",
+ "@ledgerhq/wallet-common": "^0.13.0",
"axios": "^0.18.0",
"bcryptjs": "^2.4.3",
"bitcoinjs-lib": "^3.3.2",
@@ -58,12 +58,12 @@
"cross-env": "^5.1.4",
"d3": "^5.0.0",
"debug": "^3.1.0",
- "downshift": "^1.31.2",
+ "downshift": "^1.31.4",
"electron-store": "^1.3.0",
"electron-updater": "^2.21.4",
"fuse.js": "^3.2.0",
"history": "^4.7.2",
- "i18next": "^10.6.0",
+ "i18next": "^11.1.1",
"i18next-node-fs-backend": "^1.0.0",
"ledger-test-library": "KhalilBellakrid/ledger-test-library-nodejs#7d37482",
"lodash": "^4.17.5",
@@ -73,8 +73,8 @@
"query-string": "^6.0.0",
"raven": "^2.4.2",
"raven-js": "^3.24.0",
- "react": "^16.3.0",
- "react-dom": "^16.3.0",
+ "react": "^16.3.1",
+ "react-dom": "^16.3.1",
"react-i18next": "^7.5.1",
"react-mortal": "^3.2.0",
"react-motion": "^0.5.2",
@@ -92,7 +92,7 @@
"source-map-support": "^0.5.4",
"styled-components": "^3.2.5",
"styled-system": "^2.2.1",
- "tippy.js": "^2.4.1",
+ "tippy.js": "^2.5.0",
"ws": "^5.1.1"
},
"devDependencies": {
@@ -137,14 +137,14 @@
"husky": "^0.14.3",
"jest": "^22.4.3",
"js-yaml": "^3.10.0",
- "lint-staged": "^7.0.2",
+ "lint-staged": "^7.0.4",
"node-loader": "^0.6.0",
"prettier": "^1.11.1",
"react-hot-loader": "^4.0.1",
- "react-test-renderer": "^16.3.0",
- "webpack": "^4.4.1",
+ "react-test-renderer": "^16.3.1",
+ "webpack": "^4.5.0",
"webpack-bundle-analyzer": "^2.11.1",
- "webpack-cli": "^2.0.13",
+ "webpack-cli": "^2.0.14",
"yaml-loader": "^0.5.0"
}
}
diff --git a/src/components/DeviceConfirmAddr/index.js b/src/components/DeviceConfirm/index.js
similarity index 86%
rename from src/components/DeviceConfirmAddr/index.js
rename to src/components/DeviceConfirm/index.js
index dbdb1b00..ae65f243 100644
--- a/src/components/DeviceConfirmAddr/index.js
+++ b/src/components/DeviceConfirm/index.js
@@ -1,7 +1,7 @@
// @flow
import React from 'react'
-import styled from 'styled-components'
+import styled, { keyframes } from 'styled-components'
import { rgba } from 'styles/helpers'
@@ -10,18 +10,31 @@ import Box from 'components/base/Box'
import IconCheck from 'icons/Check'
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({
color: p => (p.notValid ? 'alertRed' : 'wallet'),
relative: true,
})`
+ padding-top: 40px;
transition: all ease-in-out 0.1s;
`
const WrapperIcon = styled(Box)`
color: ${p => (p.notValid ? p.theme.colors.alertRed : p.theme.colors.positiveGreen)};
position: absolute;
- left: 195px;
- top: 18px;
+ left: 193px;
+ bottom: 16px;
svg {
transition: all ease-in-out 0.1s;
@@ -30,15 +43,16 @@ const WrapperIcon = styled(Box)`
const Check = ({ notValid }: { notValid: boolean }) => (
- {notValid ? : }
+ {notValid ? : }
)
const PushButton = styled(Box)`
background: linear-gradient(to bottom, #ffffff, ${p => p.theme.colors.wallet});
- height: 35px;
+ bottom: 53px;
+ height: 28px;
+ left: 205px;
position: absolute;
- padding-right: 1px;
width: 1px;
&:before,
@@ -52,21 +66,21 @@ const PushButton = styled(Box)`
}
&:before {
+ animation: ${p => pulseAnimation(p)} 1s linear infinite;
background-color: ${p => p.theme.colors.wallet};
- height: 8px;
- margin-left: -4px;
- width: 8px;
+ height: 9px;
margin-bottom: -4px;
+ margin-left: -5px;
+ width: 9px;
z-index: 1;
}
&:after {
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: 14px;
- margin-left: -7px;
+ height: 15px;
margin-bottom: -7px;
- width: 14px;
+ margin-left: -8px;
+ width: 15px;
}
`
@@ -76,7 +90,7 @@ type Props = {
export default (props: Props) => (
-
+ {!props.notValid && }