Connecting Smart Devices to Smart Contracts by Simone Romano and Giuseppe De Luca

an extremely low fees designed to support initially iot applications during the last year we worked still focusing on improving on the layer 1 blockchain which by the way I did not say it's a fully ethereum compatible even if it's been built from scratch we have been now building for one year a new protocol a layer 2 computational protocol that we call Web stream a web stream is a protocol that's based on a webassembly virtual machine for the computational part it's a modular architecture it it has integrated smart contract interaction integrated SQL data storage uh in the future also decentralized data storage and https and mqtt connectivity for smart devices in the real world and a nice UI admin interface so today we are anyway not going to forges on web on this protocol but if you are interested then dive deeper in with in web stream we have a nice real world event dedicated to it on March 3rd here is the address and the QR code this is a limited entrance and you will find a lot of demos presentations from great projects and everything is about connecting web tree with real word with the physical world scan the QR code if you want to register and attend the event this is for example one demo that uses web stream that you will see during the event where you where we like demoed how you can build a power meter that can send energy consumption data to the web stream layer 2 protocol that will then compute proofs for low energy power that will then trigger rewards on the layer 1 blockchain so this is just a slide that shows um how web stream is where web the web machine protocol is located it's a layer 2 protocol and it's basically facilitating uh connecting data from the physical world and then Computing proves that then can be ingested inside smart contracts as I said we're not going to focus on this protocol that much but but we are going to focus on a trusted location API which is an application an application or a product that we built on top of the layer 2 protocol web stream to show how you can actually connect smart devices GPS location for your users if you are at the app developer how to connect this location data with your smart contract applications while preserving the privacy of the user and at the same time trusting that the location is tamper-proof so opening the door to many new type of applications ranging from I don't know scavenger hunts games or applications itinerary type of applications earning rewards for in-person attendance right or game five or uh yeah just location verification to limit or give access to special features into your devops or to to limit to gain access to uh specific levels of your games for example based on the location of the user or based on the itinerary of your user so as I said you can you should be able to easily follow along today because we also have this workshop on our developer portal uh so you should be able to copy paste the code like we do very easily otherwise you can do the same later so what you're gonna need anyway is of course your laptop uh you need git installed in your computer you need npm hopefully you already have these tools installed metamask of course you will need the IOP mobile which is the iotex official Mobile Wallet that is also cross blockchain so you can use it on any popular blockchain not only iotex um it's not not like mandatory for this but if you download it you will also be able to test the application and then possibly you need an account on the iotex developers portal uh to claim the test tokens that you need to run the workshop I will show you so um first let's maybe see on a live demo of what we are going to build today um Giuseppe you wanna why not I'm so glad I know what he's talking about because I'm having a hard time hearing but if you guys at any moment uh something is not clear you want to ask questions just uh feel free to and you know we'll be happy to answer them all right let's see what happens oh thank you [Music] cool uh so actually I'm gonna just uh go back is BS code open is BS code open is the BS code open already okay cool ah you're right the keyboard is different Simone is using the Italian keyboard zoom in please zoom in all right you're right you're right it's hard all right so I'm gonna do it through vs code yes [Music] can you zoom in a little bit s ah nice cool all right so uh basically uh we have this here um this is going to be the project that we're gonna look at later we have a front and web3 all I'm gonna do now is uh uh go and run the front end on my Local Host and then I'm gonna run it Shimano can you come here [Music] yeah I know all right cool so what we're gonna do now is um so this is basically what you will get at the beginning of the application and we haven't created any airdrops in general what we're going to do now is basically create an airdrop based on a location and we picked obviously the beetle Hub as our location for the duration of let's say Bill week and we're going to allow only people that signed in from this location to be able to claim their nfts and so that's basically what we're going to do now so uh what I'm gonna do is uh start creating an nft and uh I pre-checked the coordinates for bitter Hub and so that's what I'm gonna input and so this is going to be and then longitude is going to be cool so now for example as an airdrop Creator you can decide okay cool I want people in the barrel Hub to be able to claim this nft and let's say that we're gonna put maybe um a max distance of let's say 100 meters right so only people that were following this Workshop we're gonna pick up a date and let's say that we go from yesterday which was start a battle week until let's say uh next week before everything starts so and we're gonna create uh maybe you know five tokens for the lucky five people that will be able to claim this okay so next I'm gonna submit and this is going to then call the smart contract and create the airdrop and then we're going to wait a little bit and then we're going to refresh the page and uh have our airdrop okay this is how fast the itex blockchain is by the way uh yeah that's a good point I mean we are on chain right so we just created this and it only took a few seconds so that's a pretty pretty cool perk uh so for example what we have now it's this airdrop with these coordinates and obviously mine dude is just like a little you know little toy a little POC to show what we want to do here right so you're free to check out the code improve it as much as you want but basically the next step here would be to claim this nft so before I do that I need to check in my location using IOP wallet like I did before so since this is Simone's computer I think uh if you want to check in with iopay did you already put the location ah okay got it cool okay so uh what I basically did I'm gonna do it through my phone because I think it's better but basically what I did I signed in the location with my phone and that's how you guys can do it uh and then I'm uh let's see account not a question okay so I'm gonna connect this account okay cool nice so I connected my account I had previously signed in uh with the with my IOP wallet and I just mind you uh we have prepared this uh to be a little bit different so I was gonna do it from my computer so that's why I'm having a little bit of difficulties doing this but you know that's the beauty of going live right uh so hopefully we'll make it work um so I'm signed in with this account this is the account that I imported through my IOP through my phone and now I'm gonna try to get the proof for this nft here because I signed in from um uh from this location Okay so the next thing I'm going to do is ask for the API to say okay was this person here can you send me the proof and if so then allow me to claim the nft contract in case I forgot yeah so now it's it's telling me to claim my nft right so the the API basically responded with a positive proof saying yes this person was here I logged in like I said through my phone now I'm able to claim the nft so I'll go ahead and now call the smart contract and I think it'll take uh maybe a few more seconds uh before I actually uh end up claiming the NFD so once the uh claim has been successful I could basically go to my airdrops page and see that I've actually indeed claimed this airdrop and then obviously there'll be one less airdrop allow you know for people to claim and obviously this can be anything so it can be any sort of valuable perk that uh maybe a Creator wants to create maybe a musician or maybe like Simone was saying maybe um Gamers or nfts or any sort of metabirds that you want to attach to a location and again location is just one example and that's what we picked for today because we thought it was pretty cool so this is the final working version of the app which is basically uh what we're going to build today in the repo that we're going to share they're going to be two branches there is a main branch which is this and there is also the starting template which is basically what we're gonna start with and that's what Simone is basically going to start doing next so I'll take my mic I'll shut up and I'll give it back to Simone thank you actually yeah maybe I can still show you what you said but did on his phone um let me see so this is the IOP mobile mobile wallet I'm running it on a desktop that that's what you will see on your smartphone so this is where what your users will use to communicate their location to the location API and uh yeah actually um yeah can I show your private key to the people one more time can I show your private key to this yeah yeah you guys can all take my private key don't worry about it uh okay so let me uh go to the settings I will let manage wallets import wallet and I'm importing your private key for everybody to steal your test tokens right now there was a surprise that we were hinting at earlier the surprises take everything I have in my wallet and Just Go With It that's anyway uh Simon I think the screen uh I know that's the private key ah no it's okay and you never know okay fine full of haters here should have not disconnected okay here we go here we go cool okay so I've imported the wallet yeah that's mine that's yours okay uh and so basically inside the settings of the wallet by the way in IOP you can switch to any other blockchain you can use it on any other uh popular blockchain that you want not only iotex so um if I go to the settings there is a web stream and there is a geolocation plugin here that's off so that's where you actually register your device with the trusted location API yeah I love it that's what your users will do to somehow join your your D app with their trusted location okay enable okay okay so basically here you can enable either only once and then disable it if you want just to send your trusted location once or you just can leave it enabled and then set up like the interval how often you want the location to be sent anyway this location is not going to be shared not even with the apps right even when you interact with the app to request the proof it's it's the responsibility of the d-app to provide the location to the API plus it has to be signed by the actual user you are querying the proof for and then the API will only return you the proof saying yes or no the location that you provide the user was actually in that location that you provided so the actual user location is never going to be to be leaked okay now that said well let's get let's get to the code right yeah let's do it we're going very fast actually if there are any questions any questions out there not at the moment okay let's keep going okay great so one thing I want to focus on is our developers portal that's because that's the easiest self-serve service place if you want to start building on iotex so you don't have to ask anything to anybody just go to the developer developers.iatex.io right and uh you just log in with your GitHub account here and you can go to your dashboard you can connect your wallet and then you can claim some test tokens right away every every day so you can like start building uh immediately and uh yeah there should be like a hundred new test tokens here at some point so uh I'm not uh yeah I invite you to explore the developer portal uh here you can also find the iotex academy and uh we are also releasing a community Hub where you can contribute your own projects that you have built and also you can get tips from other developer users uh for what you have published on the developer portal everything web tree based um so once you have a cloned once you have claimed some test tokens on the developer portal you have your metamask account ready then you are ready to go with the with the tutorial which by the way you can find inside the academy or it's also on the home page here or you just go to the trusted location API and click on the full demo tutorial and this is the workshop we are going to follow along right but it's going to be probably 45 minutes so be patient ask questions if you have any questions so here in this image you see what we have been talking about until now right it's actually the simple architecture over the app that uses the trusted the location API on one side there are your users that are IOP users they have checked in with IOP with the trusted location API enabled and so their device will send based on their settings we'll send some data trusted location to the API then we have our diap front-end and then we have our the app Smart contract right the front-end allows the device owner to claim airdrops and it allows anybody to create an airdrop by providing the location the radius of the area the and the time range and the number of tokens that they want to provide to people does more contract instead it is uh basically the smart contract side is basically just the nft smart contract standard nft contract that we use as the airdrop to Mint the airdrops and there is the actual Logic for the claim for airdrop creation and airdrop claiming the claiming the the airdrop creation is straightforward the claiming part is basically uh need it's going to need the proof coming from the API it will verify that the proof is actually valid and then it will trigger the logic in our case the logic based on on the location is just verifying that the actual location still has nft available uh that that user has not already claimed that nft and then just trigger the main team so so I'm just following the the workshop here and you can do the same so we'll I start from cloning let me put the microphone here maybe okay so I will start by cloning the repository and specifically I'm cloning the the starting template Branch so you also or you also can just check out to this branch and that's basically the full application that Giuseppe has shown but with some missing components those are the ones that we're going to build today so okay I'm going to clone the branch the starting template branch of the Repository enter and I'm going to I'm now showing you the smart contract part first which is pretty easy so just enter there are two folders inside the workshop one is the front end which is basically the next JS UI you have seen before uh with some domain the most important component is missing and Giuseppe will show you how to build it later and the web3 folder just contains an rdot project for this for deploying the smart contract so I'm opening voice vs code here and we are focusing on the smart contract for this application so we have here we have the location airdrop smart contract that's the actual Logic for creating an art drop and claiming an audio drop then there is the location nft which just which is just a standard nft contract that we are going to use to Mint the nfts and here is the verifier interface this is the interface of what's called a verifier contract that is officially deployed by aerotex on the iotx mainnet and test net and the role of this construct is to verify the trusted location proof so making sure that the proof is valid so we we import the interface to verify the proof before we actually mint uh the the enft so I'm going to start from where these contracts are already I mean these are standard this is a standard contract the interface is inside the documentation so we are going to focus on our own logic here that will be your your D app so let me maybe hide okay a little bit smaller yeah that's pretty good it's pretty good okay yeah okay so let's get back to the tutorial page oh I should do an npm install let's do it first inside the web tree install to install uh just a hard dot dependencies to deploy the contract let's do also the front end so then um yeah I will just start at the front end and then we can just pin the server too so then we start adding components to it a little bit little yeah and for the front end we're basically just uh like Simone was saying we use next JS and then we use wag me to interact with uh the contracts and then we also gonna interact with the trusted location through a little npm package that we made for it and I'm gonna describe uh what the package does and then I'm gonna show the uh code as well in the documentation so that you are able to also do that on your own if you decide to build on top of this yeah I'm just deleting some services that I have okay so I'm going to run the front end which is basically empty run Dev okay so here is our front end and uh it's uh basically missing most all the most important component which is the card that allows uh to to manage the claim so Giuseppe will go through that part later we are actually going to to work on the smart contract site so getting back to the workshop so the first thing we import our nft token contract because we have to Mint this token and we import the verifier interface because we will use the verifier The Trusted location verifier contract to verify the proof of location okay next I mean update the page okay next I'll start adding some Global scope for our contract right I will also add the Constructor here so what we have here we have the this event this event is emitted every time a user successfully claim an airdrop we have the the actual verifier contract that we will initialize in the Constructor and we have the nft contract to Mint our nft we have some like make money part where the admin of the contract is maybe possibly interested in making some money out out of this contract so uh we set up the address of the contract administrator or whoever will receive the fees for those who create these airdrops we set up just a base fee that's the cost for each nft that a create an airdrop Creator will pay ever for each nft that they want to uh like associate to their airdrop and then we have a cliff we don't want to get too much money out of these people so you can set the maximum number one after you ask for a fee and the rest is for free then we have the actual structure that holds the information for each airdrop so basically the latitude the longitude uh the distance of the region and the start and end time range for the airdrop and the number of nft tokens that you want to airdrop to people and then we also keep track of how many have been have been minted for each each drop right here we have some like classical structures to manage the list of our airdrops so we have here just an array of hashes where each hash is the hush of every single airdrop that has been created we somehow index them by their Ash then we have the actual mapping where all the created airdrops are listed are like stored so this mapping goes from the hash of the airdrop as an ID as a unique ID to the actual airdrop data and then we have a mapping to a mapping that basically Maps each user if a specific user address has already minted a specific airdrop or not we don't want to allow users to double claim the same nft and then we have just the token ID this is just a unique ID for each new nft that we are going to Mint and this one just going to increase on every new nft and the Constructor is the Constructor is straightforward it's just initializing all the global variables that we are going to use so when you deploy this construct you will have to pass the iotex official verifier contract the address of the nft contract that you want to use the fees the fee receiver and the cliff and this is for the global scope right I think here is everything more or less what I've said already so we can go ahead we can go ahead and add some like utility functions here so this one are pretty simple this one will just uh tell you the total number of airdrops in the system this will give you the list of all hashes so all basically IDs of all eye drops that are in the contract these are used by the front end basically to list the cards and then this one is used to generate the hash for each airdrop that is created so very simple then we have the two main functions of this contract one is used to create a new airdrop right what Giuseppe used in the demo to create a new airdrop and then input the location of the beetle Hub and the time frame so this is the function that basically needs the latitude the longitude the distance the starting the the time range and the number of tokens of your airdrops right and this is payable because you have to pay to create an airdrop and the payment is going to be based on the base fee the cliff depending on how many tokens you want to allow people to claim so creating an edge drop is pretty simple just we do some basic validation that latitude and longitude are valid you may know that solidity does not take uh real numbers so this has to be integers and so we expect the latitude to be the actual latitude by 10 to the sixth integer same for the longitude distance or meters time from and time to our Unix timestamps and same here Unix timestamps yeah and tokens count of course it's number of tokens to me great co-pilot by the way and so we do some basic validation here latitude should be in this range load longitude should be in this range distance should be positive um and we also validate that the user paid uh the fee based on our calculation or the fee at that at this point is everything is fine we will just hash this I drop data and just store this airdrop in our structure meaning we are going to oh we are also checking that we don't already have an airdrop with the exact same location distance and time range because that would be just exactly the same airdrop so we are going to reject a duplicated airdrops if not we just add um the the airdrop to our mapping using the hash as the index and maintain tokens of course starts from zero and finally we also push the hash into our array and this is due to how solid it works you have to to have your indexes into an array to uh to have a way a mean to list all the airdrops that you have and finally the most important function is the claim function so this is the function that allows somebody your users to to actually claim an nft so if they have been in the location that you have published in the time range that you have published and there are still nft available then that user will be able to call this I lost it to call these claim function passing the actual proof of location and this proof is provided by The Trusted location API and it's of course the latitude the longitude the distance the time range and then the API will also give you the device hash and the signature this is the signature the proof from the API that the user was actually that the device was actually in this location at the at this time so the claim function will first generate the hash of this like airdrop data to make sure oh sorry it will make the hush of the proof data and then verify that the this signature uh is correct is the actual trusted location API signature of this data so making sure that this data has not been tampered with and so we are creating the hash of the data and just calling the verifier contract verify function on the hash and on the on the signature on The Trusted location API signature this one will revert if the verify fails and say okay this data this proof is not coming from The Trusted location API otherwise if the verifier says okay then we are going to create the hash of the airdrop data only right and make sure that the user this user the sender has not claimed this airdrop already right it's so that the entry in this mapping is false and if it's not been already claimed the proof is valid then finally we have a yeah we are going to create our airdrop oh we are still making another uh sorry another check uh yeah that basically that airdrop does actually exist because the proof can be valid I've been in that location that time but maybe there is no actual airdrop for that location at that time in our system so we are requiring that we are fetching an hypothetical airdrop with this hush for this data and making sure that it's there if it's there then there should be a max distance positive and then if it's there we are also checking that that airdrop has still tokens left for this user to claim and finally if everything is goes well then we are like taking note that user has claimed this airdrop and then we are finally minting that and the nft to the sender and emitting our event that the sender has successfully claimed the nft and adding uh I'm sorry and increasing the number of tokens that have been maintained minted for this nft I wanted to add something maybe uh if we go back to the verifier real quick um imagine it as um imagine so this verifier here is obviously it's developed by iotex so it's not just any verifier contract so imagine this sort of like as a double verification right so you as a user say okay I was here in this location you query The Trusted location API API will respond yes but at that point that's not even that's not enough because the contract will check okay where did this Proof come from and that's the reason why we use the signature because we're we're basically saying okay this proof needs to come from a verified server that actually said okay you're good to go and that's what we're doing here with this uh verify method I just wanted to maybe make that a little bit simpler because sometimes it gets convoluted and it's good to yeah or if you want to say it in other words people could just attempt to claim calling the contract directly without going through the trusted location API just suggest a location where they have been uh just forging the signature right and that's why you have to verify the proof that's the whole point of proof of location you get the proof and you verify the proof in the contract before you run any logic that depends on the location of the user and can be your Pokemon Go game or can be any other like application and actually we are curious to see what you can can come up with once you can have trusted location of your users so yeah the smart contract is basically almost done we only have a few straightforward like obvious functions to add and calculate yeah and it's just uh to configure configure the fee Receiver right only the owner can change the address that receives the free the fee we can change the configuration for the cost so how much we charge how much we charge for um of set basically we don't have set basically okay so we can set up the cliff and here is how we calculate the fee so how much we expect the Creator to pay when they attempt to create a an airdrop and we just calculate we just give for free any number tokens over the cliff otherwise they pay for a um like the base fee by the token count and this is basically it for the contract pretty simple just basically about receiving the proof verifying the proof and running your logic in our case the logic is just meeting an nft and checking some Concepts that we have in our application which are airdrops um now so I guess we can always at this point yeah we deploy yeah and then we get right you can also just uh deploy it uh we need to create the EMV file for the with the private key right and this is where we show it what are you saying this is where we show the private key ah yeah this is where we show the private key but this is not the surprise for you connect Account Details anyway you can get many more test tokens from the developer portal I'm totally gonna drain this account as soon as we finish so we are expected to have an iotex private key inside our Environmental system configuration save it and just do uh npm right uh that is run yeah run and that is uh you can check out if you check out the package Json it would actually be cool so we can show basically the command yeah let's take a look uh we are basically we are using this like we are using this um hard dot deploy yeah these are the deploy heard that well it's uh here this one yeah we are using this uh heart.ard.d deploy um package which basically does what hard dot does it runs the script for deploying but in addition it's also exporting the deployment information which are the smart con the actual smart contract addresses and the API with the contracts in a file that then the front end will import directly so each time we redeploy we don't have to edit our front-end to update the API and uh and the address so it's npm run deploy that's not deploy test net test net it's correct that's it cool so it's now deploying uh yeah that's the NFP next yeah that's the one and then we can basically jump in the front end I was thinking since I have a hard time using your laptop maybe I can talk from here and then you can uh do the laptop using for the front end yeah oh no way okay then I'll do it all right let's do it let's try uh okay so that's deployed it's deployed right yeah yeah we have deployed everything so I guess yeah for the front end uh uh yeah I guess uh we have just to go follow along with the workshop yeah cool and so basically what we do it's in uh once you deploy the contracts uh they're basically going to be exported in a config file in the front end and that's what we use to basically tell uh various for example whack me hooks that we need what the contract address is and the ABI and that happens automatically so that then every time we redeploy we don't have to always update the contract or address and things like that so I'm gonna now attempt at doing this uh see if I can figure out how your laptop works oh thank you no worries I have tech support on the spot cool so um as a matter of fact we're going to um let me open Keynote we're going to uh basically look at uh the main components of the front end which are going to allow us to um work with our cards right so the orchestrator of everything that we've been talking about here is going to be disclaimed verifier component inside the claim verifier component we're gonna have a few buttons right and each button obviously is in charge of a different logic uh connect button it's simple we're just going to use wagme to just connect uh and get the user address then we're going to use this uh claim button claim button kind of works twofold one like you you saw earlier you basically ask for the proof from the API once that is unlocked then um we will then call the contract and so the claim verifier component is sort of the component that lets us display and orchestrate this whole Behavior and um oh no that's a surprise I spoiled it all right so let's get rolling um what we're gonna do is cancel this cancel this we don't need web3 even the way we use our Mouse is opposite like imagine what kind of mountains I'm trying to overcome right now uh no it's okay it doesn't matter cool so and that's basically what we have in the tutorial right the first thing is we're going to create this use claim claim drop hook uh using wag me and that's going to be basically our first uh Contra call so let's go ahead and import what we need um I forgot to mention that for the UI we're just gonna use um um what do you call it um uh chakra uh if that was ever necessary to mention uh let's see here so we're gonna have a hooks directory here obviously the front end there are many components that come into play we cannot really focus on anything uh for time and so we're just gonna start with this right so I'm just going to close this first thing that we're gonna do is import a few things and what we use basically is use contract right and the prepare contract right from wagme the location airdrop and that's a config file that I was mentioning earlier use router just to redirect the user at home once they do that and then we have a verified location type toast and ethers pretty simple stuff right so we move on what we're gonna do is um this uh claim drop use claim drop hook it's basically gonna need some props right and some props is going to be the verified location and one more thing which is a Boolean which is this is ready to claim flag so what's going to happen is uh let me just put this in the in the component and I'll show you what's going to happen is that and you will see later on right everything will come more clear as we go but what you will see happening is that basically once we query the API and we do get the proof then we will set this is ready to claim to true and that's gonna basically start triggering the use prepare contract right from wagme which will do the prepare call and then we're actually going to call the contract so that is ready to claim is a very important because that will start triggering the smart contract call right so basically that's what we have here um so we're basically passing these two types the verified location and this uh is ready to claim Boolean next thing what we're going to do is then um uh take care of the use prepared the use prepare contract right from wag me and we put it here and basically what we're saying here is um uh we are I mean if you're not familiar with bug me obviously feel free to go and check it out but basically what we need to uh provide is a few few a little bit of information location airdrop which basically would be the address and the API uh which we're getting from what we imported uh above and then we have the function claim which is what we're going to do the arguments and then this is the enabled flag that I was talking about so once enabled is set to true and is ready to claim is set to true then the uh prepare contract right hook will get triggered and then this is just a message of value that we are passing uh we're passing to it so uh this happens and then once that is ready to go then we do call the actual uh contract right and return what we have so and what we return here is important because basically we're going to use this claim airdrop which is basically wheel into the right um uh return that we get from Ah that's how you do it okay uh that we get from the use contract right so once this is taken care of uh we go ahead and take care of another component and so the next component that we're going to take care of is the plane button component and this is pretty simple this is basically just gonna um call the hook that we just created right and so we're going to need use claim drop hook um you know some some UI uh stuff from Chakra and the verified location type this button basically needs some props too it needs to know if the user is ready to claim and also needs to know for what location we are um uh we are making this uh claim uh Contra call right and rest is just refers to some other uh props based on the UI for this button that we just configured in another uh folder later so what we can do is seriously just basically in is this scrolling okay cool okay copy this and I'll show you basically the rest in a second and this is a component that is uh and um in the components directory and is the claimbunton.

