완료되면 "View Contract" 버튼을 클릭합니다. 체크리스트/진행 표시줄이 있는 thirdweb 대시보드의 컨트랙트 페이지로 이동합니다:
체크리스트에서 볼 수 있듯이, 지금까지는 컨트랙트를 배포하기만 한 것입니다. 실제로 NFT를 민팅해야 합니다. 왼쪽 열에서 "NFTs" 메뉴 항목을 클릭하여 현재 비어 있는 새 페이지를 엽니다:
"Mint" 버튼을 클릭하면 NFT의 각 속성에 대한 필드가 있는 사이드 패널이 열립니다. 여기서 NFT의 메타데이터를 생성합니다:
다양한 필드를 입력합니다. NFT 컬렉션에 특화된 필드(예: "Artist_name" 또는 "Type_of_work")를 생성하고 고급 옵션을 탐색할 수 있지만, 테스트를 위해서는 최소한으로 유지할 수 있습니다: 이름, 미디어 파일, 설명.
사이드 패널 하단의 "Mint NFT" 버튼을 클릭하고 지갑에서 트랜잭션을 승인합니다.
그러면 thirdweb이 "NFTs" 페이지를 표시하며, NFT가 NFT 컨트랙트에 연결되어 표시됩니다.
완료! NFT를 민팅했습니다!
실제로 Chiliz Chain에 있는지 확인하려면 Chiliscan(Spicy Testnet을 사용하는 경우 테스트넷 버전)을 열고 NFT의 해시를 검색창에 붙여넣으세요. 즉시 컨트랙트가 체인에 있음을 확인해 주며, "Inventory" 탭에 귀하(또는 적어도 귀하의 지갑 ID)가 소유자로 NFT가 나열됩니다.
Chiliz Chain Mainnet에서 NFT를 민팅한 경우, Rarible 또는 OKX와 같은 마켓플레이스의 계정에서 NFT가 표시되며, 거기서 판매를 시작할 수 있습니다!
"Create Token" 버튼 사용하기
이것은 위의 방법보다 더 간단한 방법으로, thirdweb에 최근 추가된 기능입니다.
thirdweb 대시보드의 프로젝트 폴더에서 왼쪽 사이드바의 "Tokens" 옵션을 클릭합니다:
열린 "Tokens" 페이지에서 오른쪽의 "Create Token" 버튼을 클릭합니다. 2가지 옵션이 있는 모달 창이 열리면 "Create NFT Collection"을 선택합니다.
TokenERC721 배포 페이지의 단계별 버전으로 이동합니다(실제로 ERC-721 Drop 컨트랙트를 배포합니다). 이 컨트랙트에 필요한 모든 필드를 입력한 후 "Next" 버튼을 누릅니다.
다음 화면은 NFT 자체에 관한 것입니다: 이미지를 업로드하고 이미지를 설명하는 필드를 입력한 후 "Next" 버튼을 누릅니다.
thirdweb이 출시하려는 NFT 컬렉션의 요약을 표시합니다. 모든 것이 올바른지 확인한 후 "Launch NFT Collection" 버튼을 클릭합니다.
thirdweb이 컨트랙트 배포, NFT 민팅, 조건 설정을 한 번에 처리합니다. Web3 지갑을 통해 세 가지 트랜잭션을 확인해야 합니다.
완료되면 "View NFT" 버튼을 클릭하면 이 컨트랙트와 연결된 NFT를 표시하는 특정 컨트랙트 페이지로 thirdweb 대시보드에 돌아갑니다.
여기서 블록 탐색기를 통해 실제로 체인에 있는지 확인하거나 마켓플레이스를 통해 NFT 판매를 시작할 수 있습니다.
단일 NFT 프로그래밍 방식으로 민팅하기
다음은 미디어 파일을 IPFS에 업로드하고, metadata.json 파일을 생성한 후 IPFS에 업로드하는 thirdweb v5 SDK를 사용한 코드 샘플입니다.
다음이 필요합니다:
Chiliz Chain에 이미 배포된 ERC-721 컨트랙트. 이 경우 다른 도구가 아닌 thirdweb을 사용하여 배포해야 합니다.
thirdweb API 키(thirdweb을 통해 배포한 ERC-721 컨트랙트에 연결). 스마트 컨트랙트 프로젝트 페이지에서 "Client ID"라는 이름으로 찾을 수 있습니다.
thirdweb SDK 로컬 설치. npm을 사용하여 설치할 수 있습니다:
dotenv 파라미터는 개인 값을 저장하는 데 필요한 .env 파일을 생성합니다:
PRIVATE_KEY와 THIRDWEB_SECRET_KEY를 클라이언트 측 코드에 절대 노출하지 마세요!
이 파일은 보안 서버/CI에 보관하고, 공개 저장소에 업로드하지 마세요.
THIRDWEB_SECRET_KEY=YOUR_TW_SECRET_KEY # From your thirdweb project's page.
PRIVATE_KEY=0xabc... # The Web3 wallet that will send the transaction.
CONTRACT_ADDRESS=0xYour721Address # Your deployed TokenERC721 contract.
CHAIN_ID=88882 # 88888=Mainnet, 88882=Spicy
IMAGE_PATH=./art/image.png # The local path to your media file.
NAME=My Chiliz NFT
DESCRIPTION=Minted on Chiliz Chain
import 'dotenv/config';
import fs from 'fs';
import path from 'path';
import { createThirdwebClient, getContract, sendTransaction, waitForReceipt, parseEventLogs } from "thirdweb";
import { defineChain } from "thirdweb/chains";
import { privateKeyToAccount } from "thirdweb/wallets";
import { mintTo, transferEvent, getNFT } from "thirdweb/extensions/erc721";
import { upload } from "thirdweb/storage";
function guessMime(p: string) {
const ext = path.extname(p).toLowerCase();
if (ext === ".png") return "image/png";
if (ext === ".jpg" || ext === ".jpeg") return "image/jpeg";
if (ext === ".webp") return "image/webp";
if (ext === ".gif") return "image/gif";
if (ext === ".mp4") return "video/mp4";
if (ext === ".webm") return "video/webm";
return "application/octet-stream";
}
async function main() {
const client = createThirdwebClient({ secretKey: process.env.THIRDWEB_SECRET_KEY! });
const chain = defineChain(Number(process.env.CHAIN_ID)); // 88888 or 88882
const account = privateKeyToAccount({ client, privateKey: process.env.PRIVATE_KEY! });
const contract = getContract({
client,
chain,
address: process.env.CONTRACT_ADDRESS as `0x${string}`,
});
// Upload media file to IPFS
const filePath = process.env.IMAGE_PATH!;
const buffer = fs.readFileSync(filePath);
const file = new File([buffer], path.basename(filePath), { type: guessMime(filePath) });
const [imageUri] = await upload({ client, files: [file] }); // returns ipfs://...
// console.log("imageUri:", imageUri);
// Build & upload metadata.json referencing IPFS imageUri
const metadata = {
name: process.env.NAME!,
description: process.env.DESCRIPTION!,
image: imageUri
};
const metaBlob = new Blob([JSON.stringify(metadata, null, 2)], { type: "application/json" });
const metaFile = new File([metaBlob], "metadata.json", { type: "application/json" });
const [metadataUri] = await upload({ client, files: [metaFile] });
// console.log("metadataUri:", metadataUri);
// Prepare & send mintTo transaction using the metadata URI
// mintTo accepts a string to use directly as tokenURI.
const tx = mintTo({
contract,
to: account.address,
nft: metadataUri, // The tokenURI
});
const { transactionHash } = await sendTransaction({ transaction: tx, account });
//console.log("tx:", transactionHash);
const receipt = await waitForReceipt({ client, chain, transactionHash });
// Parse Transfer event to display tokenId
const events = parseEventLogs({ logs: receipt.logs, events: [transferEvent()] });
const minted = events.find(e => e.eventName === "Transfer" && e.args.from === "0x0000000000000000000000000000000000000000");
const tokenId = minted ? (minted.args.tokenId as bigint) : undefined;
//console.log("tokenId:", tokenId?.toString() ?? "(not found)");
if (tokenId !== undefined) {
const nft = await getNFT({ contract, tokenId });
//console.log("tokenURI (read back):", nft.tokenURI);
}
}
main().catch((err) => (console.error(err), process.exit(1)));
THIRDWEB_SECRET_KEY=YOUR_TW_SECRET_KEY # From your thirdweb project's page.
PRIVATE_KEY=0xabc... # The Web3 wallet that will send the transaction.
CONTRACT_ADDRESS=0xYour721Address # Your deployed TokenERC721 contract.
CHAIN_ID=88882 # 88888=Mainnet, 88882=Spicy
IMAGE_PATH=./art # The local path to your media files.
NAME_PREFIX=My Chiliz NFT # This will become: "My Chiliz NFT <n>"
DESCRIPTION=Minted on Chiliz Chain
import 'dotenv/config';
import fs from 'fs';
import path from 'path';
import { createThirdwebClient, getContract, sendTransaction, waitForReceipt, parseEventLogs } from "thirdweb";
import { defineChain } from "thirdweb/chains";
import { privateKeyToAccount } from "thirdweb/wallets";
import { mintTo, transferEvent, getNFT } from "thirdweb/extensions/erc721";
import { upload } from "thirdweb/storage";
function guessMime(p: string) {
const ext = path.extname(p).toLowerCase();
if (ext === ".png") return "image/png";
if (ext === ".jpg" || ext === ".jpeg") return "image/jpeg";
if (ext === ".webp") return "image/webp";
if (ext === ".gif") return "image/gif";
if (ext === ".mp4") return "video/mp4";
if (ext === ".webm") return "video/webm";
return "application/octet-stream";
}
// One way to gather all files
function listMediaFiles(dir: string) {
const allow = new Set([".png", ".jpg", ".jpeg", ".webp", ".gif", ".mp4", ".webm", ".svg"]);
return fs
.readdirSync(dir)
.filter((f) => allow.has(path.extname(f).toLowerCase()))
.map((f) => path.join(dir, f));
}
async function main() {
const client = createThirdwebClient({ secretKey: process.env.THIRDWEB_SECRET_KEY! });
const chain = defineChain(Number(process.env.CHAIN_ID)); // 88888 or 88882
const account = privateKeyToAccount({ client, privateKey: process.env.PRIVATE_KEY! });
const contract = getContract({
client,
chain,
address: process.env.CONTRACT_ADDRESS as `0x${string}`,
});
// Upload media files in a folder to IPFS
const dirPath = process.env.IMAGES_DIR!;
const filePaths = listMediaFiles(dirPath);
if (!filePaths.length) {
throw new Error(`No media files found in ${dirPath}`);
}
const fileObjs = filePaths.map((p) => {
const buffer = fs.readFileSync(p);
return new File([buffer], path.basename(p), { type: guessMime(p) });
});
const imageUris = await upload({ client, files: fileObjs }); // returns ["ipfs://...", ...]
//console.log("Uploaded images to IPFS:", imageUris.length, "files");
// Build & upload each metadata.json referencing its imageUri
// Uses NAME and DESCRIPTION envs; names become "<NAME> #<index>"
const namePrefix = process.env.NAME!;
const description = process.env.DESCRIPTION!;
// Create an array of File objects for metadata JSONs
const metaFiles = imageUris.map((imageUri, i) => {
const metadata = {
name: `${namePrefix} #${i + 1}`,
description,
image: imageUri
};
const metaBlob = new Blob([JSON.stringify(metadata, null, 2)], { type: "application/json" });
return new File([metaBlob], `metadata-${i + 1}.json`, { type: "application/json" });
});
const metadataUris = await upload({ client, files: metaFiles }); // ["ipfs://.../metadata-1.json", ...]
//console.log("Uploaded metadata files to IPFS:", metadataUris.length);
// Prepare & send mintTo transactions using the metadata URIs (sequential)
const ZERO = "0x0000000000000000000000000000000000000000";
for (let i = 0; i < metadataUris.length; i++) {
const metadataUri = metadataUris[i];
const tx = mintTo({
contract,
to: account.address,
nft: metadataUri, // The tokenURI
});
const { transactionHash } = await sendTransaction({ transaction: tx, account });
console.log(`[${i + 1}/${metadataUris.length}] tx:`, transactionHash);
const receipt = await waitForReceipt({ client, chain, transactionHash });
// Parse Transfer event to get tokenId for this mint
const events = parseEventLogs({ logs: receipt.logs, events: [transferEvent()] });
const minted = events.find(
(e) => e.eventName === "Transfer" && typeof e.args.from === "string" && e.args.from.toLowerCase() === ZERO
);
const tokenId = minted ? (minted.args.tokenId as bigint) : undefined;
// console.log(`[${i + 1}/${metadataUris.length}] tokenId:`, tokenId?.toString() ?? "(not found)");
if (tokenId !== undefined) {
const nft = await getNFT({ contract, tokenId });
// console.log(`[${i + 1}/${metadataUris.length}] tokenURI (read back):`, nft.tokenURI);
}
}
}
main().catch((err) => (console.error(err), process.exit(1)));
