Fork, customize and deploy your Candy Machine v2 super quickly

Overview

Candy Machine V2 Frontend

This is a barebones implementation of Candy Machine V2 frontend, intended for users who want to quickly get started selling Solana NFT's. It DOES NOT include captcha yet - we plan to make this feature available in a future release. Some code has been ported from the Fair Launch Protocol frontend in the Metaplex repo. This has been tested with candy machine programs on both devnet and mainnet-beta.

The app was built using Svelte + Vite and uses TailwindCSS for styles.

An example site built using this frontend: https://lanablocks.xyz

demo gif

One-click deploy with Vercel

Deploy with Vercel

Getting started

Rename the .env.example file to .env and populate the following environment variables:

Required:

- VITE_APP_CANDY_MACHINE_ID=
- VITE_APP_SOLANA_NETWORK=
- VITE_APP_SOLANA_RPC_HOST=

Optional: Populate with your Google Analytics Measurement ID (in the format G-XXXXXXXXXX)

- VITE_APP_GOOGLE_ANALYTICS=

Example configuration

Devnet:

- VITE_APP_SOLANA_NETWORK=devnet
- VITE_APP_SOLANA_RPC_HOST=https://explorer-api.devnet.solana.com

Mainnet-beta:

- VITE_APP_SOLANA_NETWORK=mainnet-beta
- VITE_APP_SOLANA_RPC_HOST=https://api.mainnet-beta.solana.com

Edit the following variables in App.svelte to match your project:

- TITLE
- DESCRIPTION
- IMAGE_LINK
- HEADER_TITLE
- HEADER_LINK

Then run:

- yarn install
- yarn dev

Features

  • Automatically fetches items minted, total quantity and price from the candy machine state
  • Whitelist token detection and whitelist price updates
  • 'View on Solana Explorer' after transaction has been broadcasted
  • Confetti after a successful mint
  • Google Analytics tracking

Support

Buy Me A Coffee

