"A Remix Drive Thru" - Rob Stupay & Iuri Matias

so up next um we have a great talk from from remix um if you've been around the ethereum space for a while you're a developer you've definitely used remix i remember using it in the very early days um and it's gone through great transformations since then um so we've got rob and yuri coming up to give you a a kind of a walkthrough of remix um some some recent features um and kind of the workflow you expect um and kind of you know what you can use and remix the web app remix desktop um from importing to deploying uh and more so i'll let these guys take it over because they know more about it than i do uh welcome robin yuri think you're muted there rob good to be here okay uh so i think i'll start by uh sharing my stream and getting on to the presentation but uh we're gonna uh go over the interface uh the plug-in architecture and um and the differences between remix desktop and remix the web app so i'll uh get going with the share uh okay is it uh sharing hello yeah all good yeah okay great so um when you come to remix this is a remix.ethereum.org it's an online ide so when you get here you probably come to the uh home screen which is uh here and so it lists um uh you can see our um medium articles and our twitter feed over here on the right and um so generally just a general architecture of remixes here on the left is the icon panel this lists the um the plugins which are loaded here and here's the the home tab and this is the main panel uh and this is the uh a solidity file um which you get from the file explorer um and there are some default uh solidity files here just to try stuff out um like well browser storage and owner and they come up here um and then when you want to compile it well actually go back to the uh home uh uh generally like it's used with the solidity and um with this plug-in architecture uh to to get different functionality or or connect to uh ethereum like uh blockchains uh you got to use a different um uh plugins so uh but we'll load a bunch of plugins with one click when you click the solidity uh button over here on the featured plugins so you get the solidity compiler but also you get deploy and run and unit testing and but here in the plugin manager you can load uh a number of other plugins or a lot of other plugins and deactivate them so uh first we'll uh compile uh this contract actually no i like looking at a um light screen so i'll go over here um and there are a number of other themes and this is the settings panel which the icon as you get to down here um and then um uh this uh this file has to use a a compiler that's less than uh seven um and but you choose your compiler here and actually if this was um if we change this to 6 and we want to compile it by clicking the compiler here it loads um a lower version so that it will work with this but if we raise this back to seven and then um we can raise this to something else do and then uh it's loading the compiler now and then it's compiled when you see this little green badge over here um and now that it's compiled you can get compilation details so by clicking down here and this is important for getting uh like the api if you want to grab the api and you can grab the api and put that in your dap so get rid of that and you can also publish the ipf and swarm here the compiled file and then you go to the deploy and run so uh in remix the it comes with a default um blockchain uh which is on the javascript virtual machine um and then there's injected web 3 which is uh essentially metamask if as long as you have the metamask extension installed on your browser and web3 provider which will connect to a local node a test node or or you could point it to another specific node and when you use the javascript vm you don't need to approve the contract the transactions and the accounts we give you i don't know 10 with some ether on them and um uh okay so looking at this interface now we can deploy it to the javascript vm um and we deploy that here uh and the deployed contracts come down here and so like if i want to interact with the contract like uh to change the owner i would grab another address here copy it and then put it in here and uh change the owner and as you can see um up something happened uh it reverted so um i guess i wasn't oh yeah i didn't i wasn't the owner because the only the owner in this contract is allowed to change the um uh ownership and so this is when a a transaction gets doesn't go through um and then you can click here to get to the debugger which i'll show you a bit later but uh now that we have the right owner up here uh and we have the new owner we want to change to we'll click that and it will go through [Music] so then there's a so this is a a transaction that we're going to put through but if i want to do it just use a view or view a pure function they're in blue and they look like that and that's the return of the view and pure function down here in the editor as you can see i mean the uh the terminal you can you can see where the transactions um are displayed uh so if we wanted to change uh we want to get a payable function here and change this to a public payable and then we go back to uh and compile it and then we'll get rid of this and then we'll deploy it it's now red because that's a payable function and if you wanted to so that means we're sending value uh and we choose what value uh what unit and what value here this is not the gas this is the value and that's how you change to send it um okay uh but we'll make that back put that back to what it was and um okay so uh now um if we want to change it to uh metamask so we're deploying it to um gurley in this case because i've got a metamask connected to gurley uh i'll deploy and it's asking me for approval and you give it and then it comes back up here and then it gives the ether scan link and when that transaction comes through finishes processing it'll show up here um and um let's see so um uh in terms of um uh you you hackers will probably need to be uh working in will be i mean one of the big things you're going to be doing is importing files into remix or into whatever id you're going to use uh so um here i'll get a sample way of importing um if you have a gist you can uh here i gotta just that i'm gonna show so um we go into the terminal and uh if you type remix dot it gives the command line interface code completion of the um of some commands and we're going to load just so it completes that and i got the uh id of the gist and then we load that and then okay so now you can see that just as loaded this just folder showed up and um this is what was in the gist uh also um you can load a url this way too um so like if i wanted to load a smart safe math and then i come back here and i do uh remix dot uh load uh url and uh uh let's see did we get it oh maybe it didn't work uh maybe the path was not correct to that that okay loaded um and then if we wanted to refer to this file you'd have to um like if we wanted to load uh safe math into one of this file you'd do an import but you'd have to give the entire path to that folder another way to load it actually another thing you should know about is here in the file explorer and in almost in all of our internal plugins and most of the external plugins plugins that other teams have created uh there's this book here which will uh take you to the documentation in our case it's on read the docs but uh this link could take you to whatever the plugin documentation is uh but if you wanted to connect um or the other issue here is the the files here are stored in local storage on your browser but if you wanted to connect remix the web app to a folder on your computer you have to have uh remix d running so um i'm gonna load that plugin and um i'm not going to hit connect because i have to this is the link to the tutorial and also the command that you have to put in a terminal on your local computer um because uh we're connecting to a specific folder so i'll put that command uh over here uh oh i might have it's not going to work if i have remix desktop running which i think should be running here so i got to close that and i'll go over here oops and i'll run this command again because both remix desktop and remix ide are connecting uh via remix d and they both i mean it's only going to be me and the presentation that's going to have this problem i think anyway so that's working and so uh now when i hit connect in the file explorer i'll have a localhost and this is the folder that i'm pointing to uh and so uh in this folder i could share files i could pull a repo from github and it's gonna show up on the online web app and uh if i clear my browser storage it's i'm not going to lose any files and if i made if i made a new folder file up here for example it's untitled when i clear my local storage this untitled dot cell is going to go away um so yeah that's important to know um and so i can pull um files in from github or i can uh pull mpm packages into that folder just like you normally would um now the other thing to do is i think we're going to go over to remix desktop because then you don't have to uh jump through the hoop of doing remix d so i'll turn off this and i'll launch remix desktop it's starting so here i like the white theme anyway light theme um and uh so now um here i'm gonna with the open folder you can point to a folder on your hard drive and um i'm going to punch it to this one and um so now uh the contain contents of that folder are showing up in remix and the great thing here is that um i can refer to mpm packages just with the at symbol here like you would do in truffle and then that will compile um okay um and um so the difference with the remix desktop and remix the web app is that in uh remix desktop there's no uh metamask because it's not a browser so there's no browser plug-in so um either you have to have um uh you can use um the javascript vm or you can use uh web3 provider and that will connect to a local testnet as long as you have it running in the background and um here i'll have that i'll get that mine running in the background uh and i connect and uh so now it's connected you can see here is the indication of uh what the test net is uh and i can uh here i'll compile owner and i'll deploy it and then that that's on that testnet the other uh new development here is that uh we can use a wallet connect plug-in um which i think is activated currently uh yeah while connect is activated um and um so wallet connect is i can i can if i have a meta mask uh the um not the browser plugin but the a mobile wallet so uh uh it's it's sometimes uh this is a new uh addition to remix so i'll try to get this to work so uh i'm going to um oh i think it might work the last one uh well i'm going to clear it probably a bad idea but okay well maybe that oh yeah okay so i'm going to connect and now i have got a remix desktop connected to my mobile wallet and so uh now when i go to deploy i'll switch to wallet connect and now when i go to deploy i get it i my there's a window that you can't see because it's on my telephone and then uh i have to edit the gas so i would give it a lot more gas than the default is for this deployment um and i hit save i hope that's exciting for you to watch okay oops uh okay the nonce is too low but um uh you can get that to work um i think uh we'll clear the current request um i'm not sure it's worth trying it again but um uh anyway did it work i don't know okay so um what else do we should cover we should probably cover um other plugins in remix um uh so a really great one is the uh documentation generator uh which is uh this one so if we go to um uh we've compiled we'll go to file explorer and make sure we have the um uh owner is the active file in the editor and then we'll um compile it and then we'll go to uh documentation generator and we'll uh get that uh of course uh this thing is blocking the top of my screen uh okay so i guess we're gonna go like this so i can see the top and choose document viewer and here is the interface of the contract so if you're working with team members that are trying to explain your code you can generate the um the interface and the interface is made from um the nat spec comments uh here oh uh well these aren't expect comments uh uh so if we go to here and then we use the uh that plug-in here um documentation generator and we've compiled that compile that and then we go here and we can view the documentation over here that's a bit better okay uh another interesting i mean and it's also important is uh the um uh static analysis tool uh and remix and um the unit testing so um if i wanted to test uh owner again make it the active file and then regenerate it and then i want to run this and here it's because uh it's checking this failure here and uh it's it shows so shows you the name of the function that failed and what the issue is and there's a number of um we have good documentation about this but also tutorials on our medium publication list um and um and as long as we're doing that we could go to um um we'll just do a quick debugging session too uh where um we'll compile uh we'll just deploy this to the javascript vm and then change the owner oh also you should know that um uh down here if you open this up uh you can see each parameter will have its its own input box um so if there were like five uh parameters for this function they would each have their input box and uh it's a lot it'll save you some sanity also if you click this button it will tell you it will encode the values and copies in clipboard but if they're not the right type it will error so if we click that it will say copied because it's the right type um but uh if we had like um that we'll say error and that's useful for just knowing that uh you put in the wrong type so we'll hit transact uh oops try this again and then we'll change the owner and then uh we can go to the debugger by clicking over here and in the debugger uh we'll see we can um scroll there the it will show the solidity locals and the facility state variables and this will go uh step by step step up code by opcode and um soon you'll see that the the what the input was for the new owner and the solidity local which is over here um and um uh similarly as while you're um writing your code uh you could turn autocompile on here and like um if you uh if you add something that um oh also there's a yeah if you if you uh add some code here uh then it'll give you an error so that it'll always pop up the errors as you're typing and those are the essential ones there's a number of other interesting ones too including a gas profiler will tell you how much gas you're using and you can load epm to download modules defy explorer is a great new plugin and uh it will load all the um in this case right now it's the first one that's working but at uniswap it will load all the protocol files the protocols files uh so that you can start playing with them and i think we could take some questions now great thanks rob um all right i will turn it over to my team behind the scenes and see if we have any questions yet um and maybe rob you can kind of cover you know anything else you want to get into about you know what the future might hold for remix kind of features on the roadmap you'd love to see um or even just you know things that you think are generally missing from the ethereum developer uh devtools suite that maybe other people are working on uh let's see what's the um well we're starting to get um uh some of the documentation translated into multiple languages um and uh uh what else is going on i mean there's gonna be some more developments with the wallet connect plug-in because it becomes like a nice way of developing an app and remix that you're more it's more like your adapt user at the same time you're developing the app um so that's important um uh and um i'd like to see more like um interaction between like how you can be like a truffle developer and use remix for you know what it provides so we can use the tools uh together and also an embark developer and use remix for what it does um and um we're also like we we um uh we we have like a a quorum plug-in so we're trying to we also have this uh remix uh plug-in architecture so interesting to see like if this architecture could be used in other projects outside of remix on a kind of macro level as well uh and maybe yuri you have some ideas too although more under the hood uh we we were making an effort to make the libraries itself uh reusable in other projects so we so we have a simulator that we mix uses that can be run on the command line and you can connect to that similar simulator it's useful because it has some debugging functionalities we also have a command line debugger and we we're making that debugger also usable as a library so other projects can integrate and leverage the same debugger um and uh one of the questions if people want to you know contribute to remix um where do they go is there a place they should come chat with you uh do you want to direct them to a specific repo if they want to contribute yeah there's both the uh getter chat uh it's a flash uh uh ethereum remix i'll have it in the slides that i'll share later got it and then um also the repo is remix it's uh ethereum slash github slash ethereum slash remix dash project which is our new mono repo so that's the overarching repo to check it out pull from got it okay thank you rob thank you yuri um we'll call it there and shoot our next speakers um really thank you for the time and i hope that any hackers watching this get to use remix to build your product um and i'm sure you can ask any questions you have about it in the beginner chat um we'll make sure that that link is dropped into the event chat as well okay thanks robin thank you all right so