Coinbase Wallet or NGMI: Make Your Dapp Degen-Friendly with Multi-Wallet Integration

[Music] [Applause] [Music] it's all good all right i'm gonna be standing behind the podium because there's no like click or anything but um we'll make it happen i'll try to be as uh out here as possible but yeah um yeah so should we get started thanks for the wait um the sun i was just playing it's by frank ocean it's called the provider hey it's a lit song on its own not only but also it's lit because it's terribly relevant to some of the contents i'm gonna be talking about at this workshop so just want to throw it out there anyway i'm getting ahead of myself all right let's really get started um i think this is the first talk of the hackathon so i'm gonna take the pleasure in saying welcome everyone in this room to eat amsterdam yeah y'all probably flew in from like all across the globe um safely landed here now we're going to spend the next three days like building cool stuff how exciting is that a quick intro about myself my name is jm i'm an engineer on the coinbase wallet team specifically building on the browser extension and the coinbase wallet sdk today my talk is really going to be about wallets specifically i'm going to be focusing on the ideal wallet integration setup for your dap and why without it your dap is not going to make it yeah i wrote that title for the workshop and yeah i'm really proud of it because it's super spicy now my talk is going to be divided into three parts first i'm going to talk to you all about coinbase wallet and all the exciting features that our team is building behind the scenes i'm going to share with you all the reasons why you should use coinbase wallet and try to fomo you into using it as an end user yeah by the end of it you're going to be like this guy's so shamelessly shilling his product i kind of love it i better go try it out yay part two i'm then going to be talking about taking a step back and talking about wallets in general and the importance of wallet for you as adapt developer and also going to be talking about how your dap actually communicates with these very wallets and finally we're going to be wrapping up by talking about the ideal multi-wallet model setup for your dap and walk you through some code snippets maybe even do a live demo on how you can really get kickstarted on your project especially for this hackathon sounds good yeah all right all right um if you have any questions we'll try to have some time at the end to answer any questions i do want to make this room a little more engaged and fun so i'm going to try to ask questions during the talk so you guys can like raise your hands and answer and to give some incentive to answering i'm gonna give out a free swag for anyone who answers correctly coinbase swag wow this room is like not about the swag game what's going on usually when you go to remember like freeze track they're like swag swag sorry they're usually like seagulls and finding nemo but you guys are just like so low-key today it's been a long week really how about we all just stretch yeah y'all probably did all the whole covet tests waiting for the registration and stuff so not um but yeah um so with all that said we'll probably get started how about a show of hands how many of you guys heard of coinbase wallet ooh how many guys have you used coinbase wallet okay how many of you guys use coinbase wallet as your primary wallet wow no swag for you guys man and shana you can put your hand down cause shanna's on our team [Laughter] um all right knowing that stats um we'll get into it assuming that you don't know about coinbase wallet because there's folks watching this live stream too so most of people know coinbase as their centralized exchange and also the super bowl qr code that bounces around but not a lot of people know them for the self-custody wallet and so self-custody wallet is here to optimize your experience using dapps of all different kinds whether it's in d5 or nfts or dows it's offered natively on android and ios and as of last november we also launched a standalone chrome extension to really optimize your user experience and making it super easy for you to interact with various steps now i do want to hit on some common misconceptions coinbase wallet is not our retail exchange app not the custodial app it's also not a kyc wallet it's a no kyc wallet and third it's a self-custody wallet and we fully embrace the idea of nacho keys nacho crypto and a lot of users are using it we're known to be the fastest growing extension in the united states we're also the number one mobile self-custody wallet in the u.s and finally what i think was our biggest advantage is we have the ability to take the more than 89 million users in our entire coinbase ecosystem and we hope to move them all on board into web3 using ourself custody wallets a lot of eyes are here like sheesh how are you gonna do that well we're gonna do that by focusing on dead dead simple user experience and what i mean by that will be shown with some of the features i'll be showcasing here about our wallet so what are the features on our wallet currently we support a unified portfolio so you don't have to be lame and change through different tabs to go through networks on your wallet it's all there in front of you unified evm and you see your entire aggregate token balance at once we also have support for nfts send and viewing your collections all in your browser extension we also have a native dex experience where you can swap your different tokens inside the extension without having to leave the extension and use a dab currently supported on mainnet and polygon we also have capabilities like sending for ens speeding up and canceling pending transactions we also have new support for ledger so you can connect your code wallet to the coinbase wallet extension and use it safely and securely i see someone clapping there nice and finally what we think is a real killer feature is we have the ability called coinbase pay that newly launched that allows you to on-ramp fiat into crypto from within your self-custody wallet by connecting it to your coinbase exchange app and being able to seamlessly honor on-ramp crypto into your wallet without having to go through another exchange and send it and input your address etc etc so these are some features why we believe it's super simple and super beginner friendly for users to be able to use coinbase wallet and onboard onto web3 now i already see some bored faces they're like yo i'm not a beginner huh i didn't come all the way here to amsterdam to hear some beginner friendly ux i'm a true dj no hey is that the face you know i i i flip nfts in my sleep i move farms in my toilet coin gecko notifications are my morning alarm right i see some faces i'm a true crypto dj and i breathe and live on dapps what user experience do you have for me and yes you fellow dab connoisseur that's a good question so we're going to play a quick game of asking yourself how many different ways are you able to connect to your favorite app using coinbase wallet and i'm actually going to give you time to think about it and then i'm going to ask you and then whoever gets the actual answer is going to get some free swag all right y'all think of an answer all right raise your fingers to indicate how many different ways are there to connect to your favorite depth using coinbase wallet all right all right not a lot of fingers come on just throw a guess you could win some free swag okay i'm seeing some numbers i'm seeing some folks also who saw me in barcelona you're disqualified because they saw the same talk i see i see one i see two all right wow six i see three i'm just gonna pick one what what is that number all right she got it congratulations four different ways to connect to your favorite depth using coinbase wallet wow four is that possible that's a lot that's a lot of different ways to connect to your dab and i'm gonna walk through step by step how to do it and congratulations you should come by later at our booth and we'll give you some free swag free coinbase swag [Laughter] all right let's go through the options first option how to connect to your favorite app pretty standard using our standalone browser extension easily connecting app connecting experience just sign and submit transactions through the pop-up that shows on your extension pretty standard you've seen with other wallets second option you can actually keep your keys on your mobile phone if you believe in better sandboxing you want to be a little more security conscious and be able to connect your wallet on the mobile to our extension through a qr code and be able to sign and submit transactions directly from the phone that's option two all while using your desktop dap option three for those who are a little more security conscious we don't even deal with hot wallets i want to stay cold as i can you're able to connect with your hardware wallet through our desktop extension and sign and submit transactions directly from your ledger and finally let's say you are a true nft connoisseur and you're on a train and you're so busy you want to hit the next mint of the next moon birds next new hot nft drop so you have to do everything on your phone and so you pull out safari or chrome on your phone as a browser and go into your dap to mint your nft then what coinbase wallet sdk offers is an ability to deep link directly into our in-app dap browser so you can seamlessly automatically connect to your adapt and be able to sign and submit transactions from the mobile phone so yeah djing's here let's hear it do you like these features so either yeah whether you're you're a nft sleeper flipper you're a toilet farmer or an actual coin gecko we got you covered there's so many different access points for you to enter into your favorite depth using coinbase wallet now we've talked a lot about all these different ways that coinbase wallet benefits you as an end user but what am i talking about because i have a group of here who are actual dap developers so i want to ask you the question in turn what is the role of a wallet why does a wallet matter to you as adapt developer anybody come on why wallet you just shout out answers it's what it's what makes this whole thing possible in a lot of ways okay and yeah so we don't need to go through a bank system yeah in my case i use a lot words to actually authenticate yeah sorry say that louder to authenticate what are you authenticating yeah yeah exactly yeah say that louder yeah so transaction signing transactions signing messages confirming transaction all of that all of the above yeah exactly so as adapt developer you got to ask yourself like why does why am i in this workshop why does a wallet matter to me when i'm building a dap why is that important to me and it's all about the ability to sign messages and submit transactions and i like to simply think of a wallet as more of a key management software it's a bit of a boring name not as catchy as wallet but that's sort of how you can think about it let's take an example let's say you're building the coolest app let's say you built uni-swap for example imagine if i as a user have to go to your dap and log in with my private key so that you can send transactions on my behalf on your dap and i have to do that for every dap logging in with my private key would you do that no that's crazy right because the amount of trust you have to give to each and every dap with your private key is significant and that will truly get you rugged and so what a wallet offers is taking that burden of trust off your hands being able to hold your keys and manage it for you and facilitate safely and securely signing and submitted transactions on your behalf so really a wallet is all about managing keys so in essence what it does is helps you as adapt developer your dap and the end user their relationship to stay in large trustless now the reason i emphasize the fact that wallets and users are differentiated because i have a lot of friends who conflate the two wallets accounts i have a friend who said i want to try rainbow wallet but i can't use it because all my funds are stored on my metamask wallet and i'm like no your funds are not stored on your metamask wallet your wallet does not store your crypto your crypto is associated with the account on your public ledger that accessible through your private key right so the on-chain account is not bound to a wallet and it's pretty much wallet exhaustic and you can always import a key that you have on your another one wallet to another wallet like coinbase wallet right a little little shell there and yeah and another thing that a wallet does for you is facilitate again being able to sign and submit transactions on chain and interact with an ethereum client so yeah that's sort of at a high level a very simplistic view of how the wallet is really important to you as adapt developer really offloading that trust so the question here is in a little more practical sense like so then how does my dap how do i have its developer actually communicate with these very wallets how do i send transaction requests to a user how do i listen to state changes when a user changes their account on the wallet or changes network on the wallet how does that interaction actually happen what's in this question mark i want to know well it's not that surprising because just as any other system interacts with one another there's an api it's pretty standard that every wallet exposes their api especially on the web as a javascript object on the web page that you from the front end of your dap can easily access and interact with and that wallet api is not called wallet api it's now called key management api it has a lovely name it's called the provider hello frank ocean and yeah so it's very standard that there is a provider this wallet api that's given provider that's a pretty motherly name isn't it provider like provide so how about for a minute you scratch thinking about an api some abstract thing the wallet api forget about it and just think about a mother providing for their child except the mother here is feeding their child and the mother is the provider and the child is the dap what's going on here yeah and you're asking yourself what is the provider actually providing right well the provider the mother provides the child with milk and sustenance for example and the provider provides the dap access to ethereum some ethereum milk you can call it so yeah let's let's unpack that word a bit access to ethereum what does that really mean access to ethereum we can i can unpack it in two ways it's really about reading and writing from on chain acts to ethereum the provider really enables the dap to do two things one make json rpc requests and two listen to events aka state changes that are made on the wallet from the user or on the ethereum client requests and events hey let's go let's go requests and events that's all you got to remember so capturing this imagery in your mind for a sec the mother feeding the child the provider feeding the dapp anchor that in your head and we'll jump back into the actual api starting with the request api what is the request function the request function is really just a wrapper function that allows you to make json rpc requests from the that super simply and we have the interface defined right here just a few lines of code so if we walk through it simply you're going to call provider.request from your dap and all you have to pass in is one the method the jsonrpc method that you want to use and two the relevant parameters of that method let's actually walk through some examples to make the super concrete and i'm going to walk you through very familiar examples first connect wallet everyone loves connecting wallet you connect the wallet button what actually happens behind the scenes well it's standardized under eip1102 it's about the user giving authorization of the dap to have access to their ethereum address and how that happens is simply calling provider.request and you specify the method eth underscore request accounts you don't even need to provide extra parameters and it'll give you back an array of the approved accounts that the user has approved on the pop-up another example adding and switching networks you've seen this a ton of times on various steps that actually support multi-chain for instance you'd be able to ask the dap ask the wallet hey provider can i request to switch ethereum chains to this particular chain id and then maybe the dap checks and says oh the wallet actually doesn't have any information about this chain id let's fall back and have another request called wallet at ethereum chain and let me give you all these parameters so that the user from the dap can seamlessly add a new chain onto the wallet without having to google how do i add polygon onto metamask and then you go and google that and copy that onto your wallet none of that super simple from the depth so that's another example and this is standardized under eip 3326 and 3085. final example is another example called watch asset super super familiar probably for a lot of you if you use dapps you go to it and there's a custom token maybe for that dap and it's the first time you're on the protocol then instead of also having to google what this custom token is maybe you go to etherscan and you copy the wrong token address or something and things are screwing up the dap will be to send a request to the wallet so that the user can approve do you want to add this new token to your wallet and so that's what watch assets does so just like any other request you simply specify the method watch asset and you add some of these parameters that specify what this asset is so here are three concrete examples of what the request function does is that does that make a lot more sense yeah so it's all about sending json rpc calls through request now let's take a look at what the events api does this is more of reading and interacting and responding to state changes for instance the events api extends a very similar api on node.

