Delegator Affiliates

Introduction

The Honey Jar Validator is one of the leading Berachain validators and one of the most popular validators among regular users. By embedding the THJ Affiliate widget in your platform, you help us make the Berachain ecosystem better and create more public goods. In exchange for you help, we're going to reward you for every user you attract.

Installation

Install the Affiliate Widget and its peer dependencies:

npm install @0xhoneyjar/validator-widget@latest wagmi

Setup

1. Configure

Add berachainTestnetbArtio to your chains in your wagmi config.

import { http, createConfig } from "wagmi";
import { berachainTestnetbArtio } from "wagmi/chains";
import { metaMask } from "wagmi/connectors";
 
export const projectId = "fb297a4ca0bff468a184d944ed22510a";
 
export const config = createConfig({
  chains: [berachainTestnetbArtio] as const,
  connectors: [],
  transports: {
    [berachainTestnetbArtio.id]: http(),
  },
});

2. Wrap Provider

Wrap your application with WagmiProivder.

const queryClient = new QueryClient();
 
const App = () => {
  return <WagmiProvider config={config}>{/* Your App */}</WagmiProvider>;
};

3. Add API Route

Then, create a Next.js API route to track delegations (e.g., /api/delegate):

import { createNextRouteHandler } from "@0xhoneyjar/validator-widget/server";
export const POST = createNextRouteHandler();

4. Add Environment Variables

Lastly, set the following environment variables:

HIVE_INSIGHT_API_KEY="your_api_key_here"
HIVE_INSIGHT_API_URL="https://hive-insight-production.up.railway.app"

Usage

Import and use the ValidatorWidget component in your React component:

import { ValidatorWidget } from "@0xhoneyjar/validator-widget";
 
export const YourApp = () => {
  return (
    <ValidatorWidget apiUrl="/api/delegate" referrer="your_company_name" />
  );
};

Props

• apiUrl: The URL of your API route (e.g., "/api/delegate")
• referrer: Your company's name

Styling

You can customize the widget's appearance by providing a theme prop:

<ValidatorWidget
  apiUrl="/api/delegate"
  referrer="your_company_name"
  theme={{
    backgroundColor: "#393229",
    borderRadius: "6px",
    borderColor: "#746b65",
    borderWidth: "2px",
  }}
/>

Available Theme Properties

By adjusting these theme properties, you can create a seamless integration of the Affiliate Widget into your application's design. Experiment with different combinations to achieve the desired look and feel.

Custom Button Wrapper

You can use the ValidatorWidget as a wrapper around your own custom button for full control over its appearance and behavior. This allows you to integrate the widget seamlessly into your UI while maintaining your application's design language.

Usage with Custom Button

To use a custom button, you can pass it as a child to the ValidatorWidget component:

<ValidatorWidget apiUrl="/api/delegate" referrer="thj">
  <Button variant="primary" size="large">
    Delegate to The Honey Jar
  </Button>
</ValidatorWidget>

Usage with Custom Notification

To use a custom button, along with a custom notification you can use the useValidatorNotification hook and conditionally render a notification:

const { hasNotification } = useValidatorNotification();
 
<ValidatorWidget apiUrl="/api/delegate" referrer="your_company_name">
  <Button variant="primary" size="large">
    Delegate to The Honey Jar
  </Button>
  {hasNotification && (
    <Alert variant="info" className="mt-4">
      {notificationMessage}
    </Alert>
  )}
</ValidatorWidget>;