Marketplace

(In Beta)

Check out the example in the Github repo and its deployed version here.

Creating an NFT marketplace with Candy Shop as easy as rendering a few React components that take some common parameters:

• candyShop: Candy Shop instance, which can be instantiated after you create a shop on the Admin Panel. See Creating Your Shop for details.

• wallet: Connected user wallet, which is an object that contains the wallet address (i.e. publicKey) and a web3Modal instance. Refer to the example in the Github repo for a sample implementation.

{
  publicKey: '0x36326211D644a78b74B92d69eebB475545Ef4537', // address of user wallet
  web3Modal: web3Modal // web3 modal instance
}

• walletConnectComponent: React component that functions as a button for user to connect and disconnect Metamask and other EVM wallets. Refer to EthConnectButton in the example in the Github repo for sample implementation.

Orders and Buy

Show the NFTs that are for sale and allow users to connect their wallet and buy them.

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

<Orders 
  wallet={wallet}
  candyShop={candyShop} 
  walletConnectComponent={<EthConnectButton />} 
/>

Additional params:

• filters: Array<{ name: string, identifier: number, attribute?: { key: value }}>

  • You can let users filter by NFT collection by specifying the filters parameter. Name is the label shown in the filter box. Identifier is the unique NFT collection identifier, which you can get by whitelisting an NFT collection in My Shop or by using the getIdentifier helper method in the Candy Shop library. You can also specify an optional attribute parameter to filter orders for NFTs with that attribute.

• identifiers: Array<number>

  • By default, only show orders from certain NFT collections. Takes an array of identifiers.

• url: string

  • When user clicks on an NFT order, direct user to a new route instead of opening a buy NFT modal. Route should be in form of /my-route/:tokenMint where :tokenMint will be replaced by the NFT token mint

Sell

Show sell interface that allows users to connect their wallet and list their NFTs for sale.

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

<Sell 
  wallet={wallet} 
  candyShop={candyShop} 
  walletConnectComponent={<EthConnectButton />} 
  enableCacheNFT={true}
/>

Enable Cache NFT

We also provide the optional prop for Sell component to enable cache NFT that will store connected wallet's NFT in IndexedDB. The CandyShop IDB will auto be deleted once remove the enableCacheNFT prop or set it as false.

Stats

Show key stats about your collection

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!'
  }
/>

Activity

Show activity in your shop. By default, activity is sorted by descending transaction time. You can also sort activity by price or name by specifying the optional `orderBy` argument as shown below.

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

<Activity 
  candyShop={candyShop}
  orderBy={[
    { column: 'price', order: 'desc'},
    { column: 'nftName', order: 'asc'}
  ]}
/>

Single NFT View

Show buy interface for a single NFT order. This component can be used by specifying the url param to the Orders component. Token mint can be parsed from the URL and inserted into the OrderDetail component.

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

<OrderDetail
  tokenMint={'WfL9fAggBMHmjvBEu1v53fQkRmB3Cn4giJSSQxVSC5W'} // token mint of the NFT
  backUrl={'/'} // will redirect to this route after sale is completed
  candyShop={candyShop}
  walletConnectComponent={<EthConnectButton />}
  wallet={wallet}
/>

Live Reload

CandyShopDataValidator is a React context provider that enables real-time updates to orders and transactions that take place in your shop. It does so by listening to the socket session of the Candy Shop backend at regular intervals and applying any updates to child Candy Shop UI components.

You can use it by wrapping Candy Shop UI components with CandyShopDataValidator:

import { CandyShopDataValidator, Orders } from '@liqnft/candy-shop';

<CandyShopDataValidator>
  <Orders ... />
</CandyShopDataValidator>

Custom Marketplace

You can create a completely custom marketplace by working directly with @liqnft/candy-shop-sdk. You can install Candy Shop SDK directly like so:

npm install @liqnft/candy-shop

or

yarn add @liqnft/candy-shop

This will also install the up to date @liqnft/candy-shop-sdk as dependencies. Then you can use the import statement below to use SDK.

import {...} from @liqnft/candy-shop-sdk

Please refer to the components in /core/ui/src to see how various methods are called. For more detailed usage guide, please reference the sdk source code at https://github.com/LIQNFT/candy-shop/tree/master/core/sdk