Avon Widget

The @avon_xyz/widget package exposes the MegaVaultPositionWidget, a drop-in React component that lets your users deposit to and withdraw from the Avon MegaVault without leaving your app. The widget consumes wagmi and React Query providers and accepts optional theme overrides so it can match any host interface.

Installation

pnpm i @avon_xyz/widget
# or
npm install @avon_xyz/widget
# or
yarn add @avon_xyz/widget

After installing, ensure your application wraps its tree with:

• WidgetThemeProvider (optional but required if you want to access the theme context)
• WagmiConfig using the exported wagmi client
• QueryClientProvider for React Query

Import the prebuilt widget styles once (for example in your global stylesheet or _app.tsx):

import "@avon_xyz/widget/styles.css";

Usage

Import the widget from the package and render it wherever you want the vault controls to appear:

import { MegaVaultPositionWidget } from "@avon_xyz/widget";

export default function Example() {
  return (
    <MegaVaultPositionWidget
      chainId={4326 | 6343}
      referrerAddress="0x..."
      appName="YOUR_APP_NAME"
      widgetBackground="#050a1f"
      borderColor="#1e2645"
      textPrimary="#f4f7ff"
      textSecondary="rgba(244, 247, 255, 0.75)"
      accent="#ffb347"
      accentSecondary="#ffcc33"
      tabActiveBackground="#ffb347"
      tabActiveText="#050a1f"
      inputCardBackground="#0b1733"
      actionButtonBackground="#ffb347"
      actionButtonText="#050a1f"
      secondaryButtonBackground="rgba(255, 255, 255, 0.1)"
      secondaryButtonText="#f4f7ff"
      sliderTrackBackground="#0b1733"
      sliderThumbBackground="#ffb347"
      sliderTooltipBackground="#ffb347"
      sliderTooltipText="#050a1f"
      primaryFontClass=""
      secondaryFontClass="font-supply-mono"
      success="#56f1c2"
      error="#ff6b81"
      pending="#ffe066"
      shadow="0 25px 60px rgba(5, 10, 31, 0.55)"
      borderRadius="12px"
    />
  );
}

All props are optional—omitting them falls back to the defaults provided by useWidgetTheme(). The configuration above mirrors the playground under src/pages/index.tsx, so you can copy it to replicate the showcased style or trim it down to the few overrides you need.

Handling wallet connections

If you want the widget to trigger your app's wallet flow, pass an onConnectWallet callback. The widget invokes this callback whenever a user presses the primary action while disconnected, letting you wire it to whichever onboarding system you prefer.

Privy example

import { usePrivy } from "@privy-io/react-auth";
import { MegaVaultPositionWidget } from "@avon_xyz/widget";

export default function PrivyExample() {
  const { login, authenticated, connectWallet } = usePrivy();
  return (
    <MegaVaultPositionWidget
      //  ...YOUR CONFIG HERE...
      onConnectWallet={() => {
        if (authenticated) {
          connectWallet();
        } else {
          login();
        }
      }}
    />
  );
}

RainbowKit example

import { useConnectModal } from "@rainbow-me/rainbowkit";
import { MegaVaultPositionWidget } from "@avon_xyz/widget";

export default function RainbowKitExample() {
  const { openConnectModal } = useConnectModal();

  return (
    <MegaVaultPositionWidget
      //  ...YOUR CONFIG HERE...
      onConnectWallet={() => {
        if (openConnectModal) {
          openConnectModal();
        }
      }}
    />
  );
}