Aggregate Swap Widget

On this page you can get started using the Fanbase Aggregate Swap Widget for ERC20-ERC20 trades.

This widget extends the capability of the Fanbase Pure Swap Widget because it interacts with various decentralized platforms, contracts, and APIs to allow the user to choose the best available price. The implementation process should take only a few minutes regardless of whether your site is already a decentralized application (dApp) or not.

The Aggregate Swap Widget scans the decentralized web to find your users the best price on ERC20-ERC20 pairs. This widget harnesses Fanbase Aggregate Swap API, and Rainbowkit out-of-the-box, so users can connect wallets and conduct ERC20 swaps without leaving your site!

Aggregator Swap Widget

To conduct a swap, the user selects the appropriate DEX where he wishes to execute a trade. The widget currently supports swaps on the following platforms:

• FANBASE SWAP

• UNISWAP_V2

• UNISWAP_V3

• PANCAKESWAP

• SUSHISWAP

• VOLTAGE

• SPIRITSWAP

• SPOOKYSWAP

• 1INCH API

Please note that the Aggregate Swap Widget fetches a price from the '1inch API', which itself aggregates about 100 sources.

Installing the Aggregate Swap Widget SDK

npm install fanbase-aggregate-erc20-swap-widget

Adding the Aggregate Swap Widget using React.JS

// App.tsx/jsx/ts/js (Or any page/component you want to plant widget)

import AggregationCryptoExchangeWidget from 'fanbase-aggregate-erc20-swap-widget';

function App() {
  return (
    <div className="App">
        <AggregationCryptoExchangeWidget appId="Your API Key" chainId="API key provided Chain ID" buyToken="Output token to display" />
    </div>
  );
}
export default App;

Adding the Aggregate Swap Widget using Next.JS

// next.config.js

/** @type {import('next').NextConfig} */
module.exports = {
  reactStrictMode: false,
  transpilePackages: ["react-leaflet-cluster"],
  resolve: {
    extensions: ['.ts', '.tsx', '.js', '.jsx']
  },
  // In bleow configration, you should config fallback for unsupported Nodejs modules
  webpack(config, { isServer }) {
    if(!isServer) {
      config.resolve.fallback = { 
        net: false,
        tls: false,
        fs: false,
        zlib: false,
        stream: false,
        http: false,
        https: false,
        crypto: false,
        querystring: false
      };
    }
    
    return config
  }
}

// index.tsx/jsx/ts/js (Or any page/component you want to plant widget)

import type { NextPage } from "next";
import styles from "../styles/Home.module.css";
import dynamic from "next/dynamic"

// Import widget with dynamic-import next tool disable ssr and safely use in next.js
const AggregationCryptoExchangeWidget = dynamic(() => import('fanbase-aggregate-erc20-swap-widget'), { ssr: false })

const Home: NextPage = () => {
    return (
        <div className={styles.container}>
            <main className={styles.main}>
                <AggregationCryptoExchangeWidget appId="Your API Key" chainId="API key provided Chain ID" buyToken="Output token to display" />
            </main>
        </div>
    );
};

export default Home;

Adding the Aggregate Swap Widget on the User Side

Connect your browser-injected wallet or use a QR scan to connect your mobile wallet by harnessing Rainbowkit, out-of-the-box, with. no additional implementation required.

Wallet Connect

Wallet Connect using QR scan

After your wallet is connected, press the SELECT button on the token input box. The token selection modal is now shown.

Now, you can fetch quotes and market information for the selected tokens. Before confirming a swap, you can check current token prices by fetching quotes.

Fetching Quote

Next, use the drop-down option to compare prices from various decentralized platforms.

Quote Selection

If user fetches quotes while input amount is focused on, widget will fetch output token amount like above. If focus is on the output amount input, widget will fetch input price like below.

Fetching Quotes

For the Fanbase Aggregator Swap Widget, default slippage tolerance is set to 0.5%. But, the widget UI allows you to set slippage tolerance anywhere from 0.1% to 5%. You can adjust slippage tolerance settings using the gear icon, beside the wallet connect button.

Slippage Setting

After quote selected, there are 2 operation options; "Confirm Swap" and "Add Liquidity". To run trade operation, press "Confirm Swap" button and to contribute to liquidity, just press "Add Liquidity" button.