NFT Swap SDK

_The missing NFT swap SDK for Ethereum and EVM compatible chains, powered by the 0x protocol, written in TypeScript for web3 developers.

Overview

tl;dr: NFT Swap SDK is the easiest, most-powerful NFT swap library. Supports Ethereum and EVM-compatible chains (Polygon, Avalanche, BSC, etc..). Works in both browser and node.js. Written in TypeScript, built using the 0x protocol. With this library, you can build support for NFT marketplaces or over-the-counter (OTC) exchange.

The NFT Swap SDK developed by Trader.xyz offers swap support for ERC20s, ERC721s, and ERC1155s. Exchange NFTs for NFTs, NFTs for ERC20 tokens, or bundles of NFTs and tokens. This library provides the ultimate swap flexibility combined with a simple API surface area so you can be productive immediately and focus on building your web3 app.

This library is powered and secured by the 0x v3 protocol. The 0x v3 protocol has been in production for multiple years securing billions of dollars with of trades.

Goals

We want to share all underlying technology trader.xyz uses with the community. While we won't be open-sourcing our frontend, as we think design and UX is our differentiator, we believe in open-sourcing and freely sharing all underlying technology.

Our end goal is every piece of tech you see trader.xyz use (protocol, swap libraries, open-source orderbook, order monitor, high-performance NFT indexer, property-based orders, specific React hooks, and NFT aggregation) end up open-source. This library is the first step to achieving our goal.

Installation

You can install the SDK with yarn:

yarn add @traderxyz/nft-swap-sdk

or npm:

npm install @traderxyz/nft-swap-sdk

Configuration

To use the SDK, create a new NftSwap instance.

1import { NftSwap } from '@traderxyz/nft-swap-sdk';
2
3// From your app, provide NftSwap the web3 provider or signer, and the chainId to instantiate
4const nftSwapSdk = new NftSwap(providerOrSigner, chainId);

Now you're setup and ready to use the SDK in your program. Check out the examples for how to swap with the library.

Examples

Example 1: NFT <> NFT swap

In this first example, we're going to do a 1:1 NFT swap. We're going to swap User A's CryptoPunk NFT for User B's Bored Ape NFT.

Terminology: maker: Since User A will initiate the trade, we'll refer to User A as the maker of the trade.

Terminology: taker: Since User B will be filling and completing the trade created by User A, we'll refer to User B as the taker of the trade.

