import { Settings as SettingsIcon } from '@emeraldplatform/ui-icons' ; import { blockchains , screen } from '@emeraldwallet/store' ; import { Button } from '@emeraldwallet/ui' ; import { AppBar , Toolbar } from '@material-ui/core' ; import { createStyles , withStyles } from '@material-ui/core/styles' ; import * as React from 'react' ; import { connect } from 'react-redux' ; import HeaderMenu from './HeaderMenu' ; import EmeraldTitle from './Title' ; import Total from './Total' ; const styles = ( theme ) => ( { appBarRight : { display : 'flex' , alignItems : 'center' , marginTop : 'inherit' } , buttons : { label : { textTransform : 'none' , fontWeight : 'normal' , fontSize : '16px' } } , appBarRoot : { backgroundColor : theme . palette . primary . contrastText } } ) ; export interface IHeaderProps { openSettings : any ; classes : any ; chains : any ; } const blockDisplayStyles = createStyles ( { label : { fontWeight : 'normal' , fontSize : '16px' , textTransform : 'none' } } ) ; const SettingsButton = ( { classes , onClick } ) => ( < Button variant = 'text' onClick = { onClick } classes = { { label : classes . text } } icon = { < SettingsIcon / > } />); const StyledSettingsButton = withStyles ( blockDisplayStyles ) ( SettingsButton ) ; const Header = ( props ) => { const { openSettings } = props ; return ( < div > < div className = { props . classes . appBarRoot } > < AppBar position = 'static' color = 'inherit' > < Toolbar > < EmeraldTitle /> < div className = { props . classes . appBarRight } > < Total /> < HeaderMenu / > < /div> < /Toolbar> < /AppBar> < /div> < /div>); } ; const StyledHeader = withStyles ( styles ) ( Header ) ; const mapStateToProps = ( state ) => { return { chains : blockchains . selectors . getCurrentInfo ( state ) , showFiat : true } ; } ; const mapDispatchToProps = ( dispatch ) => ( { openSettings : ( ) => { dispatch ( screen . actions . gotoScreen ( 'settings' ) ) ; } } ) ; export default connect ( mapStateToProps , mapDispatchToProps ) ( StyledHeader ) ;