# Staking Widget SDK

<figure><img src="https://1972835299-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fjekgdg0lFIHEmnCb2DJX%2Fuploads%2FsIncMfmsp4JyGdhG5Zce%2Fimage.png?alt=media&#x26;token=6f3da5fe-481e-4d8a-b98d-40989b95a23b" alt=""><figcaption></figcaption></figure>

### Staking Types

* ERC20 (Competitive)
* ERC20 (Friendly)
* ERC721 NFT (Aquarium)
* ERC1155 NFT (Nft Advanced)

## Installing the Staking SDK

```bash
npm install fanbase-staking-widget
```

## Adding the Aggregate Swap Widget using React.JS

```typescript
// 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

```javascript
// 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
  }
}
```

```typescript
// 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;
```

<figure><img src="https://1972835299-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2Fjekgdg0lFIHEmnCb2DJX%2Fuploads%2Fv3JSiHBaJifpBwxuWXwp%2Fimage.png?alt=media&#x26;token=f12ad75b-f88b-44fb-bc2f-a223c8d2900b" alt=""><figcaption></figcaption></figure>
