DAPPCON 2019: Workshop - Remixing Remix & Solidity w/ Y. Levreay, L. Husikyan & F. Guezengar (Remix)

Transcript

welcome to the he mix workshops I will give you first a small scenario about what we will be doing today maybe so how many are you are you are using a mix already okay quite a lot and I guess you are using a mix with troffer or you are switching between troffer and remix and rabies control fur and so on okay good you know okay okay oh so let's go for it for the for the mercenary first I would talk a bit about what we did since six months so since the last

Def Con in November we are walking Lots with transferring Jana here about improving the weeks and a good base and stuff like that we will do like a small overview about the new you weeks which has completely changed since last three months and we are still looking on improving stuff and on improving the new weeks as well one important aspect of remix now is the fact that everyone can build their own plug-in so basically every developer can come and can develop plugins and can ask us to reference the plug-in in remix so this is a very

important staff of the stack right now in our code base and so we want also to to show you this so this is the first step here and francois will do like he already did that like three months ago and basically you will try to develop a protein in five minutes but i guess it might be like three minutes or four minutes with you and then i will speak a bit about the next steps so basically we were working developing a lot since the last six months and now we are also trying to meet the community could community to meet developers and to try to favorite favor eyes development on linux

ID so for the next steps and live demo and live coding so live demo is about the moving like to nice plugins that we currently have the first is the workshop plugins and the second plug-in is free box and basically we use the workshop proteins and a free protein the free box plug-in to liberate like a nice framework around learning through teaching and learning asylum morton early so this is like the fourth steps for the first hour and then for the next hour we will speak about I will do live

coding so basically we can come to you speak to you and if you want to share something if you want to ask questions about everything if you want to do a workshop feel free to to go on and we'll be here for supporting you so thanks I will just start right right away yeah so what we did from November 2 to now basically we spent the free four moves to figure out what you weeks will be and how we can deal with the new weeks and as usual we planned first to release the first version in March April

and we end up releasing the first version is in June dry so it's like as usual we start thinking about stuff and we say oh we can do that in like two months so it will be easy and it will be really cool and then turned out that the two months became four or five homes which is also nice things because then we had a lot of arguments a lot of communication right like some time fighting about the weeks or something fighting about the framework or how it should be how it should not be right it's always like how's death but very nice so yeah we did that during the first four most and at

the same times we really want to come up with a bunch of developers that are not inside a gym that are outside the gym and that's at the willing to write and to develop proteins for a mix why the first because we are like four or five people and that we cannot cover the world community we cannot cover all the features of a time and we don't want to cover this so we are not here to provide all features but we want more the community to come with features and to help us building features yeah and I have to say also that we don't stick

with him excit and we also plan to let the developers write plug-ins for em excit but also for other framework or ID like n Bach IDE or troffer or with you okay so this is what we did during six month developing developing developing and trying to come up with a nice community of people we have at the moment five six seven people that are helping us a forum developing plugin which is very nice to have and then we are here so for showing up for what we did new you weeks looking infrastructure we were talking about how

the framework will look like and Francois will talk a bit about that something that is not related to remix IDE particularly but but it's really important for us with the Hutus and you may already have heared about the cottage is a framework that allows putting the keys knock on it a on but it come with a new language and this language can be tied with GK circuits and then you can basically provide the sickest knock features but only tie on but the thing is that at the moment it's only usable outside javascript and we would like to put this in the browser and in other GS so it's like separate projects we are not coding

this ourself but we have some help from the Zuccotti esteem and from other people for building like so hot air dodge yes sometimes something that you can use for developing zika snark feature asan ETA on it will not come right now but we hope to show like a demo maybe for Def Con or shortly after they've gone we'll see ya so the key stock is about privacy you may say ohm but I guess you already know that yes extend the connection with devs or what you spoke about that we want to leverage people and to meet people from the community thank you basically a Kris what is here I should I

saw him right oh yes so if his fault is a technical writer for the foundation is an foundation is helping with that and is also helping us on writing this Phoenix water plug-in and basically we also want to provide educational content and we also want to provide resources for other two realms on suis DT or the hottest or a theorem or like the blockchain in general yeah that is and we also have when we need to communicate more about what we do and what we don't do actually and I actually I'm not like a social guy basically I don't have

twitter I don't use Twitter so much I don't use medium so much but I have to say it's a good way if you want to share what you do if you want to share pictures if you want to let people know what you are doing medium in Twitter are the best way basically so we are trying also to leverage these things and to con get better on what we do so this was my little staff about what we did from DEFCON two DEFCON and now I just want to show you the new you weeks a bit you know do you want to come a bit thanks can you use this okay

