Running JS Async/Await scripts in Remix-IDE

And do not call it fixity,
Where past and future are gathered.
- T.S. Eliot

Remix IDE is usually synonymous with writing Smart Contracts, but you can also run JavaScript code in it as well. Plus, we have just completed an update where JavaScript async/await calls will work.

But why run JavaScript when you are writing smart contracts?
When you…

• are getting the front-end of your dapp together and want to try out some code that works with web3.js or ethers.js.
• are updating your dapps code and want to test it out.
• want to quickly deploy and interact with a bunch of instances of a contract without going through the GUI.
• have already deployed contract and want to run some tests on it for a safety check.

So lets walk through an example.

For this demonstration, I will show several scripts that use async/await. They will deploy a contract and interact with a smart contract through web3.js or ethers.js— just like a Dapp could or would. And it all will happen inside of Remix IDE.

Setup

So before getting to how the scripts work, we need to get the smart contracts ready. Getting them ready means they need to be compiled, their metadata generated and the environment needs to be selected.

Just like the front end of your Dapp needs the ABI, so does Remix when working this way. The ABI is part of the contract’s metadata . To generate the metadata, we need to click the aptly named Generate contract metadata option in the settings module.

When the Generate contract metadata option is selected and the smart contract is compiled, an artifacts folder is created in the Files Explorer that contains the JSON file.

Note: When compiling, don’t worry about which version of solidity to use in relation to Async/await scripts — they work with all Solidity versions.

Next go to the Deploy & Run module to set the environment. Even though we are not deploying from Deploy & Run GUI —the environment does need be chosen here. And when choosing the environment, there are no limitations — Async/await scripts work with the JavaScript VM as well as Injected Web3 (metamask) and Web3 Provider. More about Web3 Provider is coming soon in a Medium Post.

The example solidity code that we will interact with will create an ERC20 token.

I’ll compile this file (with the Generate metadata option selected).

Deploying with async/await

Here’s the async/await script — in my setup, I’ve named deploy.js. Notice that the async is inside a self executing anonymous function. Also note that this example is using web3.js.

The example file above, deploy.js, is grabbing the JSON file with the remix API to retrieve the contents of the file from the file manager. To learn more about the Remix API for calling exposed methods, see this part of the remix-plugin readme.

And here is a script accomplishing the same thing but this time using ethers.js.

Tip: If you type remix in the console, you’ll get a list of the Remix commands. Also see our docs about Remix commands. Typing ethers or web3 in the console will give you a list of commands from those libraries.

The script above (deploy.js) is using web3.js to deploy and to then retrieve the address of the deployed contract.

Finally, make sure that deploy.js is selected in the editor — to make it the active file and then in the console (that section at the bottom of the terminal) — type:

remix.exeCurrent()

The script should run — and will console.log this line:

deploy...

When the promise in this line:

newContractInstance = await contract.send

is fulfilled (after the txn was mined and web3 has returned it), the script will console.log the contract’s address.

In my case, my contract was deployed to

Accessing a deployed contract with async/await

Below is a script that interacts with the deployed contract.
I’ve called mine access.js — this one is using web3.js

Remember, before you run this, put in the contract address that was returned from the last script.

And here is a script using ethers.js that interacts with the contract in the same way:

And with this script’s tab selected in the Editor, run: remix.exeCurrent()

If you run this script immediately after running the deploy.js script, you might get a response like this:

And this is because you are querying a different node than the node you deployed the contract to and the nodes have not yet sync’d. So either:

• you need to put a delay in the script to allow for the time the nodes take to sync or use another script
• or just have a few sips of extremely hot coffee, look out the window and try to hear a bird sing (or your kids screech), before you the run the access.js script.
• or if you have already run the script and got the response like the one above, then run a script that just checks for the balance of the contract (see the example below). And more than likely, by the time you’ve run that script, the nodes will have sync’d and you’ll get the expected response.

Here is an example of a script that I’ve called getBalance.js that is using web3.js to get the balance of a contract:

And it should return:

With async/await we can use Remix to simulate what will be going on in a Dapp as well as automating interactions with a contract and contract testing. Hopefully you will have more ways of using Remix and ways of sharpening your ethers.js and web3.js skills to build better more secure Dapps.

T.S. Eliot said not to call it fixity, but with async/await & Remix, the fixity is in.