Create Claim Escrow Earnings form component

DiegoB1911 commented 1 week ago

Description

Implement the "Claim Escrow Earnings" form as a component in Next.js. This form allows users to claim escrow earnings, following the design provided in the screenshot.

Acceptance Criteria

1. Reusable Component:

Create a Next.js functional component named ClaimEscrowForm.
The component should accept props for dynamic behavior (e.g., onSubmit, default values).

2. Form Fields:

Include the following input fields:

Contract ID: Text input for entering the contract ID.
Engagement: Text input for entering the engagement name.

3. Validation:

Add client-side validation to ensure both fields are required.
Validate the format of the Contract ID if necessary.

4. Styling:

Match the design from the screenshot, including colors, fonts, and layout.
Ensure responsiveness for different screen sizes.

5. Submit Button:

Include a button labeled "Fund escrow".

Mockups / References

Refer to the figma design:

FIGMA DESIGN

Milestones

[ ] Create the ClaimEscrowForm component.
[ ] Add input fields with validation.
[ ] Apply styling to match the design.
[ ] Write a usage example and document the component.

abdegenius commented 1 week ago

Is it okay if I tackle this? I can comfortably handle this issues

KevinLatino commented 1 week ago

Hello @DiegoB1911! 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 will create a reusable ClaimEscrowForm component in Next.js with fields for "Contract ID" and "Engagement," including client-side validation. The form will match the design, be responsive, and include a "Fund Escrow" button, supporting dynamic behavior through props.

BrunoAmbricca commented 1 week ago

I would like to work on this issue

JosueBrenes commented 1 week ago

Could I grab this task?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.

How I Would Resolve This

To implement the "Create Escrow" form as specified in the design and requirements, I will follow these steps:

1. Create the Reusable Component

Define a functional component named EscrowForm in Next.js.
The component will accept props such as:
- onSubmit for handling form submission.
- defaultValues for pre-filling the form fields when necessary.

2. Form Fields

Include the following input fields:
- Engagement: Text input for engagement details.
- Description: Text input for a description.
- Service Provider: Text input for entering the wallet address.
- Amount: Text input for the numeric amount.
Add placeholders matching the UI design for each field.

3. Validation

Implement basic client-side validation:

Ensure all fields are required.
Validate that the service provider input follows wallet address format (e.g., alphanumeric or specific patterns).
Validate that the amount input is numeric.

Example validation logic:

const validateForm = (data) => {
 const errors = {};
 if (!data.engagement) errors.engagement = "Engagement is required.";
 if (!data.description) errors.description = "Description is required.";
 if (!data.serviceProvider) errors.serviceProvider = "Service provider wallet is required.";
 if (!/^[0-9]+(\.[0-9]+)?$/.test(data.amount)) errors.amount = "Amount must be a valid number.";
 return errors;
};

4. Styling

Match the provided screenshot design using Tailwind CSS or custom CSS.
Include the following styles:
- Gradient Background: Use a linear gradient matching the screenshot.
- Input Fields:
  - Rounded borders with light gray backgrounds.
  - Subtle focus states (e.g., border color change on focus).
- Button:
  - Rounded with a white background and hover effect.
Responsive Design:
- Use media queries or utility classes to ensure the form renders well on all screen sizes.

5. Submit Button

Label the button as "Create escrow."
Trigger the onSubmit prop or handle form submission locally.
Prevent the default form action and log form data on submission for testing.

6. Implementation Example

Example JSX Component:

   import { useState } from "react";

   const EscrowForm = ({ onSubmit, defaultValues = {} }) => {
     const [formData, setFormData] = useState({
       engagement: defaultValues.engagement || "",
       description: defaultValues.description || "",
       serviceProvider: defaultValues.serviceProvider || "",
       amount: defaultValues.amount || "",
     });

     const handleChange = (e) => {
       setFormData({ ...formData, [e.target.name]: e.target.value });
     };

     const handleSubmit = (e) => {
       e.preventDefault();
       const errors = validateForm(formData);
       if (Object.keys(errors).length === 0) {
         onSubmit(formData);
       } else {
         console.log("Validation Errors:", errors);
       }
     };

     return (
       <form onSubmit={handleSubmit} className="bg-gradient-to-b from-green-500 to-blue-700 p-6 rounded-md max-w-md mx-auto">
         <h2 className="text-2xl font-bold text-white">Create Escrow</h2>
         <p className="text-sm text-gray-200 mb-4">Fill in the details below to set up a secure and reliable escrow agreement.</p>

         <label className="block text-gray-200">Engagement</label>
         <input
           type="text"
           name="engagement"
           value={formData.engagement}
           onChange={handleChange}
           placeholder="Enter the engagement"
           className="w-full p-2 mb-4 border rounded-md"
         />

         <label className="block text-gray-200">Description</label>
         <input
           type="text"
           name="description"
           value={formData.description}
           onChange={handleChange}
           placeholder="Enter description"
           className="w-full p-2 mb-4 border rounded-md"
         />

         <label className="block text-gray-200">Service Provider</label>
         <input
           type="text"
           name="serviceProvider"
           value={formData.serviceProvider}
           onChange={handleChange}
           placeholder="Enter the service provider"
           className="w-full p-2 mb-4 border rounded-md"
         />

         <label className="block text-gray-200">Amount</label>
         <input
           type="text"
           name="amount"
           value={formData.amount}
           onChange={handleChange}
           placeholder="Please enter the amount/price of the escrow"
           className="w-full p-2 mb-4 border rounded-md"
         />

         <button
           type="submit"
           className="bg-white text-black py-2 px-4 rounded-md hover:bg-gray-200"
         >
           Create escrow
         </button>
       </form>
     );
   };

   export default EscrowForm;

7. Testing

