Filecoin Hackathon Presentations, 15 Jan 2022

Previous Meeting

⏯

youtube image

►

From YouTube: IPFS: IPFS/Filecoin NFT Starter Pack: Immutable NFT Storage & DApp Deployment

Description

Join Ally Haire for her workshop, "IPFS: IPFS/Filecoin NFT Starter Pack: Immutable NFT Storage & DApp Deployment," part of NFTHack 2022, a virtual collective of passionate creatives and developers gathered for a weekend-long NFT-focused hackathon and summit, Jan. 14-16, 2022.

----------------------------------------------------

Follow us: https://twitter.com/ETHGlobal
Check us out: https://ethglobal.com
Email us at: hello@ethglobal.com

A

Afternoon, where you are excited for you to join us here too,.

A

Awesome all right, if you are just joining us right now, we are ready to go. um Thank you. uh First of all, thank you to everyone joining us right now and thank you to ali and discordian ali is a developer advocate at filecoin, and I will let her take it from here. She's got an excellent session for you tonight. We will be taking questions at the end um or actually, no, I think, during, um and there will be some moderation so post your questions in the chat and we'll we'll take it from there. Thank you.

B

Awesome, thank you so much uh g'day, uh I'm australian, so g'day uh good! It's morning here still good morning, saturday morning, uh good afternoon evening night, everyone wherever you are um thank you for tuning in today, uh wherever you are across the globe, give you a shout out in the chat. Let me know where you're tuning in from I'd love to hear uh who's here.

B

uh I'm super excited to be here so massive shout out to eth global for organizing and running so many amazing events throughout the year for us all to participate in and learn from, uh and we've heard some amazing speakers so far on this lineup so totally not intimidated at all.

B

This is my first talk as a freshly minted uh developer advocate here at filecoin, um not intimidated at all, um like my pun, uh so I'm ally- uh you may remember me from such films that just kidding just kidding, uh I'm not in any films, uh but I do have a podcast. um I do run some iot meetups here in australia and I'm a lover of a web 3, blockchain and open source, obviously um and tech for good. I also used to run a uh uh takeaway uh sorry a coffee shop as well.

B

So if you want to know how to make a good coffee, uh coffee, I'm your girl um and I'm a dog lover, so that answers the age-old question of whether cats or dogs um no need to dwell on that all night today.

B

um But today I wanted to chat with you about nft storage um and about storing our metadata securely, uh persistently and immutably, um and also about how to deploy a front-end react app um and I've created a little demo for you uh in a decentralized way on an ipfs-based um kind of devops platform.

B

um So this is the time stamps for for the agenda. The too long didn't read. If you want to skip ahead, we can't it's a live stream right now, but in future for those watching.

B

uh So I briefed too long didn't read on ipfs and filecoin why you need ipfs filecoin or something similar for nfts, um the dev, tooling ecosystem, that's available for ipfs and filecoin, and it's growing all the time, which is amazing, um our dap architecture, so the demo that I've made and then I'm going to go into the code and show you exactly how to use nft.storage for creating the json metadata to save.

B

In your nft token, and then I'm also going to show you how to deploy our front-end react app uh with fleeq, so that devops platform that I was talking about before I've also got a few projects at the end there. To give you some inspiration uh for your hacking this weekend.

B

um So uh nfts are a massive story. uh This year, there's a heap of use cases yet to come, and a lot of these use cases uh are down to the properties that are found in non-fungible tokens. So obviously non-fungibility is one of them, so it's immutability unless you contract it, in uh coded in, I should say their uniqueness, their verifiable providence, their ability to interact with other nfts. As I mentioned, you can build so many things for them.

B

There's so many cool use cases out there and I'd love to hear some of the projects that you've seen around that are unique or really interesting um that you really love at the moment that are using this kind of nft uh contract uh base. uh Just let us know in the chat there, that'd be that'd, be awesome.

B

I'm gonna have a look at them all later for sure, uh but some of the use cases are, for example, gaming assets, but voting and governance rights, tickets, certifications, patents, imex ibm and uh we're using nfts for patents now well ibm is using nfts for patents, now um there's art and music and video industries that are built up around it. Obviously, metaverse nfts, um I'm an old second life user.

B

So um I love that now that you can verify what you've created uh using nft's awesome awesome use cases around there so looking forward to seeing what projects you build this weekend as well, um so the too long didn't read on ipfs and bilecoin. Basically, ipfs is uh content addressing it uses, content uh identifiers to create cryptographic, hashes that then puts into our merkle tree and then allows peer-to-peer data transfer, retrieval and storage. uh So this is important because it's built specifically for web3. It gives your data a unique fingerprint.

