feat: connect button character list

Author: DIYgod

src/components/ConnectButton.tsx

@@ -84,7 +84,7 @@ export const ConnectButton: React.FC<{
       }) => {
         return (
           <div
-            className="absolute right-10 top-10"
+            className="absolute right-10 top-8 z-10"
             {...(!mounted && {
               "aria-hidden": true,
               style: {
@@ -98,20 +98,16 @@ export const ConnectButton: React.FC<{
               if (!mounted || !account || !chain) {
                 return (
                   <Button
-                    className="text-accent"
+                    className="text-accent h-10 rounded-full px-8 text-lg"
                     onClick={openConnectModal}
-                    style={{ height: "30px" }}
                     variant={variant || "primary"}
                   >
                     Connect
                   </Button>
                 )
               }
               return (
-                <div
-                  className="relative group"
-                  style={{ gap: 12, height: "30px" }}
-                >
+                <div className="relative group h-10" style={{ gap: 12 }}>
                   {characters.isSuccess ? (
                     <>
                       <button
@@ -128,23 +124,22 @@ export const ConnectButton: React.FC<{
                           name={
                             characters.data?.list?.[0]?.metadata?.content?.name
                           }
-                          size={30}
+                          size={40}
                         />
                         <div className="flex-1 flex flex-col min-w-0">
                           <span
-                            className={`text-left leading-none font-medium truncate ${
+                            className={`text-left leading-tight font-medium truncate text-lg ${
                               InsufficientBalance
                                 ? "text-red-600"
                                 : "text-gray-600"
                             }`}
-                            style={{ marginBottom: "0.15rem" }}
                           >
                             {characters.data?.list?.[0]?.metadata?.content
                               ?.name || account.displayName}
                           </span>
                           {characters.data?.list?.[0]?.handle && (
                             <span
-                              className={`text-left leading-none text-xs truncate ${
+                              className={`text-left leading-tight truncate text-sm ${
                                 InsufficientBalance
                                   ? "text-red-400"
                                   : "text-gray-400"
@@ -162,6 +157,44 @@ export const ConnectButton: React.FC<{
                         }-0 pt-2 group-hover:block top-full z-10 text-gray-600`}
                       >
                         <div className="bg-white rounded-lg ring-1 ring-zinc-100 min-w-[140px] shadow-md py-2 text-sm">
+                          <div className="px-4 py-2 h-auto flex items-center w-full whitespace-nowrap font-medium">
+                            Your characters
+                          </div>
+                          {characters.data?.list?.length ? (
+                            characters.data?.list?.map((character) => (
+                              <UniLink
+                                key={character.handle}
+                                href={`/${character.handle}`}
+                                className="px-4 py-2 h-auto flex items-center w-full whitespace-nowrap hover:bg-zinc-100"
+                              >
+                                <Avatar
+                                  className="align-middle mr-2"
+                                  images={
+                                    character.metadata?.content?.avatars || []
+                                  }
+                                  name={character.metadata?.content?.name}
+                                  size={30}
+                                />
+                                <span className="flex-1 flex flex-col min-w-0">
+                                  <span className="text-left leading-none font-medium truncate">
+                                    {character.metadata?.content?.name}
+                                  </span>
+                                  <span className="text-left leading-none text-xs truncate">
+                                    {"@" + character.handle}
+                                  </span>
+                                </span>
+                                {character.primary && (
+                                  <span className="font-medium text-xs text-yellow-300 ml-2">
+                                    🌟 Primary
+                                  </span>
+                                )}
+                              </UniLink>
+                            ))
+                          ) : (
+                            <span className="px-4 py-2 h-auto flex items-center w-full whitespace-nowrap text-zinc-400">
+                              Empty
+                            </span>
+                          )}
                           {InsufficientBalance && (
                             <UniLink
                               href="https://faucet.crossbell.io/"

src/pages/[handle].tsx

@@ -42,19 +42,21 @@ export const getServerSideProps: GetServerSideProps = async (ctx) => {
     ctx.params!.handle as string,
     queryClient,
   )
-  await Promise.all([
-    prefetchGetFollowers(character.characterId, queryClient),
-    prefetchGetFollowings(character.characterId, queryClient),
-    prefetchGetNotes(
-      {
-        characterId: character.characterId,
-        limit: 10,
-      },
-      queryClient,
-    ),
-    prefetchGetAchievements(character.characterId, queryClient),
-    prefetchGetCalendar(character.characterId, queryClient),
-  ])
+  if (character?.characterId) {
+    await Promise.all([
+      prefetchGetFollowers(character.characterId, queryClient),
+      prefetchGetFollowings(character.characterId, queryClient),
+      prefetchGetNotes(
+        {
+          characterId: character.characterId,
+          limit: 10,
+        },
+        queryClient,
+      ),
+      prefetchGetAchievements(character.characterId, queryClient),
+      prefetchGetCalendar(character.characterId, queryClient),
+    ])
+  }
 
   return {
     props: {
@@ -89,8 +91,6 @@ export default function HandlePage() {
     }
   })
 
-  let currentLength = 0
-
   return (
     <div className="relative flex flex-col items-center min-h-screen py-20">
       <Head>
@@ -237,7 +237,7 @@ export default function HandlePage() {
             (connected_account) => {
               const match = (
                 (connected_account as any).uri || connected_account
-              ).match(/csb:\/\/account:(.*)@(.*)/)
+              )?.match?.(/csb:\/\/account:(.*)@(.*)/)
               if (!match) {
                 return null
               }
@@ -280,18 +280,15 @@ export default function HandlePage() {
           {!!notes.data?.pages?.[0]?.count &&
             notes.data?.pages?.map((page) =>
               page?.list.map((note) => {
-                currentLength++
                 return (
                   <div
                     key={note.noteId}
                     className="mx-auto relative py-6 space-y-2 overflow-hidden border-b border-dashed last:border-b-0"
                   >
                     <UniLink
                       href={
-                        note.metadata?.content?.sources?.includes("xlog") &&
-                        note.metadata?.content?.external_urls?.[0]
-                          ? note.metadata?.content?.external_urls?.[0]
-                          : `https://crossbell.io/notes/${note.characterId}-${note.noteId}`
+                        note.metadata?.content?.external_urls?.[0] ||
+                        `https://crossbell.io/notes/${note.characterId}-${note.noteId}`
                       }
                     >
                       <span className="w-full">

src/pages/index.tsx

@@ -63,8 +63,8 @@ export default function Home() {
           <Image
             alt="xChar"
             src="/logos/crossbell.svg"
-            width={250}
-            height={68}
+            width={375}
+            height={102}
             priority
           />
         </h1>

src/styles/globals.css

@@ -10,6 +10,5 @@
 
 html,
 body {
-  height: 100%;
-  width: 100%;
+  @apply h-full w-full cursor-default;
 }