Fix: Address issue #891->cleanup of apidelay,and Refactor addr assign…

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 } 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";
@@ -31,7 +31,7 @@ import Divider from "@mui/material/Divider";
 import Blur from "@components/shapes/blur";
 import RankingsTable from "@components/leaderboard/RankingsTable";
 import { TOP_50_TAB_STRING } from "@constants/common";
-import { hexToDecimal } from "@utils/feltService";
+// import {  } from "@utils/feltService";
 import Avatar from "@components/UI/avatar";
 import RankingSkeleton from "@components/skeletons/rankingSkeleton";
 import { Button } from "@mui/material";
@@ -43,6 +43,8 @@ import {
   LeaderboardRankingParams,
   LeaderboardTopperParams,
 } from "../../types/backTypes";
+import { decimalToHex } from "@utils/feltService";
+
 
 export default function Page() {
   const router = useRouter();
@@ -71,6 +73,12 @@ export default function Page() {
   });
   const [inititalFetchTop50, setInititalFetchTop50] = useState(false);
 
+  const [leaderboardToppers, setLeaderboardToppers] =
+  useState<LeaderboardToppersData>({
+    best_users: [],
+    total_users: 0,
+  });
+
   const isTop50RankedView = useMemo(
     () =>
       !currentSearchedAddress &&
@@ -87,18 +95,21 @@ export default function Page() {
 
   // set user address on wallet connect and disconnect
   useEffect(() => {
-    setTimeout(() => {
-      setApiCallDelay(true);
-    }, 1000);
-    if (address === "") return;
+    const timeoutId = setTimeout(() => setApiCallDelay(true), 1000);
     if (address) setUserAddress(address);
     if (status === "disconnected") setUserAddress("");
+    return () => clearTimeout(timeoutId); // Cleanup 
   }, [address, status]);
 
   useEffect(() => {
     if (!apiCallDelay) return;
-    fetchPageData();
-  }, [apiCallDelay]);
+    const fetchTimeout = setTimeout(() => {
+        fetchPageData();
+    }, 500); 
+
+    return () => clearTimeout(fetchTimeout);
+}, [apiCallDelay]);
+
 
   const fetchRankingResults = useCallback(
     async (requestBody: LeaderboardRankingParams) => {
@@ -113,10 +124,9 @@ export default function Page() {
   const addRankingResults = useCallback(
     async (requestBody: LeaderboardRankingParams) => {
       const response = await fetchLeaderboardRankings(requestBody);
-      if (response)
-        setRanking((prev) => {
-          return { ...prev, ranking: [...prev.ranking, ...response.ranking] };
-        });
+      if (response) {
+        setRanking((prev) => ({ ...prev, ranking: [...prev.ranking, ...response.ranking] }));
+      }
     },
     []
   );
@@ -131,10 +141,7 @@ export default function Page() {
 
   const fetchPageData = useCallback(async () => {
     const requestBody = {
-      addr:
-        status === "connected"
-          ? hexToDecimal(address && address?.length > 0 ? address : userAddress)
-          : "",
+      addr: status === "connected" ? (address || userAddress) : "",
       page_size: 10,
       shift: 0,
       duration: timeFrameMap(duration),
@@ -154,11 +161,7 @@ export default function Page() {
     status,
   ]);
 
-  const [leaderboardToppers, setLeaderboardToppers] =
-    useState<LeaderboardToppersData>({
-      best_users: [],
-      total_users: 0,
-    });
+
 
   const contract = useMemo(() => {
     return new Contract(
@@ -206,10 +209,7 @@ export default function Page() {
   useEffect(() => {
     const checkIfValidAddress = async (address: string) => {
       try {
-        let domain = address;
-        if (isStarkDomain(address)) {
-          domain = getDomainWithoutStark(address);
-        }
+        const domain = isStarkDomain(address) ? getDomainWithoutStark(address) : address;
         const res: { message: boolean } = await verifyDomain(domain);
         if (res.message) {
           setSearchResults([domain.concat(".stark")]);
@@ -260,12 +260,7 @@ export default function Page() {
     }
     if (!checkIfLastPage && viewMore) {
       const requestBody = {
-        addr:
-          currentSearchedAddress.length > 0
-            ? currentSearchedAddress
-            : userAddress
-            ? hexToDecimal(userAddress)
-            : "",
+        addr: currentSearchedAddress || (userAddress ? (userAddress) : ""),
         page_size: rowsPerPage,
         shift: currentPage,
         duration: timeFrameMap(duration),
@@ -294,14 +289,7 @@ export default function Page() {
   */
   useEffect(() => {
     const requestBody = {
-      addr:
-        currentSearchedAddress.length > 0
-          ? currentSearchedAddress
-          : userAddress
-          ? hexToDecimal(userAddress)
-          : address
-          ? address
-          : "",
+      addr: currentSearchedAddress || (userAddress ? (userAddress) : address || ""),
       page_size: rowsPerPage,
       shift: 0,
       duration: timeFrameMap(duration),
@@ -326,14 +314,7 @@ export default function Page() {
   useEffect(() => {
     if (inititalFetchTop50 && address && duration !== TOP_50_TAB_STRING) {
       const requestBody = {
-        addr:
-          currentSearchedAddress.length > 0
-            ? currentSearchedAddress
-            : userAddress
-            ? hexToDecimal(userAddress)
-            : address
-            ? address
-            : "",
+         addr: currentSearchedAddress || (userAddress ? (userAddress) : address || ""),
         page_size: rowsPerPage,
         shift: 0,
         duration: timeFrameMap(duration),
@@ -453,7 +434,7 @@ export default function Page() {
                       <Avatar
                         address={
                           currentSearchedAddress.length > 0
-                            ? currentSearchedAddress
+                            ? decimalToHex(currentSearchedAddress)
                             : userAddress
                         }
                       />
@@ -544,7 +525,7 @@ export default function Page() {
                     selectedAddress={
                       currentSearchedAddress.length > 0
                         ? currentSearchedAddress
-                        : hexToDecimal(userAddress)
+                        : (userAddress)
                     }
                     searchedAddress={currentSearchedAddress}
                     leaderboardToppers={leaderboardToppers}

app/not-connected/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { useAccount, useConnect } from "@starknet-react/core";
+import { useAccount, useConnect, Connector } from "@starknet-react/core";
 import React, { useEffect } from "react";
 import { useRouter } from "next/navigation";
 import ErrorScreen from "@components/UI/screens/errorScreen";
@@ -12,7 +12,7 @@ export default function Page() {
   const { connectAsync } = useConnect();
   const { push } = useRouter();
   const { starknetkitConnectModal } = useStarknetkitConnectModal({
-    connectors: availableConnectors,
+    connectors: availableConnectors as any,  
     modalTheme: "dark",
   });
 
@@ -25,14 +25,14 @@ export default function Page() {
     if (!connector) {
       return;
     }
-    await connectAsync({ connector });
+    await connectAsync({ connector: connector as Connector });  // Type casted
     localStorage.setItem("SQ-connectedWallet", connector.id);
   };
 
   return (
     <>
       <ErrorScreen
-        errorMessage="You're not connected !"
+        errorMessage="You're not connected!"
         buttonText="Connect wallet"
         onClick={connectWallet}
       />

app/provider.tsx

@@ -44,11 +44,11 @@ export const availableConnectors = [
         ? "https://web.hydrogen.argent47.net"
         : "https://web.argent.xyz/",
   }),
-  new ArgentMobileConnector({
-    dappName: "Starknet Quest",
+   ArgentMobileConnector.init({
+   options: {dappName: "Starknet Quest",
     url: process.env.NEXT_PUBLIC_APP_LINK as string,
     chainId: constants.NetworkName.SN_MAIN,
-    icons: ["https://starknet.quest/visuals/starknetquestLogo.svg"],
+    icons: ["https://starknet.quest/visuals/starknetquestLogo.svg"],}
   }),
 
   new InjectedConnector({ options: { id: "keplr", name: "Keplr" } })

components/UI/avatar.tsx

@@ -1,22 +1,34 @@
-import React, { FunctionComponent } from "react";
+import React, {
+  FunctionComponent,
+  useContext,
+  useEffect,
+  useState,
+} from "react";
 import ProfilIcon from "@components/UI/iconsComponents/icons/profilIcon";
 import theme from "@styles/theme";
-import { useStarkProfile } from "@starknet-react/core";
+import { StarknetIdJsContext } from "@context/StarknetIdJsProvider";
+import { StarkProfile } from "starknetid.js";
 
 type AvatarProps = {
   address: string;
   width?: string;
 };
 
 const Avatar: FunctionComponent<AvatarProps> = ({ address, width = "32" }) => {
-  const { data: profileData } = useStarkProfile({ address });
-
+  const { starknetIdNavigator } = useContext(StarknetIdJsContext);
+  const [profile, setProfile] = useState<StarkProfile | null>(null);
 
+  useEffect(() => {
+    if (!starknetIdNavigator) return;
+    starknetIdNavigator.getProfileData(address).then((profile) => {
+      setProfile(profile);
+    });
+  }, [starknetIdNavigator, address]);
   return (
     <>
-      {profileData?.profilePicture ? (
+      {profile?.profilePicture ? (
         <img
-          src={profileData?.profilePicture}
+          src={profile?.profilePicture}
           width={width}
           height={width}
           className="rounded-full"

components/UI/navbar.tsx

@@ -4,7 +4,7 @@ import Link from "next/link";
 import React, { useState, useEffect, FunctionComponent } from "react";
 import styles from "@styles/components/navbar.module.css";
 import Button from "./button";
-import { useConnect, useAccount, useDisconnect } from "@starknet-react/core";
+import { useConnect, useAccount, useDisconnect, Connector } from "@starknet-react/core";
 import ModalMessage from "./modalMessage";
 import { useDisplayName } from "@hooks/displayName.tsx";
 import { constants } from "starknet";
@@ -54,7 +54,7 @@ const Navbar: FunctionComponent = () => {
     },
   ]);
   const { starknetkitConnectModal } = useStarknetkitConnectModal({
-    connectors: availableConnectors,
+    connectors: availableConnectors as any,
   });
 
   const fetchAndUpdateNotifications = async () => {
@@ -94,7 +94,7 @@ const Navbar: FunctionComponent = () => {
         const connector = availableConnectors.find(
           (item) => item.id === connectordId
         );
-        await connectAsync({ connector });
+        await connectAsync({ connector: connector as Connector });
       }
     };
     connectToStarknet();
@@ -121,7 +121,7 @@ const Navbar: FunctionComponent = () => {
     if (!connector) {
       return;
     }
-    await connectAsync({ connector });
+    await connectAsync({ connector: connector as Connector });
     localStorage.setItem("SQ-connectedWallet", connector.id);
   };
 

components/UI/notifications/notificationDetail.tsx

@@ -13,7 +13,7 @@ import {
 } from "@constants/notifications";
 import { CircularProgress } from "@mui/material";
 import { getCurrentNetwork } from "@utils/network";
-import { useWaitForTransaction } from "@starknet-react/core";
+import { useTransactionReceipt } from "@starknet-react/core";
 import { useNotificationManager } from "@hooks/useNotificationManager";
 
 type NotificationDetailProps = {
@@ -27,7 +27,7 @@ const NotificationDetail: FunctionComponent<NotificationDetailProps> = ({
 }) => {
   const currentNetwork = getCurrentNetwork();
   const { updateNotificationStatus } = useNotificationManager();
-  const { data, error, isLoading, isError } = useWaitForTransaction({
+  const { data, error, isLoading, isError } = useTransactionReceipt({
     hash:
       notification.type === NotificationType.TRANSACTION
         ? notification.data.hash

components/UI/profileCard/profileCard.tsx

@@ -8,7 +8,7 @@ import React, {
 import styles from "@styles/dashboard.module.css";
 import CopyIcon from "@components/UI/iconsComponents/icons/copyIcon";
 import { CDNImage } from "@components/cdn/image";
-import { useStarkProfile } from "@starknet-react/core";
+import { useStarkProfile,type Address } from "@starknet-react/core";
 import { minifyAddress } from "@utils/stringService";
 import trophyIcon from "public/icons/trophy.svg";
 import xpIcon from "public/icons/xpBadge.svg";
@@ -35,7 +35,8 @@ const ProfileCard: FunctionComponent<ProfileCard> = ({
 }) => {
   const [copied, setCopied] = useState(false);
   const sinceDate = useCreationDate(identity);
-  const { data: profileData } = useStarkProfile({ address: identity.owner });
+  const formattedAddress = (identity.owner.startsWith("0x") ? identity.owner : `0x${identity.owner}`) as Address;
+  const { data: profileData } = useStarkProfile({ address: formattedAddress });
   const [userXp, setUserXp] = useState<number>();
 
 

components/discover/claimModal.tsx

@@ -10,7 +10,7 @@ import AppIcon from "./appIcon";
 import TokenIcon from "./tokenIcon";
 import { useNotification } from "@context/NotificationProvider";
 import Loading from "@app/loading";
-import { useAccount, useContractWrite } from "@starknet-react/core";
+import { useAccount,  useSendTransaction } from "@starknet-react/core";
 import { RewardsPerProtocol } from "../../types/backTypes";
 import { getRewards } from "@services/apiService";
 import { gweiToEth } from "@utils/feltService";
@@ -86,7 +86,7 @@ const ClaimModal: FunctionComponent<ClaimModalProps> = ({
   const { address } = useAccount();
   const [rewards, setRewards] = useState<RewardsPerProtocol | null>(null);
   const [calls, setCalls] = useState<Call[]>([]);
-  const { writeAsync: execute } = useContractWrite({
+  const { sendAsync: execute } = useSendTransaction({
     calls: calls,
   });
 

components/leaderboard/RankCard.tsx

@@ -54,7 +54,8 @@ const RankCard: FunctionComponent<RankCardProps> = ({
       </div>
 
       <div className={styles.rank_card_naming}>
-        <Avatar address={name} width="32" />
+
+        <Avatar address={decimalToHex(name)} width="32" />
         <div>{displayName}</div>
       </div>
 

components/leaderboard/RankingsTable.tsx

@@ -146,7 +146,8 @@ const RankingsTable: FunctionComponent<RankingProps> = ({
                       </Typography>
                     </div>
                     <div className={styles.ranking_profile_layout}>
-                      <Avatar address={item.address} width="32" />
+
+                      <Avatar address={decimalToHex(item.address)} width="32" />
                       <Typography type={TEXT_TYPE.BODY_DEFAULT}
                         style={{
                           color:

components/navbar/walletButton.tsx

@@ -44,7 +44,9 @@ const WalletButton: FunctionComponent<WalletButtonProps> = ({
   const [unfocus, setUnfocus] = useState<boolean>(false);
   const network = currentNetwork === "TESTNET" ? "testnet" : "mainnet";
   const isWebWallet =
-    (connector as Connector)?.wallet?.id === "argentWebWallet";
+    (connector as Connector)?.id === "argentWebWallet";
+
+    // console.log(connector?.id,"wallet")
 
   const buttonName = useMemo(
     () =>