Quick Start

'use client'
import { RewardKitProvider, RewardKitButton, RewardKitConfig, useRewardKit } from "@boostxyz/reward-kit-react";

// Optional configuration used for filtering shown Boosts at an appplication-wide level
const config: RewardKitConfig = {
  // Enable testnets / staging API
  testnetsEnabled?: boolean,
  // The preconfigured creator address, if any, to filter displayed rewards
  creatorAddress?: Address,
  // The preconfigured Boost ID, if any
  boostId?: string,
  // Only show offers from Boosts funded by this budget account
  budgetAccount?: Address,
  // Only show offers with actions that target a contract on this chain ID. You must specify this if also specifying `targetContract`
  chainId?: number,
  // Only show offers with actions that target this contract address. If specifying, you must also specify chainId
  targetContract?: Address,
  // Only show offers with actions targeting tokens, in the format `chainId:address`, or `chainId:address:tokenId`
  tokens?: (`${number}:${Address}` | `${number}:${Address}:${number}`)[]
}

function App() {
  return (
    <RewardKitProvider
      // All configuration fields optional, tune your filters according to your application
      config={{
        testnetsEnabled: true,
        creatorAddress: "0xdeadbeef...",
        boostId: "11155111:0x378632819F39C74c4F56B1429E760739c5fb51b7:33",
        budgetAccount: "0xdeadbeef",
        targetContract: "0xdeadbeef",
        chainId: 11155111,
        tokens: ["7777777:0x777777722d078c97c6ad07d9f36801e653e356ae", "7777777:0x777777722d078c97c6ad07d9f36801e653e356ae:1"]
      }}
      // All theme configuration optional
      theme={{
        accent: "#9a75ff",
        primary: "#25292e",
        "button-primary": "#25292e",
        "button-secondary": "#f6f7f9",
        "primary-foreground": "#fff",
        secondary: "#989fa9",
        card: "#f6f7f9",
        dialog: "#fff",
        "dialog-border": "#e5e7eb",
        "dialog-overlay": "rgba(0, 0, 0, 0.2)",
        skeleton: "#f7f6f8",
        dim: "#f7f6f8",
        scrollbar: "#989fa9",
      }}
      // Handy for developing locally
      defaultOpen={true}
    >
      <MyApplication />
    </RewardKitProvider>
  );
}

// The rest of your application logic
function MyApplication() {
  // Access the current RewardKit context
  const rewardKit = useRewardKit()

  // reads currently applied colors scheme
  rewardKit.theme
  // Is the modal currently open.
  rewardKit.isModalOpen
  // See RewardKitConfig interface, contains several optional parameters supplied to the API when requesting Boosts to display
  rewardKit.config
  // Call this to update RewardKit theme variables
  rewardKit.changeTheme({ primary: '#fff', ...})
  // Open the modal with the current theme and configuration
  rewardKit.openModal()
  // Close the modal
  rewardKit.closeModal()
  // Toggle the modal's visibility
  rewardKit.toggleModal()
  // Reconfigure RewardKit to update what Boosts show in the modal
  rewardKit.configure({ boostId: '', deployerAddress: '0x', ... })

  return (
  <>
    // Basic usage, will render a button that, when clicked,
    // opens the modal as configured on the provider
    <RewardKitButton />

    // With configuration, will call rewardKit.configure before opening the modal
    <RewardKitButton
      config={{
        creatorAddress: "0x123...",
        tokens: ["1:0xabc..."]
      }}
      className="custom-button"
    >
      <>Custom Text</>
    </RewardKitButton>

    // If using shadcn buttons, the RewardKitButton here inherits all of the classes automatically
    <Button variant="secondary" size="sm" asChild>
      <RewardKitButton />
    </Button>
  </>
  )
}