Comments
  • Mint doesn't work

    Mint doesn't work

    Tried with devnet and mainnet I have checked many times and I put everything in the env file correct and it says "transaction may fail" and then just doesn't mint It shows the price and how many are left correctly just mint is broken, I have whitelist disabled in config and time is correct

    opened by ManFromNowhere1 5
  • multiple pages?

    multiple pages?

    love this repo.. trying to make it work for myself but newer to dev work so bear with me if this is a dumb question.. not so much an issue.

    how do I go about creating tabs like pictured here? I'd like to be able to add a few myself but am not quite sure how to do so. Are they separate components that render?

    image

    opened by reedislost 5
  • "blinking/flickering" page

    Hy, I edited your index.html and created my site using uikit. I wrote my code around your minting button component<div id="app"></div> <script type="module" src="/src/main.ts"></script> <script> var global = global || window; </script>

    when I test my application the page is blinking, as if it were loading several times, what is the cause of this behavior? It is like a "Flickering"

    opened by lucastoian 4
  • Minting sometime doesn't recognise Phantom is installed

    Minting sometime doesn't recognise Phantom is installed

    We currently have our mint Live. https://oikattoi-art.web.app/

    You will notice that sometimes, the page will not load correctly. It basically doesn't recognize that Phantom is installed, and says to "Get Phantom Wallet".

    If you do a CTRL F5, it works!
    Please check this, and help us fix it.
    It's causing minting problems for many.

    image

    opened by psavva 4
  • When i Mint i get errors and does not work

    When i Mint i get errors and does not work

    Hi thank your for the repo,

    I was able to successfully deploy to vercel but when i Mint the transaction keeps failing,

    do you have any recommendations to fix this issue?

    opened by moonvision2020 2
  • stuck spinning after running yarn dev

    stuck spinning after running yarn dev

    love the project and succesfully launched it one time, decided i want to try adding my own gif file to the /public folder.. shut down yarn dev server, added new gif, changed code in app.svelte to reflect path and file name to new gif, saved, ran yarn dev and now the app won't load and its stuck spinning. let me know if theres any ideas to fix. interested in using in my front end project image

    opened by reedislost 2
  • getMetadata error

    getMetadata error

    this block throws errors if "goLiveDate" is null

            state.data.goLiveDate.toNumber() < new Date().getTime() / 1000 &&
            (state.endSettings
              ? state.endSettings.endSettingType.date
                ? state.endSettings.number.toNumber() > new Date().getTime() / 1000
                : itemsRedeemed < state.endSettings.number.toNumber()
              : true),```
    opened by gotys 1
  • Node.js to v17.0.1 and issues with yarn start/ build candy-machine-ui/packages.json

    Node.js to v17.0.1 and issues with yarn start/ build candy-machine-ui/packages.json

    I updated the script due to problems with the node.js. I found in the internet the following sollution given: "scripts": { "start": "react-scripts --openssl-legacy-provider start", "build": "react-scripts --openssl-legacy-provider build", "test": "react-scripts test", "eject": "react-scripts eject", "deploy:gh": "gh-pages -d ./build/ --repo https://github.com/pit-v/metaplex -t true --branch gh-pages-3", "deploy": "cross-env ASSET_PREFIX=/metaplex/ yarn build && yarn deploy:gh" },

    Is that a good sollution? I have personally no idea. I am no developer... Greetings.

    opened by FlorianWeise 1
  • Candy machine upload from images with Datahub an RPC Service

    Candy machine upload from images with Datahub an RPC Service

    Hi everbody, I am trying to upload my images and metadata with an apikey form Datahub, command: npx ts-node js/packages/cli/src/candy-machine-v2-cli.ts upload -curl https://solana--devnet--rpc.datahub.figment.io/apikey/ MY APIKEY /health -e devnet -k ~/.config/solana/devnet.json -cp config.json -c boom ./assets

    something is wrong with this command, output is : errno: -4058, syscall: 'scandir', code: 'ENOENT', path: 'https://solana--devnet--rpc.datahub.figment.io/apikey/ MY APIKEY /health'

    can somebody please help out, its all for devnet, I d like to understand the mechanics before deploying on mainnet. Thanks in advance.

    opened by FlorianWeise 1
  • Issue with envinronment variables.

    Issue with envinronment variables.

    Hey there. First of all thanks for making this super cool repo!

    When running "yarn dev", the site works perfect, everything works fine (minting, etc)

    However, I tried to deploy the app after pushing it to my git repo. The deployment goes fine, however when I open the site it says: "An error occurred. Please check if your environment variables have been populated correctly and redeploy the application."

    Any ideas of what it could be? I tried the candy-machine ID with the original candy-machine-v2 and the deploy went fine in that case.

    Any help is appreciated!

    opened by Dmytrocode 1
  • Serving over HTTPS

    Serving over HTTPS

    How are you serving this over HTTPS?

    When doing so with nginx as a reverse proxy, app is crashing with following error:

    client.ts:28 WebSocket connection to 'wss://siteurl:3000/' failed: (anonymous) @ client:188 client.ts:222 [vite] server connection lost. polling for restart...

    opened by akeslo 1
  • "An error occurred. Please check if your environment variables have been populated correctly and redeploy the application."

    If you get this error even if your code is working fine locally, the answer could be that when you push to GitHub, for whatever Godforsaken reason, the .env file (that you changed from .env.example earlier) was pushed to the .gitignore file as text. DELETE THAT TEXT AND DO A NEW PUSH TO GITHUB AND VOILA.

    Hope this helps at least a few, lol. Mad luv to the community builders! Thanks Alvinsga!! :)

    opened by xBuddhaSupreme 0
  • Errors while running the candy machine creation command

    Errors while running the candy machine creation command

    Hi Team, I have been following the below article for setting up the minting website. https://docs.metaplex.com/candy-machine-v2/creating-candy-machine

    Currently, I am at the candy machine creation step but have been getting the below errors.

    poorva@DESKTOP-9G4452V:/mnt/c/Users/Virtuos/Downloads/nft/metaplex$ ts-node /mnt/c/Users/Virtuos/Downloads/nft/metaplex/js/packages/cli/src/candy-machine-v2-cli.ts upload -e devnet -k ~/.config/solana/pokemon-key.json -cp config.json -c example ./assets-pictures /usr/lib/node_modules/ts-node/src/index.ts:820 return new TSError(diagnosticText, diagnosticCodes); ^ TSError: ⨯ Unable to compile TypeScript: js/packages/cli/src/candy-machine-v2-cli.ts:4:10 - error TS2305: Module '"commander"' has no exported member 'InvalidArgumentError'.

    4 import { InvalidArgumentError, program } from 'commander'; ~~~~~~~~~~~~~~~~~~~~ js/packages/cli/src/candy-machine-v2-cli.ts:4:32 - error TS2305: Module '"commander"' has no exported member 'program'.

    4 import { InvalidArgumentError, program } from 'commander'; ~~~~~~~ js/packages/cli/src/candy-machine-v2-cli.ts:5:25 - error TS2307: Cannot find module '@project-serum/anchor' or its corresponding type declarations.

    5 import * as anchor from '@project-serum/anchor'; ~~~~~~~~~~~~~~~~~~~~~~~ js/packages/cli/src/candy-machine-v2-cli.ts:41:17 - error TS2307: Cannot find module 'loglevel' or its corresponding type declarations.

    41 import log from 'loglevel'; ~~~~~~~~~~

    at createTSError (/usr/lib/node_modules/ts-node/src/index.ts:820:12)
    at reportTSError (/usr/lib/node_modules/ts-node/src/index.ts:824:19)
    at getOutput (/usr/lib/node_modules/ts-node/src/index.ts:1014:36)
    at Object.compile (/usr/lib/node_modules/ts-node/src/index.ts:1322:43)
    at Module.m._compile (/usr/lib/node_modules/ts-node/src/index.ts:1454:30)
    at Module._extensions..js (internal/modules/cjs/loader.js:1101:10)
    at Object.require.extensions.<computed> [as .ts] (/usr/lib/node_modules/ts-node/src/index.ts:1458:12)
    at Module.load (internal/modules/cjs/loader.js:937:32)
    at Function.Module._load (internal/modules/cjs/loader.js:778:12)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:76:12) {
    

    diagnosticCodes: [ 2305, 2305, 2307, 2307 ] }

    I tried downgrading the node versions as a part of the resolution for the above errors, but that too didn't work.

    Kindly help!

    opened by poorva121999 0
  • Need to refresh

    Need to refresh

    I need to press several times ctrl + f5 to be able to mint

    Everything worked fine as long as I was using the free rpc : https://api.mainnet-beta.solana.com I decided to upgrade it to a quicknode solana rpc, the minting button still works but I need to refresh the page many time before make it working

    I don't have this issue in localhost https://user-images.githubusercontent.com/72082971/150749847-6ead9848-f12c-4740-858c-53b3c666fc17.mp4

    opened by lucastoian 3
Visualizer for neural network, deep learning, and machine learning models

Netron is a viewer for neural network, deep learning and machine learning models. Netron supports ONNX, TensorFlow Lite, Caffe, Keras, Darknet, Paddle

Lutz Roeder 21k Jan 5, 2023
Unsupervised machine learning with multivariate Gaussian mixture model which supports both offline data and real-time data stream.

Gaussian Mixture Model Unsupervised machine learning with multivariate Gaussian mixture model which supports both offline data and real-time data stre

Luka 26 Oct 7, 2022
Machine learning tools in JavaScript

ml.js - Machine learning tools in JavaScript Introduction This library is a compilation of the tools developed in the mljs organization. It is mainly

ml.js 2.3k Jan 1, 2023
Machine-learning for Node.js

Limdu.js Limdu is a machine-learning framework for Node.js. It supports multi-label classification, online learning, and real-time classification. The

Erel Segal-Halevi 1k Dec 16, 2022
JavaScript Machine Learning Toolkit

The JavaScript Machine Learning Toolkit, or JSMLT, is an open source JavaScript library for education in machine learning.

JSMLT 25 Nov 23, 2022
Friendly machine learning for the web! 🤖

Read our ml5.js Code of Conduct and software licence here! This project is currently in development. Friendly machine learning for the web! ml5.js aim

ml5 5.9k Jan 2, 2023
Machine Learning library for node.js

shaman Machine Learning library for node.js Linear Regression shaman supports both simple linear regression and multiple linear regression. It support

Luc Castera 108 Feb 26, 2021
Support Vector Machine (SVM) library for nodejs

node-svm Support Vector Machine (SVM) library for nodejs. Support Vector Machines Wikipedia : Support vector machines are supervised learning models t

Nicolas Panel 296 Nov 6, 2022
machinelearn.js is a Machine Learning library written in Typescript

machinelearn.js is a Machine Learning library written in Typescript. It solves Machine Learning problems and teaches users how Machine Learning algorithms work.

machinelearn.js 522 Jan 2, 2023
Automated machine learning for analytics & production

auto_ml Automated machine learning for production and analytics Installation pip install auto_ml Getting started from auto_ml import Predictor from au

Preston Parry 1.6k Dec 26, 2022
Deep Learning in Javascript. Train Convolutional Neural Networks (or ordinary ones) in your browser.

ConvNetJS ConvNetJS is a Javascript implementation of Neural networks, together with nice browser-based demos. It currently supports: Common Neural Ne

Andrej 10.4k Dec 31, 2022
This Smart Brain will detect face in your Images, Give it a try ;-)

Smart-Brain ?? Click here to view this site in your browser. ?? Things you can do in this site are - 1. Create an account ?? 2. Signin using your exis

Archit Tripathi 4 Apr 14, 2022
JavaScript API for face detection and face recognition in the browser and nodejs with tensorflow.js

face-api.js JavaScript face recognition API for the browser and nodejs implemented on top of tensorflow.js core (tensorflow/tfjs-core) Click me for Li

Vincent Mühler 14.6k Jan 2, 2023
architecture-free neural network library for node.js and the browser

Synaptic Important: Synaptic 2.x is in stage of discussion now! Feel free to participate Synaptic is a javascript neural network library for node.js a

Juan Cazala 6.9k Dec 27, 2022
A JavaScript deep learning and reinforcement learning library.

neurojs is a JavaScript framework for deep learning in the browser. It mainly focuses on reinforcement learning, but can be used for any neural networ

Jan 4.4k Jan 4, 2023
A WebGL accelerated JavaScript library for training and deploying ML models.

TensorFlow.js TensorFlow.js is an open-source hardware-accelerated JavaScript library for training and deploying machine learning models. ⚠️ We recent

null 16.9k Jan 4, 2023
Interactive digital art with head-coupled perspective effect using Three.js and TensorFlow.js

Interactive digital frame with head-tracking using Three.js & TensorFlow.js Using TensorFlow.js and Three.js, this project is a prototype of an intera

Charlie 61 Dec 12, 2022
A react native cached, animated, and auto chooses the best-resolution image for the current screen.

A react native cached, animated and auto chooses the best-resolution image for the current screen. This is a simple react native image component that

Nam Nguyen 29 Mar 30, 2022