Pure Swap Widget

Getting started with the Fanbase Pure Swap Widget for ERC20-ERC20 trades.

This guide walks you through several easy steps to embed the swap widget in your website, app or extension. The process should take only a few minutes — whether your site is already a decentralized application (dApp) or not.

With the swap widget, your users can trade ERC20 tokens, using Fanbase Swap API, without leaving your site! Wallet connectivity using Rainbowkit functionality is included.

Here are some cool things you can do with the Fanbase Pure Swap Widget:

• Build a Custom Website with Crypto Exchange Features

• Exchange or Trade Crypto Assets

• Convert to a Required Currency for NFT purchases such as WETH, ETH, USDT or USDC.

Installing the Pure Swap Widget SDK

npm install fanbase-pure-erc20-swap-widget

Adding the Pure Swap Widget to your App - React.JS

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

import CryptoExchangeWidget from 'fanbase-pure-erc20-swap-widget';

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

Adding the Pure Swap Widget to your App - 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 CryptoExchangeWidget = dynamic(() => import('fanbase-pure-erc20-swap-widget'), { ssr: false })

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

export default Home;

Pure Swap Widget

Adding the Pure Swap Widget on the User Side

Press the wallet icon to connect your browser-injected wallet or wallet app using a QR code.

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

Token Selection Modal

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

You can also create your own liquidity pool or add liquidity before or after the swap action using the 'add liquidity' button.

Slippage tolerance is the maximum price difference a trader is willing to accept in order to execute their trade. This tolerance should be considered when trading so that traders can accurately weigh their rewards and risks. Generally, the higher the slippage tolerance, the greater the risk of losses. For the Fanbase Pure 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.