@relayerfi/widget-kit-react

React components and hooks for rendering Relayer widgets. Embed on-chain actions (swaps, transfers, contract calls) into any React application.

Install

pnpm add @relayerfi/widget-kit-react @relayerfi/action-kit @relayerfi/widget-kit-core wagmi viem @tanstack/react-query react react-dom

All listed packages are peer dependencies.

Usage

import { Widget, useWagmiAdapter } from '@relayerfi/widget-kit-react';
import { createMetadata } from '@relayerfi/action-kit';
import '@relayerfi/widget-kit-react/index.css';

const metadata = createMetadata({
  url: 'https://myapp.example',
  icon: 'https://example.com/icon.png',
  title: 'Send AVAX',
  description: 'Transfer 0.1 AVAX',
  actions: [
    {
      type: 'transfer',
      label: 'Send 0.1 AVAX',
      to: '0x1234...5678',
      amount: 0.1,
      chains: { source: 43114 },
    },
  ],
});

function MyWidget() {
  const adapter = useWagmiAdapter();

  return (
    <Widget
      metadata={metadata}
      adapter={adapter}
      securityState="trusted"
    />
  );
}

Wrap your app with WagmiProvider and QueryClientProvider before using the adapter.

Exports

Components

• Widget - Renders an interactive widget from validated action metadata
• WalletButton - Wallet connection button

Hooks

• useWagmiAdapter() - Returns a WidgetAdapter wired to Wagmi for wallet interactions

Adapters

• WidgetAdapter - Interface for wallet interactions (connect, sign, send)
• WidgetExtensionAdapter - Adapter for Chrome extension environments

Extension Observers

Available via @relayerfi/widget-kit-react/ext:

• setupWidgetObserverEVM - Detect and render widgets on Twitter/X, YouTube, Twitch
• setupTwitterObserverEVM, setupYoutubeObserverEVM, setupTwitchObserverEVM

CSS

Import the stylesheet in your entry point:

import '@relayerfi/widget-kit-react/index.css';

Related Packages

| Package | Purpose | |---------|---------| | @relayerfi/action-kit | Action type definitions, validators, executors | | @relayerfi/widget-kit-core | Framework-agnostic runtime (directory, security, proxy) |

License

MIT