ethereum / remix-project

Remix is a browser-based compiler and IDE that enables users to build Ethereum contracts with Solidity language and to debug transactions.

Remix Project

Remix Project

Remix Project is a rich toolset including Remix IDE, a comprehensive smart contract development tool. The Remix Project also includes Remix Plugin Engine and Remix Libraries which are low-level tools for wider use.

Remix IDE

Remix IDE is used for the entire journey of contract development by users of any knowledge level. It fosters a fast development cycle and has a rich set of plugins with intuitive GUIs. The IDE comes in 2 flavors and a VSCode extension:

Remix Online IDE, see: https://remix.ethereum.org

👉 Supported browsers: Firefox v100.0.1 & Chrome v101.0.4951.64. No support for Remix's use on tablets or smartphones or telephones.

Remix Desktop IDE, see releases: https://github.com/ethereum/remix-desktop/releases

VSCode extension, see: Ethereum-Remix

Remix libraries

Remix libraries are essential for Remix IDE's native plugins. Read more about libraries here

Offline Usage

The gh-pages branch of remix-live always has the latest stable build of Remix. It contains a ZIP file with the entire build. Download it to use offline.

Note: It contains the latest supported version of Solidity available at the time of the packaging. Other compiler versions can be used online only.

Setup

• Install Yarn and Node.js. See Guide for NodeJs and Yarn install
  Supported versions:

"engines": {
    "node": "^20.0.0",
    "npm": "^6.14.15"
  }

• Install Nx CLI globally to enable running nx executable commands.

yarn global add nx

• Clone the GitHub repository (wget need to be installed first):

git clone https://github.com/ethereum/remix-project.git

• Build and Run remix-project:

1. Move to project directory: cd remix-project
2. Install dependencies: yarn install or simply run yarn
3. Build Remix libraries: yarn run build:libs
4. Build Remix project: yarn build
5. Build and run project server: yarn serve. Optionally, run yarn serve:hot to enable hot module reload for frontend updates.

Open http://127.0.0.1:8080 in your browser to load Remix IDE locally.

Go to your text editor and start developing. The browser will automatically refresh when files are saved.

Production Build

To generate react production builds for remix-project.

yarn run build:production

Build can be found in remix-project/dist/apps/remix-ide directory.

yarn run serve:production

Production build will be served by default to http://localhost:8080/ or http://127.0.0.1:8080/

Docker:

Prerequisites:

