Elevate Your dApp with Coinbase Wallet JM Cho

all right how's it going see the room clearing out for the mention of coinbase all right um i'll get right started um my name is jm um i'm a dev on the coinbase wallet team i'm super excited to be here at east denver in person talking to y'all face to face like this the main purpose of my presentation today really is simple is to make sure that everyone is aware of the really important fact that you still have about 15 minutes to claim your free bitcoin um if you haven't claimed it yet i don't know you're living under a rock and you don't have a coinbase wallet account for some reason make sure grab some time right now i'll be around you for 20 more minutes to go get your drops i heard the sights back up so make sure you get connected all jokes aside um now that i have your full attention um the reason that i'm here and the presentation actually is just going to be talking about what we are building at coinbase wallet today i'm going to be sharing some exciting updates regarding specifically our standalone wallet extension and most importantly if you're a dap developer in this crowd or anyone interested in developing dapps help walk through how you can connect your dap to our coinbase wallet users and tap into our existing user base so that you can leverage our user base to grow your dap one thing to note is that as much as this session is labeled as a workshop um i do want to say that um everything that i'll be talking through is very beginner friendly and very approachable um i'll be going through some very simple code snippets but everything i'll be talking about is also going to be hosted in a public github repo at coinbase wallet if you want to go check it out fork it reference it anytime in the future and so no need to pull out laptops and code editors looks like no one's doing that anyway so i'm not going to worry about that and yeah yeah if you're a dev or not hopefully this will be accessible informative content and um yeah let's jump right into coinbase wallet so when most think people think about coinbase they usually think about a centralized exchange app and now a bouncing qr code but did you know that we actually have a self-custody suite of wallet products we have enabled for users to be able to manage their keys safely and make on-chain transactions via dapps whether that's you know related to d5 nfts or dows you name it we're currently offered natively on android and ios and as of last november we have a standalone wallet extension on the browser for users to use conveniently our incredible team has been working day and night to make sure that we have the right set of features in our app such that the users can have the most delightful user experience when using our dap so i just want to go through briefly highlight some of the recently added features we have on our app starting with a unified portfolio balance with l1 and l2 networks so that you can manage your tokens in a single screen under a single balance we also have support for nfts viewing your collection sending your collection we also have a native dex feature so you can swap and handle all that within your app without having to leave it this is supported on mainnet and polygon we have speed up and cancelling pending transactions support for adjustable gas ens and coinbase username and a lot more other features two little eth denver alpha leaks that i want to have is mentioning two upcoming features that are set to launch one of which is becoming a support for hardware wallets such that users can use the most secure way to experience defy and the second is another killer feature called coinbase pay where users can basically connect their self-custody wallet to their coinbase exchange account and very seamlessly on-ramp fiat in the app with one click of a button pretty dope right okay and finally just to toot my horn a little more a lot of people are using it we have more than five million self-custody users we're the fastest growing extension in the us we're the most downloaded self-custody mobile wallet in the u.s and i think the most important thing is that our key advantage is helping the more than 70 million users that are existing in our coinbase ecosystem and on boarding them onto the web3 world so that we can make the pi grow larger for all of us so enough of uh showing the product the real question is if i'm adapt developer developing adapt how can i actually tune into this user base how can i actually connect my dap with the coinbase wallet such that i can tap into this existing user base and elevate my dap so i'm going to walk you through a couple ways but the main idea here is it's actually really simple just a few lines of code on your front end app and you'll be able to connect seamlessly coinbase wallet to your dap three ways i'm going to walk you through this is first the classic injected web 3 provider approach the second directly using coinbase wallet sdk as a provider and third using open source library third-party libraries as a provider to connect your dap to coinbase wallet so it's all about providers just a quick note on a provider it's just an abstraction of a connection to an ethereum network such that your dap can write and read and write from the chain and let your let your users interact with your on-chain contract so yeah we'll take a look at the first option which is just using an injected web 3 provider this is commonly known as window dot ethereum for those adaptives out here and if you are someone like me this is probably the first approach you saw when you're doing your first dap tutorial certainly was for my case and you're probably very familiar with this but let me just walk you through it let's say you're setting up a depth to connect to a wallet whichever wallet you want to provide what you would do is whether you're using web3 or ethers as the framework to interact from your front end to the chain you'll be able to initialize your web3 object or your ethers web 3 provider by simply passing it in this wallet.ethereum sorry the windows.ethereum object and what the windows dot ethereum option contains is injected provider from the wallet extension commonly such that you can just use your provider's api and instantiate your contract and interact with the chain very simply so a quick note about what window.ethereum is so most wallet today existing on extension-based wallets as long as their provider is eip 1193 compatible they usually are able to create their own provider inject that into the browser under windows.

