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={mintCounter.sold} 
                maxValue={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.