<div align="center"> <img src="./nextjs_frontend/public/img/cryptocats_logo_transparent.png" width="70px"/> <br><br> <h1><strong>CryptoCats - Create, Breed and Sell some funny lookin' cats!</strong></h1>

Preview

</div> <br></br>  <summary>Table of Contents</summary> <ol> <li> <a href="#Description">Description</a> </li> <li> <a href="#Features">Features</a> </li> <li><a href="#built-with">Built With</a></li> <li><a href="#getting-started">Getting Started</a> <ul> <li><a href="#prerequisites">Prerequisites</a></li> <li><a href="#installation">Installation</a></li> <li><a href="#contracts-deployment">Contracts deployment</a></li> <li><a href="#config">Config</a></li> </ul> </li> <li><a href="#use">Use</a></li> </ol>

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

[x] 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)
[x] MyCats/Show - Display all the cats present in your collection;
[x] MyCats/Breed - Select two parents, breed a seebling out, and find out which characteristics you inherited from each!
[x] MyCats/Sell - Create a sell offer to list your cat on the marketplace!
[x] Marketplace - Buy some cats on the marketplace or simply remove your offers.

Built With

[][viem-url]

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 (<b>Do not paste your private key anywhere else!</b>);
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!

<div align="center"> <h2>Enjoy!!!</h2>

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

</div> <p align="right">(<a href="#top">back to top</a>)</p>

CryptoCats

Install / Use

README