Create the page for view beast

[RolandoDrRobot]

Description

• Please create component NftDetails 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 { useParams, Link } from 'react-router-dom';
import goBackButton from '../../assets/img/close.png';

import './main.css';

function NftDetails() {
  const { collectionName, tokenId }:any = useParams();

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

  return (
    <>
        <div className='nft-details'>
          <div className='nft'>
            <div className="section-title title-style-two text-center mb-60">
              <span>{collectionName}</span>
              <h2>
                <Link to={`/nftcollection/${collectionName}`}><span>{nft.name}</span></Link> 
              </h2>
            </div>
            <div className="text-center">
              <img src={nft.image} className="nft-image" alt=""/>
            </div>
            <p>Owner: 
              <Link to={`/nftowner/${nft.owner}`}>
                <span className="yellow m-0">{nft.owner}</span>
              </Link>
            </p>
            <p className="">{nft.description}</p>
            <p>Token ID: 
              <span className="m-0"> {nft.tokenId}</span>
            </p>
            {
              nft.owner === account 
              ? <button 
                  className="main-button mt-3" 
                  onClick={() => {}}
                >Tranfer NFT</button>
            }
            <Link to="/nftroom">
              <img src={goBackButton} className="nft-close" alt=""/>
            </Link>
          </div>
        </div> 
      }
    </>
  )
}

export default NftDetails;

Please create the new route for the collection component in the app file

<Route path='/nftroom/:collectionName/:tokenId' element={<NftDetails/>}/>

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

Refences

• https://github.dev/RolandoDrRobot/MonsterCapital-FrontEnd/blob/3ef7d934ffb159cd2fdcdbdf7601a303b33654a6/my-app/src/index.js
• https://github.dev/RolandoDrRobot/MonsterCapital-FrontEnd/blob/3ef7d934ffb159cd2fdcdbdf7601a303b33654a6/my-app/src/components/NftDetails/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 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

1. Build a React component that displays details of NFTs based on mock data. The component will show the NFT’s image, name, description, owner, and token ID, without yet reading from the blockchain.
2. Configure a route to view individual NFTs by collectionName and tokenId, ensuring dynamic navigation for different NFTs within a collection.

Lastly, I will follow the current website’s style, with a clear layout and easy-to-navigate structure, making it responsive across devices. Thanks

[Josue19-08]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

My name is Josué. I'm part of the Dojo Coding community and have worked on several projects, including some in Unity. I have experience with C#, .NET, Java, JavaScript, Angular, and Node.js. I love contributing to open-source projects, whether it's fixing bugs, adding new features, or improving documentation.

How I plan on tackling this issue

I will create the NftDetails component that will display the details of the NFT using mock data. I will set the path /nftroom/:collectionName/:tokenId to access the component and display the name, image, owner, and token ID of the NFT.

[derianrddev]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello, I'm Derian, a software engineer focused on full-stack web development, and I'm currently part of Dojo Coding. I have experience in frontend development using TypeScript and React. I would like to work on this issue and gain more experience. It would be an honor if this were my first issue on OnlyDust. I would really appreciate the opportunity to contribute and be part of this project!

How I plan on tackling this issue

I will study the codebase to understand the current structure and functionality. I will carefully read the issue description to understand the problem that needs to be solved. I will leverage all the resources provided in the issue to get a better grasp of the task. If I have any doubts, I will ask questions as soon as possible in the Telegram group. I will open a PR and wait for your feedback. I will make the necessary changes based on the PR review.

[Mario-Araya]

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 would first define the data structure as an array of objects containing properties like the NFT's name, image, description, price, and owner. Then, I'd break down the UI into key sections to display the NFT image, name, description, price, and owner's address. I'd create the component in React that accepts this list of NFTs as a prop and renders each one using map() in individual cards. Next, I'd apply basic CSS styles to give it a clean, appealing layout. Finally, I’d ensure the component is flexible enough to easily integrate real blockchain data in the future.

[lauchaves]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hey! I'm Lau Chaves, Im part of Dojo Coding Costa Rica! I would like to contribute to this issue!

I have over 5 years of experience working with JavaScript, React, and TypeScript, ruby...

My primary role has been as a front-end developer, and I have a keen eye for detail and a strong focus on mobile-first approaches. I ensure the quality of my work through rigorous self- QA processes. I have a solid knowledge of CSS, Sass, and styled-components.

How I plan on tackling this issue

Id follow this approach

• I’d use as base the react component provided
• I’ll have the component ready to use a list of the object provided to show the data
• Id add the new route for the collection in the app file
• Id follow the design provided using the current styles
• Id check all the references
• Id make sure it’s responsive and look as expected

[suhas-sensei]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

i have prior experience in game dev previously as personal projects and hoping to make use of them here. i hope this first contribution in odhack marks a new journy.

How I plan on tackling this issue

