Thiago Brezinski - Build Universal Web3 Apps with React Native

Transcript

so thank you thank you for being here everyone so today basically I have a little bit of a different uh talk uh so I'll not be I'll will not be talking about l2s or EVMS or all of this deep blockchain stuff but instead I'll be talking about the building good front ends uh for that so basically we have build Universal web three apps with Rec native my name is Thiago brazinski I work at ktec uh I'm a senior Rec native developer and basically at KC we're trying to uh work in this Niche uh interception intersection between web 3 and Rec native and trying to understand why it has been so difficult to build uh good uh web 3 mobile applications uh

until now uh why it's not the case anymore and how we can do it uh with react native so first we need to talk about what are Universal apps and these are apps that basically using the same codebase uh you can Target uh multiple platforms so the beauty of r is that using the same code you can build to iOS to Android to web Windows Mac OS and even Vision OS and other different platforms uh but the the thing to to keep in mind here is that it's not a web view it's not any custom rendering uh engine uh it's just using native components so JavaScript in this case is just orchestrating uh the native components from the from the operating system and you get the the whole uh Native uh look and

feel so this is series of tweets got got pretty um popular around last year when Matt was basically saying that people didn't even notice that R native was being used in the PlayStation 4 and PlayStation 5 UI uh until until the community uh was J breaking the the PlayStation 5 um so this is how you can you can know that R native just integrates similarly with other native applications and you you can keep the native look and feel and performance it's also used in in the Xbox uh UI also because Microsoft uh is a big player in the rec native space so if you're not familiar with r native this is the basic uh most basic

code you can get um to to to build with r native and if you're familiar with web development then you can just uh you can know the analogy here basically the views will be HTML Dives and text are analog to paragraphs for example uh and this runs in every platform as as I mentioned so we need to talk about the current uh dep situation and basically if you look all all around web 3 you're going to see that most dabs are web only uh and only maybe the top three uh deps will have the equivalent uh Native mobile experience uh so for example if you look at blur it's only web if you look at Sushi swap The Exchange it's

only web also uh Hey the the lens protocol client only web uh but then we have a we have a few good mobile containers for example orb another lens protocol client uh especially now in V2 they're excellent mobile expence uh also warcast which is also a universal app uh it's amazing and Unis swap we don't even need to talk about it it's amazing but why we need to talk about why it has been this way why it has been so hard to build good web3 mobile experiences and it's mainly because of the popularity uh of the browser extensions uh because the browser extensions wallets they basically standardize this way of injecting the the ethereum provider inside the window

Global um and the window Global is a a browser um um web API right so when you try to to take this out of the browser uh it's going to crash obviously and then the most of the web threee libraries was were built with this in mind so they're also sometimes hard to to Port outside of the web uh and this leads to a big number of polyfills when you want to to bring this to mobile for example so let's talk a little bit about polyfills so if a few months ago if you tried to start a Rec native project with web tree uh using the the famous web tree libraries you would probably stumble across this uh errors and maybe more these these three are only a few of

the most U common ones uh and basically it's missing apis from the web that are not present in in Rec native so for example let's go a little bit uh into each of this so in in the first one we basically don't have the crypto module which is present in both the browser and node.js the second one is atob and btoa these are Bas 6 for encoding and decoding apis also not present and then we have the text encoder NPI which is also not present the in the rec native environment so let's talk about a little bit of these and why it's not the case anymore um it should be already f so first the crypto API so most most often uh even web Tre apps when they

need the crypto API uh most often they only need a a good way to Generate random values to use as a seed for the crypto functions and crypto crypto hashes um and this needs to be generated uh natively because JavaScript doesn't have uh can't guarantee enough entropy for random values so most often depths we only need this from the to API so if you only need this you can just install this polyi called Rec native get random values it's done natively for IOS and Android uses native apis from each platform that is already battle tested uh for years in these operating systems if I if I not uh if I remember correctly what is used in in iOS dates and uh the

