https://github.com/consensysmesh/contract-viewer
React component: Solidity contract viewer beautified with syntax highlight and code indentation
https://github.com/consensysmesh/contract-viewer
Last synced: 12 months ago
JSON representation
React component: Solidity contract viewer beautified with syntax highlight and code indentation
- Host: GitHub
- URL: https://github.com/consensysmesh/contract-viewer
- Owner: ConsenSysMesh
- License: other
- Created: 2015-08-21T22:11:35.000Z (almost 11 years ago)
- Default Branch: master
- Last Pushed: 2016-07-19T19:26:49.000Z (almost 10 years ago)
- Last Synced: 2024-10-16T09:29:26.617Z (over 1 year ago)
- Language: JavaScript
- Size: 29.3 KB
- Stars: 21
- Watchers: 21
- Forks: 8
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Solidity Contract Viewer
This module simplifies the process of showing a Solidity Contract in a webpage
beautified with syntax highlight and code indentation. Dynamic changes on the
underline contract properties are reflected imediatly in the contract code shown
on the webpage.
It uses a modified version of [highlight-js](https://github.com/isagalaev/highlight.js)
adapted to handle solidity code.
As in the highlight-js library, different styles can be applied by simple adding
the desired style in the main html file. Styles can be downloaded from
[here](https://github.com/isagalaev/highlight.js/tree/master/src/styles).
# IMPORTANT WARNING
Because of a limitation in React, the react version used in this library (0.12.2) should
matches the version used in your project! Otherwise, you will get the message below
when running your code:
```
EventPluginRegistry: Cannot inject event plugin ordering more than once. You are likely
trying to load more than one copy of React.
```
As the message says, if you run two distinct version for your code and for this library,
the React library will be loaded twice in your app and you will get the message above.
# Install
To install this module globally, just type `sudo npm install contract-viewer -g`.
# Usage example
This module works using contract templates. You basically have define a contract
template as a js module, as in:
```javascript
var mycontracttemplate = '\n\
contract ui_contract_name {\n\
bytes32 ui_string1_name = "ui_string1_value";\n\
function ui_function1_name(bytes32 value) {\n\
ui_string1_name = value;\n\
}\n\
}';
module.exports = mycontracttemplate;
```
After defining your contract template, you `require` it in the react component
where you are using the contractviewer. You will notice that there are some placeholders
in the contract template. In our case, all words starting with `ui_` is a placeholder.
these are the dynamic parts of the contract. When you use the contractviewer, you
link these placeholders using `state` variables of the react component so that whenever
the state change, the contract is automatically updated in the webpage. See example
below:
```javascript
var MyTemplate = require('../data/MyContractTemplate.sol.js');
var ContractViewer = require('contract-viewer');
var myapp = react.createclass({
getinitialstate: function() {
return {
contractName : 'MyContract',
string1Name : 'customerName',
string1Value : 'Satoshi Nakamoto',
function1Name: 'setCustomerName'
};
},
onChangeCode: function(contractCode) {
// Result contract code is stored on param 'contractCode'
},
render: function() {
return
;
}
});
```
To show the resulting contract code, you need to add the desired style in the
html file where the code is shown. For instance, if you want to use the `railscasts`
style, you should download it from
[this place](https://github.com/isagalaev/highlight.js/tree/master/src/styles)
and add it to the header section of your page, as in:
```html
...
```
The code above using the railscasts style will look like this:
So, any changes in the state variables of the React component will be reflected imediatly in
the contract being shown.