[ Front ] Refactor Dashboard to Display NFT Metadata Linked to Locks

[julienbrs]

Description

Enhance the Dashboard to display NFTs received for locked tokens, using mock data for now. Each NFT should contain metadata reflecting the details of the corresponding lock (e.g., Token ID, Amount, Duration).

Acceptance Criteria

• [ ] Refactor Dashboard to display NFT metadata in a visually structured format.
• [ ] Link each NFT to its corresponding lock in the mock data.
• [ ] Create a better reusable NFTCard component to display NFT metadata:
  • NFT ID
  • Lock details (Token ID, Amount, Duration)
• [ ] Replace the plain list of NFTs with a styled grid of NFTCard components.

Additional context

The NFTCard should dynamically reflect mock metadata associated with each NFT. This prepares the Dashboard for real contract data in the future.

Hints for Mock Data: You can improve the existing useMockData hook to include more detailed and realistic NFT metadata. Here's a suggested structure for the mock data:

• Locks (used in the Dashboard to represent the details of locked tokens):

  {
  id: "1",           // Unique ID for the lock
  tokenId: "1001",   // Token ID of the locked asset
  amount: 50,        // Amount of tokens locked
  duration: "30 days", // Duration of the lock
  status: "Locked"   // Status of the lock
  }

• NFTs (each NFT corresponds to a lock and contains metadata about it):

  {
  id: "NFT1",        // Unique NFT ID
  lockId: "1",       // ID of the lock this NFT corresponds to
  description: "NFT representing 50 tokens locked for 30 days", // Metadata description
  }

  Please also add an image attribute for NFT mock data.

Each NFTCard should display details fetched from the getNFTs method.

[ Hard Difficulty - Frontend, NFTs ]

[petersdt]

Is it okay if I tackle this?

[julienbrs]

Hi, I've assigned that issue to you @petersdt. You can ping me if you got any question, and please join TG if not already done: https://t.me/carbonableOD