Staking Widget SDK

On this page you can get started using the Fanbase Staking Widget for ERC20, ERC721, ERC1155 stakings.

Staking Types

• ERC20 (Competitive)

• ERC20 (Friendly)

• ERC721 NFT (Aquarium)

• ERC1155 NFT (Nft Advanced)

Installing the Staking SDK

npm install fanbase-staking-widget

Adding the Aggregate Swap Widget using React.JS

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

import StakingWidget from 'fanbase-staking-widget';

function App() {
  return (
    <div className="App">
        <StakingWidget appId="Your API Key" chainId="API key provided Chain ID" />
    </div>
  );
}
export default App;

Adding the Staking 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 StakingWidget = dynamic(() => import('fanbase-staking-widget'), { ssr: false })

const Home: NextPage = () => {
    return (
        <div className={styles.container}>
            <main className={styles.main}>
                <StakingWidget ="Your API Key" chainId="API key provided Chain ID" />
            </main>
        </div>
    );
};

export default Home;