add donate button

src/components/event-zap-modal/index.tsx

@@ -28,6 +28,7 @@ import signingService from "../../services/signing";
 import accountService from "../../services/account";
 import PayStep from "./pay-step";
 import { getInvoiceFromCallbackUrl } from "../../helpers/lnurl";
+import { UserLink } from "../user-link";
 
 export type PayRequest = { invoice?: string; pubkey: string; error?: any };
 
@@ -199,7 +200,13 @@ export default function ZapModal({
       <ModalContent>
         <ModalCloseButton />
         <ModalHeader px="4" pb="0" pt="4">
-          Zap Event
+          {event ? (
+            "Zap Event"
+          ) : (
+            <>
+              Zap <UserLink pubkey={pubkey} fontWeight="bold" />
+            </>
+          )}
         </ModalHeader>
         <ModalBody padding="4">{renderContent()}</ModalBody>
       </ModalContent>

src/components/layout/nav-items.tsx

@@ -1,7 +1,6 @@
-import { Box, Button, ButtonProps, Text } from "@chakra-ui/react";
-import { useLocation } from "react-router-dom";
+import { Box, Button, ButtonProps, Link, Text, useDisclosure } from "@chakra-ui/react";
+import { Link as RouterLink, useLocation } from "react-router-dom";
 import { nip19 } from "nostr-tools";
-import { Link as RouterLink } from "react-router-dom";
 
 import {
   BadgeIcon,
@@ -23,11 +22,17 @@ import {
 } from "../icons";
 import useCurrentAccount from "../../hooks/use-current-account";
 import accountService from "../../services/account";
+import { useLocalStorage } from "react-use";
+import ZapModal from "../event-zap-modal";
+import dayjs from "dayjs";
 
 export default function NavItems() {
   const location = useLocation();
   const account = useCurrentAccount();
 
+  const donateModal = useDisclosure();
+  const [lastDonate, setLastDonate] = useLocalStorage<number>("last-donate");
+
   const buttonProps: ButtonProps = {
     py: "2",
     justifyContent: "flex-start",
@@ -198,9 +203,29 @@ export default function NavItems() {
       >
         Settings
       </Button>
-      {/* <Button leftIcon={<LightningIcon boxSize={6} color="yellow.400" />} {...buttonProps}>
-        Donate
-      </Button> */}
+      {(lastDonate === undefined || dayjs.unix(lastDonate).isBefore(dayjs().subtract(1, "week"))) && (
+        <Button
+          as={Link}
+          leftIcon={<LightningIcon boxSize={6} color="yellow.400" />}
+          href="https://geyser.fund/project/nostrudel"
+          isExternal
+          onClick={(e) => {
+            e.preventDefault();
+            donateModal.onOpen();
+          }}
+          {...buttonProps}
+        >
+          Donate
+        </Button>
+      )}
+      {donateModal.isOpen && (
+        <ZapModal
+          isOpen
+          pubkey="713978c3094081b34fcf2f5491733b0c22728cd3b7a6946519d40f5f08598af8"
+          onClose={donateModal.onClose}
+          onZapped={() => setLastDonate(dayjs().unix())}
+        />
+      )}
       {account && (
         <Button onClick={() => accountService.logout()} leftIcon={<LogoutIcon boxSize={6} />} {...buttonProps}>
           Logout