Skip to main content
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 the widget styles

import "@deloraprotocol/widget/styles.css";
The package ships compiled CSS, so the host app does not need Tailwind.

​
Render the trade widget

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