Add re;ays to every naddr encode, fix layout fo details pages, fix text overflow for nostr comments

This commit is contained in:
austinkelsay 2024-09-14 17:39:01 -05:00
parent 8b782ffc60
commit 38244a8da7
15 changed files with 122 additions and 91 deletions

View File

@ -51,7 +51,7 @@ const ZapThreadsWrapper = ({ anchor, relays, disable }) => {
}, [anchor, relays, disable]);
// Render a <div> element and attach the zapRef to it
return <div ref={zapRef} />;
return <div className="overflow-x-hidden" ref={zapRef} />;
};
export default ZapThreadsWrapper;

View File

@ -11,6 +11,7 @@ import { useRouter } from "next/router";
import { formatTimestampToHowLongAgo } from "@/utils/time";
import { ProgressSpinner } from "primereact/progressspinner";
import GenericButton from "@/components/buttons/GenericButton";
import { defaultRelayUrls } from "@/context/NDKContext";
export function CourseTemplate({ course }) {
const { zaps, zapsLoading, zapsError } = useZapsSubscription({ event: course });
@ -40,6 +41,7 @@ export function CourseTemplate({ course }) {
pubkey: course.pubkey,
kind: course.kind,
identifier: course.id,
relayUrls: defaultRelayUrls
});
setNAddress(nAddress);
}

View File

@ -10,6 +10,7 @@ import { formatTimestampToHowLongAgo } from "@/utils/time";
import { nip19 } from "nostr-tools";
import { Tag } from "primereact/tag";
import GenericButton from "@/components/buttons/GenericButton";
import { defaultRelayUrls } from "@/context/NDKContext";
export function DocumentTemplate({ document }) {
const { zaps, zapsLoading, zapsError } = useZapsSubscription({ event: document });
@ -24,6 +25,7 @@ export function DocumentTemplate({ document }) {
pubkey: document.pubkey,
kind: document.kind,
identifier: document.id,
relayUrls: defaultRelayUrls
});
setNAddress(nAddress);
}

View File

@ -11,6 +11,7 @@ import { nip19 } from "nostr-tools";
import { formatTimestampToHowLongAgo } from "@/utils/time";
import { Tag } from "primereact/tag";
import GenericButton from "@/components/buttons/GenericButton";
import { defaultRelayUrls } from "@/context/NDKContext";
export function VideoTemplate({ video }) {
const { zaps, zapsLoading, zapsError } = useZapsSubscription({ event: video });
@ -23,7 +24,8 @@ export function VideoTemplate({ video }) {
const addr = nip19.naddrEncode({
pubkey: video.pubkey,
kind: video.kind,
identifier: video.id
identifier: video.id,
relayUrls: defaultRelayUrls
})
setNAddress(addr);
}, [video]);

View File

@ -16,6 +16,7 @@ import { findKind0Fields } from '@/utils/nostr';
import 'primeicons/primeicons.css';
import CoursePaymentButton from "@/components/bitcoinConnect/CoursePaymentButton";
import { ProgressSpinner } from 'primereact/progressspinner';
import { defaultRelayUrls } from "@/context/NDKContext";
const MDDisplay = dynamic(
() => import("@uiw/react-markdown-preview"),
@ -65,6 +66,7 @@ export default function CourseDetails({ processedEvent, paidCourse, lessons, dec
pubkey: processedEvent.pubkey,
kind: processedEvent.kind,
identifier: processedEvent.d,
relayUrls: defaultRelayUrls
});
setNAddress(naddr);
}

View File

