Session 7 | Connecting frontend to smart contract - basics

Transcript

Jim Jim tuck tuck tuck. Uh, need [Music] is it the right thing?

Yeah, it's a right link. Let me just put a message. Um two.

All right. Just put the me seeds. Uh, stack sty

blahy blah. She's not here yet. She will jump soon. I just sent a message. If no reply in two minutes I will call her. All right. Um everything is going. Uh ah let me check. Um dis Google Classroom.

Um, so so so so so okay. Um, 34 people uh completed the assignment. So you have until tomorrow. No, today. tonight. Um yeah, you have until tonight two tonight uh to finish it. Um just ah ready but she's here right now. Um so

we're going to start uh All right. All right. Yesterday was super blast. um like we didn't expected uh that on Zoom uh no one can enter anymore uh because the the room was full. Um and so yeah, people are just super motivated. Um so that's pretty pretty cool. Uh let's see today if I have to upgrade the zoom plan because actually uh I have like a zoom plan um for 100 people uh but probably I will have to increase this one um from 100 to 500. So let's see today um how

everything is going. Uh you are still welcome if you want to to jump into the session but it's like kind of it's like 6 hour 6 hour more like 10 p.m. So, it's super late. Could you ush Okay, she's coming back, I guess. Okay, so all good. Uh, you can start.

So, for the context, by the way, uh, Vibar is one of our fellow and she's right now leading the session. So it's pretty pretty pretty cool to to see that from fellow to teacher. Let's go. >> Thank you. Thank you. Thank you so much Sen for that. So yeah, I'm I'm I'm really happy to be a fellow in Dev Park and to those who are dev fellows for me um it's really a wonderful space to be there and you really learn a lot. So uh for today we'll be speaking about the LISK summer boot camp and um I'll be handling. Okay, let me

share my screen first. Yeah, hope you can see my screen. Okay. Yeah. So today we'll be handling the Lisk summer boot camp and the topic is connecting smart contracts to front end and I understand um you did cover up how to make a front- end website and you also covered up um how to deploy a smart contract and also how to handle errors uh in a smart contracts and uh those

other sessions that you've been having at vacation etc. So um with this I'm Brata as Selena has just introduced me. I'm a web3 developer since 2021 and I'm also ambassador de at lisk. If you want to contact me you can find me on Twitter at those handles and also at LinkedIn. Yeah. So um today as I've said we're going to discuss about um decentralized applications and how to connect um them the smart contracts to front end. So definitely we are going to start up with um daps and understand what daps are and

for this whole session I'll be just focusing on on lisk but um as we move on as we see how it how it interacts because lisk is also built on top of ethereum it's it's more of um the same but we are going to discuss about the lisk ecosystem and how you can um connect your particular front ends um to the lisk um ecosystem chain So what does ADAP um look like in in the LES ecosystem? So ADAP is a decentralized application.

DAPs never change um irrespective of um which um chain that you are in. So they are basically um applications that operate without a central authority and without a single point of failure. So um definitely the dabs that have already been built on lisk and yours if one day you create a dab um hopefully that yours can be or will be listed in one of the dabs that will be built uh under the lisk ecosystem. So in the risk ecosystem they're definitely divided into so many. I've only highlighted like the four but there are so many. There's the decentralized um finance which most people call it defi. So this um spans around lending borrowing and

trading without banks. And some of the defy apps that you'll find in the ecosystem are like unis swap a um okot trade. Um this is very popular in Lisk especially if you want to swap or bridge um any token under Lisk and also um Belendro. We also have um another track called real world asset and this is basically um span around the tokenization of assets. So you could be tokeniz you could be tokenizing a land you could be tokenizing a property and some of the dabs that have been built on list is like backed and norm chain whereby norm chain is um a dab that they are

trackizing real estate in Africa. Yeah. And then we also have NFT marketplaces whereby here for those who are quite conversant with the art world you can buy and sell and mint unique digital assets. So in these particular market places you can either um go and buy um that particular art um digital asset. You can go and um upload your particular art asset so that you'll be getting a percentage um out of those um art that could be sold to other people and this you can do with market places like OpenC Blur and RA. So in under the list ecosystem you can do it

with openc or variable but variable is the most common one with um last year I Oops.

Says coming back. Oh no. Oh, sorry. Yeah. So, um the other games that are being played by other Yes.

>> Uh we we miss probably like the two last minutes uh because um of your connection I guess. Also, Christian um could you upload the slide uh after in the class Google classroom? >> Yes. Yes. Sure. Sure. I I'll upload um all the slides uh in the Google classroom after this. >> All right. >> Okay. Yeah. Yeah. So you'll be able like to follow up and and find any information that in case I get lost again. Uh please let me know because on my side I'm just using one device. Yeah.

Currently. Yeah. So um the other track side oh we're talking about gaming. So we have AXI infinity decentralized and poke coin which is um that is built on lit. The pokecoin one is uh for the Pokemon cards um that if you want to go and try and find um or or own a particular Pokemon card that has been termed extinct or is close to being extinct, you can do that using popcoin. The other side is supply chain management whereby here we have the transparent and trackable um logistics. It could be under any particular um category of um of building could be agriculture could be um supply and chain could be uh I don't know

anything that has supply and chain so in list ecosystem we have Africa which um they are concentrated on the agricultural side whereby um they handle all um the logistics and agriculture from farmers to buyers and being able to remove the middleman or the central authority that's very common in the agricultural side. Yeah. So that's it in uh the dabs. So the characteristics of dubs I understand Vish had covered this. So I'm just going to roughly move on very fast on this.

And if you need any more information on the dabs that are built on lisk um you can also go and find them here on the list portal under the ecosystem. Yeah. All these links you'll find them on the slides. So I'm just showing you and yeah there are so many categories infra with people like that web um there's also payments uh with people like payress um there's also decentralized um exchanges centralized exchanges we have circle and all of them are here we have um tools for aggregation of um tokens like defy dlama

and yeah you can just go check them out here if anything um um is making fun to you or is fun to you can just go and interact to them using the links that are there. So also with lisk if you want to get some um LSK in trying to understand the ecosystem um there's uh >> quick question sorry um are you sharing your screen or not? >> Yes I am. Ah. Um because we can't see it.

>> Oh my god. Yeah, we just got lost. Okay. Yeah. Nice. Okay. Now you can see my screen. Yes. Okay. So um Lisk currently is doing um season 2 airdrop and um the airrop is structured whereby um people who integrate with this particular startups can be able to get some LSK. So you can just go through this link. Yeah, let me just put it on the chat cuz I'm not um we've not added it on the slides.

Okay. So also let me drop just um a link of the slides here so that we can go together. Yeah. So on the list alliance boost you can find um almost like most of the um or the most used ds that are used in the ecosystem in the lisk ecosystem to be able to understand. So they have different they have different um LSK awards for you to be able to be allocated to the people who who create impact. So these are the people who are going to interact with the ecosystem and yeah so it spans out in the Africa side there's swiped for payments p and power pals and

popcoin and phone bank and then in the global side there's bey gearbox mofo for lending and borrowing and milu and then uh valro for liquidity. Yeah. So you can just go check out and try to interact with it because I always think it's fun um to interact with it. Yeah. Okay. Let's move on. So the characteristics of of a DAP is um as we had spoken before with VKish is first it's decentralized uh meaning there's no single entity of full control and meaning that there's also no um centralized um servers. It's also open source meaning all these projects that

I've just u mentioned on shown or shown you uh it's transparent that you can see um their code you can be able to inspect um their particular ecosystem and understand what goes on. There's also a technical white paper and also you can understand um their growth even using with tools like the fail whereby you can see the particular liquidity that's moving across um this particular deps. There's also interoperability with some of the DAPs being able to um borrow from each and every DAP um company. So for example, you could find um like with no chain because they're dealing with tokenization of real uh real estates at one point um they might

