# Aggregate NFT Swap Widget

This guide walks you through several easy steps to embed the swap widgets in your website, app or extension.  The process should take only a few minutes — whether your site is already a decentralized application (dApp) or not. &#x20;

With the NFT swap widget, your users can swap ERC20 tokens with ERC1155s, using Fanbase ERC1155 Swap API, without leaving your site!  Wallet connectivity using Rainbowkit functionality is included!&#x20;

The NFT trading feature provides guaranteed access to liquidity on-chain. An important feature of NFT trading is the utilization of a factory/registry contract that deploys a separate exchange contract for each ERC1155 contract. These exchange contracts each hold independent reserves of a single fungible ERC1155 token and their associated ERC1155 token ID. This allows trades based on relative supplies.\
\
The NFT Swap Widget is a ReactJS component that can be easily imported into any ReactJS project and modified to work in any NextJS project. It is designed to work out-of-the-box, with no required parameters or web3 integration necessary.&#x20;

NFT trading, for ERC1155 tokens, is supported on all networks where the *Fanbase NFT Swap API* is deployed. The Fanbase Labs interface has three unique displays- the *swap* (default), *list* and *carousel* views, which the developer can designate by editing one word in the code. The ERC1155 token type can be used for music, media, skins, in-game items, general admission ticket sales and other cool, collectible things. &#x20;

## Installing the NFT Swap Widget SDK

```bash
npm install fanbase-aggregate-erc1155-swap-widget
```

## Adding the NFT Swap Widget to your ReactJS app

```typescript
// App.tsx/jsx/ts/js (Or any page/component you want to plant widget)

import NftExchangeWidget from 'fanbase-aggregate-erc1155-swap-widget';

function App() {
  return (
    <div className="App">
        <NftExchangeWidget appId="Your API Key" chainId="API key provided Chain ID" coverView="carousel | list"/>
    </div>
  );
}
export default App;
```

## Adding the NFT Swap Widget to your NextJS app

```javascript
// next.config.js

/** @type {import('next').NextConfig} */
module.exports = {
  reactStrictMode: false,
  transpilePackages: ["react-leaflet-cluster"],
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx']
  },
  // In below configuration, you should config fallback for unsupported NodeJS modules
  webpack(config, { isServer }) {
    if(!isServer) {
      config.resolve.fallback = { 
        net: false,
        tls: false,
        fs: false,
        zlib: false,
        stream: false,
        http: false,
        https: false,
        crypto: false,
        querystring: false
      };
    }
    
    return config
  }
}
```

```typescript
// index.tsx/jsx/ts/js (Or any page/component you want to plant widget)

import type { NextPage } from "next";
import styles from "../styles/Home.module.css";
import dynamic from "next/dynamic"

// Import widget with dynamic-import next tool, disable ssr and safely use in NextJS
const NftExchangeWidget = dynamic(() => import('fanbase-aggregate-erc1155-swap-widget'), { ssr: false })

const Home: NextPage = () => {
    return (
        <div className={styles.container}>
            <main className={styles.main}>
                <NftExchangeWidget appId="Your API Key" chainId="API key provided Chain ID" coverView="carousel | list"/>
            </main>
        </div>
    );
};

export default Home;
```

## Adding the NFT Swap Widget on the User Side

There are two cases for NFT trades using the NFT swap widget. The first case is to buy NFTs and the second case is to sell NFTs. To buy an NFT, connect your wallet using the wallet icon, and select an ERC20 token to pay with using the token selection modal.&#x20;

<figure><img src="https://1972835299-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fjekgdg0lFIHEmnCb2DJX%2Fuploads%2FoxCLw13D5qiiag06V6gp%2Fimage.png?alt=media&#x26;token=174265e8-588d-436d-8ba5-e7879403f891" alt="" width="509"><figcaption></figcaption></figure>

After selecting an ERC20 to pay with, search and input the ERC1155 token by address, using the output token selection modal.  If the search result is valid, type the token ID in the second input.\
If the NFT collection has an item with the corresponding ID, it will be recognized.

<figure><img src="https://1972835299-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fjekgdg0lFIHEmnCb2DJX%2Fuploads%2FXMvasdprD9BJjsW7mbZf%2Fimage.png?alt=media&#x26;token=0fb82903-f997-4f09-ae05-209aaf15fcf7" alt="" width="518"><figcaption></figcaption></figure>

\
After selecting the proper ERC1155 token, input the number of NFTs to buy or sell, and check the price by fetching a quote using the **Review** button.

<figure><img src="https://1972835299-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fjekgdg0lFIHEmnCb2DJX%2Fuploads%2F4JlcBmSBaEHRldkgd4fc%2Fimage.png?alt=media&#x26;token=3bfaf209-a43c-4bf5-8358-e6f6a8b9945c" alt="" width="428"><figcaption></figcaption></figure>

After these steps are completed, press the **CONFIRM** button to trade your NFTs!

