search

web3wagers / gostarkme

Funds recollection project in Starknet ecosystem
http://web3wagers.github.io/gostarkme/
GNU Affero General Public License v3.0
15 stars 51 forks source link

Feat/fund details page #97

Closed JoelVR17 closed 1 month ago

JoelVR17 commented 1 month ago

[feat] Add fund details page | Issue #94

Description

Create a new page which route will be: /app/fund/{fundid}, this page should be the fund details page. Please note that there are two different scenarios for this page depending on the funding state; please handle both scenarios.

Changes

  1. Add fund details page

    • File: frontend/gostarkme-web/app/fund/[fundId]/page.tsx

    • Description: Created a new fund details page that dynamically displays content based on the fundId. Implemented a layout with a bounded container and a divider for visual separation.

      • Notes: This page currently displays static content for the fund based on its ID, which will be populated dynamically in future iterations.

  2. Create Fund component

    • File: frontend/gostarkme-web/components/modules/Fund/Fund.tsx

    • Description: Added a Fund component that conditionally renders the FundDonate or FundVote components based on the selected type.

      • Notes: The default type is set to "donate" and includes a message prop to display relevant information.

  3. Add ProgressBar component

    • File: frontend/gostarkme-web/components/ui/ProgressBar.tsx

    • Description: Implemented a ProgressBar component to visually indicate the funding progress.

      • Notes: The progress percentage is currently hardcoded for demonstration purposes.

  4. Create Donate component

    • File: frontend/gostarkme-web/components/modules/Fund/FundDonate.tsx

    • Description: Developed a FundDonate component to handle donation input and display the progress of the funding goal.

      • Notes: Includes an input for users to enter donation amounts and a button to submit donations.

  5. Create Vote component

    • File: frontend/gostarkme-web/components/modules/Fund/FundVote.tsx

    • Description: Created a FundVote component that allows users to cast their votes for a fund.

      • Notes: Similar to the donate component but tailored for voting functionality.

  6. Add Divider component

    • File: frontend/gostarkme-web/components/ui/Divider.tsx

    • Description: Introduced a simple Divider component for aesthetic separation in the layout.

      • Notes: Utilizes a horizontal line styled for visibility.

  7. Create Bounded layout

    • File: frontend/gostarkme-web/components/ui/Bounded.tsx

    • Description: Created a Bounded layout component to encapsulate the header, main content, and footer for consistent styling.

      • Notes: Layout can be expanded with additional styling and elements in future iterations.

Notes

  1. General notes:
    • This PR focuses on the design implementation only. Functionality will be added in subsequent updates.
    • Ensure to refer to the Figma prototype for design consistency.

Evidence

  1. Screenshots of the fund details page and components:
    • Donate Page

image

image

adrianvrj commented 1 month ago

@JoelVR17 great work, one observation only

JoelVR17 commented 1 month ago

@adrianvrj the change has been realized. If you need another thing, please let me know