diff --git a/packages/frontend/src/app/components/GameListing.tsx b/packages/frontend/src/app/components/GameListing.tsx index bb0a88a..e6abb5a 100644 --- a/packages/frontend/src/app/components/GameListing.tsx +++ b/packages/frontend/src/app/components/GameListing.tsx @@ -27,13 +27,13 @@ export default function GameListing({ games }: Props) { setKeyword(e.target.value)} /> -
+
{filteredGames.map((game) => ( = ({ activeSeason, leaderboard: initialLeaderboard }) => { - const { user } = useWeb3AuthContext(); - - const leaderboard = activeSeason - ? initialLeaderboard - : initialLeaderboard.slice(3); - - const headings = ["#", "User", "Won", "Played", "Score"]; - - const rankingClasses: { - score: [string, string, string]; - indicator: [string, string, string]; - wrapper: [string, string, string]; - } = { - score: [ - "bg-[linear-gradient(180deg,_#FCE19A_0%,_#BD9350_100%)] text-transparent bg-clip-text", - "bg-[linear-gradient(180deg,_#F1F8FF_0%,_#7C8186_100%)] text-transparent bg-clip-text", - "bg-[linear-gradient(180deg,_#FFDDC6_0%,_#9E7259_100%)] text-transparent bg-clip-text", - ], - indicator: ["bg-[#F6D887]", "bg-[#CCCCCC]", "bg-[#D3A085]"], - wrapper: [ - "bg-[linear-gradient(90deg,_rgba(246,216,135,0.2)_0.5%,_rgba(246,216,135,0)_50%)]", - "bg-[linear-gradient(90deg,_rgba(204,204,204,0.2)_0.5%,_rgba(204,204,204,0)_50%)]", - "bg-[linear-gradient(90deg,_rgba(211,160,133,0.2)_0.5%,_rgba(211,160,133,0)_50%)]", - ], - }; - - const rankingWreathImages: [string, string, string] = [ - "/rank-one-wreath.png", - "/rank-two-wreath.png", - "/rank-three-wreath.png", - ]; - - const yourIndex = leaderboard.findIndex( - ({ player_id }) => user?.data.player_id === player_id - ); - - return ( -
-
- {headings.map((heading, i) => ( -
- {heading} -
- ))} -
- -
- {!leaderboard.length ? ( -

- The first game of this season awaits! -

- ) : ( - leaderboard.map( - ({ - player_id, - profile_photo, - name, - wallet_address, - games_won, - games_played, - total_points, - rank, - }) => { - const you = user?.data.player_id === player_id; - const rankStyles = rank && rank <= 3 && activeSeason; - - return ( -
- {rankStyles ? ( - <> -
- - - - ) : ( -

{rank}

- )} - -
- {profile_photo && ( - - )} - -
-

- {name} -

- -

- {truncate(wallet_address).toUpperCase()} -

-
-
- -

- {games_won?.toLocaleString()} -

- -

- {games_played?.toLocaleString()} -

- -

- user?.data.player_id === player_id, + ); + + return ( +

+
+ {headings.map((heading, i) => ( +
- {total_points?.toLocaleString()} - -

-
- ); - } - ) - )} -
-
- ); + {heading} +
+ ))} +
+ +
+ {!leaderboard.length ? ( +

+ The first game of this season awaits! +

+ ) : ( + leaderboard.map( + ({ + player_id, + profile_photo, + name, + wallet_address, + games_won, + games_played, + total_points, + rank, + }) => { + const you = user?.data.player_id === player_id; + const rankStyles = + rank && rank <= 3 && activeSeason; + + return ( +
+ {rankStyles ? ( + <> +
+ + + + ) : ( +

{rank}

+ )} + +
+ {profile_photo && ( + + )} + +
+

+ {name} +

+ +

+ {truncate( + wallet_address, + ).toUpperCase()} +

+
+
+ +

+ {games_won?.toLocaleString()} +

+ +

+ {games_played?.toLocaleString()} +

+ +

+ + {total_points?.toLocaleString()} + +

+
+ ); + }, + ) + )} +
+
+ ); }; export default LeaderboardTable; diff --git a/packages/frontend/src/app/components/leaderboard/leaderboard.tsx b/packages/frontend/src/app/components/leaderboard/leaderboard.tsx index 875f76a..1e5527e 100644 --- a/packages/frontend/src/app/components/leaderboard/leaderboard.tsx +++ b/packages/frontend/src/app/components/leaderboard/leaderboard.tsx @@ -66,7 +66,7 @@ export const Leaderboard: React.FC = () => { return (
-

+

Leaderboard

@@ -81,7 +81,7 @@ export const Leaderboard: React.FC = () => { selectedSeasonActive ? "bg-[linear-gradient(90deg,_rgba(18,18,21,0.2)_0%,_rgba(232,157,15,0.2)_30%,_rgba(232,157,15,0.2)_60%,_rgba(18,18,21,0.2)_100%)]" : "bg-[linear-gradient(90deg,_rgba(18,18,21,0.2)_0%,_#1F1F24_30%,_#1F1F24_60%,_rgba(18,18,21,0.2)_100%)] text-neutral-200" - } mb-4 mt-2 py-2 text-center`} + } mb-4 mt-2 py-2 text-center text-body-3 font-light`} > {selectedSeason && (selectedSeasonActive @@ -198,8 +198,8 @@ export const Leaderboard: React.FC = () => {
) : ( -
-
+
+
{ />
-
+

$ {selectedSeason.reward_pool_usd.toLocaleString()}

-

+

Amount Pooled

diff --git a/packages/frontend/src/app/components/profile/ChainSelector.tsx b/packages/frontend/src/app/components/profile/ChainSelector.tsx index 23bbecd..0fda8e2 100644 --- a/packages/frontend/src/app/components/profile/ChainSelector.tsx +++ b/packages/frontend/src/app/components/profile/ChainSelector.tsx @@ -48,7 +48,7 @@ export function ChainSelector() { isSelectedChain ? "bg-neutral-500 text-neutral-100" : "text-neutral-300" - } my-4 flex w-full cursor-pointer items-center gap-x-4 rounded-lg px-4 py-3 transition-all hover:text-neutral-100`} + } my-2 flex w-full cursor-pointer items-center gap-x-4 rounded-lg px-4 py-3 transition-all hover:text-neutral-100`} onClick={() => { handleChainChange(chain); }} @@ -70,7 +70,7 @@ export function ChainSelector() { ]} dropdownClassname="w-full" > -
+
{loading ? (

Updating the chain... diff --git a/packages/frontend/src/app/components/profile/GamePlayer.tsx b/packages/frontend/src/app/components/profile/GamePlayer.tsx index 92de5f1..9b7bcb2 100644 --- a/packages/frontend/src/app/components/profile/GamePlayer.tsx +++ b/packages/frontend/src/app/components/profile/GamePlayer.tsx @@ -3,47 +3,49 @@ import { truncate } from "@/utils/functions/truncate"; import Image from "next/image"; export const GamePlayer: React.FC<{ - profile_photo: string | null; - won: boolean; - name: string; - wallet_address: string; - you: boolean; + profile_photo: string | null; + won: boolean; + name: string; + wallet_address: string; + you: boolean; }> = ({ profile_photo, won, name, wallet_address, you }) => { - return ( -

- {won && ( - - - - )} + return ( +
+ {won && ( + + + + )} -
- {profile_photo && ( - - )} -
+
+ {profile_photo && ( + + )} +
-
-

- {name} -

+
+

+ {name} +

-

- {truncate(wallet_address).toUpperCase()} -

-
-
- ); +

+ {truncate(wallet_address).toUpperCase()} +

+
+
+ ); }; diff --git a/packages/frontend/src/app/components/profile/SeasonStats.tsx b/packages/frontend/src/app/components/profile/SeasonStats.tsx index 2a97429..5d0dd15 100644 --- a/packages/frontend/src/app/components/profile/SeasonStats.tsx +++ b/packages/frontend/src/app/components/profile/SeasonStats.tsx @@ -1,132 +1,144 @@ -import React, { useEffect, useState } from "react"; import SeasonsDropdown from "../shared/season-dropdown"; -import { - MappedLeaderboard, - MappedPlayerGameHistory, - MappedSeason, - ResponseWithData, -} from "@/utils/types"; import { GameHistory } from "./GameHistory"; import { API_REST_BASE_URL } from "@/utils/constants/api.constant"; import { useWeb3AuthContext } from "@/utils/context/web3auth.context"; +import { + MappedLeaderboard, + MappedPlayerGameHistory, + MappedSeason, + ResponseWithData, +} from "@/utils/types"; +import React, { useEffect, useState } from "react"; const SeasonStats: React.FC = () => { - const { user } = useWeb3AuthContext(); + const { user } = useWeb3AuthContext(); - const [loading, setLoading] = useState(false); - const [playedGames, setPlayedGames] = useState([]); - const [stats, setStats] = useState<{ - games_played: MappedLeaderboard["games_played"]; - games_won: MappedLeaderboard["games_won"]; - rank: MappedLeaderboard["rank"]; - total_points: MappedLeaderboard["total_points"]; - } | null>(null); - const [selectedSeason, setSelectedSeason] = useState( - null - ); + const [loading, setLoading] = useState(false); + const [playedGames, setPlayedGames] = useState( + [], + ); + const [stats, setStats] = useState<{ + games_played: MappedLeaderboard["games_played"]; + games_won: MappedLeaderboard["games_won"]; + rank: MappedLeaderboard["rank"]; + total_points: MappedLeaderboard["total_points"]; + } | null>(null); + const [selectedSeason, setSelectedSeason] = useState( + null, + ); - useEffect(() => { - (async () => { - try { - if (!user || !selectedSeason) { - return; - } + useEffect(() => { + (async () => { + try { + if (!user || !selectedSeason) { + return; + } - setLoading(true); + setLoading(true); - const gamesRes = await fetch( - `${API_REST_BASE_URL}/player-game-history`, - { - cache: "no-cache", - method: "POST", - headers: { - "Content-Type": "application/json", - }, - body: JSON.stringify({ - player_id: user.data.player_id, - season_id: selectedSeason.season_id, - }), - } - ); - const gamesResponse: ResponseWithData<{ - player_game_history: MappedPlayerGameHistory[]; - season_statistics: { - games_played: MappedLeaderboard["games_played"]; - games_won: MappedLeaderboard["games_won"]; - rank: MappedLeaderboard["rank"]; - total_points: MappedLeaderboard["total_points"]; - }; - }> = await gamesRes.json(); + const gamesRes = await fetch( + `${API_REST_BASE_URL}/player-game-history`, + { + cache: "no-cache", + method: "POST", + headers: { + "Content-Type": "application/json", + }, + body: JSON.stringify({ + player_id: user.data.player_id, + season_id: selectedSeason.season_id, + }), + }, + ); + const gamesResponse: ResponseWithData<{ + player_game_history: MappedPlayerGameHistory[]; + season_statistics: { + games_played: MappedLeaderboard["games_played"]; + games_won: MappedLeaderboard["games_won"]; + rank: MappedLeaderboard["rank"]; + total_points: MappedLeaderboard["total_points"]; + }; + }> = await gamesRes.json(); - if (gamesResponse.success) { - setPlayedGames(gamesResponse.data.player_game_history); - setStats(gamesResponse.data.season_statistics); - } - } catch (error) { - console.error(error); - } finally { - setLoading(false); - } - })(); - }, [selectedSeason, user]); + if (gamesResponse.success) { + setPlayedGames(gamesResponse.data.player_game_history); + setStats(gamesResponse.data.season_statistics); + } + } catch (error) { + console.error(error); + } finally { + setLoading(false); + } + })(); + }, [selectedSeason, user]); - return ( -
-

- Season Stats -

+ return ( +
+

+ Season Stats +

- + - {loading ? ( -

- Curating the statistics... -

- ) : ( - <> -
- {[ - { - heading: "Won", - value: stats?.games_won, - }, - { - heading: "Played", - value: stats?.games_played, - }, - { - heading: "Score", - value: stats?.total_points, - }, - { - heading: "Rank", - value: stats?.rank, - }, - ].map(({ heading, value }) => ( -
-

{heading}

-

{value}

-
- ))} -
+ {loading ? ( +

+ Curating the statistics... +

+ ) : ( + <> +
+ {[ + { + heading: "Won", + value: stats?.games_won, + }, + { + heading: "Played", + value: stats?.games_played, + }, + { + heading: "Score", + value: stats?.total_points, + }, + { + heading: "Rank", + value: stats?.rank, + }, + ].map(({ heading, value }) => ( +
+

+ {heading} +

+

+ {value} +

+
+ ))} +
- {playedGames.map((game) => ( - - ))} - - )} -
- ); + {playedGames.map((game, i: number) => ( + <> + {i < 3 ? ( + + ) : null} + + ))} + + )} +
+ ); }; export default SeasonStats; diff --git a/packages/frontend/src/app/components/profile/WalletDetails.tsx b/packages/frontend/src/app/components/profile/WalletDetails.tsx index a078199..f7b717d 100644 --- a/packages/frontend/src/app/components/profile/WalletDetails.tsx +++ b/packages/frontend/src/app/components/profile/WalletDetails.tsx @@ -1,6 +1,7 @@ "use client"; import { ChainSelector } from "./ChainSelector"; +import BalanceIcon from "@/shared/icons/BalanceIcon"; import CopyIcon from "@/shared/icons/CopyIcon"; import { useSelectedChainContext } from "@/utils/context/selected-chain.context"; import { useWeb3AuthContext } from "@/utils/context/web3auth.context"; @@ -23,10 +24,10 @@ export function WalletDetails() {
-

+

Connected Wallet

-
+

{user.data.wallet_address.toUpperCase()}

@@ -43,7 +44,10 @@ export function WalletDetails() {
-

Balance

+

+ + Balance +

{!selectedChain || chainBalance === null ? "..." diff --git a/packages/frontend/src/app/components/profile/hero.tsx b/packages/frontend/src/app/components/profile/hero.tsx index 9241262..b2320b3 100644 --- a/packages/frontend/src/app/components/profile/hero.tsx +++ b/packages/frontend/src/app/components/profile/hero.tsx @@ -11,12 +11,12 @@ export const ProfileHero: React.FC = () => { return ( <> -

+

Profile

-
-
+
+
{ @@ -75,7 +75,7 @@ const SeasonsDropdown: React.FC<{

{season.ended_on > new Date().toISOString() ? ( - + LIVE ) : ( @@ -89,12 +89,12 @@ const SeasonsDropdown: React.FC<{ ]} dropdownClassname="w-full" > -
-
+
+
{selectedSeason.name} {selectedSeason.ended_on > new Date().toISOString() && ( - + LIVE )} diff --git a/packages/frontend/src/shared/icons/BalanceIcon.tsx b/packages/frontend/src/shared/icons/BalanceIcon.tsx new file mode 100644 index 0000000..7403ec6 --- /dev/null +++ b/packages/frontend/src/shared/icons/BalanceIcon.tsx @@ -0,0 +1,19 @@ +import { SVGProps } from "react"; + +const BalanceIcon = (props: SVGProps) => ( + + + +); + +export default BalanceIcon;