client-web: initial support for lightning zaps (NIP-57)

README.md

@@ -574,7 +574,7 @@ client.listen(async (payload) => {
 
  if (success) {
  // Make ZAP request
- const { p: invoice, event } = await recipient.makeZapRequest(
+ const { pr: invoice, event } = await recipient.makeZapRequest(
  {
  relayUrls: ["wss://nostr.rocks"],
  amount: 1000,

client-web/package.json

@@ -23,6 +23,7 @@
  "idb": "^7.1.1",
  "mdi-react": "^9.2.0",
  "nanoid": "^3.0.0",
+ "qrcode.react": "^3.1.0",
  "react": "^18.2.0",
  "react-dom": "^18.2.0",
  "react-inlinesvg": "^4.0.3",

client-web/src/components/event.tsx

@@ -26,6 +26,7 @@ import { NSFWContentToggle } from "./event/nsfw-toggle";
 import { EventCardFooter } from "./event/card-footer";
 import { EventBanner } from "./event/banner";
 import { User } from "./user";
+import { ZapModal } from "./event/zap-modal";
 
 export interface EventProps {
  data: LightProcessedEvent;
@@ -90,6 +91,12 @@ export function Event({ data, level }: EventProps) {
  onClose: onRepliesClose,
  } = useDisclosure();
 
+ const {
+ isOpen: zapModalIsOpen,
+ onOpen: onZapModalOpen,
+ onClose: onZapModalClose,
+ } = useDisclosure();
+
  const toast = useToast();
 
  useEffect(() => {
@@ -158,7 +165,10 @@ export function Event({ data, level }: EventProps) {
  /**
  * Quote or react to an event
  */
- const newAction = async (type: "quote" | "reaction", reaction?: string) => {
+ const newAction = async (
+ type: "quote" | "reaction" | "zap",
+ reaction?: string
+ ) => {
  const relay = await relatedRelay();
 
  let ev: NEvent;
@@ -181,6 +191,9 @@ export function Event({ data, level }: EventProps) {
  relayUrl: relay ? relay.url : undefined,
  });
  break;
+ case "zap":
+ onZapModalOpen();
+ return;
  default:
  return;
  }
@@ -275,6 +288,12 @@ export function Event({ data, level }: EventProps) {
  isOpen={isInfoModalOpen}
  onClose={onInfoModalClose}
  />
+ <ZapModal
+ user={user}
+ relatedEvent={data.event}
+ isOpen={zapModalIsOpen}
+ onClose={onZapModalClose}
+ />
  </>
  );
 }

client-web/src/components/event/action-buttons.tsx

@@ -19,7 +19,7 @@ export interface EventActionButtonsProps {
  isReplyOpen: boolean;
  onReplyOpen: () => void;
  onReplyClose: () => void;
- onAction: (type: "quote" | "reaction", reaction?: string) => void;
+ onAction: (type: "quote" | "reaction" | "zap", reaction?: string) => void;
 }
 
 export function EventActionButtons({
@@ -87,6 +87,7 @@ export function EventActionButtons({
  color="gray.500"
  aria-label="ZAP"
  leftIcon={<Icon as={CurrencyBtcIcon} />}
+ onClick={() => onAction("zap")}
  isDisabled={!isReady}
  >
  {zapReceiptCount} ({zapReceiptAmount})

client-web/src/components/event/card-footer.tsx

@@ -34,7 +34,7 @@ export interface CardFooterProps {
  onInfoModalOpen: () => void;
  onInfoModalClose: () => void;
 
- onAction: (type: "quote" | "reaction", reaction?: string) => void;
+ onAction: (type: "quote" | "reaction" | "zap", reaction?: string) => void;
 }
 
 export const EventCardFooter = ({

client-web/src/components/event/zap-modal.tsx

@@ -0,0 +1,48 @@
+import {
+ Button,
+ Modal,
+ ModalBody,
+ ModalCloseButton,
+ ModalContent,
+ ModalFooter,
+ ModalHeader,
+ ModalOverlay,
+} from "@chakra-ui/react";
+import { Zap } from "./zap";
+import { UserBase, EventBaseSigned } from "@nostr-ts/common";
+
+interface ZapModalProps {
+ user: UserBase;
+ relatedEvent?: EventBaseSigned;
+ isOpen: boolean;
+ onClose: () => void;
+}
+
+export const ZapModal = ({
+ user,
+ relatedEvent,
+ isOpen,
+ onClose,
+}: ZapModalProps) => {
+ return (
+ <Modal isOpen={isOpen} onClose={onClose}>
+ <ModalOverlay />
+ <ModalContent maxWidth={300}>
+ <ModalHeader>Send sats (WIP)</ModalHeader>
+ <ModalCloseButton />
+ <ModalBody>
+ <Zap
+ user={user}
+ relatedEvent={relatedEvent}
+ onConfirmPayment={onClose}
+ />
+ </ModalBody>
+ <ModalFooter>
+ <Button variant="outline" onClick={onClose}>
+ Close
+ </Button>
+ </ModalFooter>
+ </ModalContent>
+ </Modal>
+ );
+};