npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@wonka-labs/wonka-js

v1.0.13

Published

Wonka JS is the easiest way to mint and fetch NFTs through JS APIs.

Downloads

15

Readme

Wonka JS

Wonka JS is the easiest way to mint from Candy Machine and fetch NFTs through JS APIs. You can see an end to end example in Next.js demo project as well as debug using the command line testing tool.

For using Wonka's Solana NFT indexing APIs, checkout Windex Documentation.

FI3xQ2FVcAQO3wK

Once you have followed the instructions to upload your NFTs, you can use functions below to build your mint flow:

  • mintCandyMachineToken(..)
  • getCandyMachineMints(..)
  • getCandyMachineState(...)
  • getMintMetadata(...)
  • updateMintImage(...)

These commands are useful if you need to build a custom facing front end, and don't want to rely on the Candy Machine Minting Site.

Installation

npm install @wonka-labs/wonka-js

Wonka APIs

Getting Machine State

Returns info about currently available mints in Candy Machine, how many were already minted, how long is left for the auction, etc.

const getCandyMachineState = async () => {
  console.log("Getting candy machine state.")
  const provider = ...;
  const candyMachineId = process.env.REACT_APP_CANDY_MACHINE_ID!;
  const wonka = new Wonka(provider, candyMachineId)
  const candyMachineState = await wonka.getCandyMachineState()
  console.log(candyMachineState)
}

Getting Existing Mints

Returns a list of all existing mints on the given candy machine.

const getCandyMachineMints = async() => {
  console.log("Getting candy machine mints...")
  const provider = ...;
  const candyMachineId = process.env.REACT_APP_CANDY_MACHINE_ID!;
  const wonka = new Wonka(provider, candyMachineId)
  const candyMachineMints = await wonka.getCandyMachineMints()
  console.log(candyMachineMints)
}

Minting a new NFT

Mints an NFT; you either get an error with a message or the ID of the mint in return.

const mintCandyMachineToken = async(recipientWallet: PublicKey) => {
  const provider = ...;
  const candyMachineId = process.env.REACT_APP_CANDY_MACHINE_ID!;
  const wonka = new Wonka(provider, candyMachineId)
  const candyMachineMintId = await wonka.mintCandyMachineToken(recipientWallet)
  console.log(candyMachineMintId)
}

Fetching Mint Metadata

Sometimes you need to load one particular NFT's metadata, here is how you can do it:

const getMintMetadata = async(mintAddress: string) => {
  const provider = ...;
  const candyMachineId = process.env.REACT_APP_CANDY_MACHINE_ID!;
  const wonka = new Wonka(provider, candyMachineId)
  const mintMetadata = await wonka.getMintMetadata(mintAddress)
  console.log(`Fetched mint metadata:`);
  console.log(mintMetadata);
  
  // Can also fetch the data stored inside the metadata:
  const metadataDataURIData = await fetch(mintMetadata.uri);
  const metadataDataURIDataJSON = await metadataDataURIData.json();
  console.log(`Fetched mint metadata's URI data:`);
  console.log(metadataDataURIDataJSON);
}

Updating Mint Photo (Advanced)

This is a bit more advanced, but if you have a wallet with the update authority, you can actually update the NFT's png. Since this requires access to arweave's private key, it's probably better to create a backend API that uses these functions. Here is what's happening at a high-level:

  1. You create an ArweaveUploader with a private key that has enough money in it for uploading files.
  2. You create a wonka with a provider that's attached to a wallet that has permission to update the NFT's metadata.
  3. You give Wonka a base64 encoded PNG and a mint address. That's it!
const updateMintImage = async(mintAddress: PublicKey, b64image: string) => {
  console.log("Getting mint metadata...")
  const provider = ...;
  const candyMachineId = process.env.REACT_APP_CANDY_MACHINE_ID!;
  const wonka = new Wonka(provider, candyMachineId)
  const arweaveUploader = new ArweaveUploader(process.env.ARWEAVE_KEY!);
  const txn = await wonka.updateMintImage(
      b64image,
      arweaveUploader,
      provider.wallet,
      mintAddress,
      { image_updated: true }
    );
  }

Storing Ids & Keys

The question is where to store information like candy machine ID, etc. If you're using React or Next.js, you can easily use the .env file so that the code above looks more like:

const candyMachineId = process.env.NEXT_PUBLIC_CANDY_MACHINE_ID!; // For Next.js
const candyMachineId = process.env.REACT_APP_CANDY_MACHINE_ID!; // For React

Read more about these in the docs: React .env and Next.js .env.

Windex APIs

By default, fetching NFTs by Wallet, Collection, or ID requires fetching a series of Solana accounts and external JSON metadata, which can be slow and bandwidth intensive. The Wonka Index (windex) is a backend cache that enables blazing fast metadata fetches. You can use the following queries to easily fetch NFTs. For more details, visit WINDEX.md.

Fetching NFTs by Candy Machine or Collection ID

To display all NFTs in a collection, you can query Windex by Candy Machine ID or Collection ID (the collection id is the first verified creator in the NFT's metadata).

const fetchNFTsByCandyMachine = async(candyMachineId: PublicKey) => {
  const nfts = await Windex.fetchNFTsByCandyMachineID(candyMachineId, 20, Windex.DEVNET_ENDPOINT);
  console.log(`Retrieved ${nfts.length} NFTs!`);
}

const fetchNFTsByCollection = async(collectionId: PublicKey) => {
  const nfts = await Windex.fetchNFTsByCollectionID(collectionId, 20, Windex.DEVNET_ENDPOINT);
  console.log(`Retrieved ${nfts.length} NFTs!`);
}

Fetching NFTs in a Wallet Address

const fetchNFTsByWallet = async(walletAddress: PublicKey) => {
  const nfts = await Windex.fetchNFTsByWallet(walletAddress, 20, Windex.DEVNET_ENDPOINT);
  console.log(`Retrieved ${nfts.length} NFTs in ${walletAddress}'s wallet!`);
}

Fetching an NFT by Mint Address

const fetchNFTsByMintAddress = async(mintAddress: PublicKey) => {
  const nft = await Windex.fetchNFTByMintAddress(mintAddress, Windex.DEVNET_ENDPOINT);
  if (!nft) {
    console.log("nft not found!");
  } else {
    console.log(`Fetched ${nft.address}: ${nft.name}`);
  }
}