9 |
24 | )
25 | }
26 |
27 | export default WalletFeedItem
28 |
--------------------------------------------------------------------------------
/src/pages/home/index.tsx:
--------------------------------------------------------------------------------
1 | import HomeFeedEvents from "@/pages/home/feed/components/HomeFeedEvents.tsx"
2 | import RightColumn from "@/shared/components/RightColumn.tsx"
3 | import Trending from "@/shared/components/feed/Trending.tsx"
4 | import Widget from "@/shared/components/ui/Widget.tsx"
5 |
6 | function Index() {
7 | return (
8 |
10 |
13 |
14 |
23 |
16 |
22 |
10 |
12 |
23 |
26 |
13 |
32 | )
33 | }
34 |
35 | export default AppearanceSettings
36 |
--------------------------------------------------------------------------------
/src/pages/settings/Backup.tsx:
--------------------------------------------------------------------------------
1 | import CopyButton from "@/shared/components/button/CopyButton.tsx"
2 | import {hexToBytes} from "@noble/hashes/utils"
3 | import {useUserStore} from "@/stores/user"
4 | import {nip19} from "nostr-tools"
5 |
6 | function Backup() {
7 | const privateKey = useUserStore((state) => state.privateKey)
8 |
9 | return (
10 | Appearance
14 |
15 |
31 |
16 |
30 | Theme
17 |
18 |
28 |
29 |
11 |
37 | )
38 | }
39 |
40 | export default Backup
41 |
--------------------------------------------------------------------------------
/src/pages/settings/IrisAccount/AccountName.tsx:
--------------------------------------------------------------------------------
1 | import {useNavigate} from "react-router"
2 |
3 | interface AccountNameProps {
4 | name?: string
5 | link?: boolean
6 | }
7 |
8 | export default function AccountName({name = "", link = true}: AccountNameProps) {
9 | const navigate = useNavigate()
10 | return (
11 | <>
12 | Backup
12 |
13 | {privateKey && (
14 |
36 |
15 |
25 | )}
26 | Backup your Nostr key
16 | Copy and securely store your secret key. 17 |
18 |
24 |
27 |
35 | Backup your Notes
28 | Export all your notes for safekeeping. 29 |
30 |
33 |
34 |
13 | Username: {name}
14 |
15 |
16 | Short link:{" "}
17 | {link ? (
18 | {
21 | e.preventDefault()
22 | navigate(`/${name}`)
23 | }}
24 | >
25 | iris.to/{name}
26 |
27 | ) : (
28 | <>iris.to/{name}
29 | )}
30 |
31 |
32 | Nostr address (nip05): {name}@iris.to
33 |
34 |
35 | )
36 | }
37 |
--------------------------------------------------------------------------------
/src/pages/settings/IrisAccount/ActiveAccount.tsx:
--------------------------------------------------------------------------------
1 | import AccountName from "./AccountName"
2 | import {ndk} from "@/utils/ndk"
3 |
4 | interface ActiveAccountProps {
5 | name?: string
6 | setAsPrimary: () => void
7 | myPub?: string
8 | }
9 |
10 | export default function ActiveAccount({
11 | name = "",
12 | setAsPrimary = () => {},
13 | myPub = "",
14 | }: ActiveAccountProps) {
15 | async function saveProfile(nip05: string) {
16 | const user = ndk().getUser({pubkey: myPub})
17 | user.profile = user.profile || {nip05}
18 | user.publish()
19 | }
20 |
21 | const onClick = async () => {
22 | const profile = ndk().getUser({pubkey: myPub}).profile
23 | const newNip = name + "@iris.to"
24 | const timeout = setTimeout(() => {
25 | saveProfile(newNip)
26 | }, 2000)
27 | if (profile) {
28 | clearTimeout(timeout)
29 | if (profile.nip05 !== newNip) {
30 | saveProfile(newNip)
31 | setAsPrimary()
32 | }
33 | }
34 | }
35 |
36 | return (
37 |
38 |
48 | )
49 | }
50 |
--------------------------------------------------------------------------------
/src/pages/settings/IrisAccount/ChallengeForm.tsx:
--------------------------------------------------------------------------------
1 | import {useEffect} from "react"
2 |
3 | interface ChallengeFormProps {
4 | onVerify: (token: string) => void
5 | }
6 |
7 | function ChallengeForm({onVerify}: ChallengeFormProps) {
8 | useEffect(() => {
9 | // Setup callback for Cloudflare
10 | window.cf_turnstile_callback = (token: string) => onVerify(token)
11 |
12 | // Load Cloudflare script
13 | if (
14 | !document.querySelector(
15 | 'script[src="https://challenges.cloudflare.com/turnstile/v0/api.js"]'
16 | )
17 | ) {
18 | const script = document.createElement("script")
19 | script.src = "https://challenges.cloudflare.com/turnstile/v0/api.js"
20 | script.async = true
21 | script.defer = true
22 | document.body.appendChild(script)
23 | }
24 |
25 | return () => {
26 | delete window.cf_turnstile_callback
27 | }
28 | }, [onVerify])
29 |
30 | return (
31 |
40 | )
41 | }
42 |
43 | export default ChallengeForm
44 |
--------------------------------------------------------------------------------
/src/pages/settings/IrisAccount/IrisSettings.tsx:
--------------------------------------------------------------------------------
1 | import IrisAccount from "./IrisAccount"
2 |
3 | function IrisSettings() {
4 | return (
5 |
39 | You have an active iris.to username:
40 |
42 | 43 | 46 |
47 |
6 |
13 | )
14 | }
15 |
16 | export default IrisSettings
17 |
--------------------------------------------------------------------------------
/src/pages/settings/Privacy.tsx:
--------------------------------------------------------------------------------
1 | import {useSettingsStore} from "@/stores/settings"
2 | import {ChangeEvent} from "react"
3 |
4 | function PrivacySettings() {
5 | const {privacy, updatePrivacy} = useSettingsStore()
6 |
7 | function handleEnableAnalyticsChange(e: ChangeEventIris.to username
7 |
8 |
12 |
9 |
11 |
13 |
28 | )
29 | }
30 |
31 | export default PrivacySettings
32 |
--------------------------------------------------------------------------------
/src/pages/user/components/FollowList.tsx:
--------------------------------------------------------------------------------
1 | import {useState} from "react"
2 |
3 | import InfiniteScroll from "@/shared/components/ui/InfiniteScroll.tsx" // Make sure to import InfiniteScroll
4 | import ProfileCard from "@/shared/components/user/ProfileCard"
5 | import useFollows from "@/shared/hooks/useFollows"
6 |
7 | interface FollowListProps {
8 | follows?: string[]
9 | pubKey?: string
10 | initialDisplayCount?: number
11 | showAbout?: boolean
12 | }
13 |
14 | function FollowList({
15 | follows,
16 | pubKey = "",
17 | initialDisplayCount = 10,
18 | showAbout = false,
19 | }: FollowListProps) {
20 | const [displayCount, setDisplayCount] = useStatePrivacy
14 |
15 |
27 |
16 |
25 |
26 |
41 | {localFollows.slice(0, displayCount).map((pubkey) => (
42 |
45 |
23 | {/* Replace MUI Avatar with a custom Avatar component */}
24 |
25 | )
26 | }
27 |
28 | export default ProfileAvatar
29 |
--------------------------------------------------------------------------------
/src/pages/user/components/ProfileName.tsx:
--------------------------------------------------------------------------------
1 | import {RiVerifiedBadgeLine, RiErrorWarningLine} from "@remixicon/react"
2 | import {useNip05Validation} from "@/shared/hooks/useNip05Validation"
3 | import {NDKUserProfile} from "@nostr-dev-kit/ndk"
4 | import {useNavigate} from "react-router"
5 | import {useCallback} from "react"
6 |
7 | interface ProfileNameProps {
8 | profile?: NDKUserProfile
9 | pubkey: string
10 | }
11 |
12 | function ProfileName({profile, pubkey}: ProfileNameProps) {
13 | const navigate = useNavigate()
14 | const nip05valid = useNip05Validation(pubkey, profile?.nip05)
15 |
16 | const handleClick = useCallback(() => navigate(`/${pubkey}`), [pubkey])
17 |
18 | return (
19 |
20 |
21 | {profile?.name && {profile.name}}
22 | {profile?.name && profile?.displayName && (
23 | {profile?.displayName}
24 | )}
25 | {!profile?.name && profile?.displayName && {profile?.displayName}}
26 |
27 | {!profile?.name && !profile?.displayName && Anonymous Nostrich}
28 | {profile?.nip05 && (
29 |
30 | {nip05valid ? (
31 |
39 | )
40 | }
41 |
42 | export default ProfileName
43 |
--------------------------------------------------------------------------------
/src/pages/wallet/WalletPage.tsx:
--------------------------------------------------------------------------------
1 | import RightColumn from "@/shared/components/RightColumn.tsx"
2 | import Trending from "@/shared/components/feed/Trending.tsx"
3 | import Widget from "@/shared/components/ui/Widget"
4 | import {useUserStore} from "@/stores/user"
5 | import {useNavigate} from "react-router"
6 | import {useEffect} from "react"
7 |
8 | export default function WalletPage() {
9 | const navigate = useNavigate()
10 | const myPubKey = useUserStore((state) => state.publicKey)
11 | const cashuEnabled = useUserStore((state) => state.cashuEnabled)
12 |
13 | useEffect(() => {
14 | if (!cashuEnabled) {
15 | navigate("/settings/wallet", {replace: true})
16 | }
17 | }, [navigate, cashuEnabled])
18 |
19 | if (!cashuEnabled) {
20 | return null
21 | }
22 |
23 | return (
24 |
25 |
43 | {() => (
44 | <>
45 |
46 |
48 |
49 | )}
50 |
51 |
52 | )
53 | }
54 |
--------------------------------------------------------------------------------
/src/shared/components/Icons/Icon.tsx:
--------------------------------------------------------------------------------
1 | import {MouseEventHandler} from "react"
2 |
3 | import IconsSvg from "./icons.svg"
4 |
5 | export interface IconProps {
6 | name: string
7 | size?: number
8 | height?: number
9 | className?: string
10 | onClick?: MouseEventHandler
26 | {myPubKey && (
27 |
42 |
28 |
39 |
40 | )}
41 | Loading...
2 |
--------------------------------------------------------------------------------
/src/shared/components/NotificationPrompt.tsx:
--------------------------------------------------------------------------------
1 | import {subscribeToDMNotifications, subscribeToNotifications} from "@/utils/notifications"
2 | import {useNotificationsStore} from "@/stores/notifications"
3 | import {useUserStore} from "@/stores/user"
4 | import {useEffect, useState} from "react"
5 |
6 | const NotificationPrompt = () => {
7 | const [showPrompt, setShowPrompt] = useState(false)
8 | const {notificationsDeclined, setNotificationsDeclined} = useNotificationsStore()
9 | const {publicKey: myPubKey} = useUserStore()
10 |
11 | useEffect(() => {
12 | setShowPrompt(
13 | !!myPubKey &&
14 | window.Notification?.permission === "default" &&
15 | !notificationsDeclined
16 | )
17 | }, [notificationsDeclined, myPubKey])
18 |
19 | const handleEnableNotifications = () => {
20 | window.Notification?.requestPermission().then((permission) => {
21 | if (permission === "granted" || permission === "denied") {
22 | setShowPrompt(false)
23 | }
24 | subscribeToNotifications()
25 | subscribeToDMNotifications()
26 | })
27 | }
28 |
29 | const handleDeclineNotifications = () => {
30 | setNotificationsDeclined(true)
31 | setShowPrompt(false)
32 | }
33 |
34 | if (!showPrompt) return null
35 |
36 | return (
37 |
38 | Enable push notifications?
39 |
48 | )
49 | }
50 |
51 | export default NotificationPrompt
52 |
--------------------------------------------------------------------------------
/src/shared/components/RightColumn.tsx:
--------------------------------------------------------------------------------
1 | import SearchBox from "@/shared/components/ui/SearchBox.tsx"
2 | import React, {useState, useEffect} from "react"
3 | import ErrorBoundary from "./ui/ErrorBoundary"
4 |
5 | interface RightColumnProps {
6 | children: () => React.ReactNode
7 | }
8 |
9 | function useWindowWidth() {
10 | const [windowWidth, setWindowWidth] = useState(window.innerWidth)
11 |
12 | useEffect(() => {
13 | const handleResize = () => setWindowWidth(window.innerWidth)
14 | window.addEventListener("resize", handleResize)
15 | return () => window.removeEventListener("resize", handleResize)
16 | }, [])
17 |
18 | return windowWidth
19 | }
20 |
21 | function RightColumn({children}: RightColumnProps) {
22 | const windowWidth = useWindowWidth()
23 |
24 | const isTestEnvironment =
25 | typeof window !== "undefined" && window.location.href.includes("localhost:5173")
26 |
27 | if (windowWidth < 1024 && !isTestEnvironment) {
28 | return null
29 | }
30 |
31 | return (
32 |
40 |
43 |
46 |
47 |
34 |
37 |
31 | {error ? (
32 | setError(true)}
38 | className={classNames("rounded object-cover w-24 h-24", {"blur-xl": isBlurred})}
39 | src={match}
40 | width={90}
41 | alt="thumbnail"
42 | />
43 | )}
44 |
45 | )
46 | }
47 |
48 | export default SmallThumbnailComponent
49 |
--------------------------------------------------------------------------------
/src/shared/components/embed/nostr/CustomEmoji.tsx:
--------------------------------------------------------------------------------
1 | import {CustomEmojiComponent} from "./CustomEmojiComponent"
2 |
3 | // Export the Embed configuration separately
4 | const CustomEmoji = {
5 | regex: /:([a-zA-Z0-9_-]+):/g,
6 | component: CustomEmojiComponent,
7 | inline: true,
8 | settingsKey: "customEmoji",
9 | }
10 |
11 | export default CustomEmoji
12 |
--------------------------------------------------------------------------------
/src/shared/components/embed/nostr/CustomEmojiComponent.tsx:
--------------------------------------------------------------------------------
1 | import {NDKEvent} from "@nostr-dev-kit/ndk"
2 | import ProxyImg from "../../ProxyImg"
3 | import {useState} from "react"
4 |
5 | interface CustomEmojiProps {
6 | match: string
7 | event?: NDKEvent
8 | }
9 |
10 | export const CustomEmojiComponent = ({match, event}: CustomEmojiProps) => {
11 | const [imgFailed, setImgFailed] = useState(false)
12 | if (!event || imgFailed) return <>{`:${match}:`}
13 |
14 | // The match is already the shortcode from the capture group
15 | const shortcode = match
16 |
17 | // Limit shortcode length to prevent abuse
18 | if (shortcode.length > 50) {
19 | return <>{`:${shortcode}:`}
20 | }
21 |
22 | // Find matching emoji tag
23 | const emojiTag = event.tags.find((tag) => {
24 | return tag[0] === "emoji" && tag[1] === shortcode
25 | })
26 |
27 | if (!emojiTag || !emojiTag[2]) {
28 | return <>{`:${shortcode}:`}
29 | }
30 |
31 | return (
32 |
35 |
43 | )
44 | } else {
45 | console.warn("unknown tag type in InlineMention", type, index, event)
46 | return <>{fail(match)}
47 | }
48 | },
49 | inline: true,
50 | }
51 |
52 | export default InlineMention
53 |
--------------------------------------------------------------------------------
/src/shared/components/embed/nostr/NostrNote.tsx:
--------------------------------------------------------------------------------
1 | import FeedItem from "@/shared/components/event/FeedItem/FeedItem.tsx"
2 | import Embed, {allEmbeds} from "../index.ts"
3 | import {nip19} from "nostr-tools"
4 |
5 | export const eventRegex =
6 | /(?:^|nostr:|(?:https?:\/\/[\w./]+)|iris\.to\/|snort\.social\/e\/|damus\.io\/)((?:@)?note[a-zA-Z0-9]{59,60})(?![\w/])/gi
7 |
8 | const NostrNote: Embed = {
9 | regex: eventRegex,
10 | component: ({match}) => {
11 | try {
12 | const hex = nip19.decode(match.replace("@", ""))
13 | if (!hex) throw new Error(`Invalid hex: ${match}`)
14 | return (
15 |
16 |
24 | )
25 | } catch (error) {
26 | return match
27 | }
28 | },
29 | }
30 |
31 | // need to add this to allEmbeds here to prevent runtime circular dependency
32 | allEmbeds.unshift(NostrNote)
33 |
34 | export default NostrNote
35 |
--------------------------------------------------------------------------------
/src/shared/components/embed/nostr/NostrNpub.tsx:
--------------------------------------------------------------------------------
1 | import {Name} from "@/shared/components/user/Name.tsx"
2 | import {Link} from "react-router"
3 | import Embed from "../index.ts"
4 |
5 | const pubKeyRegex =
6 | /(?:nostr:|(?:https?:\/\/[\w./]+)|iris\.to\/|snort\.social\/p\/|damus\.io\/)+((?:@)?npub[a-zA-Z0-9]{59,60})(?![\w/])/gi
7 |
8 | const NostrNpub: Embed = {
9 | regex: pubKeyRegex,
10 | component: ({match}) => {
11 | const pub = match.replace("@", "")
12 | return (
13 |
14 |
28 |
35 | )
36 | }
37 |
38 | export default FeedItemPlaceholder
39 |
--------------------------------------------------------------------------------
/src/shared/components/event/FeedItem/FeedItemTitle.tsx:
--------------------------------------------------------------------------------
1 | import useProfile from "@/shared/hooks/useProfile.ts"
2 | import {NDKEvent} from "@nostr-dev-kit/ndk"
3 | import {Helmet} from "react-helmet"
4 | import {useMemo} from "react"
5 |
6 | type FeedItemTitleProps = {
7 | event?: NDKEvent
8 | }
9 |
10 | const FeedItemTitle = ({event}: FeedItemTitleProps) => {
11 | const authorProfile = useProfile(event?.pubkey)
12 |
13 | const authorTitle = useMemo(() => {
14 | const name =
15 | authorProfile?.name ||
16 | authorProfile?.display_name ||
17 | authorProfile?.username ||
18 | authorProfile?.nip05?.split("@")[0]
19 | return name ? `Post by ${name}` : "Post"
20 | }, [authorProfile])
21 |
22 | return (
23 |
29 |
34 |
30 |
31 |
33 |
21 | {event.content && (
22 |
35 | )
36 | }
37 |
38 | export default Highlight
39 |
--------------------------------------------------------------------------------
/src/shared/components/event/LikeHeader.tsx:
--------------------------------------------------------------------------------
1 | import {CustomEmojiComponent} from "../embed/nostr/CustomEmojiComponent"
2 | import {Name} from "@/shared/components/user/Name"
3 | import {NDKEvent} from "@nostr-dev-kit/ndk"
4 | import {Link} from "react-router"
5 | import {nip19} from "nostr-tools"
6 |
7 | interface LikeHeaderProps {
8 | event: NDKEvent
9 | }
10 |
11 | function LikeHeader({event}: LikeHeaderProps) {
12 | const reactionText =
13 | event.content === "+" ? (
14 | liked
15 | ) : (
16 | <>
17 | reacted with
18 | {event.content.startsWith(":") && event.content.endsWith(":") ? (
19 |
23 | {event.content}
24 |
25 | )}
26 | {link && (
27 |
28 |
30 | {link}
31 |
32 |
33 | )}
34 |
32 |
37 | {standalone ? textBody : summary || `${textBody.substring(0, 100)}...`}
38 |
39 | {topics && #{topics}}
40 |
41 | )
42 | }
43 |
44 | export default LongForm
45 |
--------------------------------------------------------------------------------
/src/shared/components/event/RawJSON.tsx:
--------------------------------------------------------------------------------
1 | import CopyButton from "@/shared/components/button/CopyButton.tsx"
2 | import {NDKEvent} from "@nostr-dev-kit/ndk"
3 |
4 | type RawJSONProps = {
5 | event: NDKEvent
6 | }
7 |
8 | function RawJSON({event}: RawJSONProps) {
9 | const rawEvent = {
10 | created_at: event.created_at,
11 | content: event.content,
12 | tags: event.tags,
13 | kind: event.kind,
14 | pubkey: event.pubkey,
15 | id: event.id,
16 | sig: event.sig,
17 | }
18 |
19 | return (
20 | {title}
33 |
21 |
24 | )
25 | }
26 |
27 | export default RawJSON
28 |
--------------------------------------------------------------------------------
/src/shared/components/event/ReportUser.tsx:
--------------------------------------------------------------------------------
1 | import {Hexpubkey, NDKEvent} from "@nostr-dev-kit/ndk"
2 | import {useState} from "react"
3 |
4 | import ReportReasonForm from "./ReportReasonForm.tsx"
5 |
6 | interface MuteUserProps {
7 | user: Hexpubkey
8 | event?: NDKEvent
9 | }
10 |
11 | function ReportUser({user, event}: MuteUserProps) {
12 | const [reported, setReported] = useState(false)
13 | return (
14 | {JSON.stringify(rawEvent, null, 4)}
22 |
15 |
24 | )
25 | }
26 |
27 | export default ReportUser
28 |
--------------------------------------------------------------------------------
/src/shared/components/event/RepostHeader.tsx:
--------------------------------------------------------------------------------
1 | import {Name} from "@/shared/components/user/Name"
2 | import {RiRepeatFill} from "@remixicon/react"
3 | import {NDKEvent} from "@nostr-dev-kit/ndk"
4 | import {Link} from "react-router"
5 | import {nip19} from "nostr-tools"
6 |
7 | interface RepostHeaderProps {
8 | event: NDKEvent
9 | }
10 |
11 | function RepostHeader({event}: RepostHeaderProps) {
12 | return (
13 |
17 |
16 |
23 | Would you like to submit a report?
17 | {reported ? ( 18 |Thank you for your report!
19 | ) : (
20 | e.stopPropagation()}>
14 |
28 | )
29 | }
30 |
31 | export default SimpleFeedItemDropdown
32 |
--------------------------------------------------------------------------------
/src/shared/components/event/TextNote.tsx:
--------------------------------------------------------------------------------
1 | import {NDKEvent} from "@nostr-dev-kit/ndk"
2 |
3 | import HyperText from "@/shared/components/HyperText.tsx"
4 | import ErrorBoundary from "../ui/ErrorBoundary"
5 |
6 | type TextNoteProps = {
7 | event: NDKEvent
8 | truncate?: number
9 | }
10 |
11 | function TextNote({event, truncate}: TextNoteProps) {
12 | return (
13 |
15 |
27 |
16 |
18 | -
22 |
- 23 | 24 | 25 |
28 |
34 | )
35 | }
36 |
37 | export default ZapReceipt
38 |
--------------------------------------------------------------------------------
/src/shared/components/event/Zapraiser.tsx:
--------------------------------------------------------------------------------
1 | import {fetchZappedAmount} from "@/utils/nostr"
2 | import {NDKEvent} from "@nostr-dev-kit/ndk"
3 | import {useEffect, useState} from "react"
4 | import HyperText from "../HyperText"
5 |
6 | interface ZapraiserProps {
7 | event: NDKEvent
8 | }
9 |
10 | function Zapraiser({event}: ZapraiserProps) {
11 | const [zapProgress, setZapProgress] = useState(0)
12 |
13 | useEffect(() => {
14 | fetchZappedAmount(event).then((amount: number) => {
15 | if (amount > 0) {
16 | try {
17 | const targetAmount = Number(event.tagValue("zapraiser"))
18 | const percent = Math.round((amount / targetAmount) * 100)
19 | if (percent > 100) {
20 | setZapProgress(100)
21 | } else {
22 | setZapProgress(percent)
23 | }
24 | } catch (error) {
25 | // ignore, event is probably malformed
26 | }
27 | }
28 | })
29 | }, [event])
30 |
31 | return (
32 |
29 |
32 | Zapped {zappedAmount} sats to
30 |{event.content}
33 |
33 | {event.content}
40 |
50 | )
51 | }
52 |
53 | export default Zapraiser
54 |
--------------------------------------------------------------------------------
/src/shared/components/event/reactions/FeedItemActions.tsx:
--------------------------------------------------------------------------------
1 | import {NDKEvent} from "@nostr-dev-kit/ndk"
2 |
3 | import FeedItemComment from "./FeedItemComment.tsx"
4 | import FeedItemRepost from "./FeedItemRepost.tsx"
5 | import FeedItemShare from "./FeedItemShare.tsx"
6 | import {FeedItemLike} from "./FeedItemLike.tsx"
7 | import FeedItemZap from "./FeedItemZap.tsx"
8 | import {RefObject} from "react"
9 |
10 | type FeedItemActionsProps = {
11 | event: NDKEvent
12 | feedItemRef: RefObject34 | {event.tagValue("title")} 35 | 36 | in repository {event.tagValue("repo")} 37 | 38 |
39 |
41 |
49 | Zap Goal {zapProgress} %
42 |
43 |
47 |
48 | e.stopPropagation()}
19 | className={
20 | "py-2 flex flex-row gap-4 z-20 items-center max-w-full select-none text-base-content/50"
21 | }
22 | >
23 | {event.kind !== 30078 &&
29 | )
30 | }
31 |
32 | export default FeedItemActions
33 |
--------------------------------------------------------------------------------
/src/shared/components/event/reactions/FeedItemShare.tsx:
--------------------------------------------------------------------------------
1 | import Icon from "@/shared/components/Icons/Icon"
2 | import {NDKEvent} from "@nostr-dev-kit/ndk"
3 | import {nip19} from "nostr-tools"
4 |
5 | const FeedItemShare = ({event}: {event: NDKEvent}) => {
6 | if (!navigator.share) {
7 | return null
8 | }
9 |
10 | const handleShare = async () => {
11 | if (navigator.share) {
12 | try {
13 | await navigator.share({
14 | url: `https://iris.to/${nip19.noteEncode(event.id)}`,
15 | })
16 | } catch (error) {
17 | console.error("Error sharing:", error)
18 | }
19 | } else {
20 | console.warn("Web Share API is not supported in this browser.")
21 | }
22 | }
23 |
24 | return (
25 |
28 | )
29 | }
30 |
31 | export default FeedItemShare
32 |
--------------------------------------------------------------------------------
/src/shared/components/event/reactions/ReactionContent.tsx:
--------------------------------------------------------------------------------
1 | import {CustomEmojiComponent} from "../../embed/nostr/CustomEmojiComponent"
2 | import {NDKEvent} from "@nostr-dev-kit/ndk"
3 |
4 | export function ReactionContent({content, event}: {content: string; event: NDKEvent}) {
5 | if (content === "+") return "❤️"
6 |
7 | // Check if the content contains emoji shortcodes
8 | const emojiRegex = /:([a-zA-Z0-9_-]+):/g
9 | if (emojiRegex.test(content)) {
10 | const shortcode = content.replace(/:/g, "")
11 | return
12 |
38 | )
39 | }
40 |
--------------------------------------------------------------------------------
/src/shared/components/event/utils.ts:
--------------------------------------------------------------------------------
1 | import {getTag, NDKEventFromRawEvent, fetchEvent} from "@/utils/nostr.ts"
2 | import {NDKEvent} from "@nostr-dev-kit/ndk"
3 | import {nip19} from "nostr-tools"
4 |
5 | export const handleEventContent = async (
6 | event: NDKEvent,
7 | setReferredEvent: (event: NDKEvent) => void
8 | ) => {
9 | try {
10 | if (event.kind === 6 || event.kind === 7) {
11 | let originalEvent
12 | try {
13 | originalEvent = event.content ? JSON.parse(event.content) : undefined
14 | } catch (error) {
15 | // ignore
16 | }
17 | if (originalEvent && originalEvent?.id) {
18 | const ndkEvent = NDKEventFromRawEvent(originalEvent)
19 | setReferredEvent(ndkEvent)
20 | } else {
21 | const eTag = getTag("e", event.tags)
22 | if (eTag) {
23 | const origEvent = await fetchEvent({ids: [eTag]})
24 | if (origEvent) setReferredEvent(origEvent)
25 | }
26 | }
27 | }
28 | } catch (error) {
29 | console.warn(error)
30 | }
31 | }
32 | export const getEventIdHex = (event?: NDKEvent, eventId?: string) => {
33 | if (event?.id) {
34 | return event.id
35 | }
36 | if (eventId!.indexOf("n") === 0) {
37 | const data = nip19.decode(eventId!).data
38 | if (typeof data === "string") {
39 | return data
40 | }
41 | return (data as nip19.EventPointer).id || ""
42 | }
43 | if (!eventId) {
44 | throw new Error("FeedItem requires either an event or an eventId")
45 | }
46 | return eventId
47 | }
48 |
--------------------------------------------------------------------------------
/src/shared/components/feed/DisplayAsSelector.tsx:
--------------------------------------------------------------------------------
1 | import Icon from "../Icons/Icon"
2 |
3 | export type DisplayAs = "list" | "grid"
4 |
5 | type DisplaySelectorProps = {
6 | activeSelection: DisplayAs
7 | onSelect: (display: DisplayAs) => void
8 | show?: boolean
9 | }
10 |
11 | export const DisplayAsSelector = ({
12 | activeSelection,
13 | onSelect,
14 | show = true,
15 | }: DisplaySelectorProps) => {
16 | const getClasses = (displayType: DisplayAs) => {
17 | const baseClasses = "border-highlight cursor-pointer flex justify-center flex-1 p-3"
18 | return activeSelection === displayType
19 | ? `${baseClasses} border-b border-1`
20 | : `${baseClasses} text-base-content/70 hover:text-base-content border-b border-1 border-transparent`
21 | }
22 |
23 | if (!show) return null
24 |
25 | return (
26 |
13 |
19 |
25 |
31 |
32 |
33 | {activeTab === "likes" &&
37 |
27 |
36 | )
37 | }
38 |
--------------------------------------------------------------------------------
/src/shared/components/feed/NewEventsButton.tsx:
--------------------------------------------------------------------------------
1 | import {AvatarGroup} from "@/shared/components/user/AvatarGroup.tsx"
2 | import {NDKEvent} from "@nostr-dev-kit/ndk"
3 | import {RefObject} from "react"
4 |
5 | interface NewEventsButtonProps {
6 | newEventsFiltered: NDKEvent[]
7 | newEventsFrom: Set onSelect("list")}>
28 |
29 |
32 | onSelect("grid")}>
33 |
35 |
22 |
33 |
34 | )
35 | }
36 |
37 | export default NewEventsButton
38 |
--------------------------------------------------------------------------------
/src/shared/components/feed/UnknownUserEvents.tsx:
--------------------------------------------------------------------------------
1 | import InfiniteScroll from "@/shared/components/ui/InfiniteScroll"
2 | import {useState, useRef, useCallback, useMemo} from "react"
3 | import FeedItem from "../event/FeedItem/FeedItem"
4 | import {NDKEvent} from "@nostr-dev-kit/ndk"
5 | import {DISPLAY_INCREMENT} from "./utils"
6 |
7 | interface UnknownUserEventsProps {
8 | eventsByUnknownUsers: NDKEvent[]
9 | showRepliedTo: boolean
10 | asReply: boolean
11 | }
12 |
13 | const UnknownUserEvents = ({
14 | eventsByUnknownUsers,
15 | showRepliedTo,
16 | asReply,
17 | }: UnknownUserEventsProps) => {
18 | const [displayCount, setDisplayCount] = useState(DISPLAY_INCREMENT)
19 | const firstFeedItemRef = useRef
35 |
42 | ))}
43 |
18 |
24 |
25 | {showDetails && (
26 |
38 | )
39 | }
40 |
41 | export default MarketDetails
42 |
--------------------------------------------------------------------------------
/src/shared/components/market/MarketImage.tsx:
--------------------------------------------------------------------------------
1 | import SmallImageComponent from "../embed/media/SmallImageComponent"
2 | import {RiImageLine} from "@remixicon/react"
3 | import {NDKEvent} from "@nostr-dev-kit/ndk"
4 |
5 | type MarketImageProps = {
6 | event: NDKEvent
7 | imageUrl: string | null
8 | size?: number
9 | className?: string
10 | }
11 |
12 | /**
13 | * A reusable component for displaying market listing images
14 | */
15 | const MarketImage = ({event, imageUrl, size = 160, className = ""}: MarketImageProps) => {
16 | return (
17 |
27 |
36 | )}
37 | -
28 | {tags.map((tag, index) => (
29 |
- 30 | {tag[0]}: 31 | {formatTagValue(tag)} 32 | 33 | ))} 34 |
18 | {imageUrl ? (
19 |
29 | )
30 | }
31 |
32 | export default MarketImage
33 |
--------------------------------------------------------------------------------
/src/shared/components/media/PreloadImages.tsx:
--------------------------------------------------------------------------------
1 | import ProxyImg from "../ProxyImg"
2 |
3 | interface PreloadImagesProps {
4 | images: string[]
5 | currentIndex: number
6 | size?: number | null
7 | }
8 |
9 | function PreloadImages({images, currentIndex, size}: PreloadImagesProps) {
10 | if (images.length === 0) return null
11 |
12 | const nextIndex = (currentIndex + 1) % images.length
13 | const prevIndex = (currentIndex - 1 + images.length) % images.length
14 |
15 | return (
16 |
25 |
27 | )}
28 |
17 |
28 | )
29 | }
30 |
31 | export default PreloadImages
32 |
--------------------------------------------------------------------------------
/src/shared/components/messages/UnseenMessagesBadge.tsx:
--------------------------------------------------------------------------------
1 | import {getMillisecondTimestamp} from "nostr-double-ratchet/src"
2 | import {useSessionsStore} from "@/stores/sessions"
3 | import {useEventsStore} from "@/stores/events"
4 | import {useMemo} from "react"
5 |
6 | export default function UnseenMessagesBadge() {
7 | const {lastSeen} = useSessionsStore()
8 | const {events} = useEventsStore()
9 |
10 | const hasUnread = useMemo(() => {
11 | return Array.from(events.entries()).some(([sessionId, sessionEvents]) => {
12 | const [, latest] = sessionEvents.last() ?? []
13 | if (!latest) return false
14 |
15 | const latestTime = getMillisecondTimestamp(latest)
16 | const lastSeenTime = lastSeen.get(sessionId) || 0
17 | return latestTime > lastSeenTime
18 | })
19 | }, [events, lastSeen])
20 |
21 | return (
22 | <>
23 | {hasUnread && }
24 |
25 | )
26 | }
27 |
--------------------------------------------------------------------------------
/src/shared/components/nav/MessagesNavItem.tsx:
--------------------------------------------------------------------------------
1 | import UnseenMessagesBadge from "@/shared/components/messages/UnseenMessagesBadge"
2 | import Icon from "@/shared/components/Icons/Icon"
3 | import {MouseEventHandler} from "react"
4 | import {useUIStore} from "@/stores/ui"
5 | import classNames from "classnames"
6 | import NavLink from "./NavLink"
7 |
8 | interface MessagesNavItemProps {
9 | to: string
10 | onClick?: MouseEventHandler
35 | {children}
36 |
37 | )
38 | }
39 |
40 | export default Dropdown
41 |
--------------------------------------------------------------------------------
/src/shared/components/ui/Hovercard.tsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 | interface HoverCardProps {
3 | children: React.ReactNode
4 | content: React.ReactNode
5 | onClick?: () => void
6 | }
7 |
8 | function HoverCard({children, content, onClick}: HoverCardProps) {
9 | return (
10 |
11 | {children}
12 |
16 | )
17 | }
18 |
19 | export default HoverCard
20 |
--------------------------------------------------------------------------------
/src/shared/components/ui/InfiniteScroll.tsx:
--------------------------------------------------------------------------------
1 | import {ReactNode, useCallback, useEffect, useRef} from "react"
2 |
3 | type Props = {
4 | onLoadMore: () => void
5 | children: ReactNode
6 | }
7 |
8 | const InfiniteScroll = ({onLoadMore, children}: Props) => {
9 | const observerRef = useRef
13 | {content}
14 |
15 |
40 |
44 |
45 | )
46 | }
47 |
48 | export default PublishButton
49 |
--------------------------------------------------------------------------------
/src/shared/components/ui/Widget.tsx:
--------------------------------------------------------------------------------
1 | import React from "react"
2 |
3 | interface WidgetProps {
4 | title: string
5 | children: React.ReactNode
6 | }
7 |
8 | function Widget({title, children}: WidgetProps) {
9 | return (
10 |
11 |
16 | )
17 | }
18 |
19 | export default Widget
20 |
--------------------------------------------------------------------------------
/src/shared/components/user/AvatarGroup.tsx:
--------------------------------------------------------------------------------
1 | import {Avatar} from "@/shared/components/user/Avatar.tsx"
2 |
3 | export function AvatarGroup({
4 | pubKeys,
5 | onClick,
6 | avatarWidth = 30,
7 | }: {
8 | pubKeys: string[]
9 | avatarWidth?: number
10 | onClick?: () => void
11 | }) {
12 | return (
13 | 12 | {title} 13 |
14 |{children}
15 |
14 | {pubKeys.map((a, index) => (
15 |
25 | )
26 | }
27 |
--------------------------------------------------------------------------------
/src/shared/components/user/Badge.tsx:
--------------------------------------------------------------------------------
1 | import socialGraph from "@/utils/socialGraph.ts"
2 | import {RiCheckLine} from "@remixicon/react"
3 | import {useUserStore} from "@/stores/user"
4 |
5 | export const Badge = ({
6 | pubKeyHex,
7 | className,
8 | }: {
9 | pubKeyHex: string
10 | className?: string
11 | }) => {
12 | const publicKey = useUserStore((state) => state.publicKey)
13 | const loggedIn = !!publicKey
14 |
15 | if (!loggedIn) {
16 | return null
17 | }
18 | const distance = socialGraph().getFollowDistance(pubKeyHex)
19 | if (distance <= 2) {
20 | let tooltip
21 | let badgeClass
22 | if (distance === 0) {
23 | tooltip = "You"
24 | badgeClass = "bg-primary"
25 | } else if (distance === 1) {
26 | tooltip = "Following"
27 | badgeClass = "bg-primary"
28 | } else if (distance === 2) {
29 | const followedByFriends = socialGraph().followedByFriends(pubKeyHex)
30 | tooltip = `Followed by ${followedByFriends.size} friends`
31 | badgeClass = followedByFriends.size > 10 ? "bg-accent" : "bg-neutral"
32 | }
33 | return (
34 |
38 | 0 ? "-ml-2" : ""}`}
18 | key={a}
19 | style={{zIndex: pubKeys.length - index}}
20 | >
21 |
23 | ))}
24 |
10 |
19 | )
20 | }
21 |
--------------------------------------------------------------------------------
/src/shared/components/user/MinidenticonImg.tsx:
--------------------------------------------------------------------------------
1 | import {ImgHTMLAttributes, useMemo} from "react"
2 | import {minidenticon} from "minidenticons"
3 |
4 | type Props = {
5 | username: string
6 | saturation?: number
7 | lightness?: number
8 | } & ImgHTMLAttributes
11 | 
12 | {showSignIn ? (
13 | setShowSignIn(false)} />
14 | ) : (
15 | setShowSignIn(true)} />
16 | )}
17 |
18 |
10 |
11 | {profile.about}
12 |
13 |
14 | )
15 | }
16 |
17 | return ""
18 | }
19 |
--------------------------------------------------------------------------------
/src/shared/components/user/ProfileCard.tsx:
--------------------------------------------------------------------------------
1 | import {FollowButton} from "@/shared/components/button/FollowButton"
2 | import {ProfileAbout} from "@/shared/components/user/ProfileAbout"
3 | import {UserRow} from "@/shared/components/user/UserRow"
4 | import FollowedBy from "./FollowedBy"
5 |
6 | const ProfileCard = ({
7 | pubKey,
8 | showAbout = true,
9 | showFollows = false,
10 | showHoverCard = false,
11 | }: {
12 | pubKey: string
13 | showAbout?: boolean
14 | showFollows?: boolean
15 | showHoverCard?: boolean
16 | }) => {
17 | return (
18 |
19 |
26 | )
27 | }
28 |
29 | export default ProfileCard
30 |
--------------------------------------------------------------------------------
/src/shared/components/user/PublicKeyQRCodeButton.tsx:
--------------------------------------------------------------------------------
1 | import QRCodeButton from "./QRCodeButton"
2 | import {nip19} from "nostr-tools"
3 | import {useMemo} from "react"
4 |
5 | interface PublicKeyQRCodeButtonProps {
6 | publicKey: string
7 | onScanSuccess?: (data: string) => void
8 | "data-testid"?: string
9 | }
10 |
11 | function PublicKeyQRCodeButton({
12 | publicKey,
13 | onScanSuccess,
14 | "data-testid": dataTestId,
15 | }: PublicKeyQRCodeButtonProps) {
16 | const npub = useMemo(() => {
17 | if (publicKey.startsWith("npub")) {
18 | return publicKey
19 | } else {
20 | return nip19.npubEncode(publicKey)
21 | }
22 | }, [publicKey])
23 |
24 | const data = `nostr:${npub}`
25 |
26 | return (
27 |
20 |
23 | {showAbout &&
30 | Loading is taking longer than expected. Please{" "}
31 | reload the page.
32 |
33 | )
34 | }
35 | return null
36 | }
37 |
38 | export default Timeout
39 |
--------------------------------------------------------------------------------
/src/shared/hooks/useAutosizeTextarea.ts:
--------------------------------------------------------------------------------
1 | import {useLayoutEffect, useRef} from "react"
2 |
3 | export function useAutosizeTextarea(value: string, {maxRows = 6} = {}) {
4 | const ref = useRef