Update profileCard.tsx #942
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -25,6 +25,7 @@ import Typography from "../typography/typography"; | |
| import { calculateTotalBalance } from "../../../services/argentPortfolioService"; | ||
| import Avatar from "../avatar"; | ||
| import { useHidePortfolio } from "@hooks/useHidePortfolio"; | ||
| import Loading from "@components/skeletons/loading"; | ||
|
|
||
| const MAX_RETRIES = 1000; | ||
| const RETRY_DELAY = 2000; | ||
|
|
@@ -36,13 +37,15 @@ type ProfileCardProps = { | |
| identity: Identity; | ||
| leaderboardData: LeaderboardToppersData; | ||
| isOwner: boolean; | ||
| isLoading:boolean; | ||
|
There was a problem hiding this comment. Add missing isLoading prop to component parameters The Apply this fix: const ProfileCard: FunctionComponent<ProfileCardProps> = ({
rankingData,
identity,
leaderboardData,
isOwner,
+ isLoading,
}) => {Also applies to: 44-48 There was a problem hiding this comment. You add is Loading to the component props but you don't add it where the component is used + you unforce it. Please test the stuff you send before a PR There was a problem hiding this comment. @fricoben, thank you for pointing this out. You're absolutely correct; the For example: <ProfileCard
rankingData={rankingData}
identity={identity}
leaderboardData={leaderboardData}
isOwner={isOwner}
isLoading={isLoading}
/>Additionally, it's important to thoroughly test your changes before submitting a PR to avoid such oversights. |
||
| }; | ||
|
|
||
| const ProfileCard: FunctionComponent<ProfileCardProps> = ({ | ||
| rankingData, | ||
| identity, | ||
| leaderboardData, | ||
| isOwner, | ||
| isLoading, | ||
| }) => { | ||
| const { hidePortfolio, setHidePortfolio } = useHidePortfolio(); | ||
| const [userXp, setUserXp] = useState<number>(); | ||
|
|
@@ -114,62 +117,79 @@ const ProfileCard: FunctionComponent<ProfileCardProps> = ({ | |
| <div className={styles.dashboard_profile_card}> | ||
| <div className={styles.left}> | ||
| <div className={styles.profile_picture_div}> | ||
| {formattedAddress?.length !== 0 ? ( | ||
| <Avatar width="120" address={formattedAddress} /> | ||
| ) : ( | ||
| <ProfilIcon width="120" color={theme.palette.secondary.main} /> | ||
| )} | ||
| </div> | ||
| <div className="flex flex-col h-full justify-center"> | ||
| {isLoading ? ( | ||
| <> | ||
| {/* Updated the Specific Profile Card Component with skeleton Loading component */} | ||
| <Skeleton variant="text" width="80%" height={20} /> | ||
| <Skeleton variant="text" width="60%" height={30} className="mt-2" /> | ||
| <div className={styles.address_div}> | ||
| <div className="flex items-center gap-2"> | ||
| <Skeleton variant="rectangular" width={100} height={30} /> | ||
| <EyeIcon /> | ||
| </div> | ||
| </div> | ||
| </> | ||
| ) : ( | ||
| <> | ||
| <Typography | ||
| type={TEXT_TYPE.BODY_SMALL} | ||
| color="secondary" | ||
| className={styles.accountCreationDate} | ||
| > | ||
| {sinceDate ? `${sinceDate}` : ""} | ||
| </Typography> | ||
| <Typography | ||
| type={TEXT_TYPE.H2} | ||
| className={`${styles.profile_name} mt-2`} | ||
| > | ||
| {identity.domain?.domain || "Unknown Domain"} | ||
| </Typography> | ||
| <div className={styles.address_div}> | ||
| <div className="flex items-center gap-2"> | ||
| <Typography | ||
| type={TEXT_TYPE.BODY_SMALL} | ||
| className={`${styles.wallet_amount} font-extrabold`} | ||
| > | ||
| {totalBalance !== null ? ( | ||
| hidePortfolio ? "******" : `$${totalBalance.toFixed(2)}` | ||
| ) : ( | ||
| <Skeleton variant="text" width={60} height={30} /> | ||
| )} | ||
| </Typography> | ||
| <div onClick={() => setHidePortfolio(!hidePortfolio)} className="cursor-pointer"> | ||
| {hidePortfolio ? <EyeIconSlashed /> : <EyeIcon />} | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </> | ||
| )} | ||
| </div> | ||
|
|
||
| <div className="flex sm:hidden justify-center py-4"> | ||
| <SocialMediaActions identity={identity} /> | ||
| {tweetShareLink && ( | ||
| <Link href={tweetShareLink} target="_blank" rel="noreferrer"> | ||
| <div className={styles.right_share_button}> | ||
| <CDNImage | ||
| src={shareSrc} | ||
| width={20} | ||
| height={20} | ||
| alt="share-icon" | ||
| /> | ||
| <Typography type={TEXT_TYPE.BODY_DEFAULT}>Share</Typography> | ||
| </div> | ||
| </Link> | ||
| )} | ||
| </div> | ||
| </div> | ||
|
|
||
| <div className={styles.right}> | ||
| <div className="hidden sm:flex"> | ||
| <div className={styles.right_top}> | ||
|
|
@@ -191,7 +211,7 @@ const ProfileCard: FunctionComponent<ProfileCardProps> = ({ | |
| </div> | ||
| </div> | ||
| </div> | ||
| <div className={styles.right_bottom}> | ||
| {leaderboardData && leaderboardData.total_users > 0 && ( | ||
| <div className={styles.right_bottom_content}> | ||
|
|
@@ -232,6 +252,7 @@ const ProfileCard: FunctionComponent<ProfileCardProps> = ({ | |
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| ); | ||
| }; | ||
|
|
||
|
|
||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
useless space + unprecise naming, what is loading here ? I would go for
isProfileCardLoading