React DeFi Widget

Ethereum Defi widget for React apps

Introduction

react-defi-widget is a React widget that allows your website visitors to quickly and easily access automated liquidity pools (Bancor, ...) in Ethereum blockchain where they can convert tokens to another seamlessly and completely permissionless as well as stake liquidity to the pool. You can embed the widget and set a fee that allows take commissions up to 3% from each transaction all you need is web3-react been imported on your app and passing its context through props to the widget component.

Preview

Live example

https://modest-bardeen-fe9d2c.netlify.com/

Features

• Enabling on-chain token swap on any React-based applications through Bancor
• Earn commission in BNT token up to 3%
• Customizable widget attributes
• Support of Mainnet and Ropsten
• Adding liquidity to a pool within Bancor and earning fee (normally ~0.1-0.3% on each trade)
• Creating a new liquidity pool within Bancor (aka. List your token on decentralized exchanges for free)

Install

npm install --save react-defi-widget

Usage

Token Conversion Widget

Basic Usage :

import React, { Component, Fragment } from 'react'
import { useWeb3Context } from 'web3-react';
import { TokenConversionWidget } from 'react-defi-widget'

const MainPage = (props) => {

  const context = useWeb3Context();

  useEffect(() => {
        context.setFirstValidConnector(['MetaMask']) // Or on your choice
  }, [])

  return (
    <Fragment>
        <TokenConversionWidget
          web3ReactContext={context}
        />
    </Fragment>
  )
}

Advance Usage :

import React, { Component, Fragment } from 'react'
import { useWeb3Context } from 'web3-react';
import { TokenConversionWidget } from 'react-defi-widget'

const MainPage = (props) => {

  const context = useWeb3Context();

  useEffect(() => {
        context.setFirstValidConnector(['MetaMask']) // Or on your choice
  }, [])

  return (
    <Fragment>
        <TokenConversionWidget
          web3ReactContext={context}
          title={"YOUR TITLE"}
          subtitle={"YOUR SUBTITLE"}
          description={"CAN BE SOMETHING TO TELL YOUR USERS"}
          color={"#777"}
          baseCurrency={"BNT"}
          pairCurrency={"ETH"}
          affiliateAccount={"0x8fD00f170FDf3772C5ebdCD90bF257316c69BA45"}
          affiliateFee={3}
          whitelisted={["ETH", "BNT", "KNC", "ENJ"]} // You might need to check all available tokens first
        />
    </Fragment>
  )
}

Liquidity Pool Explorer / Pool Creation Widget

The widget offers a vast opportunity for your website visitors to stake liquidity and create the new pool in the permissionless manner.

Shows all available liquidity pools :

import React, { Component, Fragment } from 'react'
import { useWeb3Context } from 'web3-react';
import { LiquidityPoolsWidget } from 'react-defi-widget'

const MainPage = (props) => {

  const context = useWeb3Context();

  useEffect(() => {
        context.setFirstValidConnector(['MetaMask']) // Or on your choice
  }, [])

  return (
    <Fragment>
        <LiquidityPoolsWidget
          web3ReactContext={web3context}
          color={color}
        />
    </Fragment>
  )
}

Filter specific pools :

import React, { Component, Fragment } from 'react'
import { useWeb3Context } from 'web3-react';
import { LiquidityPoolsWidget } from 'react-defi-widget'

const MainPage = (props) => {

  const context = useWeb3Context();

  useEffect(() => {
        context.setFirstValidConnector(['MetaMask']) // Or on your choice
  }, [])

  return (
    <Fragment>
        <LiquidityPoolsWidget
          web3ReactContext={web3context}
          color={color}
          defaultPool={"ENJBNT"}
          whitelisted={["ETHBNT", "ENJBNT", "DAIBNT"]}
          disablePoolCreation={true}
        />
    </Fragment>
  )
}

Local Development

To run the examples locally, run the library first

npm install
npm start

Then open another window and run the webapp

cd example/
npm install
npm start

Properties

Token Conversion Widget

| |type|required|default value|description| |---|--- |--- |--- |--- | |web3ReactContext|PropTypes.object|YES| |The web3-react context object that the widget will goes to connect| |title|PropTypes.string|NO||Title of the widget| |subtitle|PropTypes.string|NO||Subtitle of the widget| |description|PropTypes.string|NO||Long description at the bottom of the widget| |color|PropTypes.string|NO|#0275d8|Color of the widget| |baseCurrency|PropTypes.string|NO|ETH|Default base currency in a symbol format| |pairCurrency|PropTypes.string|NO|BNT|Default pair currency in a symbol format| |affiliateAccount|PropTypes.string|NO|None|The recipient account that collects the fee from the transaction| |affiliateFee|PropTypes.number|NO|0|The fee rate, for example 2.5 if the fee is set to 2.5%| |whitelisted|PropTypes.array|NO||Provides whitelisted tokens to be traded |

Liquidity Pool Widget

| |type|required|default value|description| |---|--- |--- |--- |--- | |web3ReactContext|PropTypes.object|YES| |The web3-react context object that the widget will goes to connect| |title|PropTypes.string|NO||Title of the widget| |subtitle|PropTypes.string|NO||Subtitle of the widget| |description|PropTypes.string|NO||Long description at the bottom of the widget| |color|PropTypes.string|NO|#0275d8|Color of the widget| |whitelisted|PropTypes.array|NO||Provides whitelisted liquidity pools| |defaultPool|PropTypes.string|NO||Default pool | |disablePoolCreation|PropTypes.bool|NO|false|Remove pool creation menu from the widget |

License

MIT © pisuthd