so if you use an old question you probably know that we had everything pre-loaded so you can go there you could go there you had everything to work for with solidity for example now we have everything in plugins you can activate them there are the two ways to activate them if you know that you will work with solidity you could just click on solidity environment from here it will load all plans so he had already pre-loaded them so and if you want to work with viper

your wiper here and workshops Francois will work about workshops there is another way to load plugins it's a plugin manager this is here the last one in vertical I can follow and you have the list of plugins those are activated all of the activities are not some of them are still in better some in alpha we have some native plugins and if you want to add one then it will arrive here so I'll add everything for solidity what else in

this home page you have ways to create and open files from gist github swarm ipfs we have some links and file explorer is here if you want to compile a solidity contract for example you will you will select it here then we'll move to solidity compilers this is basically almost the same as we had before we've added a language selection for you we have you it's still experimental in

experimental yeah you could you can do it with ctrl + - always control and we'll but you need yeah the editor should be in focus no no if you are in editor if editor if

you if you click an editor and then it will increase only yeah yeah we had this plus - but some people thought that it's for adding tabs it was a bit confusing and we thought ctrl + would we because they were saying oh it doesn't work why we don't have new file here yes yeah I was saying that there is a you'll here you can play with you you can change Indian version and then once you compile

to your contract you can publish on Swarm you can see details of output from compiler and we go to the next plugin this is deployment run transactions this is also basically the same you checks the environment check the contract which one you want to deploy because if you have a couple of them in the same file you would have a list here and then basically you deploy you have your deployed contract here you can interact also we have different colors for

different functions if for payable once we have read we don't have it here now we can add one Oh so its first a okay I saw right all right so this means you will pay

money if you execute it and what else yes I said basically it if you want to dip back you can open it from here we can also activate debug plug-in from plugin manager and we haven't changed a debugger a lot also we have some lots of plans to do to improve it so this is you can see what else

they talk about some plugins we have we have solidity unit testing plugin this will generate test for you and you can run even test your solidity cord I will use it in second part when we will work with workshops we use a test in workshops and this area there are some more solidity static analyzer you can run it it will give you some static okay this doesn't walk

okay so I'm not connected Donn's I don't get no they don't get that at all okay so this is it now Francois will show how

to write a dragon okay thanks thank you hi everybody my name is Francois so I'm part of remix team so I helped a lot during this last six months to build plug-in engine so we talked a lot about plugins because actually this is a very new stuff for remix and it's in powers the community each brings new ideas into remix and I think it's very important and we all think here that's very important we actually change the design of the previous version to make it much easier I'm not modular to use remix and have more tools for that just for you to realize how many plugins we actually

have right now is it's actually a lot well like things like final inference can if the contract is correct we have VIPRE complier of course we have stuff like from mythix pipeline of course and we actually also have like a new ones like Libra and move tools so it goes even beyond the border of what we were having and this is from community so we are very glad that they now we have people that really wants to use the power of Linux to make things new that we wouldn't have done actually and even a fault it could be possible to use with Linux we have actually very glad to do that

and today I want to share with you how to do that and how it works so basically plugins is an engine that we build and it's actually agnostic from remix can be used by any IDE right now we have on camera is working on F atom which is a an IDE based on inside atom for mimic for aquarium and yeah is implementing this plugging engine so when you're going to write a plug-in it's not just going to work only on remix it's going to work on every ID that's going to implement this plug-in this plug-in engine so it's it's actually big big stuff and the idea is to make it as simple and as modular so

you can create your own environment as explains here if you want work only with solidity just go for solidity but if you want to work with Viper there is no reason for you to use solidity compiler right so just eat here and now you only have what you what you want right so that's the the first part we want to make sure that you have the best workspace for your own experience in ceramics and yeah so that's the core engine of the plug-in system and so a plug-in is what is basically there is two type of planning there is the native plugins the plugins that we took from remix the previous version and that we

create we we isolated into plugins like the solid GT compiler for example like you'd app for deploying contracts so Jana so this is native plugins run directly inside remix but if you guys you want to build plugins then of course we don't expect you to do peers / peers and you don't expect us to read all your peels to be sure that your plugins are running right you want to have like some autonomy over on that so we use iframes to do that so basically when you write a plug-in you're going to create an iframe and this our firm is going to connect communicate with remix and for that we need to have like