API dates from IOS 3 if I'm not mistaken uh but then if you happen to need uh the whole crypto module then you can just install Rec native quick crypto which which is meant to be a complete replacement for the nodejs crypto API and then when we talk about the other two polys so Bas 64 and text encoder um basically we have the Hermes team so this big um H green h here Hermes is the JavaScript engine that powers Rec native so for example uh on the on Chrome we have the JavaScript engine it's called V8 when it's the same on nodejs we have a custom one for reg native to better fit reg native needs

for example startup time which is more important in a mobile app and the team at Hermes basically they polyfill this natively into the JavaScript engine for us uh this is actually very recent uh like one or two months ago and this should be already be present in R native 06074 which is the next version that should be coming uh in the next few weeks so this also should not be problem anymore so at this point we should be good to to write a Rec native application for web3 using web3 libraries and have uh very little problems so let's talk about the next generation of web3 apps uh I strongly believe they will be built with Rec

native for multiple platforms at once and it's going to be using those tools so Expo Rec native web Rec navigation vnm wagi and thew connect web Tre model so uh here on the right we have um a few one example that you can build using Rec native targeting native platforms for example this app in the right and also have the equivalent uh web experience to to the left so you can see that I can also uh specialize for example on the web I can I I prefer to have a sidebar instead of tabs which are not popular on the web and then I can just on on mobile I can just use my tabs also on the web as I have more screen real estate I can put more columns in my list as on mobile

I I only keep column because it's better so this is these are only a few examples of what you can do you can do wherever you prefer to to get the best of each platform so let's talk about each of these uh tools here just a little bit in case uh you're not familiar so if you're not familiar with the reg native ecosystem uh there is expo Expo is a framework to help develop Universal apps think of it like the nextjs of re native so they provide you with a lot of cura native modules for example Maps camera images uh geolocation sensors whatever you can think of uh then they also help you with automated builds deploy to app

stores and overd updates basically if you're starting a Rec native project today uh you should probably be going with axo because they will facilitate uh several things for you then we have R native web uh which is used by Expo and the hood and it's it's a compatibility layer between Rec Dum which which is Rec web and Rec native basically Rec native web will take your Rec native code like views and texts and translate it to the web apis to Dives and paragress for example and much more of of course but this is just a basic example then we have R navigation which is the standard navigation library in R native uh they provide R navigation provides you with uh these navigation

Primitives like the tabs the sidebar or pushing Stacks uh on top of uh each page and this is also using native apis from each from each operating system then we have VM which I believe many people here might know uh it's very popular in the last uh year let's say uh it got a lot of um riseing downloads and it's a lightweight interface to ethereum so it's it's an alternative to web 3GS or ether JS and you can communicate with the blockchain so send and receive thata and the the advantages is that it's lightweight and performatic uh so for example in the first two lines we can

see that we're querying data from the blockchain so get getting the block number and getting the the gas price and in the last two we're asking the wallet to sign a message or send a transaction so it's easy like that and then we have wagi which is built by the same team as VM and it's just a react hooks wrapper on top of VM so it's basically a react way of using VM uh and you got these reusable rack hooks you got caching you got persistence um it's just a better development experience to interacting with the blockchain and of course VM is a dependency of wagm so you basically usually you're going to be installing both of them and finally we have wild connect web tree model which you I'm certainly

certainly every everyone here already saw it when interacting with deps uh probably maybe the most famous model to to connect the wallet um and they integrate well with VM and wagi that I just showed and they actually have a both a reg native SDK and a web SDK um so in the web you get this centered model and in in in R native in Mobile you get this like bottom sheet which is more like a mobile uh look and feel so I talked about all of these tools but how we can actually do it to build an Universal app so basically we need to do these three big things which is setting up a navigation connecting the wallet and then interacting with the

blockchain so you may already see where I'm going with this so to set up the navigation we're going to be using platform specific code so basically Rec native has this platform API that that lets you like Branch off or run conditionals uh run different code for each platform so in this case for my navigation the example I showed you before um for when I'm targeting the web I want to render a drawer Navigator which is that sidebar and when I'm on if I'm not on the web I'll be on mobile then I want to render the tabs so the beauty of this is that I'm just replacing the shell but the screens inside they're the same so we're we're reusing this the same con for our

