Install Widget

Start by installing the package and importing its stylesheet once in your application entrypoint.

Install the package

npm install @deloraprotocol/widget react react-dom

react and react-dom are peer dependencies. The package expects React 18 or newer.

Optional wallet-management package

Install @deloraprotocol/widget-wallet-management only when your app already owns wallet connection state and you want Delora to reuse it through Wagmi or Solana Wallet Adapter. For EVM apps using Wagmi or a Wagmi-based wallet UI:

npm install @deloraprotocol/widget-wallet-management wagmi

For Solana apps using Solana Wallet Adapter:

npm install @deloraprotocol/widget-wallet-management @solana/wallet-adapter-react

If you use the Solana Wallet Adapter UI modal shown in examples, also install @solana/wallet-adapter-react-ui. Examples that open a host EVM wallet modal use RainbowKit’s useConnectModal, but the adapter works with any Wagmi-based wallet UI. Install and configure your chosen wallet UI package separately. For the auto-detect provider that can handle both EVM and Solana contexts:

npm install @deloraprotocol/widget-wallet-management wagmi @solana/wallet-adapter-react

Use subpath imports such as @deloraprotocol/widget-wallet-management/wagmi or @deloraprotocol/widget-wallet-management/solana when your app only installs one wallet stack.

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

The package ships compiled CSS, so the host app does not need Tailwind.

import "@deloraprotocol/widget/styles.css";
import { TradeWidget } from "@deloraprotocol/widget";

export function App() {
  return (
    <TradeWidget
      theme="dark"
      config={{}}
    />
  );
}

The config prop is required, but all fields inside TradeWidgetConfig are optional. This means config={{}} is valid when you want to use the default Delora API base.

Minimal install notes

Default API base: https://api.delora.build
Metadata endpoints used by the widget: /v1/chains, /v1/tokens, and /v1/tools
Quote endpoint used by the widget: /v1/quotes
Optional host-wallet adapters: @deloraprotocol/widget-wallet-management
For browser-based embeds that need authenticated rate limits, keep your Delora API key on your backend and point config.apiUrl to your proxy. See Configure Widget
If your app already manages wallets or receiver state, see Wallet & Receiver Management

Delora Widget

Basic Setup

Advanced Setup

Install Widget

Install the package

Optional wallet-management package

Import the widget styles

Render the trade widget

Minimal install notes

​Install the package

​Optional wallet-management package

​Import the widget styles

​Render the trade widget

​Minimal install notes

Install the package

Optional wallet-management package

Import the widget styles

Render the trade widget

Minimal install notes