Add text to enable notifications, add account created message

This commit is contained in:
artur
2024-02-08 19:51:47 +03:00
parent 89fc5b0ae0
commit 4aa4f7f175
2 changed files with 97 additions and 76 deletions

View File

@@ -7,10 +7,12 @@ import { useEnqueueSnackbar } from '@/hooks/useEnqueueSnackbar'
import { ModalConfirmConnect } from '@/components/Modal/ModalConfirmConnect/ModalConfirmConnect'
import { useModalSearchParams } from '@/hooks/useModalSearchParams'
import { MODAL_PARAMS_KEYS } from '@/types/modal'
import { useState } from 'react'
const CreatePage = () => {
const notify = useEnqueueSnackbar()
const { handleOpen } = useModalSearchParams()
const [created, setCreated] = useState(false)
const [searchParams] = useSearchParams()
@@ -39,6 +41,7 @@ const CreatePage = () => {
}
console.log('Created', key.npub, 'app', appUrl)
setCreated(true)
handleOpen(MODAL_PARAMS_KEYS.CONFIRM_CONNECT, {
search: {
@@ -49,11 +52,10 @@ const CreatePage = () => {
// needed for this screen itself
name,
// will close after all done
popup: 'true'
popup: 'true',
},
replace: true
});
replace: true,
})
} catch (error: any) {
notify(error.message || error.toString(), 'error')
}
@@ -72,28 +74,42 @@ const CreatePage = () => {
return (
<>
<Stack maxHeight={'100%'} overflow={'auto'}>
<Typography textAlign={'center'} variant="h4" paddingTop="0.5em">
Welcome to Nostr!
</Typography>
<Stack gap={'0.5rem'} overflow={'auto'}>
<Typography textAlign={'left'} variant="h6" paddingTop="0.5em">
Chosen name: <b>{nip05}</b>
</Typography>
<GetStartedButton onClick={handleClickAddAccount}>Create account</GetStartedButton>
{created && (
<>
<Typography textAlign={'center'} variant="h4" paddingTop="0.5em">
Account created!
</Typography>
<Typography textAlign={'center'} variant="body1" paddingTop="0.5em">
User name: <b>{nip05}</b>
</Typography>
</>
)}
{!created && (
<>
<Typography textAlign={'center'} variant="h4" paddingTop="0.5em">
Welcome to Nostr!
</Typography>
<Stack gap={'0.5rem'} overflow={'auto'}>
<Typography textAlign={'left'} variant="h6" paddingTop="0.5em">
Chosen name: <b>{nip05}</b>
</Typography>
<GetStartedButton onClick={handleClickAddAccount}>Create account</GetStartedButton>
<Typography textAlign={'left'} variant="h5" paddingTop="1em">
What you need to know:
</Typography>
<Typography textAlign={'left'} variant="h5" paddingTop="1em">
What you need to know:
</Typography>
<ol style={{ marginLeft: '1em' }}>
<li>Nostr accounts are based on cryptographic keys.</li>
<li>All your actions on Nostr will be signed by your keys.</li>
<li>Nsec.app is one of many services to manage Nostr keys.</li>
<li>When you create an account, a new key will be created.</li>
<li>This key can later be used with other Nostr websites.</li>
</ol>
<LearnMoreButton onClick={handleLearnMore}>Learn more</LearnMoreButton>
</Stack>
<ol style={{ marginLeft: '1em' }}>
<li>Nostr accounts are based on cryptographic keys.</li>
<li>All your actions on Nostr will be signed by your keys.</li>
<li>Nsec.app is one of many services to manage Nostr keys.</li>
<li>When you create an account, a new key will be created.</li>
<li>This key can later be used with other Nostr websites.</li>
</ol>
<LearnMoreButton onClick={handleLearnMore}>Learn more</LearnMoreButton>
</Stack>
</>
)}
</Stack>
<ModalConfirmConnect />
</>