WalletConnect 🛠️ Mobile-First: Building Web3 Mobile dapps with WalletConnect Modal - Tom Terrado

OK. Thank you to everyone who came. My name is Tom, and today we're going to talk about the mobile first approach. This workshop and overview is dedicated to why it is worth developing mobile solutions, as well as a short example of creating a Web3 creating a Web3 mobile dApp through WalletConnect. Perfectly.

So, first let me introduce myself: my name is Tom. I lead the development department at WalletConnect, and before that I worked as a mobile engineer for several years. Hence my interest in more active mobile development at WalletConnect. Perfectly. For those who are not very familiar with WalletConnect: in simple terms, it is a protocol that allows two parties to establish a connection.

In our space, these two sides are dApps and wallets. We are encryption-based, trustless, open-source, and blockchain-agnostic. We started a few years ago with one QR years ago with one QR code. And now we are supported by hundreds of wallets, and many dApps use us “ use us “ under the hood”. So we are trying to facilitate the connection between the two parties, i.

e. wallets and dApps. Maybe you know us because of this. I want to briefly mention what we've been working on recently and how it relates to our hypothesis about the mobile direction. Perfectly.

To explain better: WalletConnect is more than just a QR code signing protocol. We are often asked: is WalletConnect a wallet? The answer is no. We are not a wallet. We are an infrastructure for wallets and dApps, a kind of communication protocol.

This is what we've been up to lately . Web3 Wallet is what many wallets use “under the hood.” Most of the 300-400 wallets we provide use this. This is due to network switching and similar features that you may have seen recently. Web3Modal is what we want to talk about today, especially in the context of dApps.

Every time you saw the “Connect Wallet” button and QR code, it was the same core product we started with. So, there's a lot going on in this area. And I think you might have noticed lately that communications have started to emerge in Web3 . So, the other day I gave a talk about mobile wallets, and it's quite interesting because we started in 2017-2018, specifically with a wallet called Toshi, also known as Coinbase Wallet. They were actually messaging as early as 4 years ago.

Then they stopped it, and now it seems like the floodgates are opening again. That 's why we're also working on a Web3 inbox. Web3 inbox is push Web3 inbox is push notifications, messages, and chat. These are the product suites we are working on we are working on , and today I want to focus on Web3 modal. Class.

So, Web3 modal modal. Class. So, Web3 modal is probably an alpha is probably an alpha version of what lies ahead . This looks completely different from what we have now. This is the direction we are moving in.

You may be familiar with connecting to Metamask, Coinbase, and any other of your favorite wallets. This is what Web3 modal focuses on. Almost every wallet in existence, whether cloud-based, smart contract-based, web- smart contract-based, web- based, or mobile—they are all available via the Web3 modal today. We are going to expand it by adding other features and a new interface. Today I want to talk about how we're going to demo a light version to show how quickly you can get started with mobile development now.

Class. Since we're all here for the hackathon and the prizes, I think that's what we're all here for . Of course, and to learn. So, thank you for being here. This weekend we will be giving away cash prizes worth about 20 thousand.

The first of these concerns mobile devices. This is what I'm talking about. We have documentation for all of this. We have six thousand on Web3 mobile. If you use React Native, Flutter, Swift, or Kotlin to build a dApp, we will provide prizes for these innovations.

We are holding this track for the first time, and the prize fund is six thousand. So, if you are interested in working with ZK- working with ZK- proofs, zk-snarks, and then using Wallet Connect as a means of connectivity, there are many great ZK-EVM blockchain systems out there, so feel free to use them. Another topic you may have seen is 6551, which is about accounts tied to tokens, and this is directly related to the realm of wallets. If we talk about wallets now, everyone is talking about AA account abstraction, and that's great. This is another way to attract users.

Personally, I'm also interested in standard 6551— interested in standard 6551— accounts tied to tokens. The point is that if you generate them from a token generate them from a token , you can, for example , you can, for example , buy CryptoPunk or something else. Then it's created as an NFT- a created as an NFT- a wallet tied to a token that you can use to identify yourself: like, this punk now has... I don't know, maybe with Loot it looks more likely. It's a kind of composite way of building your inventory and identity, so I'm really looking forward to this authentication.

This is a very interesting technology that partners like Instagram have used to verify: "I am 0x123: connect, sign, and authenticate." So, this is a very simple API and I highly recommend you try it. And the last one is for try it. And the last one is for those who are not developers here. We're doing a design track because our cloud application looks a bit bland.

There is still a lot of room for improvement there. So feel free to fire up Figma and try to recreate the design of user flows—whether it’s for mobile innovation or cloud solutions. We also have a prize pool for those prize pool for those who want to work on Web3 to work on Web3 mode or web mode or web interfaces. You can get into the prize pool of about $200. That's it.

