# Marketplace

### Orders and Buy

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

```tsx
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.

```tsx
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

```tsx
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.

```typescript
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.

```tsx
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`:

```tsx
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](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:

```shell
npm install @liqnft/candy-shop
```

or

```shell
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](https://github.com/LIQNFT/candy-shop/tree/master/core/sdk)
