Skip to content

Commit 1da7390

Browse files
jagnani73jagnani73
committed
fix(fe): leaderboard
1 parent 5ba7c54 commit 1da7390

File tree

1 file changed

+114
-100
lines changed

1 file changed

+114
-100
lines changed

‎packages/frontend/src/app/components/leaderboard/leaderboard.tsx

Lines changed: 114 additions & 100 deletions
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,9 @@ export const Leaderboard: React.FC = () => {
2929
null,
3030
);
3131
const [loading, setLoading] = useState<boolean>(false);
32-
const [leaderboard, setLeaderboard] = useState<MappedLeaderboard[]>([]);
32+
const [leaderboard, setLeaderboard] = useState<MappedLeaderboard[] | null>(
33+
null,
34+
);
3335

3436
useEffect(() => {
3537
(async () => {
@@ -90,112 +92,124 @@ export const Leaderboard: React.FC = () => {
9092
</p>
9193
</div>
9294

93-
{selectedSeason && (
95+
{selectedSeason && leaderboard && (
9496
<>
9597
<div className="mx-4 justify-center">
9698
{!selectedSeasonActive ? (
9799
<div className="grid h-80 grid-cols-3">
98-
<div className="flex flex-col justify-end truncate text-ellipsis bg-[linear-gradient(0deg,_rgba(204,204,204,0.2)_0%,_rgba(204,204,204,0)_56.58%)] px-2 pb-6 pt-16 text-center">
99-
<RankTwo
100-
className="mx-auto h-24 w-24"
101-
profile_photo={
102-
leaderboard[1].profile_photo!
103-
}
104-
/>
105-
106-
<p className="w-full truncate text-ellipsis text-body-1 font-medium">
107-
{leaderboard[1].name}
108-
</p>
109-
110-
<p className="w-full text-body-3 text-neutral-200">
111-
{truncate(
112-
leaderboard[1].wallet_address,
113-
).toUpperCase()}
114-
</p>
115-
116-
<div className="flex w-full items-center justify-center gap-1 text-body-3 text-neutral-200">
117-
<StarIcon solid />
118-
{leaderboard[1].total_points?.toLocaleString()}
100+
{leaderboard[1] ? (
101+
<div className="flex flex-col justify-end truncate text-ellipsis bg-[linear-gradient(0deg,_rgba(204,204,204,0.2)_0%,_rgba(204,204,204,0)_56.58%)] px-2 pb-6 pt-16 text-center">
102+
<RankTwo
103+
className="mx-auto h-24 w-24"
104+
profile_photo={
105+
leaderboard[1].profile_photo!
106+
}
107+
/>
108+
109+
<p className="w-full truncate text-ellipsis text-body-1 font-medium">
110+
{leaderboard[1].name}
111+
</p>
112+
113+
<p className="w-full text-body-3 text-neutral-200">
114+
{truncate(
115+
leaderboard[1].wallet_address,
116+
).toUpperCase()}
117+
</p>
118+
119+
<div className="flex w-full items-center justify-center gap-1 text-body-3 text-neutral-200">
120+
<StarIcon solid />
121+
{leaderboard[1].total_points?.toLocaleString()}
122+
</div>
123+
124+
<p
125+
className={`mt-4 bg-[linear-gradient(180deg,_#F1F8FF_0%,_#7C8186_100%)] bg-clip-text text-heading-2 font-semibold text-transparent`}
126+
>
127+
$
128+
{calculatePercentage(
129+
selectedSeason.reward_pool_usd,
130+
rankTwoRewardPercentage,
131+
).toLocaleString()}
132+
</p>
119133
</div>
120-
121-
<p
122-
className={`mt-4 bg-[linear-gradient(180deg,_#F1F8FF_0%,_#7C8186_100%)] bg-clip-text text-heading-2 font-semibold text-transparent`}
123-
>
124-
$
125-
{calculatePercentage(
126-
selectedSeason.reward_pool_usd,
127-
rankTwoRewardPercentage,
128-
).toLocaleString()}
129-
</p>
130-
</div>
131-
132-
<div className="flex flex-col justify-end truncate text-ellipsis bg-[linear-gradient(0deg,_rgba(246,216,135,0.24)_0%,_rgba(246,216,135,0)_95.04%)] px-2 pb-6 pt-16 text-center">
133-
<RankOne
134-
className="mx-auto h-28 w-28"
135-
profile_photo={
136-
leaderboard[0].profile_photo!
137-
}
138-
/>
139-
140-
<p className="w-full truncate text-ellipsis text-body-1 font-medium">
141-
{leaderboard[0].name}
142-
</p>
143-
144-
<p className="w-full text-body-3 text-neutral-200">
145-
{truncate(
146-
leaderboard[0].wallet_address,
147-
).toUpperCase()}
148-
</p>
149-
150-
<div className="flex w-full items-center justify-center gap-1 text-body-3 text-neutral-200">
151-
<StarIcon solid />
152-
{leaderboard[0].total_points?.toLocaleString()}
134+
) : (
135+
<span />
136+
)}
137+
138+
{leaderboard[0] ? (
139+
<div className="flex flex-col justify-end truncate text-ellipsis bg-[linear-gradient(0deg,_rgba(246,216,135,0.24)_0%,_rgba(246,216,135,0)_95.04%)] px-2 pb-6 pt-16 text-center">
140+
<RankOne
141+
className="mx-auto h-28 w-28"
142+
profile_photo={
143+
leaderboard[0].profile_photo!
144+
}
145+
/>
146+
147+
<p className="w-full truncate text-ellipsis text-body-1 font-medium">
148+
{leaderboard[0].name}
149+
</p>
150+
151+
<p className="w-full text-body-3 text-neutral-200">
152+
{truncate(
153+
leaderboard[0].wallet_address,
154+
).toUpperCase()}
155+
</p>
156+
157+
<div className="flex w-full items-center justify-center gap-1 text-body-3 text-neutral-200">
158+
<StarIcon solid />
159+
{leaderboard[0].total_points?.toLocaleString()}
160+
</div>
161+
162+
<p
163+
className={`mt-12 bg-[linear-gradient(180deg,_#FCE19A_0%,_#BD9350_100%)] bg-clip-text text-heading-2 font-semibold text-transparent`}
164+
>
165+
$
166+
{calculatePercentage(
167+
selectedSeason.reward_pool_usd,
168+
rankOwnRewardPercentage,
169+
).toLocaleString()}
170+
</p>
153171
</div>
154-
155-
<p
156-
className={`mt-12 bg-[linear-gradient(180deg,_#FCE19A_0%,_#BD9350_100%)] bg-clip-text text-heading-2 font-semibold text-transparent`}
157-
>
158-
$
159-
{calculatePercentage(
160-
selectedSeason.reward_pool_usd,
161-
rankOwnRewardPercentage,
162-
).toLocaleString()}
163-
</p>
164-
</div>
165-
166-
<div className="flex flex-col justify-end truncate text-ellipsis bg-[linear-gradient(0deg,_rgba(211,160,133,0.2)_0%,_rgba(211,160,133,0)_71.8%)] px-2 pb-6 pt-16 text-center">
167-
<RankThree
168-
className="mx-auto h-24 w-24"
169-
profile_photo={
170-
leaderboard[2].profile_photo!
171-
}
172-
/>
173-
174-
<p className="w-full truncate text-ellipsis text-body-1 font-medium">
175-
{leaderboard[2].name}
176-
</p>
177-
178-
<p className="w-full text-body-3 text-neutral-200">
179-
{truncate(
180-
leaderboard[2].wallet_address,
181-
).toUpperCase()}
182-
</p>
183-
184-
<div className="flex w-full items-center justify-center gap-1 text-body-3 text-neutral-200">
185-
<StarIcon solid />
186-
{leaderboard[2].total_points?.toLocaleString()}
172+
) : (
173+
<span />
174+
)}
175+
176+
{leaderboard[2] ? (
177+
<div className="flex flex-col justify-end truncate text-ellipsis bg-[linear-gradient(0deg,_rgba(211,160,133,0.2)_0%,_rgba(211,160,133,0)_71.8%)] px-2 pb-6 pt-16 text-center">
178+
<RankThree
179+
className="mx-auto h-24 w-24"
180+
profile_photo={
181+
leaderboard[2].profile_photo!
182+
}
183+
/>
184+
185+
<p className="w-full truncate text-ellipsis text-body-1 font-medium">
186+
{leaderboard[2].name}
187+
</p>
188+
189+
<p className="w-full text-body-3 text-neutral-200">
190+
{truncate(
191+
leaderboard[2].wallet_address,
192+
).toUpperCase()}
193+
</p>
194+
195+
<div className="flex w-full items-center justify-center gap-1 text-body-3 text-neutral-200">
196+
<StarIcon solid />
197+
{leaderboard[2].total_points?.toLocaleString()}
198+
</div>
199+
200+
<p
201+
className={`mt-4 bg-[linear-gradient(180deg,_#FFDDC6_0%,_#9E7259_100%)] bg-clip-text text-heading-2 font-semibold text-transparent`}
202+
>
203+
$
204+
{calculatePercentage(
205+
selectedSeason.reward_pool_usd,
206+
rankThreeRewardPercentage,
207+
).toLocaleString()}
208+
</p>
187209
</div>
188-
189-
<p
190-
className={`mt-4 bg-[linear-gradient(180deg,_#FFDDC6_0%,_#9E7259_100%)] bg-clip-text text-heading-2 font-semibold text-transparent`}
191-
>
192-
$
193-
{calculatePercentage(
194-
selectedSeason.reward_pool_usd,
195-
rankThreeRewardPercentage,
196-
).toLocaleString()}
197-
</p>
198-
</div>
210+
) : (
211+
<span />
212+
)}
199213
</div>
200214
) : (
201215
<div className="mb-4 h-48 w-full overflow-hidden rounded-xl border border-purple-800 bg-active-leaderboard bg-cover bg-center">

0 commit comments

Comments
 (0)