NFT20: How to Simply Trade NFTs in JS

NFT20 is a platform that enables buying and selling NFTs in one click on Ethereum and Polygon without counterparty thanks to liquidity provided in the popular AMM Uniswap. In this article, we’ll learn how to simply add the functionality of buying NFTs to any website. To see the complete documentation and sample, go to the NFT20 SDK Github page.

Setup

Using NPM:

npm install --save nft20

then in your javascript code:

const NFT20 = require('nft20')

Or in the browser :

<script src="https://unpkg.com/nft20/build/nft20.js"></script>

And access the NFT20 global variable.

Then instantiate the library by providing an RPC endpoint:

let nft20 = new NFT20("https://mainnet.infura.io/v3/a634422ef8f84eeab6c55d89d1a38e5d")

Listing available pools

In order to know which NFTs are able to be traded on the NFT20 platform you can list all pools:

let pools = await nft20.getPools()

Or you can get a specific pool by passing as first parameter the NFT contract address:

let pool = await nft20.getPool("0xc3f733ca98e0dad0386979eb96fb1722a1a05e69")

A pool object contains a lot of useful information including metadata, available liquidity and trading volumes:

{
      "address": "0x67bdcd02705cecf08cb296394db7d6ed00a496f9",
      "nft": "0xc3f733ca98e0dad0386979eb96fb1722a1a05e69",
      "nft_type": "721",
      "name": "Acclimated MoonCats",
      "symbol": "CAT20",
      "lp_eth_balance": "16.660843646371823",
      "lp_usd_balance": "66226.52027745507",
      "nft_usd_price": "433.81786456328774",
      "nft_eth_price": "0.21827423763807",
      "network": "0",
      "sell_price_eth": "0.2148135783048203",
      "buy_price_eth": "0.22183732856243427",
      "lp_version": "2",
      "lp_fee": null,
      "index_order": "112",
      "banner_url": "https://lh3.googleusercontent.com/GqVjY5pCGyHzfo5zYl6ocRbdEGGwZPgXcmyKCcPMhepkZATScV6H_iKlGvnkyfgLE_QdpFLHUeYhzMCHPGMGpKwKXuVL4vbuFMPD0A=s2500",
      "image_url": "https://lh3.googleusercontent.com/RwIPOH0RftzOWtyC0WBnMx2X4_4Xqeimk5iT6I1xNQKSuRTVNwBY0PcA6MkCiX2dVP5U_MDbseAq3LoaJ7BY_xyTfLpeUsGtt2-WTA=s120",
      "collection_description": "After a whirlwind adventure four years in the making the MoonCats have been rescued and are acclimating to their life on the blockchain.",
      "collection_total_assets": "10706",
      "external_url": "https://mooncat.community",
      "featured_image_url": "https://lh3.googleusercontent.com/kIfTnHDRFqRIOg1jkPoaD9oNwhOdLk2_0MOy1SqG2iqkWxiZ0FRq5ZFXjHCQKUmIoUAZxHzhAA43cd9vmr1Geuu1pSryXO5BHEihKt8=s300",
      "telegram_url": null,
      "twitter_username": "ponderware",
      "number_of_owners": "1715",
      "nft_locked": "96",
      "token_supply": "9600",
      "total_nft_transfers": "694",
      "pool_users": "118",
      "logo_url": "https://lh3.googleusercontent.com/RwIPOH0RftzOWtyC0WBnMx2X4_4Xqeimk5iT6I1xNQKSuRTVNwBY0PcA6MkCiX2dVP5U_MDbseAq3LoaJ7BY_xyTfLpeUsGtt2-WTA=s120",
      "users_today": "9",
      "users_weekly": "34",
      "nft_value": "100",
      "volume_today_usd": "9110.1751558290425400000000000000000000",
      "volume_weekly_usd": "48153.7829665249391400000000000000000000",
      "volume_today_eth": "4.5837589903994700000000000000000000",
      "volume_weekly_eth": "24.2284403778257700000000000000000000",
      "volume_usd": "255952.5400923397666000000000000000000000",
      "volume_eth": "128.7818002064613000000000000000000000",
      "pepe_score": "6",
      "pepe_votes": "8"
    },

In order to buy/sell NFTs: NFT20 recommends using pools that have at least $2k in liquidity on AMM.

the sell_price_eth and buy_price_eth is a live quote of the price of buying or selling one NFT.

Listing NFTs in a pool

Once you found a pool you want to work with, you can easily list the NFTs that are in the pool by using getPoolContent function and passing as first parameter the address of the NFT contract:

let nfts = await nft20.getPoolContent("0xc3f733ca98e0dad0386979eb96fb1722a1a05e69")

The result is an array containing all items available to buy in the pool:

[
    {
      "pool": "0x67bdcd02705cecf08cb296394db7d6ed00a496f9",
      "nft_contract": "0xc3f733ca98e0dad0386979eb96fb1722a1a05e69",
      "nft_id": "8589",
      "nft_image": "https://lh3.googleusercontent.com/dlP7dTJei7wVyfI4e6v01-znUJIgpfydexI1H6Ep0-4iU5Ha1PzRyaZquqiu5XOqSwmSpURv8IRNgpB3rs9hMkAzTZkizKYnn0rZYw",
      "nft_title": "8589: 0x00de1b00b8",
      "nft_description": "Pale Blue/Sky Blue Grumpy Tortie MoonCat",
      "availabe_quantity": "1"
    },
...
]

In the case of ERC721 items, the available quantity will always be 1 while ERC1155 NFTs can have a bigger amount available.

Buying an NFT

You’ll need to have an Ethereum provider that is able to sign the transaction for this. You can use the web3 instance injected by popular wallets like Metamask. The buyNFT function accepts the following parameters: The NFT contract address, an array of the IDs you want to buy, an array of the amounts of NFT for each ID you want to buy (useful for ERC1155 contracts). The function returns everything you need to send the transaction including the calldata and the value in ETH that will be paid.

let params = await nft20.buyNFT(selectedNFT, [id], [1], account)
                params.from = account;
                const txHash = await ethereum.request({
                    method: 'eth_sendTransaction',
                    params: [params]
                });

The buyNFT function automatically adds a 10% slippage to the transaction in order to make sure that the call will be successful. Any ETH left after the trade will be returned to the user.

---

The NFT20 exchange allows for developers and NFT collectors to easily buy and sell NFTs that have liquidity on the platform. Making it an interesting approach to add NFT storefronts capabilities to wallets, execute an innovative crowdsale / distribution of NFTs, and more…