Technology, Tutorials, for Developer

Klaytn에서 Mint.club 프로토콜 시작하기: 개요 및 실습

*Note: 아래 내용은 Kaia 체인 런칭 이후에도 Kaia 체인을 기반으로 기술적으로 적용 가능할 예정입니다.

들어가며

일반적으로 암호화폐 생태계에서 토큰을 생성하려면 토큰 생성자가 기술 및 기본 프로그래밍 기술을 갖춰야 합니다. 하지만 최근에는 Mint.club과 같은 노코드 솔루션 덕분에 토큰 생성 방식이 발전하고 있습니다. Mint.club은 본딩 커브 풀의 기본 자산으로 ERC20 토큰을 사용해 본딩 커브 지원 토큰, 즉 NFT를 생성하는 노코드 솔루션입니다. Mint.club은 토큰 생성 및 유동성 공급에 고유한 접근 방식을 채택하여 토큰 생성자에게 사람들이 언제든지 거래할 수 있는 토큰을 생성할 수 있는 기회를 제공합니다.

이 튜토리얼에서는 민트클럽 프로토콜과 주요 기능, 그리고 민트클럽 v2 SDK를 사용해 Klaytn에서 본딩 커브 에셋을 만드는 방법에 대해 알아보겠습니다.

빠르게 시작하기 위해 이 튜토리얼의 전체 코드는 GitHub에서 찾을 수 있습니다. 이렇게 하면 따라하면서 애플리케이션의 내부 작동을 살펴볼 수 있습니다.

먼저, 최종 결과물은 아래와 같습니다.

전제 조건

시작하기에 앞서, 다음과 같은 전제 조건이 필요합니다:

  • Node.js 및 해당 패키지 관리자 NPM, 버전 18. 다음 터미널 명령을 실행하여 Node.js가 설치되었는지 확인합니다: node -v && npm -v
  • JavaScript에 대한 기본적인 이해,
  • 작동 중인 React 프로젝트(npx create-react-app project-name을 실행하여)

민트클럽이 특별한 이유는 무엇인가요?

본딩 곡선은 미리 정의된 가격-공급 관계를 통해 토큰의 가격을 현재 공급량과 연결하는 수학적 개념으로, 민트클럽의 기초를 형성합니다. 일반적으로 민트클럽은 이산 본딩 곡선(Discrete Bonding Curve, DBC)이라고 하는 독특한 유형의 본딩 곡선 시스템을 사용하여 곡선을 단계별 가격 구간으로 분할합니다. 이를 통해 누군가 본딩 커브 기반 토큰을 구매하거나 판매하면 스마트 컨트랙트는 자동으로 해당 금액의 결제 토큰(기본 자산)을 계산하고, 결제 토큰을 본딩 커브 풀로 가져와 구매자를 위한 새 토큰을 발행하거나, 판매된 토큰을 소각하여 풀에서 판매자에게 기본 자산을 반환합니다.

민트클럽의 자동화된 본딩 곡선 시스템을 통해 토큰 제작자는 가격-공급 곡선을 설정하여 토큰 노믹스를 설계할 수 있으며, 중앙화된 거래소나 오더북에 의존하지 않고 자율적으로 운영할 수 있습니다. 민트클럽의 다른 고유한 장점은 다음과 같습니다:

  1. 유연한 본딩 곡선 설계 및 EVM 체인에서 기본 자산 선택 가능
  2. 크리에이터 로열티를 통한 간편한 수익 창출
  3. 본딩 커브를 통한 자동 유동성 풀(즉시 거래 가능)
  4. 간편한 에어드랍 및 락업 도구

Mint.club v2 SDK 시작하기

이 튜토리얼에서는 클레이튼에서 본딩 커브 자산을 구축하기 위해 Mint.club v2 SDK를 살펴볼 것입니다. 개발자와 토큰 생성자는 지갑 연결, IPFS에 데이터 저장, 네트워크 커스터마이징, 토큰(ERC20 또는 ERC1155) 기능 실행, 본드, 에어드랍, 락업과 관련된 기능 실행 등 다양한 기능을 Mint.club v2 SDK를 통해 수행할 수 있습니다.

이 가이드에서는 본딩 커브 토큰 생성, 토큰 승인, 토큰 구매와 같은 일부 쓰기 기능을 수행해 보겠습니다. 또한 토큰 생성 후 토큰의 세부 정보 검색과 같은 일부 읽기 기능도 실행할 것입니다.

