Set&Forgetti Widget

A React widget for integrating Berachain staking into your dApp with minimal setup.

Features

• 🚀 Easy integration with any React application
• 💰 Built-in referral system
• 💸 Earn revenue from your users' deposits
• 🎨 Customizable to match your app's design
• 🔒 Secure and audited smart contracts

Installation

npm install @thehoneyjar/widget
# or
yarn add @thehoneyjar/widget
# or
pnpm add @thehoneyjar/widget

Quick Start

import { SFWidget } from "@thehoneyjar/widget";

export default function App() {
  const handleDeposit = (params) => {
    console.log("Deposit:", params);
  };

  return (
    <SFWidget
      apiKey={process.env.NEXT_PUBLIC_API_KEY}
      onDeposit={handleDeposit}
    />
  );
}

Custom Integration

You can use the useWidget hook to create your own custom trigger button or integrate the widget into your own UI:

import { SFWidget, useWidget } from "@thehoneyjar/widget";

export default function App() {
  // Get widget controls
  const { openWidget, closeWidget, isOpen } = useWidget();

  const handleDeposit = (params) => {
    console.log("Deposit:", params);
  };

  return (
    <>
      {/* Your custom UI */}
      <button onClick={openWidget} className="your-custom-button-class">
        Start Staking
      </button>

      {/* The widget itself */}
      <SFWidget
        apiKey={process.env.NEXT_PUBLIC_API_KEY}
        onDeposit={handleDeposit}
      />
    </>
  );
}

The useWidget hook provides:

• isOpen: boolean - Current open state of the widget
• openWidget: () => void - Function to open the widget
• closeWidget: () => void - Function to close the widget

Getting an API Key

To use the Set&Forgetti widget, you'll need an API key. You can get one by filling out our form:

👉 Request an API Key

Props

| Prop | Type | Required | Description | | --------- | -------- | -------- | ---------------------------------------- | | apiKey | string | Yes | Your Set&Forgetti API key | | onDeposit | function | Yes | Callback function when a deposit is made |

Deposit Callback Parameters

The onDeposit callback receives an object with the following properties:

{
  amount: string;
  token: Token;
  poolType: string;
  farmingMode: string;
  delegatePreference: string;
}

Styling

The widget automatically adapts to your application's theme. It uses CSS variables for styling, which you can override to match your design system.

Development

To contribute to the widget or run it locally:

1. Clone the repository
2. Install dependencies: pnpm install
3. Start the development server: pnpm dev

License

MIT © [Set&Forgetti]