B

Basically, so whenever you go to retrieve that data using the content id you get that exact same data back and yes, you can update your ids much like you kind of would with a git commit, but the big, the the issue with ipfs and while well, not the issue, but why filecoin exists is because ipfs is basically a peer-to-peer protocol. It relies on people running their own nodes, uh running their own servers. um You know being altruistic about sharing and transferring and retrieving uh data.

B

um So far coin is built on top of this ipfs uh protocol for web3 uh in order to ensure persistent data, so it uses crypto economic um incentivizers to you know, have have anyone in the world basically store your data or on mars, which is why it's called interplanetary file system um to store your data and and then you know, give some incentives to retrieve that for them and it checks that they're always keeping that data.

B

So you can ensure that your data is stored persistently for as long as your file coin deal lasts and it's also super cheap. So um it's unsensible or sensitive ship resistant and verifiable.

B

If you do want a deeper understanding on ipfs and filecoin, though I suggest you check out uh michelle lee's chat there on intro to ipfs and filecoin. She does a great job on explaining like the protocols and how they're different and how they work so check that one out, uh if you want to hear more again by f thanks, that's um so yeah, just a little bit of uh so great uh we've got an understanding that filecoin's a decentralized persistent storage service and that ipfs is a protocol that uses uh cryptographic hashes to index files.

B

So you know this gives it a unique use case for nfts which we're going to come to and they really go hand in hand together and that's a little uh architecture diagram there to see. You know how you might uh use this to build up your project architecture.

B

So, as I kind of alluded to earlier, there is a bunch of dev tooling, that's getting built on these two protocols, as you can imagine, they're powerful protocols for web3 and there's been a lot of growth in this dev tooling uh ecosystem in the last year or so, um and maybe your project will be next. Even um so, you can ask us about grants and opportunities later as well, um so some of the uh dev tooling, that I really love is obviously far coin storage.

B

So today I'm going to take you through uh using nft dot storage, but there's other storage options like estuary, web3, storage, pinata, and I'm also going to take you through a deployment devops service called fleek, which is amazing, uh similar to vercell or netlify. Just does everything for you and off you go with a deployed app on the web, love it.

B

um So what's all this file coin and ipfs stuff got to do with nfts?

B

Well, um you need to be able to store uh data, that's off chain so for ethereum contracts in particular, I know there's some cheaper layer ones out there that are available, but it's still a good idea to use ipfs and filecoin, especially for when you start getting larger metadata. So if you want to store lots and lots of data, um it's really prohibitive to do that in a contract.

B

You need a fixed address, though, still for the content to live. So you want to make sure that that content is still immutable so which is the benefit of storing on a contract.

B

um So that's why we want to use ipfs to make sure that our you know our content is exactly the same as when we put it on there and then we need to store that content uh somewhere so that we can always retrieve it and persist it and that's where filecoin comes in, so you can really see uh how that works with nfts, which the whole idea of is to to make sure they're non-fungible to make sure they're unique. To give you know, identity or to give provenance of of an item.

B

uh So that's why it's important. We don't want to have the pool emoji that um maybe moxie created, although it was deliberate. I know if anyone's heard of moxie the signal creator and read his little article, that's come out. This is one way to resolve some of the problems that he maybe had with. This wasn't quite what he was talking about, but you get my gist anyway on to the demo. um So, let's build something so I've created a basic uh website here made out of react, as I said.

B

Did I say earlier, I think I said earlier: I've made a little react work website which I've deployed on fleek uh and I'm using nft storage um to create the ipfsc id and then store it on filecoin to persist that data and I've just got a little solidity contract that then mints my nfts and that's all I've said here. Basically, um so let's have a look at what it looks like.

B

So this is what it looks like and you can actually go to this website live and special treat, there's a hundred nfts here, so uh you can go and mint your own nft. It's only on the ringfield test net, though so uh make sure you're, not spending a real f on this. This is just a ring b test net um nft, but I would love to see uh you know. Maybe you enter some names. Please try not to break this. I haven't actually put too much error. Checking on this.

B

It's just a little demo, so you put a thousand word essay into the name field. I have no idea where that's gonna turn up on, but hey it'll definitely be unique, which is what we want right. um So I'll just show you how it works, for example. So um let's call my nft minty fresh and basically uh in here, I'm just using an svg uh to generate the image that I want for my nft and to make it um to make it unique.

B

