highperfocused/nostrudel
1
0
Fork 0
mirror of https://github.com/hzrd149/nostrudel.git synced 2025-04-05 18:38:44 +02:00
Code Issues Packages Projects Releases Wiki Activity

clean up zap modal

Browse Source 
show stream image in zap modal
This commit is contained in:
hzrd149 2023-07-02 11:34:50 -05:00
parent 871d6994e0
commit 33acce589e
11 changed files with 162 additions and 234 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

5
.changeset/cold-moons-listen.md Normal file
View File

@ -0,0 +1,5 @@
---
"nostrudel": patch
---
Fixed bug with stream loading wrong chat

5
.changeset/neat-gorillas-push.md Normal file
View File

@ -0,0 +1,5 @@
---
"nostrudel": minor
---
UX improvements to zap modal

6
src/components/icons.tsx
View File

@ -101,7 +101,7 @@ export const LinkItem = createIcon({
export const LightningIcon = createIcon({
displayName: "LightningIcon",
d: "M13 10h7l-9 13v-9H4l9-13z",
defaultProps,
defaultProps: { ...defaultProps, color: "yellow.400" },
});
export const RelayIcon = createIcon({
@ -263,5 +263,5 @@ export const AtIcon = createIcon({
export const LiveStreamIcon = createIcon({
displayName: "LiveStreamIcon",
d: "M16 4C16.5523 4 17 4.44772 17 5V9.2L22.2133 5.55071C22.4395 5.39235 22.7513 5.44737 22.9096 5.6736C22.9684 5.75764 23 5.85774 23 5.96033V18.0397C23 18.3158 22.7761 18.5397 22.5 18.5397C22.3974 18.5397 22.2973 18.5081 22.2133 18.4493L17 14.8V19C17 19.5523 16.5523 20 16 20H2C1.44772 20 1 19.5523 1 19V5C1 4.44772 1.44772 4 2 4H16ZM15 6H3V18H15V6ZM7.4 8.82867C7.47607 8.82867 7.55057 8.85036 7.61475 8.8912L11.9697 11.6625C12.1561 11.7811 12.211 12.0284 12.0924 12.2148C12.061 12.2641 12.0191 12.306 11.9697 12.3375L7.61475 15.1088C7.42837 15.2274 7.18114 15.1725 7.06254 14.9861C7.02169 14.9219 7 14.8474 7 14.7713V9.22867C7 9.00776 7.17909 8.82867 7.4 8.82867ZM21 8.84131L17 11.641V12.359L21 15.1587V8.84131Z",
defaultProps
})
defaultProps,
});

1
src/components/invoice-modal.tsx
View File

@ -31,7 +31,6 @@ export default function InvoiceModal({
await window.webln.sendPayment(invoice);
if (onPaid) onPaid();
onClose();
}
} catch (e) {
if (e instanceof Error) toast({ description: e.message, status: "error" });

0
src/components/note/embeded-note.tsx → src/components/note/embedded-note.tsx
View File

12
src/components/note/note-zap-button.tsx
View File

@ -10,10 +10,12 @@ import eventZapsService from "../../services/event-zaps";
import { NostrEvent } from "../../types/nostr-event";
import { LightningIcon } from "../icons";
import ZapModal from "../zap-modal";
import { useInvoiceModalContext } from "../../providers/invoice-modal";
export default function NoteZapButton({ note, ...props }: { note: NostrEvent } & Omit<ButtonProps, "children">) {
const account = useCurrentAccount();
const metadata = useUserMetadata(note.pubkey);
const { requestPay } = useInvoiceModalContext();
const zaps = useEventZaps(note.id) ?? [];
const parsedZaps = useMemo(() => {
const parsed = [];
@ -29,7 +31,11 @@ export default function NoteZapButton({ note, ...props }: { note: NostrEvent } &
const hasZapped = !!account && parsedZaps.some((zapRequest) => zapRequest.request.pubkey === account.pubkey);
const tipAddress = metadata?.lud06 || metadata?.lud16;
const invoicePaid = () => eventZapsService.requestZaps(note.id, clientRelaysService.getReadUrls(), true);
const handleInvoice = async (invoice: string) => {
onClose();
await requestPay(invoice);
eventZapsService.requestZaps(note.id, clientRelaysService.getReadUrls(), true);
};
return (
<>
@ -44,7 +50,9 @@ export default function NoteZapButton({ note, ...props }: { note: NostrEvent } &
>
{readablizeSats(totalZaps(zaps) / 1000)}
</Button>
{isOpen && <ZapModal isOpen={isOpen} onClose={onClose} event={note} onPaid={invoicePaid} pubkey={note.pubkey} />}
{isOpen && (
<ZapModal isOpen={isOpen} onClose={onClose} event={note} onInvoice={handleInvoice} pubkey={note.pubkey} />
)}
</>
);
}

2
src/components/note/quote-note.tsx
View File

@ -1,6 +1,6 @@
import { useReadRelayUrls } from "../../hooks/use-client-relays";
import useSingleEvent from "../../hooks/use-single-event";
import EmbeddedNote from "./embeded-note";
import EmbeddedNote from "./embedded-note";
import { NoteLink } from "../note-link";
const QuoteNote = ({ noteId, relay }: { noteId: string; relay?: string }) => {

18
src/components/user-tip-button.tsx
View File

@ -1,13 +1,13 @@
import { IconButton, IconButtonProps, useDisclosure, useToast } from "@chakra-ui/react";
import { IconButton, IconButtonProps, useDisclosure } from "@chakra-ui/react";
import { useUserMetadata } from "../hooks/use-user-metadata";
import { LightningIcon } from "./icons";
import { useState } from "react";
import { encodeText } from "../helpers/bech32";
import ZapModal from "./zap-modal";
import { useInvoiceModalContext } from "../providers/invoice-modal";
export const UserTipButton = ({ pubkey, ...props }: { pubkey: string } & Omit<IconButtonProps, "aria-label">) => {
const metadata = useUserMetadata(pubkey);
const { isOpen, onOpen, onClose } = useDisclosure();
const { requestPay } = useInvoiceModalContext();
if (!metadata) return null;
// use lud06 and lud16 fields interchangeably
@ -25,7 +25,17 @@ export const UserTipButton = ({ pubkey, ...props }: { pubkey: string } & Omit<Ic
color="yellow.400"
{...props}
/>
{isOpen && <ZapModal isOpen={isOpen} onClose={onClose} pubkey={pubkey} />}
{isOpen && (
<ZapModal
isOpen={isOpen}
onClose={onClose}
pubkey={pubkey}
onInvoice={async (invoice) => {
await requestPay(invoice);
onClose();
}}
/>
)}
</>
);
};

254
src/components/zap-modal.tsx
View File

@ -1,39 +1,40 @@
import {
Box,
Button,
Flex,
IconButton,
Heading,
Image,
Input,
InputGroup,
InputLeftElement,
Modal,
ModalBody,
ModalCloseButton,
ModalContent,
ModalOverlay,
ModalProps,
Text,
useDisclosure,
useToast,
} from "@chakra-ui/react";
import { useState } from "react";
import { getUserDisplayName } from "../helpers/user-metadata";
import { NostrEvent } from "../types/nostr-event";
import { SubmitHandler, useForm } from "react-hook-form";
import { DraftNostrEvent, NostrEvent } from "../types/nostr-event";
import { useForm } from "react-hook-form";
import { UserAvatar } from "./user-avatar";
import { useUserMetadata } from "../hooks/use-user-metadata";
import { UserLink } from "./user-link";
import { parsePaymentRequest, readablizeSats } from "../helpers/bolt11";
import { ExternalLinkIcon, LightningIcon, QrCodeIcon } from "./icons";
import { nip57 } from "nostr-tools";
import { LightningIcon } from "./icons";
import { Kind } from "nostr-tools";
import clientRelaysService from "../services/client-relays";
import { getEventRelays } from "../services/event-relays";
import { useSigningContext } from "../providers/signing-provider";
import QrCodeSvg from "./qr-code-svg";
import { CopyIconButton } from "./copy-icon-button";
import { useIsMobile } from "../hooks/use-is-mobile";
import appSettings from "../services/app-settings";
import useSubject from "../hooks/use-subject";
import useUserLNURLMetadata from "../hooks/use-user-lnurl-metadata";
import { requestZapInvoice } from "../helpers/zaps";
import { ParsedStream, getATag } from "../helpers/nostr/stream";
import EmbeddedNote from "./note/embedded-note";
import dayjs from "dayjs";
import { unique } from "../helpers/array";
import { useUserRelays } from "../hooks/use-user-relays";
import { RelayMode } from "../classes/relay";
import relayScoreboardService from "../services/relay-scoreboard";
type FormValues = {
amount: number;
@ -41,29 +42,30 @@ type FormValues = {
};
export type ZapModalProps = Omit<ModalProps, "children"> & {
event?: NostrEvent;
pubkey: string;
onPaid?: () => void;
event?: NostrEvent;
stream?: ParsedStream;
initialComment?: string;
initialAmount?: number;
onInvoice: (invoice: string) => void;
};
export default function ZapModal({
event,
pubkey,
stream,
onClose,
onPaid,
initialComment,
initialAmount,
onInvoice,
...props
}: ZapModalProps) {
const isMobile = useIsMobile();
const metadata = useUserMetadata(pubkey);
const { requestSignature } = useSigningContext();
const toast = useToast();
const [promptInvoice, setPromptInvoice] = useState<string>();
const { isOpen: showQr, onToggle: toggleQr } = useDisclosure();
const { requestSignature } = useSigningContext();
const { customZapAmounts } = useSubject(appSettings);
const userReadRelays = useUserRelays(pubkey)
.filter((r) => r.mode & RelayMode.READ)
.map((r) => r.url);
const {
register,
@ -84,7 +86,7 @@ export default function ZapModal({
const canZap = lnurlMetadata?.allowsNostr && lnurlMetadata?.nostrPubkey;
const actionName = canZap ? "Zap" : "Tip";
const onSubmitZap: SubmitHandler<FormValues> = async (values) => {
const onSubmitZap = handleSubmit(async (values) => {
try {
if (!tipAddress) throw new Error("No lightning address");
if (lnurlMetadata) {
@ -93,21 +95,29 @@ export default function ZapModal({
if (amountInMilisat > lnurlMetadata.maxSendable) throw new Error("amount to large");
if (amountInMilisat < lnurlMetadata.minSendable) throw new Error("amount to small");
if (canZap) {
const otherRelays = event ? getEventRelays(event.id).value : [];
const readRelays = clientRelaysService.getReadUrls();
const eventRelays = event ? getEventRelays(event.id).value : [];
const eventRelaysRanked = relayScoreboardService.getRankedRelays(eventRelays).slice(0, 4);
const writeRelays = clientRelaysService.getWriteUrls();
const writeRelaysRanked = relayScoreboardService.getRankedRelays(writeRelays).slice(0, 4);
const userReadRelaysRanked = relayScoreboardService.getRankedRelays(userReadRelays).slice(0, 4);
const zapRequest = nip57.makeZapRequest({
profile: pubkey,
event: event?.id ?? null,
relays: [...otherRelays, ...readRelays],
amount: amountInMilisat,
comment: values.comment,
});
const zapRequest: DraftNostrEvent = {
kind: Kind.ZapRequest,
created_at: dayjs().unix(),
content: values.comment,
tags: [
["p", pubkey],
["relays", ...unique([...writeRelaysRanked, ...userReadRelaysRanked, ...eventRelaysRanked])],
["amount", String(amountInMilisat)],
],
};
if (event) zapRequest.tags.push(["e", event.id]);
if (stream) zapRequest.tags.push(["a", getATag(stream)]);
const signed = await requestSignature(zapRequest);
if (signed) {
const payRequest = await requestZapInvoice(signed, lnurlMetadata.callback);
payInvoice(payRequest);
await onInvoice(payRequest);
}
} else {
const callbackUrl = new URL(lnurlMetadata.callback);
@ -119,143 +129,83 @@ export default function ZapModal({
const parsed = parsePaymentRequest(payRequest);
if (parsed.amount !== amountInMilisat) throw new Error("incorrect amount");
payInvoice(payRequest);
await onInvoice(payRequest);
} else throw new Error("Failed to get invoice");
}
} else throw new Error("Failed to get LNURL metadata");
} catch (e) {
if (e instanceof Error) toast({ status: "error", description: e.message });
}
};
const payWithWebLn = async (invoice: string) => {
if (window.webln && invoice) {
if (!window.webln.enabled) await window.webln.enable();
await window.webln.sendPayment(invoice);
toast({
title: actionName + " sent",
status: "success",
duration: 3000,
});
if (onPaid) onPaid();
onClose();
}
};
const payWithApp = async (invoice: string) => {
window.open("lightning:" + invoice);
const listener = () => {
if (document.visibilityState === "visible") {
if (onPaid) onPaid();
onClose();
document.removeEventListener("visibilitychange", listener);
}
};
setTimeout(() => {
document.addEventListener("visibilitychange", listener);
}, 1000 * 2);
};
const payInvoice = async (invoice: string) => {
if (appSettings.value.autoPayWithWebLN) {
await payWithWebLn(invoice);
}
setPromptInvoice(invoice);
};
const handleClose = () => {
// if there was an invoice and we are closing the modal. presume it was paid
if (promptInvoice && onPaid) {
onPaid();
}
onClose();
};
});
return (
<Modal onClose={handleClose} {...props}>
<Modal onClose={onClose} size="xl" {...props}>
<ModalOverlay />
<ModalContent>
<ModalCloseButton />
<ModalBody padding="4">
{promptInvoice ? (
<form onSubmit={onSubmitZap}>
<Flex gap="4" direction="column">
{showQr && <QrCodeSvg content={promptInvoice} />}
<Flex gap="2">
<Input value={promptInvoice} readOnly />
<IconButton
icon={<QrCodeIcon />}
aria-label="Show QrCode"
onClick={toggleQr}
variant="solid"
size="md"
/>
<CopyIconButton text={promptInvoice} aria-label="Copy Invoice" variant="solid" size="md" />
<Flex gap="2" alignItems="center">
<UserAvatar pubkey={pubkey} size="md" />
<Box>
<UserLink pubkey={pubkey} fontWeight="bold" />
<Text>{tipAddress}</Text>
</Box>
</Flex>
{stream && (
<Box>
<Heading size="sm" mb="2">
Stream: {stream.title}
</Heading>
{stream.image && <Image src={stream.image} />}
</Box>
)}
{event && <EmbeddedNote note={event} />}
{(canZap || lnurlMetadata?.commentAllowed) && (
<Input
placeholder="Comment"
{...register("comment", { maxLength: lnurlMetadata?.commentAllowed ?? 150 })}
autoComplete="off"
autoFocus={!initialComment}
/>
)}
<Flex gap="2" alignItems="center" flexWrap="wrap">
{customZapAmounts
.split(",")
.map((v) => parseInt(v))
.map((amount, i) => (
<Button
key={amount + i}
onClick={() => {
setValue("amount", amount);
}}
leftIcon={<LightningIcon color="yellow.400" />}
variant="solid"
>
{amount}
</Button>
))}
</Flex>
<Flex gap="2">
{window.webln && (
<Button onClick={() => payWithWebLn(promptInvoice)} flex={1} variant="solid" size="md">
Pay with WebLN
</Button>
)}
<Button
leftIcon={<ExternalLinkIcon />}
onClick={() => payWithApp(promptInvoice)}
<Input
type="number"
placeholder="Custom amount"
isInvalid={!!errors.amount}
step={1}
flex={1}
variant="solid"
size="md"
>
Open App
{...register("amount", { valueAsNumber: true, min: 1 })}
/>
<Button leftIcon={<LightningIcon />} type="submit" isLoading={isSubmitting} variant="solid" size="md">
{actionName} {readablizeSats(watch("amount"))} sats
</Button>
</Flex>
</Flex>
) : (
<form onSubmit={handleSubmit(onSubmitZap)}>
<Flex gap="4" direction="column">
<Flex gap="2" alignItems="center">
<UserAvatar pubkey={pubkey} size="sm" />
<Text>{actionName}</Text>
<UserLink pubkey={pubkey} />
</Flex>
<Flex gap="2" alignItems="center" flexWrap="wrap">
{customZapAmounts
.split(",")
.map((v) => parseInt(v))
.map((amount, i) => (
<Button key={amount + i} onClick={() => setValue("amount", amount)} size="sm" variant="outline">
{amount}
</Button>
))}
</Flex>
<Flex gap="2">
<InputGroup maxWidth={32}>
{!isMobile && (
<InputLeftElement pointerEvents="none" color="gray.300" fontSize="1.2em">
<LightningIcon fontSize="1rem" color="yellow.400" />
</InputLeftElement>
)}
<Input
type="number"
placeholder="amount"
isInvalid={!!errors.amount}
step={1}
{...register("amount", { valueAsNumber: true, min: 1, required: true })}
/>
</InputGroup>
{(canZap || lnurlMetadata?.commentAllowed) && (
<Input
placeholder="Comment"
{...register("comment", { maxLength: lnurlMetadata?.commentAllowed ?? 150 })}
autoComplete="off"
/>
)}
</Flex>
<Button leftIcon={<LightningIcon />} type="submit" isLoading={isSubmitting} variant="solid" size="md">
{actionName} {getUserDisplayName(metadata, pubkey)} {readablizeSats(watch("amount"))} sats
</Button>
</Flex>
</form>
)}
</form>
</ModalBody>
</ModalContent>
</Modal>

2
src/helpers/nostr/stream.ts
View File

@ -61,7 +61,7 @@ export function parseStreamEvent(stream: NostrEvent): ParsedStream {
}
export function getATag(stream: ParsedStream) {
return `${stream.event.kind}:${stream.author}:${stream.starts}`;
return `${stream.event.kind}:${stream.author}:${stream.identifier}`;
}
export function buildChatMessage(stream: ParsedStream, content: string) {

91
src/views/streams/stream/stream-chat.tsx
View File

@ -11,12 +11,6 @@ import {
Heading,
IconButton,
Input,
Modal,
ModalBody,
ModalCloseButton,
ModalContent,
ModalHeader,
ModalOverlay,
Spacer,
Text,
useDisclosure,
@ -30,7 +24,7 @@ import useSubject from "../../../hooks/use-subject";
import { truncatedId } from "../../../helpers/nostr-event";
import { UserAvatar } from "../../../components/user-avatar";
import { UserLink } from "../../../components/user-link";
import { DraftNostrEvent, NostrEvent } from "../../../types/nostr-event";
import { NostrEvent } from "../../../types/nostr-event";
import IntersectionObserverProvider, { useRegisterIntersectionEntity } from "../../../providers/intersection-observer";
import { useTimelineCurserIntersectionCallback } from "../../../hooks/use-timeline-cursor-intersection-callback";
import { EmbedableContent, embedUrls } from "../../../helpers/embeds";
@ -50,14 +44,13 @@ import { useUserRelays } from "../../../hooks/use-user-relays";
import { RelayMode } from "../../../classes/relay";
import { unique } from "../../../helpers/array";
import { LightningIcon } from "../../../components/icons";
import { parseZapEvent, requestZapInvoice } from "../../../helpers/zaps";
import { parseZapEvent } from "../../../helpers/zaps";
import { readablizeSats } from "../../../helpers/bolt11";
import { Kind } from "nostr-tools";
import useUserLNURLMetadata from "../../../hooks/use-user-lnurl-metadata";
import { useInvoiceModalContext } from "../../../providers/invoice-modal";
import { ImageGalleryProvider } from "../../../components/image-gallery";
import appSettings from "../../../services/app-settings";
import { TrustProvider } from "../../../providers/trust";
import ZapModal from "../../../components/zap-modal";
function ChatMessageContent({ event }: { event: NostrEvent }) {
const content = useMemo(() => {
@ -133,11 +126,10 @@ export default function StreamChat({
actions,
...props
}: CardProps & { stream: ParsedStream; actions?: React.ReactNode }) {
const { customZapAmounts } = useSubject(appSettings);
const toast = useToast();
const contextRelays = useAdditionalRelayContext();
const readRelays = useReadRelayUrls(contextRelays);
const writeRelays = useUserRelays(stream.author)
const userReadRelays = useUserRelays(stream.author)
.filter((r) => r.mode & RelayMode.READ)
.map((r) => r.url);
@ -160,44 +152,16 @@ export default function StreamChat({
const draft = buildChatMessage(stream, values.content);
const signed = await requestSignature(draft);
if (!signed) throw new Error("Failed to sign");
nostrPostAction(unique([...contextRelays, ...writeRelays]), signed);
nostrPostAction(unique([...contextRelays, ...userReadRelays]), signed);
reset();
} catch (e) {
if (e instanceof Error) toast({ description: e.message, status: "error" });
}
});
const zapAmountModal = useDisclosure();
const zapModal = useDisclosure();
const { requestPay } = useInvoiceModalContext();
const zapMetadata = useUserLNURLMetadata(stream.author);
const zapMessage = async (amount: number) => {
try {
if (!zapMetadata.metadata?.callback) throw new Error("bad lnurl endpoint");
const content = getValues().content;
const zapRequest: DraftNostrEvent = {
kind: Kind.ZapRequest,
created_at: dayjs().unix(),
content,
tags: [
["p", stream.author],
["a", getATag(stream)],
["relays", ...writeRelays],
["amount", String(amount * 1000)],
],
};
const signed = await requestSignature(zapRequest);
if (!signed) throw new Error("Failed to sign");
const invoice = await requestZapInvoice(signed, zapMetadata.metadata.callback);
await requestPay(invoice);
reset();
} catch (e) {
if (e instanceof Error) toast({ description: e.message, status: "error" });
}
};
return (
<>
@ -247,7 +211,7 @@ export default function StreamChat({
aria-label="Zap stream"
borderColor="yellow.400"
variant="outline"
onClick={zapAmountModal.onOpen}
onClick={zapModal.onOpen}
/>
)}
</Box>
@ -255,33 +219,20 @@ export default function StreamChat({
</Card>
</ImageGalleryProvider>
</IntersectionObserverProvider>
<Modal isOpen={zapAmountModal.isOpen} onClose={zapAmountModal.onClose}>
<ModalOverlay />
<ModalContent>
<ModalHeader pb="0">Zap Amount</ModalHeader>
<ModalCloseButton />
<ModalBody>
<Flex gap="2" alignItems="center" flexWrap="wrap">
{customZapAmounts
.split(",")
.map((v) => parseInt(v))
.map((amount, i) => (
<Button
key={amount + i}
onClick={() => {
zapAmountModal.onClose();
zapMessage(amount);
}}
size="sm"
variant="outline"
>
{amount}
</Button>
))}
</Flex>
</ModalBody>
</ModalContent>
</Modal>
{zapModal.isOpen && (
<ZapModal
isOpen
stream={stream}
pubkey={stream.author}
onInvoice={async (invoice) => {
reset();
zapModal.onClose();
await requestPay(invoice);
}}
onClose={zapModal.onClose}
initialComment={getValues().content}
/>
)}
</>
);
}