Sui Testnet NFT Mint Sample

https://github.com/suijapan/nft-mint-sample
Admin
A hands-on frontend application for minting NFTs on Sui Testnet using a pre-deployed Move contract.
Tokens:3,324
Snippets:16
Trust Score:3.2
Update:11 months ago
Show doc for...
Tokens:
Raw
### Run Frontend Application with Vite Server

Source: https://context7.com/suijapan/nft-mint-sample/llms.txt

Installs frontend dependencies and starts the Vite development server for local testing. The application connects to Sui Testnet and enables wallet-based NFT minting. Ensure pnpm is installed before running these commands.

```bash
# Install dependencies
cd app
pnpm install

# Start development server
pnpm dev -- --host
```

--------------------------------

### Build and Publish Move Contract to Sui Testnet

Source: https://context7.com/suijapan/nft-mint-sample/llms.txt

Compiles the Move contract and publishes it to the Sui Testnet. Requires the Sui CLI tool installed and configured. The publish command creates an immutable package, an UpgradeCap, a Publisher, and a Display object. Gas budget must be specified for the transaction.

```bash
# Build the contract
cd contracts
sui move build

# Publish to Testnet
sui client publish --gas-budget 100000000
```

--------------------------------

### Initializing Display Template in Move Contract

Source: https://context7.com/suijapan/nft-mint-sample/llms.txt

The init function sets up a Display object template for NFT metadata rendering upon contract publication using the one-time witness pattern. It claims the Publisher, registers fields like name, description, image_url, and link, then transfers Display and Publisher to the deployer. Dependencies include Sui's package, display, and transfer modules; runs automatically with no user inputs beyond deployment.

```move
// contracts/sources/nft.move:38-66
fun init(witness: NFT, ctx: &mut TxContext) {
    // Obtain Publisher (required for Display registration)
    let publisher = package::claim(witness, ctx);

    // Register field templates for display
    let mut disp = display::new_with_fields<WorkshopNFT>(
        &publisher,
        vector[
            b"name".to_string(),
            b"description".to_string(),
            b"image_url".to_string(),
            b"link".to_string(),
        ],
        vector[
            b"{name}".to_string(),
            b"{description}".to_string(),
            b"{image_url}".to_string(),
            b"{link}".to_string(),
        ],
        ctx,
    );

    // Update version to activate Display and transfer to creator
    disp.update_version();
    transfer::public_transfer(disp, ctx.sender());

    // Transfer Publisher to deployer
    transfer::public_transfer(publisher, ctx.sender());
}
```

--------------------------------

### Implementing Single NFT Mint Function in Move

Source: https://context7.com/suijapan/nft-mint-sample/llms.txt

The mint entry function creates and transfers a single NFT to the sender's wallet using provided metadata. It calls an internal mint function and validates non-empty name and image URL. Inputs are strings for name, description, image URL, and TxContext; output is the transferred NFT object with no explicit return.

```move
// contracts/sources/nft.move:74-83
entry fun mint(
    name: String,
    description: String,
    image_url: String,
    ctx: &mut TxContext,
) {
    let nft = mint_internal(name, description, image_url, ctx);
    // Safe to transfer anywhere due to `store` ability
    transfer::public_transfer(nft, ctx.sender());
}
```

--------------------------------

### Generate Sui Vision Explorer URLs (TypeScript)

Source: https://context7.com/suijapan/nft-mint-sample/llms.txt

Provides a helper to build correctly formatted Sui Vision explorer URLs for packages, objects, transactions, accounts on Testnet. Accepts a kind identifier and the corresponding Sui object ID, returning the full URL. Defaults to the base explorer URL for unknown kinds.

```TypeScript
// app/src/lib/sui.ts:41-59
const SUI_VISION_BASE = "https://testnet.suivision.xyz";

export function explorerLink(
	kind: "package" | "object" | "tx" | "account",
	id: string,
) {
	switch (kind) {
		case "package":
			return `${SUI_VISION_BASE}/package/${id}`;
		case "object":
			return `${SUI_VISION_BASE}/object/${id}`;
		case "tx":
			return `${SUI_VISION_BASE}/txblock/${id}`;
		case "account":
			return `${SUI_VISION_BASE}/account/${id}`;
		default:
			return SUI_VISION_BASE;
	}
}

// Usage example:
const txUrl = explorerLink("tx", "CBynC8J8hzNJuU8hFxpRCn4HfBrZzF1RbcGfb4PHi3k8");
// Returns: https://testnet.suivision.xyz/txblock/CBynC8J8hzNJuU8hFxpRCn4HfBrZzF1RbcGfb4PHik8
```

--------------------------------

### Implementing Bulk NFT Mint Function in Move

Source: https://context7.com/suijapan/nft-mint-sample/llms.txt

The mint_bulk entry function mints multiple NFTs in one transaction by processing vectors of metadata matching the specified quantity. It asserts equal lengths for names, descriptions, and image URLs before minting and transferring each NFT. Inputs include quantity (u64) and mutable vectors of strings plus TxContext; limitation is fixed vector sizes without dynamic resizing.

```move
// contracts/sources/nft.move:85-105
entry fun mint_bulk(
    quantity: u64,
    mut names: vector<String>,
    mut descriptions: vector<String>,
    mut image_urls: vector<String>,
    ctx: &mut TxContext,
) {
    assert!(names.length() == quantity, EInvalidNamesLength);
    assert!(descriptions.length() == quantity, EInvalidDescriptionsLength);
    assert!(image_urls.length() == quantity, EInvalidImageUrlsLength);

    quantity.do!(|_| {
        let nft = mint_internal(
            names.pop_back(),
            descriptions.pop_back(),
            image_urls.pop_back(),
            ctx
        );
        transfer::public_transfer(nft, ctx.sender());
    })
}
```

