Aggregate NFT Swap Widget
Getting started with the Fanbase NFT Swap Widget for ERC155-ERC20 trades. This widget uses Fanbase Aggregate ERC1155 Swap API, which queries Fanbase pools and Niftyswap pools.
This guide walks you through several easy steps to embed the swap widgets 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 NFT swap widget, your users can swap ERC20 tokens with ERC1155s, using Fanbase ERC1155 Swap API, without leaving your site! Wallet connectivity using Rainbowkit functionality is included!
The NFT trading feature provides guaranteed access to liquidity on-chain. An important feature of NFT trading is the utilization of a factory/registry contract that deploys a separate exchange contract for each ERC1155 contract. These exchange contracts each hold independent reserves of a single fungible ERC1155 token and their associated ERC1155 token ID. This allows trades based on relative supplies. The NFT Swap Widget is a ReactJS component that can be easily imported into any ReactJS project and modified to work in any NextJS project. It is designed to work out-of-the-box, with no required parameters or web3 integration necessary.
NFT trading, for ERC1155 tokens, is supported on all networks where the Fanbase NFT Swap API is deployed. The Fanbase Labs interface has three unique displays- the swap (default), list and carousel views, which the developer can designate by editing one word in the code. The ERC1155 token type can be used for music, media, skins, in-game items, general admission ticket sales and other cool, collectible things.
Installing the NFT Swap Widget SDK
npm install fanbase-aggregate-erc1155-swap-widgetAdding the NFT Swap Widget to your ReactJS app
// App.tsx/jsx/ts/js (Or any page/component you want to plant widget)
import NftExchangeWidget from 'fanbase-aggregate-erc1155-swap-widget';
function App() {
return (
<div className="App">
<NftExchangeWidget appId="Your API Key" chainId="API key provided Chain ID" coverView="carousel | list"/>
</div>
);
}
export default App;Adding the NFT Swap Widget to your NextJS app
// next.config.js
/** @type {import('next').NextConfig} */
module.exports = {
reactStrictMode: false,
transpilePackages: ["react-leaflet-cluster"],
resolve: {
extensions: ['.ts', '.tsx', '.js', '.jsx']
},
// In below configuration, 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 NextJS
const NftExchangeWidget = dynamic(() => import('fanbase-aggregate-erc1155-swap-widget'), { ssr: false })
const Home: NextPage = () => {
return (
<div className={styles.container}>
<main className={styles.main}>
<NftExchangeWidget appId="Your API Key" chainId="API key provided Chain ID" coverView="carousel | list"/>
</main>
</div>
);
};
export default Home;Adding the NFT Swap Widget on the User Side
There are two cases for NFT trades using the NFT swap widget. The first case is to buy NFTs and the second case is to sell NFTs. To buy an NFT, connect your wallet using the wallet icon, and select an ERC20 token to pay with using the token selection modal.
After selecting an ERC20 to pay with, search and input the ERC1155 token by address, using the output token selection modal. If the search result is valid, type the token ID in the second input. If the NFT collection has an item with the corresponding ID, it will be recognized.
After selecting the proper ERC1155 token, input the number of NFTs to buy or sell, and check the price by fetching a quote using the Review button.
After these steps are completed, press the CONFIRM button to trade your NFTs!
NFT Explorer
Fanbase NFT Swap Widget has a newly styled NFT explorer. With this feature the user can display specific digital collectibles to sell from his own site.
The following shows the NFT explorer displaying various digital collectibles in carousel mode.
The following shows the NFT explorer displaying various digital collectibles in list mode.
The user can easily browse the NFTs and instantly select a collectible to buy, from your own site.
Next, the NFT will be imported into swap view and paired with ERC20 options. Most creators and pool providers add WFNB, USDC, or USDT pairs. The Get Pair button fetches potential pairs. The Review button fetches the price, and the Confirm button sends the swap to be signed in the wallet. Conduct your swap in that order.
Now start trading your collectible digital assets! If you want to remove the Fanbase logo to look more professional, check out our advanced and enterprise plans at https://www.plan.fanbase.io...
Last updated