So you can see I have already installed this extension so if I click on this this is what I have it's called the blockchain coder So currently I'm testing the model which we have designed for this particular wallet so one can send the money straight away directly toTheir any wallet address so for example if I want to check the balance of my wallet so what I will do first I have to get the address of my wallet so I will come back here in the metamask and I have to get the address and that's so sometime happen soYou can see this is the metamask and I can simply copy the address come back to the extension we have built and if I paste here the address it will give me the balance because currently we are dealing with the polygon test Network the Mumbai test Network andHere you can see that this much medicine I have in my wallet and if you come back to the metamask you will find that this is the exact Wallet balance displaying here 1.55768 and that's the same amount I have here in my wallet so it's gone so IHave to make a one more request you can easily able to build a lot of feature into this extension so you can see we can easily able to transfer sorry we can easily able to fetch it then take the private key here come back here let me grab theAt this point I want to transfer the fund and from here I can select the amount so right now I have close to one mati 1.5 Magic on so what I will do I'll simply I'll simply make a I want to transfer something very less so I'll say 0 0 1 2Okay this much amount I want to transfer to this account number two if I click on this transfer it's going to make a transaction so just wait right now you can see the transaction is happening and it will give us the transaction hatch which we can confirmEasily on the polygon scan so you can see you can click here and you can confirm your transaction so once you click on that it will take you to the poly scan and here you will find the transaction you have done and all of you hope icons are great so hereYou can see that I have opened the project in my vs code you can pick any code editor as per your choice as per your comfortability so what I have done so far I have created a folder by the name extension and in that I haveCreated all of these files and we have nothing in this file so you can see this is the first file we have ether.js in that we're going to keep the library ether Library which will allow us to interact with the blockchain then we have this image you can take any imageBut make sure to keep it in 1500 to 1500 means one is to one Instagram posts like uh Dimension you have to keep that's the image and this is the let's close this one and this is the Manifest file we have in that we have to provide all theImportant information because when you will deploy this particular extension to the Chrome there you have to Define that what is the version what is the name what is the images what is the file you want to trigger what is the background script we want to run so all the things you haveTo Define into this we're going to Define it together then we have this pop-up HTML and then we're going to write the entire UI part then we have the pop-up JavaScript that we're going to write the simple all the logic then we have the CSS file for The Styling soIt looks pretty fine to me make sure to create all of these files and we're going to write it together don't need to worry about it and again the final code is already provided to you on the blockchain coder and I will provide you the link in the description so you guysCan simply click and you can get that accurate and open your browser and first thing we have to get the entire library in our project so let's click on come here we have to type ether.js sorry ether JS and hit enter and this is the very first link onWhich you have to click and here you will come to the official website of ether.js and here you will find all the information about this particular package okay so what you have to do is come here and here you have to click on this get started and you have multiple way to useThis library in your project you can use it through npm or you can use through node.js or you can simply use the CDN so everything they have explained extensively here but we're going to follow different approach this terms we're not going to use node we're notGoing to use CDN you can see we have this script so if you want to use as a node modules you can do that in your HTML that's the one way and we have another way using this as a CDN but we have an issue with the CDN because when you will deployThis extension in Chrome at that time the external libraries which you are using in terms of C10 it will not work so it will throw you an error and sometime Chrome extension don't allow you to add any external external libraries so what what I'm going to doIs I'm going to download the entire library and we're going to use internally so you can see right now everything is looking absolutely fine this is the script for the HTML but we're not going to use this script you can use it for testing locally but whenYou will deploy it will throw an error so make sure to click on this ethers Library if you click on that it will open the entire Library entire code and we need this entire code that's a huge code that's all code we're going to takeIt in our project and we're going to use it internally so just follow along with me you can see there is bunch of methods bunch of programmed bunch of function is written already here we have to do a little bit changes simply copy that one come back to your projectAnd we have to click on this ethers and paste here simply you can see we have a huge code let me save it and here it will form it because I'm using eslint in my in my vs code that's why the moment I'll save it will format the documentThat's a huge line of code close to 30 000 lines of code they have written in this particular Library so we're going to use this entire Library we have all of this function you can do the modification if you want to make your library with little lightAnd you want to use it only those function you want then you can do the modification very easily you can see these are the function we are exporting from this entire Library so what I will do is we have this base contact big number contract contract Factory big number signatureVoid signature then we have the wallet wall list we have all of this I hope you guys are familiar with this if you want to get a default provider you can easily able to get that you all you have to do is to call this method and that what weDo when we use as a npm library but here what I'm going to do is I'm going to delete this one because sometime this modules and Export module doesn't work in the library it will it will throw you an error so it's better to remove thisOne and we'll use it as a plain JavaScript so this looks pretty fine so that's the entire library and that's the only thing you have to do in The Ether package that's the only thing make sure to download The Ether Library change remove the export and that's ready here we haveThis fav icon see this is the entire one and this is the Manifest now let's start writing the code in the Manifest and set the rules and provide the information so our Chrome browser can identify our extension the versions and the images and all so click on that come here let'sDefine that so first thing we have to define the name of our wallet so we'll say crypto wallet you can call it anything you want this name is going to be your extension name then you have to give the description to our wallet transfer fund to any walletThen we have to give the version so make sure to pick any version you want but when you build any any particular application for the very first time this is the version you have to assign one two three four and that's goes on and on version now we have to give the ManifestVersion so so generally we have two type of version version two and version three so version 3 is the latest one and that's what is recommended in the in the Chrome documentation so that's what we are following here so we'll take the version three then we have to take the action so whatAre the actions we have to provide so here we have to mention the files which we want to trigger so what we'll say we'll say default pop-up and this is the HTML file we want to trigger and we want to set our icon so this isThe icon file I have the image I have in form of PNG so that's what I'm going to add it then close this one now we have to take the icon so here you can default Define the default icon Behavior so there is a multiple icon size which ChromeExtension wants you to provide so like the sizes are 16 in all the sizes I'm going to provide this particular image but as per the as per the sizes you have to re re-crop the images and you have to assign the image size in exactly the same way otherwise the images will notDisplay in the Chrome browser and the reason why they ask you to provide multiple size of images because they're going to display based on the different screen sizes okay so we have the 16 then we have the 32 on the same I'm going to provide this one then we have the 48.And the last one is 128. so we have all the different size of icons now come here here we have to define the permission so what are the permission we want to provide so here there is a huge list of permission but I'm going to follow three permission types so we wantThem to allow in new tabs we want them to bookmark and we want to allow them to unlimited storage and Native Messaging so these are the permission we have to provide in the extension and this one is the most common use when you build the extension one okay so that's the entireManifest Json file we have for our extension hope this entire thing makes sense so these are the information is very important and that's what you have to provide so we have the name description version manifest version actions then the icons and the permissions looks pretty far so far soGood close this one come here we can click on this before we start working on the HTML let's start working on the functionality so we'll start working on the Json then we'll move to the HTML and all we have to do is to Simply plug the functionality into our HTML file andEverything would be ready we are in the popup.js well and here we have to build all the logic for our extensions like we have to open the pop-up fetching the balance transfer the funds all the things we're going to do right up here so first thing we have to do is we haveTo listen to our Dom so we'll say document dot add event listener and we'll say Dom content load so we have to wait till the content is load and then we have to Simply call the function so the very first thing we have to do is toTarget the element on which we want to trigger the event so we'll say document dot get element by ID so this is the ID we're going to provide from and on that we have to add this particular element listener and what we are listening for we are listening for click and on thatWe're going to call this handle function so we're going to write each one of these function right now we are just taking the entire events so this is the first one will come down and we'll create the function called Handler so function Handler in that first we have to get theElements we'll say get element by ID and we want to get the center and the center is going to be our loader so we'll say set style display Flex because by default it will be none so we have to display our loader then we have to take this private key because weNeed the private key to make the transaction and that's what we have seen in the demo one so if they want to sign for the fund they have to provide the private key so we'll get that by document get element by ID and we'll get by this private key value we have thePrivate key then we have to get the amount get element by ID amount value once we have that one now we have to get the address of the user where we want to transfer the fund so we have the private key we have the amount we have the address this is myPrivate key and the test account where I want to transfer the fund okay so I have taken here for an example so I can simply copy and make a call so make sure to get your own private key and your own test key now come down nowWe have to build our provider so we can interact with the blockchain and transfer the fund so we'll come here we'll take this const provider and we'll call this new ether provider so this is the library we have in our package and that Library we're going to attach inOur HTML document so once we attach we have the entire object of ethers and that's what we're going to call it so we'll say ether.provider dot Json RPC provider and in that we have to pass the entire strike from the Acme I have covered that tons of time in my previousProject like nft Marketplace unisoft clone and all the project we have built so it's pretty easy make sure to watch one of that and that I've explained that how you can get this entire string and again the final code is given down in the description so you can simplyDownload it and you can get it from there as well I have the provider now let's come down we have to get the wallet and we have the wallet incident in The Ether package in that we have to pass the private key and the provider so we can easily ableTo tell The Ether package that we want to interact with the blockchain with this particular account so we have the wallet now we can come down we can take a variable called transaction and here we have to pass all the data in our transaction field andThe data will going to be carry on when the user will make the transaction for transferring the phone so we have to Define couple of variables first we have to define the address where we want to stands for the phone the address then we have to define theValue the amount and we have to convert this price into ether so we have that one now the two data we have in the transaction field come down and we have to take a variable call and we have to get the link so what we'll do is after the successfulTransaction we have to allow the user to verify the transactions so they can easily able to go to the polygon scan and they can easily able to verify the transactions so that that's the link we are building up here so we'll take this one and we'll TargetThe hdf we'll say by default we'll assign that one then we can take this wallet and we'll say send transaction in that we have to Simply pass the transaction object and we'll call this then because it will make a promise and we have to resolve the promise so in that we have theEntire data of the particular transaction we have done transaction object so in that we have to get this transaction hash because that particular hash is the unique identification uh identifier for the transaction we have done just now so we're going to take that hash and we have to Simply assignSo we have to Simply hide the loader we'll say none after that we will take a variable called this and we have to Simply take the link and we have to display our icon and here we have to display our transaction hash so this is how we can construct the URLFor the poly scan for a single transaction so we have that now we'll simply get the element and we have to display the link where the user can click and they can verify looks fine and we have to close this one so this is the entire world transactionAll the data we are taking assigning and this looks pretty fine to me now we can come down we have to get the document so we'll say document added listener and we have to get the Dom content load and then that we have to build another function so we'll say documentWe'll call this get element by ID check balance so this function will allow user to check balance so first thing we have to do is we have to get the adamant listener so we have to add a click event and we have to call this function get check balance so thisIs the function we have to build now come here we'll say function check balance we'll say document.getelement by ID so first we have to display our loader so we'll display that Center we'll set display Flex then we can simply come down here we have to get the provider so let me getIt very quickly once we have the provider we can come down and we're going to Simply take the signer so we'll say signer provider.getsigner so this will give the signer and we'll say console logout.signer you can simply check the entire object of the signer now we'll take a variableCalled address and this address because we need the address to check the balance of the account so this address will come from the user input so let me get that ID by address so this is the one and we have to take this value so we have the addressNow we'll take the provider and we'll call this get balance in that we have to pass the address and we have to Simply resolve the promise so we'll say convert currency until form weight to Ether okay now we'll take a variable balance it then we have to Simply call our ether packageAnd pass the balance of amount so this will convert the paragraph balance in the readable format in terms of readable format we'll take the document well element and we have to get the check balance and there we have to display the balance so we have to Simply change theText so we'll call it your balance and the balance actual balance looks fine then we have to Simply console log out the balance you can do that and then we have to Simply hide the loader so that's the entire function for checking balance looks pretty fine to me pretty fine to meHope the entire logic is pretty clear to all of you guys and everything you explain beautifully we have built a simple Logic for sending the funds and checking the balance very soon we're going to build full-fledged metamask clone and that we're going to include all the functionality which you find inMetamask including login logout account Creations checking balance transfer funds ad account account changing all of things we're going to cover extensively in this project I have already made a video in that I have explained that what are the features we have built so you can watch this particular video to haveA better understanding that what are you going to build in this particular project that will come very soon on the channel but in this video just focus on this particular project and that will give you a better idea so we have done with this entire function let me closeThis one this is the handle function we have all the data we are getting this is the demo provider then we have the wallet the transaction then here we are building the link and that's the first one we are changing the hash then we are displayingAnd here we are Target the second event this is the check balance and this is the entire function for checking the balance we are taking the provider then we are getting the signer and then we are checking the funds and displaying in the front-end UI looks pretty good hope this and that thingMakes sense to all of you guys and no issue so far with your end let me come here close this one and let's close this function as well so that's all we have written very simple but very soon our full-fledged metamask loan will come the project is alreadyReady and I have already made a demo video you can check that but for the time you just focus on this so we are done with this now come here you can start working on the HTML and in the HTML I'm going to write little faster because that's a simple HTML weDon't need to build any logic in that so let's start working on it first we have to get the document type HTML then we have to get the language and then we have to take the head here we have to set all the metadata so we'll say thisThen we have to second the viewport content white device then we have to set the title we'll say crypto wallet we'll take the link and here we have to attach our csys file so this is the CSS file we have created and that's what we're attaching hereThen we have to close our head tag and then we have to initialize our body tag we'll take a body tag and in that we have to write the entire code of our project so let's take a div it will have a class called scarred we'll takeAnother trip it will have a class called cart2 and so that will take a deep it will have a class called form and that we'll take a b tag and we'll have a ID call heading and we'll display this particular text then we can take a div tab it will haveA class called filled and here we have to display the input field so we'll take an input and it will have a type number it will have the class input field it will have a placeholder amount it will have the ID amount because this ID we are targeting in our JavascriptFile for getting the balance of this input field then we'll close that one and here we have close this one and now we'll take another one so let's do the same thing very quickly hey everyone text area we have to assign the type is going to be a textLet's assign the class so we'll say input field we have to assign the placeholder so here we want to take the private key and it will have the ID because we have to Target this one so we'll say autocomplete to off and we'll take a IDAnd this will say private key and that's what we have taken in our JavaScript file now simply provide this name we have to assign this ID look close this one then we have to provide this column 10 and then we have to provide the rows because we want toHave a little bigger box five then we can simply close that one so that's the second field we have now we have to take one move field for the transfer sorry the address so we'll say field let me take it very quickly and finally we have all the three fieldsFor taking the data from the user so looks pretty fine to me now what we can do come here we'll take a P tag here we're going to display the span ultimately we want to provide some space from the input field and between the buttons here we can come here here we'reGoing to display our loader so we're going to take a div it will have a ID call center and we'll take a class call center and we're going to take this div so it will have a loader and inside that will have this class soWe'll say bar one and we have to take couple of so let me take it very quickly so this one is the two all together closest one and close this one so this is the entire our loader component what we are doing we are taking the devs and we're goingTo create our loader with the help of CSS you can take an image or you can take it any previous component for displaying as a loader so make sure to take this 1 to 12 bars inside the loader component so we are done with this loader now we can come hereWe can take a small tag and here we have to display our link so we'll Target this in a new tab we'll assign a link ID and we have to give this extra blank because we're going to add with the help of JavaScript after the successful transactionNow we have to Simply to call this check your transaction and we'll close this anchor tag and we close that one as well now we can come here we'll now we can close our loader so it's closed now we can come down and here we have to start taking the buttonSo we'll take a div it will have a class called button and now we have to take this button it will have a ID form and it will call plus button one because we have two buttons so let's take this space and we'll say transfer take this spaceAnd we can close the button so this is the first button we have now we can close the div and now we're going to take one more button so we'll take this button ID gonna be check balance it will have a class called button 3 and will say check balance and close thatOne and close this div close the div close the div and we have to install our script so we can interact with our JavaScript so what we have to do is first we have to get our ether package and make sure the order is very important so first you have to importYour library then you have to import your other script if you not import your library first you will have no object of ether package and that will show you an error so first you have to import The Ether package then you have to import the pop-upJs then close the body close the HTML and that's the entire HTML we have written for our project okay hope this entire thing makes sense to all of you guys that what we have done so we have taken this header we have this header and this is the entire body we haveThis is the entire card this is the first field for the amount this is for the text the private key and this one is for the address then we have this space then we have the loader this is the entire loader we have then we have this smallAnd this is the button component we have okay if you have encounter any error make sure to pause the video and try to re-watch that will fix your issue that's a very simple code we have written come here now we have to start working on theCSS file so come back in ether.js and you can see we have all of this function right up here looks pretty good to me we are done with the ether packet we are done with the JavaScript and now we can start working on the on the CSS so hereWe have the HTML looks pretty good no issues we have all of the files are done okay so let me have a look one more time no issues so far so good now this is the HTML okay and that's how it looks on the browser you can seeWe have all of this skeletons are ready but we have to little bit style it up and that's what we're going to do with the help of CSS so what we can do come back the code and now we can start working on the CSS so first we're goingTo Target the form and we'll say display Flex Flex Direction column Gap 10 pixels padding left to am pairing right to am padding bottom 0.4 am background color it will have our second primary then the border is going to be reduced it's totally if you want to assign a borderRadius you can do that but I'm going to comment this for timing then we're going to Target The Heading and we have to text align Center margin 2 RAM color will have this RGB color and we'll have a font size to 1.2 em come down we'll take the field display FlexAlign item Center justify content Center Gap 0.5 am border radius 25 pixels padding 0.6 pm border none outline none color white background color then we'll have the box Shadow insert to pixel 5 pixels 10 pixels an RGB color come down we have to take this input icon height 1.3 emWhere is going to be 1.3 am fill will have this RGB color the green then we'll take this input field we'll take the background none border none outline none with 100 pixels 100 and will have the RGB color which is the green one we can come down we'll take the formButton display Flex justify content Center Flex Direction row margin top 2.5 em button padding 0.5 em padding left 1.1 em padding right 1.1 em border radius 5 pixels margin right 0.5 em modern none outline none transition 0.4 second easy in out background image linear gradient and we're going to have this particularGrading color we'll have the color is going to be a black then we'll have the second first button over effect and we have to take this linear grading color the one we have taken above paste here then we'll assign the color will be an RGB color green the button too padding thisBatting left batting right ball radius 5 pixels border none outline none will have the transition for easy in out background image linear gradient we'll take the color RGB we can take the over effect we'll take the background image linear gradient it will have the same color but the primary color will first thenWe'll take the RGB color the green one then we can Target the third button margin bottom three then we have the padding border radius five pixels modern none outline done will have the transaction for second easy in out background image will have the radiant gradient color we'll have the RGB colorThen we'll assign the over effect on the button so well that's going to be the same one a little dark one so we'll have the reddish and the reddish lightest then we'll have the color and close this one let's start with the card we'll say background image it will have a linearGradient color the primary gradient color we have then we'll assign the Border let's comment out for a timing well with this transaction all 0.3 second we have to Target the card to border radius zero transaction all 0.32 second we'll take the card over effect we'll say transform scale0.98 we're already radius 20 pixes we'll take the card over effect box Shadow Zero pixel zero pixel 30 pixels one pixels and we'll have the RGB color and here we're going to take the notifications so we'll say small p and we'll say color is going to be our white and text align CenterAnd we'll Target the anchor we'll say display next Direction none color RGB then we'll have the display none by default we'll Target the text area resize none then we'll have to take the space and we have to provide space from the top so 0.3 em now we have to work on the loaderSo this one is pretty huge we'll tackle the center display none by default justify content Center align item Center then we'll take the loader position relative with 50 pixels 45 height border radius 10 pixes loader div with is going to be eight percent height 24 percent background will have the RGB colorWe'll take the position is going to be absolute left 50 pixel percent top 30 percent opacity zero border radius 5 pixes border Shadow zero zero three pixels and then we'll have the RGB color they will take this animate linear Infinity will come down we'll take the creep frameAnd it will start from opacity one then we'll take this two and we'll say opacity 0.25 then we'll come down we'll take the loaded bar one and we have targeted each one one by one so we'll take this rotate value and we'll take the animation delay 0.Come down we have to Target the bar two on the same value we have to provide but we have to change the directions and the rotation okay and the timing so let's do it let's target the bar three so let me write it quickly one by one umNow we're going to Target the last bar transform rotate 330 degree translate then we have to give the animation delay and that's pretty much so this is the entire CSS we have written for our extensions hope this nothing makes sense to all of you guys so this is the formWe have close this one heading filled input icon input button we have button one this is the over effect but until close this one button three closest one and this is the card and this is the card to over effect on both the cards so let's close this one anchorText and space and this is the entire animation for the logo close all of this so these are loaders we have let me close it one by one five six seven now we have 8 9 10. 11 and 12 and if you have stuck if you have encounter any error make sure toRe-watch that will fix your issue so looks pretty fine so we are done with this entire folder and file structure so we have written all the code which we need to write for this extension let me check one more time so this is the JavaScript this is the HTML and thisIs the entire CSS okay and this is the Manifest file so make sure to provide all of this data which we have given in our manifest Json file because now we're going to Simply upload our extension to the Chrome so what I will do I'll simply come hereSave it come back here you can see this is how our application our our extension is looking in our in our browser and now this is what we're going to Simply deploy in the extension so all of things are looking fine and looks pretty good to me now come hereClick on this three Dot click on this extensions and click on this manage extension here you will have couple of options so right now you can see that I'm in the developer mode so by default you will not have this developer mode on so makeSure to click on this it will open the developer mode and now you will have these three options and this is the extension we have built in this we have all the feature and functionality for metamask which I show you in the very beginning which I have already deployedIn the Chrome and I'm using in my browser and very soon a video will come on this project so looks pretty fine you can see this is the extension we have built it has all the feature it will fetch the balance transfer the funds account login logout user authentication account creationEverything is we have done extensively in that you can simply log out and you can log in Click and create your accounts things are looking pretty good so come here click on this load unpack all you have to do is to click on this and it will open your browser folderFile structure and now you have to find the folder in which we have build extension so this is the one we have you can see this is the one extension that's the folder I'm working on so I will simply select the folder and that youCan see we have all of this files so we have this HTML CSS JavaScript icon all the files so come back here select the folder and this is the folder we have to upload so click and select this one and here you can see that here we have uploadedThe icon uploaded extension you can see this is the name we have given crypto wallet and we have the ID which is generated by Chrome browser and now simply refresh so that's all information which you have provided here you can see we have provided this icon so that's why we areDisplaying the icon the icons are displaying you can able to get all the details you can remove and you can refresh and you can once you once you load that make sure to refresh your browser and click on this and here you will find the extension so you can see this is theExtension we have crypto wallet now to add in your browser you can simply click on this bank and this will add your extension you can simply click on that and here we have the extension so we have the input fills amount you can pick any amountYou can give the amount and this is the final one again I'm telling you that a complete tutorial will come where we're going to build this particular extension with all the feature it's a ditto copy of metamask so in this video in this project we are just learning how to dealWith the functionality and follow the basic rules for building extension but we go to build more complex extension in this particular project so just wait the project will be live within next one week so looks pretty fine to me so we'll have all of this function you can able to select the networksYou can log out login all the things work fine now come here in our extension so what I will do here is this is the metamask we have now first let me get into my metamask and get me the private key so this is the account I have thisMathematic coin in this I have to get the private key because I have to transfer the fund from different account so I'll simply pass my credential so let me pass the password for my metamask and this will give me the private key so this is my private keyWhich I use for testing don't use my and you can simply come here in this file open this function and here you can see this is I have already taken here so this is the private key that's what I'm going to use it for transfer the fund so close this oneAnd right now I have this much value in my account so you can simply copy the address and you can able to change the font so I'm going to send the font in this account number two and that's what I have taken here this is the privateKey for the account one and this is the account two address so click here now provide the 0x and then you have to provide your private key so this is the private key now you have to get the address where you want to transfer the fund so I'll simply paste the addressAnd let me transfer the fund point zero zero one so this much I want transfer and if I click on this check balance it will fetch the balance of this particular address so right now you can see I have nothing in this you can see I have zero mati in this particular addressSo the check balance function is working fine now we can transfer the fund click on this transfer we'll have this loader it's loading it's making the transaction once the transaction will successful it will give us the link and you can see the our transaction is successful you can check yourTransaction here you can click on that it will open this poly scan and here you can see the transaction is still in pending mode so the transaction is happening this is the amount we have transferred okay sometime this will take a little bit time sometime it's happened very quicklySo our transaction is successfully done this is the account we have used and on this account we have transfer the fund so if you come back here in the extension right now you can see you can simply come back to the metamask and right now you can see let me comeBack here and here you can see the balance is deducted from this account and if you come here and the balance not displaying here because this is a hard at account and someone else is using the same account for testing the contract so that's why the balance is not reflecting but youCan see the balance is detected for my account you can simply come here you can check the balance and you can fetch the balance from this particular transaction okay looks pretty good you can come back here in the poly scan still the data is spending and you can see the all detailsAbout this transaction it's happening we have successfully done the transaction you can reload the browser if you have encountered any error in the metamask simply reload the browser and that will reset your extension so this looks pretty good hope this and I think making sense toAll of you guys and again I'm telling you this that a complete project will come on this particular metamask extension and that we're going to build every single thing from scratch we're going to build the entire custom Logics we're going to use the login and logout functionality account creation transferFund adding accounts multiple accounts adding multiple tokens transfer tokens all the things we're going to include in this particular extension so just wait a video will come in a week so you can follow that but before you build this extension make sure to build this particular one and if you are watchingThis far means you have already completed this extension so you tons of learning coming on your way in the upcoming videos that we are done with this entire project I hope you guys have learned something new that how you can build your own extension for aCrypto wallet and with all the logic all the patterns all the configuration all the Full Line file structure the only thing you have to keep in mind that you can't use external libraries in the Chrome extension or it will throw you enter so it's always better that you canInstall you can simply copy the entire code of the extension to the modification and you can use in your project so again the complete project will come on this complete metamask clone so just wait for a week it will be live and you can follow that thatReminded this video if you're new to my channel hit like And subscribe that will motivate me a lot and that's the only thing for my end have a wonderful day bye

