Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: Add wallet amount in $ #923

Merged
merged 11 commits into from
Nov 3, 2024
+592 −440
Merged

Fix: Add wallet amount in $ #923

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
10a5d1d
Fix: Add wallet amount in $
SudiptaPaul-31 Nov 2, 2024
b0667eb
fixes requested changes
SudiptaPaul-31 Nov 3, 2024
1a711db
updated packages
SudiptaPaul-31 Nov 3, 2024
3416064
EyeIcon file added
SudiptaPaul-31 Nov 3, 2024
e6f08d6
updated types
SudiptaPaul-31 Nov 3, 2024
a0bcc0c
fixes type issue
SudiptaPaul-31 Nov 3, 2024
df3d2a1
EyeIcon format fix
SudiptaPaul-31 Nov 3, 2024
2beee0f
Fixes url
SudiptaPaul-31 Nov 3, 2024
fd67344
some fixes
SudiptaPaul-31 Nov 3, 2024
04c3df5
removing unused imports
Marchand-Nicolas Nov 3, 2024
d1972da
formatting
Marchand-Nicolas Nov 3, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 12 additions & 0 deletions components/UI/iconsComponents/icons/eyeIcon.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import React from "react";
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here it shouldn't be a jsx file, but a tsx file


const EyeIcon = () => {
return (
<svg xmlns="http://www.w3.org/2000/svg" width="17" height="16" viewBox="0 0 17 16" fill="none">
<path d="M7 8C7 7.60218 7.15804 7.22064 7.43934 6.93934C7.72064 6.65804 8.10218 6.5 8.5 6.5C8.89782 6.5 9.27936 6.65804 9.56066 6.93934C9.84196 7.22064 10 7.60218 10 8C10 8.39782 9.84196 8.77936 9.56066 9.06066C9.27936 9.34196 8.89782 9.5 8.5 9.5C8.10218 9.5 7.72064 9.34196 7.43934 9.06066C7.15804 8.77936 7 8.39782 7 8Z" fill="#E1DCEA"/>
<path fillRule="evenodd" clipRule="evenodd" d="M1.83203 8.00033C1.83203 9.09366 2.11536 9.46099 2.68203 10.1977C3.81336 11.667 5.7107 13.3337 8.4987 13.3337C11.2867 13.3337 13.184 11.667 14.3154 10.1977C14.882 9.46166 15.1654 9.09299 15.1654 8.00033C15.1654 6.90699 14.882 6.53966 14.3154 5.80299C13.184 4.33366 11.2867 2.66699 8.4987 2.66699C5.7107 2.66699 3.81336 4.33366 2.68203 5.80299C2.11536 6.54033 1.83203 6.90766 1.83203 8.00033ZM8.4987 5.50033C7.83566 5.50033 7.19977 5.76372 6.73093 6.23256C6.26209 6.7014 5.9987 7.33728 5.9987 8.00033C5.9987 8.66337 6.26209 9.29925 6.73093 9.76809C7.19977 10.2369 7.83566 10.5003 8.4987 10.5003C9.16174 10.5003 9.79762 10.2369 10.2665 9.76809C10.7353 9.29925 10.9987 8.66337 10.9987 8.00033C10.9987 7.33728 10.7353 6.7014 10.2665 6.23256C9.79762 5.76372 9.16174 5.50033 8.4987 5.50033Z" fill="#E1DCEA"/>
</svg>
);
};

export default EyeIcon;
146 changes: 64 additions & 82 deletions components/UI/profileCard/profileCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,37 +8,42 @@ 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,type Address } 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";
import useCreationDate from "@hooks/useCreationDate";
import shareSrc from "public/icons/share.svg";
import theme from "@styles/theme";
import { Tooltip } from "@mui/material";
import CopyAddress from "@components/UI/CopyAddress";
import EyeIcon from "../iconsComponents/icons/eyeIcon";
import ProfilIcon from "../iconsComponents/icons/profilIcon";
import Link from "next/link";
import SocialMediaActions from "../actions/socialmediaActions";
import { getTweetLink, writeToClipboard } from "@utils/browserService";
import { getTweetLink } from "@utils/browserService";
import { hexToDecimal } from "@utils/feltService";
import { Url } from "next/dist/shared/lib/router/router";
import { TEXT_TYPE } from "@constants/typography";
import Typography from "../typography/typography";