need to create a a liquidity pool for let's say um one real estate company so that they can manage um that real estate. They could also use another um d like mofo whereby if at all they're trying to lend the people who are trying to own um a real estate property and with this once the inter operability comes to whereby um this particular d can be used in other chains and it can also integrate the particular features using other dups within um the ecosystem that they've built in. Another thing is um dabs also they have a cryptographic um security whereby this is done by the use of

hashing and um consensus mechanisms. I think um we discussed about the consensus mechanisms before and I think this is just like it's clear the way it is because this is how even the blockchain ecosystem is built. Another thing is tokenized incentives whereby many dabs have their might have their own token not each and everyone. Um and this um sometimes some of the dabs also have incentivize their users using the particular token. So with um with the current um season 2 airdrop of list you've just seen they incentivizing users if they use those particular dabs using the LSK token and also even with those dabs like Mofo valum they

also have different tokens that you could be incentivized for either staking or providing liquidity or just interacting with with the particular um DAP. Yeah. So that's it. I hope um is there any question uh concerning ADAP? What's the difference between DAPs for Africa versus global? Okay. So um I think that's just a question of um the the structure of that company. So you find some DAPs um they've built for the market that belongs for Africa. But some dabs um they build without um targeting a market or a target market that's let's say it's all global like they don't care where the users are coming but because

most of the startups maybe when they start and they're so young they just concentrate on one particular type of market but as they grow and they grow their yield and as they grow their liquidity then they proceed to move to global. Yeah. Okay. That's it. I don't think there's any other question. Yeah. So, um you might be wondering um how are these particular dabs made? Yeah. And uh definitely as you can see uh if you just press one of them.

Okay. Let's see. We can do Jamit. So Jamit is like a Tik Tok. It's like the version of Tik Tok. Tik Tok. No, Spotify. Spotify is the real world. So it's like Spotify but um a decentralized kind of um Spotify whereby you can it has podcast it has music so whereby you can listen to music um through um blockchain you can also host your podcast and people can also um um say compete on whatever um songs that they've been listening uh through using uh quest and leaderboard. So they also have that characteristics of token um incentivization.

But def um on the base layer jam it is just um like Spotify um kind of app but um it just has like a decentralized um mechanism or consensus mechanism. Yeah. So as you can see here, we definitely have a front end like any other website that you could see. But as as you try to login um let's just try it. Hope it's fast. So as you can see just um create um your particular account using um your particular email and then um now I have to move my email. Yeah. uh

uh and then when you connect your email it just gives you a verification code and then from there on um then you can be able to interact with um the particular um uh jam site. So this is called account abstraction. I don't know if um you talked about this and this is whereby um instead of users always going to blockchain uh made apps instead of them connecting their wallet you just abstract um that logging in or that connection of wallet using um either social signing in email signing in or phone number um signing in. So this is meant for the users who are not quite conversant with um the blockchain to be

able even to use this DAPs while they don't have a knowledge that it's blockchain powered. Yeah. So you can go check out we have uh it's called EIP 43 4337. Yes. So it's also an EIP in in E. Yeah. Yeah. Let me go check it. Sorry. Yeah. So, we have the code. Yeah. So, um it's also a thing uh for uh for the builders to know um just to be able to always include like your your DP to be very friendly to people who don't

understand a basic thing like what's a wallet or what's a token at the end of the day. Yeah. And as you can see, J has done it quite well. Yeah. So, it's it's we are in. As you can see, you don't have any XP. U that means I've not listened to any of the music. And it also showcas that I don't have any coins under my wallet. So, I want to get any any coins, then I get to buy them from here. Yeah. So as you can see um if we went to other sites this would have been um tokens but um since um Jam has embraced that um methodology of ensuring that everyone who uses this site doesn't um have

have a thinking that um they're using a blockchain powered site. So that's why you can see all the coins are just listed in either dollars and uh yeah coins and you can see you can pay with visa and everything but PayPal but also you can also uh pay with um the LSK token through offramp and on ramping. Yeah. So offramp and I hope you you are conversant with offramp and on ramping. So this is like um changing fiat to um stable coins or changing um because fiat is like dollars the normal currencies that we use but when you come to blockchain um it changes to become

you can either use stable coins or you can use tokens. So the changing from one currency or the fiat currency to um the blockchain tokens or stable coins that's what's called um offramping. Yeah. and no onramping and then off ramping is the reverse. Yes. >> U could you just procide for for everyone what is on ramp and off ramp? >> Okay. Okay. So one more time. Okay. Let's let's actually use uh this page. So um if you go here to your wallet um let me just use that just use the wallet of the day. And if you go to tokens you'll find that we have it. We and

every blockchain network has their own tokens. Lisk has LSK, Ethereum has ES, maybe Salana has soul and all those others. So imagine that you have um dollars or you have your own country um currency. In Kenyan we have Kenyan shillings. I don't know in Mexico what's the currency there. I'm sorry. But yeah, imagine you wanted now to buy Ethereum. How would you go about it? So we have um DAPs that have been built to help people with buying um these particular tokens. So when you transfer uh fiat money which is the currency let's say a dollar to Ethereum or you

want to buy a certain amount of Ethereum and you just have dollars that's what's called on ramping. Yeah. And then when you want now to withdraw your particular Ethereum to um your dollar currency, that's what's called off ramping. So um let's see we can find one of one here. I think phone bank is an on ramp off but I think it just only does shillings.

Yeah. Yeah. Okay. So, um we just use um this widget as you can see because that's how just it looks and as you can see here they they use Empa because it's like the mobile money in Kenya that's the most common and the most used. So if at all you want to buy um a stable coin USDT on the lisk ecosystem and you want um 10 USDT in the lisk ecosystem it translate to 1,337 um Kenyan shillings into Kenya and with that you just um need to specify your

wallet and then um you connect your metam mask. Okay. Oh I think the there there has a problem. So once you press um um get from metam mask it should show you like um to go to MetaMask. Yeah. So I think they only uh they've added so you can um either use um Naira Ugandan shilling South Africa Ivory Coast um depending and you can buy a any USDT um uh in the Lisk ecosystem. So this particular method is called on ramp onramping.

Yeah. So one USDT to um let's say uh Ivory Coast um currency that's off ramping and one Ivory Coast currency to uh LSK USDT LSK is on ramping. Okay. Yeah. So it's like send and withdraw just the same terminologies that you use for banking ecosystems. So when you're sending it's on ramping but when you're withdrawing it's off ramping. Yeah. Hope hope it's now um clear.

Okay. Yeah. So um I was just speaking about um the jam ecosystem and I was telling you that you can see there's a front end side but you don't see the back end side if most of you are really conversant with um with how the website um world is built like like you as a user you just see the beauty of it but in the behind scenes it's a lot going on there. So uh in the behind definitely there's a smart contract in the behind scene definitely there's a database and all of this um should be in the uh blockchain ecosystem and how we do that um whereby you have a smart contract and you want to connect

it to your front end you do this by using web 3 libraries. So um there are different um libraries that are used um to connect um your front end um to your smart contract. So um some of these uh web3 libraries are like either.js, web3.js and vm or vm whatever how you want to pronounce it. So with either G.JS is a JavaScript library that allows developers to interact with um EVM compatible blockchain networks and you're also going to see how they how