ethereum such that on the front end you can very easily just fetch that provider and use it to access your library api and interact with the chain etc so this approach works with most extension-based wallets including coinbase wallet we have full support for most basic wallet interaction such as signing and submitting transactions approving and minting erc20 tokens and adding and switching networks using 3085 or 3326 but we also want to mention that you have to know whether or not the window.ethereum object is actually there at the presence of a user who has installed an extension on their browser so the targeted user base for this option would only be users who already have installed coinbase wallet extension or the users who are using our in-app dat browser on the mobile client because they've already have injected the web3 provider into the browser but a common issue that we see is that let's say your friend says hey i heard you build a cool d app i don't know much about this web3 thing i don't have a wallet but i want to check it out and you send them a link commonly we have scenarios where we see uh buttons simply disabled when there is no injected provider or there's a simple no wallet detected good luck buddy text that shows up on the dap in those scenarios it's not the most graceful user experience for users that don't have a wallet the second scenario is that a lot of coinbase mobile wallet users want to make sure their keys are stored on the secure enclave of their phone and simply interact with their dap directly from their mobile but to do that the user again has to have an extension installed if you use the injected web3 provider approach i wonder if there's a much easier way to handle this default scenario when a user simply doesn't have a dap and doesn't have an extension installed instead of showing a disabled button or no wallet detected message what if we had a scenario where a user simply connects the wallet and sees this pretty graceful onboarding page that explains to you what our extension is about links to you to installation page and also enables users who have a phone to simply scan the qr code directly from their coinbase mobile app to connect seamlessly to that app without having to worry about the extension itself um pretty nice right and so to enable this is the second approach called using the coinbase wallet sdk directly into your dap you can think of coinbase wallet sdk as a bridge between your dap and our wallet and so let me walk through a little bit of code about how you can establish this communication channel simply you install coinbase wallet sdk using whatever package manager you prefer then you import the sdk into your dap you'll be able to initialize parameters that are set default and required for a lot of providers out there whether that's a json rpc url from infu or alchemy or a default chain id you'll be able to initialize the wallet sdk given your app name and create the web3 provider based on the wallet sdk and simply add that and wrap it around your web 3 object or your ethers web 3 provider just like you would do with windows ethereum and you'll be able to access the full-fledged features of all the advanced features that we've just talked about just to go through it one more time the targeted users for this will be those who are able to onboard with our new onboarding experience if they don't have an extension installed if they are using a mobile client and they simply want to use a qr code to bridge into your dap this is also an approach and finally we also have support for deep linking so that if you open adap on your phone on safari or chrome we'll be able to deep link straight into the user's coinbase wallet if they have it logged in such that they have a seamless user experience in app without having to leave and so that's all well and fine but realistically if i was a dapp developer my goal would be maximizing the reach of my dap right i don't care what wallet my dap user uses whether it's metamask or a wallet that's provided by wallet connect or its coinbase wallet we want to make sure that your dap maximizes the reach across all user bases so you want to actually see something more like this on your dap can i get some more options please you know and so the third and final and actually the recommended approach that we're going to be talking about next is actually using one of many open source third-party library providers out there to seamlessly support many wallets coinbase wallet being one of them into your dap and have access to the full fledge features so this is the third approach again it's highly recommended on rn2 and let me walk through one of my personal favorite libraries these days it's one that my friends have been harping about due to the ease of use and clean documentation it's called wag me from awkweb.eth let me just walk through some code to see to check out how seamless and easy it is to inject a wallet provider into your dap so you just install wag me import the wag me provider along with the associated connectors into your dap here connector is just an abstraction of what we call provider earlier when we're dealing with single wallet providers you initialize these connectors just like you would initialize other providers giving the default json rpc url app name chain id etc then you wrap your app in the library provider you wrap your app that's kind of cool you wrap your app with the wag me provider provide the connectors into the provider and then you can simply in your app use all the wag me hooks to access the provider make a connection to your wallet access your contract etc so it's super super seamless and the great thing about third-party libraries like this is that you not only get access to the full-fledged features that the coinbase wallet sdk provides but in addition coinbase wallet is just going to be one of many wallet providers on your dap such that you can expand your dap user base it's really easy to use because it abstracts a lot of the complexities out of implementing this in a more vanilla way that we showed earlier you have flexible ui you can create your custom modals like shown in this example such that it stylizes with your ui and integrates pretty well and finally you're able to yeah provide the full-fledged features for each unique wallet provider all in a single adapt and that's the ideal user experience so the targeted user for this approach is really anyone with a self-custody wallet because it's wallet agnostic a lot of other popular libraries that are well established out there we just want to shout out to we have web3 react by noah zinsmeister super really nice app very clean easy to use on board by block native and there's also web3 modal by pedro and the wallet connect team shout out to all of these libraries they've been doing a really good job helping the apps connect easily and seamlessly to all providers out there and if you're somebody who runs a library that helps dapps connect to wallet please dm us at coinbase wallet on twitter or github we'd love to help integrate coinbase wallet sdk into your library so that's all folks um are you ready to build would be the way we would end if that was quite uncharacteristic of coinbase we do want to mention that although i don't have anything as exciting as a balancing qr code that offers free btc we do have a bounty out there anyone who integrates coinbase wallet sdk into their build week hackathon submission you'll be eligible for this bounty it's 750 per team 750 not a small amount to 20 teams and you can find more information about the selection criteria on this link it's just east denver dash bounties coinbase cloud i do want to mention that coinbase is actively hiring so there's a giant talent pool both in this room and in the conference we want to make sure that if anyone's interested helping expand the adoption of crypto please check out our roles out here on coinbase.com careers and you can hit me up i'll be walking around finding questions after this we can chat to and finally we'd love to connect with you um get a full you know view of the coinbase wallet sdk documentation add the coinbase cloud website and also check out their full suite of products if you want to learn more about coinbase cloud and finally if you have a minute please scan this qr code we love to have we have a little survey there we love to have your feedback or actually please scan this qr code we'd love to have your feedback on this survey and um yeah shout out to the coinbase cloud team um danielle sarah alex for organizing this presentation and yeah i'll be here around with questions for others we have a few minutes for questions now