diff --git a/src/components/CourseDetails.js b/src/components/CourseDetails.js
index c09a05b..9234fa2 100644
--- a/src/components/CourseDetails.js
+++ b/src/components/CourseDetails.js
@@ -4,7 +4,7 @@ import { useRouter } from 'next/router';
import { useNostr } from '@/hooks/useNostr';
import { findKind0Fields } from '@/utils/nostr';
import { useImageProxy } from '@/hooks/useImageProxy';
-import { Button } from 'primereact/button';
+import ZapDisplay from '@/components/zaps/ZapDisplay';
import { Tag } from 'primereact/tag';
import { nip19 } from 'nostr-tools';
import { useLocalStorageWithEffect } from '@/hooks/useLocalStorage';
@@ -31,6 +31,7 @@ export default function CourseDetails({processedEvent}) {
const [bitcoinConnect, setBitcoinConnect] = useState(false);
const [nAddress, setNAddress] = useState(null);
const [user] = useLocalStorageWithEffect('user', {});
+ const [zapAmount, setZapAmount] = useState(0);
const { returnImageProxy } = useImageProxy();
const { fetchKind0, zapEvent } = useNostr();
@@ -98,7 +99,7 @@ export default function CourseDetails({processedEvent}) {
<div className='flex flex-row w-full mt-6 items-center'>
<Image
alt="avatar thumbnail"
- src={user?.avatar ? returnImageProxy(user.avatar) : `https://secure.gravatar.com/avatar/${user.pubkey}?s=90&d=identicon`}
+ src={returnImageProxy(author?.avatar, author?.pubkey)}
width={50}
height={50}
className="rounded-full mr-4"
@@ -126,21 +127,8 @@ export default function CourseDetails({processedEvent}) {
<BitcoinConnectPayButton onClick={handleZapEvent} />
</div>
) : (
- <div>
- <Button
- icon="pi pi-bolt"
- label="Zap"
- severity="success"
- outlined
- onClick={handleZapEvent}
- pt={{
- button: {
- icon: ({ context }) => ({
- className: 'bg-yellow-500'
- })
- }
- }}
- />
+ <div className='w-full flex justify-end'>
+ <ZapDisplay zapAmount={zapAmount} event={processedEvent} />
</div>
)}
</div>
diff --git a/src/components/navbar/user/UserAvatar.js b/src/components/navbar/user/UserAvatar.js
index 1452672..25f6975 100644
--- a/src/components/navbar/user/UserAvatar.js
+++ b/src/components/navbar/user/UserAvatar.js
@@ -65,7 +65,7 @@ const UserAvatar = () => {
<div onClick={(event) => menu.current.toggle(event)} className='flex flex-row items-center justify-between cursor-pointer hover:opacity-75'>
<Image
alt="logo"
- src={user?.avatar ? returnImageProxy(user.avatar) : `https://secure.gravatar.com/avatar/${user.pubkey}?s=90&d=identicon`}
+ src={returnImageProxy(user.avatar, user.pubkey)}
width={50}
height={50}
className={styles.logo}
diff --git a/src/hooks/useImageProxy.js b/src/hooks/useImageProxy.js
index 2c5ca25..593c7dd 100644
--- a/src/hooks/useImageProxy.js
+++ b/src/hooks/useImageProxy.js
@@ -1,12 +1,30 @@
import React from "react"
export const useImageProxy = () => {
-
- const returnImageProxy = (image) => {
- const proxyUrl = `${process.env.NEXT_PUBLIC_PROXY_URL}?imageUrl=${encodeURIComponent(image)}`;
-
- return proxyUrl;
+ // This function handles image URL generation for avatars
+ // It can process custom avatars, generate Gravatar URLs, or provide a default avatar
+ const returnImageProxy = (image, pubkey, size = 90) => {
+ // If a custom image URL is provided
+ if (image) {
+ // Use the proxy URL to avoid CORS issues and potentially optimize the image
+ const proxyUrl = `${process.env.NEXT_PUBLIC_PROXY_URL}?imageUrl=${encodeURIComponent(image)}`;
+ return proxyUrl;
+ }
+ // If no image is provided, but a pubkey is available
+ else if (pubkey) {
+ // Generate a Gravatar URL using the pubkey as the identifier
+ // 's' parameter sets the size of the image
+ // 'd=identicon' ensures a default identicon is generated if no Gravatar exists for this pubkey
+ return `https://secure.gravatar.com/avatar/${pubkey}?s=${size}&d=identicon`;
+ }
+ // If neither image nor pubkey is provided
+ else {
+ // Return a completely generic Gravatar URL
+ // This will always generate a random identicon
+ return `https://secure.gravatar.com/avatar/?s=${size}&d=identicon`;
}
+ }
- return { returnImageProxy };
+ // Return the function so it can be used by components
+ return { returnImageProxy };
}
\ No newline at end of file
diff --git a/src/pages/course/[slug].js b/src/pages/course/[slug].js
index 25bdeac..3faf8d7 100644
--- a/src/pages/course/[slug].js
+++ b/src/pages/course/[slug].js
@@ -109,9 +109,7 @@ const Course = () => {
return (
<>
<CourseDetails processedEvent={course} />
- {
-
- lessons.length > 0 && lessons.map((lesson, index) => (
+ {lessons.length > 0 && lessons.map((lesson, index) => (
<div key={index} className='w-full px-24 pt-12 mx-auto mt-4 max-tab:px-0 max-mob:px-0 max-tab:pt-2 max-mob:pt-2'>
<div className='w-full flex flex-row justify-between max-tab:flex-col max-mob:flex-col'>
<div className='w-[75vw] mx-auto flex flex-row items-start justify-between max-tab:flex-col max-mob:flex-col max-tab:w-[95vw] max-mob:w-[95vw]'>
@@ -129,7 +127,7 @@ const Course = () => {
<div className='flex flex-row w-full mt-6 items-center'>
<Image
alt="avatar thumbnail"
- src={returnImageProxy(lesson.author?.avatar)}
+ src={returnImageProxy(lesson.author?.avatar, lesson.author?.pubkey)}
width={50}
height={50}
className="rounded-full mr-4"
diff --git a/src/pages/details/[slug].js b/src/pages/details/[slug].js
index 17ec6b2..3a6705a 100644
--- a/src/pages/details/[slug].js
+++ b/src/pages/details/[slug].js
@@ -124,7 +124,7 @@ export default function Details() {
<div className='flex flex-row w-full mt-6 items-center'>
<Image
alt="avatar image"
- src={returnImageProxy(author?.avatar)}
+ src={returnImageProxy(author?.avatar, author?.pubkey)}
width={50}
height={50}
className="rounded-full mr-4"
diff --git a/src/pages/draft/[slug]/index.js b/src/pages/draft/[slug]/index.js
index 82fce22..c0af5f1 100644
--- a/src/pages/draft/[slug]/index.js
+++ b/src/pages/draft/[slug]/index.js
@@ -266,7 +266,7 @@ export default function Details() {
<div className='flex flex-row w-full mt-6 items-center'>
<Image
alt="resource thumbnail"
- src={user?.avatar ? returnImageProxy(user.avatar) : `https://secure.gravatar.com/avatar/${user.pubkey}?s=90&d=identicon`}
+ src={returnImageProxy(draft.author?.avatar, draft.author?.pubkey)}
width={50}
height={50}
className="rounded-full mr-4"
diff --git a/src/pages/profile.js b/src/pages/profile.js
index d3e37f3..63f6474 100644
--- a/src/pages/profile.js
+++ b/src/pages/profile.js
@@ -73,7 +73,7 @@ const Profile = () => {
<div className="relative flex w-full items-center justify-center">
<Image
alt="user's avatar"
- src={user?.avatar ? returnImageProxy(user.avatar) : `https://secure.gravatar.com/avatar/${user.pubkey}?s=90&d=identicon`}
+ src={returnImageProxy(user.avatar, user.pubkey)}
width={100}
height={100}
className="rounded-full my-4"