Dynamic xyz Embed a Wallet Faster than you can Order - ETHGlobal Singapore 2024

[Music] okay so I'm eai I'm one of the co-founders of dynamic in a nutshell really what we do is pretty straightforward which is everything that happens when you click log in on a website or an app right that can be a very web three experience so log in with mamas coinbase Phantom across and Bitcoin and it can be a very we experience right so dyamic really looks like this as name suggests it is very Dynamic so it's an SDK that you can use in your app uh and it can look like this it can look like a web 2 login tool it can look the complete reverse which is a web 3 login system across evm Solana and Bitcoin and it kind of works across everything so it can be um kind of your design your colors your themes it can be a popup uh or it can be embedded it can be fully headless the world Zer so you can actually do whatever you want in order to create kind of a user and have someone log in right and the very basic level with Dynamic let's say you are building for an app that's a web two app uh you can have login with email login with Google and at that point pretty much one click generate embedded wallets for folks so they don't have to think about any of the complexity no complex popups or anything of that sort just one click and it kind of just works um now the actually can do a bunch more so you can have it not just Genera better wallets but have folks connect third party wallets to the same account or connect multiple login methods to the same account so you can start with email and then add Google and then add um you know uh Twitter or anything of that sort and start building a profile for your users you can also use Dynamic to build really sophisticated wallets that connect to everything else so if you build Dynamic and you open it on mobile and click connect um it does a QR code scanner so and I'll show it in a minute and you can actually connect to any site or any app outside the ecosystem so think about Dynamic and we'll dive into things in a second but the very high level think about Dynamic is everything that has to do with login and user Management on on your site now before I start showing a bunch more things does that make sense okay so let's start seeing what dynamic looks like in the wild so Dynamic can look like a bunch of things right so if you go to magic Eden and which is the biggest nft site today globally and you click connect wallet this is all Dynamic this is all powered by Dynamic right so as you can see they use it as a very web three tool right login with salana login with Bitcoin evm base Etc uh and they use it to start creating really complex experiences right so they use it uh to log in to sign and then let you link additional wallets to the same account right so you can start building a profile of hey I'm a Trader I have 10 wallets across Bitcoin an evm and salana and you can link all of them together so that's one example of a use case of dynamic which is a very web three use case right so uh the the entire kind of profile management or account setting is a headless implementation of dynamic so username and email address and link in Twitter that all runs on Dynamic but it's semi headless and semi- using rdk so that's one example or if you go to the complete other opposite example the arena is the biggest uh kind of social uh friend Tech type uh company on top of avalanche and if you click enter the arena uh and log in with Twitter I'll authorize the app and I've created an embedded wallet in the background that's powered by dynamic as well and that was my entire experience right so now I have an embedded wallet in the background with the arena but I've not seen any of that as a user I logged in with Twitter and it kind of just worked right so Dynamic can be as web 3 as you want it to be or as web 2 as you want it to be and it's really your SDK for again everything wallet related let's look at a couple more examples if you go to sound. XYZ and you click sign in that's powered by Dynamic and they mix email and social if you go to Doodles right which is one of the biggest nft collections out there and you click get started this is powered by Dynamic right and you can see how different folks implement it more as an email web 2 type implementation or more as a web 3 Type implementation now as a good example let's go to a different app deflow which is uh kind of a trading app here they implemented dynamic in a fully headless way so let's enter my private email um if you need to send me emails let me know let's enter my code bar me for a second 775 uh four and at that point I'm done I entered the app I didn't need to know anything about crypto as an end user and I can start trading things right so in this case I can really quickly use uh Dynamic to buy um you know Solana or usdc so let's as an example trade usdc to usdt right so let's gr uh trade usdc to usdt enter an amount uh I'll do the reverse because I don't think I have enough usdt uh I'll enter an amount I'll review and dynamic actually does the transaction the kind of the signing in the background the session keys right so fully headless implementation with the dynamic SDK that lets you build these types of experiences right so that's a very web two type of experience and trading just worked I actually bought some usdt right so Dynamic can be used today in games like perion it can be used today in marketplaces like pudgy Penguins uh music websites like sound uh gateways so Stark net uses Dynamic to connect evm wallets and Stark net wallets together all across those you can see different experiences so as you build your experience this weekend just think about the use case you're trying to build and assuming Dynamic can assume Dynamic can help now before I start diving into like seven more levels of detail and show a quick demo of actually how to get started and build with it questions about this part on it does work on telegram great questions let me actually show you guys so uh we have something that we launched this um uh this week called telegram zero click login uh so let's pull up the app um can you guys see my screen uh can you guys see telegram perfect so this is the telegram bot you can implement this on your own you can Implement a mini app and if I click Dynamic autow wallets demo it'll pop up a mini app and it'll Auto log me in right so no login required it uses the telegram authentication in order to generate a wallet so if you're building a telegram mini app zero click login and just kind of works right or if you're building a react native application Dynamic also has a react native component so if you're Lo uh logging in with phone or email or anything of that sort you can use Dynamic idler as a fully headless solution or with email and social with our UI so Dynamic can kind of service you however you want for kind of that user management jly right let's let's look at a couple more examples so just as an example um what you can do with Dynamic is you can start actually let me show you guys one more really cool thing uh that I think is relevant here and then we'll start kind of seeing how you actually set it up um bear me for a second here so let me uh show youall my screen so this is my mobile app uh or mobile web I log in with my email account and at that point I've created with one click I've created a dynamic embedded wallet that was it right but now my embedded wallet can actually connect anywhere so if I click connect and here go to Unis swap right Unis swap I can actually within one click connect the embedded wall that was created let's log out of the current one um and uh log in with W connect within one click I can essentially let's see there we go I can connect the Unis swap app and just trade with my embedded wallet on Unis swap or magic Eden or anything like that right so I can start building Global connectivity or the ability to just generate an embedded wallet and have it be used anywhere so if you're building a wallet this weekend or you're building experience that requires starting on your site and then trading nfts or doing anything of that sort you can use dynamic as well yeah yeah that's a great question so uh the question was if you log in on app a and app B with the same Google does it generate the same app the same wallet the answer is no today it's actually siloed but each one can connect so app a can connect to app B and app B can connect to app B A via that QR code scanning so it's siloed for security reason but then you can start building really sophisticated experiences where for instance let's say You're Building A brand you can have other sites um as an example uh Legion Key which is kind of a a brand for gaming you can then have a second site that implements QR code scanning with Legion Key right so you can start building these experiences but short answer your question uh when you go to two separate sites you actually create silid uh wallets for for security reason yes yeah so we use uh we use trusted execution environments so essentially as soon as uh you log in with Google I do two things I generate a JW right and I use that to kind of uh and then I generate in a trusted execution environment or in AWS kind of a private key and essentially I give you the key to the key right and you can establish and depending on your security you can establish session keys on the front end right so as soon as you log in with Google there's a session key for the user and they can just sign or essentially trigger a signature from The Trusted execution environment or you can add security and you can say actually add a pass key as the key to the key right so add a face ID and say only sign uh with a face ID so I can show it in a minute but essentially after login after Google you can add a second security step of MFA and have hey for defi apps or for more complex apps have this second security layer um before I continue more question how am I doing on time five minutes oh in five minute we can do plenty of things in five minutes uh more questions about that before I continue okay so let's actually see how you can actually get started with Dynamic so the easiest way to get started with Dynamic is just npx create Dynamic app right so if I just go uh let's do npx create Dynamic uh app at latest uh you can or not let's see I just uh hold on let's try this again ER config let's see if I can do that no okay I'm not going to show this part of the demo let's let's actually do this again and um let's do a new tab one second oh whoa everything's broken hold on let's try this again when in doubt let's reset console there we go um uh and then we have npx create Dynamic latest right so let's do that and let's start going through the flow and uh lesson of the day when in doubt reset your terminal uh so in order to get started with Dynamic super straightforward so create Dynamic app npx and I'll choose what I want so let's say reactjs app uh I'll choose the chains I want so I'll do ethereum for now actually let me do ethereum salana just to make it interesting I'll hit enter am I using VM I am using VM you can use Dynamic with VM or with ethers depending on whatever you know is is best for you uh you can add Dynam you can add wag me to Dynamic if you want you don't have to uh and at that point I'll generate my project so that is the easiest way to get started with Dynamic is really five clicks and at that point you have a full scaffold app so let's uh let's kind of have it generated as soon as it generates it let's navigate to it and you can see the full structure I can npm install npm start and that point I'm good to go I add my environment ID and I have full project running now we have uh as this runs because we have three minutes I want to show you guys one more cool thing which is we saw one side of dynamic and that side of dynamic was kind of the SDK and what your users see but there's a second side to Dynamic which is your developer dashboard and that lets you start doing really cool things so this is your developer dashboard and you can start kind of managing your users you can see how they use the software you can do analytics if you're building an email service or anything of that sort you can set up web hooks so every time someone creates a wallet or logs in you can generate web hooks right so there are a bunch of tools that you can explore with Dynamic Beyond just that SDK you can start toggling things on and off so you can say email login or phone login or everything we saw set up your environment ID and pretty much come to this dashboard and toggle things on and off so if you want to add kind of additional security layers or if you want to add chains across evm or Sal or anything of that sort just come in set up your environment ID toggle them on and you're done right um how am I doing on time am I still good two minutes oh perfect I have plenty of time uh if I have two minutes I want to show you guys one last thing which is the ability to start doing things Beyond authentication right so we talked about logging in with Google logging with the email logging in with the wallet generating wallets in the background but you can do more with Dynamics so let's say you're running this weekend project and you only want to allow folks with certain nfts to log into your Product Dynamics is also authorization so you can build access lists you can build allow list or block lists or you can build Scopes based on someone what someone has in their wallet so you can start building not just authentication but also authorization or you can start doing really clever things around information capture so you can say look if someone logs in with a wallet let's still ask them for my experience I still need their email address so let's actually prompt after they log in information capture so you can start building these real really cool complex experiences Beyond just authentication into authorization into information collection and onboarding you can change again all the colors here you can do this headless you can inject CSS make it look exactly like the rest of your product and because we have a minute left I I will end with this which is we're here all weekend uh we are pretty much just going to have coffee and sit in our booth so if you have questions at midnight we'll be there at 2 a.m. we might have terrible answers because we're half asleep but we'll probably be there just come chat with us what we're looking uh for this weekend is really just cool stuff to be built on Dynamic so the b b uh bounties that you'll see can be across telegram they can be across react native they can be across flut or web just build cool stuff that people really like and leverage Dynamic and that's really what we're looking for more questions before I wrap it up yes so it's it's Cloud you require essentially an environment ID but you pull an SDK so you npm install an SDK uh and so most things are on your end and really what we pull is things like settings or if you use our embedded wallets we have some Cloud components there so to get started with Dynamic you would essentially just go to app. dynamic.