All of you hope you guys are great so let me give you a quick overview about our metamask clone that how it's going to look what feature we have in that and at the end of the video I'll tell you that when this project will be live soYou guys can follow that so here you can see that I have already built extension included every single feature in the extension and I have already installed the extension in the Chrome browser so if I click on this this is how the home page would look like so when someoneWill install the extension this is what they will get so first thing they have to if they have their account all they have to do is to put their email ID and password and they will get into their madama's wallet but if they don't haveThe account so all they have to do is to click on this create and from here they can create their accounts and when they will create their account they will not only create their account in the metamask but they will also get their own private keys and blockchain accountsSo what I will do I'll come back to the login first let me get into my account based on login so what I will do here is I'm going to Simply type my credentials I'll say Donald husum so it's there and I will tell my passwordAnd I will simply click click on this login so once I will click on the login here you can see here you will find the home page and here you will find all the details all the tokens you have imported like if you want to send send ether toAny wallet you can simply transfer you can pass the pass the amount and pass the volt errors and you can transfer the fund I'll show you and here we have the account so if you want to use other account instead of the account you have in your metamask this one you can simplyDo that so from here you can import the account using the private key and all the account will reflect here you can simply click on that and that will be selected and you can easily able to start doing the trading and from here you can import the token so you can doIn two way you can take the address of the token and you can import the token in the metamask but here what we are doing for Simplicity we are taking the address name and the token symbol these are the three information we are talking we are taking okay so that's what weHave here and if you click here you can easily able to log out from the application so let me first what I would show you so what I will do I'll simply log out from the application so here you can click on that and you can log outFrom the application so let me create an account let me show you so when you will install the extension this is exact interface you will get and from here you have to click on this create account and from here you have to do is simply clickOn this create account and here you have to provide all of this informations so we going to keep this information into our backend part just a moment so what I will do I'll show you the backing pad as well so first thing I'm going to give the name so I'll say let's saySchweb buy and I have to give the email ID so what I will say let's call it by because I already have registered by so I'll say buy at the rate gmail.com and I have to pass my password then say not p a double s pass then IWill come here p a double s pass let's write s and then click on this sign up and here we are making the transaction you can see we have logged into the applications and what this transaction done it will create a new wallet address for us so you can seeThis is the new wallet address we have created you can click on that and you can simply copy and this is the address we have generated so this is the wallet address we have generated and the private key is already set in the backend okay so I somehow IRemove that so you can see the private you can see they are fetching the balance and we have nothing in here nothing in this account nothing in here so what I will do I'll simply try to take couple of fake faucets so what I will come back here actually I'll sayAcme faucet and I'll come to the ultimately and I have to get couple of four set so I hope this time I will get because I use this particular application in the morning when I was testing so it says that if I'm doing on gorilla I will get this so let's comeBack to the Mumbai because that's what we have taken and from here I have to Simply pass the wallet address which I have already copied so this is the address I will click on this send and you can see I have already done that in the morning that's why you can see ICannot do that so what I will do I'll come back to here and I'm going to Simply click on that so it's better to transfer the to transfer the fun on this on this particular address so I will simply click on that I have copied that one now I will clickOn this login and now what I will do is I'll I'll do one thing so let me log into the application so I'll say I'll say this is the one which has couple of funds and here I have this you can see I'm logged into my account onThis much font I have in this particular wallet address so what I will do I will simply transfer the fund the account I have created so I'll click on this send I'll pass the amount which I won't transfer I'll just want to pass something like like let's say three that's amount IWant to transfer and let me give the Vault addition so this is the Vault address on which I have to transfer the fund I'll click on this transfer and here the transaction is happening just wait so this will take a little bit of time and once the transaction will completeYou will get a input so you can see the transaction is successfully completed you can click here and you can easily able to verify the transaction here on the polygon so still the transaction is in the pending mode so by the time the transaction you're getting confirmedWhat I will do is so things are looking pretty fine I'm going to show you that how you can import the account the balance is automatically deducted earlier we had six now it's three means we have transferred the fund in that particular address we have generated soWhat I will do I'll simply click on this log out and now I have to pass my email ID and the password which we have created recently so I'll say what is the new email I give buy at the read gmail.com and here I have to pass thePassword and that's the email ID and the password click on login and here we are back into the our metamask account and here you will find this much fund we have transferred in this particular address we have that one you can see everything is working absolutely fine soNow what I want to do is so you can see the transfer function is already working absolutely fine and the account creation is also working fine so when you will create a account it will create the private key it will create the wallet address it will take the normicFoundations that's all we'll create so now what I want to do is uh so if I come back here in the import so for example I want to import any token and I want to store here like this so right now we have this three token and I want toStore any other token so what I will do let's come here and from here what I will do is I'll go back to the Token section and let me grab the token so this time I'm going to take a token which is available in polygon so this isThe C by uni it's the one which I'm going to pick so this is the contract address let me grab that one and come back let me open the metamask and now let me import the import the token so I'll click here and click on hereAnd you can give the address of the token you can give the name so it's CBA and that's the name and you can give the name same name as a c public here it's totally up to you okay that this this is what I am calling to this particularToken if I click on this import it's going to make the transaction and you will find that here we have included the token and you can do tons of things you can check the history of this particular token you can do the you can fetch theBalance all the things you can do so the token is added in your in your wallet so this is how you can add the token it's there now we have done with this token import we have done with the send functionality now let me show you thatIf you want to import any wallet address you can do that as well so now what I want to do is I want to import the account so right now I'm using this particular account has three medic on and I want to use something else so IWant to use this very first one so if I click on that as you can see it's fetching the balance and here I have this particular amount in this particular one so every single thing is working absolutely fine so the feature we have included that you can easilyAble to change any network but here we are focusing on the polygon because I have medicon in my polygon and it's easy to show you with the examples and I don't have any other value like ethers and gorilla I don't have anything in the so Farley ether and Mumbai and ethereumBut you can if you have you can easily able to do the trade so this looks pretty fine you can select and you can easily able to pick that one but I would go with the Mumbai one we can is able to fetch the balance youCan transfer the fund you can import the account and you can is able to import the tokens so you can click and import the token and here you can able to find all the details here you can display all the recent activities which you want which anybody like the individual isDoing on the metamask accounts you can display that as well and from here you can disable to click on logout so if you click on that logout here you are log out with application so every single thing is working fine and it's a Chrome extension if you are building your anyMarketplace and if your client wants you to build a build a wallet along with the marketplace so that's a really good project and very good feature you can provide like the marketplace have its own metamask wallet or metamask like a wallet where they can do the try it soIt's 100 working absolutely fine now let me show you the back end part of this application so if I come back to my code here you can see that so we have two methods to store the information about the user and the voted creation and the addresses and the transaction one we canStore the information in the contract but again that's not user friendly and that's not not good for the user experience because when you will do any changes in the contract the user has to pay money for that particular transaction so it's not a good analytical and the second option we haveThat we can build a backend server where we can store all the information about the users so again when you are building a backend server for storing all the sensitive data it's very important that you have to build a most secure backend system because the API Keys the mnemonicFoundation the private key the address is going to be in the server so you have to encrypt that very efficiently so again I will tell you that if you haven't watched the API course and that have explained everything that how you get how you can encrypt the data so youCan see the backend server is running and that's why we can able to store the information I'll show you that how it will look when you will not run the backend server but still the application will work so here you can see that I have this couple of folders here so IHave this access folder again everything would be provided to you here we have the API folder in that I have this API this is the entire controller in that we have built all the logic for making contact of our API then we are storing the information about the users loginAnd all and then we have the model in this particular model we have these three models we have this account model so when someone will create so when someone will import any account we have to store the information in this particular account model so when someoneWill import any token we have to store into this token model then we have this user model in that we are keeping the information about the user this is the router we have we have this three routers so this is the entire section for the API now let's talk aboutThe main logic which allowed the users to create their wallet addresses to fetch the balance of the token which allow the to transfer the fund from one account to the another one so that's what we have here so here you can see this is the exact huge piece of code weHave written so it can see it's actually we have not written that one it's a e30s library which we have utilized internally because when you are working around any extension like it's not ideal that you should use any external library and you will have a lot of complications and lotOf Errors so it's always better that you have to compress the entire package and use it internally so you can see this is the huge line of code we have written actually it's the entire etherges package now come back to the this is the icon I have used and this is the mainFile again I'm just giving you a good overview that what we're going to cover it extensively in this particular metamask wallet creation so this is the Manifest file which I will again explain in detail this is the entire HTML for our application and this is where weHave built all the logic so you can see this is the document then we have all of this function we have tons of function for doing a lot of things you can see tons of function we have included into this so again it's a quite huge project because we have toKeep a lot of things in mind when we are working around this wallet and if I show you the back end you can see this is how the background would look like here we are storing all the information and if you want to cheat someone and take funOut of it you have this particular wallet hey private key you can supply import that and you can get the for out of their wallet which again I'm not which again I'm telling you that there is a possibility so don't try to build an extension where you can do this kindOf cheat and take phone out of your user ultimately that business will not going to last for a long because once you do the cheating from one time you will have a bad credibility so that's the thing you have to keep in mind so that's how our extension isGoing to work if you come back to the polygon here you can see this is the transaction we have done and this much token we have send it to our wallet so again I'm telling you that this is a Amazing Project which you can include inThis you will learn that how you can build extension which allow user to facilitate and do the transfer of the token and they can use it just like a metamask so again I want to show you one thing so what I will do is here you canSee that if I open the terminal our terminal is working fine so we are running our server and again don't need to worry about that if it sounds too much we're going to cover everything in detail slowly and study and I'll try to explain you everySingle thing so you can do a lot of customization so right now you can see our server is running and if I come back to the extension we can able to fetch so all of these logins logic we have included in the extension that's happening because we have the back endWhere we have to store the information so here I have to let me pass the as the wallet so this is what I'm taking let me pass my password and login so here I'm login so the moment I'm getting logged into this particular wallet you can see I'm fetching all of thisInformation I'm fetching of the information about this and these are the information I'm fetching and the information about the user okay so far so good now the moment I'll come here the moment I'll stop my back end backhand and if I come here if I reload the applications I'm not going to haveThe information which I'm fetching for the mac and because my backend is stopped so how would I fetch that it's not going to work definitely but you can see already that I'm logged into the application so the data we have stored locally it's working fine so we can ableTo get the get the balance and here we can fetch the balance you can transfer the phone easily still now you can transfer the fund because there is no backend involved let me show you how you can transfer the phone so what I will do I'll simply come here and I'll get thisParticular wallet address and I want to send something in here so you have to keep this value in mind come here let me go to this let me paste here and let me send the amount so I'll send something like zero two and click on this transfer andThis will make the transaction and you will transfer the fund to this particular address so you can see it's working fine still making the transaction and the transaction went through it's here and if you come back to the extension this is R come back to the metamask andYou're going to receive the fund you can see it's increased to 2. so it will work fine without backing it will also work fine user can transfer funds all of things but if you want to authenticate the user you need to have a backend which going to make the call of your APIThen you're going to find out that which user you have to pick so if you click on this account here you will not find all the addresses because these added addresses we have stored in our backend part okay so once I will logged out from this application I'm not able to getInto this so like what I will do I'll simply come here if I click on this create and if I provide all of this data if I provide this let's say time at the rate gmail.com I'll say okay this is the password if I click on sign upIs going to create an account you can see our loader is working fine but it's nothing will happen because our backend is not running the transaction will not happen because our back ends stop but the moment you will start your back end everything would be fine so let's openThis here we are and now it's telling us to get into our metamask so let me do one thing let me start the server and the moment I will hit this and the moment I reload the browser I'll come here and I will pass my credential I will easily log into myWallet all the data will be reflect here come here you can easily able to switch your account from here you can easily able to import that's all will work fine okay so you can see everything is working fine so hope you guys have enjoyed this particular demo so that's what we'reGoing to build in the upcoming project um I got this idea of about this particular project because recently one of you have started working on a freelancing project and he got a project I'm really happy for you and he was asking that his client demanding him to build the custom metamask wallet whereYou can provide these features but that particular wallet will come along with the his own service and own product he is providing so that was the entire concept and the entire idea he had about the project so he asked me for that so I thought that let's work it's a good project weDon't have much tutorial on metamask that how you can build that so again this this is the final product we're going to build in the upcoming project and by the way I want to thank all of you those who have given their valuable contribution making this project makingThis platform possible for me so the source code is already provided the final source code about this project so let me show you so come back to the blockchain coder the project will be live within 10 days because we have already go one project is going on asSoon as the project is getting completed this particular project will be live so you guys can follow that currently I have recorded the project it's in the editing phase so it's taking a little bit time but the final source code is already provided here at the blockchainQuarter so you can come here and you can simply come and you can get the source code so let me show you so let me close on the recent one and here you can see here we have that one you can easily able to search for it asWell so this is the one we have here we have provided the final source code so you can get it you can click on this get now you will come here and you can buy the source code and the reason why we are charging money because we are notFunded with anyone we have a group of developers working on a web threes and we want to help and bring up more tutorials like this and that's all become possible when you take this course and whatever money you pay that's give a valuable contribution to our teamSo we can expand our team we can bring industry experts who can give talk and we can bring more free courses like this so whenever you buy any code on this blockchain coder you give your valuable contribution to our team and almost hundreds of people have already doneThat some of they have personally come up to us and they said that Donald will help you without taking the source code so again I'm telling you that we need your help we need your help to grow this particular platform so people can bring more courses like this you guys will betThe benefit and very soon this project is going to be live on YouTube where you can simply follow the complete project step by step so all the assets will be provided to you in the Stana file so you can simply get the starter file and youCan start working along with me so hope you guys have found this extension amazing and again I'm telling you that whenever you buy the source code that gives a very valuable contribution to us to grow this platform to bring more courses like this so hope you guys willLove this product and I hope that you guys are already enjoying this project which we have on the channel you can see we have designed externing front-end UI every single is absolutely working fine we have built this industry ready application so we were able to make thisKind of tutorial when you give your valuable contributions in terms of watching the entire video giving like sharing and if if in case you want to take the source code so when you make this small transaction that gives a lot of push and so we can expand our teamAnd do read your supports so again I'm telling you that if you are not fall in this particular project this one is more most amazing project which you can build you will learn tons of things in terms of backend smart contract and the front end part as well I know this video isGetting too long but this is what you're going to build and the video will be live after 10 days because currently it's in the editing phase so the editor they told us that it will take six to seven days for the editing because it's a huge project you can see that we haveSo many things to write so we have the API we have the this is the main function which will work without the API so we have tons of function in that and I have to explain the entire data structure that how the requests and calls happen so it will after 10 daysThis project would be live so you guys can follow that and that's the thing from my hand hope you guys have enjoyed this one so with that amending this video hope you guys have find this video valuable if you still have any confusion in doubt do let me know in the commentSection and if you're new to my channel hit like And subscribe that will motivate me a lot and if you haven't checked the blockchain coder make sure to check that we have a lot of cool stuff there a lot of project we have make sure to come in the resourceSection here you find tons of project try to build this particular one and I would suggest you to build like all the projects are absolutely amazing when you will build any one of the project you will have tons of learning that's the only thing from my end see you in theNext video have a wonderful day bye