From d1f2f8a305619ab9f56441ac1e08659af12e8ea4 Mon Sep 17 00:00:00 2001
From: DIYgod <i@diygod.me>
Date: Tue, 11 Jul 2023 23:49:32 +0100
Subject: [PATCH] feat: use DiceBear to display default avatars

---
 .../[subdomain]/events/page-component.tsx     |  1 +
 .../[subdomain]/layout-component.tsx          |  1 +
 src/components/common/CharacterCard.tsx       |  1 +
 src/components/common/CharacterListItem.tsx   |  1 +
 src/components/common/CommentInput.tsx        |  4 +++
 src/components/common/CommentItem.tsx         |  5 ++-
 src/components/common/ConnectButton.tsx       |  1 +
 src/components/common/PatronModal.tsx         |  2 ++
 src/components/common/ReactionLike.tsx        |  1 +
 src/components/common/ReactionMint.tsx        |  1 +
 src/components/common/ReactionTip.tsx         |  1 +
 src/components/home/HomeFeed.tsx              |  1 +
 src/components/home/HomeSidebar.tsx           |  1 +
 src/components/site/SiteHeader.tsx            | 17 +++++-----
 src/components/ui/Avatar.tsx                  | 34 +++++--------------
 src/components/ui/AvatarStack.tsx             |  2 ++
 src/models/home.model.ts                      |  4 +++
 17 files changed, 42 insertions(+), 36 deletions(-)

diff --git a/src/app/dashboard/[subdomain]/events/page-component.tsx b/src/app/dashboard/[subdomain]/events/page-component.tsx
index 81ecbf63..ce7d6608 100644
--- a/src/app/dashboard/[subdomain]/events/page-component.tsx
+++ b/src/app/dashboard/[subdomain]/events/page-component.tsx
@@ -26,6 +26,7 @@ function SiteAvatar({ siteId }: { siteId: string }) {
           })}
         >
           <Avatar
+            cid={site.data?.characterId}
             images={site.data?.metadata?.content?.avatars || []}
             name={site.data?.metadata?.content?.name || ""}
             size={40}
