Building Verifiable Frontend Code on NEAR

All right, we're live. GM, everybody. Welcome to what's going to be another great DevNTell.

So, if you didn't know, DevNTell is a 30-minute podcast for builders to showcase something they're passionate about

or have been working on in Web3.

It's gonna be an awesome project you've been working on, demonstrating unit testing best practices,

automation goodies, smart contracts, how to structure a project, etc.

Basically, if you've got a passion for something, this is your opportunity to share it with the community here at Developer DAO.

And today I am ecstatic to have Mike from Proximity.

Welcome, Mike. Thank you so much for taking the time to come on and give us an overview of

how to build verifiable frontend code on NEAR.

Yeah, honored to be here. I think I'll start with a teeny intro.

Yeah, I'm Mike Purvis. I joined NEAR Protocol in December 2020,

like right before all the COVID stuff happened and nine months before mainnet on NEAR Protocol.

I was there for a little over two years, and then I had this idea I just couldn't stop thinking about or talking about,

so I went to Cosmos to try to do my own startup.

I did that for about two years, and then now I decided to come back to Proximity, which is like a NEAR R&D arm, almost.

I think it's a really good fit. And actually, some of the stuff that I'm showing today

was really from some of the folks in Proximity that got together and had a super interesting idea.

So yeah, like you said, we're talking about decentralized frontends.

There are so many things happening in Web3, it's hard to even keep track of what's going on, just at NEAR or just in Cosmos.

I imagine it's hard to even wrap your head around at first.

And so, basically, the idea is we really like how, we meaning just anyone in Web3,

really enjoy how if you're going to call a smart contract and it's going to be something exchanging money

or something that you don't want to screw up, then you can be assured that if you want to,

you can take a look at the smart contract code, and then you can compile it,

basically, and you can say, okay, is this thing going to match exactly what I'm calling over there?

Right, so it's verifiable. This is something that the end user can do themselves, and that brings a lot of guarantees here.

And so that has so far just been kind of on the smart contract level, but then this is taking it to the next level.

Well, how about before I click that button, that blue button that says like submit transaction?

Like what if that is also verifiable? So you have the frontend that is completely verifiable and public,

and like you could run it yourself if you wanted to, and then the smart contract it's talking to is also completely public and verifiable.

Pretty interesting, and I feel like there's sort of a, it's been really fun to see in Web3 just like narratives like come and go

and people kind of converge without even really discussing or coordinating.

And you know, I think that Farcaster and a lot of these other social media stuff or BlueSky, you know, the list goes on.

And NEAR is also kind of in a strange way sort of converged on this idea of like let's try this out.

So I will actually just stop talking and start presenting the screen here. I'm going to show first, there's a few cool things to show.

I will show near.social, which is a fun site that has been made.

And so this entire thing is all decentralized on frontend. Pretty amazing.

So as you can see, Jeff Gold, this is an amazing person from NEAR who's done a bunch of games and I couldn't even list all the stuff

that Jeff Gold has done. I can't believe I'm not following you, so Jeff, I'm following you now.

By the way, also, you'll notice that I didn't have a popup here. I'm sharing my entire screen by the way, not just the window,

so that wasn't like a trick. The way that NEAR works is you can actually have a bunch of different separate keys

and without getting too much into it, you don't need to have a popup every single time.

You can just say, oh yeah, I'm logged in, just please do this for me in the background.

So that's pretty cool. That's how that just happened right there.

That's awesome.

Yeah, and you know, it looks like a regular timeline. Here's an awesome friend who goes around

and his goal in life currently, one of his goals in life, is to teach everyone this really fun dice game.

So he's showing us that he's at GDC doing this dice game, and I can like it, I can share it, I can do all this stuff.

And what is happening kind of behind the scenes? So I'm just going to keep this tab here,

but there's also this editor at the top. So if I go to this editor, this is actually showing,

you know, I am logged in over here, mike.near, and here's a few different pieces of code that I am working on.

This one is kind of a pretty interesting one. If you look at this and you're a developer, you're going to say, okay, cool, this is React.

You know, it has like useState, I recognize a lot of this stuff.

And so that is actually like the closest thing, but this is not exactly React. This is like custom React, basically.

So this should look very, very, very familiar to devs but be a bit different.

One thing that's kind of cool about this, like so I was blown away when I was looking into Farcaster Frames

and they were talking about what they're using, like Open Graph, which like Facebook invented a while ago.

And I always thought of that as like when you share a link on social media then you are able to say,

hey, this is the best image to put up there. Don't show the preview that's like an ad or something.