@ -15,6 +15,7 @@ import { useSession } from 'next-auth/react';
import useWindowWidth from "@/hooks/useWindowWidth";
import { useNDKContext } from "@/context/NDKContext";
import { findKind0Fields } from '@/utils/nostr';
import { defaultRelayUrls } from "@/context/NDKContext";
const lnAddress = process.env.NEXT_PUBLIC_LIGHTNING_ADDRESS;
@ -46,6 +47,7 @@ export default function CourseDetailsNew({ processedEvent, paidCourse, lessons,
pubkey: processedEvent.pubkey,
kind: processedEvent.kind,
identifier: processedEvent.d,
relayUrls: defaultRelayUrls
});
setNAddress(naddr);
}
@ -157,14 +159,16 @@ export default function CourseDetailsNew({ processedEvent, paidCourse, lessons,
</div>
<div className='w-full mt-8 flex flex-wrap justify-between items-center'>
{renderPaymentMessage()}
{processedEvent?.pubkey === session?.user?.pubkey && (
{processedEvent?.pubkey === session?.user?.pubkey ? (
<div className='flex space-x-2 mt-4 sm:mt-0'>
<GenericButton onClick={() => router.push(`/details/${processedEvent.id}/edit`)} label="Edit" severity='warning' outlined />
<GenericButton onClick={handleDelete} label="Delete" severity='danger' outlined />
<GenericButton outlined icon="pi pi-external-link" onClick={() => window.open(`https://nostr.band/${nAddress}`, '_blank')} tooltip="View Nostr Event" tooltipOptions={{ position: 'right' }} />
</div>
) : (
<div className='flex space-x-2 mt-4 sm:mt-0'>
<GenericButton className='my-2' outlined icon="pi pi-external-link" onClick={() => window.open(`https://nostr.band/${nAddress}`, '_blank')} tooltip="View Nostr Event" tooltipOptions={{ position: paidCourse ? 'left' : 'right' }} />
</div>
)}
{nAddress && (
<GenericButton outlined icon="pi pi-external-link" onClick={() => window.open(`https://nostr.band/${nAddress}`, '_blank')} tooltip="View Nostr Event" tooltipOptions={{ position: paidCourse ? 'left' : 'right' }} />
)}
</div>
</div>

View File

@ -9,6 +9,7 @@ import { nip19 } from "nostr-tools";
import { Divider } from "primereact/divider";
import { getTotalFromZaps } from "@/utils/lightning";
import dynamic from "next/dynamic";
import { defaultRelayUrls } from "@/context/NDKContext";
const MDDisplay = dynamic(
() => import("@uiw/react-markdown-preview"),
@ -35,6 +36,7 @@ const DocumentLesson = ({ lesson, course, decryptionPerformed, isPaid }) => {
pubkey: lesson.pubkey,
kind: lesson.kind,
identifier: lesson.d,
relayUrls: defaultRelayUrls
})
setNAddress(addr);
}

View File

@ -15,6 +15,7 @@ import { findKind0Fields } from '@/utils/nostr';
import { useToast } from '@/hooks/useToast';
import { formatDateTime } from '@/utils/time';
import { validateEvent } from '@/utils/nostr';
import { defaultRelayUrls } from "@/context/NDKContext";
import 'primeicons/primeicons.css';
const MDDisplay = dynamic(
@ -109,6 +110,7 @@ export default function DraftCourseDetails({ processedEvent, draftId, lessons })
pubkey: resource.pubkey,
kind: resource.kind,
identifier: dTag,
relayUrls: defaultRelayUrls
});
const userResponse = await axios.get(`/api/users/${user.pubkey}`);

View File

@ -9,6 +9,7 @@ import { nip19 } from "nostr-tools";
import { getTotalFromZaps } from "@/utils/lightning";
import dynamic from "next/dynamic";
import { Divider } from "primereact/divider";
import { defaultRelayUrls } from "@/context/NDKContext";
const MDDisplay = dynamic(
() => import("@uiw/react-markdown-preview"),
@ -34,6 +35,7 @@ const VideoLesson = ({ lesson, course, decryptionPerformed, isPaid }) => {
pubkey: lesson.pubkey,
kind: lesson.kind,
identifier: lesson.d,
relayUrls: defaultRelayUrls
});
setNAddress(addr);
}, [lesson]);

View File

