99 lines
2.9 KiB
TypeScript
99 lines
2.9 KiB
TypeScript
import { FC } from 'react'
|
|
import { useModalSearchParams } from '@/hooks/useModalSearchParams'
|
|
import { Modal } from '@/shared/Modal/Modal'
|
|
import { EXPLANATION_MODAL_KEYS, MODAL_PARAMS_KEYS } from '@/types/modal'
|
|
import { Stack, Typography } from '@mui/material'
|
|
import { Button } from '@/shared/Button/Button'
|
|
import { useSearchParams } from 'react-router-dom'
|
|
|
|
type ModalExplanationProps = {
|
|
explanationText?: string
|
|
}
|
|
|
|
export const ModalExplanation: FC<ModalExplanationProps> = () => {
|
|
const { getModalOpened } = useModalSearchParams()
|
|
const isModalOpened = getModalOpened(MODAL_PARAMS_KEYS.EXPLANATION)
|
|
const [searchParams, setSearchParams] = useSearchParams()
|
|
|
|
const handleCloseModal = () => {
|
|
searchParams.delete('type')
|
|
searchParams.delete(MODAL_PARAMS_KEYS.EXPLANATION)
|
|
setSearchParams(searchParams, { replace: true })
|
|
}
|
|
|
|
const type = searchParams.get('type')
|
|
|
|
let title = ''
|
|
let explanationText
|
|
switch (type) {
|
|
case EXPLANATION_MODAL_KEYS.NPUB: {
|
|
title = 'What is NPUB?'
|
|
explanationText = (
|
|
<>
|
|
NPUB is your Nostr PUBlic key.
|
|
<br />
|
|
<br />
|
|
It is your global unique identifier on the Nostr network, and is derived from your private key.
|
|
<br />
|
|
<br />
|
|
You can share your NPUB with other people so that they could unambiguously find you on the network.
|
|
</>
|
|
)
|
|
break
|
|
}
|
|
case EXPLANATION_MODAL_KEYS.LOGIN: {
|
|
title = 'What is Login?'
|
|
explanationText = (
|
|
<>
|
|
Login (username) is your human-readable name on the Nostr network.
|
|
<br />
|
|
<br />
|
|
Unlike your NPUB, which is a long string of random symbols, your login is a meaningful name tied to a website
|
|
address (like name@nsec.app).
|
|
<br />
|
|
<br />
|
|
Use your username to log in to Nostr apps.
|
|
<br />
|
|
<br />
|
|
You can have many usernames all pointing to your NPUB. People also refer to these names as nostr-addresses or
|
|
NIP05 names.
|
|
</>
|
|
)
|
|
break
|
|
}
|
|
case EXPLANATION_MODAL_KEYS.BUNKER: {
|
|
title = 'What is Bunker URL?'
|
|
explanationText = (
|
|
<>
|
|
Bunker URL is a string used to connect to Nostr apps.
|
|
<br />
|
|
<br />
|
|
Some apps require bunker URL to connect to your keys. Paste it to the app and then confirm a connection
|
|
request.
|
|
</>
|
|
)
|
|
break
|
|
}
|
|
}
|
|
return (
|
|
<Modal
|
|
title={title}
|
|
open={isModalOpened}
|
|
onClose={handleCloseModal}
|
|
withCloseButton={false}
|
|
PaperProps={{
|
|
sx: {
|
|
minHeight: '60%',
|
|
},
|
|
}}
|
|
>
|
|
<Stack height={'100%'} gap={2}>
|
|
<Typography flex={1}>{explanationText}</Typography>
|
|
<Button fullWidth onClick={handleCloseModal}>
|
|
Got it!
|
|
</Button>
|
|
</Stack>
|
|
</Modal>
|
|
)
|
|
}
|