Hyper Cloud Arweave DataFi, 18 Jun 2022

Previous Meeting

Next Meeting

⏯

youtube image

►

From YouTube: Arweave DataFi Dynamic Atomic NFT Workshop

Description

In this workshop, we will build an NFT wrapped in a Permaweb Application, wrapped in a Warp Contract. This NFT will perform a naive implementation of tracking attention.

New to Arweave - checkout - What is Arweave? - https://youtu.be/dtG979u3kj4

Workshop Notes
https://permanotes.app/#/notes/G2FluFTvEPuA_3RFZpnePhF0lQMQJ5wx92aV3ZfLo0o

Github Repo
https://github.com/twilson63/datafi-dynamic-atomic-nfts

DataFi

DataFi is the concept of combining permanent Data + NFT (Non-Fungible Token) + Permaweb + SmartWeave Contracts + PST (Profit Sharing Token) in ways that provide decentralized finalization features for immutable storage in the Arweave community.

AtomicNFT

Atomic NFT is a standard where the media assets and the contract metadata are stored together immutably under a single unique identifier. -- https://atomicnft.com/en/General-definition-of-an-atomic-NFT/

BONUS:

Changes to deploy to Arweave Mainnet - https://youtu.be/FrVtzHsfD78

Check out previous workshops

- DataFi Atomic NFT Workshop - https://youtu.be/qu6SEjYrMA0
- DataFi Intro to DataFi - https://youtu.be/ak6bDOOW1H4

A

Hello welcome to the datafile dynamic atomic nft workshop. In this workshop we will build a atomic nft that is a digital asset. That's wrapped in a permaweb application, that's wrapped in a smartweave contract.

A

This will enable us to add dynamic functionality.

A

Within our digital asset and the dynamic functionality we'll be adding is attention tracking, so we'll every time a user views our asset, we will capture that unique, uh visitor account and and increment that count about this workshop. What you'll need to know to get the most out of it is a understanding of blockchains and nfts full stack skills with html css and javascript, and some r-weave concepts, data storage, smartweave contracts, the tools we'll be using is a visual studio code node.js get ar local, which is a devnet for the r-weave network.

A

Datafi is a concept of bringing together and bundling uh several technologies in the arwe ecosystem.

A

The r weave network is trustless, permissionless and composable, and the composability allows us to take concepts and combine them together in ways to fulfill uh very unique use cases that I believe, are only capable with a blockchain technology like r weave.

A

So we take concepts like the permaweb.

A

Smartweave atomic nfts and psts, which are profit sharing tokens, and if any of these.

A

Terminologies, don't make a lot of sense. I'll leave in the show notes a link to what is r weave that I go through each one of these, describing in a little bit more detail. What each one of the technologies are so check that out. If you don't understand uh what these uh buzz words mean.

A

um So, let's jump into the workshop, you know an nft is basically a digital asset and a token a a single ownership token that um is unique to that digital asset and one of the pain points of the you know. Kind of the the legacy nfts is that you store the token on a chain and the asset somewhere else, and if that somewhere else goes away, then the owner has the token, but they don't have the asset or that asset could have changed.

A

So using technologies like r-weave and atomic nfts allows you to make sure that the asset and the token or the contract are the same. The same transaction id, which makes it uh impossible to separate between the two um so.

A

With that said, we can look at this uh kind of visual of an um our week, transaction kind of encapsulates the digital asset, the contract, the state of the contract and uh attributes that make it easy to to find these things. So.

A

Which, therefore, we have an atomic nft now in this workshop, what we're going to do and I've already done step one is clone this repo. So this repo is kind of set up with some pre-working code, so we don't have to type everything from scratch um and it'll help us uh um a spell dynamic there to fix that, but it'll help us uh get started faster and and really focus on.

A

You know essentially creating a digital asset within a perma web app within a smartweave contract and making that you know functionality dynamic so clone that and what we'll do is go over to.

A

Our visual studio code- and we can see that we have two directories. We have an nft directory and we have a warp directory. The nft directory contains a svelt app and that app will actually compile down to a single html file.

A

So this app will consist of our logic as as well as um winston svg, which will be our our digital asset, and then we have the warp folder and the warp folder has our scripts to essentially uh mint the nft onto. Are we and so what? What it's set up to do now out of the box is just meant the um image.

A

So it's going to take the image which we did in a previous workshop and just met that with a smartweave contract, so it'll just take the digital asset and the smartweave contract and connect those together and that kind of is an atomic nft. Now we're going to build a dynamic atomic nft, so we're going to put in between it a perma web app and.

