Marketplace

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={<WalletMultiButton />} 
/>

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={<WalletMultiButton />} 
  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={<WalletMultiButton />}
  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>

⚠️ Solana Transaction Size Limit ⚠️

For SPL token denominated Candy Shops, users will not be able to buy NFTs that have 4 or more creators. This is because these transactions exceed the Solana transaction size limit. Workarounds for this issue are actively being looked into.

Related PR: https://github.com/LIQNFT/candy-shop/pull/103

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