Metabolism Technical Summit - How to Build with ZORA

[Applause] [Music] welcome back to the metabolism summit so uh just as a quick intro clearly i'm not cathartic my name is jacob i'm also from the youth global team uh i know it could be emceeing for the rest of this summit today um and yeah i mean i'm gonna get out of the way because we have a really excited about coming up um with max from the zord team and and basically we're gonna be chatting about how to build thesaurus so obviously a lot of people over the next week or so for a weekend or so are going to be building i'm on top of zora so this is going to be the talk for you um so without further ado i'll introduce uh max from the team max feel free to unmute and share your video and i will get my screenshot out of the way in just a second how are you doing i'm good how's it going good to be here good yeah awesome well we're thankful to have you here um and like i said i'll stop sharing my screen now in case you have something to share um but otherwise the the floor is yours and uh yeah looking forward to your talk awesome um okay well sweet uh first quick shout out to just the whole youth global team they've like set up all this infrastructure for sharing all their videos and all the resources and plan a lot of the sort of logistical stuff with the hackathon so couldn't have done this without them um so yeah quick intro my name is max you might know me by um trunki.eth on twitter in this whole digital world we live in i am relatively new to coding and development in general um quick context i graduated two years ago was working in the renewable energy industry long story short ended up quitting my job about six months ago to just dive full into full stack web 3 development i'd never coded before so i had to do the whole thing learning html css javascript react solidity graph all that stuff um ended up interacting with the zora team along the way building some cool projects and then just started as a community developer advocate adzor about three four weeks ago so uh my position is all about building out integrations and making it more easy for people to interact with the various pieces of the zora tool kit in general um so yeah let me get started getting into this stuff i have a screen over here with some notes just in case you see me peeping over there all right here we go so i just wanted to start off with this and i know jacob just gave this talk about hyperstructures essay but just so to sort of give you an idea of like my context on the type of stuff i'm doing um this line right here um taking a protocol for his building approach focusing on develop developer adoption the the work i do in like the way i think my time at zora is while we are still currently in the like central small team that is focused on building out this protocol um and hyper structure in general i try to remind myself that this is actually like a much longer term thing and that the longer term vision of all this is the um sort of like dowification of everything you see so with that being the case developer adoption and making it as easy for people to add integrations add custom platforms um you know create value in the protocol by adding liquidity and just user interaction and attention to it is kind of like of the utmost importance so i try to you know keep that long view um because that's you know what we're really trying to build there so just wanted to say that as sort of like a context all the stuff i'm doing um so yeah now i'm going to go through the twitter thread that i posted yesterday it's pinned in my on my account it's also pinned on the xor engineering account um but this has just like every resource you could ever want um for getting started with building um on like the store api these are creator contracts and the protocol so i'm just going to go through all that um and explain sort of like how to best access each of the resources what you can do with all of them how to integrate stuff and yeah i'll end with a little live demo of getting something running on your own um site and then some q a so the first thing i want to do is show the zora starter kit repo which i just updated a little bit so that the code is is a little bit better it was pretty um a little janky before there's a lot of unused code and stuff um but this is a repo for interacting with azure api the creator toolkit and just the marketplace hyperstructure protocol it's pretty basic but it provides like that core functionality to each of those pieces and i would say my favorite actually let me get this open so you have a better visual um so this is what it is this is what if you fork this thing locally and open it this is what you would see it has this um sort of like api page which shows like a brief um sort of like what what could you do with the um the zdk and let me actually switch this to oh no i don't want to do that um what you could do with the zdk in indexer um that's what i wanted to do what you could do with the zdk and the indexer um what you could do with the create tools how to create your own custom create interface and how to create your own like kind of like protocol interaction so this just does something really basic fetches all the nfts in the user's wallet sorts them um from highest to lowest balance that gives you the top 10 here you can put in any collection you want so these are just you know so that's just like a very basic implementation of how to get started with bcdk and integrating with api you have this create interface which so this is kind of like um a different version of create.zora.com um where you can interact with our contract factories and deploy any contract whether it's like an edition style where the metadata or like the image is the same for each of the tokens or a different sort of like kind of more like the typically used in the 10k pfp thing but not um reserved for that in any way just as a source of reference where you would have different images or metadata for each piece you can use this deployer over here to let you create contracts like that and this is all at the zora starter kit and then the final piece is what i personally find the most useful out of this um is sort of like a protocol interaction page where with all of the different modules we have the ask module which has to be listed by entities for specific price offer module which lets you make kind of like make and receive unsolicited bids on nfts and then the auctions module which lets you host sort of on on chain auctions you have all of the different read and write calls that you would want um for each of those um modules of our marketplace protocol um which is really nice because i componentized all of them i don't know if that's a word um but so like for each of these little things you see so like if you open this up ask module rights this is like you can create an ask with any token um you throw in here you'd have to own it for it actually to go through um to create a new listing but you can like go into the source article go into the components go into the ask and then you can just grab this um you can just like copy paste this in or sorry what you would want to do is actually just um let me go back to this page protocol you can just put in the whole ask component um which we're calling ask write disclosure so you can just put ask write disclosure in and you would get this whole section of functionality now obviously you can take out bits and pieces you want you can change all the styling this is the whole starter kit is like the really basic like um like typescript reacts uh wag me rainbow kid css tailwind um so you can put in your own styling if you need um but you can also use the stuff that's already there so kind of just like a simple opinionated user like interface for getting started with any of this stuff and yeah just something really helpful you can fork and this will also this is like a very early version of it but it will grow over time as we add new functionality this will kind of just be like where you can always go to to find the latest or functionality with like reference implementations and docs to get started with all of it so um i was really excited to do this this was like the first thing i made um when i started sora and yeah we'll just keep going on from there so that is the zora starter kit um really helpful for if you're trying to just get started with some basic functionality for the hackathon start building out an app it leverages things like this nft components library so zora has a lot of kind of ui focused or react hook packages just for easy data manipulation or some like basic functionality that you would want out of um like when you're interacting with nfts there's a lot you do a lot of the same thing a lot of time like you want to get the user address you are like you want to get the owner address you want to get like maybe the current listing status you want to show the image or you want to um show the provenance history and there's things like that so things like nft components um which is this package right here it's in the arzor um github it's also installed it's like a dependency in the zora starter kit so pretty much like all of the zora packages are dependencies in the zoro starter kit so if you fork the or starter kit you'll automatically get access to all of these but there's one in particular there's one component in here that i i've used in like every project i've ever made um which is this nft preview component it it's really cool because the way it's set up is it can automatically respond to whatever media file you're passing in so you're passing in like a strict mp4 file or like a video file or um like an html file um because we do kind of like html rendering um it just automatically it has logic in it where it can just pick the mime type and then render whatever it is so right now this is actually showing the philip zine garden um of the lights project that i actually built before i start with or i did the front-end development um with their team and just as a little shout out to them but you can put in anything here and then you can interact with anything but yeah this nfd preview component super helpful so if you're looking for sort of just out of the box nft rendering that is a good place to start um the nfd components package is built on top of nft hooks which are kind of like more specific um like granular um hooks that like can get at different information you want so when you do the nfc components and if you insert nft preview it's kind of just grabbing like all the information that we're indexing about in nft or all the relevant information for like rendering it and like rendering some of its like history but you don't necessarily always need that like maybe you just want to grab the ipfs link or whatever the metadata url path is because you want to put in your own custom rendering component you can use the nfd hooks package and hooks like the use nft hook specifically to just grab like specific um pieces of information that you want so this is the repo for that again it's a dependency in the zoro starter kit so if you download that you're already there or you can just install this right away and then you can use this to just fetch like i said kind of just like more specific information um it's similar ish to the zdk i got this question the other day where they're both providing just like abstractions of interacting um and grabbing different information about nfts i'd say the zdk has like way more and i'll get into that but like way more information and accessibility of like other just like on-chain data and off-chain data um but this is more for like getting stuff for using nfts in microwebsite so this is really cool um the use nft hook specifically is really nice and then other interesting stuff is you can actually put in like a custom back-end solution like let's say you wanted to use a different api for whatever reason you can configure the back-end strategy that you're doing so these are the ones that are provided so like zbk pet strategy um this is like the old one but you can throw in like a graph back-end ether actor is something that one of our devs named ian built and then like you can put in the open city api if you wanted to for some reason um so yeah that is nft hooks really useful hook packages for interacting with nft data and again this is all in this big thread that i posted before um the hackathon it's pinned in my um account and it's also pinned on the zora engineering account so the next thing i'll do is a little deep dive into the zdk stuff and let me see exactly what i should i want to show here um so there's this repo which is really nice i mean this is where you can like fork again another dependency of the zoro starter kit um so it gets it gives you some like basic implementations of like how to get it started you sort of like get the api input going um and then sort of um like general things you can ask for and like it describes the settings um but i would actually say a better place to start is this where is this boom um here we go um this provides like full code references um of different doing different things so this is the docs or code there's like a zdk section and there's a lot of sort of like full reference implementations for like how to get started doing different things so you want to get aggregate attributes this is how you do it um like getting nfts for an address like this this would be not using the cdk that would be sending full graphql queries yourself so i guess that is the difference um the zdk abstracts having to know graphql and knowing how to like send those fetches and it just does everything for you so it's really nice it just passes you back sort of like objects of like like json data and then you just you know grab whatever bits and pieces you want so let me show you some some stuff you can actually build with the zdk because this is just like super cool so this is a nft historical data explorer provenance tracker whatever you want to call it um that daiwat built daiwat is a really cool dev he works at anchor and he will be doing a talk on how we built this actually um but this is fully using the zdk to fetch information and then obviously adding a ui to like render that information in an interesting way um but stuff like this where like let's see let's see if we can find mine yeah okay so this is mine really easy super fast um you know like you just saw how quickly that just re-rendered when i put in the new token id um so there's stuff like this that you can build and i'll show just actually we showed the code example already so that's fine and i'll show this as well so what the zdk is actually doing is it's abstracting those graphql queries i explained and if you want to sort of like test queries first to see what the returns will be before you like implement a ddk strategy you can use this playground.api.