• Docker (https://docs.docker.com/desktop/)
• Docker Compose (https://docs.docker.com/compose/install/)

Run with docker

If you want to run the latest changes that are merged into the master branch then run:

docker pull remixproject/remix-ide:latest
docker run -p 8080:80 remixproject/remix-ide:latest

If you want to run the latest remix-live release run.

docker pull remixproject/remix-ide:remix_live
docker run -p 8080:80 remixproject/remix-ide:remix_live

Run with docker-compose:

To run locally without building you only need docker-compose.yaml file and you can run:

docker-compose pull
docker-compose up -d

Then go to http://localhost:8080 and you can use your Remix instance.

To fetch the docker-compose file without cloning this repo run:

curl https://raw.githubusercontent.com/ethereum/remix-project/master/docker-compose.yaml > docker-compose.yaml

Troubleshooting

If you have trouble building the project, make sure that you have the correct version of node, npm and nvm. Also, ensure Nx CLI is installed globally.

Run:

node --version
npm --version
nvm --version

In Debian-based OS such as Ubuntu 14.04LTS, you may need to run apt-get install build-essential. After installing build-essential, run npm rebuild.

Unit Testing

Run the unit tests using library name like: nx test <project-name>

For example, to run unit tests of remix-analyzer, use nx test remix-analyzer

Browser Testing

To run the tests via Nightwatch:

• Install webdrivers for the first time: yarn install_webdriver
• Build & Serve Remix: yarn serve

NOTE:

• The ballot tests suite requires running ganache locally.

• The remixd tests suite requires running remixd locally.

• The gist tests suite requires specifying a GitHub access token in .env file.

    gist_token = <token> // token should have permission to create a gist

There is a script to allow selecting the browser and a specific test to run:

yarn run select_test

You need to have

• selenium running

• the IDE running

• optionally have remixd or ganache running

Splitting tests with groups

Groups can be used to group tests in a test file together. The advantage is you can avoid running long test files when you want to focus on a specific set of tests within a test file.x

These groups only apply to the test file, not across all test files. So for example group1 in the ballot is not related to a group1 in another test file.

Running a group only runs the tests marked as belonging to the group + all the tests in the test file that do not have a group tag. This way you can have tests that run for all groups, for example, to perform common actions.

There is no need to number the groups in a certain order. The number of the group is arbitrary.

A test can have multiple group tags, this means that this test will run in different groups.

You should write your tests so they can be executed in groups and not depend on other groups.

To do this you need to:

• Add a group to tag to a test, they are formatted as #group followed by a number: so it becomes #group1, #group220, #group4. Any number will do. You don't have to do it in a specific order.

  'Should generate test file #group1': function (browser: NightwatchBrowser) {
    browser.waitForElementPresent('*[data-id="verticalIconsKindfilePanel"]')

• add '@disabled': true to the test file you want to split:

module.exports = {
  '@disabled': true,
  before: function (browser: NightwatchBrowser, done: VoidFunction) {
    init(browser, done) // , 'http://localhost:8080', false)
  },

• change package JSON to locally run all group tests:

    "nightwatch_local_debugger": "yarn run build:e2e && nightwatch --config dist/apps/remix-ide-e2e/nightwatch.js dist/apps/remix-ide-e2e/src/tests/debugger_*.spec.js --env=chrome",

• run the build script to build the test files if you want to run the locally

yarn run build:e2e

Locally testing group tests

You can tag any test with a group name, for example, #group10 and easily run the test locally.

• make sure you have nx installed globally
• group tests are run like any other test, just specify the correct group number

method 1

This script will give you an options menu, just select the test you want

yarn run select_test

Run the same (flaky) test across all instances in CircleCI

In CircleCI all tests are divided across instances to run in parallel. You can also run 1 or more tests simultaneously across all instances. This way the pipeline can easily be restarted to check if a test is flaky.

For example:

  'Static Analysis run with remixd #group3 #flaky': function (browser) {

Now, the group3 of this test will be executed in firefox and chrome 80 times. If you mark more groups in other tests they will also be executed.

CONFIGURATION

It's important to set a parameter in the .circleci/config.yml, set it to false then the normal tests will run. Set it to true to run only tests marked with flaky.

parameters:
  run_flaky_tests:
    type: boolean
    default: true

Important Links

• Official website: https://remix-project.org
• Official documentation: https://remix-ide.readthedocs.io/en/latest/
• Curated list of Remix resources: https://github.com/ethereum/awesome-remix
• Medium: https://medium.com/remix-ide
• Twitter: https://twitter.com/ethereumremix
• Join Discord: https://discord.gg/mh9hFCKkEq

remix-project's Issues

Different variable highlight depending on storage type

Different colours for storage, memory and stack variables
The fact whether a variable is a value-type, stored in storage or memory often makes a huge difference. Similar to how other IDEs highlight variables depending on whether they are local variables or class members, Mix could make that distinction clear to the programmer.
Credit for the idea goes to @LianaHus

Static analysis: Improve gas checker

Suggestions by https://www.reddit.com/user/ItsAConspiracy :

Seems that top warning [fallback function] isn't quite right, since the contract can receive ether from user accounts or from contracts using call.value.

I think there are times when it's worthwhile to use >2300 gas in the fallback: specifically, when you prefer to throw rather than accepting the ether without crediting the sender. If your only options are to either throw or update storage, you might as well try to update storage, since it'll throw anyway if it runs out of gas.

Suppress the warning if the fallback is not marked payable.

Flowcharts to outline the preprocessing, solc compile, and execution engine.

as a reference:

like this explains the evm in detail, it would be useful for the community to understand how Remix works such that developers can get a good understanding of where modifications can be made and what the dependancies are.

getSourceMap only checks the prefix

It should do a full equality check if the current transaction is not a creation transaction.

Have an option to run any transaction as a call

Right now, those methods marked as constant are run as an eth_call, while others are run as a transaction eth_sendTransaction.

It would be nice to have an option to run time as a call.

Support more types in request inputs

I think it would be the best to follow Solidity as closely as possible:

• "string" - string literal
• hex"0011ff" - bytes literal
• 0x1234 / 123 - numbers

show nested contracts in contracts tab

When creating an instance of c1 with the following code, the constructor automatically creates an instance of c2. For debugging purposes it would be extremely helpful if this nested instance myC2 would be shown in the contracts tab and I could, e.g. see its address and call its functions:

contract c1 {
    c2 myC2;
    function c1() {
        myC2 = new c2();
    }
    
    function getC1() constant returns (uint) {
        return 1;
    }
}

contract c2 {
    function getC2() constant returns (uint) {
        return 2;
    }
}

Static analyzer - warn when using control-flow modifiers in assembly

From ethereum/solidity#3258.

Depends on ethereum/remix-ide#921.

It would be nice to warn if using assembly instructions which modify the control flow (e.g. they abort execution). All of them are available in the higher level language and in many cases using them there makes more sense.

Assembly instructions to highlight: invalid, return, revert, selfdestruct

cc @soad003, you might be interested

Gas for Execution Cost doesn't add up

Considering the following contract:

pragma solidity ^0.4.19;
contract A {
    
    function testme() public{
        
    }
}

It uses gas for input (transaction cost): 4*68 = 272 + 21000 = 21272 - this is correct in Remix. But I cannot verify the execution cost:

It uses the following instructions according to the debugger:

Gas	Instruction
3	000 PUSH1 60
3	002 PUSH1 40
3	004 MSTORE
3	005 PUSH1 04
2	007 CALLDATASIZE
3	008 LT
3	009 PUSH1 3f
10	011 JUMPI
3	012 PUSH1 00
3	014 CALLDATALOAD
3	015 PUSH29 0100000000000000000000000000000000000000000000000000000000
3	045 SWAP1
5	046 DIV
3	047 PUSH4 ffffffff
3	052 AND
3	053 DUP1
3	054 PUSH4 7fdcf8c4
3	059 EQ
3	060 PUSH1 44
10	062 JUMPI
1	068 JUMPDEST
2	069 CALLVALUE
3	070 ISZERO
3	071 PUSH1 4e
10	073 JUMPI
1	078 JUMPDEST
3	079 PUSH1 54
3	081 PUSH1 56
8	083 JUMP
1	086 JUMPDEST
8	087 JUMP
1	084 JUMPDEST
0	085 STOP

Which is in sum 119 gas, but the instruction details in the Remix logger shows 128.

status	0x1 Transaction mined and execution succeed
from	0xca35b7d915458ef540ade6068dfe2f44e8fa733c
to	A.testme() 0x692a70d2e424a56d2c6c27aa97d1a86395877b3a
gas	3000000 gas
transaction cost	21400 gas
execution cost	128 gas
hash	0xccca4e36cc65d4856f556ad56414848b82d6eccd9ea7a66dfa76e194042e555c
input	0x7fdcf8c4
decoded input	{}
decoded output	{}
logs	[]
value	0 wei

The instruction cost is the same as shown in Appendix G in the Yellowpaper, this is something I could verify. But I cannot verify where the 9 gas are coming from.

add a .remixignore file

Add a TODO list

Helpful for larger contracts > 700 lines.
List all "// TODO ..." and make it "clickable" with jump-to-line action

Update deprecated babel-preset-es2015

remix$ npm install
npm WARN deprecated [email protected]: We're super 😸 excited that you're trying to use ES2015 syntax, but instead of making more yearly presets 😭 , Babel now has a better preset that we recommend you use instead: npm install babel-preset-env --save-dev. preset-env without options will compile ES2015+ down to ES5 just like using all the presets together and thus is more future proof. It also allows you to target specific browsers so that Babel can do less work and you can ship native ES2015+ to user 😎 ! We are also in the process of releasing v7, so please give http://babeljs.io/blog/2017/09/12/planning-for-7.0 a read and help test it out in beta! Thanks so much for using Babel 🙏, please give us a follow on Twitter @babeljs for news on Babel, join slack.babeljs.io for discussion/development and help support the project at opencollective.com/babel

check if storage is properly reverted

Consider using a newer version of ACE

There were perhaps a lot of improvements in the last 8 months.

• require newer version of ACE in package.json
• regenerate mode-solidity using the new version
• merge mode-solidity with upstream (long term)

Display compiler license somewhere (in an about window)

Use solc.license() to retrieve the text - it will be very long though.

Depends on ethereum/solc-js#121.

Cannot select a blob of text to copy-paste-google-fu, as the click event is moving editor to the place where error occurred.

relative and path with ˜ should work

Show and update balances of deployed contracts

mappings in memory

Structs containing mappings in memory are not handled properly. The mapping has to be completely ignored (i.e. it occupies zero space) when the struct is used in memory.

contract c {
    struct X {
        uint a;
        mapping(uint => uint) b;
        uint c;
    }
    X x;
    function f() constant returns (uint) {
        x.a  = 1;
        x.b[2]=3;
        x.c = 4;
        X memory y = x;
        y.c = 9;
    }
}

Support the EPM specification

Would be nice to support the EPM packaging spec: ethereum/EIPs#190

Add the remix' simple disassembler as a tool

Use Monospace for Error/Warning

Check chrome extension

comment from gitter
@yann300 @chriseth I'm running Remix as a Chrome extension but I'm getting destructive behaviour often when it starts up... It asks to overwrite local files with files from 'the cloud'. As an extension I have no idea what it thinks 'the cloud' is or where it stores these often older versions of my files but it does keep a set in local storage also. Regardless, I'm never sure which set are current and have on numerous occasions had days worth of work reverted by some older set of the same files.... Any ideas?

Feature Request: Export contract execution code history as test suites

Since Remix already fetches all the available functions and also allows running the functions, this feature should be reasonable and feasible to implement.
It can save hours for numerous developers rewriting these codes all over again!
Thanks :)

"Loaded address" does not always follow inter-contract calls

If a contract calls another, the "loaded address" in the "Step Details" tab shows the current loaded contract, at least most of the time.
Example:
http://etherscan.io/remix?txhash=0xea9332a2d33b659e1520c3927741bdc1d15bcd13601c413220bc8de9c271d917
Location 4019
VM trace Step 699
Execution step 259

There is a call to 0xbd5af6f705e4582c3f2b368ccf278ce39c3cfc17 but the "loaded address" doesn't keep track of this.

Rationale: I use the remix debugger to quickly fly over the instructions (with the slider) to see which internal calls happen. If loaded address doesn't change correctly, you have to manually click through every step.

start/stop Mining from remix

If that the feature is provided by the client

Add a warning if referencce slot not resolvable

We should add a warning for this cause the bytecode of lib will contains a slot for its self reference.

library lib {
function create () returns (address)
{
child k = new child();
return address(k);
}
function getFromLib() returns (uint) {
    return 45;
}
}
contract child {
function get () returns (uint) {
return lib.getFromLib();
}
}

add test module for Firefox 49 and >50

Document API

The external remix API should be documented.

Display storage variables even if source does not match perfectly

For debugging existing contracts compiled with old compiler versions, it might make sense to use a given source code, even though the bytecode on chain does not match perfectly. This could be very useful to at least display storage variables correctly (local variables and source references will not work).

Unit testing for applications

Browser-Solidity should support unit tests for contracts written in javascript using the web3 framework.
This requires several changes:

• allow files to be non-solidity (i.e. javascript)
• allow javascript files to be run against the current web3 object
• potentially integrate a test-runner to render test results nicely

save to swarm

In a similar way to https://github.com/ethereum/browser-solidity/issues/153 we could auto-save and synchronize files / projects to swarm.

This will be much more crude than github because swarm does not have version tracking. Can we use mango?

A very simple version of this would automatically publish all files in a project and display (and update) the root hash for the project.

A still quite simple version would connect this via ENS and display (and update) a name that links to the root hash for the project. If there are conflicts, you only have the option to ignore local or ignore remote changes.

Warning when contract tries to call external contract in constructor

Redirecting from solidity. It's all explained here: ethereum/solidity#3136

Add Built time and Version number

Support finding the origins of values in the stack

In the state view of remix, it would be nice if we can click on a stack element and jump to the instruction where the element is produced.

Alternatively, moving the mouse cursor on to a stack element can change the color of the instruction that produces/consumes the stack element.

package remix-ide, mist, geth

so we can use local exe instead of looking at the env path

Memory value rendering

in Memory, 0 grey and non zero char black

Insert code snippet

Include easy way to use code snippet, code pattern.
could be a list of solidity code snippet that user would drag and drop to the editor.
There were post in reddit of a github repo that contain only solidity common pattern

Warn if trying to send value to a non-payable method

Depends on ethereum/remix-ide#223.

Assess performance

Assess the performance of both the UI and the trace retrieval / reformatting / data enrichment functions.

display storage keys

Display key, value instead of a complex hashedjey, key; value if all the keys are known.

Markers similar to "flame diagram" above / below slider

The slider could benefit from markers that show internal and external function calls similar to a flame diagram in a browser debugger / profiler: https://pbs.twimg.com/media/Ci2HjxgWEAImxDB.png

Allow to manually set gas price

Please provide a way to change the gas price per transaction.
The current default makes it very easy to work with libraries and proxy contracts.

Remix doesn't recognize auto generated functions as a valid abstract interface implementation

Hey,

In the following example -

contract AbstractToken {
    function totalSupply() external constant returns (uint256 totalSupply);
}

contract Token is AbstractToken {
    uint256 public totalSupply = 0;
}

Remix won't allow the user to create an instance of Token ("This contract does not implement all functions and thus cannot be created"), even though the auto generated compiler function for totalSupply matches the abstract interface signature.

Was tested on solidity 0.4.11

Note that solc actually compiles Token with no error.

See ethereum/solidity#2254

Edit: the issue is also valid when the abstract parent is an interface instead of a contract.

Add toolbar for creating Solidity packed hashes

Perhaps use the solidityPack from ethereumjs-abi:

var abi = require('ethereumjs-abi')
var BN = require('bn.js')

abi.soliditySHA3(
    [ "address", "address", "uint", "uint" ],
    [ new BN("43989fb883ba8111221e89123897538475893837", 16), 0, 10000, 1448075779 ]
).toString('hex')

Contract properties should live update

When deploying & interacting with a contract, and setting a value, it's confusing when that value does not update in response.

It would be nice if the contract values updated when a new block had a new value associated.

Maybe this would require polling, and would be a performance concern?

Support EditorConfig

EditorConfig helps developers define and maintain consistent coding styles between different editors and IDEs. The EditorConfig project consists of a file format for defining coding styles

More: http://editorconfig.org

(It also has a javascript implementation)

Deploy ABI to reverse record in ENS

@Arachnid just made me aware of "reverse ens records" and the fact that you can store contract ABI there. The deployed contract has to register its reverse record as part of its constructor (or at any time, but the registrar has to be called from that contract).
Since this process is similar to the "publish to swarm" process, we could add a button next to that button "publish ABI to ENS" or something like that.

Clicking the button would check that

1. we are connected to a node,
2. some contract we deployed in the past has a reverse record (and some of the accounts we control is registered as the controller),
3. we still know the ABI to that contract

We can iterate over all contracts we deployed in the past, potentially offer a drop-down selector and also display error messages if none matched.

Change storage Panel to fit with storage Resolver

• warn user if storage not complete
• allow scrolling down

Watch lib is polling

change it to one that is not polling but register to OS event