/* @flow */
import React , { Component } from 'react' ;
import styled , { css } from 'styled-components' ;
import { H3 } from 'components/Heading' ;
import P from 'components/Paragraph' ;
import Button from 'components/Button' ;
import Tooltip from 'components/Tooltip' ;
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' ;
const Wrapper = styled . div `
width : 360 px ;
` ;
const Header = styled . div `
display : flex ;
justify - content : center ;
align - items : center ;
color : $ { colors . TEXT _PRIMARY } ;
` ;
const StyledHeading = styled ( H3 ) `
padding - top : 30 px ;
` ;
const StyledLink = styled ( Link ) `
position : absolute ;
right : 15 px ;
top : 10 px ;
` ;
const StyledButton = styled ( Button ) `
margin : 10 px 0 10 px 0 ;
` ;
const StyledIcon = styled ( Icon ) `
position : absolute ;
top : 10 px ;
right : 15 px ;
& : hover {
cursor : pointer ;
}
` ;
const Content = styled . div `
padding : 55 px 48 px 40 px 48 px ;
position : relative ;
display : flex ;
flex - direction : column ;
justify - content : center ;
align - items : center ;
$ { props => props . isTop && css `
padding - top : 40 px ;
border - bottom : 1 px solid $ { colors . DIVIDER } ;
` }
` ;
class WalletType extends Component < Props > {
constructor ( props : Props ) {
super ( props ) ;
this . keyboardHandler = this . keyboardHandler . bind ( this ) ;
}
componentDidMount ( ) {
window . addEventListener ( 'keydown' , this . keyboardHandler , false ) ;
}
componentWillUnmount ( ) {
window . removeEventListener ( 'keydown' , this . keyboardHandler , false ) ;
}
keyboardHandler ( event : KeyboardEvent ) : void {
if ( event . keyCode === 13 ) {
event . preventDefault ( ) ;
this . changeType ( false ) ;
}
}
keyboardHandler : ( event : KeyboardEvent ) => void ;
changeType ( hidden : boolean , state : ? string ) {
const { modal } = this . props ;
if ( ! modal . opened ) return ;
this . props . modalActions . onWalletTypeRequest ( modal . device , hidden , state ) ;
}
render ( ) {
if ( ! this . props . modal . opened ) return null ;
const { device } = this . props . modal ;
const { onCancel } = this . props . modalActions ;
return (
< Wrapper >
{ device . state && (
< StyledLink onClick = { onCancel } >
< Icon
size = { 20 }
color = { colors . TEXT _SECONDARY }
icon = { icons . CLOSE }
/ >
< / S t y l e d L i n k >
) }
< StyledHeading > Change wallet type for { device . instanceLabel } < / S t y l e d H e a d i n g >
< Content isTop >
< Header >
< WalletTypeIcon type = "standard" size = { 32 } color = { colors . TEXT _PRIMARY } / >
Standard Wallet
< / H e a d e r >
< P isSmaller > Continue to access your standard wallet . < / P >
< StyledButton onClick = { ( ) => this . changeType ( false , device . state ) } > Go to your standard wallet < / S t y l e d B u t t o n >
< / C o n t e n t >
< Content >
< Tooltip
maxWidth = { 285 }
placement = "top"
content = "Passphrase is an optional feature of the Trezor device that is recommended for advanced users only. It is a word or a sentence of your choice. Its main purpose is to access a hidden wallet."
readMoreLink = "https://wiki.trezor.io/Passphrase"
>
< StyledIcon
icon = { icons . HELP }
color = { colors . TEXT _SECONDARY }
size = { 26 }
/ >
< / T o o l t i p >
< Header >
< WalletTypeIcon
type = "hidden"
size = { 32 }
color = { colors . TEXT _PRIMARY }
/ >
Hidden Wallet
< / H e a d e r >
< P isSmaller > You will be asked to enter your passphrase to unlock your hidden wallet . < / P >
< StyledButton isWhite onClick = { ( ) => this . changeType ( true , device . state ) } > Go to your hidden wallet < / S t y l e d B u t t o n >
< / C o n t e n t >
< / W r a p p e r >
) ;
}
}
export default WalletType ;