[feat] Add Users funds page

[adrianvrj]

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

• Create a new page which route will be: /app/myfunds/{useraddr}, this page should be the users profile page, please do not add the navbar since the navbar will be created separately in another issue. This page should take users address as a param.
• Take a look at the figma to see how the dashboard page looks like. Figma prototype
• Create a component called userFunds which will represent the fund cards that you can see in the prototype.
• Do not worry about functionality yet, we only want to develop the design.
• Knowledge in Nextjs and typescript are recommended.
• Please read contributors guide before asking for an issue.

[vickiddev]

hello @dmirgaleev i am a frontend dev and blockchain developer
please can i work on this issue :) and would love to be a contributor

[ShantelPeters]

Hi @adrianvrj please can I be assigned to this issue

[onlydustapp]

Hi @ShantelPeters!
Maintainers during the ODHack # 8.0 will be tracking applications via OnlyDust.
Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

[sanieni6]

Hey @adrianvrj. i'm gonna be glad to work on this😄

My approach:
I will start by setting up a new Next.js page under the route /app/myfunds/[useraddr] to capture the user’s address as a dynamic parameter. Following the Figma prototype, I will focus on replicating the design elements accurately. I’ll create a userFunds component to represent the fund cards, ensuring it is modular and easy to maintain. I will keep the design and layout as close to the prototype as possible

[onlydustapp]

Hi @sanieni6!
Maintainers during the ODHack # 8.0 will be tracking applications via OnlyDust.
Therefore, in order for you to have a chance at being assigned to this issue, please apply directly here, or else your application may not be considered.

[wugalde19]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi team,
I’m William from Costa Rica 🇨🇷 and a member of the Dojo Coding community.
I am interested in contributing to this issue and believe my skills and background make me well-suited for the task. I’ve worked over 7 years as a Full-Stack engineer in several technologies including the ones used on this project Typescript and NextJs (NextJs mostly on web3 projects that I’ve contributed in both Hackathons and OD Hacks)

Profiles:
https://app.onlydust.com/u/wugalde19
https://github.com/wugalde19

How I plan on tackling this issue

The way I’d approach this is by checking the Figma file to understand the components and how the page should look like. As you guys mentioned in the issue description, the implementation will be pure UI components without any functionality yet. Once I know what needs to be built, then I’ll go and create the new route (folder and page.tsx) for /app/myfunds/{useraddr}, on that new page I’ll create the component called userFunds which will represent the fund cards and not include the navbar as mentioned in the issue description.

I’m interested in learning more about your team and looking forward to contributing to this project.

[Ayoazeez26]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a software developer with 6 years experience building applications

How I plan on tackling this issue

I would follow the figma file to implement the users funds page using nextjs and typescript, I will also create the userFunds components to represent the fund cards
ETA- 48hours

