Add explanations, make login name lowercase, add nostrapp link

src/components/Modal/ModalConfirmConnect/ModalConfirmConnect.tsx

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

src/components/Modal/ModalConnectApp/ModalConnectApp.tsx

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

src/components/Modal/ModalExplanation/ModalExplanation.tsx

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

src/components/Modal/ModalImportKeys/ModalImportKeys.tsx

@@ -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"
+          label="Paste your private key"
-          placeholder="Your NSEC"
+          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>

src/components/Modal/ModalInitial/ModalInitial.tsx

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

src/pages/KeyPage/Key.Page.tsx

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

src/pages/KeyPage/components/Apps.tsx

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

src/types/modal.ts

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

src/utils/helpers/helpers.ts

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