Create the vaults for the beasts

[RolandoDrRobot]

Description

• Please create component NftVault to show all the NFTs of my wallet
• This is only a UI issue

Dev notes

• This is component is not gonna read the tokens from the blockchain for now, but let's have It ready to show the data, the data are gonna be an array with this object inside (many times, for this example, It can be dummy data) 👇

{
  "name": "Mystic Animals #1",
  "description": "Mystic Animals is a collection that is only owned by the most fearless investors",
  "image": "https://gateway.ipfs.io/ipfs/Qmb711ppmGxLJRf4p5QDqmcKSaJHE5V1L3uMEe8Fixs5LR",
  "owner": "0x0528f12f903248512E8755773DC40b5917F85b49b451F743Fd8F5fe018c90C30"
}

• The new component should look something like this

import React from 'react';
import { Link } from "react-router-dom";
import './main.css';

interface nftMetaData {
  name: any,
  image: any,
  tokenId: any,
  owner: any,
}

function NftVault() {

  // for now, define collection as a array with the json elements provided above

  return (
    <>
      { <>
          <div className="nft-box section-tab yellow-border pb-2">
            <div className="collection row">
              { 
                animals.map(({ name, image, tokenId, owner }:nftMetaData) => {
                  if (owner === account) {
                    return <Link key={tokenId} to={`/nftroom/collection-name/${tokenId}`} className="col-4">
                            <div className="nft-card">
                              <img src={image} alt=""/>
                              <p>{name}</p>
                            </div>
                          </Link>
                  }
                })
              }
            </div>
          </div>
        </>
      }
    </>
  )
}

export default NftVault;

Please include this new component in this other component NftHall

• https://github.dev/ByteBuildersLabs/Website/blob/b63fc30048c51877e15608791de03b7040f567d4/src/components/NftHall/index.tsx

• This is a guide on how the layout should look (with the styles of the currect website)

Refences

• https://github.dev/ByteBuildersLabs/Website/blob/b63fc30048c51877e15608791de03b7040f567d4/src/components/NftHall/index.tsx

[Benjtalkshow]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a Full Stack Developer with extensive experience in blockchain development, specializing in Next.js, TypeScript, Node.js, and Rust. With over 25 contributions across projects in the OnlyDust ecosystem, I’ve developed strong proficiency in delivering high-quality solutions and resolving complex issues within tight deadlines. My experience spans frontend, backend, smart contract development, and the optimization and maintenance of scalable codebases.

How I plan on tackling this issue

I will create a new component called NftVault that will display NFTs from a user's wallet. This component will initially use dummy data to simulate the display of NFTs, and it will be integrated into the NftHall component for proper UI rendering. This component will iterate over the collection data and display it in a styled grid format using the existing CSS classes (nft-box, nft-card).

Lastly, I will make sure that this implementation of NftVault will provide a clean and reusable way to display NFT collections from the user's wallet. Thanks

[suhas-sensei]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

i have experience in game dev and nfts previously as personal projects and hoping to make use of them here. this is is my first odhack.

How I plan on tackling this issue

I will have an "NFT Gallery Experience" rather than the vault display-progressive loading patterns, smooth transitions and hover previews. Using CSS Grid with responsive NFT cards keeping aspect ratio there also will be a virtualized list in case of a very large collection of NFTs with placeholder states for future blockchain integration. The NFT cards should further be broken out into its very own sub-components and structured using atomic design architecture to ensure ease of maintainability.

[mariocodecr]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hii! My name is Mario Araya, I’m a Software Developer with 2+ years of experience. I have worked with backend technologies such as Cairo, Java, and C#, as well as frontend development using React, NextJS, and JavaScript/TypeScript. I’ve made contributions to open-source projects, completed a Starknet Bootcamp, exercises on NodeGuardians, finished Starklings, and participated in multiple hackathons. I’m also a member of the Dojo Coding community here in Costa Rica.

How I plan on tackling this issue

I start by defining the structure of the data, which will be an array of objects, each representing an NFT with properties such as id, name, image, description, price, and owner. In the NftVault component, use React to map over this array of NFT objects and display each NFT's details in individual cards, including the image, name, description, price, and owner information. Use dummy data to simulate the NFT objects for now. Style the component to present the NFTs in a clean and responsive layout.

[0xdevcollins]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi, I'm Collins a frontend and blockchain developer, and an active contributor on OnlyDust. You can check out my profile here: https://app.onlydust.com/u/0xdevcollins. This is my first time contributing to this repository, and I’m excited about the opportunity to contribute. Looking forward to collaborating!

How I plan on tackling this issue

To create the NftVault component for displaying NFTs in the user's wallet, I will first structure it to accommodate the provided dummy data format. This will involve defining an array containing objects with attributes like name, description, image, and owner. Using React, I will render a grid of NFT cards that showcase each NFT's name and image, implementing a Link for user interaction to view detailed NFT information.

I will ensure the component aligns with the existing website design by applying styles from main.css and will include a filter to display only NFTs owned by the current account.

Once the NftVault is developed, I will integrate it into the NftHall component by importing it and placing it appropriately within the existing layout. After integration, I will conduct testing to confirm that the component displays the dummy data correctly and that the overall application functionality remains intact. This approach will prepare the NftVault for future blockchain integration while enhancing the user interface.

[ShantelPeters]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

With experience in React and UI development, I can efficiently design and implement components that meet user needs while adhering to project standards.

How I plan on tackling this issue

will create the NftVault component to display NFTs using the provided dummy data structure. This component will utilize a simple mapping of the NFT data to render individual cards with links for further interaction. After implementing the component, I will integrate it into the NftHall component to ensure seamless functionality within the existing layout. I'll also ensure that styles are consistent with the current website design.

[aniruddhaaps]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

