tumi-labs/candy-machine-v3-ui

Candy Machine V3 UI

Candy Machine v3 UI

Reference UI to implement Metaplex Candy Machine V3 on frontend.

Features/Todo

• Responsive UI
• Single Mint UI
• Multi Mint UI
• Start Time Countdown
• Preview Minted NFTs
• Guards Supported
  • Start Date
  • End Date
  • Sol Payment
  • Token Payment
  • Mint Limit
  • Bot Tax
  • Token Burn
  • Token Gate
  • NFT Payment
  • NFT Burn
  • NFT Gate
  • Redeemed Amount
  • Third Party Signer
  • Address Gate
  • Allow List
  • Gatekeeper

Multi Group

For Multi-group functionality use restructure/multi-group branch

Env Variables

All of them are optional at this moment as we're using default if they are not exists in config.ts

• NEXT_PUBLIC_SOLANA_NETWORK=WalletAdapterNetwork
• NEXT_PUBLIC_RPC_HOST=url
• NEXT_PUBLIC_CANDY_MACHINE_ID=publickKey

Candy machine v3 Config & Initialization

For configuaration and initialization please refer to official Metaplex docs. You can also use SugerCLI alpha for it.

candy-machine-v3-ui's Issues

Signature verification failed - for phantom

Not sure what I am doing wrong here but for some reason minting doesn't work with Phantom wallet. I tried other wallets and they seem to work. When the sendAndComfirmTransaction function runs I get an error "Signature verification failed". Not really sure why it's only an issue with phantom. Any help would be greatly appreciated.

Here is my sample code.

 const mint = React.useCallback(
    async ({ quantityString, label }: MintType) => {
      const found = guardsAndEligibility?.find((g) => g.label === label);
      console.log({ found });
      if (!found) throw new Error('Unknown guard group label');
      let nfts: (Sft | SftWithToken | Nft | NftWithToken)[] = [];
      try {
        if (!candyMachine) throw new Error('Candy Machine not loaded yet!');
        const transactionBuilders: TransactionBuilder[] = [];

        for (let index = 0; index < quantityString; index++) {
          transactionBuilders.push(
            await mintFromCandyMachineBuilder(mx, {
              candyMachine,
              collectionUpdateAuthority: candyMachine.authorityAddress, // mx.candyMachines().pdas().authority({candyMachine: candyMachine.address})
              group: label,
            })
          );
        }
        const blockhash = await mx.rpc().getLatestBlockhash();

        const transactions = transactionBuilders.map((t) =>
          t.toTransaction(blockhash)
        );
        const signers: { [k: string]: IdentitySigner } = {};

        transactions.forEach((tx, i) => {
          tx.feePayer = wallet.publicKey as PublicKey;
          tx.recentBlockhash = blockhash.blockhash;
          transactionBuilders[i]?.getSigners().forEach((s) => {
            if ('signAllTransactions' in s)
              signers[s.publicKey?.toString()] = s;
            else if ('secretKey' in s) tx.partialSign(s);
            // @ts-ignore
            else if ('_signer' in s) tx.partialSign(s._signer);
          });
        });
        let signedTransactions = transactions;

        for (let signer in signers) {
          await signers[signer]?.signAllTransactions(transactions);
        }

        const output = await Promise.all(
          signedTransactions.map((tx, i) => {
            console.log({ tx });
            return mx
              .rpc()
              .sendAndConfirmTransaction(tx, { commitment: 'finalized' })
              .then((tx) => {
                console.log({ txthen: tx });
                return {
                  ...tx,
                  context: transactionBuilders[i]?.getContext() as any,
                };
              })
              .catch((e) => {
                console.log({ e });
                throw new Error(e as any);
              });
          })
        );


        console.log({ output });

        const nfts = await Promise.all(
          output.map(({ context }) =>
            mx
              .nfts()
              .findByMint({
                mintAddress: context.mintSigner.publicKey,
                tokenAddress: context.tokenAddress,
              })
              .catch((e) => null)
          )
        );

        await fetchCandyMachine();
        const data = nfts.map((n) => ({
          address: n?.address.toBase58(),
          name: n?.name,
        }));
        return data;
      } catch (error: any) {
        console.log({ error });
        let message = error.msg || 'Minting failed! Please try again!';
        if (!error.msg) {
          if (!error.message) {
            message = 'Transaction Timeout! Please try again.';
          } else if (error.message.indexOf('0x138')) {
          } else if (error.message.indexOf('0x137')) {
            message = `SOLD OUT!`;
          } else if (error.message.indexOf('0x135')) {
            message = `Insufficient funds to mint. Please fund your wallet.`;
          }
        } else {
          if (error.code === 311) {
            message = `SOLD OUT!`;
          } else if (error.code === 312) {
            message = `Minting period hasn't started yet.`;
          }
        }
        console.error(error);
        console.log('THROWING ERROR ', error);
        // setStatus((x) => ({ ...x, minting: false }));
        throw new Error(message);
      }
    [candyMachine, guardsAndEligibility, mx, wallet?.publicKey]
  );