1// Setup the sample data...
2const CHAIN_ID = 1; // Chain 1 corresponds to Mainnet. Visit https://chainid.network/ for a complete list of chain ids
3
4const CRYPTOPUNK_420 = {
5  tokenAddress: '0xb47e3cd837ddf8e4c57f05d70ab865de6e193bbb', // CryptoPunk contract address
6  tokenId: '420', // Token Id of the CryptoPunk we want to swap
7  type: 'ERC721', // Must be one of 'ERC20', 'ERC721', or 'ERC1155'
8};
9
10const BORED_APE_69 = {
11  tokenAddress: '0xBC4CA0EdA7647A8aB7C2061c2E118A18a936f13D', // BAYC contract address
12  tokenId: '69', // Token Id of the BoredApe we want to swap
13  type: 'ERC721',
14};
15
16// User A Trade Data
17const walletAddressUserA = '0x1eeD19957E0a81AED9a80f09a3CCEaD83Ea6D86b';
18const assetsToSwapUserA = [CRYPTOPUNK_420];
19
20// User B Trade Data
21const walletAddressUserB = '0x44beA2b43600eE240AB6Cb90696048CeF32aBf1D';
22const assetsToSwapUserB = [BORED_APE_69];
23
24// ............................
25// Part 1 of the trade -- User A (the 'maker') initiates an order
26// ............................
27
28// Initiate the SDK for User A.
29// Pass the user's wallet signer (available via the user's wallet provider) to the Swap SDK
30const nftSwapSdk = new NftSwap(signerUserA, CHAIN_ID);
31
32// Check if we need to approve the NFT for swapping
33const approvalStatusForUserA = await nftSwapSdk.loadApprovalStatus(
34  assetsToSwapUserA[0],
35  walletAddressUserA
36);
37// If we do need to approve User A's CryptoPunk for swapping, let's do that now
38if (!approvalStatusForUserA.contractApproved) {
39  const approvalTx = await nftSwapSdk.approveTokenOrNftByAsset(
40    assetsToSwapUserA[0],
41    makerAddress
42  );
43  const approvalTxReceipt = await approvalTx.wait();
44  console.log(
45    `Approved ${assetsToSwapUserA[0].tokenAddress} contract to swap with 0x (txHash: ${approvalTxReceipt.transactionHash})`
46  );
47}
48
49// Create the order (Remember, User A initiates the trade, so User A creates the order)
50const order = nftSwapSdk.buildOrder(
51  assetsToSwapUserA,
52  assetsToSwapUserB,
53  walletAddressUserA
54);
55// Sign the order (User A signs since they are initiating the trade)
56const signedOrder = await nftSwapSdk.signOrder(order, takerAddress);
57// Part 1 Complete. User A is now done. Now we send the `signedOrder` to User B to complete the trade.
58
59// ............................
60// Part 2 of the trade -- User B (the 'taker') accepts and fills order from User A and completes trade
61// ............................
62// Initiate the SDK for User B.
63// Pass the user's wallet signer (available via the user's wallet provider) to the Swap SDK
64const nftSwapSdk = new NftSwap(signerUserB, CHAIN_ID);
65
66// Check if we need to approve the NFT for swapping
67const approvalStatusForUserB = await nftSwapSdk.loadApprovalStatus(
68  assetsToSwapUserB[0],
69  walletAddressUserB
70);
71// If we do need to approve NFT for swapping, let's do that now
72if (!approvalStatusForUserB.contractApproved) {
73  const approvalTx = await nftSwapSdk.approveTokenOrNftByAsset(
74    assetsToSwapUserB[0],
75    walletAddressUserB
76  );
77  const approvalTxReceipt = await approvalTx.wait();
78  console.log(
79    `Approved ${assetsToSwapUserB[0].tokenAddress} contract to swap with 0x. TxHash: ${approvalTxReceipt.transactionHash})`
80  );
81}
82// The final step is the taker (User B) submitting the order.
83// The taker approves the trade transaction and it will be submitted on the blockchain for settlement.
84// Once the transaction is confirmed, the trade will be settled and cannot be reversed.
85const fillTx = await nftSwapSdk.fillSignedOrder(signedOrder);
86const fillTxReceipt = await nftSwapSdk.awaitTransactionHash(fillTx);
87console.log(`🎉 🥳 Order filled. TxHash: ${fillTxReceipt.transactionHash}`);

Example 2: Swap bundles -- Bundle of mixed ERC721s and ERC20 <> Bundle of ERC20s

Here we show an example of what the swap library is capable of. We can even swap arbitrary ERC tokens in bundles. We call it a bundle when we have more than one item that a party will swap. Bundles can have different ERC types within the same bundle.

In other words, we can swap [ERC721, ERC1155, ERC20] <> [ERC721, ERC1155, ERC20]. There's really no limit to what we can swap.

More concrete example: We can swap [2 CryptoPunks and 1,000 DAI] for [420 WETH and 694,200 USDC]. In this case we'd be swapping an ERC721 and an ERC20 (Punk NFT and DAI, respectively) for two ERC20s (WETH and USDC).

This is just one example. In reality, you can swap as many things as you'd like, any way you'd like. The underlying 0x protocol is extremely flexible, and the NFT swap library abstracts all the complexity away so you don't have to worry about protocol nuances.

