diff --git a/app/leaderboard/page.tsx b/app/leaderboard/page.tsx index 59e75654..2e748112 100644 --- a/app/leaderboard/page.tsx +++ b/app/leaderboard/page.tsx @@ -14,7 +14,7 @@ import { } from "@services/apiService"; import { calculatePercentile } from "@utils/numberService"; import styles from "@styles/leaderboard.module.css"; -import { useAccount,type Address } from "@starknet-react/core"; +import { useAccount, type Address } from "@starknet-react/core"; import LeaderboardSkeleton from "@components/skeletons/leaderboardSkeleton"; import FeaturedQuest from "@components/UI/featured_banner/featuredQuest"; import { QuestsContext } from "@context/QuestsProvider"; @@ -26,7 +26,6 @@ import { Abi, Contract, Provider } from "starknet"; import naming_abi from "@abi/naming_abi.json"; import { StarknetIdJsContext } from "@context/StarknetIdJsProvider"; import { utils } from "starknetid.js"; -import { isStarkDomain } from "starknetid.js/packages/core/dist/utils"; import Divider from "@mui/material/Divider"; import Blur from "@components/shapes/blur"; import RankingsTable from "@components/leaderboard/RankingsTable"; @@ -43,7 +42,7 @@ import { LeaderboardTopperParams, } from "../../types/backTypes"; import { decimalToHex } from "@utils/feltService"; - +import { isStarkDomain } from "starknetid.js/dist/utils"; export default function Page() { const router = useRouter(); @@ -73,10 +72,10 @@ export default function Page() { const [inititalFetchTop50, setInititalFetchTop50] = useState(false); const [leaderboardToppers, setLeaderboardToppers] = - useState({ - best_users: [], - total_users: 0, - }); + useState({ + best_users: [], + total_users: 0, + }); const isTop50RankedView = useMemo( () => @@ -97,18 +96,17 @@ export default function Page() { const timeoutId = setTimeout(() => setApiCallDelay(true), 1000); if (address) setUserAddress(address); if (status === "disconnected") setUserAddress(""); - return () => clearTimeout(timeoutId); // Cleanup + return () => clearTimeout(timeoutId); // Cleanup }, [address, status]); useEffect(() => { if (!apiCallDelay) return; const fetchTimeout = setTimeout(() => { - fetchPageData(); - }, 500); + fetchPageData(); + }, 500); return () => clearTimeout(fetchTimeout); -}, [apiCallDelay]); - + }, [apiCallDelay]); const fetchRankingResults = useCallback( async (requestBody: LeaderboardRankingParams) => { @@ -124,7 +122,10 @@ export default function Page() { async (requestBody: LeaderboardRankingParams) => { const response = await fetchLeaderboardRankings(requestBody); if (response) { - setRanking((prev) => ({ ...prev, ranking: [...prev.ranking, ...response.ranking] })); + setRanking((prev) => ({ + ...prev, + ranking: [...prev.ranking, ...response.ranking], + })); } }, [] @@ -140,7 +141,7 @@ export default function Page() { const fetchPageData = useCallback(async () => { const requestBody = { - addr: status === "connected" ? (address || userAddress) : "", + addr: status === "connected" ? address || userAddress : "", page_size: 10, shift: 0, duration: timeFrameMap(duration), @@ -160,8 +161,6 @@ export default function Page() { status, ]); - - const contract = useMemo(() => { return new Contract( naming_abi as Abi, @@ -208,7 +207,9 @@ export default function Page() { useEffect(() => { const checkIfValidAddress = async (address: string) => { try { - const domain = isStarkDomain(address) ? getDomainWithoutStark(address) : address; + const domain = isStarkDomain(address) + ? getDomainWithoutStark(address) + : address; const res: { message: boolean } = await verifyDomain(domain); if (res.message) { setSearchResults([domain.concat(".stark")]); @@ -259,7 +260,7 @@ export default function Page() { } if (!checkIfLastPage && viewMore) { const requestBody = { - addr: currentSearchedAddress || (userAddress ? (userAddress) : ""), + addr: currentSearchedAddress || (userAddress ? userAddress : ""), page_size: rowsPerPage, shift: currentPage, duration: timeFrameMap(duration), @@ -288,7 +289,8 @@ export default function Page() { */ useEffect(() => { const requestBody = { - addr: currentSearchedAddress || (userAddress ? (userAddress) : address || ""), + addr: + currentSearchedAddress || (userAddress ? userAddress : address || ""), page_size: rowsPerPage, shift: 0, duration: timeFrameMap(duration), @@ -313,7 +315,8 @@ export default function Page() { useEffect(() => { if (inititalFetchTop50 && address && duration !== TOP_50_TAB_STRING) { const requestBody = { - addr: currentSearchedAddress || (userAddress ? (userAddress) : address || ""), + addr: + currentSearchedAddress || (userAddress ? userAddress : address || ""), page_size: rowsPerPage, shift: 0, duration: timeFrameMap(duration), @@ -362,184 +365,149 @@ export default function Page() { // ) : ( */} - <> -
-
- + <> +
+
+ +
+
+ +
+ + router.push(`/quest/${featuredQuest?.id}`)} + imgSrc={featuredQuest?.img_card} + issuer={{ + name: featuredQuest?.issuer ?? "", + logoFavicon: featuredQuest?.logo ?? "", + }} + reward={featuredQuest?.rewards_title} + desc={featuredQuest?.desc} + expiry={featuredQuest?.expiry_timestamp} + questId={featuredQuest?.id} + /> +
+
+
+
+ + Leaderboard +
-
- +
+
- - router.push(`/quest/${featuredQuest?.id}`)} - imgSrc={featuredQuest?.img_card} - issuer={{ - name: featuredQuest?.issuer ?? "", - logoFavicon: featuredQuest?.logo ?? "", - }} - reward={featuredQuest?.rewards_title} - desc={featuredQuest?.desc} - expiry={featuredQuest?.expiry_timestamp} - questId={featuredQuest?.id} - /> -
-
-
-
- - Leaderboard - -
-
- -
-
- { - setCurrentSearchedAddress(address); - setSearchResults([]); - setCustomResult(true); - }} - /> -
+
+ { + setCurrentSearchedAddress(address); + setSearchResults([]); + setCustomResult(true); + }} + />
+
- {/* this will be displayed if user is present otherwise will not be displayed */} - {userPercentile ? ( - userPercentile >= 0 ? ( -
- {currentSearchedAddress.length > 0 || userAddress ? ( -
- 0 - ? decimalToHex(currentSearchedAddress) - : userAddress - } - /> -
- ) : null} -
- - {currentSearchedAddress.length > 0 ? "He is" : "You are "} - - -  better than {userPercentile}%  - - - of the other players - + {/* this will be displayed if user is present otherwise will not be displayed */} + {userPercentile ? ( + userPercentile >= 0 ? ( +
+ {currentSearchedAddress.length > 0 || userAddress ? ( +
+ 0 + ? decimalToHex(currentSearchedAddress) + : userAddress + } + />
-
- ) : address ? ( -
+ ) : null} +
- You were not active this week. ready to jump back in? + {currentSearchedAddress.length > 0 ? "He is" : "You are "} - - - Start your quest - - -
- ) : null - ) : null} - - - {/* shows loader skeleton while data is still being fetched*/} - - {rankingdataloading ? ( - - ) : ranking ? ( - isNoSearchResults ? ( - // {/* this will be displayed if searched user is not present in leaderboard or server returns 500*/} -
- error image + +  better than {userPercentile}%  + - No Results Found! Try a new search + of the other players -
- ) : ( - <> - 0 - ? currentSearchedAddress - : (userAddress) - } - searchedAddress={currentSearchedAddress} - leaderboardToppers={leaderboardToppers} - paginationLoading={paginationLoading} - setPaginationLoading={setPaginationLoading} - /> - - ) - ) : ( +
+ ) : address ? ( +
+ + You were not active this week. ready to jump back in? + + + + Start your quest + + +
+ ) : null + ) : null} + + + {/* shows loader skeleton while data is still being fetched*/} + + {rankingdataloading ? ( + + ) : ranking ? ( + isNoSearchResults ? ( + // {/* this will be displayed if searched user is not present in leaderboard or server returns 500*/}
+ error image - Something went wrong! Try again... + No Results Found! Try a new search
+ ) : ( + <> + 0 + ? currentSearchedAddress + : userAddress + } + searchedAddress={currentSearchedAddress} + leaderboardToppers={leaderboardToppers} + paginationLoading={paginationLoading} + setPaginationLoading={setPaginationLoading} + /> + + ) + ) : ( +
+ + Something went wrong! Try again... + + +
+ )} + {duration !== TOP_50_TAB_STRING && + (address || (!isNoSearchResults && currentSearchedAddress)) && + !isNoSearchResults && ( + )} - {duration !== TOP_50_TAB_STRING && - (address || (!isNoSearchResults && currentSearchedAddress)) && - !isNoSearchResults && ( - - )} -
- +
+ {/* )} */}
); diff --git a/components/UI/actions/socialmediaActions.tsx b/components/UI/actions/socialmediaActions.tsx index 8162eeaa..8343176c 100644 --- a/components/UI/actions/socialmediaActions.tsx +++ b/components/UI/actions/socialmediaActions.tsx @@ -1,13 +1,13 @@ import React, { FunctionComponent, useEffect, useState } from "react"; import ClickableSocialIcon from "./clickable/clickableSocialIcon"; -import { isStarkRootDomain } from "starknetid.js/packages/core/dist/utils"; import { cairo } from "starknet"; +import { isStarkRootDomain } from "starknetid.js/dist/utils"; type SocialMediaActionsProps = { identity: Identity; }; -type SocialPlatform = 'twitter' | 'discord' | 'github'; +type SocialPlatform = "twitter" | "discord" | "github"; const SocialMediaActions: FunctionComponent = ({ identity, @@ -25,7 +25,7 @@ const SocialMediaActions: FunctionComponent = ({ discord?: string; github?: string; } = {}; - + identity?.verifier_data?.forEach((verifier) => { const field = cairo.felt(verifier.field); if (field === cairo.felt("twitter") && verifier.data) { @@ -36,7 +36,7 @@ const SocialMediaActions: FunctionComponent = ({ newProfiles.github = verifier.data; } }); - + setSocialProfiles(newProfiles); } }, [identity]); diff --git a/components/UI/navbar.tsx b/components/UI/navbar.tsx index 951d8f9d..4d378128 100644 --- a/components/UI/navbar.tsx +++ b/components/UI/navbar.tsx @@ -91,9 +91,7 @@ const Navbar: FunctionComponent = () => { // Autoconnect useEffect(() => { const connectToStarknet = async () => { - if ( - !localStorage.getItem("SQ-connectedWallet") - ) { + if (!localStorage.getItem("SQ-connectedWallet")) { connectWallet(); } else { const connectordId = localStorage.getItem("SQ-connectedWallet"); @@ -180,7 +178,14 @@ const Navbar: FunctionComponent = () => { return ( <> -