Show the preview that's like the person being interviewed in this article or whatever.

That's kind of how I always thought of Open Graph, and then Farcaster is like, oh, we can actually make this, extend this way farther.

And so that's very fascinating to me. So NEAR's kind of approach was like let's have it be as close to React as possible.

But this is not React. So if I were to like, let's just say I add a comment here,

and I'll show you this frontend at some point, but I can literally say like save, and well,

this is actually funny, this is doing the same thing where we are actually broadcasting because I told it to trust me.

But essentially, when you do this the first time, a popup will happen and say, okay, we are sending literally plain text

because it needs to be verifiable, we are sending this to be stored on the blockchain.

Because NEAR is fast and it's cheap, and why wouldn't you? So that's stored.

And then when it comes time to actually like render this thing, and we can go over here, this is something that's kind of like

a little bit in flight, but it's quite interesting. This is like an entire staking dashboard that is totally decentralized, right?

Buttons decentralized, smart contract. Well, this talks to the staking pools to do your like delegations.

Those contracts obviously, you know, open source. And so what happens here, like how does it actually get rendered?

So this is pretty wild and like I'm probably going to butcher part of this, but it is like

you can request publicly from the blockchain, say like give me all the code here,

and then it's going to basically break that down into like an abstract syntax tree. Have you heard of that?

And then go through each component and be like, okay cool, is this allowed in our sort of like limited secure React-like component?

Right, so then it breaks it all down and says, okay cool, now we're going to render it from there.

And so maybe this is actually a good place to just show this one repository, and this is the VM.

So I think I did maybe share a link that we could give to the audience that's the VM.

And this is a pretty advanced piece of code, this is written by Evgeny Kuzakov, who's done quite amazing things in NEAR Protocol

his entire tenure there. And I thought it'd be fun to show this part where like

I was just showing a staking dashboard for NEAR, right? But this VM is like

so powerful, it doesn't have to be for NEAR. So in here we have like ethers is exposed, right?

So in my component, what that means is like I can say like ethers. and it'll actually show up as a kind of global available object,

almost like window or something like that. So this makes it extremely powerful where we can have these decentralized frontends

that are not just limited to NEAR, you can really kind of do anything you want.

And you know, a little preview here, this is some stuff that I'm working on currently where we're adding like

Bitcoin and different crypto functions in here so that people can call these from their component

and just basically be sure that this is actually going to work across different chains and whatnot.

So this is the virtual machine that's actually doing the rendering of like something that looks like this

or something that looks like near.social, the sky's the limit really.

But then there's another aspect because this is sort of like this really amazing and beefy dependency that you use.

But then how are you actually, you know, it is still 2024 and we still live in a world

where we have to rely on DNS and all this old kind of internet stuff. So how do you actually serve this webpage though, right?

So what I showed was the VM, and the other aspect is, okay, now how are we going to like,

we're going to use the VM as a dependency in what? Well, we're going to use it as a dependency in a gateway.

And I believe I also shared a link with you, Narb, for that, and it's called,

the one that I'm using is called boss-gateway-template, and it's pretty powerful. I'll show this.

So here is the gateway, which you could think of it as like a Next.js app, you know, nothing too crazy.

What is pretty interesting here is that this is, you know, if I were to go into package.json you would see that I'm just using the VM

and that's like a really important part. It's been kind of fun too because we have this ability to pass down props

from our gateway like into the child components, essentially, like whatever you're writing,

like we can actually kind of pass stuff down there. And so this is something that I just recently added,

which is I have a custom modal that I decided to build and I was like, oh, what if I want someone to just press escape

and have the modal just like go away, right? Now, like that's a little bit harder inside the component

because you're sort of like deep inside the stack in some sense, but this means that you can not only have fun

building your components but you can also have a lot of fun building your gateways and see, you know,

how far you can stretch this thing. Maybe I'll go back to showing, and this is a little bit of a work in progress as well,

but this is a little bit of a hint about some really cool stuff that's happening at NEAR that actually I'll be presenting on at ETHSeoul

in less than a week. And so it's like this right here is an example, this is running locally.

And this is for chain signatures, which means that you can start on NEAR, I'm already logged in with mike.near,

and you can actually like send something on Bitcoin. Like this is all cryptography, mathematics, all that kind of stuff.

And then of course here I'll just show like I'm going to press escape, boom, and it's going away

and that's because I played with the gateway and I'm playing with the VM to sort of like add in all the Bitcoin aspects.

I think we're doing good on time here. I'll just, I wanted to show, so this up here is pretty neat.

So here I showed that this is an editor, right? And you can literally like say save right here,

