MintNFT Component Documentation

The MintNFT component provides a user interface for minting new NFTs in the Gold Digger ecosystem. This document explains how to use the component and its underlying API.

Component Usage

Basic Implementation

import MintNFTForm from '@/components/services/mint-nft';

export default function MintPage() {
  const handleSuccess = (nftId: string) => {
    console.log("NFT minted successfully with ID: " + nftId);
    // Navigate to the NFT detail page or show success message
  };

  const handleError = (error: Error) => {
    console.error('Error minting NFT:', error);
    // Show error message to user
  };

  return (
    <div className="container mx-auto py-8">
      <h1 className="text-3xl font-bold mb-6">Mint a New NFT</h1>
      <MintNFTForm 
        collectionId="gold-diggers-genesis"
        onSuccess={handleSuccess}
        onError={handleError}
      />
    </div>
  );
}

Props

The MintNFTForm component accepts the following props:

Minting Process

Required Data

To mint an NFT, the following data is required:

• Title: Name of the NFT
• Description: Detailed description of the NFT
• Image: URL to the NFT image (uploaded via the component)
• Price: Initial price in SOL
• Traits: Array of traits with name, value, and rarity
• Collection ID: ID of the collection the NFT belongs to
• Creator: Wallet address of the creator (automatically set)
• Royalty Percentage: Percentage of secondary sales that go to the creator

API Method

The component uses the mintNFT function from @/lib/api/mint:

import { mintNFT } from '@/lib/api/mint';

// Example usage
const nftId = await mintNFT({
  title: "Gold Digger #123",
  description: "A unique character with special abilities",
  imageUrl: "https://example.com/image.png",
  price: 1.5,
  traits: [
    { name: "Rarity", value: "Legendary", rarity: 95 },
    { name: "Power", value: "High", rarity: 80 }
  ],
  collectionId: "gold-diggers-genesis",
  creator: "8xR45EThbYDgT4kM9zVjj9ZzNhNBgqGK7h1M3rM3nJxUQGzxiib",
  royaltyPercentage: 5
});

Database Integration

When an NFT is minted, the following happens in the database:

1. A new record is created in the nfts table with the NFT metadata
2. A mint transaction is recorded in the nft_transactions table
3. The minted count for the collection is incremented

Wallet Integration

The component requires a connected wallet to mint NFTs. It uses the useWallet hook from @/components/providers/wallet-context-provider to access the user's wallet.

Error Handling

The component handles various error scenarios:

• Wallet not connected
• Missing required fields
• Image upload failures
• Database errors
• Blockchain transaction failures

Customization

Styling

The component uses shadcn/ui components and can be customized by modifying the theme or applying custom classes.

Form Validation

You can add custom validation by extending the form submission handler:

const handleSubmit = async (e: React.FormEvent) => {
  e.preventDefault();
  
  // Custom validation
  if (formData.title.length < 5) {
    toast({
      title: "Invalid Title",
      description: "Title must be at least 5 characters long",
      variant: "destructive"
    });
    return;
  }
  
  // Continue with form submission
  // ...
};

Best Practices

1. Always connect a wallet before attempting to mint
2. Use high-quality images for better NFT presentation
3. Provide detailed descriptions and meaningful traits
4. Set reasonable royalty percentages (typically 5-10%)
5. Group related NFTs into collections for better organization