J2 RF 02 Rob Stupay and Yann Levreau Remix & Dapp development

with your local system so nothing gets lost if you by mistake close the browser so this is this part then and on this side we do all sorts of stuff with our contract so first we can compile it then we can search for the details about the contract when you write the code when you interact with the contract you will use the ABI so you have everything prepared here you just click the copy then you can run the contract here you also see the the errors or like some static analysis warnings so you should fix these things in the run tab you can set your environment so if you want to just like do the quick testing of the contracts you can use the JavaScript VM so everything runs in the browser but if you want you can actually try how it works on the network so you can connect connect to the browser with your meta mask and then just switch to injector injected web tree or you can even run your own node so if we stay now in JavaScript VM and click create it will actually create an instance which means that we deployed this contract and we also get like a transaction log inside of the terminal so then if you click the details you can also see the details of this transaction now the screen is a little bit moved so it's hard to show but you can like see the status of the transaction the same as in the eater scan you know if it's failed or if it's exceeded and then some other details also everything ready to be copied you can also record transactions so if you want to know now like prepare and click around your contract inside of JavaScript VM and then you want to reuse it in like inject it so on injected web 3 then you can kind of save all the transactions and then reload them again I mean this is kind of hard to explain but you can try it out this is the recorder but I think you will show more later right so to interact with the contract so we have like some functions here in the contract and then we want to try them out so then we can also kind of click here and this is like like a UI basically for our contract so the the pink ones are paid so it will cost you gas to execute them but these blue ones are actually free ones so let's go down so now I clicked here and I created another transaction so you can also then see logs of of these transactions and you can again click details about it or you can even debug it so if you click here it opens the debugger and then you can kind of go through the transaction and see how it executed and where was the problem or also like how much gas certain step used so okay then some settings you can even switch to the dark theme we have this thing now so this is like if you do the night coding which we all do probably static analysis they will explain later debugger is here and here at the end it's a support tab where we have our support chat so if you're using git er you can just like login with your github and then you ask for support or something or you can you can even open it in the new screen and you do use Gator Gator chat yeah so you find this here and that's like a quick overview so thank you and I'll pester yeah okay I will just basically make a quick demonstration of the recorder feature that was already mentioned are they closed okay so basically what this is good for I mean it could be good for all kinds of things but if I go to the run tap let me clear all this so okay then I have now this pallet contract which is kind of doing some some voting and it has a whole bunch of logic but the point is like I can use the JavaScript VM which is like like said already in browser only little demo which works quite fast and then you can just create an instance and you use some methods and basically you want maybe to bring your solidity contract into a certain state and when you have this you can just say it in the background the remix records all the steps that you do so you can then just basically click Save and you can export all the transactions that happen into a JSON file and it looks like this so currently we're having this this is our account so if you have multiple accounts even that are taking part in this they will all be listed here and then here you have basically a list of transactions now this is just a creation and I execute it like one method so if you do more than there will be a lot more stuff and it's using here accounts like all kinds of account that might be participating in those transactions and they're all listed here and the good thing is this is kind of fast and it doesn't cost anything and you can record maybe a very complex set up and then when you finish and you saved it you can switch - I don't think that we have made her mosque installed here but like if you didn't switch maybe to a main net or even a test net where even the transactions take longer you can open once you switch to the network you open the the J's file and then you can click play on the different network and it replays all the transactions on the other network that you chose and this can maybe be quite handy because if it takes longer it's yeah this is the first one for example is when I click the button create it created the first transaction so this will also be included so one thing that you have to do actually when you switch to the different network you get a new different address so you have to go here and replace all the addresses but just up there because below it will automatically use those that you set on the top of the fire and yeah maybe this could be quite handy that's actually already it the thing is because it records everything if you want to open a different contract and start over you should first click this this button to clear all the transactions to start again with what you will do next yeah that that's basically it I can I also import an account to the JavaScript we inversion because I mean obviously for certain cases I want to use the same account in my injected provider as well as the JavaScript VM provider I don't know no I think that it should be added so yeah I think usually when you switch to another network you get a different account like if you use meta mask then it will just use that rest that minimus but what you would do then is you would take for example you would generate a test account you would have in meta mask a test account and you want to import the private key to the JavaScript VM as well so like just having a feature to import accounts definitely makes sense yeah so you mean that like when I have the address I will automatically populate all the addresses here or no no you actually use the same address on injected provider as well as the VM provider because for certain contexts you it's important which kind of account you use right let's say you have some hard-coded owner so then you need to have the ability to import accounts I see in this video Java VM sure yeah I think do we support it yet no I I think this this would be something that we should think about cool thanks can you import that file once you have that you mean you mean the once you've saved the transactions you want to recreate it how do you reload the file you see yeah exactly so you can I mean you can save it to you have the file explorer on the side so you can save it on the local disk or in the browser storage or wherever you can also just copy paste it from somewhere and open a new file and then when you open the JSON file you can immediately start using it and replaying it with a button okay so this may be a little bit tricky from the from the UX perspective because like I wouldn't be clear to me that pressing the play button I was playing that left yeah we should definitely improve on that so it's still it's still a remix alpha branch yeah we will work a little bit more on it yeah okay so I pass the mic slide deck so recently well not that recently but I was trying to import some Zeppelin contracts in a Dharma contract into remix and I didn't know how to do it exactly so I so I just put it down to my I imported to my computer and then I with a well with remix I Delta I found the with the file explorer I found those files on my computer and it took a lot of time and it was kind of a pain and then I realized I need some help okay where are we realized we could load ah yeah we can load files from the console so uh can you even read this yeah you can load files with a I think you can't see the commands here but it's a remix : load URL and then you put the github URL in the in the bottom here and as you can see on the File Explorer on the top then the github repo loads and all the dependencies load as well and then you can even make a batch file like at the top words uh you have a whole bunch of remix loadurl lines at the top and when you select that in the code editor and you just type remix : batch it'll load all those files so it was a big time-saver and that was the end of my frustration as soon as I discovered that things okay so those are nice features that we have added recently and basically you could debug transaction from he mix but it was a bit of a pain to the balkanization from the main net and now it's just possible so I will just go through some songs right let's say that you are in it a scan and you can just take a look at some transactions here we are seeing 1 1 lambda contract oh you have yeah the contact source codes it does can - so you can just easily copy the contract for metascan and then you will just paste it in remix and then you go to the burger tab and then you can just fill in transaction ash in the burger tab and then you can start yeah debugging I mean it's kind kind of easy features but I will say that we made like one year or it was quite long for us to arrive to these steps and we are pretty proud to have it because it's kind of free importance so now you can easily debug transaction from the main net and you can do that also while evening source code debugging so you can follow the education in the city source code and you can follow the states changes and you can follow also local changes so it's kind of nice and we will also add the same for Rob Stein covin and could be so pretty cool basic features of I'm ecstatic analysis so we have this since a few months here and basically as you write contract as you compile contract remix will warn you about some stuff on your code that might be improved so if you take a look at the second one for example it will warn you of some potential rent and Seberg if you look at gas and economy you will see some kind of warning that can help you to save gas so it's kind of it's a bunch of modules that you can run and it will up you to have a better code so this is very very important and you have to follow them yeah so we have a terminal in Linux and basically you can input web free object in this terminal and you can link request to date work so it can be used when you develop contract but I really think that we all mean us to use it when you want to maintain contract so let's say that you have a contract life deployed and usual it should be easy to just paste some script that will be executed in the terminal that can run some tests some check and that can just verify if the contract itself in so it's something that's we have still to work on it it's not fully done you can use it but yeah we have to improve it so then you will just pay script run any kind of JavaScript script for checking if the contract is healthy so it's very important remix libraries yeah so we had people left here and the name of the hippo was just remix and basic these people will just contain everything every kind of emperor's every kind of libraries every kind of debugger tools and so on and during DEFCON 3 we had this not protest but we as some people were saying yeah he makes is nice but then it's not so much usable for death if they want to write tools because you just have to crown the world remix people and it's much more better if the remix people can be split in several modules so now instead of having this big premix library we have several libraries we have Hemmings Lib which contains some helpers we have Linux core which contains some like trace manager code manager and staff that can up you to write your own debugger or help you to write your own tool on atiim we also have remix or editing wait yeah remix sleep clinic score here i'm equality which contains like the static analysis module so now it's easily possible to use this module in other tools and it's kind of important and this is the point of our work here to build modules then can that def can use later on so we have static analysis we have state local decoding and then we also have some Airport web developer to compile easy to code yeah then remix debugger it's just some kind of user interface that wrap everything in a single interface to debug transaction then I just and we will soon have clinics tests which will add some unit testing in hammocks yeah now we move away from this image libraries and I will just pick a little bit about plugins API so basically we are we have some tabs in hammocks and we think that it can be interesting for the community to be able to write plugins that will be usable inside remix so I'm just thinking about some tools that already exists and that's that our youth develop code by the community and we should just be able to integrate the stool in remix so use a sort of limiters in through the trees a lot of fatigue testing validity the eyes many truths that do many things in the ecosystem and our goal to is to bring some of these tools in hammocks so we can have like nice and strong ID so this plug-in API just add a new tab in a mix which will be like developed by external project national team what will be this API so basically one plug-in can access the compilation results to run some other static analysis warnings one API would be able to analyze the source code of VDT contracts to improve the linking or just the users about best practices and pagina should also be able maybe we will see if it will be but I think it's nice that protein should be able to listen on transaction and then should be able to run some fuzzy tests on top of transactions and then we can have multiple tools that the community can just write so this is the access part of a plugin and that will be like the changing part of a plug-in so basically I think that a plug-in should just be able to baby to change the content of the editor to update the linking maybe but not to so much so basically a plug-in will just listen on inputs from the users will just analyze this input and we just could use some warnings and some airports to the users well so as I said we will be we are kind of working with the community - we have lots of contributors that are working with us we are like I think four or five kind of seven which is nice like fixing bug and writing new features in the next few months we will be just improving the way you can develop transactions in tested the govern it could be and often we have since two weeks a way to run remix rockery Hemmings has been wrapped in in one electron up line here and some people are also working on vs called integration for a mix so there are two issues and are both on different aspect of this integration so they just want to bring debugger copy capability inside if yes code what's next oh okay so so look at the modular rising stuff it should be struck it is not it's a mistake so this stuff is a slide from Cancun we are to do testing publishing and modernizing testing is now in progress thanks for you in Matias publishing is still something that we need to improve and to do is basically a way to package contract and then to publish them we are not already started to work on this and materializing well we kind of did that already but we also need to improve it so yeah we have just one thing that is in progress and one thing that is downstroke kind of done so I think we are just keeping you in further and things are going I think we're yeah so this is for the what was next and then I would like to thanks orifice like hope and Erik's for coming in Paris and thank you very much just one thing on Saturday we have a workshop so if anybody wants to kind of try how this work if you're new come and join us but if you already have your project we can help you solve some issues if you are having them and if you have questions unfortunately we don't have time but you saw the chat so pingas there and we're glad to help thank you [Applause]