fix: display same Avatar from WalletButton in dashboard page (#939)

* fix: display same Avatar from WalletButton in dashboard page * fix: delete unused useAccount import * fix: simplify conditional for formattedAddress
lfglabs-dev · Nov 10, 2024 · 0fe9402 · 0fe9402
1 parent 706b4b3
commit 0fe9402
Show file tree

Hide file tree

Showing 3 changed files with 2,881 additions and 2,335 deletions.
diff --git a/components/UI/avatar.tsx b/components/UI/avatar.tsx
@@ -32,6 +32,7 @@ const Avatar: FunctionComponent<AvatarProps> = ({ address, width = "32" }) => {
           width={width}
           height={width}
           className="rounded-full"
+          alt={`${profile?.name?.length !== 0 ? profile?.name : "User"}'s avatar`}
         />
       ) : (
         <ProfilIcon width={width} color={theme.palette.secondary.main} />

diff --git a/components/UI/profileCard/profileCard.tsx b/components/UI/profileCard/profileCard.tsx
@@ -7,7 +7,7 @@ import React, {
 } from "react";
 import styles from "@styles/dashboard.module.css";
 import { CDNImage } from "@components/cdn/image";
-import { useStarkProfile, type Address } from "@starknet-react/core";
+import { type Address } from "@starknet-react/core";
 import Skeleton from "@mui/material/Skeleton";
 import trophyIcon from "public/icons/trophy.svg";
 import xpIcon from "public/icons/xpBadge.svg";
@@ -23,6 +23,7 @@ import { hexToDecimal } from "@utils/feltService";
 import { TEXT_TYPE } from "@constants/typography";
 import Typography from "../typography/typography";
 import { calculateTotalBalance } from "../../../services/argentPortfolioService";
+import Avatar from "../avatar";
 import { useHidePortfolio } from "@hooks/useHidePortfolio";
 
 const MAX_RETRIES = 1000;
@@ -50,7 +51,6 @@ const ProfileCard: FunctionComponent<ProfileCardProps> = ({
   const formattedAddress = (
     identity.owner.startsWith("0x") ? identity.owner : `0x${identity.owner}`
   ) as Address;
-  const { data: profileData } = useStarkProfile({ address: formattedAddress });
 
   const rankFormatter = useCallback((rank: number) => {
     if (rank > 10000) return "+10k";
@@ -114,8 +114,8 @@ const ProfileCard: FunctionComponent<ProfileCardProps> = ({
     <div className={styles.dashboard_profile_card}>
       <div className={styles.left}>
         <div className={styles.profile_picture_div}>
-          {profileData?.profilePicture ? (
-            <img src={profileData.profilePicture} className="rounded-full" />
+          { formattedAddress?.length !== 0 ? ( // show the avatar of the address in the URL
+            <Avatar width="120" address={formattedAddress} />
           ) : (
             <ProfilIcon width="120" color={theme.palette.secondary.main} />
           )}