Santiago Trujillo Zuluaga - Getting started in web3 development: web3.js & web3 plugins🧩

Transcript

[Applause] okay can you hear me properly it's fine okay perfect yeah thank you so much Herman for that intro um yeah but something that I want to add is like ether is fine we are not competitors we are really like just trying to build more tools for the ecosystem so we are actually really really good friends but yeah you should try to to go into web 3GS uh and I will support you personally if you need anything with web 3GS so today is kind of like a mix of a workshop and a talk um I'm going to show you how you can get started if you are a web developer or if you are coming into web tree and you want to know some things you are going to learn uh today how to get a started with web 3GS so we are going to learn about web 3GS uh we

are going to talk a little bit about remix ID like we are going to write a a a little smart contract uh and then we are going to deploy this to theia network as well so you will be able to deploy your first smart contract and interact with it uh this is what I'm going to cover today first a short intro to web 3G s like the Milestones the timeline that we have then in web 3GS Basics I'm going to Cod code a little bit uh deploy the contract interact with the contract uh then I will show you some code samples as well for sending transactions linking to events uh in in the blockchain then uh we're I'm going to talk about web tree plugins so this is a new feature that we released uh last year uh that allows you to kind of create sdks

interfaces or any developer tooling for projects in web tree and at the end I'm to show you a chain link uh plugin that we have built for chain link uh so yeah I'm going to to demo that at the end so yeah let's start with the web3js intro so what's web3js web3js is basically a JavaScript typescript library that allows you to talk to any evm blockchain normally if you're a developer and you want to interact with a blockchain you need to send these uh things that you see in the top that are basically Json RPC calls but if you're a developer and you need to talk to the blockchain that would be really complicated to write these Json RPC calls manually so that's that's what you need to do that's what we do at web 3GS

we kind of abstract these Json RPC calls into JavaScript so when you want to get for example the get block number of the blockchain you don't need to write these RPC calls and you just write the web tree. E.G blog number and it's a way easier way than than these Json RPC calls uh so that's basically web 3GS if you want to talk to a different blockchain in this case you need to initialize the web three op object here uh with a different RPC endpoint so in this case is this is to talk to the to the ethereum mainnet but if you put a polygon end point here you will be talking to the polygon maget um this is kind of like a DB communication flow that allows you to understand the big picture of a of a daap so if you have the adap this dab

will be used in the background web 3js and then web 3GS will use this provider that is the RPC endpoint to communicate directly to the blockchain node so that's why web3js is compatible with any evm blockchain just by changing just by changing this endpoint that you see here this link you can talk to any any uh different network so yeah that's how it works that's the D communication flow this is a short timeline that we have for web 3GS web 3GS was created in 2014 by Jeffrey wil one of the ethereum co-founders yet in then after that mer cwis from parity Tech join him as a lead maintainer of the library web 3GS is an open source so anyone can contribute to the library uh then in 2015 Fabian boel

Stellar the ERC 20 standard Creator took a took over as a lead maintainer of the library so far he's still the number one uh alltime contributor to the web 3GS repository and then in 20120 Chains safe came into the picture to to take over Sal maintainer thanks to the ethereum foundation and nomic L foundation and since then we have more than 1,000 pull requests from external contributors we have 18,000 stars on GitHub and we also have we have released the version 4.7 uh last week some of the Milestones that we have at chains saafe with web 3GS in this uh three four years the main one is that we rewrote and refactor the whole library

from JavaScript to typescript because it was written in JavaScript uh now web 3GS is compatible with egas scripts and commonjs modules we reduce the library size from 329 kiloby to 156 we rebump all the documentation as well so you can find all the apis the tutorials all the um code samples and videos as well we have videos on YouTube about the about how to get started in web 3GS uh and the last thing the usage that we have right now we have around two million of mpm downloads per month and 19 million of CDN request so we are still around and we have a lot of usage currently uh okay so now let's go to the fun part uh these are some basic things

that you can do with web 3js so you can fetch data from the blockchain interact with wallets and accounts deploy contracts listen to events and transactions I'm going to do the first five more or less um and then if you want like I will share this in the web 3GS Twitter later so if you want to to see them you can just click there and then you will be redirected to the to the slides so the first one is yeah so let's start with the web3js installation so what I'm going to do is just to create a note project it's taking a while yeah and then I'm going to to do like everything from scratch with you so you will be able to to

