implemented privacy icon (#926)

* implemented privacy icon * removed unused code * delete yern lock * remove unused code * set cursor-pointer
lfglabs-dev · Nov 8, 2024 · 706b4b3 · 706b4b3
1 parent ad77f2c
commit 706b4b3
Show file tree

Hide file tree

Showing 4 changed files with 48 additions and 11 deletions.
diff --git a/components/UI/iconsComponents/icons/eyeIcon.tsx b/components/UI/iconsComponents/icons/eyeIcon.tsx
@@ -31,4 +31,24 @@ const EyeIcon: FunctionComponent<IconProps> = ({
   );
 };
 
-export default EyeIcon;
+const EyeIconSlashed: FunctionComponent<IconProps> = ({
+  color = "#E1DCEA",
+  width = 17,
+}) => {
+  return (
+    <svg
+      width={width}
+      height={width}
+      viewBox="0 0 17 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M8.38797 6L10.5013 8.10667V8C10.5013 7.46957 10.2906 6.96086 9.91552 6.58579C9.54044 6.21071 9.03174 6 8.5013 6H8.38797ZM5.5213 6.53333L6.55464 7.56667C6.5213 7.70667 6.5013 7.84667 6.5013 8C6.5013 8.53043 6.71202 9.03914 7.08709 9.41421C7.46216 9.78929 7.97087 10 8.5013 10C8.64797 10 8.79464 9.98 8.93464 9.94667L9.96797 10.98C9.5213 11.2 9.02797 11.3333 8.5013 11.3333C7.61725 11.3333 6.7694 10.9821 6.14428 10.357C5.51916 9.7319 5.16797 8.88406 5.16797 8C5.16797 7.47333 5.3013 6.98 5.5213 6.53333ZM1.83464 2.84667L3.35464 4.36667L3.65464 4.66667C2.55464 5.53333 1.68797 6.66667 1.16797 8C2.3213 10.9267 5.16797 13 8.5013 13C9.53464 13 10.5213 12.8 11.4213 12.44L11.708 12.72L13.6546 14.6667L14.5013 13.82L2.6813 2M8.5013 4.66667C9.38536 4.66667 10.2332 5.01786 10.8583 5.64298C11.4834 6.2681 11.8346 7.11595 11.8346 8C11.8346 8.42667 11.748 8.84 11.5946 9.21333L13.548 11.1667C14.548 10.3333 15.348 9.24 15.8346 8C14.6813 5.07333 11.8346 3 8.5013 3C7.56797 3 6.67464 3.16667 5.83464 3.46667L7.2813 4.9C7.6613 4.75333 8.06797 4.66667 8.5013 4.66667Z"
+        fill={color}
+      />
+    </svg>
+  );
+};
+
+export { EyeIcon, EyeIconSlashed };
diff --git a/components/UI/profileCard/profileCard.tsx b/components/UI/profileCard/profileCard.tsx
@@ -14,7 +14,7 @@ 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 EyeIcon from "../iconsComponents/icons/eyeIcon";
+import { EyeIcon, EyeIconSlashed } from "../iconsComponents/icons/eyeIcon";
 import ProfilIcon from "../iconsComponents/icons/profilIcon";
 import Link from "next/link";
 import SocialMediaActions from "../actions/socialmediaActions";
@@ -23,6 +23,8 @@ import { hexToDecimal } from "@utils/feltService";
 import { TEXT_TYPE } from "@constants/typography";
 import Typography from "../typography/typography";
 import { calculateTotalBalance } from "../../../services/argentPortfolioService";
+import { useHidePortfolio } from "@hooks/useHidePortfolio";
+
 const MAX_RETRIES = 1000;
 const RETRY_DELAY = 2000;
 const controller = new AbortController();
@@ -41,6 +43,7 @@ const ProfileCard: FunctionComponent<ProfileCardProps> = ({
   leaderboardData,
   isOwner,
 }) => {
+  const { hidePortfolio, setHidePortfolio } = useHidePortfolio();
   const [userXp, setUserXp] = useState<number>();
   const [totalBalance, setTotalBalance] = useState<number | null>(null);
   const sinceDate = useCreationDate(identity);
@@ -60,13 +63,13 @@ const ProfileCard: FunctionComponent<ProfileCardProps> = ({
       let attempts = 0;
       while (true) {
         try {
-          const balance = await calculateTotalBalance(formattedAddress, "USD", {signal});
+          const balance = await calculateTotalBalance(formattedAddress, "USD", { signal });
           setTotalBalance(balance);
           return; // Exit if successful
         } catch (err) {
           attempts++;
           console.error(`Attempt ${attempts} - Error fetching total balance:`, err);
-          
+
           if (attempts >= MAX_RETRIES) {
             console.error("Failed to fetch total balance after multiple attempts.");
           } else {
@@ -102,8 +105,7 @@ const ProfileCard: FunctionComponent<ProfileCardProps> = ({
 
   const tweetShareLink: string = useMemo(() => {
     return `${getTweetLink(
-      `Check out${isOwner ? " my " : " "}Starknet Quest Profile at ${
-        window.location.href
+      `Check out${isOwner ? " my " : " "}Starknet Quest Profile at ${window.location.href
       } #Starknet #StarknetID`
     )}`;
   }, [isOwner]);
@@ -140,12 +142,14 @@ const ProfileCard: FunctionComponent<ProfileCardProps> = ({
                 className={`${styles.wallet_amount} font-extrabold`}
               >
                 {totalBalance !== null ? (
-                  `$${totalBalance.toFixed(2)}`
+                  hidePortfolio ? "******" : `$${totalBalance.toFixed(2)}`
                 ) : (
                   <Skeleton variant="text" width={60} height={30} />
                 )}
               </Typography>
-              <EyeIcon />
+              <div onClick={() => setHidePortfolio(!hidePortfolio)} className="cursor-pointer">
+                {hidePortfolio ? <EyeIconSlashed /> : <EyeIcon />}
+              </div>
             </div>
           </div>
           <div className="flex sm:hidden justify-center py-4">

diff --git a/components/dashboard/PortfolioSummary.tsx b/components/dashboard/PortfolioSummary.tsx
@@ -10,23 +10,26 @@ import cursor from '../../public/icons/cursor.png';
 import cursorPointer from '../../public/icons/pointer-cursor.png';
 import ClaimModal from "../discover/claimModal";
 import SuccessModal from "../discover/successModal";
+import { useHidePortfolio } from "@hooks/useHidePortfolio";
+
 Chart.register(ArcElement, DoughnutController, Tooltip);
 
 type PortfolioSummaryProps = {
   title: string,
   data: ChartItem[],
   totalBalance: number,
   isProtocol: boolean,
-  minSlicePercentage?: number
+  minSlicePercentage?: number,
 }
 
 
 const ChartEntry: FunctionComponent<ChartItem> = ({
   color,
   itemLabel,
   itemValue,
-  itemValueSymbol
+  itemValueSymbol,
 }) => {
+  const { hidePortfolio } = useHidePortfolio();
   const value = itemValueSymbol === '%' ? itemValue + itemValueSymbol : itemValueSymbol + itemValue;
   return (
     <div className="flex w-full justify-between my-1">
@@ -36,7 +39,7 @@ const ChartEntry: FunctionComponent<ChartItem> = ({
         </svg>
         <Typography type={TEXT_TYPE.BODY_MIDDLE}>{itemLabel}</Typography>
       </div>
-      <Typography type={TEXT_TYPE.BODY_MIDDLE}>{value}</Typography>
+      <Typography type={TEXT_TYPE.BODY_MIDDLE}>{hidePortfolio ? "******" : value}</Typography>
     </div>
   );
 };

diff --git a/hooks/useHidePortfolio.ts b/hooks/useHidePortfolio.ts
@@ -0,0 +1,10 @@
+import { useAtom } from "jotai";
+import { atomWithStorage } from "jotai/utils";
+
+const hidePortfolioAtom = atomWithStorage<boolean>("hidePortfolio", false);
+
+export function useHidePortfolio() {
+  const [hidePortfolio, setHidePortfolio] = useAtom(hidePortfolioAtom);
+
+  return { hidePortfolio, setHidePortfolio };
+}