by Unity Nodes
NEAR DevHub

Privy Near Connect Walkthrough: Wallet UX for Mainstream Users

about 8:13 long

Watch on YouTube (opens in a new tab)

Nothing is loaded from YouTube until you press play, and then without tracking cookies.

About this video

Privy Near Connect gives you email-based control of NEAR accounts with about three configuration steps. This walkthrough covers what it does, how to drop it into a dapp, and what the production signing experience looks like for mainstream users.

The Peerfolio team built this library as a public good for NEAR after hitting a wall trying to ship account control for non-crypto-native users. It follows the injected wallet pattern from hot-connect and near-connect, so integration means adding a manifest.json with the right permissions, pointing at a sign page (Privy ships one, so you skip building your own), and initializing the wallet with a matching ID. Privy itself is non-custodial wallet infrastructure with MPC-backed key management. It supports multiple chains, and login options go beyond email to include social accounts and phone numbers. The SDK is core JavaScript rather than React-locked, and the signing UI themes with Radix. A few things worth flagging if you're evaluating this:

New accounts are implicit, so the key pair exists but isn't on-chain until you send dust to it The redesigned signing screen collapses advanced details by default, which solved a real UX complaint from Peerfolio users.

The team is committing to active maintenance for at least the next year, with 2FA and MFA support on the table if usage grows

Chapters 0:00 What Privy Near Connect solves 0:35 Three-step setup walkthrough 1:00 Manifest configuration and the prebuilt sign page 1:49 Why Privy as the infrastructure choice 2:45 SDK options and design customization 3:03 Live demo of the deployed example 4:13 Implicit accounts and the dust requirement 4:44 The redesigned signing UI 6:04 How this looks integrated in Peerfolio 7:50 Roadmap and how to contribute

Repo: https://github.com/beneviolabs/privy-... Demo app: https://beneviolabs.github.io/privy-n... Peerfolio: https://peerfolio.app/invite/R-ACXSvv...

Transcript

1,361 words

Captions as YouTube publishes them, usually machine-generated, so product and people names can be misheard.

  1. 0:04

    Yeah. So, I'm glad to be here and tell you about what we built with Privy Near Connect. I guess as a bit of background, um, you know, we created Privy Connect as a public good for near because we ran into this problem while building Purfolio. We needed an email-based solution to have control of near accounts because our app is designed for mainstream consumers. So with privy near

  2. 0:29

    connect now you basically have just three lines of code three lines of configuration not three literal lines to get uh email based control of a near account. So you install this mpm package um you log into privy's dashboard and create an account on privy uh to give you a privy app ID and a client ID. So, it's a great way to easily get started um to quickly get email based control of of near accounts. So, we've built this

  3. 1:00

    following the patterns of an injected wallet in hot connect near connect. So, you would add a manifest JSON to your DAP with uh a couple of new additions. So you want to add permissions saying that this is privy connect allowing storage and giving the URL the domain of your application can be local host for getting started giving that in the allows open um array and also in the

  4. 1:27

    sign page URL and privir comes with an example sign page so you don't have to implement your own custom sign page to get started you just add a route and point to the sign page that comes with privir connect. Include that in your manifest and and then you need to initialize near connect the same way you normally would in your DAP and specify the wallet that you want to use using the same wallet ID that you have in your manifest and and that's it. So Privy is a wallet

  5. 1:58

    infrastructure provider. It's one of the largest ones in the market. Um they are non-custodial. So you can leverage Privy to offer self-custodial control of your accounts. They support multiple chains as well. So it's a great starting point from for building email based control of any app. You can use email control, social login, phone numbers as well. So it's highly customizable to meet the needs of your users. Um and not only do they have an

  6. 2:27

    uh MPC style backend control for managing decentralized uh private keys, um they also have a lot of custom components. So if you don't want to write custom components for your login screen um terms and conditions connecting that to login and all of that you can use their outofthe-box SDKs and and we've built this we've built private connected to their um core JavaScript SDK so not forcing you to use React if you don't want to use React you can of course so on this repo as well in the upper right corner here we have uh a

  7. 3:03

    deployed demo so once you at least go through the steps of going to Privy, creating an account with Privy to get an application ID and client ID. You can then open up this deployed demo app and then log in and try it out. So, that just sent me a code. Let me grab that code.

  8. 3:40

    Oh, it's prompting me to connect. Great. And now my Privy account is connected into this app. And I had already logged in with Privy and uh so this was a the the it was a create or create an account or log in is the operation there. So I already had an address for this account.

  9. 4:04

    Um and the interesting thing here is privy supports near with implicit accounts only creating an implicit account. So when you initially log in for the first time and it creates your user record and it links a near account for you that implicit near account is is a key pair essentially that has not yet been published on chain. So when you log in for the first time here you'll you'll get an address and then if you go look

  10. 4:28

    at that address on on the block explorer you'll see that it's not there. So you would need to send some dust to it um before it's available on onchain. In this case I already sent some dust to this one. It should be a mainet account. So now I can test out the signing flows.

  11. 4:44

    And uh one thing to mention here what you're seeing this signing screen this is coming from privir. So this is that this is all packaged into uh into the library and it's customizable with radics themes. So you can easily change the styling and the colors here um on the signing page to match the style of your app.

  12. 5:09

    One other thing that I like about this style that Jacob did with these wonderful designs is we tried to make this a bit more user friendly. So, you can customize the information that you want to share in this little info box and really hide all of the advanced details that would confuse uh a mainstream mainstream user. So, that's collapsed by default. So, we're not showing all of this super technical looking things that may otherwise scare people. It does scare people. We've heard that from our users and that's why

  13. 5:40

    we wanted to move to this new new design. So, revealing by choice. You can choose to reveal what you want. Actually, this should fail because I think guestbook is out. It lacks balance. Yeah. Um, but here's an example of error message being being displayed there. I want to share also the another example of a demo. So, this is this demo app that we have, but I want to share how we've integrated this into Purfolio.

  14. 6:04

    Um, here's a QR code. If you want to test out that demo yourself, Joe, I can send you this link if you want to add it anywhere. Um, instead of clicking on that QR code, let me log in to Purfolio. This is a new account that I've created.

  15. 6:20

    So, we should be able to see it prompt me for a transaction because I have not fully set up this account. And you'll see this older implementation uses a UI that's not as beautiful as what I just showed. Great. So, I logged in, verified the the OTP code there. The app now has my um near account ID managed by a privy ID token and associated to our portfolio O token as well. Our app is prompting the user to approve a transaction to um to basically

  16. 6:53

    create their their trading account within portfolio which is an account owned by the account that is controlled by their email address. So this is going to prompt I probably have to change what I'm sharing. You can't see this, can you? You can't see the pop-up screen.

  17. 7:10

    Let me change that. All right. So, it brought up in a separate window this approval request. This is the the the screen that we initially implemented uh that shows a lot of technical details that we made a lot of improvements upon uh in the screen that I showed you. So that's what the flow looks like when it's embedded into an application. The user is going to see an iframe open up another pop-up window and they can review the details of the transaction and then approve that that transaction.

  18. 7:50

    This just wanted to show like a real world real world example of how that's integrated into into an application. So if you're interested in this library, you want to use this, go to the GitHub repo and start it. Um we are actively maintaining this for the next year at least. Um and if it gets usage we will you know uh expand that uh to meet the needs that whatever you guys have. If you want to see two-factor off support,

  19. 8:13

    multiffactor authentication and the other features that privy supports we'll be happy to do that um if there's sufficient sufficient demand for it.

All videos