Building Mobile First Dapps with Variance

All right. We're live. Happy New Year everybody. Welcome to what's going to be another great year of DevNTell. So if you didn't know and it's your first time joining us in the new year in Developer DAO or watching DevNTell, DevNTell is a thirty-minute window for builders to showcase something they're passionate about or have been building in Web3. This could be an awesome project you've been working on, demonstrating new test best practices, smart contracts, automation goodies, unique startups, what have you. Basically, it's your opportunity to show your hard work to your peers in the Developer DAO and in Web3. And today, I am ecstatic to start off the new year with Peter and Godwin, who are going to be giving us an overview of mobile development with Flutter and Variance. Welcome, gang. Happy to have you on.

Thank you, Narb.

Thank you, Narb.

My pleasure, my pleasure. I guess before we get into the content of the presentation, did you both want to give a brief introduction about yourselves, just in case folks aren't familiar?

Yeah, sure. Well, let me make this larger. Okay. All right. So my name is Peter Anyaogu. I'm a full-stack developer and I'm from Nigeria. I came into the Web3 space literally coming in as a smart contract developer late 2021, early 2022, and that was during one Chainlink hackathon and I came into Web3 via the route of a hackathon, actually started building and loving Web3 because I participated in my first hackathon and I loved it. So ever since then, I've participated in a lot of, couple of bootcamps and learned a couple of programs. So currently at Variance, I'm mostly into developing the Variance SDK as well as the smart contract. And, yeah, Jeffy, why don't you like...

Yeah, sure. So hi, everyone. My name is Godwin Alexander Ekainu. I'm a mobile app developer and technical writer. So I started as a mobile app developer about three years ago and ever since then, I've also had a mix of careers with technical writing because that was one way I also decided to give back to the community. Yeah, so and then more recently, I got into a hackathon with Peter right here and it has been great. The experience has been nice and, yeah, I mean, ever since then, we decided to like come together and build a product to help mobile app developers. And so, yeah, here we are. So I basically major with Flutter, Dart. I also can write native, Swift. Yeah, so these are my stack and it's nice to be here.

It's awesome to have you both here. And yeah, it'll be a great perspective to see mobile development and Web3 kind of come together. So, yeah, let's get right into it.

Okay. Thanks. So basically in this series, we'll be talking about four important things. So we'll go a little bit into the current landscape of account abstraction today, and we'll take a look at the teams that are currently building towards account abstraction. And also we look at... I think Peter may have frozen. Yeah, I think the problem is true. We'll also take a look at the mobile-first approach. We'll be looking at the untapped vertical of mobile Web3, like AA Web-based products, with the current AA Web-based product and the current mobile-based product. And then we'll see the differences between the both. And we also take a look at how Variance aims at bringing in more of these web-based products into the mobile-based ecosystem. And then the third thing we'll be talking about is why Variance? Why are we building Variance? What is the motive behind it and what are we trying to solve? Then the fourth thing would be, yeah, to show how you can adapt Variance SDK into your mobile applications. So account abstraction today, basically there are several teams that are currently in the account abstraction space, and these are just a couple of them, the ones I could find. And...

Sorry, sorry, Peter. I think your connection is a bit weak. Your video is stuck and then if you have moved forward in the slides, it's not showing at the moment.

Yeah, could you like reload or something?

Uh, let me see. I can't see the video on the screen yet, even though I've shared it. Let's try again. Uh, I gotta reshare my screen. Okay. Let me just stop sharing.

Maybe, maybe, if you want you can turn off the video while turn off your video while you're sharing the screen. Maybe it'll save some bandwidth.

Okay. Presentation is back on. You're still at the four things to discuss slide.

Okay. So maybe in case, um, if you didn't catch me with what I said during the four things to discuss, I'll just run through it quickly. We'll talk about account abstraction and the landscape today. We'll also look at the mobile-first approach and we look at we compare the web-based product and the mobile-based product that currently existing. And we look at what mobile-first approach is. And then we'll also talk about why we're building Variance and what we are doing at Variance. And then the last one will be showing you how you can integrate Variance into your mobile applications.

