/* @flow */
import React from 'react' ;
import styled from 'styled-components' ;
import { connect } from 'react-redux' ;
import { bindActionCreators } from 'redux' ;
import colors from 'config/colors' ;
import icons from 'config/icons' ;
import { FONT _SIZE } from 'config/variables' ;
import Icon from 'components/Icon' ;
import Button from 'components/Button' ;
import P from 'components/Paragraph' ;
import { H2 } from 'components/Heading' ;
import * as WalletActions from 'actions/WalletActions' ;
const Wrapper = styled . div `
width : 100 % ;
height : 100 % ;
top : 0 px ;
left : 0 px ;
background : rgba ( 0 , 0 , 0 , 0.35 ) ;
display : flex ;
flex - direction : column ;
align - items : center ;
overflow : auto ;
padding : 20 px ;
` ;
const ModalWindow = styled . div `
margin : auto ;
position : relative ;
border - radius : 4 px ;
background - color : $ { colors . WHITE } ;
text - align : center ;
width : 100 % ;
max - width : 620 px ;
padding : 30 px 48 px ;
` ;
const StyledP = styled ( P ) `
padding : 10 px 0 px ;
font - size : $ { FONT _SIZE . BASE } ;
` ;
const StyledButton = styled ( Button ) `
margin : 10 px 0 px ;
width : 100 % ;
` ;
const StyledIcon = styled ( Icon ) `
position : relative ;
top : - 1 px ;
` ;
const BetaDisclaimer = ( props : { close : ( ) => void } ) => (
< Wrapper >
< ModalWindow >
< H2 > You are opening Trezor Beta Wallet < / H 2 >
< StyledP > < i > Trezor Beta Wallet < /i> is a public feature-testing version of the <i>Trezor Wallet</i > , offering the newest features before they are available to the general public . < / S t y l e d P >
< StyledP > In contrast , < i > Trezor Wallet < / i > i s f e a t u r e - c o n s e r v a t i v e , m a k i n g s u r e t h a t i t s f u n c t i o n a l i t y i s m a x i m a l l y r e l i a b l e a n d d e p e n d a b l e f o r t h e g e n e r a l p u b l i c . < / S t y l e d P >
< StyledP >
< StyledIcon
size = { 24 }
color = { colors . WARNING _PRIMARY }
icon = { icons . WARNING }
/ >
Please note that the < i > Trezor Beta Wallet < /i> might be collecting anonymized usage data, especially error logs, for development purposes. The <i>Trezor Wallet</i > does not log any data .
< / S t y l e d P >
< StyledButton onClick = { props . close } > OK , I understand < / S t y l e d B u t t o n >
< / M o d a l W i n d o w >
< / W r a p p e r >
) ;
export default connect (
null ,
( dispatch : Dispatch ) => ( {
close : bindActionCreators ( WalletActions . hideBetaDisclaimer , dispatch ) ,
} ) ,
) ( BetaDisclaimer ) ;