[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 developer. Nextjs, Cairo, nodej, react.

How I plan on tackling this issue

To tackle the "Add Users Funds" page issue, follow these steps:

1. Create the Route: Set up a new Next.js page at /app/myfunds/[useraddr].

2. Design the Layout: Use the Figma prototype to design the user profile page, ensuring it aligns with the existing dashboard aesthetics.

3. Develop the UserFunds Component: Create a component named UserFunds that will display the fund cards as per the Figma design.

4. Parameter Handling: Ensure the page accepts useraddr as a parameter for displaying the relevant user data.

5. TypeScript Types: Utilize TypeScript for defining props and state, ensuring type safety.

6. Review Guidelines: Before starting, read through the contributors' guide for any specific instructions.

[Benjtalkshow]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi @adrianvrj,
I’m Benjamin, a JavaScript developer with 4 years of experience and over 18 contributions on OnlyDust | https://app.onlydust.com/u/Benjtalkshow. I specialize in building responsive and user-friendly interfaces using nextjs, svelt etc, I have implemnted transaction details page and blocks details page on opscan project and I’m excited to take on the development of the fund details page.

How I plan on tackling this issue

1. Set Up the Route:
   I’ll create the new route at /app/myfunds/{useraddr} in Next.js. This will let us pass the user’s address as a parameter, which is key for displaying their profile.

2. I’ll create a component called UserFunds that will showcase the fund cards as seen in the prototype. My goal is to make this component engaging and visually appealing.

3. I’ll concentrate on getting the design just right. I’ll ensure the page is fully responsive and closely follows the Figma design, without getting into functionality just yet.

[od-hunter]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Please can I be assigned this issue? This would be my first time contributing to this ecosystem and I’d love to be given the opportunity. I am a blockchain Developer, and my experience includes html, css, react, JavaScript,TypeScript and solidity, python and Cairo.

How I plan on tackling this issue

To solve this issue, I’d take the following steps:
1.⁠ ⁠First of all, create a file named [useraddr].tsx in the pages/app directory to handle the dynamic routing based on the user address.
2.⁠ ⁠⁠I’ll use the useRouter hook to access the useraddr parameter and set up the basic structure of the page, including rendering a UserFunds component.
3.⁠ ⁠I’ll then create UserFunds.tsx in the components directory to represent fund cards, following the design from the provided Figma prototype.
4.⁠ ⁠⁠I’ll ensure that the UserFunds component is styled according to the Figma design using your preferred styling method.
5.⁠ ⁠⁠I’ll run the application and test the page by navigating to /app/myfunds/{useraddr} to ensure it renders correctly.
6.⁠ ⁠⁠Lastly, I’ll document the implementation details, including routing and component structure.

Please assign me. I'm ready to work.

[josephchimebuka]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

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/

How I plan on tackling this issue

I will follow the figma design and ensure that the Add Users funds page is built in 2-3 days time

[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

1. Create the Route:

   • In the /app/myfunds/{useraddr} directory, I will create a new dynamic route for the Add Users funds page. This route will capture the user's address from the URL to enable dynamic content loading.

2. Design the users founds Page:

   • I will implement the design of the Add Users funds page based on the Figma prototype provided. My focus will be on accurately reflecting the layout and styling as outlined in the design guide.

3. Test the Page:

   • After the implementation, I will thoroughly test the page to ensure it functions correctly. I will also check for responsiveness across various devices and screen sizes to ensure an optimal user experience.

[melnikga]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Can I take this? I’ve participated in almost every ODHack. I have extensive experience in frontend development. I can handle this task.

How I plan on tackling this issue

In all the projects I worked on during ODHacks, I used Next.js, so implementing this page will be easy for me.
My profile on OD: https://app.onlydust.com/u/melnikga

[Solomonsolomonsolomon]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Full stack developer

How I plan on tackling this issue

Easy issue,I will use the figma as a guide to create the component and route it to /app/myfunds/{addr}

[BDCoy]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello, I’m Brayan. With over 3 years of experience in development, I am passionate about contributing to open-source projects and currently expanding my skill set with Rust, Cairo, and Solidity as part of my involvement with Dojo Coding. My recent role as a Full Stack Developer allowed me to specialize in a range of technologies including React, NextJs, Node.js, JavaScript, TypeScript, Docker, among many others. I am eager to apply my extensive experience and newly acquired skills to new challenges and innovative projects.

How I plan on tackling this issue

I'll use locofy.ai to quickly replicate the design by converting the Figma layout into code, following the project’s CSS for consistency. This will streamline the process while ensuring design fidelity.

After implementing the design, I’ll focus on making the page responsive by applying media queries and optimizing for all screen sizes. I’ll also test the page across multiple devices and browsers to confirm that it matches the design and functions as expected.

By utilizing locofy.ai and ensuring responsiveness, I’ll efficiently deliver the new fund page aligned with the project’s requirements.

[abdegenius]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a skilled fullstack developer with a wealth of experience in both frontend and backend JavaScript as well as my knowledge of Rustlang, With a solid foundation in testing,I have mastered frameworks like Mocha, Chai, and Jest to ensure robust, reliable code in every project. In addition to traditional web development, I have a strong background in blockchain technology, with hands-on experience in Solidity for Ethereum-based smart contracts. Moreover, I have delved into the emerging world of StarkNet, working with Cairo, a cutting-edge language tailored for STARKs, making them a versatile developer capable of bridging both traditional and decentralized web applications.

How I plan on tackling this issue

I will complete the replication of the provided figma design into a nextjs page using typescript, making sure to use component based design and write well documented, commented and bug free code.

[chibokaxavier]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi, I'm a Full-Stack Developer with over 4 years of experience in building web applications. I specialize in Next.js, React.js, Node.js, Tailwind CSS, and TypeScript, and I've spent the past few years developing everything from sleek, responsive frontends to powerful, efficient backend systems.

What sets me apart is my passion for delivering clean, well-structured code and user-friendly interfaces. I love turning complex problems into elegant, practical solutions. Whether it's crafting dynamic, high-performance applications or integrating robust APIs, I bring a balance of technical know-how and creativity to every project.

How I plan on tackling this issue

Step 1: Set up Routing
I will create a new page with a dynamic route:

I will create a file called pages/app/myfunds/[useraddr].tsx. This file will handle the dynamic useraddr parameter in the URL for the user's profile page.
Step 2: Basic Layout
I will not include the navbar in this page since it will be handled separately:

I will focus on creating a layout that presents the user's funds without the navigation elements.
Step 3: Design the User Profile Page
I will follow the Figma design for the dashboard:

I will create sections that align with the Figma prototype to ensure consistency in design and user experience.
Step 4: Create the UserFunds Component
I will create a component called UserFunds:

This component will represent the fund cards, displaying information related to each fund associated with the user.
I will ensure the styling and layout of these fund cards match the Figma design, focusing on elements like fund name, amount, status, and any other relevant information.
Step 5: Conditional Rendering Based on Fund Data
While I will not implement any functionality yet, I will prepare the layout:

I will set up placeholders or mock data in the UserFunds component to illustrate how the fund cards will appear based on the user's funds.
Step 6: Follow Figma for Styling
I will ensure that the design matches the Figma prototype:

I will pay attention to spacing, colors, typography, and layout as per the design in Figma.
I will utilize Tailwind CSS (or my preferred styling method) to implement the design elements.
Step 7: Skip Functionality for Now
I will not worry about making the components functional at this stage:

My focus will be on achieving the design accurately according to the Figma layout.

[Rayan9064]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a Full Stack Developer and Cairo Developer. I have good experience building web application. I am new to Open Source and want to begin with this project. I am good in React, Next.js, Typescript, Redux and Context APIs. I can leverage the same to make this a better application for the users.

How I plan on tackling this issue

1. Checking the structure of the project and understanding the codebase.
2. Knowing the tech stack required
3. Finding the area of the problem.
4. Understanding the Figma design.
5. Implementing into code.
6. Testing the code by inspecting in different screen size.
7. Modify the code when not working as expected.
8. After successful review, create a pull request.

[JoelVR17]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Create a Fund Details Page

Hello Go Stark Me team,

I am Joel Vargas, and I'm a member of Dojo Coding. I also come from OnlyDust.

I would like to request the assignment of the issue to Create a new page which route will be: /app/fund/{fundid}. Below is my proposed approach for implementing this issue:

How I plan on tackling this issue

Implementation Plan

STEP 1: Review the Figma prototype.
Description: I will analyze the provided Figma prototype to understand the design elements and layout of the fund details page. This will ensure that the new page aligns with the design of the dashboard.

STEP 2: Set up the new page route.
Description: I will create a new file [fundid].tsx in the /pages/app/fund/ directory to handle the dynamic route /app/fund/{fundid}. Here’s a basic structure for the new page:

// /pages/app/fund/[fundid].tsx
import React from 'react';

const FundDetailsPage: React.FC = () => {
  return (
    <div className="p-6 bg-gray-100">
      <h1 className="text-2xl font-bold">Fund Details</h1>
      {/* Fund details content will go here */}
    </div>
  );
};

export default FundDetailsPage;

STEP 3: Handle different funding states.
Description: I will create a component to manage the different scenarios based on the funding state (e.g., active, completed). This component will be included in the FundDetailsPage. Here’s an outline of how this might look:

// /components/FundDetails.tsx
import React from 'react';

interface FundDetailsProps {
  state: 'active' | 'completed'; // Example states
}

const FundDetails: React.FC<FundDetailsProps> = ({ state }) => {
  return (
    <div className="border rounded-md p-4 bg-white shadow-md">
      {state === 'active' && (
        <div>
          <h2 className="text-xl font-semibold">Active Fund</h2>
          {/* Active fund details go here */}
        </div>
      )}
      {state === 'completed' && (
        <div>
          <h2 className="text-xl font-semibold">Completed Fund</h2>
          {/* Completed fund details go here */}
        </div>
      )}
    </div>
  );
};

export default FundDetails;

STEP 4: Integrate the component into the fund details page.
Description: I will integrate the FundDetails component into the FundDetailsPage, passing the appropriate funding state as a prop.

// /pages/app/fund/[fundid].tsx
import React from 'react';
import FundDetails from '../../components/FundDetails';

const FundDetailsPage: React.FC = () => {
  const fundState: 'active' | 'completed' = 'active'; // Placeholder for the example

  return (
    <div className="p-6 bg-gray-100">
      <h1 className="text-2xl font-bold">Fund Details</h1>
      <FundDetails state={fundState} />
    </div>
  );
};

export default FundDetailsPage;

STEP 5: Review and iterate.
Description: After implementing the design, I will conduct a thorough review to ensure that all elements align with the Figma prototype and the overall application style. Feedback will be sought from the team for any necessary adjustments.

Goal

The goal is to create a visually appealing and well-structured fund details page that accommodates different funding states, setting the stage for future functionality development.

I look forward to your feedback on my approach!