Basically, so I'll put a name- and it's not quite unique- it's personalized though, and you can see what comes back- is an ipfs image link. So this is where I've already saved this using nft storage and I'll jump into the code in a second and show you that function. But I've already um saved this using ipf using nft.storage and I can retrieve it and I'm using brave browser, so I can retrieve it uh through an ipfs gateway in brave browser. It's integrated in brave browser, but other browsers you'd need a better link than this.

B

But here it is like our not quite minted yet nft, so it saved it. But I haven't approved your transaction, so it's not yet an nft. So I'm just going to approve that transaction. To call my contract and save that nft and then I'm also oh erwing, hello, someone's, beat me to creating one already awesome to see. uh People have jumped onto this website already and are creating their own love, it um so yeah and then I'm just retrieving my uh nfts from my contract.

B

So I keep a you know record of what nfts are being minted in this collection and then I'm retrieving them on my front end um and going through an ipfs gateway to display them. So let's take a look at how I've done that. um So this is my basic. uh This is.

C

B

Code, hopefully you can all see that well enough, I might be a bit too zoomed in if I do that, um so we can see from the file structure here. All I've done is create this starter kit, I'm using a create react app and I'm using hard hat for the solidity contracts.

B

I've put that all into uh a one folder, so you can run the mpx hard hard hat commands if you're familiar with them in this folder or you can run your npm install and npm start commands to devon if you're familiar with react uh in this folder as well, there's more uh info on the github so I'll give you the github at the end of this as well, and you can go and have a play around with it probably fix it up, send in a pr fix up my uh dachshund and code um anyway.

B

uh So here's the basic solidity contract here, uh just a an erc, 721 um token implementation. All I'm doing is you know I.

B

The main thing in this contract really is uh the mint my nft, which I'm sending an ipfs uri to. um So that's the important part and that's where nft storage comes in. I've created a cid on ipfs, as I mentioned before, and um nft dot storage automatically creates far coin deal for me to persist that um storage json and that's what I pass in to create my new nft here. It's pretty much all for the contract, um a little solidity contract.

B

What we really want to look at um is nft storage, so nft storage uh on the front end is is just the same as any other package in react. You just need to npm install it. um You want to sign up if I can find here we go so you just want to sign up. I love this old school website, it's like being back in the 90s, I'm not I'm not that old. I can't remember them right.

B

Yeah, definitely am it's like being back in the 90s, though I love all these old school websites that are popping up and uh the uis around them, which is really cool, but basically all you do is log into nft storage or create a an account. You can use your github for that and it will store your files. So you can get an api key. Just by going to api keys in nft dot storage. You can see.

B

I've got one there already uh and I put that into my m file in because we don't want to send that dot m api key up to github.

B

So I put that in I get ignore m file, um which I read from the front end, but you can check out how I've done that as well there um so pretty easy just to get an api key while we're here at nft storage, you can also just upload them manually, so I can see that I've there's been a bunch of nft activity already, so you can also just uh upload a file manually if you just want to get an ipfs and filecoin deal without going through the code.

B

Obviously, though we we want to create a front end and have this work um through code, so um yeah, I uh import the library from nps and let's have a look at how we actually use that if I can find the transaction.

B

So all I'm doing here is creating the nft data, so create the ipfs cid of the json data and save that persistently to filecoin.

B

So when a user inputs their name as you saw, um I uh go and create this nft data and I'm using an svg uh for the image and just appending that name as a text tag to the svg and then all I need to do is uh set up my uh client. Sorry. Where is it here? It is here it is uh so set up my nft dot, storage, client.

B

uh So that's how we talk to nft.storage through our react code and I've done that with the api key that I showed you before and then all I need to do is is call client.store. This is super simple. If you've got uh any javascript knowledge, this will all be very easy to use. So I'm just going to store basically a json file that contains the name of uh this.

B

This metadata that I'm saving um file, coin nft hack, 2022, a description of it uh and then the image itself, which is a which is going to be a file, an svg file. So here's the data for that file. uh Sorry, here's the data in the array for that file off a base svg with the name.

B

Then I um and naming it. So that's the name of the file- and this is the type of the file again. You could save any kind of image here, any kind of file, any kind of mime type, video audio anything you like really- and you can add any extra traits that you want for your nft here or in the contract. Whichever way you want to do it, I've added them here so awesomeness 100 for everyone, uh because uh you're all here and watching this speech and and well watching this prezzo and hacking away.

B

So we're all awesome, 100 I'd, say, um and then you get back uh your metadata from this and that this is really all there is to it. um You'll just get back that that metadata from the file um I'll see if I can actually find it yep. Here's here's a kind of example from localhost here. If you can see it might be a bit small, um so the metadata is saved.

