Odos Widgets

Overview

The odos-widgets library is a set of React components for third-party dApps to facilitate Odos functionality directly on their UI.

View list of all published versions

Installation

npm install odos-widgets

OdosSwapWidget

The OdosSwapWidget is a configurable React component that enables third-party apps to facilitate Odos-powered swaps directly on their UI.

Props

| Property | Required | Description | Default value | | -------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------- | | chainIds | No | An array of chain IDs that tells the widget what chains to render. Defaults to all Odos-supported chains. | [1, 10, 56, 137, 250, 324, 5000, 8453, 34443, 42161, 43114, 59144, 534352] | | rpcUrlMap | No | Mapping of JSON-RPC endpoint URL strings, indexed by chain ID. | Public RPC URLs | | theme | No | Object of properties to set custom styling. | Odos theme | | referralCode | No | The code you registered to participate in the Odos partner referral program. | 1 |

Remarks:

• If rpcUrlMap is omitted, public RPC URLs will be used for all chains in chainIds.
• If you provide an rpcUrlMap that includes only some chains in chainIds, public RPC URLs will be used for the rest.
• If theme is omitted, the default Odos theme will be applied.
• If you specify only a subset of the available theme properties, default values will be used for the unspecified properties.
• If you, or someone on your team, have not registered a referralCode, consider doing so to get the most out of your Odos integration.

Theme properties

| Property | Default value | Type | | -------------------- | -------------------------- | ------------------- | | maxWidth | 430 | number | | fontFamily | "Montserrat, sans-serif" | string | | textColor100 | "#ffffff" | string | | textColor200 | "#E8E8E8" | string | | textColor300 | "#AFB3B5" | string | | accentTextColor | "#ffffff" | string | | accentColor | "#FC7E3D" | string | | successColor | "#66E86B" | string | | errorColor | "#FF3232" | string | | warningColor | "#F6DB49" | string | | backgroundColor100 | "#43494A" | string | | backgroundColor200 | "#262F31" | string | | backgroundColor300 | "#13191B" | string | | backgroundColor400 | "#000607" | string | | wcThemeMode | "dark" | "light" \| "dark" |

Usage

import React from "react";
import { OdosSwapWidget } from "odos-widgets";

function YourAppComponent() {
  // Must have length >= 1
  const chainIds = [
    1, 137,
    // ... more Odos-supported chain IDs
  ];

  // Must have length >= 1
  const rpcUrlMap = {
    1: "https://ethereum-rpc-example",
    137: "https://polygon-rpc-example",
    // ... more Odos-supported chains
  };

  // Your custom theme
  const theme = {
    maxWidth: 430,
    fontFamily: "Montserrat, sans-serif",
    // ... more theme properties
  };

  return (
    <div>
      <OdosSwapWidget chainIds={chainIds} rpcUrlMap={rpcUrlMap} theme={theme} />
    </div>
  );
}

export default YourAppComponent;

Example apps

The Odos team maintains a repo with example apps for different frameworks like Next.js and Create React App. Please refer to this repo to see how the OdosSwapWidget is implemented and more.