I would like to express my opinion on mobile technology mobile technology . Perhaps it's worth talking about the wallet-DAP paradigm first. Wallet Connect has the great pleasure of communicating with every wallet and every DAP app on the market. So yes, we communicate with them every day. We need to understand what problems they face.

I don't know how much you've talked to wallet developers at this ECC, but many of them say that the main problem is the wallets themselves. Wallets are a problem for gateways and things like that. And they say that there are actually three camps regarding the future of mobile devices. There is strong pessimism, saying that wallets are not doing enough and are not innovating. Good.

If you want to choose this camp, we can stay there. There is another camp that believes that a super wallet will appear. This is related to the “fat wallet” thesis from A16Z, put forward some time ago, which goes something like this: “There will be a few wallets that will simply become successful and open the way for us to innovate.” And the third camp suggests that there could be highly specialized wallets focused solely on chats, NFTs, and the like. So, there are probably many other hypotheses about how wallets are being discussed right now.

But the thing is, we also need to focus on the DAP paradigm, because that's what we're here for. If people, excuse the expression, despise wallets for their imperfections, then there must be better use cases within the DAP paradigm, especially for mobile devices. So this is what I've been hearing a lot lately at ETHCC: of course, there are problems with wallets. We are fixing them with onboarding with onboarding , AA, and other cool features, but now we need to start focusing on the DAP paradigm. It's a kind of chicken and egg problem.

Here at WalletConnect and egg problem. Here at WalletConnect , we've been committed to mobile devices from the very beginning. We invented a way to connect a browser to a wallet 3–4 years ago, and now we want to expand this even further. How to make the " connect wallet" button as convenient as possible? How do we create truly better use cases?

That's our current view, and that's why we're focused on mobile, as well as multichain well as multichain technologies and other things. This is our position: we want to foster innovation and provide better development tools for both parties—both wallets and DAPs. Steeply. So, before I get into the demo and the development process. You could see it as Web3 Modal, and now we're experimenting a lot more .

This can be considered the full version. We are going to add social login, email authorization, and overall access to all your wallets. Um, Wagmei as an ethers library, we make it as modular as possible. For the sake of developers and hackathons, it's much easier to use our lite version. It's like a minimalist version that allows you to use your own libraries, your own tools, and integrate them.

This is a small difference small difference , just to make it clearer for you if you read our documentation. Class. Okay, I took this from a previous talk, where I talked about the wallet and dApp paradigm, and how onboarding is actually dApp wallets. Let's imagine that the left part is wallets and the right part is dApps, okay? We need to think about account abstraction , APIs, MPC, web , APIs, MPC, web authorization, and all these cool new things—that's great, we're moving in the right direction, but it definitely needs some work.

But we also have to think about dApp features, and that's where we're trying to add more tools, like how to read and write data financially through staking and all those cool ideas that you'll be working on this weekend. How can we innovate more in NFT or onboarding within this same paradigm? Maybe it's accounts tied to tokens tied to tokens , namespaces for identification, you know, ZK- you know, ZK- identification like in Sysmo, or ENS, Lens, ID, Disco— Sysmo, or ENS, Lens, ID, Disco— all these great things. Transaction simulation Transaction simulation , there was a copying error, but multichain is also something multichain is also something we really overlooked. I haven't seen many good multichain applications, both on the wallet and dApp side, and I think that's because we're still in the process of understanding it.

And now, with all this " now, with all this " L2 summer" or whatever you call it, or hundreds of L-layers, we really need to focus on this. That's why we try to encourage the development of these dApp features. Class. So, on the right is the GitHub is the GitHub repository of the example repository of the example that I created. This is the most relevant thing for the hackathon if you want to create a WalletConnect modal window for React Native.

Just for your information, I didn't ignore any native app developers . There is, uh, actually Kotlin. There's, uh, Swift, and there's, uh, Flutter. So I'm not trying to bypass anyone. But this is only for the simplest template solution.

And as a general development point, WalletConnect works with many SDKs, we even support Unity. And yes support Unity. And yes , this is only for React Native. React Native seems to be very popular in DAP and wallet frameworks. So this is just a note if you want to expand into this network.

So, it's just a repository on GitHub. I hope everything worked out. So, this is our one-line code. Of course, it's pretty, uh, simple, pretty fast. There are a few polyfills you need to add.

This works for React Native CLI. But also for Expo, we are currently thinking a lot about optimizing Expo for all React Native developers. As a mobile developer 3 years ago, I will say that Expo didn't exist back then. But now we are at the point where I can quickly build an application on React Native and a mobile platform. So I really believe in Expo and how we did it.

