forked from Kieran/zap.stream
feat: responsible zap modal
This commit is contained in:
parent
391e549421
commit
713f4c3d5e
@ -49,22 +49,3 @@
|
||||
color: inherit;
|
||||
background: #353535;
|
||||
}
|
||||
|
||||
.dialog-overlay {
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.dialog-content {
|
||||
background-color: #171717;
|
||||
border-radius: 6px;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 90vw;
|
||||
max-width: 450px;
|
||||
max-height: 85vh;
|
||||
padding: 25px;
|
||||
}
|
||||
|
@ -1,7 +1,7 @@
|
||||
import "./new-stream.css";
|
||||
import * as Dialog from "@radix-ui/react-dialog";
|
||||
|
||||
import { useEffect, useState } from "react";
|
||||
import { useEffect, useState, useCallback } from "react";
|
||||
import { EventPublisher, NostrEvent } from "@snort/system";
|
||||
import { unixNow } from "@snort/shared";
|
||||
|
||||
@ -15,7 +15,7 @@ export function NewStream({
|
||||
onFinish,
|
||||
}: {
|
||||
ev?: NostrEvent;
|
||||
onFinish: (ev: NostrEvent) => void;
|
||||
onFinish?: (ev: NostrEvent) => void;
|
||||
}) {
|
||||
const [title, setTitle] = useState(findTag(ev, "title") ?? "");
|
||||
const [summary, setSummary] = useState(findTag(ev, "summary") ?? "");
|
||||
@ -27,7 +27,7 @@ export function NewStream({
|
||||
const [start, setStart] = useState(findTag(ev, "starts"));
|
||||
const [isValid, setIsValid] = useState(false);
|
||||
|
||||
function validate() {
|
||||
const validate = useCallback(() => {
|
||||
if (title.length < 2) {
|
||||
return false;
|
||||
}
|
||||
@ -38,11 +38,11 @@ export function NewStream({
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
}
|
||||
}, [title, image, stream]);
|
||||
|
||||
useEffect(() => {
|
||||
setIsValid(validate());
|
||||
}, [title, summary, image, stream]);
|
||||
}, [validate, title, summary, image, stream]);
|
||||
|
||||
async function publishStream() {
|
||||
const pub = await EventPublisher.nip7();
|
||||
@ -67,7 +67,7 @@ export function NewStream({
|
||||
});
|
||||
console.debug(evNew);
|
||||
System.BroadcastEvent(evNew);
|
||||
onFinish(evNew);
|
||||
onFinish && onFinish(evNew);
|
||||
}
|
||||
}
|
||||
|
||||
@ -174,7 +174,7 @@ interface NewStreamDialogProps {
|
||||
text?: string;
|
||||
btnClassName?: string;
|
||||
ev?: NostrEvent;
|
||||
onFinish: (e: NostrEvent) => void;
|
||||
onFinish?: (e: NostrEvent) => void;
|
||||
}
|
||||
|
||||
export function NewStreamDialog({
|
||||
|
@ -1,5 +1,4 @@
|
||||
.send-zap {
|
||||
width: inherit;
|
||||
display: flex;
|
||||
gap: 24px;
|
||||
flex-direction: column;
|
||||
@ -58,4 +57,4 @@
|
||||
|
||||
.send-zap .qr {
|
||||
align-self: center;
|
||||
}
|
||||
}
|
||||
|
@ -1,4 +1,5 @@
|
||||
import "./send-zap.css";
|
||||
import * as Dialog from "@radix-ui/react-dialog";
|
||||
import { useEffect, useState } from "react";
|
||||
import { LNURL } from "@snort/shared";
|
||||
import { NostrEvent, EventPublisher } from "@snort/system";
|
||||
@ -9,17 +10,14 @@ import { findTag } from "utils";
|
||||
import { Relays } from "index";
|
||||
import QrCode from "./qr-code";
|
||||
|
||||
export function SendZaps({
|
||||
lnurl,
|
||||
ev,
|
||||
targetName,
|
||||
onFinish,
|
||||
}: {
|
||||
interface SendZapsProps {
|
||||
lnurl: string;
|
||||
ev?: NostrEvent;
|
||||
targetName?: string;
|
||||
onFinish: () => void;
|
||||
}) {
|
||||
}
|
||||
|
||||
function SendZaps({ lnurl, ev, targetName, onFinish }: SendZapsProps) {
|
||||
const UsdRate = 30_000;
|
||||
|
||||
const satsAmounts = [
|
||||
@ -152,6 +150,31 @@ export function SendZaps({
|
||||
);
|
||||
}
|
||||
|
||||
function SendZapDialog() {
|
||||
return "TODO";
|
||||
export function SendZapsDialog({
|
||||
lnurl,
|
||||
ev,
|
||||
targetName,
|
||||
}: Omit<SendZapsProps, "onFinish">) {
|
||||
const [isOpen, setIsOpen] = useState(false);
|
||||
return (
|
||||
<Dialog.Root open={isOpen} onOpenChange={setIsOpen}>
|
||||
<Dialog.Trigger asChild>
|
||||
<button className="btn btn-primary zap">
|
||||
<span className="hide-on-mobile">Zap</span>
|
||||
<Icon name="zap" size={16} />
|
||||
</button>
|
||||
</Dialog.Trigger>
|
||||
<Dialog.Portal>
|
||||
<Dialog.Overlay className="dialog-overlay" />
|
||||
<Dialog.Content className="dialog-content">
|
||||
<SendZaps
|
||||
lnurl={lnurl}
|
||||
ev={ev}
|
||||
targetName={targetName}
|
||||
onFinish={() => setIsOpen(false)}
|
||||
/>
|
||||
</Dialog.Content>
|
||||
</Dialog.Portal>
|
||||
</Dialog.Root>
|
||||
);
|
||||
}
|
||||
|
@ -162,3 +162,22 @@ button span.hide-on-mobile {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
}
|
||||
|
||||
.dialog-overlay {
|
||||
background-color: rgba(0, 0, 0, 0.8);
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
}
|
||||
|
||||
.dialog-content {
|
||||
background-color: #171717;
|
||||
border-radius: 6px;
|
||||
position: fixed;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 90vw;
|
||||
max-width: 450px;
|
||||
max-height: 85vh;
|
||||
padding: 25px;
|
||||
}
|
||||
|
@ -35,6 +35,11 @@
|
||||
}
|
||||
}
|
||||
|
||||
.homepage {
|
||||
width: 100%;
|
||||
grid-area: main-content;
|
||||
}
|
||||
|
||||
.homepage h2 {
|
||||
background: #171717;
|
||||
padding: 40px;
|
||||
|
@ -1,5 +1,5 @@
|
||||
import "./stream-page.css";
|
||||
import { useRef, useState } from "react";
|
||||
import { useRef } from "react";
|
||||
import { parseNostrLink, EventPublisher } from "@snort/system";
|
||||
import { useNavigate, useParams } from "react-router-dom";
|
||||
import moment from "moment";
|
||||
@ -10,11 +10,9 @@ import { findTag } from "utils";
|
||||
import { Profile, getName } from "element/profile";
|
||||
import { LiveChat } from "element/live-chat";
|
||||
import AsyncButton from "element/async-button";
|
||||
import { Icon } from "element/icon";
|
||||
import { useLogin } from "hooks/login";
|
||||
import { StreamState, System } from "index";
|
||||
import Modal from "element/modal";
|
||||
import { SendZaps } from "element/send-zap";
|
||||
import { SendZapsDialog } from "element/send-zap";
|
||||
import type { NostrLink } from "@snort/system";
|
||||
import { useUserProfile } from "@snort/system-react";
|
||||
import { NewStreamDialog } from "element/new-stream";
|
||||
@ -23,7 +21,6 @@ function ProfileInfo({ link }: { link: NostrLink }) {
|
||||
const thisEvent = useEventFeed(link, true);
|
||||
const login = useLogin();
|
||||
const navigate = useNavigate();
|
||||
const [zap, setZap] = useState(false);
|
||||
const profile = useUserProfile(System, thisEvent.data?.pubkey);
|
||||
const zapTarget = profile?.lud16 ?? profile?.lud06;
|
||||
|
||||
@ -42,8 +39,6 @@ function ProfileInfo({ link }: { link: NostrLink }) {
|
||||
}
|
||||
}
|
||||
|
||||
function onFinish() {}
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="flex info">
|
||||
@ -69,11 +64,7 @@ function ProfileInfo({ link }: { link: NostrLink }) {
|
||||
{isMine && (
|
||||
<div className="actions">
|
||||
{thisEvent.data && (
|
||||
<NewStreamDialog
|
||||
text="Edit"
|
||||
ev={thisEvent.data}
|
||||
onFinish={onFinish}
|
||||
/>
|
||||
<NewStreamDialog text="Edit" ev={thisEvent.data} />
|
||||
)}
|
||||
<AsyncButton
|
||||
type="button"
|
||||
@ -87,22 +78,15 @@ function ProfileInfo({ link }: { link: NostrLink }) {
|
||||
</div>
|
||||
<div className="profile-info flex g24">
|
||||
<Profile pubkey={thisEvent.data?.pubkey ?? ""} />
|
||||
<button onClick={() => setZap(true)} className="btn btn-primary zap">
|
||||
<span className="hide-on-mobile">Zap</span>
|
||||
<Icon name="zap" size={16} />
|
||||
</button>
|
||||
{zapTarget && thisEvent.data && (
|
||||
<SendZapsDialog
|
||||
lnurl={zapTarget}
|
||||
ev={thisEvent.data}
|
||||
targetName={getName(thisEvent.data.pubkey, profile)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
{zap && zapTarget && thisEvent.data && (
|
||||
<Modal onClose={() => setZap(false)}>
|
||||
<SendZaps
|
||||
lnurl={zapTarget}
|
||||
ev={thisEvent.data}
|
||||
targetName={getName(thisEvent.data.pubkey, profile)}
|
||||
onFinish={() => setZap(false)}
|
||||
/>
|
||||
</Modal>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user