From f6a7f9d3293f0b5255f5f0666c6a7eeb7c74df6c Mon Sep 17 00:00:00 2001 From: Anton Mushnin Date: Tue, 16 Apr 2024 12:39:17 +0300 Subject: [PATCH 01/25] getTokensMetadata function --- web/src/tokenInterfaces/BLBTokenAPI.ts | 27 ++++++++++++++++++++++++++ 1 file changed, 27 insertions(+) diff --git a/web/src/tokenInterfaces/BLBTokenAPI.ts b/web/src/tokenInterfaces/BLBTokenAPI.ts index 85bcc0fd..c76fecd5 100644 --- a/web/src/tokenInterfaces/BLBTokenAPI.ts +++ b/web/src/tokenInterfaces/BLBTokenAPI.ts @@ -99,6 +99,33 @@ export const getTokensData = async ({ return await Promise.all(promises); }; +export const getTokensMetadata = async ( + tokens: TokenId[], + tokensCache: Token[], +): Promise => { + const { tokenContract } = getContracts(); + const newTokens = tokens.filter( + (t) => !tokensCache.some((tc) => tc.address === t.address && tc.id === t.id), + ); + const uriQueries = newTokens.map((t) => ({ + target: t.address, + callData: tokenContract.methods.tokenURI(t.id).encodeABI(), + })); + const [uris] = await getMulticallResults(TokenABI, ["tokenURI"], uriQueries); + const promises = uris.map(async (uri, idx) => { + const { name, image } = await getTokenMetadata(uri); + return { + id: newTokens[idx].id, + name: name.split(` - ${newTokens[idx].id}`)[0], + image: image, + address: newTokens[idx].address, + }; + }); + + const newTokensMetadata = await Promise.all(promises); + return [...newTokensMetadata, ...tokensCache]; +}; + export const startSessionBLB = ({ web3ctx, token, From fda66ce6c798527c2b7fcd993a52f9013f3125e5 Mon Sep 17 00:00:00 2001 From: Anton Mushnin Date: Tue, 16 Apr 2024 12:39:34 +0300 Subject: [PATCH 02/25] leaderboard ids --- web/src/constants.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/web/src/constants.ts b/web/src/constants.ts index 561e4e61..e808d3f1 100644 --- a/web/src/constants.ts +++ b/web/src/constants.ts @@ -75,3 +75,9 @@ export const RPC = "https://nova.arbitrum.io/rpc"; export const blbImage = (idx: number) => `https://static.fullcount.xyz/Beer_League_Ballers/p${idx}.png`; export const HUMBUG_REPORT_VERSION = "0.0.2"; + +export const LEADERBOARD_HOME_RUNS = "0f061af5-22a7-4449-a4e3-b0efe3a5a3d8"; +export const LEADERBOARD_ON_BASE_PERCENTAGE = "941f5bfb-b6c9-4ff5-8442-8beae42009ee"; +export const LEADERBOARD_TOTAL_AT_BATS = "a715d48c-1155-4821-9898-471ef0aa69aa"; +export const LEADERBOARD_STRIKEOUTS = "7b2fd9a2-98bc-4c5d-acfb-983111d623bb"; +export const LEADERBOARD_PITCHING_OUTS = "1ce582b4-409a-4102-af11-d85d08247029"; From a93bf44852c71c78c804dfec9c9fbd117177c357 Mon Sep 17 00:00:00 2001 From: Anton Mushnin Date: Tue, 16 Apr 2024 12:39:48 +0300 Subject: [PATCH 03/25] export getHeaders --- web/src/tokenInterfaces/FullcountPlayerAPI.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/src/tokenInterfaces/FullcountPlayerAPI.ts b/web/src/tokenInterfaces/FullcountPlayerAPI.ts index ebf378ff..af62d64f 100644 --- a/web/src/tokenInterfaces/FullcountPlayerAPI.ts +++ b/web/src/tokenInterfaces/FullcountPlayerAPI.ts @@ -479,7 +479,7 @@ export const mintFullcountPlayerToken = ({ }); }; -const getHeaders = () => { +export const getHeaders = () => { const ACCESS_TOKEN = localStorage.getItem("FULLCOUNT_ACCESS_TOKEN"); return { Authorization: `bearer ${ACCESS_TOKEN}`, From 7f77e876154a99ef1eb645701194cd697d2fc718 Mon Sep 17 00:00:00 2001 From: Anton Mushnin Date: Tue, 16 Apr 2024 12:41:04 +0300 Subject: [PATCH 04/25] leaderboard styles --- .../leaderboard/Leaderboard.module.css | 132 ++++++++++++++++++ 1 file changed, 132 insertions(+) create mode 100644 web/src/components/leaderboard/Leaderboard.module.css diff --git a/web/src/components/leaderboard/Leaderboard.module.css b/web/src/components/leaderboard/Leaderboard.module.css new file mode 100644 index 00000000..7cc99fc4 --- /dev/null +++ b/web/src/components/leaderboard/Leaderboard.module.css @@ -0,0 +1,132 @@ +.container { + display: flex; + flex-direction: column; + width: 320px; + gap: 5px; +} + +.divider { + height: 0.5px; + align-self: stretch; + background: #8B8B8B; +} + + +.tableHeader, .tableContent { + display: grid; + grid-template-columns: 60px auto 60px; + gap: 8px; + padding: 5px 0; +} + +.dataContainer { + overflow: auto; + scrollbar-width: none; + -ms-overflow-style: none; + max-height: 150px; + color: black; +} + +.dataContainer::-webkit-scrollbar { + display: none; +} + +.header { + color: #262019; + font-family: Pangolin, cursive; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 100%; /* 14px */ +} + +.pageContainer { + display: flex; + flex-direction: column; + gap: 5px; +} + +.rank { + color: #262019; + font-family: Pangolin, cursive; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 100%; /* 14px */ + display: flex; + align-items: center; + justify-content: center; + width: 20px; +} + + +.firstRanks { + color: white; + display: flex; + align-items: center; + justify-content: center; + width: 20px; +} + +.rankFirst { + background: #CEA250; +} + +.rankSecond { + background: #9CAEAE; +} + +.rankThird { + background: #ED7E4C; +} + +.characterContainer { + display: flex; + gap: 5px; +} + +.characterImage { + height: 24px; + width: 24px; +} + +.characterInfo { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: flex-start; + flex-grow: 2; +} + +.characterName { + /*overflow: hidden;*/ + color: #262019; + text-overflow: ellipsis; + font-family: Bangers, cursive; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: 100%; /* 14px */ +} + +.characterId { + color: #8EAB8F; + text-align: center; + font-family: Bangers, cursive; + font-size: 10px; + font-style: normal; + font-weight: 400; + line-height: 100%; /* 10px */ +} + +.score { + color: #262019; + text-align: right; + font-family: Pangolin, cursive; + font-size: 12px; + font-style: normal; + font-weight: 400; + line-height: normal; +} + + From 5489f5bb2507cffeff39475f037f34bed4e133db Mon Sep 17 00:00:00 2001 From: Anton Mushnin Date: Tue, 16 Apr 2024 12:41:09 +0300 Subject: [PATCH 05/25] leaderboard Item --- .../leaderboard/LeaderboardItem.tsx | 34 +++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 web/src/components/leaderboard/LeaderboardItem.tsx diff --git a/web/src/components/leaderboard/LeaderboardItem.tsx b/web/src/components/leaderboard/LeaderboardItem.tsx new file mode 100644 index 00000000..db330c31 --- /dev/null +++ b/web/src/components/leaderboard/LeaderboardItem.tsx @@ -0,0 +1,34 @@ +import styles from "./Leaderboard.module.css"; +import { Image } from "@chakra-ui/react"; +import React from "react"; +import { LeaderboardEntry } from "./leaderboards"; + +const LeaderboardItem = ({ entry }: { entry: LeaderboardEntry }) => { + return ( +
+
+ {entry.rank} +
+
+ {""} +
+
{entry.name}
+
{entry.id}
+
+
+
{entry.score}
+
+ ); +}; + +export default LeaderboardItem; From 2f80ef9f28d8f68bc5ff319167a6d71312d0a52d Mon Sep 17 00:00:00 2001 From: Anton Mushnin Date: Tue, 16 Apr 2024 12:41:17 +0300 Subject: [PATCH 06/25] leaderboard Header --- .../components/leaderboard/LeaderboardHeader.tsx | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 web/src/components/leaderboard/LeaderboardHeader.tsx diff --git a/web/src/components/leaderboard/LeaderboardHeader.tsx b/web/src/components/leaderboard/LeaderboardHeader.tsx new file mode 100644 index 00000000..5e876792 --- /dev/null +++ b/web/src/components/leaderboard/LeaderboardHeader.tsx @@ -0,0 +1,16 @@ +import styles from "./Leaderboard.module.css"; +import React from "react"; + +const LeaderboardHeader = () => { + return ( +
+
Rank
+
Character
+
+ Score +
+
+ ); +}; + +export default LeaderboardHeader; From 3b71b97bc75d3f0b76abb0a75e568c109b9e8b4d Mon Sep 17 00:00:00 2001 From: Anton Mushnin Date: Tue, 16 Apr 2024 12:42:00 +0300 Subject: [PATCH 07/25] Navbar fix when !user --- web/src/components/layout/Navbar.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/web/src/components/layout/Navbar.tsx b/web/src/components/layout/Navbar.tsx index 0100bd76..bbd47022 100644 --- a/web/src/components/layout/Navbar.tsx +++ b/web/src/components/layout/Navbar.tsx @@ -54,10 +54,12 @@ const Navbar = () => { src={`${FULLCOUNT_ASSETS_PATH}/logo/fullcount-mini.png`} />
-
- -
{user.username}
-
+ {user && ( +
+ +
{user.username}
+
+ )} {/*
*/} {/* */} {/*
*/} From a9ac676a81546974d8d7e8d0432916cc458c782a Mon Sep 17 00:00:00 2001 From: Anton Mushnin Date: Tue, 16 Apr 2024 12:42:44 +0300 Subject: [PATCH 08/25] Leaderboard --- .../components/leaderboard/Leaderboard.tsx | 78 +++++++++++++++++++ 1 file changed, 78 insertions(+) create mode 100644 web/src/components/leaderboard/Leaderboard.tsx diff --git a/web/src/components/leaderboard/Leaderboard.tsx b/web/src/components/leaderboard/Leaderboard.tsx new file mode 100644 index 00000000..6244eb5f --- /dev/null +++ b/web/src/components/leaderboard/Leaderboard.tsx @@ -0,0 +1,78 @@ +import { useInfiniteQuery } from "react-query"; +import React, { useEffect, useRef } from "react"; +import { fetchLeaderboardData, LeaderboardEntry } from "./leaderboards"; +import { LEADERBOARD_HOME_RUNS } from "../../constants"; +import { useGameContext } from "../../contexts/GameContext"; +import styles from "./Leaderboard.module.css"; +import { Image } from "@chakra-ui/react"; +import LeaderboardItem from "./LeaderboardItem"; +import LeaderboardHeader from "./LeaderboardHeader"; + +function Leaderboard({ leaderboardId }: { leaderboardId: string }) { + // const leaderboardId = LEADERBOARD_HOME_RUNS; // Ensure you replace this with your actual ID + const entriesPerPage = 10; // Adjust the number of items per page as needed + const listRef = useRef(null); // Reference to the div that scrolls + const { tokensCache } = useGameContext(); + + const { data, fetchNextPage, hasNextPage, isFetchingNextPage, status } = useInfiniteQuery( + ["leaderboard", leaderboardId], + ({ pageParam = 0 }) => + fetchLeaderboardData(leaderboardId, entriesPerPage, pageParam, tokensCache), + { + getNextPageParam: (lastPage, pages) => { + if (lastPage.length < entriesPerPage) return undefined; // Check if there are more pages + return pages.length * entriesPerPage; // Calculate the offset for the next page + }, + }, + ); + + useEffect(() => { + const handleScroll = () => { + if (!listRef.current) { + return; + } + const current: HTMLDivElement = listRef.current; + + const { scrollTop, scrollHeight, clientHeight } = current; + if (scrollTop + clientHeight >= scrollHeight - 30) { + if (hasNextPage && !isFetchingNextPage) { + fetchNextPage(); + } + } + }; + + const currentList = listRef.current; + if (currentList) { + currentList.addEventListener("scroll", handleScroll); + } + + return () => { + // Clean up the event listener + if (currentList) { + currentList.removeEventListener("scroll", handleScroll); + } + }; + }, [fetchNextPage, hasNextPage, isFetchingNextPage]); + + if (status === "loading") return

Loading...

; + if (status === "error") return

Error :(

; + + return ( +
+ +
+
+ {data?.pages.map((page, i) => ( +
+ {page.map((entry: LeaderboardEntry) => ( + + ))} +
+ ))} + {isFetchingNextPage &&

Loading more...

} +
+
+ ); +} + +export default Leaderboard; From 8552e68607e7881e74afc53f90b6a87f609b9366 Mon Sep 17 00:00:00 2001 From: Anton Mushnin Date: Tue, 16 Apr 2024 13:24:20 +0300 Subject: [PATCH 09/25] fetching leaderboards functions --- .../components/leaderboard/leaderboards.ts | 60 +++++++++++++++++++ 1 file changed, 60 insertions(+) create mode 100644 web/src/components/leaderboard/leaderboards.ts diff --git a/web/src/components/leaderboard/leaderboards.ts b/web/src/components/leaderboard/leaderboards.ts new file mode 100644 index 00000000..dfacfcc7 --- /dev/null +++ b/web/src/components/leaderboard/leaderboards.ts @@ -0,0 +1,60 @@ +import axios from "axios"; +import { Token, TokenId } from "../../types"; +import { getTokensMetadata } from "../../tokenInterfaces/BLBTokenAPI"; + +export interface LeaderboardEntry { + address: string; + id: string; + rank: number; + score: number; + image: string; + name: string; +} + +export async function fetchLeaderboardData( + leaderboardId: string, + limit: number, + offset: number, + tokensCache: Token[], +): Promise { + const response = await axios.get( + `https://engineapi.moonstream.to/leaderboard/?leaderboard_id=${leaderboardId}&limit=${limit}&offset=${offset}`, + ); + console.log(response.data); + const entries = response.data.map((entry: { address: string }) => { + const [address, id] = entry.address.split("_"); + return { ...entry, address, id }; + }); + const tokensMetadata = await getTokensMetadata(entries, tokensCache); + return entries.map((entry: Token) => { + const metadata = tokensMetadata.find((t) => t.id === entry.id && t.address === entry.address); + return { ...entry, image: metadata?.image ?? "", name: metadata?.name ?? "" }; + }); +} + +export async function fetchPositionForTokens( + leaderboardId: string, + tokens: TokenId[], + tokensCache: Token[], +): Promise { + const promises = tokens.map(async (t) => { + const res = await axios.get( + `https://engineapi.moonstream.to/leaderboard/position/?leaderboard_id=${leaderboardId}&address=${t.address}_${t.id}&normalize_addresses=false&window_size=0`, + ); + return res.data; + }); + const response = await Promise.all(promises); + + const entries: any = response + .flat() + .sort((a, b) => a.rank - b.rank) + .map((entry: { address: string }) => { + const [address, id] = entry.address.split("_"); + return { ...entry, address, id }; + }); + const tokensMetadata = await getTokensMetadata(entries, tokensCache); + return entries.map((entry: Token) => { + const metadata = tokensMetadata.find((t) => t.id === entry.id && t.address === entry.address); + return { ...entry, image: metadata?.image ?? "", name: metadata?.name ?? "" }; + }); +} From 1fab4be8f9c2c77a17318a3820348499e9574922 Mon Sep 17 00:00:00 2001 From: Anton Mushnin Date: Tue, 16 Apr 2024 13:24:46 +0300 Subject: [PATCH 10/25] own tokens positions --- .../leaderboard/OwnPositions.module.css | 26 +++++++++++++++++++ .../components/leaderboard/OwnPositions.tsx | 25 ++++++++++++++++++ 2 files changed, 51 insertions(+) create mode 100644 web/src/components/leaderboard/OwnPositions.module.css create mode 100644 web/src/components/leaderboard/OwnPositions.tsx diff --git a/web/src/components/leaderboard/OwnPositions.module.css b/web/src/components/leaderboard/OwnPositions.module.css new file mode 100644 index 00000000..8c5bf357 --- /dev/null +++ b/web/src/components/leaderboard/OwnPositions.module.css @@ -0,0 +1,26 @@ +.container { + display: flex; + padding: 13px; + flex-direction: column; + align-items: flex-start; + gap: 5px; + align-self: stretch; + + border: 1px solid #262019; + background: #FFF; +} + +.title { + color: #262019; + font-family: Bangers, cursive; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: 100%; /* 16px */ +} + +.divider { + height: 0.5px; + align-self: stretch; + background: #8B8B8B; +} \ No newline at end of file diff --git a/web/src/components/leaderboard/OwnPositions.tsx b/web/src/components/leaderboard/OwnPositions.tsx new file mode 100644 index 00000000..e4bb66de --- /dev/null +++ b/web/src/components/leaderboard/OwnPositions.tsx @@ -0,0 +1,25 @@ +import styles from "./OwnPositions.module.css"; +import { Token } from "../../types"; +import { useQuery } from "react-query"; +import { fetchPositionForTokens } from "./leaderboards"; +import { useGameContext } from "../../contexts/GameContext"; +import LeaderboardHeader from "./LeaderboardHeader"; +import LeaderboardItem from "./LeaderboardItem"; + +const OwnPositions = ({ tokens, leaderboardId }: { tokens: Token[]; leaderboardId: string }) => { + const { tokensCache } = useGameContext(); + + const ownPositions = useQuery(["own_leaderboard_positions", tokens, leaderboardId], async () => { + return fetchPositionForTokens(leaderboardId, tokens, tokensCache); + }); + + return ( +
+ + {ownPositions.data && + ownPositions.data.map((entry, idx) => )} +
+ ); +}; + +export default OwnPositions; From c76bbeea90c67c18743c818f8365e691e11c1f3f Mon Sep 17 00:00:00 2001 From: Anton Mushnin Date: Tue, 16 Apr 2024 13:25:15 +0300 Subject: [PATCH 11/25] Leaderboard View --- .../leaderboard/LeaderboardView.module.css | 77 ++++++++++++++++ .../leaderboard/LeaderboardView.tsx | 89 +++++++++++++++++++ 2 files changed, 166 insertions(+) create mode 100644 web/src/components/leaderboard/LeaderboardView.module.css create mode 100644 web/src/components/leaderboard/LeaderboardView.tsx diff --git a/web/src/components/leaderboard/LeaderboardView.module.css b/web/src/components/leaderboard/LeaderboardView.module.css new file mode 100644 index 00000000..64c6c11e --- /dev/null +++ b/web/src/components/leaderboard/LeaderboardView.module.css @@ -0,0 +1,77 @@ +.container { + display: flex; + padding: 10px 20px; + flex-direction: column; + align-items: flex-start; + gap: 30px; + align-self: stretch; + background-color: #EBE4DC; + /*max-height: 100vh;*/ + /*min-height: 100vh;*/ + /*flex-grow: 2;*/ +} + +.title { + color: #262019; + font-family: Bangers, cursive; + font-size: 18px; + font-style: normal; + font-weight: 400; + line-height: normal; +} + + +.selector { + display: flex; + flex-direction: column; + align-items: center; + gap: 15px; + align-self: stretch; +} + +.buttons { + display: flex; + justify-content: center; + align-items: flex-start; + align-content: flex-start; + gap: 10px; + align-self: stretch; + flex-wrap: wrap; +} + +.buttonSelected, .buttonUnselected { + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; + gap: 10px; + text-align: center; + font-family: Pangolin, cursive; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: normal; +} + +.buttonSelected { + padding: 7px 9px; + border: 1px solid #262019; + background: #FFF; + color: #262019; +} + +.buttonUnselected { + padding: 8px 10px; + background: #8EAB8F; + color: #FFF; +} + +.subtitle { + color: #262019; + text-align: center; + font-family: Pangolin, cursive; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: normal; +} \ No newline at end of file diff --git a/web/src/components/leaderboard/LeaderboardView.tsx b/web/src/components/leaderboard/LeaderboardView.tsx new file mode 100644 index 00000000..4fed1907 --- /dev/null +++ b/web/src/components/leaderboard/LeaderboardView.tsx @@ -0,0 +1,89 @@ +import styles from "./LeaderboardView.module.css"; +import { + FULLCOUNT_PLAYER_API, + LEADERBOARD_HOME_RUNS, + LEADERBOARD_ON_BASE_PERCENTAGE, + LEADERBOARD_PITCHING_OUTS, + LEADERBOARD_STRIKEOUTS, + LEADERBOARD_TOTAL_AT_BATS, +} from "../../constants"; +import { useState } from "react"; +import axios from "axios"; +import { useQuery } from "react-query"; +import OwnPositions from "./OwnPositions"; +import useUser from "../../contexts/UserContext"; +import { getHeaders } from "../../tokenInterfaces/FullcountPlayerAPI"; +import Leaderboard from "./Leaderboard"; + +const leaderboards = [ + { title: "Home runs", id: LEADERBOARD_HOME_RUNS }, + { title: "Strikeouts", id: LEADERBOARD_STRIKEOUTS }, + { title: "Outs", id: LEADERBOARD_PITCHING_OUTS }, + { title: "On-base %", id: LEADERBOARD_ON_BASE_PERCENTAGE }, + { title: "Appearances", id: LEADERBOARD_TOTAL_AT_BATS }, +]; + +const LeaderboardView = () => { + const [selectedId, setSelectedId] = useState(leaderboards[0].id); + const { user } = useUser(); + + const fetchLeaderboardInfo = async (id: string) => { + return axios.get(`https://engineapi.moonstream.to/leaderboard/info?leaderboard_id=${id}`); + }; + + const leaderboardInfo = useQuery( + ["fetch_leaderboard_info", selectedId], + async () => { + const data = await fetchLeaderboardInfo(selectedId).then((res) => { + return res.data; + }); + console.log(data); + return data; + }, + { + enabled: !!selectedId, + }, + ); + + const ownedTokens = useQuery(["owned_token_ids", user], async () => { + const headers = getHeaders(); + const res = await axios.get(`${FULLCOUNT_PLAYER_API}/nfts`, { + params: { + limit: 15, + offset: 0, + }, //TODO context vars + headers, + }); + const tokens = res.data.nfts.map((nft: { erc721_address: string; token_id: string }) => ({ + id: nft.token_id, + address: nft.erc721_address, + })); + return tokens; + }); + + return ( +
+
Fullcount Leaderboards
+
+
+ {leaderboards.map((l) => ( +
setSelectedId(l.id)} + className={l.id === selectedId ? styles.buttonSelected : styles.buttonUnselected} + > + {l.title} +
+ ))} +
+ {leaderboardInfo.data && ( +
{leaderboardInfo.data.title}
+ )} + {ownedTokens.data && } + +
+
+ ); +}; + +export default LeaderboardView; From 05c57fb5935a05039e5ef1d4eb0f052b0f8e4288 Mon Sep 17 00:00:00 2001 From: Anton Mushnin Date: Tue, 16 Apr 2024 13:25:33 +0300 Subject: [PATCH 12/25] layout --- web/src/components/leaderboard/Leaderboard.module.css | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/web/src/components/leaderboard/Leaderboard.module.css b/web/src/components/leaderboard/Leaderboard.module.css index 7cc99fc4..caa17703 100644 --- a/web/src/components/leaderboard/Leaderboard.module.css +++ b/web/src/components/leaderboard/Leaderboard.module.css @@ -23,7 +23,9 @@ overflow: auto; scrollbar-width: none; -ms-overflow-style: none; - max-height: 150px; + max-height: 300px; + /*flex-grow: 2;*/ + /*height: 100%;*/ color: black; } From a08ef4b4ac966aca9fb8bdab67fee2c0e3ea50a2 Mon Sep 17 00:00:00 2001 From: Anton Mushnin Date: Tue, 16 Apr 2024 13:26:11 +0300 Subject: [PATCH 13/25] leaderboards page --- web/pages/leaderboards/index.tsx | 12 +++++++++++ .../leaderboard/LeaderboardLayout.module.css | 10 ++++++++++ .../leaderboard/LeaderboardLayout.tsx | 20 +++++++++++++++++++ 3 files changed, 42 insertions(+) create mode 100644 web/pages/leaderboards/index.tsx create mode 100644 web/src/components/leaderboard/LeaderboardLayout.module.css create mode 100644 web/src/components/leaderboard/LeaderboardLayout.tsx diff --git a/web/pages/leaderboards/index.tsx b/web/pages/leaderboards/index.tsx new file mode 100644 index 00000000..17689c97 --- /dev/null +++ b/web/pages/leaderboards/index.tsx @@ -0,0 +1,12 @@ +import LeaderboardView from "../../src/components/leaderboard/LeaderboardView"; +import LeaderboardLayout from "../../src/components/leaderboard/LeaderboardLayout"; + +const AtBat = () => { + return ( + + + + ); +}; + +export default AtBat; diff --git a/web/src/components/leaderboard/LeaderboardLayout.module.css b/web/src/components/leaderboard/LeaderboardLayout.module.css new file mode 100644 index 00000000..46bc7ef5 --- /dev/null +++ b/web/src/components/leaderboard/LeaderboardLayout.module.css @@ -0,0 +1,10 @@ +.container { + display: flex; + flex-direction: column; + height: 100vh; +} + +.navbarContainer { + padding: 20px 20px 5px 20px; + margin-bottom: 30px; +} diff --git a/web/src/components/leaderboard/LeaderboardLayout.tsx b/web/src/components/leaderboard/LeaderboardLayout.tsx new file mode 100644 index 00000000..fbcdb078 --- /dev/null +++ b/web/src/components/leaderboard/LeaderboardLayout.tsx @@ -0,0 +1,20 @@ +import styles from "./LeaderboardLayout.module.css"; +import Navbar from "../layout/Navbar"; +import { ReactNode } from "react"; + +const LeaderboardLayout = ({ children }: { children: ReactNode }) => { + return ( +
+
+ +
+ Description of the image content + {children} +
+ ); +}; + +export default LeaderboardLayout; From 51a870efa05656b77e5485cdb73ad73c8bd71492 Mon Sep 17 00:00:00 2001 From: Anton Mushnin Date: Wed, 17 Apr 2024 15:11:28 +0300 Subject: [PATCH 14/25] animating own positions --- .../leaderboard/OwnPositions.module.css | 2 ++ .../components/leaderboard/OwnPositions.tsx | 34 ++++++++++++++++--- 2 files changed, 31 insertions(+), 5 deletions(-) diff --git a/web/src/components/leaderboard/OwnPositions.module.css b/web/src/components/leaderboard/OwnPositions.module.css index 8c5bf357..9e79846a 100644 --- a/web/src/components/leaderboard/OwnPositions.module.css +++ b/web/src/components/leaderboard/OwnPositions.module.css @@ -8,6 +8,8 @@ border: 1px solid #262019; background: #FFF; + transition: height 0.5s ease-in; + overflow: clip; } .title { diff --git a/web/src/components/leaderboard/OwnPositions.tsx b/web/src/components/leaderboard/OwnPositions.tsx index e4bb66de..92d1e269 100644 --- a/web/src/components/leaderboard/OwnPositions.tsx +++ b/web/src/components/leaderboard/OwnPositions.tsx @@ -6,15 +6,39 @@ import { useGameContext } from "../../contexts/GameContext"; import LeaderboardHeader from "./LeaderboardHeader"; import LeaderboardItem from "./LeaderboardItem"; -const OwnPositions = ({ tokens, leaderboardId }: { tokens: Token[]; leaderboardId: string }) => { +const OwnPositions = ({ + tokens, + leaderboardId, +}: { + tokens: Token[] | undefined; + leaderboardId: string; +}) => { const { tokensCache } = useGameContext(); - const ownPositions = useQuery(["own_leaderboard_positions", tokens, leaderboardId], async () => { - return fetchPositionForTokens(leaderboardId, tokens, tokensCache); - }); + const ownPositions = useQuery( + ["own_leaderboard_positions", tokens, leaderboardId], + async () => { + if (!tokens) { + return []; + } + return fetchPositionForTokens(leaderboardId, tokens, tokensCache); + }, + { + enabled: !!tokens, + }, + ); return ( -
+
{ownPositions.data && ownPositions.data.map((entry, idx) => )} From 1c1c201301f7bfbb98379e7add74c18b1f279b86 Mon Sep 17 00:00:00 2001 From: Anton Mushnin Date: Wed, 17 Apr 2024 15:13:33 +0300 Subject: [PATCH 15/25] layout while loading --- web/src/components/leaderboard/Leaderboard.module.css | 1 + web/src/components/leaderboard/Leaderboard.tsx | 9 +++++---- .../components/leaderboard/LeaderboardView.module.css | 6 +++--- web/src/components/leaderboard/LeaderboardView.tsx | 7 ++----- 4 files changed, 11 insertions(+), 12 deletions(-) diff --git a/web/src/components/leaderboard/Leaderboard.module.css b/web/src/components/leaderboard/Leaderboard.module.css index caa17703..6919e096 100644 --- a/web/src/components/leaderboard/Leaderboard.module.css +++ b/web/src/components/leaderboard/Leaderboard.module.css @@ -17,6 +17,7 @@ grid-template-columns: 60px auto 60px; gap: 8px; padding: 5px 0; + width: 100%; } .dataContainer { diff --git a/web/src/components/leaderboard/Leaderboard.tsx b/web/src/components/leaderboard/Leaderboard.tsx index 6244eb5f..c95d2ace 100644 --- a/web/src/components/leaderboard/Leaderboard.tsx +++ b/web/src/components/leaderboard/Leaderboard.tsx @@ -1,10 +1,9 @@ import { useInfiniteQuery } from "react-query"; import React, { useEffect, useRef } from "react"; import { fetchLeaderboardData, LeaderboardEntry } from "./leaderboards"; -import { LEADERBOARD_HOME_RUNS } from "../../constants"; import { useGameContext } from "../../contexts/GameContext"; import styles from "./Leaderboard.module.css"; -import { Image } from "@chakra-ui/react"; +import { Spinner } from "@chakra-ui/react"; import LeaderboardItem from "./LeaderboardItem"; import LeaderboardHeader from "./LeaderboardHeader"; @@ -54,7 +53,7 @@ function Leaderboard({ leaderboardId }: { leaderboardId: string }) { }; }, [fetchNextPage, hasNextPage, isFetchingNextPage]); - if (status === "loading") return