Uh, yeah, the screen still or the slide still hasn't transitioned. Um, I think we're having some network issues here. Sorry. Maybe Godwin, did you maybe want to do the, yeah, like share screen, yeah.

Uh, not sure. I think he is the one with the presentation. So I might not be able to do it.

Yeah, let me start over.

It's all good, gang. There's always going to be technical difficulties. This is our first DevNTell of the year, so to be expected.

Yeah. Okay. I think this is better now, right?

Uh, I can't see the video on the screen yet, even though I've shared it. So is Godwin going to be the one sharing the the presentation, or are you just working on sending him the the deck at the moment?

Yeah, I'm trying to send him the link.

Okay. Gotcha. I guess while we wait for Peter to send the link, I guess Godwin, did you want to give like a brief overview of what Variance is, while we wait for the while we wait for the link to kind of come your way?

Yeah, so Variance is, as a whole, it's it's an open-source project, first off. And it's aimed towards kind of like helping in bridge the space between mobile app mobile apps and the Web3. In a space where there is a lot of web apps being built, like in Web3 space, one thing that I've really noticed is a lot of the products being created or built somehow are like, a lot of them are based on the web. And then from research, from like data sets, we find out that most of the traffic on currently that is being pulled is from mobile apps. And then, I mean, why would this like the major flow of, you know, this traffic coming from mobile app and then you still have a lot of it on on a lot of Web3 products on the web. And so we thought that it would be it would be good to like build something that can help first off, bridge that gap, you know, and then help do these things easily. So that is why we came up with Variance and built an SDK that can help developers. And why we chose Flutter was because Flutter itself is a cross-platform tool. And so it helps to like build mobile apps across different platforms without writing code more than once, you know. So you write one and then you can share it across all platforms. And so this is the reason why we chose it because, firstly, it is near to it is near to like for every starter, let's say you came into the development space and then you want to learn, this is a very good place and an entry point, a very good entry point for you. So once you get into it and you start with that, I mean, you can start building mobile apps while then you think of other things that you can do. So this is the reason why we picked Flutter because you can help you build mobile apps faster and then we decided to create Variance to to integrate Web3 into Flutter. And, yeah, so this is just the overview of Variance and exactly why it was created.

Excellent. Yeah, I love any type of tooling that makes the developer's life an easier easier way forward. But I guess Peter, have we gotten past the issue of sending the link to Godwin or...

Yeah, I've given the slides over to Godwin, so...

Okay. Excellent.

I'm kind of still trying to figure out how to like present it here. So it might take some seconds. So, yes, so once you have the presentation up, what you want to do is there's a present button right at the bottom of the of the screen. So if you click that, it'll give you the option to share a window or share your entire screen. Um, that is essentially how you will how you'll share the presentation. Yeah, like it's it's on Figma. So like I'm trying to like see how I can get a wider view for it. So when I share my screen, it'll be like, you know. So one second, please. So for sure.

And while Godwin is getting the presentation up, I guess Peter, are you how I guess how did you and Godwin kind of meet and team up in the hackathon? Was it by chance that both of you came across each other or is there some friendship history behind here as well?

Okay. Me and Godwin, we've actually known each other for about four years now. We went to the same university and we also finished together. So basically we've been in the same department for a long time, but we weren't that much close until last year, 2023. Um, I met Godwin and, you know, we decided to work on a project together, just like one hackathon project, like just hack something together. And, yeah, we worked on it and that was basically how we became closer and then we decided to like pick one of our hackathon projects, which was formally Variance. Um, we built Passkey Safe during the ETHGlobal Superhack and then we picked it out of all the projects we've done together and we said we want to work on this together and want to keep pushing it forward and make it available.

