Crypto Trades – Opensea Clone using ERC721

Introduction to Crypto Trades - Opensea Clone using ERC721

Crypto Trades is an OpenSea clone, a popular platform for buying and selling digital assets, using ERC721 (Ethereum Request for Comments #721) token standard. ERC721 is a specification for creating unique, transferable, and tradable digital assets, such as art, collectibles, and gaming items. This tutorial will guide you through the process of setting up a Crypto Trades - Opensea Clone using ERC721, and demonstrate how to create, list, and trade digital assets.

Prerequisites

To follow this tutorial, you should have a basic understanding of:

1. Solidity: The programming language used to write smart contracts on the Ethereum blockchain.
2. JavaScript: The language used for the frontend and backend development of the platform.
3. Node.js: A JavaScript runtime environment.
4. Web3.js: A JavaScript library for interacting with the Ethereum blockchain.
5. ERC721 token standard: Familiarity with the token standard and its uses.

Tutorial: Creating a Crypto Trades - Opensea Clone using ERC721

Step 1: Set up a Local Development Environment

To get started, you will need to set up a local development environment. Install the following dependencies:

• Node.js: Install Node.js from the official website (https://nodejs.org/en/download/).
• npm (Node Package Manager): Comes bundled with Node.js.
• Truffle: A development framework for Ethereum smart contracts (https://truffleframework.com/).
• Ganache: A tool for managing and testing local Ethereum testnets (https://github.com/truffle-suite/ganache/).

Command Line

npm install truffle
npm install ganache-cli

Step 2: Create a New Truffle Project

Create a new Truffle project using the following command:

truffle init

Step 3: Set up the Smart Contract

In the contracts directory, create a new file called ERC721.sol. This file will contain the ERC721 token contract.

cd contracts
touch ERC721.sol

Paste the following code into ERC721.sol:

pragma solidity ^0.6.0;

import "https://github.com/OpenZeppelin/openzeppelin-solidity/contracts/token/ERC721/SafeERC721.sol";

contract ERC721 {
    mapping(address => mapping(uint256 => address)) public approvals;

    event Transfer(address indexed from, address indexed to, uint256 tokenId);

    constructor() public {}

    function balanceOf(address owner) public view returns (uint256) {
        return ownerbalances[owner];
    }

    function ownerOf(uint256 tokenId) public view returns (address) {
        return owners[tokenId];
    }

    function approve(address spender, uint256 tokenId) public {
        require(owners[tokenId] == msg.sender, "ERC721: transfer from is not allowed");
        require(spender!= address(0), "ERC721: approval to the zero address");

        approvals[msg.sender][tokenId] = spender;

        emit Approval(msg.sender, spender, tokenId);
    }

    function getApproved(uint256 tokenId) public view returns (address) {
        return approvals[msg.sender][tokenId];
    }

    function setApprovalForAll(address spender, bool _approved) public {
        require(msg.sender!= address(0), "ERC721: approval to the zero address");

        approvals[msg.sender][spender] = _approved;

        emit ApprovalForAll(msg.sender, spender, _approved);
    }

    function transferFrom(address from, address to, uint256 tokenId) public {
        require(from == msg.sender || isApprovedForAll(from, msg.sender), "ERC721: transfer from is not allowed");
        require(to!= address(0), "ERC721: transfer to the zero address");

        _transfer(from, to, tokenId);

        emit Transfer(from, to, tokenId);
    }

    function transfer(address to, uint256 tokenId) public {
        require(to!= address(0), "ERC721: transfer to the zero address");

        _transfer(msg.sender, to, tokenId);

        emit Transfer(msg.sender, to, tokenId);
    }

    function _transfer(address from, address to, uint256 tokenId) internal {
        require(owners[tokenId] == from, "ERC721: owner transfer is not allowed");
        require(to!= address(0), "ERC721: transfer to the zero address");

        owners[tokenId] = to;
        emit Transfer(from, to, tokenId);
    }
}

Step 4: Deploy the Smart Contract

Compile and deploy the ERC721 contract using Truffle:

truffle compile
truffle deploy --network ganache-cli

Step 5: Create the Frontend

Create a new file called app.js in the root directory of your project. This file will contain the JavaScript code for the frontend:

cd..
touch app.js

Paste the following code into app.js:

import Web3 from 'web3';
import {ERC721} from './contracts/ERC721.sol';

const web3 = new Web3(new Web3.providers.HttpProvider('http://localhost:8545'));

const erc721Address = '0x...' // replace with the deployed contract address
const erc721Contract = new web3.eth.Contract(ERC721.abi, erc721Address);

document.getElementById('form').addEventListener('submit', async (event) => {
  event.preventDefault();
  const owner = document.getElementById('owner').value;
  const tokenId = document.getElementById('tokenId').value;
  const buyer = document.getElementById('buyer').value;

  await erc721Contract.methods.transfer(buyer, tokenId).send({ from: owner });
  alert(`Token transferred successfully to ${buyer}`);
});

document.getElementById('approval-form').addEventListener('submit', async (event) => {
  event.preventDefault();
  const owner = document.getElementById('owner').value;
  const spender = document.getElementById('spender').value;
  const tokenId = document.getElementById('tokenId').value;

  await erc721Contract.methods.approve(spender, tokenId).send({ from: owner });
  alert(`Approval granted to ${spender} for token ${tokenId}`);
});

This code sets up a web3 instance, deploys the ERC721 contract, and creates two forms: one for transferring tokens and another for approving spenders.

Step 6: Run the Frontend

Run the frontend application using Node.js:

node app.js

This will start a local server, allowing you to interact with the frontend forms.

Step 7: Test the Platform

Open a new tab in your browser and navigate to http://localhost:3000 to access the frontend interface. You can create and transfer tokens, as well as approve spenders for tokens.

This concludes the tutorial on creating a Crypto Trades - Opensea Clone using ERC721. You now have a fully functional platform for buying, selling, and trading unique digital assets.