B

We get this ip nft, which is our cid link, our url to it, which we can go to through our brave brave browser, because it's got an inbuilt, um ipfs, http gateway and then here's our data itself. So amazing, pretty simple right!

B

um That's that's!

B

Really! All there is to it. We can also um yeah. I also create the image view. So, basically, uh in this little helper function, all I'm doing is appending the ipfs uh gateway data. So I can read it on any browser and that's all that that does there and then I'm going to ask the contract to mint. The excuse me nft with that uh url that came back so that this cid um yep ask contract to mean nft, I'm using the ethers library to interact with this or using the ethereum.

B

Sorry, that's injected from my metamask connection, um calling that contract um function that I set up the min nft and then we it means amazing. That's all we need to do for that uh and if we do want to, then you can see that I'm retrieving the last five images. Oh my gosh, so many nfts now they're gonna sell out. Maybe I didn't make a big enough collection just kidding uh so luca tony shout out to you guys at texas, nft shawn, I like it uh to pangaks.f.

B

Oh, I even got the ans name. Awesome love it thanks for joining in everyone uh yeah, so you can. Where I was. I got got got sidetracked there, but where I was is that uh to create this little image view here, I'm just calling my contract, uh I'm getting that array of that collection are back and then, when I do retrieve it, so you can see here I'm kind of here's, my data collection, I've got it from my contract. uh This little function here is nothing special.

B

I just only want to return the five most recent minted, um I'm not showing them all. That's all! um So that's all that little function does is is is get the five most recent uh nfts and then I'm creating that image. Url so by fetching sorry fetching uh that data using an ipfs gateway link, so I'm creating that ipfs gateway link, uh and I think maybe discord in you can maybe throw up.

B

um I might have one here actually there's a public gateway checker, so you can have a look at uh what some of some of the gateways are, that you can use. So if your has one, for example, um fleek has their own textile there's heaps of gateways you can use, um so you could even make a verifier to see which gateway's up and which isn't and then route it that way if you wanted to, um but yeah anyway, I digress. So I uh wait uh for that.

B

Ipfs uh fetch to come back uh and then display the data, and that's that's pretty much all there is to this uh little here's my little fetch collection, um nothing special about that. Just calling the contract data um yeah and that's really all there is to using nft storage um to use ipfs and um bilecoin uh for your nfts.

B

uh So hopefully that's a little bit helpful. uh The next thing I wanted to show you is uh how to deploy this site uh with flake and again it's just as easy. So uh you can go to fleek.co and again you can just sign up or sign in with github, which is what I've done.

B

uh This is the hosted website at the moment, but you should land on a page like this and you can just add your new site connect it with github, so just connect, whichever repo you want. So I really need to clean up my github repos. That's a bit of a mess, but I'm I'm not gonna, add one for now, so I've already got one connected there uh and then all you need to oops looks like I've been signed out. So it's always always the way.

B

But like uh basically like netlify or versel, um you add your environment variables in the settings. You can add your build commands in there. um The other cool thing about sleek is that you could also hook it up to your ans name. So if you wanted to deploy it through that, you can totally do that. I'm not sure what happened there.

B

Maybe might just oh here we go awesome. I love the little lightning bolt too. um It's a cool logo.

B

As I was saying, uh you can add all your settings, uh anything you want uh it and it'll deploy automatically when you commit to to that branch. The same way as netlify or versailles or any other kind of devops thing you've used, would do and super simple. um So that's what I really love this. It's it's fantastic and you can deploy it because it's deployed on ipfs is fully decentralizing your front-end app as well, which is something that we don't do.

B

I think enough of in web 3 yet, but maybe because the tooling wasn't quite there, but this one is definitely there. So all my environment variables, you can specify a docker image as well. There's site management um like I was saying you can deploy this um sorry, you can deploy, deploy this with a domain or an ens or lots of different things. So I really encourage you uh to check out flake uh for, if you're deploying any kind of front-end apps for your for your projects. um I think that's about it.

B

um I will answer some questions. Looks like I've got some. Maybe questions in the chat here. Apologies if I haven't been keeping up with them as well. um Demo, we've gone through awesome, um there's a heap of a great inspiration. So you know this is a hack, so uh there's a heap of a great inspiration um to build projects on ipfs and filecoin, so audience is using it.

B

uh That's the music project so like spotify, but on on web3 and rewarding artists appropriately uh live pier as well, who, I think, did a talk yesterday so shout out to them. They are really great partners of ours and really awesome people as well and developing just this super cool product which I love, um everyone check out live peer. If you haven't heard uh seen it before, though, you probably have there's also a cool project, uh storing new york city data uh on filecoin, so you can check out the blog post for that.