tsx so we're going to go there we can this we get to the components and it's the claim button.tsx right so we can just do this and paste this here cool so what I failed to mention earlier is that Okay this may uh seem a little bit uh clunky but that's uh sort of like a a way that we found to make this happen uh obviously feel free to find a better way uh you know and hack this and make it a lot better and make it your own project right but basically what we're going to do is we're going to use this sort of um is ready to claim to determine if uh the if the proof was there then attach that value otherwise just basically return zero and the proof is sent uh on a um it's basically an array of objects because uh maybe we didn't mention earlier but you can query different location at the same time and then based on whatever proof you get um you will get maybe one two three four Etc uh so that's why we're using uh the first one because in this specific application we're just um claiming one nft at a time so once that is done we're basically going to create this handle claim function that all it does is really just call this uh claim drop which is what gets returned from uh from calling the use claim drop hook and then here is the conditions right if we're not able to claim we just display that and if there is any error that we get from wagme from calling the contract otherwise what we're going to do is um use this underclaim function that we showed earlier and we're going to use that to claim the nft okay pretty simple so far this is just a component that calls the contract the next thing that we're going to do is the claim verifier this is the more uh complex component that will basically put everything into play so let's go ahead and do that I'm getting used to your laptop by the way let's just take a little bit of a learning curve so claim verifier component what are we going to do here let's import these and I'll basically tell you what uh what uh what role they have in in this component Okay so we're going to use wagme to sign the message because basically what we're doing is we need to prepare a message that the user needs to sign with all the right information right the location information uh which will include the timestamp the location um the device that we're claiming for ETC the user had to sign that message the message is the one that Simone was showing earlier that will be sent to the uh to the contract and basically you know that ties into what he was saying earlier so yeah this is because uh we don't we do not allow any the app to just query the proof of location for a user right any query to the proof of location API must be signed by the user that the app is querying the proof for so this is where this message gets signed by the user because at the end of the day I mean you own your data right that's the whole point and that the app should not have access to your location data to any degree of precision unless you sign that message and you claim uh you know whatever reward we have in the logic of this application um so let's go ahead there are other things here that we need but let's unlock them as as we go right so first thing that we're going to do is uh start using this claim verifier disclaim verifier basically takes one prop and that's the airdrop that's the airdrop that we are claiming for so let's go ahead and do it uh and so we're basically passing this airdrop and that's of airdrop type now the other thing earlier I was mentioning we have this geolocation package that makes the signing the validation of the data and all of this uh much simpler and that's basically what we're going to do so we're going to create a reference of the geolocation object and then we're going to use this to call different methods in this package to then um yeah use the message take care of the locations Etc and then we need to know if the user is ready to claim or not for the reasons that were described earlier so let's go ahead and move on next thing we're going to do is basically creating the functions that take care of what I just talked about so we have the send query function sign message handle unlock and uh I will tell you in a second what they do so we go here and this is what we're gonna do so what we're gonna do is this uh we have this handle unlock function that basically will use the package to use this scale location with scale attitude longitude distance from and two and then under the hood what we do is we use this generate Co message method that will use this location that we just created and then send it together with the address domain URI to the message and then the user needs to sign and then we're using this sign message here which comes from which comes from a use sign message hook and that's just wag me stuff so once we do sign it we're going to retrieve the signature and then we're going to use this signature to um for this send query function send query is this function here that will call the API verify location and that point we wait for the response from the API and if the API responds positively and we have at least one verified location then we will set the verified location and then we will set is ready to claim as soon as this goes to True like I said earlier it will trig the prepare contract right from what me which then will allow us to actually call the contract with the contract right if false uh too bad for you so the next thing that we're going to do is basically render these buttons right so if the user is not connect them ask them to connect and then here this is the first button that you saw me uh basically click on earlier to get the proof and that is here once that happens we call the handle unlock like I said earlier it will trigger the is ready to claim flag if is ready to claim is true show me the claim button which is the second battle that I clicked earlier when I did the demo and then basically it will allow you to claim the NFD so let's do that I realized I may be talking fast and if this is not any any of this is not clear we'll have a little bit of time for questions at the end so that uh you guys can ask anything you want and we can go through it over and make sure it's at least clear so this is done I saved this I have not much uh more to do the next thing that we can do is basically run the front end like we did earlier and give it a test drive and since uh we're gonna hand we're gonna use it with your IOP wallet maybe uh you can do the test drive if you want um did we use my IOP no but we could do it here since your iupay wallet is here we can send the location with your wallet yeah the problem is that I don't have test tokens that wallet so this will take some time okay then I can use mine yeah so we can just run the front end foreign was it 301 Maybe maybe I have I have we had it already running yeah yeah we had the previous one already running but cool and so if I open IOP wallet now with the wallet with my key that you imported right who knows I can't remember anymore all right let's try I think so is it yours um I should go to the test net right yeah so settings General and Network s test net is it yours uh yeah it could be zero c837 yeah that's the one cool so we can basically now uh like we were saying earlier we use webstream to enable geolocation and we'll send my location once and then like we were saying you can determine the the interval of the location in this case I just want to do it once let me check the history because I'm not sure location is working from the from the ah okay the MacBook so you have to do it from your phone anyway okay cool anyway we have seen it running in the demo cool all right I mean I just think it we promise it works I mean this is exactly the same repositor we run the demo from so um what else I would first yeah let's actually disclose the surprise that I already disclosed we're hosting a little um happy hour for all the developers that uh joined us for the workshop and you guys are more than welcome to come and uh spend some time with us if you want to learn more about uh what we just did or other types of application that could be built with this technology would be happy to talk to you and just um uh yeah yeah have a good time I think it's a few blocks from here to work a distance if you want to come uh free drinks right yes it's a full bar open bar for a couple of hours and food so feel free to join us we'll be happy to have you yeah come over and uh we are there uh for the evening yeah it's big space Valley so yeah I would ask if uh you guys have any questions uh about what we have built not sure if it was uh two entry level or two Advanced as a workshop but if you if you have any questions yeah or if you know maybe if they're not necessarily technical questions but maybe a little bit more about you know something more high level whatever you feel like asking uh we're here we have a little bit more time so why not okay I guess no question for the time being oh here he is go for it I I generally why did you start building it on a separate chain and why not do this directly on polygon or something like that uh uh why did we react actually this trusted location API and the whole layer 2 protocol web stream that it's built on it's chain agnostic we have our own blockchain that's the iotex blockchain that will have a role into the final decentralization of this layer 2 protocol uh possibly I'm not going to disclose what the role is but anyway some part of the architecture of this layer 2 protocol that allows to connect real world data with blockchain applications this is one example will be somehow connected with our layer one but uh the layer 2 can be used with any other blockchain it's basically a proof a computational layer that generates proofs and make it makes it easy to somehow collect data from The Real World verify this data store the data and reply with proofs to the apps and is the apps can live on multiple chains they can be on ethereum that can be on polygon that can be on iotex but some parts some requirements will be tied to the RTX Network typically you can expect probably device identities right decentralized identities of devices node operator identities right this type of uh architectural level Concepts to live on the atex blockchain but the d-apps can live everywhere yes I'll just jump It's better the main question is basically like when if you look up the transaction on the Explorer does your location show whoa if you look up the transaction on the Explorer does your location show no it will show the transaction hash and other type of data but the whole point and that's what we're asking for the proof is that the the app will never know your location it's uh it's more like a yes or no answer so it will say oh was what's your name easy was easy here at the barrel hub for that specific airdrop the app uh trusted location will say yes or no and that's it and going back also to the earlier question um this is just one example right of data we just wanted to do location because you know it's cool it's easy and uh it's a good entry point for people to start understanding how the whole architecture works and I think this is the only existing trusted location API for the apps actually but for us it's an example on how to use our layer to our protocol yeah just can I just answer a little bit more about easy yeah I saw you were itching to answer but before I forget go for it actually all the location data is going into the layer 2 protocol it's not going on the blockchain what's going on the blockchain is the proof uh that the user was in that location you have to disclose this if you want to somehow get the airdrop right and the airdrop is driven on the layer one so anyway you will receive this airdrop that transaction will be on the blockchain necessarily and so the proof will be disclosed if you successfully claim the airdrop but your data leaves in the layer 2 protocol and it's never disclosed and even the proofs cannot be queried unless the user is signing the query so even the proof it's not that the apps can just keep querying proofs for somebody this person must find the query so sorry and the location one more time once you have been in the location with with your IOP Mobile Wallet communicating The Trusted location to the layer 2 protocol once you have been there you can leave and maybe it depends on the actual the app right our the app allows you to claim whenever you want as long as you have been there in the time range we are not checking when you claim right but your day up may be different maybe you also want the user to claim within 24 hours from when you have been there that's just your own logic so for example right now you know we're here I check my location then let's say that this application was already deployed in in a week or so I go home and then I sit I already checked in this location so that information is there then I can just go and say oh I was here last week and if it's within the time range then I'll just um be able to claim the nft in this example I think actually if you stop thinking there are a lot of use cases for example one simple one is for uh you may have participated to Webster events where they ask you when you buy the ticket they ask you to deposit some staking tokens that they will return you only if you show up right that's that that could be automated by this like API no need to do any manual check or anything or sending email or whatever you just the d-app can you can build an event like the app where people that register to the event we know this problem we know it very well we have our like happy hour and we can have like thousands people just you know registering and nobody shows up because they're just checking to every event and then they just go where they want to go or where they can go and but they spoil our organization right then you can very easily just ask them to speak in your platform and then your platform will allow them to claim back their stake only if they have been in that location otherwise they'll lose the stake and then people will stop like you know registering to every event he's passively aggressively telling you to come to the happy hour all right if you come to the happy hour we and it's limited spots right it's 30 people so we may ask you if you have registered to the developer portal that's the only thing we may ask uh but yeah and um I was trying to um I wanted to say something um might have forgotten yes I'll come down where the data lives privacy and security around where the data lives good question I mean please let me go go for it I'll deal with this one so currently our layer 2 protocol is still in beta we still don't have a devnet next we have 1.0 release over the layer 2 protocol that's a single node so it's not a decentralized network yet and in this configuration it's still a centralized service so the Privacy is protected the same way it's protected today meaning that there is a central service which is basically you who are deploying that the app you are also running the layer 2 node that collects the data not in this case because in this case we are running it but still we are collecting the data of the users right on our node so privacy is In This Moment In this case it's protected from going to the blockchain so you're not disclosing user location on the blockchain not even to the API queries but it's still this close to us who are running the node or to anybody who is Right deploying this node and doing a similar service but next step is having the devnet for this layer 2 protocol where it starts becoming this becoming a decentralized network once this becomes a decentralized network then Things become more complex because you can have Community people running notes here and so definitely you don't want to disclose the data to anybody who can run a node right so basically to everybody in this case more complex algorithms and privacy preserving techniques kick in and we have actually released a kind of a white paper for this layer 2 protocol it's in three volumes we have released the first volume the second one is about iot devices sdks how to send data to this layer to protocol and the third volume we talk more about decentralization and how to face the problems at decentralization but I can anticipate you that it's just not possible I mean if you decentralized when you decentralize this layer to network then you will only be able to send devices will only be able to send clear data that is clear by its nature like temperatures data climate data right or asset data right it's not the device sending us there's no data but feed like Health Data right these are these are these are the big markets for real world and web3 and iot Health Data uh even Energy power consumption data right that's all even industrial data right these are all strongly sensitive data and you're not going to send them to a decentralized network the same way you're not going to send it to the blockchain in this case there are different uh architectures for the layer two and some of them expect the device to encrypt the data and only allow for example a specificity app to only allow to share the data with their specific DF where the layer 2 protocol works as a forwarder somehow but is not knowing what the data is about or the device could be building the proof of something and and sending the proof to the layer 2 protocol and the layer 2 protocol will just serve as again a Post Office forwarding the proofs to the blockchain then you have ZK right where you can provide CK proofs uh and use these algorithms but of course when you start decentralizing and preserving privacy you are going to face limitations uh for sure uh what what you can do for example you can use um [Music] encryption on the device and allow the layer 2 protocol to do some computation on the encrypted data without revealing the actual data there is this type of cryptography that allows to do some processing on encrypted data but these are very limited use cases so yeah the layer 2 is going to be decentralized but this decentralization will also bring some limitations for sure and also a complex architecture but I mean at the end of the day the idea is that data is yours and you should be rewarded for it instead of just giving it away for free and it should be given away only when you want when you want to be rewarded any more questions okay it'd be cool to have a picture altogether but I know that nobody's gonna come here and take a picture with us I mean why would you we only known each other for 90 minutes yes ah yes you would oh that'll be cool well if if you guys feel like it and you want to come here we can all take a picture together it'll be super cool uh just for us I mean we put some time and effort into this but I'll be cool thank you guys oh awesome oh everybody great thank you could we have a photographer in the audience uh to take care of this Let's uh let's meet this location the Vintage Way with the extra rewards for everybody Andrea are you able to take are you already doing it man right you rock okay thank you guys yeah and also Andrew can you also take one with my phone Oasis problems later that layer that they can use on any solidity or NVM or protocols so more as well wait wait okay so a fish how many of you knew about iotex I bet almost nobody I saw it online foreign from five to seven 5 PM to 7. um all right thank you okay [Music] all right [Music] the esketan has always been a minute has always happened it's happening right now [Music] guy before [Music] you [Music] know thank you [Music] foreign [Music] [Applause] thank you [Applause] [Music] foreign [Music] foreign [Music] [Applause] thank you foreign [Music] thank you thank you [Music] [Music] thank you