That's awesome. And yeah, that's that's great. It's sometimes that's just how great products kind of come to be. It's a bunch of friends come together and then they're like, "Oh, let's let's solve this problem." And yeah, it ends up being gold after the fact. It looks like Godwin has shared his screen. So right now it'll be sharing our platform and yes, we see Canva now.

So we can go like, um, I guess you can see my screen right now? Yes. We see presentation mode. Yep. This is good. Yep. Okay. Um, I think we've passed this place, have we? Peter? Yeah, we are at yeah, we've passed this one too, I guess. Peter, are you there? We've passed this side, right? Yeah.

Probably should start on maybe I'll just go a bit over account abstraction.

Okay. So like I had said, building mobile apps or products a lot has been like really heavy on the web. And then from a research, from like data sets, we find out that a lot of the traffic today being generated from mobile apps. And then, I mean, why would these like the major flow of, you know, this traffic coming from mobile app and then you still have a lot of it on on a lot of Web3 products on the web. And so we thought that it would be it would be good to like build something that can help first off, bridge that gap, you know, and then help do these things easily. So that is why we came up with Variance. And then we decided to like, okay, let's resolve these this issue. So the mobile-first approach, so we decided to go with the mobile-first approach. This is because a lot of stuff has been on the web and we feel that going on on the mobile should be something that should be looked looked into. We need to like bridge that gap between Web3 and the space. And so we decided to create Variance. And this is exactly Variance is exactly focused on mobile to integrate Web3 and to help developers, the experience of other Web3 users and also promote or like enhance the popularity of Web3 for the next one billion or so.

Okay. Here we are again talking about the untapped vertical. So when I was explaining about Variance and and then Web3 on solely based on on the web, I also talked about a lot of the traffic today being generated from mobile apps. And then, so mobile application usage accounts for up to 88% of digital media time. Like every person right now, like out of like 100, about 88% people like have mobile phones, which they use every day and there is more than 6.3 billion smartphone users. So why don't we tap into this place? I mean, Web3 is still not really still kind of like a relatively new and then we're kind of like stuck on Web3. And I think moving into this space where there is a lot of users would be would benefit the Web3 as a whole. And, you know, so this is this is one of the reason why we decided to go or build this thing on Variance, so we can help also foster the development and the popularity of Web3. Intersection of web and mobile. We can see right here that a lot of the mobile app are very few on the web. Like 99% of the apps that on Web3 are all like on on the web. And judging by the current situation, not a lot of people use the web so much, especially here in in Africa where a lot of the users are are mobile app mobile app users. So it will make more sense to like have these probably replicas of these applications right here on on mobile the mobile space just to, yeah, I think this will also go a long way to like promote Web3.

So I'll be moving to the next slide. Sorry, I will have to move fast because I think we are we are short of time. No, don't worry about it. No, don't worry about it. Just go through it regularly. Yeah. So our solution, okay. All right. So our solution, building the the protocol or sorry, the SDK, we thought of like introducing the new ERC-4337. This is because of its new features and the fact that you can do some transactions and and all. We believe that with 4337 integrated, we can unlock limitless user experience with smart contract wallets even for the next one billion.

We decided to also use secp256k1 multi-signature schemes, raising why we decided to use some sort of security where you can and currently if you notice it's like becoming a trend right now, a lot of popular applications are beginning to move from just to normal passwords and all to using passkeys. And this is one of the reasons why we decide so you can sign transactions with just passkeys which you can create from your phone's biometrics. With your phone's biometric or probably some file, you can have passkeys created to sign any transaction that you you need to do on chain. And yeah, so this is we believe that this is way more secure than having your traditional private key saved or all in one place and so on like that. But here you have it instead of having the private key of maybe your seed phrase being kept somewhere or so, you can this is way more easier for you and because it is available whenever and then if you lose it, you can always recover. And then while building Variance, we decided to go the modular way and then we saw in a network that like really agreed with what we were building and was Safe Protocol. And so we also integrated Safe Protocol to like leverage their modular architecture for Safe Protocol with all its benefits.