I add an interactive view for NFT with zoom gestures, scroll-driven metadata animation functionality for a floating action toolbar about quick actions like sharing and transfer, on-chain view. It even approaches skeleton loading states with lazy loading images for improving performance. The routing structure has yet to change.

[evgongora]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello my name is Erick! I am a systems engineering student with a focus on fullstack web development, currently working on various blockchain-based projects, including those utilizing Cairo and ZK proofs. My experience includes working with Next.JS, React for the frontend in multiple projects, and contributing to the open-source community through OnlyDust. My familiarity with these frameworks equips me to understand the nuances of these systems and ensure that the frontend is both correct and UX/UI driven.

I am part of Dojo Coding, and here is my OnlyDust profile: https://app.onlydust.com/u/evgongora.

How I plan on tackling this issue

I'll create the NftDetails component and add the new route to the App component. Let's start with the NftDetails component:

function NftDetails() {
  const { collectionName, tokenId }:any = useParams();

  // Dummy data for now
  const nfts = [
    {
      "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",
      "tokenId": "1"
    },
    // Add more dummy NFTs here if needed
  ];

  const nft = nfts.find(n => n.tokenId === tokenId);

  // Dummy account for now
  const account = "0x0528f12f903248512E8755773DC40b5917F85b49b451F743Fd8F5fe018c90C30";

  return (
    <div className='nft-details'>
      <div className='nft'>
        <div className="section-title title-style-two text-center mb-60">
          <span>{collectionName}</span>
          <h2>
            <Link to={`/nftcollection/${collectionName}`}><span>{nft.name}</span></Link> 
          </h2>
        </div>
        <div className="text-center">
          <img src={nft.image} className="nft-image" alt=""/>
        </div>
        <p>Owner: 
          <Link to={`/nftowner/${nft.owner}`}>
            <span className="yellow m-0">{nft.owner}</span>
          </Link>
        </p>
        <p className="">{nft.description}</p>
        <p>Token ID: 
          <span className="m-0"> {nft.tokenId}</span>
        </p>
        {
          nft.owner === account && 
          <button 
            className="main-button mt-3" 
            onClick={() => {}}
          >Transfer NFT</button>
        }
        <Link to="/nftroom">
          <img src={goBackButton} className="nft-close" alt=""/>
        </Link>
      </div>
    </div> 
  );
}

export default NftDetails;

I'll add the CSS file for the NftDetails component something like this:

.nft-details {
  padding: 20px;
}

.nft-image {
  max-width: 100%;
  height: auto;
  border-radius: 10px;
  margin-bottom: 20px;
}

.nft-close {
  position: absolute;
  top: 20px;
  right: 20px;
  width: 30px;
  height: 30px;
  cursor: pointer;
}

.yellow {
  color: #e
  4a101;
}

Update the App component to include the new route:

Add the import for the NftDetails component import NftDetails from './components/NftDetails';

Then, add the new route inside the Routes component:

<Routes>
   <Route path='/' element={<Game />} />
   <Route path='/nftroom' element={<NftRoom />} />
   <Route path='/roadmap' element={<Roadmap />} />
   <Route path='/game' element={<Game />} />
   <Route path='/nftroom/:collectionName/:tokenId' element={<NftDetails/>}/>
</Routes>

These a rough idea and would love to start working on it! :)

[ShantelPeters]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

have a solid understanding of React and have previously developed UI components that integrate seamlessly within existing applications. My experience includes handling routing and state management, making me well-equipped to implement the NftDetails component effectively.

How I plan on tackling this issue

I will create the NftDetails component using the provided dummy data structure to display detailed information about an NFT. I’ll utilize useParams to extract collectionName and tokenId from the URL, allowing dynamic content rendering based on these parameters. The component will include a link to the NFT owner and a transfer button for the owner. After implementing the component, I'll also add the necessary route to the main application file to ensure that the component can be accessed via the specified path.Finally, I’ll ensure that the design aligns with the current website’s layout and styles.