1// Setup the sample data for the swap...
2const CHAIN_ID = 1; // Mainnet
3
4const CRYPTOPUNK_420 = {
5  tokenAddress: '0xb47e3cd837ddf8e4c57f05d70ab865de6e193bbb',
6  tokenId: '420',
7  type: 'ERC721',
8};
9
10const CRYPTOPUNK_421 = {
11  tokenAddress: '0xb47e3cd837ddf8e4c57f05d70ab865de6e193bbb',
12  tokenId: '421',
13  type: 'ERC721',
14};
15
16const ONE_THOUSAND_DAI = {
17  tokenAddress: '0x6b175474e89094c44da98b954eedeac495271d0f', // DAI contract address
18  amount: '1000000000000000000000', // 1,000 DAI (DAI is 18 digits) -- amount to swap
19  type: 'ERC20',
20};
21
22const SIXTY_NINE_USDC = {
23  tokenAddress: '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48', // USDC contract address
24  amount: '69000000', // 69 USDC (USDC is 6 digits)
25  type: 'ERC20',
26};
27
28const FOUR_THOUSAND_TWENTY_WETH = {
29  tokenAddress: '0x6b175474e89094c44da98b954eedeac495271d0f', // WETH contract address
30  amount: '420000000000000000000', // 420 Wrapped-ETH (WETH is 18 digits)
31  type: 'ERC20',
32};
33
34// User A Trade Data
35const walletAddressUserA = '0x1eeD19957E0a81AED9a80f09a3CCEaD83Ea6D86b';
36const assetsToSwapUserA = [CRYPTOPUNK_420, CRYPTOPUNK_421, ONE_THOUSAND_DAI];
37
38// User B Trade Data
39const walletAddressUserB = '0x44beA2b43600eE240AB6Cb90696048CeF32aBf1D';
40const assetsToSwapUserB = [SIXTY_NINE_USDC, FOUR_THOUSAND_TWENTY_WETH];
41
42// ............................
43// Part 1 of the trade -- User A (the 'maker') initiates an order
44// ............................
45const nftSwapSdk = new NftSwap(signerUserA, CHAIN_ID);
46// Note: For brevity, we assume all assets are approved for swap in this example.
47// See previous example on how to approve an asset.
48
49const order = nftSwapSdk.buildOrder(
50  assetsToSwapUserA,
51  assetsToSwapUserB,
52  walletAddressUserA
53);
54const signedOrder = await nftSwapSdk.signOrder(order, takerAddress);
55
56// ............................
57// Part 2 of the trade -- User B (the 'taker') accepts and fills order from User A and completes trade
58// ............................
59const nftSwapSdk = new NftSwap(signerUserB, CHAIN_ID);
60
61const fillTx = await nftSwapSdk.fillSignedOrder(signedOrder);
62const fillTxReceipt = await nftSwapSdk.awaitTransactionHash(fillTx);
63console.log(`🎉 🥳 Order filled. TxHash: ${fillTxReceipt.transactionHash}`);
64
65// Not so bad, right? We can arbitrarily add more assets to our swap without introducing additional complexity!

Example 3: React Hooks + Swap SDK

In this example, we'll leverage the amazing web3-react React Hook library.

1const App = () => {
2  const { library, chainId } = useWeb3React();
3
4  const [swapSdk, setSwapSdk] = useState(null);
5  useEffect(() => {
6    const sdk = new NftSwap(library.getSigner(), chainId);
7    setSwapSdk(sdk);
8  }, [library, chainId])
9
10  // Use the SDK however you'd like in the app...
11  const handleClick = useCallback(() => {
12    if (!swapSdk) {
13      return;
14    }
15    swapSdk.buildOrder(...)
16  }, [swapSdk])
17
18  // ...
19}

FAQ

• Which ERCs does this library support

  • ERC20, ERC721, and ERC1155

• What EVM chains are currently supported?

  • Mainnet (1)
  • Kovan (42)
  • Rinkeby (4)
  • Polygon (137)
  • Binance Smart Chain (56)
  • Avalance (43114)

• What protocol does this library?

  • trader.xyz and trader.xyz libraries are powered by 0x v3 Protocol. This protocol is mature and lindy, and has been extremely well-audited.
  • Check out the 0x v3 spec here
  • Check out the 0x v3 Consensys audit here

• Are there any protocol fees to execute swaps?

  • No

• How do I get the user's signer object?

  • Generally you can get it from the user's web3 wallet provider, by something like this: provider.getSigner().
  • See this ethers guide (control-f for getSigner).
  • In web3-react you can do:
    • const { library } = useWeb3React();
    • const signer = library.getSigner();

• How do I store a SignedOrder

  • That's up to you. This library has no opinions on how to store orders. You can throw them in a centralized SQL database, save them to localstorage, use a decentralized messaging solution -- it's really up to you and your app concerns. You can even serialize and compress an order to fit in a tweet or shareable URL! 🤯

Roadmap

We're currently working on the following features for the next iteration of this library

• Persistent data store of orders (off-the-shelf storage in trader.xyz's public order storage server). Think of it as a public good
• Property-based orders
• Order validation
• Live order status
• Order event streaming via websockets

If you have feature requests, reach out in our Discord.

We want to make this library a one-stop shop for all your NFT swapping needs.

• We're also moving off of @0x/* libraries due to the payload size of these packages.