Add privacy icon

[Kevils]

Figma : https://www.figma.com/design/fh0OAvj4AS08kHoSxu3DkE/%F0%9F%9A%80-Starknet-Quest?node-id=5992-2550&t=dvRbR5qAwsX8KioR-1

By clicking on the privacy icon, all numbers become hidden.

[martinvibes]

hello @Kevils please I would love to work on this issue

[lauchaves]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hey! I'm Lau Chaves, Im part of Dojo Coding Costa Rica! I would like to contribute to this issue!

I have over 5 years of experience working with JavaScript, React, and TypeScript, ruby...

My primary role has been as a front-end developer, and I have a keen eye for detail and a strong focus on mobile-first approaches. I ensure the quality of my work through rigorous self- QA processes. I have a solid knowledge of CSS, Sass, and styled-components.

How I plan on tackling this issue

I would add the privacy icon and I would do a toggle function to use it on the icon so we can show/hide the amount with **** so it looks as the design provided!

If needed I can make this a reusable component something like

Also if needed we can receive it as a string already in $ format

<DynamicAmount amount={"$10.500.00"}

[martinvibes]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

hello @ i'm an experienced frontend developer and a blockchain developer i would love to work on this issue
Pleasee kindly assign :)

How I plan on tackling this issue

please kindly assign

[diegoTech14]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello @Kevils

I'm a software engineer from Costa Rica and a proud member of Dojo Coding. I've contributed to projects like Go Stark Me, Coffiblocks, and DipDup, and I have experience with technologies such as JavaScript, Node.js, CSS, React, C#, and Cairo. I would love the opportunity to help with this issue and contribute to your project.

How I plan on tackling this issue

For this issue I will:

1. I will add the privacy icon to show and hide the (*) characters
2. I will ensure that the UI aligns with the Figma design
3. Tests: I will make some manual tests to ensure that everything is okay clicking the privacy icon

Looking forward to your feedback!

Best regards,

Diego Duarte Fernández.

[joeperpetua]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

3+ years full stack dev

[zleypner]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi! I’m Anwar a Software Developer with +3 years of experience, and I would love
continue making contribution to this project and contribute to the project's success.
I'm also a member of the Dojo Coding community CR.

How I plan on tackling this issue

I would create the privacy icon that triggers a toggle function to show or hide the amounts, so it shows as **** when hidden. Based on the design requested.

[DanielEmmanuel1]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Good day, I’m Deon, I’m a Full stack web3 developer with a strong passion for creating intuitive and user-friendly interfaces.

I have experience in modern JavaScript frameworks and a keen eye for design, which allows me to effectively translate design concepts into functional web applications. I’m dedicated to enhancing user experiences and continuously learning about best practices in frontend development.

How I plan on tackling this issue

• Review Figma Design: Open the provided Figma link and examine the privacy icon design and its intended functionality.

• mplement Icon in UI: Integrate the privacy icon into the existing user interface. Ensure that it aligns with the overall design and follows any relevant design guidelines.

• Add Click Functionality: Implement the click event for the privacy icon. When clicked, it should toggle the visibility of all numbers within the specified context (e.g., hiding or revealing them).

• State Management: Ensure that the state of the numbers (visible or hidden) is managed effectively, possibly using local component state or a context provider, depending on the application's architecture.

• Testing: Conduct thorough testing to ensure that the icon behaves as expected. Verify that clicking the icon correctly hides and shows the numbers and that there are no unintended side effects.

• Accessibility Considerations: Ensure that the icon is accessible, providing appropriate alt text and keyboard navigation support.

• Documentation: Update any relevant documentation or comments in the codebase to describe the new functionality and how to use the privacy icon.

• Create a Pull Request: Once the implementation is complete and tested, submit a pull request detailing the changes and their purpose.

[Benjtalkshow]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a Full Stack Developer specializing in Next.js, TypeScript, Node.js, Cairo and Rust . With over 31 contributions across projects in the OnlyDust ecosystem, I’ve developed strong proficiency in delivering high-quality solutions and resolving complex issues within tight deadlines. My experience spans frontend, backend, smart contracts, and the optimization and maintenance of scalable codebases.

How I plan on tackling this issue