they do that as we move um on the web3.js. It's also a JavaScript library um that interacts with um EVM networks. And the difference between JS and web3.js JS and uh and VM is VM is a typecript interface for Ethereum that provides um low-level stateless primitives for interacting with Ethereum. So all of this um just because I'm saying it's Ethereum, it doesn't mean um that list doesn't support this. As long as um that chain is EVM compatible, they can be able to use um this web three um libraries either to communicate with uh the smart contracts that are deployed

and also read uh the data that is in there on the smart contracts. Um a terminology that's used um about um to have the datas in the smart contracts is onchain. So when you when you hear people saying I want to read data on chain, they do that using web three libraries or you you hear them saying I've just deployed my smart contract and my smart contract is not showing. That's because um the web three libraries are not really connecting with the smart contract um side of um the smart contracts at the front end are not really connecting quite well. Yeah. And if you want to go and check out and read more, um, just press the read more link and then it will take you to a lot a lot

of resources for ether.js and web3.js. Yeah. So, um, you might be asking uh, why should I use ether.js, web3.js, and vm? That that's a spelling error. And as I've just said, either.js and web3.js, they're both JavaScript libraries. uh ether.js can also support typescript and vm is typescript based in terms of language. So as you can see um the amount of sides that could occupy into your particular d is um as it's uh seen and I'm just going to concentrate on what it is best for and the key strengths for each and every one of it.

So for ether.js it's mostly used for modern apps apps like metam mask and tally they do use um ether.js JS for their interaction between fun and their smart contracts. Web3.js, it's mostly used for full node access. So for example, if you want to create a node and you want that node to communicate with the front end, most people use um 3.js. So it's mostly used for heavy heavy heavy heavy back end uh workload and uh VM is used for high performance and it's mostly used because people uh want to use it with TypeScript and it's also used because it's also like wag me compatible

for Ether.js. Um the difference between Ether.js and web3.js it's um ether.js has a builtin wallet class while for web3.js JS it doesn't have a inbuilt uh wallet class for ether.js it's lightweight and it they also have a very clean API and it's very easy to use. So that's why most of the times when you're trying to build an app um you're mostly directed to you'll be mostly directed to etherjs because it's very easy to use for web3.js JS um they're known for their legacy uh feature reach and they also um rely on external providers while on EtherJS they can uh they

the providers might have been already integrated uh within the ether.js. Yeah. So uh lucky for today we're going to concentrate on ether.js because I don't want to confuse you uh moving forward. uh I'd rather that you understand um interacting with the blockchain with either JS and once we've all done that today then uh maybe as we move on uh maybe in the next lesson we can try it out with web3.js or VM but for today we'll just concentrate on um either JS Yeah. Okay.

Yeah. So as I'd said before either.js is um a JavaScript library and it has a few components whereby it has a provider, it has a ser and it also has um contract. So uh a provider is whereby um you are able to connect to Ethereum nodes. So I'm sure you you were taught about um how the nodes interact to go and make a blockchain network. So um some of the Ethereum nodes that either.js JS um interact with is like um JSON RPC, we have Infura and we also have Alchemy. So if you also want to go and um try and see how alchemy works

also in Fura and also JSON RPC. Um I've also attached some links here and you can go check them out. Um also for the people who are website focused um you could um try and say RPC works like HTTP only that um RPC is blockchain focused. Yeah. And it's also JSON based. Another core component of either JS is um signers and this represents the Ethereum accounts whereby you can sign and uh transaction and messages. So signers is um the private key that you have in your wallet. So as as as we are trying or as

as we go forward um you'll be seeing while you're trying to interact with um any decentralized application that is um built either on Ethereum or OISK you'll see that every time um the wallet asks for confirmation or confirm to um connect to this particular DA or confirm for this transaction to happen. So that's the work of um signers and that is done by the private um key of um the particular wallet that you have that has a public address and a private key. So that's the work of a a private um key that you do have in your particular um wallet and as always has a contract and also the ether.js JS

has a component of contract whereby this particular contracts um have AIS and they also have Ethereum addresses that are then used um to connect to the front end um side. So don't worry about the contracts. Uh we are going to see how that works uh in an example that you're going to see on how it works uh using contracts and either.js JS and getting that AI and also getting an Ethereum address which can also be called a contract address.

Yeah. So use cases of the js some like metamask and tally they do use ether.js JS um either you've created a token by yourself or just the ecosystem token like it or LSK. It is also used in smart contract interaction, signing in and verifying u messages. Yeah. Now using the signers. Yeah. Before we move on um we're trying to um seeing how ether.js JS works is um first of all you'll understand that um I want you to

understand that you need to have a contract running already. You need to have written a contract already and you need to also have connected to that um ecosystem that you're trying um to deploy your smart contract to. So I don't know if you covered this. I just put it here because it's like always the one step for you to to be able to connect to that particular um chain that you're building. So remember that if you're using Ethereum, it's quite different. Not so much different. It's just like some RPC endpoints and um the chain IDs differ. But for the list ecosystem, I just want you to understand how you can do it. Because even for even for some

builders, every time I'm trying to tell them and send me some LSK, it's always like very hard for them to understand how to um make their Metamas called that LSK token. Okay. So how you do this um is we have a link here um in the list um uh docs by you can find everything sorry whereby you can find everything on how to connect it but for today we'll just go um very fast also um I'm sure that you know there's the mainet side and the test net side so the test net side is whereby you can play around

however you want it's not real you can have um I could say fake um tokens, you can try to send them as much as you could. But on the mainet, uh if you put in you try to spend it, you'll find that I think there is a couple of connection

issues actually. Yeah. Uh uh uh uh uh so sorry. Uh so just we will wait. Um uh ejected I guess she's coming back. She's coming back.

Yeah, exactly. >> Um >> h >> you lost me. >> Um yes. >> Yeah, we lost you during the two two last minutes. Um you were showcasing um your metam mask if you want to share screen. Oh my god, so I see my face actually.

>> Okay. Okay. Can you see the screen? >> Oh, yeah. Just my face. You can switch. >> Okay. >> Okay. That can you see? Yeah. >> Anything good? Okay. Okay. I hope you can see also my MetaMask wallet. Okay. Let's go back to that site. Okay. Let me also put it on the chat so that we get okay.

Okay. So um first as I'd said um in your in your MetaMask wallet while you're trying to search here for lisk it might not appear like mine is appearing you might not find it. So how to do that because um you have to add a list network um custom uh customally you have to add a custom network and as you can see here on this docs you can see there's a table that gives you the details of each and everything. So here I just write elixia um test net test net and also for yeah the RPC2 um so

okay so another thing is um when you try to move to this other site of the website you lose um that path um that you tried to run on in your Metam mask. So, it's always um advised to copy first the RPC and then now you go and try to add that custom uh network because the other ones are easier. You can just write them up. Yeah. So, yeah, you should just uh write it. you input the chain ID and then so for me it will say it's already in use because I've already added my custom network and we use it is our currency symbol and for block uh

block uh URL you also input it just like that and then you save and then automatically now from there on you'll be able to see um the list codia um test net so if you want to do for the mainet um it also has like a different um RPC um endpoint and also a different um chain ID. Yeah. So that's how you do it. Okay. So let's go back um to our network which is now we are in the list network and you can see we have um the Ethereum um token and we also um need to have the LSK um particular token. So how to do that? Let me just come here to importing

LSK to Metam Mask. So you can just follow that route. And for you to be able Sorry, I'm looking for something. So there's a table um that you can be able to Yeah, this is it. Contracts. There's a table here on contracts where you can find all the tokens um that you want to um add on on your particular um Lisk um MetaMask wallet. Yeah. So, um if you want to add any of the tokens here that are

supported on Lisk, you just need to have um the contract address and uh yeah, that's how you add it. So let's try to add for um uh list because on that particular um account we didn't have the LSK um token. So as you can see here we only have Ethereum. So here you just uh press import token already um made or created uh previously and then select lists for your network and then uh here whereby we copied the particular contract address we input it

