Create Merkle Tree Form

Create Merkle Tree

Create a new Merkle Tree on Solana

Installation

Install dependencies

Start by installing required Solana and Metaplex dependencies

pnpm add @solana/web3.js @solana/wallet-adapter-react @metaplex-foundation/umi-bundle-defaults @metaplex-foundation/umi-signer-wallet-adapters @metaplex-foundation/mpl-token-metadata @metaplex-foundation/mpl-bubblegum

Add Wallet Provider

Make sure you have added the Wallet Provider to your application. If not, follow the steps in the Connect Wallet Button guide first.

Add Create Merkle Tree Form

pnpm dlx shadcn@canary add https://www.murphyai.dev/r/create-merkleTree-form.json

Basic Usage

import { CreateMerkleTree } from "@/components/ui/murphy/create-merkleTree-form";

export default function MyPage() {
  return (
    <div>
      <h1 className="text-xl font-bold mb-2">Create Merkle Tree on Solana</h1>
      <CreateMerkleTree className="max-w-md" />
    </div>
  );
}

Features

Connect with Solana wallet
Configurable Merkle Tree depth (1-30, recommended 14-20)
Configurable Merkle Tree buffer size (recommended 64-256)
Real-time network display (devnet/mainnet)
Multi-stage form with different views for creation process, success, and error states
Transaction signature display with explorer links
Error handling with retry capability

Advanced Usage

You can pass a callback function to be called when a Merkle Tree is successfully created:

export default function MyPage() {
  const handleMerkleTreeCreated = (merkleTreeAddress: string) => {
    console.log(`New Merkle Tree created: ${merkleTreeAddress}`);
    // Do something with the new Merkle Tree address
  };
 
  return (
    <div>
      <h1 className="text-xl font-bold mb-2">Create Merkle Tree on Solana</h1>
      <CreateMerkleTree
        className="max-w-md"
        onMerkleTreeCreated={handleMerkleTreeCreated}
      />
    </div>
  );
}

Create Merkle Tree Form