UI Enhancements for Marketplace Listing

[evgongora]

Objective:

Improve the user interface to support marketplace listing functionality.

Steps:

Add fields for marketplace listing details (e.g., stock, price) to the user/register-coffee form.
Implement a loading spinner to provide feedback during the transaction.
Display notifications for successful listings or errors encountered during the process.

[robertram]

Hi, I am from de Dojo Coding community and a new contributor to Only Dust. Im a web3 frontend developer and founder of a NFT ticketing platform. 
The way I would approach this feature is follow the design to implement the requested fields. Implement the loading spinner, if already exists in the project then use it in the component, if not I would create it. The same with the notifications for success or error. 
Then test it on different devices.

[7-falseparfait]

May I handle this issue?

I am a Front-end and Smart Contract Developer with expertise in Tailwind CSS, Next.js, TypeScript, and JavaScript. I am eager to contribute to this project and bring value with my skills.

[KevinLatino]

Hello My name is Kevin Latino, and I'm a Frontend Developer and active open-source contributor. I'm a member of Dojo Coding, a thriving Web3 community in Costa Rica. I have experience with React, Next.js, and TypeScript, also I have experience in data fetching and API integrations and I recently won the LATAM Hackathon hosted by Base. I've also contributed to projects in ecosystems like Starknet and Stellar.

I’ll enhance the user interface by adding fields for marketplace listing details, such as stock and price, to the user/register-coffee form. I’ll implement a loading spinner for transaction feedback and display notifications to inform the user of successful listings or any errors encountered during the process.

[martinvibes]

i'm a frontend dev and blockchain dev
May I try my hand at this?
i would love to work on this and get it done

[JosueBrenes]

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

I estimate this will take 1-2 days to complete.

---

Steps to Resolve

1. Extend the User/Register-Coffee Form

   • Locate the user/register-coffee form component.
   • Add the following fields for marketplace listing details:
     • Stock: Input field to specify the available quantity.
     • Price: Input field for the listing price.
   • Ensure validation for these fields:
     • Stock: Must be a positive integer.
     • Price: Must be a positive number.

2. Implement a Loading Spinner

   • Use a spinner component (e.g., a pre-existing spinner or react-spinners) to indicate loading during the transaction.
   • Add the spinner to display:
     • When the user submits the listing form.
     • Until the transaction is completed (success or failure).
   • Spinner visibility should be tied to the loading state.

3. Add Notifications for Feedback

   • Integrate a notification library (e.g., react-toastify or custom notifications).
   • Display notifications in the following scenarios:
     • Success: Notify the user when a listing is successfully added to the marketplace.
     • Error: Show an error message if the transaction fails, providing specific details where possible.

4. Test and Validate

   • Validate the new fields for correct input behavior and formatting.
   • Test the loading spinner to ensure it appears during processing and disappears upon completion.
   • Verify notifications trigger under the correct conditions and contain accurate messages.

5. Finalize and Submit

   • Commit the changes to a branch named feature/marketplace-listing-ui.
   • Open a pull request summarizing:
     • Added fields for marketplace details.
     • Loading spinner implementation.
     • Notifications for success and error feedback.

---

Timeline

• Day 1: Add fields to the form and implement the loading spinner.
• Day 2: Integrate notifications, test the functionality, and refine the implementation.

---

[melnikga]

Can I contribute to this one?
Hi, my name is Georgiy, I'm a fullstack blockchain developer. I have extensive experience in developing tools for Starknet, and I've participated in almost all ODHacks, during which I worked on many projects. My OnlyDust profile: https://app.onlydust.com/u/melnikga

[SudiptaPaul-31]

Would love to work on this issue