follow so the first thing if you don't want if you don't have for example vs code or any code um editor you can also use a stack bck this is a really good um alternative and then you can just create a node yes project here but yeah in this case I'm going to use my code editor so let's say it perfect so here I'm going to create uh note projects to create a note project I'm just going to type mpm in it- y so to make sure that we created a note project you will see the package.json in the code editor which is here perfect so now now we have this this uh node

project so to install web 3GS we just need to run mpm installed web3 so that's what I'm going to do now mpm install web tree and then you will see the web tree Library here in the dependencies a few seconds okay after the installation the main things that we have to do now is to initialize the provider so this provider is the note mpoint that I told you that you can change to talk to any any blockchain so what we can do is first we need to to let me just create a index.js file we need to import the library the web tree module so we just

need to type cons curly braces web tree with the w uppercase requir from web tree okay and after that we need to initialize the provider so to initialize the provider we just need to type new web tree and then we put here the note endpoint that we want to talk to uh one thing that I recommend if you if you are like testing you can come to chain list.org and you will find a lot of different uh note endpoints like for example the the main B smart chain arbitrum so in this case let's talk to the theor mainnet so I just click here and then you will see a lot of end points here right in this case I'm going to use the first one e lar rc.com just put more zoom

here okay and then I just put that here okay so now web 3js is um able to talk to the ethereum mainnet right so if we want let me just fetch data from the blockchain the first thing that we can do after we initialize the provider is to fetch data from the blockchain right so to initialize to to fetch data from the blockchain we just need to use the web tre.it package and then we can use any method that we have we have a lot that's why I put here the link if you want to explore more so the first one let's just create an asynchronous function uh okay so in this as synchronous

function I'm going to I'm going to fetch let's say the block number the latest block number and then I'm going to store this in a variable let's say called block okay so this is how we can fetch uh the the latest blog number or you can also use get gut price you will see all the different methods here uh if you want yeah Chen ID Etc get block number and then let's just print that here eum then let's put block and then if we run this hopefully that will work we can see that this is the latest block number and then a little extra thing is for example let's fetch the same blog number for but for the polygon

so what we can do is that we can type web 3. set provider and now I can set a a endpoint here to talk to polygon and then I can come back to chain list and then let's look for polygon polygon Lama RPC and then if I run the same thing here uh but this polygon then block two say block two and then if I run the same then we will have the t is this one and then in polygon it's taking a while when that happens is because the RPC endpoint is kind of that that happen when you use public RPC endpoints so

normally you should use like alchi quick note yeah let's run it again oh yeah and then we have here so this is the latest blog number for ethereum and this is the latest For polygon so yeah this is how you can fetch data from the blockchain now let's do something else do something more exciting okay interact with wallets and accounts so who from here knows what is an account everyone knows what is an account in in web tree okay perfect yeah basically an account is just a pair of a private key and an address right so if we want to interact with an account what we need to do there are two different ways the first one is with a private key so we

can initialize our own account with a private key or we can just create a random one uh always we need to import the web tree module and initialize a provider so I will copy paste this this is like a requirement everywhere for whatever thing that you do with web3js you need to import the web3 module and initialize a provider so for accounts I will just copy paste the same uh and then we just initialize a wallet by typing web3 doe. wallet. and you can put your private key here uh let just remove these things perfect so if I go to metamask and then I check my private key uh this one and Account Details show Private

key don't forget to use this only for testet and don't put public funds here um so I will put my private key starting with ZX that's something that is a requirement for all the hexadecimal values uh now I I'm able to interact with this wallet so if I console the wallet you will see what we have in this wallet note accounts perfect so we have a wallet with with one account which is this address this private key and then we have some methods which is which are sign transactions sign data encrypt and some other things that web 3GS will use under the hood to be able to sign and send transactions um so that's how we can interact with a with a wallet so

