CollectionMintButton

npx bigblocks add collection-mint-button

import { CollectionMintButton } from 'bigblocks';

interface CollectionData {
  // Basic info
  name: string;
  description: string;
  quantity?: number;
  // Cover image
  coverImage: File | null;
  // Rarities
  rarities: CollectionRarity[];
  // Traits
  traits: CollectionTraits;
  // Royalties
  royalties: CollectionRoyalty[];
}

interface CollectionRarity {
  label: string;
  percentage: string; // Decimal format: "0.5000" = 50%
  items?: string; // Number of items with this rarity
}

interface CollectionRoyalty {
  type: RoytaltyType;
  destination: string;
  percentage: string; // Decimal format: "0.0100" = 1%
}

import { CollectionMintButton } from 'bigblocks';

export default function CollectionCreator() {
  const handleSuccess = (txid: string, collection: CollectionData) => {
    console.log('Collection created!', { txid, collection });
    // Redirect to collection management
    router.push(`/collections/${txid}`);
  };

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

  return (
    <div className="p-6">
      <h2>Create Your NFT Collection</h2>
      <CollectionMintButton
        onSuccess={handleSuccess}
        onError={handleError}
      />
    </div>
  );
}

import { CollectionMintButton } from 'bigblocks';

export default function GameCollections() {
  const gameCollectionDefaults = {
    name: 'Hero Cards',
    description: 'Collectible hero cards for the fantasy game',
    quantity: 10000,
    rarities: [
      { label: 'Common', percentage: '0.6000' },
      { label: 'Rare', percentage: '0.3000' },
      { label: 'Epic', percentage: '0.0900' },
      { label: 'Legendary', percentage: '0.0100' }
    ],
    traits: {
      'Class': {
        values: {
          'Warrior': { rarity: '0.2500' },
          'Mage': { rarity: '0.2500' },
          'Archer': { rarity: '0.2500' },
          'Assassin': { rarity: '0.2500' }
        }
      },
      'Element': {
        values: {
          'Fire': { rarity: '0.2000' },
          'Water': { rarity: '0.2000' },
          'Earth': { rarity: '0.2000' },
          'Air': { rarity: '0.2000' },
          'Light': { rarity: '0.1000' },
          'Dark': { rarity: '0.1000' }
        }
      }
    }
  };

  return (
    <CollectionMintButton
      collection={gameCollectionDefaults}
      buttonText="Create Game Collection"
      dialogTitle="Deploy Hero Card Collection"
      color="green"
      onSuccess={(txid, collection) => {
        // Save to game database
        saveGameCollection({ txid, ...collection });
        
        // Set up minting pipeline
        initializeCollectionMinting(txid);
      }}
    />
  );
}

import { CollectionMintButton } from 'bigblocks';
import { useState } from 'react';

export default function MarketplaceCollections() {
  const [collections, setCollections] = useState([]);

  const handleCollectionCreation = (txid: string, collection: CollectionData) => {
    setCollections(prev => [...prev, { txid, ...collection }]);
    
    // Auto-setup marketplace listing
    createMarketplaceCollection({
      collectionTxid: txid,
      name: collection.name,
      description: collection.description,
      floorPrice: 1000, // sats
      royalties: collection.royalties
    });
  };

  return (
    <div className="space-y-6">
      <CollectionMintButton
        onSuccess={handleCollectionCreation}
        buttonText="Launch New Collection"
      />
      
      {collections.length > 0 && (
        <div>
          <h3>Your Collections</h3>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
            {collections.map(collection => (
              <div key={collection.txid} className="border rounded-lg p-4">
                <h4 className="font-semibold">{collection.name}</h4>
                <p className="text-sm text-gray-600">{collection.description}</p>
                <div className="mt-2 flex justify-between">
                  <span className="text-xs">Items: {collection.quantity}</span>
                  <span className="text-xs">Traits: {Object.keys(collection.traits).length}</span>
                </div>
              </div>
            ))}
          </div>
        </div>
      )}
    </div>
  );
}

