search

ByteBuildersLabs / Website

https://www.bytebeasts.games/
0 stars 6 forks source link

Create the first hook to connect to Ark and fetch any NFT collection #11

Open RolandoDrRobot opened 2 weeks ago

RolandoDrRobot commented 2 weeks ago

Description

Please use this repo as reference

ryzen-xp commented 2 days ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a Blockchain developer with experience in integrating NFT projects, having worked on projects like ArkProjectNFTs and Worldcoin-Bridge-Linea. I have solid knowledge of TypeScript, React, and API integration.

How I plan on tackling this issue

[1]=>Create a custom hook named useFetchNFTCollection to connect to the Ark API. [2]=>Pass the contract address to fetch and return the NFT collection data. [3]=>Place the hook in the src/hooks folder and ensure it integrates smoothly. [4]=>Reference the existing implementation in the Marketplace repo. [5]=>Test it in related components to confirm proper data fetching. [6]=>Please assign me, Sir/Madam.

Benjtalkshow commented 2 days ago

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

  1. I will create a custom hook named useFetchCollection in the hooks folder within the repository (src/hooks). This hook will accept the contract address of an NFT collection as a parameter and return the data fetched from the Ark API. The hook will handle asynchronous API calls, loading states, and error handling internally.
  2. The hook will handle potential errors (e.g., network issues or invalid contract addresses) by setting an error state, which can be displayed in the UI. The loading state will be used to provide feedback to the user while the data is being fetched.
  3. The hook will be designed for easy integration into the existing components like NftOwner and NftDetails.

Finally, I will ensure that i refer to the existing hook implementation in the Marketplace repo for consistency. This will ensure that our new hook aligns with the structure and best practices already established in the project.

joeperpetua commented 2 days ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hi guys, Joel from Dojo Coding. Would love to work on this issue. I have a few years of experience doing Full Stack. I never used the Ark API, but took a look at it and the example implementation and seems pretty doable. Also would be a good practice run for the moment we implement NFTs in Overdrive lol

PoulavBhowmick03 commented 2 days ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I'm Poulav Bhowmick, a Starknet Wolf. I am a software engineer at Invisible Studios, and a blockchain engineer with a robust background in TypeScript, Rust, Solidity Cairo, fullstack development and blockchain technology. My experience includes building robust applications, optimizing functionalities and blockchain integration. I have actively participated in events and open source contributions, enhancing my capability to tackle real-world tech challenges. My projects can be viewed on my GitHub Profile and OnlyDust Profile. Plus I´m active member of Starknet, Ethereum, Stellar ecosystem.

How I plan on tackling this issue

I will solve this issue by creating a custom hook named useCollection that leverages the Ark API to fetch details of a specific NFT collection using the provided contract address. The hook will use @tanstack/react-query to manage the data fetching, caching, and state management. I will implement a getCollection function to make the actual API call to the Ark Project's /v1/contracts/{contract_address} endpoint, which retrieves the contract details. This hook will reside in a newly created hooks folder in the project structure, allowing other components to access and display the collection data as needed. Additionally, I will set a refetch interval to ensure the data stays up-to-date. I will refer to the existing implementation in the referenced Marketplace repo to maintain consistency.

ETA - 2 days

Mario-Araya commented 2 days ago

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 a new hook, for example, useFetchNftCollection. In this hook, accept the contract address of the NFT collection as an argument. Use useEffect to trigger the data fetch when the component mounts or when the contract address changes. Inside the useEffect, make an API call to the ARK API's endpoint for retrieving the collection based on the provided contract address. Store the fetched data in a state variable using useState, and return the data and any loading or error states from the hook. Finally, ensure the hook is reusable in other components by importing and using useFetchNftCollection where needed, passing the relevant contract address.

0xdevcollins commented 2 days ago

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 useCollection custom hook for fetching NFT data from the Ark API, I would follow these steps:

Setup the Hook: I would create a new file in the hooks directory named useCollection.ts. API Integration: I would use fetch or axios to call the Ark API endpoint (https://api.arkproject.dev/nft-contracts/{contractAddress}/nfts) with the provided contract address. State Management: I would utilize React's useState to manage the fetched collection data, loading state, and any errors. Data Handling: I would use useEffect to trigger the API call when the contract address changes, updating the state accordingly. Return Values: I would return the collection data, loading state, and error state from the hook for use in other components. Usage: Finally, I would import this hook in my NftCollection component and pass the contract address to retrieve and display the collection data.

suhas-sensei commented 2 days ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

i have experience in game dev previously as personal projects and hoping to make use of them here and mark my first odhack contribution

How I plan on tackling this issue

I'm going to create a custom hook useCollection that focuses on collection-level performance optimization by implementing data streaming with Suspense boundaries and automatic background refreshing. The hook will use IndexedDB for local caching to minimize API calls, handle offline scenarios gracefully, and maintain a queue of pending fetches that sync when connectivity is restored - all while keeping the existing API interface.

raizo07 commented 2 days ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Hello, can I be assigned to work on this issue?

I'm a software developer with over 4 years experience

Here's my OnlyDust profile https://app.onlydust.com/u/raizo07

ETA: One day

deeseeker commented 2 days ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

I am a React developer with over two years of experience and have recently developed a strong interest in blockchain technology. I have valuable experience navigating codebases and I have recently implemented a similar task for Starknet React by implementing add token hook and writing a test for the hook.

As someone still learning, I am happy to take on the challenge to work with ark api.

How I plan on tackling this issue

Clone the project on my pc Spin it up following the documentation Review the existing codebase to understand how current hooks are implemented if any I plan to create the hook after review Implement the Hook Test the Hook Document the Hook

JoelVR17 commented 2 days ago

I am applying to this issue via OnlyDust platform.

My background and how it can be leveraged

Create the first hook to connect to Ark and fetch any NFT collection

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 Creating Custom Hook to Fetch NFT Collection Data

Objective

The goal is to create a custom hook that fetches data from a specific NFT collection using the Ark API. This hook will allow us to retrieve all elements of a collection by simply passing the contract address of the NFT contract. The fetched data will then be used in various components throughout the project.

Approach

  1. Custom Hook (useCollection):

    • A new custom hook named useCollection will be created inside the hooks folder of the repository.
    • The hook will accept the contract address of an NFT collection and return all the NFTs within that collection by fetching data from the Ark API.
    • This custom hook will follow a similar implementation to what is already present in the reference repository Marketplace repo, specifically the useCollection hook located here.

  2. Integration with Components:

    • The useCollection hook will be integrated into the following components/pages as required:
      • Page for viewing beast (#4): This page will use the hook to display the specific beast's NFT data.
      • Vaults for the beasts (#2): The hook will fetch data to display in the vaults section, ensuring proper rendering of the NFTs stored in each vault.
      • Page to watch other people’s beasts (#5): The hook will fetch and display a list of NFTs owned by other users.
      • Page showing all NFTs of the collection (#6): The hook will be used to render a page displaying all NFTs within the specified collection.

  3. API Usage:

    • The Ark API will be used to fetch the collection data. You can refer to the API documentation here for the available endpoints and required parameters.
    • The hook will make an HTTP request to the API and handle error states, loading states, and successful data retrieval. This ensures a smooth user experience when fetching NFT data.

  4. Project Structure:

    • The custom hook will be placed inside the hooks folder of the following directory: Website repo.
    • The hook will be modular, reusable, and can be imported into different components where needed.

  5. Testing:

    • After creating the hook, it will be tested to ensure proper functionality across different components.
    • Testing will involve verifying that the data is correctly fetched and displayed for each NFT collection and that error handling works as expected.

Definition of Done

Next Steps

JoelVR17 commented 2 days ago

@RolandoDrRobot thanks bro!

I'll work on it soon!