feat: use custom connect button

src/components/common/ConnectButton.tsx

@@ -0,0 +1,59 @@
+import { ConnectButton as RainbowConnectButton } from "@rainbow-me/rainbowkit"
+import { useGetUserSites } from "~/queries/site"
+import { useAccount } from "wagmi"
+import { Avatar } from "~/components/ui/Avatar";
+
+export const ConnectButton = () => {
+  const { data: viewer } = useAccount()
+  const userSites = useGetUserSites(viewer?.address)
+
+  return (
+    <RainbowConnectButton.Custom>
+      {({
+        account,
+        chain,
+        openAccountModal,
+        openChainModal,
+        openConnectModal,
+        mounted,
+      }) => {
+
+        return (
+          <div
+            {...(!mounted && {
+              'aria-hidden': true,
+              'style': {
+                opacity: 0,
+                pointerEvents: 'none',
+                userSelect: 'none',
+              },
+            })}
+          >
+            {(() => {
+              if (!mounted || !account || !chain) {
+                return (
+                  <button className="text-indigo-600" onClick={openConnectModal} type="button">
+                    Connect Wallet
+                  </button>
+                );
+              }
+              return (
+                <div style={{ display: 'flex', gap: 12 }}>
+                  <button onClick={openAccountModal} type="button">
+                    <Avatar
+                      className="align-middle mr-2"
+                      images={userSites.data?.[0]?.avatars || []}
+                      name={userSites.data?.[0]?.name}
+                      size={22}
+                    />
+                    <span className="align-middle">{userSites.data?.[0]?.name || account.displayName}</span>
+                  </button>
+                </div>
+              );
+            })()}
+          </div>
+        );
+      }}
+    </RainbowConnectButton.Custom>
+  );
+};

src/components/main/MainLayout.tsx

@@ -9,7 +9,7 @@ import {
 import { useStore } from "~/lib/store"
 import { SEOHead } from "../common/SEOHead"
 import { UniLink } from "../ui/UniLink"
-import { ConnectButton } from '@rainbow-me/rainbowkit'
+import { ConnectButton } from "../common/ConnectButton"
 
 export function MainLayout({
   children,
@@ -28,7 +28,7 @@ export function MainLayout({
       <header className="py-10">
         <div className="max-w-screen-md px-5 mx-auto flex justify-between items-center">
           <h1 className="inline-block text-2xl font-extrabold">{APP_NAME}</h1>
-          <div className="space-x-5">
+          <div className="space-x-5 text-zinc-500">
             <ConnectButton />
           </div>
         </div>

src/components/site/SiteHeader.tsx

@@ -12,6 +12,7 @@ import { Avatar } from "../ui/Avatar"
 import { Button } from "../ui/Button"
 import { UniLink } from "../ui/UniLink"
 import { Profile } from "unidata.js"
+import { ConnectButton } from "../common/ConnectButton"
 
 export type HeaderLinkType = {
   icon?: React.ReactNode
@@ -86,6 +87,7 @@ export const SiteHeader: React.FC<{
               return <HeaderLink link={link} key={`${link.label}${i}`} />
             })}
           </div>
+          <ConnectButton />
         </div>
       </div>
     </header>

src/models/site.model.ts

@@ -38,14 +38,25 @@ export const checkSubdomain = async ({
   }
 }
 
-export const getUserSites = async (address: string) => {
+export const getUserSites = async (address?: string) => {
+  if (!address) {
+    return null
+  }
   const profiles = await unidata.profiles.get({
     source: 'Crossbell Profile',
     identity: address,
     platform: 'Ethereum',
   });
 
-  const sites = profiles.list?.sort((a, b) => +new Date(b.date_updated || 0) - +new Date(a.date_updated || 0)).map((profile) => {
+  const sites = profiles.list?.sort((a, b) => {
+    if (a.metadata?.primary) {
+      return -1
+    } else if (b.metadata?.primary) {
+      return 1
+    } else {
+      return +new Date(b.date_updated || 0) - +new Date(a.date_updated || 0)
+    }
+  }).map((profile) => {
     profile.name = profile.name || profile.username;
     return profile
   })

src/pages/index.tsx

@@ -7,7 +7,7 @@ import { getAuthUser } from "~/lib/auth.server"
 import { FLY_REGION } from "~/lib/env.server"
 import { useStore } from "~/lib/store"
 import { useAccount } from 'wagmi'
-import { ConnectButton } from '@rainbow-me/rainbowkit'
+import { ConnectButton } from "~/components/common/ConnectButton"
 
 export const getServerSideProps: GetServerSideProps = async (ctx) => {
   return {