highperfocused/noauth
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Add explanations, make login name lowercase, add nostrapp link

Browse Source
This commit is contained in:
artur 2024-02-12 10:26:21 +03:00
parent 72d561f8c9
commit ec544a0592
9 changed files with 89 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/Modal/ModalConfirmConnect/ModalConfirmConnect.tsx
View File

@ -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
src/components/Modal/ModalConnectApp/ModalConnectApp.tsx
View File

@ -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>

65
src/components/Modal/ModalExplanation/ModalExplanation.tsx
View File

@ -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!

18
src/components/Modal/ModalImportKeys/ModalImportKeys.tsx
View File

@ -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>

2
src/components/Modal/ModalInitial/ModalInitial.tsx
View File

@ -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>

2
src/pages/KeyPage/Key.Page.tsx
View File

@ -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"

8
src/pages/KeyPage/components/Apps.tsx
View File

@ -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>
)}

1
src/types/modal.ts
View File

@ -15,4 +15,5 @@ export enum MODAL_PARAMS_KEYS {
export enum EXPLANATION_MODAL_KEYS {
BUNKER = 'bunker',
NPUB = 'npub',
LOGIN = 'login',
}

2
src/utils/helpers/helpers.ts
View File

@ -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: {