A

First step we want to do is install ar local, so we're going to go ahead and do that we're going to say npm, install.

A

Dash g for global and then ar local and that's going to install ar local for us and ar local will allow us to.

A

Write code and deploy everything to a devnet so that we don't have to spend ar to work through these concepts so we'll run ar local.

A

And now we'll just go ahead and test the current code and make sure everything works, so we will go into our nft folder.

A

We'll do yarn.

A

And then we'll do yarn build.

A

And let's go ahead and just double check in the disk folder and make sure we have winston.svg, we do cool and now, let's go into the warp folder.

A

And we're going to create a wallet so we'll run node wallet.js and that's going to create a wallet.json file for us to to use and it will go ahead and mint a hundred ar so we'll have enough ar in our devnet to um to deploy this uh atomic nft.

A

So now that we've got our wallet, we're going to um mint it so we'll say, node mint.js and before I do that, just to let you know so we can look at the contract and this is the same contract we used in the previous workshop. Where we have our handle function, we have a balance and we have a transfer function. So there's nothing different here. It's just the same contract and then in our mint same code as the previous workshop we're connecting to our weave and then we're grabbing our wallet and our contract.

A

We're deploying the contract or posting it to smartweave. Then we grab our nft our svg file and we deploy that to smartweave with an initial state for the atomic nft and then we print out the contract id. So that's that's what we're doing here.

A

So if we run mint, we get our id and we should be able to pop open.

A

Our r weave server right here and we should be able to take this contract id this transaction id, make sure I get all of it and just append it to this url and we should get our nft, which is cool, so we've confirmed that everything is is working from our um github checkout. Now it's one thing that you may have to do if you're in warp is just do a yarn before you run anything um and make sure that all your dependencies are are installed.

A

But with that we we've got our our setup right, so we we've completed our setup now. What we want to do is make this dynamic.

A

So, instead of pulling the svg, we want to pull the index.html and in order for us to do that, what we have to do is essentially store the index.html, the winston svg on um the perma web and get those ids and then we'll create a path manifest that contains both of those ids, and that will be what we add to our smart contract.

A

So the first thing we need to do is work in the mint file and we need to add you know: we've got our contract source, so we need to add the steps to create an image transaction for sbg file and create an index transaction and then modify the contract to change the data to a path, manifest object or json file.

A

So we're gonna create an image transaction.

A

Actually create a html transaction.

A

And then we're going to modify the data here to a path manifest file and then we'll be able to deploy, but instead of deploying just the digital asset, we'll deploy it wrapped in our perma web app.

A

So all of this uh should be fairly similar to um what you've done in the past, because we're going to use the r weave sdk and the first thing we need to do- is uh read in the image file. So we're going to say, fs, read, file sync and we're going to grab the image from nft.

A

Just then we we have it here. So that's kind of cool uh winston.sbg and utf 8. His svg file is text.

A

Now we're going to create a transaction so we'll say: const image, tx equals await rweave, va transaction and our data will be our image.

A

Now we need to add a tag. We just need to add one tag, so nhtx add tag content type, and this is image: svg, plus xml and that'll. Let our weave server know that this is an svg file. Now we just need to sign it with our wallet and then post. It so we'll say, await r weave transactions, sign image tx in our jwk file, our wallet file, we'll save away our weave transactions post image transaction and that will create our image transaction file.

A

Now we need to do our html file, so we'll do html fs read file, sync nft disk index.html,.

A

And that is text as well.

A

And then we'll create our html transaction, which will be await our weave.create transaction.

A

Data will be our html file and then we just need to set one um x so it'll be html, tx, add tag, content, type text, html.

A

And then we can.

A

Sign and post are transactions.

A

This would be html transaction.

A

A

So I know that we could create a little function to do this, but I'm kind of doing it in plain sight, so you can kind of see exactly what's going on here.

A

So we've taken our two files that we want to post on our week and now we can get rid of that and we want to change this data to be a path manifest, and I'm just going to do it in line here. So we can save time.

A

So with that, um and are we path manifest? We start with the manifest property, and that is, are we slash pass and we have a version of 0.1.0 and we have an index of path index.html and we have our paths as an object and the first one is index.html and it's going to have id.

A

um That'll, be our html tx dot id okay, then we're gonna have winston on svg, and it's going to have an id of.

A

Image transaction.id.

A

And that's our path manifest file, we're going to add as our source. Now we need to change a couple of these tags. First, we need to change our content type to be.

A

A

X, dot r wave manifest plus json.

A