and that this is really, really helpful for me when I see that someone else has made a really cool component.

Because by the way, these are all composable. So like people can just use these components.

Like at the very top, for instance here on this one, I made a different component called ProgressBar.

And so that is, I can literally just be like hey, use that other thing that I made.

So this entire file doesn't have to be everything that's shown, so that is really neat.

This is neat to have an editor right here, but I really am like this a lot more where you can say,

okay, I actually want to load my component locally. Like I don't want to put it on testnet every single time, right,

and have it work like that. And so there's this cool thing called boss-loader.

Boss is like Blockchain Operating System, which is a term that's been kind of used for this decentralized frontend a bit.

And so this is basically coming from here where I say, all right, I installed boss-loader, super duper simple,

there's a readme, I even have a, I can give a link to this too. You say hey, boss-loader, who am I? I am mike.testnet.

Cool, where are the files that we're trying to load locally? And so I said okay well it's in the source directory.

So then this thing is just kind of running. And so when I give this flag then I'm able to just edit

on my like whatever IDE I want, if you like VS Code, I'm kind of a JetBrains person myself, but then you can be

working locally and then it is like actually talking to your local machine instead of having to kind of put it on the blockchain

and have it pull from the blockchain. So this is really good for rapid development.

And here's the boss-loader that people can use and even like near.org, NEAR.org has the ability to do this as well.

So near.org is a gateway that shows these decentralized frontends. And just like instructions in the readme,

you can do the same thing where you can say okay actually let's change it so that it's loading locally.

And so you can actually do this from near.org and have it work that way. So really, really interesting.

Another kind of just to show how crazy you can like get with this, I was in ETHDenver and I was talking to

some wonderful people from the Build DAO and like they've taken this to be like, I don't know have you heard of tldraw

or you've seen tldraw on the timeline on Twitter and stuff? It's this really crazy thing where you can use like AI

to like make all these really interesting illustrations and whatnot.

And I won't do like a full demo here but like this is an example where someone used tldraw

and this is all like decentralized. It's really, really cool.

So it's not just, you know, oh you have a kind of a single page thing and oh you made a really live sort of timeline thing.

You can do a whole lot. So that is pretty interesting.

I will show this as well, so we have great like docs on all of this, so this is docs.near.org.

I like to just kind of start from the very base like what would I do if I were trying to find this, right?

Docs.near.org, Web3 Components, the building blocks for multi-chain apps.

And then you go here and I think just even right at the top, like this is familiar to web developers

and there's like an actual extremely simple example here where you'll note that this looks, I'm not sure if you're a React person at all, Narb?

I've done some React, yeah.

Nice. So like the useState looks familiar, right? But yet like we're just immediately returning something.

So it's almost like we skipped the part where we said like const myComponent equals whatever, right?

So if you can just get past that part, it's like almost exactly the same.

Now, not every single thing is supported, like useRef might not be in there yet,

but like we have useMemo, I think useCallback is in there, useState, like a lot of the stuff that you just use on the regular.

So yeah, like it'll look really familiar but like don't get tripped up by the, wait a second,

isn't this supposed to be enclosed in a const or something? That's really the only difference here.

So yeah, these docs really go over how to do it. And then in addition to this,

you know, since everything is just always changing all the time, there's also like kind of a new

like approach at this which is called boss-web-engine where I think the goal is like really to use iframes

to send messages to each other for a few reasons including security.

And then it's the boss-web-engine is sort of like, you know, a graduated step up right now I kind of toward

making it so that you can add more libraries that may not be in there. So that you know I don't have to necessarily

add Bitcoin to the VM. I think that the idea there is that you'll be able to add like different kind of components.

So I do have a link there as well and maybe I will also just kind of share that in the comments here.

I guess while you're grabbing that link, one question I have is like what was the driving factor for going the custom React route?

Is it because like some of the intricacies of React didn't play nice with NEAR or when you were uploading it to the blockchain?

Or is it like you wanted a more controlled approach of say, okay let's make sure the very basic pieces of web development work first

and then we'll get to the more fancy stuff later?

Yeah, I think this would be a great question for Evgeny who kind of did this spike. And it does feel like to me,

I think there was a time when you didn't really have to know React, right? Like this is maybe like 7-8 years ago or something,

but now you like definitely do. And I imagine it's just like wait a second, why wouldn't we do it in the thing that everyone

kind of already knows? And you can like not only just Stack Overflow but like ChatGPT knows everything.

ChatGPT is so good. You don't have to learn almost anything in terms of like, oh I forgot when should I use useCallback.

