feat: display feed owner

src/renderer/src/components/ui/button/index.tsx

@@ -187,11 +187,10 @@ export const StyledButton = React.forwardRef<
   return (
     <MotionButtonBase
       ref={ref}
-      className={styledButtonVariant({
+      className={cn(styledButtonVariant({
         variant,
-        className,
         status: isLoading || props.disabled ? "disabled" : undefined,
-      })}
+      }), className)}
       {...props}
       onClick={handleClick}
     >

src/renderer/src/components/user-button.tsx

@@ -3,7 +3,9 @@ import {
   AvatarFallback,
   AvatarImage,
 } from "@renderer/components/ui/avatar"
-import { useSignOut } from "@renderer/hooks"
+import { useAuthQuery, useSignOut } from "@renderer/hooks"
+import { apiClient } from "@renderer/lib/api-fetch"
+import { defineQuery } from "@renderer/lib/defineQuery"
 import { nextFrame } from "@renderer/lib/dom"
 import { cn } from "@renderer/lib/utils"
 import { LoginModalContent } from "@renderer/modules/auth/LoginModalContent"
@@ -126,14 +128,27 @@ ProfileButton.displayName = "ProfileButton"
 export function UserAvatar({
   className,
   hideName,
+  userId,
   ...props
 }: {
   className?: string
   hideName?: boolean
+  userId?: string
 } & LoginProps) {
-  const { session, status } = useSession()
+  const { session, status } = useSession({
+    enabled: !userId,
+  })
 
-  if (status !== "authenticated") {
+  const profile = useAuthQuery(defineQuery(["profiles", userId], async () => {
+    const res = await apiClient.profiles.$get({
+      query: { id: userId! },
+    })
+    return res.data
+  }), {
+    enabled: !!userId,
+  })
+
+  if (!userId && status !== "authenticated") {
     return <LoginButton {...props} />
   }
 
@@ -145,10 +160,10 @@ export function UserAvatar({
       )}
     >
       <Avatar className="aspect-square h-full w-auto">
-        <AvatarImage src={session?.user?.image || undefined} />
-        <AvatarFallback>{session?.user?.name?.slice(0, 2)}</AvatarFallback>
+        <AvatarImage src={(profile.data || session?.user)?.image || undefined} />
+        <AvatarFallback>{(profile.data || session?.user)?.name?.slice(0, 2)}</AvatarFallback>
       </Avatar>
-      {!hideName && <div>{session?.user?.name}</div>}
+      {!hideName && <div>{(profile.data || session?.user)?.name}</div>}
     </div>
   )
 }

src/renderer/src/hono.ts

@@ -4,6 +4,29 @@ import * as hono from 'hono';
 import * as hono_types from 'hono/types';
 
 declare const routes: hono_hono_base.HonoBase<hono_types.BlankEnv, {
+    "/profiles": {
+        $get: {
+            input: {
+                query: {
+                    id: string;
+                };
+            };
+            output: {
+                code: 0;
+                data: {
+                    name: string | null;
+                    id: string;
+                    email: string;
+                    emailVerified: string | null;
+                    image: string | null;
+                    handle: string | null;
+                };
+            };
+            outputFormat: "json";
+            status: 200;
+        };
+    };
+} & {
     "/invitations/new": {
         $post: {
             input: {};

src/renderer/src/modules/wallet/tip-modal.tsx

@@ -6,6 +6,7 @@ import { useCurrentModal } from "@renderer/components/ui/modal"
 import { RadioGroup } from "@renderer/components/ui/radio-group"
 import { RadioCard } from "@renderer/components/ui/radio-group/RadioCard"
 import { Balance } from "@renderer/components/ui/wallet/balance"
+import { UserAvatar } from "@renderer/components/user-button"
 import { nextFrame } from "@renderer/lib/dom"
 import { useWallet, useWalletTipMutation, useWalletTransactions } from "@renderer/queries/wallet"
 import { from, toNumber } from "dnum"
@@ -98,10 +99,23 @@ export const TipModalContent: FC<{
   }
 
   return (
-    <div className="flex w-[80vw] max-w-[350px] flex-col gap-5">
+    <div className="flex w-[80vw] max-w-[350px] flex-col gap-3">
+      {userId ? (
+        <>
+          <p className="text-sm font-medium">Feed Owner</p>
+          <UserAvatar className="h-8 justify-start bg-transparent p-0" userId={userId} />
+        </>
+      ) : (
+        <>
+          <p className="leading-none">
+            <span className="text-xs text-theme-foreground/80">No one has claimed this feed yet. The received Power will be securely held in the blockchain contract until it is claimed.</span>
+          </p>
+          <StyledButton variant="text" className="w-fit p-0">Claim this feed</StyledButton>
+        </>
+      )}
+      <Divider className="my-2" />
       <p className="text-sm text-theme-foreground/80">
-        ⭐ Tip to show your support! Your tip will be added to the author's
-        wallet.
+        ⭐ Tip to show your support!
       </p>
 
       <div className="flex flex-col justify-center gap-y-2">

src/renderer/src/queries/auth.ts

@@ -10,7 +10,9 @@ export const auth = {
   getSession: () => defineQuery(["auth", "session"], () => getSession()),
 }
 
-export const useSession = () => {
+export const useSession = (options?: {
+  enabled?: boolean
+}) => {
   const { data, isLoading, ...rest } = useAuthQuery(auth.getSession(), {
     retry(failureCount, error) {
       const fetchError = error as FetchError
@@ -21,6 +23,7 @@ export const useSession = () => {
 
       return !!(3 - failureCount)
     },
+    enabled: options?.enabled ?? true,
   })
   const { error } = rest
   const fetchError = error as FetchError