Hey what's up YouTube Welcome to another Morales blueprint mobile applications seems to be the future for webpreme and no one seems to be building depths on mobile so this is your opportunity this week you are going to learn how to create your own wallet from scratch using flutter integrating web free intoYour mobile development at the end we are going to have something like this we are going to be able to create a new wallet from scratch which is going to generate a mnemonic phrase and using this mnemonic Trace we are going to be able to verify it and generate a newPrivate and public keys with that we are going to have access to a new wallet address on which we are going to get its balance of course as this is a new wallet is going to start at zero but for example if we import a new wallet fromAn already created mnemonic seat we are going to have direct access to its balance the nft collections on this wallet we are going to have also the ability to send fonts to another wallet and of course if we want to start from scratch we can always log out and createA new value so if you want to learn how to accomplish this keep watching because we are just getting started what's up YouTube my name is vasili your web free instructor from Latin America Ecuador I've been wielding on the space since 2020 with cool crypto projects myFree time I really enjoy singing and playing the guitar and if the game is good I like to go out and take some meditations but enough about me let's go back to the video and start building so first thing first let's address the elephant on the room and yes mobileDevelopment for web free is not that good we have the official Frameworks for mobile development such as Swift and kotlin for IOS and Android respectively and then we have the hybrid ones such as react native and flutter and the problem is that these are not the most popularFrameworks for development and web3 is and yet integrated that well into mobile applications take in mind that some of the libraries we are going to use today may get deprecated really fast and also we may have to do some fingering here and there besides that I think that thisIs going to be a really good blueprint on which you are going to understand how you can integrate webcreek Technologies into your mobile development workflow and also connect it to the Morales apis because yes they are the fastest on the web 3 space so let's so let's stopWasting time and start coding so let's get started first of all let's create a new project over here so let's say flutter create web free wallet this is going to create an empty project after the process finishes we are going to have the default photo application asYou can see here is the simple application to add one to a number and this is going to keep updating this so let's transform this into the web3 wallet for that first we need to talk about the libraries we are going to use to build this the first and the core ofThose is the web 3 Dart it's a way to connect to arterial node and send transactions interact with smart contracts and much more the latest version of the publication day of this video is 2.6.1 also we are going to use the beep 39 package this is a dartImplementation for Bitcoin beep 39 this is the way on which we are going to generate the mnemonic phrases to create or wallets please if you want to understand deeply how this works don't forget to check out the documentation including the abstract and the motivation to create this stutter alsoWe are going to use the ed25519 HD this is a weird choice for sign with public keys and finally the hex Library which is going to be a way to easy encode on the code hexadecimal characters such as the wallet address so we need to add all those packages onThis Pub spec dot yaml let's go under dependencies and under Cupertino icons let's add them all also we are going to use the provider package if we save this this is going to automatically run the flutter pop get which is going to add and install these libraries to ourProject so first thing first I'm going to get for granted that you already know how to manage floater at least on the basic level remember all the floater structure is based on widgets so now I'm going to just transform this interface into a simple button on which we areGoing to be able to create that mnemonic phrase so we are going to start like this and the final result is going to be this as you can see here I replace everything with just a scaffold with an app bar with the title crypto wallet and here we have an elevated button whichFor now doesn't do anything so let's add the functionality to as I told you create that demonic phrase the private and public keys so for that I'm going to create a new file over here on the leap folder called walletprovider.dart let's import the libraries we are going to use so firstOf all web3 dart then the beep 39 as beep 39 the 82559 between and a hexadecimal package now let's create an abstract class abstract class wanted address service this is going to have the string function generated mnemonic a future function called get private key and a future function called get publicKey these abstract classes works the same as interfaces on solidity contract so let's create that main class class wallet provider extends change Notifier this is going to implement that a wallet Arrow service and of course this is going to be madaras because we need to implement those functions otherwise weShould keep this as abstract also this change Notifier is just a weight of looters to announce some variable or state changes around the application and for that we are going to also need the floater Foundation package which I'm going to paste over here now let's create the functionality for those we'reGoing to go through this process in order first let's use the functionalities to create a mnemonic phrase so as this is an abstract we need to overwrite let's say string generate mnemonic and this is going to just return a bib39.generate mnemonic again if you don't know which functions theseLibraries has well we can always click on the function name and check all the functionality on the code or on the other hand you can just always check the documentation on the floater package and also as you can see here you're going to have something called AP reference onWhich you can go and also read more documentation about how this works but yes as simple as that with a simple function execution we already have a way to generate that mnemonic phrase you know those long sentences with random words which are going to be used toCreate or private and public keys for our wallet now let's implement the second function of the right this is a future string get private key this is going to receive the mnemonic phrase we are just generating as parameter this is going to be an Asic functionality because again we are using future andHere we are going to generate that and also as you can see here the GitHub copilot is already generating everything for me but let's explain one by one first of all let's generate a seat so beep 39 to mnemonic to sit and use the mnemonic we are going to send asParameter so remember the seat is like a pattern that this is going to use in order to generate that public and private Keys again if you don't know how this works please check out the beep 39 documentation and its base pieces now we need to create the master key so finalMaster is going to be equal to a weight e d 2 5 5 19 hdk dot get master key from seat and we are going to use the seed we just generated this is the Master Seat we are going to use to create our wallet then we need to save final private keyThis is going to create that private key for the first account on that wallet hex dot encode master key and finally let's return that private key with that we already generated a mnemonic phrase we are going to generate first disk use that to generate a seat based on thatMnemonic phrase used in that seat we are going to use this Ed 255 library to generate a master phrase and with that Master phrase we are going to encode all private key finally let's create a functionality to have the public key which is going to be be shown on ourWallet and the one we are going to share with others so again on the right this is an again a future function this is going to return a ethereum address the ethereum address came from the web3.dart let's say get public key and again if you are doing this with me right now andYou have GitHub pilot just let the auto completion to work for you and just listen to the explanations so let's say string private key we are going to send the private key because as you know with the private key we generate the public key the public key is going to be againThe one which is available worldwide and related to that public key which is the one we are going to share we are going to use the private key we just generated to sign the transaction so let's say async because again is going to be an async function let's say final thePrivate key is going to be equal to it private key Dot from hex and we are going to send over the private key we are sending here as parameter now we can generate the wallet address so final address is going to be equal to a weight private dot address and finally let'sReturn that address and as this has that we have all we need to generate our wallet from scratch the mnemonic phrase the private key and the public key which is going to be the wallet address now let's test this out this is called wallet provider.tart so let's return toThe main function and let's say here import wallet provider dot Dart we can do it like this or we can do it as a package but as we're going to test this out quickly let's do it like this also remember as we used this change notifierOn the wallet provider just as a good practice I'm going to replace this run app to have this change notify your package sending over the context or the wallet provider so here just after we generate or build this widget let's declare a new instance of the valid provider so final wallet provider equalsTo provider dot off wallet provider and we are going to send the context as parameter as usual on flutter application once we have the instance of the wallet provider we can use that into the empress functionality on the elevated button so we can say final mnemonic phrase is going to be equal toThe valid provider.generate mnemonic again we are just calling the functions we just created here so let's create the mnemonic let's create the private key the private key is going to use the mnemonic we just generated and let's generate the public key which again is going to use the private key we justGenerated with that let's add some print statements remember that print the statements on filter are just for testing we shouldn't include any print statement on the final builds so I'm going to print any money the private key and the public key let's save this reload the application and now if weOpen the terminal let's go here new terminal under the book console if we click on generate wallet as you can see here let me make this bigger if you see we generate all of those the mnemonic the private key and the public key so these are just random strings we justGenerated but actually no this is an actual wallet address we just created using this function how can we know well let's just take the public key copy this go to our browser open either scan paste that wallet address here and as you can see here this is an actual wallet so asThis is that we just generated get a wallet we have the mnemonic phrase we are going to be able to use to import this wallet let's say on metamask or any other wallet the private key for the first account and the public key of course we are not just going to createThese and then import it into metamask we are going to create our own wallet 100 on filter but I just wanted you to know how easy this process was we just created a new wallet from scratch with what just three simple functions and import themes on libraries but let'sKeep building now as we know we can create a wallet really easy the first step for us is to create the interface and the actual functionalities for it however we have some problem here and it's that if we generate this private keys and we don't store them insideApplication well each time we close and open again the application it's going to erase those variables so we need a way to store those inside of the application memory so before we continue let's modify the wallet provider and as you can see here I have some different tabsFor different pages don't worry about them right now I'm going to explain them step by step so on the wallet provider let's modify and add some functionality there is a package called short preference plugin which is going to allow us to do exactly that start simple data inside the application memory so weDon't have to relay into external database because this is going to store permanently some information inside the app really easy so first thing first let's go to the pokespec.dml at that parrot preferences and now on the wallet provider let's import that now let's create a variable to store that privateKey so let's say here variable for private key this is going to be a string private key now we need a function to load that private key so on the wallet provider class let's create that variable to store private key so string private key let's create now a functionTo load that private key so it's going to be a future void function called load private key and is going to use this chart preferences it's going to be called prefs it's going to be equal to a weight chart preference dot get instance and this is going to set up that privateKey the private key is going to be equal to the Press dot get string private key now we need another function to store that private key so future void set private key which is going to receive the string of the private key it's going to be again an async function realityAnd inside of this we are going to set short preference equals to preps dot await chart preference get instance again we are going to get the instance then we are going to set the string so await refs dot set string the private key as the private key it means thisVariable and of course we are going to notify the listeners and this is it as this is that we now have a way to store this private key inside the application no matter if we close it over and over again so with that said we are ready toStart within the whole functionality for the wallet from this part on I'm not going to explain the actual building of the interface of the application because it's going to take a lot of time and it's just to put some widgets here and there but instead I'm going to stop toExplain the important parts regarding on how to connect webpray Technologies on these widgets but don't worry remember on the description you are going to have two links one for the final project and another for the template on which we are going to start as this to this this isThe template you are going to download on the link on the description which has the already interface we are going to use for this project but without any type of functionality so for example we have the two options to create a new wallet or to import from seed so let'sGet started with the create valid functionality also as you can see here it says please store this money phrase safely and here we have a text just stating mnemonic phrase we should replace this with the actual mnemonic phrase so let's do that this is going to be a really simple process because weAlready have our wallet provider on which we have the ability to create that mnemonic phrase so here we are on the widget called generate mnemonic phrase.dart and let's get started here on inside of the widget let's declare some variables so first let's say final wallet provider it's going to be equalTo the provider dot off wallet provider and send over the context as always in any filter application once we have the valid provider we can say final mnemonic it's going to be equal to wallet provider dot generate mnemonic and now as you might already know the mnemonicPhrase is going to be a really long sentence with random words so now I want to split them up so I'm going to save final mnemonic words it's going to be equal to dynamonic dot split and split based on the spaces on that phrase I'm just going to replace this because it'sMnemonic it was mispelled and this is it with this we are generating data phrase now we just have to render that over here so instead to have in here on the children of this widget this text let's erase the text and create here a list so list dot generate the length of thisList is going to be of that mnemonic words variable so mnemonic Wars dot length here we are going to send our function so let's say a index and this is going to render a padding and inside of this padding we are going to say first the alignment which is going to beVertical and this is going to have a child which is going to be the text and a enumeration so the index plus 1 and the mnemonic worst index if we save this as you can see here this is going to update this and we are going to getDynamonic phrase with all the words one by one now we need to copy this to the clipboard again the reason is because once we generate this demonic phrase is not going to be stored on the application or also anywhere and the user is responsible to copy it to theGlidberg and then paste it into a nodes application or keep it safely in another app so here we have this elevated button copy on the clipboard and as you can see here the button doesn't do anything right now so here we need to add a function this function is going to beCalled copy to clipboard so let's create a function here I'm going to say void copy to clipboard this is going to use the clipboard widget so clipboard dot set data the clipboard data is going to have a test the text is going to be that mnemonic phrase then we are going toHave a scaffold messenger this is just for having a notification stating that we have copied that so scaffold messenger of the context and we are going to say that we have copied that to the clipboard so instead of the auto completion I'm going to say mnemonicCopied to clipboard and also as we want to verify these afterwards I'm going to automatically push the next page so Navigator dot push and this is going to send over as always the context the material page root is going to have a builder and this Builder is going toRender the verify mnemonic page on which we are going to have another widget which is going to be used to verify this mnemonic phrase so I'm going to save this and let's test this out so let's click on copy to clipboard as you can see here we have this announcement thatThe mnemonic was copied to the clipboard and we can just take it and paste it over here again we have another widget over here which is going to be be used to verify this called verified mnemonic if we click here we are going to be ableTo add functionality to this so let's do that so as you can see here we have a Boolean variable called is verified which is going to default to false and a string which is going to be the verification text so let's add that functionality let's say void verifyMnemonic this is going to have a wallet provider as we did before and we are going to verify that the string we are setting up here as input is the same as the one generated but the wallet provider so I'm going to say that if verification.stream is equal to theWidget.mnemonic trim then we can create the private key because remember we use this demonic phrase to generate that private key so I'm going to say again wallet Pro provider dot get private key and we are going to send the widget dot mnemonic and then after we do this weAre going to set up that private key this private key as you can remember is the variable we are going to use and after that we're going to say then here I'm going to put a function on which we are going to pass the private key andInside of this function I'm going to update the state from is verified to true so let's say set a state and is verified equals to True also I already left you this navigate to wallet page which is going to be used to navigate to the wallet page so here on this verifyButton I'm going to use that new created function verify mnemonic let's save this let's click on verify this is going to verify and as you can see here this next button change it from inactive to active because we have the elevated button over here and this is going to verify if theIs verified variable is true if it's true the next button is going to be available and this next button is going to execute that functionality navigate to wallet page so let's click on next and this is going to lead us to the actual wallet page on the wallet page weAre going to have an interface like this in which we have divided address for now is a burnt text the balance which of course is zero because again this number is burned and some more interface for example we have a tab on which we areGoing to add the nfts and the options on which we are going to add the capabilities to log out so let's get started by setting up here in the wallet address however there is something important to consider also here and is that remember we have on the wallet provider this shared preference libraryOn which we have the load private key which is going to load that variable into the application memory which have also to do that over here in order for that to be persistent so if we close the application then the private key will persist on time so let's do that let'sGo to the wallet let's create some variables over here just after the class initiation so let's say string wallet address string balance and string PB key this PB key is going to reference that private key and it's just because we don't want to keep loading this over andOver again but instead just load the private key here on the wallet page and if we navigate for example to the send page send that private key over as a variable instead of keep loading it from the sharp preference so let's create a new function here which is going to be aFuture void load wallet data this is going to be used to load all the information of the wallet of course it's going to be an asynchronous function let's create a new instance of the shared preference social preference it will get instance then we are going to declare that private key based on thePreference and of course it's going to have this question mark just to verify if the private key exists or not so we are going to do something if we don't have a private key or if the private key is null we are going to say that firstWe are going to declare the wallet provider and using that wallet provider we are going to load that wallet provider.load private key and again remember this function is going to store the private key value inside of the chart preference now let's create a new ethereum address using the web3.dart andIs going to be equal to the wallet provider dot get public key and sending our dip private key which is coming from the sharded preference now we can use a set state to update the widget so set State and here we are going to say theWallet address is going to be equal to the address dot hex actually and also that the PV key is going to be equal to the private key now each time we load this widget on the init State we are going to execute this function so loadWallet data and now we can show this app here on the wallet address widget so instead of saying here 0x let's erase this and put here whatever address let's save and this is going to be blank for now and the reason is the following here on the wallet provider we created thisSet private key functionality right but here on the get private key when we use that number demonic phrase to generate that we are not using this set private key so is as easy as use that functionality over here so I'm going to say await set private key to the privateKey we just generated using this mnemonic phrase let's save this and now we can go again through the process of creating the wallet so create wallet copy to clipboard paste it over here remember the user must paste this outside the application to keep it secure let's click on verify next and asYou can see here bomb magic we have the actual valid address shown upon here now there is something interesting over here let's now restart the application again so let's click on restart and instead of restarting to the main page it means to the create or Imports it is justRestarting to the wallet address and the reason is because now we have this persistent private key on the application because on the login page this is going to verify if that private key exists as it does is going to directly return the wallet page usingThe private key of course and if not is going to send over that create or import page so let's add the log out functionality it means erase the storage private key in the application so I'm going to put that log out here on the options so I have to go to the walletAnd here on this Center view which corresponds to the options is the place I'm going to set over that and you may be wondering why you have this enormous blue lines here and reason is because this is going to expect me to use keywords like const for some of theVariables but this is for not because we didn't add functionality to the steps once we add them this Blue Line are going to disappear so here on the center side let's add that log out functionality so let's set here a child this child is going to be a list styleAnd this list style is going to have a leading which is going to be the icon for logging out so cons icon icons Dot Lock out this is going to have a title cons text log out and we are going to have a on top functionality which isGoing to have a function a synchronous and inside of the synchronous function we are going to set hey use that chart preferences or in other words create an instance of that chart preference and just say a weight prefs dot remove private key this is going to remove thePrivate key so now if we reload the application is going to go ahead to that create or import page however we want also to push directly towards that so I'm going to just use the Navigator and push towards that so I'm going to say here push to create or import page usingThat Navigator functionality let's save this and here we have this create or import page stating that is in a class and this is because we have to import this out so I'm going to go to the top and import that so just import packages Pages create or imported Dart let's saveThis this is going to create that log out button over here and if everything goes well if we click here we are going to go towards that and if we roll out the application it's going to keep loading this page because the private key was successfully removed now let'sAdd the implementation to import the wallet from a seed phrase so let's click here this is going to lead us to a empty page which is going to require the mnemonic phrase and for the that we have this widget import wallet and here we are going to add more functionality andThis page is going to act almost similar as the verify mnemonic page so let's add that functionality really quick again we have is verified variable and the verification text also a capabilities to push to the wallet page which is going to be the one over here and now here onThe widget let's create a new function so let's say void verify mnemonic is going to use again the provider and get the private key once the private key has been successfully verified is going to navigate to the wallet page now we can just take this verified mnemonic and goBack to the import button over here and on the on press functionality just erase this and paste the verify now I'm going to import wallet I already have which has some sepholia balance and so on nfts so let's paste that over here a low based import and this is going to leadUs here with these wallet address now let's call the functionalities to get the assets it means the balance and also the nfts let's start with the balance so the web tree Dart comes with its own function to just get the balances but we are going to use Morales for this andYou may be wondering why well this is the Morales Channel but also is for efficiency you can see the Morales apis are literally the fastest on the market so getting information out of the blockchain using our apis is going to also improve the workload or any application you are working with so weAre going to check the balances of the these wallet address using Morales so for that if you didn't yet please go to morales.io create your free account and here on your admin panel you are going to have direct access to your Morales API keys and for that we are going toUse and for this we are going to use the endpoint gate native balance by wallet on which we just have to provide our private key a wallet address the chain and if we click on try it this is going to return us what it found we are goingTo be using python for this so we can just copy this and add that to our server for that I have here a really simple task server which is using Morales remember you have to install it using PP stylemoralis.m to load the Morales API key into a DOT amp file andOf course the of course the application which is going to be the flask server so in order to get this work properly we can just go back to the browser copy all of these for Python and paste it over here we don't need the import of MoralesBecause we already have it and we don't need the API key because we already have it the important part is this one so let's create a new endpoint using this so I'm going to create a root called get tokenbalance it's going to have the methods get this is going to have aFunction inside of it called Dev get tokens I'm going to get the chain as the and the address as parameters and I'm going to set up that on the parameters so instead of having this burnt address and chain let's say that I want the address to be equal to the address andThe chain is going to be exactly the same now instead of just printing the result let's return it and as easy as that we have an endpoint to get the native balance of any wallet so let's save this of course we have to go to the terminal and run this with python app.piThis is going to start our server and now let's test this out so here on pauseman I'm going to connect to that server to the get tokens balance endpoint and I'm going to send over the chain and the address the chain is going to be sepolia and the address is goingTo be let's say this one for example let's click on send this is going to send the request to Morales and here we have the balance this is in terms of way of course so we can use this and get the balances of any audit included the oneWe have on our wallet so let's go back to the code and use that backend endpoint so here on the utils folder I'm going to create a new one called getbalances.tart and it's going to be really easy first we need to import the HTTP package from flutter and thisPackage we didn't add it yet to the perspective DML so let's go there and add that HTTP package at the end so HTTP and the latest version available so let's save this this is going to again run that floater pop get to install this dependency so we can return to theGetabalysis.dart import this and create just a new function this function is going to be of course a future this is going to return a string this is going to be called get balances it's going to have as import the string of the address and a string of the chain is going to beAn Asic function and then we are going to say final URL this is going to be a Yuri dot HTTP here we are going to send the URL so going to be the one of our server the same we used on Postman then we have to declare the endpoint which isGoing to be be of course get balanced and we need to send over the information or the parameters so I'm going to send over those here get token the address is going to be equal to the address and the same is going to go for the chain nowLet's create a response final response equals to await http.get the URL now if the response status code is 200 it means the response from the server is correct I'm just going to return the response.body and if something goes wrong maybe we make a bad request let'sSay else throw an exception fail to load data let's save this and as this is that we have this function so now we can return to the wallet page let's be sure we import that get balances from the utils so let's import that and now weCan use that where here on the load while the data so after we get the private key and set that into the shared preferences after that we are going to say string response equals a great get balances address dot hex which address well the ones we are getting from thePrivate key of course we are going to be testing this on the sefolio network for this video just don't forget to add this inside of the scope of this if statement I'm going to put this over here let's save now we are going to have a dynamicData it's going to be equal to Json dot the code the response we are going to get from the endpoint now let's say string New Balance it's going to be equal to the data we want to get the balance of it and if the balance doesn'tExist list let's say that we are going to sign this to zero now let's create a new either amount to be shown over here so I'm going to say new eater amount the either amount is going to be called latest balance equals to either amountDot from Big int this is going to be on way so either unit dot way this needs a big hint so let's say B int dot parse and the New Balance we just get from the endpoint now let's say string latest balance initer is going to be equal toThe latest balance dot get value in unit and the either unit is going to be either unit dot either dot to a string and finally we are going to set that balance variable over here with a set state so so set State balance is going to be equal to that latest balance inEither let's save this we can go back then to this balance widget and instead of 0 just set up here the balance let's save again this is not going to be updated yet because we didn't reload the application and here on the assets tab I'm going to also put that balance soSepolia it and instead of 0 I'm going to again use that balance let's save this and now let's reload the application if we reload this now we are going to have the balance of this wallet which is 0.3 it nice now let's go to get the nfts ofThis wallet this is going to be again a really straightforward process for that let's go back to the Morales documentation let's go to web3 data API and the API nfds get nfts owned by an address we can check out the endpoint reference down here get wallet nftsRemember not to share this API key with anyone and as same as we did before we can just copy this code and use it into a new endpoint so let's do that let's go back to our flag server and create a new route this route is going to be calledGet user nfts with a function get rid of this in this case we are going to send over a chain and of course an address and we are going to paste that from Morales so I'm going to take the params replace this with the address and theChain we also want the the metadata to be normalized in order to access to it and now we can use that endpoint result is going to be equal to ebm API nft get nfty wallet sending over the API key and the params and of course we need toReturn that as this is going to return as more than one element let's create a response which is going to transform that response into a coherent Json file and now let's say return response now we have this endpoint ready to be used so we can return to our wallet and here onThe lip I'm going to create a new folder called components and I'm going to put here a new file called getbalances dot Dart or nftbalances dot Dart and I'm I'm here I'm going to fill this up really quick just to render a card for each oneOf those nfts so I'm going to be back really quick and the most important part on this widget that you must know is that again we are connecting to that endpoint setting up the address and the chain and then use that response to render a card for each one of thoseSo now we can just use this here on this nfts dot so I can go back to the wallet import that so let's go up here and import that nft balances and the only thing we need to do over here is to go to the nfts tab on this top view andInstead of having a single child scroll view which is going which is empty over here let's just say child nft leads page and let's send over the address which is going to be the wallet address we are getting remember when we use this load wallet data and the chain is going to beSefolia for this wallet so say Folia let's save this let's click again over here let's reload the application and if we go to the nfts tab we are going to have all the nfts is what it has and well it's going to take a little bit inOrder to render the images for those nfts with an actual image so that's great we have now the way to get the balance to get the nfts of this wallet to log out remember create a new wallet and import the seed phrase and finally we are going to add the capabilities toSend tokens to another wallet so again on the components I'm going to create a new component over here called send tokens dot Dart and here we are going to use that web3 library in order to execute the fonts so first let's import matte let's just import the materialPackage the HTTP and the web3.dart now let's create a stateless widget we called send token page and here we are going going to say that we need a private key here we're going to add some controllers for the styling and then we need to set up the Constructor of thisWidget which is going to have the key of course and we need to require the private key remember I told you that instead of getting that from the shot preference because it's going to overload over and over again application we just use the chart preference onceOnce we load this widget and then we are going to send that information as parameter when we render this now let's overwrite that build component in order to have a widget with the with two input Fields one for the amount and one from the address so at the end we are goingTo have something like this on which we are going to have those input fields and let me show them here on the actual application so on the wallet tab if we click on the send button which for now has a non-pressed capability which doesn't do anything let's add thatNavigation here so let's push towards that widget of course we need to import that so let's copy this name and import it over here let's save this so in theory if we click on send we're going to have this new widget which have this to empty input spaces and let's add theFunctionalities to them shall we let's go back to the send tokens and we just need to create one function actually so let's create that void send transaction it's going to receive the string of the receiver it means the account we want to send the information to the eter amountWhich is going to be the transaction value this is going to be again an async function we need to have a bar for the API URL this is going to need us to add a RPC client could be something like infuria or Alchemy or so on now we needTo have a HTTP client so bar HTTP client equals to http dot client then we need the it client so it client is going to be equal to web3 client sending over dot IP URL dot API URL and the HTTP client of course now we are going to get thatPrivate key so it private key is going to be equal it private key is going to be credentials equal to it private key Dot from hex and I'm going to send over 0 X plus the private key remember this private key comes from that chartPreference now we need to set up the gas price so either amount gas price is going to be equal to a grade it client dot get gas price and this is the most important part we need to add an await a weight it client dot send transactionThis is going to send the credentials and here we need to declare a new transaction so run suction and inside of this transaction we need to add some information first we need of course to specify which is the address we want to send to so to ethereum address Dot fromHex and we are going to send the receiver address we need to specify the gas price which is going to be the gas price we just declared let's also have a mass gas fee over here let's also set up a value which is going to be the transaction value we just declared ofCourse and also we need to specify the chain ID as we are working with sefolio the Trinity is one one five five one one one and with this same transaction we are going to take the information over here and send the transaction sign in with the private key of our wallet soI'm going to go to the elevated button I have here to send the transaction and of course these input parameters are going to come as strings so I'm just going to transform that in something that the web3 library understands I'm going to do it that really quick and now we can haveThat function executed so let's say send transaction we are going to send over the recipient and of course the eat amount we want to send and again that recipient and the edamon are going to come from this input variable so finally in order to execute that in order to beAble to send that we need to connect this in with a RPC client so here instead of using an empty string we should actually add some for that I'm going to use alchemy as my provider I'm going to use for example this foliate test let's click on view key rememberThis is sensitive information please do not share this with anyone I'm going to copy mine go back to my code and paste it over here I'm going to save this I'm going to save this and once we have this send tokens functionality we can just try and execute this so for example IWant to send it to this account and I want to send 0.1 for example let's click on send let's wait some time hit on refresh refresh the application and as you can see here we have the New Balance which is 1.0.19999999 and the reason we have thisOverflow is because we have too much decimals but we can just solve the this really easy by replacing the balance and use something to for example a substring over here and let's just take the first five elements so from zero to four and as it says that we have that overflowSolved so that was it for today's blueprint I really hope you enjoyed this tutorial you know now how to create a new one from scratch on filter you have the capabilities to integrate web3 into your mobile applications and now you can use this project as a template in orderTo create your own wallet with more functionalities that was it for today's video I hope you enjoyed it again please subscribe to the moradis channel and I see you on the next occasion see ya

Create Your Own Crypto Wallet: A Comprehensive Guide Cryptocurrencies have revolutionized the way we perceive and handle money. With the rise of digital currencies like bitcoin, ethereum, and Litecoin, it has become essential to have a secure and reliable crypto wallet to store and manage your digital assets. In this article, we will guide you […]