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={}
/>
- handleOpen(MODAL_PARAMS_KEYS.EXPLANATION)} />
+ handleOpen(MODAL_PARAMS_KEYS.EXPLANATION, { search: { type: EXPLANATION_MODAL_KEYS.BUNKER } })}
+ />
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 = ({ explanationText = '' }) => {
+export const ModalExplanation: FC = () => {
const { getModalOpened } = useModalSearchParams()
const isModalOpened = getModalOpened(MODAL_PARAMS_KEYS.EXPLANATION)
const [searchParams, setSearchParams] = useSearchParams()
@@ -18,21 +18,76 @@ export const ModalExplanation: FC = ({ 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.
+
+
+ It is your global unique identifier on the Nostr network, and is derived from your private key.
+
+
+ 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.
+
+
+ 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).
+
+
+ Use your username to log in to Nostr apps.
+
+
+ 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.
+
+
+ Some apps require bunker URL to connect to your keys. Paste it to the app and then confirm a connection
+ request.
+ >
+ )
+ break
+ }
+ }
return (
-
+
{explanationText}
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 && (
- handleOpen(MODAL_PARAMS_KEYS.IMPORT_KEYS)}>Import keys
+ handleOpen(MODAL_PARAMS_KEYS.IMPORT_KEYS)}>Import key
)}
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}
/>
= ({ apps = [] }) => {
})
}
+ const openAppStore = () => {
+ window.open('https://nostrapp.link', '_blank')
+ }
+
return (
Connected apps
-
+
{!apps.length && (
No connected apps
- Discover Nostr Apps
+ Discover Nostr Apps
)}
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: {