that's basically that part we will need we will need always to initialize a wallet if we want to deploy smart contracts or interact with the smart contracts okay so now let's deploy a smart contracts so what I'm going to do here is that I'm going to remix ID I'm going to write like a simple uh smart contract with two functions um let me just create this let's call it message. Sol um always to write a smart contract we need to put a license so I just I will just copy paste this a license and the compiler version when you go to remix you will see this default workspace with contracts scripts and tests uh but yeah we don't we don't really care about that today uh we will

also use the solidity compiler here to make sure that the contract compiles properly and then let's just write the smart contract I will use the version 0.8.7 can use like any any version that will be fine then to create the contract we just need to type contract and then let's put my contract here perfect so this contract will have why it's showing me this error this contract will have one state variable which is a string uh that will be a message right so let's put message here uh a Constructor who doesn't know who is a Constructor I can explain a Constructor perfect so a Constructor is

a function in the smart contract that you can call only once and that once is when you deploy the contract so if you have the contract that you want to publish or deploy in in in the blockchain you can use this Constructor only in the deployment but then after that the Constructor kind of disappear that you cannot call that any anymore so that's the Constructor and this Constructor will receive the first message to set up like this this message variable here so let's call it first message and then to do that we just need to overwrite this like that perfect so this will rewrite the the message um and then we need two functions one function to get the message the current message that we have

and then one function to update the message so the first one will be to get the message let's call it like this this will be external view returns memory okay and then this will return this just put some Zoom this will return this message that we have here so we just put return message okay perfect so that's the first function then the second function is to set or let's say update message so this will be external and then this function needs to receive as a parameter a string that will update the message right so let's put here string memory new

message and then here we just overwrite the state variable with the new message perfect any question so far with the functionality of the contract it's kind of clear just to set the message perfect and to retrieve the message okay so if we want to deploy this a smart contract using web 3GS we need two things the ABI and the bite code so if you want to know where to get this Ai and the bite code you can come to solidity compiler here then you can scroll down and then we will see the AI and the bite code Like Remix ID uh compiles this in the background and then that gives you the AI and the bite code the AI is basically an interface that allows like JavaScript web 3gs to talk to the contract because

it will kind of uh destructure the functions in in a in a way that is readable by web 3GS and then the bu code is what is uh deployed in the in the in the blockchain so let's copy the ABI here and then I will just create a ai. Json file and then I just paste this and the bite code Json perfect this bite code needs to be within quotation marks and starting with ZX because it's a hexadecimal value and all the values in the blockchain are stored in as a hexadecimal value so starting with ZX perfect so now we have the API now we have the B code so now let's create a script

deploy to deploy the smart contract so again what we need to do is to import the web tree Library let me just copy this so we just need to import the web tree library and then we need to initialize a provider in this case because I don't want to deploy this to the ethereum maget I need to look for a provider to talk to the poia testnet so I can just type seoa uh we can check this include testnets then we will scroll down and we will see seoa here and then the same thing let's just get a this seoa from tenderly okay so now we are talking to

the sepolia test net and then let's create the function to deploy okay so the first thing here I have in the slides to deploy the contract uh is to initialize a wallet now you know how to initialize a wallet we just need to use the wallet. ADD and then the private key that I already have in accounts make sure that you have funds in this in this wallet otherwise it will not deploy the contract because you need funds to deploy the contract so if we come here you will see that I have 1.9 seoa e here um okay so now we have the wallet with funds we initialize the contract by typing new web 3. it.

contract and then we pass the ABI oh I need to import the AI here uh require and I need to import the B code as well perfect uh so we just need to pass here the ABI as a parameter so web 3GS know knows like which what is the structure of this contract after that we need to create this contract deployer so we just need to type the contract instance in this case is my contract. deploy we use this method deploy and this will receive two um parameters here here the first one is the data and then the data that we are deploying to the blockchain is the bite code itself so that's why we need to send the bite code

and then the arguments are the arguments of the Constructor so in this case the Constructor is receiving a string that will be the first message so we just need to send any message like for example hello Suk right and then after that we can send the transaction to send a transaction we just type deployer do send and then in the send we need to specify which account is sending the transaction so in this case it will be my wallet my wallet and then in the position zero of this array do address which will be this this account or in if you don't really get that part of the array we can literally just copy paste the address here something like that yeah so this is my wallet u in the