I am a fullstack and blockchain developer having experience for more than 1.5 years and had worked on many projects from previous odhack my profile: (https://app.onlydust.com/u/SudiptaPaul-31)

[abdegenius]

Can I work on this, please?

[zintarh]

Is it okay if I take this?

[PedroCo3lho]

Hello @evgongora,
I’m a full-stack developer with a solid understanding of TypeScript, Next.js, and TailwindCSS. I have previously contributed to CofiBlocks, and would love to work on this issue. The requirements and development flow are clear to me.
Please let me know if I can start so I can deliver the solution asap!

[codeZe-us]

Please can I be assigned to this?

[SudiptaPaul-31]

Would love to work on this issue

I am a fullstack and blockchain developer having experience for more than 1.5 years and had worked on many projects from previous odhack my profile: (https://app.onlydust.com/u/SudiptaPaul-31)

[JoelVR17]

Request to Work on Improving UI for Marketplace Listing Functionality

Hello, team!
I'm Joel Vargas | Dojo Coding

I would like to take on the task of improving the user interface to support the marketplace listing functionality as described in the issue. My plan is to enhance the user experience by adding relevant fields, providing transaction feedback, and ensuring smooth interaction during the listing process.

Plan of Action:

1. Add Marketplace Listing Fields:

   • Integrate additional fields in the user/register-coffee form to capture marketplace listing details such as stock quantity and price.

2. Implement Loading Spinner:

   • Implement a loading spinner to provide real-time feedback to users during the transaction, ensuring a smooth experience while the listing is being processed.

3. Display Notifications:

   • Implement notification messages to inform users of successful listings or errors encountered during the process, ensuring clear communication of the result.

Expected Outcome:

• The user form will include fields for marketplace listing details (stock, price).
• A loading spinner will provide feedback during the listing process.
• Clear notifications will be displayed for both successful and error states, improving user experience.

I will ensure the implementation is user-friendly, responsive, and thoroughly tested for consistency. Please let me know if there are additional requirements or preferences for this task.

Thank you!
Joel Vargas

[Bran18]

Hello Team,

My name is Brandon Andrey Fernandez, and I am part of the Dojo Coding Community ⛩️💻 and https://bitcash.org/en. I’m excited about the opportunity to contribute to your project during Only Dust Hackathon #12! 🚀

I am a full-stack developer with experience in Web3 and blockchain technologies, particularly in projects involving smart contracts, AI integration, and decentralized solutions. I have worked on a large number of web3 projects and solutions as for example:

https://masterbots.ai/
https://bitlauncher.ai/en

I am interested in this specific issue because it combines my passions: blockchain, AI technology, and modern web development. I am motivated by the opportunity to improve my skills and contribute to the project. I have participated in hackathons like ODH and other web2 based hackathons.

During the hackathon, I can dedicate approximately 5h min hours per day to working on this issue. I am committed to active collaboration, delivering high-quality code, and maintaining open communication with the team.

You can find my profiles and links here:

• GitHub: https://github.com/Bran18?tab=repositories
• OnlyDust: https://app.onlydust.com/u/Bran18
• X: https://x.com/branfdez_18
• LinkedIn: https://www.linkedin.com/in/brandonfdez18/

Thank you for considering my application. Please let me know if you have any questions or need any additional information.

[OWK50GA]

Can I jump on this task?
Hi, I'm Wilfrid Okorie, a Frontend Web Developer and I'd like to take this issue.

I have experience developing Frontends, in and out of Web 3, and I can take this issue.

Expect my first PR within

[Storyofmujahid]

I will be able to make the aesthetics, visual design and User experience of this better. Check out some of my attention to details and design principles application here: https://dribbble.com/Mujaaahiid

[Luluameh]

Mind if I take this issue?

[0xdevcollins]

Can I be assigned this issue?

My Background
I am a Full Stack Blockchain Developer with proficiency in Solidity/Rust, Next.js, TypeScript, React, and Node.js. I've demonstrated my ability to adjust to a variety of requirements, perform well under pressure, and reliably produce user-centric blockchain solutions with 58 significant contributions spread over 17 OnlyDust projects.

[BrunoAmbricca]

I would like to work on this issue

[greatest0falltime]

Hi,

I’d be thrilled to work on this issue as I have extensive experience with front-end technologies, including React and Next.js.

ETA:
I expect to have a working solution ready within the next 24 hours. Kindly let me know if I can proceed!

Looking forward to contributing!

[Jagadeeshftw]

Hi,
I’d love to work on this issue as I have strong experience with front-end development. Please assign this to me, and I’ll deliver an efficient and secure PR within 12-24 hours.

[1nonlypiece]

Hi ,
I’d like to work on this issue as I have experience in building frontend interfaces using frameworks like React and Next.js.

ETA:
I estimate completing this task in about 12-24 hours. Let me know if I can get started!

[ShantelPeters]

Is it okay if I take this?

[Kachimercy1]

Can I take care of this issue?

[Supa-mega]

Mind if I try this one?

[Villarley]

hi @evgongora 🚀🚀,
I’m Santiago Villarreal Arley, a proactive and communicative developer with experience in both front-end and back-end Web3 development. I’m a proud member of Dojo Coding and have worked on various projects built on StarkNet and Stellar, where I actively contributed to creating scalable and efficient solutions. I also won a Web3 hackathon Buildathon for my work on BuildMyEvent, an open-source blockchain project focused on solving real-world challenges and integrating useful features.
Additionally, I’m a Gold Contributor with over 15 merged PRs, showcasing my commitment to open-source development and collaborative problem-solving.

To tackle this issue:

Form Update: Add fields for marketplace details (stock, price) to the user/register-coffee form.
Loading Spinner: Implement a spinner to indicate progress during transactions.
Notifications: Display success or error messages for user feedback after the listing process.
ETA: 12-48 hours.

Feel free to reach out via Telegram

[therealemino]

Hi, I've over 4 years professional experience working on frontend applications (React, Vue, Next, Nuxt, TS). I've gone through the repository and I believe this is an excellent first issue for me to contribute to. Can take on this task?

[Dorcas18]

Is this issue still available?

[ekumamatthew]

Is this issue still available?

[Jayrodri088]

Hi, I’m John Asogwa, and I’d like to work on this issue.

I have over three years of experience working with React, TypeScript, and UI/UX design, making me well-equipped to tackle this enhancement. I’m excited about Cofiblocks’ mission to connect coffee farmers directly with consumers, and improving the marketplace UI aligns with my passion for creating impactful, user-friendly interfaces.

Steps to Resolve
Extend the Register-Coffee Form

Add fields for stock and price with validation:
Stock must be a positive integer.
Price must be a positive number.
Enhance form usability by grouping fields logically and adhering to the project’s design system.
Implement a Loading Spinner

Use a lightweight spinner to provide feedback during the transaction.
Tie spinner visibility to the loading state to ensure it appears only during processing.
Add Notifications for Feedback

Integrate a notification system (e.g., react-toastify).
Show success notifications for successful listings and error notifications with specific messages for failures.
Test and Validate

Ensure field validation, spinner behavior, and notifications work as expected.
Test edge cases for inputs, such as large values for stock or price.
Verify notifications are consistent and accessible.
Timeline
Day 1: Extend the form and implement the spinner.
Day 2: Integrate notifications, conduct thorough testing, and refine the implementation.
Final Deliverables
A refined register-coffee form with new fields for stock and price.
A spinner that provides user feedback during transactions.
Notifications for success and error scenarios to improve user experience.
I’m confident I can complete this task within 2 days and deliver an intuitive, polished user interface. Looking forward to contributing!

[robertram]

Hi, I am from de Dojo Coding community and a new contributor to Only Dust. Im a web3 frontend developer and founder of a NFT ticketing platform. 
The way I would approach this feature is follow the design to implement the requested fields. Implement the loading spinner, if already exists in the project then use it in the component, if not I would create it. The same with the notifications for success or error. 
Then test it on different devices.

[ryzen-xp]

Can I work on this, please?

[jaykayudo]

Can i be assigned this?

[greatest0falltime]

Can i take this?

[akintewe]

Hello
I’m a full-stack developer with a solid understanding of TypeScript, Next.js, and TailwindCSS. I would love to work on this issue. The requirements and development flow are clear to me.
Please let me know if I can start so I can deliver the solution asap! My ETA is 12 hours

[Pvsaint]

Can I attempt this issue?
If it's still available.

[Nityam573]

Is it okay if I take this?

[OthmanImam]

I’d like to resolve this.

[olisaagbafor]

Can I take this from here?

[Birdmannn]

Please can I handle this task?

[Elite-tch]

Let me try this one! I'll add fields for marketplace listing details such as stock and price to the user/register-coffee form. Additionally, I'll implement a loading spinner for transaction feedback and display notifications to indicate success or errors during the process. Excited to contribute to this

[od-hunter]

Hi @evgongora , can I be assigned this please? I'm ready to work.

[OWK50GA]

Hi, @evgongora
I'll like to handle this task. I'm a Frontend developer and I'm capable of doing it.

Expect a PR within 2 days of assignment

[jaykayudo]

@evgongora can i be assigned this?
I am an experienced full stack developer and i believe that i can handle this task.

How i will tackle this

• i will add new fields (stock, price) to the user/register-coffee form
• I will implement the loading spinner to provide feedback during the transaction
• I will implement notification display for any success or error during the listing process
• ETA - 24 hours

[caxtonacollins]

@evgongora i will love to take on this issue, Am ready to put in the work.

[emarc99]

Can I tackle this? Be nice to contribute.

[cryptogru812]

Would love to tackle this!

[martinvibes]

@evgongora I'm a frontend dev and a blockchain dev I would love to work on this issue and get it Done ASAP

Eta: 24hrs

[Benjtalkshow]

@evgongora
I'd like to work on this

[Nityam573]

@evgongora
I'd like to work on this

[chiscookeke11]

Can I start working on this?

[evgongora]

closed by #102