What's new in Remix by Rob Stupay | Devcon Bogotá

foreign [Music] and get ready for our new features we're going to be whipping through about a quarter of a million slides new features are everywhere and we'll be going through all these sections like the file explorer you can now clone or get repo in the file explorer right now there's this little icon we added a new little icon right over there you click that uh and but soon it's going to turn into a little hamburger icon and you click the hamburger icon and you can clone if you click the Clone and then you get this modal to come up to ask you for the address of the mode of the repo and then it comes in as its own workspace uh so you can bring lots of code into remix really fast or easily no um and then when you click the workspace pull down you get the get icon on all the workspaces with a git repository associated with them and you can manage to get repo in Deegan of course you could before but maybe actually have any of you used the git before oh there's one and it's uh it's important uh yeah you need to be able to push Paul and do all your git commands so you click the it's a plug-in and uh you load up the D git plugin it stands for decentralized get click click that and then over here if behind the chair or maybe on your screen you'll see the init push pull all the normal git commands and oh it's over there and then um you're good to go and then we've got new templates in the workspace if you add click the new template a new workspace button and then you get oh look it's over there you can get a create new um workspace I like it looking at this uh and then um what happens uh you can choose a template oh yeah but first you can initialize a repo any repo you want to become a git repo so now you click the default or that pull down menu and you get uh all the different workspace templates and now they're all the uh open Zeppelin templates or some coins opens up on templates and Xerox project and if you click one of the open Zeppelin templates you get you get uh some of the um features that you can you click one of those and you can add a new um import to your base uh coin contract and now you can drag and drop in the um file explorer which means that your workspaces won't be so messy especially when you didn't open the right folder when you're creating a new file uh and as everyone here used remix d it's an important little thing uh yeah and because it's important because remix is not like a Google doc we get emails pretty often like I lost my files and remix when the browser crashed so you just have to know where your files are saved they're saved in browsers in the indexed VB and that's in the browser and the browser is feeble you know so if you want to save it to your hard drive you can use remix D to share a folder on your Hydra with uh remix or you can uh push it to you know some other external git repo if you want um and now as a result we made the the get uh the remix d uh command a lot easier instead of a lot of flags you just go into the directory you want to share in your terminal and just type team remix D of course you do have to download uh at first and it's an npm package so uh but it's simple uh and now you can uh load uh Slither for all you static analyzers there out there you just want to load Slither locally and we've made some editor updates and for the master of editor updates I give you uh Philip thank you Rob for those who who have been here at uh what what do we have the green button the big green button for those who have been here at the previous session you you know how challenging it is to to build a good code editor and as we are using the same editor as the vs SVS code does we've been able to make it do some stuff that we expect the editor in vs code to do and the challenges that we had are basically the same that the nice people from hard hat have when they are doing code parsing so we've been trying to solve this problem first of all in order to use these features you have to turn them on because by default we turn them off because you know some people might not like it or it might be all too sudden but basically what we have is autocomplete and autocomplete is a very complicated Beast as we know because when you're typing you want stuff to happen so we have designed some custom part parsers we use three in total to parse the code while you're typing so what does it complete it completes globals Mutual solidity stuff it completes dot uh it does dot completions on globals from solidity it also completes anything that you have inherited from other contracts and uh anything that's available to the specific location where you're typing so that all of that also takes into account visibility of certain functions or variables that are being imported through the Imports basically it also Auto completes functions from other contracts so that when you type approve for example it will pre-fill the variables for you and in a in the editor it's still very limited but it's getting better as we go along it's an experimental feature it has some stuff to it but we try to make it fall taller tolerant so that when you're typing and you're completely messing up it tries to make sense of what what's there and I think we've done a pretty good job uh it's for you to try out and to see if it actually is it is what I'm saying it is the dot completions are a thing that I think is specifically useful for when you're doing complicated stuff with contracts that you import here we have also a nice little feature that we built in order to complete a possible Imports when you type import basically we have some uni Swap and open Zeppelin pre-loaded so you can easily find and search files that you're looking for if you're looking for some kind of interface for an erc1155 you just type in you just go to the open zap lens slash and you type in 1155 and it will just show up in the list it's easy to import it that way you don't have to copy paste it anymore from other locations and the Imports will be available the imported classes are import contracts sorry will be available for you as other complete objects when you try to extend the contract and anything else so these things are all being taken into the attitude and into the editor these are things that we believe are important features for people to develop quickly and that any editor should actually have um we also include gas estimates gas estimates are simply returned by the by the compiler right and we need to display them on the places where the compiler says that there is an estimate sometimes there is not an estimate if you don't see the estimates that means that the compiler hasn't been can make sense of what you're doing and then then some suddenly things stop right so you see the gas here if you hover over it you see some more information because the gas is more complicated uh business we go along then we have just as in vs code we have jumped to definition and references we also have the peak function so that when you click here it will just open up this editor within the editor and you can just jump around through all the references and definitions that you that the thing can find we try here also to be fault tolerant if your file is messed up and you have errors in it it will still be able to find the uh the functions and the the definitions it will always show you all will also show you the net spec comments that are included into the files that you have imported so let me see if I can actually see oh yeah and then we have we tried to make something that when you actually type and you make an error you see this this quickly lines you get warnings and errors and what's the other thing I forgot and it also colors the files just like in Vegas code so when you have an adder in a file you will see it turn red also on top you will see it turn red if you've made a an error in an imported file which is important you make an error you forget a forget something or something it will actually put this quickly line underneath the imported file and also it will also show you where the error is in the file explorer so you can easily say okay this imported file has an error I'll just go there and see what's going on uh the hovers are another feature that we do uh so this hover feature shows you the errors that you that that the compiler says that you've that you've made and as I said before it just shows you the definition and the location of the the stuff and also the comments if if there are any it will show them into the into the the hover and then we have a nice play button and this play button has several uh things that it does for solidity files which is compile on the files and for typescript or JavaScript files it will just run the script that's the play button so Nifty new little feature that we made and then we have code formatting code formatting is something that I use all the time because you know I'm lazy and I'm not a python guy so yeah I I like to format a lot so I we did it and we will build some customization to it so you can actually customize the formatting to your own specifications or likings but for now it does some basic formatting on your JavaScript and on your typescript and on solidity so try it out and see what it does and see if you like it and if it's it's if it becomes a big match just just tell us and we'll fix it uh here in the opening screen when you close all the tabs in remix it will just show you the screen and it contains the uh the shortcuts that you can use in the editor so the important part to remember from this from the editors is to turn on all the features in the settings so that you can actually use them if there is something that doesn't work just tell us because we need to learn from the experience from people who actually use solidity a lot and so that's important uh the next part is proxy contracts and I want to introduce you to David diesu and he will talk about it thank you [Applause] okay um hi I'm David and I'll be talking about uh remix ID support for proxy contract remix ID allows you to be able to deploy upgrades to your smart contracts we just introduced this I think a few months ago about a month two months ago and was Purely Inspired by continuity of your project I believe with all at some point deployed some contract that we might feel like making some changes to and then we couldn't do that because there was no provision for upgrades so we have that and we the remix IDE uses the open zipline ERC 1967 proxy contracts to help do this now the open zero plan supports three types of proxy upgrades I think the uups the transfer parent and also the beacon for us for now on remix IDE we support you using uups pattern for contracts upgrade yeah okay and then it requires you having the uups upgradable that's all in order for you to work this feature can be easily be tested if you assess the open open zipline wizard you can be able to customize how you want your contract and then you select the uups upgradable and open in remix if you have that you compile you should be able to have this we also have templates I believe Rob was talking about templates towards the beginning you click create workspace you can select and customize what you want by checking also the proxy so once you have your contracts in the IDE compiled you should be able to have these options deploy with proxy upgrade with proxy so basically remix ID does in the background the deployment of the proxy contract so we we basically have a compiled byte code of the ERC 1967 contract which we deploy as your proxy and then we now have your implementation contracts deployed on top so basically when you're interacting with this feature you'll be prompted with a model instructing you that two transactions will occur and then using the jsvm it's super fast so you just see it immediately after the first deployment the fastest level oh yeah the first deployment and then the second yeah but then um if you're using say metamax and deploying to mainnet or one of the test Nest to be a bit slower because one of the transactions has to complete that's the the proxy deployment first before the implementation oh yeah so after deployment you have this interface displayed the first here is the deployment of the implementation contract and then this is the proxy now these two instances have the same UI but then you get to interact with the proxy you get to interact with this UI and not that and this is because the whole point of having an upgradable contract is that you don't want to interact with your implementation you want to interact with the proxy but then we still display this so that you don't get confused and feel like um something is up but um it's actually just there so that you interact with this and then this makes low level delegate calls to your actual implementation contract okay and then we also have the upgrade so now for the upgrade you need to provide your proxy address if you use remix IDE to deploy your proxy originally then you can check this box to be able to use the last address yeah so really smooth and moving on in the future we plan on having a list of previously deployed proxy addresses so that you can be able to pick from and not just the last deployed address yeah uh yeah I think I've talked about this uh it makes a delegate score I guess to your implementation contracts okay also talking about workflows remix IDE also has a gate of action that allows you to be able to run your solidity test on your GitHub workflows so it can be integrated as part of your build process and you can be able to have it run the solidity unit testing every single time there's a push or depending on how you configure it to be we also plan to have the static analyzer also added as GitHub actions so that you can be able to have it on your GitHub project we also are currently working on having you run JavaScript test with mokan chai also as GitHub actions so yeah okay uh oh yeah yeah this is a sample this is a sample workflow that can be used um yeah I guess it would be nice to check it out on the GitHub Marketplace uh moving forward I'll be handing over to Rob to round things up right in here okay a few more things to go over uh we got a new workflows uh for quickly working out problems so setting in the state of a contract is kind of can get kind of hairy because you gotta maybe have to deploy a bunch of contracts got to go in and hit a bunch of functions and you got to remember what you do and each time you develop it can be you got to remember what the process is so you can make a script that does that for you and then let the script run after you do a little bit of coding uh and now we have this uh button to push so you and you uh click that it will compile the contract and then run the script and you connect the script and the contract with some Nat spec comments there's an example in uh the the default one underscore storage to see how to connect the uh the net spec comment to connect the script and the uh smart contract you don't have to you hit uh compile and run all the time you could just hit it when you want to so just compile compile compile and then when you need to run it or I guess you probably could do it all the time too we've got a bunch of interoperability updates you can compile for a hard hat project when you share the folder you're with remix D to the hard hat project to your hard hat project and you can sync now so if you want to uh use remix or truffle or I mean if you want to use a hard hat truffle or Foundry and uh deploy with and you can then you can deploy with remix so once you share the folder uh and then you compile a file in one of those other Frameworks then you can go to the file to the deploy and run hit the the refresh button like that one was compiled by a hard hat and then we took the same file and compiled it and remix and it comes up with compelled by remix yeah then you can deploy and run it uh we got uh heart uh Foundry remappings when you share the folder with a Foundry project and here's uh 27 seconds so we can have some time for questions uh of some quick uh grab bag of stuff um oh we got the advanced settings in the solidity compiler so if you click the button over here you can see example Json file that will uh run all your uh compiler settings so you don't have to do it by that and deploy and run there's a bunch of new providers environments and um and now for beginners it's easier to see which one is the injected web3 the injected provider and it will say the name of the injected provider uh also now like they're in the environment section the top link goes to chainless.org so you can find the spec of the chain you want to deploy to and when you're looking at one of the l2s it will uh go to uh a bridge to get the funds for that debugger got wider there's a console.log just like hard hat uh and to get the to the to the um documentation you gotta click that little carrot it opens and then you can click the book to get to the documentation and also the little green check mark means that remix uh is uh owner of this code we have a little bit updated Viper so you can go to the Viper plug and click that and it'll download the Viper Lang uh repo and there's a transaction recorder which probably none of you have ever used but you should check it out it's in the middle of the deploying run and browse and grab if you take if you go to a verified contract an etherscan uh you just change out the etherscan for a remix and um it'll uh open it up in the editor and now questions basic question about I see I know there's there's already some integration between remix and swarm I'm just wondering if you have any thoughts on the future of where that might go I guess that we're in uh open conversation with them there's a right now we're adding the postage stamp uh so you could publish to swarm the next steps uh I'm not entirely clear about but you know we like to that will be going on continuing not dropping hey just a quick question um are those features already available or do we have to wait no those are all available awesome thanks hi it's a simple question uh it's a way to enable Bing mode because uh right now I'm using a browser plugin but I hope that you can support the the bin mode online mobile bin mode the bin editor so we we spent some time to improve the editor like the moon acquisitor and then I think some request that we had uh last year and uh I mean we are looking at that it's not like something we will prioritize for now except if we would if we would push for it uh but yeah we could do it it could be Ray push for it and we would do it for sure thank you so much