permission system because of course you don't want any plugin to be able to write on your filesystem compile your contract and deploy on the nine net right don't want that and you don't want plug-in it to change your contract just before you send into the maintenance so we need to have permission we need to be very careful about what we do and we try to be as careful as possible so maybe you will have the experience might be some sometimes a little bit weird like maybe you have like free pop-up that's coming to you asking your permission but just think about it it is very important sometimes it's like big big stuff that happened here so so this is how a basically it works we try to open api's

from the IDE step by step so maybe like right now you can listen on event from solidity compiler you can run compiler you can change the file system yeah a lot of stuff you can do but in the future we want to add more and more api's from remix to your plugins so it can be so if you need something that it's not provided yet just please jump into the channel inside Gita and we'll we'll try to make our best to open this API for you for your plane so it's very important we are we want to listen to you guys we want to be able to have feedback some do what you need so now that you understand what plugin is and

why we want to do plug-in what I want to show you it how easy it is actually to be at the plugin so as again say I will try to do a plug-in to show you how to make a plug-in in five minutes and this is how much time you need to bootstrap a plugin so I'm going to show you that and for that I have my my contour here right and I'm going to remove everything from local storage so like that you know that I'm not joking right I'm doing it from scratch so I remove everything here okay I will reload okay there is nothing I just remove it I know it's written in French but I

guess you you know it's so there is nothing here like a lot a lot of pop up though okay so as I say I'm just it's just an eye friend so I just need an HTML file right so this is my workspace here so I guess most of you know of yes code so it's like basic idea there is nothing here like nothing so I hope you trust me when I say it's only five minute to build a plugin from scratch ready okay so let's start okay so either it's plain when you want to build a plug-in you want to running inside an iframe so you need a server and you need an inch ml file so let's start with the HTML file that create index that HTML

right so this is where I'm going to use my little cheat it's like a snippet okay everybody know it I don't want to write it common okay so now what do I need I actually need to use the library that we built to connect to remix so you need here no tabs open just writing it you see even documentation is between 5 minutes so I go on remix details every I'm remix blogging this is the library we are going to use so just explaining how good it is and why do you want to use it and here you are the getting started so either you can use NPM write good but in my case I only have like an index that HTML so I will all go for the unpackage

part so I pass it then what I want you to do is run the scripts so first thing first I need a client so this client is going to listen on every event from remix from the past message event so again I'm going to pass this so this is like a global variable that is given by the library and then here I'm just creating an iframe clients it's just going to listen on the event from the iPhone then I'm going to create a function let's say say hello and this function is just going to write file on remix that's all good enough for now so first I need to await the clients to

load just to be sure that it's loaded and because I'm using a weight I need a sink of course and then I will use the cold methods cool method is a way to ask any plugins anywhere that is running right now on remix IDE and I wanted expose some methods so I'm using coal for that so in my case I want to write something on the file system so I just go down go down and say okay which one of those plug-in of those API do I need to use come on guy their time is running which one five system thank you okay fine manager I go there here's of the documentation and I want to use the set file so I'll write file manager and then set

fire and if I go a little bit down here set file I need to parameter which are the name of the path for the file and the content of it so it's going to be brother slash say hello the txt and just hello world okay great so this is going to write something this is a promise because I'm using post message I'll just wait for that and I'm going to do to switch the file so you can see that it has been created so for that I'm using also file manager switch file and just the same brother slash say hello dot txt okay great then I need a button to run this function

okay button I will use a bootstrap class which is out of the box in remix just like that you don't have to worry about the style just say hello and I'm going to run say hello right so now I need to run a server I'm just doing going to use NP x live server while it's running I'm going hey there I hit Planning Manager connected to local plugins so this is going to look inside the localhost I give it a name so it's going to be say hello I am giving a display name say hello the name has to be in camel case

guys HTTP localhost:8080 and I want it to run inside the side panel still running okay it's good I can say okay it front there is this nice icon here say hello with the style bootstrap eat this it asked me for permission I remember this I accept and it's coming it's coming hello world and has been for me Newton 25 long yeah okay yes sure I can explain everything now just for

you to understand okay I hope you so that it's actually quite easy to do I just need index.html I just need a server that is running and I can create a plug-in inside and test it inside remix super easy so I'm going back again just step by step the idea here is that I want to have a server a local server web server that is running a page right and the only way to run the page is HTML so on web so I have an iframe on remix this iframe is running here on the left you see so if I just go quickly here you will see that I have an iframe and this

iframe is running my code and it's looking for the locals 8080 so here what I do is I create a very small very easy fire with an I'm run and I just run it inside a web web server and this web server run in local host right and then what I'm doing is when the page arrives when the iframe run then is going to run the page HTML very classic stuff and then yeah I have my button and my script so my script is just loading the library to communicate with Linux ID and then the script here is just basically

