Polygon Workshop by Dabl.Club - ETHGlobal San Francisco 2024

[Music] hi everyone my name's Colin and of course I pull up the wrong presentation that's my keynote later today very excited to be on the stage uh but this will hopefully be uh a really great intro to what the dabble Club is later uh but also I want to dive into what the aggregation layer is and what the exciting things are happening in the polygon ecosystem so again I'm Colin lenberg I am a core contributor of the Dabble club we are an extension a spin out as you might say from polygon Labs you can find me on telegram I'm pretty reachable uh real quick I want to level set who here is a blockchain engineer who's already built uh applications on blockchain anyone new to web3 raise your hand if you're new to this area great all right so blockchains versus traditional databases I don't need to spend a lot of time on this but if you look back in time you look at that Bitcoin white paper there's all these same things control visibility security and privacy and if you look down Through the Ages back in time Bitcoin was not the create start of blockchain blockchain existed and started long before Satoshi Nakamoto it goes all the way back to Stuart habber and Scott soretta and halin these are the fathers of blockchain um and you see vitalik and uh and Joe Luben still working in the ethereum space uh you know Joe lubin's consensus now has a layer two bolic is push is now recommending layer twos and pushing this forward and polygon came out in 2017 and pushed for proof of stake and ethereum eventually merged and chose to go proof of stake so it was a big win for the polygon ecosystem when ethereum said hey proof of stake was correct let's save the world let's be more environmentally friendly um and also this year I'm really excited about the Denon upgrade what the denune upgrade did for the ethereum ecosystem was enable rollups to actually become kind of Center Stage because now rollups are faster cheaper and can store transient data um which this now enables that so we've moved from proof of work to proof of stake to this new Proto dank sharding um which you know we need to celebrate and we have to teach people about what's going on um but now this explosion of rollups who here is working on a rollup anybody great there's a couple people in the room people are now building l2s at an alarming rate um and the good news is that they're staying in the ethereum ecosystem ethereum has really built this strong base as a home for the entire blockchain industry whereas alts have not really grown so ethereum's ecosystem is massive and I think we can all agree we're here at eth Global so we might be a little biased but ethereum is the clear winner but it's getting more love than it can handle that scalability issue we've resolved the S scalability issue by implementing layer 2s layer 2 protocol calls have made ethereum scalable finally this is amazing we've reached this point in time where you can go and you can deploy on an L2 it's fast it's cheap we're really at a turning point in the blockchain space however we've created a problem who here knows the problem it's pretty clear on this screen we've fragmented all of the liquidity in our ecosystem so now all of our money is split up across l2s and now we have to pay extra fees to move money between those l2s so this is not a on site I made this up but there's a quadril Lima now we now have a liquidity problem how do we solve this liquidity problem well I'm going to tell you the solution we've already been working on it and it's called unified liquidity or aggregation we need to aggregate all the liquidity across all the l2s and l1s into one aggregation layer it needs to be something that everyone can agree on it needs to be a public good and this is the vision of polygon uh is to have aggregated blockchains and right now any polygon cdk chain who's here has used the chain development kit great the chain development kit lets you roll up your build your own rollup and I think I've seen it done in 10 minutes flat deploying your own blockchain you can now build your own L2 very quickly and it's becoming so common that we need to aggregate them back together and so now the polygon cdk chains are already going to natively be part of this Ager future of course we've got all the big brands that started with polygon but now we can bring all the other chains together so you don't just get these companies like Nike and Hello Kitty working on one single chain now they'll work across the entire Ager so if you bring your Ager chains together we're bringing a ton of new companies into the space and they're launching their l2s to connect to agair so this is the future I know I'm preaching but I think I'm preaching to the choir um and if you guys want to keep building on polygon or on any of the Ager chains the dabble Club is a spin out from polygon we are the super team for ethereum so we are here to help you whether you're building on polygon proof of stake ZK evm polygon miden AAR immutable any of the aggregated chains we want you to work with us um so I also want to encourage you guys to sign up uh to come to the a aggregation Summit so who's going to Thailand anyone going to Thailand woo let's go to Thailand so November 10th to 11th we're doing a major aggregation Summit so think of it as like L2 day but even B bigger and batter uh and then also maybe more urgently this weekend is the last time you can do to submit your pitch for pitching on stage in Thailand so if you go and submit your pitch this weekend while you're at the hackathon go submit for the pole Rush campaign and if you're you if you have the best pitch you'll be on stage at the aggregation Summit and you can pitch for as much money as you want did you I'm going to say that again you can pitch for a grant of any amount that you want that's pretty cool so let's let's let's lfg that um also I want to get people excited I'm wearing right here an open- Source AI wearable personal AI the future is not closed Source the future is open source particularly in the AI space we need to help them maintain privacy and we need to maintain open source so I'm giving these devices away to anyone that builds on polygon and I'm going to extend that to people who are online if you reach out to me I will help you get integrated and we will build something with this Omi device uh which is also known as friend you can build this this weekend and I will help you and the founder will come to the hackathon tomorrow and we will build something really amazing open source AI on the on chain um here's the QR code takes you to our notion with links to every single one of those things I talked about and I want to yield the rest of my time so you guys can learn about something else that's really exciting from the dev raal from dabble Club Mel AKA troop Jen troop d and come tell us what's going on exciting in your space thanks Colin uh thanks everyone so I hope you're ready to go through some code um we're going to go to uh how to build a frame in less than 20 minutes okay so I hope you're ready we're going to make it uh wag me of course uh so ml um trip dig and we're going to go to create that frame with polygon transactions um you have the full repository available uh and I'll show it in a bit but very very quickly so what are frames so if you go to to warcast you know forecaster who has a forecaster account here if you don't uh come back come by me and you're going to build uh just create your account and if you build on polygon and build a frame or just build on polygon uh will get that account for you refunded uh on polygon of course um but anyways um so here's what you can do on on farcaster foraster is a sufficiently decentralized uh social network and what's very cool about faster it enables applications built inside uh Publications so think of Twitter or Reddit uh whenever you have a post well mostly um these posts are read right right so you can just read and interact with it via replying but what if you could create a a frame a window into an application that you build yourself and you can build any custom experience inside of it you can do um onchain stuff you can do offchain database centralization and for example in this Frame what we're doing is allowing uh anyone to send some uh tokens for example this token is an near C20 token or you can also just send PL Matic and we're going to build this Frame very quickly um yeah so the full uh the foraster frames the way they work it's mostly an image this this image uh has to be has to have certain uh metadata TXS HTML txt uh if you know about web development like the open graph standard which is a little bit hidden um well foraster is using the open uh open graph standard to enable this uh frames creation but for us it's going to be very easy you can place images or build this images from code and you can uh put uh one input text at the most and up to four buttons and you can link different frames uh together to create an like a user flow and on the back end at the end for you as a developer or as a builder you can just do whatever you want it's a node js back end or a web server backend as long as you have like the the right tools and which we will use one that's very good you can connect the database you can connect to the blockchain and you can do uh use the existing uh foraster graph you know to check the followers check um channels which the users are subscribed to or they are members of with with the new implementation so it has a lot of potential um so right now let's see this is the uh GitHub repository for the live uh example you can uh everything that we're going to build here uh is available on GitHub so you can check the code it's very simple it's very easy but here's the the full repository and I'm going to move to to the actual um code so we're going to be using frog for this uh demo and we're going to be using uh npm which is fine and let's create a a very quick application here so let me zoom in this so we can see better name of the project let's call it e Global SF frames demo we're going to use the next uh JS template so we can deploy it more easily into versel let's switch to e Global F then we run npm install mhm and then after running the installation uh package we can open our vs code um and we can our or whatever editor we are using let waiting for a little bit there we go and we can run the development server right away over here let's open this and let's run the dev server so let me move around my windows so straight out of the box we have like working uh working demo of of a forecaster frame locally of course so we need to go to local 3000 API slev and that's going to be our uh the dev route under the API is going to be our route for working uh locally and whenever we deploy into uh versel we're going to be using using the API rout route uh route route uh so this is what um frog brings us out of the box so you can deploy this into into farcaster and you will have this functionality but we're going to be moving very fast because we have 17 more minutes so we already have a working uh foraster frame app and everything is going to happen inside the API uh route file so this works like a web server at the end of the day it's a web server for us so you point to our route and you get respon from uh the frame uh framework which is frog and depending on the route that you choose you can create different images or different experiences uh this one just needs to add the title e Global demo and this what's running and to make it easier you can also Place images you know we have the this is like instantiate the the Frog application that's going to be like our note or you use Express or this is built on top of hono so it's just a a web server and we are going to start declaring our routes so different routes uh if we want to link a frame to another for example right now we just have all all of this and whenever the user gets to the root route we got some some context object here uh that has a lot of utility you can get the the bottom values that the user clicks you can get the input text that uh the user enters and into the next frame you can get this data from the user so it works as a feedback mechanism for you and uh the values you can assign them to this is at the end of the day it's still note and you then return a response uh with the context method and first you declare an image you can use uh either HTML like um syntax if you've used uh CSS inside uh JavaScript no inside HTML something like this so in inline Styles or you can use frog UI which is the one that we're going to be using and as you can see here all of this code uh is created into an image so this is an image so uh frog uses sator on the on the back end to convert all of your code into images and this you can use the code AS HTML tax to create images or you can just grab a an image online say uh mang meme let's grab one here I love I love that it bites so copy image address this should work or you can replace the whole uh HTML for just an image URL something like this hold on and this has to be there we go and you can always just create your images on uh figma or something and you can place uh the the images as a URL and it gets it and you can also use images as background image that's also something possible so you can enable like very cool just B background I think you can check it on the documentation anyways so let's return to our code and we're going to be using well uh other than this we have all of these uh intents which is where the user interacts so you have one input field and you have up to four buttons so for example if I click this I have up to four buttons and you can use you know under under these constraints uh that's where your Innovation happens like how can I make this more fun how can I make this uh more interactive for my users how can I take advantage of X or Y so let's reset all of this and with the buttons is where we start doing things like um Target no action sorry so if you put this action and next or uh frame two and then you create a new um let's just copy and paste this so this way you can create the next frame so we said was frame two and let's just change this here so we have next and this one's going to be uh frame two it's just for illustration purposes um let's refresh our frame server now we have the next and if I click it I go to the next frame so this is very simple this is how you can create the flows so you can use different uh buttons to work as navigation or buttons to work as a specific actions so now the one uh that we want to do is sending madic which is a native token for Paul or rather poll uh the native token for polygon proof of stake and for this we are let's take a little deeper dive into frog and check the UI so we want to use this UI because it's way easier to to handle so we just need to create this file inside our app let's create let's copy this and under Source let just .ts yeah okay so let's place it here copy paste and then we just need to import it in our main application like so can copy this just make sure to add it to your app you need to add this meth uh this property or this object so that's what we're going to do in our main route we're going to import the elements that we just created and it's called ui. TS it's not finding it let's see so it's there we go and we have to add the UI here UI bars and now we can have like a much better if you've ever used uh chakra UI which is the one that I it reminds me of the of chakra and now instead of having to do all of these ugly inline Styles you have like a b um you know indication like more uh I don't know I like it more and this is a polygon um transactions frame and we're just going to say send some um tokens to double club and here over here I had this couple of constants so this is to enable uh not only native token to be sent but we will also be sending an erc20 token called Shock which is a Mexican stable coin deployed on polygon yeah and uh yeah let's remove a couple of these buttons um so let's say we're going to remove the input and um just let's let's put this like um y here send poll or send MXN which is Mexican stable coin and now here you would explain like okay um if we want to give like a small um explanation of why we built this Frame um so we can just put here this is a demo for E Global SF and this one is going to take you back this is necessary but I think we have enough time yeah we're running out of time and just remove all of this okay so right now we have two frames we have the first that just explains why and the second oh rather the first one is a root one it's like the introductory and the Y it takes you to the next frame okay so you go back and the back one should take you actually to root so do this so that's how we are creating some navigation you see and now we want to enable this send poll or send uh shock which is uh pesos and uh here we will be using um the transactions from frog FM so we can go here and check the bottom. transaction and we're going to enable uh first for for sending poll so let's let's put it here instead of this one we will be actually using the send pole one and we need to create these two frames first for send Paul and the other will be for send uh pesos you can also do uh USC yeah USD or usdc sorry so it just depends which usc2 token you want to to do in our case we are using shock and this is B on transaction and it can do like if you deploy a token you can use a dable bot to to deploy it and it goes through you and gives you the token address and you can just plug this address into the into here and that's how you can enable these transactions um so let's go very quickly to documentation see how we do the transaction so it's a very similar route you see the way you build it is very is extremely similar we're going to actually copy both because we're going to use one four uh the native token and one for um the year C20 token so send Paul is going to receive the two address this is who are we sending this add um this uh poll specifically so we're going to be using recipient address and the value let's set it part ether we need to I think there's an utility for this amazing and you can send one uh poll which is a 36 Cents or so right now and for the other one uh we just need an API uh for this we can just install beam or you can even install also ethers I like Fe a little bit more but it's just a matter of preference oh mpm beam and because we're going to be needing the erc20 AI you can use any custom so that's fine chain ID of course use polygon's chain ID which is 137 the function is going to be transfer it's a near C20 token so we're going to be able to access the transfer function the arguments we need to establish who are we sending it to and what's the value if you know the erc20 implementation so the first will be the recipient address and later part ether and we're going to hard code this into just a five which is uh also like 25 cents is of do a dollar and we need to send this uh transaction to the erc20 Token so we need that address to be set here and lastly we now should have the erc20 ABI perfect and ready and let's just switch the routes and as you can see we are only enabling two more buttons as a transaction button and setting the routes um and under our frame we create uh these transaction routes so what's happening is uh whenever the user hits the button of of one of our transaction buttons the the server is going to look for this transaction routes and send back to the user this uh this uh like transaction is uh data so you know chain ID to Value so it's captured and you know what what the foraster client does it takes the the transaction data and it triggers the wallet to send this um send this transaction so now we can refresh and now we see the small bolts on on the buttons so that means they are well I mean we're using the button the transaction and now you see that we have a transaction trigger here so um why is it switching to optimism we are doing something wrong here um this 137 oh my bad 37 here send poll send transaction okay now we good now we're good and now we get the one poll trans uh transfer you see uh we already are sending this uh transaction to our uh destination address and we can also do it for the erc20 token as well so now we get the confirmation and we are uh interacting with the nc20 token we also get this um this transactions sent and you see the transactions confirmed here you can view here and that's how you keep track of it um deployment is very easy I you just um let's see it's not going to give us time it's going to take some time to build but let's say get status get need oh yeah let's see if can make it in five or there are any questions uh you can you can start right now I'll try to deploy as fast as I can I don't think we can make it any questions on the frame implementation you know the frame is working we're sending poll we're sending uh shock your C20 so yeah um what you can do with this is just whatever your your imagination takes you to uh we explained a very simple one you can do minting here you can uh connect on the back end you know at the end of the day it's just the nextjs API so you can do whatever you want on the back end you can create a database uh where talks about doing some like chat uh AI uh chat with AI agents uh you can leverage AI to help you create user flows um create uh consumer experiences Collectibles uh what else like Commerce send link uh payment links via warcast or rather via firecaster as a message and it opens a frame and you can like charge uh your customers that way um just anything social leverage token mating and token gating together to access different channels and yeah you know if you have any idea or any questions you can also find us on the booth and lastly um you can also find all of these uh relevant this and more relevant content on our learn platform that's learn. double.

Club you have a a courses for this we have resources for building on polygon and on web 3 and yeah uh if that's all if nobody has any question uh that's that's a workshop and once again thank you very much here's the repository once again [Music]