js called event emitter and by specifying the same methods on that api specifically on and remove listener the dap has the functionality to subscribe to these events so for instance in this example here if a user goes to wallet that supports multi-account and changes account then the dap is able to listen to those changes get the new account and be able to render changes accordingly same thing with changing the chain and you're able to also remove the listener and add the listener using these two methods some common five core events is connecting disconnecting account and exchange changes in the account and the chain and finally be able to pass around messages and really this is intended to be more of responding to state changes so that's the events api so all you really have to remember just to recap bring you back to the delightful mother it's just requests and events that's all a provider gives you and it enables you to do things like making rpc requests and listening to these events so yeah and the child you the dap just say yes mother and drink the ethereum milk yeah all making sense all right so the real kicker here is that this is not unique to coinbase wallet by any means this provider is actually standardized under another eip called 1193 and is universal almost every wallet provides its own provider that conforms to the same specifications of having requests and accounts now why is that awesome for you as adapt developer well that's awesome because you don't even have to think about what wallet your user wants to use just write your requests and listen to those event changes according to the specification and let the user decide can i plug and play whichever wallet i want to use on your dap and writing the actual code on the front it's super simple to make that happen dude god bless eips really right so yeah that's really the kicker here and so let's say i wanted to do that plug and play maybe on my dap i want my depth to look more like this where i have multiple wallets that are able to simply come in multiple users from various wallets come into my depth and be able to use it seamlessly all due to the standardized eip provider now maybe we want to use something like this as an ideal setup for your depth a multi-wallet modal so the next final part of this talk is going to be talking about how you can actually set this up how simple it is and why this is important to you as adapt developer when multi-wallet modal so right now i'm going to ask some of you 95 of you when doing various dap tutorials have probably encountered the provider in some capacity in fact it's very easily accessible on the browser if you have an extension installed can anyone name to me what specific property on the browser you've always called when building your dap to access this provider what's that i'm hearing i'm hearing it sorry the object name yeah what's it called and where is it hosted under yeah window.ethereum exactly right window.ethereum is where we normally get our provider right and this is something called injectedprovider when you install an extension the extension will automatically take the provider that it has and save it under the property ethereum inside the browser web page so that on your dap front end all you have to do is access window.ethereum and you'll be able to start making those those requests and listening to those event changes accordingly now what's the issue with injected provider well it's just one property on the browser what does that mean that means there's only one room for one provider for one wallet that's kind of like not what we want right we're talking about plug and play we're talking about wallet interoperability having a single provider is not going to help that happen right so that's the issue here where is my plug-in play where can i actually get to that multi-wallet state so what is ideal here is being able to create that multi-wallet model and actually use the various different providers from various different wallets such that when the user comes to your dap they can simply say oh my wallet is provided right here choose that wallet and start using your dap seamlessly now you can also think about it as last time all these different mothers being able to provide for your child on your tab access to ethereum in all the various ways you want to have all those mothers providing on your dap yes because that's going to expand your user base and allow any user who uses any wallet to be able to connect to your dap and seamlessly use it without friction so that's the importance of the multi-wallet model now how do we actually implement this well one way you could do it is actually vanilla just download all the different sdk providers create a custom model yourself from scratch provide an on click method such that you could connect send requests according to the ethers request account and be able to use each and every provider individually a lot of manual setup and we don't do that because we're lazy because we love open source we want to stand on the shoulders of giants who've already built awesome open source libraries to do this a lot more seamlessly so what i want to recommend is that how we should go about doing this is using various what i call wallet provider aggregator libraries for you to connect to various wallets from your dap now there's a lot of aggregators out there but i want to cut it down to two buckets the first category is headless libraries so libraries that come with no custom ui for you to use and build your ui on your own and you just hook up the providers on the back and the second type which is actually the one that i recommend for something like this hackathon is a built-in model that actually comes out of the box solution with the ui the headless libraries the ones i recommend is web3 react and something called wag me hooks and for the out of the box solution there's something called web3 modal that some of you might already know and web3 onboard so these four libraries have been very well established and very well maintained by the open source community that i highly recommend so let's take a quick example at a headless library is web3 react it's the most widely used library by far and it's used like well-established apps like uni swap the one thing you have to remember you have to build your custom ui however the setup is super simple let's just look at the code you just have to initialize some of these connectors which are basically providers using a different name and then wrap this provider wrapper component around your app feed them these provider options through the library and then import this hook that gives you access to activating the wallet deactivating it get your accounts get your network a very good abstraction of all the things we talked about now the second option is using a built-in modal and again this is super simple why because in the previous slide we took away anything related to actually building that model on the front end if you just want an out of the box solution you can use web3 model you just initialize the provider options like this just like you would have anyway using the vanilla way and then you create and initialize the web3 model and you pass in the provider options and all you have to do is web3 model connect and they'll be able to give you what your user saw and chose on that modal for you to use throughout your app so because i love web3 modal so much i'm going to show you a quick demo of how to do this and show you how simple it is so here's a quick demo so i have in front of me a code sandbox that has integrated using simply the injected provider so it's a simple tap and i have it open here so you can see better where i if my wallet is not already connected to the step it will reload code sandbox is actually really lovely you can connect your wallet like this using the injected provider that we talked about that the coinbase wallet extension has already injected into the web browser in window.ethereum gonna connect your wallet to the dap and use it to switch network sign messages etc now how simple this multi-wallet provider is is as follows here's the code snippet you saw in the slides where i specified these provider options and then all i did was initialize the web3 model by passing in the provider option we wanted here the coinbase wallet sdk and wallet connect and all i need to do here and hopefully i could do this while holding a mic on one hand is await web3 modal dot connect and save that and see that reload and disconnect again my extension from the dap and make it reload again and then all i have to do is press connect wallet and i see this beautiful ui what hard work did i do that was like copy pasting like 10 lines of code and that was like two minutes and i can connect seamlessly to coinbase wallet and use it throughout the dap quite simple right shortest live demo you've seen all right so that was the live integration demo now maybe after you've seen all this you're like this is great i love multi-wallet model and i love this i'm gonna use it throughout my depth but i'm at a hackathon yo i don't have time for this i need to prioritize my contract i have to prioritize the different functionalities that my cool protocol is gonna offer to my users that's why we prepare for you just more than actually our workshop but the reasons why to take a step back just to give you a recap of the talk is that first we talked about coinbase wallet is super awesome and then we talked about how the wallet interacts with the dap through the provider and finally we talked about the multi-wallet model where you can offer various multiple wallets on your dap through this modal and now the actual catch that i got to a little quick too soon is that we're offering various hackathon bounties to incentivize you to actually try these modals out and what i mean by that we're offering the top three teams who win our bounty the following prizes third place is 1.

