Interoperability via the Rainbow Bridge - Chad Ostrowski

Transcript

all right well up next we have uh near protocol and uh we have chad who's gonna be joining us here shortly so there he is hey chad oh can you hear me i can hear you can you hear me i can hear you it seems like we're good and yes i do have a screen share look at that you can see it now i don't have a second screen so i'm not going to be able to see any of the chat while i'm presenting so uh fellow near peeps i hope you got me covered thanks i'm gonna start the presentation now all right thank you for letting me know you're here before i switch away all right ethereum and near sitting in a tree

b-u-i-d-l-i app developers this is for you we want you to help us put some finishing touches on our rainbow bridge client library it is not released yet i was hoping to have a beta version of it by now but um if i had been presenting at the end of next week maybe i would have been able to manage that but not quite there not in time for today so maybe you can help us get it across the finish line that's that's another option so uh what this talk is going to be is we're going to demo what the rainbow bridge ui looks like still some rough edges on this as well but it should be good today talk about what you can do with a rainbow bridge um and talk about some key concepts and then

the four easy steps you need to add this bridge to your own app talk about the roadmap where this is headed uh and then hopefully some time for some q a so let's get into it um this is running on robsten so if you have metamask or brave with crypto wallets make sure you're on the ropsten test network you also need some robson eth and there are some test tokens that you can get literally tst all of this info is in the last slide in this presentation so again shadow dot com slash rainbow bridge talk will get you these slides um let's go ahead and connect metamask b412 i'm going to connect to near

the way near connects is it redirects to the near wallet so we're going to be connecting to the near test net as well if you make a testnet account it'll probably have a dot test net on it back when when i was first using test net that was not the case so i got this sleek one without the dot test net so let's go ahead and begin a new transfer so on robsten we've got this tst token i have 83 of them let me just send one across i i don't know if y'all have used metamask in full screen mode this is going to be a little bit janky when the metamask pops up metamask pop-up literally takes an entire screen of its own so that's what you'll see here

confirm we end up back here so this is now this is a multi-step process to for an asset to go across the bridge first you block it in ethereum you can see that this transaction was approved already um or the the transaction was mined already the approval transaction was mined and now we need to lock it so let's go ahead and do that this will all be explained a little bit more soon so this is if you're familiar with sending erc20s it's a two-step process in general so that's what you're seeing here i'm sending my tst tokens to this token locker contract all right so um if it were easy to add cross chain

uh functionality to your own app what sort of things would you do with it the ones i can think of that we've talked about that we're excited to see people build is using erc20 tokens in near where block times are fast and transaction fees are cheap um there are already there's at least one project that i know of that's already doing this with dye um we do have the bridge was running on mainnet and we'll be running again on mainnet soon after some upgrades um and this this app right now does not use mainnet again it will soon uh right now it's rob stone only for this ui by the way the ui is at near.github dot io

slash rainbow bridge front end very memorable i know and that will also be improved but anyhow you're seeing it uh in progress here but you can already send tokens across the bridge using the cli and then send them back to ethereum again so anyway other ideas you could let users make nfts in near again where transaction fees are cheap and we have a great account name system that matlocker is going to be talking about tomorrow at the same time um where you can make it really transparent to users that they're even using blockchain so it's easy to get users set up making nfts and then if they make awesome artwork that they want to send across to ethereum where they can list it in

larger marketplaces that's totally doable you could let users balance liquidity and arbitrage across markets in both chains and more what are your ideas i wish i could see the chat while i also leave this open but uh maybe can one of my teammates join me on stage and kind of like be the moderator in the chat is that something we can we can do here like that would be great to have like matt locker or peter depaulo or someone else like can the facilitator here pull one of them up here so they can just chime in when i ask for audience participation all right well we'll see if that happens but anyway i'm excited to see

what your ideas are and what you're going to build all right so uh we're ready to mint in near let's find out what that means right all right i told you this is this can be done in four easy steps so like we want to get started and building but we need some key concepts first um so let's talk about how the bridge works first of all you have clients like clients we have a eth-on-near light client that keeps track of the that is an actual full light client implemented as a smart contract on mir and then external relay that sends trans sends all of the block headers over to the near blockchain where it keeps track of the entire ethereum blockchain

or enough of it to like do this sort of stuff in a secure way um and then the same thing in reverse we have a light client a near on eth like client running over on ethereum and an external relay that pipes everything across this is what that looks like again over here on near we've got the ethon near client and the ethereum headers being piped over here in ethereum we've got the near on each client and the headers being piped over the current implementation requires this watchdog service so when things are sent from near back to ethereum this is because the cryptograph the cryptographic algorithm that mir uses is called

ed25519 it's not available as a uh preset print i forget what they're called on ethereum but anyway it's not available on ethereum yet but we're working on improving the bridge architecture so we can actually get rid of this and make makes transact make transfers from near to ethereum much faster but that's the basic that's the core of the architecture you've got a client on each side next step one level out from that you've got provers and the provers uh you submit a proof to them you say this happened this event was emitted in ethereum and it will say yes confirmed it was and it'll use the information in the client in

order to prove it um or no that didn't happen so like you can't mint because the user would have you know double spend abilities um so right now the provers that we've implemented that we maintain is the eth-on-near event prover you can prove that an event was emitted in ethereum and on the ethereum side you can prove that a near transaction execution outcome was what you expect we may write other provers in the future you are also able to write other provers though this talk is intended for app developers so this might not be uh the audience i am speaking to right now might not be the ones going out and

writing these provers but someone could go write their own proverb um finally the last step you've got connectors connectors come in pairs you've got something like the token locker over on ethereum and then you've got a mintable fungible token over on mirror and walking through that step by step right fungible token connector you could have a non-fungible token connector fungible token connector could send from erc20 on ethereum to our current standard is any p21 there's been lots of great community discussion about a new token standard that will also be launched before the v1 of this library and then obviously you can also go back

again so the way that looks i'll let you read this while i sip water i allowed the token locker to transfer my tst or my die the token locker then transfers ownership of that tst or die to itself you wait for sufficient confirmations on the ethon near client that's the ten blocks and then you mint it in near and when you mint it you submit proof of the event to the mintable fungible token near is an asynchronous blockchain so it's that contract on the next it's going to take a few blocks for this transit transaction to complete but it's you're

going to submit a proof of that event and then it's going to make a cross-contract call to the approver which is going to make a cross-contract call to the client and then it's all going to come back and finish up and mint a token for you so let's try it fingers crossed this has had about a 25 success rate in my testing so far we just recently got the bridge running on roxton after being down for a long time um and it almost seems like this is non-deterministic that this works sometimes not others so let's see if it works this time for the demo usually it hits an error about here ah look at that

first try all right so we we went through all of those sets this has it in five steps uh this only hasn't been four again because this is um this is one contract call and then the contract itself is making a cross-contract call okay so we've got clients approvers connectors the connectors come in pairs like token locker mintable fungible token note here that we have two chains and four directions that you can send assets in you can have ethereum as an origin where you have a fungible token on ethereum bridged to a fungible token on near and then you send that bridged token back where it becomes a natural token

natural fungible token on ethereum again and the same thing in reverse functional token on here to bridge fungible on ethereum bridged on ethereum back to natural token on mirror uh the naming of this starts to be a problem pretty quickly right it's like a lot of concepts to keep straight and this is something that i would actually like all of y'all's feedback on um our best guess at what to call these directions and this will be used throughout the rest of the talk is natural erc20 to any p21 and then bridge to mep21 back to erc20 that part right bridge to

nap21 it's a little bit isn't it a bridge drc 20 though but it's really important that we specify that it's an nep21 because it's just a bridged erc20 well where does that live does it live on solana or polka dot uh does it live on near but it's an ep 141 not an ep 21 right we want to know what kind of token it is what kind of interface it has the bridged modifier is about where it started its life the bridged or natural right is it is it where it was born or has it migrated that's that's what we're finding that's what we're saying with this part and then this part is what it is now that's my best guess but do you like this notation if you go

to near dot a i slash slido slide do i'm not sure how this company wants us to pronounce their name but go to that link near dot a i slash slido and you can vote we've got a few options of what we think maybe this should be called all right so go ahead pop in there and i think you will start to see the as you answer the question you'll start to see it pop up on my screen what all of your answers are so go ahead near.ai slash slido and vote on what you think makes sense to call these things twitch peeps you can do the same thing near.ai

slido and you can vote on what you think this should be called i'm not confident that anyone has successfully visited that link as i see nothing popping in someone please answer so i know that it worked no all right i'm gonna check the chat what's happening slidoo thank you ozymandias um has anyone actually has anyone made it there yeah i don't believe so actually has

anyone made it there you should be able to answer this now ah there are there are votes votes rolling in great why can't i actually see it though isn't slido supposed to show me this stuff hide results show results hmm next question select a poll ah all right i think it's because i'm in this goofy mobile view that's what's happening ah bridge nep21 my favorite

also has the plurality right now so if you want something else let us know what it is what are other ideas near to erc20 nerk 20. ooh nerc 20 that might mean something else we're not going to get into that in this talk but that we need that name we need that name for something else uh cool well um i am gonna call this 15 of y'all voted i think maybe more votes keep rolling in bridged nep 21 pulling far ahead of the pack let's just call it there if you didn't get to vote and he wanted to again near dot ai

slido but we're short on time so i'm gonna go ahead and wrap that one up thanks for voting all right we'll have another vote soon if you didn't get to participate in that one you can stay in that slido link and we will uh have another one soon so two chains four directions depends on which origin you're talking about and then back and forth from that origin um this is the next naming thing that i want to talk about do we call if you're sending die to near once it's on near is it die to the end and then die and back to die if you start on near and you go from banana tokens which you can mine at berry club dot io and you send them to ethereum is it

banana to the e we've got some great choices here i think you'll one some of the other ones other than this might be your favorite go ahead to near.ai slido and you can check it out i will hit start on that one and let's see no one has voted yet ah was that you matt is that matlock you're voting i guess i have no way of knowing um well and i to the 21 is the clear winner nope not the clear winner anymore

what's the other oh yeah wasm dye and evm die but that doesn't specify which chain it's on we've got to specify the chain and if it's evm or blossom that's we have an evm y'all so whoever whoever said that knows something about our evm uh and i21 but there would be a way to specify evm in here don't worry this notation is the all of these notations are flexible enough to allow specifying whether it's in our walls and runtime or evm runtime okay all right thank you all for voting what are we out there we're at 14 we got 17 on the last one so that's

three of you who voted before who still haven't here maybe you're thinking about it i'll give you another 15 seconds no not going to make up your minds all right that's it we've got endai to the 21 very cool very cool all right uh great can i see the results here no i don't know how to see the results but anyway cool thank you that's super helpful um all right so back to those four easy steps let's see how to add this to your

app step one you're going to need some dependencies the idea here is that your package json is going to look a little something like this where you have a rainbow bridge client that handles the core logic of how to store all of the transfers in local storage uh and how to display all of the train all of the transfers between different kinds of connectors and then you're also going to have a different connector specific library like erc20 and then ep 21 or maybe it'll be 141 soon or if you're using nfts you use this one and if you want to write your own library for example our erc20 our fungible token connector

doesn't handle tokens that use the rebase function so i think that's ample and based um not sure i got the name of that one right but anyway if you wanted to write your own connector for that or someone in the community wanted to write their own connector client it could seamlessly interoperate with this one without any like permission system right you just add this other library to your package to your app and you can also use transfers of that kind in your package so probably what we'll do here is we will [Music] add a npm and github org for rainbow bridge and you'll know that we are officially supporting it if it

comes from there but you can also use ones contributed by the community and they will like i said seamlessly interoperate um question coming up though the rainbow bridge github org is not available maybe it's not a problem you can say that in the upcoming survey but maybe we can come up with a better name one i really liked was ethnic erc20 plus any p21 right because it's both you get to use both the plus tells you that super cool but you can't have a plus in your package name or in your get in your npm org name so what should we do instead uh we've got a third pole here and then we're going to be done with the polls

um but go ahead and let us know what you think there's a few fun options here rainbow bridge no matching github org no problem eth tilda near that is url safe you can have that in your npm or and in your package names so maybe we want tilde near i haven't seen anyone else do it but maybe it's fun um or just to eat stash near because the tilde is kind of silly stop being cute east tunier nice and short but it kind of implies the bridge is one way and it's two-way so maybe eth and near or eth with mirror or it looks like some

of y'all or one person two people have a better idea arbo bridge no fun for you eth dashner [Laughter] oh i feel i feel like some of these others have been mike pervis trolling me as i had to guess um maybe sharif i don't know sure it's late for sharif so maybe not um anyway it seems like a teammate kind of thing we've got other more others rolling in near teeth all right near as primary here oh what's the o

near o is fun but i don't know what the o is it's maybe a little too esoteric eat sildeniers surprisingly popular i liked that one but i wasn't sure if it would poll well i wasn't sure if other people i feel like maybe some people are really into it and other people are like very against um yeah that's that's what i was that's what i was thinking it would be for a little while i like put it in the readme of the package that doesn't exist yet but will be extracted soon it all has a tilde right now so if you get to the last slide the second to last slide and click through you'll see lots of tildes um all right well this is fun

oh man i don't even know what these are nero habanero did did the same person fill it out twice i feel like two people did not do that i don't even believe it neath there near did you mean to spell it with the y they are near i guess maybe they are near by the less than and greater than also not url safe can't name your npm org that unfortunately you also can't use fancy things like the double-headed unicode arrow all right well this this was super cool i'll give it again another 15 seconds so get in any last minute

choices um i feel like this one might be getting more votes than the others now the same as the first all right well 15 seconds is up thank you very much for voting we're going to be done with that but we incorporate your feedback thank you very much all right so we've picked dependencies i think e tilden here is the winner right can i show live yeah etheldenier is the winner well other is the winner so seems like people are not certain um so i don't know that we came to a firm decision here but it might be eth tilde near

for the rest of this talk i'm going to be using each dashnear it was just my best guess at what people might want um after originally falling in love with the tildeniere myself so anyway it'll be yarn add dash near you tilde mirror client and whichever connector library you want to use whichever connector client all right so we've got our two dependencies that we need cool we're ready to start sending erc20 tokens to near what's that look like step two initiate a transfer say you've got a form you're gonna need four bits of data might not make sense to have all of these in your form right like i'm logged in with two accounts here so i can use sender and

recipient from there but anyway gets the idea across um this is how you would initiate a transfer given that form import natural erc20 to nep21 again based on your feedback we might change the name of that from the connector specific library this is actually the only import we're going to use from this library the rest will be from the core client so uh form on submit make sure it doesn't you know reload the page grab all of the inputs from the form and then we're gonna say natural erc20 to any p21 we call it and we pass it the address is the value from the input

amount is the value from the input sender and recipient that's it we've initiated a transfer cool so a little bit more about what these libraries have that it's four main exports you've got natural erc20 to nep21 which we just saw you can go back to those ones that you just sent across the bridge to near go back to ethereum and you can guess what the other two are one for each of those four directions this library also contains all of the logic about how those different directions work the two that we've mostly implemented already this one isn't quite working today but the two that we've mostly implemented have different numbers of steps and

very different like journeys that these transfers go on so if you want to make a different kind of trans if you want to make a different kind of connector and your client needs different uh it has different needs i believe that this architecture still works i believe it will still be able to interoperate with the client the main client library that's the goal here all right so step three list say you have this ordered list and you want to put all of your transfers in it you're going to import get from the ethernet client everything else is coming from here render transfers let's get all the in progress transfers

and then we're going to grab that transfers go here ordered list and set the inner html to transfers.map to render transfer we'll see that next and uh by default javascript joins a raise with a comma which is a bad decision that someone made in the mid 90s um so gonna join that with a an empty string um this is vanilla javascript y'all this is like no framework but if you wanted to use react or view the this library will work with that as well and i'll make sure before it reaches v1 react is my wheelhouse so i'll make sure that it works really well with react for you

if that's your preference all right so what's this render transfer look like import decorate from the client and then given a transfer it's going to decorate that transfer first and specify the locale this is where information about the steps gets added so the library the specific uh connector libraries are going to be able to provide internationalization so that you could list these steps in chinese or russian or whatever um and it's also going to add info about did this step did the transfer fail on this step is this step still pending so kind of real time info and stuff that would just blow local storage

like source token name would be the same for transfers of a specific direction uh for every transfer of that type and direction so no reason to bloat local storage with that so you've got to run it through decorate before some of this useful info will be there call to action is interesting let's look at that next so again we're doing vanilla javascript stuff here so i'm not able to add something like on click right in line the way that you would with react if that's what you're familiar with um but what is this act on transfer remember those little buttons that were popping up here that were like lock mint that is the call to action that stores that little bit of text like meat um but what actually happens

there how do you how does the client library know what to do when you click mint well you have this other import called act again vanilla javascript shenanigans when you click anywhere on the body we check if you clicked on this act on transfer button if you did then we're going to find the transfer id by finding the closest thing with a transfer class that's this and we're going to grab the id and then we're going to say act on this transfer and the client library will pass it off to the connector specific library and it'll figure out oh this is an erc20 to nep21 transfer

and it has already been synced and now the user said that they want to do something so i'm going to mint it all right great we've listed all of our transfers initiated it but at this point nothing else is going to happen there's no like back end here that's shepherding that transfers through this list of steps uh so your your app actually needs to check in and see if the approval transaction finished mining um and so for that you import check status all from using your client and you can check it on a loop like every 15 seconds specified in milliseconds and then you'll also need this on change function

from ethernet client and just pass it your render function this might be the thing that needs to change it needs more consideration for things like react but anyway all together we're going to import one two three four five six things i'm gonna add that form on submit to initiate the transfer render all the transfers using get decorate and act and then check in with check status all and on change and that's it you now have cross uh cross chain functionality in your app so what's next what's missing from this library uh you might have noticed that there's no authentication or like web 3js initialization

unfortunately for all you ethers fans uh the this right now the proof logic has deep dependencies on web3.js might be able to use ethers in your own app just understand that like we will be importing web3.js as well not sure if you care about bloating your javascript in that way but anyway some more consideration needs to be given to how this app is how this library is going to handle that if people have good ideas or libraries or they love the way that it handles like integration with metamask or whatever i would love your links all right so uh bridged nep21 to erc20 doesn't actually work in the ui it does work in

the cli but we've got a link here for the browsers adding browser support for that it is a work in progress with some updates to near wallet nep141 that i've been talking about is designed nep21 the one that most of this has been referencing and the one that it's working with right now is just kind of a copy of erc20 nep141 is designed to take more advantage of some of mir's unique characteristics like the fact that it's sharded and the fact that it's asynchronous the fact that it uses storage sticking so nap141 is super cool we've had great audience great audience great community participation there um

and then our metadata extension as well so then i need to actually publish libraries like i said right now all of this currently lives inside this ui github repository so we actually need to publish them we'll be able to do that fairly soon and just have it be beta for now all right no js support i want you to be able to walk through all of the same stuff in node and not have to use the you know not have it be browser specific um and then test it sand it polish it that that 25 success rate has gotta needs to be improved obviously um so that's kind of where it's headed eta for all of this i think all of this

is like a couple weeks this is all pretty easy um no js support and like making sure that we've caught all of the edge cases might take a little bit longer so i think something like march is much more reasonable for that actually honestly i could get to like this one by the end of next week so if people really want to build with a beta version of this um that's right around the corner okay so where did we go we saw a demo we talked about what you can do with this we talked about some key concepts and we saw the four easy steps that it would take to add this to your app and we saw our roadmap if you want to dig deeper again get these slides at shadow.com rainbow bridge talk uh you can subscribe

to our newsletter we send it like once a month um so this is not specific for like hey v1 of the library is here but it will include that um you can unsubscribe after we send that one if you want there's this great introductory blog post all about the rainbow bridge some of my graphics were stolen from that you can try out the rainbow bridge ui here again i encourage you go to the last slide appendix a using the robsten to test that bridge ui with a bunch of info um but we would love for you to try it and let us know weird edge cases uh weird error states that we didn't expect that would be super helpful for the testing sanding and polishing piece there's a step-by-step walkthrough

if you want to go through all of these manually on the in your command line you can do that if you want to contribute to the library here's a link to it again it lives within the front end code right now um if you want to learn more about np141 there are there's a link on this near.org learn to figment which is a great community created community maintained resource for learning all about mir and other blockchains and there are i think three courses in there um all about an ep 141 um and also we have a grants program right now with one million dollars in grants

available that we're trying to give away in like six months or something like um so click this link and find out more about that and finally we've got uh i need to tell you all about our booth these are my speaker notes i don't have another screen so i've got to just bring them up and let you read them as well i'm at 40 minutes over time oh no um visit our booth at the sports castle to claim a free custom name and near account um sputnik dow that's where this will link you to and uh you'll find out more about the bounties there and then we've yeah bounties grants program you can read it there i'll leave it up for a little bit any questions while all of this is here or do we not have time for questions

yeah i think we're out of time actually we got uh you called it yourself 40 minutes man it was really good though like i mean you were i don't think i've probably seen a more thorough interoperability like tutorial so all right excellent job so i mean that's what this is for their technical workshops right you yep the quintessential technical workshop so thanks a bunch man yeah this was great i will see you in space take care