Hyperbloom Swap Widget

⚠️ Pre-Alpha Release Notice This library is in pre‑alpha. Expect breaking changes, new features, and ongoing improvements.

Description

• SwapWidgetWithProviders – built‑in provider setup
• SwapWidgetProvider – context provider
• SwapWidget – low‑level swap component, must be used within SwapWidgetProvider

1. Installation

1.1 Installation for built-in

Install the package:

npm install @hyperbloom/widget

Add component:

"use client";
import { SwapWidgetWithProviders } from "@hyperbloom/widget";
import "@hyperbloom/widget/index.css";

export const Swap = () => {
  return <SwapWidgetWithProviders hiddenPoweredBy={true} />;
};

1.2 Installation for custom providers

Install the package and dependencies:

npm install @hyperbloom/widget viem wagmi @tanstack/react-query

Add component:

"use client";
import { SwapWidgetWithProviders } from "@hyperbloom/widget";
import "@hyperbloom/widget/index.css";

import { defineChain } from "viem";
import { http, createConfig } from "wagmi";
import { QueryClient } from "@tanstack/react-query";

export const Swap = () => {
  const config = createConfig({
    chains: [
      defineChain({
        id: 999,
        name: "HyperEVM",
        network: "hyperevm",
        nativeCurrency: { name: "HYPE", symbol: "HYPE", decimals: 18 },
        rpcUrls: {
          default: { http: ["https://rpc.hyperlend.finance"] },
        },
      }),
    ],
    transports: {
      [999]: http("https://rpc.hyperlend.finance"),
    },
    ssr: true,
  });
  const queryClient = new QueryClient();

  return (
    <SwapWidgetProvider config={config} queryClient={queryClient}>
      <SwapWidget hiddenPoweredBy={true} />
    </SwapWidgetProvider>
  );
};

Component Props

| Name | Type | Default | Description | | -------------------------- | ------- | ------- | ------------ | | theme | string | light | light / dark | | rounded | number | 15 | | | integratorRecipientAddress | string | | | | integratorPercentageFee | string | | | | hiddenPoweredBy | boolean | false | | | hiddenProtocols | boolean | false | | | headerTitle | string | Swap | | | hiddenHeaderTitle | boolean | false | | | hiddenSwapRoute | boolean | false | | | headerLogo | string | | | | hiddenHeaderLogo | boolean | false | | | width | string | 640 | max widget width |