Marketplace
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/:tokenMintwhere:tokenMintwill be replaced by the NFT token mint
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.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!'
}
/>
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'}
]}
/>
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}
/>
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>
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.
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/sdkLast modified 7mo ago