there. So um the contract address always starts at 0x uh A. So ensure like u because when you copy it, it will just give you a link. So ensure um ensure it it's only like a contract address. Yeah. Yeah. And then um sometimes um the token symbol might be uh populated and sometimes it might not. So um if it's not you just um write um the symbol which is already here LSK and you press next. And then as you can see it's trying to ask you if you want to add

list and then you say import. And then um we go back to our tokens. Now you can see we have LSK and we have Ethereum. Yeah. So that's how you add um a token to your Metam Mask wallet. So um in the Lisk ecosystem, we use Ethereum as um our main token. And since you are test net for however you want to do.

I've already inputed um the foret links here. So you can just use the liskia faucet or you can use um the console um sorry optimism foret. Yeah. So just come here you sign in [Music] super chain is like where where you can find the all kind of all best layer to in the ecosystem. Uh you can see as mini chain from unis swap b in lisk.

>> Yeah. >> Yeah. Yeah. Yeah. >> Uh is mainet already? Yeah. Yeah. Exactly. >> Yeah. Yeah. We do we do have mainet and you also have um um test net. So the reason why I'm showing you test net is because you're builders and most of the times um you'd want to test out either the smart contracts that you're building or you'd also want to understand how the particular tool is working before you move to mainet because once you move to mainet everything that you do is is live

like you can't backtrack on that. Sorry. because they're using preview.

For those of you who know PB um they are a very secure wallet to log in. Yeah. So you just you just assign any like any I I Oops. Again. That's okay.

Yeah, but I feel it's kind of like the reality in Africa in term of network. Um, so yeah. Yeah, no worries. It can happen to anyone. Yeah. Can I have a question while we are waiting? >> Sure. Just since uh you mentioned super chain uh I was wondering if um there is actually like uh single access to super chain or you kind of connect to that while you're connecting to your developer chain. Yeah.

>> In fact like for example on metamask you have to add whole network or different networks >> on the chain ecosystem. it you don't have like one access to one wallet itself etc. Yeah, it's I know it's quite boring. It's it's the it's the issue with um a term. I feel it's like the only real issue is um there's some network and sometimes you are super lost uh on which one uh to use etc. But actually on metamat you have to really add uh whole RPC endpoint. Uh so yeah um sorry >> no no no that's all right I I'm just um

like from what I understood like there is an ongoing um like initiative to to build up the super chain right like like the since the all the layer 2 they kind of getting uh similar in terms of standards yeah uh or do I understand it correctly >> sorry what's the equation Yeah. Yeah. Yeah. Yeah. >> For Pratiba. >> Yeah. Yeah. >> So um the question is are they trying to make it easier so that you don't have to um always like add an RPC every time um you're trying to maybe um connect to a

network or what's the question? Sorry. Uh you you know that you can um uh let me just uh send to chain list. Yes, you can use chain list. It's going to be better. Um like I mean you just have to connect your your wallet and uh let me share it on the chat and you just have to connect your Metamas wallet and then like that you can automatically add the network. It's better like otherwise you you every time have to do it manually so it's an issue.

>> Yeah. Yeah. Okay. Yeah, if you just use chain list, it definitely becomes like a lot easier than if you just use like manually trying to enter, you're definitely going to get some problems because you might miss like a link or something. Um, there in Yeah. So, where was I before we I got lost a little bit. Oh, I was trying to show you on how you can be able to um get some test nets um LSK in your particular metam mask. So, um you can use um the lisk um simply foret or you can use the super chain um um optimism for foret. Um for the super

chain one, you'll definitely need to sign in. For the um listia foret, you don't need to sign in. So you just uh put your public address there and u as long as you are in the list um culia network you just input it and then you request and then uh you can track your transaction using the transaction hash but after some uh some minutes you will receive some 0.1 um lsk yeah by request if you want to sum it you can use um the super chain um optimism one and you will get um some test nets or there. Yeah. So if um you don't get some through either

the super chain uh and also the list um you can just let us know in the in the group and then we'll see on how we can send some to you. Yeah. So now since we know how to connect um to the blockchain um we can now move on to the next thing. which is now you will be interacting with the smart contract. Yeah. So um as I' said you need to have a smart contract um already uh built for you to be able to interact with a smart

contract. So um for this you can either use uh reix um to deploy your smart contract or you can just use hard hat or or foundry. So um how many of you like do know how to now deploy your smart contracts um using uh foundry hard hat or remix let me get some reaction so that you know how to move forward from here. Well, we did uh the Ethereum uh speedrun test uh and we were able like to deploy uh to test deploying the smart contract on hard. Yes.

Uh nice nice. So um that's really great. And uh the difference between um trying to deploy also on Lisk, it's just the network. So you're just going to do like a very fast um deploying using um a just NFT contract. So this NFT contract you're just using the ERC 721 and it's recording the current uh token ID and you can be able to mint um this particular um NFT to a particular address public address that is. So on the remix side um if at all you've created your own um contract you just create a new file and then you input

your name of the contract and then you write your contract. Uh so for me here um I leveraged on the open zeppelin um library contracts which they already have like the ERC um 71 um contracts and here you just um use or you import the ERC 721 um contract instead of writing it from scratch when you import it uh your contract just um reads from the open zeppeline um contract. So here you just import or on your terminal you can just write npm install open zeppelin um /contracts and then it will install um that particular um library for you. So

um as always you have to compile um your contract first and here in the Remix side you can see it's it's compiling and um once it's compiling and if it compiles with um no errors it means um your contract is good it's it's good to go and you can be able to deploy it and yeah so as as It's compiling. Um anyone who understands maybe um this particular contract and um can can say about something that um they've not maybe um come across like maybe the use of

safe mint. Who knows what a safe mint is as you wait for it to compile. Oh, nice. Yeah. Then we do hard hat and we try like we try to deploy from remix and then I think foundry it will be

homework for you because we still running on time here. Yeah. Okay. Let's go back to our contract and see if it is compiled. Okay. So for those who don't know um how remix is is done is um here is whereby you see all the results and um yeah so always uh also for the smart contracts always keep um keep in check with your version because it's also um

going to be used in uh the deploying site. So that's the I think most people find remix easy because um you just uh press some buttons you don't need to write commands and uh it just goes like smooth. So um for this uh we are going to use uh remember the metamask that we connected um um the list network and we also um tried to get some test nets on it. we are going to try to deploy um using that and for this you're going to use the injector uh provider um environment. Okay.

Yeah. And when you um press the injector um provider metam mask, it's going to give you a popup of um the metam mask and then it's going to ask you to connect your particular um metam mask. So um let's see maybe we try to add an account or edit. Okay. Yeah. So if uh for me I've already like connected um that particular um account.

So let's maybe I try to disconnect it and then we try to see that we can connect it again. So let me go back to the wallet that has some test net. As you can see for me I have this is not real money. It's just some test net that you're going to use to be able. So as you can see if you press um here you can see the particular um site that you're connected to and you can disconnect it. So if we disconnect it and you'll see that um definitely we don't have any accounts here and Hello.

Could you hear? >> Okay. >> Okay. >> My screen is visible. Okay. >> Yeah. You should see a popup of metam mask here. Or if you just press your metam mask, it should give you like um a popup of trying to confirm um for you to connect with um that particular Metam Mask account wallet. Yes. So, as you can see, it's loading. I think I'm having issues with my network today. Okay.

Okay. Just give me a few. [Music] [Music]

Okay, so we're back. So um as you've seen I've just pressed the injector provider metam mask and uh then we get a popup of um the metam mask and it shows if you're trying it asks you to connect um to that to remix this site that you're using and then when you connect it's um now connected and you can see um your public address on it. So um okay we have to compile first uh contract [Music]