// Example image preparation
const prepareCollectionImage = async (file: File): Promise<boolean> => {
  // Validate format
  const validTypes = ['image/png', 'image/jpeg', 'image/gif', 'image/webp'];
  if (!validTypes.includes(file.type)) {
    throw new Error('Invalid image format');
  }
  
  // Check size limit
  if (file.size > 1024 * 1024) {
    throw new Error('Image too large (max 1MB)');
  }
  
  // Validate dimensions
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => {
      if (img.width !== img.height) {
        reject(new Error('Image must be square'));
      } else if (img.width > 2048) {
        reject(new Error('Image too large (max 2048x2048)'));
      } else {
        resolve(true);
      }
    };
    img.src = URL.createObjectURL(file);
  });
};

// Example trait structure
const artCollectionTraits = {
  'Background': {
    values: {
      'Solid Blue': { rarity: '0.3000' },    // 30%
      'Gradient': { rarity: '0.2000' },      // 20%
      'Abstract': { rarity: '0.1500' },      // 15%
      'Cosmic': { rarity: '0.0500' }         // 5%
    }
  },
  'Style': {
    values: {
      'Minimalist': { rarity: '0.4000' },    // 40%
      'Detailed': { rarity: '0.3000' },      // 30%
      'Experimental': { rarity: '0.2000' },  // 20%
      'Surreal': { rarity: '0.1000' }        // 10%
    }
  }
};

// Calculate overall item rarity
const calculateItemRarity = (traits: Record<string, string>) => {
  let totalRarity = 1;
  
  Object.entries(traits).forEach(([category, value]) => {
    const traitRarity = parseFloat(
      collectionTraits[category]?.values[value]?.rarity || '1'
    );
    totalRarity *= traitRarity;
  });
  
  return totalRarity;
};

// Example royalty setup
const royaltyConfig = [
  {
    type: RoytaltyType.PAYMAIL,
    destination: 'artist@handcash.io',
    percentage: '0.0500' // 5%
  },
  {
    type: RoytaltyType.ADDRESS,
    destination: '1A1zP1eP5QGefi2DMPTfTL5SLmv7DivfNa',
    percentage: '0.0200' // 2%
  }
];

const handleError = (error: Error) => {
  switch (error.message) {
    case 'Royalties exceed maximum 7%':
      setErrorMessage('Total royalties cannot exceed 7%. Please adjust your royalty configuration.');
      break;
    case 'Rarities must sum to 100%':
      setErrorMessage('Rarity percentages must total 100%. Please check your rarity configuration.');
      break;
    default:
      setErrorMessage(`Collection creation failed: ${error.message}`);
  }
};

const handleCollectionCreation = (txid: string, collection: CollectionData) => {
  // Share collection launch
  const message = `🎨 Just launched "${collection.name}" NFT collection on Bitcoin SV! ${collection.quantity} items with ${Object.keys(collection.traits).length} trait categories.`;
  
  socialPost({
    message,
    attachments: [{ type: 'collection', txid }],
    hashtags: ['#NFT', '#BSV', '#Collection']
  });
};

const trackCollectionMetrics = (collection: CollectionData) => {
  analytics.track('Collection Created', {
    name: collection.name,
    quantity: collection.quantity,
    traitCount: Object.keys(collection.traits).length,
    rarityTiers: collection.rarities.length,
    royaltyRecipients: collection.royalties.length
  });
};

// Plan your collection structure
const planCollection = {
  // Clear theme and concept
  name: 'Pixel Warriors',
  description: '8-bit style warrior characters for the metaverse',
  
  // Reasonable quantity
  quantity: 5000, // Not too large for initial launch
  
  // Balanced rarities
  rarities: [
    { label: 'Common', percentage: '0.5000' },     // 50%
    { label: 'Uncommon', percentage: '0.3000' },   // 30%
    { label: 'Rare', percentage: '0.1500' },       // 15%
    { label: 'Epic', percentage: '0.0450' },       // 4.5%
    { label: 'Legendary', percentage: '0.0050' }    // 0.5%
  ]
};

// Sustainable royalty structure
const sustainableRoyalties = [
  {
    type: RoytaltyType.PAYMAIL,
    destination: 'creator@domain.com',
    percentage: '0.0300' // 3% - reasonable for creator
  },
  {
    type: RoytaltyType.ADDRESS,
    destination: 'platform-address',
    percentage: '0.0150' // 1.5% - platform fee
  }
  // Total: 4.5% - leaves room for secondary market growth
];