Create your own Solana NFT marketplace on auction house

5 min readApr 10, 2022

Candy Shop is an open source Javascript library that allows DAOs and NFT projects to create their own NFT marketplace on Solana in minutes (like the one below).

This tutorial assumes you have an existing website that you want to enable NFT trading on.

If you are building an NFT website from scratch, we recommend starter repo.

Before Diving In, Why Candy Shop?

Candy Shop provides a way for NFT projects to grow their communities and treasury, starting with their own marketplace.

It is built on Metaplex auction house, which enables an on-chain and escrowless marketplace. Benefits are:

Transparent transactions
Trustless & decentralized
NFTs do not leave your wallet when you list them for sale

Why should you consider using Candy Shop?

Simple to integrate
Grow & solidify your community
Lower NFT trading fees for users
Get a share of NFT trading fees
Get access to more features and benefits as they are rolled out

Let’s Get Started

Step 1: Install the Candy Shop npm module

Install the Candy Shop npm module in your project repository via npm or yarn.

Using npm:

npm install @liqnft/candy-shop

Using yarn:

yarn add @liqnft/candy-shop

Step 2: Create Your Shop

Create your Candy Shop by connecting your wallet, selecting your network (i.e. devnet, mainnet) and your shop name with the interface here. If you’re just testing things out, choose devnet of course :)

You will receive a code snippet for instantiating your Candy Shop (see below). Make a copy of it.

Step 3: Top-up Syrup

Top-up syrup into your Candy Shop. A small gas fee is used to process transactions made through your shop. This is required as they take place on-chain. 0.1 SOL should be enough for starters.

Step 4: Integrate Candy Shop into Your Website

Now we’re ready to write some code.

Note: Your website needs a way for users to connect their wallet, so we assume that you have Solana wallet adapter set up. This is likely to be the case if you have already done primary sales of your NFTs with Candy Machine v2 or Candy Machine v1.

Create Your Candy Shop Instance

Create an instance of Candy Shop in the React component where you would like to display your marketplace. Use the code snippet that you obtained from Step 2 when you created your Candy Shop.

import { CandyShop } from '@liqnft/candy-shop';const candyShop = new CandyShop(
  new PublicKey("Fo2cXie4UwreZi7LHMpnsyVPvzuo4FMwAVbSUYQsmbsh"), // creator address (i.e. your wallet address)
  new PublicKey("So11111111111111111111111111111111111111112"), // treasury mint (i.e. currency to buy and sell with)
  new PublicKey("csa8JpYfKSZajP7JzxnJipUL3qagub1z29hLvp578iN"), // Candy Shop program id
  "devnet", // mainnet, devnet
  wallet! // user wallet address
);

Display Orders

Use the Orders component to display orders and allow users to buy NFTs.

You have to pass the users’ wallet public key (can be undefined), your Candy Shop instance, and a button component for users to connect their wallet. This component can be imported from ‘@solana/wallet-adapter’ as shown below.

import { Orders } from '@liqnft/candy-shop';
import { WalletMultiButton } from '@solana/wallet-adapter-react-ui';// Default styles that can be overridden by your app
require('@solana/wallet-adapter-react-ui/styles.css');<Orders
  walletPublicKey={publicKey}
  candyShop={candyShop}
  walletConnectComponent={<WalletMultiButton />}
/>

It should look like this:

Display Stats

You may also want to display stats about your Candy Shop (e.g. floor price, total listed, volume etc.). You can do so with the snippet below and give your collection a title and description.

import { Stats } from '@liqnft/candy-shop';

<Stat
  candyShop={candyShop}
  title={'Marketplace'}
  description={'Candy Shop is an open source on-chain protocol that empowers DAOs, NFT projects and anyone interested in creating an NFT marketplace to do so within minutes!'}
/>

It should look like this:

Sell NFTs

Next, create a Sell page where users can connect their wallet and sell their NFTs.

You have to provide a connection, user public key, Candy Shop instance, and a button for user to connect his/her wallet as arguments.

import { Sell } from '@liqnft/candy-shop';

<Sell
  connection={connection}
  walletPublicKey={publicKey}
  candyShop={candyShop}
  walletConnectComponent={<WalletMultiButton />}
/>

It should look like this (P.S. just showing an example from a third-party website so you can see how you can customize styling according to your needs):

More Complex Builds?

You can build a completely customized NFT marketplace with the CandyShop class, but that is beyond the scope of this tutorial.

Step 5: Admire Your NFT Marketplace

Congratulations! Your NFT marketplace is now ready to be launched. Take a moment to smell the roses :)

Step 6: Claim Transaction Fees

When transactions take place through your website, Candy Shop collects a 1% transaction fee. As the NFT project, you receive 20% of that transaction fee, which can go to growing your treasury and community. You can claim your transaction fees here.

That’s a Wrap!

Hope you had a blast blazing through this tutorial with us!

Candy Shop is built by the Serum #1 prize team in the 2022 Serum Convergence hackathon. Our mission is to provide DAOs and NFT projects with infrastructure and tools to grow and delight their users.

We look forward to growing your communities together with you. If you need support or would like to give us feedback, please reach out on Discord.

WAGMI.