This widget is designed as a React component to show a gist of your DEX data. It gives you details about volume and liquidity percentage change of Top Trading Pools and Top Tokens of a DEX for 24h and 7d timeframe.

npm install @covalenthq/[email protected]

To use the component, first import Widget into your file:

import { Widget } from '@covalenthq/dex-widget-react-library'; 

A sample code in a React App would look like 

import { Widget } from "@Calm-Rock/dex-widget";
function App() {
  return (
      <Widget 
        chain_id='1'
        dex_name='sushiswap'
        api_key='ckey_..' //Get it from your environment file
        bg_color='grey'
        text_color='white'
      /> 
  );
}

export default App;

See a live demo of the DEX widget here

If you have any questions, comments, issues and feedback regarding this code template, please message us on Discord.

Covalent provides the industry-leading Unified API bringing visibility to billions of Web3 data points.

Developers use Covalent to build exciting multi-chain applications like crypto wallets, NFT galleries, and investor dashboard tools utilizing data from 26+ blockchains. Covalent is trusted by a community of 15,000+ developers and powers data for 500+ applications including 0x, Zerion, Rainbow Wallet, Rotki, Bitski and many others.

Register and get your own Covalent API key here

Website | Discord | Telegram | Twitter | YouTube | WeChat