Lens Protocol 🛠 Building Full Stack On-chain Social Apps

foreign [Music] we are ready to get started I'm going to be going kind of quickly because we only have 20 minutes so hopefully you'll still get a lot out of this and I'm not going so fast as uh to kind of not explain some of the Core Concepts here but I'm going to be talking about building bull stocks social applications today and we're going to be combining a presentation at the beginning with an actual coding demo at the end and the team that I work with as Ave and Lynn's protocol and Lynn's protocol specifically is what I'm going to be talking about today I'm natter I've been a developer for about 11 years worked in the traditional Tech World in cloud and mobile and then have now been in the blockchain world for a little over two years um if you want to get a reference to the resources we're covering here today I'll give you a couple of minutes if you want to scan this QR code if you want a lens Handle by the way also come by the booth today we can get you set up with one if you want uh some swag come talk to us we have a lot of Swag there we're trying to mainly get that swag to people that are building on lens or go but if you come like maybe tomorrow and we still have some swag left and you're not bill yet building on lens or go and we you can still pick some up but if you are building all lens or go definitely come come speak to us okay so uh I'm gonna first introduce lens so what is lens speaking to developers here I'm going to give a different um description then what lenses to like a user for a user you can kind of think of it as a like social layer for web3 or just really a composable social graph that allows you to take your identity and your followers across multiple applications and multiple experiences but for developers I could say it's more of like a protocol and a suite of tools and apis for easily building social apps or integrating social features into existing apps the way I like to kind of describe this that might resonate with traditional software Engineers it's kind of like a managed service offers features like auth zero or oxa might offer authentication for you for your application you don't have to build all that from scratch you just tie into something like Clerk or alt xero and you're good to go you have things like S3 for file storage you have of um even I don't know there's there's all sorts of these managed Services out there like twilio for messaging you can think of Lin's protocol as they managed service for building social applications or social features into existing apps so you don't have to build or manage this back-end infrastructure it's all there for you you just build out the front end either a web or a mobile app and social is really interesting because it's kind of the biggest use case that there is in software today I think um 4.9 billion people are familiar with social it's not like a lot of other blockchain Technologies where there's a lot of onboarding and friction for people to have to understand like why they would use this in the first place it's just something that people are already knowing and understanding as well and I think it's also interesting to see the two biggest social Founders in the history of the world Mark Zuckerberg and Jack Dorsey also moving into decentralized social Jack with blue sky who then moved on to with Noster and now you see Adam massari who's the head of both Instagram and threads giving a talk at Ted last year talking about building decentralized social applications and then one of its first posts on threads is talking about how threads is moving into a decentralized network and some of the language he's using here is web 3 language portable social graphs censorship resistance are some of the themes here in one of his first posts and I think it's really interesting in validating for anyone here that's been building in web 3 to kind of see that these ideas in practice actually do make a lot of sense I think when applied to social it makes a special a lot of sense and hopefully you can see why by the end of this uh talk so a social application doesn't necessarily mean in Instagram or a tick tock it just means that you're implementing a feature that has some type of social functionality into your app as developers what are some applications that we might not think of that is social that are social well GitHub is a very good example of this I'd only use GitHub only for sorting code I use GitHub for discovery of new apis and new applications and new software that the people I follow are building because I can follow a developer on GitHub and now I have a feed of some of the most interesting things that are happening in the software space because the algorithm is giving me that information based on who I follow so there's all types of ways that you can integrate social features into apps that don't necessarily have to be a social app in the front and forward main selling coin and lens basically allows you to do that lens is at the core a set of smart contracts deployed to polygon but what really makes lens powerful I think as a developer is more about how easy it is to build with we have a lot of different things that you can use that kind of abstract away the traditional complexity of building on a blockchain we have a graphql API that allows you to query it like you would a database so you can say give me profiles that have been created like for instance at a certain point in time or that might have uh you might be able to search Publications and sort and filter and all these things that you can do with the database our API allows you to do that we also have a lot of interesting sdks and developer tooling and things like that that allow you to build much quickly more quickly than you would that by calling like just raw API requests that I'm going to show in just a moment as well um for ux for the actual user facing things that we've built into the protocol that make it kind of more of a desirable place to build than just directly on chain is our gasless transactions and our dispatcher gasless transactions basically mean that the user doesn't have to pay for anything so when a traditional like blockchain application is launched and you want to get a user to use that the onboarding flow is actually very very very bad you have to explain to that person that you they need to download this wallet and they need to create a private key they need to go to the bank and they need to open an account and then they need to connect that account to an exchange like coinbase then they need to write buy the right token then they need to send that right token to the wallet and be on the right Network and then exchange for whatever token it is that that up that that works on right that's a shitload of friction right um users are like very hard to come by already and when you put all this additional friction that's kind of a no-brainer why most blockchain applications don't have any users if you think about building in the traditional web 2 world people literally make onboarding seamless as clicking on a button to sign it with Google and they still can't get users so I think that making this onboarding process as smooth as possible and not requiring all this is a super important so with lens applications the user doesn't need tokens they just need a wallet and then they can start using the app for free and the reason that it's free is because we've upgraded and improved our infrastructure that I'm going to talk about just a moment to make transactions super super cheap on an order of magnitude of a traditional database a couple of orders of magnitude which makes it very very inexpensive I'll show you some numbers in just a moment and then also our dispatcher at the API level allows you to just sign a single transaction saying I can post using this account without having to sign every other transaction going for forward so the end ux ends up being more of something like Twitter and I will try to kind of show an app in just a moment and then the developer experience is something that I'm gonna show in just a moment as well so one of the things that has been a challenge for building this type of application in web 3 is is the scalability if you look at a database like dynamodb I used to work at AWS for a little over three years we had applications that literally would uh be able to handle uh that that did handle around 100 million operations per second for a single application we have blockchains that are supposedly scalable that can't even hit a few thousand transactions per second and this is a shared environment like not only that that up that that blockchain can only handle a few thousand TPS but that is being distributed between every application ever launched to that blockchain and every single user on every single application that's launched that blockchain clearly not a good use case for social and I think that we're starting to see a lot of improvement in in the space with um you know apps hands and things like that that I think are going to be great but even with that today you cannot build using a traditional what I would call a financial blockchain that has the limitations around fixing the double spin problem which turns out in Social doesn't even matter because who cares if me and my friend posted the exact same time the only thing that we care about is that that content is going to be there it's going to be immutable and it's going to be available for people to kind of use and be able to read publicly so removing the constraint of the double spin problem allows you to use a protocol like rweave and rweave is a protocol that's built specifically for data storage and it's not built for financial use cases it's more just built to store files and stuff so our new infrastructure uses our weave and it's called momoka and at the last time that I checked we had hit around 800 000 TPS I mean 800 000 transactions for a total cost of 261 dollars I've paid 261 dollars for a single each transaction during the bull market so this is 786 000 times more scalable than that one transaction I did obviously that's not the typical cost the typical cost for a transaction on like a new L2 is probably closer to like a few cents but still we are orders of magnitude cheaper than that um and therefore it makes it easy for us to be able to subsidize all the transactions on the network at this cost now in terms of developer experience we have the graphql API that I talked about a moment ago but we also have sdks so we have the lens SDK which is both a react hooks SDK and an agnostic JavaScript SDK the react hooks to SDK just allows you to call apis with two lines of code the lens client is a more agnostic JavaScript SDK that also allows you to kind of make requests with just a few lines of code it sits above the lens API so instead of having to understand and format graphql you can just say give me Publications or give me a profile with this ID two lines of code you have that data back and ready to roll whoops this is what the API looks like so you just import the hook and then you render data loading and error which kind of gets returned from you there and you also can pass in Arguments for different props things like sorting and filtering and stuff like that we have a UI kit for react native you can get started with two lines of code as well you can render a feed you can render a publication you can render a profile all sorts of stuff and then we have a widgets Library this is kind of an uh an idea of what those widgets look like when you render those out you have a way to share profiles we have a way to share content you have a way to sign in with lens using it um more of like as an integration which is what most of the time these widgets are used for but it's also just a really simple way to kind of get started with lens uh using just a couple of bonds of cut um and then finally something that a lot of people have been building some of the most interesting stuff with is our bigquery data set so with uh with our bigquery data set I think we have like 65 or 70 tables that allow you to literally query every piece of data in the history of lens and a fairly short amount of time and with this people are building things like analytics dashboards and recommendation algorithms and then we integrate really really closely with xntp there's a lens namespace that allow you to kind of integrate with every other lens app so if I send a DM on orb and then someone else opens it on butterfly and then you build a new app you'll have all of those DM conversations integrated into your app without having to do much work um a couple of the core features of lens I think are super important to highlight I don't really specific to lens it's more like a web 3 thing but I will just underscore them because they really sign with lens one of them is extensibility so with a lens and especially with lens B2 which was just launched the test net a couple of days ago you can build your own custom functionality with custom modules and what we call open actions with these new features where with that new feature open actions and with custom modules you can basically you would be like if you could submit a pull request to Twitter and add a feature that you wanted you can do that with lens so if you see something that you want that isn't already there you can kind of integrate this and this also opens the doors to a lot of cross chain stuff so we're already starting to partner with some other protocols that are outside of the polygon Network that allow you to interact and integrate with uh with their applications and vice versa um and then there's this idea of composability composability is a big thing with smart contracts because anyone can just build on top of each other's contracts and you have all of this D5 stuff that happened and there's all types of stuff you can do that but beyond that I think it's important to underscore that the protocol itself is almost more of a managed infrastructure service like you would see with traditional Cloud providers because not only do all of these things exist they continue to be maintained and improved over time and you as a developer only have to focus on the front end so you can be a front-end developer building web or mobile apps and not have to build and manage devops infrastructure database all this other stuff and um you also inherit the existing lens user base so you don't have to kind of bootstrap in cold start as bad as you would from a traditional application you still have a little bit of a cold star problem because you have to get awareness of your app but once people know about it it felt like they have to sign up for a new profile if they already have a lens profile they already have their followers on your application as well and one of the things that we're doing now that lens B2 has been rolled out essentially is we're opening up lens protocol to be completely open for uh I would say more of a permissionless access for new users so as a closed beta it's been hard for people to get handles they have to go through this process but very soon we're going to have a way for developers to be able to onboard users directly through their applications without any involvement from the the protocol at all um composability for developers was spoken for there for users it's interesting because for me as a as a user I have this portable social graph and I can focus on building my audience on one of these applications but if I see a new application that launches tomorrow that I like a lot I now have all of my followers there and I can experiment and try things out there without having to kind of worry about bootstrapping from scratch so lens tube orb launches and then I see this new app that is called Butterfly okay this is pretty cool every time I sign into a new app all of my followers are there and this is a really fun experience from their user perspective and I think a lot of creators kind of like that for the tech stack as a front-end developer because you are not having to build the back end this is kind of the Tech stock you might work with graphql and the lens API one of those sdks that I just showed you you still need to manage your metadata for a post so when you publish some content to lens you can choose where that needs to be stored so you can either store on ipfs or are we we recommend bundler with rweave um you can also integrate video streaming features with live peer we see a lot of people doing that and you'll still be using some of the same sdks that you've used in the past things like rainbow kits wallet connect ethers wagme and uh on the front end you can use any of the libraries that you've used in the past like nexjs react native whatever okay so try to go through that kind of quickly so we could get to an actual dimmer what I want to do is just show you how to build a social app and uh I don't know five minutes I guess so what we're going to start with is the lens docs so if you want to get started we have developer quick star right here um this is a great place to get started building uh when we're about to build now and this is actually the guide that I'm going to be following what I have built outs so far for this demonstration for this demo it's just a blank mix CS obligation literally nothing there we're starting from scratch and what I would like to to duplicate is a experience similar to what we might see on lens tur which is a lens client or something like Twitter and most social applications have two types of views you have a feed of Publications and you have a feed of people right like if you think about almost every application that you've ever used you have those two main components you click on a profile you see a feed of Publications from that user you click some type of recommendation algorithm you see a feed of Publications from random users you click on a user's profile and you want to see their followers and you have now the state of followers so we're talking about feeds of Publications and feeds of followers we want to start our application from either one of those points so for this demo we're going to start with the field of users um there's a couple of ways I can do that here in my code base the first thing I'm going to do is just show you the widgets where I can maybe import a feed of Publications from the widgets for react and I'm going to delete all this code and I'm going to drop in this like pre-made UI component which this is the main thing we're going to actually use the regular SDK but this is just a fun demo because I can just pass in a handle for like Christina who is here and I can just save that and I should be able to go here to my up and refresh oh I need to uh use use clients for the new next JS because it's like really really awesome like that they just assumed everyone's building server side apps now um anyway so now we see a feed of Christina's Publications and we got this done in just one line of code this is very extensible as well so I can actually pass in a lot of different props to most of these components to do things like let's say I want to theme it and I want to set the theme to the Dark theme now the Dark theme there's about seven or eight different um I would say types of UI components that we can build with that widgets library but what we actually want to have is more control we just want the data in itself and then we can build out the styling ourselves so instead of using the widgets Library what I'm going to instead use is the react lens SDK and I'm going to import Explorer profiles and and our component here I can just render the data from invoking the use explore profiles and I can log that out now if I go to inspect my element here I see that I have an array of data that has come back with profiles that are given to us based on a very basic recommendation algorithm because we haven't passed any arguments to that it's just kind of given us the default but you say we see that we have like a bio of a user we have their handle we have their profile picture we have stats we have all types of stuff about them and I could even go here and I can pass in an argument that says limits like 30 or 40 whatever because right now we're only getting back 10 and then now we see once this is refreshed that we have 30 profiles coming back okay cool so now that we have that what I'm going to do is go to the Quickstar guide and I'm going to follow along and I want to essentially Loop over those profiles and show the profile picture maybe their bio and then a link to the profile details so I'm just going to copy all of this code here and then we're going to walk through that so instead of returning that you're going to rename data to profiles and then we're going to import link from next link and we're basically mapping over the profiles array for each profile we're returning a profile picture a profile handle and a profile bio and if I go ahead here and I refresh we now have a pretty ugly but we at least have a working functional social app that's that we have got got started so what I want to do next though is uh if I go to Twitter or like Leinster I can click on a profile and view their deep profile details so I want to build out that feature in my app so what I can do now is if you look at the link that I've created here it links to a page called slash profile profile doesn't exist so what we need to do is go here to create a new folder called profile and then in the profile we're going to create a route called handle and then in handle we can create a file called page.tsx and with page excuse me with this page I'm going to get the params from the route which are passed in as an arguments and we can now use that params that is essentially going to be slash profile slash ID or handle to fetch an individual profile um and instead of writing that from my own head I'm going to go to the developer Quick Start and continue There so the hooks that we're using here are going to be a little different we have use profile use Publications and profile so I guess I'm going to call this profile component the profile is for for type for typescript typings but these two are actual hooks that we're going to use um because we need to first get the profile using the params handle and then once we add that handle we can get the Publications for that user because what we want to render is this view here where we show their profile information but also their Publications so the way that we're going to do that is we're going to create two components one is going to be the profile component that I will actually just copy here and the profile component is going to call use profile using the handle that's in the params and it's going to return very similar to our other page where we have like the profile picture the handle and the bio and then we're going to create a new component called Publications that's going to invoke the use Publications hook Publications is rendered here if there is a profile once that profile is available we're going to call use Publications and this is going to return a limit of we've said here of 10. and we're going to then map over the Publications to render out uh the publication if it has an image we'll render the image if it's just text we'll render the text all right chances are I broke something here but we'll try this so now what I should be able to do is just click on a profile and then we should be able to then view that profile and their profile information um that's the demo what I want to do to close this out is make a quick post um Okay cool so I'm going to go ahead and open Warp oh the camera is not working oh yeah it is there we go okay so this is a lens app called orb and um in it there is an eth Global New York Community so what I'm going to do is take a quick picture and post it here makes it well it's not connected anymore but I'll still do that okay so if you want to be in the picture well you'll have a choice geez okay so what I'm going to do then I guess I can just post it here and show it on linster so I'm posting on word and we'll we'll just uh also have this show up in the developer Community but also just in the public all right I just posted and I'm going to give it a couple seconds and then refresh and there we are um that's the beauty of being able to kind of like have this social grab I can post on any application that I want and it'll probably be viewable on the application that you like the most so to wrap it up I want to show a couple of links um well when we talk about the bounties we have ten thousand dollars in lens bounties we also have ten thousand dollars and now they go boundings or or not we but the object Foundation uh does four thousand for best lens out 2500 for most original lens of 2500 for best social violins app and 500 times two for best Integrations uh another view to the links and uh with that I'll wrap it up thank you for checking out the workshop