From e4bb6d5d475bf3ea793c063ce62bcbfe3b383e94 Mon Sep 17 00:00:00 2001 From: Szymon Lesisz Date: Mon, 8 Oct 2018 17:12:23 +0200 Subject: [PATCH] added texts for passphrase modals and wallet type icons --- src/components/images/WalletType/index.js | 51 +++++++++++++++++++ src/components/modals/device/Type/index.js | 39 +++++++++++--- .../modals/passphrase/Passphrase/index.js | 8 +-- .../modals/passphrase/Type/index.js | 2 +- .../Wallet/components/LeftNavigation/index.js | 4 +- 5 files changed, 92 insertions(+), 12 deletions(-) create mode 100644 src/components/images/WalletType/index.js diff --git a/src/components/images/WalletType/index.js b/src/components/images/WalletType/index.js new file mode 100644 index 00000000..49f095e0 --- /dev/null +++ b/src/components/images/WalletType/index.js @@ -0,0 +1,51 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import colors from 'config/colors'; +import styled from 'styled-components'; + +const SvgWrapper = styled.svg` + :hover { + path { + fill: ${props => props.hoverColor} + } + } +`; + +const Path = styled.path` + fill: ${props => props.color}; +`; + +export const HIDDEN = 'M23.9,13.6l-4-11C19.8,2.3,19.4,2,19,2h-3c-0.6,0-1,0.4-1,1s0.4,1,1,1h2.3l3.3,9H14h-4H2.4l3.3-9H8 c0.6,0,1-0.4,1-1S8.6,2,8,2H5C4.6,2,4.2,2.3,4.1,2.7l-4,11C0,13.7,0,13.9,0,14c0,0,0,0,0,0v0c0,0,0,0,0,0v5c0,1.7,1.3,3,3,3h5 c1.7,0,3-1.3,3-3v-4h2v4c0,1.7,1.3,3,3,3h5c1.7,0,3-1.3,3-3v-5c0,0,0,0,0,0v0c0,0,0,0,0,0C24,13.9,24,13.7,23.9,13.6z'; +export const STANDARD = 'M23,4H4H3C2.449,4,2,3.551,2,3s0.449-1,1-1h15v1h2V1c0-0.552-0.448-1-1-1H3C1.343,0,0,1.343,0,3v17 c0,2.209,1.791,4,4,4h19c0.552,0,1-0.448,1-1V5C24,4.448,23.552,4,23,4z M18,16c-1.105,0-2-0.895-2-2c0-1.105,0.895-2,2-2 s2,0.895,2,2C20,15.105,19.105,16,18,16z'; + +const Icon = ({ + type = 'standard', + size = 24, + color = colors.TEXT_SECONDARY, + hoverColor, + onClick, +}) => ( + + +); + +Icon.propTypes = { + type: PropTypes.string, + size: PropTypes.number, + color: PropTypes.string, + hoverColor: PropTypes.string, + onClick: PropTypes.func, +}; + +export default Icon; \ No newline at end of file diff --git a/src/components/modals/device/Type/index.js b/src/components/modals/device/Type/index.js index e9676ac3..8d0a4106 100644 --- a/src/components/modals/device/Type/index.js +++ b/src/components/modals/device/Type/index.js @@ -5,6 +5,11 @@ import styled from 'styled-components'; import { H3 } from 'components/Heading'; import P from 'components/Paragraph'; import Button from 'components/Button'; +import Icon from 'components/Icon'; +import Link from 'components/Link'; +import colors from 'config/colors'; +import icons from 'config/icons'; +import WalletTypeIcon from 'components/images/WalletType'; import type { Props } from 'components/modals/index'; @@ -13,6 +18,12 @@ const Wrapper = styled.div` padding: 24px 48px; `; +const StyledLink = styled(Link)` + position: absolute; + right: 15px; + top: 15px; +`; + const StyledButton = styled(Button)` margin: 0 0 10px 0; `; @@ -23,8 +34,7 @@ const Row = styled.div` padding: 10px 0; `; -class ForgetDevice extends Component { - +class WalletType extends Component { constructor(props: Props) { super(props); this.keyboardHandler = this.keyboardHandler.bind(this); @@ -56,17 +66,34 @@ class ForgetDevice extends Component { render() { if (!this.props.modal.opened) return null; const { device } = this.props.modal; - // const { onCancel } = this.props.modalActions; + const { onCancel } = this.props.modalActions; + return ( + { device.state && ( + + + + )}

RequestWalletType for { device.instanceLabel }?

- this.foo(false)}>Basic - this.foo(true)}>Hidden + + + Standard Wallet + +

Continue to access your standard wallet.

+ this.foo(false)}>Go to your standard wallet + + + + Hidden Wallet + +

You will be asked to enter your passphrase to unlock your hidden wallet.

+ this.foo(true)}>Go to your hidden wallet ); } } -export default ForgetDevice; \ No newline at end of file +export default WalletType; \ No newline at end of file diff --git a/src/components/modals/passphrase/Passphrase/index.js b/src/components/modals/passphrase/Passphrase/index.js index d95f138c..dec94bdf 100644 --- a/src/components/modals/passphrase/Passphrase/index.js +++ b/src/components/modals/passphrase/Passphrase/index.js @@ -212,7 +212,7 @@ class Passphrase extends Component { return (

Enter {this.state.deviceLabel} passphrase

-

Note that passphrase is case-sensitive.

+

Note that passphrase is case-sensitive. If you enter a wrong passphrase, you will not unlock the desired hidden wallet.

{ {!this.state.shouldShowSingleInput && ( - + {
-

If you want to access your default account

+ Changed your mind?   this.submitPassphrase(true)} - >Leave passphrase blank + >Go to your standard wallet

diff --git a/src/components/modals/passphrase/Type/index.js b/src/components/modals/passphrase/Type/index.js index 7ce9951c..c42cf3af 100644 --- a/src/components/modals/passphrase/Type/index.js +++ b/src/components/modals/passphrase/Type/index.js @@ -26,7 +26,7 @@ const Confirmation = (props: Props) => {

Complete the action on { device.label } device

-

TODO: add detailed text here. Explain passphrase/hidden wallet...

+

If you enter a wrong passphrase, you will not unlock the desired hidden wallet.

 ); diff --git a/src/views/Wallet/components/LeftNavigation/index.js b/src/views/Wallet/components/LeftNavigation/index.js index db79af1f..a19995db 100644 --- a/src/views/Wallet/components/LeftNavigation/index.js +++ b/src/views/Wallet/components/LeftNavigation/index.js @@ -4,6 +4,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import colors from 'config/colors'; import Icon from 'components/Icon'; +import WalletTypeIcon from 'components/images/WalletType'; import icons from 'config/icons'; import { TransitionGroup, CSSTransition } from 'react-transition-group'; import styled from 'styled-components'; @@ -197,11 +198,12 @@ class LeftNavigation extends React.PureComponent { this.handleOpen(); } }} - device={this.props.wallet.selectedDevice} + device={selectedDevice} disabled={!isDeviceAccessible && this.props.devices.length === 1} isOpen={this.props.wallet.dropdownOpened} icon={( + {this.props.devices.length > 1 && ( {this.props.devices.length} )}