Feat/add wallet amount in dollar

components/UI/ShowHideAddressProps.tsx

@@ -0,0 +1,31 @@
+import React, { useState } from 'react';
+import EyeIcon from "@components/UI/iconsComponents/icons/eyeIcon";
+import EyeOffIcon from './iconsComponents/icons/eyeOffIcon';
+
+type  ToggleVisibilityProps = {
+  address: string;
+  className?: string;
+  iconSize?: string;
+  wallet:boolean;
+  hideBalance: boolean;
+  setHideBalance: React.Dispatch<React.SetStateAction<boolean>>;
+}
+
+const  ToggleVisibility: React.FC< ToggleVisibilityProps> = ({ address, className, iconSize = "24",wallet=false, hideBalance, setHideBalance }) => {
+    const toggleBalance = (e: React.MouseEvent<HTMLButtonElement>) => {
+      e.stopPropagation();
+      setHideBalance(!hideBalance);
+    };
+
+  return (
+    <button className={className} onClick={toggleBalance}>
+      {!hideBalance ? (
+        <EyeIcon width={iconSize} color={wallet ? undefined : "#F4FAFF"} />
+      ) : (
+        <EyeOffIcon width={iconSize} color={wallet ? undefined : "#F4FAFF"}/>
+      )}
+    </button>
+  );
+};
+
+export default ToggleVisibility;

components/UI/iconsComponents/icons/eyeIcon.tsx

@@ -0,0 +1,29 @@
+import React, { FunctionComponent } from "react";
+
+const EyeIcon: FunctionComponent<IconProps> = ({ width, color }) => {
+  return (
+    <svg
+      width={width}
+      height={width}
+      cursor="pointer"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M12 5C7 5 2.73 8.11 1 12.5C2.73 16.89 7 20 12 20C17 20 21.27 16.89 23 12.5C21.27 8.11 17 5 12 5Z"
+        fill={color}
+      />
+      <path
+        d="M12 16.5C14.21 16.5 16 14.71 16 12.5C16 10.29 14.21 8.5 12 8.5C9.79 8.5 8 10.29 8 12.5C8 14.71 9.79 16.5 12 16.5Z"
+        fill={color}
+      />
+      <path
+        d="M12 10.5C13.38 10.5 14.5 11.62 14.5 13C14.5 14.38 13.38 15.5 12 15.5C10.62 15.5 9.5 14.38 9.5 13C9.5 11.62 10.62 10.5 12 10.5Z"
+        fill="black"
+      />
+    </svg>
+  );
+};
+
+export default EyeIcon;

components/UI/iconsComponents/icons/eyeOffIcon.tsx

