Redefining the Development Experience on Ethereum
EDCON 2021 · 28 Aug 2021 · 9:33
Edrick Y Guan demonstrates Ethereum Studio as a desktop and browser development environment for smart contracts. He walks through project creation, compilation, deployment and contract inspection, then shows network and key management, MetaMask connectivity and integrations with development frameworks including Truffle and Hardhat.
Speakers
Topics
From EDCON 2021, hosted by EDCON.
Transcript
good morning fellow developers my name is edward cohen from ocd labs today is a pleasure to speak on intercom and share our ide voicethread we call it eastern studio ethereum studio is a multi-platform id unit current either on desktop or your web browser it integrates all necessary tools throughout the smart contract development flow and stack some of the most favorite tools in it for example code editor based on vs code and security language support native support for truffle hardhat and welfare frameworks it also has a guest note and neither is not js library to run and connect to the instrument networks which includes testnets and the mainnet we also built a keypair manager and a contract inspector so that our
developers can easily interact with the deployed smart contract now let's take a closer look at ethereum studio this room studio has very intuitive user interfaces where on the top left corner we have a project manual work management projects on top right corner we have a contract inspector where you can interact with your online contract block explorer where you can check account details in network manager where you can manage your controls as well as the mod connections on the bottom to the left we have a keypad manager where we can centrally manage your key pair including create import and delete creating a new project is easy in eastern studio
click on the create project button fill out the name and select from the provided templates and select your framework we support truffle hardhat workflow in through studio then click create the studio will create the project for you when you are opening your project we offer intuitive project setting view where you can see all the general settings for your project and here you can see we offer two choices for the later which can lead to a codes for any arrows or warnings and it will mark the line that has arrows or warnings for you and if you move your cursor onto the warning or error mark it will show the details about the warning or error just like this
also our call editor supports a go to definition if you have any source code internally linked in your source code simply click on the link and it will guide you to the source code in the code editor click on the build icon on the toolbar to start rebuild for the project the compiler output will be placed under subfolder named artifacts in the same project path give it a few minutes here we go as we see continue to build sorry continue to deploy the contract
by simply click on the deploy button fill all the forms and hit deploy button the therm studio will deploy a contract for you after a deployment you can jump over to this contract inspector to debug your contract the contract inspector will generate the uh list of write functions view functions and even query from the api file you just recently deployed it will also populate the form for parameters based on specific functions and detect the data type for each of the column for example in the address column we support select from the drop-down menu or fuzzy search with any combination of the characters
now let's do a simple transfer function where we transfer 100 tokens from the uh keypad one to keypair2 before we proceed let's check the balance for keypair 2. now it's zero then we hit execute and push the transaction to the zoom studio the result column will show the return response of the message invoked now let's check again it's 100 and supposedly when we check the query for transfers is supposed to give us a transfer of 100 here that's the newest transaction online sometimes some of the contracts might
have a more complex data struct where using studio are able to construct the whole data structs out of the api file and populate the form for you to fail that will detect different data type in that instructor and so as the return response the studio will parse the return response as the data struct and the highlightage according to the different data type and show the actual data type it displayed for high readability the instrument studio has a network
manager where you can monitor your local nodes as well as switching over between different connections about testnet and mainnet once you switch over to a specific net the ethereum studio components will be all connected to that network you just specified now i'm switching over to the web version because of the web version we not only support switching but also support connection to the meta mask now i'm on the third minute controlled by metamask and when we check the blocks for here it connected to the mainnet as well on the mainnet when we are checking account details it will show all the available urc20 tokens in the account
and also we integrated the useful tools on the blocks for which can make transfers click on the transfer icons and you will be able to use any of the tokens in the account to make it transfer to the recipients and when you are using metamask connect with the instrument networks method mathematics will control the switch of testnets now let's switch over to the test network any service you can do will follow the switch and on the uh testnet as we see blocks sorry also integrates a faucet icon so that when you hit on the faucet it will
bring you to the first application website where we can apply for the test tokens also when connected with the metamask the mathematics will take over the uh transaction processing to the ether networks let's try a simple transfer of 0.2 ethers to another recipient hit sign and push atomizable pipeline and ask for confirmation about transactions simply hit confirm the transaction will be pushed to the networks and be processed for all of the transaction recorded to the networks not only the transfer function
but also a method location it will be recorded in the bottom transaction history column and you may recall the transaction details by simply clicking on any of the entries it will bring back the parameters tx and visit for you also sometimes people may want to interact with smart contracts that are not deployed in eastern studio we offer a api storage where you can simply import those api file so that the contract inspector will be able to read it and generate the list of functions and event query as well as the parameter form just like we did in the previous demo so that you can
interact with the contract for some programmers we offer a or they might find it useful to use the rpc kind where we support all the ethereum rpc apis where you can fill the parameter form and get the wrong response from these theorem networks whenever you are using zoom studio and have a issue question feedbacks or wishlist you may simply click on the top right corner and use that report any issue button function
to report a feedback to us we really appreciate any feedbacks from our developers as we are still developing and make it even better than ever now this is pretty much my demo today and thank you very much for listening to my introduction to ethereum and since your stream studio is a community project you may access systems through the web at any time at eth.ide.black or you may check out our github repo on the link above if you're interested in other works we've done at obsidian labs follow us on official website github repo
or twitter and thanks again for listening my name is cedric from cblax