use-cmv3

React library enabling you to interact with the Metaplex candy machine

(This library currently only supports the following guards solPayment allowList mintLimit startDate endDate)

Demo: Cmv3 Frontend

Todo:

• Support all guards
• Phase Metadata
• Multi-Mint

Installation

npm install \
  "use-cmv3" \
  "@metaplex-foundation/mpl-candy-machine" \
  "@metaplex-foundation/mpl-token-metadata" \
  "@metaplex-foundation/mpl-toolbox" \
  "@metaplex-foundation/umi" \
  "@metaplex-foundation/umi-bundle-defaults" \
  "@metaplex-foundation/umi-rpc-web3js" \
  "@metaplex-foundation/umi-signer-wallet-adapters" \
  "@metaplex-foundation/umi-uploader-nft-storage" \
  "@solana/wallet-adapter-base" \
  "@solana/wallet-adapter-react" \
  "@solana/wallet-adapter-react-ui" \
  "@solana/wallet-adapter-wallets" \
  "@solana/web3.js"

Using inside your project

Add the following to your .env file

NEXT_PUBLIC_CANDY_MACHINE_ID={your_cm_id}
NEXT_PUBLIC_CANDY_MACHINE_LUT={your_cm_lut}
NEXT_PUBLIC_ENDPOINT={your_endpoint}

Wrap necessary components within Cmv3Provider, ensuring that WalletAdapter is an ancestor.

import { WalletProvider } from  '@solana/wallet-adapter-react'
import { Cmv3Provider } from 'use-cmv3'

export default function App({children}) {
    
    /* wallet adapter stuff */
    
    const  allowLists  =  new  Map<string, Array<string>>([['OGs', ['61DZsc2GKvgygUMgmNcYmT2jVjdJmxWEiPyn3nfJW3Td']]])
    
    return (
        <WalletProvider>
            <Cmv3Provider
                config={{
                    candyMachineId: process.env.NEXT_PUBLIC_CANDY_MACHINE_ID,
                    candyMachineLut: process.env.NEXT_PUBLIC_CANDY_MACHINE_ID
                }}
                metadata={{
                    allowLists: allowLists
                }}
            >
                {children}
            </Cmv3Provider>
         </WalletProvider>
    )
}

You can now call useCmv3() inside wrapped components.

import { useCmv3 } from 'use-cmv3'

export  default  function  Mint() {

    const cmv3 = useCmv3()
    
    return (
        <main>
        
            <h1>Mint Page!</h1>
        
            <Counter
                value={cmv3.mintCounter.sold} 
                maxValue={cmv3.mintCounter.supply}
            />
            
            <Phases>
                {cmv3.phases.map(phase => (
                    <Phases.Phase phase={phase}/>
                ))}
            </Phases
        </main>
    
    )
}

Context Values

Values returned by useCmv3()

Name	Type	Description	Default
loading	{ candyMachine: boolean, phases: boolean}	Loading values for the whole candyMachine or just phases	{ candyMachine: true, phases: true }
candyMachine?	CandyMachine	Returns the initialised candy machine if applicable	undefined
candyGuard?	CandyGuard	Returns the initialised candy machines guard if applicable	undefined
phases	Phase[]	Array of phases relative to the connected wallet	[]
mintCounter	{ supply: number; sold: number; }	Exposes sold/supply statistics of candy machine	{ supply: 0; sold: 0 }
minting	string / false	Label of the phase user is currently minting	false
mint	(label: string) => Promise<void>	Function to mint a phase with label
mints	{ mints: string; metadata: JsonMetadata }[]	Array of NFTs minted by user	[]

Phases:

Phases are an interpolation of candy guard groups.

Name	Type	Description
label	string	Label of the guard candy guard group
errors	string[]	Guards stopping the user from minting
payments	{ basisPoints: number; decimals: number; identifier: string; }	Payment guards formatted into Payment
startsAt?	number	UNIX timestamp of the phases start date
endsAt?	number	UNIX timestamp of the phases end date

Notes

This library is un-audited and not affiliated with Solana or Metaplex.

Big thanks to MarkSackerberg who's work I often referenced while creating this library.