Building Seamless Onchain Apps with Privy I Siddesh 0x

[Music] Hey everyone, my name is Sadesh. I work with the developer success team at Privy. Today I'm here to talk about what Privy is and how you can use Privy to build seamless experiences for your ETH global New York hackathon project. Uh I have basically divided this video into three parts. We'll quickly run through what is privy and why teams choose to build with privy and then how you can also integrate privy into your project.

We'll do a code session where I'll show some of the features we offer uh in our SDKs. So you can think privy basically is like an platform that offers you a set of APIs, a set of SDKs for you to seamlessly onboard your users onto your app and then just like interact with the app. When I say this uh the you once you integrate prev right and now you have given the option for users to just like login with email their phone or they can use their Twitter account to login into your app and if you have enabled automatic wallet creation in your preview app what this basically means is like the user just logs in with their Google account and the privy in the back end creates a wallet for them which means the user can just straight start using your app features like maybe like transactions, swapping or whatever it is, the user can just start using it. On top of that, we also offer a couple of other features like gas sponsorship which basically means like if you have enabled this feature in your preview account uh like smart wallets plus a gasless support. What this means is let's say your user logs in your Google account.

Privy creates a smart wallet with your configured u chains and your user is already ready to make transactions on that chain using that smart wallet with your app. They don't have to have the native currency or whatever it is because now you have enabled gasless transactions and the pay master hence handles everything from the back end. And all of this takes you like less than 10 to 15 minutes including everything that I spoke about to integrate in your app which is great for you to get started. Now coming to why teams choose privy. So like we already spoke about onboarding is something that's very great with privy.

Uh we have basically eliminated the step with the we asking users to have a wallet or like switch wallets or switch chains. Uh now we just asking we just giving the user an option to just login with any social method. You already have a wallet with you. So that's and that actually like gives users a very seamless experience. On top of that, we value security and performance very much.

So we use TE in in our service to protect the you know wallets and every wallet is non-custodial which means like the user owns access the wallet which means they can also like export the private key and you know if they want to take it to a meta mask or a wallet like that they are free to do that and we are we also like focus heavily on performance that's why teams like hyperlquid forecasted a lot of pump fun a lot of these companies use uh preview which hyper liquid these companies are high trading applications. So we offer ultra millisecond latency for these apps to work seamlessly. And as as mentioned here, we offer ready to use UI components and SDKs, which means like let's say you only have 10 minutes to integrate some wallet and all those features into your app. We got you covered. Just go to your docs and then you just copy paste few uh code snippets into your project and then you should be good to onboard users with our UI components.

And if you if you're someone you feel like you want to have full control and you want to build your own white label UI, you are free to do that as well. We also offer APIs for that, low-level APIs for you to just do that. Um that's pretty that covers some of the points what we u talk about privy and why teams choose to build with privy. So I think enough talking. Let's get into actually building a project with Privy and I'll show you how easy and how smooth your app can become with Privy.

Uh in this uh video I'm going to just like uh create a new NexJS application using this command and I'm going to say E global preview. Okay, E global preview. Let's just keep every default for now. Let's go into the project and open this in cursor. Okay, cool.

And as you guys know, that's the basic version of the starter template of NexJS. So now to get started, I would recommend going into the Py docs which is hosted at uh docs.py.io. And this is the best place to get started, I would say.

Um, so you just need to go to basics and go inside the the the SDK that you want. In this example, I'm going to use a React since I'm on Nex.js, right? If you want to use any of the listed SDKs, we all have support for a variety of SDKs that's commonly used to build apps. So, I'm going to use uh React.

As you can see, we have steps. Let's start installing them. I'm going to install them. Let it let it happen. So So that's first step.

Then we go into the setup page where you have this code block. This is pretty much it actually to just like integrate preview into your project I would say. So you will see what I mean by that. Uh I just going to copy this and I'm going to go into my code. I will create a new file called provider.

tsx. Right. So this is pretty much it. Uh we are almost there integrating preview. So we need two things.

One is the app ID and one is the client ID. So you can easily get this by signing up for an account in dashboard.io. You could if you could sign up for your account uh you would see something like this. We have a free plan too.

So just sign up for an account, choose your platform and then you get these credentials. Uh I would recommend saving them somewhere at least the app secret. uh in this example we won't need that anyway because we are not going to use any server wallets or as such like which require app secret to actually like make transaction from your server uh wallets. So I'm going to just paste this here but I would I wouldn't recommend this like use a env file to actually like securely keep this uh information. And then we also need something called client ID which is optional but I would still recommend using it.

So you can get that by going to app settings clients. You can copy this and paste it over here. So that's pretty much it. You already we have already integrated completely with privy. But yeah, so I'm going to talk about what is config.

