diff --git a/client/src/components/PostCard/PostCard.tsx b/client/src/components/PostCard/PostCard.tsx
index 368d35a..0add60c 100644
--- a/client/src/components/PostCard/PostCard.tsx
+++ b/client/src/components/PostCard/PostCard.tsx
@@ -6,36 +6,7 @@ import { nip19 } from "nostr-tools";
import { getMetadata } from "../../utils/utils";
import ContentPreview from "../Modals/TextModal";
import { renderMedia } from "../../utils/FileUpload";
-
-const colorCombos = [
- "from-red-400 to-yellow-500",
- "from-green-400 to-blue-500",
- "from-purple-400 to-pink-500",
- "from-yellow-400 to-orange-500",
- "from-indigo-400 to-purple-500",
- "from-pink-400 to-red-500",
- "from-blue-400 to-indigo-500",
- "from-orange-400 to-red-500",
- "from-teal-400 to-green-500",
- "from-cyan-400 to-teal-500",
- "from-lime-400 to-green-500",
- "from-amber-400 to-orange-500",
- "from-rose-400 to-pink-500",
- "from-violet-400 to-purple-500",
- "from-sky-400 to-cyan-500",
-];
-
-const getColorFromHash = (id: string, colors: string[]): string => {
- // Create a simple hash from the event.id
- let hash = 0;
- for (let i = 0; i < id.length; i++) {
- hash = (hash << 5) - hash + id.charCodeAt(i);
- }
-
- // Use the hash to pick a color from the colors array
- const index = Math.abs(hash) % colors.length;
- return colors[index];
-};
+import { getIconFromHash } from "../../utils/deterministicProfileIcon";
const timeAgo = (unixTime: number) => {
const seconds = Math.floor(new Date().getTime() / 1000 - unixTime);
@@ -67,7 +38,7 @@ const PostCard = ({
replyCount: number;
}) => {
let { comment, file } = parseContent(event);
- const colorCombo = getColorFromHash(event.pubkey, colorCombos);
+ const icon = getIconFromHash(event.pubkey);
let metadataParsed = null;
if (metadata !== null) {
@@ -96,7 +67,7 @@ const PostCard = ({
) : (
<>
Anonymous
>
diff --git a/client/src/components/Thread/OPCard.tsx b/client/src/components/Thread/OPCard.tsx
index 9386608..121851b 100644
--- a/client/src/components/Thread/OPCard.tsx
+++ b/client/src/components/Thread/OPCard.tsx
@@ -5,36 +5,7 @@ import { Event } from 'nostr-tools';
import { getMetadata } from '../../utils/utils';
import ContentPreview from '../Modals/TextModal';
import { renderMedia } from '../../utils/FileUpload';
-
-const colorCombos = [
- 'from-red-400 to-yellow-500',
- 'from-green-400 to-blue-500',
- 'from-purple-400 to-pink-500',
- 'from-yellow-400 to-orange-500',
- 'from-indigo-400 to-purple-500',
- 'from-pink-400 to-red-500',
- 'from-blue-400 to-indigo-500',
- 'from-orange-400 to-red-500',
- 'from-teal-400 to-green-500',
- 'from-cyan-400 to-teal-500',
- 'from-lime-400 to-green-500',
- 'from-amber-400 to-orange-500',
- 'from-rose-400 to-pink-500',
- 'from-violet-400 to-purple-500',
- 'from-sky-400 to-cyan-500'
-];
-
-const getColorFromHash = (id: string, colors: string[]): string => {
- // Create a simple hash from the event.id
- let hash = 0;
- for (let i = 0; i < id.length; i++) {
- hash = (hash << 5) - hash + id.charCodeAt(i);
- }
-
- // Use the hash to pick a color from the colors array
- const index = Math.abs(hash) % colors.length;
- return colors[index];
-};
+import { getIconFromHash } from '../../utils/deterministicProfileIcon';
const timeAgo = (unixTime: number) => {
const seconds = Math.floor((new Date().getTime() / 1000) - unixTime);
@@ -56,7 +27,7 @@ const timeAgo = (unixTime: number) => {
const OPCard = ({ event, metadata, replyCount }: { event: Event, metadata: Event | null, replyCount: number}) => {
const { comment, file } = parseContent(event);
- const colorCombo = getColorFromHash(event.pubkey, colorCombos);
+ const icon = getIconFromHash(event.pubkey);
let metadataParsed = null;
if (metadata !== null) {
@@ -76,7 +47,7 @@ const OPCard = ({ event, metadata, replyCount }: { event: Event, metadata: Event
>
:
<>
-
+
Anonymous
>
}
diff --git a/client/src/components/Thread/ReplyCard.tsx b/client/src/components/Thread/ReplyCard.tsx
index 86a2486..a415130 100644
--- a/client/src/components/Thread/ReplyCard.tsx
+++ b/client/src/components/Thread/ReplyCard.tsx
@@ -6,36 +6,7 @@ import { nip19 } from 'nostr-tools';
import { getMetadata, uniqBy } from '../../utils/utils';
import ContentPreview from '../Modals/TextModal';
import { renderMedia } from '../../utils/FileUpload';
-
-const colorCombos = [
- 'from-red-400 to-yellow-500',
- 'from-green-400 to-blue-500',
- 'from-purple-400 to-pink-500',
- 'from-yellow-400 to-orange-500',
- 'from-indigo-400 to-purple-500',
- 'from-pink-400 to-red-500',
- 'from-blue-400 to-indigo-500',
- 'from-orange-400 to-red-500',
- 'from-teal-400 to-green-500',
- 'from-cyan-400 to-teal-500',
- 'from-lime-400 to-green-500',
- 'from-amber-400 to-orange-500',
- 'from-rose-400 to-pink-500',
- 'from-violet-400 to-purple-500',
- 'from-sky-400 to-cyan-500'
-];
-
-const getColorFromHash = (id: string, colors: string[]): string => {
- // Create a simple hash from the event.id
- let hash = 0;
- for (let i = 0; i < id.length; i++) {
- hash = (hash << 5) - hash + id.charCodeAt(i);
- }
-
- // Use the hash to pick a color from the colors array
- const index = Math.abs(hash) % colors.length;
- return colors[index];
-};
+import { getIconFromHash } from '../../utils/deterministicProfileIcon';
const timeAgo = (unixTime: number) => {
const seconds = Math.floor((new Date().getTime() / 1000) - unixTime);
@@ -57,7 +28,7 @@ const timeAgo = (unixTime: number) => {
const ReplyCard = ({ event, metadata, replyCount, repliedTo }: { event: Event, metadata: Event | null, replyCount: number, repliedTo: Event[] }) => {
const { comment, file } = parseContent(event);
- const colorCombo = getColorFromHash(event.pubkey, colorCombos);
+ const icon = getIconFromHash(event.pubkey);
// const [events, setEvents] = useState([]);
let metadataParsed = null;
@@ -82,7 +53,7 @@ const ReplyCard = ({ event, metadata, replyCount, repliedTo }: { event: Event, m
>
:
<>
-
+
Anonymous
>
}
@@ -105,7 +76,7 @@ const ReplyCard = ({ event, metadata, replyCount, repliedTo }: { event: Event, m
{event.kind == 0 ? (
) : (
-
+
)}
))}
diff --git a/client/src/utils/deterministicProfileIcon.ts b/client/src/utils/deterministicProfileIcon.ts
new file mode 100644
index 0000000..e54eb5b
--- /dev/null
+++ b/client/src/utils/deterministicProfileIcon.ts
@@ -0,0 +1,40 @@
+const gradientDirections = [
+ "bg-gradient-to-t",
+ "bg-gradient-to-tr",
+ "bg-gradient-to-r",
+ "bg-gradient-to-br",
+ "bg-gradient-to-b",
+ "bg-gradient-to-bl",
+ "bg-gradient-to-l",
+ "bg-gradient-to-tl"
+];
+
+const colorCombos = [
+ "from-red-300 to-yellow-700",
+ "from-green-300 to-blue-700",
+ "from-purple-300 to-pink-700",
+ "from-yellow-300 to-orange-700",
+ "from-indigo-300 to-purple-700",
+ "from-pink-300 to-red-700",
+ "from-blue-300 to-indigo-700",
+ "from-orange-300 to-red-700",
+ "from-teal-300 to-green-700",
+ "from-cyan-300 to-teal-700",
+ "from-lime-300 to-green-700",
+ "from-amber-300 to-orange-700",
+ "from-rose-300 to-pink-700",
+ "from-violet-300 to-purple-700",
+ "from-sky-300 to-cyan-700",
+];
+
+export const getIconFromHash = (id: string): string => {
+ let hash = 0;
+ for (let i = 0; i < id.length; i++) {
+ hash = (hash << 5) - hash + id.charCodeAt(i);
+ }
+
+ const colorIndex = Math.abs(hash) % colorCombos.length;
+ const directionIndex = Math.abs(Math.floor(hash / colorCombos.length)) % gradientDirections.length;
+
+ return `${gradientDirections[directionIndex]} ${colorCombos[colorIndex]}`;
+};
\ No newline at end of file