TheDefiEngine Widget for React

The TheDefiEngine White Label is a customizable swap widget that uses the TheDefiEngine API. Whether you are using plain HTML, vanilla, or modular projects such as React, the TheDefiEngine White Label gives you access to a fully functional DeFi aggregator in your website with few lines of code, including a powerful API aggregating multiple liquidity sources, smart contracts and a fully customizable UI—all for free. In this guide, we walk you through adding the code to your website or dApp. We also show you how to customize the code to make it match your brand's style and even collect affiliate fees when your community uses the widget to swap.

Docs

• Documentations

• Storybook Playground

Demo

• Using in React
• Using in Browser with Script Tag

Installing

NPM

npm i @thedefiengine/widget-react

Yarn

yarn add @thedefiengine/widget-react

React

Import { TheDefiEngineApp } from '@thedefiengine/widget-react';

const App = () => {
  return (
    <TheDefiEngineApp apiKey="MyApiKey"/>
  );
}

Font

By default we use Roboto font. Include following font stylesheet or install using @fontsource/roboto

<link href='https://fonts.googleapis.com/css?family=Roboto:300,400,500' rel='stylesheet' type='text/css'>