From 41f0553993b8b7205e9585395d2ed50d8b9723a5 Mon Sep 17 00:00:00 2001
From: Iris <iris.devillars@gmail.com>
Date: Thu, 18 Sep 2025 19:34:44 +0200
Subject: [PATCH 1/2] feat: add message

---
 components/UI/navbar.tsx | 27 ++++++++++++++++-----------
 1 file changed, 16 insertions(+), 11 deletions(-)

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 (
     <>
-      <div className={`fixed w-full z-20`} id="nav">
+      {/* Discontinuation Notice */}
+      <div className="fixed w-full z-30 bg-red-600 text-white text-center py-2 px-4">
+        <Typography type={TEXT_TYPE.BODY_DEFAULT} className="text-white">
+          ⚠️ Starknet Quest has been discontinued. Thank you for your support!
+        </Typography>
+      </div>
+
+      <div className={`fixed w-full z-20`} id="nav" style={{ top: "48px" }}>
         <div
           className={`${styles.navbarContainer} ${
             navbarBg ? styles.navbarScrolled : ""
@@ -190,8 +195,8 @@ const Navbar: FunctionComponent = () => {
             <Link href="/" className="modified-cursor-pointer">
               <Image
                 className={styles.logo}
-                src='/visuals/starknetquestLogo.svg'
-                alt='Starknet Quest Logo'
+                src="/visuals/starknetquestLogo.svg"
+                alt="Starknet Quest Logo"
                 width={80}
                 height={80}
                 priority
@@ -199,11 +204,11 @@ const Navbar: FunctionComponent = () => {
             </Link>
           </div>
           <div>
-            <ul className='hidden lg:flex uppercase items-center '>
+            <ul className="hidden lg:flex uppercase items-center ">
               <Link href={`/discover/defi`}>
                 <li className={styles.menuItem}>DeFi</li>
               </Link>
-              <Link href='/quests'>
+              <Link href="/quests">
                 <li className={styles.menuItem}>Quests</li>
               </Link>
               {isConnected && (
@@ -250,12 +255,12 @@ const Navbar: FunctionComponent = () => {
         <div
           className={
             nav
-              ? "mt-24 lg:hidden fixed left-0 top-0 w-full h-screen bg-black/10 z-10" //extra margin so page doesnt cover forst navbar buttons
+              ? "mt-32 lg:hidden fixed left-0 top-0 w-full h-screen bg-black/10 z-10" //extra margin so page doesnt cover first navbar buttons
               : ""
           }
         >
           <div
-            className={`mt-20 fixed left-0 top-0 w-full sm:w-[60%] lg:w-[45%] h-screen bg-background px-5 ease-in justify-between flex-col overflow-auto ${
+            className={`mt-28 fixed left-0 top-0 w-full sm:w-[60%] lg:w-[45%] h-screen bg-background px-5 ease-in justify-between flex-col overflow-auto ${
               //extra margin so page doesnt overlap the navbar
               nav ? styles.mobileNavbarShown : styles.mobileNavbarHidden
             }`}
@@ -271,7 +276,7 @@ const Navbar: FunctionComponent = () => {
                       DeFi
                     </li>
                   </Link>
-                  <Link href='/quests'>
+                  <Link href="/quests">
                     <li
                       onClick={() => setNav(false)}
                       className={styles.menuItemSmall}

From 2a8a5c3addf2d35724fbee14a3f227cafba5d490 Mon Sep 17 00:00:00 2001
From: Iris <iris.devillars@gmail.com>
Date: Fri, 19 Sep 2025 10:05:08 +0200
Subject: [PATCH 2/2] fix: build error

---
 app/leaderboard/page.tsx                     | 389 ++++++++++---------
 components/UI/actions/socialmediaActions.tsx |   8 +-
 components/leaderboard/RankingsTable.tsx     |  23 +-
 3 files changed, 217 insertions(+), 203 deletions(-)

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<LeaderboardToppersData>({
-    best_users: [],
-    total_users: 0,
-  });
+    useState<LeaderboardToppersData>({
+      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() {
           <LeaderboardSkeleton />
         </div>
       // ) : ( */}
-        <>
-          <div className={styles.leaderboard_quest_banner}>
-            <div className={styles.blur1}>
-              <Blur green />
+      <>
+        <div className={styles.leaderboard_quest_banner}>
+          <div className={styles.blur1}>
+            <Blur green />
+          </div>
+          <div className={styles.blur2}>
+            <Blur green />
+          </div>
+
+          <FeaturedQuest
+            heading="Are you ready for this quest?"
+            key={featuredQuest?.id}
+            title={featuredQuest?.title_card}
+            onClick={() => 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}
+          />
+        </div>
+        <div className={styles.leaderboard_layout}>
+          <div className={styles.leaderboard_topbar}>
+            <div style={{ flex: 0.4 }}>
+              <Typography
+                type={TEXT_TYPE.BODY_MIDDLE}
+                className={styles.leaderboard_heading}
+              >
+                Leaderboard
+              </Typography>
             </div>
-            <div className={styles.blur2}>
-              <Blur green />
+            <div className={styles.leaderboard_chiplist} style={{ flex: 1 }}>
+              <ChipList
+                selected={duration}
+                handleChangeSelection={handleChangeSelection}
+                tags={[
+                  "Last 7 Days",
+                  "Last 30 Days",
+                  "All time",
+                  TOP_50_TAB_STRING,
+                ]}
+              />
             </div>
-
-            <FeaturedQuest
-              heading="Are you ready for this quest?"
-              key={featuredQuest?.id}
-              title={featuredQuest?.title_card}
-              onClick={() => 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}
-            />
-          </div>
-          <div className={styles.leaderboard_layout}>
-            <div className={styles.leaderboard_topbar}>
-              <div style={{ flex: 0.4 }}>
-                <Typography
-                  type={TEXT_TYPE.BODY_MIDDLE}
-                  className={styles.leaderboard_heading}
-                >
-                  Leaderboard
-                </Typography>
-              </div>
-              <div className={styles.leaderboard_chiplist} style={{ flex: 1 }}>
-                <ChipList
-                  selected={duration}
-                  handleChangeSelection={handleChangeSelection}
-                  tags={[
-                    "Last 7 Days",
-                    "Last 30 Days",
-                    "All time",
-                    TOP_50_TAB_STRING,
-                  ]}
-                />
-              </div>
-              <div style={{ flex: 0.4 }} className="w-full">
-                <Searchbar
-                  value={searchQuery}
-                  handleChange={handleChange}
-                  onKeyDown={handleKeyDown}
-                  suggestions={searchResults}
-                  handleSuggestionClick={(address) => {
-                    setCurrentSearchedAddress(address);
-                    setSearchResults([]);
-                    setCustomResult(true);
-                  }}
-                />
-              </div>
+            <div style={{ flex: 0.4 }} className="w-full">
+              <Searchbar
+                value={searchQuery}
+                handleChange={handleChange}
+                onKeyDown={handleKeyDown}
+                suggestions={searchResults}
+                handleSuggestionClick={(address) => {
+                  setCurrentSearchedAddress(address);
+                  setSearchResults([]);
+                  setCustomResult(true);
+                }}
+              />
             </div>
+          </div>
 
-            {/* this will be displayed if user is present otherwise will not be displayed */}
-            {userPercentile ? (
-              userPercentile >= 0 ? (
-                <div className={styles.percentile_container}>
-                  {currentSearchedAddress.length > 0 || userAddress ? (
-                    <div className="hidden md:block">
-                      <Avatar
-                        address={
-                          currentSearchedAddress.length > 0
-                            ? decimalToHex(currentSearchedAddress)
-                            : userAddress
-                        }
-                      />
-                    </div>
-                  ) : null}
-                  <div className={styles.percentile_text_container}>
-                    <Typography
-                      type={TEXT_TYPE.BODY_DEFAULT}
-                      color="textGray"
-                      className={styles.percentile_text_normal}
-                    >
-                      {currentSearchedAddress.length > 0 ? "He is" : "You are "}
-                    </Typography>
-                    <span className={styles.percentile_text_green}>
-                      &nbsp;better than {userPercentile}%&nbsp;
-                    </span>
-                    <Typography
-                      type={TEXT_TYPE.BODY_DEFAULT}
-                      color="textGray"
-                      className={styles.percentile_text_normal}
-                    >
-                      of the other players
-                    </Typography>
+          {/* this will be displayed if user is present otherwise will not be displayed */}
+          {userPercentile ? (
+            userPercentile >= 0 ? (
+              <div className={styles.percentile_container}>
+                {currentSearchedAddress.length > 0 || userAddress ? (
+                  <div className="hidden md:block">
+                    <Avatar
+                      address={
+                        currentSearchedAddress.length > 0
+                          ? decimalToHex(currentSearchedAddress)
+                          : userAddress
+                      }
+                    />
                   </div>
-                </div>
-              ) : address ? (
-                <div className={styles.percentile_container}>
+                ) : null}
+                <div className={styles.percentile_text_container}>
                   <Typography
                     type={TEXT_TYPE.BODY_DEFAULT}
                     color="textGray"
                     className={styles.percentile_text_normal}
                   >
-                    You were not active this week. ready to jump back in?
+                    {currentSearchedAddress.length > 0 ? "He is" : "You are "}
                   </Typography>
-                  <Link href="/">
-                    <Typography
-                      type={TEXT_TYPE.BODY_DEFAULT}
-                      color="white"
-                      className={styles.percentile_text_link}
-                    >
-                      Start your quest
-                    </Typography>
-                  </Link>
-                </div>
-              ) : null
-            ) : null}
-            <Divider
-              orientation="horizontal"
-              variant="fullWidth"
-              className={styles.divider}
-            />
-
-            {/* shows loader skeleton while data is still being fetched*/}
-
-            {rankingdataloading ? (
-              <RankingSkeleton />
-            ) : ranking ? (
-              isNoSearchResults ? (
-                // {/* this will be displayed if searched user is not present in leaderboard or server returns 500*/}
-                <div className={styles.no_result_container}>
-                  <img
-                    src="/visuals/animals/tiger.webp"
-                    height={256}
-                    width={254}
-                    alt="error image"
-                  />
+                  <span className={styles.percentile_text_green}>
+                    &nbsp;better than {userPercentile}%&nbsp;
+                  </span>
                   <Typography
                     type={TEXT_TYPE.BODY_DEFAULT}
-                    className="pb-[1.5rem]"
+                    color="textGray"
+                    className={styles.percentile_text_normal}
                   >
-                    No Results Found! Try a new search
+                    of the other players
                   </Typography>
-                  <Divider
-                    orientation="horizontal"
-                    variant="fullWidth"
-                    className={styles.divider}
-                  />
                 </div>
-              ) : (
-                <>
-                  <RankingsTable
-                    duration={duration}
-                    data={
-                      checkIfLastPage && !viewMore
-                        ? { ...ranking, ranking: ranking.ranking.slice(0, 10) }
-                        : ranking
-                    }
-                    selectedAddress={
-                      currentSearchedAddress.length > 0
-                        ? currentSearchedAddress
-                        : (userAddress)
-                    }
-                    searchedAddress={currentSearchedAddress}
-                    leaderboardToppers={leaderboardToppers}
-                    paginationLoading={paginationLoading}
-                    setPaginationLoading={setPaginationLoading}
-                  />
-                </>
-              )
-            ) : (
+              </div>
+            ) : address ? (
+              <div className={styles.percentile_container}>
+                <Typography
+                  type={TEXT_TYPE.BODY_DEFAULT}
+                  color="textGray"
+                  className={styles.percentile_text_normal}
+                >
+                  You were not active this week. ready to jump back in?
+                </Typography>
+                <Link href="/">
+                  <Typography
+                    type={TEXT_TYPE.BODY_DEFAULT}
+                    color="white"
+                    className={styles.percentile_text_link}
+                  >
+                    Start your quest
+                  </Typography>
+                </Link>
+              </div>
+            ) : null
+          ) : null}
+          <Divider
+            orientation="horizontal"
+            variant="fullWidth"
+            className={styles.divider}
+          />
+
+          {/* shows loader skeleton while data is still being fetched*/}
+
+          {rankingdataloading ? (
+            <RankingSkeleton />
+          ) : ranking ? (
+            isNoSearchResults ? (
+              // {/* this will be displayed if searched user is not present in leaderboard or server returns 500*/}
               <div className={styles.no_result_container}>
+                <img
+                  src="/visuals/animals/tiger.webp"
+                  height={256}
+                  width={254}
+                  alt="error image"
+                />
                 <Typography
                   type={TEXT_TYPE.BODY_DEFAULT}
-                  className="pb-[1.5rem] text-[1.5rem]"
+                  className="pb-[1.5rem]"
                 >
-                  Something went wrong! Try again...
+                  No Results Found! Try a new search
                 </Typography>
                 <Divider
                   orientation="horizontal"
@@ -547,22 +515,57 @@ export default function Page() {
                   className={styles.divider}
                 />
               </div>
+            ) : (
+              <>
+                <RankingsTable
+                  duration={duration}
+                  data={
+                    checkIfLastPage && !viewMore
+                      ? { ...ranking, ranking: ranking.ranking.slice(0, 10) }
+                      : ranking
+                  }
+                  selectedAddress={
+                    currentSearchedAddress.length > 0
+                      ? currentSearchedAddress
+                      : userAddress
+                  }
+                  searchedAddress={currentSearchedAddress}
+                  leaderboardToppers={leaderboardToppers}
+                  paginationLoading={paginationLoading}
+                  setPaginationLoading={setPaginationLoading}
+                />
+              </>
+            )
+          ) : (
+            <div className={styles.no_result_container}>
+              <Typography
+                type={TEXT_TYPE.BODY_DEFAULT}
+                className="pb-[1.5rem] text-[1.5rem]"
+              >
+                Something went wrong! Try again...
+              </Typography>
+              <Divider
+                orientation="horizontal"
+                variant="fullWidth"
+                className={styles.divider}
+              />
+            </div>
+          )}
+          {duration !== TOP_50_TAB_STRING &&
+            (address || (!isNoSearchResults && currentSearchedAddress)) &&
+            !isNoSearchResults && (
+              <Button
+                onClick={handleViewMore}
+                variant="text"
+                disableRipple
+                className="w-fit text-white text self-center"
+                style={{ textTransform: "none" }}
+              >
+                {checkIfLastPage && viewMore ? "View less" : "View more"}
+              </Button>
             )}
-            {duration !== TOP_50_TAB_STRING &&
-              (address || (!isNoSearchResults && currentSearchedAddress)) &&
-              !isNoSearchResults && (
-                <Button
-                  onClick={handleViewMore}
-                  variant="text"
-                  disableRipple
-                  className="w-fit text-white text self-center"
-                  style={{ textTransform: "none" }}
-                >
-                  {checkIfLastPage && viewMore ? "View less" : "View more"}
-                </Button>
-              )}
-          </div>
-        </>
+        </div>
+      </>
       {/* )} */}
     </div>
   );
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<SocialMediaActionsProps> = ({
   identity,
@@ -25,7 +25,7 @@ const SocialMediaActions: FunctionComponent<SocialMediaActionsProps> = ({
         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<SocialMediaActionsProps> = ({
           newProfiles.github = verifier.data;
         }
       });
-  
+
       setSocialProfiles(newProfiles);
     }
   }, [identity]);
diff --git a/components/leaderboard/RankingsTable.tsx b/components/leaderboard/RankingsTable.tsx
index 9e8fa577..86e2be93 100644
--- a/components/leaderboard/RankingsTable.tsx
+++ b/components/leaderboard/RankingsTable.tsx
@@ -8,7 +8,6 @@ import { FunctionComponent, useEffect, useState } from "react";
 import { getCompletedQuests } from "@services/apiService";
 import styles from "@styles/leaderboard.module.css";
 import { useMediaQuery } from "@mui/material";
-import { isStarkDomain } from "starknetid.js/packages/core/dist/utils";
 import Link from "next/link";
 import { CDNImage } from "@components/cdn/image";
 
@@ -18,6 +17,7 @@ import Top3RankedUsers from "./Top3RankedUsers";
 import { CompletedQuests } from "types/backTypes";
 import Typography from "@components/UI/typography/typography";
 import { TEXT_TYPE } from "@constants/typography";
+import { isStarkDomain } from "starknetid.js/dist/utils";
 
 // show leaderboard ranking table
 const RankingsTable: FunctionComponent<RankingProps> = ({
@@ -141,14 +141,17 @@ const RankingsTable: FunctionComponent<RankingProps> = ({
                 >
                   <div className={styles.ranking_table_row_name_rank}>
                     <div className={styles.ranking_position_layout}>
-                      <Typography type={TEXT_TYPE.BODY_DEFAULT} className="text-white text-center">
+                      <Typography
+                        type={TEXT_TYPE.BODY_DEFAULT}
+                        className="text-white text-center"
+                      >
                         {rankFormatter(itemRank)}
                       </Typography>
                     </div>
                     <div className={styles.ranking_profile_layout}>
-                      
                       <Avatar address={decimalToHex(item.address)} width="32" />
-                      <Typography type={TEXT_TYPE.BODY_DEFAULT}
+                      <Typography
+                        type={TEXT_TYPE.BODY_DEFAULT}
                         style={{
                           color:
                             selectedAddress === item.address || isMyRank
@@ -169,9 +172,17 @@ const RankingsTable: FunctionComponent<RankingProps> = ({
                         height={35}
                         alt="xp badge"
                       />
-                      <Typography type={TEXT_TYPE.BODY_DEFAULT} className="text-white text-center">{item.xp}</Typography>
+                      <Typography
+                        type={TEXT_TYPE.BODY_DEFAULT}
+                        className="text-white text-center"
+                      >
+                        {item.xp}
+                      </Typography>
                     </div>
-                    <Typography type={TEXT_TYPE.BODY_MICRO} className={styles.quests_text}>
+                    <Typography
+                      type={TEXT_TYPE.BODY_MICRO}
+                      className={styles.quests_text}
+                    >
                       {item.completedQuests} Quests
                     </Typography>
                   </div>