const ProfileCard: FunctionComponent<ProfileCard> = ({
type ProfileCardProps = {
rankingData: RankingData;
identity: Identity;
leaderboardData: leaderboardData;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Here the type should be LeaderboardToppersData

addressOrDomain: string;
isOwner: boolean;
};
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Define missing types and follow naming conventions.

The type definition uses undefined types and inconsistent naming:

  • RankingData, Identity, and leaderboardData types are not defined
  • leaderboardData should follow PascalCase naming convention like other types

Define the missing types and fix naming:

+type RankingData = {
+  first_elt_position: number;
+  ranking: Array<{
+    address: string;
+    xp: number;
+  }>;
+};

+type Identity = {
+  owner: string;
+  domain?: {
+    domain: string;
+  };
+};

+type LeaderboardData = {
+  total_users: number;
+  position: number;
+};

 type ProfileCardProps = {
   rankingData: RankingData;
   identity: Identity;
-  leaderboardData: leaderboardData;
+  leaderboardData: LeaderboardData;
   addressOrDomain: string;
   isOwner: boolean;
 };

Committable suggestion skipped: line range outside the PR's diff.


const ProfileCard: FunctionComponent<ProfileCardProps> = ({
rankingData,
identity,
leaderboardData,
addressOrDomain,
isOwner,
}) => {
const [copied, setCopied] = useState(false);
const [userXp, setUserXp] = useState<number>();
const [shareLink, setShareLink] = useState<string>("");
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

⚠️ Potential issue

Fix shareLink redeclaration

The shareLink variable is declared twice - once as state and once as a memoized value. This is causing a type error.

-  const [shareLink, setShareLink] = useState<string>("");
+  const [tweetShareLink, setTweetShareLink] = useState<string>("");

-  const shareLink: Url = useMemo(() => {
+  const tweetShareLink: string = useMemo(() => {
     return `${getTweetLink(
       `Check out${isOwner ? " my " : " "}Starknet Quest Profile at ${window.location.href} #Starknet #StarknetID`
     )}`;
   }, [isOwner]);

Also applies to: 75-79

const sinceDate = useCreationDate(identity);
const formattedAddress = (identity.owner.startsWith("0x") ? identity.owner : `0x${identity.owner}`) as Address;
const { data: profileData } = useStarkProfile({ address: formattedAddress });
const [userXp, setUserXp] = useState<number>();


const rankFormatter = useCallback((rank: number) => {
if (rank > 10000) return "+10k";
Expand All @@ -54,7 +59,7 @@ const ProfileCard: FunctionComponent<ProfileCard> = ({
leaderboardData &&
leaderboardData?.total_users > 0
) {
const user = rankingData.ranking.find(
const user = rankingData?.ranking?.find(
(user) => user.address === hexToDecimal(identity.owner)
);
if (user) {
Expand All @@ -65,116 +70,93 @@ const ProfileCard: FunctionComponent<ProfileCard> = ({

useEffect(() => {
computeData();
}, [rankingData, identity, leaderboardData]);
}, [computeData]);

const shareLink: Url = useMemo(() => {
SudiptaPaul-31 marked this conversation as resolved.
Show resolved Hide resolved
return `${getTweetLink(
`Check out${isOwner ? " my " : " "}Starknet Quest Profile at ${
window.location.href
} #Starknet #StarknetID`
)}`;
}, []);
useEffect(() => {
if (typeof window !== "undefined") {
setShareLink(
getTweetLink(
`Check out${isOwner ? " my " : " "}Starknet Quest Profile at ${window.location.href} #Starknet #StarknetID`
)
);
}
}, [isOwner]);
Marchand-Nicolas marked this conversation as resolved.
Show resolved Hide resolved

return (
<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" />
<img src={profileData.profilePicture} className="rounded-full" />
Marchand-Nicolas marked this conversation as resolved.
Show resolved Hide resolved
) : (
<ProfilIcon width="120" color={theme.palette.secondary.main} />
)}
</div>

