57 lines
2.1 KiB
TypeScript
57 lines
2.1 KiB
TypeScript
import { Fragment } from 'react'
|
|
import { ItemKey } from './components/ItemKey'
|
|
import { Box, Stack, Typography } from '@mui/material'
|
|
import { AddAccountButton, GetStartedButton, LearnMoreButton } from './styled'
|
|
import { useAppSelector } from '@/store/hooks/redux'
|
|
import { selectKeys } from '@/store'
|
|
import { SectionTitle } from '@/shared/SectionTitle/SectionTitle'
|
|
import { useModalSearchParams } from '@/hooks/useModalSearchParams'
|
|
import { MODAL_PARAMS_KEYS } from '@/types/modal'
|
|
import { DOMAIN } from '@/utils/consts'
|
|
|
|
const HomePage = () => {
|
|
const keys = useAppSelector(selectKeys)
|
|
const isNoKeys = !keys || keys.length === 0
|
|
|
|
const { handleOpen } = useModalSearchParams()
|
|
const handleClickAddAccount = () => handleOpen(MODAL_PARAMS_KEYS.INITIAL)
|
|
|
|
const handleLearnMore = () => {
|
|
// @ts-ignore
|
|
window.open(`https://${DOMAIN}`, '_blank').focus()
|
|
}
|
|
|
|
return (
|
|
<Stack maxHeight={'100%'} overflow={'auto'}>
|
|
<SectionTitle marginBottom={'0.5rem'}>{isNoKeys ? 'Welcome' : 'Accounts:'}</SectionTitle>
|
|
<Stack gap={'0.5rem'} overflow={'auto'}>
|
|
{isNoKeys && (
|
|
<>
|
|
<Typography textAlign={'left'} variant="h6" paddingTop="1em">
|
|
Nsec.app is a novel key storage app for Nostr.
|
|
</Typography>
|
|
<GetStartedButton onClick={handleClickAddAccount}>Get started</GetStartedButton>
|
|
<Typography textAlign={'left'} variant="h6" paddingTop="2em">
|
|
Your keys are stored in your browser and can be used in many Nostr apps without the need for a browser
|
|
extension.
|
|
</Typography>
|
|
<LearnMoreButton onClick={handleLearnMore}>Learn more</LearnMoreButton>
|
|
</>
|
|
)}
|
|
{!isNoKeys && (
|
|
<Fragment>
|
|
<Box flex={1} overflow={'auto'} borderRadius={'8px'} padding={'0.25rem'}>
|
|
{keys.map((key) => (
|
|
<ItemKey {...key} key={key.npub} />
|
|
))}
|
|
</Box>
|
|
<AddAccountButton onClick={handleClickAddAccount}>Add account</AddAccountButton>
|
|
</Fragment>
|
|
)}
|
|
</Stack>
|
|
</Stack>
|
|
)
|
|
}
|
|
|
|
export default HomePage
|