feat: use DiceBear to display default avatars

2023-07-11 23:49:32 +01:00 · 2023-07-11 23:49:32 +01:00 · d1f2f8a305
parent 9f308bff23
commit d1f2f8a305
17 changed files with 42 additions and 36 deletions
--- 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}
--- 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}
--- 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}
--- 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}
--- 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}
--- 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>
--- 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}
--- 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 || []
--- 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],
  )
--- 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],
  )
--- 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],
  )
--- 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}
--- 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}
--- 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">
--- 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 (
--- 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 || ""}
--- 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
                }