DeFi Table Opportunity Redesign

Kevils commented 1 week ago

Description 📹

We’ve added new cards that display the same parameters as the table. These 3 cards highlight the top yield opportunities based on the selected filters. By default, they show the 3 best opportunities overall. For example, if you filter by USDC token and lending, the cards will display the 3 best yield opportunities for lending USDC. So you can use the first 3 rows of the table based on the filters

Current table : https://starknet.quest/discover/defi Refont table :

Design link: https://www.figma.com/design/fh0OAvj4AS08kHoSxu3DkE/%F0%9F%9A%80-Starknet-Quest?node-id=6331-10149&t=9Ky1zTkRkLF10uV9-1**

Proposed Actions 🛠️

Here’s a checklist of actions to follow for resolving this issue:

Fork and Create Branch:
Fork the repository and create a new branch using the issue number:
```
git checkout -b fix-[issue-number]
```
Implement Changes:
- [ ] For this issue we'll only need you to add the cards highlighting the 3 best opportunities, you'll need you to wait for #954 to be done
- [ ] You can create a Card component without adding more dependencies and use this architecture
- [ ] Then place your component in the defiTable.tsx component like so

            <div className="w-fit  modified-cursor-pointer border-[1px] border-[#f4faff4d] px-4 rounded-md">
              <Typography type={TEXT_TYPE.BODY_DEFAULT} color="white">
                Clear All
              </Typography>
            </div>
          </div>
        </div>
        {/* Cards HERE */}
        <div className="rounded-xl border-[1px] border-[#f4faff4d] min-w-[930px] xl:w-full">
          <Table>
            <TableHeader>

[ ] Test that it all works and makes sense

Run Tests and Commit Changes:
Make sure your changes don't break existing functionality and commit with a clear message:
```
git commit -m "Fix: [Short description of the fix]"
```

Required 📋

To keep our workflow smooth, please make sure you follow these guidelines:

Assignment: Don't create a pull request if you weren’t assigned to this issue.
Timeframe: Complete the task within 3 business days.
Closing the Issue: In your PR description, close the issue by writing Close #[issue_id].
Review Process:
- Once you've submitted your PR, change the label to "ready for review".
- If changes are requested, address them and then update the label back to "ready for review" once done.
Testing: Test your PR locally before pushing, and verify that tests and build are working after pushing.

Thank you for your contribution 🙏

⚠️ WARNING: Failure to follow the requirements above may result in being added to the OnlyDust blacklist, affecting your ability to receive future rewards.

PedroCo3lho commented 1 week ago

Hello @fricoben, I’d like to take on this issue. I’ve implemented something similar in the dashboard #825.

Benjtalkshow commented 1 week ago

Hello @fricoben i am willing to tackle this task. I am a Full Stack Developer with a strong background in blockchain and extensive experience in Next.js, 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 3days. Thanks

joeperpetua commented 1 week ago

Hi guys, would love to work on this issue. I have worked on some issues in the past OD hacks too (#870 & #912 )

Benjtalkshow commented 1 week ago

Can I jump on this task?

0xdevcollins commented 1 week ago

May I be assigned to 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.

Yunusabdul38 commented 1 week ago

I'd love to work on this issue. and make sure it meets the requirements

SYLVIANNORUKA commented 1 week ago

Can I take care of this issue?I am a Front-end and smart contract developer. I am proficient in tailwind css, Next Js, Typescript, JavaScript, Cairo and Rust. I would love to contribute to this project.

mimisavage commented 1 week ago

May I take care of this?

Supa-mega commented 1 week ago

Can I attempt this issue?

BrunoAmbricca commented 1 week ago

I would like to work on this issue

ShantelPeters commented 1 week ago

I’d love to work on this task.

jancris100 commented 1 week ago

Would love to tackle this! I'm from dojo coding I have 2 years of experience as full stack developer and also Im actually work as mobile developer with figma

Michaelkingsdev commented 1 week ago

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

martinvibes commented 1 week ago

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

Amarjeet325 commented 1 week ago

Can I tackle this one?

vestor-dev commented 1 week ago

hey sir I'd like to handle this task. i'm a frontend developer and a blockchain dev i would really love to contribute to your project please kindly assign :)

deeseeker commented 1 week ago

Hi, I am a frontend developer with 2 years of experience in React, TS, JS and next. I have implemented a design of this nature before and quite familiar with codebase.

Can I take a stab at this?

blessingbytes commented 1 week ago

I am a frontend and blockchain developer specializing in creating intuitive user interfaces. I have experience with modern frameworks like React and smart contract development . pls i would love to contribute to your project. plssss

DanielEmmanuel1 commented 1 week ago

Is this issue still available?

I will like to tackle this issue, I am a full stack developer with extensive knowledge in creating crisp and pixel perfect designs and would love the opportunity to work on this.

caxtonacollins commented 6 days ago

Would love to tackle this!

abdegenius commented 5 days ago

Is it okay if I tackle this?

abdegenius commented 4 days ago

@Kevils made a PR please check!

lfglabs-dev / starknet.quest