Open RolandoDrRobot opened 2 months ago
I am applying to this issue via OnlyDust platform.
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.
NFT’s image, name, description, owner, and token ID,
without yet reading from the blockchain.Lastly, I will follow the current website’s style, with a clear layout and easy-to-navigate structure, making it responsive across devices. Thanks
I am applying to this issue via OnlyDust platform.
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.
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.
I am applying to this issue via OnlyDust platform.
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!
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.
I am applying to this issue via OnlyDust platform.
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.
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.
I am applying to this issue via OnlyDust platform.
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.
Id follow this approach
I am applying to this issue via OnlyDust platform.
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.
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.
I am applying to this issue via OnlyDust platform.
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.
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! :)
I am applying to this issue via OnlyDust platform.
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.
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.
I am applying to this issue via OnlyDust platform.
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.
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.
I am applying to this issue via OnlyDust platform.
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.
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;
I am applying to this issue via OnlyDust platform.
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:
NftDetails
ComponentThe 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.
Component Structure:
NftDetails
component will display detailed information about a specific NFT, including its name, image, owner, description, and token ID.collectionName
and tokenId
from the URL parameters to retrieve the specific NFT’s data.Component Layout:
Routing:
NftDetails
component, which will allow navigation to the details page of a specific NFT using the structure /nftroom/:collectionName/:tokenId
.NftDetails
component, passing the necessary parameters to display the corresponding NFT information.NFT Data (Dummy Data):
UI and Styling:
Dynamic Content Display:
Definition of Done:
NftDetails
component is created and displays detailed information for a specific NFT.collectionName
and tokenId
).Next Steps:
NftDetails
component.
Description
NftDetails
to show all the NFTs of my walletDev notes
Please create the new route for the collection component in the app file
Refences