From 126b295c12852914572f71615f7eb710fc02f13b Mon Sep 17 00:00:00 2001
From: haerong22 <haerong22@naver.com>
Date: Mon, 25 Apr 2022 15:08:11 +0900
Subject: [PATCH] nft ex : my nft detail

---
 blockchain/nft-ex/mynft_detail.html | 282 ++++++++++++++++++++++++++++
 1 file changed, 282 insertions(+)
 create mode 100644 blockchain/nft-ex/mynft_detail.html
diff --git a/blockchain/nft-ex/mynft_detail.html b/blockchain/nft-ex/mynft_detail.html
new file mode 100644
index 00000000..bf307120
--- /dev/null
+++ b/blockchain/nft-ex/mynft_detail.html
@@ -0,0 +1,282 @@
+<!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 () {
+
+            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>
+                        &nbsp;&nbsp;
+                        <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: {…}}
+-->
\ No newline at end of file
