OpenSeaクローンのエンコードを試みる

最初のプロジェクトの開始

元気を出してプロジェクトが始まるのを見て...?

先日ブロックチェーンに入ってキャンプ場をスタートさせたばかりで、Section 1を勉強していたとき.
もう15週間も経って、やっと最初のチームプロジェクトが始まりました.
もちろんこの間はPair Programmingで学んだことのために簡単なプロジェクトをしていましたが、今回はこの時間に学んだすべてのことを活用しようと思って、改めてドキドキして、私ができるかどうか心配していました.

スズメが黄鳥の後ろについていると,足が裂けた。

今回のテーマは,NFT Marketプラットフォームを用いて最も有名なOpenSeに従ってクローン符号化を行うことである.次の写真は私たちが目指すOpenSeの基本像です

もちろん、ここに展示されているExplore以外にも、現在人気のあるNFTランキング、カスタマーセンター、NFT取引、私の情報など様々なページがありますが、与えられた1週間で多くの目標を目指しすぎると、話にならないので、プロジェクトが始まる前に、チームメンバーと最低の目標値を決めて、一緒に暮らすことにします.
チームメンバーと会議をして達成した目標.

RopStenテストネット上で取引所用NFTを発行
取引所に

発行のNFTを展示し、

を送信する.

は、NFT

を取引するためのERC 20トークンを発行し、伝送する.
上記の目標を達成するには、3人のチームメンバーが1人ずつ責任を負うことにしました.
私は2番目のターゲットNFTの展示と受信を担当しています.

機能実装

使用するスタックと言語

JavaScript, CSS, Solidity, React, web3

Exploreページ

各NFTのカテゴリは、既存の情報を取引所に登録されていると仮定してページに直接送信します.
取引したいNFTをクリックすると、そのNFTの情報がContractに表示されます.

NFT伝送

最初に切り替えたページは、私が持っているNFTを表示する場所です.
このページにアクセスすると、Contractはアカウントが所有するNFTリストを読み込みます.
ここで、Test 1アカウントは6つのNFTを有し、そのうち2つのNFTはTest 2に送信される.

その後、metamaskはトランザクションが正常に完了したことを通知します.
Test 2アカウントに切り替えて、2つのNFTが正常に転送されたことを確認します.

今回のプロジェクトを振り返る。

プロジェクトから学んだこと

私がこの間学んだ概念を実際のプロジェクトに応用し、技術的な知識を強固にする機会があって嬉しいです.また、私が開発したすべての小さなプロジェクトとは異なり、チームプロジェクトの中で部分的にコミュニケーションを取るのも新しい良い経験です.

Problem

プロジェクトを始めたばかりの頃、チームメンバーと会議をしていたとき、サーバの開発やメンテナンスに気を使うよりも、サーバの代わりに契約にデータを追加したほうが、プロジェクトが始まることに気づきました.
しかし、やっているうちに、取引の価格や契約上の固定データが足りないと思っている人が多い.簡単なAPI、ノードを作成します.jsサーバまたはMySQLを使用して、必要なデータを個別に管理するとより良いです.

Try

作成の過程で、反応コードの中の状態が思ったより多いことがわかりましたので、Reduxを利用して最初からシステムの状態管理をしていたらどうなると思いますか?

Code & Git Repository

GitHub
OpenSea Cloneエンコーディングチームtim-berners-lee
Contract Solidity Code
(Solidity CodeはGitHubには追加されていませんが、個別に添付されています)

例)Fidenza.sol

// SPDX-License-Identifier: MIT
pragma solidity ^0.8.7;

import "@openzeppelin/contracts/token/ERC721/ERC721.sol";
import "@openzeppelin/contracts/utils/Counters.sol";
import "@openzeppelin/contracts/access/Ownable.sol";
import "@openzeppelin/contracts/token/ERC721/extensions/ERC721URIStorage.sol";
import "@openzeppelin/contracts/token/ERC721/extensions/ERC721Enumerable.sol";

contract Fidenza is ERC721URIStorage, Ownable, ERC721Enumerable {
    using Counters for Counters.Counter;
    Counters.Counter private _tokenIds;
    mapping(uint256 => uint256) price;

    constructor() public ERC721("Fidenza by Tyler Hobbs", "Fidenza") {}

    function _beforeTokenTransfer(
        address from,
        address to,
        uint256 tokenId
    ) internal override(ERC721, ERC721Enumerable) {
        super._beforeTokenTransfer(from, to, tokenId);
    }

    function _burn(uint256 tokenId)
        internal
        override(ERC721, ERC721URIStorage)
    {
        super._burn(tokenId);
    }

    function supportsInterface(bytes4 interfaceId)
        public
        view
        override(ERC721, ERC721Enumerable)
        returns (bool)
    {
        return super.supportsInterface(interfaceId);
    }

    function tokenURI(uint256 tokenId)
        public
        view
        override(ERC721, ERC721URIStorage)
        returns (string memory)
    {
        return super.tokenURI(tokenId);
    }

    function mintNFT(
        address recipient,
        string memory tokenURI,
        uint256 _price
    ) public onlyOwner returns (uint256) {
        _tokenIds.increment();
        uint256 newItemId = _tokenIds.current();

        price[newItemId] = _price;
        _mint(recipient, newItemId);
        _setTokenURI(newItemId, tokenURI);

        return newItemId;
    }

    function tokenPrice(uint256 tokenId) public view returns (uint256) {
        return price[tokenId];
    }
}