I will add a privacy icon to the UI, allowing users to toggle the visibility of sensitive information, such as numbers. When clicked, the privacy icon will hide all numbers on the page, replacing them with placeholders or a hidden symbol. I will ensure the functionality works across different sections of the app, and the numbers will remain hidden until the user clicks the icon again to reveal them. The implementation will be smooth and intuitive, enhancing user privacy control.

[SudiptaPaul-31]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello! I’m Sudipta Paul, and I currently have 1.5 years of experience in the field of blockchain and web development. I'm eager to contribute to the implementation of the privacy icon as outlined in this issue.

How I plan on tackling this issue

My approach to solve this issue:
I will start by analyzing the Figma design to understand the specifications and styling of the privacy icon.
will add the privacy icon to the relevant component, ensuring it matches the design provided in Figma.
The code snippet may look like this to integrate the solution
const NumbersDisplay = ({ numbers }) => {
const [isHidden, setIsHidden] = useState(false);

const toggleVisibility = () => {
    setIsHidden(!isHidden);
};

return (
    <div>
        <PrivacyIcon onClick={toggleVisibility} />
        <ul>
            {numbers.map((number, index) => (
                <li key={index}>
                    {isHidden ? '••••' : number}
                </li>
            ))}
        </ul>
    </div>
);

};
The above code includes a PrivacyIcon component that, when clicked, toggles the visibility of the numbers. It will display •••• when hidden and the actual numbers when visible.
After adding the icon and functionalityI will test to ensure that clicking the icon successfully hides and reveals the numbers as intended.

[dahtee]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I'm a frontend and smart contract developer and I'd be happy to contribute to this project as this will
be my first time contributing to this project. I'm good with React, nextJS, tailwind, typescript and javascript for frontend.

How I plan on tackling this issue

Here is my approach to tackle this issue:

1. I will look at the code base to understand and also identify where I'm expected to implement the logic.
2. I will add a state to track whether the numbers should be visible or hidden using React’s
   useState to toggle between showing and hiding numbers.
3. I will ensure the logic is working as expected.

ETA: 24hrs.

[ridwanalaps]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a frontend developer with 2 years experience building applications, this is my first contribution to starknet quest

How I plan on tackling this issue

I would add the icon and implement toggle for it to hide the numbers and display a password pattern

[ryzen-xp]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a Full Stack Blockchain developer skilled in Cairo, Solidity, Rust, and Web2 technologies. I’ve contributed to projects like Worldcoin-Bridge-Linea and ARK Project NFTs Bridge.

How I plan on tackling this issue

I see this figma : https://www.figma.com/design/fh0OAvj4AS08kHoSxu3DkE/%F0%9F%9A%80-Starknet-Quest?node-id=5992-2550&t=dvRbR5qAwsX8KioR-1
Here is my approch for this ----->
[1]=>Add a click event to the privacy icon to toggle number visibility.
[2]=>Replace numbers with placeholders (e.g., ****) when hidden.
[3]=>Use a state variable to track and persist the visibility status.
[4]=>Test and integrate the feature with the existing design.
[5]=>Sir please assign me

[Villarley]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am Santiago Villarreal Arley, a passionate software developer with a growing interest in Web3 technologies. Over the past few months, I've had the opportunity to work on innovative projects, such as BuildMyEvent, an open-source initiative that leverages blockchain and decentralized systems. I thrive on problem-solving and enjoy the challenge of integrating cutting-edge solutions into real-world applications. My goal is to contribute to the Web3 ecosystem by staying ahead of emerging trends, learning continuously, and developing projects that push the boundaries of decentralized technologies.

How I plan on tackling this issue

To tackle the "Portfolio by protocol used" section, here’s my proposed solution:

Donut Chart Implementation:

I would utilize a charting library like Chart.js or Recharts to create a clean and interactive donut chart. The chart would dynamically display the portfolio distribution based on protocols used.
The data could be fetched via an API or passed as props, ensuring each protocol is visually represented as a segment of the donut chart with its corresponding percentage of use.
"Claim your reward" Button:

The button will be positioned below the chart, styled according to the Figma design.
On click, it will trigger an action to claim the user’s reward, which can involve calling an API or handling any necessary authentication flow.
I’ll make sure to include visual feedback (loading indicator, success confirmation) to provide a smooth user experience.
Design & Layout:

I’ll strictly follow the Figma design to match the overall layout and feel of the project, ensuring responsiveness and consistency.
Using Tailwind CSS (or the project's current styling approach), I’ll maintain a clean, scalable layout.
Testing and Feedback:

I would ensure the chart is responsive and that the "Claim your reward" button is functional and user-friendly.
Proper integration with the backend will be key for a seamless reward claim process.
I look forward to contributing to this feature and bringing it to life as part of the Starknet.quest project!

[aniruddhaaps]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a python dev . A new-comer here, willing and ready to contribute to solve the issue.

[LazarusAA]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I'm Alvaro Lazarus a passionate Blockchain developer and a new member of Dojo Coding with experience with Python, TypeScript, Solidity and Cairo. Id love to contribute to this project and I think this issue could be a fun one to tackle.

How I plan on tackling this issue

• Implement a click event on the privacy icon to toggle between showing and hiding the numbers.
• When numbers are hidden, display placeholders (****) instead of the actual values.
• Use a state variable to keep track of whether the numbers are visible or hidden.
• Test the feature thoroughly and integrate it seamlessly into the existing design.

ETA: 24 hrs

[PedroCo3lho]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I have experience working on projects where I implemented new designs and integrated them with the backend. I am familiar with frameworks such as React and Next.js, and proficient in JavaScript and TypeScript.

How I plan on tackling this issue

I would first review the current implementation to understand how can I implement the hiddenAmount function. Then, I would ensure that when the icon is clicked, the displayed values are properly hidden by updating the state on the frontend. This would involve modifying the UI state and ensuring the data is masked.

[mexes20]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello, can I be assigned to work on this issue as a first time contributor?

I'm a software developer with over 6 years experience

ETA: One day

[Marchand-Nicolas]

I will assign someone after the following issues are merged:

• Add "Portfolio by protocol used" section with a donut chart and a "Claim your reward" button #880
• Add "Portfolio by asset type" section with a donut chart #879
• Add wallet amount in $ #877

[NueloSE]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

i am a frontend developer with experience in developing frontend user responsive web pages.

How I plan on tackling this issue

looking at the figma design all i need to do is import the icon from material ui and implement the required desired to hide user password

[mimisavage]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi, I’m Mimi Sav, a frontend and blockchain developer. This is my first time contributing to this repository, and I'm excited about the opportunity to collaborate.

How I plan on tackling this issue

To tackle this task, I will first review the Figma design to understand the layout and functionality required for the privacy icon feature. I will implement an event listener for the privacy icon that, when clicked, toggles the visibility of all numerical elements on the page. This will involve adding a CSS class to hide the numbers, ensuring that the user experience remains intuitive. I will also test the functionality to confirm that clicking the icon successfully hides and reveals the numbers as intended. Finally, I will ensure the implementation is seamless across different devices and browsers for consistency.

[KevinLatino]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged
I have a deep passion for Web3 and I am currently working as a frontend developer intern at a Web2 company, focusing on Next.js. Additionally, I am an active member of Dojo Coding, a prominent Web3 community in LATAM, which has given me great exposure to decentralized technologies.

Recently, I have been working on a project for Base LATAM's Buildathon, where I am gaining hands-on experience in building decentralized applications. I am eager to continue growing and contributing, and see this as a fantastic opportunity to further develop my skills and make a significant impact.

This is my first OD Hack, so I will appreciate it if you give me the chance to contribute to this amazing project.

Some frontend projects that i have:
https://buildmyevent.xyz/
https://peritazgo-website.vercel.app/

How I plan on tackling this issue @Kevils @Marchand-Nicolas will have it in a few hours! please give me the opportunity

[Kaminar-i]

Can I be given the opportunity to work on this?

[jaiminRaiyani]

May I be assigned to this?

[blessingbytes]

I'd like to handle this task.

[ShantelPeters]

I'd love to work on this!I will identify all numeric elements in the relevant component based on the Figma design. Using React's state management, I will create a state variable (isPrivate) to toggle the visibility of numbers when the privacy icon is clicked. An onClick event listener will trigger a function to toggle this state, and conditional rendering will display either the numbers or placeholders (e.g., ●●●●) accordingly. I will ensure that the UI is consistent with the Figma design through appropriate CSS styling and conduct thorough testing to confirm expected behavior across scenarios.

[DotworldX]

I’m interested in this one.

[hannahredler]

May I pick this up?Hi, my name is Hannah I'm a developer currently on the HerDAO Starknet Bootcamp and would love to take this issue!

My background

About me - I have been working as a full stack developer over the past few years, with plenty of experience in Typescript, React, RxJS. a few years ago I transitioned to the web3 ecosystem building a fully responsive real time trading app in the ethereum ecosystem. I recently discovered starknet and am looking to get more involved here!

How I would tackle the issue

• Add the required icon, when clicked it changes the react state (using react hooks) in the component to hidden/ not hidden.
• If hidden, each icon displays as a star. If not, they display correctly.

Thanks for reading!

[ymjrcc]

I’d like to help with this.

[reetbatra]

I'd be happy to do this. HER DAO

[wheval]

I’d like to resolve this. I would ensure that the privacy icon hides all the numbers by using a consistent hidden state, while preserving the UI.
Hoping to get assigned. Would love to contribute to Starknet quest.

ETA is 1 day.

[Pvsaint]

Can I be assigned to this?

[soomtochukwu]

Would love to tackle this!

[DanielEmmanuel1]

@Marchand-Nicolas I have previously applied via onlydust and would like to know if this issue is still available

[deeseeker]

Could I try solving this?

[Aditya-040]

Can I take care of this issue? I am a full stack developer.

[jedstroke]

This will be like a breeze through the park for me

[Akshola00]

Can I tackle this one?

[Dprof-in-tech]

hello chief, i'm Dprof-in-tech, a returning contributor to the starknet quest project and i would love to work on this issue. My expected time of delivery is 1 day.

[vijay-kesanakurthi]

Can I take care of this issue?

[mimisavage]

I want to take on this issue, can I be assigned?

[tasneemtoolba]

Can I try solving this issue?

[suhas-sensei]

Instead of simply replacing numbers with asterisks (*) or dots (•), i will implement a blur effect that gradually increases/decreases when toggling privacy mode - preserving the approximate visual length/space of the numbers while making them unreadable. This maintains the UI layout while providing a smooth, animated transition between visible and private states. Hoping to be assigned.

[sigmadawg]

im a newbie contributor, i'd be grateful if you'd give me the opportunity to work in this.

[BrunoAmbricca]

Hello, I would like to do this issue please

[PabloVillaplana]

I arrived late to this ODHack, I would like to contribute to this issue, to close the month with a contribution

[JosueBrenes]

Hi, I'm Josué Brenes and I'll be working on issue.
I'm Dojo Coding member. ⛩️

I estimate this will take 1 day to complete.

Solution Plan for Issue

Overview

Implement a toggle functionality in a TypeScript React (TSX) component to show or hide sensitive information (like passwords) upon clicking an icon.

Steps

1. State Management
   Use the useState hook to manage the visibility of the sensitive information.

   const [isHidden, setIsHidden] = useState(true);

2. Toggle Function
   Create a function to toggle the isHidden state.

   const toggleVisibility = () => {
       setIsHidden(!isHidden);
   };

3. Conditional Rendering
   Display the sensitive information as masked (e.g., ******) or visible based on the isHidden state.

   <span>{isHidden ? '******' : info}</span>

4. Icon and Styling
   Include an eye or eye-off icon for toggling visibility. Use a click event on the icon to call the toggleVisibility function.

5. Sample Code
   Here’s an example of the component:

   import React, { useState } from 'react';
   import { FaEye, FaEyeSlash } from 'react-icons/fa';
   
   const SensitiveInfoToggle: React.FC<{ info: string }> = ({ info }) => {
       const [isHidden, setIsHidden] = useState(true);
   
       const toggleVisibility = () => {
           setIsHidden(!isHidden);
       };
   
       return (
           <div>
               <span>{isHidden ? '******' : info}</span>
               <button onClick={toggleVisibility}>
                   {isHidden ? <FaEye /> : <FaEyeSlash />}
               </button>
           </div>
       );
   };
   
   export default SensitiveInfoToggle;

6. Expected Outcome

   • The icon toggles the information between hidden (masked) and visible states when clicked, providing a user-friendly way to manage sensitive information visibility.

---