diff --git a/src/app/dashboard/[subdomain]/layout-component.tsx b/src/app/dashboard/[subdomain]/layout-component.tsx
index 7993265a..64b77058 100644
--- a/src/app/dashboard/[subdomain]/layout-component.tsx
+++ b/src/app/dashboard/[subdomain]/layout-component.tsx
@@ -283,6 +283,7 @@ export default function DashboardLayout({
                             {isOpen && "You are operating"}
                           </div>
                           <Avatar
+                            cid={site.data?.characterId}
                             images={site.data?.metadata?.content?.avatars || []}
                             size={isOpen ? 60 : 40}
                             name={site.data?.metadata?.content?.name}
diff --git a/src/components/common/CharacterCard.tsx b/src/components/common/CharacterCard.tsx
index ca994e9e..2f0e8dc6 100644
--- a/src/components/common/CharacterCard.tsx
+++ b/src/components/common/CharacterCard.tsx
@@ -50,6 +50,7 @@ export const CharacterCard = ({
         <>
           <span className="flex items-center justify-between">
             <Avatar
+              cid={site?.characterId}
               images={site?.metadata?.content?.avatars || []}
               name={site?.metadata?.content?.name}
               size={45}
diff --git a/src/components/common/CharacterListItem.tsx b/src/components/common/CharacterListItem.tsx
index e6ffe000..44828c52 100644
--- a/src/components/common/CharacterListItem.tsx
+++ b/src/components/common/CharacterListItem.tsx
@@ -29,6 +29,7 @@ const CharacterListItem = ({
         >
           <CharacterFloatCard siteId={character?.handle}>
             <Avatar
+              cid={character?.characterId}
               className="align-middle border-2 border-white"
               images={character?.metadata?.content?.avatars || noopArr}
               name={character?.metadata?.content?.name || character?.handle}
diff --git a/src/components/common/CommentInput.tsx b/src/components/common/CommentInput.tsx
index c94fe8c8..89042324 100644
--- a/src/components/common/CommentInput.tsx
+++ b/src/components/common/CommentInput.tsx
@@ -1,4 +1,5 @@
 import type { CharacterEntity, NoteEntity } from "crossbell"
+import { nanoid } from "nanoid"
 import dynamic from "next/dynamic"
 import { useCallback, useEffect, useRef, useState } from "react"
 import { useForm } from "react-hook-form"
@@ -59,6 +60,8 @@ export const CommentInput = ({
   const anonymousComment = useAnonymousComment()
   const [anonymous, setAnonymous] = useState(false)
 
+  const [randomId] = useState(nanoid())
+
   const form = useForm({
     defaultValues: {
       content: comment?.metadata?.content?.content || "",
@@ -204,6 +207,7 @@ export const CommentInput = ({
   return (
     <div className="xlog-comment-input flex">
       <Avatar
+        cid={account?.character?.characterId || randomId}
         className="align-middle mr-3"
         images={account?.character?.metadata?.content?.avatars || []}
         name={account?.character?.metadata?.content?.name}
diff --git a/src/components/common/CommentItem.tsx b/src/components/common/CommentItem.tsx
index 0e82d294..821be6a1 100644
--- a/src/components/common/CommentItem.tsx
+++ b/src/components/common/CommentItem.tsx
@@ -69,8 +69,11 @@ export const CommentItem = ({
                 className="block align-middle mr-3"
               >
                 <Avatar
+                  cid={comment?.character?.characterId}
                   images={comment?.character?.metadata?.content?.avatars || []}
-                  name={comment?.character?.metadata?.content?.name}
+                  name={
+                    displayName || comment?.character?.metadata?.content?.name
+                  }
                   size={45}
                 />
               </UniLink>
diff --git a/src/components/common/ConnectButton.tsx b/src/components/common/ConnectButton.tsx
index c7c786d0..1130fd24 100644
--- a/src/components/common/ConnectButton.tsx
+++ b/src/components/common/ConnectButton.tsx
@@ -255,6 +255,7 @@ export const ConnectButton = ({
                   aria-label="connector"
                 >
                   <Avatar
+                    cid={account.character?.characterId}
                     className="align-middle"
                     images={account.character?.metadata?.content?.avatars || []}
                     name={account.character?.metadata?.content?.name}
diff --git a/src/components/common/PatronModal.tsx b/src/components/common/PatronModal.tsx
index dfb00a61..4f86e427 100644
--- a/src/components/common/PatronModal.tsx
+++ b/src/components/common/PatronModal.tsx
@@ -155,6 +155,7 @@ const PatronModal = ({
         <div className="space-y-1">
           <span className="flex items-center justify-center">
             <Avatar
+              cid={site?.characterId}
               images={site?.metadata?.content?.avatars || []}
               name={site?.metadata?.content?.name}
               size={100}
@@ -195,6 +196,7 @@ const PatronModal = ({
                             })}
                           >
                             <Avatar
+                              cid={tip.character?.characterId}
                               className="relative align-middle border-2 border-white"
                               images={
                                 tip.character?.metadata?.content?.avatars || []
diff --git a/src/components/common/ReactionLike.tsx b/src/components/common/ReactionLike.tsx
index d44d2b94..c68b2190 100644
--- a/src/components/common/ReactionLike.tsx
+++ b/src/components/common/ReactionLike.tsx
@@ -136,6 +136,7 @@ export const ReactionLike = ({
         .map(($) => ({
           images: $.character?.metadata?.content?.avatars,
           name: $.character?.metadata?.content?.name,
+          cid: $.characterId,
         })),
     [likes],
   )
diff --git a/src/components/common/ReactionMint.tsx b/src/components/common/ReactionMint.tsx
index 9e7f0401..14f783a2 100644
--- a/src/components/common/ReactionMint.tsx
+++ b/src/components/common/ReactionMint.tsx
@@ -102,6 +102,7 @@ export const ReactionMint = ({
         .map((mint) => ({
           images: mint.character?.metadata?.content?.avatars,
           name: mint.character?.metadata?.content?.name,
+          cid: mint.character.characterId,
         })) || noopArr,
     [mints],
   )
diff --git a/src/components/common/ReactionTip.tsx b/src/components/common/ReactionTip.tsx
index 63298e55..0cbf8e0f 100644
--- a/src/components/common/ReactionTip.tsx
+++ b/src/components/common/ReactionTip.tsx
@@ -64,6 +64,7 @@ export const ReactionTip = ({
         .map((mint) => ({
           images: mint.character?.metadata?.content?.avatars,
           name: mint.character?.metadata?.content?.name,
+          cid: mint.character?.characterId,
         })) || noopArr,
     [tips.data?.pages],
   )
diff --git a/src/components/home/HomeFeed.tsx b/src/components/home/HomeFeed.tsx
index 789ae919..e3a6daaa 100644
--- a/src/components/home/HomeFeed.tsx
+++ b/src/components/home/HomeFeed.tsx
@@ -84,6 +84,7 @@ const PostCard = ({
             >
               <span className="w-5 h-5 sm:w-6 sm:h-6 inline-block">
                 <Avatar
+                  cid={character?.characterId}
                   images={character?.metadata?.content?.avatars || []}
                   size={24}
                   name={character?.metadata?.content?.name}
diff --git a/src/components/home/HomeSidebar.tsx b/src/components/home/HomeSidebar.tsx
index c532c9d7..7614f6da 100644
--- a/src/components/home/HomeSidebar.tsx
+++ b/src/components/home/HomeSidebar.tsx
@@ -58,6 +58,7 @@ export function HomeSidebar({ hideSearch }: { hideSearch?: boolean }) {
                   <CharacterFloatCard siteId={site.handle}>
                     <span className="w-10 h-10 inline-block">
                       <Avatar
+                        cid={site?.characterId}
                         images={site?.metadata?.content?.avatars || []}
                         size={40}
                         name={site?.metadata?.content?.name}
diff --git a/src/components/site/SiteHeader.tsx b/src/components/site/SiteHeader.tsx
index e181557d..66f2c7f9 100644
--- a/src/components/site/SiteHeader.tsx
+++ b/src/components/site/SiteHeader.tsx
@@ -85,15 +85,14 @@ export const SiteHeader = async ({
                 : "",
             )}
           >
-            {site?.metadata?.content?.avatars?.[0] && (
-              <Avatar
-                className="xlog-site-icon max-w-[100px] max-h-[100px] sm:max-w-none sm:max-h-none"
-                images={site?.metadata?.content?.avatars}
-                size={150}
-                name={site?.metadata?.content?.name}
-                priority={true}
-              />
-            )}
+            <Avatar
+              cid={site?.characterId}
+              className="xlog-site-icon max-w-[100px] max-h-[100px] sm:max-w-none sm:max-h-none"
+              images={site?.metadata?.content?.avatars || []}
+              size={150}
+              name={site?.metadata?.content?.name}
+              priority={true}
+            />
             <div className="flex-1 min-w-0 relative">
               <div className="flex items-center justify-between">
                 <h1 className="xlog-site-name text-3xl sm:text-4xl font-bold text-zinc-900 leading-snug break-words min-w-0">
diff --git a/src/components/ui/Avatar.tsx b/src/components/ui/Avatar.tsx
index 5e97a372..2a1920cf 100644
--- a/src/components/ui/Avatar.tsx
+++ b/src/components/ui/Avatar.tsx
@@ -5,6 +5,7 @@ import { toGateway } from "~/lib/ipfs-parser"
 import { cn } from "~/lib/utils"
 
 export const Avatar = ({
+  cid,
   images,
   size,
   name,
@@ -14,6 +15,7 @@ export const Avatar = ({
   priority,
   ...props
 }: {
+  cid?: string | number | null
   images: (string | null | undefined)[]
   name?: string | null
   size?: number
@@ -24,15 +26,7 @@ export const Avatar = ({
 } & React.HTMLAttributes<HTMLSpanElement>) => {
   size = size || 60
 
-  const fontSize = size * 0.5
-
-  const nameAbbr = (name || "")
-    .split(" ")
-    .slice(0, 2)
-    .map((word) => word[0])
-    .join("")
-
-  const image = useMemo(() => {
+  let image = useMemo(() => {
     for (const image of images) {
       if (image) return toGateway(image)
     }
@@ -41,23 +35,11 @@ export const Avatar = ({
   const borderRadius = rounded === false ? "rounded-lg" : "rounded-full"
 
   if (!image) {
-    return (
-      <span
-        {...props}
-        className={cn(
-          `inline-flex text-white bg-gray-400 items-center justify-center text-xl font-medium uppercase flex-shrink-0 max-w-full max-h-full`,
-          borderRadius,
-          className,
-        )}
-        style={{
-          width: `${size}px`,
-          height: `${size}px`,
-          fontSize: `${fontSize}px`,
-        }}
-      >
-        {nameAbbr}
-      </span>
-    )
+    image = `https://api.dicebear.com/6.x/bottts-neutral/svg?seed=${cid}`
+  }
+
+  if (cid === 56592) {
+    image = `https://api.dicebear.com/6.x/bottts-neutral/svg?seed=${name}`
   }
 
   return (
diff --git a/src/components/ui/AvatarStack.tsx b/src/components/ui/AvatarStack.tsx
index 30707da4..473a3b6c 100644
--- a/src/components/ui/AvatarStack.tsx
+++ b/src/components/ui/AvatarStack.tsx
@@ -9,6 +9,7 @@ interface AvatarStackProps {
   avatars: {
     name: string | null | undefined
     images: string[] | null | undefined
+    cid: number | null | undefined
   }[]
   count: number
 
@@ -28,6 +29,7 @@ export const AvatarStack: FC<AvatarStackProps> = (props) => {
         return (
           <li className="inline-block" key={avatar.name}>
             <Avatar
+              cid={avatar.cid}
               className="relative align-middle border-2 border-white"
               images={avatar.images || noopArr}
               name={avatar.name || ""}
diff --git a/src/models/home.model.ts b/src/models/home.model.ts
index 1b9b8354..b672aaa0 100644
--- a/src/models/home.model.ts
+++ b/src/models/home.model.ts
@@ -97,6 +97,7 @@ export async function getFeed({
               noteId
               character {
                 handle
+                characterId
                 metadata {
                   content
                 }
@@ -289,6 +290,7 @@ export async function getFeed({
                 noteId
                 character {
                   handle
+                  characterId
                   metadata {
                     content
                   }
@@ -370,6 +372,7 @@ export async function getFeed({
                 noteId
                 character {
                   handle
+                  characterId
                   metadata {
                     content
                   }
@@ -437,6 +440,7 @@ export async function getFeed({
               noteId
               character {
                 handle
+                characterId
                 metadata {
                   content
                 }