diff --git a/docs/compile.md b/docs/compile.md new file mode 100644 index 0000000000..8123ade117 --- /dev/null +++ b/docs/compile.md @@ -0,0 +1,28 @@ +Compiler (Solidity) +=================== + +Clicking the Solidity icon in the icon panel brings you to the Solidty Compiler. + +Compiling is triggered when you click the compile button ( **A. in image below**). If you want the file to be compiled each time the file is saved or when another file is selected - check the auto compile checkbox ( **B. in image below**). + +If the contract has a lot of dependencies it can take a while to compile - so you use autocompilation at your discretion. + +![](images/a-sol-compiler.png) + +After each compilation, a list is updated with all the newly compiled +contracts. The contract compiled can be selected with the Contract pulldown menu ( **C. in image below**). Multiple contracts are compiled when one contract imports other contracts. Selecting a contract will show information about that one. + +When the "Compilation Details" button is clicked ( **D. in image below**), a modal opens displaying detailed information about the current selected contract. + +From this tab, you can also publish your contract to Swarm (only non +abstract contracts can be published). + +Published data notably contains the `abi` and solidity source code. + +After a contract is published, you can find its metadata information +using the bzz URL located in the details modal dialog `SWARM LOCATION`. + +Compilation Errors and Warning are displayed below the contract section. +At each compilation, the static analysis tab builds a report. It is very +valuable when addressing reported issues even if the compiler doesn't +complain. ([see more](static_analysis.html)) diff --git a/docs/compile_tab.md b/docs/compile_tab.md deleted file mode 100644 index 55b7452da9..0000000000 --- a/docs/compile_tab.md +++ /dev/null @@ -1,28 +0,0 @@ -Compiling contracts -=================== - -By default Remix triggers a compilation each time the current file is -changed or another file is selected. If the contract has a lot of -dependencies and takes a long time to compile, it is possible to disable -the autocompilation. - -![image](images/remix_compiletab.png) - -After each compilation, a list is updated with all the newly compiled -contracts. - -Details modal dialog displays detailed information about the current -selected contract. - -From this tab, you can also publish your contract to Swarm (only non -abstract contracts can be published). - -Published data notably contains the `abi` and solidity source code. - -After a contract is published, you can find its metadata information -using the bzz URL located in the details modal dialog `SWARM LOCATION`. - -Compilation Errors and Warning are displayed below the contract section. -At each compilation, the static analysis tab builds a report. It is very -valuable when addressing reported issues even if the compiler doesn't -complain. ([see more](http://remix.readthedocs.io/en/latest/analysis_tab.html)) diff --git a/docs/quickstart_javascript_vm.md b/docs/create_deploy.md similarity index 55% rename from docs/quickstart_javascript_vm.md rename to docs/create_deploy.md index a9abe8ee1f..77279ca5cf 100644 --- a/docs/quickstart_javascript_vm.md +++ b/docs/create_deploy.md @@ -1,5 +1,5 @@ -Quick Start using the JavaScript VM -=================================== +Creating and Deploying a Contract +================================ There are 3 type of environments Remix can be plugged to: `Javascript VM`, `Injected provider`, or `Web3 provider`. (for details see [Running transactions](http://remix.readthedocs.io/en/latest/run_tab.html)) @@ -7,15 +7,17 @@ There are 3 type of environments Remix can be plugged to: Both `Web3 provider` and `Injected provider` require the use of an external tool. -The external tool for `Web3 provider` is an Ethereum node the tools for -`Injected provider` are Mist or Metamask. +The external tool for `Web3 provider` is an Ethereum node and for +`Injected provider` Metamask. The `JavaScript VM` mode is convenient because each execution runs in -your browser. Thus reloading the page will restart Remix with an empty -state. +your browser and you don't need any other software or Ethereum node to run it. + +So, it is the easiest test environment - **no setup required!** + +But keep in mind that reloading the browser when you are in the Javascript VM will restart Remix in an empty state. -So for performance purposes, it might also be better to use an external -node. +For performance purposes ( which is to say - for testing in an environment that is closest to the mainnet), it might also be better to use an external node. Selecting the VM mode --------------------- @@ -26,28 +28,31 @@ should have 100 ether. Sample contract --------------- -``` {.sourceCode .none} -pragma solidity ^0.4.16; +``` +{.sourceCode .none} +pragma solidity ^0.5.1; contract testContract { uint value; - function testContract(uint _p) { + + constructor (uint _p) public { value = _p; } - function setP(uint _n) payable { + function setP(uint _n) payable public { value = _n; } - function setNP(uint _n) { + function setNP(uint _n) public { value = _n; } - function get () constant returns (uint) { + function get () view public returns (uint) { return value; } } + ``` This contract is very basic. The goal is to quickly start to create and @@ -63,12 +68,12 @@ Moving on, in the `Run tab` select, `JavaScript VM` to specify that you are going to deploy an instance of the contract in the `JavaScript VM` state. -![image](images/remix_quickstart_javascriptvm_creation.png) +![](images/a-jvm.png) -The constructor of `testContract` needs a parameter (of type `uint`). -Give any value and click on `Create`. +The constructor of `Ballot.sol` needs a parameter (of type `uint8`). +Give any value and click on `Deploy`. -The transaction which deploys the instance of `testContract` is created. +The transaction which deploys the instance of `Ballot` is created. In a "normal" blockchain, it can take several seconds to execute. This is the time for the transaction to be mined. However, because we are @@ -79,7 +84,7 @@ there and start debugging. The newly created instance is displayed in the `run tab`. -![image](images/remix_quickstart_javascriptvm_creationTransaction.png) +![](images/a-jvm-instance.png) Interacting with an instance ---------------------------- @@ -88,17 +93,16 @@ This new instance contains 3 actions which corresponds to the 3 functions (`setP`, `setPN`, `get`). Clicking on `SetP` or `SetPN` will create a new transaction. -Note that `SetP` is `payable` (red action) : it is possible to send +Note that `SetP` is `payable` (red button) : it is possible to send value (Ether) to the contract. -`SetPN` is not payable (light red action) : it is not possible to send +`SetPN` is not payable (orange button - depending on the theme) : it is not possible to send value (Ether) to the contract. -Clicking on `get` will not execute a transaction (blue action). It is -not necessary to do so because `get` does not modify the state (variable +Clicking on `get` will not execute a transaction (usually its a blue button - depending on the theme). It doesn't execute a transaction because a `get` does not modify the state (variable `value`) of this instance. -As `get` is `constant` you can see the return value just below the +As `get` is `view` you can see the return value just below the action. -![image](images/remix_quickstart_javascriptvm_callinginstance.png) +![](images/a-jvm-calling-instance.png) diff --git a/docs/debugger.md b/docs/debugger.md new file mode 100644 index 0000000000..8a5c0959ff --- /dev/null +++ b/docs/debugger.md @@ -0,0 +1,12 @@ +Debugger +======== + +This module allows you to debug the transaction. It can be used to +deploy transactions created from Remix and already mined transactions. +(debugging works only if the current environment provides the necessary +features). + +To get to the debugger - you can click the debug button in the terminal when a successful or failed transaction appears there. You can also load the module from the plugin manager and then click the bug in the icon panel. Or you can get to the debugger by running the debug command in the console. + + +![](images/a-debugger.png) diff --git a/docs/debugger_tab.md b/docs/debugger_tab.md deleted file mode 100644 index 004941baf1..0000000000 --- a/docs/debugger_tab.md +++ /dev/null @@ -1,12 +0,0 @@ -Debugging -========= - -This module allows you to debug the transaction. It can be used to -deploy transactions created from Remix and already mined transactions. -(debugging works only if the current environment provides the necessary -features). - -![image](images/remix_debuggertab.png) - -For more information about debugging, see the [Tutorial on debugging transactions with Remix -](http://remix.readthedocs.io/en/latest/tutorial_debug.html) diff --git a/docs/file_explorer.md b/docs/file_explorer.md index cabf680e5d..8f09b973ea 100644 --- a/docs/file_explorer.md +++ b/docs/file_explorer.md @@ -1,18 +1,20 @@ File Explorer ============= +To get to the file explorers - click the file explorers icon. + +![](images/a-file-explorer1.png) + The file explorer lists by default all the files stored in your browser. You can see them in the browser folder. You can always rename, remove or add new files to the file explorer. -![image](images/remix_file_explorer_browser.png) - Note that clearing the browser storage will permanently delete all the solidity files you wrote. To avoid this, you can use Remixd, which enables you to store and sync files in the browser with your local -computer (for more information see ../tutorial\_remixd\_filesystem) +computer ( for more information see [remixd](remixd.html) ). -![image](images/remix_file_explorer_menu.png) +![](images/a-file-explorer-buttons.png) We will start by reviewing at the icons at the top left - from left to the right: @@ -49,4 +51,4 @@ Connect your filesystem to Remix -------------------- Allows to sync between Remix and your local file system (see -[more about RemixD](http://remix.readthedocs.io/en/latest/tutorial_remixd_filesystem.html)). +[more about RemixD](remixd.html)). diff --git a/docs/images/a-Runtab-deploy-atAddress.png b/docs/images/a-Runtab-deploy-atAddress.png new file mode 100644 index 0000000000..89d3e77ef6 Binary files /dev/null and b/docs/images/a-Runtab-deploy-atAddress.png differ diff --git a/docs/images/a-debugger.png b/docs/images/a-debugger.png new file mode 100644 index 0000000000..2756ab6c47 Binary files /dev/null and b/docs/images/a-debugger.png differ diff --git a/docs/images/a-file-explorer-buttons-big.png b/docs/images/a-file-explorer-buttons-big.png new file mode 100644 index 0000000000..5f16de4d01 Binary files /dev/null and b/docs/images/a-file-explorer-buttons-big.png differ diff --git a/docs/images/a-file-explorer-buttons.png b/docs/images/a-file-explorer-buttons.png new file mode 100644 index 0000000000..9c6ee3f795 Binary files /dev/null and b/docs/images/a-file-explorer-buttons.png differ diff --git a/docs/images/a-file-explorer1.png b/docs/images/a-file-explorer1.png new file mode 100644 index 0000000000..fbc53896fc Binary files /dev/null and b/docs/images/a-file-explorer1.png differ diff --git a/docs/images/a-home-page.png b/docs/images/a-home-page.png new file mode 100644 index 0000000000..f4ca8b0537 Binary files /dev/null and b/docs/images/a-home-page.png differ diff --git a/docs/images/a-hometab.png b/docs/images/a-hometab.png new file mode 100644 index 0000000000..a48d9f61c0 Binary files /dev/null and b/docs/images/a-hometab.png differ diff --git a/docs/images/a-icon-swap.png b/docs/images/a-icon-swap.png new file mode 100644 index 0000000000..53cf741bd1 Binary files /dev/null and b/docs/images/a-icon-swap.png differ diff --git a/docs/images/a-icons-at-load.png b/docs/images/a-icons-at-load.png new file mode 100644 index 0000000000..ce859729ed Binary files /dev/null and b/docs/images/a-icons-at-load.png differ diff --git a/docs/images/a-jvm-calling-instance.png b/docs/images/a-jvm-calling-instance.png new file mode 100644 index 0000000000..7dc9a7adf1 Binary files /dev/null and b/docs/images/a-jvm-calling-instance.png differ diff --git a/docs/images/a-jvm-instance.png b/docs/images/a-jvm-instance.png new file mode 100644 index 0000000000..5ed6615c9d Binary files /dev/null and b/docs/images/a-jvm-instance.png differ diff --git a/docs/images/a-jvm.png b/docs/images/a-jvm.png new file mode 100644 index 0000000000..851236b457 Binary files /dev/null and b/docs/images/a-jvm.png differ diff --git a/docs/images/a-layout1.png b/docs/images/a-layout1.png new file mode 100644 index 0000000000..bb8ebbeda0 Binary files /dev/null and b/docs/images/a-layout1.png differ diff --git a/docs/images/a-layout1a.png b/docs/images/a-layout1a.png new file mode 100644 index 0000000000..cee0ffe747 Binary files /dev/null and b/docs/images/a-layout1a.png differ diff --git a/docs/images/a-layout1b.png b/docs/images/a-layout1b.png new file mode 100644 index 0000000000..18e9aabc7c Binary files /dev/null and b/docs/images/a-layout1b.png differ diff --git a/docs/tuto_basicimport.png b/docs/images/a-old-tuto_basicimport.png similarity index 100% rename from docs/tuto_basicimport.png rename to docs/images/a-old-tuto_basicimport.png diff --git a/docs/tuto_importgit.png b/docs/images/a-old-tuto_importgit.png similarity index 100% rename from docs/tuto_importgit.png rename to docs/images/a-old-tuto_importgit.png diff --git a/docs/tuto_importswarm.png b/docs/images/a-old-tuto_importswarm.png similarity index 100% rename from docs/tuto_importswarm.png rename to docs/images/a-old-tuto_importswarm.png diff --git a/docs/images/a-plug.png b/docs/images/a-plug.png new file mode 100644 index 0000000000..3161fe3a78 Binary files /dev/null and b/docs/images/a-plug.png differ diff --git a/docs/images/a-remixd-success.png b/docs/images/a-remixd-success.png new file mode 100644 index 0000000000..bef13de555 Binary files /dev/null and b/docs/images/a-remixd-success.png differ diff --git a/docs/images/a-runtab-recorder.png b/docs/images/a-runtab-recorder.png new file mode 100644 index 0000000000..36d6b0528b Binary files /dev/null and b/docs/images/a-runtab-recorder.png differ diff --git a/docs/images/a-runtab1.png b/docs/images/a-runtab1.png new file mode 100644 index 0000000000..138a93305f Binary files /dev/null and b/docs/images/a-runtab1.png differ diff --git a/docs/images/a-sol-compiler.png b/docs/images/a-sol-compiler.png new file mode 100644 index 0000000000..87f90586e0 Binary files /dev/null and b/docs/images/a-sol-compiler.png differ diff --git a/docs/images/a-sol-editor.png b/docs/images/a-sol-editor.png new file mode 100644 index 0000000000..b6c0cd5c58 Binary files /dev/null and b/docs/images/a-sol-editor.png differ diff --git a/docs/images/a-static-analysis.png b/docs/images/a-static-analysis.png new file mode 100644 index 0000000000..e3d2cfe46e Binary files /dev/null and b/docs/images/a-static-analysis.png differ diff --git a/docs/images/a-terminal-and-more.png b/docs/images/a-terminal-and-more.png new file mode 100644 index 0000000000..45d41644ca Binary files /dev/null and b/docs/images/a-terminal-and-more.png differ diff --git a/docs/images/a-themes.png b/docs/images/a-themes.png new file mode 100644 index 0000000000..bc48776de1 Binary files /dev/null and b/docs/images/a-themes.png differ diff --git a/docs/images/a-unit-testing1.png b/docs/images/a-unit-testing1.png new file mode 100644 index 0000000000..5e1b167584 Binary files /dev/null and b/docs/images/a-unit-testing1.png differ diff --git a/docs/import.md b/docs/import.md new file mode 100644 index 0000000000..a576d24586 --- /dev/null +++ b/docs/import.md @@ -0,0 +1,39 @@ +Importing Source Files in Solidity +================================== + +It is essential to know all many techniques for importing files. + +For a tutorial about importing files see this [tutorial](https://github.com/ethereum/remix-workshops/tree/master/loading_via_npm_github_plugin). + +For a detailed explanation of the `import` keyword see the +[Solidity documentation](https://solidity.readthedocs.io/en/develop/layout-of-source-files.html?highlight=import#importing-other-source-files) + +Here are a some of the main methods of importing a file: + +Importing a file from the browser's local storage +------------------------------------------------- + +Files in Remix can be imported just by specifying their path. Please use ./ for relative paths to increase portability. +![](images/a-old-tuto_basicimport.png) + +Importing a file from your computer's filesystem +------------------------------------------------- + +This method uses **remixd** - the remix daemon. Please go to the [remixd tutorial](remixd.html) for instructions about how to bridge the divide between the browser and your computers filesystem. + + +Importing from GitHub +--------------------- + +It is possible to import files directly from GitHub with URLs like +`https://github.com///`. + +![](images/a-old-tuto_importgit.png) + +Importing from Swarm +-------------------- + +Files can be imported using all URLs supported by swarm. If you do not +have a swarm node, then use swarm-gateways.net. + +![](images/a-old-tuto_importswarm.png) diff --git a/docs/index.rst b/docs/index.rst index 87dbd7111a..a2b8905151 100644 --- a/docs/index.rst +++ b/docs/index.rst @@ -25,51 +25,64 @@ Useful links: - `Ðapp Developer resources (Ethereum wiki) `__ +.. toctree:: + :maxdepth: 2 + :caption: New Layout Intro + + layout .. toctree:: :maxdepth: 2 - :caption: Quick start + :caption: Tour of default modules - packages + file_explorer + plugin_manager + settings solidity_editor - compile_tab - quickstart_javascript_vm - settings_tab - + terminal .. toctree:: :maxdepth: 2 - :caption: Deploy and test + :caption: Tour of typical solidity modules - run_tab + compile + run udapp + debugger + static_analysis + +.. toctree:: + :maxdepth: 2 + :caption: Using Remix + contract_metadata - unittesting_tab + create_deploy + import + remixd + unittesting + +.. toctree:: + :maxdepth: 2 + :caption: Building Plugins + + remix_plugin.md .. toctree:: :maxdepth: 2 - :caption: Other Remix features + :caption: URLs & Downloads - file_explorer - debugger_tab - analysis_tab - terminal + locations .. toctree:: :maxdepth: 2 - :caption: Tutorials and workshops + :caption: Tutorials and workshops slides - workshop_Building_smart_contracts_with_Remix - tutorial_eattheblock - tutorial_remixd_filesystem - tutorial_debug - tutorial_import - tutorial_mist + remix_tutorials_github .. toctree:: :maxdepth: 2 :caption: Code contribution guide code_contribution_guide - Community - support_tab + community + support diff --git a/docs/layout.md b/docs/layout.md new file mode 100644 index 0000000000..2cbeed1066 --- /dev/null +++ b/docs/layout.md @@ -0,0 +1,54 @@ +Remix-IDE Layout +============== + +The new structure +-------------------- +![](images/a-layout1b.png) + +1. Icon Panel - click to change which plugin appears in the Swap Panel +2. Swap Panel - Most but not all plugins will have their GUI here. +3. Main Panel - In the old layout this was just for editing files. In the tabs can be plugins or files for the IDE to compile. +4. Terminal - where you will see the results of your interactions with the GUI's. Also you can run scripts here. + +Icon Panel at Page Load +----------------------- +When you load remix - the icon panel show these icons by default. + +![](images/a-icons-at-load.png) + +Everything in remix is now a plugin... so the **[Plugin Manager](#plugin-manager)** is very important. +In the old layout, each basic task in remix was separated into the tabs. Now these tabs are plugins. + +But to activate a half a dozen plugins - (or however many you are using) each time the page load is **tedious**. So learn about the **[Environments](#environments)**. + +Homepage +-------- + +![](images/a-hometab.png) + +The homepage is located in a tab in the Main Panel. + +You can also get there by clicking the remix logo at the top of the icon panel. + +### Environments +Clicking on one of the environment buttons loads up a collection of plugins. We currently have a **Solidity** Button and a **Vyper** button. In the future you will be able to save your own environment. + +To see all the plugins go to the **plugin manager** - by selecting the plug in the icon panel. +![](images/a-plug.png) + +The environment buttons are time & sanity savers - so you don't need to go to the plugin manager to get started everytime you load the page. + + +Plugin Manager +--------------- + +In order to make Remix flexible for integrating changes into its functionality and for integrating remix into other projects (your's for example), we've now made everything a plugin. This means that you only load the functionality you need. It also means that you need a place to turn off and on plugins - as your needs change. This all happens in the plug manager. + +The Plugin Manager is also the place you go when you are creating your own plugin and you want to load your local plugin into Remix. In that case you'd click on the "Connect to a Local Plugin" link at the top of the Plugin Manager panel. + +Themes +--------------- + +So you want to work on Remix with a dark theme or a gray theme or just a different theme that the one you are currently looking at? Go to the settings tab and at the bottom is a choice of lots of bootstrap based themes. + +![](images/a-themes.png) diff --git a/docs/packages.md b/docs/locations.md similarity index 62% rename from docs/packages.md rename to docs/locations.md index c606a8028b..51e50e8a7a 100644 --- a/docs/packages.md +++ b/docs/locations.md @@ -1,13 +1,10 @@ -Packages -======== +Finding Remix +============= -This part focuses on using `Remix IDE`, which is a browser based smart contract IDE. We will basically answer the question: -Where can I use / download `Remix IDE`, and what is the difference between packages? +So if you've found the documentation to Remix but don't know where to find Remix or if you want to run the remix-ide locally and want to find out where to download it - this page is here to help. - An online version is available at [https://remix.ethereum.org](https://remix.ethereum.org). This version is stable and is updated at almost every release. - An alpha online version is available at [https://remix-alpha.ethereum.org](https://remix-alpha.ethereum.org). This is not a stable version. - npm `remix-ide` package `npm install remix-ide -g`. `remix-ide` create a new instance of `Remix IDE` available at [http://127.0.0.1:8080](http://127.0.0.1:8080) and make the current folder available to Remix IDE by automatically starting `remixd`. see [Connection to `remixd`](http://remix.readthedocs.io/en/latest/tutorial_remixd_filesystem.html) for more information about sharing local file with `Remix IDE`. - Github release: [https://github.com/ethereum/remix-ide/releases](https://github.com/ethereum/remix-ide/releases) . The source code is packaged at every release but still need to be built using `npm run build`. -- Mist: `Remix IDE` can be started and use the local geth node from `Mist` [https://github.com/ethereum/mist/releases](https://github.com/ethereum/mist/releases) -- Electron: `Remix IDE` wrapped as an Electron app is available at [https://github.com/horizon-games/remix-app](https://github.com/horizon-games/remix-app) \ No newline at end of file diff --git a/docs/plugin_manager.md b/docs/plugin_manager.md new file mode 100644 index 0000000000..2c1bcb41a1 --- /dev/null +++ b/docs/plugin_manager.md @@ -0,0 +1,8 @@ +Plugin Manager +=================== + +** This is text copied from layout.md - it needs an image & more info about connect to the local plugin + +In order to make Remix flexible for integrating changes into its functionality and for integrating remix into other projects (your's for example), we've now made everything a plugin. This means that you only load the functionality you need. It also means that you need a place to turn off and on plugins - as your needs change. This all happens in the plug manager. + +The Plugin Manager is also the place you go when you are creating your own plugin and you want to load your local plugin into Remix. In that case you'd click on the "Connect to a Local Plugin" link at the top of the Plugin Manager panel. diff --git a/docs/remix_plugin.md b/docs/remix_plugin.md index 16c3bbcdbb..95ccd300f7 100644 --- a/docs/remix_plugin.md +++ b/docs/remix_plugin.md @@ -1,101 +1,4 @@ -Remix Plugin API -================ +Remix Plugin +============ -This section provides informations about developing plugin for Remix. - -Introduction ------------- - -A plugin is basically a front end interface loaded through an iframe. Plugins have access to remix main features through an API. -This API consist of `notification` and `request` messages built over iframe messages (https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage) -plugin resources (html, js, img, ...) needs to have their own hosting, either using normal web or using decentralized infrastructure like Swarm and IPFS. - -A plugin declaration is a JSON value which contains the properties `url` and `title`. - -``` -{ - "title": "", - "url": "" -} -``` - - -Loading / Registering a plugin in Remix IDE can be done: - - - Creating a PR which add a new entry: https://github.com/ethereum/remix-ide/blob/master/src/app/plugin/plugins.js , the plugin can then be loaded directly from remix IDE with a single click. - - In the settings tab, paste a plugin declaration in the plugin section and hit load. - - Load Remix IDE with the following url parameters: `pluginurl` and `plugintitle` - -Using the API with iframe post message --------------------------------------- - -A message (either received by the plugin or sent to it) is defined as follow: - -``` - { - action: , - key: '', - type: '', - value: [, , ...], - id: - } -``` - -example: - -``` - window.parent.postMessage(JSON.stringify({ - action: 'request', - key: 'config', - type: 'setConfig', - value: [document.getElementById('filename').value, document.getElementById('valuetosend').value], - id: 34 - }), '*') -``` - -There are 2 ways for interacting with the API, listening on notification and sending request - -``` - function receiveMessage (event) { - if (event.data.action === 'notification') { - ... - } - if (event.data.action === 'response') { - < listen on the response of the request app / updateTitle > - < contain event.data.error if any > - ... - } - } - window.addEventListener('message', receiveMessage, false) - - window.parent.postMessage(JSON.stringify({ - action: 'request', - key: 'app', - type: 'updateTitle', - value: ['changed title ' + k++], - id: 39 - }), '*') -``` - -from a response point of view, The `error` property is `undefined` if no error happened. In case of error (due to permission, system error, API error, etc...), `error` contains a string describing the error - -see [Remix Plugin API usage](./remix_plugin_api.html) for a list of available key / value describing the API. - -Using the API with remix extension NPM package ----------------------------------------------- - -The `remix-plugin` NPM package can be used to abstract the iframe layer: - -``` - var extension = require('remix-plugin') - - extension.listen('', '', function () {}) - extension.call('', '', '', function (error, result) {}) - - // examples - extension.listen('compiler', 'compilationFinished', function () {}) - extension.call('app', 'detectNetWork', [], function (error, result) {}) - extension.call('config', 'setConfig', ['', ''], function (error, result) {}) -``` - -`error` is either null or a string, `result` is an array. +The best documentation about how to build a plugin is currently in [the readme of remix-plugin repo](https://github.com/ethereum/remix-plugin). Please go [here](https://github.com/ethereum/remix-plugin) to learn all about it. diff --git a/docs/remix_tutorials_github.md b/docs/remix_tutorials_github.md new file mode 100644 index 0000000000..5373c23029 --- /dev/null +++ b/docs/remix_tutorials_github.md @@ -0,0 +1,37 @@ +Remix Tutorials +======================= + +There are a series of tutorials in our github repo [remix-workshops](https://github.com/ethereum/remix-workshops). + +We are in the process of upgrading these tutorials to use the new Remix layout. + +In this repo there tutorials for all levels. + +There are tutorials for specific remix functionalities like: + +***Deploying*** + + Multiple ways of loading files in Remix + Deploying with libraries + Deploying a proxy contract + +***Testing*** + + Testing Examples + Continuous integration + +***Remix Plugin Development*** + + Developing a plugin for Remix and deploying it to swarm + +***Other*** + + EtherAtom (walkthrough slides + screencast) + Debugging transactions with Remix IDE + Recording and replaying transactions + Using a Pipeline plugin for developing Solidity contracts with demo video + Running scripts in the Remix terminal (batch deployment) (proxy deployment) + +***Additional external workshops*** + + Using Oraclize plugin in Remix diff --git a/docs/remixd.md b/docs/remixd.md new file mode 100644 index 0000000000..f96e6f5d44 --- /dev/null +++ b/docs/remixd.md @@ -0,0 +1,57 @@ +Remixd: Get access your local filesystem +========================================= + +`remixd` is an npm module. Its purpose is to give the remix web +application access to a folder on your local computer. + +The code of `remixd` is +[here](https://github.com/ethereum/remixd) . + +`remixd` can be globally installed using the following command: +`npm install -g remixd` + +You can install it just in the directory of your choice using this command: +`npm install remixd` + +Then `remixd -s --remix-ide ` will start `remixd` and will share the given folder. + +For example, to sync your local folder to the official Remix IDE, +`remixd -s --remix-ide https://remix.ethereum.org` + +The folder is shared using a websocket connection between `Remix IDE` +and `remixd`. + +Be sure the user executing `remixd` has read/write permission on the +folder. + +There is an option to run remixd in read-only mode, use `--read-only` flag. + +**Warning!** + +`remixd` provides `full read and write access` to the given folder for `any +application` that can access the `TCP port 65520` on your local host. + +From `Remix IDE`, in the Plugin Manager you need to activate the remixd plugin. + +A modal dialog will ask confirmation + +Accepting this dialog will start a session. + +If you do not have `remixd` running in the background - another modal will open up and it will say: + +``` +Cannot connect to the remixd daemon. +Please make sure you have the remixd running in the background. +``` + +Assuming you don't get the 2nd modal, your connection to the remixd daemon is successful. The shared folder will be available in the file explorer. + +**When you click the activation of remixd is successful - there will NOT be an icon that loads in the icon panel.** + +Click the File Explorers icon and in the swap panel you should now see the folder for `localhost`. + +Click on the `localhost connection` icon: + +![](images/a-remixd-success.png) + + diff --git a/docs/run_tab.md b/docs/run.md similarity index 90% rename from docs/run_tab.md rename to docs/run.md index 3d11f12882..62a8e8fd1c 100644 --- a/docs/run_tab.md +++ b/docs/run.md @@ -1,10 +1,13 @@ -Running transactions -==================== +Run & Deploy +============ -The Run tab is an important section of Remix. It allows you to send -transactions to the current environment. +The Run tab allows you to send transactions to the current environment. -![image](images/remix_runtab.png) +To get to the Run & Deploy module - click the run icon in the icon panel. + +In order to use this module you need to have a contract compiled. So if there is file name in the contract pulldown menu ( in the image below it's the pulldown that says **Ballot**), then you can interact with this contract. If nothing is there - then you need to select a contract - make it the active contract in the main panel, ( in the image below - on the right side of the page - in the main panel - you see the ballot.sol so it is the active contract) then go to the compiler module and compile it. + +![](images/a-runtab1.png) Run Setup --------- @@ -20,7 +23,7 @@ Environment: blockchain from scratch, the old one will not be saved. - `Injected Provider`: Remix will connect to an injected - web3 provider. `Mist` and `Metamask` are example of + web3 provider. `Metamask` is an example of providers that inject web3, thus can be used with this option. @@ -37,7 +40,7 @@ Environment: - Value: the amount of value for the next created transaction (this value is always reset to 0 after each transaction execution). - ![image](images/remix_runtab_example.png) + ![](images/a-Runtab-deploy-atAddress.png) Initiate Instance ----------------- @@ -50,7 +53,7 @@ This section contains the list of compiled contracts and 2 actions: when using this feature, and be sure you trust the contract at that address. -- `Create` send a transaction that deploys the selected contract. When +- `Deploy` send a transaction that deploys the selected contract. When the transaction is mined, the newly created instance will be added (this might take several seconds). Note that if the `constructor` has parameters, you need to specify them. @@ -96,7 +99,7 @@ We can find many use cases for the recorder, for instance: - Working in a dev environment does often require to setup the state in a first place. -![image](images/remix_recorder.png) +![](images/a-runtab-recorder.png) Saving a record ends up with the creation of this type of content (see below): @@ -120,7 +123,8 @@ Input parameters are `1` and all these transactions are created using the value of the accounts `account{0}`. -``` {.sourceCode .none} +``` +{.sourceCode .none} { "accounts": { "account{0}": "0xca35b7d915458ef540ade6068dfe2f44e8fa733c" diff --git a/docs/settings_tab.md b/docs/settings.md similarity index 59% rename from docs/settings_tab.md rename to docs/settings.md index 328b9da44f..2f78eb52f0 100644 --- a/docs/settings_tab.md +++ b/docs/settings.md @@ -1,9 +1,11 @@ Settings ======== -This section displays the current compiler version and allows one to change to another version. +To get to **Settings** click the gear a the very bottom of the icon panel. -![image](images/remix_settingstab.png) +You can find a link to the homepage (if you closed it) as well as a link to our Gitter Channel and for you aesthetes out there, we now have a rather large list of themes. + +![](images/a-themes.png) Another important settings: diff --git a/docs/solidity_editor.md b/docs/solidity_editor.md index df6219afda..f492dab9a9 100644 --- a/docs/solidity_editor.md +++ b/docs/solidity_editor.md @@ -5,7 +5,7 @@ The Remix editor recompiles the code each time the current file is changed or another file is selected. It also provides syntax highlighting mapped to solidity keywords. -![image](images/remix_editor.png) +![](images/a-sol-editor.png) Here's the list of some important features: diff --git a/docs/analysis_tab.md b/docs/static_analysis.md similarity index 95% rename from docs/analysis_tab.md rename to docs/static_analysis.md index 8c82d0e5f1..ac3de2ed7e 100644 --- a/docs/analysis_tab.md +++ b/docs/static_analysis.md @@ -7,7 +7,7 @@ new analysis is run at each compilation. The analysis tab gives detailed information about the contract code. It can help you avoid code mistakes and to enforce best practices. -![image](images/remix_analysistab.png) +![](images/a-static-analysis.png) Here is the list of analyzers: diff --git a/docs/support_tab.md b/docs/support_tab.md deleted file mode 100644 index 90ed7a47b2..0000000000 --- a/docs/support_tab.md +++ /dev/null @@ -1,9 +0,0 @@ -Support tab in Remix -====================== - -This section provides a link to Remix Issues where users can report a -bug or suggest a feature, as well as providing other useful links. It -also displays a [Remix support -channel](http://gitter.im/ethereum/remix) - -![image](images/remix_supporttab.png) diff --git a/docs/terminal.md b/docs/terminal.md index 9c1708996c..56fdb7c2fd 100644 --- a/docs/terminal.md +++ b/docs/terminal.md @@ -1,7 +1,7 @@ Terminal ======== -![image](images/remix_terminal.png) +![](images/a-terminal-and-more.png) Features, available in the terminal: @@ -17,4 +17,5 @@ Features, available in the terminal: the Remix IDE). - It allows searching for the data and clearing the logs from the terminal. +- You can run scripts by inputting them at the bottom after the `>`. diff --git a/docs/tutorial_debug.md b/docs/tutorial_debug.md index 31b33fa96e..32cb2a0f46 100644 --- a/docs/tutorial_debug.md +++ b/docs/tutorial_debug.md @@ -1,5 +1,5 @@ -Tutorial on debugging transactions with Remix -=============================================== +Debugging transactions +====================== The goal of this tutorial is to explain how to debug transaction using Remix. @@ -15,7 +15,8 @@ a different use case. We will not explain in detail here how to write or deploy contract. Let us start with a basic contract (replace this one by your's): -``` {.sourceCode .none} +``` +{.sourceCode .none} contract Donation { address owner; event fundMoved(address _to, uint _amount); @@ -53,9 +54,7 @@ contract Donation { ``` For the purpose of this tutorial, we will run the `JavaScript VM` -(that's the default mode when you don't use Remix with Mist or -Metamask). This simulates a custom blockchain. You could do the same -using a proper backend node. +(that's the default mode when you don't use Remix with Metamask). This simulates a custom blockchain. You could do the same using a proper backend node. Now, let's deploy the contract: @@ -189,7 +188,8 @@ variable, it might be triggered twice: Once for initializing the variable to zero and second time for assigning the actual value. As an example, assume you are debugging the following contract: -``` {.sourceCode .none} +``` +{.sourceCode .none} contract ctr { function hid () { uint p = 45; diff --git a/docs/tutorial_eattheblock.md b/docs/tutorial_eattheblock.md deleted file mode 100644 index ad8e80349c..0000000000 --- a/docs/tutorial_eattheblock.md +++ /dev/null @@ -1,10 +0,0 @@ -Eat the Block tutorials -======================= - -This section list Remix related tutorials: - -[Youtube channel](https://www.youtube.com/playlist?list=PLbbtODcOYIoH7597VZ4sTXRKJkuhMAqYy) - -[Introduction](https://www.youtube.com/watch?v=4CsH5xTxhSA&index=3&t=738s&list=PLbbtODcOYIoH7597VZ4sTXRKJkuhMAqYy) - -[Remix File explorer](https://www.youtube.com/watch?v=nAI_Cr5Y8JY) diff --git a/docs/tutorial_mist.md b/docs/tutorial_geth-remix.md similarity index 82% rename from docs/tutorial_mist.md rename to docs/tutorial_geth-remix.md index 568cf34b46..ec096a1fda 100644 --- a/docs/tutorial_mist.md +++ b/docs/tutorial_geth-remix.md @@ -1,4 +1,4 @@ -Debugging a Dapp using Remix - Mist - Geth +Debugging a Dapp using Remix & Geth ========================================== The ultimate goal of this tutorial is to debug transactions that have @@ -12,8 +12,6 @@ We will need four tools for that : > - Geth - this is the center piece and provides the blockchain > environment. We will basically run geth in a dev mode. -> - Mist - this is the Ethereum dapp browser. We will use it to browse -> our front end. > - Remix - this is the Ethereum IDE. We will use it to develop our > Solidity contract. > - Any code editor you want - in order to write your front end :) @@ -21,15 +19,9 @@ We will need four tools for that : Install the environment ----------------------- -### Install Mist +### Install Metamask -Mist is the Ethereum browser and the entry point of a Dapp. - -Please download [the latest -version](http://github.com/ethereum/mist/releases) (at least 0.8.9). - -Basically we will always run our front end in Mist (note that it is also -possible to use [Metamask](http://metamask.io)). +Basically we will run our front end in the Metamask Chrome plugin ([Metamask](http://metamask.io)). ### Install Geth @@ -49,7 +41,7 @@ not be synced to the main or ropsten network. `` is the folder where keys and chain data will be stored. -`--ipcpath` defines the end point that other apps (like Mist) use to +`--ipcpath` defines the end point that other apps (like Metamask) use to talk to geth. `--datadir` specifies the data directory. @@ -67,29 +59,6 @@ Then we need to create accounts and mine a bit to generate some Ether: Next time we run Geth, we will only need to mine transactions (no need to recreate account). -### Run Mist - -If we run Mist without any argument, its internal Geth node will run. As -we have our own we need to specify the ipc path of the node installed -above. - - mist --rpc /geth.ipc - -(yes the option is --rpc) - -Once Mist is started, verify that it is connected to the test node -(that's very important!!). - -On the bottom left, check that the network is `Private-net` and that the -block number is the same as reported by the test node we are currently -running. Run the following command in the Geth Console to check: -web3.eth.blockNumber. - -![image](mist1.png) - -Clicking on Wallet will allow you to send transactions and check account -balances (if you are currently mining you should see the balance -increasing). ### Starting Remix @@ -119,7 +88,8 @@ Here is a sample solidity contract. Copy and paste the following inside remix: -``` {.sourceCode .none} +``` +{.sourceCode .none} contract Donation { address owner; event fundMoved(address _to, uint _amount); @@ -160,18 +130,18 @@ contract Donation { and here is the front end: -``` {.sourceCode .none} +```html
Donation Contract

- +

- +

- +

diff --git a/docs/tutorial_import.md b/docs/tutorial_import.md deleted file mode 100644 index 4c13159bae..0000000000 --- a/docs/tutorial_import.md +++ /dev/null @@ -1,34 +0,0 @@ -Importing Source Files in Solidity -================================== - -This tutorial will show you how to import local and external files. - -The compilation result will also contain contracts implemented in the -imported files. - -For a detailed explanation of the `import` keyword see the -[Solidity documentation](https://solidity.readthedocs.io/en/develop/layout-of-source-files.html?highlight=import#importing-other-source-files) - -Importing a local file ----------------------- - -Other files in Remix can be imported just by specifying their path. -Please use ./ for relative paths to increase portability. - -![image](tuto_basicimport.png) - -Importing from GitHub ---------------------- - -It is possible to import files directly from GitHub with URLs like -`https://github.com///`. - -![image](tuto_importgit.png) - -Importing from Swarm --------------------- - -Files can be imported using all URLs supported by swarm. If you do not -have a swarm node, swarm-gateways.net will be used instead. - -![image](tuto_importswarm.png) diff --git a/docs/tutorial_remixd_filesystem.md b/docs/tutorial_remixd_filesystem.md deleted file mode 100644 index 2537628a27..0000000000 --- a/docs/tutorial_remixd_filesystem.md +++ /dev/null @@ -1,50 +0,0 @@ -Access your local filesystem by using remixd -=================================================== - -`remixd` is an npm module. Its purpose is to give the remix web -application access to a folder from your local computer. - -The code of `remixd` can be checked out -[here](https://github.com/ethereum/remixd) . - -`remixd` can be globally installed using the following command: -`npm install -g remixd`. - -Then `remixd -s --remix-ide ` will start `remixd` -and share the given folder. - -For example, to sync your local folder to the official Remix IDE, -`remixd -s --remix-ide https://remix.ethereum.org` - -The folder is shared using a websocket connection between `Remix IDE` -and `remixd`. - -Be sure the user executing `remixd` has read/write permission on the -folder. - -There is an option to run remixd in read-only mode, use `--read-only` flag. - -**Warning!** - -`remixd` provides `full read and write access` to the given folder for `any -application` that can access the `TCP port 65520` on your local host. - -From `Remix IDE`, you will need to activate the connection. - -Click on the `localhost connection` icon: - -![image](remixd_noconnection.png) - -A modal dialog will ask confirmation - -![image](remixd_alert.png) - -Accepting this dialog will start a session. Once the connection is made, -the status will update and the connection icon should shows up in green. - -Hovering the icon will give more connection status information. - -At this point if the connection is successful, the shared folder will be -available in the file explorer. - -![image](remixd_connectionok.png) diff --git a/docs/udapp.md b/docs/udapp.md index 642c0e2012..5281970993 100644 --- a/docs/udapp.md +++ b/docs/udapp.md @@ -1,8 +1,12 @@ -Deployed contracts -==================== +Run & Deploy (part 2) +===================== + +## Deployed contracts This section in the Run tab contains a list of deployed contracts to interact with through autogenerated UI of the deployed contract (also called udapp). +**Needs an Image** + Several cases apply: - The called function is declared as `constant` or `pure` in Solidity. The action has a blue background, clicking it does not diff --git a/docs/unittesting_tab.md b/docs/unittesting.md similarity index 88% rename from docs/unittesting_tab.md rename to docs/unittesting.md index d87ecab087..27720f7f38 100644 --- a/docs/unittesting_tab.md +++ b/docs/unittesting.md @@ -1,9 +1,9 @@ Unit Testing ============ -The unit testing tab allows to run unit testing. +Click the "double check" icon to get to the unit testing plugin. If you don't see this icon, go to the plugin manager and load up the unit testing plugin. -![image](images/remix_unittest.png) +![](images/a-unit-testing1.png) Generate test File ------------------ diff --git a/docs/workshop_Building_smart_contracts_with_Remix.md b/docs/workshop_Building_smart_contracts_with_Remix.md deleted file mode 100644 index 204065b64f..0000000000 --- a/docs/workshop_Building_smart_contracts_with_Remix.md +++ /dev/null @@ -1,14 +0,0 @@ -Building Smart Contracts with Remix -======================= - -We prepared a tutorial that will help you build DApps with Remix. In this tutorial, you learn how to build smart contracts, how to deploy them and how to interact with them. Then we show you how to connect your frontend with the blockchain by using web3.js. - -### Let's get started - -This tutorial was used in workshops at ethCC, Edcon, and DappCon. - -You can [watch the Edcon presentation talk](https://www.youtube.com/watch?v=nAI_Cr5Y8JY) and here are the [workshop slides](https://slides.com/ninabreznik/deck-11-13#/). -(May 3, 2018) - -Here are the [latest slides (hosted on swarm)](http://30400.swarm-gateways.net/bzz:/49277e2a16baf5576c9f54204c70dc403a425c3df85424864fe04ad6dfc609bc/) and here are the [latest slides (not on swarm)](https://www.updig.is/pdf/remix-chez-coinhouse.pdf). -(Oct 16, 2018) \ No newline at end of file