screens and all the data fetching all the all the components are going to be the same so you instead of also checking for the web you could be checking for iOS Android uh specifically if you need and then after we set up navigation we need to connect the wallet so to connect the wallet we're going to be using platform specific file extensions so imagine you have a button that you want to make it look different on each platform you could also be doing this the same way I just showed you but in there's another way which is just using this file extensions so you can have a button. iOS button. Android button. web and it's going to be loaded um conditionally on on each platform and this is powered by metro metro is the

JavaScript blender for for rec native so a bundler is basically what takes your all your project files um um how do you say it analyzes the dependencies and outputs a single Javascript file in the end to for production right so Metro is going to see these file extensions and drop the ones that are not needed depending on the environment you're running so we're not okay so we're not talking about buttons I want to know how to connect the wallet so the as I said the web Tre model won webt model they have both Rec a Rec native SDK and a web SDK so what we can do here is we can create a directly directory called web3 model or anything else you

want and then we have two index files so we have we have a standard index.ts and then an index. web so since the web is more specific it's going to it's going to take uh when it's running on the web and in every other case it's going to take the the plane index TTS so if you look at the code here in the right it's just the same thing uh but uh when when we're on the web we import the web package and when we're on mobile we import the mobile package and the rest is just a standard setup but how do I use this so this is the beauty of uh everything so you can just import this directory that you just created that has the the index uh specific files and the Metro blunder

will figure this out for you so you don't need to do anything so when this is running on the web it's going to pick the pick up the index. web file and when it's running on mobile it's going to pick up the index normal file so then you can just import the components as as usual and render them so with with this single piece of code you're going to be uh using this model on both web uh and and mobile so after connecting the wallet we need to get data so maybe this is uh the EAS the easiest part for you so uh we basically have two ways of doing this uh first is uh using the ethereum interfaces such as VM as already showed then we can use data aggregators such as Zora such as Alchemy or using the sdks itself for example lens protocol they in

their SDK you can query posts or users directly through the SDK so in the example I'm going to show next I'm using the Alchemy API where you can just pass an address and get all of nfts for for that address and then I can just use that to to render a list so when you mix it all together uh um for example in in in here in this case I decided to put my wallet connect button on the sidebar on web and on mobile I decided to put it uh on the header when you click it you got this um Native look and feel for each platform so it's using with the directory Rec created it's using the the web API uh on web and the this bottom sheet the rec native API on Rec

native and after you connect your wallet you can display the data that you just got so the same example as I showed before for we can uh specify um better for each platform so in this case on web I decided to have four columns and on mobile I decided to have only one column but you can do this as much as you want as much as you U think you can take advantage of each platform's uh strengths so another example is using the lens protocol you could create for example a crossplatform lens protocol client and where I'm using the SDK to to get my profile on testet and then for example if you move to the homepage you could be quing the posts and showing this post in a crossplatform way uh also so you have a native app you have a good

uh web uh app and you can just reach much more um broader audience uh right from the start without too much effort so if you want to know more about this uh these two examples are in this QR codes so in the left we have the universal nft list and on the right we have the lens protocol client and if you want to know more we go uh deeper into this into the cack blog we have um these two articles explaining why these decisions of why we went with this code and how to do it more specifically and other uh cool topics also um if you want to know more about this also you can find me in the

conference or find me on X forecaster or lens uh just send me a message thank you perfect thank you so much we do have some time for questions from the audience if anyone has any questions no okay then I actually do have one so um from your experience what what do you think is the biggest difference for building web 3 applications versus web 2 and like what's the biggest challenge for building for web 3 honestly the thing that is different uh is basically fetching data because you're just fetching from the blockchain or from one of these options I showed uh but the

rest is mostly the same like okay instead of logging in you connect your wallet and then you need to fetch data from different places but the rest is mostly the same um you you still need to do the same performance optimizations you still need to you face 90% of the same challenges as a normal front end yeah and that's what we're trying to to to do here a some cool and what was your motivation for building for web three it's just that because um we we develop a lot of mobile apps and when I started on web 3 a few years ago you you just noticed that you don't have very good uh mobile apps except for the top three or top five uh big players for for

a long time so yeah you you just noticed that there's something missing and you don't know why so we're trying to explore this intersection and try to help uh get more better mobile experiences awesome cool thank you please give him a big round of applause again