Remix 🛠 Remix for Hackathons - Aniket

foreign [Applause] [Music] IX team remix ID I hope some of you have been worked on that so I am going to basically explain that how you can use the remix for the hackathons okay going further okay just I would like to add that at the end of this session there will be a challenge where there will be some questions and they should be answered depending on the session flow or session slides so they will require some of the optimized Earth and you guys can scan this uh QR code or the uh open this URL which can help you to get the required Optimizer to perform the challenge perform the chat challenge because that will be one contract interaction so you can just open this link it will open one hack MD document you can put your address there and you will get certain amount of optimize ads in that address okay so let's moving further okay uh so we can see that how remix can be useful when there are such hackathons like uh at India so in the hackathons there can be the teams which wants to learn learn and develop some things very fast or like they are kick starting a project or like collaborating together within the team then there can be like they will be needing some importing of files and then they can export some files for sharing it with some somebody else online and then there there can be a chance that you are developing a project which is requiring you to deploy a particular contract on multiple chains then it it can be that you are working with certain Frameworks like hard hat Foundry or this truffle so you can combine the those Frameworks and mimics both and at the end there can be a way where you can just share one UI for your smart contract and it can help maybe your judge for that your code is working or something so let's moving on these things one by one okay so this is um the latest remix ID home page this is the first page you see when you just land on nimix ID and you will see that remix provides you certain um default workspace with certain list of files so that you can just quickly start with your development so there are some contracts there are some js files there are some test files in solidity and JS also and if you are like very beginner and you are just starting the things with the web 3 word you can just go to this learn section where there is this remix Basics and you can just click on get started it will take you to a plugin called learn it there you can basically check out check out the remix basics there are multiple tutorials you can go through them one by one and apart from the remix there are other tutorials so you can just check them in the Linux itself there can be like solid beginner course or like you can develop the irc20 token or the one nft and then um so I would just detail out that how this course work if you will go inside a course inside a solid a beginner course so what will happen um there is some description given for a particular concept like here on screen you should you can see that uh there is a detail about that how you can use the enum in your smart contract and then after giving that theoretical detail there will be one particular assignment on the bottom of it which will ask you to perform certain step on the remix ID itself and then uh it will basically require you to write some code so you can just write that code and check your answer so there is this button which basically helps you to check your answer is right or not otherwise if you are just stuck and couldn't find any answer you can just click on show answer and if you are very very new uh and you don't even um have come across with the remix ID before so you are using a plugin so you can always go through these plugin documentation here you can see there is this uh carat icon you can say and then there is this documentation link so you can just go to that documentation and you can check that how you can use that plugin also if there is a green check mark on the top of of a remix plugin it means that Remy's remix maintains this plugin remixes like maintaining the code of it and they are doing everything here and there it is not an external plugin all developed by any third party so this is a plugin maintained by remix moving further if you are just starting with the project so you can see on the Home tab of remix there are there is this section which says get started project templates so there are particular templates uh you can see here there are blank template and then this default remix template there is this erc20 template and erc721 templates so you can just quickly click on one of the cards and it will just load a set of files for you along with the contract so here I have I am I am showing the example for erc20 so it will just add a my token.sol contract which will be having the erc20 code and then there will be like scripts which can help you to deploy that contract and there is this test file which is uh basically containing the test cases uh in the in a solidity file itself moving further so this was one way that you can just create a workspace which is already there but if you just want to customize your templates your workspace templates so you can just use these icons here there is this plus icon and then this create workspace icon will also open if you will click on this hamburger so if you will click any of the those options there will be this create workspace model and if you will choose a template from open Japan category so for now this customization is available for the open Japanese only so you just select a template from open jet plane and then there will be these options where you can just customize your templates so you can make your make your token mintable burnable or possible which are very common use cases now and then you can also decide if your contract can be upgradable or not so you can just select one type of contact upgradability here and you can further click on OK and yeah here you can select the option and this will just load the updated contract code in your workspace okay then during a workout during um a hackathon you need to work within a team so you may be collaborating on a project so remix supports some of the git operations within the browser itself so let's talk about the cloning so you can just click quickly click on this hamburger icon and there will be this clone option which you can um which you can click on and then there will be this model where you can just put your GitHub repository link and it will just quickly load all the files from that repository in the remix file explorer plugin so this is very quick you can use it anytime during the hackathon coming to this this uh okay so when you are working with the git you are definitely working with lots of the branches so that is also provided within the remix you will see this uh git section git Branch section on the bottom of file explorer plugin on the remix and then once you click on it it will show all of your branches which are there on on your git repository so you can just quickly switch between them these these was the uh some initial operations and then if you are looking for more elaborative options like pushing and pulling some repo so there is this digit plugin which is there uh on the remix ID itself and it allows you to do the GitHub operations in the browser itself so there are some dedicated cards here you can see and you can expand one of the card according to your use case you will see that there is this GitHub setting so basically if you want to perform something with your git repository you have to provide certain GitHub credential which are there only in your browser itself so you can just go to change the settings and then you will see this GitHub access token section on the setting section of remix ID there you can just provide your username and email and some at some places you will require a token also so those description is given here already you can just read out that how you can create one just token okay further when you have just cloned a project and you have activated the digit plugin so as soon as you will update a file you will see that I have added one comment here so those changes or the changed files list will appear on the digit plugin and if you want to just check any time that what it changed in that particular file you can just click on that particular file name and it will show you the side by side difference that what is changed in your uh file and that is completely online on the browser remix ID further you can just add your add your files you can see these plus icons here so you can just add those files and then you can just go to the commit section and provide a comment message I have provided the test commit message and you can just commit those files then there is this last option where you can just update your GitHub repository online so you can just select a remote branch and click on push button so this will be updated okay apart from the git if you are working on a project and you are just looking to import any file in your existing project so remix provides that also on the Home tab there is this open file button which basically allows you to upload a file from your local computer or local device further uh if you want to import some files from some of the online resources there is this GitHub just ipfs and https options you can click one of them and you can provide the link online Link of that file and that file will be loaded in your um in your workspace if you don't want to load the files in the workspace and just want to use in your code files so you can just write these import statements so first import statement is for the npm modules this is very common uh throughout the Frameworks and then if you are just looking to pick up file from the GitHub so you can just put the complete URL of GitHub and it will just pick that file also and then there is this common way of importing the relative files you can you have also the options to export a file as a gist which can help you to show that file via one URL so whenever you go to your workspace you can just right click on a file name and there is this option published file to just and once you will click on it it will just ask that you are going to publish it publicly and once you confirm it it will just publish that file on the gist and then it will give you this URL you can just quickly open and check out that if it is it is properly published or not and then there is this GitHub icon you can see on the top of your workspace files which basically allows you to export the complete project as as a as the guest uh just uh URL so it will basically export all the files within the contracts folder scripts and test all all the files from those directories will be exported on the gist and you will get the that particular link where you can just share those files with others okay coming to this compile contract and running a script so there is this traditional way if you have worked with the remix before so you can just see that there is this common button using which you can just compile the contract and for running a JS or TS script you can just right click on a script name and you can just click on the Run so that script will be running so remix support the JS and TS bought the scripts now and then there is this recent addition there is this green play button you see um so if you have selected a solid solidity file so you can use this green play button to compile that file quickly and if you have selected the TS or JS file in your editor so this same particular play button will help you to run that script so you don't need to switch between the plugins you can just quickly uh quickly click on this play button on the editor and then there is another way to just quickly compile and run the script so basically you can use this if you want to attach a script execution with a contract compilation so what will happen that you will write this custom Dev run script Nat spec tag and you will provide one script path here and what will happen that as soon as you will compile the this storage.solve contract it will run this script also so you can just click on compile and run a script or you can just click on click the control shift as keyboard shortcut so you can just quickly edit your file and then you can just click Ctrl shift s so it will just compile that file and will run that script so a script can be can have the logic to deploy a contract to run the JS test cases or even verifying the verify verifying a contract on The Ether scan so that is also possible by writing a script on the remix so you can just quickly make the changes in your file and then run the jss script okay then there is another way where you can just share your state of transactions with others so remix provide this transaction recorder here so if you are working on a project and you are like performing 10 steps and then you want that your teammate should be uh on the same level to test out some quick things so you can just uh go to this transaction record instruction and you will click on save so it will basically save a scenario file scenario is basically mentioning that uh mentioning all of the transaction that you have performed you can save that file and you can share that with your teammate and your teammate will open that file on the remix and he or she can just click on this run button here and he or she will get the same list of transaction executed automatically on that particular contract so you don't need even that particular contract or you don't need to compile that contact you just need this scenario file and all the transaction will run in the same sequence here and you will get this log of running the transactions in the remix terminal okay coming to this part where you are working uh with a with some framework which is like harder truffle or Foundry so remix helps with that also so there is this uh npm module which is remix D it helps you to connect a project from your local computer to on browser remix ID so you can just go to your project directory on your local computer and you can just run the image D command and it will start basically a web socket Channel and then you can go to remix ID you can connect click on connect to localhost it will show some instructions and you can click on connect and it will load that project from your local device this will be loaded under the workspace localhost so that you can always or you can always remember that you're working with your localhost and not with the workspaces which are online on the remix and then uh suppose you are working with harder framework and you have connected your harder project with the remix ID so when you will go to the solid compiler you will see this new uh option of enable hard hat compilation so what it will do it will basically compile the content on the remix and for the hard hat also like when you run the npx hard hat compile command it will do that automatically as soon as you click on this checkbox and this comparison will take place using the configuration which are which is set in this solid compiler plugin itself and then you can you can just go from remix compilation result and from harder comparison result there is this refresh icon so anytime you click on this refresh icon it will load the compilation result from your local hardware project and then there these specific providers for the Frameworks so all the Frameworks provides a certain local chain and you can use these products to connect with those chains you need to provide these Json or PC endpoint and you can see that this Foundry provider provider has loaded these addresses here okay so remix also provides some L2 providers so you can use the optimism provider or the arbitrum provider or if you want to use any custom Network so you can just click on this plug icon it will take you to the chainlist.org website where you can add the other uh other network and you can just connect with them using the remix ID okay so there are some more editor features which are provided by remix ID one is that if you are you have just messed up your code and you just want to quickly format that so you can just right click and click on this format code there is this keyboard shortcut also which you can use let me exploit the autocomplete when you just type so if you just write import you will get the option of open Japan and as soon as you will type the path you will get the other options and this feature basically provides you the inline gas estimates here so as soon as you write some code you get the gas estimates and if you you will close all the tabs in the remix ID you will get these uh keyboard shortcuts and there are some random features that remix support the console.log and then you can load a contract from GitHub to remix just by changing this URL so you can see just that I have just updated github.