Okay. So I think we can come back to this. We try first to the hard hat and uh then come back to this because after the network has become good. So um with hard hat uh hope you can see my screen. Let me zoom in.

Okay. So um with hard hat um how you do it is you first um create um the folder that you want your contract to be in. So for me I just named it list summer boot camp and then you change the directory to be in that particular um um project and then after that you create u so this was me just trying to um line up my project nicely. So I called the project interact blockchain and then I moved to that um directory and then use the in npm init um to um create a local node um in your machine.

After that um for for it to be accepted uh then you will see um the package JSON which is uh this that has its name version and then scripts and then the author and the license. After that um then you install um hard hatut into your particular project using the npm install um d save um dev hard hatut. So um for those who might be feeling um rushing um towards it, don't worry. Um I'll also input all the um commands for you to run them by yourself. And then after that, after you've installed the hard hat, it would have installed. So you get um the

response of the package that has been installed. And then after that now you um write the command npx hard hatut for you to be able now to um create your particular uh project. So as you run the npx hatut it's going to ask you some questions like um the particular project that you do want. So for myself I went with typescript. There's other options like a javascript project. So I went with typescript and then it asks you the project route. where do you want your project to be situated in? Um then for me that was um the interact blockchain that I had created. And then it ask it asks if you want um the git ignore um

file and this is mostly used to hide either your API keys or um those huge files that you don't want them to be pushed to GitHub and that which might take some time for you to push a particular project to GitHub. So if you have any secret keys, API keys, um you input that particular file on ignore and that's the same reason why I answered with yes and then it asks you to install um the Nomic Foundation Hadart um toolbox. So this is a library for um hard hatut. And then um you say yes. And after that you'll be good to go and your project um should be um created.

And um if your project is created so um for this if your product is created you can be able now to see all of this um in your VS code. So you can open um your particular um code um using VS code using um the command code and then space dot or you can just open VS code and then um just open manually your project. So it has um artifacts cache and contract. So this is where you have your contract and then it has the node modules and your scripts. This is whereby you find how to the configurations on how to deploy your contract. It has a test

folder whereby you have all your test files for your particular smart contract to be able to know if it's running as it should. And then it holds uh env. So this is where you get JSON and packet locations where you find all your dependencies with me if you want to explain what your project is all about. So um it's the same um contract I've used um on Remix. Um the difference is just um the tool that you're using to deploy and also build the smart contracts with. So, it's just the same NFT contract whereby you can be able to meet that particular NFT to um a recipient who has a public address and every time um there's a mint um it

creates a new NFT with also a different name and a symbol for that NFT which is NFT. We also have a test case for that particular contract whereby here you can see you're using a library called chai and here you can also see we are trying now to use ethers here whereby we are trying to um see that to it that the particular name that we do have for our NFT is also um the same that you're trying to do that particular NFT. The test cases as you can see assigner to be

able to mint NFT. Remember when we said um assigners are used to um confirm that um a particular either transaction you can verify either a transaction is happening or you can verify either an action that's happening on the smart contract should be able to happen and in that particular um sequence. So um for this test case it's it's um it's looking for that owner who is a signer who has a public address and also has a private um key to be able to allow that particular um owner or public address to mint that particular um NFT and it's also going to check out if also that particular um

owner has some ET which is the gas fees to be able to mint that particular NFT. Yeah, I think that's that that's it. And also on the deploy um side whereby we have our script file for deploying. It's also going u we have configurations here um using also ethers to be able to deploy that particular um contract which our contract is called NFT and NFT. And it's also going to catch some errors if at all that particular um deploying of that contract won't be possible. So coming back here um as you can see if

you're using uh env um here um which here we've saved our private key because um remember as we're trying to do on um remix you will need your metamask wallet to be able to deploy that particular um contract to um the lisk um ecosystem. So on the env um you just input um your private key. So don't worry about mine. I'm going to, you know, change that wallet and I'm just showing you so that you know how to go about it. Also told you

all your AP. That's why we have the NV here. And uh for you to be able to know if um your test case is working, you have a command um called np npx um test. So if you run Oops. Um,

coming back. Coming back. By the way, in five minutes uh you can uh plus and dance checking.

Okay, we good. Okay, so you have to hope hope you're good. I didn't get lost >> um for the moment. We can't see your screen. >> Okay. Uh yes. Um >> okay. Can you see my face now?

>> So yeah. All good. Okay. Okay. So, um as you can see here on uh uh your particular um contract to um this particular uh network. So how you do that is by having um the configurations here in hard hadconfigs.

So here we have um the particular um same version that we here we specify our list um test um first with um the RPC that you also used to connect the mask wallet and we also specify the partic by um referencing it using the uh

private key that we've been put our env and then yes so uh let me okay so Um if you want to depend on your network as yeah and then um network is already listed as part of the network for you to be able to deploy you can just um run this command um npx verify um um list networks and then you'll see all um the commands that um are there. Yeah. So those are the other ones for verifying and um once your contract has been able to been deployed you'll get a contract address and that same contract address is the one um that you will use here in um the block scout

the block scout um let's see what is it called so in Ethereum we have a scan whereby you can see all the contracts that have been deployed and you can also interact with your particular contract. But in Lisk we use a block scout. So um we have a block scout for test net and you have a block scout for mainet. Yeah. So um if you deploy a particular contract, it's going to give you a contract address and um you can just um copy your contract address here manually or you can just press the link that's on your terminal after you've deployed and then you'll get um this particular page showing you all the details. So here we have now the contract. Okay.

From there on um I think we didn't do for remix. Uh let's see if it's okay to compile right now. Okay, I think it has I have some network issues problem but um as long as you've provided the injector provider metam mask here and it has connected with um your wallet should be um already in the list um test net. So if at all you've chosen the injector provider meta metam mask and you have connected remix with your metam mask wallet you'll be good to go by just um being able to deploy um from this side

in um reix. Okay. So once you've deployed your contract, the test the tests are doing well. You've deployed your contract, it's already on the um um list block scout. You can see your contract has already has already been deployed. Um the next thing is for you now to verify your particular um contract. So how do you do that? So um you can verify your contract um using Remix or Hard Hut. And because today we are so unlucky, we'll just um do with hard hat and from there on we can uh move on. So as you check out here um on the side of our contract you can see we have details

and contracts. So if you move to the tab of contract you see we have the code and we have the read and write contract. So here you can see the contract name, you can see the EVM version, you can see when it was verified, you can see the compiler version and you can see the contract file path which is the same as um in your VS code. So as you can see this is our contract and if you also check out with other DAPs and um you get the contact address you can be able to see uh some of their contracts here. Yeah. So um we have the ABI. I'm going to speak about it right that um later.

So let's try and verify and uh publish this uh smart contract. So when you're trying to verify and publish your smart contract, you have to choose um your license. So for me, if you check out in my in my NFT.soul, I'm using uh the MIT um license. So for that the same reason I'm going to use the MIT license and if you're using Remix uh you'll use the Solidity single file but if you're using hard hatut you'll use the solidity um hard hat and then it's going to give you um your solidity hard hat plugin and then this um hope you can see my screen.

Okay good. So this um hardhat hat config is what you put in in your hard hat um config um in your vs code. So as you can see here we have the ether scan we have u uh the ether scan API key we have the custom chain which is the network the links pol with the chain ID and the URLs which we have the um the API URL and the uh browser URL. So um the key thing here is for RPC endpoint to be perfect and also for your ether scan API key to also be perfect.