B

uh But the ultimate guide to some inspiration is probably joanne johann benes and sorry, if I said your name roger I'm blaming the australian accent, um this youtube are so many amazing projects in there really encourage you to go and uh have a look at that if you need uh some more inspiration for any of your projects as well.

B

um So look we've already minted these, so I don't need to tell you again, but if you haven't already feel free to go and mint one um there's some resources to take uh this to the next level. uh I think discordian's, probably posting a few things about that on in the chat here.

B

um I I know there's some questions, so maybe I might uh throw to them now as well, uh but yeah heaps of links here check out our grants and opportunities, there's also an eight thousand dollar prize pool for this nft hack. So I'm super looking forward to what you all create. um Let your imagination go wild and see what happens. I I you know. I can't wait.

C

B

Next time, and otherwise thank you and happy building, I'm developer ally. um Thank you. It meant a lot. uh Sorry, not sorry all righty, that's it from me. um I think we probably have some questions. Do we.

C

Yeah, if we do, I can read uh one question out: if we have time oh yeah um and if anyone has any other questions, you'd like ali to ask, please ask them now um but- uh and I know I'm going to pronounce this wrong and I'm sorry, but it's a dimitrij um how? How do you manage to automate the uri handling for each nft example? If you have 100 nfts, then you need to put the uri of each nft.

B

uh Yes, how do you automate that, so I I'm not I'm not exactly sure what the question is asking to be honest,.

C

uh I was hoping you would I I was introduced.

B

D

D

B

D

Dimitri yeah hi, so um basically, when you have like let's say you want a mint and you have a certain number of nfts like 100 nfts that can be minted right. um Each nft would get its own url.

B

Right, so, are you saying you to how do you automate calling that, from the front end contract from the front end of your of your dap, for example,.

D

No, no like, basically when you so first of all, you deploy nfts like in images and you get a if ipfs you write like the the identifier for each nft and now when somebody is minting, you need to connect the token id with the uri, so basically opencs knows which token points to which uri, because they're all like unique.

D

But when you have 100 nfts, you have 100 unique, uh uri keys, so you kind of have to put them automatically when you win and how it doesn't work.

B

uh So this is, this is more of an architecture, question of of how you would uh set that up and there's probably a number of different ways to go. I have to admit that I am probably not the best person to tell you what the kind of best practice is here, um but I will definitely uh get back to you on that one, um maybe uh also discording. Did you have a comment on how you would do that.

C

um Yeah, I guess I probably honestly best to ask like uh pan who made uh the flow wow tutorial in demo, um but I I guess I I just don't fully understand the problem. I guess because I I probably haven't worked enough uh with smart contracts in the blockchain.

B

C

B

I think so the problem is you've got you want to meet this whole collection all at once. How would you automate doing that? It really would just have to probably come from like a file or or something similar to that it looks like david's, got a few answers in the chat there too, and has a bit of knowledge on that. But I'd actually encourage you to ask that question in maybe our ipfs discord as well, there's definitely people that are working with much higher level nft projects than I just showed you.

B

That could definitely give you some best practices around that as well. So um definitely a great question that I am now going to have to go and find the answer to as well. So thank you for asking that.

D

Yeah, thank you for your answer. I will check out the discord.

B

B

Alrighty, I think.

B

Yeah and pan is definitely a great person to ask as well thanks for mentioning that discordian.

B

uh So I think, if that's uh everything is it luke.

B

So uh my my repo is free to use you can you can copy it? It's it's open publicly, do whatever you like with it. That's what I make these demos for I want to make it easy for you to use anything um and and build on it and build your own ideas into it. um So you know I'm not going to say it's perfect. I do kind of hack this together in a few days, so I hope you know, don't don't take it as the gospel of best practice, but there's definitely some great.

B

You know great way to get started, go ahead and use it.

A

Now that is the true spirit of nft hack right there. Thank you, ali. Thank you discordian for such a great session tonight. Thank you for everyone, who's joining us. Oh sorry morning. What am I saying? I know where you are in the world.

C

Excited to see everyone.

A

And we have another great day of hacking and content scheduled for you tomorrow, so hoping to see all of you again right back here, I guess online. What am I saying, um but it's going to be a great saturday. uh Thank you to everyone who joined us tonight. We are going to be ending the session here. uh Remember to follow up in the discord uh to continue the conversation. I highly recommend doing that and um yeah. That's it good.

D

B

Good afternoon.

A

And good night, thank you for.

B

Having me first, president,.