XYZ create an account obviously completely free take your environment ID and you're you know you can hit the ground running Yes Yes actually you do if you look at our docs there's middleware then we introduce and I can't remember exactly where so come to our booth later uh this afternoon I'll show you but there's a middleware that lets you kind of hold um until an action is completed on your end to complete registration can perform preau also essentially it's it that's exactly right or you can trigger a web hook for instance from here so you can still continue the flow but run a process on your end afterwards so yeah you you have some and the web hooks registration is on your dashboard so just go to kind of login uh and essentially you can subscribe to webbook on user creation W creation or anything of that sort uh under developers web hooks so you have some option that was a very long answer just saying you have a bunch of optionality yeah more questions yes yeah that's a great question so the question was about pay master so Dynamic is uh an embed wallet and also Aigner so let's say you actually want to add an AA layer an embedded W uh an account abstraction layer you can do that so you can actually toggle on zero Dev add the environment ID you can also do this with safe and Alchemy in our docs uh and then you configure the pay masters there and then if you add your zero Dev environment here and toggle it on we take care of the rest so you can have it uh essentially you can um specify what gas sponsorship you do and the wallet address when someone logs in will be their AA wallet address instead of their eoa wallet address so just spin up a zero Dev account copy it here and you're good to go okay we're done uh again Shameless plug will be around all day I'm eai one of the co-founders uh the planted question about telegram was from Adam who's also on the team uh it wasn't a you know uh so come find us we're happy to answer any question that you have and good luck with hacking [Applause] [Music]