Now moving on to the next presentation. So why Variance? I think I have talked more on this, so maybe I should go over it again. So Variance is here to help to bring the Web3 experience to mobile app. We intend to not stop at building on Flutter, we also intend to also build this package, you know, on other other languages like in Java and so you could also build even native applications other than you can also have options other than cross-platform like Flutter. So Variance is one step forward, migrating Web3 to mobile. Variance offers a suite of tools that aid developers in crafting mobile-first dApps, implementing account abstraction and building smart-wallets with minimal effort. As we go through, I'll show you how to like build a simple smart wallet like you should be done creating it. So next steps, we are mobile Variance is mobile-first. And we focus on delivering a seamless mobile experience. Our project core values to make dApps accessible and user-friendly on smartphones, aligning with increasing trend of mobile usage. Minimal effort tools that empower developers to create mobile-native self-custody wallets and applications with ease. Minimal effort for mobile app for Flutter developers, there are not a lot of these tools that are like readily available for you to use. And then we decided to like bring all these together packed into one place and more so like a repository for you to be able to like for so you can like you don't need to start going around and trying to search for this and that to be able to build a mobile app on on on Flutter. And so, yeah, talking about security, enhanced security options for users by leveraging hardware-based signatures, which is passkeys which I talked about. Secure storage for Android, encrypted shared preferences or iOS key-to-chain.

This this particular section, this is where we implemented secure storage. It's more like a mixin that allows users to be able to like after they create their account, their passkeys can be saved right there on their phone and then they can always recover the account if perhaps they lost it also. So, yeah. Moving on, the plugin approach, and we intend to through the help of Safe Protocol, we intend to also add more stuff, features to Variance. I think I could pass this on to Peter to like explain more on this particular plugin approach. So over to you, Peter.

Oh, yeah. Thanks. Thanks, Godwin. Thank you so much. So plugin approach from the way we designed the Variance SDK, it's it's kind of like plugin from ground up. Like most of the things, most of the interactions you make there are you're making it from separate modules that are independent from the smart wallet suite itself. So most of the things that we delegated to plugins just so we can be able to extend the SDK, we want to like be able to extend what the SDK can do. So basically our idea of plugins is that you have this smart wallet development tool and you want to build a smart wallet with it. There are definitely things that you want to do with your smart wallet. You might want to use it to trade, you want to swap your tokens, you want to register Lens profile or you want to receive push notifications and all the rest. And you want to also probably connect to other dApps on the web. So the plugin approach is more like having these separate applications or separate packages that are not coupled together with the SDK, but you can just pull it off from any GitHub repository or from pub.dev and then you can bring it in into the Variance SDK and then it can be able to handle that particular function. So let's say Uniswap plugin. The Uniswap plugin can be developed specifically and then it can help handle swap stuff. So if you want to build a swap app, for example, you want to build an app based on Uniswap protocol, you already have this Uniswap plugin somewhere, so you just go get the plugin and then you put it in and then you have built what you want to build. You don't need to like start architecting from scratch or you want to build something that is based on DeFi and probably you want to leverage a couple of products already out there and then you can, you know, go pull those plugins and then bring it into the SDK and yeah, you've like coupled everything together. So that's our idea of plugins.

Just a question on the plugins. Um, are these plugins already built or or will people have to go build build these plugins?

No, the plugins are not yet built. It's something that we've not yet standardized on how we want these plugins to be made in order to work efficiently with our SDK. So we might not be the one to do this. It might be anybody, it can be anyone out there who wants to like build something they want to be working with on their mobile app and then they can put it out there and any other person can as well use it. Gotcha. Yeah, sorry. I think you were going to the next slide. Yeah, so moving on already. So let's see. Yeah. Can you I moved on already? Hope it's not hanging. If there's an issue, could you notify me please? No, we're good.

