[React] 이미지 링크로 NFT 민팅(발행)하기 (Klip 지갑 QR코드)

🦁 [PROJECT LION] NFT 블록체인 마켓 앱 만들기 with 그라운드X 3기 - 챕터 5-5 회고

---

이미지 링크로 NFT 민팅하기

-1. 이미지 링크를 붙여넣으면 NFT 발행을 할 수 있도록 Input 창을 만들어 준다

이미지링크를 target.value로 읽어와서
useState에 담아주고 value 값으로 그대로 전달한다

<Form.Group>
  <Form.Control // text input 창
    value={mintImgUrl}
    // 이미지를 띄워주는 value
    onChange={(e) => {
      setMintImgUrl(e.target.value);
    }} // input 창에 이미지주소를 입력하면 그대로 useState에 담긴다
    type="text"
    placeholder="이미지 주소를 입력하세요"
  />
</Form.Group>

---

-2. 이미지 링크를 붙여넣으면 이미지를 그대로 출력한다

---

-3. Klip API를 axios 로 받아온 후
type: "execute_contract" 의 파라미터를 입력하지않고 인자로 받아온다

UseKlip.js

{ // 클립 API 에 👉 execute_contract 👉 transaction 파라미터
"type": "execute_contract",
"transaction": {
	"to": "0xA987...4321",
	"value": "...",
	"abi": "...",
	"params": "..."
}

👇👇👇👇👇👇👇👇

파라미터값을 👉 인자로 대입한다

---

-4. 위에 파라미터에 들어갈 인자 값을 대입한다

mintWithTokenURI 함수를 실행하기 위한 인자

toAddress 👉 NFT 발행 지갑주소 (소유주)
tokenId 👉 발행하는 NFT 임의의 번호
tokenURI 👉 NFT의 정보 (이미지, 제목, 세부내용 등등)

---

-5. App.js 로 가서 👉 파라미터가 저장된 함수를 가져온다

불러오는 과정 순서

UseKlip.js

5-1. executeContract 함수에서는
👉 type: "execute_contract" 의 파라미터값과 인자를 짝지어준다

5-2. mintCardWithURI 함수에서는
👉 실행하고자 하는 ABI만 가져오고
👉 executeContract 함수를 호출해서 ‘ABI / 컨트랙트 주소’ 로 caver-js 를 통해 리액트와 연결준비
👉 mintWithTokenURI 함수를 실행하기 위한 인자
👉 mintCardWithURI 에 대한 QR코드 생성

App.js

5-3. KlipAPI.mintCardWithURI 에서 설정한 인자에 해당하는 값들을 대입한다

❗ 여기서 TokenId 는 임의의 번호를 수동으로 지정하지않고 10,000,000 번호 안에서 랜덤한 값으로 지정해준다

---

-6. npm run start 로 실행시킨뒤 Klip 지갑 연결하고 NFT 발행 컨트랙트 실행

👆 NFT 민팅이 성공하면 Alert 알림창이 뜬다

1. QR코드로 Klip 지갑을 연결하고
   
2. NFT로 만들고자하는 이미지링크를 붙여넣는다
   
3. 발행 버튼을 누르면
   
4. NFT를 발행하기 위한 컨트랙트로 QR코드가 다시 생성된다
   
5. QR 코드로 Klip 지갑에 연결해서 컨트랙트를 실행시킨다
   
6. 컨트랙트를 실행해서 NFT 민팅이 성공하면 Alert 알림창이 뜬다
   ⭐ 컨트랙트를 실행할때는 수수료(KLAY) 가 발생한다

---

-7. Klaytn IDE 로 와서 확인해보면 조회가 잘되는걸 볼 수 있다

• tokenOfOwnerByIndex 👉 주소와, 배열의 몇번째 를 입력하면 TokenId 를 확인
  (나의 주소, 이번에 발행한 건 3번째라서 배열의 3번째인 2)
  

  ❗ TokenId 는 아까 10,000,000 번호 안에서 랜덤한 값으로 지정해줘서 4,571,282 라는 번호가 나왔다
  

• tokenURI 👉 NFT의 TokenId 를 입력하면 URI를 확인
  (내가 붙여넣은 이미지링크)

---

Klip 지갑 QR코드로 NFT 발행하기 코드

https://github.com/genie19197/lecture-klay-market

---

---