feat(leaderboard): display user addresses & "Your position" section

src/app/(dashboard)/[guildUrlName]/leaderboard/[rewardId]/components/Leaderboard.tsx

@@ -1,15 +1,18 @@
 "use client";
 
+import { userOptions } from "@/lib/options";
 import {
+  useQuery,
   useSuspenseInfiniteQuery,
   useSuspenseQuery,
 } from "@tanstack/react-query";
 import { leaderboardOptions, pointsRewardOptions } from "../options";
 import { LeaderboardUserCard } from "./LeaderboardUserCard";
 
 export const Leaderboard = ({ rewardId }: { rewardId: string }) => {
+  const { data: user } = useQuery(userOptions());
   const { data: rawData } = useSuspenseInfiniteQuery(
-    leaderboardOptions({ rewardId }),
+    leaderboardOptions({ rewardId, userId: user?.id }),
   );
 
   const { data: pointReward } = useSuspenseQuery(
@@ -20,10 +23,12 @@ export const Leaderboard = ({ rewardId }: { rewardId: string }) => {
 
   return (
     <div className="space-y-6">
-      {/* <section className="space-y-4">
-        <h2 className="font-bold">Your position</h2>
-        <LeaderboardUserCard user={data.user} />
-      </section> */}
+      {!!data.user && (
+        <section className="space-y-4">
+          <h2 className="font-bold">Your position</h2>
+          <LeaderboardUserCard user={data.user} />
+        </section>
+      )}
 
       <section className="space-y-4">
         <h2 className="font-bold">{`${pointReward.data.name} leaderboard`}</h2>

src/app/(dashboard)/[guildUrlName]/leaderboard/[rewardId]/components/LeaderboardUserCard.tsx

@@ -7,7 +7,7 @@ import { pointsRewardOptions } from "../options";
 
 export const LeaderboardUserCard = ({
   user,
-}: { user: Leaderboard["user"] }) => {
+}: { user: NonNullable<Leaderboard["user"]> }) => {
   const { rewardId } = useParams<{ rewardId: string }>();
   const { data: pointReward } = useSuspenseQuery(
     pointsRewardOptions({ rewardId }),
@@ -24,7 +24,9 @@ export const LeaderboardUserCard = ({
           <div className="flex size-8 shrink-0 items-center justify-center rounded-full bg-image sm:size-10">
             <User weight="duotone" className="size-4 sm:size-5" />
           </div>
-          <span className="line-clamp-1 shrink font-bold">{user.userId}</span>
+          <span className="line-clamp-1 shrink font-bold">
+            {user.primaryIdentity.foreignId}
+          </span>
         </div>
         <span className="shrink-0">
           <b>{`${user.amount} `}</b>

src/app/(dashboard)/[guildUrlName]/leaderboard/[rewardId]/options.ts

@@ -3,11 +3,14 @@ import { fetchGuildApiData } from "@/lib/fetchGuildApi";
 import type { GuildReward } from "@/lib/schemas/guildReward";
 import { infiniteQueryOptions, queryOptions } from "@tanstack/react-query";
 
-export const leaderboardOptions = ({ rewardId }: { rewardId: string }) => {
+export const leaderboardOptions = ({
+  rewardId,
+  userId,
+}: { rewardId: string; userId?: string }) => {
   return infiniteQueryOptions({
     queryKey: ["leaderboard", rewardId],
     queryFn: ({ pageParam }) =>
-      fetchLeaderboard({ rewardId, offset: pageParam }),
+      fetchLeaderboard({ rewardId, userId, offset: pageParam }),
     initialPageParam: 1,
     enabled: rewardId !== undefined,
     getNextPageParam: (lastPage) =>

src/app/(dashboard)/explorer/fetchers.ts

@@ -24,10 +24,11 @@ export const fetchGuildSearch = async ({
 
 export const fetchLeaderboard = async ({
   rewardId,
+  userId,
   offset = 0,
-}: { rewardId: string; offset?: number }) => {
-  console.log("fetching leaderboard", `reward/${rewardId}/leaderboard`);
+}: { rewardId: string; userId?: string; offset?: number }) => {
   return fetchGuildApiData<
     Leaderboard & { total: number; offset: number; limit: number }
-  >(`reward/${rewardId}/leaderboard`); // TODO: use the offset param
+  >(`reward/${rewardId}/leaderboard?userId=${userId}
+`); // TODO: use the offset param
 };

src/lib/schemas/leaderboard.ts

@@ -4,11 +4,16 @@ const LeaderboardUserSchema = z.object({
   userId: z.string().uuid(),
   amount: z.number(),
   rank: z.number(),
+  // TODO: use the user identity schema here
+  primaryIdentity: z.object({
+    identityId: z.string().uuid(),
+    foreignId: z.string(),
+  }),
 });
 
 const LeaderboardSchema = z.object({
   leaderboard: z.array(LeaderboardUserSchema.omit({ rank: true })),
-  user: LeaderboardUserSchema,
+  user: LeaderboardUserSchema.optional(),
 });
 
 export type Leaderboard = z.infer<typeof LeaderboardSchema>;