Maybe I'll show a quick demo before I go into this whole code snippet. I won't take any chances with a live demonstration over Wi-Fi. And while I love developing at Expo, I think it will take a little while to compile. So, on the left is the code that I'll be analyzing soon. And on the right—let's imagine this is a simulator.

If I come back here, the tutorial says the status is "not connected." Now we want to click the connect button. It's just a push function. Very simple. Do you see?

Yes simple. Do you see? Yes , you see. Yes, I will scale up the code a little later. So, actually, we just click the connect button.

This opens the interface. You can use your favorite wallets that you currently use. Probably MetaMask, Trust, or whatever else you have. Just click on it. Uh, and then I choose Trust Wallet.

Enter your code. whatever it is, your address is 0x6 and something there, redirect and voila. So, I think if we can get to a point where we can easily figure out how to design wallets in a very user-friendly way, that would be our goal. Um, and there are probably more there are probably more JS web developers than JS mobile developers or even native mobile developers, and that's true. But I want to pause and think: if in three years we're still using the MetaMask extension as a first step to dating a grandma, a child, or a friend, then we've probably done something wrong.

So I think we should strive to push harder and demand better ways to work with mobile devices. These are just my thoughts out loud. There are better ways to manage keys, like to manage keys, like using passkeys using passkeys , WebAuthn, Face ID, native account abstraction, and other things. There are really cool things happening in mobile, and I really want us to move in that direction, because, again, if in 3-5 years most of us are still signing up through MetaMask, we did something wrong. This is my personal opinion.

So, yes, it was a connection. It seems to have restarted. I'll just walk you through the whole process again. Perfectly. And now you are connected And now you are connected .

This is your address 0x. And now I can press the shutdown button. And after that, it's a standard pattern. For those working with these platforms, you can use, for example, ethers, viem or Wagmi. And there are other native libraries for Swift and Kotlin.

which can be used to better think through usage scenarios. This brings us back to the question: how do we create better use cases to work with this whole wallet and dApp paradigm? Steeply. So, that's all. I'm trying to be concise.

Coming back to this, this is Coming back to this, this is essentially a wrapper around the diagram I wanted to share. You simply import the WalletConnect modal window as a UI WalletConnect modal window as a UI component with the project ID. This is through a cloud service. This gives you better tracking, measurement, and understanding of your project. And on the dApp side, the function is exported, a modal window is opened, and certain data is introduced .

What is your dApp name, description, URL, and redirect. This is something I want to bring to the attention of mobile developers and everyone else. If you don't redirect your app, people will be very annoyed. So please do it. You really need to understand that using these schemes is extremely important schemes is extremely important .

Even many of the best wallets do n't do this very well. So please take care of such things. As you saw when Trust quickly redirected back—this is very important. So it's worth taking that into account. Steeply.

This is a further extension of the code. And the most important line the most important line is const open and use wallet connect modal core. We made it very simple and gave you the opportunity to think more about the provider and things like that. So the opening function, the disconnection function are performed through the provider, is connected is a logical value of the address. These are pretty basic things we've provided you with.

We really don't want to make mobile development difficult for anyone. The handling function is pretty straightforward and we just use a hook to open it. That's all. I'll quickly walk you through everything in VS Code format so you understand where what's going. This is pretty typical, if you know JS, then everything should be clear if you have already worked with React Native projects.

Get an ID by providing metadata about what you do. This is normal. Here I imported use wallet connect modal through the top hierarchy. I don't know if the internet is good here, but these are the other options you have options you have . I think I've got most of them out.

So, this is what we have. Perfectly. And then you just need to wrap that up and you can manage the rest of your application. So if you want navigation, do it as a top hierarchy. Next—a very simple style.

So yes, this is code. I wanted to sum it up, cool. Yes, once again , let's wrap this up. I encourage you to think about when people talk a lot about wallets, decentralized applications, and so on. I feel a negative mood on this issue.

They say wallets don't evolve. Let's try to understand how we can promote better DApp development on mobile devices so that people feel confident that these wallets have real benefits. It's like a chicken and egg problem, but I really advise you to try mobile development if you have the opportunity. And if not, feel free to innovate in other sectors during the hackathon. You can think about authentication, or, if you are a designer, about cloud solutions.

So, to sum up: we at WalletConnect believe that the future is built on mobile devices. Thanks, and here is some documentation. Steeply. Question. Yes.

Yes. Please. If you want to implement ZK-snarks for token-bound accounts in React Native— go for it. Yes. Yes.

Will this work for both prizes? Yes, this will work for both prizes. Yes. So if it's innovative enough, and you build, say, an application in React Native that also supports such accounts and so on. Technically, you can participate in two categories.

Of course. Yes. Logically. Thank you.