Web3.py Tutorial - Build Your Own Etherscan (How to Defi Part 2)

let me do one there and then i'm going to preview the buy and sure yeah why not buy it all on some metaverse index so i'm going to submit the buy [Music] be hey everyone welcome back today i'm going to show you how to build your own ether scan using web3.pi so web3.pi is a python library for interacting with the ethereum network and we're going to use that to build a tool similar to etherscan which is a web application that lets you browse the ethereum blockchain so on the site you can see how you can browse the latest blocks latest transactions you can see the current ethereum price and the median gas price and you can also drill down to a particular address or transaction so if i just wanted to type part-time larry.eth i could see uh what address this maps to and click on that address and see you know what's going on with the address what is this guy up to what kind of transactions is he making and i can click and drill down into one and see what's going on on the blockchain there so what we're going to do in this tutorial is take web3.pi we're going to wrap it up in the flask framework here that lets us develop web applications and we're going to combine those things and create a an application called ether browse here so ether browse is going to emulate some of the functionality of ether scan so you can come to the home page here and see the current ethereum price and guest price and you can also browse the latest blocks latest transactions you can type a particular address and you can drill down on individual transactions to see some of the details of that transaction to see who it's from who it's to the block number what else is going on in the details of those transactions and while building this application we'll discuss part two of the book i started called how to defy and part two of this book is called getting into d5 and chapter three and four are all about the ethereum network and ethereum wallets so we're going to go into concepts like smart contracts dapps ethereum wallets gas fees ether as money and just the ethereum network as a whole and so we're going gonna discuss this conceptually while building a real web application so if you like this type of content on this channel i explore the intersection of software development with the stock and crypto markets and so i build new projects like this all the time and show you how to do it on this channel for free and i provide all the source code and github for you to follow along so if you like this type of content please like and subscribe and stay with me because i'll be developing this type of content for the next several years at least so let's go ahead and get started with the tutorial so while building this project i want to pick up where i left off in the how to d5 part 1 video and go on to part 2 which is chapter 3 and chapter 4 which is the decentralized layer ethereum that i have pulled up here and also chapter 4 on ethereum wallets and so how do i even begin to pick this back up so this is a big topic topic and i was trying to think about how to put this video together and so what i want to first do is just start with some analogies and as i understand this stuff i try to relate it to my personal experience and my own development and finance experience and related to that and that allows me to understand a little better and i also like to build some type of practical project and that also helps me understand as well because i work directly with the data and the ethereum network and the technology i'm trying to understand so uh chapter three here the decentralized layer ethereum um it just says what is ethereum ethereum is a global open source platform for decentralized applications you can think of it as a world computer that cannot be shut down so as i'm seeing that i think of something like aws which is this general computing platform it has you know it provides a database a queuing system a way to spin up virtual machines to run code and a whole bunch of different services and then this also says decentralized applications or dapps provide financial services known as d5 so there's these decentralized applications that you can run on the ethereum network so adap or decentralized app is made of one or more smart contracts so it says a smart contract is a programmable contract that allows two counterparties to set conditions transactions without needing to trust another third party for the execution so really this just kind of sounds like a computer program and in fact if you look on twitter you can see where vitalik here said to be clear at this point i quite regret adopting the term smart contracts i should have called them something more boring and technical perhaps something like persistent scripts and so a smart contract is really just a chunk of code really right so we have an app it's composed of many chunks of code that each perform a very specific logic and we deploy them on the ethereum network right and then there's a couple more terms to be familiar with that is ether so ether is just the native currency so when we talk about ethereum price we're really talking about the price of ether and then with ether you end up paying gas fees for transactions on the ethereum network so gas refers to the unit of measure on the amount of computational effort required to execute an operation or a smart contract more complex it is more gas required and transactions with the highest gas fee associated with it will be prioritized for validation so if you remember in the how to d5 video uh i i went to token sets and bought this made of metaverse index and that had a pretty high gas fee because i guess that was either a complex transaction or at that time the gas feeds were very high when i executed that so i bought something that cost like 76 uh us dollars and ended up costing me 96 to complete the whole transaction and so uh when we're interacting with this ethereum network we have to be aware of these gas fees and when people uh just a lot of people have requested i make these bots for trading between different networks and so forth but you can see if i were to buy and sell this metaverse index token i bought uh if the fee is that high and i'm trading it around a lot i might not even be profitable even if i sell it for a higher price than what i bought it for so as someone who's been a traditional web 2 developer for over a decade now i relate all these concepts to development i've done in the past so i'm going to share with you a story of a small indie game i worked on about 10 years ago with a couple of people and this game was called battle decks and you can actually still find videos of this on youtube so you see this is from 2010 and i'll play this here right so this is a turn-based uh strategy game where you know you have these armies that battle each other so this was after zynga and farmville and games like that were starting to take off uh we created this game called battle decks you see these magic the gathering style looking cards here and you can see we have these different cards of different rarity so there's common cards there's uncommon cards there's rare cards right and you can see in the top right hand corner of this uh these have 155g 5g and so there's this concept of gold so you mine resources inside of this game and to execute any of these cards such as the lethal helicopter or enlisting a new light tank unit you had to pay a certain amount of gold to use these cards and each of these cards have different rarities and you collect these cards and so you can see there's these parallels between what we did 10 years ago in these early micro transaction type of games and what's happening right now in the space in the crypto space with blockchain based games nfts where people collect uh digital art and with different rarities and that sort of thing so when i relate the concepts we just discussed to my personal experience i think of battle battletext as the the dap it's the overall app and it's composed of a collection of programs or smart contracts so you could look at dap radar for instance for other examples of ethereum games and these are the most popular ones so number one it looks like it's axi infinity you also got your crypto kitties and the sandbox mooncat rescue so i'm not familiar with all of these i've heard of xc infinity and it looks like it's the most popular game on the ethereum network right now okay and so at the top level i think of adapt like an overall game or application so since i worked on this game i can pull up some of the old code i still have it around and talk about some analogies i see between my database programming i've done here and the blockchain and a smart contract so if i if i look under the hood here you can see some of the old code here this game the web portion was written in php but there's also a variety of procedures here and what these are are stored procedures and sql so when i first heard the term smart contract and heard that it was a program that runs on the ethereum blockchain this makes me think of a stored procedure which is a concept in postgres mysql and other relational database and i looked it up to see if anyone else had made that analogy and sure enough there's an article called smart contracts are store procedures and if you look down here it views the blockchain as a database so when i first heard the concept of a blockchain i think oh this is a database this is a place where we store data and a smart contract is just like a stored procedure so it's a function or a procedure that lives inside of the database right so this talks about smart contracts as stored procedures and there's a special type of print transaction in ethereum right that you send and this is a transaction used to create a smart contract so a smart contract is an account just like alice's account and bob's account the only difference is that it has a piece of code associated with it right so when i was working on the game battle decks we had a set of store procedures that enforced certain rules in the games of virtual goods economy so each player in this game had certain cards they had collected they could combine these cards into decks so they brought their decks to battle so they could bring like 12 cards into a battle and construct these decks in very specific ways they could subscribe to battle decks and each month they would get a premium ultra rare card they'd get a certain number of packs they could open to increase their inventory now to enforce all this we had this mysql database and a bunch of different uh stored procedures defined and so you can see here there's a procedure called enter tournament so when you entered a battle dex tournament a certain user id entered the tournament they entered a certain tournament id and it cost a certain number of points or packs in order to enter these tournaments and so there's just a whole bunch of logic here that the ducks when they enter a tournament they deduct a certain number of points or packs from their user account so it enforces uh the state of the game right and then there's also other stored procedures such as updating trades so i could trade my cards between the different players so let's say a player had some ultra rare card and i had two rare cards that i wanted to trade for a card that i didn't yet have i had a procedure called update trades and so anytime a trade was made it you know took cards out of one player's inventory put in another trades in players inventory and i just called all these different uh stored procedures so if a card that i traded was in a deck i need to update my decks to take that card out of those decks and so forth so there's a whole bunch of logic behind the scenes here and all of these stored procedures here when i call create procedure enter tournament this procedure was created inside of a mysql database and so all this code logic lives inside of my sql and that way whenever something happened on the blockchain or the database like when a new player was inserted we could automatically call a stored procedure to give that player the initial packs they got and so we would track all the different transactions in this game the complete history of the game state inside of a mysql database there's a table called asset there's one called asset transaction and so you could see when a new card was introduced into the game who acquired it first who traded it where it went uh did it get gifted to someone else did it get traded did someone sell it and and so forth and all these were recorded in a huge number of mysql tables here right and so my first analogy whenever i was thinking about this stuff was the blockchain is like a database and a smart contract was like a stored procedure now what is the difference between a blockchain and a database there's articles on this as well and the main difference here is a centralization right it says the primary difference between blockchain and database is centralization while all records secured in database are centralized each participant in the blockchain has a secured copy of all the records and all changes so each user can view the pr the provenance of the data and so when i was working on this game i had the ability to play god in the game for instance and so if i wanted to give some players some cards i could just insert some records in the database there was times when a player changed accounts and they wanted their assets transferred and i just clicked some buttons to make those transactions happen but none of the other players in the game were actually able to see that history it was all in this centralized database so the deal with the ethereum blockchain is their sites like etherscan as we discussed in the intro here if i wanted to see what part-time larry.eth was up to or look at all these transactions i'm able to drill down and see the actual history of the transactions because there's a lot of different ethereum nodes out there so this mysql database that i worked on in battle decks was stored on one mysql server it was centralized in that location we didn't give anyone access to it it was very important to keep that database secure and make sure no one saw what was inside because it stored all types of personal player data there was credit card information and things like that that was linked up in different ways so with the ethereum network there's many different ethereum nodes that are out there running they're each verifying all the transactions and there's some transparency here and then i can see when all these different transactions are occurring and what's going on on the ethereum network so it's very decentralized so i thought a good way to get started with a programming project would be to build something like etherscan where we actually connect to an ethereum node browse some transactions look up some transactions and see their details and that's where web3.pi comes into play it's a python library for interacting with ethereum commonly found on decentralized apps to help with sending transactions interacting with smart contracts reading block data and a variety of other use cases and if you're a javascript programmer there's also web3.js and even though this channel has primarily focused on python programming so far when diving deeper into these blockchain applications i think we're going to have to dive into javascript fortunately i also happen to be a professional javascript developer so i'll be able to walk you through some of these other javascript libraries and show you how to build some projects using those as well so i think that's enough conceptually for now let's go ahead and get started writing some code and building a web application all right so check this out so i have a visual studio code editor open here and i have a brand new folder i called it ether browse and i'm just going to create a script in here and i'm just going to call it uh test.pi we're just going to test to see if we can connect using web3.pi and browse some transactions so the first thing i need to do is i'm going to create a requirements.txt file with the different libraries i need and for this particular tutorial i'm going to need a web3pi and let me double check that i got this right so web3pi if i type web3pi that takes me to the documentation of web3pi and then it has a quick start here and it says pip install web3 so it's actually called web3 it's the name of the library we need and i'm also going to install the flask framework as well right and so i'm going to run this test.pi just so i can get my command line up and running here so i have visual studio code i have a test dot pi and i can do pip 3 install dash r dash r requirements text okay and that just installs all of my packages or i can just do a pip 3 install web3 like that so that would install a web 3 and i can do pip3 install flask like that and then i get the latest version of flask so that's good that seems fine and then what do i do next so after i install the web3 python package i need to actually connect to an ethereum node so i need to connect to get this data i want to browse same way whenever i want to connect to a database i need to either connect to an existing database or run my own database locally and so i need to connect to an ethereum node provider here and there are a couple ways to do this either i can set up my own local ethereum node so i need to either run this go ethereum here which is linked to here so if i click on this you see there's this go ethereum it's on github it's there's open source software that i can download that's documented that shows me how to set up my own ethereum node now this is going to be more complicated right because this can take up a lot of space i don't know the exact space requirements but it's probably gigabytes or maybe even terabytes of space to run my own ethereum node so i would need to synchronize and store all this data locally and verify it or i can use an ethereum node provider and a popular provider that a lot of people use it's called infuria here and so i can go to inferior here and what they do is provide me this ethereum node as a service so there's an http provider and i can kind of connect to it just like i would a web api for instance right and so if i click on that you'll see here in fura in fuhrer is the world's most powerful blockchain development suite so they provide a variety of high availability apis and developer tools so i can access ethereum and ipfs networks and i can just focus on a building and so what i did here is i signed up for the service so i'm already signed up so i'm signed in here and i went to projects i created a new project under ethereum i called mine ptl here and i'll show you what one of these looks like so i clicked on this one and if i go to the project settings here it gives me a project id and a project secret and some endpoints that i can use and so all we need is this infuria address right here this http address and so i'm going to copy that to my clipboard and i'll create a file config.pi here as usual and i'm just going to do infura url equals and that'll be my url and i'll go to my test.pi here and what i'll do is uh import the config that's in the same directory and let's see how i use web3pi here so this just says from web3 import web3 so i'm going to import that right there at the top and then i'm going to create a new instance of this web 3 here and i'm just calling it w3 and it just wants my url right there and so this is an http provider and i'll just do config.infura url just like that and let's see how i access this so this says uh i should be able to just type w3 dot eth dot block number and so let me type let me just see if i can print that out and see if we're successfully connected so i run that and you can see just like that we've connected to an ethereum node using this http provider and the url that was provided us by uh infuria and i printed out this block number and it looks like we're up and running so let's go ahead and keep going and build on top of that so that's the quick start guide we've just used web3 to connect to an http provider we could have used a websocket provider and we connected and we're able to get a block number and so going further if i click next here you'll see we'll dive into more detail of all the different functions and methods that are available if we scroll down let's just see some other functions we have we have some utility functions some helper functions we have some currency conversions to convert from and to whey and then there's also these api function here uh we can get balance we can get a block we can get a transaction and so forth so let's see if i can find a my particular address first so um on etherscan i was able to find my ethereum address here and so i'm going to copy that to the clip clipboard and let's see if we can browse my address see if we see what we can find out using web3.pi so i'm going to do this get balance here so let me click on that one get balance so web3.ethe.getbounce and i just pass it in an address and so i have an address here so i'm going to do w3.e dot get balance and let me try my own address here so there's that and then i'm going to say balance equals and i'm going to do a new line and just print balance and see what it gives me okay and so when i run this you see that it gives me this huge number here six nine eight six nine some really big number and i don't have that much ethereum so what what is that number it's actually in a different uh units right and so if i click my metamask wallet that's that the part-time larry address is mapped to you see this is actually 0.0699 e right and this is 699 like this and what is that that's actually a different unit so i believe that unit is way so if i type up way in ether let's see what that is so whey is the smallest denomination of ether and it's used on the theorem network one ether equals one times 10 to the 18th way so uh that is my balance in way and if i want to convert that to ether i actually need to run one of these utility functions and so if i go back to these utility functions that i mentioned earlier there's from way and two-way so since i have whey i can convert from way to ether like this and so i can just do uh w3 dot from way and then my bounce here and then type ether for the units here and i'll say my ether balance is that and let me print my ether balance okay and so if i run that you'll see it gives me this actual 0.06986 that matches more closely with what i expect in my wallet okay and so you can see here we were able to use a get balance to get the balance of ether in this particular address and what else can we do here um we said we said we can get a transaction so i mentioned that there's a function called get transaction so let's get the details of a transaction so if i click on that you can see i can call gettransaction and give it a transaction hash in order to browse the details of this transaction so let's just make a transaction happen so i have my metamask wallet here and a chapter four of our book how to defy is actually just all about ethereum wallets so if i browse down a little bit further here just to use a wallet here so there's ethereum wallets here and so an ethereum wall it's just a user-friendly interface to the blockchain network manages your private key and it and it mentions custodial versus non-custodial wallet so custodial wallets are walls where third parties keep and maintain control over your cryptocurrencies on your behalf right and so uh the point of defy is to be your own bank and so an example of a custodial wallet is for instance coinbase which a lot of people use i have a coinbase account right here and this is a centralized exchange and i don't know what my keys are i just signed up for this account and they said you know we'll we'll take care of your wallet you don't even need to know what that is you just deposit cash into here and you can buy some cryptocurrency right so this is my a centralized a wallet here a custodial wallet and coinbase took my identification card they got my bank account info a lot of information about me and i went through the sign up process to connect my bank account and and sign up for this and they have my ethereum wallet right here right and so this is a centralized exchange and a custodial wallet and then locally i have a metamask wallet so if i go further in the book here it talks about having a non-custodial wallet so by using a non-custodial wallet burn up security to yourself and you have to be fully equipped to store your private keys safely and it asks what wallet should i use and it talks about argent on the mobile wallet and it also talks about how to set up a metamask wallet and so you can walk through this or just go through a tutorial on setting up a metamask wallet and so this is just a browser extension in chrome and you set up your own metamask wallet locally here and you can use this wallet to inter interact with all these different defy apps so whenever i went to uh token sets and bought the metaverse index right and or went to a uniswap um i used my metamask wallet that's living here right here in my browser right so for many of us our first experience with crypto and our crypto journey started on a centralized exchange such as coinbase or binance we signed up for an account and we said here you go take my wallet my keys and hand it over in my id we signed up for that account and they said you know well trust us we'll take care of your money but more and more people are starting to get into defy and signing up for metamask and buying nfts and using uniswap and all these other applications and are saying hey i'm running my wallet locally i'm going to put this back in my pocket and so uh what you can do here is you can send money from this centralized exchange so from a coin base and i can click send and i can set it send it over to my metamask wallet that i have over here and so i'm going to do that now i'm just going to send some ether and so i can just say let's say i'm going to send one ether over and i'll just send that to part-time larry.eth and and there you go it's mapped to my ethereum address so i'm using an ens address here that's mapped to my metamask wallet and i'm just going to send uh one ether over just like that so a few thousand bucks here going over and i'm going to enter in my authenticator here and just like that i sent one either it says a transaction usually takes less than 10 minutes so i'm going to click done and you'll see i only have four ether and coinbase now and if i check my metamask wallet shortly and there you go i have over one ether here now and there was a new transaction and i received uh one either from myself so now if i look over at etherscan for instance there should be a record of this and you see 37 seconds ago you can see that one ether was indeed sent here and there's a transaction hash and there's the transaction hash and you can see that one either one ether here was sent from this address uh to this address right and it was a success now let me copy that transaction hash and let me see if i can use web3.pi uh to access that transaction so i'm going to do a transaction equals w3.get transaction and i'm going to type in that address here and i think it's web3.eth.gettransaction let me see heath dot get yep that's why it's not wasn't auto completing so web3.et.gettransaction just like that and let me run that and so you see right there i have the details of this transaction that i accessed from my own python code i have a block number for the transaction i have gas i have gas price i see the uh from and two and i also see the hash there and so yeah all the details of the transaction i was able to access from python code so that's an example of sending money and so i can also look at some of my other transactions so you see a variety of transactions i've made while trying this stuff out playing around and so you see one says claim here so what's a claim so i'm going to click on that and you can see where there was a mint of this azirion genesis collection so it looks like i claimed an nft in the last video so there's an example of that transaction so i could also do a transaction equals w3 dot e dot get transaction just like that and i'll print out that transaction as well and there's another one right so i run that and you see the details of that uh transaction so there's this other wallet called rainbow.me here and it says explore the new world of ethereum and what i can do is go to rainbow.me part timelarry.ethe i learned this recently and it will actually show the nfts that i claim so there's my xerion genesis there's my ens domain so an ens domain part-time layer.eth is actually an nft as well and i had another nft uh this 3d 3dfunk099 and that was sent to me by mj rossman here so thank you for sending that he wanted me to look at some data for nfts and analyze that as well but unfortunately it looks like that was delisted so i was going to show that on this video but if i go to the address on uh openc for this it looks like that item was delisted so i guess the folks at uh maybe the crypto punks larval abs people maybe saw this and said uh this 3d punk thing is copying our idea and maybe got it taken down so unfortunately i no longer have this it used to appear in my rainbow.me wallet here so now that we're somewhat familiar with web3.pi and we're able to write these command line scripts how do we build a larger application like etherscan which browses an ethereum node well we just need to wrap web3.pi in a web application framework like flask which we've discussed in the past and it's just a very simple to use web application framework and to get started we can just go to the quick start guide here as we've done in the past and i'm just going to review this real quick the quick start guide has a snippet of code you can use to get started with flask right and so i'm going to go to my visual studio code editor and i'm going to create a script called app.pi and i'm going to create a directory i'm going to do new directory and call it templates and in app.pi i'm going to put this little snippet of code that says hello world and let's see if we can run this so if we go back to our quick start guide you see it wants us to do this export flask app equals hello and they call the script hello dot pi so i call it app.pi so i want uh export flask app equals app so i'm going to do export flask app equals app so i'm going to do this just like that and then i do flask run right so i installed flask and i have flask run here and if i go to local host 5000 so it says it's running on localhost 5000 here you'll see i get this hello world here so very simple we just have a web server running and then it returns the string hello world but i don't want it to return the string hello world so i'm going to do ctrl c and stop this and note that if you're on windows there's this command here and you can do set flask app equals hello like this and so there's alternate instructions if you're running a windows but i'm using osx i'm using bash and so i use export here and there's also powershell right there okay so i have that and let's just say i want to create this dashboard here so i want to show the latest blocks and the latest transactions and the ethereum price how do we go about building this so let's say let's create this function and just call it incident hello world we're just going to call it index and so this is just our index and then we're going to say ether browse here okay so i'm going to do flask run again and run the web server and then i'm going to reload that and you see it says ether browse not very attractive yet so what i've done on my ipad here is draw a little diagram of what we're creating and so there's going to be a few different screens and so if i go to ether scan here you see there's the latest blocks latest transactions there's a little search bar up here and then we can drill down to different blocks and transactions and so on my ipad here i've separated this application out in a two different template templates and so i have a layout.html and so this is the overall layout of the page right here and you see i have either browse which is the title and every single page is going to have this common content so it's going to have an address you can type in in the search bar and then there's going to be this little block here called content and whatever your page you're on it's just going to substitute this content block here with the specific content for that page and so these are the different screens i have so one of them i'm calling index.html and that just closely maps up with the home page of etherscan and so we're just going to show the latest blocks and the latest transactions and maybe some stats like the current ethereum price here okay so that's the front page so if you can click on an individual block here right or an individual transaction so if you click on an individual block here it's going to go to this block page and so i have the route here so whenever you click on an individual block we're going to go to slash block slash whatever block id it is we're going to have a template called block html that's the presentation for this page and we're just going to show some information about the an individual block likewise when you click an individual transaction you'll go to a transaction details screen and you'll show the details of that transaction so let's say this goes to a url like slash tx slash sum id for the transaction and you just show the details of the transaction like who it's from who it's to and the gas fees for instance right so we have a transaction detail page we have a block detail page and we're going to have an address detail page and so i can go to a particular address and show the the ethe balance for instance right and then the home page is just the latest what's happening um on the ethereum node right and so we have all these different screens that we're going to create and they're all going to have a route so a web address and they're all going to have a presentation layer which is just an html template and they're all going to have a python function that drives them so you can go to address and address like just the base address of slash or an address like slash block slash id or slash transaction slash id and as soon as you visit that address we want to call a python function that uses web3.pi to talk to an ethereum node that's going to return some data and we're going to return that data to a an html template and we're just going to display that data in a nice pretty way so let's go into some code to actually construct our mock-up here and make an actual web application so the first thing i'm going to do is put my flask application in debug mode that way any time i make a code change uh it'll automatically reload the app so i don't have to keep restarting this server and so if if i search this page for debug you see there's a debug mode here and then it says export flask and equals development so i want to do that export before running my flask application and so what i'm going to do is type that and now if i do flash run you'll say you'll see it says environment development and debug mode is on and so anytime i make a change here like changing that title you see how it automatically restarted save it again you see how it's automatically restarting and i have this dynamically loading so you see all of my changes as soon as i make a code change and save it it's immediately reflected in my browser here because the web server keeps restarting and so i mentioned that i'm going to create a few templates so i have this templates directory i'm going to have a template called layout.html and so i'm creating a new file inside of templates called layout.html that's the general layout of my application so i'm going to type a layout in there just to make sure it works okay i'm going to create another template called index.html that's like the home page of my application i'm going to create one called address.html so that's like my the details of an address i'm going to create another template called uh and these just correspond to my different pages and so i'm also going to create one called transaction.html so that's just a the transaction detail i'm going to create one called block.html just like that and those are all different pages and i'm just going to type a word that describes what it does so i'm going to type address in that one i'm going to type a block in the block.html and i'm going to type index in the index.html and i'm going to type a transaction detail in the transaction page then i'm going to go to app.pi here and i create different routes or urls that map to each of these and so i'm going to do app.route and then what do we want our routes to look like so if i go to etherscan right if i click on an individual transaction so this is the latest transactions here and i'm going to click on a transaction hash and see you see how in the address bar when i clicked on that it goes etherscan.io slash tx and then slash at the actual transaction hash so that's how i know uh what transaction i'm looking at for this page and so i'm going to copy their url structure here so for an individual transaction i'm gonna do slash transaction and i'm gonna do in brackets here the transaction has so i'm gonna type hash there and then i can create a function called transaction and it's going to accept a transaction hash so whenever someone visits an address that has this structure so slash and i'm going to do tx slash hash this hash is going to be passed as an input to this function right and then what i want to do as soon as i visit this route it's going to call this function this hash comes in as this input and then i'm going to render my transaction.html template and so from here when i import flask i'm going to also import a function called render template and what i can do in my function is return render template and i just give it the name of my template so my template is called transaction.html just like that and let's see if this works so i'm going to go to local host 5000 and we'll do slash tx slash abc and you see that automatically rendered so since my url was in that structure slash tx slash and then the hash was abc in this case it automatically rendered that template transaction.html which has the words transaction detail in it right and so now what i want to do is actually in this template instead of saying transaction detail i want it to actually print whatever the hash is right and so in my python function here i have an input of hash and so what i can do here when i render the template i can pass that variable's value to this transaction template and then so flask provides these jinja 2 templates right so there's these jinja 2 templates and it has the documentation here and this is how you pass a variable to attention to template and then inside of the template you can use this double a brace syntax and then the name of the variable here right and so since it's called hash here in my transaction detail i can do transaction detail hash just like that and then whenever i refresh this route you see how my page is dynamic now so if i visit transaction abc123 blah blah blah you see how in my template it's dynamically picking up this hash from the url and placing it in my template here right and so that's the basics of my transaction template here and then this one i can also make a route that goes to my address detail right and so i'm going to have address and i'm going to give it a variable called address here and then i'll just create a route for that one as well so i'm going to app.route and let's see in here in etherscan let's see how they do it so they have an address a from address so you can click an address and so in ether scans routes they do slash address and then a specific address that they're browsing and so here i'll do the same thing i'll do app.route so i'm creating another route and flask and i'm going to do slash address and then in brackets i'll put address since that's a variable and then i can just create a python function regular python function that accepts an address and just to make it a little slightly different name i'm going to call it addr right here okay and then i can return render template and i'm just building the skeleton of my app and then i'll fill in the logic in more detail i just want to make sure the flow is working for the different routes and the different temp templates so i'm going to do address.html and i'll say addr equals ader and then my address template here i'll do the braces and addr right and then here i can just do a slash adr slash whatever and it says a not found and my route is actually address okay so i called it address here so it's slash address and then addr uh i give it some value here and then that addr is passed to my address template and that route is working as well and let's go ahead and create our final route which is block so i'm going to do a app.route and we'll just do slash block slash and then if you look at etherscan how they do it we can go to the home page of etherscan just like that and then if i click on an individual block here right you see that's a block detail so it's just slash block and some block number so i'm going to do that route as well slash block slash block number okay and then it should be app.route and i'll do def and then i'm going to call this block and then it accepts a block number as input and return a render template block.html and then i'm going to pass it my block number equals block number and that's going to go over to my block template and i'm going to do block block number okay if i do that and i do test this out i do block slash one two three four you see i have uh block one two three four five block one two three four five and so you see how we kind of got this flow going the skeleton of our application and we just need to fill in the logic here with our web3 script right and so in our web3 test.pi script you see how we got a particular transaction here and so we said a trend first of all let's go ahead and import this config and web3 at the top and our connection to web3.pi so i'm going to take that from my test script and put it up here so i'm going to import the config okay and i'm going to do from web3 import web3 and the top after i initialize my flask application i'm going to go ahead and connect to my infura url that lets me connect to an ethereum node that's provided as a service by infura and so now i have that connection so in any of these python functions i can access this w3 variable here that lets me run web3.pi functions and you see in my test i have this um i have this get transaction here and so let's go ahead and do this so i'm going to get a transaction so let's fill out my transaction route i'm just going to do w3 dot e dot get transaction and then for the hash here i want this to be dynamic so i don't want to put a specific hash i'm going to do the hash that comes in from the url right and so i'm just going to type hash right here and i'm going to assign this to a variable called transaction and then i'm going to send that transaction to my template okay so i got transaction equals transaction just like that and there you go so whatever hash comes in i should be able to get the details of that transaction and then in my display logic here let's see if i can just display the transaction in the template okay so i'm going to go to a slash tx slash and then let's see if we can get the details of one of the transactions so previously i went to my part-time larry address and looked at the address it was mapped to and i sent myself one ether and this is the transaction hash so i'm going to copy this from this url and let's see if it works on my local application so i'm going to put that i'm going to go to tx that transaction hash and so just like that you see how i typed this url pattern i entered in a transaction hash up here that matched my route that was defined here this route is mapped to a python function that hash came in as an input to this function and then i used my web3 get transaction to use that hash that came in as input from my url and then i just sent that transaction over to my template and just displayed that transaction just like that and i just dumped it on the screen so you see that's kind of ugly but it works right i have a web address that hits a web server calls python code and displays the details of a transaction and so all i need to do is format this in a little bit nicer way and then we'll start to have what looks like a web application and so let's make this formatted a little bit better now so what i can do is go to my layout.html and in my layout i'm going to define the how the look and feel of the application is and so to take a shortcut i'm going to use this thing called twitterbootstrap that you may have heard of so i'm going to go to getbootstrap.com and this is just a css library that's provided by the twitter team and they open sources so you can use it and it just says a quick start to make your application look a little bit better so if i click get started here they provide a simple copy paste way to take this style sheet that they host for you and you can just put it right here in your application so i'm going to create a new html page and i'm going to start making the structure of an html page i'm going to make a head here and a title tag i'm going to call this page ether browse and then in the head here i can just put this link to their style sheet and then i can type let's just type a big old heading here and call it ether browse okay and so in flask what you can do is define a layout like this right and then what you do is do this percent syntax here and you create a new block and i'm going to call that block content and this is a little placeholder okay and so i'm making this placeholder for content and you remember in my ipad diagram i created a layout and then i had this space called content and so what's going to happen is these other templates are going to get inserted into this overall layout so i'm going to create a body tag as well and i'm just going to place this in here and so this is the overall layout and then all these other individual templates are going to render in this little content section here and the way i do that is i'll go to my transaction html this detail one and i need to say extends layout.html and i'll talk a little bit more about what i'm doing and show it in the documentation and then i'm going to do block content just like that and then anything between this block and end block is going to get inserted into this layout when this is rendered so i'm extending the layout and then putting the very specific content for this page inside of that layout and so now when i go to this page let's see if this works you see how that ether browse appears in this page even though this template doesn't have it so it's pulling in the the outside layout and putting my specific content for that page inside and so you see i have the heading right and the footer there and then i'm inserting in my individual content for that page right here okay and you can also see the font changed a little bit because i'm using a twitter bootstrap and twitter bootstrap provides um some some utility classes for me and so it'll automatically style and pull in a nice font and now all i need to do is i can display this data in a table so what i can do is create some table tags here and create some rows and divisions so rows and cells and so let's say i want to display this transaction and i want to display the from and the two so those are attributes in this dictionary that was dumped out and so i want to display the from and the two and so i'm going to create some rows and cells here two and i'm going to give all this code if you want if you don't want to type all this out and so i'm just going to describe what i'm doing here so at the top here let's put a heading so i'm going to do an h2 heading traction transaction detail for a particular hash and then let's just type the from and two and instead of dumping the whole transaction i'm going to do the individual attributes so i'm going to do the transaction from so i have the full transaction and then i'm accessing individual attributes so i'm transaction.from and so i'm gonna type transaction.from and transaction.2 just like that and then let's see we also have a gas and gas price i'm going to type gas and gas price okay so i'm going to do a gas here right so the gas cost so transaction.gas and then i'm also going to do the gas price at the time right so do that and like that and then i'll do a transaction dot and then that's gas price right and i can do that and let's see what this all looks like let's see if it renders okay so i have transaction detail that's kind of big i don't like that but you see i also have a table here and so i have some cells so i have a from a two a gas and a gas price and so what twitter bootstrap has if you look around here you'll see some of the different components they provide and you'll see there's one for table somewhere is it under form or content yeah tables here and you see they provide these table classes and so i can do class equals table and it'll style it up a little bit more so let me try that so i'm going to do a table class equals table okay and then if i refresh my page you see my table is nicely styled just by typing table class equals table it looks a little bit better right here and they also have some other classes like striped here so let's say if i want a stripe table without having to worry about that style i do a class equals table and table dash striped and so i can do that and then we'll have the start yeah so you see how that's nice and striped or i can do like a dark table so table dash dark so i can do a table dash dark so they have different themes and whatnot and so i don't have to be a designer to make my application look pretty cool so there's a from two gas and gas price and let me make this transaction detail thing a little bit smaller so i'll use an h3 tag just like that or maybe an h4 okay cool so that that's a little bit better so you see how we kind of have the start of a nice looking page here and so i can stylize my header a little bit more and then also a twitter bootstrap provides these nice layouts and containers that i can use and you can just kind of copy some different examples here on how they style the overall layout and so now what i can do is since these are addresses here what i can do is hyperlink these to my address page right so since i have a from and a 2 i can do a link tag in html and let's just say i want to go to that other route which is the address right slash address slash and i can do the transaction from and i can also do a link right to transaction two so i'll do address slash transaction two just like that and let's see paste that in and now we have links to the address page and then i can click one of those right and i go to my address page which is pretty cool so i i can easily drill down and navigate between my pages and that'll go to my address page right and so now i have this address page so for this one i can also do the same thing i want to use the layout so i'll put this extends layout up here right so i can copy this from this page and there you go and then it's going to do an end block here and that'll be my content for the address page and did i type typo there you go i'm in ether browse for the address page right and then the uh layout i can also link to the home page so in my layout here let's make this ether browse here just always go to the home page so i'll have that go to slash like that so no matter what page i'm on i can have this go to the home page right so be on this page either browse on top go to the home page right i can go back refresh my transaction page go to the home page and so forth so you can see how i'm starting to navigate around a particular web page so our homepage here looks a little bit boring let's go ahead and add our layout to the home page here so i'm going to take this extends layout and block content and i'm going to put that on my home page right so i'm going to do that right and then i'll do end block here and then i'll say a home page and my index route still has return ether browse in it that's why i wasn't seeing my template so i'm going to render template index.html okay and let's see is that working okay there it goes there's my home page kind of boring and if you go to the ether scan homepage you see how they have the current ether price there and the current gas price so how do we get the current either price to appear in here well i don't think web3.pi includes a way to do this and so we can do is use our old friend ccxt i've been using that library in a variety of trading bots and so forth so at cc ccxt it'll redirect to this github page and we can install ccxt and so i can just do a pip install ccxt so i'm going to install that as well so in my requirements.txt i'm going to add that as another dependency i'm going to do pip3 install cc xt okay so i'll install that and let's just use that to get our price data so i'm going to do flask run okay so i'm going to run this again and in my index here let's say i want to get the current ethereum price what i can do is connect to an exchange and i don't need an api key or anything this is all very public information so let's say i want to get that data from binance i can do binance equals ccxt.binance and i need to import ccxt so i'm going to do import ccxt okay and i have a whole tutorial on ccxd if you want to look back in my video collection and i'll discuss that in full detail but i'm just going to take some shortcuts here and just get the price i'm going to do ethereum price equals binance dot fetch ticker so i'm connecting to binance with ccxt and there's a function called a fetch ticker and i just need to give it the symbol i'm looking at and let's say i want to display uh ethereum and usdc like that that's the ethereum price and then i'm just going to pass ethereum price to my template right price just like that and then in my index.html i'm just going to play uh ethereum price like that on the homepage and let's see if that works so i hit this page and you see i have this nice dictionary that has the current open high low close uh the weighted average price ask price and so forth and i can just display let's see which price i'll just display the last price here and so i'll do ethereum price dot last like that or you can display all of these right and there you go i have the last ether price so i'll just write h2 i'll do a little tag here and do uh etherprice okay there's etherprice on my home page and then now i just want it on my homepage i also want to show the latest transactions and the latest blocks the same way they do with ether scan and i'm gonna fast forward this a little bit so i don't type every single bit of this because i think this video is already an hour long right now and so i'm gonna take some of the code that i'm gonna post on github and i'm just gonna start walking through this because it's very intuitive now that you see the pattern and so i have the ethereum price and let me get some a snippet of code for you and walk you through this so i'm going to do now is i'm going to get the logic from another screen and then i'm going to paste this in okay and so what you're seeing is i'm getting a list of the latest blocks and latest transactions so i'm keeping those i'm initializing a an empty list and so what i'm doing is the same way in the test.plot pi i got the current ethereum block number and what i did was go through the last 10 blocks so i got i'm looping through the block numbers from the latest block number uh to the pre to uh ten blocks ago right and i'm decrementing by one and i'm just calling uh eath dot get block so i'm calling w3 dot eth dot get block block number and then i'm just building the list of blocks uh likewise i'm going through uh the transactions in the latest blocks so i'm creating my latest blocks i'm going to loop through each of those and i'm going to do w3.e dot get transaction so i'm getting the latest transaction in the latest blocks so this latest block it's the very last block right and i'm getting all those transactions and i'm storing them in a list right and then all i need to do here is pass over the latest blocks equals latest blocks and then latest transactions right equals latest transactions and then inside of my index.html i can create another heading and i'm going to call this latest blocks and let's just see if i can dump my latest blocks to the screen just like that okay and it says eat is not defined and so if i go in here um it's a w3.eth dot block number so i'm going to do w3.e.block number and i think what i did in my previous code i just set another variable called eth equals w3.eth and i just made it so i didn't need to type w3 over and over again okay so cw3.e let's see if that works time is not defined and let me just comment that part out all right so now this is actually querying quite a bit latest transaction is not defined uh i need an s on the end there so you'll notice there was a little bit of delay when that page load loaded because i'm using web3.pi to interact with infura and what i did was make multiple requests to infura to get details about multiple blocks and multiple transactions so that process did take a few seconds there and so you might want to add a caching layer to an application like this i've talked about redis whenever i was talking about iex cloud and also when i was talking about trading view an interactive broker so you can use redis as a caching layer so you see how it didn't display anything there i typed latest block there instead of latest blocks so i'll load that again and let's see if we were actually able to retrieve the latest blocks and there you go whole bunch of blocks there lots of data all listed out and we need to format that in a nice uh pretty way and so to do that we just need to create another table just like we did previously and so to speed this up i'm going to show you the final result and i'm going to walk that through with you and post the source code on github and you can see how the final application was built so i'm going to run this version that's filled out a little bit more and here's what i did so here is the index here that we just wrote and then we got the latest blocks and latest transactions and i also got the current time to display on the page and i passed all of this data over to the template and then the index here what i did was i formatted this a little bit better and i don't want to do a full tutorial on twitter bootstrap during this tutorial because the point was to explore the ethereum blockchain using web3.pi so i don't want to talk about css too much but twitter bootstrap provides these different classes that you can use to style up these containers on the page and so i just created a couple of columns and a couple of rows here to display the ethereum price that i showed you how to fetch i also got the gas price from web3.pi and just displayed that in gway we talked about how to fetch the latest blocks and latest transactions so all i did was loop through those blocks and create another table and so we just created a striped table looped to those blocks and then i just did a link to the current block number as i was looping through and so what i did was send a timestamp to the template and i got the current time minus the block's timestamp that's that way i can show something like 15 seconds ago so i just subtracted those and i also linked to a minor when appropriate so now when i load this page you see how i'm looping through the blocks and i'm showing like 13 seconds ago 20 seconds 26 seconds ago linking to the block number and so you can see on etherscan they also show uh miners here so this spark pool here and if you go into the resources uh on ether scan here they have a list of all these addresses that they map to miners and so what i did in the config.pi i just copied their list of addresses and minors and made this big dictionary of address and minors and that way whenever i'm looping through all of these different addresses right i can just access the blocks minor and then map it in that dictionary and i can just display the minor whenever it's available so i just play the m block minor as well okay so after displaying the list of the latest blocks i'm also displaying the latest transactions again just another loop and then i'm displaying the transaction hash and linking to the transaction detail page displaying the from in two and if you look here um on ether browse these are just tables stripe tables we're displaying the transaction hash the from into we can click on a block we just use web3.pi to fetch details about the block so if i go back to my app.pi i go to my block function i'm just doing web3 dot get block using the block number that came from the url and just rendering the template so i have my block html extends the layout we display the blocks timestamp the blocks transactions the blocks minor size gas limit so forth just another table and then i can click on the miner address here and this is just my address address function here and so my address function just accepts an address in the url and so for any address we just do the same thing we did in test.pi we get the balance we can convert it to ether and we pass that over to the template and we can pass it just like that if we have an individual address like part-time larry.eth right and we get this address right i also created this input box in the layout so if you look in the layout here there's an input that says search by address and it just has a submit button so you just submit it right and so in my ether browse i can type an address i click search it shows my address and you see my four thousand dollars there right and all this does is go to slash address and it passes that address in the url so when i type an address here hit submit on the search it passes the address in the url right and then in app.pi all i do is do request.args.get and what that does is get the value of address right here and so i try to get that address and then i just get the balance of the address pass it to the temp template and display it i can click go back to the home page here and i can display all my latest blocks and latest transactions and again i have a link to the transaction hash and so when i go to this i have slash transaction slash some hash that hits a python function i call what i use web3.pi to get that transaction hash i can do some conversions i can get the receipt for that hash and i pass that data over to the transaction html and i do another stripe table and display all those details in a table right and you can see what i also did was since it's common for me to want to display the ethereum price i just created a function right here separate from all the routes called get ethereum price and then so in each of these i just call get ethereum price and then i can just display that and it's always available in this overall layout here and yeah so that's about it that's how you create this application i didn't go over every single detail of this but the basic structure is the same i have a layout i have some url address routes those are all mapped to python functions those python functions all use web3.pi and talk to an ethereum node via via infura i get some data back pass that data to these different templates that each extend the layout and then i just display some tables using twitter bootstrap and display these in a nice format format like this and and we've duplicated quite a bit of the functionality of ether scan just by writing um what like 70 75 lines of code there and then a variety of display code using twitter bootstrap here and you get a pretty nice looking web application here that you can build yourself and i believe we've expanded our understanding of ethereum and ethereum wallets by building out uh this application and discussing uh what goes into this so this application was very uh read only we're just reading the data that's out there on the blockchain so as this series progresses as i gain more knowledge what we're going to do is get into the smart contract side and we'll get into writing a solidity code so that we we can actually write data to the blockchain and make all these different transactions happen and so we'll take the analogy i had of stored procedures in sql that's uh that are programs that are running in a relational database and we're going to create the equivalent of that which is smart contracts in solidity and have those actually write to and interact with the blockchain and we'll go beyond just this read-only browsing application and build something more sophisticated i figure we'll do something with trading and uni-swap or sushi swap or pancake swap or one of these and write some applications for trading since that's the general theme of this channel so hope you like this video i hope it helped your understanding of ethereum and ethereum wallets and stay tuned for the next one and we're going to keep diving deeper and deeper into the d5 rabbit hole so thanks a lot for watching and see you next time

Channel: Part Time Larry

Views: 7,015

Rating: 4.9555554 out of 5

Keywords: web3.py, tutorial, web3py tutorial, defi, etherscan, api, python, ethereum, ethereum node, smart contracts

Id: XcHNWuMietY

Length: 69min 40sec (4180 seconds)

Published: Sun Sep 05 2021