Building Community-First NFT Exchanges with the NFT Swap SDK

ETHCC 5 · July 2022 · 20:07

Jessica Lin presents the 0x-powered NFT Swap SDK for building community-focused exchanges. The speaker discusses ERC-20, ERC-721 and ERC-1155 swaps, marketplaces, over-the-counter trades and peer-to-peer exchange.

Speakers

Topics

From ETHCC 5, hosted by Ethereum France.

Transcript

all right good afternoon everyone um happy to have you join me on this cooler cooler tuesday now so welcome to uh welcome to the talk about building community first nft exchanges so i am jessica i'm the developer advocate at xerox labs um and before i start i'd actually like to get a lay of who's in the room so who who out there has heard of xerox oh wow okay good number um who has built with 0x either the api or the nft swapping capabilities nice and then anyone out there building nft related applications right now okay nice

um okay so then with that let me just get started with the agenda for today um so the first half of the talk will be a little bit more conceptual so i'll be covering um what xerox is how it works and then talking about the state of nft exchanging right now and then after that i'll dive more into detail the technical details of how the swapping sdk works okay so starting with the overview of xerox so at xerox we believe that eventually all forms of value will be tokenized on public blockchains and so our mission that we're driving towards is creating a tokenized world where all value can flow freely and what this means is we're creating

the public infrastructure that enables these tokenized assets to be more accessible more liquid and then enable the creation of new markets that couldn't have existed before so here's a bird's-eye view of the xerox ecosystem um so essentially there's two players so on your left are the makers and the right are the takers so in a single trade there's a market maker and so market makers are providing asset liquidity into the system so assets can be erc 20s 721s or 1155s these market makers are probably projects that you've heard about they're dexes amms professional market makers some examples are uniswap kyber curve and then takers on the other hand

are those projects that are picking them up picking up that sorry picking up the acid liquidity and these these projects can include exchanges wallets nft marketplaces some some example projects are metamask wallet polygon wallet brave and a number of others and what xerox does is we sit in between these two players and we provide an api a protocol and a set of developer tools that enable these parties to easily exchange and then we do this on a number of blockchains so ethereum and six other evm and l2 chains so how exactly is xerox

enabling this exchange so here's a high-level overview of our tech stack as i said before at the very bottom are the blockchains that we support on top of that is our protocol so this is a set of audited smart contracts that enable the exchange and then settle um enable the exchange and enable the settlement logic on top of that are the developer tools that we provide so we have the api um so this is specifically focused on erc20 exchanging so aggregating liquidity and surfacing the best price to the taker applications and then our nft swap sdk they'll be talking about and then oh yeah so here's a visual of that and then on top of that are the

applications that are leveraging the tooling underneath this okay so what i have here is a simplified diagram of how a trade works right so if we look at a single trade between a maker and a taker oh well this was supposed to be a gif but this is in a pdf so you don't actually see it running but essentially what's supposed to be happening is so the maker so off chain and on chain right so the maker off chain they create an order so this order is just a json object of a standard standard format it indicates the asset that they are committed to trading so they're committed to trading erc20s for example they uh this order is hash they sign it and then they pass it um they pass it

off chain so zrx we aggregate um this all these orders and then we surface the best price the taker so the taker on the other side finds this order that they want to fulfill and then they sign it and then they pass it on chain um to our smart contract the smart contract confirms that both parties have the assets and the trade is valid and then it atomically swaps the assets between the taker and maker's wallet and all this happens you know behind the scenes okay so that was an overview of the xerox capabilities and i want to talk now about the state of nft exchanging so i guess to go back a little bit so the idea of exchanging right now

especially in nfts i think is a real study of how humans exchange value um just how a study of how humans exchange value right so we're definitely at a very early stage of nft exchanging um and so i think some of the suggestions that i'll be posing right now um hopefully we'll help you think about how we can how we can build towards um build towards the future of exchange so essentially if we look at the existing current state of um nft exchange i would summarize it to two to two adjectives so there's limited interactivity and then we're often pushed to one size fits all marketplaces

