feat: create different table cells components

[YohanTz]

Describe the feature you'd like to request

We have different tables across the app. Somme cells of those tables are rewritten across the codebase and should be extracted to components.

Describe the solution you'd like to see

For example, in the component collection-items-data-list-view.tsx, this piece of code inside of a TableCell:

                <Link
                  prefetch={false}
                  href={`/token/${token.collection_address}/${token.token_id}`}
                  className="flex items-center gap-4"
                >
                  <Media
                    src={token.metadata?.image}
                    mediaKey={token.metadata?.image_key}
                    alt={token.metadata?.name ?? "Empty NFT"}
                    className="size-10 rounded-md object-contain"
                  />
                  <div className={cn("w-full", ellipsableStyles)}>
                    {token.metadata?.name ?? token.token_id}
                  </div>
                </Link>

is repeated in multiple part of the codebase and can be placed in a component named TokenInfosCell, in /apps/arkmarket/src/components/cells/token-infos-cell.tsx for exemple

Additional information

No response

[od-hunter]

Hi @YohanTz , can I be assigned this please? To solve this issue, I'd:

1. Identify Repeated Code, that is I'd find instances of the same code for rendering token information across the app.
2. I'll create TokenInfosCell Component (/apps/arkmarket/src/components/cells/token-infos-cell.tsx). I'llInclude the necessary rendering logic for token information.
3. I'll replace repeated code in existing files with the new TokenInfosCell component, passing the required token prop.
4. I'll ensure the new component works correctly across all instances.
5. I'll provide documentation for the new component, including props and usage.

Please assign me.

[stephanniegb]

hello, @YohanTz, I would like to work on this

[stephanniegb]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hey I am Stephanie and I am a frontend engineer with experience in React, TypeScript, and component-based architecture. I have always prioritized writing clean, modular code, which aligns perfectly with your need to refactor table cells into reusable components.

How I plan on tackling this issue

I would approach this problem by abstracting these cells into a reusable component located in a shared folder.

[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 create the TokenInfosCell component and place the reusable bits of code inside and replace that component across the app

[estherbreath]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a smart contract and full stack developer.

Leveraging on my background, I can approach this issue by: Applying modular design principles from smart contracts to extract reusable components. Implement stateless functions similar to Stark's functional paradigm. Optimize rendering and prop passing, drawing from gas optimization techniques in smart contracts.

How I plan on tackling this issue

I propose creating reusable cell components to reduce code duplication across our tables. By extracting common table cell patterns into separate components, we'll improve maintainability and consistency.

This approach will allow us to easily update shared UI elements in one place, enhancing our development efficiency. I'm ready to implement this solution by creating components like TokenInfosCell and integrating them throughout the app.

[saimeunt]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I'd like to work on this one, I have experience in refactoring React components to follow DRY pattern. I have some experience refactoring using DRY best practices: https://github.com/walnuthq/op-scan/blob/main/src/components/lib/timestamp-list-item.tsx

How I plan on tackling this issue

I will create the component you hinted at in the first comment as well as search the entire codebase for similar repeated components and refactor using reusable components.

[SoarinSkySagar]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

GM, I am Sagar Rana, a smart contract developer and full stack engineer. I have 3 years of experience building robust full stack applications and over a year of writing smart contracts. You can see my projects and contributions to some major repos on my GitHub profile. The tech stack I use mainly includes Solidity, Rust, JavaScript and Typescript. I am also contributing to the Starknet and Rust ecosystems and building on Cairo language. I am interested in contributing to projects like this to learn more about these technologies and help make these projects better. Please assign me as I would be really glad to be a contributor in this project! :)

How I plan on tackling this issue

Hi @YohanTz, to implement this feature, I suggest the following steps:

• Create reusable table cell components: Extract commonly used table cell structures into separate components under /apps/arkmarket/src/components/cells/. Example:

The piece of code inside collection-items-data-list-view.tsx that repeats the token info can be refactored into a new component called TokenInfosCell:

import Link from 'next/link';
import Media from 'path-to-media-component'; // Update the path as needed
import { cn, ellipsableStyles } from 'path-to-utils'; // Import the utility functions

const TokenInfosCell = ({ token }) => {
  return (
    <Link
      prefetch={false}
      href={`/token/${token.collection_address}/${token.token_id}`}
      className="flex items-center gap-4"
    >
      <Media
        src={token.metadata?.image}
        mediaKey={token.metadata?.image_key}
        alt={token.metadata?.name ?? "Empty NFT"}
        className="size-10 rounded-md object-contain"
      />
      <div className={cn("w-full", ellipsableStyles)}>
        {token.metadata?.name ?? token.token_id}
      </div>
    </Link>
  );
};

