search

Tico4Chain-Coders / POC-Trustless-Work

POC of a decentralized application (dApp) to enhance trust in agency-client relationships using blockchain. It enables trustless payments via smart contracts, securing funds in escrow until milestones are approved by clients. Stablecoins like USDC are used to ensure stability and ease of use.
6 stars 12 forks source link

frontend: Move the header to a new sidebar #26

Open JoelVR17 opened 1 week ago

JoelVR17 commented 1 week ago

Issue - Move Header to New Sidebar

You must apply through OnlyDust. If not, you'll be ignored

Description:

Move all current header elements (excluding the logo, light/dark mode toggle, wallet icon, and wallet button) to a new collapsible and responsive sidebar. This sidebar should be structured according to the specific sections listed below and use ShadCN's Sidebar component (reference: Sidebar Component Documentation). Ensure the sidebar adjusts based on authorization level (wallet connection - like the header works) and functions in both light and dark themes.

Requirements:

  1. Move all elements from the header (except logo, light/dark mode, wallet icon, and wallet button) to a new sidebar.
  2. Make the sidebar collapsible, responsive, and display according to the user’s wallet authorization level.
  3. Implement each section in the sidebar as follows:
    • Section 1: Company Information
      • Display the company name and icon (use an example from ShadCN).
    • Section 2: Escrow (Collapsible) Like "Playground" in ShadCN Sidebar
      • Implement as a collapsible section with the following items:
      • Initialize Escrow
      • Fund Escrow
      • Complete Escrow
      • Claim Escrow Earnings
      • Cancel Escrow
      • Refund Remaining Funds
      • Get Engagement
      • Use the icon FaStackOverflow from react-icons/fa for the main expandable option.
    • Section 3: Documentation (Subtitle) Like "Projects" in ShadCN Sidebar
    • Section 4: Profile
      • Keep the profile section example from ShadCN.

Validations:

  1. Confirm that all header elements (except logo, light/dark mode, wallet icon, and wallet button) are successfully moved to the sidebar.
  2. Verify that the sidebar is collapsible and adjusts responsively.
  3. Test each section (Company Information, Escrow, Documentation, Profile) to ensure the layout and links work as expected.
  4. Confirm that the sidebar respects authorization levels based on wallet connection.
  5. Ensure proper styling and readability in both light and dark themes.
  6. It should works on light / dark mode.
  7. Must be fully responsive.

Tests:

  1. Test the sidebar’s collapsibility and responsiveness on various screen sizes.
  2. Verify that the Escrow section can expand and collapse, and all items within it are accessible.
  3. Confirm the external links under Documentation function and open correctly.
  4. Check that the sidebar displays correctly based on wallet authorization status.
  5. Test the sidebar’s appearance in both light and dark themes for consistency and readability.

Recommendation:

For consistency, ensure that all icons and typography align with the overall UI style and maintain uniform padding and spacing for readability.

⚠️ Please follow the guidelines for requesting an issue, launching commits, and describing PRs. Otherwise, they will be ignored. ⚠️

raizo07 commented 6 days ago

May I be assigned to this?

Benjtalkshow commented 6 days ago

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.

Can i handle this issue?

CollinsC1O commented 6 days ago

Hello @JoelVR17 I would love to work on this issue and get it done

mexes20 commented 6 days ago

I’d like to resolve this. I have three years experience in Software development and have contributed to some projects on OD here.

ETA: 10 hours.

martinvibes commented 6 days ago

Can I take care of this issue? i'm a frontend dev, and a blockchain dev kindly assign :)

Iwueseiter commented 6 days ago

May I pick this up? I'm a frontend and smart contract developer. I have a solid background in tailwindCSS, react, nextjs, javascript, typescript, cairo, rust ETC.

Michaelkingsdev commented 6 days ago

May I handle this issue? I am an experienced frontend developer with 3 years of experience.

melnikga commented 6 days ago

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 ETA: 2 days

MullerTheScientist commented 6 days ago

I am a full-stack developer with experience in QA testing and languages like Python, Cairo, Solidity, React, and JavaScript. i'd love to handle this task please.

juandiegocv27 commented 6 days ago

Could I take a shot at this?

I’d love to take on this issue! Here’s how I plan to tackle it:

Plan to Resolve the Issue

1.⁠ ⁠Set Up the Environment
I’ll start by cloning the repo and ensuring everything is ready to work with the ShadCN Sidebar component. This will include checking for compatibility with the current setup.

2.⁠ ⁠Move Header Elements to Sidebar
I’ll move all header elements (except the logo, light/dark mode toggle, wallet icon, and wallet button) into the new sidebar. This ensures the functionality stays intact and works smoothly in its new location.

3.⁠ ⁠Design the Sidebar Structure

4.⁠ ⁠Add Authorization Levels
I’ll make sure the sidebar adjusts based on wallet authorization, just like the current header logic does.

5.⁠ ⁠Styling and Themes
The sidebar will work seamlessly with both light and dark themes while maintaining a clean and readable design. I’ll also make sure it looks great across different screen sizes.

6.⁠ ⁠Testing Everything
I’ll thoroughly test:

I used the Trustless Api in my project that won in Eth PuraVIda Hackathon, and i´m part of Dojo Coding.

hope to get assign

gadgray commented 6 days ago

May I be assigned to this?

Amarjeet325 commented 6 days ago

Hi , I am a proficient MERN stack developer with experience in full-stack development. I believe I can contribute effectively to this project. Could you kindly assign this issue/task to me?

JoelVR17 commented 6 days ago

This issue is for you @juandiegocv27! 🚀 Remember to follow all the guidelines, both the ones inside the repository and the guideline to perform the PR.

Many thanks to all the other dev's who sent in their application. 

juandiegocv27 commented 5 days ago

This issue is for you @juandiegocv27! 🚀 Remember to follow all the guidelines, both the ones inside the repository and the guideline to perform the PR.

Many thanks to all the other dev's who sent in their application.

thank u sir, thanks for the opportunity