Dynamic xyz - Embed a Wallet Faster Than You Can Order - ETHGlobal Bangkok 2024

as folks join I think we're good everyone small audience but the best audience so uh I'm itai from Dynamic uh and what I want to go through is kind of how to get started with Dynamic so let's let's get through the basics so first a little bit about me I'm co-founder uh CEO of the company um what is dynamic just so everyone's on the same page uh think about us as the crypto enabled stack so everything you need in order to kind of build these magical experiences where crypto is either in the center or in the background right um it's used today by a bunch of projects starware and Magic Eden eclips and animoca and and you know Lamborghini and the arena and doodles all use Dynamic on their website uh just for context uh in eth global Singapore seven of the 10 winning teams built with Dynamic now correlation does not Equalization but uh I am very bad at understanding which is which so maybe it's it's uh it's good now let's dive into it so uh before I actually show this video Let's actually go through some examples of how you can use dynamic or how Dynamic is used in the wild and we'll dive in so a couple of examples so first who has used magic Eden before no yeah oh my God okay fair enough so for those that don't know magic Eden is uh today I think the highest volume nft site in the world uh this is dynamic so Dynamic is on the one hand a very fancy multi-chain wallet adapter that magic Eden uses across salana and Bitcoin and evm and a bunch of chains you can do really sophisticated things like connecting kind of you know handling obviously switching Networks but also more sophisticated stuff and you'll see this in a second like connecting multiple wallets to the same account so creating kind of unique very Advanced experiences for web 3 customers on the other side of this is customers like Doodles who's heard of Doodles no okay fair enough uh so Doodles uses Dynamic where you log in with an email or with Google and essentially we generate a wallet in the background for you so a customer coming into doodles doesn't necessarily need to know they have a wallet they just log in with email and that's it they can pretty much at that point interact with the site so that's a different example a third one is D flow so deflow lets you kind of log in with an email address let's enter my email address uh let me grab a code uh let's do that let's grab a code okay six five six there we go and at that point I logged into the app and I have a wallet here in the background so if I now go and I say look let me actually buy some usdc with usdt uh this is an example of using dynamic in the wild um you know let's buy there's really no experience of a wallet here right it all kind of happens in the background so this is another example of Dynamics so Dynamic can be a very web to experience where you don't see crypto anywhere right so you can think about it as better wallets that kind of just work in the background you can see it on gaming sites like XP you can see it on Bridges like eclipse this is a version of dynamic or Legion or if you've heard of maple Finance or Doodles if you go to their Marketplace and click connect that's powered by Dynamic so you can see it all across these experiences um you can see it on bar chain as an example uh all these kind of um are different versions of dynamic and so Dynamic is really two parts it's the SDK that you can Implement into your app and it's a developer dashboard so we'll start with here's a dynamic SDK and as the name suggests it's very Dynamic so you can do pretty much anything you want with it so you can change colors and you can change themes and you can kind of you know make it whatever version you want it to be you can change Corners you can make it fully headless anything your heart desires right you can also let's change it back to a little bit more saying actually let's keep it like this uh you can say look I want only wallets and I want them across multiple chains right or I want the reverse I don't want to talk about wallets at all and I want to just have email and social login and you can do it this way you can add wallets and you can collapse them you can show them this way whatever your heart desires you can pretty much do it's a very very flexible tool now Dynamic lets you pretty much do oneclick wallet generation so I logged in I generate a wallet and at that point I am pretty much good to go I have a wallet address I it can happen across evm and salana you can do more fancy stuff like connecting multiple wallets to that same account you can connect multiple login methods to the same account so not just Google if you're building a game you can use epic or if you're building something with music you can use Spotify login pretty much anything you want to do and it's non-custodial so you can go here export your key and at that point you're done and you can take it and import into mam mask or Phantom or anything like that so you can pretty much use Dynamic to abstract away complexity of crypto in your app does that make sense before I continue awesome okay so we looked at the very basic stuff you can do a lot more clever things on top of dynamic so you can start saying look I've generated a wallet for someone now let me connect it to un swap right so the wallet doesn't necessarily have to be siloed so let's actually take an example let's go to unit swap um right uh let's go to their app let's hit um connect I'll copy uh the wallet connect code on mobile by the way this will if you set up Dynamic on mobile it'll show a QR code scanner so you can just scan this QR code uh I'm on desktop so I'll just copy it here and at that point it'll kind of automatically detect it let me connect to Unis Swap and I can trade on Unis swap with my Dynamic and better wallet so it's not a silo wallet but it's actually a global wallet again if you set it up on your phone it can add just like a rainbow wallet or anything like that you can scan and interact with sites so it can expand pretty quickly Beyond just uh kind of embedded wallets so embedded wallets that can interact with other sites so as you're building the stuff for instance I think we had a presentation here before from cow protocol you can spin up an embedded wallet and have it connect to the protocol and do a bunch of cool stuff now we saw the basics let's start building actual things right so I set up a very simple next JS app nextjs app and I created a login with Dynamic email only to start uh just so you see what it looks like so I set it up I pretty much have my I import Dynamic I pretty much set up my environment ID I set up a pretty u a very simple page and I'm pretty much done now you know what I don't want just email login I want to do more stuff so let's go to my developer dashboard and let's start toggling things on so I want wallet login so let me save that and I also want login with Google and login with G GitHub right so let me add that right and let's refresh real quick just to see what that looks like uh I have some hydration errors Let's ignore those all of a sudden I have wallets uh email social login right so I don't have to make massive code changes as soon as you implement Dynamic you can go to our dashboard and start playing around with things so you can start kind of turning epic games or Discord or telegram login you can start changing the way things are um displayed so let's collap the wallets list and let's save that real quick and I'll refresh and if I now log back in you'll see wallet list is behind this this button so you can really quickly customize Dynamic to your use case with a single again I have not changed the code at all right I set up five lines of code and at that point I just toggle things on and off now let's let's get fancier right so um be besides just authentication when someone logs in I want to collect their first name and I want to collect their last name and I want to create a custom field so let's create a test custom field and uh let's make sure it's Unique let's make it optional and I'll save it and at that point if I refresh and if I log in with a user that hasn't logged in before so let's do tai plus test uh at Dynamic doxyz right and I'll send an OTP code to that um let's grab the code one second let me just grab grab my code there we go uh 4 [Music] 95113 and at that point Dynamic turns from just authentication oh I need to I might need to refresh uh bar me for oh I uh I will need to do one more thing let's actually make it required um so I'll save this I'll make this required as well and I'll save these changes and I'll log back out and let's try this again Beed me for a second second let's so I'll enter a new uh user let's grab uh a code bar me for a second here let me grab my code I I think this should there we go okay uh 737 uh 343 and at that point Dynamic turned from just an authentication platform to information capture platform right so I can start not only logging in with with kind of my user information but I can start capturing additional information whatever custom Fields you want right and then you can set up web hooks you can do a bunch of things so we logged in and at that point we have a user we have an address we have the chain uh and we're in a good spot now this is just ethereum I I I prefer additional chains so let's go here and let's kind of add start toggling on additional chains so let's toggle on polygon and optimism and I I saw scroll is sponsoring so let's toggle on scroll and I'll save this and as soon as I refresh uh essentially you will see this let me just uh I might need to log out and back in uh no I think I should be good now I have these chains right so again I did not touch any code so far beyond the first implementation of dynamic I kind of set it up once and I can start toggling on a bunch of things let's say I want to toggle on an onramp I can go to configurations I can toggle that on let me quickly accept terms of service I'll kind of uh toggle this on and at that point if I kind of refresh uh Dynamic will all of a sudden in kind of have an on-ramp component to it so again no changes pretty much straightforward you know what I also want to be able to link additional wallets to the same account uh so let me turn on multiwallet I'll toggle this on and at that point my profile will change to let me link things together now we we talked about o but let let's start I think we have time so let's start doing some interesting stuff so let's add the ability to sign a message so for the first time I'll actually go to code uh I'll do the FY cursor thing where I just say Let's uh just try to implement uh a message bear with me for a second okay so let's see if this works so I'm actually going to use both ends so bear with me for here um add a sign message button using this code let's see what it does so it added a sign message button let's accept let's save let's go back here here I'll refresh I have the sign message button already and at that point I can sign a message right so that was the entire extent of signing a message I signed a message and I'm pretty much done signing a message transaction took me a second uh but I can take it a step further so I I want to sign a message but I I don't want that popup so I I I don't like that popup let me just toggle that on uh toggle that off and on next signing of a message uh it's just going to sign it so oh actually I might need to log back out and back back in bar me for oh yeah okay so no more popup so signing a message now would just work headlessly right so again one toggle one change and pretty much done now let's take it a step further so we signed a message uh let me now turn on the ability to connect to other wallets right so uh the ability to just set up QR connection so I npm installed my Global wallet already and all I want to do is essentially Implement import this and let's again let's take the curs are fancy AI approach Implement Global Connection and let's see what it does uh so I'll submit this uh and it should import this uh be me for a second I think let's hope for the best let's refresh um oh hold on oh no this is not going to work I I'll just I'll do it the oldfashioned way of actually doing this so let's import uh um import Dynamic I'll do this here um and I will also add oh I should actually not do oh I see okay I did this in the wrong spot so let me actually do this here remove it save and instead give the same instructions here let's see what it does uh we should be good I actually no I'll do I'll manually do it bar me for a second I'll do this the oldfashioned way of actually writing code so let's import uh the global wallet extension and in the wallet connectors let's add a global wallet connector right uh I should be good should be good let's hope for the best no oh okay I will skip this part given we have like five minutes but the idea is that hopefully with a few lines of code again not in this case clearly this didn't work but you should be able to with a few lines of code not just have the wallet siloed five minutes perfect so not just have the wall siloed but have the ability to connect to any other site add signing of transaction signing of messages pretty much whatever your heart desires if you take nothing else away from this um kind of presentation you should take that Dynamic and is an extremely flexible tool it can be front and center it can be very much in the background if you want to build a game it can happen kind of Silent signing if you're building a defi app and you need MFA you can turn on Google Authenticator or pass keys for addition security anything you need assume we can do right so let's let's summarize that real quick so I I'll I'll show a slideshow real quick so uh again we saw D flow already a second app if you want to play around with Dynamic is bags if you're trading meme coins check out bags you can very quickly kind of trade bags. FM is another good example um of using Dynamic and and with this I want to end with the following and you can come to our booth as well and we have guys es here's the best way to get started with Dynamic you can just scan a QR code for our docs I'm willing to bet it it's going to take you five minutes or less to actually set up uh we have a few cool features that might be relevant for you in case you want to explore them so I showed silent signing so sign messages with no popups that's behind a feature flag if you want that experience of session keys of kind of you log in and there's no tofa reach out to us just v um you know come to our booth with your environment ID we'll turn that on again if you want another feature that we have which I think is pretty awesome I'm very biased is a feature called telegram Auto wallets so if you're building a mini app in telegram we can take the login information from Telegram and auto log you in and Jer the wallet so as soon as the telegram mini app shows up it will just log you in you want that access to that come to our booth take give us your environment ID and we can take it from there we have a bunch of prizes I will end with one thing and then we'll go on to questions um Shameless ask for my marketing team please follow us on Twitter uh I will give everyone a second to QR code scan this uh I've been told that that's the primary reason for why I'm doing this presentation by my marketing team so I have no choice but to ask everyone to shamelessly follow us uh and with that I will open it up for questions any questions about Dynamic yes one second I I could I hear you do you have sdks for Unity you were talking about games yeah that's a great question not yet I wish I wish I could give you a Unity access very very soon today the sdks we have is react react native flutter uh as well as uh access I think Alpha access to vanilla JS perfect thank you yeah but that is a very good ask and yeah thank you any other questions oh oh or no question Yeah question yes hi um do you integrate with push for like notifications yeah not not directly but but my understanding from experience and what I've seen people do is they they integrate it very very quickly together uh because technically it's a it's a regular wallet and you can you can do a bunch of stuff with it you can add ens you can add push like all that type of stuff so not not directly but if you run into any issues with the integration come to our booth we have Engineers to help okay thanks yes oh I'm done okay I have one more question and for the evm chains do you have circuit also yeah so evm that's a great question I'll end with this I'm sorry evm and I I'll answer your question after the short version any evm chain you can integrate it's either on our dashboard or if you can find it on our dashboard go to our docs and look up custom evm networks you can add any evm chain you want so if it's evm should be good to go okay very cool thank you guys so much yeah perfect