[BUG] UI general fixes

[adrianvrj]

This issue will be part of ODHack8.0, please apply via Onlydust app

• Fix the form label to only allow numbers, for the set stark goal label in (frontend/gostarkme-web/components/modules/newfunding/FundingStep.tsx).
• Add back button in new fund fase 2 page, this will help to return to fase 1 page, in case of need to change fund info (frontend/gostarkme-web/components/modules/newfunding/DescriptionStep.tsx).
• Add warning to form labels empty, for all the page forms.
• Fix discord link in the footer, link: https://discord.gg/sEpnC6JB2U
• Please read contributors guide before asking for an issue.

[raizo07]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

@adrianvrj can I work on this.

Kindly assign.

[martinvibes]

I am applying to this issue via OnlyDust platform.

I'm an aspiring frontend and blockchain developer and would love to work on this issue

My background and how it can be leveraged

can i work on this issue @adrianvrj please kindly assign :)

How I plan on tackling this issue

Fix Form Label:

• Update the "set stark goal" label in FundingStep.tsx to only allow numerical input. Add Back Button:

• Implement a back button in the "New Fund Phase 2" page (DescriptionStep.tsx) to navigate back to Phase 1 for editing fund info. Add Warning for Empty Labels:

• Include warnings for empty form labels across all page forms. Fix Discord Link:

• Update the footer with the correct Discord link: https://discord.gg/sEpnC6JB2U.

PLease @adrianvrj assign me i want to be a contributor your repo too :)

[0xdevcollins]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

My name is Collins Ikechukwu. I'm a full stack blockchain developer developer. I estimate this will take approximately 24 hours to complete.

How I plan on tackling this issue

This is how I would tackle this issue:

1. Fix Form Label: Update the FundingStep.tsx file to restrict input for the set stark goal label to only allow numbers.
2. Add Back Button: In the DescriptionStep.tsx file, implement a back button that allows users to return to the first funding phase.
3. Add Warnings for Empty Form Labels: Implement warnings for empty form fields across all forms on the page.
4. Fix Discord Link: Update the footer to correct the Discord link to https://discord.gg/sEpnC6JB2U.

[sanieni6]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi, Luis here, a frontend developer

How I plan on tackling this issue

My approach will be as follows:

1. change this interface to ensure that only allows numbers: interface FundingStepProps { fundingName: string; setFundingName: (name: string) => void; name: string; setName: (name: string) => void; }
2. then, i will add a back button
3. Form safety, i am going to create a hook to handle empty form labels, (i highly recommend to use Zod library: https://zod.dev/ 4.Fix the discord link

[Kaminar-i]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

i'm a frontend dev and a blockchain developer kindly assign please ;)

How I plan on tackling this issue

Fix Numeric Input for Form Label:

Locate the "set stark goal" label in the file frontend/gostarkme-web/components/modules/newfunding/FundingStep.tsx. Update the input field to enforce that only numeric values can be entered. This may involve using HTML input attributes like type="number" or implementing validation logic. Implement Back Button:

Navigate to the "New Fund Phase 2" page in frontend/gostarkme-web/components/modules/newfunding/DescriptionStep.tsx. Add a back button that allows users to return to Phase 1 if they need to change fund information. Ensure that this button is clearly labeled and positioned for easy access. Add Warnings for Empty Form Labels:

Review all forms across the application to identify where form labels can be empty. Implement validation checks that display a warning message if any required form labels are left empty. This could be done using alert messages or inline validation feedback. Fix Discord Link in Footer:

Locate the footer component in the application. Update the Discord link to the correct URL: [https://discord.gg/sEpnC6JB2U]. Ensure the link is functional and directs users to the intended Discord channel.

[CollinsC1O]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello @adrianvrj I'm a frontend and a blockchain developer. I will love to work on this, this is something I can do. please assign

How I plan on tackling this issue

Below is how I planto address it

• I will ensure to read the contributors guide to comply with the project standards.
• I will update the form label in FundingStep.tsx to ensure it only allows numeric inputs for the Stark goal.
• I will implement a back button in the DescriptionStep.tsx to enable users to return to the previous phase for editing fund information.
• I will add warning messages for any empty form labels across all pages.
• I will correct the Discord link in the footer to the provided URL: https://discord.gg/sEpnC6JB2U.

[Benjtalkshow]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a Full Stack Developer with extensive experience in blockchain development, specializing in Next.js, TypeScript, Node.js, and Rust. With over 18 contributions across projects in the OnlyDust ecosystem, I’ve developed a strong proficiency in delivering high-quality solutions and tackling complex issues under tight deadlines. My experience spans frontend, backend, smart contract development, and a deep understanding of optimizing and maintaining scalable codebases.

How I plan on tackling this issue

To start, I’d make sure the "set stark goal" label in the FundingStep.tsx component only accepts numbers, so users can’t accidentally input invalid characters. Next, I’d add a back button to the second phase of the new fund creation process in the DescriptionStep.tsx file. This would allow users to easily go back to the first phase if they need to change any fund details. Additionally, I’d implement warning messages for all form labels across the pages to alert users when they leave required fields empty, ensuring they have a smooth experience. Finally, I’d fix the Discord link in the footer to ensure it points to the correct invite link: https://discord.gg/sEpnC6JB2U.

I estimate that completing these tasks will take 24 hrs. I’d focus on implementing the number-only validation for the form label, adding the back button, and updating the Discord link in the footer. Then, I’d work on adding those warning messages for empty form labels and thoroughly testing everything to ensure it all works as intended.

[AnoukRImola]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi, I'm Anouk Rímola and I'll be working on issue #109.

I estimate this will take 2 days to complete.

How I plan on tackling this issue

• Validate "stark goal" input to allow only numbers.
• Add a "Back" button for navigation between fund phases.
• Implement empty label warnings for all forms.
• Fix Discord link in the footer :)

[MariangelaNM]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello, I'm Mariangela. I'm a software developer specializing in front-end development.

How I plan on tackling this issue

Step 1: Allow only numbers for "Set Stark Goal" Update the input field with type="number" or use validation to accept only numbers. Test with valid and invalid inputs.

Step 2: Add back button in phase 2 Add a back button using useRouter to navigate to /newfunding/step1. Test the navigation.

Step 3: Add warnings for empty form labels Add validation logic to check for empty fields and display warnings. Test form submission with empty fields.

Step 4: Fix Discord link Update the Discord link to https://discord.gg/sEpnC6JB2U. Test the link.

[JosueBrenes]

My background and how it can be leveraged

I am applying to this issue via OnlyDust platform.

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

I estimate this will take 1 day to complete.

How I plan on tackling this issue

Here’s how I would tackle this issue:

1. Restrict Input Types:
   I will change the input type for the goal-setting field to number in the FundingStep component, ensuring that users can only enter numeric values. The code will look like this:

   
   <input
    type="number" // Changed to 'number'
    placeholder="Set your goal in STRKs"
    value={name}
    onChange={(e) => setName(e.target.value)}
    className="mt-4 p-2 pl-4 border border-black rounded w-full placeholder:text-base"
    required
   />

2. Add Back Button:
   I will implement a back button in the DescriptionStep component to allow users to navigate back to the previous step easily. The code for the button will be:

   
   <button
    onClick={() => {/* logic to go back to the previous step */}}
    className="mt-4 p-2 border border-black rounded bg-gray-200"
   >
    Back
   </button>

3. Validation and Warnings:
   To enhance the user experience, I will add validation to display warnings when form fields are empty. This could look like this:

   
   const showWarning = !fundingDescription.trim();
   
   return (
    <div>
      {showWarning && <p className="text-red-500">Please fill out all fields.</p>}
      <textarea
        placeholder="Funding description"
        value={fundingDescription}
        onChange={(e) => setFundingDescription(e.target.value)}
        className="mt-3 p-4 border border-black rounded w-full h-60 resize-none"
        required
      />
    </div>
   );

4. Fix Discord Link:
   I will ensure that the Discord link in the footer is accurate and functional, directing users to the correct server:

   
   <footer>
    <a href="https://discord.com/invite/sEpnC6JB2U" target="_blank" rel="noopener noreferrer">Join our Discord</a>
   </footer>