position zero. address is basically this address here uh and then if you want to know the address of the deployment so we can store this transaction receipt here and then we can just print it console log transaction receipt transaction receipt do options do do address and then in this way we will get the the contract um the contract address once we deploy it so now let's run this hopefully it will work as well clear note deploy okay oh when we get this rate limit exceeded is the same thing that happen when you use public RPC endpoints so let's just change for another one oh

yeah let's change another one let's run it again and if not I will just change it okay so now let's change the RPC okay silence hopefully will work now perfect so now we got the contract address which is this one so we can go to sepolia doc.io which is like the like The Ether scan of the like the blog Explorer of sepolia we can put here this address which is the address of the contract

that we just deploy and we'll see that there is nothing here this is updating this takes like a few seconds and then the contract will be here yeah perfect so we can see that 29 seconds ago I just deployed this to the sepolia testnet uh we can verify the contract verify the contract is just basically publishing the code so every time that no someone interact with this contract they will know what is the code of the contract that they are interacting with just by clicking verify and publish here uh this is the address that we just deploy the contract uh this is a solidity single file because it's just like one file you saw it uh compiler version is 0 point 8.7 so we can put this

0.8.7 um and the license type is this one GPL yeah three perfect so we can continue enter the solidity code so we just need to copy paste the whole code here and then put it here in the seoa blog Explorer verify and publish perfect so now the the the contract is uh verified so now if we go to seoa to sepolia it scan we will see that the contract has this little check because this is a verified contract that is a verified contract doesn't mean that it's

not a scam contract you can still have verifi uh scam code right it just means that the code is here so you can will be able to see the code right as you can see it's just the same code that I just wrote in in in remix ID and you can also interact with the contract clicking here in read contract so if we read contract and we go to the get message function we will see that this is the last message right and the right contract we can set up a message but then let's do this with a scripts using web3js so that's how we deploy a contract with this code now interacting with contracts there are two main functions in in contracts that we can interact with one is the reading functions that just retrieve value and then one is the writing function that we

can update a value in the contract so to interact with these reading functions we just need this code um let's put interaction. okay so I will just copy paste the same thing of the import web3js import the ABI because remember that we always need the AI to interact with contracts and then we initialize the provider with the sepolia uh endpoint and then let's create a a synchron function here and we can put this inside so what I'm doing here is first we initialize the contract by typing new web tree. if. contract we need to send

the ABI as a parameter and then the address of the contract that we can find it here in the sepolia so I can just copy this address here and put it here perfect so now we are interacting with this contract what I'm going to do is to call the what was the name of the function uh get message so if we want to interact with this get message function what we need to do is to type my contract do methods and then the function name that we are calling in this case will be get message and then we put do call because this is just making a call that is a a reading function but if you are sending a transaction you just put do send so yeah in this case do call uh we can store this value in the say response and

then we can just print this and let's run it now interaction okay and then we can see that we just got the the value that we just updated in the the smart contract that is hello CC so now let's interact with the other function which is set message so to interact with that function what we can do let me just put set message here let's change this one for read message perfect so to interact with this read set message function I also have here some code uh interacting with writing functions so this one the only difference with this one and and the reading functions is that we need to set up a wallet because we are sending a

transaction so every time that we are updating the the state of the blockchain or interacting with a writing function we need to send a transaction so that means that we need to have funds in that wallet so first we need to initialize the wallet the same way that um I did it previously here with this private key using web tree. E.W uh add and then we just add this private key with funds uh initialize the contract new web. e. contract we just pass the API and then the address again same here we always need to initialize a contract if we want to interact with a contract and then yeah we are all set to start using using the to send a transaction so here is the same thing my

contract. methods do function name in this case is set message I think uh ah update message is update message perfect update message do send and then we need to specify the address uh from where we are sending the transaction so in this case will be this wallet address uh and then this will return the transaction received so if you want to print it we can just put this store the value in the transaction receive and print it in the console uh if you want to just get the transaction hash oh let's just print this and then you will see everything then we can call set message let's yeah let's just call set

message now oh yeah you're right wow you're okay you are engaged thank you uh tell me the message what do you want to put no pressure no pressure an emoji I don't know what what will'll show in the blockchain I don't know if that will be able to let's see okay let's see if that will work um okay so now the interaction then we are using this and then we will get the transaction receipt

