123 lines
3.9 KiB
TypeScript
123 lines
3.9 KiB
TypeScript
import { Stack, Typography } from '@mui/material'
|
|
import { GetStartedButton, LearnMoreButton } from './styled'
|
|
import { DOMAIN } from '@/utils/consts'
|
|
import { useSearchParams } from 'react-router-dom'
|
|
import { swicCall } from '@/modules/swic'
|
|
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'
|
|
import { getReferrerAppUrl } from '@/utils/helpers/helpers'
|
|
import { LoadingSpinner } from '@/shared/LoadingSpinner/LoadingSpinner'
|
|
|
|
const CreatePage = () => {
|
|
const notify = useEnqueueSnackbar()
|
|
const { handleOpen } = useModalSearchParams()
|
|
const [created, setCreated] = useState(false)
|
|
|
|
const [searchParams] = useSearchParams()
|
|
|
|
const [isLoading, setIsLoading] = useState(false)
|
|
|
|
const name = searchParams.get('name') || ''
|
|
const token = searchParams.get('token') || ''
|
|
const appNpub = searchParams.get('appNpub') || ''
|
|
const isValid = name && token && appNpub
|
|
|
|
const nip05 = `${name}@${DOMAIN}`
|
|
|
|
const handleLearnMore = () => {
|
|
// @ts-ignore
|
|
window.open(`https://${DOMAIN}`, '_blank').focus()
|
|
}
|
|
|
|
const handleClickAddAccount = async () => {
|
|
try {
|
|
setIsLoading(true)
|
|
const key: any = await swicCall('generateKey', name)
|
|
|
|
const appUrl = getReferrerAppUrl()
|
|
|
|
console.log('Created', key.npub, 'app', appUrl)
|
|
setCreated(true)
|
|
setIsLoading(false)
|
|
|
|
handleOpen(MODAL_PARAMS_KEYS.CONFIRM_CONNECT, {
|
|
search: {
|
|
npub: key.npub,
|
|
appNpub,
|
|
appUrl,
|
|
token,
|
|
// needed for this screen itself
|
|
name,
|
|
// will close after all done
|
|
popup: 'true',
|
|
},
|
|
replace: true,
|
|
})
|
|
} catch (error: any) {
|
|
notify(error.message || error.toString(), 'error')
|
|
setIsLoading(false)
|
|
}
|
|
}
|
|
|
|
if (!isValid) {
|
|
return (
|
|
<Stack maxHeight={'100%'} overflow={'auto'}>
|
|
<Typography textAlign={'center'} variant="h6" paddingTop="1em">
|
|
Bad parameters.
|
|
</Typography>
|
|
</Stack>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<>
|
|
<Stack maxHeight={'100%'} overflow={'auto'}>
|
|
{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 {isLoading && <LoadingSpinner />}
|
|
</GetStartedButton>
|
|
|
|
<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>
|
|
</>
|
|
)}
|
|
</Stack>
|
|
<ModalConfirmConnect />
|
|
</>
|
|
)
|
|
}
|
|
|
|
export default CreatePage
|