com tool to like build out any of these queries that you want so like for price nft under account like there's all of these options um for stuff you can do so this is a good way it's like okay i want to implement the zdk let me test out some queries let me see exactly what i'm asking for and then let me see if i can implement that with the zdk most things you can put just directly there will just be like straight zdk hooks you can do um more complicated queries you will have to implement with graphql um but if you have questions with there you can always like reach out um to us so is that everything i want to talk about the zdk um oh no there's a couple more things the zdk and just like the api indexer is like really cool in general because it just like unlocks so much ability um in terms of you can just now fetch almost any information about anything that you could ever want so um in terms of like anything related to like erc721s so yeah this is a list this is also in the twitter thread everything i'm telling you by the way is in that twitter thread so this is kind of me just like giving you a map to where you can start um if you're looking for ideas or looking for help building certain things so this is a link to all of the hackathon submissions from the last hackathon if you have if you need sort of inspiration for what to build don't go here a ton of stuff this is really good and then i'll just drop a couple pieces of you call alpha maybe a little bit um ring b test net indexing is now live as of like last night or early this morning um and it should be picking up all new erc 721s deployed um so if you are deploying new collections um using the rinkby drop contracts by either using testnet.createthatzor.com or using like that starter kit interface i showed you you should now be able to um open up a ring fee so actually let's do a live check networks chain main net oh look at that that's so cool okay so we have rinky going um that's awesome so that is cool that's a new thing that the indexer is doing and another new thing is that v3 auction event indexing is also live so up until now the only xor market module that we've been indexing is the v3 ask module which is for buying and selling at like specific prices but now we've got auctions going so just another another a couple things that are new to the api indexer and we'd love help testing um and finding problems with so if you want to do something cool related to those that'd be great and let us know if you run into any issues so that is the zdk for you um the drops contracts the drops contracts are are kind of like full contract factory architecture that currently are powering create.zoro.com which maybe you've seen before um they also power testnet the create.

zoro.com which is kind of like uh the wrinkly version of this so before you deploy stuff on mainnet you can use test.create.zora.com um they also power that thing i showed you before and the reason i'm showing you all these things is to show that these contracts can be used by anyone they're like fully permissionless you can just send in send in kind of like contract inputs um and you deploy like you get a new a fully new like nft contract out of it um that you own so xor doesn't own the contracts that you're producing out of our contract factory which is really cool um they're also extremely modular and extensible like just the way they're all set up i would encourage you to dig into kind of like the solidity on how this works but ian and jim are actually going to be doing kind of deep dives into all of this and like how you can make a lot of custom updates to them because what they seem maybe kind of limited if you don't actually understand the full architecture but actually the way they're set up you can make any nft collection with any attribute with any type of logic they're really interesting so i will leave it at that and i'll let them talk more about that after um let's go when did i start i started at 115 okay here we go i need to speed up a little bit so we got the v3 protocol um this is where you can find all the solidity for our um the v3 marketplace modules which are asks offers and auctions that is what you can interact with here reference implementations here and this is if you actually want to like dig to the contracts um they are right here and i would also just call out that in this tweet thread i put a link to the deployment um the list of like deployments of everything so like if you're trying to find like oh what is the erc721 transfer helper address on mainnet boom like there you go so this is really helpful if you're trying to integrate some of the protocol um all right next thing is the finder's fee finder app and let me clean up some tabs before this gets too crazy so this is an app that provides a reference for integrating a finder's fee so if you're not familiar with the designer c it's kind of it's an expansive incentive um that is core piece of a hyper structure that jacob talked about that incentivizes um curation using the marketplace so let's say you put up an nft for sale you listed at a certain price and you say hey i'll give someone five percent of that final sale if you can match me with a buyer so that's great but and actually in order to make that useful you need interfaces that are surfacing that functionality so the finder speed finder is one of them this is currently indexing every active listing on the v3 like version 1.