<div className="flex flex-col h-full justify-center">
<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}</Typography>
<div className={styles.address_div}>
<CopyAddress
address={identity?.owner ?? ""}
iconSize="24"
className={styles.copyButton}
wallet={false}
/>
<Typography type={TEXT_TYPE.BODY_SMALL} className={styles.addressText} color="secondary">
{minifyAddress(addressOrDomain ?? identity?.owner, 8)}
<div className="flex flex-col h-full justify-center">
<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`}>
$2,338.34
</Typography>
<EyeIcon />
</div>
<div className="flex sm:hidden justify-center py-4">
<SocialMediaActions identity={identity} />
</div>
Marchand-Nicolas marked this conversation as resolved.
Show resolved Hide resolved
<div className="flex sm:hidden justify-center py-4">
<SocialMediaActions identity={identity} />
{shareLink && (
<Link href={shareLink} target="_blank" rel="noreferrer">
<div className={styles.right_share_button}>
<CDNImage
src={shareSrc}
width={20}
height={20}
alt={"share-icon"}
/>
<CDNImage src={shareSrc} width={20} height={20} alt="share-icon" />
<Typography type={TEXT_TYPE.BODY_DEFAULT}>Share</Typography>
</div>
</Link>
</div>
)}
Marchand-Nicolas marked this conversation as resolved.
Show resolved Hide resolved
</div>
</div>
<div className={styles.right}>
<div className="hidden sm:flex">
<div className={styles.right_top}>
<div className={styles.right_socials}>
<SocialMediaActions identity={identity} />
</div>
<div className={styles.right}>
<div className="hidden sm:flex">
<div className={styles.right_top}>
<div className={styles.right_socials}>
<SocialMediaActions identity={identity} />
{shareLink && (
<Link href={shareLink} target="_blank" rel="noreferrer">
<div className={styles.right_share_button}>
<CDNImage
src={shareSrc}
width={20}
height={20}
alt={"share-icon"}
/>
<CDNImage src={shareSrc} width={20} height={20} alt="share-icon" />
<Typography type={TEXT_TYPE.BODY_DEFAULT}>Share</Typography>
</div>
</Link>
</div>
)}
</div>
</div>
</div>

<div className={styles.right_bottom}>
{leaderboardData && leaderboardData?.total_users > 0 ? (
{leaderboardData && leaderboardData.total_users > 0 && (
<div className={styles.right_bottom_content}>
<CDNImage
src={trophyIcon}
priority
width={25}
height={25}
alt="trophy icon"
/>
<Typography
type={TEXT_TYPE.BODY_SMALL}
className={styles.statsText}
>
{leaderboardData?.position
? rankFormatter(leaderboardData?.position)
<CDNImage src={trophyIcon} priority width={25} height={25} alt="trophy icon" />
<Typography type={TEXT_TYPE.BODY_SMALL} className={styles.statsText}>
{leaderboardData.position
? rankFormatter(leaderboardData.position)
: "NA"}
</Typography>
</div>
) : null}
{userXp !== undefined ? (
)}
{userXp !== undefined && (
<div className={styles.right_bottom_content}>
<CDNImage
src={xpIcon}
priority
width={30}
height={30}
alt="xp badge"
/>
<Typography
type={TEXT_TYPE.BODY_SMALL}
className={styles.statsText}
>
<CDNImage src={xpIcon} priority width={30} height={30} alt="xp badge" />
<Typography type={TEXT_TYPE.BODY_SMALL} className={styles.statsText}>
{userXp ?? "0"}
</Typography>
</div>
) : null}
)}
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,4 +77,4 @@
"ts-jest": "^29.0.3",
"typescript": "^5.3.2"
}
}
}
12 changes: 12 additions & 0 deletions styles/dashboard.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -223,6 +223,18 @@
font-weight: 400;
line-height: 16px;
}
.wallet_amount {
color: var(--Secondary-600, #F4FAFF);
text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);

/* Body/middle/bold */
font-family: Sora;
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 24px; /* 133.333% */
letter-spacing: 0.18px;
}

.addressText,
.accountCreationDate {
Expand Down