How to Build the Ultimate Web3 Mobile App (2024)

hey everyone Sean Wata here back with another video and in today's tutorial we're going to be building our very own web3 mobile app for IOS and Android we're going to be using third web's react native SDK to build our very own web 3 mobile app and the best part of this is we're going to be building the best web 3 mobile app user experience because we're going to be using features like smart wallet and embedded wallet and what this is going to allow us to do is create a mobile app experience where a user never has to exit it our mobile app to connect to a external or third-party Wallet app like a metamask wallet we're going to be able to allow a user to sign in with social logins or email and we'll be able to enable features like a gasless functionality using smart wallets which will abstract away all of the web 3 complexities that a user normally has to deal with with a web 3 mobile app so an overview of what we're going to do in this video we're first going to take a look at a demo of the web 3 mobile app we're going to be creating we'll then deploy some of the contracts that we're going to use for this mobile app and then we'll take a dive into react native to build out this project so with all of that being covered let's jump on the computer here and let's take a look at our application so right here on my computer I have a iPhone simulator running our web 3 mobile app now this is just our login screen here we have a sign-in button which is actually a connect wallet button from third web when I click on it you can see here I have the options to sign in either with a social login like Google or I can sign in with an email and this is using our embedded wallet here so if I sign in with Google I'll be able to sign in with my Google account uh if we sign in with email we'll be sent a OTP where we have to verify and it'll sign us in with our email so we could do here is sign in with Google and this will just open our Google here now it may not prompt me to sign in cuz I already have a Google account already connected here so it might just yeah automatically sign me in and what this is actually going to do here is connect us to our application now at the top here you can see we just have a web3 mobile app we have a sign out button which will just sign out or disconnect our wallet from our application here we can sign back in once we're signed back in you can see here we have this top part which is a token balance so we have a token here that we're keeping track of the balance of and I just have a button here which is we're going to be able to claim some free tokens so if we hit claim token um the way we have everything set up is again we won't have to go to another app application or Wallet app to confirm these transactions everything can happen right here within this mobile app and once we claim our token you can see here every time I click it I'll get 10 free tokens so if we click it one more time here once that transaction goes through we should have 25 tokens here under our balance there you go we now have 25 tokens if we scroll down a little bit we have a collectible section here where we have these different Collectibles uh these are ERC 1155 tokens we have the cost of each one here so this one costs five tokens this one cost six tokens this one costs 10 and down here we have our owned collectable so you can see we own this nft and that nft as well so let's buy this middle one here that we don't have yet which costs six tokens so if I hit buy now again we are using our custom erc20 token here so once this transaction goes through our balance should update and go back down to 19 uh and we should now have have uh claimed this uh nft right over here so there you go you can see our token balance went down to 19 and if we scroll down we now own one of each of the nfts and again this is an example of our web 3 mobile app being able to create again that seamless experience where we abstract away all of the web 3 complexities out of this application so now what we're going to do here is take a look at the contracts that we're going to use for this application so again we're going to have a ERC 202 token contract I have a contract right over here it's a token drop contract if you want to deploy your own token drop contract we'll add a link down in the description below but you can just deploy your own token drop contract and then under the claim conditions here you can add your own claim condition we're just making the supply of this unlimited and we're making it free just so we can test out some free claiming within our application The second contract we've deployed is an addition drop contract which is a claimable ERC 1155 contract I have three nft assets here if we go to the nft tabs here on the left so I have three nfts here each one of them has been set up with their own claim condition so if I head over to claim conditions here you can see this first one here I set up where it cost five of our custom ERC 20 tokens that we deployed so in order to do that we'll set up one for our second one here all you need to do is select the token head on over to claim condition I condition you're going to add a phase we'll select public we'll get our erc2 contract address and under here we're going to put in how much we want to charge so let's just say this one we want to charge uh 10 of our erc2 token and in this drop down here we can go down to custom erc20 and we can paste our token contract address in there and hit save now you can limit the supply and everything or you know adjust any of the other parameters for your claim condition here but I'm going to leave everything like that we're just going to charge the 10 uh custom erc20 tokens here so I'm going hit save phase and the one thing you want to also make sure is that the custom token that you're putting in here is on the same chain as your ERC 1155 contract so both the contract and the to the nft contract and the token contract need to be on the same network so confirm the transaction here and there you go we now have our claim condition set for our ERC 1155 token so you can do that with your tokens that you want to add into your mobile app again we can add phase public switch this over let's just say we want to make this one 15 and we'll add our token here hit save and then save all right so we have our token contract and we have our nft contract set let's now create our mobile app using the react native SDK so I have my terminal open here and I'm going to MPX third web create app we're going to name this our mobile web 3 app and we're going to use react native here and we're going to create an expo project and once that's done we'll change into our mobile web 3 app here and we'll open this up in our code editor and once we have that up opened up in our code editor we'll head over to the app. TSX file and if if we scroll down a bit we're going to set up our third web provider here so the first thing we need to set up in third web provider is our active chain so this is going to be the name of the networker chain that you have deployed your contracts to and that your application or mobile app is going to be working with uh We've deployed or I've deployed the contracts to Mumbai so I am going to be using Mumbai here next we need to set the client ID and if we come over to our files here again and we go to this env. example here we're going to have our Expo public and we have our third web client ID here so we're going to provide ourselves with our client ID and you can get this by creating an API key through third web so in third web if you come to the settings tab you can create yourself an API key I'm just going to use one of the API keys I have made already here if you want to watch a tutorial video learn a little bit more about API Keys we'll link that down in the description below the one thing you do want to make sure though is that you have smart wallets and embedded wallets enabled so come back to our code editor here I'm going to paste in our client ID here I'm also going to come back to our files and rename this file and get rid of the example and just call ITV I'll come back to the app. TSX file and right below that you can see we have supported wallets now for our mobile app we just want to support our embedded wallet login which allows us to sign in with our social loog or email so we have embedded wallet right over here I'm going to get rid of all these other ones here so we'll get rid of all of that make sure we just have embedded wallet now with embedded wallet you do have the ability to customize your o here so we have options like email Google you can also add things like uh Facebook and apple as well and the one thing that we do want to add onto this though is embedded wallet but we do want to finally connect with a smart wallet to our mobile app and some of the reasons we would want to do this is with smart wallets we have the ability to enable gasless functionality which will allow us to pay for gas on behalf of a user and what this would allow us to accomplish is a user doesn't need to fund their embedded wallet or their wallet for the application we can take care of the gas and everything for the user so there's no need to fund a wallet in order to start using your application a user can start using your app right away once they have logged in so to set up smart wallet we're going to need to set up our smart wallet config so let's create one up here so we'll create a smart wallet config here and for our smart wallet we need to provide it with uh two things we need to provide it with a Factory address and we need to set uh gas list to true or not so for this we are going to set gas list to true and we're going to provide it with our Factory address now what a Factory address is is in order to create smart wallets you need an account Factory contract so if you come on over to uh third web here and you come over to your contracts and you deploy a new contract you'll have to set up an account Factory contract here which will allow you to generate the smart contract accounts or wallets for your users I already have one deployed but if you want to again watch a video to learn how to deploy your own you can check out the links down in the description and we also have a course on account abstraction which goes through all of this in more detail but I'm going to come back to my code editor here I'm going to open my file directory here I'm going to create a new folder I'm going to name this constants and I'm going to create a new file in there called constants TTS and in here I'm going to paste in my contract addresses I'm going to be using throughout this application so over here I have an account Factory address uh which is going to be the account Factory contract I deployed and then my nft contract and my token contract are going to going to be right over here and let me just double check to make sure these are correct so we have our nft one which I need to change here and then we have our token contract which I believe is correct here so we're going to have our nft contract our token contract and our account Factory address so coming back to our app. TSX under the account Factory address I can add my account Factory contract address right here and that is going to set up our configuration for our smart wallet and to add smart wallets to our application is really easy under our supported wallets here we're just going to add our smart wallet we're going to wrap our embedded wallet here and then we are going to provide our smart wallet config so we just import smart wallet here so with this we can say that we want to support smart wallets and the EA to this smart wallet should be an embedded wallet with the these configurations here and then we pass it our smart wallet configs which is our Factory address and us saying that we want gases transactions here so now uh let's come up here let's clear out some of these and clean up some of these Imports of the wallets that we removed and with that we now have the ability to log in and connect a smart wallet to our application so if I open up my terminal here I'm going to run yarn iOS all right and once that is up and running so it's now running here on the iOS simulator here we can see that we have just the templated components here that we get when we create a third web mobile app with react native so if we scroll down here it is basically giving us this app inner here with the text saying react native third web starter and a connect wallet button so with this connect wallet button we should be able to connect our application or our mobile app here to our smart wallet so we hit connect you can see we are brought up with our embedded wallet which provides us with uh Google Facebook apple or email because that is what we provided here in the Au options uh we can hit Google we'll hit continue you can see here it's signing in with my Google account and we are now connected to a Smart wallet so if I click on here you can see we see uh we are connected to a Smart wallet that is our smart wallet contract address here if I switch to my personal wallet this is the embedded wallet so this is the Google uh embedded wallet here so that's the wallet address for the EA wallet to our smart wallet I can switch back and I can sign out as well here so first thing we're going to do is we're going to get rid of this text here and we're going to show only a login button here um when a user first comes in so we're going to disconnect we can actually change this connect wallet text here uh under our connect wallet here we can add something called a button title and we can just have it say sign in so you can see here we changed the button to say sign in instead that way it feels a little bit more like a login than it is connecting a wallet and once a user is signed in let's say we want to display them with our application so how do we know if a user is signed in or not to our mobile app uh we can use something called a use address hook so I'm going to create a variable here called address and we're going to use the Ed address hook here from third web and what this use address hook here is going to do is return us back a string of the connected wallet address uh or if there is no wallet available it'll return us undefined so using that we can determine if a wallet is connected to our application or not so under this return here uh we're going to have just going to take this out real quick quick so in our return here we're going to check if we have an address so if there is no address we're going to show our connect wallet button and if there is an address then we are going to show our connected view of our application now I have some Styles here that I am going to add in so coming down here I'm going to replace this stylesheet with some Styles just so we can make sure our app looks nice and pretty as we go through this tutorial but again a link to this GitHub report will be down in the description if you want to check it out and then this connected view is going to have our styles of our connected view whereas this one here is just going to be our regular view with our connect button here so what does this look like so far if I sign in and I connect with my Google account here once I signed in I should see a blank screen here because we haven't added anything into our connected view here so we'll add our first thing to our connected view which is going to be our title and header here so I'm just going to add a title up here saying web 3 uh mobile web 3 app so we'll add mobile web 3 app here and then the next thing we're going to do is create a sign out button so we're going to create our own component for our sign out button here and I'm going to come over to my file directory here I'm going to create a new folder we're going to call this components and in that components folder I'm going to create a new file and call this our signout button. TSX and for our sign out button we're first going to create our interface here for our sign out button props our button is going to take in a title which is going to be whatever string we want the button to say we're going to give it a onpress function and then we can give optional colors and text color for the button if we want to change the color and text color of the button so in our component here for our our sign out button we're creating a react functional component here um taking in everything and the default color is going to be a default color here and our default text color is going to be this right here and what our component is going to be it's going to be a touch opacity here we're going to set the on press to whatever function we provide it with up here and then we give some styling and everything to our buttons uh which we provided some styling here like some padding border radius some text and everything down here and inside of that the text should show the title that is provided to our component here so again this is just a custom button that we're making for a sign out button and the reason we're doing this is we're going to create a button that just disconnects the wallet from our application now you could uh come back in here and we could show something like a connect wallet button still that's oh not say sign out but connect wallet button uh what that would show though is the connected state of the connect wallet button and if we click on that you can still sign out by clicking this button here but you also get all these other things like send receive Network switching and maybe that's just something you don't want to show to your user so here what we can do is we can get our sign out button and we have to provide it with a few things we have to provide it with the title which is going to say sign out and then we need to Prov provide it with our on press here which we're going to create the the function to disconnect our button so what we can do up here right under our address is we'll create a variable called disconnect which is going to use the use disconnect from third web and use disconnect basically just disconnects a wallet from your application so over here we can just provide it with disconnect and we hit save you can see we have a sign out button here and if we click sign out you can see we are signed out and brought back to the sign-in page for our mobile app so I can sign back in again use Google and once I'm signed in you see our mobile app title and our sign out button right over here all right and now that we have our login flow and signing out flow let's start building out our mobile app here so the first thing we want to do is create a section here where we can look at the token balance of how many tokens that we have so what I'm going to do here is we're going to get our token contract so we can get our token balance so we're going to get our contract here I'm going to name this our token contract and we're going to use the use contract hook here from third web and we're going to provide it with our token contract address so we have our token contract address here now that we have our token contract we can get our uh balance so we can get our token balance here and we're going to use the use token balance Hook from third web and what we need to provide it with is our contract which is our token contract here and then the address we're checking the balance for which again we stored in an address variable up here using the used address hook so now that we have that information let's say right under our header view here let's create a scroll SC view we're going to add uh some styles from our scroll View and we're going to set the scroll vertical scroll indicator to false we'll then add a view with the style of card and within that card will show a heading that says token balance we'll then get the uh token balance and display it here so in order to get the token balance we're going going to get our token balance here and within that there is a uh property for display value so this will return a string in a displayable value of our token balance and we'll just give this here A style of our balance text so if we save that you can see here uh we have token balance and then we have our token balance here which is 19 next thing we'll do is we'll create a button where a for this demo purpose uh someone can just claim free tokens just so we can uh test it out so we're going to create something called a web 3 button here which is a UI component from third web and the web 3 button we need to provide it with the contract address that the button is going to interact with which is our token contract address and then the action in which this button what action this is going to perform on the contract so we can say that on our contract we can specify this as an ERC C 20 token and we can call the claim function here and we can specify the quantity or the amount that we want to claim so we'll just say every time someone presses a button they can claim uh 10 tokens then we'll give this button a name we'll just say claim uh free tokens so right over there we have a button that says claim free tokens so if we click on this again because every how we have our smart wallets and everything is set up this transaction is going to be gasless it will be executed for our user and again we're claiming 10 tokens here so we should see our balance increase by 10 right here there you go we now have 29 tokens so we know that our token balance updates correctly and we have a button there for testing out just claiming free tokens the next section we want to create is a section where we can display all of the nfts that are claimable uh that a user can spend there their tokens to purchase so we're going to need to get those nfts so similar how we got the tokens we can get our nft so we can say our contract here we'll call this the nft contract and we're going to use the used contract and then this time provide it with our nft contract address which we'll import from our constants and then to get the nfts that are available for sale we're going to get the data here and we'll just name this nfts and we can use the used nfts Hook from third web and provide it with our nft contract and what that's going to do is provide us and return to us an array of the nfts that are stored or that are available in that nft contract so similar to what we did here uh below our card view here we're going to create another view uh which is going to be another card we'll provide a heading here for this one we'll call This One Collectibles so there you go we now have our Collectibles right over here and we're going to create a horizontal scroll view here so that we can just slide left to right to see our claimable nfts so right over here we're creating a scroll view we're setting the horizontal to true and I'm giving it some styling that I provided from our stylesheet down below so in this scroll view what we want to do is display the nfts so we want to display an image of the nft how how much the nft cost and a button for a user to buy or purchase or claim the nft so for this what we're going to do is create a new component to display each nft so in my files here under components I'm going to create a new file we're going to call down nftc card. TSX and in here we'll start off by creating an interface for our nft card props and all this is going to take in is the nft uh and we'll import the type nft from third web here so we're going to provide it with uh the data of our nft and we'll be able to display all of that information so we're going to create our nft card here and I have a stylesheet here that I'm going to use for uh this component here so I'm going to import here stylesheet and then we have the uh width here so we're going to get the width of our device here so I'm just going to create a variable called width which uses Dimensions which we can import from react native which will get the uh width of whatever our device is that we're using here so first we need to with the nft uh information provided this is going to provide us the metadata of the nft but we're going to need to get the claim conditions set on the nft so that we can get the price for it so what we're going to do here is we're going to get our contract in here which again we're going to use the use contract uh hook uh which we're going to provide it with our nft contract address once we have the contract address we can get the active claim condition so we're going to get back a couple things we're going to need to get back the uh data we'll call this um active claim condition uh we can also check the loading status of it so we say check is uh loading and then using the use active claim condition hook we can set it to the contract to check and we're going to need to check the uh token ID so we can get the token ID from the nft metadata that is given and we can get the uh metad dat and then the ID of it and that will provide us the token ID of that so with this we'll be able able to get the active claim condition so we can get the price and the cost that we set for each of these nfts so we're going to set this view style here uh we're going to set it to styles. nft within this view we're going to show an image here and we can import image from react native and this image here is going to have a source and the source of this image is going to be a URI which is going to be the nft metadata and then we can get the image uh or it's going to be undefined so we set that we'll set the uh style here to styles do nft image and we'll give it the aspect ratio of one and we're going to set the resize mode to contain so if I save that here um I can actually we'll stop here really quick we'll go back to our app. TSX and then within the uh scroll view here we're going to display our nfts so what we're going to do again when we use the um use nfts hook here we're getting returned back an array of all the nfts available on that contract so we're going to need to map through those nfts and display our nft card for each one of those nfts so I'm first going to check to make sure that we have our nft data and we're also going to check to see that our nft uh length is greater than zero cuz if there are no nfts on the contract we'll just display some text saying that there are no Collectibles but if there are nfts uh we'll get the nfts we're going to uh map through each of those nfts for each of the nfts we're going to get back an nft and then for each of those nfts we are going to create our nft card component and we need to provide our nft card uh with a key which we can just set to the Token ID of our nft and then we need to provide it with the nft which is going to be the metadata of the nft that we get once we map through each one so if we save this here we should get our three images of our nft here you can see we can scroll horizontally through all of them uh but we don't have the cost or the button to claim these nfts created so we'll create that now within our nft card so coming back to our nftc card. TSX under our image here we're going to display uh the price and the button to purchase the nft so we're going to make sure that um our information of our active claim condition is not loading uh because we want to make sure we have the data before presenting it and that we have an active claim condition and if we have have those things we're going to display here some text and this text is going to be the cost of our nft so we'll just import text here so it's going to say cost and in order to get our cost the active claim condition uh returns to us a big number so we have to convert that to a number we can display to the user so we're going to use ethers doils and we're going to uh format ether here and what we're going to be formatting is the the uh active claim condition. price and we'll just add some styling here to our text so we save that you can see here now we have the cost displaying and we have uh this nft costing five tokens 10 and this one right here costing 15 then below that uh we're going to add another web 3 button and that web three button will just say uh buy now and again we need to provide the web three button with a contract address this one's going to be our nft contract address and the action to perform uh which is going to claim uh which we can say ERC 1155 and then we can call the claim function now the claim function for an ERC 1155 we first have to specify the token ID which we can get from the NF t. metadata. ID and then the quantity so we can just say when someone presses it they can claim one of those nfts and now you can see here we have a buy now button on under all three of them and let's just buy this first one here which is going to cost us five of our 29 tokens up here so if I hit buy now again gas lless and everything we don't need we abstract away all of the web 3 complexities so we'll be able to claim this nft and we should see our token balance reduced down to 24 there you go balance reduced down to 24 and we purchased our nft now that we've purchased the nft we should create a section here to display all of the nfts that are owned by our wallet so to do that we're going to head back to our app. TSX file here and we're going to get all the owned nfts for our user so we're going to use another third web hook here we're going to call this uh owned nfts and we're going to use use the use owned nfts hook and we're going to provide it with the contract address we're finding the owned nfts for which is our nft contract and the wallet that we're checking the owned balance for which is our address that is connected to our application and then finally under this last view card here we're going to create another card and in here this card is going to say owned collectibles and then below that under the owned Collectibles we're going to similar to how we displayed our nfts available for sale here we're going to make sure that we get our owned nfts data make sure that our owned nfts length is greater than zero cuz if we don't have any owned NS then our array will be empty so we can display that we don't own any Collectibles and then we're going to map through each of our nfts and all we're going to do is show an image of the image of the nft so right over here you can see under our owned Collectibles here the collectible that we just purchased displays right over here so we can test this out let's purchase this second one right over here which it cost us 10 tokens we'll hit buy now you can see our token balance is now updated to 14 and if we scroll down you can see we now own two two of the nfts so again using third webs react native SDK we're able to build this seamless and userfriendly web 3 mobile application using react native so available on IOS and Android so let's just sign out and kind of walk through this whole thing again again we can sign out disconnects our wallet from our mobile app when we hit sign in uh we're prompted up with our social with our embedded wallet login which allows us to sign in with social or email let's select Google again this is going to connect us to a Smart wallet that we created and log us into our mobile app at the top here we can see our token balance we can claim some free tokens here there you go you can see we added 10 to our token balance now at 24 we can view the Collectibles that we can claim here and we can view our owned Collectibles down here so finally let's uh claim the last one here which is 15 tokens so I'll scroll SC up a bit so we can see our balance update there you go you can see our balance updates to 9 and if we scroll down we now own one of each of the three nfts that we have and there you go you can now build web 3 mobile applications for IOS and Android and Abstract away the web 3 complexities using third web's react native SDK along with our other tools in combination with our react native SDK using things like embedded wallet with smart wallets allows you to create a very us user friendly login flow where a user can log in with social logins or email and we can abstract away the things like having to pay for gas using the gas dysfunctionality using third web's smart wallets so again I hope you folks enjoyed this video and you found some value in it if you did don't forget to give this video a thumbs up hit that subscribe button and don't forget to turn on the notification Bell so you don't miss out on more tutorial videos just like this if you need any help We'll add a link down in the description below to our support team you can open a support ticket and be happy to help you out and answer any of your questions but again I hope you folks enjoyed this video you found some value in it and until next time see [Music] [Applause] [Music] you

Channel: thirdweb

Views: 2,488

Keywords:

Id: 73YzK0SLfbQ

Length: 36min 19sec (2179 seconds)

Published: Fri Dec 15 2023