here the main thing in the transaction received object will be the transaction hash because if we have the transaction hash we can copy paste this value in the in the blog Explorer and you will see the transaction so this is all the transaction object the block hash blog number all these things from the wallet that I sent the transaction the gas used and the transaction hash is this one so let's copy this and then we can go to the blog Explorer we put the transaction hash and then here we can see the transaction information is Success uh the blog status the trans to the contract that we are we kind of communicated to from from the wallet that is my my wallet in this case so

let's check what is the message that we have right now oh we can see here that 37 seconds ago uh I just called the update message function so contract read contract get message and we have this lovely rocket that was a great idea perfect so then if we do this now if we can read the message again let's let's see what's the value that we get here note interaction okay and now we get this this rocket wow that's amazing uh perfect so that's basically how you can interact with a contract uh then I have also some other code here if you can listen to the events you can send transactions I'm not

going through all these things um okay and now I can walk you through the web Tre plugins oh yeah we are kind of on time that's that's perfect to show you the web plugins uh the web3 plugins is just like a latest feature that we have in web 3GS you can leverage any web 3GS functionality to create your own SDK your own um interface or your own developer tooling for any type of project so some of the use cases that we have are creating custom RPC calls this is useful for layer ones or layer twos that are kind of a little bit different from ethereum if they have some specific RPC methods uh this is a really easy way to create web three apis for web to developers because they don't need to care about a contract addresses they can just

directly interact with the with the with JavaScript with these functions uh also contract wrappers complex function arguments custom logic and Oracle calls um let me put this full screen um okay why webt plugins web plugins will give more accessibility to all the Web projects will drive more adoption as well because it's a really easy everyone use JavaScript or at least is the most used language among developers um this is also really kable because the web Tre plugins are just mpm package with a lot of reusable code that you can uh any developer can use at any time and the short learning curve of learning a web tree plugin is way easier than learning a protocol from a scratch so if you create like a web tree plugin

like a uniswap SDK for example it will be easier to understand the Unis swap SDK instead of going through all the different contracts and mechanisms of Unis swap um how you can create a web plugin this is the code the first that you need to do is to import the web tree plug-in based module from the web tree library then you can create a JavaScript class in this case my plugin which extends from the web tree plug-in base you can you need to put a name in this case the property plug-in name space and then I just put this my plugin and then you can create any methods that you want so you can send transactions deploy contracts interact with contracts listen to events one of the um use case that we have that was like a fun thing for haon

that we did is integrating a web plugin with the Google API so we have a plugin that can listen to the events in a smart contract let's say a token and then with using the Google API you can write all these different uh events into a Google spreadsheet so this is just like uh this give you like a lot of unlimited possibilities to integrate web3 with web 3 or web3 with web two and and everything yeah so this is just some of the oh this is the usage that that um this is how simple is to use the plugin so we just need to import the plugin we initialize the plugin just by typing new my plugin and then we can use the different methods that we have in the plugin in this case my plugin do do something so it's kind of really simple

and and it's giving a lot of um easier usage for developers uh really good example that we have for super fluid is super fluid is an asset streaming protocol and if you are a developer and you want to interact with super fluid you need to talk to some forwarders which are contracts on chain and then the forwarders will talk to the host contract which is like the main the main contract with all the core functionalities of super fluid but then we created a plugin that allows the developer to use the web Tre plugin off chain so they don't need to send a transaction talking to these forwarders and directly the plugin will kind of abstract the forwarders functionality and will talk directly to the host contract so this is really good because

it's improving the developer experience uh is also having less calls and transactions so that will that means that will'll have less gas fees for the final users so yeah it's just about exploring the different possibilities of the web Tre plugins uh another example of swis tronic which is a layer one build on Cosmos SDK uh if you want to make calls calls are this communication to reading functions when you want to get the message for example if you want just to get the message in swis tronic you need to do all these things you need to encode the function encrypt the data field make the call all these six six steps but then with the web plugin you just need to encode the function you call the plugin and the plugin like

