Lens Protocol 🛠️ Let's Build a Full Stack Social Experience

[Music] today I'm going to be doing a 50-50 Workshop first half is a more of like a slide deck presentation style thing second half is building an app so I'm going to be rushing through the beginning somewhat because we only have 30 minutes and we want to build two apps or at least try to and that's a lot of lot going on huh um anyway so we have $220,000 in Lind bounties and if you were here for Andrew's presentation 20,000 in a and avara bounties I'm sorry 10,000 oh my bad okay so 10,000 in a and 20 20,000 in lens uh the 20,000 in lens is broken up into two parts we have Smart Post which you'll learn about in just a moment um we have a new CLI that we've launched as of yesterday for building smart posts that can get you half the way there literally um Andrew uh to thank for actually that that code boilerplate and then we have uh 10,4 for just building lens applications so um actually th those numbers are not right for the bottom part I think it's I think it's like 3,000 or 3500 2500 and 2500 anyway total is 20,000 but if you want to learn the exact details of the bounties go to the eth global website um me and Andrew are going to be around and we can answer any questions by the way if you're hacking on lens we can help you debug we can help you write code uh whatever you know you you need us to do we'll be around off and on for the next two days we'll probably be leaving around dinner time and coming back like late at night or like around nine or something for a couple of hours um anyway so my name is ner I'm a developer working with a avara now as of yesterday and a and lens for over a year and I've been a developer for about 11 years if you want to have resources today to follow after this this will take you to the developer document ation the GitHub repo our grants where we have a grants program uh we're launching a new set of Grants uh next week for smart posts as well so if you want to keep an updated with all of that then uh definitely check out these resources so I'm going to talk about what lens is talk about some new V2 stuff and then we're going to build an app so for me I think speaking to developers the best way to explain lens is that it's a protocol and a swe tools and apis for building social applications or building social features into existing applications you may have heard me say this before but I think it's a better explanation of what it actually is the the best way for me to um explain it after understanding it much better uh and having worked in the serverless space for a while it's very it reminds me a lot of a serverless platform like alzero or OCTA or even something like twilio or even Lambda functions or versel and that it kind of abstracts away a lot of infrastructure ructure and allows you to focus on building a product and not dealing with building out a database managing devops and doing all the backend stuff you as a developer focus on building the client side application web app mobile app and desktop app whatever and uh you don't have to worry about building the back end and I think like this is a really interesting use case because social is something that everyone is already used to and it's something that has proven itself to be a good entry point for people that are non Technical and just non crypto we've seen it with orb we've seen it with favor we've seen it with frch we've seen it with farcaster we've seen it with a lot of the social applications that have come out in the last year that it's a lot easier for normally people to understand because they've already been using social applications five billion people in the world you don't have to explain what like um some complicated defi thing is to them because um they might not even care about that but this is a good way to get them in the uh in the crypto space because they have to have a wallet and a lot of the new applications are abstracting away even that so they really just are just using an app and that's ultimately where we want to be so uh interesting in the whole social space is that not only are we seeing people in crypto building social that is decentralized we're also seeing the two of the top three founders in history of of social building decentralized social so I think the top three really in terms of usage are going to be the Mark Zuckerberg like uh you have Instagram Facebook and and all the stuff they're doing what'sapp you have Jack dorsy with Twitter blue sky and Noster and then you have um Tik Tock so two of those three which would be the Zuckerberg and the Jack dorsy group are both now moving into the decentralized social space Jack has been talking crap about Twitter for the last couple years and then um helped launch blue sky and is now left to focus like he's not actually a founder of Noster but he's um essentially promoting it and involved in some way I don't know exactly how he's involved um with Adam misseri he's the head of both Instagram and now threads one of his first posts on threads after giving a talk at Ted about the importance of building and the opportunities of building decentralized social on the blockchain with him announcing that threads is going to be a decentralized network as well the infrastructure they're using is something called productivity Pub which you've probably heard of if you've used anything that I forgot the other there's a couple of other social protocols that use activity Pub but it's kind of like a somewhat decentralized uh Network that mimics some of the capabilities that we get with blockchains um the ability to support your social graph calive resistance to some extent um so I think it's really interesting and validating to see two of the biggest social Founders in the history of the world pivoting and moving into like this direction because it does uh like blockchains and decentralized data and all this stuff does bring a lot of really more important like capabilities that you just can't get with with centralized databases so it's really um not only something that's being recognized by the blockchain community but but outside as well and when you think about a social application it's not just something like Facebook or Instagram there's a lot of applications that just have social features that make the the application better and more sticky for for users and for us here in this room we might not think of GitHub as a social application but when I use GitHub I actually really love following the people that I'm interested in and the most Alpha and this is Alpha if you don't already know this the most Alpha you can possibly get in the whole world world as a developer is following really really really talented people and just seeing what they're starring and what they're building and then looking at your feet on a daily basis it's almost like Hacker News is for coding you know you just get the the most important stuff and you're the first one to see it so if someone that you follow Stars a repo or if they create a repo it'll show up in your feed that's a social feature there's a lot of these little social features that are in applications that people don't really think of all the time even stack Overflow and things like that have like social features so being able to easily add this functionality is really powerful and being able to kind of do it without a lot of work is one of the value propositions of not only lens but I think all of these web three social protocols like forecaster and cyberconnect um lens V2 was launched officially like in the last week or so here are a few of the um new features or the new things that I'm going to call out there's a lot of other stuff too you can go to our website and and learn more one of them is a more standardized metadata um set for not only basic Publications like images and videos but also for things like 3D and live stream and minting and video and all these other things um this kind of enables more of a modular approach if you don't want to buy into the entire lens ecosystem you can just tie into certain portions of the graph and be able to enable people to do different things like create uh a live streaming platform and be able to kind of aggregate that data and treat it more as a database because you can now kind of have a decentralized database that is queriable and use it only as that if you CH if you choose to and especially here soon once we go permissionless um profiles are now not connected by both the identity and the handle they're now kind of separated so when you get a lens profile now it's more of like an ID and then you can attach a handle to that and we're going to see a lot more name spaces come out in the near future now that V2 is out right now lens is what everybody thinks of but in the future we're going to have a lot more of these and this is going to all for an a very powerful way for developers to also monetize their clients another big thing and this is what something we're focusing on over the next few months and if this hackathon is smart posts we have bounties specifically made for this we have a new CLI that's been released yesterday where you can run one command and generate a full stack Smart Post project by running npx create smart posts it's also documented in our website and this just facilitates a smart contract call anywhere in a single transaction through a lens client through our API and what this really enables is the ability to kind of like take things that are happening outside of lens and then get distribution within lens and it doesn't take a lot of extra work once the smart post contract has been built so a good example of this would be if you want to get distribution for an nft uh collection or maybe you want to get distribution for a voting that's happening in your Dow and you want to kind of get it on the social graph and you don't want people to have to like leave and and get redirected and then sign in and all this stuff directly within lens app you can basically call a smart contract and with bridging this now enables cross chain as well and we already have a couple of teams building cross chain stuff here and we'd love to see a lot more of it um so these are just some examples of what a smart post might might look like joining a weight list buying a ticket menting something um voting joining a DA interacting with an oracle uh buying and selling tokens whatever um we also have a new referral system that allows you to kind of specify in number of referrals that will enable people uh retweeting essentially to to make portions of money off of a collect so if I post something and I set the collect fee or something like that as $10 for example and then I set a 25% referral I can essentially specify how many people down the chain can earn off of that referral so just by clicking a button and retweeting I can earn money and I can enable more people to to earn money as a developer and then developers can also programmatically set um referral fees for their own applications that allows that will allow them to monetize as well uh another big big one is the profile manager this is a big ask for a lot of people for a long time if you have a profile on a hard Hardware wallet and you want to delegate to a a hot wallet or just to a bunch of your friends or whoever if you're a company you want to have a bunch of people being able to manage your social you can do that with profile manager you just specify an address and you then have uh the ability to to interact from that address and then you can revoke that at any time this is just an example of what that might look like Okay cool so how does lens work the very base is a set of smart contracts deployed to polygon along with another set of infrastructure that we call Moka that is on R weave so anything on chain goes on chain and on polygon um unless it's a smart post on another Network and then anything that is just a comment or a post that doesn't need to be financialized is posted on R weave we also have sdks and stuff like that to improve the developer experience so a big part of the focus for us is developer experience um we have a graphql API so if you've ever used um any type of indexing like gra the graph you've noticed that obviously it's a necessity for building any high quality front end for doing things like searching quering filtering that you can't get out of a smart contract typically we just kind of do that for you and offer a really simple to use API endpoint um and I say simple it's simple if you know graphql but it's not that simple if you don't and therefore we've also created uh a react SDK a JavaScript SDK that just kind of abstracts away a lot of the graphql stuff as as well if you don't want to write graphql um for the ux we have gasless transactions and also something we call a dispatcher so the user doesn't have to sign transactions so using that combination when a user signs up for a lens app they authorize the dispatcher once and then they don't have to sign any more transactions so you're kind of getting the onchain stuff without having to sign and you probably saw also maybe um not too long ago forecaster has launched some new things with their with their app that that does something similar as well and I think like that's the future of all this stuff is where we're headed is obviously we don't want people having to sign stuff we don't want people having to pay for their transactions um I'm going to talk about now about some of the developer experience stuff in just a moment but that's another Focus that we're you know doing but one of the things that was challenging and has been challenging for building out any type of non-financial application that can actually scale is the fact that databases scale and blockchains don't at at AWS we had Dynam DB which powered websites like amazon.com during Black Friday would hit almost a 100 million operations per second for that single application but blockchain's literally max out at a few thousand transactions per second and even if a blockchain claims to do more scale than that we haven't really actually seen that play out in practice we're still at this point of getting beyond that is challenging and obviously there's a lot of work being done to kind of make make that a reality um things like uh horizontal scaling that you're seeing with the modular blockchains and things like that are trying to address this um so that everyone's not sharing a limited compute resource but instead we are now having like app chains and stuff which will kind of help this but there's still that main constraint that has to do with the fact that everything that you do needs to be globally uh distributed through that whole network for the following transaction to kind of happen the state needs to have been updated and therefore it's really really challenging to get Beyond a certain scale just due to physics and um that's really great and important for preventing like the double spin problem which is the original use case for a blockchain but we've gone beyond that people are wanting to use blockchains for storing information um and it you don't necessarily actually care if your friend posted something across the world and you're posting something at the exact same time whether your transaction finalizes before his or vice versa because you don't really you're not that constraint isn't even required for posting information um if it's not required to be determined by other information that's already there so therefore for data storage it makes more sense to use a network that offers the capabilities that are really important to us like decentralization C CIP resistance well I wouldn't even say decentralization that's more of like a thing and these characteristics come from that but I guess immutability censorship resistance and the uh availability for it to be public and um therefore if you kind of then focus on not worrying about the double spin problem you can then use a network like R weave um so that's kind of what our infrastructure does for anything that's not tokenized all those transactions go to R weave using bundler Network and our infrastructure for that that we rolled out a few months ago is called Moka and the average transaction cost has gone down to anywhere between 0.003 cents to 0.00 whatever 7 cents and um this has been around a thousand times or so cheaper than what we had in the past and it's also around a thousand times more scalable so it's been a really really great way for us to kind of get to the point where we can hit Twitter scale I think right now we're uh the the numbers that we're we've tested out and that we're talking about are around 35,000 transactions per second which is a lot higher than any you know traditional blockchain can handle um for the DX I'm going to be actually demoing some of that so I'm not going to walk through through every single one of these one by one I'm just going to like talk about this slide here and then we're going to start writing some code but the main ways that you're going to interact with lens are going to be typically using um either the API or one of our sdks so the lens API I talked about already it's a graphql API the lens sdks we have a react and a JavaScript SDK we also have widgets which I'm going to show you in just a moment uh and then we have like a react native UI kit that allows you to really just quickly get up and running with react native um but beyond those things we actually have also something called uh our big query tables and this just enables you to query the entire state of the entire network uh forever any transaction that's ever happened is stored here and you can pretty much get anything that you want from here this is a really great way to build stuff like recommendation algorithms and analytics dashboards and stuff like that it's essentially index the entire network there and we have like 65 or 70 different tables that you can query from um so most of the people that are building recommendation algorithms and stuff on lens are using big query that way you don't have to index all of the chain yourself so I'm going to skip over a bunch of stuff because we only have 12 more minutes and what I want to do is uh build a couple of applications and maybe I'll post something here in just a moment but um we have a CLI that uh creates a lens app it's just called npx create lens app this is a great place to get started for hackathon or something like that because it not only gives you all of the boiler plate needed to use the SDK but it also has some like really light uh design already implemented so I'm going to call this lens Workshop or something like that and then you get the option to choose between three different apps we have a basic app this just has the SDK and a really uh generic almost nextjs boiler plates looking design but with everything you need to kind of start writing additional code we have an opinionated one that kind of gives you some design to start with and then we have a pwa version which is a progressive web app similar to like what frch did in terms of the infrastructure or the architecture and that's what I'm going to start with uh here and then I'm also going to create another separate uh lens app using the basic boiler plate so I'm going to create two different apps and I'm going to start by going into the lens workshop and I'm going to go to wallet connect and I'm going to grab a project [Music] ID and we're going to go ahead and just kind of look at this out real quick so this is the nextjs app set up with Tailwind Shad CN and nextjs like like I said nextjs app and then the only thing we need to do is set like an env. loc for our wallet connect ID and then we can run npm run Dev and this will get us started with a responsive pwa that's that's not how much eth I have by the way that's an error okay here we go um so it's a pretty pretty decent design to start off with and I think like if you if you also consider that a lot of people at hackathons don't focus on design because honestly they like how much time do you have you don't have that much time just having some design though will set you so far apart that I've seen people literally win hackathons just because they had a slightly better design than everyone else so um ways to to implement a good design in a short amount of time are to utilize libraries like shads and UI so go check that out if you haven't already but I I suck at design and and I was able to put this together in a fairly short amount of time I think it was like a few hours and um it's already responsive and everything like that um if you go to connect your wallet it already set up with wallet connect and once you're signed in you have a profile and stuff like that this is using the lens SDK so if I go into the code you can see where the SDK was configured here and the lens provider so this is kind of the boiler plate that you need to to use to set up a lens app you're essentially setting up the uh lens react web SDK along with a connector which means the abilties to kind of like Implement some existing SDK could be ethers but in our case it's wagm to enable like lens to have um the state injected as react context kind of and this is all you kind of need to do and this is all documented but uh instead of having to write all that yourself you know you can again start with one of these boiler plates to start off with but what I want to do is actually build something like this from scratch and um instead of like having all of these things already done for me I want to show you how you might do that yourself and we're going to do that using this other um boiler plate here and I'm going to take the EMV local file and just copy it here because we're also using wallet connects to get set up I'm just going to refresh this all right so this is the this is the basic bullet plate this doesn't give you anything really other than um connected with wallet connect along with sign in with lens and right now I'm already signed in from a previous session I guess but um signing in with lens will give you the ability to then post to the lens network using an uh an access token which is managed for you by our SDK but you need that access token to interact and instead of having to kind of like set local storage and cookies and sessions and all that stuff the SDK just does all that for you which is pretty nice but if I go to uh if I if I sign out you'll see that we have two links here at the top one to go home and one for Publications and once I've connected my wallet and or signed in with lens then you'll see that we have a profile page and what I'm using for profile and Publications are the lens widgets which is another library that I'm uh going to show you now somehow got disconnected let me try this again we have five more minutes I think we'll be all right so um we have a profile and then we have Publications what I'm going to do real quick is just kind of show you what that code looks like for profile we're using the profile widget which is literally two lines of code where we import it here and we render it here with the handle um the handle is something that we are getting from another react hook called us session which basically once you're signed in you have that session available and you can get the profile uh handle profile ID anything about the sign in user that you would like but the only thing you need to um pass in to the profile component is the handle and you can also um import like a theme and then you can theme that that component so we're going to change the Dark theme and you have the Dark theme and that button actually oh yeah I know change that prop there anyway there's other there's a bunch of props you can pass in to kind of style that um the other page we're looking at is Publications Publications are importing the publication hook and we're going we're using the I'm sorry we're importing the publication widget we're using the explore Publications hook to get the array of Publications and we're rendering them by mapping over them but we we have this view here built using only 31 lines of code pretty much which is pretty nice but again we want to build something something like this from scratch what I'm thinking of is like when you think about Twitter you have two main feeds you have the feed that shows you like uh the the stuff that's coming to you and then you have a um which is a Publications feed and then you have like a profile feed where if you go to followers and you can see the followers in the following we already have the feed of Publications so what I want to do is like render a a feed of of actual like users and what I can do is write that code using another one of the hooks along with another one of the widgets so I'm just going to delete everything here and we're going to import something called use let me go ahead and just from use explore profiles and then we can say const data is equal to use explore profiles and then I want to import this limit type where we can pass in some arguments here and I'm going to limit to like 10 and I need to pass in one other think maybe order by and I'll order that by the most followers and then what we can do is just log this out and this is a um a basic recommendation algorithm kind of provided by the lens API I need to make this a client side component so using that hook we should be able to go ahead and render the data here and there you go we see we have like an array of of profiles and all each one of these profiles has everything you would need to build like a social app you have their handle their um wallet that it's been connected to you have their interests you have their profile uh picture their cover picture everything like that so you can then start building out a design and the last thing we were going to do and then we're going to wrap this up because we're basically over on time already is I'm going to import the profile from the lens widgets and then I'm going to say data.

map or actually yeah data. map and we're just going to return a profile and this is going to be the data. handle do full handle okay so with that we should be able to go back here and see that we have now like rendered a list of profiles obviously like this design is probably not something that you would ship and try to terms of being a differentiating app or whatever but you can actually pass in props to modify the design to an extent but my Approach would be instead to go to Shaden UI and I would go here to the components and I would see or maybe I would go to the examples and see okay like I want my design to look like this or something like that and then I would go here to view the code and I would copy the code and then I would replace this profile component with the shaten UI component to have like my own custom design anyway so we're over on time by one minute um just going to talk about the um bounties again 20,000 go to the E Global website to learn more um if you are not own lens already come find me I have a stack of cards I think they're back there where I can give you a lens handle and I'm going to give you a couple of extra thank you uh to pass out to your friends as well if you want to give them lens handles thank [Applause] you