Newer
Older
import styled from 'styled-components'
import { EXT_NAME } from '../../utils/constants'
import { hasAccounts as hasAccountsStore } from '../stores/accounts'
import { onImportPage as onImportPageStore } from '../stores/router'
import { goHome, goToImport } from '../utils/routing'
const Header: React.FC<BaseProps> = ({ className }) => {
const hasAccounts = useStore(hasAccountsStore)
const onImportPage = useStore(onImportPageStore)
const showImportButton = hasAccounts && !onImportPage
return (
<div className={className}>
<div className='text-holder'>
<img className='logo' src={logo} />
<div>{EXT_NAME}</div>
</div>
{showImportButton && <Button onClick={goToImport}>Import</Button>}
{onImportPage && <Button onClick={goHome}>Cancel</Button>}
box-shadow: ${({ theme }: ThemeProps) => theme.shadow};