so what this looks like in practice is a very uh what this looks like in practice is you know we can easily interact sorry we can easily read um nfts but there's not much interactivity with it so for example we can view a pfp on twitter we can view them in our wallet but if we ever want to exchange it we're pushed off to these other marketplaces so there's not a real native experience within the application and so these once i fit all marketplaces you know they they are great for what they do but i think there's definitely a lot more opportunities especially as um the the use cases where nfts evolve you know right now we use them um for kind of simplified simplified use cases but

imagine as the uses cases expand to say contracts housing leases um identity you know these these uh these large marketplaces aren't nuanced enough to really handle that exchange capability so if we look to the future what could what can we imagine perhaps there will be more in-app experiences and then the way that we exchange them are probably going to be more community-centric and more peer-to-peer and then the abilities that we can leverage from nfts such as properties the properties that come from them um there's definitely a lot that we can build off of that property-based ordering so let's take a look at in-app

experiences so in that first example with the twitter profile picture imagine the user clicks on it and they're able to directly trade um the nft with with their peer in chat so the example i have here is a project called trader and so they're actually um they were provided a grant by the xerox dao and they created this this opened open source sdk that enables the peer-to-peer trading of of nfts so essentially you pick your token you name your price and then you get a unique link that you can send off send off to anyone another one that we kind of have slowly seen gather more traction is community first marketplaces

so think of your favorite nft collection right now often you can go to the website and you can view the you can view the nfts but if you ever want to purchase them you're pushed off to these larger larger marketplaces again but imagine you had in um in-house marketplace sales directly within the community website imagine the customization that you could do imagine the sort of utility that you could customize there so this is just a little quote from from one of the product leads at xerox so to summarize essentially existing nft marketplaces and aggregators don't offer a differentiated experience

but native experiences can offer so much more so you know why go to bloomingdale's if you want to buy a boutique bag so yeah why would you go to bloomingdale's because then you get that customized experience there so it's a very curated experience that people are looking for and you know this this idea is not new so i want to kind of point back to think of craig craigslist right now craigslist back in the day they definitely proved the idea of this online bulletin board and it was it housed so many different um markets right but we started seeing specializations of markets coming up so housing we came up with airbnb use card sales carvana so you see we see this evolution to uh specialization

okay so kind of related to that i want to talk about property space orders so trader also has come up with this concept of property-based ordering so if we look at nft collections right now they have properties so you can filter on them but you can't really act on them so in this in this paradigm we're able to create orders based off of the properties themselves so that this means that every trait itself becomes a market so you're essentially creating derivatives on these markets um so you have this tubby cats project here you know tubby cats have mohawks some have bubble gum you can have very specific markets for each of these properties and here is just like a simplified ui of

what that could look like um traders building out this marketplace and so you know you create your order you can and then after you create your order uh trader will actually actively track um any matching orders across exchanges and so this creates essentially the first two-sided marketplace so you yeah um and then another thing that they've added on as well as you're able to share this specific offer with anyone so you get more peer-to-peer peer-to-peer exchange and if you do want to learn more about this i recommend checking out this interview that we did with the trader team um so we have a bi-weekly live stream with different projects that

build on xerx and i'll have a link to this at the very end with the qr code okay so we kind of have that conceptual overview laid let's take a look now at the technicals of how the swap capability swap sdk can help you know help you add this into your application okay so i just want to recap that we're talking about this specific library here so this is just a typescript library that makes it really easy to trade any nfts in just a few lines of code so you can add this into your mobile app your web app and so why build on xerox um so i mentioned before uh off chain listing um actually i know if i mentioned this but

off chain listing is actually free so that's something that makes real makes xerox unique um and quite flexible um and then there is the option if you want to submit orders on chain there are some projects that want to do that we give you the optionality um compared to other leading nft protocols uh we're up to 50 sorry 54 more gas deficient we also offer collection-based orders properties-based orders as well as providing instant royalties to creators so this means as you're creating your order you can put in fees and these these can be multiple fees to either the dow or the creator and then we are by default multi-chain okay so how does a trade work simplified

and we've kind of seen this before so i'll zoom through a little bit so the maker has a nft and then they're looking for some usdc for it so the maker creates an order um they're going to create um the order using the build order method and so they set the asset that they want so the asset that they have the asset that they want and then the wallet that they want to receive it in and this is a very simplified code example i'll dive more into um into this in a little bit all right so next the maker signs the order so we saw uh we talked about this a little bit earlier but maker signs the order to confirm that they have it and the taker when they find the order that they want they fill this order using the fill signed order method