Now you have ChatGPT, it'll tell you. So it's just like an encyclopedia that talks to you and is waiting to tell you exactly what to do.

So I think that's pretty prominent. I imagine that, you know, if the approach is to use just like kind of advanced techniques

like AST traversal, then why wouldn't you use React in some sense? And so I think it's almost like

a little bit different where it's like let's try the hardest thing first instead of the easiest thing.

Let's try the hardest thing first and see what goes wrong and it's like oh no, we can actually do this.

Cool. Yeah, this is really awesome. Sorry, continuing on.

Yeah, I also kind of wanted to mention something too. So yeah, I suppose this is kind of more related to this,

I think this is very, really fascinating, this whole chain signatures thing that is happening.

And the distinction here is that we've all lived in this world in Web3 where you have like bridges, right?

You have two chains and then you have like, okay you have something on here but you want to get it over here,

so I'm going to like put it in a locker so it's like inert, can't do anything kind of, and then I'm going to mint an IOU over here.

And anyway, that we have found out that like how many billions have been hacked from bridges and stuff.

And I'm not saying the bridges are bad, we have a wonderful bridge at NEAR, Rainbow Bridge from Aurora team.

But like this chain signatures thing is like very like different approach where it's like no, no, no,

we're actually going to use like key derivation and advanced cryptography to actually like figure this stuff out.

So it's kind of like not using a bridge actually. So I think that's pretty fascinating and I did want to like

give a little shout out to Mintbase who have an amazing demo here showing like how they are

controlling NFTs on OpenSea from starting from a NEAR account. So there's a whole bunch of stuff happening here.

I believe that we're, it'll be quite trivial to take some of these components and put them fully decentralized.

So there's a lot of things like coming down the pike like that. And I will, Narb, it looks like

I can't really put comments there like I thought, so I'll share this in our private chat if you want to give a look to that.

I dropped this in the chat, all right. Yeah, let's see here. We have the flags, we have the staking, we have the social,

we have the canvas. Yeah, so I think that the best way to kind of get involved if you want to get involved,

there's a Build DAO like Telegram group, there's also a NEAR Dev Telegram group,

and there's actually even one that's like just for sort of this near.social boss development.

And people are talking about stuff all the time. I've hopped on calls with random people who are just doing like

pretty amazing like aspects of how you can essentially have like different libraries come in.

Yeah, it's pretty crazy. I think sky's the limit here and we're pretty proud that it can be

super familiar to web developers. Awesome. I guess are you only able to upload your decentralized code

to testnet at the moment or can you also push it to mainnet?

Yeah, this is all mainnet here. And there is a testnet one if you want to use it,

but this has been on mainnet for a good while now. Pretty incredible.

And off the top of your head, do you know how much it roughly costs in NEAR token to upload like a website like this?

That's a good question. Let's see. So here is, this was me, I'll bring this up in the explorer.

So here is me, yes 20 minutes ago, I mike.near called social.near, which is all mainnet.

And so yeah, this is 0.00097 and I think this looks like it's maybe rounding up to one cent

to do that post. And then the data itself is actually like really interesting. This is really worth mentioning.

NEAR Protocol did something early on, a design decision called storage staking.

So people have talked about this before, like oh is there like storage rent? That kind of thing with regards to how you save things

on the blockchain. And so like in Ethereum, for instance, I believe I was reading this article about how

during the ICO phase there was like a ton of state that was just kind of stuck there.

Like validators have to save all this data that is like not being used at all, right?

And so it's like uh-oh, if we just fast forward 50 years then this is just going to keep growing and growing and growing.

So NEAR Protocol is like, okay how about this. You want to throw 15 bytes of ones and zeros on our blockchain?

Cool, well you're going to put in a little bit of NEAR for every byte that you have.

And then if you no longer need it then you can be like, okay, I'm going to take that back.

And then you know it like cleans up the validators' hard drives and you like get your NEAR back.

So I think it's a really awesome idea. It's kind of a bummer because no other blockchains do this

and so it seems like a weird way to do it, but I think it's actually like super cool.

So in you know you asked about prices, so that was the thing that I showed was more like a transaction price I suppose,

but like if I wanted to, I mean I'm trying to think of a ridiculous situation where like I absolutely need to delete

five of my near.social posts so that I can get back like 0.01 NEAR and like pay my electricity bill or something like that.

Then I could do that. I could literally just be like okay now I'm going to remove my storage from there.

Ah, interesting, interesting. And it actually goes for fungible tokens as well,

it goes for almost anything. So like I can literally say oh I want to use this fungible token.