So that's very important because the gateway server will recognize that and say. Oh, this is a perma web app. I need to serve it based on this path, manifest file, so I'm going to serve index.html as the root and then it'll be able to find our app we'll be able to find winston.svg off of that route. To embed that, so we got all that our state here we can change our content type here to text.htm.

A

And that will let any exchange that supports dynamic atomic nfts to know that this is an html nft and to show it in an iframe, and then you can get the dynamic functionality from that by listing in exchange, which is pretty cool. Okay, everything else is the same and we're gonna post it and all that. So I think we're good to go now before we do that.

A

We're gonna go over to our spelt app in the nfp folder and we're just going to go yarn build and make sure that we have an index.html and you can see the size is, is large. So we have like all of our code in inlined in the html file.

A

So you can see here.

A

We've got all of our code, just wonderful awesome and to verify that let's go ahead and just run it and we'll just use a little um web browser, so we'll do mpx, w3, dist and and that'll run this little web browser on port 3000, we'll open in browser, and we should see our nft and we've got this little div here, where we have number of unique, because so we haven't added that functionality yet, but that's kind of an indicator that we're running an atomic nft and with that indicator now it will tell us.

A

When we deploy this on ar local that we actually deployed the atomic nft and not just the standalone nft, so you'll notice that that div is not not there cool. So let's do this.

A

uh Cd into our um warp folder and then we're going to run node.

A

It's given us a new transaction identifier, so let's grab that and let's go ahead and just to be sure, let's go ahead and mine, our devnet and that'll make sure everything is processed, all the transactions and then let's go here and ar local still running so we're going to remove that identifier, atomic nfp to our dynamic atomic nft. So if we paste this identifier and run it, we get our dynamic atomic mt, but it's not finding our winston file.

A

So we did did something wrong here and let's see if we can't figure out what we did so hopefully this won't take long. But it's trying to find winston spg.

A

And it looks like it's routing right on the path. It's just looks like it's um not there for some reason,.

A

A

So when we ran it here, it was good. The svg is there and if we look at our source app js, it's just doing image source svg.

A

um I'm wondering if it's trying to go to the root.

A

Just real quick.

A

So what I'm doing is adding the base so that, like anything in the spelled app, goes to the relative path and not the root. That could possibly be the issue and let's go to warp.

A

A

Check this one.

A

Well, the good news is: is we're getting the html file? So that's that's really positive.

A

It's just that winston spg, maybe I misspelled it or something.

A

Let's look at our mint file and look here, we're building it and call it winston here then, on the path winston.sbg.

A

That's the spg that looks right.

A

Typos right they get you every time and let's try this again. Let's do this. One.

A

Hey awesome so, and we've got a couple of things we want to make sure so we installed r weave and um warp. So I want to make sure that we have warp and we change the title to winston dynamic and ft cool. So I think we're we're good to go here.

A

What we want to do next is modify our contract to add some logic to capture attention, so um we're gonna have well, let's, let's start at the mint js. So so the first thing with the mint js file is we want to change our state and we're just going to add a new property called visits, and it's going to be an empty array. This will be our attention tracking state. So the length of that array will be the number of unique visits.

A

Now we're going to go to our contract and we're going to add two functions: a read function and a write function. The read function will be visit where we visits where we return the number of visits and then the write function will be visit where we record the visit and we'll say function visits.

A

Of course, these functions are reducers, so they take state and action or an accumulator and a value, and then we'll have a function visit and the visits are going to return the results. So this was pretty easy, we'll say return.

A

Result, state dot, visits, dot, link and that's it that's our visits now our visit needs to actually increment it, and um what we want to do is pull up.

A

All right, so what we want to do is um check and see if the caller address is already in the array and then we do nothing. If it isn't, then we're going to append it to our array. So our visits array will be a list of addresses which will represent our unique visitors.

A

So we're going to say const caller we're going to pull that out of action and then we're going to just do a simple if statement and say if state dot visits that includes color and not so if it doesn't, then what we're going to do is change state dot visits to equal this new array where we restructure the current array visits, so we put all the current um items in there and then we include the caller.

A

So um now we just return state. So that's our functionality to capture visits on the smart contract and we'll deploy that contract with our new dynamic nft. So we've got the contract done and on the the mint side, we've got our visits done. So everything is set up here now we just need to add our dynamic functionality in the app.spelt file. So we're going to change this static, number of unique visits into a dynamic attention tracker and it will be very cool I think anyway, so you know the way we're going to do.

A

This is we're going to um make a call to the smart contract to get the number of visits so in this div.

A

