diff --git a/components/UI/ToggleVisibility.tsx b/components/UI/ToggleVisibility.tsx new file mode 100644 index 00000000..a5887937 --- /dev/null +++ b/components/UI/ToggleVisibility.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>; +} + +const ToggleVisibility: React.FC< ToggleVisibilityProps> = ({ address, className, iconSize = "24",wallet=false, hideBalance, setHideBalance }) => { + const toggleBalance = (e: React.MouseEvent) => { + e.stopPropagation(); + setHideBalance(!hideBalance); + }; + + return ( + + ); +}; + +export default ToggleVisibility; \ No newline at end of file diff --git a/components/UI/iconsComponents/icons/eyeIcon.tsx b/components/UI/iconsComponents/icons/eyeIcon.tsx new file mode 100644 index 00000000..934db81e --- /dev/null +++ b/components/UI/iconsComponents/icons/eyeIcon.tsx @@ -0,0 +1,29 @@ +import React, { FunctionComponent } from "react"; + +const EyeIcon: FunctionComponent = ({ width, color }) => { + return ( + + + + + + ); +}; + +export default EyeIcon; \ No newline at end of file diff --git a/components/UI/iconsComponents/icons/eyeOffIcon.tsx b/components/UI/iconsComponents/icons/eyeOffIcon.tsx new file mode 100644 index 00000000..2c0ba41b --- /dev/null +++ b/components/UI/iconsComponents/icons/eyeOffIcon.tsx @@ -0,0 +1,45 @@ +import React, { FunctionComponent } from "react"; + +const EyeOffIcon: FunctionComponent = ({ width, color }) => { + return ( + + + + + + + ); +}; + +export default EyeOffIcon; \ No newline at end of file diff --git a/components/UI/profileCard/profileCard.tsx b/components/UI/profileCard/profileCard.tsx index 02fefeb6..ecadf132 100644 --- a/components/UI/profileCard/profileCard.tsx +++ b/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 = ({ rankingData, @@ -37,7 +38,7 @@ const ProfileCard: FunctionComponent = ({ const sinceDate = useCreationDate(identity); const { data: profileData } = useStarkProfile({ address: identity.owner }); const [userXp, setUserXp] = useState(); - + const [hideBalance, setHideBalance] = useState(true); const rankFormatter = useCallback((rank: number) => { if (rank > 10000) return "+10k"; @@ -87,20 +88,26 @@ const ProfileCard: FunctionComponent = ({
- {sinceDate ? `${sinceDate}` : ""} + {sinceDate ? ${sinceDate} : ""} - {identity.domain.domain} + {identity.domain.domain} + + {/* Balance visibility toggle section */}
- - - {minifyAddress(addressOrDomain ?? identity?.owner, 8)} - + + {hideBalance ? ("*") : ("$ 2,334.34")} + +
+ {/* { Balance visibility toggle section close} */} +
@@ -180,4 +187,4 @@ const ProfileCard: FunctionComponent = ({ ); }; -export default ProfileCard; +export default ProfileCard; \ No newline at end of file diff --git a/docs/CONTRIBUTING.md b/docs/CONTRIBUTING.md index e8507255..1e56ff71 100644 --- a/docs/CONTRIBUTING.md +++ b/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 🎉 \ No newline at end of file +- 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 🎉 diff --git a/styles/dashboard.module.css b/styles/dashboard.module.css index 0a89662c..f975fbdf 100644 --- a/styles/dashboard.module.css +++ b/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; diff --git a/tailwind.config.js b/tailwind.config.js index 82c98e4e..c4fd6080 100644 --- a/tailwind.config.js +++ b/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 }, },