{"id":21280837,"url":"https://github.com/consensysmesh/contract-viewer","last_synced_at":"2025-07-11T10:32:59.296Z","repository":{"id":36872637,"uuid":"41179615","full_name":"ConsenSysMesh/contract-viewer","owner":"ConsenSysMesh","description":"React component: Solidity contract viewer beautified with syntax highlight and code indentation","archived":false,"fork":false,"pushed_at":"2016-07-19T19:26:49.000Z","size":30,"stargazers_count":21,"open_issues_count":1,"forks_count":8,"subscribers_count":21,"default_branch":"master","last_synced_at":"2024-10-16T09:29:26.617Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"other","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ConsenSysMesh.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2015-08-21T22:11:35.000Z","updated_at":"2020-09-03T21:38:03.000Z","dependencies_parsed_at":"2022-09-04T03:21:47.078Z","dependency_job_id":null,"html_url":"https://github.com/ConsenSysMesh/contract-viewer","commit_stats":null,"previous_names":["consensys/contract-viewer"],"tags_count":12,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ConsenSysMesh%2Fcontract-viewer","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ConsenSysMesh%2Fcontract-viewer/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ConsenSysMesh%2Fcontract-viewer/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ConsenSysMesh%2Fcontract-viewer/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ConsenSysMesh","download_url":"https://codeload.github.com/ConsenSysMesh/contract-viewer/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":225715945,"owners_count":17512908,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-21T10:41:30.989Z","updated_at":"2024-11-21T10:41:31.643Z","avatar_url":"https://github.com/ConsenSysMesh.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Solidity Contract Viewer\n\nThis module simplifies the process of showing a Solidity Contract in a webpage\nbeautified with syntax highlight and code indentation. Dynamic changes on the\nunderline contract properties are reflected imediatly in the contract code shown\non the webpage.\n\nIt uses a modified version of [highlight-js](https://github.com/isagalaev/highlight.js) \nadapted to handle solidity code.\n\nAs in the highlight-js library, different styles can be applied by simple adding\nthe desired style in the main html file. Styles can be downloaded from \n[here](https://github.com/isagalaev/highlight.js/tree/master/src/styles).\n\n# IMPORTANT WARNING\n\nBecause of a limitation in React, the react version used in this library (0.12.2) should\nmatches the version used in your project! Otherwise, you will get the message below\nwhen running your code:\n\n```\nEventPluginRegistry: Cannot inject event plugin ordering more than once. You are likely \ntrying to load more than one copy of React.\n```\n\nAs the message says, if you run two distinct version for your code and for this library,\nthe React library will be loaded twice in your app and you will get the message above.\n\n# Install\n\nTo install this module globally, just type `sudo npm install contract-viewer -g`.\n\n# Usage example\n\nThis module works using contract templates. You basically have define a contract \ntemplate as a js module, as in:\n\n```javascript\nvar mycontracttemplate = '\\n\\\ncontract ui_contract_name {\\n\\\n    bytes32 ui_string1_name = \"ui_string1_value\";\\n\\\n    function ui_function1_name(bytes32 value) {\\n\\\n        ui_string1_name = value;\\n\\\n    }\\n\\\n}';\nmodule.exports = mycontracttemplate;\n```\n\nAfter defining your contract template, you `require` it in the react component\nwhere you are using the contractviewer. You will notice that there are some placeholders\nin the contract template. In our case, all words starting with `ui_` is a placeholder.\nthese are the dynamic parts of the contract. When you use the contractviewer, you \nlink these placeholders using `state` variables of the react component so that whenever\nthe state change, the contract is automatically updated in the webpage. See example\nbelow:\n\n```javascript\nvar MyTemplate     = require('../data/MyContractTemplate.sol.js');\nvar ContractViewer = require('contract-viewer');\n\nvar myapp = react.createclass({\n    getinitialstate: function() {\n        return {\n            contractName : 'MyContract',\n            string1Name  : 'customerName',\n            string1Value : 'Satoshi Nakamoto',\n            function1Name: 'setCustomerName'\n        };\n    },\n    onChangeCode: function(contractCode) {\n        // Result contract code is stored on param 'contractCode'\n    },\n    render: function() {\n        return \n            \u003cContractViewer\n                contract          = {MyTemplate}\n                onChange          = {this.onChangeCode}\n                ui_contract_name  = {this.state.contractName}\n                ui_string1_name   = {this.state.string1Name}\n                ui_string1_value  = {this.state.string1Value}\n                ui_function1_name = {this.state.function1Name}\n            /\u003e;\n    }\n});\n```\n\nTo show the resulting contract code, you need to add the desired style in the \nhtml file where the code is shown. For instance, if you want to use the `railscasts` \nstyle, you should download it from \n[this place](https://github.com/isagalaev/highlight.js/tree/master/src/styles)\nand add it to the header section of your page, as in:\n\n```html\n\u003chead\u003e\n  \u003clink href='/css/railscasts.css' rel='stylesheet'\u003e\n  ...\n\u003c/head\u003e\n```\n\nThe code above using the railscasts style will look like this:\n\n![](https://github.com/consensys/contract-viewer/blob/master/img/Contract-example.png)\n\nSo, any changes in the state variables of the React component will be reflected imediatly in \nthe contract being shown.\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fconsensysmesh%2Fcontract-viewer","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fconsensysmesh%2Fcontract-viewer","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fconsensysmesh%2Fcontract-viewer/lists"}