I'll start, this way we'll add our presentation logic and then add our imperative logic to fill in that. So this div we're going to do an await on our total visit count and if it's not there, we're going to say loading just to give us an indicator and then once it is there we're going to get the visits.

A

Value and then we're going to say number of unique visits equals whatever number is in visits. So that's our presentation now in our script up here. We need to add some logic and the first thing was we're going to add a total.

A

Let total and it's going to all our visits function that we're going to build. So let's go ahead and build our visits function.

A

Now we've got our weave, we're going to need our warp module, which is a global module to act, access our contract and we need our contract identifier, which is the the window location of our nft. So if we do.

A

Window dot, location, the path name, we get our identifier, but we have this slash. So we just need to replace that slash.

A

So we can do that by just doing a simple regex replace so we'll get our contract that way, and then we need to use warp to initialize our smart contract, so we'll say: const contract equals.

A

A

Then we'll include r weave and then for our testing, we're going to use the r weave gateway so that'll point to our ar local and we'll hit build and then we'll select our contract.

A

Now, when we move this to mainnet, we'll get rid of this and this and we'll use the the redstone gateway all right. So we've got that now we can create our visits function so we'll say: function visits.

A

And we'll just say: return, contract, dot, view, state and function, we'll call our function visits and then that's going to return a result, so we'll say dot then result and we'll, let's pop off the result, property which will be the value so.

A

When we first load the app it's going to call that contract- and you know basically should get zero for the first time, because there's nothing in the array and return that and basically say the same thing, number of unique visitors is 0..

A

Now second thing is: is we need to capture attention so we're going to do that when svelt mounts the component, so we're going to bring in this on mount function?.

A

A

Spelt okay and then we're going to call home mount.

A

A

And we just need to create that do visit function so every time the component's mounted it's going to call this do visit function and it's going to be a sync to visit and we're going to use section storage to store our wallet address. So if the user has already visited, we don't want to count it. We only want to count unique visitors for a given session, so you know that way.

A

It'll be kind of you know unique visitors for a session um and that way, if I visit today and then visit tomorrow in a new session, that would be kind of two unique visits um and this is just to demonstrate functionality. So it's not.

A

It's a very naive implementation. I guess is what I'm saying just to kind of showcase: the capability of doing a dynamic atomic nft, okay. So the reason I said that is, that we want to check and see incessant storage.

A

If the address exists, if it exists, then we're going to skip it. If it doesn't we're going to say, let's get our wallet and here we're going to generate a wallet from our weave.

A

Then we're going to get an address.

A

Okay, now we're gonna save that in session storage,.

A

Okay and now we're going to um mint some ar so in this since we're running on devnet, we can just give this wallet some ar and now we're going to call the visit function in our contract, so we'll say a weight contract and we need to connect our wallet because the right interaction will require some ar now in or requires a wallet.

A

In the mainnet we would use bundle, interaction, so bundle interaction would be, would be free because it's smaller than 100 kilobytes, so we'll say, visit.

A

And then what we want to do in our development version is we want to mine this transaction so that it can be included in the evaluation of the number of visits, so we'll do mine.

A

And then, finally, we need to tell our ui that the visits have changed so we'll say: total equals visits like that.

A

Cool- and I can just say let lot.

A

And warp is imported, so we import that here with this script tag it brings in our warp all right. I think we've got everything: let's cd to the nft folder and do yarn build.

A

Pull and then let's cd back to warp and do nodement js.

A

Okay and now, let's pull that up.

A

A

Or is not defined? Okay, so I think I know what's happening there. So basically, this is taking too long to run so I'm gonna move this script tag.

A

Into index.html I was hoping I could leave it there, so it'd just be one file, but doesn't look like that's going to happen. So let's move it to index.html and let's put it in the header here, so that it loads before our script, loads.

A

And then I'll save that and we'll go back to nft new yarn build.

A

And then we'll go back to warp mode, mint, dot, js and.

A

Give it another shot.

A

Cool so we did get loading and we got a visit yay visit one now, if I refresh this so get loading get visit one, but I don't get visit 2 because of my session now. If I go to storage and session storage and delete this address.

A

Okay, now, if I refresh, I should get one and then two sweep so we've deployed a dynamic atomic nft, that's using its contract to essentially track unique visitors.

A

All right so now um that completes this workshop on the devnet, but I do want to know that I'll do a follow-up workshop, that that shows converting this to production, because there are some changes that that we need to make in in deployment production. So I'll do an additional 15-minute workshop of listen. So now that we've got our dynamic in nft, how do we mint it on mainnet all right? Thank you.