Although this is not quite um significant but it's also good for you to um have your scan um API key available there. So how you can be able to get your scan API key is you use the scan um website and once you log in um you go to um your API dashboard um you can be able to find your API keys and you can either create an API key or use an existing one. So for me I created the one with the list polia and you copy your API key and that's what you use here in your hard hat um config.

So as you check out here in the list block scout it has also given you a command um for you to be able to verify um your smart contract. So this same command is what you will use here on your command or terminal to be able to verify um your particular contract. So um you use npx hard hat verify network um then the network is definitely list uh test net and then um these um 0x uh um keywords they are your contract address that you got when you deployed your contract.

Okay. So because you're verifying your contract you definitely have to have your contract address there. And as you can see um once it has verified it will show you that your contract with your contract address has been verified and if you're trying to verify partially use force river. So if you want to check out the particular verified contract you can just find it here on the block scout and this also shows how transparent and the blockchain ecosystem works because you see everything real time and also how it happens.

Yeah. So, um once you've also verified your contract, you'll also be able to um see um your AI. So, every time you deploy um your smart contract, you're able to see your ABI. So, this is um a JSON file with all the information um of your smart contracts. And this ABI is mostly used to connect now your smart contract to your front end. and you're just going to see it um now how it's happening. So um for those who are also following on the slides um uh don't feel left out.

So, I'm just moving on um to how to read data from um your smart contract because right now I've been able to interact with our smart contract by being able to deploy it and we've also been able to see how that smart contract um being deployed moves to the uh block scout um um scan. And we've also seen how EDAS is used even in that um part of uh deploying. So um how you are able to connect um your front end. So I think VK also handled um that bit of um you being

able to create um your React um project. Okay. So um for me here I created uh the same React uh project. So um you use the npx react app um command to create your react project and then just as any other react app it has um the app.js has index.js JS has your CSS if you're using um the plain node CSS. You can also include Tailwind or any other framework that you're using Chakra UI, material UI to make your site look very beautiful.

And then where we have um now the connection between the front end and um the smart contract is the use of the AI. So um once you deploy your smart contract here uh under your block scout you'll be able to see your contract ABI. So for every person who's going to deploy their contract they'll have a different ABI. So just copy um that particular um AI and transfer it to your front end um create a file called um um your project. For me I created my NFT ABI.json because it's a JSON file. So you might um when you're trying to copy it, it might not be coming aligned as a JSON file. So you just format the

document and then you use um the JSON formatter for it to look this pretty clean. Yeah. And then um so I just created like a small um website um for you to be able to see how you can mint that NFD. It's not beautiful. I understand last week you tried to do something beautiful with react but for this I am just trying to show you how data can be read from a smart contract uh which is um the list um ecosystem and it affecting the front end um in real time. So here we just have my component which is the NFT. And then here now we um

use um ethers to be able now to connect uh your smart contract with um your front end. So um for you to be able to do that um you have to in your particular project you have to install um ethers by doing npm install ethers. So hopefully my screen is still up. Yeah, I got any questions. Yeah. So also um the the class attendance is up. So en sure you go to Google Classroom and um check um your your present um attendance

to today's class. Yeah. So if you want to install um its you just as any other react installation you just um use the command npm install ethers and it will install ethers in your particular uh front end um app. Another thing to also um be keen or take note is to note your contract address. Just as the same way you used the contract address to verify your contract, that same contract address is used to also um let know the front end app of your particular um smart contract. So that's why here we have um uh we've um been able to initialize our contract address and we've input um the contract address that

you're using. So in ether as we've also communicated of the fact that we need a provider and that's the reason why you've also seen um us um making this hook of a provider and a set provider and here it's where you see we are able to um connect the provider to the serer. So every time you go to a site um as you've seen with Jam and also phone bank um and also any other D app you'll be able to connect a wallet and for you to be able to do that this is you do it whereby if someone gets into your DAP they able to either

automatically be forced to connect their wallet or they can just do by their own by connecting their wallet or using the account abstraction method whereby they just input um their social login or their Gmail in their phone number and then they created a wallet address for that because that will be used now to transact or to also in our case here mint an NFT. Yeah. So as you can see the hooks that we did use. So this um is for this it is showcasing when you go to that site you will be already prompted um to connect your particular um metam mask wallet. So as you can see you get the user address who

is the signer signer provided by the ethers.js JS and then um you create a contract instance whereby um you declare um your particular contract with the contract address the AI that you remove from block scout and your ser and uh that particular way now you can be able to load um the contract data. If at all you can't be able to load the contract data you have a trend um catch um case there and then it will showcase you an error. If not so if you've not um connected your metam mask then you also have an alert there showcasing you to connect metam mask also you have a

function for loading the contract data where at this point we have the contract done by the contract address and the address who is the signer and here now you can see we've done um some functions whereby you can be able to see the token ID and you can also be able to get the user NFTs which is pulled down from um the contract side. So um let me show you how it looks uh on the side of um block scout whereby you can be able to interact with that particular contract even without having a front end. And this is how it looks. So here on uh contract you can see we have um read or write um contract tab and here you can see all the functions that you've um

input in your smart contract. For example, as you can see um the balance of so this one showcases you the balance of your particular metam mask um how much balance do you have and can that be able to be used to mint a particular NFT. So you can just play around um by that. So also take note we have read and we have write functions. Read functions they are used just to read data from the smart contract. write functions they are al they used to um add data or input data into your contract. So for that um you just um read and then if you reset you can just see um the particular um

balance that you do have if that particular um also um address. So here we've connected my particular metam mask address. So if you can be able to see the current token ID that I have and let's use a write function whereby you can see a particular let's use a different uh public address where they can showcase on how to mint. So let's use this it, but I'm just going to write it

automatically so that it just goes to the contract. And as you can see, I've tried to write uh to mint and write through the contract. And as always, as the signer, I'm supposed to approve that particular um transaction that I'm currently doing for minting. So, it's also going to um take some gas fees. And once you confirm you're going that particular um public address or owner is going to uh mint that particular transaction and then once it's minted you can view that transaction detail uh just on the block scout or you can just click that link and then see. So if we go back here and uh we try to see um the current ID,

we'll see that some of the of of um the NFT has changed from one to we have two token ids and um it was one previously. So meaning um you'll be able to write into that um specific smart contract. So how does that look on the side of front end? So using um this um front end that I had written um you will see how it looks. It just looks so simple. So yeah, that's how it looks. So I just call the site my contract interface uh contract info and then I have um the current um token uh ID. So if I reload it um it should um push me or if I run

my local host again it should push me to to connect my smart uh to connect my MetaMask uh wallet. Okay. So this is it. So as we move on, we will see um other other ways on how we can be able to um connect our our our MetaMask wallets uh by using um things like um rainbow wallet and others. So um this is just like um a scratch way of how we are going to do it. Um on the next uh Thursday lecture we will do like a comprehensive um way of how you can be

able to ensure that um people can be able to connect your wallet uh and how to use other frameworks or other libraries to be able to make it very smooth wallet which it's the same as our block scout whereby you can see the token ids are two and also on the front end side they are two. So let's try um writing into a smart contract using our front end so that this data goes to our contract. So let we just use a different um public address and try to mint this particular NFT so that we see if at

all um the the token ID will change. So um minting an NFT and then you will see again the metam mask asks um the signer to approve of this particular transaction. Then once it does that you confirm and then yeah it will have minted um that particular um NFT. as you can see. Yeah. And then after it has minted, it will showcase us an alert lot of mint successfully. And then just in real time, you've seen that our current token ID has um increased from two to three.

Yeah. And that's how you use um ether.js to read data and to also change data into your uh smart contract using um ether um js. Any questions? So I'll also upload um this code um to be able so that you can be able to follow. Yes, Julia, you have your hand up. >> Yeah. Uh well, thank you first of all. It was really um handy. Yeah. Um so basically we can uh keep working on our existing react project right like we

