Dive Deep into Blockchain Development: React Native Edition - Synesthesia | React Native Heroes 2023

so it is very important for our application to let the user feel safe while doing this operation we should Implement a series of Step that the user can enjoy starts with uh inputting all the key pieces that a transaction is composed of and then finishes with a a confirmation so basically the user reviews it and says okay everything is fine I'm sure that I'm sending the right amount of funds to the uh right person so let's go on with it and let's confirm meet [Music] them so hi everybody welcome into our actually first talk we are pretty excited to be here and to show you guys our journey that took off from something that we are familiar with being react native of course and end it up in a fascinating world called Web three uh we've been developing react native application for quite some time now myself has been developing apps for like more than three years more or less while Umberto for almost six and we hope that by sharing to you this journey you will love it as we did it and uh try to develop something using the same Technologies or maybe you know uh release actual HS using web3 uh let's start before diving into the technical stuff with a quick question that being why why web three why not any other topic much more related to react native itself maybe animations a cool Library native modules well it comes down to what we think uh web 3 will be in the future and what we think web 3 it it is actually already uh for us it is an amazing technology uh it is growing quickly a lot of project have been built using this technology and have already been shipped in the outside world a lot of user are using it and keeps uh and the adoption keeps uh Rising uh since the first introduction of Bitcoin nowadays we have got many kinds of blockchains targeting different needs by using and implementing different capabilities that you can leverage and many companies have been uh harnessing their power to develop amazing products that of course hand user can uh can leverage we are explorers we Define ourself as explorers and uh uh while surfing the internet feued by curiosity of course curiosity is our main Beacon of light that shines of course light in this Darkness that's an unknown world to us and with curiosity as a tool in our coding belt we went on and took a deep dive into this amazing world and try to uh understand its point of view from the hand user that uh has a lot of uh project that he can uh use and enjoy and play with such as applications websites um and many more cool things and then we went we kept going and went with the side of the developers so the actual stuff that we enjoy or maybe eight I don't know it kind of depends they being libraries implementations theoretical stuff you should know and we quickly learned that there are two sides of the same coin the first being something amazing something also innocent I would say uh tied to the user eye we call it a galaxy of Wonders this technology uh is a much more complicated ecosystem that one could think of there are many different kind of words that um quickly arised since uh of course the first introduction of Bitcoin we have got uh after the release of the concept of a smart contracts many kind of uh fields in this industry they been decentralized Finance gamification metaverse there are a lot of things that you can play with one could simply lose himself trying to understand their bit and pieces trying to learn how to develop something uh specific for this kind of field they've got different requirements different uh uh Technology stock that you should be aware of and talking about uh Technology stock we can finally see the other not so kind side of the same coin it being something that at first scared us because uh it is it can appear to be pure chaos behind an implementation of a blockchain there are Concepts that are uh that can be tricky to learn at first they being cryp graphy algorithm the concept of a block what's behind a blockchain how you interact with a blockchain what you should use what can you implement and keep in mind that there is one particular thing one particular concept that we as frontend developer uh using react native should keep in mind that being the crypto module uh it is right here and it is something that can be really tricky we will see in a couple of slide why and uh so uh after surfing the internet and uh uh grasping how what we could build using blockchain and what we should be aware of we went on and started to look around for actual resources that H the developer uh can leverage use and take inspiration from so of course we went in a lovely website that I'm sure every one of us use every day it being gab our daily dose of Open Source resources and open source material luckily blockchain is a field that that offer a lot of Open Source material so that's a win for us developer we can enjoy a lot of tutorial guides code uh there is a saying in um in blockchain that is don't trust verifi it and of course you can do it using uh using GitHub so we went on and on giab GitHub was our Turning Point because uh we learned what we could build we learned what we should be aware of and then it was time to find some project to take inspiration from so we decided to try and look around for project that we played with and we found their GitHub repositories there are a lot of repositories they kind of it kind of depends on what you're looking for in this in this uh industry in the blockchain itself uh of course it is correlated to the world that you are trying to build ups on for us it was the concept of a wallet so we went on and looked for some of them and there are actually two repositories that we took inspiration from they being uniswap wallet and rainbow me wallet um we will see later what's a wallet and how you can create it basically in looking for for them we asked ourself of course this lovely question who's out there building stuff uh who's behind implementation do we have to do stuff from scratch is there any library that we can Implement is there any code that we can we can leverage for for ourself uh because this was a learning experience first and uh of course there is we took inspiration from uniswap wallet but um we saw lots of project behind the blockchain E system there are also private companies like coinbase for example and there are are many other kind of uh uh companies and entities that are building stuff with blockchain now it was time for us to decide what kind of blockchain we could leverage and what kind of Library we had to implement to keep it simple we decided to leverage the same blockchain and the same library that those two project that we talked about unap wallet and rainbow me wallet were using they being e ethereum and Ed JS ethereum is a well-known blockchain it has been around since a lot of time lots of project have been built upon it are currently leveraging its Network and of course it is developer friendly so you can search online a lot of material that can guide you and help you develop something using it and Eder JS is a specific Library one of the many that you can Implement with a JavaScript environment and we chose it for a specific reason that we will talk about in the next slide now I'll leave it up Toto that will explain to you guys how we structure our talk and what will be the next step thanks M okay first of all we created a road map to understand what we need to achieve our goal to create this proof of concept app and we divide the road map in four steps the first the up when we where we decided the architectural purposes and which Library we have to use the second is the wallet where resides the creation of the wallet with encryption key and all necessaries to connect to our blockchain provider where effectively we connect on node that is synchronized with blockchain and transaction were effectively made some operation on it so let's go deep in the first step setup as we said before we add ERS that is a library that permits us to use methods from wallet to transaction so we have wallet provider and transaction all in 's library and we choose the version 6.5 at the beginning also if missing reactnative support but why because others JS use some crypto module that is not fully compatible with react native so add there fallbacks to cryptojs I think uh everybody some of you know knows cryptojs that is written in JS and works obviously in JavaScript and it's a little slow on react native we need something to to solve this problem Ed 6.5 offers some override me of of crypto crypto functions so we need to implement it and try we did it and creation of wallet works very well only 300 milliseconds to generate a wallet instead of 15 seconds of cryptojs parts so what could go wrong after we try to connect to provider and sometimes we forget that react native isn't a browser like environment neither and no js1 crying reative developer guess who crying we miss some parts because some function of nodejs are not present in react native so the provider doesn't work we need to think about it and try to solve after a couple of hour of of brainstorming we try to Let's patch things up so we divided this in three different step down downgrade to another version that is fully compatible with the re native add the re native with crypto that we see after and Patch some other crypto module usage so go to the first as I said we install uh ERS 572 is a version fully compatible with react native but also we have to add one other library that is called others project shins this library is also develop developed by adders and it contains some missing environment functions that we need in react native to do some some methods on on our blockchain after this we try again finally provider works so was a little little very good but again the encryption method to create wallet takes a lot a lot of time again 50 15 seconds to to generate a wallet so we found another Library rag native quick crypto this Library expose the same methods of cryptojs but the difference is RN quick crypto is written in C++ so we have more efficient and more performance encryption method than than before so we try to to add it and after we have to edit this B bubble config and add this plug-in module resolver this plugin means that if you have for example an import import some method from crypto you can alas it to retive Quick crypto so every time you import something modu resolver translate this with your library that is written here after this you can think that all can works very well but again again it doesn't work at this time we we don't know how how to do next because uh all of this was enough to to Works no because this is an alas is if headers use crypto crypto now is is linked to retive with crypto so all has to work but no so other three four hours of researching on GitHub issues this time and we found on GitHub issues some patch so we understood that we need to patch one module of ERS in particular the module is called ERS project pbk df2 we have to override in not modules all codes that is present in this in this file with this two line of code so we spent a lot of hour for these two line but finally after patch package running we did it finally all works so creation of wallet takes 300 milliseconds and provider connect in immediately so finally we have a solution so now I give the roof to mirco to yeah and keep remember that uh we kept crying during the entire flow of working so that that's that's really important so uh as Umberto said we finally patch things up and it was now time to get things done and start using header GS methods first off we had to of course create a wallet and uh implement the required feature of a mobile wallet application let's start with what's a wallet why you need it well with web threee technology uh through a wallet you can basically interact with an account in such Network that you you choose of course which chose ethereum and uh it takes care of holding key pieces of information that you need in order to properly uh authenticate yourself move FS funds between uh uh the network and of course also to display some information that you need to receive them um so now that uh we we understand a little bit better what is a wallet and why you need it our mobile application should Implement four key operations to properly function and to properly set up a wallet they being the create method the store method the restore and the import one starting with create um as we said a wallet told the key pieces of information they being the following one from the memonic phrase to the address starting with the memonic phrase it is the key component that we said earlier uh we wanted to try and use and therefore we had to chose other JS as our library because it is one library that actually uh lets you uh create a wallet from a mneumonic phrase mneumonic phrase is nothing scary just a random string of words that basically make up your backup so without it if you for some reason delete the app or lose access you probably will lose all your funds so uh as our job as developer is to show these words to the user so that he has time to properly check them out and of course store in some place is safe because if they are stolen from him anybody else uh using an application implementing the same standard would be able to leverage this pneumonic phrase and get access to a wallet uh then from the pneumonic phrase we get a private key this is another key piece of information that should stay private uh you can think of it like a like a password with which you authenticate and sign off every uh transaction so every time you need to send funds around the network you need to uh first authenticate it to confirm it and to do so you need the private key from the private key we can derive a public one using an algorithm that I will not try to pronounce it it's complicated uh there is an acronym that you can read for yourself it is not nothing scary there is not Helen stuff simply an algorithm that lets you uh create the a Pally and it's one way so it means that theoretically you can't derive a private key from a public one if you search online look enough you will actually see that through Quantum Computing you are able to break this kind of encryption but this is complicated stuff we will leave it for the mut guys out here to figure out and to safely Implement stuff that we can leverage to avoid this kind of problem uh from the public key finally we are on the safe Zone here from here on out you uh actually have to share the information the next one to receive funds and to um let your friends or any kind of uh uh entity that uh maybe wants to send you money uh so that they can actually do so to derive an address from a public key we simply use an as function another kind of mathematical implementation that of course we we still leave it to the m guys out there with the with other GS we have got of course a method that we can Implement that we can leverage it being a static method from the wallet class it is create random it take cares of everything and through this method we actually use the uh function that Umberto mentioned earlier that function that we had to patch up was the one that we um need to use to create a memonic phrase so that's why we needed this patch otherwise it would take up to 30 second 15 seconds something like that to create the the wallet so it is not acceptable from the user experience point of view uh that said now that we have got a wallet up and running that the user can actually see all the key components that he can share it being the address the balance of the of the funds that he holds it is now time to implement a proper way for the user to go back in the app maybe the day later or or maybe an hour later and find this wallet up and running again because we said um that the only way one of the ways to uh use a wallet is uh with the pneumonic phrase but we can't uh let the user uh input every time a random set of of words because it isn't it isn't a nice user experience so we can leverage actually something that all devices have at our disposal they been a storage key pieces of um of uh technical stuff that uh we are able to uh call from the JavaScript side they being the keychain and key store through them we are able to store the private key it being a the password to the account and uh of course it isn't enough because uh bad luck happens maybe the user phone gets stolen so if anybody can crack its password or can get access to it uh he would still be able to open the app and use hold the funds freely as he wishes to uh to avoid this we can Implement standard ways to achieve authentication authorization they being fingerprint pH recognition onetime password all the kind of mix in that we can think of to his this kind of security layers for the user to enjoy and to uh to implement as he as he wishes for so now we've got both the way to create a wallet and bought the way to store something that can help us initialize it back once the user go back to the app and uh to restore a wallet using the private key we are able to do so using the wallet Constructor uh of course of Ls itself we simply read the private key simply actually but we read it and then we input it to the wallet construction and we've got our wallet up and running the last key operation that we implement but not the least one not the least important one it is the import this is uh uh this this is something that you should take care of because uh uh there are many kinds of wallet many kinds of services that uh someone can uses to create a wallet so uh we should take care of the kind of user that it's the first time that wants to try web three technology so doesn't have an account already yet and and then we should also take care of the kind of user that already has an account and that's of course generated using uh compatible standard it being the mneumonic phrase flow so someone that has already got this um series of words and therefore can input them into our application and enjoy it wallet up and running so uh with this we we can hand this chapter related to a wallet we found out how to create one and how to properly set up up and running and now we will have to talk about a keep key of information uh that lets us interact with it I leave it up Tober explain it to you so we we speak about provider and everybody knows that if you want to call some something out of mobile app some backend you need a back end to to call something also for the blockchain is valid this this concept but in blockchain is not called backend but it's called node this node is a ser that is synchronized with blockchain and provides some methods to access exist two ways in this case to implement uh one node and one the first is develop one node so one custom node but in this case we have three different type light full or archive I don't want to go deep in this because too much too much um difficult but uh for example if you want to develop a decentralized app or complex wallet that needs to access transaction of years ago you need to to develop an archive node and this is not the only block blocked way but also you need to know the hardware and bed withd necessary to develop one of these and every type of node at different different requirements of hardware and bandwidth but exists another way so the first what should we use I forget this what should we use n neither of the three before we have to use another way the other way is to use the services online exists some services online like Firebase or Amazon web service that can provide for you one node that is that fulfill your uh your purpose this this not so exist also another uh another service that is called quick node quick node that is the easy way no because if it's like Firebase or like Amazon is more simple let's develop one entire node so we quick not this one service externally that provides you a dashboard that you can edit configure it your purpose and also provides two different protocol one https and one is websocket for our purpose we we choose obviously https because it's a proof of concept we want to to try to make transaction so was enough but nothing Chang if we want to use web so all we choose quick node and now it's the moment then we have to connect to our headers so adders provides one one class that is called provider and this class permits to instantiate one methods instantiate more methods that permits to you to read from from from your blockchain so you can for for example get the balance get the transaction or also send the transaction the provider accept two arguments the first is provider URL that quick node in this case provides to us and the second is provider network provider network is based on ethereum ethereum offers a lot of network in this case I want to divide production and test sure we use obviously testet which chose sepolia seia Network also to to pay too much gas fee we don't want is only for test and after to connect to connect the wallet to connect the provider to the wallet we have to launch the second the second line code and instantiate the the new wallet and this wallet is the wallet that we have to use in all so now again it's turn of M all right thank youto so finally that we've got our lovely wallet up and running and uh the provider as well so we can interact with lovely node let's talk about Transaction what are transaction basically you can see them as an exchange of value in this case between Elon Musk and matella but it can be anybody else in the world and also it can be any kind of of uh entity inside the blockchain so you can either see the transaction between as an exchange of value between you and one of your friend or between you and a decentralized application that we mentioned earlier they being application running on a blockchain that offer you some kind of uh uh project up and running that the user can play with uh one key piece of information you should know about a transaction is that uh technically it is very hard and by it I mean very very hard to revert it so once a transaction gets validated by a network it is settings stone at least in ethereum and um to revert it there is it is quite a challenge you obviously have to have some malicious intent you are able to do so but trust me it's really difficult you can look it up you should have so much computational power that I I I think you need a lot of money I don't have that kind of money unfortunately I'd like to try but it's feasible at the moment at least and um so this transaction also as Umberto mentioned earlier cost something as in the Fiat word as in with Euro USD whatever kind of currency you have at your disposal you have to pay something to the network itself the network is is composed as Umberto said of nodes they validate the blockchain they take care of the blockchain for us so we have to pay a fee to them to include our transaction our exchange of value and um persist it inside the blockchain so it is uh very important for our application to let the user feels safe while doing this operation we should Implement a series of Step that the user can enjoy uh that starts with uh uh inputting all the key uh pieces that a transaction is composed of and we'll see it soon enough and then finishes with a a confirmation so basically the user reviews it and says okay everything is fine I'm sure that I'm sending the right amount of funds to the uh right person so let's go on with it and let's confirm it starting with the first step ljs exposes a method that we can leverage uh let me just say though that this is one of the method that you can use there are actual short ways that you can implement we chose these kind of steps to properly show you guys how you can structure a flow that's actually safer for the user the first one being populate transaction this kind of method uh creates a transaction object and um takes care of some of its properties that without it you should know and of course also uh Set uh behind this method our wallet queries the provider for some information that it needs to set the the properties too for example the gas limit we'll talk it we'll talk about it soon enough in a in a little seconds uh first let's focus on the two key uh properties shown here the first being the two property and the second one being the value the two stands for the receiving address so uh as we said earlier the only way to it's not the only way but the standard way to move funds is to uh think about entities inside the blockchain as addresses so you need an address for as a standard way to send money there is also another kind of way we we have not yet implemented it but there is so you have two ways at the moment the first one is this address so a user should have an input to properly set these address and they change uh depending on the kind of blockchain you are trying to implement so to make it easier for the user you should know what's the structure of the address of your blockchain in the case of ethereum it has a prefix that's 0 x uh and Al also length but of course you can check out all the uh requirements and all the necessary step to ensure a correct validation uh so after the user inputs the address and we validated it then we've got the second property that's the value uh the value stands for the user amount so he should have also a property input to uh set how much money he wishes to to to send to another address uh we talked about the gas limit and it is also a third piece of information that stands for the cost of a transaction it is a group of properties actually they've been all related to the cost of a transaction since uh a recent de recent change in the way ethereum works now you got actually different uh properties that you can set but even header JS documentation uh encourage you to leave it as it is for the user to set them up using the wallet itself because it's not that that easy to to do so and not many user have the knowledge to properly set the cost of a transaction so that they don't lose the transaction itself so that the transaction doesn't fail basically that said let's go back to the value this is important to us because uh with ethereum we must um think think about the native asset chain so the funds itself as named units to proper understand the transactions these named units the main one at least are way G way and Eder way is the standard named units that we can think of and that Ed GS needs when reason when thinking and setting up a transaction um while gway stands for the G stands for gas uh and of course we can use it to talk about cost of a transaction itself and then we've got of course Adder um Adder is the kind of uh named unit that the user wishes to input in his application therefore we need to take care of the conversions between them and to do so of course we don't have to implement some version from scratch of the logic that we need to do so we have got headers that cover us and exposes some some methods that we can use they being Parts units and format units the first one takes in a a string and basically converts it to a named unit whose type is big-ish big number is a union type of uh string number int bites there is a lot basically what you need to know about this is that big number is is the kind of type of value that ljs needs to that works with so it needs for the transaction while format Unis does the opposite basically take takes an amount coming from the blockchain a value coming from the blockchain from ejs and converts it back to something that the user can understand now we've got some examples on your left you've got user chosen amount in Adder this flow represent the usage of Parts units we can uh use pars unit as we explained to convert something that that's coming outside of the application so from the user itself back into something that adders understands on the right we've got the opposite we've got something that Adder JS outputs and we need to convert it back to the user when do we need this we need it through throughout the entire usage of our application first from the dashboard for example to show the right amount of funds that the user has and of course throughout the entire flow that's sending the the transaction itself to the network we need to accept Adder as an input and of course convert and show the right amount of information to the user like the transaction cost and uh anything else really so now that we have got named units covered let's talk about how to properly send it what we can use from otherg itself we have got as I was saying before shorter ways or longer ways we've got the longer one here we've got two methods the first one is a sign transaction to the wallet object itself basically it encrypts the private the transaction with the private key and you end it up with a exad decimal strings and that kind of information is the one that you need to supply to the other method uh it mean send a transaction from the provider itself basically this send transaction sends your lovely transaction to the uh node that you've got at your disposal and the node will then take care of it from these uh operation then you've got many other uh methods that you can leverage for example you can leverage a method that we didn't actually implement but it can be useful you can wait for the transaction to actually end uh so you will eventually block the thread but you will end up having a user experience in which you will if the user wishes to do so uh make sure that the to wait for the transaction to actually execute I don't know when you could use it but maybe for some project you will find a useful case that's that said after we saw how to create a wallet how to input something from the user and the transaction itself you can see the last part so build up you can see the entire flow from the uh create random method that's create your wallet up to the send transaction that b basically send and with this it completes our presentation I hope that you enjoyed it I hope that you loved it as we did and maybe you'll try to create something and send us your your project [Applause]

Channel: React Native Heroes

Views: 236

Keywords: React Native, blockchain, decentralization, EthersJS, web3, memecoin, tokens, blockchain development, React Native crypto, send receive tokens, blockchain assets, decentralized applications, React Native tutorial, tech lead blockchain, developer guide blockchain, crypto operations, blockchain for beginners, web3 tutorial, React Native developer, cryptocurrency technology, blockchain video guide, blockchain application development, React tutorial for blockchain

Id: oE5Aej-eaeU

Length: 37min 52sec (2272 seconds)

Published: Fri May 10 2024