Okay. So first off, the smart wallet. The smart wallet class is basically one of the largest classes in the Variance stack. And so if you look at this, with the smart wallet, you'll be able to you should be able to construct a smart wallet or build a certain dApp that you would want. If we look at the constructor, we can see we could see that the smart wallet requires the chain, requires a multi-signer interface, requires a bundle, bundler provider piece, and the bundler for the bundler we have I think about two types. We have the Ethereum bundler and also have the one for the 4337 bundler. It also requires a JSON-RPC provider, which supports Method, which helps you validate to check that the chain ID you entered or provided is correct. And then we also have plugins. We decided to make this this plugin so you could also, you know, like add add and remove whichever ones you do not want. So the next one, yeah, we'll be moving to it's chain. And then the chain class here, the reason why we have this here is because um for you to be able to build is that you have a chain and with the chain class you can also integrate your very own chain um or perhaps use the ones the predefined chains that we already have in the SDK.

We also have the multi-signer interface. The multi-signer interface, um, if implemented, um, is supposed to help help you with things like you getting of your address and sign-off from the elliptic curve, um, also help you return personal signatures. So, yeah, um, a little bit more on the multi-signer interface, it's more like one single interface to support multiple signature schemes. So you you have this single interface and then you can implement multiple depending on how you want your transactions to be signed. But us, we have implemented passkey signatures and HD wallet like normal private keys. So you can actually implement yours. So if you probably want to use another signature scheme or you want to sign your transactions differently, you just clone the you inherit the you implement the multi-signer interface and you implement the method, these three methods and basically you're good to go.

So, yeah, um, a little bit more on the bundler provider base, Peter, could you also throw a bit on this too? Okay. So I'll just make it quick. The bundler provider, this is an abstract class. The bundler provider is kind of like, um, it just abstract all the all the, um, all the methods or the operations you need to interact with for a bundler. So I think there are just five, estimate user operation, get user operation hash, the user operation receipt, send user operation, and yeah, get user operation gas. I think there are just five. So this is just what the bundler provider does, just provides the interface for those five functions you can interact with any bundler.

Okay. Thank you, Peter. So, yeah, okay. So create simple account. So this is how you create a simple account. Currently for our SDK, we have not really implemented Safe Protocol, so you basically use the simple account for now until we integrate with the Safe Protocol. So the create simple account is very straightforward. You provide a salt and then if you're using a HD signer, you provide the index of the account you're signing the transaction with. And then all it all it does is just to call the account factory with just calls the account factory and returns the wallet address for the account you want to deploy. It uses counterfactual deployment, so it doesn't actually deploy anything on-chain. It just gets the address for you based on the parameters you enter.

And this is um this is the implementation of the passkeys account. So if you want to create a simple passkey account that you want to work with um you want to work with your mobile device for using your biometrics to sign transactions, this is how you do it. You just create a simple passkey account. So the passkey pair is returned from um the passkey signer when you call the register function to register your passkey for your account. So you provide your name and register the passkey, so it returns a PKP and then you can now use the PKP to create a passkey account. Basically this is um just a simple passkey account and there are multiple implementations of passkeys on-chain. So this is just one of it. Um, uses the credential ID as a hex and then the public keys and then a salt. So this is just how you create a passkey account with our SDK.

So if you want to get retrieve the account address of your passkey account or your normal simple account, you just call the get simple account address and then you you pass in the signer or you pass in the PKP and the salt as well. So this will return the the account address associated with the account. Basically, um, at the point of creating the passkey account or your normal account, you can opt into save those credentials on on your device. So next time you can just load load load them from the device and call this function to get the addresses of your account. So yeah. Okay. Let's go to the next slide. Peter, are you still there? I can hear you. Yeah, could you go to the next slide? Um, he's asking to go to the next slide. Yeah. Okay. So this is the register function I was talking about if you want to register the passkey for you want to register your passkey for your account, you just call the register function. I think it's pretty straightforward. Just pass in your name, pass in the name and then you can either require user verification. Um, I think require user verification is like there in the WebAuthn library that requires whether the person should be physically present with the device in order to verify the registration. That's it'll pop up your fingerprint reader and then you thumbprint you you put on put on your biometrics and then you register it. If I think this um should be low-level API, I guess.

