Skip to content
This repository has been archived by the owner on Feb 15, 2022. It is now read-only.
/ react-defi-widget Public archive

A widget that allows easily converting and staking tokens from your React-based landing pages or applications

Notifications You must be signed in to change notification settings

pisuthd/react-defi-widget

Repository files navigation

This repo is unmaintained!

React DeFi Widget

Ethereum Defi widget for React apps

NPM JavaScript Style Guide

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

Screenshot

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

About

A widget that allows easily converting and staking tokens from your React-based landing pages or applications

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages