{"id":"O7agjWP4Cvs","title":"How to Decentralize any Frontend with BOS - Kendall Cole - NEAR at ETHCC 2023","description":"Join NEAR's community:\nWebsite: https://near.org/\nReddit:   / nearprotocol  \nDiscord: https://near.chat/\nMedium:   / nearprotocol  \nBlog: https://near.org/blog/\nTwitter:   / nearprotocol  \nGitHub: https://github.com/near  https://github.com/nearprotocol\nDev Docs: https://docs.near.org/\nCreate a wallet: https://wallet.near.org/create\nApps on NEAR: https://awesomenear.com/\nLearn to Build On NEAR: https://www.near.university/\nGrants & Funding: https://near.org/grants/\n#Blockchain #FutureisNEAR #NEAR #nearprotocol\n#nft #dao","channel_name":"NEAR Protocol","published_at":"2023-07-21T00:00:00.000Z","thumbnail_url":"https://img.youtube.com/vi/O7agjWP4Cvs/hqdefault.jpg","transcript_text":"foreign my name is Kendall I'm one of the co-founders of proximity which is an ecosystem fund and research and development shop that supports the New York system and we are going to talk through how you can decentralize your front end or really any front end using the blockchain operating system so just to start off with the definition you've probably heard a few talks about the blockchain operating system today but just for those of you who may have missed it it's really two things one it's a common layer for browsing and discovering open web experiences that can work with any blockchain and maybe more simply and more directly for you developers out there it's a tech stack to build a fully decentralized application so what we wanted to do with the blockchain operating system is take basically the decentralization you can get by utilizing a smart contract to essentially have a distributed database and execution layer of sorts and bring that up to the rest of the stack the front end part of the stack so that now you can build these full stack decentralized applications uh so here's a high level overview of the stack and this looks a little bit daunting because it is a few different pieces but we'll walk through this pretty slowly just to give you a little bit of an overview at the highest level we have essentially the the what the user is interfacing with most directly that could be uh their wallet like metamask it could be kind of a headless wallet like Fast off which you may have heard a little bit about today or it could be kind of a specific targeted experience like a sweat sweat wallet below that you have a what's called a Gateway and the Gateway is almost a technical term in Boss it really means that it's an application that's running the specialized virtual machine that powers the the boss technology below that you have what you'll recognize as a bunch of the dapps that most users are aiming to interface with um when they're interacting with web3 that could be like a uniswap openc lens the sky's the limit there below that you have essentially a lot of the data and the data layer and communication layer with the blockchains that's RPC that's some kind of layers on top of our PC like an indexer to make you know indirect interacting with these applications easier for developers and more performant for users and then below that finally you have the blockchains and so in many cases with boss you'll actually be interacting with at least two blockchains you could just be interacting with the single one the near blockchain where you have your entire front end deployed on near and also have the smart contracts on there or you could have you be using the near blockchain for your front end and then ethereum or another layer one or even Layer Two where like the smart contracts and execution layer is happening so one of the biggest goals we had with Boston also one of the things we find the most exciting is that we actually think we've solved the some of the different trade-offs that makes it so that decentralization can actually increase your distribution and vice versa like typically the more decentralized Your solution is the harder it can be to get distribution uh in the case of Boss the more distribution we can actually achieve by getting more and more different user-facing applications to integrate with boss and then the flip side getting more and more decentralized applications to to build for boss we can actually increase the distribution and increase the decentralization like the more of these interfaces and access points that we have for users the greater the greater decentralization you'll have for uh for users and at the same time more distribution for for developers um so to make it really really simple we'll walk through an example of deploying an app so let's say that you're a developer and you're going to deploy a smart contract to ethereum something very very typical that everyone is probably done in this room uh now you're going to deploy your front end code in this case uh jsx which is just a kind of react templating language you're going to deploy that to the near blockchain and then most importantly this these two pieces are going to talk to each other and we'll walk through exactly how that happens in the next example now what's really cool is that with boss we actually take it so that it the whoever is deploying the application it doesn't just have to be a single developer anymore it can actually be a Dao so just like how you have a dow say the Ave Dao that deploys the smart contracts and manages the upgrade and the life cycle of a smart contract on the ethereum blockchain now that same down can actually manage their front end on the near blockchain and they can do this using their familiar Dow process so we envision a world in which pretty much every single smart contract and front end are actually managed by by the same dial so you could have uniswap managing their front end and their smart contracts Ave doing the same thing etc etc which you think is one of the most compelling parts of of this this process now to walk you through how a user is going to interact with uh with a with adapt and also walk you through some of the data flows let's imagine that we have a user who's first going to navigate to some kind of interface that they're familiar with to interact with the blockchain uh the most common one right now is going to be something like near.org which you can go to today and search for a bunch of applications for several different blockchains and use them right there we just actually announced that orbit is going to be running a Gateway which you're excited about for all of you kind of uh orbit fans out there and then maybe something way more common is going to be metamask or even like a zapper or a xerion a rainbow any of these just applications people are already treating as kind of their their window into the web that's what we call a Gateway so you first you go there then you probably want to select adapt to use so these are four examples of existing apps that you can use today on the blockchain operating system so let's say in this case that you want to use unisop so you've gone to metamask you've selected then uniswap now what's going to happen is the front end for unisop is going to be loaded from near and so basically through an RPC request uh the front end is going to fetch uh and retrieve the unisop front-end source code which is jsx it's then going to be rendered in that specialized virtual machine that we talked about before and presented to the user so now the user is actually viewing the unisop interface without actually interacting with like DNS or some kind of URL um which is pretty cool so next we're going to maybe decide to do a trade so let's say they're going to like swap usdc for if they want to buy some meat so then there's going to be a transaction issued to the near ethereum blockchain uh using an RPC request so you have the interface that's been loaded from near that the user's like viewing the actions they can perform with and then they're going to actually send a transaction to ethereum and you can imagine that ethereum can be any blockchain this is entirely blockchain agnostic right now there's really good support for evm blockchains but we already have a few teams we're working on Cosmos support and and we expect that any popular blockchain will have support for the blockchain operating system before too long uh and the best part is that it's really really easy to get started so if you go to near.org you can search for really any application you want I recommend searching for a few of these whether it's like a swap Ave Lido or even just generalized Bridge components we have bridges that are supported for a few different blockchains you can then click Fork you can actually like see when you first search for the application you'll see the source code for the application you can view that in the browser just like you would view source code for a smart contract on etherscan you can click Fork then you'll create your own copy of it make whatever changes you want maybe you want to change the blockchain that Avi is pointing to take it from ethereum to polygon or you want to just completely redo the entire thing really up to you and then and then you can click save and when you click save it's actually going to deploy this these changes these State changes to the near blockchain and also give your account complete control over this application so if you want here's where you can actually swap out control from like an end developer to a dow for instance so this can be managed in more of like a community way um and and something you'll hear us reiterate a lot is that uh one of the really key components of this entire thing is composability and what's really really cool is that every single component and application that you build can actually be composed into higher order applications with other applications and they can even pass data to each other just like you would with react and we'll go through some code to show you how that can work um so yeah here we go as you'll notice on this side of me that code probably looks a lot like react if you're familiar with react you can see a few different named components in there you can see uh you can pass props to another component and in this case you'll see widget as the tag there that's actually a different application so like that could be Ave like unisop's front end passing uh information to obvious front end for instance um which is pretty cool so just to dive in a little bit deeper let's look at one specific component here this each balance component so what this component is aiming to do is just something very simple uh read a provider like use it so ethersjs is included out of the box so you can use the get provider function from ethersjs to detect an injected provider like metamask um you can then get the get the the account of the user you can then query the blockchain using the get balance function there from ethers and then render this balance so something very simple should be pretty familiar to any of you who have worked with ethercias before and even if you've only worked with web3's yes or something like that pretty straightforward uh pretty straightforward thing to do and then similar to in react when you trigger some kind of update to state or props it's going to re-render the component so pretty familiar react like life cycle for your front end nothing too surprising here and then here we can actually look at an example that's going to be sent sending a transaction to the ethereum blockchain so again if you're familiar with doing this in ethers it's it's going to be the same process here you'll notice that um we're just setting the the address of the Lido contract encoding some data in the way the code data for any ethereum transaction and then just calling that smart contract with that data getting your results and then updating the UI to display that result to the user here's where it gets a little more interesting as we mentioned you can embed these different components and it works very similarly to how you'd be embedding components in react so the most the simplest thing to do is just going to be passing props between these different components and then as you can see here what's cool is like this is a lower order component but it'll actually be aware of the higher order component that has uh essentially like handled the web3 connection for the user so you only have to have the user connect their wallet one time and then they can use a bunch of different applications and and uh here's where you'll you'll still see that in a second like where where that gets really interesting uh and it just finally is like a point to show you how easy this is we've uh built in styled components as well so you can easily just use the CSS Frameworks that you're familiar with and to style your components and you know make add your own design language so you can you can take a component that say like the Ave team has built and then you can uh like reskin that with the with the design language of your application so if you're say a a mobile app that has you know your own kind of design language and you want to build in some native functionality for a variety of different applications without having to do all this work yourself and like Implement all this logic and learn how the smart contracts work you can actually just take the the components that those core teams have built re-skin them using these style components and then you have what feels to your users like a native component but you haven't had to re-implement any of this core logic which should make the that life that life a lot easier for these type of Developers all right so now getting to the fun part and showing you how this composability really works uh you may have seen this teased on social media a little bit but on Tuesday we are going to be announcing a collaboration with polygon and several teams in their ecosystem many of which you might uh recognize these are a couple of the ones that will be launching and one that's coming a little bit later basically we're going to be launching a fully interactive polygon ZK evm dashboard so this is going to be a Gateway that will be hosted by the quick swap team it'll have several of the top zkevn dapps that'll have their components running on boss and it's actually going to be the easiest way to use the ZK VM ecosystem not only will you be able to find and discover the different applications that are available to you you'll be able to then connect your wallet one time and use all of these in a single place you don't have to go to any different websites or anything and you can even view the source code for each of these just to make sure that you're comfortable with it and you know exactly what it is that you'll be interacting with and then maybe what's what's really exciting writing is that this can eventually be managed by say the polygon community and continually be updated and evolve as more and more applications launch in their ecosystem so just to give you a little bit of an insight into what it's going to look like or real URL for all of you to try it out on Tuesday this is going to be the home page up here so as you can see user will land they'll immediately see the bridge on on the right they can interact with that just in this page they don't have to go anywhere else then they can swap they can they can swap on quick swap or it actually have a variety of different swap applications then maybe they want to try out like balancer and provide some some uh some liquidity there they'll be able to do that so here's an example if you were like click on quick swap for instance you'll then like see or this is the bridge but you'll be able to like see the full screen application you haven't changed the URL anything this is still on on that main gateway and you'll also be able to then click into say like Ave and and and use that application um so we we're really excited about it because it's going to be it basically it's a demonstration of the power of boss and how we can help ecosystems any ecosystem decentralize their front ends and and also create a better user experience for for the applications and uh yeah it's just been really fun to to start working with uh some of these other ecosystems in a more collaborative way um so yeah on Tuesday just I'd recommend following the the near protocol account you can also follow proximity Phi uh which is our account and uh and probably polygon as well and you'll be able to get the URL and then and then try this out and yeah that's what I have for you guys today so I'll let everyone go a little bit early unless anyone has questions","transcript_synced_at":"2026-11-04T03:46:59.599Z","segments":[{"start_seconds":4,"text":"foreign my name is Kendall I'm one of the co-founders of proximity which is an","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=4s"},{"start_seconds":13,"text":"ecosystem fund and research and development shop that supports the New York system and we are going to talk through how you can decentralize your","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=13s"},{"start_seconds":21,"text":"front end or really any front end using the blockchain operating system so just to start off with the definition you've probably heard a few talks about","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=21s"},{"start_seconds":30,"text":"the blockchain operating system today but just for those of you who may have missed it it's really two things one it's a common layer for browsing and","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=30s"},{"start_seconds":37,"text":"discovering open web experiences that can work with any blockchain and maybe more simply and more directly for you developers out there it's a tech stack","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=37s"},{"start_seconds":44,"text":"to build a fully decentralized application so what we wanted to do with the blockchain operating system is take basically the decentralization you can","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=44s"},{"start_seconds":52,"text":"get by utilizing a smart contract to essentially have a distributed database and execution layer of sorts and bring that up to the rest of the stack the","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=52s"},{"start_seconds":60,"text":"front end part of the stack so that now you can build these full stack decentralized applications uh so here's a high level overview of","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=60s"},{"start_seconds":67,"text":"the stack and this looks a little bit daunting because it is a few different pieces but we'll walk through this pretty slowly just to give you a little bit of an overview at the highest level","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=67s"},{"start_seconds":75,"text":"we have essentially the the what the user is interfacing with most directly that could be uh their wallet like","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=75s"},{"start_seconds":82,"text":"metamask it could be kind of a headless wallet like Fast off which you may have heard a little bit about today or it could be kind of a specific targeted","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=82s"},{"start_seconds":89,"text":"experience like a sweat sweat wallet below that you have a what's called a Gateway and the Gateway is almost a technical term in Boss it really means","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=89s"},{"start_seconds":98,"text":"that it's an application that's running the specialized virtual machine that powers the the boss technology below that you have what you'll recognize as a","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=98s"},{"start_seconds":107,"text":"bunch of the dapps that most users are aiming to interface with um when they're interacting with web3 that could be like a uniswap openc lens","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=107s"},{"start_seconds":115,"text":"the sky's the limit there below that you have essentially a lot of the data and the data layer and communication layer","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=115s"},{"start_seconds":122,"text":"with the blockchains that's RPC that's some kind of layers on top of our PC like an indexer to make you know indirect interacting with these","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=122s"},{"start_seconds":129,"text":"applications easier for developers and more performant for users and then below that finally you have the blockchains and so in many cases with boss you'll","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=129s"},{"start_seconds":138,"text":"actually be interacting with at least two blockchains you could just be interacting with the single one the near blockchain where you have your entire front end deployed on near and also have","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=138s"},{"start_seconds":146,"text":"the smart contracts on there or you could have you be using the near blockchain for your front end and then ethereum or another layer one or even","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=146s"},{"start_seconds":153,"text":"Layer Two where like the smart contracts and execution layer is happening so one of the biggest goals we had with Boston also one of the things we find","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=153s"},{"start_seconds":161,"text":"the most exciting is that we actually think we've solved the some of the different trade-offs that makes it so that decentralization can actually","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=161s"},{"start_seconds":170,"text":"increase your distribution and vice versa like typically the more decentralized Your solution is the harder it can be to get distribution uh","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=170s"},{"start_seconds":178,"text":"in the case of Boss the more distribution we can actually achieve by getting more and more different user-facing applications to integrate with boss and then the flip side getting","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=178s"},{"start_seconds":186,"text":"more and more decentralized applications to to build for boss we can actually increase the distribution and increase the decentralization like the more of","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=186s"},{"start_seconds":193,"text":"these interfaces and access points that we have for users the greater the greater decentralization you'll have for uh for users and at the same time more","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=193s"},{"start_seconds":201,"text":"distribution for for developers um so to make it really really simple we'll walk through an example of deploying an","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=201s"},{"start_seconds":208,"text":"app so let's say that you're a developer and you're going to deploy a smart contract to ethereum something very very typical that everyone is probably done","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=208s"},{"start_seconds":217,"text":"in this room uh now you're going to deploy your front end code in this case uh jsx which is just a kind of react","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=217s"},{"start_seconds":225,"text":"templating language you're going to deploy that to the near blockchain and then most importantly this these two pieces are going to talk to each other","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=225s"},{"start_seconds":233,"text":"and we'll walk through exactly how that happens in the next example now what's really cool is that with boss we","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=233s"},{"start_seconds":240,"text":"actually take it so that it the whoever is deploying the application it doesn't just have to be a single developer anymore it can actually be a Dao so just","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=240s"},{"start_seconds":248,"text":"like how you have a dow say the Ave Dao that deploys the smart contracts and manages the upgrade and the life cycle of a smart contract on the ethereum","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=248s"},{"start_seconds":257,"text":"blockchain now that same down can actually manage their front end on the near blockchain and they can do this using their familiar Dow process so we","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=257s"},{"start_seconds":266,"text":"envision a world in which pretty much every single smart contract and front end are actually managed by by the same dial so you could have uniswap managing","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=266s"},{"start_seconds":274,"text":"their front end and their smart contracts Ave doing the same thing etc etc which you think is one of the most compelling parts of of this this","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=274s"},{"start_seconds":282,"text":"process now to walk you through how a user is going to interact with uh with a with adapt and also walk you through some of the data flows let's imagine that we","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=282s"},{"start_seconds":291,"text":"have a user who's first going to navigate to some kind of interface that they're familiar with to interact with the blockchain uh the most common one","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=291s"},{"start_seconds":300,"text":"right now is going to be something like near.org which you can go to today and search for a bunch of applications for several different blockchains and use","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=300s"},{"start_seconds":307,"text":"them right there we just actually announced that orbit is going to be running a Gateway which you're excited about for all of you kind of uh orbit","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=307s"},{"start_seconds":315,"text":"fans out there and then maybe something way more common is going to be metamask or even like a zapper or a xerion a rainbow any of these just applications","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=315s"},{"start_seconds":322,"text":"people are already treating as kind of their their window into the web that's what we call a Gateway so you first you go there then you probably want to","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=322s"},{"start_seconds":330,"text":"select adapt to use so these are four examples of existing apps that you can use today on the blockchain operating system so let's say in this case that","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=330s"},{"start_seconds":338,"text":"you want to use unisop so you've gone to metamask you've selected then uniswap now what's going to happen is the front","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=338s"},{"start_seconds":346,"text":"end for unisop is going to be loaded from near and so basically through an RPC request uh the front end is going to","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=346s"},{"start_seconds":353,"text":"fetch uh and retrieve the unisop front-end source code which is jsx it's then going to be rendered in that specialized virtual machine that we","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=353s"},{"start_seconds":361,"text":"talked about before and presented to the user so now the user is actually viewing the unisop interface without actually interacting with like DNS or some kind","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=361s"},{"start_seconds":369,"text":"of URL um which is pretty cool so next we're going to maybe decide to do a trade so let's say they're going to like swap","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=369s"},{"start_seconds":376,"text":"usdc for if they want to buy some meat so then there's going to be a transaction issued to the near ethereum blockchain uh using an RPC request so","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=376s"},{"start_seconds":386,"text":"you have the interface that's been loaded from near that the user's like viewing the actions they can perform with and then they're going to actually send a transaction to ethereum and you","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=386s"},{"start_seconds":394,"text":"can imagine that ethereum can be any blockchain this is entirely blockchain agnostic right now there's really good support for evm blockchains but we already have a few teams we're working","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=394s"},{"start_seconds":403,"text":"on Cosmos support and and we expect that any popular blockchain will have support for the blockchain operating system before too long","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=403s"},{"start_seconds":410,"text":"uh and the best part is that it's really really easy to get started so if you go to near.org you can search for really any application you want I recommend","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=410s"},{"start_seconds":419,"text":"searching for a few of these whether it's like a swap Ave Lido or even just generalized Bridge components we have bridges that are supported for a few","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=419s"},{"start_seconds":426,"text":"different blockchains you can then click Fork you can actually like see when you first search for the application you'll see the source code for the application you can view that in the browser just","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=426s"},{"start_seconds":435,"text":"like you would view source code for a smart contract on etherscan you can click Fork then you'll create your own copy of it make whatever changes you","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=435s"},{"start_seconds":443,"text":"want maybe you want to change the blockchain that Avi is pointing to take it from ethereum to polygon or you want","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=443s"},{"start_seconds":450,"text":"to just completely redo the entire thing really up to you and then and then you can click save and when you click save it's actually going to deploy this these","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=450s"},{"start_seconds":459,"text":"changes these State changes to the near blockchain and also give your account complete control over this application so if you want here's where you can","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=459s"},{"start_seconds":466,"text":"actually swap out control from like an end developer to a dow for instance so this can be managed in more of like a community way","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=466s"},{"start_seconds":475,"text":"um and and something you'll hear us reiterate a lot is that uh one of the really key components of this entire thing is composability and what's really","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=475s"},{"start_seconds":483,"text":"really cool is that every single component and application that you build can actually be composed into higher order applications with other applications and they can even pass data","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=483s"},{"start_seconds":492,"text":"to each other just like you would with react and we'll go through some code to show you how that can work um so yeah here we go as you'll notice","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=492s"},{"start_seconds":501,"text":"on this side of me that code probably looks a lot like react if you're familiar with react you can see a few different named components","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=501s"},{"start_seconds":508,"text":"in there you can see uh you can pass props to another component and in this case you'll see widget as the tag there that's actually a different application","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=508s"},{"start_seconds":516,"text":"so like that could be Ave like unisop's front end passing uh information to obvious front end for instance","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=516s"},{"start_seconds":522,"text":"um which is pretty cool so just to dive in a little bit deeper let's look at one specific component here this each balance component so what this component","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=522s"},{"start_seconds":530,"text":"is aiming to do is just something very simple uh read a provider like use it so ethersjs is included out of the box so","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=530s"},{"start_seconds":538,"text":"you can use the get provider function from ethersjs to detect an injected provider like metamask","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=538s"},{"start_seconds":545,"text":"um you can then get the get the the account of the user you can then query the blockchain using the get balance function there from ethers and then","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=545s"},{"start_seconds":554,"text":"render this balance so something very simple should be pretty familiar to any of you who have worked with ethercias before and even if you've only worked","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=554s"},{"start_seconds":562,"text":"with web3's yes or something like that pretty straightforward uh pretty straightforward thing to do and then similar to in react when you trigger","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=562s"},{"start_seconds":571,"text":"some kind of update to state or props it's going to re-render the component so pretty familiar react like life cycle for your front end nothing too","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=571s"},{"start_seconds":579,"text":"surprising here and then here we can actually look at an example that's going to be sent sending a transaction to the ethereum blockchain so again if you're","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=579s"},{"start_seconds":587,"text":"familiar with doing this in ethers it's it's going to be the same process here you'll notice that um we're just setting","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=587s"},{"start_seconds":595,"text":"the the address of the Lido contract encoding some data in the way the code data for any ethereum transaction and then just calling that smart contract","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=595s"},{"start_seconds":603,"text":"with that data getting your results and then updating the UI to display that result to the user here's where it gets a little more","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=603s"},{"start_seconds":612,"text":"interesting as we mentioned you can embed these different components and it works very similarly to how you'd be","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=612s"},{"start_seconds":619,"text":"embedding components in react so the most the simplest thing to do is just going to be passing props between these different components and then as you can","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=619s"},{"start_seconds":627,"text":"see here what's cool is like this is a lower order component but it'll actually be aware of the higher order component","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=627s"},{"start_seconds":634,"text":"that has uh essentially like handled the web3 connection for the user so you only have to have the user connect their wallet one time and then they can use a","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=634s"},{"start_seconds":642,"text":"bunch of different applications and and uh here's where you'll you'll still see that in a second like where where that gets really interesting uh and it just","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=642s"},{"start_seconds":650,"text":"finally is like a point to show you how easy this is we've uh built in styled components as well so you can easily just use the CSS Frameworks that you're","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=650s"},{"start_seconds":658,"text":"familiar with and to style your components and you know make add your own design language so you can you can take a component that say like the Ave","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=658s"},{"start_seconds":665,"text":"team has built and then you can uh like reskin that with the with the design language of your application so if","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=665s"},{"start_seconds":672,"text":"you're say a a mobile app that has you know your own kind of design language and you want to build in some native functionality for a variety of different","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=672s"},{"start_seconds":680,"text":"applications without having to do all this work yourself and like Implement all this logic and learn how the smart contracts work you can actually just take the the components that those core","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=680s"},{"start_seconds":689,"text":"teams have built re-skin them using these style components and then you have what feels to your users like a native component but you haven't had to","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=689s"},{"start_seconds":696,"text":"re-implement any of this core logic which should make the that life that life a lot easier for these type of Developers","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=696s"},{"start_seconds":703,"text":"all right so now getting to the fun part and showing you how this composability really works uh you may have seen this teased on social media a little bit but","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=703s"},{"start_seconds":712,"text":"on Tuesday we are going to be announcing a collaboration with polygon and several teams in their ecosystem many of which","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=712s"},{"start_seconds":719,"text":"you might uh recognize these are a couple of the ones that will be launching and one that's coming a little bit later basically we're going to be","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=719s"},{"start_seconds":726,"text":"launching a fully interactive polygon ZK evm dashboard so this is going to be a Gateway that will be hosted by the quick","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=726s"},{"start_seconds":733,"text":"swap team it'll have several of the top zkevn dapps that'll have their components running on boss and it's","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=733s"},{"start_seconds":740,"text":"actually going to be the easiest way to use the ZK VM ecosystem not only will you be able to find and discover the different applications that are","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=740s"},{"start_seconds":748,"text":"available to you you'll be able to then connect your wallet one time and use all of these in a single place you don't have to go to any different websites or anything and you can even view the","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=748s"},{"start_seconds":756,"text":"source code for each of these just to make sure that you're comfortable with it and you know exactly what it is that you'll be interacting with and then maybe what's what's really exciting writing is that this can eventually be","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=756s"},{"start_seconds":765,"text":"managed by say the polygon community and continually be updated and evolve as more and more applications launch in their ecosystem so just to give you a","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=765s"},{"start_seconds":773,"text":"little bit of an insight into what it's going to look like or real URL for all of you to try it out on Tuesday this is going to be the home page up","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=773s"},{"start_seconds":781,"text":"here so as you can see user will land they'll immediately see the bridge on on the right they can interact with that just in this page they don't have to go","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=781s"},{"start_seconds":789,"text":"anywhere else then they can swap they can they can swap on quick swap or it actually have a variety of different swap applications then maybe they want to try out like balancer and provide","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=789s"},{"start_seconds":797,"text":"some some uh some liquidity there they'll be able to do that so here's an example if you were like click on quick swap for instance you'll then like see","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=797s"},{"start_seconds":805,"text":"or this is the bridge but you'll be able to like see the full screen application you haven't changed the URL anything this is still on on that main gateway","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=805s"},{"start_seconds":812,"text":"and you'll also be able to then click into say like Ave and and and use that application","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=812s"},{"start_seconds":820,"text":"um so we we're really excited about it because it's going to be it basically it's a demonstration of the power of boss and how we can help ecosystems any","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=820s"},{"start_seconds":827,"text":"ecosystem decentralize their front ends and and also create a better user experience for for the applications and uh yeah it's just been really fun to to","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=827s"},{"start_seconds":835,"text":"start working with uh some of these other ecosystems in a more collaborative way um so yeah on Tuesday just I'd recommend","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=835s"},{"start_seconds":843,"text":"following the the near protocol account you can also follow proximity Phi uh which is our account and uh and probably polygon as well and you'll be able to","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=843s"},{"start_seconds":851,"text":"get the URL and then and then try this out and yeah that's what I have for you guys today so I'll let everyone go a little bit early unless anyone has questions","url":"https://www.youtube.com/watch?v=O7agjWP4Cvs&t=851s"}],"youtube_url":"https://youtube.com/watch?v=O7agjWP4Cvs","url":"https://near-pedia.xyz/videos/O7agjWP4Cvs"}