Campaign List

Campaign list is a widget that you can integrate into your application to display all campaigns deployed using the dashboard. This guide will walk you through the process of installing and integrating the campaign list widget into your application.

You can integrate a campaign using two ways, either by using our react SDK or by using our widget CDN script.

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 campaign list components from it. Specifically, you will need the BanditContextProvider and CampaignList components.

Here's how you can import them:

import { BanditContextProvider, CampaignList } 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 CampaignList component is the campaign list widget itself.

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

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

In this example, replace REPLACE_WITH_API_KEY with your API key.

Build your own custom UI with our SDK

The campaign list 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 campaign list widget: Campaign list 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 CampaignList component accepts the following props:

`campaignIds` (optional)

Show only those campaigns in the list that have the specified campaign IDs. If not provided, all campaigns will be shown.

Type: number[]

`cluster`

The environment cluster you want to connect to.

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

Leaderboard Integration NFT Aggregator Integration