개발 환경 설정하기

Mint.club SDK를 사용하려면 먼저 개발 환경을 설정하고 Mint.club v2 SDK를 설치해야 합니다. 이를 위해 다음 단계를 따르세요:

1단계: 민트클럽 v2 SDK 설치하기

터미널에 다음 명령을 입력하여 Mint.club v2 SDK를 설치합니다:

bash

npm i mint.club-v2-sdk

2단계: SDK 및 프로젝트 초기화하기

다음 코드를 복사하여 App.jsx 파일에 붙여넣습니다:

import { mintclub } from "mint.club-v2-sdk";
import { useState } from "react";
import { curveData } from "./data";

그런 다음 data.js라는 새 파일을 만들고 다음 코드를 복사하여 붙여넣습니다:

export const stepData = [
    { rangeTo: 50, price: 0 }, // Since price is 0, the first 50 tokens will be allocated to the creator
    { rangeTo: 100, price: 0.01 }, // 0.01 WKLAY for the next 50 tokens
    { rangeTo: 1000, price: 0.1 }, // 0.1 WKLAY for the next 900 tokens
    { rangeTo: 10_000, price: 1 }, // 1 WKLAY for the next 9000 tokens
]
 
export const curveData = {
    curveType: 'LINEAR', 
    stepCount: 10,
    maxSupply: 10_000,
    initialMintingPrice: 0.01, // 0.01 WKLAY 
    finalMintingPrice: 0.1, // 0.1 WKLAY
    creatorAllocation: 100,
}

*Note: data.js에는 create 함수에 대한 선택적 파라미터인 stepDatacurveData가 포함되어 있습니다. 이 튜토리얼에서는 이 본딩 커브 데이터를 사용하여 본딩 커브 에셋을 생성합니다.

이제 SDK를 설치하고 인스턴스화했으니 다음 기능을 살펴보겠습니다:

  • 지갑 연결하기
  • 지갑 연결 해제
  • 토큰 생성
  • 토큰 구매
  • 토큰 승인하기
  • 토큰 세부 정보 얻기

지갑 연결하기

사용자 지갑에 연결을 설정하려면 Mint.club SDK에서 제공되는 connect 메서드를 호출합니다. 이렇게 하면 사용자가 애플리케이션에 지갑을 연결하도록 요청합니다. 애플리케이션에서 사용자의 지갑을 연결하려면 다음 코드를 복사하여 App.jsx 파일에 붙여넣습니다.

export default function App() {
	const [address, setAddress] = useState("");
	
  	const handleConnectWallet = async () => {
    		const address = await mintclub.wallet.connect();
    		setAddress(address);
 	};
	
	return (
		<>
			<button className="bg-black text-white p-2 rounded-md" onClick={handleConnectWallet} > Connect Wallet </button>
   			{address && (<p className="text-center">Connected Address is: {address}</p>)}
		</>
		
	)	 
}

지갑 연결 해제하기

애플리케이션에서 사용자의 지갑을 연결 해제하려면 Mint.club SDK에서 제공되는 disconnect 메서드를 호출하세요. 이를 위해 다음 코드를 복사하여 `App.jsx` 파일에 붙여넣습니다.

export default function App() {
	
    const handleDisconnectWallet = async () => {
    	mintclub.wallet.disconnect();
    	setAddress("");
    };
	return (
		<>
			<button className="bg-black text-white p-2 rounded-md" onClick={handleDisconnectWallet} > Disconnect Wallet </button>
		</>
		
	)	 
}

토큰 생성하기

본딩 커브드 ERC-20 컨트랙트를 배포하려면 create 함수를 호출합니다. bonding-curved ERC-1155 컨트랙트를 배포할 수도 있습니다. 이 튜토리얼에서는 본딩 커브드 ERC-20 컨트랙트를 배포하는 데 중점을 두겠습니다. 배포하려면 다음 코드를 복사하여 App.jsx 파일에 붙여넣습니다:

export default function App() {
	  const [createTokenTxHash, setCreateTokenTxHash] = useState("");
	
  const handleCreateTokens = async (event) => {
    event.preventDefault();
    const _symbol = event.target.symbol.value;
    const _tname = event.target.tname.value;
    console.log(_symbol, _tname);
    await mintclub
      .network('klaytn')
      .token(_symbol)
      .create({
        name: _tname,
        reserveToken: {
          address: '0x19aac5f612f524b754ca7e7c41cbfa2e981a4432', // mainnet WKLAY token address 
          decimals: 18,
        }, 
        curveData,
        onSuccess: (receipt) => {
          setCreateTokenTxHash(receipt.transactionHash);
          
        },
        onError: (error) => {console.log(error);} 
      })
  };
return (
		<>
	   <form
              onSubmit={handleCreateTokens}
              className="flex flex-col justify-items-center justify-center w-full m-auto bg-slate-200 shadow-md p-5 rounded-md"
            >
              <h2 className="p-2">Create Tokens</h2>
              <input
                type="text"
                placeholder="token symbol"
                name="symbol"
                className="text-2xl font-bold rounded-md border-2 border-black text-black m-3 p-2 w-4/4"
              />
              <input
                type="text"
                placeholder="token name"
                name="tname"
                className="text-2xl font-bold rounded-md border-2 border-black text-black m-3 p-2 w-4/4"
              />
              <input
                type="submit"
                placeholder="recipient"
                value="Create"
                className="text-2xl font-bold rounded-md border-2 border-black text-white bg-black m-3 p-2 w-4/4 cursor-pointer"
              />
            </form>
   		{createTokenTxHash && (<p className="text-center">Create Tokens Tx Hash:: {createTokenTxHash}</p>)}
		</>
		
	)	 
}

*Note: 이 기능을 실행하려면 연결된 지갑 주소에 최소 8 KLAY가 있어야 합니다.

토큰 구매하기

본딩 커브 컨트랙트에서 토큰을 구매하려면 Mint.club SDK에서 제공되는 buy 메서드를 호출해야 합니다. 그러려면 다음 코드를 복사하여 App.jsx 파일에 붙여넣으세요:

import { wei } from "mint.club-v2-sdk";
export default function App() {
const [buyTokensTxHash, setBuyTokensTxHash] = useState("");
	
const handleKkakdogBuyTokens = async (event) => {
    event.preventDefault();
    const _amount = event.target.amount.value;
    const _recipient = event.target.recipient.value;
    const result = await mintclub.network("klaytn").token("KKAKDOG").buy({
      amount: wei(_amount, 18),
      slippage: 0,
      recipient: _recipient,
    });
    console.log(result.transactionHash);
    setBuyTokensTxHash(result.transactionHash);
  };
return (
		<>
	   <form
              onSubmit={handleKkakdogBuyTokens}
              className="flex flex-col justify-items-center justify-center w-full m-auto bg-slate-200 shadow-md p-5 rounded-md"
            >
              <h2 className="p-2">Buy Details</h2>
              <input
                type="text"
                placeholder="amount"
                name="amount"
                className="text-2xl font-bold rounded-md border-2 border-black text-black m-3 p-2 w-4/4"
              />
              <input
                type="text"
                placeholder="recipient"
                name="recipient"
                className="text-2xl font-bold rounded-md border-2 border-black text-black m-3 p-2 w-4/4"
              />
              <input
                type="submit"
                placeholder="recipient"
                value="Buy"
                className="text-2xl font-bold rounded-md border-2 border-black text-white bg-black m-3 p-2 w-4/4 cursor-pointer"
              />
            </form>
   		 {buyTokensTxHash && <p className="text-center text-black">Buy Tx Hash: {buyTokensTxHash}</p>}
		</>
		
	)	 
}

*Note: 이 함수는 KKADOG 토큰 구매 주문을 실행합니다. 이 주문을 실행하려면 지갑 주소에 WKLAY가 있어야 합니다. 이 주문을 실행하기 전에 DragonSwap을 사용하여 KLAY에서 WKLAY로 스왑을 수행하시기 바랍니다.

토큰 승인하기

지출자에 대한 토큰 허용량을 approve하려면 mint.club SDK에서 사용 가능한 승인 메서드를 호출하세요. 이를 위해 다음 코드를 복사하여 App.jsx 파일에 붙여넣습니다:

export default function App() {
const [approveTokensTxHash, setApproveTokensTxHash] = useState("");
  const handleApproveTokens = async (event) => {
    event.preventDefault();
    const _symbol = event.target.symbol.value;
    const _amount = event.target.amount.value;
    const _spender = event.target.spender.value;
    console.log(_symbol, _amount, _spender);
    try {
      const result = await mintclub
        .network("klaytn")
        .token(_symbol)
        .approve({
          amount: wei(_amount, 18),
          spender: _spender,
        });
      console.log(result.transactionHash);
      setApproveTokensTxHash(result.transactionHash);
    } catch (error) {
      console.log(error);
    }
  };
return (
		<>
     <form
              onSubmit={handleApproveTokens}
              className="flex flex-col justify-items-center justify-center w-full m-auto bg-slate-200 shadow-md p-5 rounded-md"
            >
              <h2 className="p-2">Approve Tokens</h2>
              <input
                type="text"
                placeholder="token symbol"
                name="symbol"
                className="text-2xl font-bold rounded-md border-2 border-black text-black m-3 p-2 w-4/4"
              />
              <input
                type="text"
                placeholder="token amount"
                name="amount"
                className="text-2xl font-bold rounded-md border-2 border-black text-black m-3 p-2 w-4/4"
              />
              <input
                type="text"
                placeholder="token spender"
                name="spender"
                className="text-2xl font-bold rounded-md border-2 border-black text-black m-3 p-2 w-4/4"
              />
              <input
                type="submit"
                placeholder="recipient"
                value="Approve"
                className="text-2xl font-bold rounded-md border-2 border-black text-white bg-black m-3 p-2 w-4/4 cursor-pointer"
              />
            </form>
            {approveTokensTxHash && <p className="text-center text-black">Approval Tx Hash: {approveTokensTxHash}</p>}
		</>
		
	)	 
}

토큰 세부 정보 가져오기

토큰 생성 후 토큰 세부 정보를 반환하려면 Mint.club SDK에서 제공되는 getDetail() 메서드를 호출하세요. 이렇게 하려면 다음 코드를 복사하여 App.jsx 파일에 붙여넣습니다:

export default function App() {
  const [tokenDetails, setTokenDetails] = useState()
  const handleGetTokenDetails = async (event) => {
    event.preventDefault();
    const _symbol = event.target.symbol.value;
    console.log(_symbol);
    try {
      const detail = await mintclub.network('klaytn').token(_symbol).getDetail();
      console.log(detail.info);
      setTokenDetails(detail.info);
    } catch (error) {
      console.log(error);
    }
    // console.log(receipt.transactionHash);
    // setCreateTxHash(receipt.transactionHash);
  };
return (
<>
  <form
              onSubmit={handleGetTokenDetails}
              className="flex flex-col justify-items-center justify-center w-full m-auto bg-slate-200 shadow-md p-5 rounded-md"
            >
              <h2 className="p-2">Get Tokens Details</h2>
              <input
                type="text"
                placeholder="token symbol"
                name="symbol"
                className="text-2xl font-bold rounded-md border-2 border-black text-black m-3 p-2 w-4/4"
              />
              <input
                type="submit"
                placeholder="recipient"
                value="Get Details"
                className="text-2xl font-bold rounded-md border-2 border-black text-white bg-black m-3 p-2 w-4/4 cursor-pointer"
              />
   </form>

            {tokenDetails && <p className="text-center text-black">Token Contract Address: {tokenDetails.token}</p>}
	
	</>
		
	)	 
}

getDetail() 메서드는 mintRoyalty, burnRoyalty, 크리에이터, 소수점, 기호 등의 토큰 세부 정보가 포함된 객체를 반환합니다. 하지만 이 가이드에서는 토큰 컨트랙트 주소만 반환했습니다.

결론

Klaytn에서 본딩 곡선형 자산을 성공적으로 생성하신 것을 축하합니다! 이 가이드에서는 Mint.club v2 SDK를 사용해 본딩 커브 에셋을 만드는 것이 얼마나 쉬운지 보여드렸습니다. 또한, SDK에서 사용할 수 있는 다른 기능들도 살펴보았습니다.

Klaytn의 Mint.club v2 SDK 바운티는 도라핵스에서 확인하실 수 있습니다. 이 바운티를 받으려면 Mint.club v2 SDK를 활용하는 디앱을 기여해야 합니다. 민트클럽 SDK와 그 가능성에 대한 자세한 내용은 Mint Club Documentation에서 확인하실 수 있습니다. 또한 Klaytn 블록체인에 대한 자세한 정보는 Klaytn Documentation에서 확인하실 수 있습니다. 궁금한 점이 있으시다면 Klaytn Forum을 방문해주세요.