i have prior experience in typescript and would be happy to contribute

How I plan on tackling this issue

follow along the description and update in telegram accordingly

[MrRoudyk]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Software Engineer with 10 years of experience. For the past 5 years, I’ve specialized in HR Tech solutions, now used by tens of thousands of companies and hundreds of thousands of users. I have also contributed to open source development at OnlyDust (My OnlyDust Profile).

I’m passionate about exploring new technologies and currently looking to deepen my expertise in blockchain, smart contracts, and decentralized applications.

How I plan on tackling this issue

First, I will create the NftVault component using the provided template and dummy data. Then, I will integrate this component, ensuring that the styles match the current website design. Finally, I will test to verify that the NFTs are displayed correctly.

[lombardini-jeremias]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a passionate Software Developer currently embarking on my journey into Web3 development. My background includes proficiency in modern JS frameworks:
Frontend: ReactJS, AngularJS - Backend: NodeJS, NestJS
I am particularly enthusiastic about the potential of decentralized technologies and how Web3 is shaping the future of the web. I see this Hackathon as an exciting opportunity to deepen my skills and contribute to a Web3 project by applying my knowledge in front-end development and user experience design as first contributions.

How I plan on tackling this issue

Setting up Dummy Data:
Simulate the metadata using the provided structure and pass it into the component to ensure the UI is complete.

Component Structure:
The NftDetails component will utilize useParams() from React Router to capture the collectionName and tokenId from the URL.
I will display the NFT details (name, image, owner, tokenId, etc.) based on the collection and token selected by the user.

Dynamic Routing:
React Router will be used to generate dynamic routes for each NFT. For example, the route /nftroom/:collectionName/:tokenId will render the NftDetails component and display the specific NFT.
This will ensure that users can click on any NFT card in the vault and navigate to a detailed page for that specific NFT.

Reusability and Scalability:
The design will prioritize scalability. For example, if more NFT collections are added in the future, this component and route system can easily be extended without major refactors.

[JoelVR17]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Create the vaults for the beasts

Hello ByteBuilsdersLabs 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 this issue. Below is my proposed approach for implementing this issue:

How I plan on tackling this issue

Proposal for NftDetails Component

Objective

The goal is to create a UI component named NftDetails that displays detailed information about a specific NFT from the user’s wallet. This is a UI-only task, and the component will use dummy data to simulate NFTs without integrating blockchain data for now.

Approach

1. Component Structure:

   • The NftDetails component will display detailed information about a specific NFT, including:
     • Image: The NFT's visual representation.
     • Name: The name of the NFT.
     • Owner: The wallet address of the NFT's owner.
     • Description: A brief description of the NFT.
     • Token ID: The unique identifier for the NFT.
   • The component will include a transfer button, which will only be visible if the NFT owner matches the user's wallet address.

2. Component Layout:

   • The layout will feature a central image of the NFT with its details displayed below, including the owner's address and the token ID.
   • A "Go Back" button will be included to allow the user to return to the collection view, following a consistent design style for navigation.
   • The transfer button will be conditionally rendered based on whether the NFT belongs to the user.

3. Routing:

   • A new route will be added to the app, dynamically displaying the NFT details based on the collection name and token ID.
   • The route will be structured as /nftroom/:collectionName/:tokenId, and it will load the NftDetails component, passing both the collectionName and tokenId as URL parameters.

4. Collection Data (Dummy Data):

   • The NFT data will be represented by an array of objects, with each object containing:
     • Name: The name of the NFT.
     • Image URL: A link to the image representing the NFT.
     • Owner: The wallet address of the NFT's owner.
     • Token ID: The unique identifier for the NFT.
   • This data will simulate the NFTs, and the component will filter based on the provided collectionName and tokenId.

5. UI and Styling:

   • The visual design will follow the current styles of the website, with a focus on clean and responsive layouts.
   • TailwindCSS or a similar framework will be used to ensure responsiveness across different devices.
   • The design will incorporate an image, metadata about the NFT (name, owner, token ID), and a button to transfer ownership, following the same style conventions as the rest of the website.

6. Dynamic Functionality:

   • The component will dynamically display the NFT details based on the URL parameters (collectionName and tokenId).
   • The transfer button will only be visible if the nft.owner matches the account (the current user's wallet address).
   • Clicking the transfer button will trigger an action (currently no functionality as this is only a UI task).

7. Definition of Done:

   • The NftDetails component is created and displays detailed information about a specific NFT from the user’s wallet.
   • The component includes routing logic to dynamically load NFT details based on the collectionName and tokenId.
   • The UI is responsive and matches the current website’s style and design system.
   • A new route is added to the app's routing logic to handle the dynamic collectionName and tokenId and display the respective NFT details.
   • The component is prepared for future integration with real blockchain data.

8. Next Steps:

   • Design and implement the NftDetails component.
   • Add the necessary route to the app file.
   • Test the component across different screen sizes to confirm responsiveness.
   • Commit and push the changes to the repository, followed by a pull request for review.

[LazarusAA]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi, I'm Alvaro Lazarus, a Blockchain developer and a new member of Dojo Coding, I've worked heavily with TypeScript before which makes me confident that I can complete this issue smoothly. Also I've been following ByteBeasts for a while so it would be awesome for this to be my first contribution to the project.

How I plan on tackling this issue

• Simulate metadata using the provided structure to ensure the UI is functional.
• Use React Router's useParams() to capture and display the NFT details based on the selected collection and token.
• Implement dynamic routing with React Router to allow navigation to detailed pages for specific NFTs.
• Design the component and routing system for scalability, making it easy to extend for future NFT collections.

Thank you for the consideration

ETA: 48 hrs

[mariocodecr]

@RolandoDrRobot thanks i will working on