[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

Data Setup: Since the component won’t be fetching tokens from the blockchain at this point, I will use the provided "dummy data " to simulate the actual NFT metadata. This will ensure that the UI is functional and ready for testing.

Component Structure: I will build the " NftVault" component using the provided dummy data structure. The component will iterate over the animals array and display the NFTs that match the current user's account. Each NFT will be displayed as a clickable card that links to its corresponding detailed view in the NftRoom component. The layout will be implemented using a grid system to ensure a clear and visually appealing display of NFTs, following the style of the current website for consistency. I will ensure that if the user does not own any NFTs, a fallback message or UI state will be displayed.

Dynamic Routing: I will use React Router to create dynamic links for each NFT that takes the user to a detailed page for the specific NFT they select. The routing structure will follow the existing path format (e.g., /nftroom/collection-name/{tokenId}), making it easier to integrate into the current navigation system.

Responsive Design: The component will be fully responsive, ensuring that the layout adjusts smoothly on various screen sizes. I will apply CSS Grid or Flexbox to manage the grid system and ensure that the NFT cards display correctly, whether on desktop or mobile devices.

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.

Please feel free to reach out to me. I am genuinely excited about the first opportunity to tackle an issue and eager to contribute to the project. I look forward to hearing from you and am ready to get started as soon as possible.

[sasasamaes]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Full Stack developer with 5+ years of experience involved in the full software development lifecycle. My experience includes providing IT solutions for enterprises using JavaScript, React, TypeScript, Node.js, and MongoDB. Additionally, I am expanding my knowledge in Web3 technologies, particularly in Cairo and Solidity.

I am also a community leader and sensei at Dev.f, where I mentor and lead a vibrant community of developers and am a Dojo Coding Member.

My areas of interest include Web3, frontend, backend, and full-stack development.

How I plan on tackling this issue

We need to create a new component called NftDetails that will display all the NFTs of a wallet. For now, this is only a UI issue and doesn’t require integration with the blockchain.

{
  "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"
}

For the initial implementation, dummy data can be used to mock the array. • The new route for the component should be added in the main App file: <Route path='/nftroom/:collectionName/:tokenId' element={<NftDetails/>}/> • The styles should match the current website design (refer to the screenshot provided).

import React from 'react';
import { useParams, Link } from 'react-router-dom';
import goBackButton from '../../assets/img/close.png';
import './main.css';

function NftDetails() {
  const { collectionName, tokenId } = useParams();

  // Example of mocked data
  const nft = {
    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"
  };

  return (
    <div className='nft-details'>
      <div className='nft'>
        <div className="section-title text-center">
          <span>{collectionName}</span>
          <h2>
            <Link to={`/nftcollection/${collectionName}`}>
              {nft.name}
            </Link>
          </h2>
        </div>
        <div className="text-center">
          <img src={nft.image} alt={nft.name} className="nft-image" />
        </div>
        <p>Owner: 
          <Link to={`/nftowner/${nft.owner}`}>
            <span>{nft.owner}</span>
          </Link>
        </p>
        <p>{nft.description}</p>
        <p>Token ID: <span>{tokenId}</span></p>
        <Link to="/nftroom">
          <img src={goBackButton} alt="Close" className="nft-close" />
        </Link>
      </div>
    </div>
  );
}

export default NftDetails;

[JoelVR17]

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Create the page for view beast

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 aim is to create a UI component named NftDetails that displays detailed information about a specific NFT from the user's wallet. This component will serve as a dedicated page for each NFT, showcasing its attributes and providing navigation options. As a UI-only task, it will utilize dummy data for the demonstration and will not fetch any data from the blockchain at this stage.

Approach

1. Component Structure:

   • The NftDetails component will display detailed information about a specific NFT, including its name, image, owner, description, and token ID.
   • The component will read the collectionName and tokenId from the URL parameters to retrieve the specific NFT’s data.

2. Component Layout:

   • A structured layout will present the NFT details in a visually appealing manner, ensuring that users can easily read and navigate the information.
   • The layout will include:
     • Title Section: Displaying the collection name and the NFT name as a clickable link to the collection.
     • Image Display: A large view of the NFT image.
     • Owner Information: Displaying the owner's wallet address as a link to their NFT collection.
     • Description: A brief description of the NFT.
     • Token ID: Displaying the unique identifier for the NFT.
     • Transfer Button: A button for the owner to initiate a transfer of the NFT.

3. Routing:

   • A new route will be added for the NftDetails component, which will allow navigation to the details page of a specific NFT using the structure /nftroom/:collectionName/:tokenId.
   • This route will render the NftDetails component, passing the necessary parameters to display the corresponding NFT information.

4. NFT Data (Dummy Data):

   • The NFT data will be represented by an array of objects containing:
     • Name: The name of the NFT.
     • Image URL: A link to the image representing the NFT.
     • Description: A brief description of the NFT.
     • Owner: The wallet address of the NFT owner.
     • Token ID: The unique identifier for the NFT.
   • The component will define an example NFT based on the provided structure, ensuring it has all the necessary fields.

5. UI and Styling:

   • The component will adhere to the existing styles of the website, using CSS for layout and visual appeal.
   • A close button will be included, allowing users to navigate back to the NFT room, enhancing the user experience.

6. Dynamic Content Display:

   • The component will dynamically display the NFT information based on the URL parameters.
   • The transfer button will only be visible if the connected wallet address matches the NFT owner's address, ensuring that only the owner can initiate transfers.

7. Definition of Done:

   • The NftDetails component is created and displays detailed information for a specific NFT.
   • The component includes routing logic to allow navigation to the details of any NFT in the user’s wallet.
   • 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 parameters (collectionName and tokenId).
   • The component is ready for integration with actual data in future updates.

8. Next Steps:

   • Design and implement the NftDetails component.
   • Add the necessary route to the app file.
   • Test the component to ensure it displays the correct data based on the parameters.
   • Commit and push the changes to the repository, followed by a pull request for review.