diff --git a/package.json b/package.json
index deec998d..f40856df 100644
--- a/package.json
+++ b/package.json
@@ -38,6 +38,11 @@
"webpack-sources": "1.0.1"
},
"dependencies": {
+ "@fortawesome/fontawesome": "^1.1.3",
+ "@fortawesome/fontawesome-free-brands": "^5.0.6",
+ "@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",
@@ -50,7 +55,7 @@
"bs58check": "^2.1.1",
"color": "^3.0.0",
"cross-env": "^5.1.3",
- "downshift": "^1.25.0",
+ "downshift": "^1.26.0",
"electron-store": "^1.3.0",
"electron-updater": "^2.20.1",
"fuse.js": "^3.2.0",
@@ -81,12 +86,12 @@
"styled-system": "^1.1.1"
},
"devDependencies": {
- "@storybook/addon-actions": "^3.3.10",
- "@storybook/addon-knobs": "^3.3.10",
- "@storybook/addon-links": "^3.3.10",
- "@storybook/addon-options": "^3.3.10",
- "@storybook/addons": "^3.3.10",
- "@storybook/react": "^3.3.10",
+ "@storybook/addon-actions": "^3.3.11",
+ "@storybook/addon-knobs": "^3.3.11",
+ "@storybook/addon-links": "^3.3.11",
+ "@storybook/addon-options": "^3.3.11",
+ "@storybook/addons": "^3.3.11",
+ "@storybook/react": "^3.3.11",
"babel-core": "^6.26.0",
"babel-eslint": "^8.2.1",
"babel-loader": "^7.1.2",
@@ -108,7 +113,7 @@
"eslint-plugin-flowtype": "^2.42.0",
"eslint-plugin-import": "^2.8.0",
"eslint-plugin-jsx-a11y": "^6.0.3",
- "eslint-plugin-react": "^7.6.0",
+ "eslint-plugin-react": "^7.6.1",
"flow-bin": "^0.64.0",
"flow-typed": "^2.2.3",
"husky": "^0.14.3",
diff --git a/src/components/ReceiveBox.js b/src/components/ReceiveBox.js
index 7e708658..9e81c88c 100644
--- a/src/components/ReceiveBox.js
+++ b/src/components/ReceiveBox.js
@@ -65,7 +65,7 @@ const ReceiveBox = ({ address }: Props) => (
{'Print'}
-
+
{'Share'}
diff --git a/src/components/SideBar/index.js b/src/components/SideBar/index.js
index d9c721b1..c2ee7ff6 100644
--- a/src/components/SideBar/index.js
+++ b/src/components/SideBar/index.js
@@ -70,7 +70,7 @@ class SideBar extends PureComponent {
{t('sidebar.menu')}
-
-
+
-
{t('dashboard.title')}
-
diff --git a/src/components/base/Checkbox/index.js b/src/components/base/Checkbox/index.js
new file mode 100644
index 00000000..a0ec9526
--- /dev/null
+++ b/src/components/base/Checkbox/index.js
@@ -0,0 +1,93 @@
+// @flow
+
+import React, { PureComponent } from 'react'
+import styled from 'styled-components'
+
+import Box from 'components/base/Box'
+import Icon from 'components/base/Icon'
+
+const Base = styled(Box).attrs({
+ align: 'center',
+ justify: 'center',
+ relative: true,
+})`
+ background-color: ${p => (p.checked ? p.theme.colors.blue : p.theme.colors.white)};
+ box-shadow: 0 0 0 ${p => (p.checked ? 4 : 1)}px
+ ${p => (p.checked ? p.theme.colors.cream : p.theme.colors.argile)};
+ border-radius: 50%;
+ font-size: 7px;
+
+ height: 19px;
+ width: 19px;
+ transition: all ease-in-out 0.1s;
+
+ input[type='checkbox'] {
+ bottom: 0;
+ cursor: pointer;
+ height: 100%;
+ left: 0;
+ opacity: 0;
+ position: absolute;
+ right: 0;
+ top: 0;
+ width: 100%;
+ z-index: 10;
+ }
+
+ > span {
+ position: relative;
+ top: 1px;
+ opacity: ${p => (p.checked ? 1 : 0)};
+ transition: all ease-in-out 0.1s;
+ }
+`
+
+type Props = {
+ checked?: boolean,
+ onChange?: Function,
+}
+
+type State = {
+ checked: boolean,
+}
+
+class Checkbox extends PureComponent {
+ state = {
+ checked: this.props.checked || false,
+ }
+
+ componentWillReceiveProps(nextProps: Props) {
+ if (nextProps.checked) {
+ this.setState({
+ checked: nextProps.checked,
+ })
+ }
+ }
+
+ handleChange = (e: SyntheticInputEvent) => {
+ const { onChange } = this.props
+ const { checked } = e.target
+
+ this.setState({
+ checked,
+ })
+
+ if (onChange) {
+ onChange(checked)
+ }
+ }
+
+ render() {
+ const { checked } = this.state
+ const { onChange, ...props } = this.props
+
+ return (
+
+
+
+
+ )
+ }
+}
+
+export default Checkbox
diff --git a/src/components/base/Checkbox/stories.js b/src/components/base/Checkbox/stories.js
new file mode 100644
index 00000000..34222a4b
--- /dev/null
+++ b/src/components/base/Checkbox/stories.js
@@ -0,0 +1,9 @@
+import React from 'react'
+import { storiesOf } from '@storybook/react'
+import { boolean } from '@storybook/addon-knobs'
+
+import Checkbox from 'components/base/Checkbox'
+
+const stories = storiesOf('Checkbox', module)
+
+stories.add('basic', () => )
diff --git a/src/components/base/Icon.js b/src/components/base/Icon.js
index 6d441189..858e33c2 100644
--- a/src/components/base/Icon.js
+++ b/src/components/base/Icon.js
@@ -3,15 +3,15 @@
import React from 'react'
import styled from 'styled-components'
import { fontSize, color } from 'styled-system'
+import FontAwesomeIcon from '@fortawesome/react-fontawesome'
-const Container = styled.div`
+const Container = styled.span`
${fontSize};
${color};
- line-height: 1;
`
export default ({ name, ...props }: { name: string }) => (
-
+
)
diff --git a/src/components/base/Modal/index.js b/src/components/base/Modal/index.js
index a4ee6a87..3e0ca236 100644
--- a/src/components/base/Modal/index.js
+++ b/src/components/base/Modal/index.js
@@ -50,7 +50,7 @@ const Container = styled(Box).attrs({
pointerEvents: p.isVisible ? 'auto' : 'none',
}),
})`
- overflow: hidden;
+ overflow: scroll;
position: fixed;
z-index: 20;
`
@@ -69,6 +69,7 @@ const Wrapper = styled(Box).attrs({
bg: 'transparent',
flow: 20,
mt: 100,
+ mb: 100,
style: p => ({
opacity: p.op,
transform: `translate3d(0, ${p.offset}px, 0)`,
diff --git a/src/components/base/Select/index.js b/src/components/base/Select/index.js
index d595d98e..50bf06a6 100644
--- a/src/components/base/Select/index.js
+++ b/src/components/base/Select/index.js
@@ -91,7 +91,7 @@ const FloatingTriangles = styled(Box).attrs({
class Select extends PureComponent {
static defaultProps = {
- itemToString: (item: Object) => item.name,
+ itemToString: (item: Object) => item && item.name,
keyProp: undefined,
}
diff --git a/src/components/modals/AddAccount/ImportAccounts.js b/src/components/modals/AddAccount/ImportAccounts.js
index 289cc8df..493ac968 100644
--- a/src/components/modals/AddAccount/ImportAccounts.js
+++ b/src/components/modals/AddAccount/ImportAccounts.js
@@ -1,24 +1,40 @@
// @flow
import React, { PureComponent } from 'react'
+import { translate } from 'react-i18next'
+
+import type { T } from 'types/common'
import { formatBTC } from 'helpers/format'
import Box from 'components/base/Box'
import Button from 'components/base/Button'
+import Checkbox from 'components/base/Checkbox'
+import Input from 'components/base/Input'
type Props = {
+ t: T,
accounts: Array