feat: follow count and list

src/components/site/PostFooter.tsx

@@ -303,11 +303,14 @@ export const PostFooter: React.FC<{
                     images={
                       like.fromCharacter?.metadata?.content?.avatars || []
                     }
-                    name={like.fromCharacter?.metadata?.content?.name}
+                    name={
+                      like.fromCharacter?.metadata?.content?.name ||
+                      like.fromCharacter?.handle
+                    }
                     size={40}
                   />
                   <span>{like.fromCharacter?.metadata?.content?.name}</span>
-                  <span className="text-zinc-400">
+                  <span className="text-zinc-400 truncate max-w-xs">
                     @{like.fromCharacter?.handle}
                   </span>
                 </UniLink>
@@ -341,11 +344,14 @@ export const PostFooter: React.FC<{
                   <Avatar
                     className="align-middle border-2 border-white"
                     images={mint.character?.metadata?.content?.avatars || []}
-                    name={mint.character?.metadata?.content?.name}
+                    name={
+                      mint.character?.metadata?.content?.name ||
+                      mint.character?.handle
+                    }
                     size={40}
                   />
                   <span>{mint.character?.metadata?.content?.name}</span>
-                  <span className="text-zinc-400">
+                  <span className="text-zinc-400 truncate max-w-xs">
                     @{mint.character?.handle}
                   </span>
                 </UniLink>

src/components/site/SiteHeader.tsx

@@ -18,6 +18,7 @@ import { Fragment, useEffect, useState } from "react"
 import toast from "react-hot-toast"
 import {
   useGetSubscription,
+  useGetSiteSubscriptions,
   useSubscribeToSite,
   useUnsubscribeFromSite,
   useGetUserSites,
@@ -27,6 +28,7 @@ import { Menu } from "@headlessui/react"
 import { CrossbellIcon } from "~/components/icons/CrossbellIcon"
 import { BlockchainIcon } from "~/components/icons/BlockchainIcon"
 import { DotsHorizontalIcon, RssIcon } from "@heroicons/react/solid"
+import { Modal } from "~/components/ui/Modal"
 
 export type HeaderLinkType = {
   icon?: React.ReactNode
@@ -63,6 +65,7 @@ export const SiteHeader: React.FC<{
   const [followProgress, setFollowProgress] = useState<boolean>(false)
   const userSite = useGetUserSites(address)
   const router = useRouter()
+  let [isFollowListOpen, setIsFollowListOpen] = useState(false)
 
   const handleClickSubscribe = async () => {
     if (!address) {
@@ -90,6 +93,11 @@ export const SiteHeader: React.FC<{
     siteId: site?.username || "",
   })
 
+  const siteSubscriptions = useGetSiteSubscriptions({
+    siteId: site?.username || "",
+  })
+  console.log(siteSubscriptions.data)
+
   useEffect(() => {
     if (
       followProgress &&
@@ -175,6 +183,19 @@ export const SiteHeader: React.FC<{
                 <div className="text-gray-500 text-sm">{site?.bio}</div>
               )}
               <div className="mt-3 text-sm">
+                {siteSubscriptions.data ? (
+                  <span
+                    className="mr-2 align-middle text-zinc-500 text-sm cursor-pointer"
+                    onClick={() => setIsFollowListOpen(true)}
+                  >
+                    <span className="font-bold text-zinc-700">
+                      {siteSubscriptions.data.total}
+                    </span>{" "}
+                    Followers
+                  </span>
+                ) : (
+                  ""
+                )}
                 {subscription.data ? (
                   <Button
                     rounded="full"
@@ -258,6 +279,47 @@ export const SiteHeader: React.FC<{
           <ConnectButton />
         </div>
       </div>
+      <Modal
+        open={isFollowListOpen}
+        setOpen={setIsFollowListOpen}
+        title="Follow List"
+      >
+        <ul className="px-5">
+          {siteSubscriptions.data?.list?.map((sub: any, index) => (
+            <li
+              className="py-3 flex items-center space-x-2 text-sm"
+              key={index}
+            >
+              <UniLink
+                href={CSB_IO && `${CSB_IO}/@${sub?.character?.handle}`}
+                className="flex items-center space-x-2 text-sm"
+              >
+                <Avatar
+                  className="align-middle border-2 border-white"
+                  images={sub.character?.metadata?.content?.avatars || []}
+                  name={
+                    sub.character?.metadata?.content?.name ||
+                    sub.character?.handle
+                  }
+                  size={40}
+                />
+                <span>{sub.character?.metadata?.content?.name}</span>
+                <span className="text-zinc-400 truncate max-w-xs">
+                  @{sub.character?.handle}
+                </span>
+              </UniLink>
+              <UniLink href={CSB_SCAN + "/tx/" + sub.metadata?.proof}>
+                <BlockchainIcon />
+              </UniLink>
+            </li>
+          ))}
+        </ul>
+        <div className="h-16 border-t flex items-center px-5">
+          <Button isBlock onClick={() => setIsFollowListOpen(false)}>
+            Close
+          </Button>
+        </div>
+      </Modal>
     </header>
   )
 }

src/models/site.model.ts

@@ -2,6 +2,7 @@ import { SiteNavigationItem, Profile } from "~/lib/types"
 import { nanoid } from "nanoid"
 import { checkReservedWords } from "~/lib/reserved-words"
 import unidata from "~/lib/unidata"
+import { indexer, getContract } from "~/lib/crossbell"
 
 export const checkSubdomain = async ({
   subdomain,
@@ -113,6 +114,23 @@ export const getSubscription = async (data: {
   return !!links?.list?.length
 }
 
+export const getSiteSubscriptions = async (data: { siteId: string }) => {
+  const links = await unidata.links.get({
+    source: "Crossbell Link",
+    identity: data.siteId,
+    platform: "Crossbell",
+    reversed: true,
+  })
+
+  await Promise.all(
+    links?.list.map(async (item: any) => {
+      const owner = item.from
+      item.character = await indexer.getCharacterByHandle(owner)
+    }) || [],
+  )
+  return links
+}
+
 export async function updateSite(payload: {
   site: string
   name?: string

src/queries/site.ts

@@ -29,6 +29,15 @@ export const useGetSubscription = (data: {
   })
 }
 
+export const useGetSiteSubscriptions = (data: { siteId: string }) => {
+  return useQuery(["getSiteSubscriptions", data], async () => {
+    if (!data.siteId) {
+      return null
+    }
+    return siteModel.getSiteSubscriptions(data)
+  })
+}
+
 export function useUpdateSite() {
   const queryClient = useQueryClient()
   const mutation = useMutation(