349 lines
12 KiB
HTML
349 lines
12 KiB
HTML
<!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> |