@@ -0,0 +1,45 @@
+import React, { FunctionComponent } from "react";
+
+const EyeOffIcon: FunctionComponent<IconProps> = ({ width, color }) => {
+  return (
+    <svg
+      width={width}
+      height={width}
+      cursor="pointer"
+      viewBox="0 0 24 24"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M14.12 14.12C13.8 14.46 13.39 14.75 12.92 14.92C12.55 15.08 12.15 15.15 11.75 15.11C11.35 15.08 10.96 14.95 10.61 14.72C10.26 14.5 9.96 14.18 9.73 13.8C9.5 13.4 9.37 12.96 9.34 12.5C9.32 12.1 9.39 11.7 9.55 11.33C9.71 10.96 9.95 10.62 10.27 10.34"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M17.94 17.94C16.26 19.36 14.13 20 12 20C7 20 2.73 16.89 1 12.5C2.06 9.93 3.92 7.86 6.29 6.51"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M9.9 5.06C10.67 4.9 11.45 4.84 12.24 4.89C16.24 5.11 20.27 8.24 22 12.5C21.33 14.03 20.38 15.41 19.21 16.53"
+        stroke={color}
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M3 3L21 21"
+        fill="black"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default EyeOffIcon;

components/UI/profileCard/profileCard.tsx

@@ -25,6 +25,7 @@ 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";
+import ToggleVisibility from "@components/UI/ToggleVisibility";
 
 const ProfileCard: FunctionComponent<ProfileCard> = ({
   rankingData,
@@ -37,7 +38,7 @@ const ProfileCard: FunctionComponent<ProfileCard> = ({
   const sinceDate = useCreationDate(identity);
   const { data: profileData } = useStarkProfile({ address: identity.owner });
   const [userXp, setUserXp] = useState<number>();
-
+  const [hideBalance, setHideBalance] = useState(true);
 
   const rankFormatter = useCallback((rank: number) => {
     if (rank > 10000) return "+10k";
@@ -87,20 +88,26 @@ const ProfileCard: FunctionComponent<ProfileCard> = ({
 
           <div className="flex flex-col h-full justify-center">
             <Typography type={TEXT_TYPE.BODY_SMALL} color="secondary" className={styles.accountCreationDate}>
-              {sinceDate ? `${sinceDate}` : ""}
+              {sinceDate ? ${sinceDate} : ""}
             </Typography>
-            <Typography type={TEXT_TYPE.H2} className={`${styles.profile_name} mt-2`}>{identity.domain.domain}</Typography>
+            <Typography type={TEXT_TYPE.H2} className={${styles.profile_name} mt-2}>{identity.domain.domain}</Typography>
+
+           {/* Balance visibility toggle section */}
             <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)}
-              </Typography>
+              <span className={styles.hide}>
+              {hideBalance ? ("*") : ("$ 2,334.34")}
+              </span>
+              <ToggleVisibility
+                      address={identity?.owner ?? ""}
+                      iconSize="24"
+                      className={styles.copyButton}
+                      wallet={false}
+                      hideBalance={hideBalance}
+                      setHideBalance={setHideBalance}
+                    />
             </div>
+              {/* { Balance visibility toggle section close} */}
+
             <div className="flex sm:hidden justify-center py-4">
               <SocialMediaActions identity={identity} />
               <Link href={shareLink} target="_blank" rel="noreferrer">
@@ -180,4 +187,4 @@ const ProfileCard: FunctionComponent<ProfileCard> = ({
   );
 };
 
-export default ProfileCard;
+export default ProfileCard;

docs/CONTRIBUTING.md

@@ -15,6 +15,12 @@ To set up a development environment, please follow these steps:
    cd starknet.quest
    npm i && npm run dev
    ```
+### 
+To avoid any failure to resolve the dependency tree, the --force flag should be added:
+
+```
+npm i --force
+```
 
 ## Issues and feature requests
 
@@ -56,4 +62,4 @@ Please try to create bug reports that are:
 ### Understanding the labels on your Pull Request
 - If your PR is ready for review or merging then add a label which says - **Ready for Review**
 - If your PR is in progress and is not ready for review or merging then add a label which says - **In progress do not merge**
-- If the maintainer has reviewed and has asked for a change then they would attach the label - **Changes Requested**. You can address the comments made in the review and add the label **Ready for review** once done so that they can come back to it later and complete the review and merge 🎉
+- If the maintainer has reviewed and has asked for a change then they would attach the label - **Changes Requested**. You can address the comments made in the review and add the label **Ready for review** once done so that they can come back to it later and complete the review and merge 🎉

styles/dashboard.module.css

@@ -30,6 +30,16 @@
     width: 100%;
 }
 
+.hide{
+    font-family: Sora;
+    font-size: 18px;
+    font-weight: 700;
+    line-height: 24px;
+    letter-spacing: 0.01em;
+    text-align:left;
+    transition: opacity 0.2s ease-in-out; 
+}
+
 .profileCardLoading {
     position: absolute;
     top: 0;

tailwind.config.js

@@ -2,6 +2,12 @@
 module.exports = {
   content: ["./app/**/*.{html,tsx}", "./components/**/*.{html,tsx}"],
   theme: {
+    extend: {
+      fontFamily: {
+        sora: ['Sora', 'sans-serif'],
+      },
+    },  
+
     colors: {
       primary: "#6AFFAF",
       secondary: "#F4FAFF",
@@ -20,6 +26,7 @@ module.exports = {
         300: "#1F1F25",
         900: "#1a202c",
       },
+
       // ... Other colors you want to add
     },
   },