Wonka: a JS library meant that simplifies the minting process on Metaplex's CandyMachine

Related tags

React Apps wonka
Overview

Wonka JS

Wonka is a JS/TS layer that simplifies the minting process on top of MetaPlex's Candy Machine. Once you have followed the instructions to upload your NFTs, you can easily use the following three commands to build your mint flow:

  • mintCandyMachineToken(..)
  • getCandyMachineMints(..)
  • getCandyMachineState(...)

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 @triton-labs/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 = ...;
  const candyMachineConfigId = ...;
  const wonka = new Wonka(provider, candyMachineId, candyMachineConfigId)
  const candyMachineState = await wonka.getCandyMachineState()
  console.log(candyMachineState.itemsAvailable)
}

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 = ...;
  const wonka = new Wonka(provider, candyMachineId)
  const candyMachineMints = await wonka.getCandyMachineMints()
  console.log(candyMachineMints)
}

Minting!

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

const mintCandyMachineToken = async(recipientWallet: Keypair) => {
  console.log("Minting a new candy machine token...")
  const provider = ...;
  const candyMachineId = ...;
  const wonka = new Wonka(provider, candyMachineId)
  // For now, pass in window.solana as recipientWallet once connected; will decouple soon.
  const candyMachineMintId = await wonka.mintCandyMachineToken(recipientWallet)
  console.log(candyMachineMintId)
}

Storing Ids

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.

Issues
  • Not sure what

    Not sure what "provider" parameter is supposed to be. Getting error.

    I'm not quiet sure of what the provider parameter is expecting. Can someone please help? I've tried putting in devnet but getting below.

    TypeError: Cannot read properties of undefined (reading '_buildArgs') at Function.<anonymous> (C:\Users\Marii\devprivate\solana\DiscordBotSimple\node_modules\@metaplex-foundation\mpl-core\dist\src\Program.js:40:37) at Generator.next (<anonymous>) at C:\Users\Marii\devprivate\solana\DiscordBotSimple\node_modules\@metaplex-foundation\mpl-core\dist\src\Program.js:8:71 at new Promise (<anonymous>) at __awaiter (C:\Users\Marii\devprivate\solana\DiscordBotSimple\node_modules\@metaplex-foundation\mpl-core\dist\src\Program.js:4:12) at Function.getProgramAccounts (C:\Users\Marii\devprivate\solana\DiscordBotSimple\node_modules\@metaplex-foundation\mpl-core\dist\src\Program.js:23:16) at C:\Users\Marii\devprivate\solana\DiscordBotSimple\node_modules\@triton-labs\wonka\lib\utils\metadata-utils.js:19:73 at Generator.next (<anonymous>) at C:\Users\Marii\devprivate\solana\DiscordBotSimple\node_modules\@triton-labs\wonka\lib\utils\metadata-utils.js:8:71 at new Promise (<anonymous>)

    opened by alienfrenZyNo1 2
Owner
Triton Labs
Triton Labs
This is a NFT minting front-end with React.js

Getting Started with Create React App This project was bootstrapped with Create React App. Available Scripts In the project directory, you can run: ya

Judy Hoops 2 Dec 30, 2021
Weather APP built with React JS as requirement for the WIT selective process

React JS Weather APP This project was built with React JS as requirement for the WIT selective process. The app is avaliabe at https://weather-app-wit

RafaelM 1 Nov 1, 2021
A simple React Application, for demonstrating the CI/CD process

React Activities React Activities is a simple React Application running a simple Release Process. TL;DR docker pull ghcr.io/pop-cloud/react-activities

Haitao Nie 1 Jan 10, 2022
A simple React Application, for demonstrating the CI/CD process

Activities Web Activities Web is a simple React Application running a simple Release Process. TL;DR docker pull ghcr.io/pop-cloud/activities-web:lates

Haitao Nie 1 Jan 10, 2022
A calculator app to be built using the React Library for JavaScript

React Calculator A calculator app to be built using the React Library for JavaScript Built With React JS Library HTML CSS Getting Started To set up a

Akshay 4 Jul 22, 2021
A calculator app built with React.js using React Hooks and Routers. The app contains 3 pages with basic styling. Calculator operations, as well as React components, were tested with Jest and React Testing Library.

Raect Calculator A calculator app built with React.js using React Hooks and Routers. App contains 3 pages with basic styling. Calculator operations, a

SarvarKhalimov 7 Sep 19, 2021
⛵️ A React library for Solana account management and transaction processing.

⛵️ A React library for Solana account management and transaction processing.

Saber 56 Jan 10, 2022
State managment library for React and React Native apps

State managment library for React and React Native apps

Dany Beltran 13 Dec 24, 2021
Recoil is an experimental state management library for React apps.

Recoil is an experimental state management library for React apps. It provides several capabilities that are difficult to achieve with React alone, while being compatible with the newest features of React.

Facebook Experimental 15.4k Jan 16, 2022
A Kanban board app coded in React and with Beautiful D'n'D library.

A Kanban board app coded in React and with Beautiful D'n'D library. The board allows users to create, edit or cancel tasks and to organize them between columns.

Agnieszka Urbanowicz 8 Jan 4, 2022
A JavaScript library for internationalization and localization that leverage the official Unicode CLDR JSON data

Globalize A JavaScript library for internationalization and localization that leverage the official Unicode CLDR JSON data.

Globalize.js 4.6k Jan 15, 2022
Partytown is a lazy-loaded 6kb library to help relocate resource intensive scripts into a web worker🎉

Partytown ?? Introducing Partytown: Run Third-Party Scripts From a Web Worker How Partytown's Sync Communication Works A fun location for your third-p

Builder.io 3k Jan 13, 2022
An extremely lightweight, 0.5kb experimental, React-like front-end library

What is Reval.js? Reval.js is an experimental, React-like front-end library used to create small-scale web apps faster and better-structured. It is li

Phu Minh 17 Dec 24, 2021
React Typescript project with react-testing-library, own training, inspired and designed by ArchakovBlog

React Typescript project with react-testing-library, own training, inspired and designed by ArchakovBlog

tyroslavMoloshnyi 1 Jan 8, 2022
The UI design language and React library for Conversational UI

css-vars-ponyfill A ponyfill that provides client-side support for CSS custom pr

John Hildenbiddle 1.3k Jan 12, 2022
Front-end of a web application, developed by using ReactJS library.

☕️ Starducks Client ?? Client ?? Server Description This repository is created with React JS library to list, filter and search coffee data consumed f

Damla Köksal 3 Dec 20, 2021
Pranav Teegavarapu 8 Jan 3, 2022
Artemis UI is a react components library build with StoryBook, Typescript and SASS primarily for e-commerce applications

Artemis UI About Artemis UI is a react components library build with StoryBook, Typescript and SASS primarily for e-commerce applications. Docs and De

Rishu Patel 2 Jan 16, 2022
React todo list app using Elf library

React todo list app using Elf library Create todo list using Elf state management library. (https://ngneat.github.io/elf/) Elf is Built on top of Rxjs

Johan pujol 1 Jan 15, 2022