From ec544a059252edf12f3d1d310149e6a5eff7b025 Mon Sep 17 00:00:00 2001
From: artur <brugeman.artur@gmail.com>
Date: Mon, 12 Feb 2024 10:26:21 +0300
Subject: [PATCH] Add explanations, make login name lowercase, add nostrapp
 link

---
 .../ModalConfirmConnect.tsx                   |  2 +-
 .../Modal/ModalConnectApp/ModalConnectApp.tsx |  7 +-
 .../ModalExplanation/ModalExplanation.tsx     | 65 +++++++++++++++++--
 .../Modal/ModalImportKeys/ModalImportKeys.tsx | 18 +++--
 .../Modal/ModalInitial/ModalInitial.tsx       |  2 +-
 src/pages/KeyPage/Key.Page.tsx                |  2 +-
 src/pages/KeyPage/components/Apps.tsx         |  8 ++-
 src/types/modal.ts                            |  1 +
 src/utils/helpers/helpers.ts                  |  2 +-
 9 files changed, 89 insertions(+), 18 deletions(-)

diff --git a/src/components/Modal/ModalConfirmConnect/ModalConfirmConnect.tsx b/src/components/Modal/ModalConfirmConnect/ModalConfirmConnect.tsx
index 37ae255..e52cbeb 100644
--- a/src/components/Modal/ModalConfirmConnect/ModalConfirmConnect.tsx
+++ b/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)
diff --git a/src/components/Modal/ModalConnectApp/ModalConnectApp.tsx b/src/components/Modal/ModalConnectApp/ModalConnectApp.tsx
index e820134..bcc4e42 100644
--- a/src/components/Modal/ModalConnectApp/ModalConnectApp.tsx
+++ b/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>
diff --git a/src/components/Modal/ModalExplanation/ModalExplanation.tsx b/src/components/Modal/ModalExplanation/ModalExplanation.tsx
index 2a788ff..f0153a4 100644
--- a/src/components/Modal/ModalExplanation/ModalExplanation.tsx
+++ b/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!
diff --git a/src/components/Modal/ModalImportKeys/ModalImportKeys.tsx b/src/components/Modal/ModalImportKeys/ModalImportKeys.tsx
index 5cf16df..bf33ab7 100644
--- a/src/components/Modal/ModalImportKeys/ModalImportKeys.tsx
+++ b/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"
-          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>
diff --git a/src/components/Modal/ModalInitial/ModalInitial.tsx b/src/components/Modal/ModalInitial/ModalInitial.tsx
index 01cbcfa..98fa617 100644
--- a/src/components/Modal/ModalInitial/ModalInitial.tsx
+++ b/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>
diff --git a/src/pages/KeyPage/Key.Page.tsx b/src/pages/KeyPage/Key.Page.tsx
index d39ebd2..c08c65f 100644
--- a/src/pages/KeyPage/Key.Page.tsx
+++ b/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"
diff --git a/src/pages/KeyPage/components/Apps.tsx b/src/pages/KeyPage/components/Apps.tsx
index bba05bc..c8a90e0 100644
--- a/src/pages/KeyPage/components/Apps.tsx
+++ b/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>
       )}
 
diff --git a/src/types/modal.ts b/src/types/modal.ts
index df950c3..bf50959 100644
--- a/src/types/modal.ts
+++ b/src/types/modal.ts
@@ -15,4 +15,5 @@ export enum MODAL_PARAMS_KEYS {
 export enum EXPLANATION_MODAL_KEYS {
   BUNKER = 'bunker',
   NPUB = 'npub',
+  LOGIN = 'login',
 }
diff --git a/src/utils/helpers/helpers.ts b/src/utils/helpers/helpers.ts
index 1ffba4b..72fed38 100644
--- a/src/utils/helpers/helpers.ts
+++ b/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: {