So config is the place where you can customize the experiences of like the login model and all the chain all those configuration that you might require. uh you can see here it's listed here advanced you can see configuring appearance so this is where you would do all of those things if you want to do it so here I'm just using this particular snippet this what what this basically says is like this basically says privy to create a wallet if the user doesn't have wallet for your particular app right when they log in with their email account they don't have a wallet so privy automatically creates a wallet for them and let's let's set the default chain to base Zapolia. Um let's also install VM. So alo install sh Okay, we have to do VM VM and that should be done. Yes, base Solia and we also need to add supported chains and this is basically the chain that we have used for default chain.

So we are good to go actually. And now here we need to do one small uh configuration. We need to wrap our entire app with this provider. So the privy uh can be used and throughout your app. I have now done that step as well.

So we can just start the server. By the time that starts, let me open local 3000 here. It's going to take a little bit of time, I guess. Yeah, let it load. And I'll just quickly cover other things as well.

So then once you do that, you can go to quick start if you want to. This is where we talk about how you can login with your if you want to have only login with email or something like that. This these are the steps you would follow. But I'm going to show you a better way to do it. So now let me just clear this code that's there right I think you can just go and see we have hello hello hello world right now that's it that's that's that's what we have right now so we need to import this hook use is the hook that you use 80% of the time you know interacting with privy uh in you know login log out connecting wallet a lot of these things are uh inside of this hook Look uh now I'm going to say I'm going to write this because if the preview SDK hasn't loaded we should not uh you know we just we can just show a loader page until that after that let's say if the user user is not authenticated we'll show them a login button if the user is authentic unauthenticated we'll just ask them to login right yeah that's pretty much it right let's go and Okay, let's reload the page.

And now we should already be able to log in with our wallets already. Let's see. I think we should just pass use client here just just because there's a client component. I say client. Yeah, this should work now.

Yeah. So, as you can see, we have hello world and we have a login button. So now as soon as you click this you'll see now we already have a fully functioning connect wallet wallet connector. Uh I can just quickly show you this. I don't have a meta mask.

So let me defend them. Yeah. So let me unlock this. Cool. So now we have already connected our metamask or find or whatever wallet it is.

Now you could do you know use a vakme or you know you can also use preview hooks to start sending transaction. I'm going to also add this uh user object. User object is uh pretty much the information any information about the user including their login method connected wallet and everything uh you know is returned to you in in form of like user object. So you can see this is my wallet address which is connected here phantom and everything. So now okay this is cool.

Now you can just pretty much like do all the regular stuff. But what if you want to do magical stuff like you know sending u creating a pre- embedded wallet and all those stuff right um for that like let's go back to our u preview dashboard and we'll go to authentication under user management and we'll go enable Google as a login method and we will also let's also enable Twitter as a login method. Right. So now I'm just going going to go my go to my app. Just reload.

Just reload. And now I can log in with my Twitter. Let me actually like check once if Google was enabled. It should have been enabled. Let me see once.

Okay, it was not enabled. Let me save changes. Cool. So now you see we have Google login as well as like um as well as like Twitter login. So I'm going to just do Twitter here.

Okay. Oh, sorry. I don't have a Twitter here. So let's go back. Let's go back.

Uh let's log in with Google. Yes, Google. We have with Google here. So I'm going to create a account with just my Google account. Now if you see what happens is it automatically creates a wallet for me in the back end which is amazing.

See I already have a wallet which you can start using. Yeah. So now now I can just simply go to my account and I can start sending transactions. So for that you need to just do import send transaction from use send transaction hook from okay not this not this not this. We just need to import.

Yes, we are there. Nice. So, we just need to write a function which says handle transaction. Yes. Awesome.

Yeah. Awesome. So, now we can we can just have a button for that. Boom. Now you can see you should be able to send a transaction.

I'm clicking this and I'm on a base and it says like know I don't have enough funds, right? I if I have enough funds I should be able to just interact with any network. Now you could say like what if I want to build a multi-chain experience right I want to have different chains and everything without even user knowing they have to switch between different chains. So for that let's say let's say I want just we'll write another function send transaction in uh let's say seapoleia right so now everything remains the same but then like here you would just say chain is equal to you would write you write sepoleia chain ID is equal to seapia or ID and And you need to do one one simple thing here because we we did not add that supposo here we just just simply add it here. Let's also add a button here.

Yeah. So now without switching any app now without switching anything the user can just like send transactions to different networks all from the same UI or without switching anywhere. You can see this is Solia. If I click this button, it's basically here. So now that's seamless, right?

