Video details

Web3 for Mass Adoption with Starknet and React Native | Sean Han & Janek Rarht | App.js Conf 2022

React Native

Why do we need the blockchain? For the first time ever, blockchain allows people to own a piece of the digital asset on the internet. Digital ownership and sovereignty have unlocked new use cases that will enable people to create, trade, and earn value online with unprecedented scale. With StarkNet.js, you can now build scalable web3 mobile dApps that allow your users to participate in this new digital economy.
Make sure to follow us on Twitter not to miss any news on the next edition of App.js Conf!


Thank you very much for the introduction. My name is Sean and I'll be speaking with Yaneck who will come shortly about scaling Web Three with Stark Net and React Native. I know this conference mostly was about React, so I'm glad to be speaking something about Web Three, which is what a lot of other people outside of this conference might be talking about. And I would like to thank Software Mansion for being such gracious hosts and also Software for giving us this opportunity to speak with you today. So a brief introduction about Yanik and I. We started the library, Stucknet JS. I also work on a lot of open source projects like Blockchain CLI, Coin CLI, and also built a lot of products around the architecture of Blockchain under the hood. So if you want to study or look at the technology a little bit more deeply, feel free to check out my Open Source repos or some of the websites that I've built. And Yanai, he's also a core contributor to Striking at JS. He's one of the lead engineers at Argent and they built Argent X, which is the first wallet on top of Stark Net, and he also contributes to Open Source and some of the libraries that we love, like next to us. So before I sort of really dig deep into it, I sort of want to give a broad overview of why should I even care about Web Three. You probably read about Web Three in the news on TV, but why should I even really care about this sort of new technology? So I think the fundamental thing about Web Three is you actually get ownership of digital assets, right? And you don't just get ownership, but you also own digital access and you can participate in the economy very permissionlessly. Nobody needs to give you permission for you to participate in this economy. And it's also extremely secure. So if there is some sort of vulnerability, usually it's only on the individual rather than the whole system. So I'll go into more detail about each of these topics, but I think for the first time we really had some sort of ownership on the internet. And I think that's extremely interesting. So in terms of ownership, you sort of own access on the Internet. It's proven with mathematics and cryptography, right? Like some of you guys use Git, so you might know that you have a public key and a private key. And basically in the Blockchain database you have your public address that says you own ten bitcoins, and then you have your private key to actually verify that you're actually the owner of some sort of digital value, right? So this really gives you personal ownership of digital assets on the Internet. So you don't actually need to go to a bank to open a bank account, right? You don't need to go through so much paperwork and read all the fine prints and you don't need a bank to tell you that you have $500 in the funds, right? You don't need to go to a bank to withdraw your money and then your value is also not owned by a company. Like Facebook doesn't own all of your data. And also if you're in World of Warcraft playing a game, it's like Blizzard that owns sort of value inside the ecosystem. You can't really bring that value outside and sort of trade with other games or other assets and also your value is not owned by the government also, right, a lot of these days government started printing money and then causes hyperinflation in this sort of ecosystem, all the code is open source and you can sort of read how the protocol works, so everything is very transparent. And also if you don't like it, you can sort of go your own way, which sort of segues really nicely to the next point, which is permissionless. So anyone can participate, anyone can launch their own sort of rules and their own tokens if they want to. And if they don't like the rules, they can always fork and create their own rules. They can also create unstoppable programs, like if they choose to censor someone, you can always build a new app that uses the same data because all the data is on the blockchain and the blockchain data is all shared with everyone. So if you don't like how the rules of one app or company, you can always build your own differently and then share the same data and you can also participate in securing the network, right? So anyone can sort of spin up a node or improve, take their own tokens to sort of secure the network and anyone can just participate very openly because everything's like on the internet. Which brings me to the next point, which is security, right? Even though you might read about scams and that does happen a lot. Like a lot of individuals get scammed in the ecosystem, but a lot of times those attacks are not on a big surface area, right? Like if you see like a data breach in a traditional database, a lot of people's private data get compromised or if they're in a bank and the bank gets hacked and a lot of people's funds are at stake, right? And then in sort of blockchain that's very secure, such that the tax surface area is usually only on the individual. So only individuals can get their funds compromised, but usually it doesn't leak out and it doesn't affect other users. And there's also incentive alignment, right? Like people work together to sort of secure the network and at the same time they get rewarded in some type of way. And the more people that participate in this ecosystem, the more secure the network becomes. So that's also a property. That's very good if you want something of value on the internet, right, you want it to be secure and you want it to be promotionless because you don't want someone to control and own the value that you inherently should be owning. So what are people doing with Web Three? What are some of the use cases that we sort of see? DFI and NFT are some of the bigger use cases, but I think not too many people really understand what's really happening. So defy is sort of like, you can do finance without all the middlemen, right? And with NFC, you can sort of own a unique digital property. So I'll go into more detail what these two things really mean. So what do I like in traditional finance? Maybe if you've had the experience of sending some funds overseas, like if I want to send funds from Canada to Poland, for example, I might have to go through many clearing houses, and then it might take a couple of days right now, and I might need to pay fees from multiple institutions. So with default, you don't really have that right, because you just have cold running in the blockchain that facilitates the trust. You don't need to trust all these institutions anymore. You just trust code that runs publicly on these, like, databases or blockchains. And then another example would be, like, if you want to exchange some sort of value, like, I want a USD for Canadian, or if I want to buy some sort of stock, I need to open a brokerage to do that. Well, you can do that in a decentralized fashion, where you can swap tokens just based on smart contracts, right? And then these contracts sort of facilitate the transfer between value of two parties and also even like, loans, right? You don't need to go to a bank to get a loan. You can sort of get loans based on some parameters in code, and then you can do it very permissionlessly. So this sort of gives you more efficiency, right? A lot of transparency, because a lot of this code is open source and you get a lot more security. And then when you actually program these programs on the blockchain, they call them smart contracts, you really feel that money and value becomes programmable. And then there's NFPs, right? Obviously there's a huge amount of hype in this ecosystem, but I think the really interesting use case here is digital artists can really earn income by themselves. Typically digital artists, they need to work as part of a big institution, like maybe a game company or a marketing agency. It's very hard for them to be independent on the Internet because people just like, command C, command B, right? But then, now you can actually cryptographically prove that you are the original artist of this piece of digital art, and that gives it a lot more value. And I think in terms of business models, it's also very good for creators, because if I create a piece of NFT and then I sell it to Yanek, and then Yannick sells it to someone else, I actually get secondary royalties. So in the program, if I say, like, on every secondary sale, I get 5%, then as my art piece gets traded, I get rewarded with every transaction. Right? So if you look at some of the very unfortunate artists, great artists in our era, like Van Gogh or for example, a lot of his early artworks are worth the most, but unfortunately, he's not able to capture a lot of that value as an artist, right? And this sort of really helps with that because with every secondary sale, the primary artist also gets rewarded with each secondary sale and also with digital assets like games as well, right? Like, you're not tied to one ecosystem. Like, maybe if I own a sword in a World of Warcraft, I can compose it and then use that same sword in another game because the ownership is really by me and it's not really by these game companies that own the assets and control it. So a lot of times, if you're looking at the NFC ecosystem, a lot of developers are trying to bring value and utility to those assets instead of the game company trying to own the entire IP. So in that case, in some way, culture becomes tokenized because if you create any creative piece and you're trying to get eyeballs on it, and then you can trade on that very efficiently. So, obviously, it comes without saying. There's a lot of challenges in the blockchain and crypto space. And I think the biggest one is like, the blockchain Tri Lama. Right? Typically, you can only pick two out of the three. And if you look at some of the most valuable blockchains, like Bitcoin and Ethereum, they typically choose decentralized and also secure, which in my opinion, makes a lot of sense because if you want value on the Internet, you probably want it to be decentralized because you don't want a single entity owning the value that you own, right? And you want it to be secure. So then if something gets compromised, not everyone is compromised and at the expense. It's not very scalable, right? If you run transactions on Bitcoin or Ethereum, it's extremely expensive. And because of that, there's a big scaling challenge here. So Start, that sort of aims to solve the scalability issue that we see in traditional blockchains, like Bitcoin and Ethereum. So how it does that is with layer two, right? Like, even in bitcoin, there's like Lightning network, which sort of functions like layer two as well. So if you look at StarkNet, stark net is a layer on top of Ethereum, right? So Ethereum is the layer one, and STARTnet is the layer two. And what it does is it batches all these three transactions together and then it turns it into a proof that stands as a single transaction to Ethereum. And then Ethereum verifies that the proof is correct. It's sort of like a bundling, right? If you have a lot of files and then you zip all these files into one zip, it's usually smaller. Right. So in this case, it's taking a lot of transactions and then creating a cryptographic proof and then the layer one verifies that that proof is correct. So you sort of get the properties of decentralization and security because the source of truth is still on layer one. Right. But you also get the scalability of a layer too. So users and developers will actually build on the layer two, and then these transactions will be patched together and then settled on ethereum layer one. So typically what they call layer one blockchain is they call them settlement layers. And then with layer two, like StarkNet, they call them processing layers. And then what you get is like up to 100 times transaction fee savings. I remember sometimes when I bought NFT, the NFC transaction fee costs more than the NFT itself. And sometimes it costs like fifty dollars to two hundred dollars. Right. So it's definitely not something that average users could accept. So, finally, what is Stocknet JS? So, Stocknet JS is a library that I started and collaborate very closely with Argent on. And we're sort of the library that connects apps to the layer two network. Right? So the library allows apps to communicate to the network, like send transactions, get data from the network to build decentralized apps. So StarkNet JS actually works very nicely with React native. I'll hand it off to your neck. Who will be giving a demo of Starknote JS in action with React native. Thank you. Hello. Yeah, I will do the demo on Stagnant JS inside of React native. So we have learned what Stagnation is. But first of all, I will let you know the most important thing. It will be a short demo, so you will make it to the BS. It won't take too long, so don't worry about it. Yeah, all right. So first of all, I will show the wallet, then I will just give a sneak peek into the code just to cover one single part of it, how to use stagnat JS, which is our main library. And then we have a little giveaway 800 slotties, which I don't know how much it was, but yeah, so we will do that in a way which I will explain later. So I'm pretty sure all of you will have a look in the code today. Thank you. All right, cool. So it was my first time ever using React native. So I'm a little bit different than you all, but yeah, first time using React native, it was quite easy to set up and I was really surprised how well it worked with Stucknet JS. So my company, Urgent, we are building a full wallet on top of stock net currently, which you can see on the right, hopefully. Yeah. All right. And this is like the customer. Great product we are building. The whole network is still in alpha so it breaks like daily but that's just expected. On the left you can see my neat little app JS demo which will be open sourced soon. And it's just using the same library stark nature as the same library we have used to build the Argentex wallet. So we are currently tackling the chrome extension part of things. If you may want to cover the react native things then I don't need to do this. All right, so we can just basically see an amount like a balance for an address which is down here and you have basic functionalities like receive tokens and send tokens. Token in this case is just easier. I built a very simple app and probably all of you will joke on me for the code quality on this, but for my standards it's working pretty well. So you can send and you can receive and it's actually on the same network than our origin X obviously and if somebody could explain how this deprecation error can go away that would be great. So we can send an amount to a recipient which is just the app and we need to pay a network fee on that which is really tiny. So it's two cent US dollar currently which is one of the main benefits on Garlic on stock net. Sorry. So if you find that it will take some time network issues but that's no problem. So as you can see the transfer went through so it will take some time to arrive. But until it arrives we will just have a look at the code which is in the other direction. All right, so all I'm doing in react native is I never escaped expo obviously because I'm a noop but I installed Stark net and you can just use every primitive of Darknet JS inside of react native which is pretty nice. So yeah, this is just some react magic. Don't blame me for the code and for the hard coded stuff. This is just a react hook which has a couple of lines and the most important parts of these is that we need a secret to prove that it's us. So we are randomly generating a secret and then the secret gets stored and gets reused all the time. Normally this would work differently obviously and would be bound to user. From that secret we can derive like a public key cryptographic key so everybody who has a public key can verify transactions that we have made with the secret and then from that plus a few other parameters, we can calculate an address which is an address on top of stagnat. And given these three values we can initiate just the account primitive from stagnat JS which will provide us a bunch of methods to do the most common things like executing transactions, checking balances, all that stuff you would expect. So yeah, that's my very bad demo. And to get to the last point, I got my CEO to approve a little bit of money to give away, which is great. One of the benefits if you work on web screen and the whole code will be open source, so you can see the link in the presentation. And I would say first comes first. So if you find the secret inside of the demo code and you know how to use it that's the tricky part, actually, then congrats, you have one. $200. $800. All right, that's that's it.