5 k second place 2.5 k and first place is 5k and not only that a meeting with the prestigious coinbase ventures how about that so yeah and all you really have to do is build a simple dap that has good ux ui that has technically sound capabilities and three has somewhat originality creativity and potential for future growth and then just install coinbase wallet through the couple lines of code that we showed you and then do a quick feedback form how was that experience how do you like coinbase wallet and that's all you really need to do and shauna and i is are going to be judging on sunday to see which staff has done this best pretty simple right so yeah we also have future bitcoin bounties if you're not interested in building a dap during this hackathon totally fine we also have various bounties that are super actually simple up to 2k if you able to find bugs on our sdk bugs on our documentation if you want to go to one of these aggregate libraries and add coinbase wallet or fix our implementation and also just create a tutorial like here's how to implement coinbase wallet and show it to us we're like dude that's fabulous and we'll be able to award you with some bitcoin bounties moreover we're actually here looking for great talent and we know everyone in this room is super capable the fact that you're here in amsterdam just shows to me your resilience and drive to build and so we have a ton of job postings we're hiring super aggressively so please go check that out we have an also another big announcement you're probably wondering i've been waiting 69 years for coinbase to finally drop this really hyped nft marketplace what's going on and believe me you were trolled because we were waiting for the 420 drop coinbase wallet and ft marketplace oh coinbase nft marketplace is live on beta you can go if you have access through your waitlist go to nft.combase.com try it out really nice user experience you can follow your friends admire their collection i heard there's also a way you could leave and read comments i heard they're super spicy so go check that out and yeah check out coinbase nft marketplace and finally we'd love to connect with you go on our twitter follow us if you want to hear updates on coinbase wallet and also check out our documentation if you're actually going to implement doing this hackathon we have literally all the code sandbox examples not only web3 model but also web3 react and all the different libraries that we showed all up there on the documentation that you can just fork and copy and paste and use that in your hackathon you'll still be qualified for the bounty also check out more about coinbase wallet if you're curious on our developer docs and our actual coinbase website if you have a minute we have a link tree as on the qr code scan that offers feedback for not only our product and documentation but also this actual workshop for me to improve as someone giving talks and so yeah i think that's pretty much a wrap thank you for listening for this extended talk and my name is jm on the coinbase wallet team this was coinbase wallet and hope you have a great rest of your day thank you [Music] yeah any questions everyone's good it was flawless [Music] [Applause] [Music] you