OpenSeaクローンコード(項目1)

0.プロジェクト紹介

クローンエンコーディング成果物コード(Github) https://bit.ly/3LCe5zP

OpenSeとは? OpenSeaはP 2 P方式の市場で、暗号化コレクション、NFT(非表示ツールなし)ゲームプロジェクト、その他のイーサネットブロックチェーンベースのプロジェクトを含むデジタル資産の取引をサポートしている。 (出典:HashNet)

今回のチームプロジェクトではOpenSeのWebサイトをクローンコードしました.FrontendはReact、BackendはNodeを使用しています.jsとweb 3.jsを使用しました.スマートコンテストはSolidityを使用しています.ここでフロンテンドを担当しました.

1.ページ組織

ページは以下の通りです.

ホームページ:初回ログイン時に表示される画面 Explore:取引可能なNFTリストを出力する画面 Create:NFTの画面の作成と登録 ConnectWallet:クリック時にMetaMaskに接続

コード構造は以下の通りです.

├── App.js ├── components │ ├── Erc721.css │ ├── Erc721.js │ ├── Navbar.css │ ├── Navbar.js │ ├── Search.css │ ├── Search.js │ ├── TokenList.css │ └── TokenList.js ├── index.css ├── index.js ├── pages │ ├── Create.js │ ├── Detail.js │ ├── Explore.js └─ └── Home.js

2.コード説明

Navbar.js

// Navbar.js
import React, { useState} from 'react';
import './Navbar.css';
import Search from './Search';
import { Link } from 'react-router-dom';

const Navbar = () => {

	// 지갑 연결
	
	// 원래는 const로 해야되는데 warning 뜨고 페이지가 멈춰버려서 임시로 let을 씀 
	let [account, setAccount] = useState('');

	const connectWallet = async () => {
        account = await window.ethereum.request({
            method: "eth_requestAccounts",
        });
        setAccount(account[0]);
    };
	return (
			<div className="navbar">
					<Search />
				<ul className="link">
					<Link to="/" style={{ textDecoration: 'none', color: 'inherit' }}><li>Home</li></Link>
					<Link to="/explore" style={{ textDecoration: 'none', color: 'inherit' }}><li>Explore</li></Link>
					<Link to="/create" style={{ textDecoration: 'none', color: 'inherit' }}><li>Create</li></Link>
					<li calssName='metaConnect' style={{cursor: 'pointer'}}onClick={() => { 
						connectWallet(); console.log(account);
					}}>ConnectWallet</li>
				</ul>
			</div>
	);
};

export default Navbar;

サイト内の任意のページには、NFTを取得したり、他のページに閲覧したりするためのナビゲーションバー(Navigation Bar)が実装されています.シンプルなデザインのためにBootstrapを使用しました.
ここではuseStateをconstと宣言すべきであるが、constを使用するとページが止まる現象が発生し、letと宣言される.
ページ移動react-router-domを用いたLinkは、各テキストをクリックしたときに指定されたページに移動することを実現する.ConnetWalletは非同期で実現され、クリックするとMetaMaskに接続しているかどうかを尋ねるウィンドウが表示されます.
また、Linkを使用して、マウスポインタを変更して、マウスがテキストにぶら下がったときにクリックできるかどうかを区別します.ConnectWalletをLinkに実現するのは難しいので、CSS Style属性point: cursorで実現し、ユーザーの観点からクリックできるかどうかを区別することができます.
サブアセンブリはSearch.jsにロードされます.

Search.js

// Search.js
import React from 'react';
import './Search.css';

const Search = () => {

	return (
		<div class="container">
			<div class="row">
				<div class="col-md-6">
					<div id="custom-search-input">
						<div class="input-group col-md-12">
							<input type="text" class="form-control input-lg" placeholder="Search..." />
							<span class="input-group-btn">
								<button class="btn btn-info btn-lg" type="button">
									<i class="glyphicon glyphicon-search"></i>
								</button>
							</span>
						</div>
					</div>
				</div>
			</div>
		</div>
	);

}

export default Search;

Navbar.jsから組み込まれたサブアセンブリは、Bootstrapも利用しています.

Home.js

// Home.js
import React from 'react';
import { Link } from 'react-router-dom';

const Home = () => {

	const HeadText = "Discover, collect, and sell extraordinary NFTs"
	const DescText = "OpenSea is the world's first and largest NFT marketplace"

	return(
		<div>
			<div style={{float: 'left', width: '40%', padding: '3% 3% 3% 3%', margin: 'auto'}}>
					<div style={{margin: "auto"}}>
						<h1 style={{textAlign: 'left'}}>{HeadText}</h1>
						<h3 style={{textAlign: 'left', color: 'gray'}}>{DescText}</h3>
					</div>
					<div style={{display: "flex", marginTop: "10%", justifyContent: "center"}}>
						<Link to="/explore" style={{marginRight: "5%"}}><button type="button" class="btn btn-primary btn-lg" style={{width: "100%", margin: "auto"}}>Explore</button></Link>
						<Link to="/create"><button type="button" class="btn btn-outline-primary btn-lg" style={{width: "100%", margin: "auto"}}>Create</button></Link>
					</div>
			</div>
			<div className="div-right" style={{float: 'right', width: '55%', padding: '3% 3% 3% 3%', margin: 'auto'}}>
				<img src="https://www.coindeskkorea.com/news/photo/202103/73065_10919_4125.jpg" width="100%" height="100%" alt='beeple_nft_img'></img>
			</div>
		</div>
	);
}

export default Home;

ウェブサイトのメイン画面として、画面右側にはNFT画像と左側に/Exploreページと/Createページに移動可能なボタンが配置されています.ボタンのCSS StyleにはBootstrapが採用されています.

Explore.js

// Explore.js
import React from 'react';
import TokenList from '../components/TokenList';

const Explore = () => {

	return(
		<div>
			<TokenList />
		</div>
	);
};

export default Explore;

各NFTの情報がロードされ、リストに表示されます.サブアセンブリは、TokenList.jsおよびErc721.jsに組み込まれる.

Create.js

// Create.js
import React from 'react';

const Create = () => {
	return(
		<div style={{justifyContent: 'center', width: '50%', padding: '3% 3% 3% 3%', margin: 'auto'}}>
			<div>
				<h3>사진 등록</h3>
				<button class='btn btn-outline-primary btn-lg' style={{width: '100%', height: '450px'}}>
				<i class='glyphicon glyphicon-picture' style={{fontSize: '500%'}}></i>
				</button>
			</div>
			<div>
				<h3>이름*</h3>
				<input style={{textAlign: 'left', width: '100%'}}></input>
			</div>
			<div>
				<h3>외부링크</h3>
				<input style={{textAlign: 'left', width: '100%'}}></input>
			</div>
			<div>
				<h3>설명</h3>
				<input style={{textAlign: 'left', width: '100%', height: '175px'}}></input>
			</div>
			<div style={{paddingTop: '5%'}}>
				<button type="button" class="btn btn-primary btn-lg" style={{width: "100%"}}>등록</button>
			</div>
		</div>
	);
}

export default Create;

ユーザがNFT登録時に入力した値は、input形式で実現される.

3.回顧

牧業をしている程度ですが、今まで学んだことは忘れてしまったようです.特に実装されていない部分(web 3.jsで契約を接続したりNFTリストを実装したりするなど)は、非常に残念です.Reactはまだ難しいですが、今回の番組で親しくなりました(?)web3.js度に慣れるべきだと思います.