Ensure the component renders correctly with and without default values.
Validate responsiveness across screen sizes.
Test all form fields and submission behavior.
Ensure styling matches the provided design.

josephchimebuka commented 1 week ago

Hello I am Joseph I am a frontend developer and blockchain developer and I am also an active contributor here on only dust here is my profile https://app.onlydust.com/u/josephchimebuka. This is my first time to contribute to this repo ill appreciate the opportunity to contribute. this is a couple of frontend and blockchain projects i have built https://metacrypt.vercel.app/ https://mattedsgn.com/ May I try this one?

mimisavage commented 1 week ago

Could I grab this task?

Villarley commented 1 week ago

Hi @DiegoB1911 🚀🚀, 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. I'll tackle this issue by using creating the component, and using all the resources in the repo. I would like to contribute to this project and bring my abilities to the project. Pls feel free to reach out

0xdevcollins commented 1 week ago

Could I take a shot at this?

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 46 significant contributions spread over 10 OnlyDust projects.

jsandinoDev commented 1 week ago

Hi I'm a full-stack developer from Costa Rica and member of Dojo coding. I've worked on projects using React, Solidity, Cairo, and blockchain tools. My skills in both front-end and back-end development allow me to build scalable and secure solutions for web3 ecosystems. Steps to Implement:

1.  Create the Functional Component:
•   Define a functional component in Next.js named ClaimEscrowForm.
•   Use React hooks (useState, useEffect) to manage form state and validation.
2.  Props for Dynamic Behavior:
•   Accept props like onSubmit (callback function for form submission) and defaultValues for dynamic behavior.
•   The component will handle client-side validation for the form fields.
3.  Form Fields:
•   Create two input fields for the following:
•   Contract ID (Text input)
•   Engagement (Text input)
4.  Client-side Validation:
•   Ensure both fields are required.
•   Add validation to the Contract ID field if necessary (e.g., validate alphanumeric or specific format).
5.  Styling:
•   Use TailwindCSS (or any preferred styling method) to match the design, ensuring the layout is responsive.
•   Make the form adaptable to different screen sizes.
6.  Submit Button:
•   Add a submit button with the label “Fund Escrow” and link it to the form’s onSubmit function.

caxtonacollins commented 1 week ago

Can I tackle this one?

Ayoazeez26 commented 1 week ago

I'd like to take this issue. I would create the ClaimEscrowForm component with it's respective fields and add validations for them, I would also make sure the component accept props for onsubmit and default fields. I would make sure the styling matches what is on the figma design

ETA - 2 days

Benjtalkshow commented 1 week ago

I'd like to handle this task. I am a Full Stack Developer with a strong background in blockchain and extensive experience in Next.js/React, TypeScript, and Rust. I’ve made over 45 contributions to over 15 projects in the OnlyDust ecosystem, solving complex issues and delivering efficient, scalable solutions.

MY ETA is 48hrs. Thanks

mariocodecr commented 1 week ago

Hii! My name is Mario Araya, I’m a Software Developer with 2+ years of experience. I have worked with backend technologies such as Cairo, Java, and C#, as well as frontend development using React, NextJS, and JavaScript/TypeScript. I’ve made contributions to open-source projects, completed a Starknet Bootcamp, exercises on NodeGuardians, finished Starklings, and participated in multiple hackathons. I’m also a member of the Dojo Coding community here in Costa Rica.

I will create a reusable ClaimEscrowForm component in Next.js with fields for Contract ID and Engagement, including validation and responsive styling. The form will feature a "Fund escrow" button for submission, and I'll provide a usage example and documentation.

ShantelPeters commented 1 week ago

Can I be assigned to this?

MullerTheScientist commented 1 week ago

hello i'd love to tackle this

Michaelkingsdev commented 1 week ago

Can I be assigned to this? I am an experienced frontend developer with 3 years of experience.

armandocodecr commented 1 week ago

Hello, this is Armando from the Dojo. Could you take this issue? I have more than 2 years of experience with Next.js technology, since I started I've been involved in the frontend area, so I feel fully qualified to solve this issue.

I propose to use 2 libraries that allow you to create fully customizable forms with their respective validations in a very simple way. These 2 libraries would be: “Yup” and “Formik”.

I hope you like the proposal.

Bran18 commented 1 week ago

Hello there. I’m Brandon, part of the ⛩️ Dojo Coding community, and I would love to contribute to this project! 🚀 This might be my first contribution here.

I've done quite a few forms in our apps, feel free to check out the one from MB (https://masterbots.ai/) as one example xD. I would love to help out with creating the one you need and adding all the elements it needs. I will be following the strategy we use in our products.

Create reusable component
Create util for reusable logic validations
User friendly place holder
Accessibility based component elements
Any other cool stuff and easy to maintain

Lmk if I can start working on it. Here’s my GitHub profile: GitHub: https://github.com/Bran18 and my OnlyDust profile: https://app.onlydust.com/u/Bran18.

chibokaxavier commented 1 week ago

Hi, i am Chiboka Emmanuel a full-stack web developer who enjoys creating solutions and applications that look great and work smoothly.To implement the "Claim Escrow Earnings" form, I’d create a reusable ClaimEscrowForm component in Next.js. It will accept props like onSubmi and defaultValues for flexibility. The form will have two required fields: Contract ID and Engagement, with client-side validation for both. I'll match the design in the screenshot, ensuring it’s responsive across devices. The form will include a "Fund escrow" button that triggers the onSubmit action. This approach keeps it simple, reusable, and styled according to the provided design. I would really love to be assigned this issue and work on this project.

sasasamaes commented 1 week ago

Thank you for your enthusiasm in contributing to our project. Wishing you great success as you take on this task.

Any questions you may have, please let us know Assigned @Bran18 🫡

Crypto-Jaguars / Revolutionary_Farmers