DeFi Table Opportunity Redesign

[Kevils]

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:

1. Fork and Create Branch:
   Fork the repository and create a new branch using the issue number:

   git checkout -b fix-[issue-number]

2. 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 Create a /public/tokens folder for all Starknet yielding tokens icons #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

3. **Run Tests and Commit Changes**:  
   Make sure your changes don't break existing functionality and commit with a clear message:
   ```bash
   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]

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

[Benjtalkshow]

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]

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

[Benjtalkshow]

Can I jump on this task?

[0xdevcollins]

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]

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

[SYLVIANNORUKA]

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]

May I take care of this?

[Supa-mega]

Can I attempt this issue?

[BrunoAmbricca]

I would like to work on this issue

[ShantelPeters]

I’d love to work on this task.

[jancris100]

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]

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

[martinvibes]

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

[Amarjeet325]

Can I tackle this one?

[vestor-dev]

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]

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]

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]

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]

Would love to tackle this!

[abdegenius]

Is it okay if I tackle this?

[abdegenius]

@Kevils made a PR please check!