abstracts all these different functionalities all these different things is doing this under the hood and then you can just show the result at the end if we translate this into code this is something like that this is how we can make calls uh to swis tronic all this code that you see here will not go through that uh and then using the webt plugin is just using the webt tree. sestonic dool and then you will you you need to send the contract address that you want to talk to the data and then that will just manage everything under the hood um and then for chain link plug-in I'm just going to show you the same like the same example of how it works so who from here doesn't know what is chain link data fits everyone knows chain

link okay perfect yeah chain link is just basically a bunch of smart contracts on chain and then if you want to retrieve the price of Bitcoin you call a smart contract that's how everything kind of works so if you want to get the Bitcoin price what you need to do is to look for the AI of a smart contract you need to look for the address of the smart contract that you want to talk to because they will have different addresses if you want to talk to if you want to retrieve the Bitcoin price or the ethereum price uh after that you can initialize the contract using the same things that I show you new web tree. contract you call the contract and then you can show the result but then using the web tree plugin you just need to initialize the plugin you can call the plugin which is

a get price it's called Web threee get price function and then the plugin will look for the API of the contract we'll look for the address of the contract because all the addresses are stor within the plugin as well we initialize the contract and will make the call so all these things are happening under the hood for the plugin kind of abstracting more things for developers making it easier for them to to use chain link in this case this is the standard way to interact with chain link you need to do this kind of five steps but then with the plugin you just need to install the mpm install at chains safe / web3 plugin that chain link you need to import the the chain link plugin and the web Tre module as well and then to use the chain link web Tre plugin you just need to

initialize the plugin here you need to call the web tree. register plugin to kind of give the the provider context to the plugin and this is the main function which is called chain link do chain link plugin. getet price and then we send main at Price fits btcusd but then you can change this for ethereum USD or add a USD and then you be able to talk to all the different contracts that that you have in chain link and and yeah here are some resources in case that you want to learn a little bit about web 3js we have these two web 3js series and web 3js course uh for beginners we have the web 3js documentation and then if you want to get started building a plugin which is easy and you can start

depending on what you want to do but you can do it in 20 minutes right and here we have a video as well that will be really useful um you can find us here uh at chains saafe th on Twitter uh also web3js I'm going to share the the slides in this Twitter web3js you can find me on Twitter LinkedIn telegram everywhere at Santiago devrell and also if you want to in to use the web3 plugins that we have web3 js. org plugins and yeah that's everything for today thank you so much is there any any questions everything is kind of clear okay I think the best will be to send me

a message on Telegram and then if you send me a mess on telegram I can set up a a a telegram group uh but everything is kind of in the documentation but I think the best is setting up a telegram group and then I can give you oneon-one uh um developer support yeah something else everything clear amazing oh yeah how's it about wallet interaction wallet interaction uh what do you mean by wallet interaction like normally what you can do with the wallet is send transactions right and that's what we were doing like every time that we interact with a contract we are sending the transaction but what specifically like do you mean like from a uh okay so if you want

to oh for example metamask I I have I will show you something really quick if you want to use metamask the only thing that you need to change is actually I have some code here that was a really good question uh is it must be here Heth deps react I will show you something you just need to do the same the only difference is when you initialize the provider so instead of initializing the provider with an endpoint we need to use two things let me just perfect so we just import the web tree here but then to connect to

metamask we just need to initialize the provider with an object that is called window window. ethereum so when you use this window do ethereum you're initializing the provider with the injected provider that the user has in met mask because it will show this popup that is called webt tree. it. request accounts and then it will connect it will connect the wallet for example let me show you this really quick actually I think this will this will work hopefully uh mpm start I think it is uh it's in test the test okay so yeah it's just like these

lines three lines of codes this is just like a simple thing that I have let me just open the console here and then if I click in Connect you can see that then metamask is showing here and then you can show you can choose which wallet you want to connect so I want to connect this It Oxford wallet I click in next connect and then here in the console you see account connected so now now I'm interacting from that account and then it's the same thing if you want to interact with a contract it will be the same my contract methods do function name do send because you are sending a transaction and then from uh this accounts. address oh accounts zero yeah accounts zero so this is basically how

you can interact with a contract so now if the user clicks here it will the metamask will pop up to to confirm the transaction and everything but yeah this is how you can use the injected provider in in a react application for example yeah great great question yeah something else WR clear amazing thank you so much