@ -39,6 +39,10 @@ const DocumentDetails = ({ processedEvent, topics, title, summary, image, price,
}
}, [zaps, processedEvent]);
useEffect(() => {
console.log("authorView", authorView);
}, [authorView]);
const handleDelete = async () => {
try {
const response = await axios.delete(`/api/resources/${processedEvent.d}`);
@ -80,7 +84,9 @@ const DocumentDetails = ({ processedEvent, topics, title, summary, image, price,
}
if (paidResource && !decryptedContent) {
return (
<div className="w-full p-8 rounded-lg flex flex-col items-center justify-center bg-gray-100 dark:bg-gray-800">
<div className="w-full px-4">
<div className="w-full p-8 rounded-lg flex flex-col items-center justify-center bg-gray-800">
<div className="mx-auto py-auto">
<i className="pi pi-lock text-[60px] text-red-500"></i>
</div>
@ -94,9 +100,10 @@ const DocumentDetails = ({ processedEvent, topics, title, summary, image, price,
onSuccess={handlePaymentSuccess}
onError={handlePaymentError}
resourceId={processedEvent.d}
/>
/>
</div>
</div>
</div>
);
}
if (processedEvent?.content) {
@ -151,30 +158,39 @@ const DocumentDetails = ({ processedEvent, topics, title, summary, image, price,
zapsLoading={zapsLoading && zapAmount === 0}
/>
</div>
<div className="w-full flex flex-row justify-end">
<GenericButton
tooltip={`View Nostr Note`}
tooltipOptions={{ position: 'left' }}
icon="pi pi-external-link"
outlined
onClick={() => {
window.open(`https://nostr.com/${nAddress}`, '_blank');
}}
/>
<div className='w-full mt-8 flex flex-wrap justify-between items-center'>
{renderPaymentMessage()}
{authorView ? (
<div className='flex space-x-2 mt-4 sm:mt-0'>
<GenericButton onClick={() => router.push(`/details/${processedEvent.id}/edit`)} label="Edit" severity='warning' outlined />
<GenericButton onClick={handleDelete} label="Delete" severity='danger' outlined />
<GenericButton
tooltip={`View Nostr Note`}
tooltipOptions={{ position: 'left' }}
icon="pi pi-external-link"
outlined
onClick={() => {
window.open(`https://nostr.com/${nAddress}`, '_blank');
}}
/>
</div>
) : (
<div className="w-full flex flex-row justify-end">
<GenericButton
tooltip={`View Nostr Note`}
tooltipOptions={{ position: 'left' }}
icon="pi pi-external-link"
outlined
onClick={() => {
window.open(`https://nostr.com/${nAddress}`, '_blank');
}}
/>
</div>
)}
</div>
</div>
</div>
{renderContent()}
<div className='w-full mt-8 flex flex-wrap justify-between items-center'>
{renderPaymentMessage()}
{authorView && (
<div className='flex space-x-2 mt-4 sm:mt-0'>
<GenericButton onClick={() => router.push(`/details/${processedEvent.id}/edit`)} label="Edit" severity='warning' outlined />
<GenericButton onClick={handleDelete} label="Delete" severity='danger' outlined />
</div>
)}
</div>
</div>
)
}

View File

@ -81,7 +81,7 @@ const VideoDetails = ({ processedEvent, topics, title, summary, image, price, au
if (paidResource && !decryptedContent) {
return (
<div className="w-full aspect-video rounded-lg flex flex-col items-center justify-center relative overflow-hidden">
<div
<div
className="absolute inset-0 opacity-50"
style={{
backgroundImage: `url(${image})`,
@ -118,63 +118,56 @@ const VideoDetails = ({ processedEvent, topics, title, summary, image, price, au
<div className="w-full">
{renderContent()}
<div className="bg-gray-800/90 rounded-lg p-4 m-4">
<div className="w-full flex flex-col items-start justify-start mt-2 px-2">
<div className="flex flex-row items-center gap-2 w-full">
<h1 className='text-4xl'>{title}</h1>
{topics && topics.length > 0 && (
topics.map((topic, index) => (
<Tag className='mt-2 text-white' key={index} value={topic}></Tag>
))
)
}
</div>
<div className='flex flex-row items-center justify-between w-full'>
<p className='text-xl mt-4'>{summary}</p>
<ZapDisplay
zapAmount={zapAmount}
event={processedEvent}
zapsLoading={zapsLoading && zapAmount === 0}
<div className="w-full flex flex-col items-start justify-start mt-2 px-2">
<div className="flex flex-row items-center gap-2 w-full">
<h1 className='text-4xl'>{title}</h1>
{topics && topics.length > 0 && (
topics.map((topic, index) => (
<Tag className='mt-2 text-white' key={index} value={topic}></Tag>
))
)
}
</div>
<div className='flex flex-row items-center justify-between w-full'>
<p className='text-xl mt-4'>{summary}</p>
<ZapDisplay
zapAmount={zapAmount}
event={processedEvent}
zapsLoading={zapsLoading && zapAmount === 0}
/>
</div>
</div>
</div>
<div className='w-full flex flex-col space-y-4 mt-4'>
<div className='flex flex-row justify-between items-center'>
<div className='flex flex-row w-fit items-center'>
<Image
alt="avatar image"
src={returnImageProxy(author?.avatar, author?.username)}
width={50}
height={50}
className="rounded-full mr-4"
<div className='w-full flex flex-col space-y-4 mt-4'>
<div className='flex flex-row justify-between items-center'>
<div className='flex flex-row w-fit items-center'>
<Image
alt="avatar image"
src={returnImageProxy(author?.avatar, author?.username)}
width={50}
height={50}
className="rounded-full mr-4"
/>
<p className='text-lg'>
Created by{' '}
<a rel='noreferrer noopener' target='_blank' className='text-blue-500 hover:underline'>
{author?.username}
</a>
</p>
</div>
<GenericButton
tooltip={`View Nostr Note`}
tooltipOptions={{ position: 'left' }}
icon="pi pi-external-link"
outlined
onClick={() => {
window.open(`https://nostr.com/${nAddress}`, '_blank');
}}
/>
{authorView && (
<div className='flex flex-row justify-center items-center space-x-2'>
<GenericButton onClick={() => router.push(`/details/${processedEvent.id}/edit`)} label="Edit" severity='warning' outlined />
<GenericButton onClick={handleDelete} label="Delete" severity='danger' outlined />
<p className='text-lg'>
Created by{' '}
<a rel='noreferrer noopener' target='_blank' className='text-blue-500 hover:underline'>
{author?.username}
</a>
</p>
</div>
)}
</div>
<div className='w-full flex flex-row justify-between'>
{renderPaymentMessage()}
{authorView ? (
<div className='flex flex-row justify-center items-center space-x-2'>
<GenericButton onClick={() => router.push(`/details/${processedEvent.id}/edit`)} label="Edit" severity='warning' outlined />
<GenericButton onClick={handleDelete} label="Delete" severity='danger' outlined />
<GenericButton outlined icon="pi pi-external-link" onClick={() => window.open(`https://nostr.band/${nAddress}`, '_blank')} tooltip="View Nostr Event" tooltipOptions={{ position: 'right' }} />
</div>
) : (
<div className='flex flex-row justify-center items-center space-x-2'>
<GenericButton outlined icon="pi pi-external-link" onClick={() => window.open(`https://nostr.band/${nAddress}`, '_blank')} tooltip="View Nostr Event" tooltipOptions={{ position: 'right' }} />
</div>
)}
</div>
</div>
</div>
</div>
</div>
)
}

View File

@ -72,7 +72,7 @@ const CommunityMessage = ({ message, searchQuery, windowWidth, platform }) => {
}
<div className="w-full flex flex-row justify-between items-end">
{
session?.user?.pubkey && platform === 'nostr' ? (
platform === 'nostr' ? (
<Panel
headerTemplate={() => headerTemplate({ onTogglerClick: () => setCollapsed(!collapsed) }, windowWidth, platform, message.id)}
toggleable
@ -80,20 +80,21 @@ const CommunityMessage = ({ message, searchQuery, windowWidth, platform }) => {
onToggle={(e) => setCollapsed(e.value)}
className="w-full"
>
<ZapThreadsWrapper
anchor={nip19.noteEncode(message.id)}
user={npub}
relays="wss://nos.lol/, wss://relay.damus.io/, wss://relay.snort.social/, wss://relay.nostr.band/, wss://relay.mutinywallet.com/, wss://relay.primal.net/"
disable=""
/>
<div className="max-w-[100vw]">
<ZapThreadsWrapper
anchor={nip19.noteEncode(message.id)}
user={npub || null}
relays="wss://nos.lol/, wss://relay.damus.io/, wss://relay.snort.social/, wss://relay.nostr.band/, wss://relay.mutinywallet.com/, wss://relay.primal.net/"
disable=""
/>
</div>
</Panel>
) : (
<div className="w-full flex flex-row justify-between items-end">
{platform !== "nostr" ? (
<p className="rounded-lg text-sm text-gray-300">
{new Date(message.timestamp).toLocaleString()}
</p>
{new Date(message.timestamp).toLocaleString()}
</p>
) : <div></div>}
<GenericButton
label={windowWidth > 768 ? `View in ${platform}` : null}

View File

@ -99,7 +99,6 @@ const Sidebar = ({ course = false }) => {
<i className="pi pi-arrow-left pl-5" /> <p className="pl-2 rounded-md font-bold text-lg">Home</p>
</div>
{lessons.map((lesson, index) => (
console.log(lesson),
<div
key={lesson}
onClick={() => {

View File

@ -9,6 +9,7 @@ import { useNDKContext } from '@/context/NDKContext';
import VideoDetails from '@/components/content/videos/VideoDetails';
import DocumentDetails from '@/components/content/documents/DocumentDetails';
import { ProgressSpinner } from 'primereact/progressspinner';
import { defaultRelayUrls } from '@/context/NDKContext';
import 'primeicons/primeicons.css';
const privkey = process.env.NEXT_PUBLIC_APP_PRIV_KEY;
@ -170,6 +171,7 @@ export default function Details() {
pubkey: processedEvent.pubkey,
kind: processedEvent.kind,
identifier: processedEvent.d,
relayUrls: defaultRelayUrls
});
setNAddress(naddr);
}

View File

@ -17,6 +17,7 @@ import useResponsiveImageDimensions from '@/hooks/useResponsiveImageDimensions';
import 'primeicons/primeicons.css';
import dynamic from 'next/dynamic';
import { validateEvent } from '@/utils/nostr';
import { defaultRelayUrls } from '@/context/NDKContext';
const MDDisplay = dynamic(
() => import("@uiw/react-markdown-preview"),
@ -120,6 +121,7 @@ export default function Draft() {
pubkey: resource.pubkey,
kind: resource.kind,
identifier: dTag,
relayUrls: defaultRelayUrls
});
const userResponse = await axios.get(`/api/users/${user.pubkey}`);