export default TokenInfosCell;

• Replace occurrences: Go through the codebase and replace instances of the repeated code with the new component, ensuring consistency and reusability across the app.

• Other table cells: Similarly, analyze the app for other commonly repeated table cell patterns and extract them into their own components for cleaner, more maintainable code.

Tasks:

• [ ] Create Component
• [ ] Replace occurences
• [ ] Manually review code and make it cleaner

ETA: 1 Day

[od-hunter]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi @YohanTz , can I be assigned this please? I'm a blockchain developer with 2 years experience. I have experience in html, css, react, JavaScript,TypeScript and solidity, python and Cairo.

How I plan on tackling this issue

To solve this issue, I'd: 1.⁠ ⁠Identify Repeated Code, that is I'd find instances of the same code for rendering token information across the app. 2.⁠ ⁠I'll create TokenInfosCell Component (/apps/arkmarket/src/components/cells/token-infos-cell.tsx). I'llInclude the necessary rendering logic for token information. 3.⁠ ⁠I'll replace repeated code in existing files with the new TokenInfosCell component, passing the required token prop. 4.⁠ ⁠I'll ensure the new component works correctly across all instances. 5.⁠ ⁠I'll provide documentation for the new component, including props and usage.

Please assign me.

[omsant02]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am Om Santoshwar, Final year btech UG at IIT Dhanbad, i have a strong background in web development and blockchain development particularly in Ethereum and Starknet with 3 years of software development experience.

My Technical Skills- Languages: Typescript, Javascript, Solidity, Rust, Cairo, C++ Frameworks and tools: Scaffold-eth/Stark, Nextjs, MERN, Ethersjs, Hardhat, Foundry, Openzeppelin contracts, Defi, AWS

Experience- Participated in EthGlobal and other blockchain hackathons Internships as Blockchain and Fullstack web developer

How I plan on tackling this issue

this can be solved by extracting the repeated code into a react functional component,

calling this functional component in place of repeated code hence making it DRY

[Benjtalkshow]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I’m Benjamin, a full-stack JavaScript developer with a strong focus on building responsive and reusable components. My experience includes 18 contributions on OnlyDust, where I’ve worked on various projects that emphasize clean code and efficient design.

How I plan on tackling this issue

I will create different table cell components by following these steps:

First, I will identify the repeating table cell structures across the app. This involves reviewing the codebase to spot common patterns in the table cells and noting where they are located for easy reference.

Next, I will create a new directory specifically for cell components. This will include adding a 'cells' folder under our existing components directory to keep everything organized.

Then, I will implement the reusable cell components. For instance, I’ll create a TokenInfosCell.tsx component to encapsulate the logic for rendering token information. I’ll extract the common logic and props needed for each cell type to ensure they are flexible and easy to use.

After that, I will refactor the existing code to utilize these new components. This means replacing the repetitive code with our new cell components while ensuring that the correct props are passed in to maintain functionality.

Finally, I will test the new components and the refactored tables to ensure everything works seamlessly. I’ll verify that all tables function as expected without any issues.

[JoelVR17]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

UI: Extract Repeated Table Cells into Components

Hello Starknet Quest 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 related to Extract Repeated Table Cells into Components. Below is my proposed approach for implementing this issue:

How I plan on tackling this issue

Implementation Plan

STEP 1: Identify repeated code across the codebase.
Description: I will review the codebase to locate instances where the same table cell code is duplicated, such as the code snippet found in collection-items-data-list-view.tsx.

STEP 2: Create the new component.
Description: I will create a new component named TokenInfosCell in /apps/arkmarket/src/components/cells/token-infos-cell.tsx. This component will encapsulate the repeated table cell logic to promote code reuse.

Example Code Snippet:

<Link
  prefetch={false}
  href={`/token/${token.collection_address}/${token.token_id}`}
  className="flex items-center gap-4"
>
  <Media
    src={token.metadata?.image}
    mediaKey={token.metadata?.image_key}
    alt={token.metadata?.name ?? "Empty NFT"}
    className="size-10 rounded-md object-contain"
  />
  <div className={cn("w-full", ellipsableStyles)}>
    {token.metadata?.name ?? token.token_id}
  </div>
</Link>

STEP 3: Refactor existing components. Description: I will replace the duplicated code in the existing components with the new TokenInfosCell component, ensuring that it receives the necessary props for rendering.

STEP 4: Testing. Description: I will conduct testing to ensure that the new component functions correctly and that the refactored components display the expected output.

Goal The goal is to enhance maintainability by reducing code duplication and creating a modular structure for the table cells used throughout the application.

I look forward to your feedback on my approach!

[kwiss]

i assigned you @SoarinSkySagar