and with that the swap is complete so it's very straightforward so just to summarize maker creates the order uh they sign it the taker fills it and then the order is submitted on chain for settlement um so you should kind of see this visual in your mind okay so to deep dive more into how the sdk works so really simple just yarn or npm install of this package and then setting up some configurations up front so supplying the provider the signer the chain id and then creating an instance of the nft swap v4 okay from there we see this same flow again um so i won't uh won't go too much more into detail so initially we set out

the constants um here i'm going to set it up set it up just directly but you're likely going to be receiving this in from your app so whether your web app or mobile app so user inputs the maker creates the order they sign it and then the taker fills it and then they submit it on ching okay so in those examples we saw we saw that the taker was essentially immediately available so what if there is not a taker immediately available well this is where the an order book comes in so the trader team that created this sdk they have a free publicly hosted order book

so for those of you who haven't used an order book before so what this means is think of essentially a book of orders right so makers come in they place their orders onto this book and then takers can come over and look through the book and if they find an order that they want they can pick that up so this allows for asynchronous asynchronous order creating and picking up so we see this really as a useful trait for auctions so you see this already say in openc so your bids are essentially someone making it someone putting up a bid offer and then you see you see it hosted in the order book here so kind of quick summary and deep in

code what it looks like is we are creating an offer um we're saying we uh we will offer up this amount of weed um to pick up this uh this nft um so this is uh this order is then signed and then it's placed onto the order book and then on the flip side an ask so essentially there's an order that's an nft that's sitting out there they're asking they're asking for a certain amount amount of weak to be received and the same process goes they sign the order and then they put this order on the order book and it's just waiting there for someone to pay that 15 15 eth to pick it up and so where that flows into the process

that we saw before um we just simply add it after the maker signs it so they create the order they sign it they post on the order book it sits and waits there until a taker comes by and picks it up um so we kind of saw this already in code so maker creates it sign it post it and then up at the top i wanted to say that when the taker is looking for the order um they can look through the order book for different options that they want so they can either search by search by a specific nft that they want or perhaps they search by a specific type of nft that they want or they search by the unique nonce of the aft

okay so we kind of talked about the basic fundamentals of how the nft swap works swap sdk works i'm going to talk about some additional features that are quite interesting um so i mentioned earlier with the royalties and fees so this is just added into the build order method so here the fees are paid by the paid by the buyer of the nft um they're paid in addition to uh the amount that is paid for um the nft um and you can also support multiple fees so this enables you know apps to be monetized so monetizing swapping capabilities you can um pay your dow for perhaps for for creating the product or creating the

nft pay the creator collection based orders so this allows users to bid on any nft from a specific collection so for example you i know you want a doodle but you don't care which doodle just any doodle and you can use the build collection based order method to easily do this um so you just set the asset that you're willing to pay and then the asset that you want to buy so the contract address of this collection and then which wallet address to receive it in all right so with that i just covered quite a bit so just to recap with the nft swap sdk portion uh we looked at a simple example of swapping

nft to erc20s and and this can be easily switched to erc20 to nfts we looked at how hosted order books work and then we covered some additional features and if you want to learn more about this i highly recommend taking a look at the nft swap sdk resources they go a lot more into detail beyond what i covered here and they have some very thorough examples in the documentation and so we can documentation so lastly here are some resources on the left-hand side are the nft sdk-specific resources um you can look at the docs um the the trader team um is very active in the discord channel so if

you have questions there about the product highly recommend checking that out on the right hand side if you have questions about the protocol there's some documentation as well as a blog post about the functionality that was added in we also have a discord channel and if you have technical technical questions um check out the stack exchange and then yeah we are a global community so yeah please feel free to reach out to us and then yeah lastly we are definitely hiring so please yeah please feel free to take a look and if you have questions yeah please reach out to me or if you would like the slide deck there's a qr code here so i guess i will pause and open it up for any questions if there's

any from the audience i guess with that we will wrap it up and yeah thanks for your time [Applause] you very much you