I think we've lost Godwin and his shared screen, unfortunately. Yeah. Um, well basically, um, I think um you've you've basically seen how you can create a smart account with the Variance SDK and you've seen how simple it is. So it's just few lines of code and then you can create a smart account.

You can either create a passkey account or a simple account. So those are just few lines of code and then you've created a smart account. And then, although that there are more functions there like sending a transaction, sending a user operation and all the rest, which um, I think there is not enough time to cover, but I believe that um, with a few presentations with a few demos behind, you can see the the simplicity of how we make creating smart accounts are so you can create smart accounts with just few lines of code and then you're good to go. You don't need to know all those intricacies like bundlers, paymasters, you don't need to like do them from scratch, like just provide the values. And one thing else is that Variance is agnostic. It's not like we are tied to one implementation or sort. So the fact that we're using Safe is because we want to adopt the modular approach. But definitely I think we we design this in such a way that you can extend literally most things. So you can basically override and use your own flavor in terms of things you don't um you're not really okay with. So that's basically Variance.

That's really cool. So essentially you've made both of you have made a easy easy path for mobile developers to get started with Web3 essentially. Um, and I guess for the mobile developers who are watching this or aspiring mobile developers, how can people start using Variance to to build Web3 mobile native apps today?

Okay. So the fastest way to get started with Variance is you can head on to pub.dev/variance_dart. Um, yeah, you go to the packages and then or you can just type in pub.dev variance. I think we'll be the first to come up. So you can install the package and then you can get started. So if you've not built a mobile app before, I think the first thing I would suggest is to go through the if you've not built a mobile app before with Flutter, I think the first thing I'll suggest is to read the Flutter documentation. It's like pretty straightforward and then the code labs there is like gives you like an an hour or two um great intro on how to get started with building a mobile app. And then with Variance, you can easily start with Web3 immediately.

Excellent. And we'll be sure to link all those resources in the YouTube description so you'll have an easy way to access all of that. We do have a question from the crowd just before we end things off here. Joel asks, "Which blockchains are currently supported by the SDK? Are there any plans to add more blockchains that are currently supported in the future?"

Um, for the SDK, I think most EVM blockchains are supported. If you don't find any of the blockchain you're looking for in our in the list of chains for the SDK, you can like create it yourself. Just if just make sure that entry point has been deployed on the blockchain and and you have a bundler and yes you have a bundler URL and then you're good to go. Just those two things like you populate the chains chain configuration and yeah, you're good to go.

Excellent. And on that note, if people have questions for you or or have questions about how to use Variance, what's the best way to reach out to yourself Peter and Godwin? If you have any question for Variance, you could DM me. You can send me a DM on Twitter or you could send send us an email at teams@variance.space. Excellent. And yeah, we're going to be looking forward to all the great mobile native apps that people are going to be building with Variance. Thank you so much for coming on DevNTell today, kicking us off in the new year with new challenges to build better mobile native apps with Web3 tech. Excellent, gang. But before everybody leaves today, I want to share the QR code. Sorry for covering your head there, Godwin, but I want to share the QR code here for everybody to scan to be able to claim your NFT for being an attendee today on DevNTell.

So what you want to do is grab your regular QR code scanner, scan this code, fill out the form, and you'll be airdropped an NFT for being an attendee today on DevNTell within the next couple of days. You'll have one hour and a half from this moment on to be able to claim, so you'll want to definitely hop on and fill out that form. But with that, I just want to wish everybody a very happy Friday, happy weekend. And again, thank you Peter and Godwin for coming on and sharing Variance with us.

Okay. All right everybody, we'll catch you back here on DevNTell next week. Until next time. Thank you. My pleasure. Happy New Year. Happy New Year. Cheers.