Improve Faucet functionality

[0xquantum3labs]

Issue Overview

Needs to remove this from and available section from devnet faucet. Also add a toast success notification if the request was successful or fail otherwise.

We also want to have the faucet that appears when working on sepolia. this pop-up should give us a list of available links we can checkout for public faucets on external websites.

Proposed Solutions or Ideas

• faucet button works on devnet and sepolia
• when on sepolia, shows a list of links for users to click and redirect to external websites that have faucets
• should follow the current design / colors / layout

[EmmanuelAR]

Hey can I work on this ?

I will...

Implementation Plan

1. Remove Faucet from Available Section on Devnet

• Identify the Section: Locate the part of your application where the Devnet faucet is displayed.
• Modify the Logic: Adjust the logic to conditionally render the faucet UI element based on the network. Ensure that it doesn't show up for Devnet.

2. Add Toast Notifications for Success or Failure

• Integrate Toast Notifications: Add a toast notification system to your project if one isn't already present.
• Add Notification Logic: Implement logic to show success and failure toast notifications based on the response of the faucet request.

3. Faucet Button for Sepolia

• Modify Button Functionality: Ensure the faucet button is available on both Devnet and Sepolia, but with different behaviors.
• Pop-up for Sepolia: When on Sepolia, the faucet button should open a pop-up displaying a list of external faucet links.

Proposed Steps

1. Modify UI to Remove Devnet Faucet:

• Update the component responsible for displaying the faucet.
• Add a conditional check to hide the faucet when the network is Devnet.

2. Integrate and Implement Toast Notifications:

• Integrate a toast notification library into your project.
• Add toast notifications to the faucet request logic to show success or failure messages.

3. Faucet Button Functionality for Sepolia:

• Update the faucet button component to handle both Devnet and Sepolia.
• For Sepolia, implement a pop-up that lists available external faucet links.
• Ensure the design of the pop-up follows the current design standards and colors.

Detailed Workflow

1. Remove Faucet from Available Section on Devnet:

• Identify the relevant UI component.
• Add a conditional rendering logic based on the network type to exclude the faucet for Devnet.

2. Implement Toast Notifications:

• Integrate the toast notification library.
• Add success and failure notifications to the logic that handles faucet requests.

3. Sepolia Faucet Button with Pop-up:

• Update the faucet button to work for both Devnet and Sepolia.
• Implement a pop-up for Sepolia that lists external faucet links.
• Ensure the pop-up matches the existing design and layout.

Design and Consistency:

• Ensure all new UI elements (pop-ups, buttons, notifications) follow the current design guidelines for layout, colors, and overall user experience.

[onlydustapp[bot]]

Hey @Gift-Naomi! Thanks for showing interest. We've created an application for you to contribute to Speedrun & Scaffold Stark. Go check it out on OnlyDust!

[onlydustapp[bot]]

Hey @EmmanuelAR! Thanks for showing interest. We've created an application for you to contribute to Speedrun & Scaffold Stark. Go check it out on OnlyDust!

[Nadai2010]

Hi everyone, @EmmanuelAR and @Gift-Naomi we are preparing the issues for tomorrow's OD Hach, they will be assigned tomorrow

Remember that you can only work on one issue at a time, choose well

[Ayoazeez26]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a web developer with over 6 years experience building applications both personal and professional projects. I started contributing to open source via onlydust in march this year and I have contributed to a couple of issues, you can see them in my profile.

How I plan on tackling this issue

Proceed to remove the mentioned sections from the devnet faucet and create a faucet that appears when working with sepolia. I would also add a toast notification to show the status of the request, if it was successful or not by using already existing toast configurations or creating one using toastify if it doesn't already exist. The sepolia faucet would contain a list of links redirecting to external websites that contains public faucets. The whole implementation would follow the current color scheme and layout to ensure consistency

[ScottyDavies]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

As an experienced analyst and blockchain developer with 15 years in the industry. i likely encountered a variety of challenges that these technologies can help address. My technical expertise and problem-solving skills will be valuable assets in leveraging JavaScript, Cairo, and TypeScript.

How I plan on tackling this issue

Removing "Available" section from devnet faucet: Update the HTML to remove the "Available" section. Adjust the CSS as needed. Adding toast success notification: Create a simple Toast class in Cairo to handle success and error notifications. Use the Toast class in the JavaScript/TypeScript code to display appropriate notifications. Displaying Sepolia faucet links: Create a modal or section in the HTML to display the faucet links. Use JavaScript to fetch the Sepolia faucet data from an API and populate the list. Add event listeners to open and close the modal.

[ShantelPeters]

Can I be assigned this issue

Background and Leverage: As a frontend developer with experience in building interactive UI components and API integrations, I'm confident in my ability to tackle this challenge. My background in UI/UX design and development has equipped me with the skills to create intuitive and visually appealing interfaces. I'm well-versed in React and JavaScript, having worked on multiple projects that utilize these technologies.

Approach to the Problem:

1. Remove "From" and "Available" sections: I'll modify the devnet faucet UI to remove the unnecessary sections, streamlining the user experience.
2. Toast Success Notification: I'll implement a toast notification system to provide clear feedback on request success or failure.
3. Faucet Button for Sepolia: I'll create a faucet button that works on both devnet and sepolia, displaying a list of links for external faucets when on sepolia.
4. Design and Layout: I'll ensure the design and layout follow the existing guidelines, maintaining a consistent user experience.

Solution: My proposed solution involves modifying the devnet faucet UI, adding a toast notification system, and creating a faucet button that works on both devnet and sepolia. The button will display a list of links for external faucets on sepolia, following the current design and layout guidelines.

Technical Details:

• I'll use React and JavaScript to implement the changes.
• I'll utilize the existing design system and components to maintain consistency.
• I'll ensure the toast notification system is accessible and user-friendly.

[onlydustapp[bot]]

Hey @ShantelPeters! Thanks for showing interest. We've created an application for you to contribute to Speedrun & Scaffold Stark. Go check it out on OnlyDust!

[wugalde19]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi Speedrun & Scaffold Stark team, I’m William from Costa Rica 🇨🇷 and I am interested in contributing to this issue and believe my skills and background make me well-suited for the task. I’ve worked over 7 years as Full Stack engineer in several technologies (including the ones used on this project JS, Typescript) and I am currently expanding my expertise in Rust, Cairo, and Solidity. I’ve participated in two past OD Hack events and understand the need and usage of faucets to fund our wallets in Sepolia and test our changes. I also want to mention that our team used this project in the StarkHack and it saved us a lot of time and headaches, I will be honored to contribute to this project and help new devs find faucets to test their changes after solving this issue.

Profiles: https://app.onlydust.com/u/wugalde19 https://github.com/wugalde19

How I plan on tackling this issue

Based on my understanding of the issue description, the core problem appears to be that you want to make it easier for devs to find faucets that they could use to fund their wallets. Again, after using faucets to test some changes in several contributions I understand the importance of this issue.

I agree with your proposed ideas, a faucet button could work and it can either display a modal or expand a new section where we can show the list of links.

In regards to the list of links we can take the ones that Starknet page offers here: https://www.starknet.io/bridges-and-onramps/ and include more (the ones I have also used in the past) and of course, I’d ask you for approval and see if you have more to add. Thank you, and I look forward to your guidance and to start contributing to this project.