Add explanations, make login name lowercase, add nostrapp link
This commit is contained in:
parent
72d561f8c9
commit
ec544a0592
@ -38,7 +38,7 @@ export const ModalConfirmConnect = () => {
|
||||
const { name, url = '', icon = '' } = triggerApp || {}
|
||||
|
||||
let appUrl = url || searchParams.get('appUrl') || ''
|
||||
console.log('referrer', window.document.referrer, appUrl)
|
||||
// console.log('referrer', window.document.referrer, appUrl)
|
||||
if (!appUrl && window.document.referrer) {
|
||||
try {
|
||||
const u = new URL(window.document.referrer)
|
||||
|
@ -7,7 +7,7 @@ import { InputCopyButton } from '@/shared/InputCopyButton/InputCopyButton'
|
||||
import { Modal } from '@/shared/Modal/Modal'
|
||||
import { selectKeys } from '@/store'
|
||||
import { useAppSelector } from '@/store/hooks/redux'
|
||||
import { MODAL_PARAMS_KEYS } from '@/types/modal'
|
||||
import { EXPLANATION_MODAL_KEYS, MODAL_PARAMS_KEYS } from '@/types/modal'
|
||||
import { getBunkerLink } from '@/utils/helpers/helpers'
|
||||
import { Stack, Typography } from '@mui/material'
|
||||
import { useRef } from 'react'
|
||||
@ -69,7 +69,10 @@ export const ModalConnectApp = () => {
|
||||
value={bunkerStr}
|
||||
endAdornment={<InputCopyButton value={bunkerStr} onCopy={handleCopy} />}
|
||||
/>
|
||||
<AppLink title="What is this?" onClick={() => handleOpen(MODAL_PARAMS_KEYS.EXPLANATION)} />
|
||||
<AppLink
|
||||
title="What is this?"
|
||||
onClick={() => handleOpen(MODAL_PARAMS_KEYS.EXPLANATION, { search: { type: EXPLANATION_MODAL_KEYS.BUNKER } })}
|
||||
/>
|
||||
<Button fullWidth onClick={handleShareBunker}>
|
||||
Share it
|
||||
</Button>
|
||||
|
@ -1,7 +1,7 @@
|
||||
import { FC } from 'react'
|
||||
import { useModalSearchParams } from '@/hooks/useModalSearchParams'
|
||||
import { Modal } from '@/shared/Modal/Modal'
|
||||
import { MODAL_PARAMS_KEYS } from '@/types/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'
|
||||
@ -10,7 +10,7 @@ type ModalExplanationProps = {
|
||||
explanationText?: string
|
||||
}
|
||||
|
||||
export const ModalExplanation: FC<ModalExplanationProps> = ({ explanationText = '' }) => {
|
||||
export const ModalExplanation: FC<ModalExplanationProps> = () => {
|
||||
const { getModalOpened } = useModalSearchParams()
|
||||
const isModalOpened = getModalOpened(MODAL_PARAMS_KEYS.EXPLANATION)
|
||||
const [searchParams, setSearchParams] = useSearchParams()
|
||||
@ -18,21 +18,76 @@ export const ModalExplanation: FC<ModalExplanationProps> = ({ explanationText =
|
||||
const handleCloseModal = () => {
|
||||
searchParams.delete('type')
|
||||
searchParams.delete(MODAL_PARAMS_KEYS.EXPLANATION)
|
||||
setSearchParams(searchParams)
|
||||
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="What is this?"
|
||||
title={title}
|
||||
open={isModalOpened}
|
||||
onClose={handleCloseModal}
|
||||
withCloseButton={false}
|
||||
PaperProps={{
|
||||
sx: {
|
||||
minHeight: '60%',
|
||||
},
|
||||
}}
|
||||
>
|
||||
<Stack height={'100%'}>
|
||||
<Stack height={'100%'} gap={2}>
|
||||
<Typography flex={1}>{explanationText}</Typography>
|
||||
<Button fullWidth onClick={handleCloseModal}>
|
||||
Got it!
|
||||
|
@ -106,11 +106,11 @@ export const ModalImportKeys = () => {
|
||||
<Stack direction={'row'} gap={'1rem'} alignItems={'center'} alignSelf={'flex-start'}>
|
||||
<StyledAppLogo />
|
||||
<Typography fontWeight={600} variant="h5">
|
||||
Import keys
|
||||
Import key
|
||||
</Typography>
|
||||
</Stack>
|
||||
<Input
|
||||
label="Username"
|
||||
label="Choose a username"
|
||||
fullWidth
|
||||
placeholder="Enter a Username"
|
||||
endAdornment={<Typography color={'#FFFFFFA8'}>@{DOMAIN}</Typography>}
|
||||
@ -131,16 +131,24 @@ export const ModalImportKeys = () => {
|
||||
}}
|
||||
/>
|
||||
<Input
|
||||
label="Enter a NSEC"
|
||||
placeholder="Your NSEC"
|
||||
label="Paste your private key"
|
||||
placeholder="nsec1..."
|
||||
fullWidth
|
||||
{...register('nsec')}
|
||||
error={!!errors.nsec}
|
||||
{...inputProps}
|
||||
helperText="Keys stay on your device."
|
||||
helperTextProps={{
|
||||
sx: {
|
||||
'&.helper_text': {
|
||||
color: theme.palette.textSecondaryDecorate.main,
|
||||
},
|
||||
},
|
||||
}}
|
||||
/>
|
||||
|
||||
<Button type="submit" disabled={isLoading}>
|
||||
Import nsec {isLoading && <CircularProgress sx={{ marginLeft: '0.5rem' }} size={'1rem'} />}
|
||||
Import key {isLoading && <CircularProgress sx={{ marginLeft: '0.5rem' }} size={'1rem'} />}
|
||||
</Button>
|
||||
</Stack>
|
||||
</Modal>
|
||||
|
@ -35,7 +35,7 @@ export const ModalInitial = () => {
|
||||
|
||||
{showAdvancedContent && (
|
||||
<Fade in>
|
||||
<Button onClick={() => handleOpen(MODAL_PARAMS_KEYS.IMPORT_KEYS)}>Import keys</Button>
|
||||
<Button onClick={() => handleOpen(MODAL_PARAMS_KEYS.IMPORT_KEYS)}>Import key</Button>
|
||||
</Fade>
|
||||
)}
|
||||
</Stack>
|
||||
|
@ -56,7 +56,7 @@ const KeyPage = () => {
|
||||
title="Your login"
|
||||
value={username}
|
||||
copyValue={username}
|
||||
explanationType={EXPLANATION_MODAL_KEYS.NPUB}
|
||||
explanationType={EXPLANATION_MODAL_KEYS.LOGIN}
|
||||
/>
|
||||
<UserValueSection
|
||||
title="Your NPUB"
|
||||
|
@ -26,18 +26,22 @@ export const Apps: FC<AppsProps> = ({ apps = [] }) => {
|
||||
})
|
||||
}
|
||||
|
||||
const openAppStore = () => {
|
||||
window.open('https://nostrapp.link', '_blank')
|
||||
}
|
||||
|
||||
return (
|
||||
<Box flex={1} marginBottom={'1rem'} display={'flex'} flexDirection={'column'} overflow={'auto'}>
|
||||
<Stack direction={'row'} alignItems={'center'} justifyContent={'space-between'} marginBottom={'0.5rem'}>
|
||||
<SectionTitle>Connected apps</SectionTitle>
|
||||
<AppLink title="Discover Apps" />
|
||||
<AppLink title="Discover Apps" onClick={openAppStore} />
|
||||
</Stack>
|
||||
{!apps.length && (
|
||||
<StyledEmptyAppsBox>
|
||||
<Typography className="message" variant="h5" fontWeight={600} textAlign={'center'}>
|
||||
No connected apps
|
||||
</Typography>
|
||||
<Button>Discover Nostr Apps</Button>
|
||||
<Button onClick={openAppStore}>Discover Nostr Apps</Button>
|
||||
</StyledEmptyAppsBox>
|
||||
)}
|
||||
|
||||
|
@ -15,4 +15,5 @@ export enum MODAL_PARAMS_KEYS {
|
||||
export enum EXPLANATION_MODAL_KEYS {
|
||||
BUNKER = 'bunker',
|
||||
NPUB = 'npub',
|
||||
LOGIN = 'login',
|
||||
}
|
||||
|
@ -80,7 +80,7 @@ export function isPackagePerm(perm: string, reqPerm: string) {
|
||||
|
||||
export async function fetchNip05(value: string, origin?: string) {
|
||||
try {
|
||||
const [username, domain] = value.split('@')
|
||||
const [username, domain] = value.toLocaleLowerCase().split('@')
|
||||
if (!origin) origin = `https://${domain}`
|
||||
const response = await fetch(`${origin}/.well-known/nostr.json?name=${username}`)
|
||||
const getNpub: {
|
||||
|
Loading…
x
Reference in New Issue
Block a user