--------------------------------

### Resolve Sui Network Configuration (TypeScript)

Source: https://context7.com/suijapan/nft-mint-sample/llms.txt

Resolves the target Sui network from environment variables, supporting preset networks (localnet, devnet, testnet, mainnet) and custom RPC URLs. Returns an object with the network name and RPC URL, and throws an error for unknown configurations. Exposes the resolved configuration for application-wide use.

```TypeScript
// app/src/lib/network.ts:1-34
const PRESET_NETWORKS = {
	localnet: "http://127.0.0.1:9000",
	devnet: "https://fullnode.devnet.sui.io:443",
	testnet: "https://fullnode.testnet.sui.io:443",
	mainnet: "https://fullnode.mainnet.sui.io:443",
} as const;

function resolveNetwork(): { name: string; url: string } {
	const envName = import.meta.env.VITE_SUI_NETWORK ?? "testnet";
	if (envName in PRESET_NETWORKS) {
		const key = envName as PresetKey;
		return { name: key, url: PRESET_NETWORKS[key] };
	}

	const envUrl = import.meta.env.VITE_SUI_RPC_URL;
	if (!envUrl) {
		throw new Error(
			`Unknown network ${envName} specified. Set PRESET or VITE_SUI_RPC_URL.`
		);
	}
	return { name: envName, url: envUrl };
}

const resolved = resolveNetwork();

export const appNetworkConfig: NetworkConfig = {
	[resolved.name]: { url: resolved.url },
};
export const defaultNetworkName = resolved.name;

// Configuration via .env:
// VITE_SUI_NETWORK=testnet
// VITE_PACKAGE_ID=0xffb17d198be1636f5bc710a45581e78c52b0592db19b966c974fec737c30350d
```

--------------------------------

### Build Sui Mint Transaction Function (TypeScript)

Source: https://context7.com/suijapan/nft-mint-sample/llms.txt

Creates a Sui transaction that calls the Move contract's mint function using provided NFT metadata. It reads contract identifiers from environment variables and formats the arguments for the transaction. Returns a ready-to-sign Transaction object.

```TypeScript
// app/src/lib/sui.ts:22-39
export function buildMintTransaction(values: MintFormValues): Transaction {
	const packageId = getEnv("VITE_PACKAGE_ID");
	const moduleName = getEnv("VITE_MODULE");
	const functionName = getEnv("VITE_FN_MINT");

	const tx = new Transaction();
	// Create transaction data calling the NFT contract's mint function
	tx.moveCall({
		target: `${packageId}::${moduleName}::${functionName}`,
		arguments: [
			tx.pure.string(values.name),
			tx.pure.string(values.description),
			tx.pure.string(values.imageUrl),
		],
	});

	return tx;
}

// Usage example:
const mintTx = buildMintTransaction({
	name: "Sui Workshop NFT",
	description: "My first NFT on Sui",
	imageUrl: "https://example.com/image.png"
});
```

--------------------------------

### Defining WorkshopNFT Structure in Move

Source: https://context7.com/suijapan/nft-mint-sample/llms.txt

The WorkshopNFT struct defines the core NFT object on the Sui blockchain with key and store abilities for uniqueness and transferability. It includes fields for name, description, image URL, and creator address. This structure depends on Sui's UID and standard types, with no specific inputs or outputs beyond object creation.

```move
// contracts/sources/nft.move:21-27
public struct WorkshopNFT has key, store {
    id: UID,              // Sui-managed unique identifier (required)
    name: String,         // Display name
    description: String,  // Description text
    image_url: String,    // Image URL (IPFS or HTTPS)
    creator: address,     // Creator (sender at mint time)
}
```

--------------------------------

### React Mint Form Component for NFT Minting (TypeScript)

Source: https://context7.com/suijapan/nft-mint-sample/llms.txt

Defines the submit handler for the MintForm React component, performing validation, building the mint transaction, and submitting it, waiting for the receipt, extracting the minted object ID, and invoking the completion callback. Handles error states and UI state transitions throughout the workflow.

```text
// app/src/components/MintForm.tsx:90-139
const handleSubmit = async (event: FormEvent<HTMLFormElement>) => {
	event.preventDefault();
	setError(null);

	const validationError = validate();
	if (validationError) {
		setError(validationError);
		return;
	}

	if (!account) {
		setError("Please connect wallet");
		return;
	}

	setState("submitting");

	try {
		// Create transaction data
		const tx = buildMintTransaction({
			name: name.trim(),
			description: description.trim(),
			imageUrl,
		});

		// Sign & submit transaction
		const { digest } = await signAndExecuteTransaction({
			transaction: tx,
		});

		// Get execution result
		const receipt = await client.waitForTransaction({
			digest,
			options: {
				showEffects: true,
				showEvents: true,
			},
		});

		const objectId = extractObjectId(receipt);
		onComplete({ digest, objectId });\t	Form();
	} catch (err) {
		const message =
			err instanceof Error ? err.message : "Transaction failed";
		setError(message);
	} finally {
		setState("idle");
	}
};

// Component usage:
<MintForm
	onComplete={(result) => setMintResult(result)}
	account={currentAccount?.address ?? null}
/>
```
Tokens:
Raw