The user doesn't have to worry about like switching chains anymore. It's everything is seamless. Um, now what if you want to enable gasless transaction? So that is also possible with PV. I'm going to show you very quickly.

Uh, let's go to this again. We go to smart wallets which is under wallet infrastructure. And here you just need to enable smart wallets. Let's go enable Coinbase. We need to add this right.

We we will select alchemy because we want to sponsor our transactions and I have already set up a gas manager. So for this I will need to go to my apps and get my keys. I will probably delete this account before this video goes live. So uh feel free to um now we need to just paste in here and select change. Let's use base Solia only for this video.

But then you are feel free to choose as many chains and everything will work seamlessly out of the box. We also need to add this policy ID which you can also get it from here. Alchemy policies I already create a policy here. You can create any policy for your app in this alchemy or different provider. Copy that.

Paste it here. Close. Boom. So we have set up everything correctly right now. Um now just to just in case let me just delete the user I created earlier.

Let me just delete this for now. So now so we need to do few changes for smart wallet to work with within our app. Go into wallets. You see we have a section called EVM smart wallets. So you go here and then you see you have we have already done this step already.

So you need to just go to SDK part. You need to install these two things. I'm going to go do that. I'm going to do that. And then you can see this is what we need to do now.

We just need to add this line of code and we should be good to go. When I go to providers just adding that line here and we need to import it. Copy. See it comes from the same react o package. So no need to download anything new.

Boom. We have set up everything now. So we you can also customize it like uh you can do a bunch of things using the config but for simplicity I'm just going to send a transaction and show you how it works. So you can just refer all the methods that you have. Uh I'm going to just do send transaction.

Let's do send transactions. Right. Okay. Let's go here. page.

Let's write a function send smart transaction. Right? Let's have this function there. And we need to just paste this. And we will need to import that as well.

Here it was I think yeah smart wallets which comes from here. And then we just need to do smart wallets. Sorry. Yep. So we have everything with us right now.

Okay. Only do if return. Yep. It should be good enough I guess. So then we set up base seapia and then we need to set up a recipient.

Let's do an let's do an uh ERC20 token transfer. Okay. So you let's go login once. Let's see. Let's just start the server.

Uh let me comment this paint dev. So yeah let's log in again. I'm going to use the same email account. So now what happens is preview automatically creates the smart wallet for us using the Coinbase smart wallet that we chose in the settings. Right?

This is the embedded wallet. It takes a bit of time before it creates a smart wallet. Let me see here. All users. Okay.

I think we did not give this. Let me see if we configured it correctly in smart wallets. Yes, it was configured correctly. Okay, which means yes, we here we go. Smart wallet was created.

This was the address, right? So, I'm going to try to request just USDC from the faucet. USDC base faucet just to show that like you can just onboard users without E in just like less than 15 minutes max. I'm going to request for where is Bolia? Yeah, Bipolia.

Let's confirm this was the wallet address. Smart wallet address 565. Awesome. Going to get this. Let's check once in base explorer.

Um base sapoleia. Going to go here. Going to paste my smart wallet. Doesn't check if I've received the tokens. Yes.

Right. So now what we're going to do is we're going to try to send some tokens to my other. Okay, I'm going to go to the docs. This was the transaction, right? So, let me just quickly grab my Phantom wallet address.

Um, basically, yeah, let's let me grab that. Come here. Enable this, right? Let's do this. And because this is an this is an ERC20 transfer, right?

Just we need to do encode function data from uh VM and we will do encode function data. Yes, my wallet address is let me actually get my wallet address. It's D2, right? Let's go here. It's D2.

Awesome. And we're going to send let's say let's do one one in the sense it's going to be like six decimal places and yeah we should be good to go now we will remove this and we will just pass the data and this should be the contract address of the USDC token right now let me get that contract address for you this is the contract address going to place it here and yeah awesome. So we could specify basolia but then since it's um already default it should work out of the box. I'm going to place a button here right spend smart contraction transaction. Now we should be let's reload the page once just to be sure.

So let me open my console just clear it. And when I do click this, you see one USBC and then sponsored approve and then we should be receiving that transaction on my other wallet. And I have I think console log transaction hash. Let's go to this explorer. Check it out.

Yes, we did. And we didn't have any it to make this transaction and the transaction went through transfer. And you can also check now that we don't have any it on my wallet. Okay, this was not the wallet. Let me check is smart wallet.

Yeah, this was the 565. You could still check. I don't have ETH and this was done from the pay master account. So, this is how simple it is to integrate preview into your app and actually create amazing seamless experiences for your users. Uh that's pretty much it for this video.

I wanted to show how quickly you can do different different things all at once without having the user to change wallets and all those things. So I hope you uh loved this demo. Thank you. [Music]