we just need to add my NFT uh JSON file >> and that's it. >> Yes. Yes. >> Yes. Yes. as as as long as you have your contract deployed uh on um that particular chain which for this case is Lisk ecosystem and you can be able to get your AI and you can be able to verify um your contract. You just connect it to the React um project that you did um last week and it's just that simple. >> Yeah. And also um you're going to do Yes. Yes. Go on.

>> Uh sorry. Uh yeah, but we would need like also to adjust interface, right? Because like it was um or we can maybe uh create a new project like duplicate duplicating it like in order to you know I'm not a developer. I don't know what is the best practice for this. Yeah. >> Um I I don't think you need to create a new project. All you need is maybe to um update your functions. for example, um have an init function here whereby um in a react um app currently right now that doesn't have blockchain is you will have

either your um JWT token or you will have your Google signing in. So in that particular function now you replace it with um the function of um pop having that metam mask pop up or having that connection of a wallet uh function. So you don't really need to do a um um everything um once a fresh again. You just need to be able to, you know, call up using this functional.

>> Okay. Data. Um, if you have a let's say a function in your contract. Yeah. Yeah. So, try and divide this. So, it will all depend on on um your particular contract on how it's it's it's managed. So um for example in our contract here we have a function called uh mint. Okay. So in your front end it just might just be an art and uh maybe buy. Okay. So that particular function that you do have for buy which might be here means NFT

might be like buy you have an on click function called meet NFT which is like buying that NFT and then here up upon this contract that you've done and then you also call upon the recipient address that you've you've received from this other um function up here when you connected your Metam Mask um wallet and when it returns you just use the normal try catch for the user to see like it's ming have a status it's minting and then uh once it's awaiting

you now um connect your public address to mint that particular um NFT and then after it has done successfully which is loading the contract this contract into your front end then um the successful of u minting that particular NFT is is okay or is good if it's not then it fails yeah so um the first thing I'd say is at least have the ethers um functioning and then have um the metam mask connected um um in your browser are using um the sign and uh the provider. So here you can see

we have the browser provider um um who set that provider. So if the signer is already um successful Yeah. Mhm.

Oops. Uh, let me check the class attendance. Um, um, I don't know. 34 people. Yeah. Um good. All right. All right. [Music]

uh we can't you properly uh we can are >> you hear me right now? >> Um yeah, kind >> um can you hear me right now?

>> Yeah, but like >> kind of >> Yeah, in the indeed. Okay. So, where did I leave you? Like you were talking three minutes ago, maybe. >> Hello. >> Yeah, >> we can see.

Yeah, we can see it right now. Can you do you want us to camera maybe? I don't know. [Music] Okay. Um I see Julia saying uh Dusk is saying she's confused uh particularly where so that I can explain it more clearly. Someone has a question.

Selena. Yeah. >> Yeah. Can you hear me? >> Uh, yes. I don't know if you can. >> So, we have to >> We're good. Yeah. I was >> Yes. Just to clarify the the confusion for Bratipa. I don't know if Bratipa can hear me though. >> Yes. Yes, I can hear you. >> Ah, yeah. I think um a few of us are just wondering um how the minting will work with our last assignment because the last assignment we made um a website that showed desserts and people could order desserts and it just needed to be a shopping cart basically. So I think we don't know how it connects to the the

last assignment. That's the confusion. >> Okay. Okay. So, so for first of all, um if you have a site that's that's um buying something, okay, it means first of all um let let me just uh showcase to you something like a so that we get to understand each other. Okay. So, um this looks like maybe that

site um that you've built and um this is just the front end side. um remove for your mind that you do have a contract or anything. This is just a front end that is clearly just built with React. Okay. So um as you can see here each and every um NFT you can uh buy. Okay. So um for this particular site um for me to be able to identify that particular user through the website they have to connect a wallet. The reason why they're connecting a wallet is with blockchain for any user to be identified, you have to have a public address and a private key. So on the side of the front, this is how it

looks. It's bare. It it doesn't have um any buttons that are reading data from any I'd say a database. But then every time you press this connect wallet, it pulls up um this particular um list of wallets. And um you press um MetaMask. And then once you press um the MetaMask, it's going to ask you to sign sign in. Okay. And when you're trying now to confirm uh

this it so um with your Okay, I think there's something that's missed. I think it's because he doesn't have probably we going to just uh turn off our camera. Um I don't know. Probably it's going to be better. Okay. Hey, we just uh turn off all our

camera to make sure um it's going to be better. Yeah. Okay. Okay. So uh maybe one of you can send um your GitHub um profile for the particular assignment and then it will be easy for me to like demonstrate. Yeah. But um as let me share my screen as I was saying as you're building your front end um understand that um first of all your contract should be depicting your front end meaning that if at all in

your front end you have a product and that product is um maybe supposed to be bought it means that in your contract you should be having that function of buying. If at all your front end is supposed to be sending money from one person to another, understand that your contract should have a function of sending transaction from one point to another. Okay. That particular um product is then um depicted in your contract using a strct.

So this particular um strct maybe has the name of the product. is has uh maybe the price of the product and then um the token the token uh or the ID of that pro uh product um it will then uh be um the ID of that particular product in your smart contract. So for the similar case as um this site of variable that I was trying to show you if it was just a web two site it will just have buy now and whatever but in in terms of blockchain they call it mint instead of buy it's just uh phrased off with a new word

called uh mint. So for the products that you do have it should have uh mint and for example for this um NFT the smart contract will look like this whereby it has a function of minting whereby you can just call it buy but because it's the blockchain terminal it just has a mint whereby it has a new item ID which is now the NFT ID and every time um that NFT is u minted you increase the um token ID of that NFT and then it's you use this um word of safe mint to ensure that um the

user is able to transfer that particular mint safely to the new public address that is minting that particular NFT. And then now you return um the new item ID that this new item ID you use in your front end to be seen as the current token ID. So that's how it it functions. So in your in your projects for react for last week first of all this is how it looks.

Okay. So we have a contract info, the token ID and the address. And then um if at all there's any user address, it's coming from um the contract. Just the same way as you read um your particular um datas from either MongoDB or um I don't know or any other database MySQL. It's the same way um you are reading um your data from um your contract. So if you deploy your contract, it already has the data as you see here in the read and write um contract. It's just the same way when you go to Firebase and you've tried to deploy your particular um product to the

Firebase and it shows you that you have um um some of the functions that you can either read from the Firebase um cloud-based service and some of them that you just read that you cannot manipulate that particular um function. So when you after you've deployed your contract the current token ID if for example this is read it means in your fronted side um you will just create a hook to um store that particular um state of that current um token ID and then um this particular um current token ID in um your front end side it's what's going to be consumed here in your uh in your

paragraph whereby The current ID is the current token ID. How is it manipulated? Every time um you're trying to um it tries to um reload your site, it runs this function of load contract data whereby it reads the token ID um of that contract. Now here it reads this current token ID and through ether because whatever is connecting this side and this side it's it as the web three library and then um using the contract okay dot current token ID imagine it as if the way you use Axio and you're

trying to um call on a product and uh that particular product has a JSON file of product and inside it it has um fields like uh product name product id. So it's just the same thing as here whereby the current the contract has um you the current contract um that has the JSON file which is the AI um a JSON file. Um it reads now contract dot current um token ID which is removed from the contract. Okay. Is is that a little bit um clearer

for I'm forgetting your name slowly. How can you retrieve the token ID or let's say I need to store the token IDE? Oh, okay. I think what Marcelo is trying to ask is something called the big save