functions that call plugins from from plugins all the plugins and that's basically it so here in this case I'm I'm using native plug-in which is final manager five manager is native plug-in from remix but I could also call external plug-in let's say you create you you create a very nice external plug-in and you expose some methods it means that anybody can call those methods so you can improve the global api of romics by building plug-ins like that so that's basically it yes yeah so if you go to file manager here you can

connect to a local plugin so here are all the plugin that you have detect deactivate an activated one and if you reach here you have you can just say okay i want to create a new plugin and this new plug-in is going to listen on this locals 8080 just need to give a name it has to be camel case as i say and a display name so like like right here is like this plain name is in on the left basically and name is like internal stuff that is used by changing to be sure that this a unique plugin because you don't want also people to page another plugin right so that's basically it so you have any other question about

that so just for you to know there is a workshop rocketing tomorrow I'm starting this evening and the ideas for you to be up plugging in sprite so if you really have good ideas about how you can improve remix please join us and it's going to be a very good time hope so yeah yeah and the protein infrastructure is portable but important thing is

providing content for learnings with eg attire and basically we are trying to connect with our nerves and with technical writers to for helping us writing these and for helping people deaf to learn through it we also want to provide better support the community and we also want to connect people from the community like it has characterized or open deputy or pipeline so you have the lists part of the list which is and there are two staff that we plan to do

but we are still waiting and we are like just brainstorming a bit more on what we should do it's about marketplace and looking so basically as you can see there are a lot of proteins now available and when some devs want to put the proteins in they asked us to put the metal attaches on fire in in the clinics ID ripple and basically we don't want in the long term to having to manage this and we don't want to be able to have to say to devs or I don't want to plug in or I want to plug in oh wait we just want ultimately the community to Mondays yourself and to

be able to approve some plugins or discounts on plugins so that way I guess we will also use the blockchain right so we might have a contract on Shane for listing all the river brigands we might have a way to add reputation on plugins and stuff like that this might come in few months but we are still waiting now to give a ready to commit the community run plugins and twelve more people right chip cookies so if you are some ideas and if you share with us this feel free to talk to us and we can also participate on from the English on brilliance development so yeah we are also waiting for you

so is for the plug-in part and as I some stuff that we are also doing and outside of the dev areas and it's more reaching to the community and outside of the community so basically we also want to meet people that are not IT people or that are 80 people but around not necessarily blockchain related and basically we want to meet these people and to speak with them and to try to explain them what is the blockchain and how Bitcoin is different than and how maybe become either same as SEO how bit

content useful and how it can be useful too so we just want to meet other people that are not part of the inner community and we have some Terkel already we have some plan we plan to go in Paris in November after the desk or and yeah I think this part will come more in 2020 year but yeah we are basically wanting to meet other people from the community and also for helping the community to grow right because is what we want so here for the next test then if I go back to the summary I have we have two left items so the first

which is a very nice tab is a live demo from Francois it's a basically a way to mix to use your image workshop and a free box workshop together and the last item is about just you talking each other or I was talking with you about anything about workshop begins Thanks okay thanks young great so I explained I'll take the lead for the live demo so as explained just before we have you can create plugins that consume the API from remix right but you can also create

plugins to extend the API and this is what open actually working sorry profits so this is what I've done very recently with a plug-in which is a free box space so who here has heard about free box well okay so this is actually a very nice project that has been incubated in consensus and this is a project that's run on top of IP FS and OB GB and they are connecting your forum address to create spaces inside ipfs so you can you can just basically mean that

you have your own database that is everywhere with you just with your private key and it's actually very nice and we want to rearrange this power with remix because right now remix i've I think most of you have experienced that everything is local storage right I mean if you clean your browser if you if you just change your browser you change your computer then you lose everything ok so we have tools for that we have really excited remix demon we are working on a remix desktop to make it better but also we want to have a decentralized solution to be able to store all your files all your contents directly on on ipfs and this is what free box is actually doing so free box

is a very as you see CL beta it's a plugin that helps you to connect to meta mask yeah I don't have I'll go to this kind of plug-in see only to have chrome so so free box is a plugin that connect to meta mask to get your address and it's going to create a space in ipfs just for you and everything your right here is encrypted with your private key so it's using all the infrastructure from a forum but for everything that's cryptographic and then toot everything on IPF it's very nice and twas super well and ok great so as you can see we still have some work to do with the

