Why No One Uses Your dApp: Fixing Onboarding
Ethereum Denver·Mon, Oct 9, 2023, 12:00 AM
dApps thrive or starve based on how effective they are at adopting new users, so how you onboard people to your NFT and digital collectable projects matters more than ever. In this technical workshop, senior engineers Brian Cleary & David He will walk us through the landscape of web2-to-web3 adoption, including struggles and opportunities developers are facing. They’ll conclude with instruction and demos using Magic.
Transcript
Hey guys, uh welcome to ETH Denver everybody. Um I'm David. I'm with Magic. Uh we're formerly known uh as Fort Madic. You might have heard about us or seen our product in the wild.
We're the uh non-custodial hot wallet that's trying to make it super easy uh for your users to use your web 3 app basically. Um, and uh, we're here to talk about digital assets today, uh, NFTTS, uh, and how to design an onboarding experience that users will actually want to use. So, okay. Um, we're originally going to have a little fun back and forth, but my partner Brian isn't here right now. Uh, we're going to just kind of rip on the memeiness of NFTTS.
Um, he's not here, so I'll just explain it. It's funnier this way, trust me. Um, so basically this is the uh public's current understanding of NFTTS, right? You got this AI generated portrait of Mona Lisa uh holding a doge, probably a title that says to the moon or something. Um, yeah, it's it's a JPEG that anyone can screenshot that costs $4,000.
Um, it's a pump and dump get-richqu scheme and the technology is implemented wrong more often than not. Don't actually go to that QR code, by the way. you'll be disappointed. Um, cool. So, uh, right, some basic terms to get get this out of the way.
Uh, NFTs, non-f fungeible tokens. It's a unique irrevocable digital certificate that cannot be changed. Uh, fungeible means a capable of mutual substitution readily changeable. It's nonfgeible. Uh, minting is the publishing of the digital data to the blockchain so that it can be transacted.
Delivery is the transferring ownership of the NFT from one account to another. Um, airdrop is the free distribution of an NFT. Uh, it's it makes for a great experience if you can airdrop your assets instead of expecting your users to mint it. I'll I'll get into that a little bit later. Um, marketplaces uh is a platform which enables creators to consume and consumers to view list and trade NFTs.
OpenC, Nifties, Rarables, Super Arab, the list goes on and on. Um, checkout is the process of purchasing an NFT, which will typically include creating a wallet and and taking payment via fiat on-ramp. Um, and finally, IPFS is the interplanetary file system. Um, think of this as decentralized file storage. Uh, blockchains really can't hold a lot of stuff on it right now.
So we need another decentralized mechanism for for storing files because if you just put all the assets themselves on Amazon then it kind of defeats the purpose of uh of being decentralized. Okay. So so why do NFTs matter, right? Um NFTs matter because they represent ownership in a digital world. While it's nice that you can pay an ungodly amount of money for a photo of Mona Lisa holding the Doge, um it's a very superficial understanding of what this technology means.
A good way to illustrate this is via token gating. So token gating is a method to verify access to a digital uh community. Um when you checked in earlier to to ease Denver, you needed an NFT um in a wallet in order to uh to get let in. So this is a very basic example of token gating. Uh let's say in the future when ETH Denver is fully decentralized, remote and takes place all over the world um or even completely virtual, right?
Checking whether or not an attendee has access to the virtual spaces or online services for ETH Denver can be as simple as checking for an asset in a crypto wallet. Um, and on the implementation level, it's basically looking for it's basically looking inside a user's wallet for an NFT that you're expecting to see as a part of uh you user authentication. Um, once you've validated that the user holds the asset, you can treat them accordingly. It's kind of like access control on the blockchain. Um so so you can imagine plenty of use cases for this tech technology including like loyalty programs rewards programs um events tickets passes uh product keys digital licensing can all be done on the this way um in web 3 um and obviously identity and access control um again check for balance of the existence of the asset that you're expecting before you let them users proceed with the DAP one clear use case for digital assets.
So these unique tokens are how you are going to prove your membership in the in the digital world. Think of them as sort of membership passes for online communities. In real life, yes, but the impact is much more profound if you consider them in the context of network states. In a fully decentralized digital future, these assets are going to be how you prove that you belong to a particular group. whether it's the network state of your job, your church, your improv group, or any other kind of community you can think of.
At this point, it becomes less about the JPEG itself and more about what ownership of the authentic JPEG u means, what it means to own uh that JPEG. Um, and obviously the risks of misapplying NFTs. I don't need to go over these. We saw what happened um with the NFT asset bubble over the past year. Um but you know the consequences are not if when you're not actually providing value and a lack of meaningful use case will lead to NFD bubble.
Uh lack of standardization resulted in mistrust and le uh and led to a lack of adoption and obviously difficulty in like minting and delivery caused a lot of these um sort of user onboarding bottlenecks as well. And finally it hinders NFT's potential as a legitimate technology for creators. So, it's important that those of us in web 3 um are in it for the right reasons ourselves and in it for the long run. Otherwise, we'll just keep setting ourselves back with rug pulls and and market crashes. So, so that was like a brief overview of like one legitimate use case of digital assets.
I just I named one. There are a couple others. Um but yeah, just I guess now let's kind of switch gears a little bit and talk about user experience. Um, so we work with a lot with some pretty known brands and in our experience of the market today, companies and projects are really struggling to find user-friendly web 3 onboarding experiences that people can actually use. We see these big um web 2 companies trying to get in on web 3.
Their use cases are really usually really cool. For example, Mattel recently launched a set of Hot Wheels NFTts with with with us. Um, the assets have rarities associated with them, kind of like Pokemon cards. Um, or like Diablo loot, as you can see, super rare is purple because it has to be. Um, so you'd purchase a pack of them with your credit card and get some random cars in like a digital loot box.
This use case is a no-brainer if you're sitting on an IP like Hot Wheels. Um, it's a great way for Mattel to leverage their brand and build relationships with their customers, and that's amazing to see happen in web 3. When it came to implementation though, there were some pitfalls we helped Mattel navigate, especially when it came to actually launching their experience. Uh, we saw similar trends when working with other partners too. And consistently, the elephant in the room, the elephant we find in every room is gas fees.
So, just a quick recap. Um, gas fees are paid with every transaction on the blockchain, including minting, which is the smart contract call that creates the digital asset. It doesn't matter if you use L1's or L2s. The cost of minting and delivering the asset to the intended recipient needs to be footed by somebody. Somebody's paying for this at some point.
Um, I know OpenC does lazy minting where the minting and delivery isn't done until the asset is purchased. Um, and that's definitely an option to consider, but regardless, who you are expecting to do the minting will have serious implications on your onboarding experience and user adoption. So, think about this problem early will help you avoid a lot of headache upfront and ensure that your launch is as smooth as possible and that you can get the largest possible audience uh for your product. Let's consider some scenarios. So let's say you expect your users to do this.
Uh so here you add the minting call of your NFT smart contract into your front-end code, right? Um so when your users come to your website, they see this mint button, they connect their wallet and then they make the mint call to the blockchain directly. This has some pros and cons. So on the one hand in this scenario your users will be the ones marked as having created the asset. It has their keys uh it was their keys that made the mint call.
So they are the creators of that asset which is nice if that's that requirement is like necessary to your use case. On the other hand the barrier to entry to your users just got a whole lot higher. So understand that most people are not going to have crypto wallets, not going to have crypto in their crypto wallets or know how or have the patience to be able to navigate crypto exchanges to get crypto in their wallets so they can make the mint call. And and depending on like network congestion, um the the cost of minting, especially if you're on a layer 1, can be like really prohibitively high. So the point here is to really think about who should be doing the minting for your particular use case.
Who are you offering this experience to? Is it to a web 3 native audience who already have crypto in their wallets or are you trying to reach a broader audience? If you're trying to reach everyone, understand that like yeah, most of web 2 falls into uh this this category. So now let's look at a different scenario. Another way you can do minting is mint the asset yourself as the developer or the platform offering the digital asset either ahead of time or at the time that the request is made to claim the NFT.
This involves having a wallet or a bunch of wallets we know them as fleet wallets um sitting on your server side ready to fulfill these minting requests coming in. So, a user comes in, they don't have a wallet, you help them make the wallet either through magic or the wallet provider of your choice. I hear MetaMask is popular. Um, and now they have an empty wallet ready to receive the asset. So, next, your front end can make a call to your server, right?
Either after providing proof that of payment, in Mattel's case, they ran like a Stripe charge. Um or if you're launching like a community or a newsletter or something like that, you just sign a proof ensuring that the the user is who who who they say they are. Um you put that to your server side and then your your the keys on your server side can can do the minting. Um either way, uh there are a couple of of advantages here. So your end users don't have to worry about paying the minting fees because obviously it's your wallets that are doing the minting.
You as the platform are the creator of the NFT. So depending on your use case, it might be important when validating the authenticity of the digital asset you're giving your to your user. Um, if you meant the asset ahead of time, it could save time and and cost for when the transfer needs to happen. And you can bypass high network fees if the network is congested. So obviously, as with anything, there are there are caveats.
This is not a one-sizefits-all solution. It's just the flow that prioritizes the onboarding experience. If you're making an NFT creation platform like OpenC where you need your users to be registered as the creators of the asset, then you might not be able to get around having your users do the minting call. But for use cases like token gating or if you're a platform of your sorry or if you're a platform or a DAO that's using NFTs to establish a relationship with your end users then often times it may not matter where or even how the minting is done. So um just to recap expecting end users to do minting is likely going to hurt the adoption of your app.
The best marketing in the world is not going to help if you're trying to launch something for free or for fiat money and you expect users to have crypto in their wallets just to pay for gas. If you're representing a brand, an established community, or trying to engage with a web 2 audience, very often it makes sense to mint the asset your yourself beforehand with a wallet you own. And remember, everything is written to chain and fully auditable. Uh there's no funny business going on here. It doesn't make your solution somehow less pure.
Cool. So that was the example of uh us minting uh two scenarios client side server side. Uh next I'll get into a little bit um about our solution and what we do. So we're magic. We were previously called Fortmatic.
Uh we've been in the space since 2018. You might have noticed the formatic wallet option on a lot of DAPs you use like OpenC. Um, we have a new wallet widget product for you guys to try. We think of it as an all-in-one uh all-in-one wallet solution to make sure your users have everything they need to start using your your DAP. Um, you can check us out magic.
link. Um, docs link are linked directly uh on the front page. Um, our solution works out of the box on any browser. So, there's no need to install any like Chrome extensions or mobile apps to get started. It's it's web native.
Um, our can our key management is served out of an iframe embedded in your app. So, it it integrates pretty seamlessly into into whatever experience you're you're you're looking to offer. Basically, um, users can sign in with email without having to manage seed phrases or even passwords. So, very much like a web two login experience. We also offer major wallet providers uh on our modal like you see MetaMask, uh, Coinbase wallet, wallet connect, rainbow.
Um, so your users get all of those wallets uh connections out of the box as well. We have fiat on-ramp built right into the modal that wraps Sardine which gives your users options to buy crypto from right inside our wallet widget either with a credit card or with like bank transfers, Apple Pay, Google Pay, so on and so forth. Um, yeah. And next, uh, here's a quick demo we threw together, uh, of what your NFT marketplace might look like. All right, the the the Mattel creations earlier, I wanted to show this link.
Um, this is what they ended up delivering. It's really cool. Um, a lot of care was put into sort of the these assets and I think the distribution model makes a lot of sense, too. So, yeah, back to the NFT template. Uh, this is the NFT DAP template.
Your app might look like this. Um, and so this template is available on on GitHub. If you go to magic-nft-template.verell.app, it might help out in uh in your hackathon, whatever you're building this week.
Um, yeah, you can clone the clone the repo and and it has our solution, our wallet onboarding solution baked right in. So your users will uh be taken to a sign up and login experience like this. So it's very much web two. I can log in with my email or any one of these wallet providers and I'm connected. No Chrome extensions.
Works on any browser. Works on mobile all over the place. We also have mobile SDKs for like mobile native solutions as well. So I was alluding earlier to um a flow where you expect your users to do the minting. This is likely what's going to happen when you expect your users to do the minting.
You have a new user. They come in. They don't have any ETH. you you try to mint and it says you don't have any balance. And at this point, if you're using Magic or uh MetaMask, you the wallet provider might have fiat on-ramp solution uh built right in as as we do.
Um but very often uh they might not even uh you will have to give them instructions on how to get the minting uh money into their wallet to begin with. And at that point, you would have lost most of them. Um, and so really this is the the problem that we're looking to solve to really just give users the tools to be able to um get as much adoption into web 3 as possible. And we we believe that it begins very much at the user onboarding step, the wallet connection step. So offering that sort of all-in-one experience with seamless uh key management is what we're setting out to do as a company.
Okay. Um we also offer really branded experiences. You can customize the widget um however you want. Um no cryp crypto payment built right in, no KYC, etc., etc.
Um and and this this this is the Mattel branded experience. Um we offer white glove solutions obviously to enterprises. It's kind of how we are trying to make money. Um and so you can get your onboarding experience looking like this. Um obviously for the right price, integrates directly uh into your app as well.
um completely non non-intrusive web two- like experience that can capture the rest of the internet basically. Um and here's some conversion numbers um compared to uh the the original solution that uh Mattel was using for for onboarding. Um it's really a no-brainer if everybody can kind of sign in and uh make a crypto wallet with their email and they don't have to worry about minting fees, etc., etc. Yep.
Okay. And so just to recap, uh NFTs uh enable secure ownership and token gating can monetize digital content. It's important to do it right. Current web 3 experiences are terrible for user adoption for a variety of reasons. Wallet onboarding and high gas prices are challenges to NFT adoption and solutions like magic exist to make onboarding users easier.
um as well as the the things I talked about earlier uh regarding uh implementing token getting properly uh as well as maybe thinking about who does the minting and and when. So yeah, uh we're here all of East Denver. Uh and as as I alluded to earlier, we have a brand deal with Mattel. Uh we're in the gaming section in the um in the sport castle. Um next, yes, our booth is located next to the coffee stations.
We have some Hot Wheels that you can stop by if you're a builder uh and you sign up for like the builder package. Uh you can race some Hot Wheels and uh uh get some cars. Um which I think is super fun. All right, that's it. That's it for my time.
Yeah, any questions? Yes. Uh we h we're iOS, Android, React Native, Flutter. Yeah. Uh magic.
Magic.link/doccks to get you started. Yes. With the email sign up, how does key management work? Right.
So, we're a hot wallet. Um so our key management system our IDP uh generates the keys we store the encrypted keys and then we store access credentials on Amazon KMS and uh so we don't we don't see the key sort of plain text but we are mapping users to emails in our system if that makes sense. Um, how are you guys covering uh the gas fees? Are you guys actually doing that right now? Um, having the We don't we don't cover gas fees.
The thing I was saying earlier, having a wallet where you can input your wallet with a reserve of with um some ETH and then it's able to cover the or your users. Uh no, so what I was alluding to earlier, right? So right now this is that this template is a solution where you're expecting your users to pay gas fees with our solution. There is no way around this. I know there are solutions that claim to like subsidize gas fee, but what I was alluding to earlier is you can get around the having your users pay gas by minting the assets yourself, right?
And this way, as far as your end user is concerned, they log in, you make a new wallet for them, and all that wallet does is receive the asset. You send it to them. And so, if you do that, it's not like it's you compare that with a profit model. You can charge them fiat ahead of time, but it's it's like transactions that they understand. Like, I put my credit card in, I paid $20, it made me an asset, I got the asset, right?
So, so that could mean that could mean make or break basically the user onboarding experience. Um, are you looking into account abstraction and potentially having the key stored in the browser be assigner for something that can then have a pay master pay for something like mint transactions? That is interesting. I think where our we're focused is obviously like MPC is the holy grail in terms of how you do delegated key management but uh we have our own posture with which regards like which involves progressively sharding the ways that the keys are uh sort of stored centralized in our system as a as as far as like account abstraction goes. We are looking at we're coming at it from a different perspective too.
So like uh we have kind of this enterprise go to market solution where it's kind kind of like the Twilio model where we work with a lot of uh we we give white glove service to a lot lot of like large enterprises um to to be able to offer those like hands-on solutions that don't quite necessarily scale. So I think the answer is like for the right price, yeah, we can do it. Thank you. Um my question is uh do you think there will be ways for apps to help users graduate to a fully self-custodied solution with the keys even if they start with your semi-custodied one or do you expect this to be sufficient for most use cases? Um, so as far as your app is concerned, it's important for you to build in the the the transfer functionality of the assets out so that if your users want to, let's say they don't trust a hot wallet anymore, that there's a way for them to to to divest out of the system, we offer ways for users to export the keys out of our solution, right?
But I think a more robust approach is building in like transfer functionality like this is uh an asset you got with our system. This is how you transfer to a different uh address. And then it doesn't it wouldn't matter how your users get that cold wallet at that point. Yeah. All right.
That's my time. Thanks.
Automatic transcript — names and jargon may be misspelled.