diff --git a/src/modules/project/pages1/projectView/views/body/sections/header/Header.tsx b/src/modules/project/pages1/projectView/views/body/sections/header/Header.tsx
index 24d1b51a6..351ea47db 100644
--- a/src/modules/project/pages1/projectView/views/body/sections/header/Header.tsx
+++ b/src/modules/project/pages1/projectView/views/body/sections/header/Header.tsx
@@ -40,8 +40,7 @@ import { useProjectAtom, useWalletAtom } from '../../../../../../hooks/useProjec
import { FollowButton } from '../../components'
import { CreatorEditButton } from '../../components/CreatorEditButton'
import { CreatorSocial } from './components/CreatorSocial'
-import { LightningAddress } from './components/LightningAddress'
-import { NpubDisplay } from './components/NpubDisplay'
+import { LightningAddressModal } from './components/LightningAddressModal'
import { ShareProjectButton } from './components/ShareProjectButton'
export const Header = () => {
@@ -160,10 +159,7 @@ export const Header = () => {
-
-
-
-
+
diff --git a/src/modules/project/pages1/projectView/views/body/sections/header/components/LightningAddress.tsx b/src/modules/project/pages1/projectView/views/body/sections/header/components/LightningAddress.tsx
index f765d12dc..4bf4c0346 100644
--- a/src/modules/project/pages1/projectView/views/body/sections/header/components/LightningAddress.tsx
+++ b/src/modules/project/pages1/projectView/views/body/sections/header/components/LightningAddress.tsx
@@ -1,7 +1,9 @@
-import { Button, ButtonProps, Tooltip, useDisclosure } from '@chakra-ui/react'
+import { Button, ButtonProps, HStack, Icon } from '@chakra-ui/react'
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
-import { PiLightning } from 'react-icons/pi'
+import { PiCopy, PiLightning } from 'react-icons/pi'
+
+import { GEYSER_DOMAIN_POSTFIX } from '@/shared/constants/platform/domain'
import { Body } from '../../../../../../../../../shared/components/typography'
import { copyTextToClipboard } from '../../../../../../../../../utils'
@@ -11,12 +13,9 @@ interface ILightningQR extends ButtonProps {
isGeyser?: boolean
}
-export const GEYSER_DOMAIN_POSTFIX = '@geyser.fund'
-
-export const LightningAddress = ({ name, isGeyser, ...rest }: ILightningQR) => {
+export const LightningAddress = ({ name, isGeyser = true, ...rest }: ILightningQR) => {
const { t } = useTranslation()
const [copy, setCopy] = useState(false)
- const { isOpen, onOpen, onClose } = useDisclosure()
const handleAddressCopy = () => {
let toCopy = name
@@ -28,39 +27,39 @@ export const LightningAddress = ({ name, isGeyser, ...rest }: ILightningQR) => {
setCopy(true)
setTimeout(() => {
setCopy(false)
- onClose()
}, 2000)
}
return (
- <>
-
+ }
+ onClick={handleAddressCopy}
+ {...rest}
>
- }
- onClick={handleAddressCopy}
- onMouseEnter={onOpen}
- onMouseLeave={onClose}
- {...rest}
- >
-
- {name}
+
+ {name}
+
+ {isGeyser && (
+
+ {GEYSER_DOMAIN_POSTFIX}
- {isGeyser && (
-
- {GEYSER_DOMAIN_POSTFIX}
-
- )}
-
-
-
+ )}
+
+ }
+ onClick={handleAddressCopy}
+ >
+ {copy ? t('Copied') : t('Copy')}
+
+
)
}
diff --git a/src/modules/project/pages1/projectView/views/body/sections/header/components/LightningAddressModal.tsx b/src/modules/project/pages1/projectView/views/body/sections/header/components/LightningAddressModal.tsx
new file mode 100644
index 000000000..7760fd247
--- /dev/null
+++ b/src/modules/project/pages1/projectView/views/body/sections/header/components/LightningAddressModal.tsx
@@ -0,0 +1,83 @@
+import { Button, ButtonProps, ListItem, UnorderedList, VStack } from '@chakra-ui/react'
+import { useTranslation } from 'react-i18next'
+import { PiLightning } from 'react-icons/pi'
+
+import { Modal } from '@/shared/components/layouts'
+import { GEYSER_DOMAIN_POSTFIX } from '@/shared/constants/platform/domain'
+import { useModal } from '@/shared/hooks'
+
+import { Body } from '../../../../../../../../../shared/components/typography'
+import { LightningAddress } from './LightningAddress'
+import { NpubDisplay } from './NpubDisplay'
+
+interface LightningAddressModalProps extends ButtonProps {
+ name: string
+ npub?: string
+}
+
+export const LightningAddressModal = ({ name, npub, ...rest }: LightningAddressModalProps) => {
+ const { t } = useTranslation()
+
+ const lightningAddressModal = useModal()
+
+ return (
+ <>
+ }
+ onClick={lightningAddressModal.onOpen}
+ {...rest}
+ >
+
+ {name}
+
+
+
+ {GEYSER_DOMAIN_POSTFIX}
+
+
+
+
+
+
+ {t('A Lightning Address is an email-like identifier for receiving Bitcoin.')}
+
+
+
+ {t(
+ 'Add this Lightning Address to your Nostr profile for this project to get “zapped” (tipped) directly by other users',
+ )}
+
+
+
+
+ {t('Share your Geyser Lightning address with anyone, and they can fund you through it instantly.')}
+
+
+
+
+
+
+ {npub && (
+
+
+ {t(
+ "Nostr npub is your project's unique identifier on the censorship-resistant, decentralized Nostr social network.",
+ )}
+
+
+
+
+ )}
+
+
+ )
+}
diff --git a/src/modules/project/pages1/projectView/views/body/sections/header/components/NpubDisplay.tsx b/src/modules/project/pages1/projectView/views/body/sections/header/components/NpubDisplay.tsx
index f4fcffe34..b66beee99 100644
--- a/src/modules/project/pages1/projectView/views/body/sections/header/components/NpubDisplay.tsx
+++ b/src/modules/project/pages1/projectView/views/body/sections/header/components/NpubDisplay.tsx
@@ -1,6 +1,9 @@
-import { ButtonProps, IconButton, Tooltip, useDisclosure } from '@chakra-ui/react'
+import { Button, ButtonProps, HStack } from '@chakra-ui/react'
import { useState } from 'react'
import { useTranslation } from 'react-i18next'
+import { PiCopy } from 'react-icons/pi'
+
+import { Body } from '@/shared/components/typography'
import { NostrIcon } from '../../../../../../../../../shared/components/icons'
import { copyTextToClipboard } from '../../../../../../../../../utils'
@@ -13,7 +16,6 @@ interface NpubDisplayProps extends ButtonProps {
export const NpubDisplay = ({ npub, iconOnly, ...rest }: NpubDisplayProps) => {
const { t } = useTranslation()
const [copy, setCopy] = useState(false)
- const { isOpen, onOpen, onClose } = useDisclosure()
const handleCopyPubkey = () => {
copyTextToClipboard(npub)
@@ -24,26 +26,35 @@ export const NpubDisplay = ({ npub, iconOnly, ...rest }: NpubDisplayProps) => {
setCopy(true)
setTimeout(() => {
setCopy(false)
- onClose()
}, 2000)
}
return (
-
-
+ }
+ variant={copy ? 'solid' : 'soft'}
+ colorScheme="violet"
+ leftIcon={}
onClick={handleOnCopy}
{...rest}
>
- {}
-
-
+
+ {npub}
+
+
+ }
+ onClick={handleOnCopy}
+ isTruncated
+ >
+ {copy ? t('Copied') : t('Copy')}
+
+
)
}
diff --git a/src/shared/constants/platform/domain.ts b/src/shared/constants/platform/domain.ts
new file mode 100644
index 000000000..16c76fe2e
--- /dev/null
+++ b/src/shared/constants/platform/domain.ts
@@ -0,0 +1 @@
+export const GEYSER_DOMAIN_POSTFIX = '@geyser.fund'