loading stuff and styling that's coming right and this for now is just just a plugin that helps you to connect with meta mask but it's actually very nice because this plug-in is exposing a lot of stuff in this API so if you want to see it you need right now there is not very good documentation you need to go inside here and if I go here I'm going to show you that's quickly yeah so here maybe I can make it bigger here all the methods that you can thatx that are exposed by by free box so you

can like logging into free box with your accounts you can read gets the user accounts you can open the space you can close the space you can write data directly into it so we don't have a very nice UI UI right now but the idea of this plugin is to write directly from remix to free box and this plug-in is its next time on plugins built by someone else so it is run in an iframe as they explained but it's really here to be used to extend the power of the remix ide api so i will recommend to use it as much as possible it's really nice plugging and we are actually already using it inside remix workshop and remix workshop is part of our goal to build

more plug-ins for the community remix workshops so if you hit here and i will come on you to do it with me and the same same time so you go to remix alpha you have to be on linux - alpha dot every on.org and just it's this workshop button and workshop is on who knows code Academy here curriculum II never help with that ok perfect so this is basically code Academy for solidity directly here so everybody can write workshops can write tutorials about solidity just upload them on free box and then everybody can read it and make these tutorials so if we really want to

be like the place to be if you want to learn everything about solidity but can be actually it can be also for Viper of a move right because we are plugin for that now so that's that's the idea and we want to make it easy for everybody to do that so you hit here now you can go to this remix workshop stuff and here it's like all the workshop that are available but by default there is no workshop available because I need to ask a smart contract about who are the children basically so for that I need to sign in here and just for you to know is going to a lot of Probab from me Thomas so I'm going to write my password I'm going to

accept free box to use it I'm going to accept my plugin to use it I'm going to accept I don't know everybody here to use it then I'm going to open this a lot of things just for you to know but bear with me it's it's worth it of course perfect okay first one second one then here I'm just connecting it to free box so it takes a long time then now I want my plugin to connect to make a mask okay great

oh yeah because I did it already some times ago but if you do it you might have like six pop-up to use just for you to know and here now I have access to all the workshops here so let's let's go for a discover solidity for example so this is the workshop and then you just start it okay it acts you know that now just ask for permission and here you have like he wants to write on the file system and yeah it basically tells me what you do with that so I want how here you want me to return a hello world

method so if you write the documentation here you can doing you tell me what it wants to do so I want to return hello world like that so I will make just a mistake for you to realize so if I run test then it's running it's running a remix test so you and show you that or maybe again I don't remember but there is like Linux test that is running behind the scene and it's like testing your methods and if it doesn't work then it tells you exactly what you expect you to do so that remix how it works and then okay I'm just testing it now it should work it should have worked what do you expect hello world

perfect syntax awesome what wouldn't be a demo without bugs okay great it works now so you can eat next and then you have your second your second workshop so this is something we want to build because we we spend actually a lot of time during a convention and even like that doing worship because we think we are at the good place to start learning solidity or improve your skills with solidity and we just realize that a why only us should

do that right so everybody here Chris did a lot of work on that we make it to build workshops to make it even more easier today to learn solidity and this is one what we want you to to do just please try try this we have like a lot of time right now there is advance there is advanced stuff there is a newbie stuff so there is for everybody and just go there pick a workshop do this and try to work to see how good you are with solidity and try to learn something we're here to help you to follow the steps and yeah and if you also you want to build a plug-in instead just feel freedom we'll be very glad to help you

in this process so yeah that is for me and now we have some times to do the workshop basically so you have as I explained there is like you can go here a bunch of workshops to do the week order is something really amazing you should never try this recorder before I recommend to do that so yeah that's all for me thanks [Applause] yeah

it's because we cannot there is communication cannot work between HTTP and HTTPS eclis so if you're using locals then it's bright it's something that is based on the browser so the browser on the exit if you're dealing with between HTTP and HTTP but if your remixes on HTTP it is just going to say oh there is an HTTP network that is coming here and and say no I don't want it so that's browser related we kind of just do anything about that so you can either run it run your locals on HTTP right or just switch to remix with HDTV so that that and it's actually the same with with plugins if you want to drive plugins on HTTP with your locals then

you need to be on HTTP also just browser related issue yeah great so please yeah feel free to try those plug-in we spend like the last two weeks writing them it's also it's like a very new plug-in for us so we would love to have all your feedbacks about dux some maybe bugs I hope that won't be a lot of them but anyway and yeah please use this time to talk with us we are here for one hour so please enjoy Thanks [Applause]