Loading...

; + if (status === "loading") return ; if (status === "error") return

Error :(

; return ( @@ -69,7 +68,9 @@ function Leaderboard({ leaderboardId }: { leaderboardId: string }) { ))}
))} - {isFetchingNextPage &&

Loading more...

} + {isFetchingNextPage && ( +

Loading more...

+ )}
); diff --git a/web/src/components/leaderboard/LeaderboardView.module.css b/web/src/components/leaderboard/LeaderboardView.module.css index 64c6c11e..bc9eb030 100644 --- a/web/src/components/leaderboard/LeaderboardView.module.css +++ b/web/src/components/leaderboard/LeaderboardView.module.css @@ -6,9 +6,7 @@ gap: 30px; align-self: stretch; background-color: #EBE4DC; - /*max-height: 100vh;*/ - /*min-height: 100vh;*/ - /*flex-grow: 2;*/ + min-height: 100vh; } .title { @@ -22,6 +20,7 @@ .selector { + margin-top: 10px; display: flex; flex-direction: column; align-items: center; @@ -74,4 +73,5 @@ font-style: normal; font-weight: 400; line-height: normal; + min-height: 17.5px; } \ No newline at end of file diff --git a/web/src/components/leaderboard/LeaderboardView.tsx b/web/src/components/leaderboard/LeaderboardView.tsx index 4fed1907..5fd14b77 100644 --- a/web/src/components/leaderboard/LeaderboardView.tsx +++ b/web/src/components/leaderboard/LeaderboardView.tsx @@ -63,7 +63,6 @@ const LeaderboardView = () => { return (
-
Fullcount Leaderboards
{leaderboards.map((l) => ( @@ -76,10 +75,8 @@ const LeaderboardView = () => {
))}
- {leaderboardInfo.data && ( -
{leaderboardInfo.data.title}
- )} - {ownedTokens.data && } +
{leaderboardInfo.data?.title ?? ""}
+
From 993ac1ecaea7d98322b0f32a74e50534c18b420f Mon Sep 17 00:00:00 2001 From: Anton Mushnin Date: Wed, 17 Apr 2024 15:14:38 +0300 Subject: [PATCH 16/25] console.log --- web/src/components/leaderboard/leaderboards.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/web/src/components/leaderboard/leaderboards.ts b/web/src/components/leaderboard/leaderboards.ts index dfacfcc7..03b7daf8 100644 --- a/web/src/components/leaderboard/leaderboards.ts +++ b/web/src/components/leaderboard/leaderboards.ts @@ -20,7 +20,6 @@ export async function fetchLeaderboardData( const response = await axios.get( `https://engineapi.moonstream.to/leaderboard/?leaderboard_id=${leaderboardId}&limit=${limit}&offset=${offset}`, ); - console.log(response.data); const entries = response.data.map((entry: { address: string }) => { const [address, id] = entry.address.split("_"); return { ...entry, address, id }; From 17753896e452ea0e840be29f71e27150381e3ef6 Mon Sep 17 00:00:00 2001 From: Anton Mushnin Date: Wed, 17 Apr 2024 15:54:39 +0300 Subject: [PATCH 17/25] console.log --- web/src/components/leaderboard/LeaderboardView.tsx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/web/src/components/leaderboard/LeaderboardView.tsx b/web/src/components/leaderboard/LeaderboardView.tsx index 5fd14b77..8d0bb90f 100644 --- a/web/src/components/leaderboard/LeaderboardView.tsx +++ b/web/src/components/leaderboard/LeaderboardView.tsx @@ -34,11 +34,9 @@ const LeaderboardView = () => { const leaderboardInfo = useQuery( ["fetch_leaderboard_info", selectedId], async () => { - const data = await fetchLeaderboardInfo(selectedId).then((res) => { + return await fetchLeaderboardInfo(selectedId).then((res) => { return res.data; }); - console.log(data); - return data; }, { enabled: !!selectedId, From 192965231795558e1d49e694d66342ca58517ec8 Mon Sep 17 00:00:00 2001 From: Anton Mushnin Date: Mon, 22 Apr 2024 17:47:35 +0300 Subject: [PATCH 18/25] fetching tokens positions with windows --- .../components/leaderboard/leaderboards.ts | 33 +++++++++++++++++-- 1 file changed, 30 insertions(+), 3 deletions(-) diff --git a/web/src/components/leaderboard/leaderboards.ts b/web/src/components/leaderboard/leaderboards.ts index 03b7daf8..be640c8c 100644 --- a/web/src/components/leaderboard/leaderboards.ts +++ b/web/src/components/leaderboard/leaderboards.ts @@ -31,11 +31,11 @@ export async function fetchLeaderboardData( }); } -export async function fetchPositionForTokens( +export const fetchPositionForTokens = async ( leaderboardId: string, tokens: TokenId[], tokensCache: Token[], -): Promise { +): Promise => { const promises = tokens.map(async (t) => { const res = await axios.get( `https://engineapi.moonstream.to/leaderboard/position/?leaderboard_id=${leaderboardId}&address=${t.address}_${t.id}&normalize_addresses=false&window_size=0`, @@ -56,4 +56,31 @@ export async function fetchPositionForTokens( const metadata = tokensMetadata.find((t) => t.id === entry.id && t.address === entry.address); return { ...entry, image: metadata?.image ?? "", name: metadata?.name ?? "" }; }); -} +}; + +export const fetchWindowsForTokens = async ( + leaderboardId: string, + tokens: TokenId[], + tokensCache: Token[], + windowSize: number, +): Promise => { + const promises = tokens.map(async (t) => { + const res = await axios.get( + `https://engineapi.moonstream.to/leaderboard/position/?leaderboard_id=${leaderboardId}&address=${ + t.address + }_${t.id}&normalize_addresses=false&window_size=${windowSize ?? 0}`, + ); + return res.data; + }); + const response = await Promise.all(promises); + + const entries: any = response.map((entry: { address: string }) => { + const [address, id] = entry.address.split("_"); + return { ...entry, address, id }; + }); + const tokensMetadata = await getTokensMetadata(entries, tokensCache); + return entries.map((entry: Token) => { + const metadata = tokensMetadata.find((t) => t.id === entry.id && t.address === entry.address); + return { ...entry, image: metadata?.image ?? "", name: metadata?.name ?? "" }; + }); +}; From 4b335d2665ae163cfa6377255625a9881bd57192 Mon Sep 17 00:00:00 2001 From: Anton Mushnin Date: Mon, 22 Apr 2024 20:08:30 +0300 Subject: [PATCH 19/25] leaderboard ids --- web/src/constants.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/web/src/constants.ts b/web/src/constants.ts index e808d3f1..ecf5589a 100644 --- a/web/src/constants.ts +++ b/web/src/constants.ts @@ -81,3 +81,11 @@ export const LEADERBOARD_ON_BASE_PERCENTAGE = "941f5bfb-b6c9-4ff5-8442-8beae4200 export const LEADERBOARD_TOTAL_AT_BATS = "a715d48c-1155-4821-9898-471ef0aa69aa"; export const LEADERBOARD_STRIKEOUTS = "7b2fd9a2-98bc-4c5d-acfb-983111d623bb"; export const LEADERBOARD_PITCHING_OUTS = "1ce582b4-409a-4102-af11-d85d08247029"; + +export const LEADERBOARDS = [ + { id: "0f061af5-22a7-4449-a4e3-b0efe3a5a3d8", title: "Home runs" }, + { id: "7b2fd9a2-98bc-4c5d-acfb-983111d623bb", title: "Strikeouts" }, + { id: "1ce582b4-409a-4102-af11-d85d08247029", title: "Outs" }, + { id: "941f5bfb-b6c9-4ff5-8442-8beae42009ee", title: "On-base %" }, + { id: "a715d48c-1155-4821-9898-471ef0aa69aa", title: "Appearances" }, +]; From 4019f66e251c03431d91fb8652f6ed31dd226b65 Mon Sep 17 00:00:00 2001 From: Anton Mushnin Date: Mon, 22 Apr 2024 20:08:46 +0300 Subject: [PATCH 20/25] fetching windows --- .../components/leaderboard/leaderboards.ts | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/web/src/components/leaderboard/leaderboards.ts b/web/src/components/leaderboard/leaderboards.ts index be640c8c..8d052bf0 100644 --- a/web/src/components/leaderboard/leaderboards.ts +++ b/web/src/components/leaderboard/leaderboards.ts @@ -73,14 +73,23 @@ export const fetchWindowsForTokens = async ( return res.data; }); const response = await Promise.all(promises); + console.log(response); + const windows = response.map((window: any) => + window.map((entry: { address: string }) => { + const [address, id] = entry.address.split("_"); + return { ...entry, address, id }; + }), + ); - const entries: any = response.map((entry: { address: string }) => { + const entries: any = response.flat().map((entry: { address: string }) => { const [address, id] = entry.address.split("_"); return { ...entry, address, id }; }); const tokensMetadata = await getTokensMetadata(entries, tokensCache); - return entries.map((entry: Token) => { - const metadata = tokensMetadata.find((t) => t.id === entry.id && t.address === entry.address); - return { ...entry, image: metadata?.image ?? "", name: metadata?.name ?? "" }; - }); + return windows.map((window: any) => + window.map((entry: Token) => { + const metadata = tokensMetadata.find((t) => t.id === entry.id && t.address === entry.address); + return { ...entry, image: metadata?.image ?? "", name: metadata?.name ?? "" }; + }), + ); }; From 818242a37dcf67216f2695ff77393e4df9264a04 Mon Sep 17 00:00:00 2001 From: Anton Mushnin Date: Tue, 23 Apr 2024 13:58:49 +0300 Subject: [PATCH 21/25] desktop view --- .../components/leaderboard/Leaderboard.module.css | 6 ++---- .../leaderboard/LeaderboardLayout.module.css | 15 +++++++++++++++ .../components/leaderboard/LeaderboardLayout.tsx | 10 ++++++++-- .../leaderboard/LeaderboardView.module.css | 1 - 4 files changed, 25 insertions(+), 7 deletions(-) diff --git a/web/src/components/leaderboard/Leaderboard.module.css b/web/src/components/leaderboard/Leaderboard.module.css index 6919e096..31e9c001 100644 --- a/web/src/components/leaderboard/Leaderboard.module.css +++ b/web/src/components/leaderboard/Leaderboard.module.css @@ -1,7 +1,7 @@ .container { display: flex; flex-direction: column; - width: 320px; + width: 100%; gap: 5px; } @@ -24,9 +24,7 @@ overflow: auto; scrollbar-width: none; -ms-overflow-style: none; - max-height: 300px; - /*flex-grow: 2;*/ - /*height: 100%;*/ + max-height: 75vh; color: black; } diff --git a/web/src/components/leaderboard/LeaderboardLayout.module.css b/web/src/components/leaderboard/LeaderboardLayout.module.css index 46bc7ef5..58862e4e 100644 --- a/web/src/components/leaderboard/LeaderboardLayout.module.css +++ b/web/src/components/leaderboard/LeaderboardLayout.module.css @@ -8,3 +8,18 @@ padding: 20px 20px 5px 20px; margin-bottom: 30px; } + +@media (min-width: 768px) { + .container { + display: flex; + height: 100vh; + padding: 0 100px 40px 100px; + flex-direction: column; + gap: 40px; + background: #FCECD9; + } + + .navbarContainer { + margin-bottom: -10px; + } +} diff --git a/web/src/components/leaderboard/LeaderboardLayout.tsx b/web/src/components/leaderboard/LeaderboardLayout.tsx index fbcdb078..fc9d9b4c 100644 --- a/web/src/components/leaderboard/LeaderboardLayout.tsx +++ b/web/src/components/leaderboard/LeaderboardLayout.tsx @@ -1,16 +1,22 @@ import styles from "./LeaderboardLayout.module.css"; import Navbar from "../layout/Navbar"; import { ReactNode } from "react"; +import { useMediaQuery } from "@chakra-ui/react"; const LeaderboardLayout = ({ children }: { children: ReactNode }) => { + const [isWideView] = useMediaQuery(["(min-width: 768px)"]); return (
Description of the image content {children}
diff --git a/web/src/components/leaderboard/LeaderboardView.module.css b/web/src/components/leaderboard/LeaderboardView.module.css index bc9eb030..49f8be00 100644 --- a/web/src/components/leaderboard/LeaderboardView.module.css +++ b/web/src/components/leaderboard/LeaderboardView.module.css @@ -6,7 +6,6 @@ gap: 30px; align-self: stretch; background-color: #EBE4DC; - min-height: 100vh; } .title { From c1f2d0cf9aafcb4877c8cb153bfed9fd41ab19a2 Mon Sep 17 00:00:00 2001 From: Anton Mushnin Date: Tue, 23 Apr 2024 13:59:19 +0300 Subject: [PATCH 22/25] fix type --- web/src/components/leaderboard/leaderboards.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/web/src/components/leaderboard/leaderboards.ts b/web/src/components/leaderboard/leaderboards.ts index 8d052bf0..36d399a0 100644 --- a/web/src/components/leaderboard/leaderboards.ts +++ b/web/src/components/leaderboard/leaderboards.ts @@ -63,7 +63,7 @@ export const fetchWindowsForTokens = async ( tokens: TokenId[], tokensCache: Token[], windowSize: number, -): Promise => { +): Promise => { const promises = tokens.map(async (t) => { const res = await axios.get( `https://engineapi.moonstream.to/leaderboard/position/?leaderboard_id=${leaderboardId}&address=${ From edff0bdb7e600b19f79cb26f97fafa36fb87114c Mon Sep 17 00:00:00 2001 From: Anton Mushnin Date: Tue, 23 Apr 2024 14:02:37 +0300 Subject: [PATCH 23/25] pull main --- web/src/constants.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/web/src/constants.ts b/web/src/constants.ts index ecf5589a..802b14f4 100644 --- a/web/src/constants.ts +++ b/web/src/constants.ts @@ -73,8 +73,8 @@ export const TOKEN_CONTRACT = "0xf40c0961A9CC5c037B92D2cb48167F7f62Dd7cD0"; //TO export const CHAIN_ID = 42170; export const RPC = "https://nova.arbitrum.io/rpc"; export const blbImage = (idx: number) => - `https://static.fullcount.xyz/Beer_League_Ballers/p${idx}.png`; -export const HUMBUG_REPORT_VERSION = "0.0.2"; + `https://static.fullcount.xyz/Beer_League_Ballers/small/p${idx}.png`; +export const HUMBUG_REPORT_VERSION = "0.0.3"; export const LEADERBOARD_HOME_RUNS = "0f061af5-22a7-4449-a4e3-b0efe3a5a3d8"; export const LEADERBOARD_ON_BASE_PERCENTAGE = "941f5bfb-b6c9-4ff5-8442-8beae42009ee"; From 7e70f0f5431bf1dcf2a712c30816522d10cceeba Mon Sep 17 00:00:00 2001 From: Anton Mushnin Date: Wed, 24 Apr 2024 16:59:33 +0300 Subject: [PATCH 24/25] new icon --- web/src/components/icons/ArrowLeft.tsx | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100644 web/src/components/icons/ArrowLeft.tsx diff --git a/web/src/components/icons/ArrowLeft.tsx b/web/src/components/icons/ArrowLeft.tsx new file mode 100644 index 00000000..4bf72c5e --- /dev/null +++ b/web/src/components/icons/ArrowLeft.tsx @@ -0,0 +1,22 @@ +import React from "react"; + +const ArrowLeft: React.FC> = (props) => ( + + + + +); + +export default ArrowLeft; From 6e96f1f985b4af659ed562acb8f1cc318b6cddf2 Mon Sep 17 00:00:00 2001 From: Anton Mushnin Date: Wed, 24 Apr 2024 17:01:27 +0300 Subject: [PATCH 25/25] layout, navigation --- web/src/components/layout/Navbar.tsx | 18 +++++---- .../leaderboard/Leaderboard.module.css | 9 ++++- .../components/leaderboard/Leaderboard.tsx | 4 +- .../leaderboard/LeaderboardLayout.module.css | 38 +++++++++++++++++-- .../leaderboard/LeaderboardLayout.tsx | 30 +++++++++------ 5 files changed, 72 insertions(+), 27 deletions(-) diff --git a/web/src/components/layout/Navbar.tsx b/web/src/components/layout/Navbar.tsx index bbd47022..5b885e33 100644 --- a/web/src/components/layout/Navbar.tsx +++ b/web/src/components/layout/Navbar.tsx @@ -1,21 +1,16 @@ -import { useMediaQuery, useDisclosure, Image } from "@chakra-ui/react"; +import { Image } from "@chakra-ui/react"; import { useEffect, useRef, useState } from "react"; import styles from "./Navbar.module.css"; import useUser from "../../contexts/UserContext"; -import FullcountLogoSmall from "../icons/FullcountLogoSmall"; import AccountMobile from "../icons/AccountMobile"; -import VolumeOn from "../icons/VolumeOn"; import MoreHorizontal from "../icons/MoreHorizontal"; import useLogout from "../../hooks/useLogout"; import { FEEDBACK_FORM_URL, FULLCOUNT_ASSETS_PATH } from "../../constants"; import { setLocalStorageItem } from "../../utils/localStorage"; import { useGameContext } from "../../contexts/GameContext"; +import router from "next/router"; const Navbar = () => { - const [isSmallScreen, isMediumScreen] = useMediaQuery([ - "(max-width: 767px)", - "(min-width: 1024px)", - ]); const { user } = useUser(); const [isMenuOpen, setIsMenuOpen] = useState(false); @@ -34,6 +29,11 @@ const Navbar = () => { updateContext({ joinedNotification: !joinedNotification }); }; + const handleLeaderboardClick = () => { + // sendReport('Leaderboards', {}, ["type:click","click:leaderboards"]) + router.push("/leaderboards"); + }; + useEffect(() => { if (isMenuOpen) { document.addEventListener("click", handleClickOutside, true); @@ -72,7 +72,9 @@ const Navbar = () => {
{/*
About
*/} {/*
Achievements
*/} - {/*
Leaderboards
*/} +
+ Leaderboards +
(null); // Reference to the div that scrolls const { tokensCache } = useGameContext(); @@ -46,7 +45,6 @@ function Leaderboard({ leaderboardId }: { leaderboardId: string }) { } return () => { - // Clean up the event listener if (currentList) { currentList.removeEventListener("scroll", handleScroll); } diff --git a/web/src/components/leaderboard/LeaderboardLayout.module.css b/web/src/components/leaderboard/LeaderboardLayout.module.css index 58862e4e..d321ca3b 100644 --- a/web/src/components/leaderboard/LeaderboardLayout.module.css +++ b/web/src/components/leaderboard/LeaderboardLayout.module.css @@ -1,25 +1,55 @@ .container { display: flex; flex-direction: column; - height: 100vh; +} + +.innerContainer { + display: flex; + flex-direction: column; + align-self: center; + width: 100%; + max-width: 1240px; + height: 100%; } .navbarContainer { padding: 20px 20px 5px 20px; - margin-bottom: 30px; + max-width: 1240px; + margin-bottom: 15px; +} + +.homeButton { + display: flex; + padding: 5px 5px 5px 20px; + align-items: center; + gap: 5px; + color: #262019; + font-family: Pangolin, cursive; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: normal; + margin-bottom: 15px; + cursor: pointer; } + + @media (min-width: 768px) { .container { display: flex; height: 100vh; padding: 0 100px 40px 100px; flex-direction: column; - gap: 40px; background: #FCECD9; } + .navbarContainer { - margin-bottom: -10px; + margin-bottom: 20px; + } + + .homeButton { + margin-bottom: 20px; } } diff --git a/web/src/components/leaderboard/LeaderboardLayout.tsx b/web/src/components/leaderboard/LeaderboardLayout.tsx index fc9d9b4c..76685a18 100644 --- a/web/src/components/leaderboard/LeaderboardLayout.tsx +++ b/web/src/components/leaderboard/LeaderboardLayout.tsx @@ -2,23 +2,31 @@ import styles from "./LeaderboardLayout.module.css"; import Navbar from "../layout/Navbar"; import { ReactNode } from "react"; import { useMediaQuery } from "@chakra-ui/react"; +import ArrowLeft from "../icons/ArrowLeft"; +import router from "next/router"; const LeaderboardLayout = ({ children }: { children: ReactNode }) => { const [isWideView] = useMediaQuery(["(min-width: 768px)"]); return (
-
- +
+
+ +
+
router.push("/")}> + + Home page +
+ + {children}
- - {children}
); };