import React from 'react'; import { Link } from 'react-router-dom'; import { createStyles, makeStyles, Theme } from '@material-ui/core/styles'; import MoreMenu from './Menu'; import HomeIcon from '@material-ui/icons/Home'; import AccountManager from '../container/AccountManager'; import ConnectSignerContainer from '../container/ConnectSignerContainer'; import { observer } from 'mobx-react'; import { AppBar, Toolbar, IconButton, Button, Tooltip } from '@material-ui/core'; import confirmConnect from './ConfirmConnect'; const useStyles = makeStyles((theme: Theme) => createStyles({ root: { width: '100vw', flexGrow: 1, color: '#c4c4c4', backgroundColor: 'var(--cspr-dark-blue)' }, toolbarMargin: { minHeight: '40px' }, menuButton: { marginRight: theme.spacing(2) }, toggleWrapper: { flexGrow: 1, textAlign: 'center' }, toggleButton: { width: '100%', height: '2rem' } }) ); interface Props { accountManager: AccountManager; connectionContainer: ConnectSignerContainer; } export const MainAppBar = observer((props: Props) => { const classes = useStyles(); const { currentTab, connectedSites } = props.connectionContainer; const connected = currentTab && connectedSites.some( site => site.url === currentTab.url && site.isConnected ); if (props.accountManager.hasCreatedVault && props.accountManager.isUnLocked) { return ( <> <AppBar position="static" className={classes.root} color={'transparent'} > <Toolbar> <IconButton edge="start" component={Link} to={'/'}> <HomeIcon style={{ color: '#C4C4C4' }} /> </IconButton> <Tooltip title={ props.connectionContainer.integratedSite ? props.accountManager.userAccounts.length ? 'Toggle Connection to Site' : 'Add an Account to Connect' : 'This site is not integrated with Signer' } > <span className={classes.toggleWrapper}> <Button // Toggles connection status className={classes.toggleButton} disabled={ !props.connectionContainer.integratedSite || !props.accountManager.userAccounts.length } variant="outlined" color={connected ? 'primary' : 'default'} size="large" onClick={() => { if (connected) { props.connectionContainer.disconnectFromSite(); } else { confirmConnect().then(() => { props.connectionContainer.connectToSite(); }); } }} style={{ color: 'var(--cspr-dark-blue)', backgroundColor: '#fff' }} > {connected ? 'Connected' : 'Disconnected'} </Button> </span> </Tooltip> <MoreMenu accountManager={props.accountManager} /> </Toolbar> </AppBar> <div className={classes.toolbarMargin}></div> </> ); } else { return <div className={classes.toolbarMargin}></div>; } });