Merge branch 'master' of https://github.com/haerong22/Study
This commit is contained in:
haerong22
149
blockchain/nft-ex/contracts/nft.sol
Normal file
149
blockchain/nft-ex/contracts/nft.sol
Normal file
@@ -0,0 +1,149 @@
|
||||
// SPDX-License-Identifier: MIT
|
||||
pragma solidity ^0.8.7;
|
||||
|
||||
import "@openzeppelin/contracts/token/ERC721/extensions/ERC721Enumerable.sol";
|
||||
import "@openzeppelin/contracts/utils/Counters.sol";
|
||||
|
||||
contract MintNftToken is ERC721Enumerable {
|
||||
using Counters for Counters.Counter;
|
||||
|
||||
Counters.Counter private _tokenIds;
|
||||
|
||||
//constructor(string memory _name, string memory _symbol) ERC721(_name, _symbol) {}
|
||||
constructor() ERC721("iki", "jquery_symbol") {}
|
||||
|
||||
mapping(uint =>string ) public tokenURIs ;
|
||||
|
||||
function tokenURI(uint _tokenId) override public view returns (string memory) {
|
||||
return tokenURIs[_tokenId] ;
|
||||
}
|
||||
|
||||
|
||||
function mintNFT( string memory _tokenURI) public returns (uint256) {
|
||||
_tokenIds.increment();
|
||||
|
||||
uint256 tokenId = _tokenIds.current();
|
||||
tokenURIs[tokenId] = _tokenURI;
|
||||
|
||||
_mint(msg.sender, tokenId);
|
||||
|
||||
return tokenId;
|
||||
}
|
||||
|
||||
|
||||
|
||||
struct NftTokenData {
|
||||
uint256 nftTokenId;
|
||||
string nftTokenURI ;
|
||||
uint price ;
|
||||
}
|
||||
|
||||
function getNftTokens(address _nftTokenOwner) view public returns (NftTokenData[] memory) {
|
||||
uint256 balanceLength = balanceOf(_nftTokenOwner);
|
||||
//require(balanceLength != 0, "Owner did not have token.");
|
||||
|
||||
NftTokenData[] memory nftTokenData = new NftTokenData[](balanceLength);
|
||||
|
||||
for(uint256 i = 0; i < balanceLength; i++) {
|
||||
uint256 nftTokenId = tokenOfOwnerByIndex(_nftTokenOwner, i);
|
||||
string memory nftTokenURI = tokenURI(nftTokenId);
|
||||
uint tokenPrice = getNftTokenPrice(nftTokenId);
|
||||
nftTokenData[i] = NftTokenData(nftTokenId , nftTokenURI, tokenPrice );
|
||||
}
|
||||
|
||||
return nftTokenData;
|
||||
|
||||
}
|
||||
|
||||
//판매 등록
|
||||
mapping(uint256 => uint256) public nftTokenPrices;
|
||||
uint256[] public onSaleNftTokenArray;
|
||||
|
||||
function setSaleNftToken(uint256 _tokenId, uint256 _price) public {
|
||||
address nftTokenOwner = ownerOf(_tokenId);
|
||||
|
||||
require(nftTokenOwner == msg.sender, "Caller is not nft token owner.");
|
||||
require(_price > 0, "Price is zero or lower.");
|
||||
require(nftTokenPrices[_tokenId] == 0, "This nft token is already on sale.");
|
||||
require(isApprovedForAll(nftTokenOwner, address(this)), "nft token owner did not approve token.");
|
||||
|
||||
nftTokenPrices[_tokenId] = _price;
|
||||
onSaleNftTokenArray.push(_tokenId); //판매중인 nft list
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
// 판매리스트
|
||||
function getSaleNftTokens() public view returns (NftTokenData[] memory ){
|
||||
uint[] memory onSaleNftToken = getSaleNftToken();
|
||||
NftTokenData[] memory onSaleNftTokens = new NftTokenData[](onSaleNftToken.length);
|
||||
|
||||
for(uint i = 0; i < onSaleNftToken.length; i ++){
|
||||
uint tokenId = onSaleNftToken[i];
|
||||
uint tokenPrice = getNftTokenPrice(tokenId);
|
||||
onSaleNftTokens[i] = NftTokenData(tokenId, tokenURI(tokenId), tokenPrice) ;
|
||||
}
|
||||
|
||||
return onSaleNftTokens;
|
||||
|
||||
}
|
||||
|
||||
|
||||
function getSaleNftToken() view public returns (uint[] memory ){
|
||||
return onSaleNftTokenArray ;
|
||||
}
|
||||
|
||||
|
||||
function getNftTokenPrice(uint256 _tokenId) view public returns(uint256){
|
||||
return nftTokenPrices[_tokenId];
|
||||
}
|
||||
|
||||
|
||||
|
||||
//구매함수
|
||||
function buyNftToken(uint256 _tokenId) public payable {
|
||||
uint256 price = nftTokenPrices[_tokenId];
|
||||
address nftTokenOwner = ownerOf(_tokenId);
|
||||
|
||||
require(price > 0, "nft token not sale.");
|
||||
require(price <= msg.value, "caller sent lower than price.");
|
||||
require(nftTokenOwner != msg.sender,"caller is nft token owner.");
|
||||
require(isApprovedForAll(nftTokenOwner, address(this)), "nft token owner did not approve token.");
|
||||
|
||||
|
||||
payable(nftTokenOwner).transfer(msg.value);
|
||||
|
||||
IERC721(address(this)).safeTransferFrom(nftTokenOwner, msg.sender, _tokenId);
|
||||
|
||||
|
||||
//판매 리스트에서 삭제
|
||||
removeToken(_tokenId);
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
function burn( uint256 _tokenId) public{
|
||||
address addr_owner = ownerOf(_tokenId);
|
||||
require( addr_owner == msg.sender, "msg.sender is not the owner of the token");
|
||||
_burn(_tokenId);
|
||||
removeToken(_tokenId);
|
||||
}
|
||||
|
||||
|
||||
|
||||
function removeToken(uint256 _tokenId) private {
|
||||
|
||||
nftTokenPrices[_tokenId] = 0;
|
||||
|
||||
for(uint256 i = 0; i<onSaleNftTokenArray.length; i ++){
|
||||
if(nftTokenPrices[onSaleNftTokenArray[i]] ==0){
|
||||
onSaleNftTokenArray[i] = onSaleNftTokenArray[onSaleNftTokenArray.length -1] ;
|
||||
onSaleNftTokenArray.pop();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
349
blockchain/nft-ex/index.html
Normal file
349
blockchain/nft-ex/index.html
Normal file
@@ -0,0 +1,349 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
|
||||
<head>
|
||||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
<!-- Bootstrap CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
|
||||
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
|
||||
|
||||
|
||||
<link rel="stylesheet" href="./css/style.css">
|
||||
|
||||
<!-- jquery -->
|
||||
<script src="https://code.jquery.com/jquery-1.12.4.min.js" crossorigin="anonymous"></script>
|
||||
<script src="./js/jscript.js"></script>
|
||||
|
||||
|
||||
<!-- ipfs -->
|
||||
<script src="./js/buffer.js"></script>
|
||||
<script src="https://unpkg.com/ipfs-api/dist/index.js" crossorigin="anonymous"></script>
|
||||
|
||||
<!-- blockchain-->
|
||||
<script type="text/javascript" src='./js/abi.js'></script>
|
||||
<script type="text/javascript" src='./js/web3.min.js'></script>
|
||||
|
||||
<script>
|
||||
|
||||
$(window).load(async function () {
|
||||
var contractAddress;
|
||||
//블록체인 네트워크 선택하기
|
||||
var blockChainNetwork = localStorage.getItem("blockChainNetwork")
|
||||
$("#selectNetwork").val(blockChainNetwork).prop("selected", true);
|
||||
|
||||
|
||||
if (blockChainNetwork == "MATIC_MUMBAI") {
|
||||
contractAddress = contractAddress_MATIC_MUMBAI;
|
||||
}
|
||||
|
||||
else if (blockChainNetwork == "ETH_RINKEBY") {
|
||||
contractAddress = contractAddress_ETH_RINKEBY;
|
||||
}
|
||||
|
||||
|
||||
if (typeof web3 !== "undefined") {
|
||||
console.log("web3가 활성화되었습니다");
|
||||
|
||||
$("#resultbrowsers").text("메타마스크를 로그인 해주세요!");
|
||||
|
||||
if (web3.currentProvider.isMetaMask == true) {
|
||||
$("#resultbrowsers").text("메타마스크가 활성화되었습니다");
|
||||
try {
|
||||
|
||||
accounts = await ethereum.request({
|
||||
method: "eth_requestAccounts"
|
||||
});
|
||||
|
||||
$("#showAccount").text(accounts);
|
||||
//web3
|
||||
window.web3 = new Web3(window.ethereum);
|
||||
|
||||
var mintingEvent = await new window.web3.eth.Contract(
|
||||
abiobj,
|
||||
contractAddress
|
||||
);
|
||||
|
||||
|
||||
} catch (error) {
|
||||
console.log(`error msg: ${error}`);
|
||||
$("#resultbrowsers").text("메타마스크를 로그인 해주세요!");
|
||||
return false;
|
||||
}
|
||||
} else {
|
||||
$("#resultbrowsers").text("메타마스크를 사용할 수 없니댜.");
|
||||
}
|
||||
} else {
|
||||
$("#resultbrowsers").text("web3를 찾을 수 없습니다.");
|
||||
}
|
||||
|
||||
//ipfs
|
||||
const IPFS_URL = "https://ipfs.io/ipfs/";
|
||||
const IPFS_API_URL = "ipfs.infura.io";
|
||||
const ipfs = window.IpfsApi(IPFS_API_URL, "5001", { protocol: "https" }); // Connect to IPFS
|
||||
|
||||
$("#btn_uploadfile").on("click", function () {
|
||||
if ($("#uploadfile").val() == "") {
|
||||
alert("대표이미지를 입력해주세요");
|
||||
$("#uploadfile").focus();
|
||||
return;
|
||||
}
|
||||
|
||||
var reader = new FileReader();
|
||||
reader.onloadend = function () {
|
||||
//console.log("reader.result" + reader.result);
|
||||
var buf = buffer.Buffer(reader.result); // Convert data into buffer
|
||||
ipfs.files.add(buf, (err, result) => {
|
||||
// Upload buffer to IPFS
|
||||
if (err) {
|
||||
console.error(err);
|
||||
return;
|
||||
}
|
||||
|
||||
var hash_img_url = IPFS_URL + result[0].hash;
|
||||
|
||||
//console.log(`Url --> ${hash_img_url}`);
|
||||
$("#ipfs_file_url").text(hash_img_url);
|
||||
$("#ipfs_file_url").attr("href", hash_img_url);
|
||||
$("#hash_img_url").val(hash_img_url);
|
||||
});
|
||||
};
|
||||
|
||||
//console.log($('input#uploadfile')[0].files[0]);
|
||||
reader.readAsArrayBuffer($("input#uploadfile")[0].files[0]); // Read Provided File
|
||||
});
|
||||
|
||||
$("#bnt_mint").on("click", function () {
|
||||
//https://docs.opensea.io/docs/metadata-standards
|
||||
/*
|
||||
{
|
||||
"description": "Friendly OpenSea Creature that enjoys long swims in the ocean.",
|
||||
"external_url": "https://openseacreatures.io/3",
|
||||
"image": "https://storage.googleapis.com/opensea-prod.appspot.com/puffs/3.png",
|
||||
"name": "Dave Starbelly",
|
||||
"attributes": [ ... ],
|
||||
}
|
||||
*/
|
||||
|
||||
var name = $("#name").val();
|
||||
var hash_img_url = $("#hash_img_url").val();
|
||||
var description = $("#description").val();
|
||||
var category_val = $("select[name=category] option:selected").text();
|
||||
var metaData = {};
|
||||
var attributes = [];
|
||||
|
||||
if (name == "") {
|
||||
alert("발행자를 입력해주세요");
|
||||
$("#name").focus();
|
||||
return false;
|
||||
}
|
||||
|
||||
if (hash_img_url == "") {
|
||||
alert("대표이미지를 업로드해주세요");
|
||||
$("#uploadfile").focus();
|
||||
return false;
|
||||
}
|
||||
|
||||
if (category == "선택하세요") {
|
||||
alert("카테고리를 선택하세요!");
|
||||
$("#category").focus();
|
||||
return false;
|
||||
}
|
||||
|
||||
if (description == "") {
|
||||
alert("description을 입력해주세요");
|
||||
$("#description").focus();
|
||||
return false;
|
||||
}
|
||||
|
||||
attributes.push({ trait_type: "category", value: category_val });
|
||||
|
||||
metaData["name"] = name;
|
||||
metaData["attributes"] = attributes;
|
||||
metaData["description"] = description;
|
||||
metaData["image"] = hash_img_url;
|
||||
|
||||
console.log(JSON.stringify(metaData));
|
||||
|
||||
var buf = buffer.Buffer.from(JSON.stringify(metaData));
|
||||
ipfs.files.add(buf, (err, result) => {
|
||||
// Upload buffer to IPFS
|
||||
if (err) {
|
||||
console.error(err);
|
||||
return;
|
||||
}
|
||||
var hash_meta_url = IPFS_URL + result[0].hash;
|
||||
console.log(`hash_meta_url --> ${hash_meta_url}`);
|
||||
|
||||
// mint function
|
||||
setMint(hash_meta_url);
|
||||
});
|
||||
});
|
||||
|
||||
|
||||
|
||||
async function setMint(hash_meta_url) {
|
||||
if (mintingEvent != null) {
|
||||
try {
|
||||
var accounts = await web3.eth.getAccounts();
|
||||
var receiptObj = await mintingEvent.methods.mintNFT(hash_meta_url).send({ from: accounts[0] });
|
||||
|
||||
console.log(receiptObj);
|
||||
$("#resultbox").text("처리결과 \n" + JSON.stringify(receiptObj));
|
||||
|
||||
} catch (error) {
|
||||
console.log(error);
|
||||
$("#resultbox").text("처리결과 \n" + error);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<title>NFT</title>
|
||||
</head>
|
||||
|
||||
|
||||
|
||||
|
||||
<body>
|
||||
<input type="hidden" id="hash_img_url" name="hash_img_url" />
|
||||
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" aria-label="Eighth navbar example">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="#">NFT</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample07"
|
||||
aria-controls="navbarsExample07" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExample07">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="index.html">민팅하기</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="mynft.html">My-NFT</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="sale.html">판매</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="wallet.html">지갑세팅</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="d-flex">
|
||||
<button type="button" class="btn btn-warning col-md-6" id="btn_setApprovalForAll">거래상태</button>
|
||||
|
||||
<span class="col-md-7">
|
||||
<select class="form-select" aria-label="블록체인 네트워크" id="selectNetwork">
|
||||
<option value="">네트워크를 선택하세요</option>
|
||||
<option value="MATIC_MUMBAI">폴리곤-뭄바이</option>
|
||||
<option value="ETH_RINKEBY">이더리움-Rinkeby</option>
|
||||
</select>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container">
|
||||
|
||||
|
||||
<h1 class="bd-title text-center">IPFS 파일업로드 & NFT발행</h1>
|
||||
|
||||
|
||||
<div class="box-body">
|
||||
|
||||
|
||||
<div class="col-12 py-3">
|
||||
<span class="form-control" id="resultbrowsers"></span>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">계정</span>
|
||||
</div>
|
||||
|
||||
<span class="form-control" id="showAccount"></span>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<label for="name" class="form-label">발행자</label>
|
||||
<input type="text" class="form-control" id="name" placeholder="발행자를 입력하세요" value="발행자" />
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12 py-3">
|
||||
<label for="uploadfile" class="form-label">대표이미지</label>
|
||||
<div class="input-group input-group-sm">
|
||||
<input type="file" class="form-control" name="uploadfile" id="uploadfile" />
|
||||
<span class="input-group-btn">
|
||||
<button type="button" class="btn btn-secondary btn-flat" id="btn_uploadfile">
|
||||
Upload
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<small class="text-muted"><a id="ipfs_file_url" target="_blank"></a></small>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12 py-3">
|
||||
<div class="form-group">
|
||||
<label for="category">카테고리</label>
|
||||
<select class="selectpicker form-control" name="category" id="category">
|
||||
<option value="">선택하세요</option>
|
||||
<option value="기본">기본</option>
|
||||
<option value="중요">중요</option>
|
||||
<option value="기타">기타</option>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<label for="description" class="form-label">description</label>
|
||||
<textarea class="form-control" rows="3" id="description" placeholder="description을 입력하세요"></textarea>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12 divResponse">
|
||||
<pre class="response"><span id="resultbox">Response API:</span></pre>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<button type="button" class="btn btn-primary" id="bnt_mint">민팅하기</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="./js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
614
blockchain/nft-ex/js/abi.js
Normal file
614
blockchain/nft-ex/js/abi.js
Normal file
@@ -0,0 +1,614 @@
|
||||
const abiobj = [
|
||||
{
|
||||
"inputs": [],
|
||||
"stateMutability": "nonpayable",
|
||||
"type": "constructor"
|
||||
},
|
||||
{
|
||||
"anonymous": false,
|
||||
"inputs": [
|
||||
{
|
||||
"indexed": true,
|
||||
"internalType": "address",
|
||||
"name": "owner",
|
||||
"type": "address"
|
||||
},
|
||||
{
|
||||
"indexed": true,
|
||||
"internalType": "address",
|
||||
"name": "approved",
|
||||
"type": "address"
|
||||
},
|
||||
{
|
||||
"indexed": true,
|
||||
"internalType": "uint256",
|
||||
"name": "tokenId",
|
||||
"type": "uint256"
|
||||
}
|
||||
],
|
||||
"name": "Approval",
|
||||
"type": "event"
|
||||
},
|
||||
{
|
||||
"anonymous": false,
|
||||
"inputs": [
|
||||
{
|
||||
"indexed": true,
|
||||
"internalType": "address",
|
||||
"name": "owner",
|
||||
"type": "address"
|
||||
},
|
||||
{
|
||||
"indexed": true,
|
||||
"internalType": "address",
|
||||
"name": "operator",
|
||||
"type": "address"
|
||||
},
|
||||
{
|
||||
"indexed": false,
|
||||
"internalType": "bool",
|
||||
"name": "approved",
|
||||
"type": "bool"
|
||||
}
|
||||
],
|
||||
"name": "ApprovalForAll",
|
||||
"type": "event"
|
||||
},
|
||||
{
|
||||
"inputs": [
|
||||
{
|
||||
"internalType": "address",
|
||||
"name": "to",
|
||||
"type": "address"
|
||||
},
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "tokenId",
|
||||
"type": "uint256"
|
||||
}
|
||||
],
|
||||
"name": "approve",
|
||||
"outputs": [],
|
||||
"stateMutability": "nonpayable",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"inputs": [
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "_tokenId",
|
||||
"type": "uint256"
|
||||
}
|
||||
],
|
||||
"name": "burn",
|
||||
"outputs": [],
|
||||
"stateMutability": "nonpayable",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"inputs": [
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "_tokenId",
|
||||
"type": "uint256"
|
||||
}
|
||||
],
|
||||
"name": "buyNftToken",
|
||||
"outputs": [],
|
||||
"stateMutability": "payable",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"inputs": [
|
||||
{
|
||||
"internalType": "string",
|
||||
"name": "_tokenURI",
|
||||
"type": "string"
|
||||
}
|
||||
],
|
||||
"name": "mintNFT",
|
||||
"outputs": [
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "",
|
||||
"type": "uint256"
|
||||
}
|
||||
],
|
||||
"stateMutability": "nonpayable",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"inputs": [
|
||||
{
|
||||
"internalType": "address",
|
||||
"name": "from",
|
||||
"type": "address"
|
||||
},
|
||||
{
|
||||
"internalType": "address",
|
||||
"name": "to",
|
||||
"type": "address"
|
||||
},
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "tokenId",
|
||||
"type": "uint256"
|
||||
}
|
||||
],
|
||||
"name": "safeTransferFrom",
|
||||
"outputs": [],
|
||||
"stateMutability": "nonpayable",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"inputs": [
|
||||
{
|
||||
"internalType": "address",
|
||||
"name": "from",
|
||||
"type": "address"
|
||||
},
|
||||
{
|
||||
"internalType": "address",
|
||||
"name": "to",
|
||||
"type": "address"
|
||||
},
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "tokenId",
|
||||
"type": "uint256"
|
||||
},
|
||||
{
|
||||
"internalType": "bytes",
|
||||
"name": "_data",
|
||||
"type": "bytes"
|
||||
}
|
||||
],
|
||||
"name": "safeTransferFrom",
|
||||
"outputs": [],
|
||||
"stateMutability": "nonpayable",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"inputs": [
|
||||
{
|
||||
"internalType": "address",
|
||||
"name": "operator",
|
||||
"type": "address"
|
||||
},
|
||||
{
|
||||
"internalType": "bool",
|
||||
"name": "approved",
|
||||
"type": "bool"
|
||||
}
|
||||
],
|
||||
"name": "setApprovalForAll",
|
||||
"outputs": [],
|
||||
"stateMutability": "nonpayable",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"inputs": [
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "_tokenId",
|
||||
"type": "uint256"
|
||||
},
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "_price",
|
||||
"type": "uint256"
|
||||
}
|
||||
],
|
||||
"name": "setSaleNftToken",
|
||||
"outputs": [],
|
||||
"stateMutability": "nonpayable",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"anonymous": false,
|
||||
"inputs": [
|
||||
{
|
||||
"indexed": true,
|
||||
"internalType": "address",
|
||||
"name": "from",
|
||||
"type": "address"
|
||||
},
|
||||
{
|
||||
"indexed": true,
|
||||
"internalType": "address",
|
||||
"name": "to",
|
||||
"type": "address"
|
||||
},
|
||||
{
|
||||
"indexed": true,
|
||||
"internalType": "uint256",
|
||||
"name": "tokenId",
|
||||
"type": "uint256"
|
||||
}
|
||||
],
|
||||
"name": "Transfer",
|
||||
"type": "event"
|
||||
},
|
||||
{
|
||||
"inputs": [
|
||||
{
|
||||
"internalType": "address",
|
||||
"name": "from",
|
||||
"type": "address"
|
||||
},
|
||||
{
|
||||
"internalType": "address",
|
||||
"name": "to",
|
||||
"type": "address"
|
||||
},
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "tokenId",
|
||||
"type": "uint256"
|
||||
}
|
||||
],
|
||||
"name": "transferFrom",
|
||||
"outputs": [],
|
||||
"stateMutability": "nonpayable",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"inputs": [
|
||||
{
|
||||
"internalType": "address",
|
||||
"name": "owner",
|
||||
"type": "address"
|
||||
}
|
||||
],
|
||||
"name": "balanceOf",
|
||||
"outputs": [
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "",
|
||||
"type": "uint256"
|
||||
}
|
||||
],
|
||||
"stateMutability": "view",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"inputs": [
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "tokenId",
|
||||
"type": "uint256"
|
||||
}
|
||||
],
|
||||
"name": "getApproved",
|
||||
"outputs": [
|
||||
{
|
||||
"internalType": "address",
|
||||
"name": "",
|
||||
"type": "address"
|
||||
}
|
||||
],
|
||||
"stateMutability": "view",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"inputs": [
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "_tokenId",
|
||||
"type": "uint256"
|
||||
}
|
||||
],
|
||||
"name": "getNftTokenPrice",
|
||||
"outputs": [
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "",
|
||||
"type": "uint256"
|
||||
}
|
||||
],
|
||||
"stateMutability": "view",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"inputs": [
|
||||
{
|
||||
"internalType": "address",
|
||||
"name": "_nftTokenOwner",
|
||||
"type": "address"
|
||||
}
|
||||
],
|
||||
"name": "getNftTokens",
|
||||
"outputs": [
|
||||
{
|
||||
"components": [
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "nftTokenId",
|
||||
"type": "uint256"
|
||||
},
|
||||
{
|
||||
"internalType": "string",
|
||||
"name": "nftTokenURI",
|
||||
"type": "string"
|
||||
},
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "price",
|
||||
"type": "uint256"
|
||||
}
|
||||
],
|
||||
"internalType": "struct MintNftToken.NftTokenData[]",
|
||||
"name": "",
|
||||
"type": "tuple[]"
|
||||
}
|
||||
],
|
||||
"stateMutability": "view",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"inputs": [],
|
||||
"name": "getSaleNftToken",
|
||||
"outputs": [
|
||||
{
|
||||
"internalType": "uint256[]",
|
||||
"name": "",
|
||||
"type": "uint256[]"
|
||||
}
|
||||
],
|
||||
"stateMutability": "view",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"inputs": [],
|
||||
"name": "getSaleNftTokens",
|
||||
"outputs": [
|
||||
{
|
||||
"components": [
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "nftTokenId",
|
||||
"type": "uint256"
|
||||
},
|
||||
{
|
||||
"internalType": "string",
|
||||
"name": "nftTokenURI",
|
||||
"type": "string"
|
||||
},
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "price",
|
||||
"type": "uint256"
|
||||
}
|
||||
],
|
||||
"internalType": "struct MintNftToken.NftTokenData[]",
|
||||
"name": "",
|
||||
"type": "tuple[]"
|
||||
}
|
||||
],
|
||||
"stateMutability": "view",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"inputs": [
|
||||
{
|
||||
"internalType": "address",
|
||||
"name": "owner",
|
||||
"type": "address"
|
||||
},
|
||||
{
|
||||
"internalType": "address",
|
||||
"name": "operator",
|
||||
"type": "address"
|
||||
}
|
||||
],
|
||||
"name": "isApprovedForAll",
|
||||
"outputs": [
|
||||
{
|
||||
"internalType": "bool",
|
||||
"name": "",
|
||||
"type": "bool"
|
||||
}
|
||||
],
|
||||
"stateMutability": "view",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"inputs": [],
|
||||
"name": "name",
|
||||
"outputs": [
|
||||
{
|
||||
"internalType": "string",
|
||||
"name": "",
|
||||
"type": "string"
|
||||
}
|
||||
],
|
||||
"stateMutability": "view",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"inputs": [
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "",
|
||||
"type": "uint256"
|
||||
}
|
||||
],
|
||||
"name": "nftTokenPrices",
|
||||
"outputs": [
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "",
|
||||
"type": "uint256"
|
||||
}
|
||||
],
|
||||
"stateMutability": "view",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"inputs": [
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "",
|
||||
"type": "uint256"
|
||||
}
|
||||
],
|
||||
"name": "onSaleNftTokenArray",
|
||||
"outputs": [
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "",
|
||||
"type": "uint256"
|
||||
}
|
||||
],
|
||||
"stateMutability": "view",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"inputs": [
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "tokenId",
|
||||
"type": "uint256"
|
||||
}
|
||||
],
|
||||
"name": "ownerOf",
|
||||
"outputs": [
|
||||
{
|
||||
"internalType": "address",
|
||||
"name": "",
|
||||
"type": "address"
|
||||
}
|
||||
],
|
||||
"stateMutability": "view",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"inputs": [
|
||||
{
|
||||
"internalType": "bytes4",
|
||||
"name": "interfaceId",
|
||||
"type": "bytes4"
|
||||
}
|
||||
],
|
||||
"name": "supportsInterface",
|
||||
"outputs": [
|
||||
{
|
||||
"internalType": "bool",
|
||||
"name": "",
|
||||
"type": "bool"
|
||||
}
|
||||
],
|
||||
"stateMutability": "view",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"inputs": [],
|
||||
"name": "symbol",
|
||||
"outputs": [
|
||||
{
|
||||
"internalType": "string",
|
||||
"name": "",
|
||||
"type": "string"
|
||||
}
|
||||
],
|
||||
"stateMutability": "view",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"inputs": [
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "index",
|
||||
"type": "uint256"
|
||||
}
|
||||
],
|
||||
"name": "tokenByIndex",
|
||||
"outputs": [
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "",
|
||||
"type": "uint256"
|
||||
}
|
||||
],
|
||||
"stateMutability": "view",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"inputs": [
|
||||
{
|
||||
"internalType": "address",
|
||||
"name": "owner",
|
||||
"type": "address"
|
||||
},
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "index",
|
||||
"type": "uint256"
|
||||
}
|
||||
],
|
||||
"name": "tokenOfOwnerByIndex",
|
||||
"outputs": [
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "",
|
||||
"type": "uint256"
|
||||
}
|
||||
],
|
||||
"stateMutability": "view",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"inputs": [
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "_tokenId",
|
||||
"type": "uint256"
|
||||
}
|
||||
],
|
||||
"name": "tokenURI",
|
||||
"outputs": [
|
||||
{
|
||||
"internalType": "string",
|
||||
"name": "",
|
||||
"type": "string"
|
||||
}
|
||||
],
|
||||
"stateMutability": "view",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"inputs": [
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "",
|
||||
"type": "uint256"
|
||||
}
|
||||
],
|
||||
"name": "tokenURIs",
|
||||
"outputs": [
|
||||
{
|
||||
"internalType": "string",
|
||||
"name": "",
|
||||
"type": "string"
|
||||
}
|
||||
],
|
||||
"stateMutability": "view",
|
||||
"type": "function"
|
||||
},
|
||||
{
|
||||
"inputs": [],
|
||||
"name": "totalSupply",
|
||||
"outputs": [
|
||||
{
|
||||
"internalType": "uint256",
|
||||
"name": "",
|
||||
"type": "uint256"
|
||||
}
|
||||
],
|
||||
"stateMutability": "view",
|
||||
"type": "function"
|
||||
}
|
||||
];
|
||||
|
||||
let contractAddress_MATIC_MUMBAI = "0x0155B13063957e66dE19ea2B00f8Fc6E299b8A9C";
|
||||
let contractAddress_ETH_RINKEBY = "0x0155B13063957e66dE19ea2B00f8Fc6E299b8A9C";
|
||||
4074
blockchain/nft-ex/js/bootstrap.bundle.min.js
vendored
Normal file
4074
blockchain/nft-ex/js/bootstrap.bundle.min.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
2045
blockchain/nft-ex/js/buffer.js
Normal file
2045
blockchain/nft-ex/js/buffer.js
Normal file
File diff suppressed because it is too large
Load Diff
31
blockchain/nft-ex/js/jscript.js
Normal file
31
blockchain/nft-ex/js/jscript.js
Normal file
@@ -0,0 +1,31 @@
|
||||
$(document).ready(function () {
|
||||
// page 이동
|
||||
$("#page_mynft_detail").on("click", function () {
|
||||
window.location.href = "./mynft_detail.html";
|
||||
});
|
||||
|
||||
$("#page_mynft").on("click", function () {
|
||||
window.location.href = "./mynft.html";
|
||||
});
|
||||
|
||||
$("#selectNetwork").change(function () {
|
||||
var blockChainNetwork = $("#selectNetwork option:selected").val();
|
||||
if (!blockChainNetwork) {
|
||||
alert("네트워크를 선택해주세요!");
|
||||
} else {
|
||||
localStorage["blockChainNetwork"] = blockChainNetwork;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
function onlyNumber(){
|
||||
if((event.keyCode > 48 && event.keyCode < 57 )
|
||||
|| event.keyCode == 8
|
||||
|| event.keyCode == 37
|
||||
|| event.keyCode == 39
|
||||
|| event.keyCode == 46
|
||||
|| event.keyCode == 39){
|
||||
}else{
|
||||
event.returnValue=false;
|
||||
}
|
||||
}
|
||||
57
blockchain/nft-ex/js/web3.min.js
vendored
Normal file
57
blockchain/nft-ex/js/web3.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
blockchain/nft-ex/js/web3.min.js.map
Normal file
1
blockchain/nft-ex/js/web3.min.js.map
Normal file
File diff suppressed because one or more lines are too long
344
blockchain/nft-ex/mynft.html
Normal file
344
blockchain/nft-ex/mynft.html
Normal file
@@ -0,0 +1,344 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
|
||||
<head>
|
||||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
<!-- Bootstrap CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
|
||||
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
|
||||
|
||||
|
||||
<link rel="stylesheet" href="./css/style.css">
|
||||
|
||||
|
||||
<!-- jquery -->
|
||||
<script src="https://code.jquery.com/jquery-1.12.4.min.js" crossorigin="anonymous"></script>
|
||||
<script src="./js/jscript.js"></script>
|
||||
|
||||
<!-- blockchain-->
|
||||
<script type="text/javascript" src='./js/abi.js'></script>
|
||||
<script type="text/javascript" src='./js/web3.min.js'></script>
|
||||
|
||||
<script>
|
||||
|
||||
$(window).load(async function () {
|
||||
|
||||
var contractAddress;
|
||||
//블록체인 네트워크 선택하기
|
||||
var blockChainNetwork = localStorage.getItem("blockChainNetwork")
|
||||
$("#selectNetwork").val(blockChainNetwork).prop("selected", true);
|
||||
|
||||
|
||||
if (blockChainNetwork == "MATIC_MUMBAI") {
|
||||
contractAddress = contractAddress_MATIC_MUMBAI;
|
||||
}
|
||||
|
||||
else if (blockChainNetwork == "ETH_RINKEBY") {
|
||||
contractAddress = contractAddress_ETH_RINKEBY;
|
||||
}
|
||||
|
||||
if (typeof web3 !== "undefined") {
|
||||
console.log("web3가 활성화되었습니다");
|
||||
|
||||
$("#resultbrowsers").text("메타마스크를 로그인 해주세요!");
|
||||
|
||||
if (web3.currentProvider.isMetaMask == true) {
|
||||
$("#resultbrowsers").text("메타마스크가 활성화되었습니다");
|
||||
try {
|
||||
|
||||
accounts = await ethereum.request({
|
||||
method: "eth_requestAccounts"
|
||||
});
|
||||
|
||||
$("#showAccount").text(accounts);
|
||||
//web3
|
||||
window.web3 = new Web3(window.ethereum);
|
||||
|
||||
var mintingEvent = await new window.web3.eth.Contract(
|
||||
abiobj,
|
||||
contractAddress
|
||||
);
|
||||
|
||||
|
||||
} catch (error) {
|
||||
console.log(`error msg: ${error}`);
|
||||
$("#resultbrowsers").text("메타마스크를 로그인 해주세요!");
|
||||
return false;
|
||||
}
|
||||
} else {
|
||||
$("#resultbrowsers").text("메타마스크를 사용할 수 없니댜.");
|
||||
}
|
||||
} else {
|
||||
$("#resultbrowsers").text("web3를 찾을 수 없습니다.");
|
||||
}
|
||||
|
||||
//승인 상태조회
|
||||
const ApprovalState = await mintingEvent.methods.isApprovedForAll(accounts[0], contractAddress).call();
|
||||
if (ApprovalState) {
|
||||
$("#btn_setApprovalForAll").text("거래상태 : 거래가능");
|
||||
} else {
|
||||
$("#btn_setApprovalForAll").text("거래상태 : 거래중지");
|
||||
}
|
||||
|
||||
|
||||
const tempnftListArray = await mintingEvent.methods.getNftTokens(accounts[0]).call();
|
||||
|
||||
console.log(tempnftListArray);
|
||||
|
||||
for (i = 0; i < tempnftListArray.length; i++) {
|
||||
|
||||
_nftTokenId = tempnftListArray[i].nftTokenId;
|
||||
_nftTokenURI = tempnftListArray[i].nftTokenURI;
|
||||
_price = tempnftListArray[i].price;
|
||||
_ipfsinfo = ipfsInfo(_nftTokenURI);
|
||||
name = _ipfsinfo.name;
|
||||
image = _ipfsinfo.image;
|
||||
|
||||
var html = '';
|
||||
|
||||
html += '<tr id="tr_' + _nftTokenId + '">';
|
||||
html += '<td>' + (i + 1) + '</td>';
|
||||
html += '<td>' + _nftTokenId + '</td>';
|
||||
|
||||
html += '<td>' + name + '</td>';
|
||||
html += '<td><img src=' + image + ' width=100px/></td>';
|
||||
|
||||
html += '<td>' + _price + '</td>';
|
||||
html += '<td>';
|
||||
html += '<a href="./mynft_detail.html?tokenId=' + _nftTokenId + '" class="btn btn-secondary btn-flat">상세보기</a> ';
|
||||
|
||||
if (_price == 0) {
|
||||
html += '<button type="button" class="btn btn-primary btn_onSale" data-bs-toggle="modal" data-bs-target="#saleModal" data-val="' + _nftTokenId + '">판매하기</button> ';
|
||||
}
|
||||
|
||||
|
||||
html += '<button type="button" class="btn btn-danger btn_burn"" data-val="' + _nftTokenId + '">삭제하기</button> ';
|
||||
|
||||
html += '</td> ';
|
||||
html += '</tr>';
|
||||
|
||||
$("#dynamicTbody").append(html);
|
||||
}
|
||||
|
||||
if (i == 0) {
|
||||
|
||||
var html = '';
|
||||
|
||||
html += '<tr>';
|
||||
html += '<td colspan="6" style="text-align:center;">자료없음</td> ';
|
||||
html += '</tr>';
|
||||
|
||||
$("#dynamicTbody").append(html);
|
||||
|
||||
}
|
||||
|
||||
function ipfsInfo(_nftTokenURI) {
|
||||
$.ajax({
|
||||
url: _nftTokenURI,
|
||||
type: 'get',
|
||||
data: '',
|
||||
async: false,
|
||||
success: function (data) {
|
||||
//console.log(data);
|
||||
//console.log(data.name);
|
||||
//console.log(data.image);
|
||||
|
||||
name = data.name;
|
||||
image = data.image;
|
||||
|
||||
|
||||
},
|
||||
error: function (e) {
|
||||
console.log("값을 가져오지 못했습니다.");
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
name: name,
|
||||
image: image
|
||||
};
|
||||
}
|
||||
|
||||
$('.btn_onSale').click(function () {
|
||||
var tokenId = $(this).attr("data-val");
|
||||
$('.modal-title').html("판매등록하기");
|
||||
$('#saleModal').modal('show');
|
||||
|
||||
//판매하기
|
||||
$('.btn_onSaleSubmit').click(async function () {
|
||||
var price = $("#price").val();
|
||||
//console.log(tokenId, price, ApprovalState);
|
||||
|
||||
|
||||
var ownerAddress = await mintingEvent.methods.ownerOf(tokenId).call();
|
||||
console.log(ownerAddress.toLowerCase(), accounts[0]);
|
||||
|
||||
if (ownerAddress.toLowerCase() != accounts[0]) {
|
||||
alert("제품 소유자만 판매등록할 수 있습니다.");
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
if (!ApprovalState) {
|
||||
alert("판매승인 상태를 변경하세요");
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
var receiptObj = await mintingEvent.methods.setSaleNftToken(tokenId, price).send({ from: accounts[0], gas: 3000000 });
|
||||
console.log(receiptObj);
|
||||
|
||||
location.reload();
|
||||
});
|
||||
|
||||
|
||||
|
||||
});
|
||||
|
||||
// 삭제하기
|
||||
$('.btn_burn').click(async function () {
|
||||
if (confirm('삭제하시면 복구할수 없습니다. \n 정말로 삭제하시겠습니까??')) {
|
||||
var tokenId = $(this).attr("data-val");
|
||||
var receiptObj = await mintingEvent.methods.burn(tokenId).send({ from: accounts[0] });
|
||||
console.log(receiptObj);
|
||||
|
||||
$('#tr_' + tokenId + '').remove();
|
||||
|
||||
return false;
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<title>NFT</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
|
||||
<header>
|
||||
<!-- Fixed navbar -->
|
||||
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" aria-label="Eighth navbar example">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="#">NFT</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarsExample07" aria-controls="navbarsExample07" aria-expanded="false"
|
||||
aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExample07">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" aria-current="page" href="index.html">민팅하기</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="mynft.html">My-NFT</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="sale.html">판매</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="wallet.html">지갑세팅</a>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="d-flex">
|
||||
<button type="button" class="btn btn-warning col-md-6" id="btn_setApprovalForAll">거래상태</button>
|
||||
|
||||
<span class="col-md-7">
|
||||
<select class="form-select" aria-label="블록체인 네트워크" id="selectNetwork">
|
||||
<option value="">네트워크를 선택하세요</option>
|
||||
<option value="MATIC_MUMBAI">폴리곤-뭄바이</option>
|
||||
<option value="ETH_RINKEBY">이더리움-Rinkeby</option>
|
||||
</select>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<h1 class="bd-title text-center">My NFT</h1>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<div class="col-12 py-3">
|
||||
<span class="form-control" id="resultbrowsers"></span>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">계정</span>
|
||||
</div>
|
||||
|
||||
<span class="form-control" id="showAccount"></span>
|
||||
|
||||
</div>
|
||||
<div class="box-body" style="min-height:500px">
|
||||
<table class="table table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>순서</th>
|
||||
<th>TokenId</th>
|
||||
<th>창작자</th>
|
||||
<th>이미지</th>
|
||||
<th>금액</th>
|
||||
<th>비고</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="dynamicTbody"></tbody>
|
||||
|
||||
</table>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="saleModal" tabindex="-1" aria-labelledby="saleModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="saleModalLabel">Modal title</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<input type="number" class="form-control" id="price" placeholder="판매금액을 입력하세요" value="0"
|
||||
onkeydown="return onlyNumber();" />
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary btn_onSaleSubmit">판매등록하기</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
|
||||
<!--
|
||||
inpage.js:1 MetaMask - RPC Error: Internal JSON-RPC error. {code: -32603, message: 'Internal JSON-RPC error.', data: {…}}
|
||||
-->
|
||||
296
blockchain/nft-ex/mynft_detail.html
Normal file
296
blockchain/nft-ex/mynft_detail.html
Normal file
@@ -0,0 +1,296 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
|
||||
<head>
|
||||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
<!-- Bootstrap CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
|
||||
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
|
||||
|
||||
|
||||
<link rel="stylesheet" href="./css/style.css">
|
||||
|
||||
|
||||
<!-- jquery -->
|
||||
<script src="https://code.jquery.com/jquery-1.12.4.min.js" crossorigin="anonymous"></script>
|
||||
<script src="./js/jscript.js"></script>
|
||||
|
||||
<!-- blockchain-->
|
||||
<script type="text/javascript" src='./js/abi.js'></script>
|
||||
<script type="text/javascript" src='./js/web3.min.js'></script>
|
||||
|
||||
<script>
|
||||
|
||||
$(window).load(async function () {
|
||||
|
||||
var contractAddress;
|
||||
//블록체인 네트워크 선택하기
|
||||
var blockChainNetwork = localStorage.getItem("blockChainNetwork")
|
||||
$("#selectNetwork").val(blockChainNetwork).prop("selected", true);
|
||||
|
||||
|
||||
if (blockChainNetwork == "MATIC_MUMBAI") {
|
||||
contractAddress = contractAddress_MATIC_MUMBAI;
|
||||
}
|
||||
|
||||
else if (blockChainNetwork == "ETH_RINKEBY") {
|
||||
contractAddress = contractAddress_ETH_RINKEBY;
|
||||
}
|
||||
|
||||
if (typeof web3 !== "undefined") {
|
||||
console.log("web3가 활성화되었습니다");
|
||||
|
||||
$("#resultbrowsers").text("메타마스크를 로그인 해주세요!");
|
||||
|
||||
if (web3.currentProvider.isMetaMask == true) {
|
||||
$("#resultbrowsers").text("메타마스크가 활성화되었습니다");
|
||||
try {
|
||||
|
||||
accounts = await ethereum.request({
|
||||
method: "eth_requestAccounts"
|
||||
});
|
||||
|
||||
$("#showAccount").text(accounts);
|
||||
//web3
|
||||
window.web3 = new Web3(window.ethereum);
|
||||
|
||||
var mintingEvent = await new window.web3.eth.Contract(
|
||||
abiobj,
|
||||
contractAddress
|
||||
);
|
||||
|
||||
|
||||
} catch (error) {
|
||||
console.log(`error msg: ${error}`);
|
||||
$("#resultbrowsers").text("메타마스크를 로그인 해주세요!");
|
||||
return false;
|
||||
}
|
||||
} else {
|
||||
$("#resultbrowsers").text("메타마스크를 사용할 수 없니댜.");
|
||||
}
|
||||
} else {
|
||||
$("#resultbrowsers").text("web3를 찾을 수 없습니다.");
|
||||
}
|
||||
|
||||
//승인 상태조회
|
||||
const ApprovalState = await mintingEvent.methods.isApprovedForAll(accounts[0], contractAddress).call();
|
||||
if (ApprovalState) {
|
||||
$("#btn_setApprovalForAll").text("거래상태 : 거래가능");
|
||||
} else {
|
||||
$("#btn_setApprovalForAll").text("거래상태 : 거래중지");
|
||||
}
|
||||
|
||||
//상태변경하기
|
||||
$('#btn_setApprovalForAll').click(async function () {
|
||||
var receiptObj = await mintingEvent.methods.setApprovalForAll(contractAddress, true).send({ from: accounts[0] });
|
||||
console.log(receiptObj);
|
||||
location.reload();
|
||||
});
|
||||
|
||||
function getUrlVars() {
|
||||
var vars = [], hash;
|
||||
var hashes = window.location.href.slice(window.location.href.indexOf('?') + 1).split('&');
|
||||
for (var i = 0; i < hashes.length; i++) {
|
||||
hash = hashes[i].split('=');
|
||||
vars.push(hash[0]);
|
||||
vars[hash[0]] = hash[1];
|
||||
}
|
||||
return vars;
|
||||
}
|
||||
|
||||
var tokenId = getUrlVars()["tokenId"];
|
||||
|
||||
var _tokenURI = await mintingEvent.methods.tokenURI(tokenId).call();
|
||||
var _ipfsinfo = ipfsInfo(_tokenURI);
|
||||
|
||||
var name = _ipfsinfo.name;
|
||||
var imgurl = _ipfsinfo.image;
|
||||
var description = _ipfsinfo.description;
|
||||
var category = _ipfsinfo.category;
|
||||
|
||||
$("#name").text(name);
|
||||
$("#imgurl").attr("src", imgurl);
|
||||
$("#description").text(description);
|
||||
$("#category").text(category);
|
||||
|
||||
function ipfsInfo(_tokenURI) {
|
||||
$.ajax({
|
||||
url: _tokenURI,
|
||||
type: 'get',
|
||||
data: '',
|
||||
async: false,
|
||||
success: function (data) {
|
||||
console.log(data);
|
||||
//console.log(data.name);
|
||||
//console.log(data.image);
|
||||
|
||||
name = data.name;
|
||||
image = data.image;
|
||||
description = data.description;
|
||||
category = data.attributes[0].value;
|
||||
|
||||
|
||||
|
||||
},
|
||||
error: function (e) {
|
||||
console.log("값을 가져오지 못했습니다.");
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
name: name,
|
||||
image: image,
|
||||
description: description,
|
||||
category: category,
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
</head>
|
||||
|
||||
<title>NFT</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
|
||||
|
||||
<header>
|
||||
<!-- Fixed navbar -->
|
||||
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" aria-label="Eighth navbar example">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="#">NFT</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarsExample07" aria-controls="navbarsExample07" aria-expanded="false"
|
||||
aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExample07">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" aria-current="page" href="index.html">민팅하기</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="mynft.html">My-NFT</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="sale.html">판매</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="wallet.html">지갑세팅</a>
|
||||
</li>
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="d-flex">
|
||||
<button type="button" class="btn btn-warning col-md-6" id="btn_setApprovalForAll">거래상태</button>
|
||||
|
||||
<span class="col-md-7">
|
||||
<select class="form-select" aria-label="블록체인 네트워크" id="selectNetwork">
|
||||
<option value="">네트워크를 선택하세요</option>
|
||||
<option value="MATIC_MUMBAI">폴리곤-뭄바이</option>
|
||||
<option value="ETH_RINKEBY">이더리움-Rinkeby</option>
|
||||
</select>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<h1 class="bd-title text-center">상세내용</h1>
|
||||
|
||||
<div class="box-body">
|
||||
|
||||
|
||||
<div class="col-12 py-3">
|
||||
<span class="form-control" id="resultbrowsers"></span>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">계정</span>
|
||||
</div>
|
||||
|
||||
<span class="form-control" id="showAccount"></span>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<label for="name" class="form-label">발행자</label>
|
||||
<span class="form-control" id="name"></span>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12 py-3">
|
||||
<label for="uploadfile" class="form-label">대표이미지</label>
|
||||
<div class="input-group input-group-sm">
|
||||
<img id="imgurl" class="img-fluid img-thumbnail" style="width:300px;" />
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<small class="text-muted"><a id="ipfs_file_url" target="_blank"></a></small>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12 py-3">
|
||||
<div class="form-group">
|
||||
<label for="category">카테고리</label>
|
||||
|
||||
<span class="form-control" id="category"></span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="col-12">
|
||||
<label for="description" class="form-label">description</label>
|
||||
|
||||
|
||||
<span class="form-control" id="description"></span>
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
<div class="col-12 mt-5"></div>
|
||||
<button type="button" class="btn btn-primary" id="page_mynft">목록으로</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
||||
|
||||
<!--
|
||||
inpage.js:1 MetaMask - RPC Error: Internal JSON-RPC error. {code: -32603, message: 'Internal JSON-RPC error.', data: {…}}
|
||||
-->
|
||||
336
blockchain/nft-ex/sale.html
Normal file
336
blockchain/nft-ex/sale.html
Normal file
@@ -0,0 +1,336 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="ko">
|
||||
|
||||
<head>
|
||||
<!-- Required meta tags -->
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
|
||||
<!-- Bootstrap CSS -->
|
||||
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
|
||||
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous" />
|
||||
|
||||
|
||||
<link rel="stylesheet" href="./css/style.css">
|
||||
|
||||
<!-- jquery -->
|
||||
<script src="https://code.jquery.com/jquery-1.12.4.min.js" crossorigin="anonymous"></script>
|
||||
<script src="./js/jscript.js"></script>
|
||||
|
||||
|
||||
<!-- ipfs -->
|
||||
<script src="./js/buffer.js"></script>
|
||||
<script src="https://unpkg.com/ipfs-api/dist/index.js" crossorigin="anonymous"></script>
|
||||
|
||||
<!-- blockchain-->
|
||||
<script type="text/javascript" src='./js/abi.js'></script>
|
||||
<script type="text/javascript" src='./js/web3.min.js'></script>
|
||||
|
||||
<script>
|
||||
|
||||
$(window).load(async function () {
|
||||
|
||||
var contractAddress;
|
||||
//블록체인 네트워크 선택하기
|
||||
var blockChainNetwork = localStorage.getItem("blockChainNetwork")
|
||||
$("#selectNetwork").val(blockChainNetwork).prop("selected", true);
|
||||
|
||||
|
||||
if (blockChainNetwork == "MATIC_MUMBAI") {
|
||||
contractAddress = contractAddress_MATIC_MUMBAI;
|
||||
}
|
||||
|
||||
else if (blockChainNetwork == "ETH_RINKEBY") {
|
||||
contractAddress = contractAddress_ETH_RINKEBY;
|
||||
}
|
||||
|
||||
if (typeof web3 !== "undefined") {
|
||||
console.log("web3가 활성화되었습니다");
|
||||
|
||||
$("#resultbrowsers").text("메타마스크를 로그인 해주세요!");
|
||||
|
||||
if (web3.currentProvider.isMetaMask == true) {
|
||||
$("#resultbrowsers").text("메타마스크가 활성화되었습니다");
|
||||
try {
|
||||
|
||||
accounts = await ethereum.request({
|
||||
method: "eth_requestAccounts"
|
||||
});
|
||||
|
||||
$("#showAccount").text(accounts);
|
||||
//web3
|
||||
window.web3 = new Web3(window.ethereum);
|
||||
|
||||
var mintingEvent = await new window.web3.eth.Contract(
|
||||
abiobj,
|
||||
contractAddress
|
||||
);
|
||||
|
||||
|
||||
} catch (error) {
|
||||
console.log(`error msg: ${error}`);
|
||||
$("#resultbrowsers").text("메타마스크를 로그인 해주세요!");
|
||||
return false;
|
||||
}
|
||||
} else {
|
||||
$("#resultbrowsers").text("메타마스크를 사용할 수 없니댜.");
|
||||
}
|
||||
} else {
|
||||
$("#resultbrowsers").text("web3를 찾을 수 없습니다.");
|
||||
}
|
||||
|
||||
//승인 상태조회
|
||||
const ApprovalState = await mintingEvent.methods.isApprovedForAll(accounts[0], contractAddress).call();
|
||||
if (ApprovalState) {
|
||||
$("#btn_setApprovalForAll").text("거래상태 : 거래가능");
|
||||
} else {
|
||||
$("#btn_setApprovalForAll").text("거래상태 : 거래중지");
|
||||
}
|
||||
|
||||
//상태변경하기
|
||||
$('#btn_setApprovalForAll').click(async function () {
|
||||
var receiptObj = await mintingEvent.methods.setApprovalForAll(contractAddress, true).send({ from: accounts[0] });
|
||||
console.log(receiptObj);
|
||||
location.reload();
|
||||
});
|
||||
|
||||
|
||||
|
||||
const tempnftListArray = await mintingEvent.methods.getSaleNftTokens().call();
|
||||
// console.log(tempnftListArray)
|
||||
|
||||
let i = 0;
|
||||
|
||||
for (i = 0; i < tempnftListArray.length; i++) {
|
||||
|
||||
_nftTokenId = tempnftListArray[i].nftTokenId;
|
||||
_nftTokenURI = tempnftListArray[i].nftTokenURI;
|
||||
_price = tempnftListArray[i].price;
|
||||
|
||||
_ipfsinfo = ipfsInfo(_nftTokenURI);
|
||||
name = _ipfsinfo.name;
|
||||
image = _ipfsinfo.image;
|
||||
|
||||
//console.log(v);
|
||||
|
||||
|
||||
var html = '';
|
||||
|
||||
html += '<tr id="tr_' + _nftTokenId + '">';
|
||||
html += '<td>' + (i + 1) + '</td>';
|
||||
html += '<td>' + _nftTokenId + '</td>';
|
||||
|
||||
html += '<td>' + _price + '</td>';
|
||||
|
||||
html += '<td>' + name + '</td>';
|
||||
html += '<td><img src=' + image + ' width=100px/></td>';
|
||||
|
||||
html += '<td>';
|
||||
html += '<a href="./mynft_detail.html?tokenId=' + _nftTokenId + '" class="btn btn-secondary btn-flat">상세보기</a> ';
|
||||
html += '<button type="button" class="btn btn-success btn_buy" data-bs-toggle="modal" data-bs-target="#saleModal" data-val="' + _nftTokenId + '" data-price-val="' + _price + '" ">구매하기</button> ';
|
||||
html += '<button type="button" class="btn btn-danger btn_burn"" data-val="' + _nftTokenId + '">삭제하기</button> ';
|
||||
|
||||
html += '</td> ';
|
||||
html += '</tr>';
|
||||
|
||||
$("#dynamicTbody").append(html);
|
||||
}
|
||||
|
||||
|
||||
|
||||
if (i == 0) {
|
||||
|
||||
var html = '';
|
||||
|
||||
html += '<tr>';
|
||||
html += '<td colspan="6" style="text-align:center;">자료없음</td> ';
|
||||
html += '</tr>';
|
||||
|
||||
$("#dynamicTbody").append(html);
|
||||
|
||||
}
|
||||
|
||||
|
||||
function ipfsInfo(_nftTokenURI) {
|
||||
$.ajax({
|
||||
url: _nftTokenURI,
|
||||
type: 'get',
|
||||
data: '',
|
||||
async: false,
|
||||
success: function (data) {
|
||||
//console.log(data);
|
||||
//console.log(data.name);
|
||||
//console.log(data.image);
|
||||
|
||||
name = data.name;
|
||||
image = data.image;
|
||||
|
||||
|
||||
},
|
||||
error: function (e) {
|
||||
console.log("값을 가져오지 못했습니다.");
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
name: name,
|
||||
image: image
|
||||
};
|
||||
|
||||
}
|
||||
|
||||
$('.btn_buy').click(function () {
|
||||
var tokenId = $(this).attr("data-val");
|
||||
var price = $(this).attr("data-price-val");
|
||||
$("#price").val(price)
|
||||
|
||||
$('.modal-title').html("구매하기");
|
||||
$('#saleModal').modal('show');
|
||||
|
||||
|
||||
//구매하기
|
||||
$('.btn_buySubmit').click(async function () {
|
||||
var ownerAddress = await mintingEvent.methods.ownerOf(tokenId).call();
|
||||
console.log(ownerAddress.toLowerCase(), accounts[0]);
|
||||
|
||||
if (ownerAddress.toLowerCase() == accounts[0]) {
|
||||
alert("제품 소유자는 구매할 수 없습니다.");
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!ApprovalState) {
|
||||
alert("판매승인 상태를 변경하세요");
|
||||
return false;
|
||||
}
|
||||
|
||||
var receiptObj = await mintingEvent.methods.buyNftToken(tokenId).send({ from: accounts[0], value: price });
|
||||
console.log(receiptObj);
|
||||
location.reload();
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
</head>
|
||||
<title>NFT</title>
|
||||
</head>
|
||||
|
||||
|
||||
|
||||
|
||||
<body>
|
||||
<input type="hidden" id="hash_img_url" name="hash_img_url" />
|
||||
|
||||
<nav class="navbar navbar-expand-lg navbar-dark bg-dark" aria-label="Eighth navbar example">
|
||||
<div class="container">
|
||||
<a class="navbar-brand" href="#">NFT</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample07"
|
||||
aria-controls="navbarsExample07" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
|
||||
<div class="collapse navbar-collapse" id="navbarsExample07">
|
||||
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" aria-current="page" href="index.html">민팅하기</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="mynft.html">My-NFT</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" href="sale.html">판매</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="wallet.html">지갑세팅</a>
|
||||
</li>
|
||||
|
||||
|
||||
|
||||
</ul>
|
||||
|
||||
|
||||
|
||||
|
||||
<div class="d-flex">
|
||||
<button type="button" class="btn btn-warning col-md-6" id="btn_setApprovalForAll">거래상태</button>
|
||||
|
||||
<span class="col-md-7">
|
||||
<select class="form-select" aria-label="블록체인 네트워크" id="selectNetwork">
|
||||
<option value="">네트워크를 선택하세요</option>
|
||||
<option value="MATIC_MUMBAI">폴리곤-뭄바이</option>
|
||||
<option value="ETH_RINKEBY">이더리움-Rinkeby</option>
|
||||
</select>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="container">
|
||||
|
||||
<h1 class="bd-title text-center">판매하기</h1>
|
||||
|
||||
<div class="input-group mb-3">
|
||||
<div class="col-12 py-3">
|
||||
<span class="form-control" id="resultbrowsers"></span>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="input-group-prepend">
|
||||
<span class="input-group-text">계정</span>
|
||||
</div>
|
||||
|
||||
<span class="form-control" id="showAccount"></span>
|
||||
|
||||
</div>
|
||||
<div class="box-body" style="min-height:500px">
|
||||
<table class="table table-hover">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>순서</th>
|
||||
<th>TokenId</th>
|
||||
<th>금액</th>
|
||||
<th>창작자</th>
|
||||
<th>이미지</th>
|
||||
<th>비고</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="dynamicTbody"></tbody>
|
||||
|
||||
</table>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<!-- Modal -->
|
||||
<div class="modal fade" id="saleModal" tabindex="-1" aria-labelledby="buyModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h5 class="modal-title" id="buyModalLabel">Modal title</h5>
|
||||
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<input type="number" class="form-control" id="price" onkeydown="return onlyNumber();" />
|
||||
</div>
|
||||
<div class="modal-footer">
|
||||
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
|
||||
<button type="button" class="btn btn-primary btn_buySubmit">구매하기</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<script src="./js/bootstrap.bundle.min.js"></script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Reference in New Issue
Block a user