1 asks module um it's every active listing that has a finder speed greater than zero so you can go through like everything like you can see like there's tons of different stuff and then what you can do and this is what's so cool about it is you can create share and if you create share it generates this like custom link and that you see down here it says curated by um curated by and then that's my address so if someone buys i can send this link to someone and then if someone buys this nft using my link i automatically receive the finder's fee it gets passed in um in the contract call to my address and then i receive that fee so this is a basic but i think like important thing that can be expanded upon um to sort of make more use of the finder's fee in general um because i think that's sort of an underutilized aspect of the protocol um in current situation um because it requires a lot of curation and like community outreach and like people being bought into using your platform and others you know so it's not actually that easy to set up like drive a lot of liquidity um and like attention towards it um open call for requests on this let me show the repo there's a lot of stuff that this could become better currently it's only doing ask modules but like i said it is now we are now indexing the reserve module the reserve there's a reserve auction finders ethe module which allows you to do finders fee with reserve auctions so i'd love to get those added in it also um uses the old indexer i haven't transferred it over because i made this before i joined zora um which is bad so if anyone wants to add anything add in the new indexing strategy like moving over to new index or adding reserve auctions i personally think that would be a great um hackathon sort of like like if you're looking for a topic or something to build make this way better make the ui cooler and everything um i would appreciate it um but also i think you know it's just this is currently one of the better references in terms of how to you know integrate finder sheets and like incentivize creation and stuff so enough of that um that is cool but i want to show something that um one of our residents community engineer technologists people named dain built which is this template zora mint house which lets you kind of insert any active edition or like collection using the zora contracts because they all use the same underlying api and mints on them so this is amazing if you're trying to set up like a your own minting interface for people this is a great place to start um you can spin it up really easily um as here there's like a nice whole getting started thing um so this is really cool and it currently like while it's currently set up to only min like ur to interface perfectly with all the zoro additions you can obviously change the minting strategy um change like the target apis and stuff like that um but also just like great ui great interface um for building stuff which is if you're not like a front-end designer or like a front-end developer then having all the stuff provided out of the box can be really useful like for myself um so that's that um another thing is again just want to call out all of this stuff is in this thread so i just am trying to highlight all of these things so that if you need templates references you're curious on how to do certain things this thread can i'm adding to it over time as we get new submissions but this thread can be a place to get everything and i think my talk is my talk done in five minutes well it is okay um i'm just gonna get through these last few things then so this is a marketplace example um built fully on the zora protocol by my friend javier down in buenos aires this is a place where unlike the previous example i just saw dane's thing which is like a mint house this is a i would call it like a buy now house or just like a secondary marketplace for buying and selling nfts um for a specific price using the zora protocol so you can see this is like super clean ui it's a really simple repo too so it's actually like very good for navigating if you're like a kind of new in the into development you can just like fork this pretty quickly um and then get going change all the ui and now you just have like a custom marketplace change the cost change the nft collection that you want everything to be indexing and then boom so another great place if you're trying to build your own interface and the last thing i'll just call out are some of these um partner dev tools that we got in recently so did we have a ton of really cool partners building stuff um and doing presentations that you'll continue to hear more about sporesdow um just dropped the sports kit which is a repo for integrating spores it's kind of like a it's really interesting it's like a music remixing um like like on chain music remixing royalty sending just like contracts plus ui plus interesting ways to actually like save that metadata to ipfs and then like like sustain that so you can always access it so this is a really cool thing if you're interested in building kind of um in that music category that's one of the core categories of the hackathon similarly spin amp just put out their kind of spin what did they call it the spin-up sdk so easy ways to integrating with their api their indexer hooks for getting playlists and stuff like that so would also point you there if you're trying to build things ready to play listing or just like indexing music or adding curation and the also noon noom network uh they're kind of like the open source version they're the open source like data focus of hi-fi labs and they have a ton of stuff related to metadata and indexing as well that is really cool all open source so if you if you're interested in getting involved in music metadata i would hop in there um and then i want to call out this because if there's anything that gets built during this hackathon this is what i want to see built which is this app called eathpass i'm not going to run the live demo right now but if you open it and go here it's pretty much just like the best way i've ever seen for it renders all it like grabs all the entities in your wallet and it lets you generate an apple wallet or a google pass in like 30 seconds like i swear go to this website try this demo you can get a fully functional like nft pass as their nft like apple wallet google wall pass in your on your phone like super quickly and then eat pass has a docs and like an sdk to integrate with to actually like build a marketplace on top of that and allows for like authenticating in person so i would love to see a full stack just um marketplace built on this um because it's like that that's to me still feels like it's missing like yes there's people doing ticketing but why isn't there like an open source thing where you're just like throwing your contract address and boom now you can just have that mark you know like a secondary marketplace for buying and selling tickets that then people can download and use in person like right there like with the east pass and with zora and the indexer you can do all of that so kind of just like a call for that and i called for someone to build that because i just want that personally um and that i think i'm at 30 minutes i was going to show a demo for how to fork the starter kit locally um but i don't think i had that so let me like pause for a second um i'm gonna stop sharing and mute myself jacob what is good should i do i stop now if i did i just go over or what's the deal no you're right on schedule so uh i mean i think it's we can definitely pause here if it's a good natural place to pause uh we haven't even ian ready to go but um yeah that was that was awesome it was a quick overview i shared the link to the tweet in the global chat as well on global web tv so if you're looking for the tweet that's where to find it um yeah i think that was an awesome overview i think i think we covered like as much as uh as i think you possibly could honestly yeah yeah that was that was the whole thread and i'll be adding to that thread over time also if you've built stuff with zora before i know there's all of you people from the previous hackathon probably on this call and you build cool stuff go to that thread and drop it below because like that's just a place ideally where anyone in this hackathon and in the future can just like okay i'm trying to start building on zora where do i start here's all the resources go crazy so please if you've built cool stuff before share your share your knowledge share your resources and that's right as well awesome very cool okay well thank you max i appreciate that um of course everybody is watching this i know that was a lot to cover it's gonna it's already recorded so it's gonna be available afterwards as well and we'll put it right on the prize page um for a lot of the partners that um axel's mentioning at the the end as well they're also on that prize page so just edibleism.ufl.com prizes and you'll see all those resources there as well but again the thread also has all of that so amazing okay cool well thank you so much max you