From f3d1cc92b3fcd909d5e0ab920c82a54b73758c87 Mon Sep 17 00:00:00 2001
From: sajald77 <sazzaldulal@gmail.com>
Date: Wed, 25 Sep 2024 15:40:01 -0400
Subject: [PATCH 1/2] feat: create modal for lightning and npub

---
 .../views/body/sections/header/Header.tsx     |  8 +-
 .../header/components/LightningAddress.tsx    | 63 +++++++-------
 .../components/LightningAddressModal.tsx      | 84 +++++++++++++++++++
 .../header/components/NpubDisplay.tsx         | 41 +++++----
 4 files changed, 143 insertions(+), 53 deletions(-)
 create mode 100644 src/modules/project/pages1/projectView/views/body/sections/header/components/LightningAddressModal.tsx

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 = () => {
             </H1>
 
             <HStack w="full" flexWrap={'wrap'}>
-              <HStack spacing={0.5} maxWidth="full">
-                <LightningAddress name={`${project.name}`} isGeyser />
-                <NpubDisplay npub={project?.keys?.nostrKeys.publicKey.npub} />
-              </HStack>
+              <LightningAddressModal name={`${project.name}`} npub={project?.keys?.nostrKeys.publicKey.npub} />
               <CreatorSocial />
             </HStack>
 
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..bc8380ced 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,7 @@
-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 { Body } from '../../../../../../../../../shared/components/typography'
 import { copyTextToClipboard } from '../../../../../../../../../utils'
@@ -13,10 +13,9 @@ interface ILightningQR extends ButtonProps {
 
 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 (
-    <>
-      <Tooltip
-        label={copy ? t('Copied!') : t('Copy Lightning Address / Nostr identifier (NIP-05)')}
-        placement="top"
-        closeOnClick={false}
-        isOpen={isOpen}
+    <HStack w="full">
+      <Button
+        id="lightning-address"
+        size="md"
+        variant={copy ? 'solid' : 'soft'}
+        colorScheme="primary1"
+        leftIcon={<Icon as={PiLightning} fontSize={'18px'} />}
+        onClick={handleAddressCopy}
+        {...rest}
       >
-        <Button
-          id="lightning-address"
-          size="sm"
-          variant="soft"
-          colorScheme="primary1"
-          leftIcon={<PiLightning />}
-          onClick={handleAddressCopy}
-          onMouseEnter={onOpen}
-          onMouseLeave={onClose}
-          {...rest}
-        >
-          <Body size="sm" medium isTruncated flex={1}>
-            {name}
+        <Body size="md" medium isTruncated>
+          {name}
+        </Body>
+        {isGeyser && (
+          <Body size="md" medium>
+            {GEYSER_DOMAIN_POSTFIX}
           </Body>
-          {isGeyser && (
-            <Body size="sm" medium>
-              {GEYSER_DOMAIN_POSTFIX}
-            </Body>
-          )}
-        </Button>
-      </Tooltip>
-    </>
+        )}
+      </Button>
+      <Button
+        minWidth={24}
+        size="md"
+        variant="solid"
+        colorScheme="primary1"
+        rightIcon={<PiCopy />}
+        onClick={handleAddressCopy}
+      >
+        {copy ? t('Copied') : t('Copy')}
+      </Button>
+    </HStack>
   )
 }
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..47e65aa74
--- /dev/null
+++ b/src/modules/project/pages1/projectView/views/body/sections/header/components/LightningAddressModal.tsx
@@ -0,0 +1,84 @@
+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 { 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 GEYSER_DOMAIN_POSTFIX = '@geyser.fund'
+
+export const LightningAddressModal = ({ name, npub, ...rest }: LightningAddressModalProps) => {
+  const { t } = useTranslation()
+
+  const lightningAddressModal = useModal()
+
+  return (
+    <>
+      <Button
+        id="lightning-address"
+        size="sm"
+        variant="soft"
+        colorScheme="primary1"
+        leftIcon={<PiLightning fontSize={'16px'} />}
+        onClick={lightningAddressModal.onOpen}
+        {...rest}
+      >
+        <Body size="sm" medium isTruncated flex={1}>
+          {name}
+        </Body>
+
+        <Body size="sm" medium>
+          {GEYSER_DOMAIN_POSTFIX}
+        </Body>
+      </Button>
+
+      <Modal
+        size="lg"
+        {...lightningAddressModal}
+        title={t('Lightning address & NPUB')}
+        bodyProps={{ as: VStack, gap: 6 }}
+      >
+        <VStack w="full" spacing={3}>
+          <VStack w="full" alignItems={'start'} spacing={0}>
+            <Body size="sm">{t('A Lightning Address is an email-like identifier for receiving Bitcoin.')}</Body>
+            <UnorderedList>
+              <ListItem>
+                <Body size="sm">
+                  {t(
+                    'Add this Lightning Address to your Nostr profile for this project to get “zapped” (tipped) directly by other users',
+                  )}
+                </Body>
+              </ListItem>
+              <ListItem>
+                <Body size="sm">
+                  {t('Share your Geyser Lightning address with anyone, and they can fund you through it instantly.')}
+                </Body>
+              </ListItem>
+            </UnorderedList>
+          </VStack>
+          <LightningAddress flex={1} name={name} />
+        </VStack>
+        {npub && (
+          <VStack w="full" spacing={3}>
+            <Body size="sm">
+              {t(
+                "Nostr npub is your project's unique identifier on the censorship-resistant, decentralized Nostr social network.",
+              )}
+            </Body>
+
+            <NpubDisplay npub={npub} />
+          </VStack>
+        )}
+      </Modal>
+    </>
+  )
+}
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 (
-    <Tooltip label={copy ? t('Copied!') : t('Copy')} placement="top-start" closeOnClick={false} isOpen={isOpen}>
-      <IconButton
-        size="sm"
+    <HStack w="full">
+      <Button
+        size="md"
         aria-label="nostr-icon"
-        variant="soft"
-        colorScheme="primary1"
-        onMouseEnter={onOpen}
-        onMouseLeave={onClose}
-        _hover={{ bgColor: copy ? 'primary1.9' : undefined }}
-        icon={<NostrIcon height="16px" width="16px" />}
+        variant={copy ? 'solid' : 'soft'}
+        colorScheme="violet"
+        leftIcon={<NostrIcon height="18px" width="18px" />}
         onClick={handleOnCopy}
         {...rest}
       >
-        {}
-      </IconButton>
-    </Tooltip>
+        <Body size="md" medium isTruncated flex={1}>
+          {npub}
+        </Body>
+      </Button>
+      <Button
+        minWidth={24}
+        size="md"
+        variant="solid"
+        colorScheme="primary1"
+        rightIcon={<PiCopy />}
+        onClick={handleOnCopy}
+        isTruncated
+      >
+        {copy ? t('Copied') : t('Copy')}
+      </Button>
+    </HStack>
   )
 }

From d21ff1850b6e5cc5f3ea0a1a750c61fb3e0ef398 Mon Sep 17 00:00:00 2001
From: sajald77 <sazzaldulal@gmail.com>
Date: Wed, 9 Oct 2024 08:33:36 +0545
Subject: [PATCH 2/2] fix: move geyser domain postfix to constants folder

---
 .../body/sections/header/components/LightningAddress.tsx      | 4 ++--
 .../body/sections/header/components/LightningAddressModal.tsx | 3 +--
 src/shared/constants/platform/domain.ts                       | 1 +
 3 files changed, 4 insertions(+), 4 deletions(-)
 create mode 100644 src/shared/constants/platform/domain.ts

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 bc8380ced..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
@@ -3,6 +3,8 @@ import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 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,8 +13,6 @@ interface ILightningQR extends ButtonProps {
   isGeyser?: boolean
 }
 
-export const GEYSER_DOMAIN_POSTFIX = '@geyser.fund'
-
 export const LightningAddress = ({ name, isGeyser = true, ...rest }: ILightningQR) => {
   const { t } = useTranslation()
   const [copy, setCopy] = useState(false)
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
index 47e65aa74..7760fd247 100644
--- 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
@@ -3,6 +3,7 @@ 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'
@@ -14,8 +15,6 @@ interface LightningAddressModalProps extends ButtonProps {
   npub?: string
 }
 
-export const GEYSER_DOMAIN_POSTFIX = '@geyser.fund'
-
 export const LightningAddressModal = ({ name, npub, ...rest }: LightningAddressModalProps) => {
   const { t } = useTranslation()
 
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'