or the how the the contract do save um the ids and how you can now reverse al so that we are going to discuss on Thursday on how you can use the big in um I'd say how the contracts are are um built in smart contracts to mint in this case transfer ownership and the token ID. Yes. Yes. Sana, you've really gotten that very well because when I've not before upload images onto IPFS. Yes.

So, um yes. Yes. So, minting is to transfer ownership and then um the the transferring of that ownership is tracked by the token ID. So um other when the product when this project grows um to now become a bigger project then every time um that that particular token ID or the NFT is now it can be pushed to um IPFS now using uh also pinata. Yeah. But this was supposed to be like the most simplest um way of how you can mint or transfer ownership of that particular NFT from one address to another.

Yeah. Any any more question on that? I'll also include like um other other projects um whereby you can be able to check out on how you can do that. has we have this I didn't finish up on that but I I'll I'll share with you um other projects like for voting D on how it can be able to you see um on the

contract of how um um you can be able to vote and it calculates the votes as as it moves on. But for this I just like created basic basic basic way of um minting an NFT um NFT IPFS images. How does it work? Okay. Okay. Then I'll uh for Ducy for that I'll have because I didn't prepare today. I'll have to cuz I now have to set the IPFS and the pinata um the piata uh file. So um for that maybe just to so that we can deal with it on Thursday. Um everyone who's here they can just go and

create an account here on Pinata and then I'll show you on how you can push your particular NFTs to IPFS and also uh Pinata. Yeah. But maybe um we can see with this maybe check out uh maybe we can try and see this contract because when I created it we used pinata so we view on the block scout. So as I' said all apps you can find all the smart contract codes on block scout. You

can also see all the transaction that have happened there. So let's check out um this and see how it works. Okay. Okay. So this is the smart contract of um this site um that you're trying to um look into and as you can see so for them they used um they used uh

what is it called? They used ERC 1155 instead of ERC um 721 and yeah so they've not verified or published their code. So it means you can't um see the contract but as you can see here um the functions that they do have the read and the right functions we have the add m function we have balance um of uh reading function you also have the ban whereby if at all at any point they wanted to burn some of the NFTs they could use that by um uh burning the particular token. You could also meet and transfer a particular NFT. You could

also get to know the creators of that particular NFT. And you could also um get to know the royalty uh percentage of um the amount that uh for this company was called Kiboka, how much they were getting for each and every um NFT. You could also renounce ownership of a particular NFT and you can also transfer ownership. For example, if you did have an NFT and you wanted to transfer it to another person, you could be able to do that by placing a bid with uh definitely um your price. Yeah.

And we also have um other functions like safe transfer from and to. Yeah. So this is how you can see uh I wish um we could be able to see the code but they didn't verify and publish the code and yeah I don't have the rights but you can see the inventory of um the NFTs. So this all of the NFTs have been stored in um um IPFS. Yes. Okay. Okay. I think we we are done.

Let's finish up on that and uh let's finish up on scaffold um list because it's almost time and I don't want to keep you waiting. So um we've spoken about um trying to do front end and contracts on different sides and um with um scaffold list you can do all this in one side under um one roof whereby um you don't have to have the need of installing hard hat. you don't have the need to create um a react app and all of this can be able to be done um here. So ensure you have like hard hat you have um your node version is 18.7. If you're using yarn use version one or two and I

think I'll leave this um to you because we don't have so much time left because um I leave it to you to go follow this um particular um GitHub repository. Try to yeah try to where is it? Sorry. [Music] Okay, found it. Try to to run this particular um scaffold list. It's the same as scaffold it. Um but this is just for the list ecosystem. Um as you can see here um you have the um side for contracts and you also have the side for

front end. Okay. So they're using NextJS for front end and for contracts they're using um hard hat. So it's just the same um way if you want to deploy it's also um we have a yarn deploy function there npm run deploy and you have a contract here. So try and go and um deploy some of these contracts like buy me a coffee um your contracts and also try and go and run um this particular front end and see how it looks and then the next time you're going to meet in Thursday we will have a very comprehensive um manipulation of the front end um side uh on how it

looks. So, I don't know if I have time. Maybe we can just Okay, you can try and run it. So okay we can try and run it and you see how the front end and the contract side um are doing. So also is used to connect the contract side to the front

end side. So this might be like a very good um use case or it will be a very good example for your particular project that you're trying to connect them to the front end um side. So um go check up on it. Um try to understand the function that they are using. um try to see um how the uh hooks are being used here and then um also try to use how to see how they've used rainbow kit to connect uh to use the case of connecting um a wallet and then in the next time we are going to be able to show you how you can be using this particular scaffold list um in your

day-to-day today u website. So the front end this is how it looks but all of this is controlled um with the contract that has been um deployed um there. So let's just try and run and start so that you see how it looks. Okay. Yarn chain I have to make a local node of this. Okay. Okay. We've not installed here and that's going to take some time.

Okay. I think I have to install this uh cmd uh time and it's going to take some time and I don't want to keep you waiting. There's an interesting question about um if we can use Skype for it and integrate our front end with that templates. Uh so the the answer is yes. Like in fact uh during a katon is what we are doing every time is like just using scaffold it. So or in this case scal disk and then um just uh like replacing uh stuff like removing everything and replacing stuff with the right front end.

>> Yeah. Yeah. So all of those that have taken you through this and trying to read I was trying to show you how you can do it like from scratch but using scaffold list this is like the the most efficient way like you could spin up your contracts and your your front ends all at the same time and it's very very very fast. So all you need is just clone it. Um do yan install and then create to your local um network or your local node using yan chain and then yan deploy to deploy the smart contracts and then yan start to run um your front end and then you'll have um your local host running and then you can play up about um changing the front end on how much or however you

want to do. Yeah. So that is homework to you and next time we are going to see on how uh we can do this using um something difficult like avoiding um um d using the scaffold um list. Yeah. So I think yes yes. So once you deploy your contract, the ABI is automatically generated in um your list block scout.

So as long as um you've been able to deploy your particular uh smart contract, it the ABI will be just on the block scout waiting for you to copy it. Yeah. So you just um keep note of this tab. So you just press the AI and then it will have been already generated. Yeah. any question probably you can uh just uh uh talk quickly like one minute what's next um on Thursday um like for example um like we will go more deeper on the IBI side etc etc

>> yeah yeah so um on on on Thursday we will go deeper on uh first um ensuring that the sign and the providers are doing okay. Um the transactions are also you can be able to transact or send um let's see a token from one person to another. We'll also go deep all of this. So because I've done on hard hatart and remix today uh we'll be using scaffold um list moving forward because the main key thing is for you to understand how it has comes in between the front end and the contract. Um also it will go deeper whereby our contract will be having so many functions. We'll also um undergo the error validation or error

handling in both the front end side and the contract side to be able to ensure that all errors are are being catered for. Yeah. But that it's going to be a little bit rough. It is going it's going to be a little bit deep. So if today was a little bit uh fast for you uh please ensure you like um go over through the slides and also the code and try to do some of the commands by yourself so that on Thursday it will be easier for you. Apart from that keep up the questions in um the telegram group because I'll be I'll be there. I'll be checking them out and in case if you want any code or any score snippets, I'll also drop them um

there and also in the Google classroom. All right. Uh thanks a lot and um be sure to be there on Thursday because it's going to be the most important session. Um and especially if you are following super well uh the next station session you will be like ready for a katon. So um make sure to be there. Um, and you're going to learn a lot of things. Yeah. All right. Uh, thanks again, Praiba. Um, and, uh, yeah, see you on Saturday.

Quite exciting, um, with what's coming up. And, yeah, all good tutu as we can say. Yeah. Bye-bye.