How to Build a Web3 NFT Cross-Breeding Dapp with React, Solidity, and CometChat

What you will be building, see the at sepolia test net and the . live demo git repo Are you a blockchain enthusiast looking to explore the exciting world of non-fungible tokens (NFTs) and their unique capabilities? Are you interested in building a web3 application that allows users to cross-breed NFTs and create new, one-of-a-kind digital assets? If so, you've come to the right place. In this tutorial, we will walk you through the process of building a web3 NFT cross-breeding DApp using React, Solidity, and CometChat. React will serve as our front-end framework, providing a robust and interactive user interface. Solidity, the programming language for Ethereum smart contracts, will enable us to define the logic and behavior of our NFT cross-breeding functionality. Lastly, will empower us to integrate real-time chat functionality into our DApp, allowing users to interact and communicate with each other seamlessly. CometChat By the end of this tutorial, you will have gained valuable insights into: Developing a React application for NFT cross-breeding Developing the Solidity smart contracts with both minting and breeding functionalities Leveraging CometChat to incorporate real-time chat features into your DApp Whether you are an experienced developer or just starting your journey into web3 development, this tutorial will equip you with the knowledge and skills to create your very own NFT cross-breeding DApp. So, let's embark on this exciting journey together and unlock the potential of NFT cross-breeding in the blockchain realm. Get ready to dive into the fascinating intersection of React, Solidity, and CometChat – let's begin! Prerequisites You will need the following tools installed to build along with me: Node.js Yarn MetaMask React Solidity CometChat SDK Tailwind CSS I recommend watching the video below to learn how to set up your MetaMask for this project. https://www.youtube.com/watch?v=qnudOwva0fM&embedable=true Installing Dependencies Clone the starter kit and open it in VS Code using the command below: git clone https://github.com/Daltonic/tailwind_ethers_starter_kit dappBreeds cd dappBreeds Next, update the package.json with the snippet below. https://gist.github.com/Daltonic/e72c089e2a661253a97e878d8e21407d?embedable=true Please run the command in your terminal to install the dependencies for this project. yarn install Configuring CometChat SDK To configure the , please follow the steps provided below. Once completed, make sure to save the generated keys as environment variables for future use. CometChat SDK Head to Dashboard and create an account. STEP 1: CometChat Log in to the dashboard, only after registering. STEP 2: CometChat From the dashboard, add a new app called STEP 3: DappBreeds. Select the app you just created from the list. STEP 4: From the Quick Start copy the , , and , to your file. See the image and code snippet. STEP 5: APP_ID REGION AUTH_KEY .env Replace the placeholder keys with their appropriate values. REACT_COMET_CHAT REACT_APP_COMETCHAT_APP_ID=**************** REACT_APP_COMETCHAT_AUTH_KEY=****************************** REACT_APP_COMETCHAT_REGION=** The file should be created at the root of your project. .env Configuring the Hardhat script Navigate to the root directory of the project and open the " " file. Replace the existing content of the file with the provided settings. hardhat.config.js https://gist.github.com/Daltonic/3e7cc6f846338742ed5ceb8cdb2a1107?embedable=true This code configures Hardhat for your project. It includes importing necessary plugins, setting up networks (with localhost as the default), specifying the Solidity compiler version, defining paths for contracts and artifacts, and setting a timeout for Mocha tests. The Smart Contract File The following steps will guide you through the process of creating the smart contract file for this project: Create a new folder named inside the folder. contracts src Create new files named and inside the folder. DappBreeds.sol Base64.sol contracts Copy the provided codes below and paste it into their respective files and save. By following these steps, you will have successfully set up the necessary directory structure and created the and files, which will serve as the foundation for implementing the logic of the smart contract. DappBreeds.sol Base64.sol https://gist.github.com/Daltonic/91b4af6cd202eb84bcfc06d77035d81d?embedable=true The DappBreed smart contract is designed to facilitate the creation and breeding of AI-generated artworks as non-fungible tokens (NFTs). Let's provide an overview of its key components and functions: Contract Inheritance and Dependencies: DappBreed inherits from several other contracts, including ERC721, ERC721URIStorage, Ownable, and ReentrancyGuard. It also imports libraries such as Counters and Base64, as well as contracts from the OpenZeppelin library. Structs: TraitStruct: Represents the traits of an AI-generated artwork, including name, description, weapon, image URI, environment, rarity, breeding status, and parent tokens. MintStruct: Contains information about a minted NFT, such as its ID, owner, minting cost, timestamp, and associated TraitStruct. State Variables: baseURI: Stores the base URI for the metadata of NFTs. maxSupply: Indicates the maximum number of NFTs that can be minted. baseExtension and imageExtension: Define the file extensions for the metadata and image files. mintCost: Specifies the cost in Ether for minting an NFT. totalBalance: Tracks the total balance (in Ether) accumulated from minting fees. Mappings: minted: Maps the token ID to its associated MintStruct, storing information about each minted NFT. tokenIdExist: Tracks the existence of a token ID. Arrays: weapons: Contains a predefined list of weapon names used for generating AI artwork traits. environments: Holds a predefined list of environment names for AI artwork traits. rarities: An array to represent the rarity levels of AI artworks. Constructor: Initializes the contract with a name, symbol, baseURI, and maxSupply for the NFTs. Minting Functions: mintNft: Allows users to mint a new NFT by paying the required mintCost. breedNft: Enables users to breed two existing NFTs to create a new one, paying the mintCost. _performMinting: Internal function to perform the minting process, creating the NFT and updating relevant data. View Functions: getAllNfts: Returns an array of all minted NFTs. getMintedNfts: Retrieves an array of NFTs that have not been bred. getBreededNfts: Returns an array of NFTs that have been bred. getMyNfts: Retrieves an array of NFTs owned by the caller. getParentsOf: Returns an array of parent NFTs for a given token ID. getNft: Retrieves the MintStruct information for a specific token ID. buildMetadata: Internal function to build the metadata URI for a given token ID. Administrative Functions: setBaseURI: Allows the contract owner to update the baseURI for NFT metadata. Internal Utility Functions: _baseURI: Overrides the baseURI function from ERC721URIStorage to return the contract's baseURI. _burn: Overrides the _burn function from ERC721URIStorage to call the parent implementation. Helper Functions: randomNum: Generates a random number based on input parameters. currentTime: Retrieves the current timestamp. payTo: Sends Ether to a specified address. Modifier: nonReentrant: Prevents reentrancy attacks by enforcing a non-reentrant execution context. Inherited Functions: The contract inherits various functions from the imported contracts, such as _safeMint, _setTokenURI, and supportsInterface. The DappBreed smart contract combines the functionalities of ERC721, ERC721URIStorage, and Ownable contracts to provide a platform for minting, breeding, and managing AI-generated artworks as NFTs. Want to get a deeper understanding of NFT developments? Purchase the today! This comprehensive course will teach you what you need to know about building and deploying NFT marketplaces on Ethereum. "Fullstack NFT Marketplace (Course)" The Test Script The DappBreed test script is designed to test the functionalities and behaviors of the DappBreed smart contract. Here's an overview of the key tests and functions present in the script: Test Setup: The script initializes variables such as , , , and for the contract deployment. _maxSupply _name _symbol _baseUri It sets up the deployer and two user addresses as signers for testing purposes. Contract Deployment and Minting: The script deploys the DappBreed contract using the specified parameters. It uses the function to mint an NFT with a value of 0.005 Ether. mintNft The test checks the successful minting of the NFT and verifies the retrieved minted NFT and its ID. Minting Tests: The script includes tests to confirm the successful minting of multiple NFTs. It mints a second NFT using a different user address and checks the total number of minted NFTs. Breeding Tests: The script sets up a scenario for NFT breeding by minting another NFT with a different user address. It verifies the presence of both minted NFTs and the absence of any breeded NFTs. The test then uses the function to breed the previously minted NFTs. breedNft It checks the successful breeding of the NFT, the total number of owned NFTs, and the presence of breeded NFTs. Additionally, the test verifies the correctness of the parents and traits of the breeded child NFT. The DappBreed test script covers crucial aspects of the contract's functionality, including minting and breeding NFTs. It ensures that the contract behaves as expected and that the NFTs are generated and managed correctly. At the root of the project, create a folder if not existing called “ ”, copy and paste the code below inside of it. test https://gist.github.com/Daltonic/b097f21234660ccc94662525962ed24e?embedable=true By running on the terminal will test out all the essential function of this smart contract. **yarn hardhat test** The Deployment Script The DappBreed deployment script is responsible for deploying the DappBreed smart contract to the Ethereum network using the Hardhat development environment. Here's an overview of the script: Import Statements: The script imports the required dependencies, including ethers and the fs module for file system operations. main() Function: The function is an asynchronous function that serves as the entry point for the deployment script. main() Deployment Parameters: The script defines the deployment parameters, including the , , , , and . contract_name name symbol baseURI maxSupply These parameters specify the name, symbol, base URI, and maximum supply of the NFTs to be deployed. Contract Deployment: The script uses the method to obtain the contract factory for the contract. ethers.getContractFactory() DappBreed It deploys the contract by invoking the method on the contract factory with the specified parameters. deploy() The deployed contract instance is stored in the variable. contract Contract Deployment Confirmation: The script waits for the deployment to be confirmed by awaiting the function on the contract instance. deployed() Writing Contract Address to File: The script creates a JSON object containing the deployed contract address. It writes this JSON object to a file named in the specified path: . contractAddress.json ./src/abis/contractAddress.json If any error occurs during the file writing process, it is logged to the console. Logging Deployed Contract Address: If the contract deployment and file writing processes are successful, the deployed contract address is logged to the console. Error Handling: Any errors that occur during the deployment or file writing process are caught and logged to the console. The process exit code is set to 1 to indicate an error occurred. The DappBreed deployment script allows for the easy deployment of the DappBreed smart contract, and it generates a JSON file containing the deployed contract address for further usage within the project. In the root of the project, create a folder called “ ” and another file inside of it called if it doesn’t yet exist. Copy and paste the code below inside of it. scripts deploy.js https://gist.github.com/Daltonic/9dc34e335b4f280ea7b5d1b6a1a36696?embedable=true Next, run the yarn to deploy the smart contract into the network on a terminal. hardhat run scripts/deploy.js If you require additional assistance with setting up Hardhat or deploying your Fullstack DApp, I recommend watching this informative video that provides guidance and instructions. https://www.youtube.com/watch?v=6lIq8MCfaGE&embedable=true Developing the Frontend To start developing the frontend of our application, we will create a new folder called inside the directory. This folder will hold all the components needed for our project. components src For each of the components listed below, you will need to create a corresponding file inside the folder and paste its codes inside it. src/components Navbar Component The and components represent the user interface elements of the DappBreeds application's navigation bar. They display the website's logo, menu items, and a connect wallet button. Navbar MobileMenu The component adjusts its layout based on screen size, while the component is specifically designed for mobile devices. The component handles the logic for connecting the user's wallet. See code below: Navbar MobileMenu ConnectButton https://gist.github.com/Daltonic/e3ec6d5c91e501e1529e20aef08df5cc?embedable=true Hero Component The component represents a section of the DappBreeds application's homepage. It consists of two sub-components, and , and it arranges them in a responsive layout. Hero HeroActions HeroImage The component contains buttons for minting and breeding NFTs, along with associated logic for interacting with the blockchain. HeroActions The component displays an image related to the hero section. The component aims to engage users by showcasing the possibilities of creating and breeding NFTs, along with statistics related to artworks, artists, and breeds. See the code below: HeroImage Hero https://gist.github.com/Daltonic/242d32d36cf9892047610bc09a7dea0d?embedable=true Sponsors Component The component is responsible for displaying a list of sponsor logos on the DappBreeds website. It renders a list ( ) element with each sponsor's logo represented by an element. The logos are sourced from local image files ( , , , ) and displayed with a fixed width of 200 pixels while maintaining their aspect ratios. Sponsors ul img coinbase.png dropbox.png slack.png webflow.png The component utilizes flexbox and responsive design ( ) to align the logos horizontally on larger screens and vertically on smaller screens. The component enhances the visual appeal of the website and showcases the support of notable sponsors. md:flex-row Sponsors Please ensure that you have the copies of all the images found in inside folder in the directory of your project. this link assets src Use the code below to form the component. Sponsors https://gist.github.com/Daltonic/c9e0c50f1909f24d6bb8943821d4c243?embedable=true Trending & Trending Card Component The component displays a section on the DappBreeds website that showcases trending NFTs. It dynamically renders a heading based on the length of the collection, showing either "Trending" or "No minted NFTs yet...". It also includes the component to display a grid of NFT cards based on the provided collection. Trending nfts TrendingCards nfts The component manages the number of displayed cards and handles loading more cards when available. It allows users to add or remove NFTs from the lab and provides truncate functionality for displaying NFT information. The component is a central element for showcasing popular NFTs, providing interactivity, and enabling users to explore and engage with the NFT collection. Trending The component receives a prop and renders a grid of NFT cards based on the provided collection. It dynamically updates the displayed cards using the and hooks. TrendingCards collection **useState** useEffect Each card contains an image, name, description, mint cost, owner, and an action button. The component allows users to add or remove NFTs from the lab and offers a "Load more" button to fetch additional cards from the collection. With its grid layout and interactive features, enhances the visual representation of NFTs, promotes engagement, and enables users to explore and interact with the trending NFTs featured in the DappBreeds application. TrendingCards Use the codes below for creating each components, ensure they are in different files. https://gist.github.com/Daltonic/59c55ee87edd6d469977b964025a0edb?embedable=true Collection & Collection Card Component The component displays a collection of NFTs in a grid layout. It receives a prop containing the NFT data and an optional prop for the collection title. Collection collection title The component manages the number of displayed NFTs using the and hooks. It renders the component for each NFT in the state. The component also provides a "Load more" button to fetch additional NFTs from the collection when available. useState useEffect CollectionCard nfts The component represents an individual NFT card within the component. It receives an prop containing the NFT data and renders the card's image, name, description, and breeding information. CollectionCard Collection nft The component dynamically displays whether the NFT was bred or minted based on the data. It also includes a link to the detailed view of the NFT. enhances the visual representation of NFTs within the collection, providing concise information about each NFT and enabling users to navigate to specific NFT details for further exploration. nft CollectionCard Use the codes below to create their individual files. https://gist.github.com/Daltonic/590f3fadf625a9a0bcd4136267229e51?embedable=true Footer Component The component represents the footer section of the application. It is a static component that displays relevant information and links. See the code below. Footer https://gist.github.com/Daltonic/046fff492364e8d09acc38e75d510552?embedable=true Spacer Component The component is a simple utility component that creates vertical spacing in a layout by rendering empty elements. See the codes below. Spacer div https://gist.github.com/Daltonic/39fe3ecb273a3c4e63c64a24b8bdbe66?embedable=true Chat Button Component The component is a menu component that provides chat-related functionalities. It renders a button with an "Add" icon and displays a dropdown menu when clicked. ChatButton The dropdown menu options change based on the user's authentication status. If the user is not logged in, the menu displays options for signing up and logging in. If the user is logged in, the menu shows options for recent chats and logging out. Each menu item triggers a specific action, such as signing up, logging in, opening the list of recent chats, or logging out. The actions are asynchronous and utilize the function to display informative toast messages during the operations. toast.promise The component utilizes CometChat SDK and Tailwind CSS to offers a user-friendly way to interact with chat-related functionality in a concise and intuitive manner. See the code below. https://gist.github.com/Daltonic/72dd3c91af6ec2dbcfb1e5d30bb039f9?embedable=true Chat List Component The component displays a modal dialog that contains a list of conversations. It is triggered by the state variable. ChatList chatListModal The modal dialog appears as an overlay on top of the page content, providing a darkened background to focus on the conversation list. The component retrieves the user's conversations using the function and displays them in the list. getConversations Each conversation is rendered as a component, showing the conversation participant's avatar, truncated username, and last message. Conversation Clicking on a conversation triggers navigation to the chat room associated with that conversation, updates the global state accordingly, and retrieves the chat messages using the function. getMessages The component utilizes to generate unique avatars based on the conversation participant's username. The chat list modal can be closed by clicking the "X" button. See the codes for it below. react-identicons https://gist.github.com/Daltonic/cd82836946d9348817c8c30072d9f8ec?embedable=true Want to learn how to build an Answer-To-Earn DApp with Next.js, TypeScript, Tailwind CSS, and Solidity? Watch this video now! https://www.youtube.com/watch?v=Ubom39y5jX8&embedable=true This video is a great resource for anyone who wants to learn how to build decentralized applications and earn ethers. Now that we have covered all the components in this application, it is time to start coupling the various pages together. Let's start with the homepage. To begin developing the pages of our application, we will create a new folder called inside the directory. This folder will hold all the pages needed for our project. pages src For each of the pages listed below, you will need to create a corresponding file inside the folder, just as you did before with the components. src/pages Home Page The page component represents the home page of the application. It includes several components to provide the main features and content of the page. Home The components used in the page are: Home : This component displays a hero section with a catchy title and description, inviting users to explore the features of the application. Hero : This component showcases the logos of sponsors or partner companies, adding credibility and promoting collaboration. Sponsors : This component displays a section for trending items or NFTs. It receives the array as a prop, which represents the collection of recently minted NFTs. Trending minted : This component represents a collection section, showing a grid of NFTs. It is conditionally rendered based on the length of the array, which contains NFTs that have been created through breeding. Collection breeded By combining these components, the page provides a comprehensive overview of the application, including a hero section, sponsor logos, trending NFTs, and a collection of bred NFTs if any exist. See the codes below. Hom https://gist.github.com/Daltonic/dc536f400a907154f43ea3091f766956?embedable=true Details Page The page component represents a page that displays the details of a specific NFT. It fetches the NFT data using the function and renders the information once the data is loaded. Details getAnNft The components used in the page are: Details : This component displays the image of the NFT. It receives the object as a prop and renders the image using the property. NFTImage nft traits.image : This component displays the detailed information of the NFT, including the NFT's name, owner, description, mint cost, weapon, environment, and a button to initiate a chat with the owner. It receives the object as a prop and renders the information accordingly. NFTInfo nft : This component is used to display NFT cards. It is utilized within the page to showcase the inherited NFTs from parents if they exist. CollectionCard Details The page also conditionally renders the inherited NFTs section if the array has a length greater than zero. It displays the cards of the inherited NFTs using the component. Details parents CollectionCard Overall, the page provides a comprehensive view of a specific NFT, including its image, detailed information, and any inherited NFTs. See the codes below. Details https://gist.github.com/Daltonic/832b2dc129821f9ec3db0dbf66b560c5?embedable=true Collections Page The component represents a page that displays the user's collection of NFTs. It fetches the user's NFT collection using the function and renders the collection if it contains any NFTs. Collections getMyNfts The components used in the page are: Collections : This component displays a collection of NFT cards. It receives the array as a prop and renders the collection using the component. Collection collection CollectionCard The page fetches the user's NFT collection when the component mounts using the hook. Collections useEffect If the array has a length greater than zero, the page renders the component with the user's collection and provides a title of "Your Collection". If the array is empty, it displays a message indicating that the user has no collection yet. collection Collection collection Overall, the page provides a user-specific view of their NFT collection, showcasing the NFT cards using the component if the collection is not empty, or displaying a message if the collection is empty. See the code below. Collections Collection https://gist.github.com/Daltonic/c6b354fad8a1340d93fd9cedf60e9468?embedable=true The Lab Page The component represents a page where users can interact with the breeding feature of the application. Users can select NFTs from their collection, breed them, and perform related actions. Lab The page allows users to breed NFTs by selecting two NFTs from their collection as father and mother. It features three important buttons: Lab "Randomly Select": This button randomly selects two NFTs from the platform’s collection as father and mother, facilitating a quick breeding process. "Breed Now": This button initiates the breeding process with the selected father and mother NFTs. It triggers the function, which performs the necessary blockchain transactions for breeding. Success and error messages are displayed using the component. breedNft toast "Clear Selection": This button clears the current selection of father and mother NFTs, allowing users to choose different NFTs for breeding. The page also displays visual representations of the selected NFTs and checks the user's wallet connection before breeding. If the wallet is not connected, a warning message is displayed using the component. See the codes below. toast https://gist.github.com/Daltonic/ddb3bbce877f516278e6007ed3c4c24f?embedable=true The Chat Page The page allows users to engage in a chat conversation with another user. It features a chat interface with the following components: Chat Chat Messages: Messages exchanged between the users are displayed in a scrollable container. Each message is represented by the component, which shows the sender's avatar, username (truncated if necessary), message content, and the timestamp of the message. Message Message Input: Users can enter their messages in the input field at the bottom of the chat interface. When they submit the message, it is sent using the function and displayed in the chat conversation. The input field supports placeholder text and automatically adjusts its height as the user types. sendMessage Scroll to End: The chat interface automatically scrolls to the latest message, ensuring that the most recent content is always visible to the users. The page initializes the chat conversation by fetching existing messages using the function. It also listens for real-time updates using the function, allowing for a dynamic chat experience. Messages are stored in the global state using the function. See the codes below. Chat getMessages listenForMessage setGlobalState https://gist.github.com/Daltonic/5a71fc9ff974bd3beb2f33c65832d32c?embedable=true Great work! We have now completed all of the components and pages for this project. Let's now connect them to their respective services. We will start with the App component. App Entry Component The component is the entry point of the application and sets up the routing and main structure of the app. It includes the following components and functionality: App Navigation: The component is displayed at the top of the app, providing navigation links to different pages. Navbar Routing: The component from is used to define the routes and their corresponding components. Each route is associated with a specific URL path and renders the appropriate component when the path is matched. Routes react-router-dom Pages: The , , , , and components are defined as routes and rendered based on the current URL path. These components represent the different pages of the application, such as the home page, details page, collections page, lab page, and chat page. Home Details Collections Lab Chat Data Loading: The hook is used to trigger data loading functions when the component mounts. It checks if a wallet is connected using , loads data using , and checks the authentication state using . This ensures that necessary data and authentication are available before rendering the app. useEffect isWalletConnected loadData checkAuthState Chat Functionality: The component is conditionally rendered if there is a connected account. It provides a button to open the chat interface. The component is also rendered, displaying the list of chat conversations. ChatButton ChatList Styling and Toasts: The component is used to create vertical spacing within the app layout. The component is displayed at the bottom of the app. The component from is used to display toast notifications for user feedback. Spacer Footer ToastContainer react-toastify Replace the existing component with the code below. App.jsx https://gist.github.com/Daltonic/1ccdce85dbc23ee5ed3c7771619b0d02?embedable=true The Blockchain Service The blockchain service script provides various functions and utilities to interact with the blockchain and manage NFT-related operations. Here's an overview of the key functionalities: Wallet Connection: checks if the user's wallet (e.g., MetaMask) is connected and manages changes in the connected account. triggers the wallet connection process. isWalletConnected connectWallet NFT Operations: and are used to mint and breed NFTs, respectively. They interact with the blockchain contract, handle transactions, and update the corresponding NFT collections. mintNft breedNft NFT Data Retrieval: Functions such as , , , , , and fetch different types of NFT data from the blockchain contract. The retrieved data is structured and stored in the global state. getAllNfts getMintedNfts getBreededNfts getMyNfts getAnNft getParentsNft Data Loading: loads various NFT collections and related data, such as mint costs, when the application initializes. loadData Utility Functions: and convert between Wei and Ether units. transforms raw contract data into a structured format for easier consumption and sorting. toWei fromWei structuredMint Error Handling: logs any errors encountered during blockchain interactions. reportError Overall, the script facilitates wallet connection, NFT minting and breeding, data retrieval, and error handling for the blockchain-based NFT application. To use this code, you will need to create a new folder called inside the directory of your project. Inside the folder, you will need to create a new file called . Once you have created the file, you can copy and paste the code below into it. services src services blockchain.jsx https://gist.github.com/Daltonic/aa9b08873c8ab747e752365dea3ade22?embedable=true Please ensure that you update the environment variables to look like this: REACT_APP_COMETCHAT_APP_ID=**************** REACT_APP_COMETCHAT_AUTH_KEY=****************************** REACT_APP_COMETCHAT_REGION=** REACT_APP_RPC_URL=http://127.0.0.1:8545 The Chat Service The CometChat service script provides various functions and utilities for integrating CometChat into the application. Here's an overview of the key functionalities: Initialization: initializes the CometChat SDK with the provided app ID and region. initCometChat User Authentication: and handle user authentication with CometChat using the provided user ID (UID) and authentication key. They log in or sign up the user respectively and return a Promise with the user object. loginWithCometChat signUpWithCometChat User Logout: logs out the currently logged-in user from CometChat and clears the current user state in the global state. logOutWithCometChat User Authentication State: checks the authentication state of the user by fetching the currently logged-in user from CometChat and updates the current user state in the global state. checkAuthState Messaging: fetches the previous messages for a specific user, sends a text message to a specified receiver ID, and listens for incoming text messages. getMessages sendMessage listenForMessage Conversations: retrieves the conversations for the current user. getConversations The service script provides a set of functions to initialize CometChat, handle user authentication and logout, fetch and send messages, and manage conversation data. These functionalities enable real-time messaging and chat features in the application using the CometChat SDK. Continuing inside the folder, create a new file called . Once you have created the file, you can copy and paste the code below into it. services chat.jsx https://gist.github.com/Daltonic/c15252077d501ca5ee10f6ef2956927a?embedable=true Excellent! Now, let's work on the file, which serves as a state management library. store The Store File The service provides a centralized state management solution using the library. It offers functions for setting, getting, and using global state variables within the application. store react-hooks-global-state The available global state variables include , , , , , , , , , , , , and . connectedAccount chatListModal conversations messages nfts minted breeded collection breeds parents nft currentUser mintCost The service also includes a function, which truncates text to a specified length, allowing for the display of shortened text while maintaining readability. truncate Additionally, there are utility functions such as and that modify the global state variable, allowing the addition and removal of items in the "Lab" section of the application. addToLab remFromLab breeds To use this service, you will need to create a new folder called inside the directory of your project. Inside the folder, you will need to create a new file called . store src store index.jsx Once you have created the file, you can copy and paste the code below into it. https://gist.github.com/Daltonic/3c94f011f00ad9e426aa410a283b6260?embedable=true The Index files The file is the entry point for the application. It initializes the CometChat service, sets up dependencies, and renders the React application using the component within a . It creates a root element for rendering and sets up the necessary configurations for the application to start running. index.jsx App BrowserRouter To use this code, you will need to replace the code below inside of the and files in the folder of your project. index.jsx index.css src https://gist.github.com/Daltonic/aaecc185459ff8b336c21acbf89a464b?embedable=true Now you are officially done with the build, just execute to have the application running on the browser. yarn start Congratulations on building a Web3 NFT Cross-Breeding Dapp with real-time chat functionality using the CometChat SDK! If you are looking for a powerful and versatile chat SDK that can be used to add chat functionality to any application, I highly recommend trying out CometChat. CometChat offers a wide range of chat features, including 1-on-1 chat, group chat, file sharing, and more. It is also very easy to integrate with other platforms, making it a great choice for developers of all skill levels. Here is a link to the CometChat website where you can learn more about the SDK and how to get started. For more web3 resources, check out this video that teaches how to create a decentralized app by building a web3 lottery dapp, I recommend that you it. https://www.youtube.com/watch?v=mVxRzkvX_w0&embedable=true The video provides a hands-on tutorial on how to build a lottery dapp using NextJs, Tailwind CSS, and Solidity. Conclusion How to Build a web3 NFT Cross-Breeding Dapp with React, Solidity, and CometChat" is a transformative guide showcasing the fusion of blockchain, React, and real-time chat in creating an innovative NFT cross-breeding Dapp. The project leverages smart contracts for secure operations and offers an intuitive front-end interface. By incorporating CometChat, it enhances user engagement through real-time communication. This tutorial demonstrates the potential of web3 development in revolutionizing the NFT space, providing transparency and secure transactions. Through comprehensive testing, the smart contracts ensure reliability. Developers are encouraged to explore the vast possibilities of blockchain technology. For further learning, we recommends subscribing to our and . YouTube channel visiting our website for additional resources Till next time all the best! About Author I am a web3 developer and the founder of , a company that helps businesses and individuals build and launch decentralized applications. I have over 7 years of experience in the software industry, and I am passionate about using blockchain technology to create new and innovative applications. I run a where I share tutorials and tips on web3 development, and I regularly post articles online about the latest trends in the blockchain space. Dapp Mentors YouTube channel called Dapp Mentors Discord: Twitter: LinkedIn: GitHub: Website: Stay connected with us, join communities on Join Follow Connect Explore Visit