Integrate NFT Aggregator

The Aggregator widget allows you to showcase all aggregated NFT Collections within your application. This tutorial will guide you through the steps to install and integrate the Aggregator widget seamlessly into your app.

Using React SDK

Step 1: Installation

Run the following command in your terminal to install the package:

This will add the @bandit-network/pro-kit package to your project dependencies.

Step 2: Integration

After installing the package, you can now import the aggregator components from it. Specifically, you will need the BanditContextProvider and Aggregator components.

Here's how you can import them:

import { BanditContextProvider, Aggregator } from "@bandit-network/pro-kit";

Now, you can use these components in your application. The BanditContextProvider component is a context provider that makes the Bandit Network API available to your application. It requires an apiKey prop.

The Aggregator component is the aggregator widget itself.

Here's an example of how you can use these components:

const App = () => {
  return (
    <BanditContextProvider
      apiKey="REPLACE_WITH_API_KEY"
    >
      <Aggregator />
    </BanditContextProvider>
  );
};

In this example, replace REPLACE_WITH_API_KEY with your API key.

Styling the Campaign Widget with Custom CSS

The aggregator widget comes with default styles that you can customize to suit your application's design.

Here's an example github repository link of how you can customize the CSS of the aggregator widget: Aggregator with custom CSS (opens in a new tab)

Remember, this is just an example. Feel free to modify and expand upon it to suit your specific needs and preferences.

Testing Your Integration

When integrating the Bandit Network campaign widget, it's crucial to test your implementation before deploying to production. We provide two environments for testing and production use.

Environments

Devnet (Test Environment)
- Cluster: 'devnet'
- Use this for development and testing purposes.
Mainnet (Production Environment)
- Cluster: 'mainnet'
- Use this for your live, production application.

API Reference

The Aggregator component accepts the following props:

`showFilter` (optional)

Show chain filters that are supported by our aggregator.

Type: boolean

`cluster`

The environment cluster you want to connect to.

Type: string
Options: 'mainnet', 'devnet'

Campaign List Integration Stylize Default Widget