chore: remove test env

.gitignore

@@ -28,6 +28,8 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
+.env.test
 
 # vercel
 .vercel

components/UI/ChipList.tsx

@@ -20,14 +20,15 @@ const ChipList: FunctionComponent<ChipProps> = ({
           key={index}
           className={styles.each_chip}
           style={{
-            backgroundColor: tag === selected ? "white" : "inherit",
+            backgroundColor: tag === selected ? "white" : "transparent",
           }}
         >
           <p
             style={{
               color: tag !== selected ? "white" : "black",
               fontSize: 12,
               fontWeight: 600,
+              opacity: tag !== selected ? 0.8 : 1,
             }}
           >
             {tag}

components/leaderboard/ControlsDashboard.tsx

@@ -14,10 +14,21 @@ const ControlsDashboard: FunctionComponent<ControlsDashboardProps> = ({
   setRowsPerPage,
   leaderboardToppers,
   duration,
+  setCustomResult,
 }) => {
   const [showMenu, setShowMenu] = useState(false);
 
   const checkIfLastPage = useMemo(() => {
+    /*
+    check if the current page is the last page
+
+    first_elt_position is the index of the first element in the current page
+    and ranking.length is the number of elements in the current page
+
+    so if the sum of these two is greater than the number of players in the
+    leaderboard toppers api response, then we are on the last page
+    */
+
     if (
       ranking?.first_elt_position + ranking?.ranking?.length >=
       leaderboardToppers?.[
@@ -31,6 +42,12 @@ const ControlsDashboard: FunctionComponent<ControlsDashboardProps> = ({
   }, [leaderboardToppers, ranking, duration]);
 
   const checkIfFirstPage = useMemo(() => {
+    /*
+    check if the current page is the first page
+
+    first_elt_position is the index of the first element in the current page
+    so if this is less than or equal to 1, then we are on the first page
+    */
     if (ranking?.first_elt_position <= 1) return true;
     return false;
   }, [ranking]);
@@ -54,7 +71,10 @@ const ControlsDashboard: FunctionComponent<ControlsDashboardProps> = ({
                 <button
                   className={styles.menu_button}
                   key={index}
-                  onClick={() => setRowsPerPage(item)}
+                  onClick={() => {
+                    setCustomResult(true);
+                    setRowsPerPage(item);
+                  }}
                 >
                   <p>{item}</p>
                 </button>

components/leaderboard/RankCard.tsx

@@ -59,11 +59,13 @@ const RankCard: FunctionComponent<RankCardProps> = ({
         <div>{displayName}</div>
       </div>
 
+      {/* <div style={{ width: "100%" }}> */}
       <Divider
         orientation="horizontal"
         variant="fullWidth"
         className={styles.divider}
       />
+      {/* </div> */}
 
       <div className={styles.rank_card_numbers}>
         <div className={styles.rank_card_number_layout}>

components/leaderboard/RankingsTable.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import RankingSkeleton from "../skeletons/rankingSkeleton";
-import { minifyAddress } from "../../utils/stringService";
+import { minifyAddress, minifyDomain } from "../../utils/stringService";
 import { getDomainFromAddress } from "../../utils/domainService";
 import { decimalToHex } from "../../utils/feltService";
 import Avatar from "../UI/avatar";
@@ -9,13 +9,20 @@ import { FunctionComponent, useEffect, useState } from "react";
 import { getCompletedQuestsOfUser } from "../../services/apiService";
 import styles from "../../styles/leaderboard.module.css";
 import Image from "next/image";
+import { useMediaQuery } from "@mui/material";
+import { isStarkDomain } from "starknetid.js/packages/core/dist/utils";
+import Link from "next/link";
 
 // show leaderboard ranking table
 const RankingsTable: FunctionComponent<RankingProps> = ({
   data,
   paginationLoading,
   setPaginationLoading,
+  selectedAddress,
 }) => {
+  const isMobile = useMediaQuery("(max-width:768px)");
+  const [hoveredIndex, setHoveredIndex] = useState<number>(-1);
+
   // used to format the data to be displayed
   const [displayData, setDisplayData] = useState<FormattedRankingProps>([]);
 
@@ -60,28 +67,55 @@ const RankingsTable: FunctionComponent<RankingProps> = ({
         <RankingSkeleton />
       ) : (
         displayData?.map((item, index) => (
-          <div key={item.address} className={styles.ranking_table_row}>
-            <div className={styles.ranking_table_row_name_rank}>
-              <div className={styles.ranking_position_layout}>
-                <p className="text-white text-center">
-                  {addNumberPadding(data.first_elt_position + index)}
-                </p>
-              </div>
-              <div className={styles.ranking_profile_layout}>
-                <Avatar address={item.address} width="32" />
-                <p className="text-white">{item.displayName}</p>
+          <Link key={item.address} href={`/${decimalToHex(item.address)}`}>
+            <div
+              className={styles.ranking_table_row}
+              style={{
+                backgroundColor:
+                  selectedAddress === item.address
+                    ? "black"
+                    : hoveredIndex === index
+                    ? "#1C1C1C"
+                    : "transparent",
+              }}
+              onMouseOver={() => setHoveredIndex(index)}
+            >
+              <div className={styles.ranking_table_row_name_rank}>
+                <div className={styles.ranking_position_layout}>
+                  <p className="text-white text-center">
+                    {addNumberPadding(data.first_elt_position + index)}
+                  </p>
+                </div>
+                <div className={styles.ranking_profile_layout}>
+                  <Avatar address={item.address} width="32" />
+                  <p
+                    style={{
+                      color:
+                        selectedAddress === item.address
+                          ? "#6AFFAF"
+                          : "#ffffff",
+                    }}
+                  >
+                    {isMobile &&
+                    item &&
+                    item.displayName &&
+                    isStarkDomain(item.displayName)
+                      ? minifyDomain(item.displayName)
+                      : item.displayName}
+                  </p>
+                </div>
               </div>
-            </div>
-            <div className={styles.ranking_table_row_xp_quest}>
-              <div className={styles.ranking_points_layout}>
-                <Image src={XpBadge} priority width={35} height={35} />
-                <p className="text-white text-center">{item.xp}</p>
+              <div className={styles.ranking_table_row_xp_quest}>
+                <div className={styles.ranking_points_layout}>
+                  <Image src={XpBadge} priority width={35} height={35} />
+                  <p className="text-white text-center">{item.xp}</p>
+                </div>
+                <p className={styles.quests_text}>
+                  {item.completedQuests} Quests
+                </p>
               </div>
-              <p className={styles.quests_text}>
-                {item.completedQuests} Quests
-              </p>
             </div>
-          </div>
+          </Link>
         ))
       )}
     </div>

components/leaderboard/searchbar.tsx

@@ -1,29 +1,106 @@
-import React, { FunctionComponent } from "react";
+import React, {
+  useContext,
+  useEffect,
+  useState,
+  FunctionComponent,
+} from "react";
 import SearchIcon from "../../public/icons/searchIcon.svg";
 import Image from "next/image";
+import styles from "../../styles/leaderboard.module.css";
+import CrossIcon from "../../public/icons/cross.svg";
+import { StarknetIdJsContext } from "../../context/StarknetIdJsProvider";
+import { hexToDecimal } from "../../utils/feltService";
 
 type SearchbarProps = {
-  handleSearch: (_: string) => void;
+  handleChange: (_: string) => void;
   value: string;
   onKeyDown: (e: React.KeyboardEvent<HTMLDivElement>) => void;
+  suggestions: string[];
+  handleSuggestionClick: (_: string) => void;
 };
 
 const Searchbar: FunctionComponent<SearchbarProps> = ({
-  handleSearch,
+  handleChange,
   value,
   onKeyDown,
+  suggestions,
+  handleSuggestionClick,
 }) => {
+  const [showSuggestions, setShowSuggestions] = useState(
+    suggestions?.length > 0
+  );
+
+  const { starknetIdNavigator } = useContext(StarknetIdJsContext);
+
+  useEffect(() => {
+    const handleOutsideClick = (e: MouseEvent) => {
+      const target = e.target as HTMLElement;
+      if (
+        target.className !== styles.search_bar_container &&
+        target.className !== styles.search_bar &&
+        target.className !== styles.search_bar_suggestions
+      ) {
+        setShowSuggestions(false);
+      } else {
+        setShowSuggestions(true);
+      }
+    };
+
+    document.addEventListener("click", handleOutsideClick);
+
+    return () => {
+      document.removeEventListener("click", handleOutsideClick);
+    };
+  }, []);
+
+  const handleOptionClick = async (option: string) => {
+    const addr = await starknetIdNavigator
+      ?.getAddressFromStarkName(option)
+      .catch((err) => {
+        return "";
+      });
+    if (!addr) return;
+    handleChange(option);
+    handleSuggestionClick(hexToDecimal(addr));
+  };
+
   return (
-    <div className="flex flex-row p-2 bg-background w-full rounded-lg">
-      <Image src={SearchIcon} priority width={16} height={16} />
-      <input
-        value={value}
-        onChange={(e) => handleSearch(e.target.value)}
-        className="bg-transparent outline-none ml-2 w-full"
-        placeholder="Search"
-        style={{ fontSize: 14 }}
-        onKeyDown={onKeyDown}
-      />
+    <div className="relative gap-2 z-50">
+      <div className={styles.search_bar_container}>
+        <Image src={SearchIcon} priority width={16} height={16} />
+        <input
+          value={value}
+          onChange={(e) => handleChange(e.target.value)}
+          className={styles.search_bar}
+          placeholder="Search"
+          style={{ fontSize: 14 }}
+          onKeyDown={onKeyDown}
+        />
+        {value.length > 0 ? (
+          <div
+            className="flex cursor-pointer"
+            onClick={() => {
+              handleChange("");
+              handleSuggestionClick("");
+            }}
+          >
+            <Image src={CrossIcon} priority width={20} height={20} />
+          </div>
+        ) : null}
+      </div>
+      {showSuggestions && suggestions?.length > 0 ? (
+        <div className={styles.search_bar_suggestions}>
+          {suggestions.map((suggestion, index) => (
+            <div
+              className="flex cursor-pointer"
+              key={index}
+              onClick={() => handleOptionClick(suggestion)}
+            >
+              <p>{suggestion}</p>
+            </div>
+          ))}
+        </div>
+      ) : null}
     </div>
   );
 };

components/skeletons/rankingSkeleton.tsx

@@ -9,11 +9,10 @@ const RankingSkeleton: FunctionComponent = () => {
         <Skeleton
           variant="rounded"
           className={styles.leaderboardLoading}
-          height={"100vh"}
+          height={"120vh"}
           sx={{
             bgcolor: "grey.900",
             borderRadius: "30px",
-            margin: "40px auto",
           }}
         />
       </div>

hooks/useDebounce.tsx

@@ -0,0 +1,15 @@
+import { useEffect, useState } from "react";
+
+export function useDebounce<T>(value: T, delay?: number): T {
+  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+
+  useEffect(() => {
+    const timer = setTimeout(() => setDebouncedValue(value), delay || 500);
+
+    return () => {
+      clearTimeout(timer);
+    };
+  }, [value, delay]);
+
+  return debouncedValue;
+}