Integrate a Leaderboard Widget

This guide will walk you through the process of installing and integrating the leaderboard 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/react package to your project dependencies.

Step 2: Integration

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

Here's how you can import them:

import { BanditContextProvider, Leaderboard } from "@bandit-network/react";

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 and a cluster as props.

The Leaderboard component is the leaderboard widget itself. It requires an id prop, which should be the ID of the campaign(s) that you want to display the leaderboard for.

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

const App = () => {
  return (
    <BanditContextProvider
      apiKey="REPLACE_WITH_API_KEY"
      cluster="mainnet"
    >
      <Leaderboard campaignId="REPLACE_WITH_CAMPAIGN_ID" />
    </BanditContextProvider>
  );
};

In this example, replace REPLACE_WITH_CAMPAIGN_ID with the actual campaign ID you want to display the leaderboard for and replace REPLACE_WITH_API_KEY with your actual API key.

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 Leaderboard component and mountLeaderboard function accept the following props:

`campaignId`

The ID of the leaderboard campaign you want to display.

Type: number

`cluster`

The environment cluster you want to connect to.

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

`render` (optional)

Allows you to render your own UI. The render function provides the necessary arguments ReferralRenderArgsType.

Type: function

Referral Integration Campaign List Integration