## NFT Explorer

Fanbase NFT Swap Widget has a newly styled NFT explorer.  With this feature the user can display specific digital collectibles to sell from his own site.

The following shows the NFT explorer displaying various digital collectibles in carousel mode.

<figure><img src="https://1972835299-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fjekgdg0lFIHEmnCb2DJX%2Fuploads%2FfHkvyHoWpvmGvd5u8NIk%2Fimage.png?alt=media&#x26;token=315f1a10-496f-4498-b220-42866eb2a8eb" alt="" width="563"><figcaption><p>Video NFT</p></figcaption></figure>

<figure><img src="https://1972835299-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fjekgdg0lFIHEmnCb2DJX%2Fuploads%2FKWTkFOVSjDwSSeZAU8Ud%2Fimage.png?alt=media&#x26;token=a69bc717-4ba2-4cf8-aa69-0e4755e9c676" alt="" width="563"><figcaption><p>Image NFT</p></figcaption></figure>

<figure><img src="https://1972835299-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fjekgdg0lFIHEmnCb2DJX%2Fuploads%2FcVdm4aRL3u5TbHjL4660%2Fimage.png?alt=media&#x26;token=65bc22b6-c2a7-4ae4-8c12-a66cf46bf3d9" alt="" width="563"><figcaption><p>Music NFT</p></figcaption></figure>

<figure><img src="https://1972835299-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fjekgdg0lFIHEmnCb2DJX%2Fuploads%2FeLz77WZ3wYi45hkOwIdS%2Fimage.png?alt=media&#x26;token=dda7d466-7369-4c51-94cc-9e234a87d043" alt="" width="563"><figcaption><p>NFT rotates to display token data</p></figcaption></figure>

The following shows the NFT explorer displaying various digital collectibles in list mode.

<figure><img src="https://1972835299-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fjekgdg0lFIHEmnCb2DJX%2Fuploads%2F1ndAIah5iU72AyDzbYV8%2Fimage.png?alt=media&#x26;token=30469606-10ac-4a34-a036-b0dc48960e1a" alt="" width="563"><figcaption><p>NFT explorer in list mode</p></figcaption></figure>

<figure><img src="https://1972835299-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fjekgdg0lFIHEmnCb2DJX%2Fuploads%2FspZvcHUoBTtmLcpLHuW3%2Fimage.png?alt=media&#x26;token=40a7e3f8-d705-410d-abc9-e2bdf75fd89c" alt="" width="563"><figcaption><p>Music NFT</p></figcaption></figure>

<figure><img src="https://1972835299-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fjekgdg0lFIHEmnCb2DJX%2Fuploads%2F0lRPPuNytY6ghXWVQDyp%2Fimage.png?alt=media&#x26;token=40143e97-9eb8-4fa1-9d31-3de4436e5f42" alt="" width="563"><figcaption><p>Video NFT</p></figcaption></figure>

<figure><img src="https://1972835299-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fjekgdg0lFIHEmnCb2DJX%2Fuploads%2FK298bgci4TvEjn3nBFeT%2Fimage.png?alt=media&#x26;token=fe1308b5-bf67-4f71-875e-5d21ead3ba60" alt="" width="563"><figcaption><p>Image NFT</p></figcaption></figure>

<figure><img src="https://1972835299-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fjekgdg0lFIHEmnCb2DJX%2Fuploads%2FXrnk2EMLGy9tqmHEyTgI%2Fimage.png?alt=media&#x26;token=4b5be153-9fc7-4d29-acc0-2dbc211616fc" alt="" width="563"><figcaption><p>NFT detail data</p></figcaption></figure>

The user can easily browse the NFTs and instantly select a collectible to buy, from your own site.&#x20;

<figure><img src="https://1972835299-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fjekgdg0lFIHEmnCb2DJX%2Fuploads%2FA3hcqk4rMRNc7Pc1aXF4%2Fimage.png?alt=media&#x26;token=96a89047-bc88-42b1-9e7c-35ba1ff5d350" alt="" width="563"><figcaption><p>NFT import to Buy</p></figcaption></figure>

Next, the NFT will be imported into *swap* view and paired with ERC20 options. Most creators and pool providers add WFNB, USDC, or USDT pairs.  The **Get Pair** button fetches potential pairs. The **Review** button fetches the price, and the **Confirm** button sends the swap to be signed in the wallet. Conduct your swap in that order.

<figure><img src="https://1972835299-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fjekgdg0lFIHEmnCb2DJX%2Fuploads%2FhPJgvca4mRjiS51JrVku%2Fimage.png?alt=media&#x26;token=c6af6e29-db14-4357-9532-9ead76ca5d3d" alt=""><figcaption><p>NFT pair selected</p></figcaption></figure>

Now start trading your collectible digital assets! If you want to remove the Fanbase logo to look more professional, check out our advanced and enterprise plans at <https://www.plan.fanbase.io>...