com to remix.thereum.org and it has been loaded here you can just quickly use the library methods with the remix ID so there are web 3 and ethers and other remix libraries which you can use so here I am I have shown this method which can help you to quickly convert one string to bytes 32. and then if you are done with your uh smart contract you can just quickly go to One Click dab plugin you can select your uh contract here contact should be compiled and deployed and then you can provide this deployed address you can click on generate dab it will basically create one unique link for you which you can share with anyone you want to allow the interaction with your contract so if you will just open this it will open this interface where you can just read and write the contract methods okay so that is it for the workshop is there any query from anyone okay so there is a quick um remix challenge if you want to perform so you can just open this link and there will be the four questions which you can answer and then you can create a zero knowledge proof using that so as soon as you open this link you will get all the instructions there that how you can perform that challenge I can try to open it here also so here you will see you will see these four questions you can find their answers and then you can go through these tips which are described during the workshop so you can just clone this repo in the remix ID itself I can show you it directly on the GitHub and then you need to go to this script this compute.js this is script would basically help you to compute the zero knowledge proof so you can go to this compute please clone it within the remix ID because you need to perform some contract interaction so you will clone it on your remix ID and then we'll open this file and then you will go to line number 52 where you need to update this nullifier value to some random value this should be unique for you and then you can put the answer of those questions within the course here on the line number 54 55 56 and 57 so you these answers are case insensitive so you can just put the answers here and then you can run the script in the remix ID as it is it has been explained that just click on the uh click just make a right click on the file name and you can just okay let me just do it with you so you can open the remix ID you can go to clone okay come on that is fine wow okay it is taking time for me usually it is not like that seems hanged a bit okay so it is cloned here and then you can go to Scripts you can go to compute and here you can just update this value to any random value and you can put your answers here within the codes like so here are the questions in the hack MD file what is the name of the plugin that allows the get operations and then this one is about the net spec tag and then this is about that the workspace name when you connect a project using remix D and then this one is a one non-technical question so you can just put the answer of those four questions here one by one and click right you can just right click and run it so if you will put the right answer only then it will run otherwise it will just fail so if I just try to do something like that it will show you the logs here on successful completion yeah so I have one put the right answer so here it is showing me this error so you need to put the right answers and once you will put the right answer and run that script it will basically create this file in your workspace which is a zero knowledge proof and then you once you submit that proof so it is clear that you know the answers but you don't need to disclose the answers and then you can just go to this plugin and connect to optimism provider it will require some optimism health so if you don't have them so just go to this link and drop your ethereum address you will get some optimism to perform the transaction and then you can just run this script this script will basically submit your zero knowledge proof and as soon as this will be successful you will get one nft minted like this it will be looking like this which is like limited for the ath India and you can see always these remix reward nfts here on the remix reward platform so there are more other people there are other nfts which are distributed so these are the just the remixes they may take some time to load so you can get one of these nfts does anybody need any help to execute this challenge okay then just go here and select this optimism provider I don't have metamask here so this will not work for me okay then I think this is it so here are the remix links and we are most frequent we just provide most frequent responses on the guitar so you can just put your queries there and this challenge will be open for some time so you can just try out in some time so this is this hack and be document is visible out there okay thanks for your time