Oh actually I hate that meme coin, I'm going to remove my entry inside of that fungible token and get a little bit of NEAR back from that.

So basically like refunding your actions. And I will note because it's kind of a new idea,

this is not state rent. So you pay it once and it's just like you're good.

Cool, cool, cool. Another question for me is so say you upload, so say we have near.social right,

and then I go and I create a new feature and I want to upload that new version of near.social to mainnet.

Is there a way to kind of avoid uploading everything again and just like having my new feature get added on

to the existing code that's there or do you have to, does it have to be everything new every time you want to push new code?

Yeah, I love it. So if I were to look inside of the like transaction when I'm like saving something,

like it's calling the contract, the smart contract on social.near and it's saying hey, we're going to save like

this is mike.near has a component and then we're going to save it at this key, we're going to have this code.

And then we're going to save it at this key, we're going to have this code, and then this key, and it can actually even be sort of like nested.

So I could have like the staking UI for instance. This is staking UI right here, and then I think I also have stakingUI.debug.

So this is separate. So and then you know of course I could have whatever HelloWorld but like I can delete this guy

and that will not affect anything having to do with like the staking one or the staking.debug.

So it is kind of already, like I'm pretty sure this is using just like graph theory concepts where everything is a node and yeah.

So Evgeny Kuzakov also worked at Facebook for a bit and I believe that this is how a lot of social graphs like kind of work.

Cool. And I guess in that same vein, if I end up my feature that I ended up uploading has a bug in it and I need to roll back,

how easy is it to switch versions?

Really good question. So as soon as you save it, it will save the block height like right when you did that.

So then if I screw up, or actually this is what I do in production, is that I literally have an environment variable

that says like we are pinning the code to this height, this block height, right? Then nothing can ever really go wrong.

Yeah, super duper good question. Awesome, awesome. Unfortunately we're coming up to time here.

The last couple questions I have are around how people can get started messing around with this stuff

and if they do need help, I know you mentioned some Telegram channels that people can reach out to, but are there any other channels folks can get help with?

Yeah, I would say I believe that there's going to be a bunch of links on the docs too of like relevant ones.

I believe we put them down here kind of at the bottom. But yeah, I would say start with the docs

and yeah, there is a boss VM chat that I believe is in here. I think I might perhaps can also include that in the video description

that we do later. Yeah, definitely an active and a bunch of people talking like every day and sometimes I'm at work

and I see these messages flying and I'm like oh I really wonder how they did that and okay got to keep working.

So people are experimenting like crazy, it's really fun to watch. Yeah, yeah, I'll say especially now, now's the best time

coming into the bull market, people do crazy things. But yeah Mike, this was fantastic.

Again, thank you so much for coming on and showing us all this cool stuff. All the links that I dropped in the chat

I'll get, I'll add on to the YouTube description so you guys can all follow along.

And before everybody leaves, I'd like to share the QR code for you to scan to claim your NFT for being an attendee today on DevNTell.

So what you want to do is scan this code, fill out the form that comes up, and once you submit you will be airdropped

a NFT on the Base network within a couple of days' worth. And you'll have about an hour and a half from now

to be able to fill that form out before it closes. So again, scan this code, fill out that form and you'll be dropped an NFT

for being an attendee today on DevNTell. And with that, again Mike, thank you so much for coming on the show,

it was a pleasure and yeah really looking forward to seeing all the cool stuff folks start to build with the tech you just showed.

I mean more decentralized front-end code that we can have the better. Yeah, likewise, likewise.

And I really appreciate it, it's been a pleasure. Yeah, we do have one last question that came in at the end from Lu Doan,

what are some good examples to follow? I guess in the sense of learning to build with decentralized components.

Yeah, I might actually like you can check out boss.gg which is another kind of site that we have.

I would say I think the documentation has a lot of really really good ones. Oh wait a second, I should definitely mention DapDap,

which with one P not two, is like really really incredible and they are doing basically everything.

I think everything is a decentralized frontend actually. Let me share this here, I might even just present real quick this last thing.

Sure, go for it. Yeah, check out the link tree on DapDap. DapDap me up right here. Yeah, this is going to

I think kind of blow your mind on like what can be done and be like pretty this is actually maybe even more than an example

but worth checking out 100%. Beauty. There you go, bonus content right here on DevNTell.

Thanks for the question, yeah it's great. Good stuff. Yeah, so I want to wish everybody a happy Friday,

happy weekend, hope you start experimenting and playing around with all the stuff Mike shared today and

we'll catch you back here for another DevNTell next week. Right on, have a good one, bye.