From 7901cb8c85750b1dabf80c21c1711acafa625560 Mon Sep 17 00:00:00 2001 From: Emmanuel Samuel <64587478+emmz3230@users.noreply.github.com> Date: Tue, 29 Oct 2024 23:40:27 +0100 Subject: [PATCH 1/7] Update CONTRIBUTING.md Help with npm i in Readme --- docs/CONTRIBUTING.md | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) 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 🎉 From 9b198c0d96c23f920b5a10261ffd5a45609cc7c3 Mon Sep 17 00:00:00 2001 From: Emmanuel Samuel <64587478+emmz3230@users.noreply.github.com> Date: Wed, 30 Oct 2024 19:03:38 +0100 Subject: [PATCH 2/7] feat: add waalet amount in dollar --- components/UI/ShowHideAddressProps.tsx | 31 +++++++++++++ .../UI/iconsComponents/icons/eyeIcon.tsx | 29 ++++++++++++ .../UI/iconsComponents/icons/eyeOffIcon.tsx | 45 +++++++++++++++++++ components/UI/profileCard/profileCard.tsx | 16 ++++++- 4 files changed, 119 insertions(+), 2 deletions(-) create mode 100644 components/UI/ShowHideAddressProps.tsx create mode 100644 components/UI/iconsComponents/icons/eyeIcon.tsx create mode 100644 components/UI/iconsComponents/icons/eyeOffIcon.tsx diff --git a/components/UI/ShowHideAddressProps.tsx b/components/UI/ShowHideAddressProps.tsx new file mode 100644 index 00000000..249cd9ed --- /dev/null +++ b/components/UI/ShowHideAddressProps.tsx @@ -0,0 +1,31 @@ +import React, { useState } from 'react'; +import EyeIcon from "@components/UI/iconsComponents/icons/eyeIcon"; +import EyeOffIcon from '@components/UI/iconsComponents/icons/EyeOffIcon'; + +interface ShowHideAddressProps { + address: string; + className?: string; + iconSize?: string; + wallet:boolean; + hideBalance: boolean; + setHideBalance: React.Dispatch>; +} + +const ShowHideAddress: React.FC = ({ address, className, iconSize = "24",wallet=false, hideBalance, setHideBalance }) => { + const toggleBalance = (e: React.MouseEvent) => { + e.stopPropagation(); + setHideBalance(!hideBalance); + }; + + return ( + + ); +}; + +export default ShowHideAddress; \ 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..4db0392e 100644 --- a/components/UI/profileCard/profileCard.tsx +++ b/components/UI/profileCard/profileCard.tsx @@ -1,4 +1,4 @@ -import React, { +add walletimport React, { FunctionComponent, useCallback, useEffect, @@ -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 ShowHideAddress from "../ShowHideAddress"; 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"; @@ -101,6 +102,17 @@ const ProfileCard: FunctionComponent = ({ {minifyAddress(addressOrDomain ?? identity?.owner, 8)} +
+ {hideBalance ? ("*") : ("$ 2,334.34")} + +
From 92e370c06133a4b761849b245bd491fbaf4bf555 Mon Sep 17 00:00:00 2001 From: Emmanuel Samuel <64587478+emmz3230@users.noreply.github.com> Date: Fri, 1 Nov 2024 10:42:41 +0100 Subject: [PATCH 3/7] update the balance, add font, and make balance visible by toggle --- components/UI/profileCard/profileCard.tsx | 19 +++++++------------ styles/dashboard.module.css | 10 ++++++++++ tailwind.config.js | 6 ++++++ 3 files changed, 23 insertions(+), 12 deletions(-) diff --git a/components/UI/profileCard/profileCard.tsx b/components/UI/profileCard/profileCard.tsx index 4db0392e..e1f9aa1b 100644 --- a/components/UI/profileCard/profileCard.tsx +++ b/components/UI/profileCard/profileCard.tsx @@ -2,7 +2,7 @@ add walletimport React, { FunctionComponent, useCallback, useEffect, - useMemo, + useMemo, useState, } from "react"; import styles from "@styles/dashboard.module.css"; @@ -91,19 +91,12 @@ const ProfileCard: FunctionComponent = ({ {sinceDate ? `${sinceDate}` : ""} {identity.domain.domain} + + {/* {toggle currency} */}
- - - {minifyAddress(addressOrDomain ?? identity?.owner, 8)} - -
-
+ {hideBalance ? ("*") : ("$ 2,334.34")} + = ({ setHideBalance={setHideBalance} />
+ {/* {toggle currency close} */} +
diff --git a/styles/dashboard.module.css b/styles/dashboard.module.css index 0a89662c..d8c70f74 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; + + } + .profileCardLoading { position: absolute; top: 0; diff --git a/tailwind.config.js b/tailwind.config.js index 82c98e4e..b32839a8 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -20,6 +20,12 @@ module.exports = { 300: "#1F1F25", 900: "#1a202c", }, + extend: { + fontFamily: { + sora: ['Sora', 'sans-serif'], + }, + }, + // ... Other colors you want to add }, }, From 0188284ef3a094f7a150ab662a794c03d836c17d Mon Sep 17 00:00:00 2001 From: Emmanuel Samuel <64587478+emmz3230@users.noreply.github.com> Date: Fri, 1 Nov 2024 12:22:06 +0100 Subject: [PATCH 4/7] make some function and prettier formating --- components/UI/ShowHideAddressProps.tsx | 8 ++++---- components/UI/profileCard/profileCard.tsx | 2 +- styles/dashboard.module.css | 4 ++-- tailwind.config.js | 13 +++++++------ 4 files changed, 14 insertions(+), 13 deletions(-) diff --git a/components/UI/ShowHideAddressProps.tsx b/components/UI/ShowHideAddressProps.tsx index 249cd9ed..66d1faf2 100644 --- a/components/UI/ShowHideAddressProps.tsx +++ b/components/UI/ShowHideAddressProps.tsx @@ -1,8 +1,8 @@ import React, { useState } from 'react'; import EyeIcon from "@components/UI/iconsComponents/icons/eyeIcon"; -import EyeOffIcon from '@components/UI/iconsComponents/icons/EyeOffIcon'; +import EyeOffIcon from './iconsComponents/icons/eyeOffIcon'; -interface ShowHideAddressProps { +type ToggleVisibilityProps = { address: string; className?: string; iconSize?: string; @@ -11,7 +11,7 @@ interface ShowHideAddressProps { setHideBalance: React.Dispatch>; } -const ShowHideAddress: React.FC = ({ address, className, iconSize = "24",wallet=false, hideBalance, setHideBalance }) => { +const ToggleVisibility: React.FC< ToggleVisibilityProps> = ({ address, className, iconSize = "24",wallet=false, hideBalance, setHideBalance }) => { const toggleBalance = (e: React.MouseEvent) => { e.stopPropagation(); setHideBalance(!hideBalance); @@ -28,4 +28,4 @@ const ShowHideAddress: React.FC = ({ address, className, i ); }; -export default ShowHideAddress; \ No newline at end of file +export default ToggleVisibility; \ No newline at end of file diff --git a/components/UI/profileCard/profileCard.tsx b/components/UI/profileCard/profileCard.tsx index e1f9aa1b..92b8c633 100644 --- a/components/UI/profileCard/profileCard.tsx +++ b/components/UI/profileCard/profileCard.tsx @@ -25,7 +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 ShowHideAddress from "../ShowHideAddress"; +import ToggleVisibility from "../ShowHideAddress"; const ProfileCard: FunctionComponent = ({ rankingData, diff --git a/styles/dashboard.module.css b/styles/dashboard.module.css index d8c70f74..f975fbdf 100644 --- a/styles/dashboard.module.css +++ b/styles/dashboard.module.css @@ -37,8 +37,8 @@ line-height: 24px; letter-spacing: 0.01em; text-align:left; - - } + transition: opacity 0.2s ease-in-out; +} .profileCardLoading { position: absolute; diff --git a/tailwind.config.js b/tailwind.config.js index b32839a8..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,12 +26,7 @@ module.exports = { 300: "#1F1F25", 900: "#1a202c", }, - extend: { - fontFamily: { - sora: ['Sora', 'sans-serif'], - }, - }, - + // ... Other colors you want to add }, }, From 9edcf8ed11ea2a86e638490bc7d1f094e65f9a1c Mon Sep 17 00:00:00 2001 From: Emmanuel Samuel <64587478+emmz3230@users.noreply.github.com> Date: Fri, 1 Nov 2024 20:05:41 +0100 Subject: [PATCH 5/7] make changes to the expected file --- components/UI/ShowHideAddressProps.tsx | 2 +- components/UI/profileCard/profileCard.tsx | 18 +++++++++--------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/components/UI/ShowHideAddressProps.tsx b/components/UI/ShowHideAddressProps.tsx index 66d1faf2..a5887937 100644 --- a/components/UI/ShowHideAddressProps.tsx +++ b/components/UI/ShowHideAddressProps.tsx @@ -28,4 +28,4 @@ const ToggleVisibility: React.FC< ToggleVisibilityProps> = ({ address, classNam ); }; -export default ToggleVisibility; \ No newline at end of file +export default ToggleVisibility; \ No newline at end of file diff --git a/components/UI/profileCard/profileCard.tsx b/components/UI/profileCard/profileCard.tsx index 92b8c633..4d693ff9 100644 --- a/components/UI/profileCard/profileCard.tsx +++ b/components/UI/profileCard/profileCard.tsx @@ -1,8 +1,8 @@ -add walletimport React, { +import React, { FunctionComponent, useCallback, useEffect, - useMemo, + useMemo, useState, } from "react"; import styles from "@styles/dashboard.module.css"; @@ -25,7 +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 "../ShowHideAddress"; +import ToggleVisibility from "@components/UI/ShowHideAddressProps"; const ProfileCard: FunctionComponent = ({ rankingData, @@ -88,16 +88,16 @@ const ProfileCard: FunctionComponent = ({
- {sinceDate ? `${sinceDate}` : ""} + {sinceDate ? ${sinceDate} : ""} - {identity.domain.domain} + {identity.domain.domain} - {/* {toggle currency} */} + {/* Balance visibility toggle section */}
{hideBalance ? ("*") : ("$ 2,334.34")} - = ({ setHideBalance={setHideBalance} />
- {/* {toggle currency close} */} + {/* { Balance visibility toggle section close} */}
@@ -187,4 +187,4 @@ const ProfileCard: FunctionComponent = ({ ); }; -export default ProfileCard; +export default ProfileCard; \ No newline at end of file From 7cf953fcb24ac33dbbf3bfec9da4de027588e562 Mon Sep 17 00:00:00 2001 From: Emmanuel Samuel <64587478+emmz3230@users.noreply.github.com> Date: Fri, 1 Nov 2024 20:18:20 +0100 Subject: [PATCH 6/7] import statement updated --- components/UI/profileCard/profileCard.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/UI/profileCard/profileCard.tsx b/components/UI/profileCard/profileCard.tsx index 4d693ff9..ecadf132 100644 --- a/components/UI/profileCard/profileCard.tsx +++ b/components/UI/profileCard/profileCard.tsx @@ -25,7 +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/ShowHideAddressProps"; +import ToggleVisibility from "@components/UI/ToggleVisibility"; const ProfileCard: FunctionComponent = ({ rankingData, From 16c9922d0b9645679f0e17322cb1e9cb0e75e227 Mon Sep 17 00:00:00 2001 From: Emmanuel Samuel <64587478+emmz3230@users.noreply.github.com> Date: Fri, 1 Nov 2024 21:24:11 +0100 Subject: [PATCH 7/7] file renamed and import statement --- components/UI/{ShowHideAddressProps.tsx => ToggleVisibility.tsx} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename components/UI/{ShowHideAddressProps.tsx => ToggleVisibility.tsx} (100%) diff --git a/components/UI/ShowHideAddressProps.tsx b/components/UI/ToggleVisibility.tsx similarity index 100% rename from components/UI/ShowHideAddressProps.tsx rename to components/UI/ToggleVisibility.tsx