CryptoCats - Create, Breed and Sell some funny lookin' cats!

Table of Contents

1. Description
2. Features
3. Built With
4. Getting Started
   • Prerequisites
   • Installation
   • Contracts deployment
   • Config
5. Use

UPDATES:

Mars 2024

• Migrate to Sepolia testnet after Goerli deprecation (Dencun fork);

Oct 2023

• Added support for WalletConnect v2;
• Removed ethers.js in favor of Viem to follow Wagmi's updates;
• Refactored many components with new customs hooks;
• Moved the frontend app into its own folder for better readability and easier deployment;
• Removed all dependencies related to hardhat/contracts development and moved them to the hardhat folder;
• Upgrade all dependencies to the latest versions;
• Add favicons;

Dec 2022

CryptoCats Revisited. No more vanilla JS (which, despite being a huge mess, was quite an achievement in itself nonetheless), but a fast & modern app built with Hardhat (smart contracts) / Next.js (front-end) / ChakhraUI (components) / Wagmi (Web3) instead.

Description

Decentralized application (Dapp) deployed on Sepolia, but compatible with all EVM networks. Initially built as a part of the programming course: Ethereum Dapp Programming on academy.moralis.io.

Try it yourself: crypto-cats.netlify.app/

Features

• Factory - Design and Create your own Cat for FREE in the Cat Factory! When you're done, just click on the Create button to mint your cat! (Limited to 100 Cats)
• MyCats/Show - Display all the cats present in your collection;
• MyCats/Breed - Select two parents, breed a seebling out, and find out which characteristics you inherited from each!
• MyCats/Sell - Create a sell offer to list your cat on the marketplace!
• Marketplace - Buy some cats on the marketplace or simply remove your offers.

Built With

• 
• 
• 
• 
• 
• 
• 
• 

Getting Started

Prerequisites:

• Node.JS version ^18 installed;
• npm | yarn packages manager installed;
• hardhat installed via yarn add --dev hardhat (developed on v2.18.0).
• MetaMask, Coinbase Wallet or any web3 wallet compatible with WalletConnect installed.

Installation:

Clone the repo with the following command:

git clone https://github.com/Pedrojok01/CryptoCats

Contracts deployment

• Make sure you're on the root directory, then type the following command:

cd hardhat

• Once you are in the hardhat repo, install all dependencies with:

yarn install

To deploy your own smart contracts:

• Remove .example from the .env.example file and edit the file with your API KEYs for the networks you wish to use and your PRIVATE KEY (Do not paste your private key anywhere else!);

• Edit the hardhat.config.ts if needed, and the "deploy" script in the package.json file with the network needed;

• To deploy your smart contracts simply run the command below, and wait for the contract addresses and ABI to appear in your console:

  yarn deploy

• Replace the contract addresses (both CAT_CONTRACT & MARKETPLACE_CONTRACT_ADD) and the corresponding chains infos in the src/data/constant.ts file;

• And don't forget to have some funds ready if you want to buy some CryptoCats on the marketplace! Faucet for the Sepolia network;

On each deploy, make sure to:

• Change the CAT_CONTRACT_ADD and the MARKETPLACE_CONTRACT_ADD in src/data/constant.ts to your deployed contracts address;
• Edit the ABI files in src/data/abis/ if you made any changes to the smart contracts;
• Enable/disable/update the suitable networks in hardhat.config.ts, package.json & src/data/constant.ts;

Front-end deployment

Setup:

• Go back to the root directory with the following command:

cd ..

• Then move to the frontend folder by running:

cd nextjs_frontend

• Once you are in the nextjs_frontend repo, install all dependencies with:

yarn install

To deploy your frontend locally:

Remove .example from the .env.example file and edit the file with your own API KEYs;

You are now set to start your local server. Make sure you're still in the in the nextjs_frontend directory and type:

yarn dev

To deploy your front-end on Netlify:

• Upload your project to GitHub or GitLab;
• Make sure you have a Netlify account;
• Create a new site from the Netlify dashboard;
• Link your GitHub/GitLab account to Netlify;
• Select the repo you want to deploy;
• Add the .env variables to the Netlify dashboard;
• Deploy your site!

Enjoy!!!

⭐️ ... and don't forget to leave a star if you like it! ⭐️

(back to top)