├── .babelrc ├── .deps ├── .gitignore ├── LICENSE ├── README.md ├── config ├── webpack.config.base.js ├── webpack.config.dev.js └── webpack.config.dist.js ├── package-lock.json ├── package.json ├── public ├── dev │ └── .gitignore ├── index.html ├── manifest.json └── title.png ├── src ├── AccountIcon.jsx ├── AccountLabel.jsx ├── AddressBond.jsx ├── BalanceBond.jsx ├── Block.jsx ├── BondedForm.jsx ├── DropdownBond.jsx ├── HashBond.jsx ├── InlineAccount.jsx ├── InlineBalance.jsx ├── InputBond.jsx ├── MultiInputBond.jsx ├── NumberBond.jsx ├── SigningButton.jsx ├── SigningProgressLabel.jsx ├── TransactButton.jsx ├── Transaction.jsx ├── TransactionProgressLabel.jsx ├── URLBond.jsx └── index.jsx └── test ├── index.js └── manual ├── app.jsx └── entry.jsx /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": ["react"], 3 | "comments": false 4 | } 5 | -------------------------------------------------------------------------------- /.deps: -------------------------------------------------------------------------------- 1 | oo7 oo7-parity oo7-react 2 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | 6 | # Babel 7 | dist 8 | 9 | # Runtime data 10 | pids 11 | *.pid 12 | *.seed 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # node-waf configuration 27 | .lock-wscript 28 | 29 | # Compiled binary addons (http://nodejs.org/api/addons.html) 30 | build 31 | 32 | # Dependency directories 33 | node_modules 34 | jspm_packages 35 | 36 | # Optional npm cache directory 37 | .npm 38 | 39 | # Optional REPL history 40 | .node_repl_history 41 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | Apache License 2 | Version 2.0, January 2004 3 | http://www.apache.org/licenses/ 4 | 5 | TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 6 | 7 | 1. Definitions. 8 | 9 | "License" shall mean the terms and conditions for use, reproduction, 10 | and distribution as defined by Sections 1 through 9 of this document. 11 | 12 | "Licensor" shall mean the copyright owner or entity authorized by 13 | the copyright owner that is granting the License. 14 | 15 | "Legal Entity" shall mean the union of the acting entity and all 16 | other entities that control, are controlled by, or are under common 17 | control with that entity. For the purposes of this definition, 18 | "control" means (i) the power, direct or indirect, to cause the 19 | direction or management of such entity, whether by contract or 20 | otherwise, or (ii) ownership of fifty percent (50%) or more of the 21 | outstanding shares, or (iii) beneficial ownership of such entity. 22 | 23 | "You" (or "Your") shall mean an individual or Legal Entity 24 | exercising permissions granted by this License. 25 | 26 | "Source" form shall mean the preferred form for making modifications, 27 | including but not limited to software source code, documentation 28 | source, and configuration files. 29 | 30 | "Object" form shall mean any form resulting from mechanical 31 | transformation or translation of a Source form, including but 32 | not limited to compiled object code, generated documentation, 33 | and conversions to other media types. 34 | 35 | "Work" shall mean the work of authorship, whether in Source or 36 | Object form, made available under the License, as indicated by a 37 | copyright notice that is included in or attached to the work 38 | (an example is provided in the Appendix below). 39 | 40 | "Derivative Works" shall mean any work, whether in Source or Object 41 | form, that is based on (or derived from) the Work and for which the 42 | editorial revisions, annotations, elaborations, or other modifications 43 | represent, as a whole, an original work of authorship. For the purposes 44 | of this License, Derivative Works shall not include works that remain 45 | separable from, or merely link (or bind by name) to the interfaces of, 46 | the Work and Derivative Works thereof. 47 | 48 | "Contribution" shall mean any work of authorship, including 49 | the original version of the Work and any modifications or additions 50 | to that Work or Derivative Works thereof, that is intentionally 51 | submitted to Licensor for inclusion in the Work by the copyright owner 52 | or by an individual or Legal Entity authorized to submit on behalf of 53 | the copyright owner. For the purposes of this definition, "submitted" 54 | means any form of electronic, verbal, or written communication sent 55 | to the Licensor or its representatives, including but not limited to 56 | communication on electronic mailing lists, source code control systems, 57 | and issue tracking systems that are managed by, or on behalf of, the 58 | Licensor for the purpose of discussing and improving the Work, but 59 | excluding communication that is conspicuously marked or otherwise 60 | designated in writing by the copyright owner as "Not a Contribution." 61 | 62 | "Contributor" shall mean Licensor and any individual or Legal Entity 63 | on behalf of whom a Contribution has been received by Licensor and 64 | subsequently incorporated within the Work. 65 | 66 | 2. Grant of Copyright License. Subject to the terms and conditions of 67 | this License, each Contributor hereby grants to You a perpetual, 68 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 69 | copyright license to reproduce, prepare Derivative Works of, 70 | publicly display, publicly perform, sublicense, and distribute the 71 | Work and such Derivative Works in Source or Object form. 72 | 73 | 3. Grant of Patent License. Subject to the terms and conditions of 74 | this License, each Contributor hereby grants to You a perpetual, 75 | worldwide, non-exclusive, no-charge, royalty-free, irrevocable 76 | (except as stated in this section) patent license to make, have made, 77 | use, offer to sell, sell, import, and otherwise transfer the Work, 78 | where such license applies only to those patent claims licensable 79 | by such Contributor that are necessarily infringed by their 80 | Contribution(s) alone or by combination of their Contribution(s) 81 | with the Work to which such Contribution(s) was submitted. If You 82 | institute patent litigation against any entity (including a 83 | cross-claim or counterclaim in a lawsuit) alleging that the Work 84 | or a Contribution incorporated within the Work constitutes direct 85 | or contributory patent infringement, then any patent licenses 86 | granted to You under this License for that Work shall terminate 87 | as of the date such litigation is filed. 88 | 89 | 4. Redistribution. You may reproduce and distribute copies of the 90 | Work or Derivative Works thereof in any medium, with or without 91 | modifications, and in Source or Object form, provided that You 92 | meet the following conditions: 93 | 94 | (a) You must give any other recipients of the Work or 95 | Derivative Works a copy of this License; and 96 | 97 | (b) You must cause any modified files to carry prominent notices 98 | stating that You changed the files; and 99 | 100 | (c) You must retain, in the Source form of any Derivative Works 101 | that You distribute, all copyright, patent, trademark, and 102 | attribution notices from the Source form of the Work, 103 | excluding those notices that do not pertain to any part of 104 | the Derivative Works; and 105 | 106 | (d) If the Work includes a "NOTICE" text file as part of its 107 | distribution, then any Derivative Works that You distribute must 108 | include a readable copy of the attribution notices contained 109 | within such NOTICE file, excluding those notices that do not 110 | pertain to any part of the Derivative Works, in at least one 111 | of the following places: within a NOTICE text file distributed 112 | as part of the Derivative Works; within the Source form or 113 | documentation, if provided along with the Derivative Works; or, 114 | within a display generated by the Derivative Works, if and 115 | wherever such third-party notices normally appear. The contents 116 | of the NOTICE file are for informational purposes only and 117 | do not modify the License. You may add Your own attribution 118 | notices within Derivative Works that You distribute, alongside 119 | or as an addendum to the NOTICE text from the Work, provided 120 | that such additional attribution notices cannot be construed 121 | as modifying the License. 122 | 123 | You may add Your own copyright statement to Your modifications and 124 | may provide additional or different license terms and conditions 125 | for use, reproduction, or distribution of Your modifications, or 126 | for any such Derivative Works as a whole, provided Your use, 127 | reproduction, and distribution of the Work otherwise complies with 128 | the conditions stated in this License. 129 | 130 | 5. Submission of Contributions. Unless You explicitly state otherwise, 131 | any Contribution intentionally submitted for inclusion in the Work 132 | by You to the Licensor shall be under the terms and conditions of 133 | this License, without any additional terms or conditions. 134 | Notwithstanding the above, nothing herein shall supersede or modify 135 | the terms of any separate license agreement you may have executed 136 | with Licensor regarding such Contributions. 137 | 138 | 6. Trademarks. This License does not grant permission to use the trade 139 | names, trademarks, service marks, or product names of the Licensor, 140 | except as required for reasonable and customary use in describing the 141 | origin of the Work and reproducing the content of the NOTICE file. 142 | 143 | 7. Disclaimer of Warranty. Unless required by applicable law or 144 | agreed to in writing, Licensor provides the Work (and each 145 | Contributor provides its Contributions) on an "AS IS" BASIS, 146 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or 147 | implied, including, without limitation, any warranties or conditions 148 | of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A 149 | PARTICULAR PURPOSE. You are solely responsible for determining the 150 | appropriateness of using or redistributing the Work and assume any 151 | risks associated with Your exercise of permissions under this License. 152 | 153 | 8. Limitation of Liability. In no event and under no legal theory, 154 | whether in tort (including negligence), contract, or otherwise, 155 | unless required by applicable law (such as deliberate and grossly 156 | negligent acts) or agreed to in writing, shall any Contributor be 157 | liable to You for damages, including any direct, indirect, special, 158 | incidental, or consequential damages of any character arising as a 159 | result of this License or out of the use or inability to use the 160 | Work (including but not limited to damages for loss of goodwill, 161 | work stoppage, computer failure or malfunction, or any and all 162 | other commercial damages or losses), even if such Contributor 163 | has been advised of the possibility of such damages. 164 | 165 | 9. Accepting Warranty or Additional Liability. While redistributing 166 | the Work or Derivative Works thereof, You may choose to offer, 167 | and charge a fee for, acceptance of support, warranty, indemnity, 168 | or other liability obligations and/or rights consistent with this 169 | License. However, in accepting such obligations, You may act only 170 | on Your own behalf and on Your sole responsibility, not on behalf 171 | of any other Contributor, and only if You agree to indemnify, 172 | defend, and hold each Contributor harmless for any liability 173 | incurred by, or claims asserted against, such Contributor by reason 174 | of your accepting any such warranty or additional liability. 175 | 176 | END OF TERMS AND CONDITIONS 177 | 178 | APPENDIX: How to apply the Apache License to your work. 179 | 180 | To apply the Apache License to your work, attach the following 181 | boilerplate notice, with the fields enclosed by brackets "{}" 182 | replaced with your own identifying information. (Don't include 183 | the brackets!) The text should be enclosed in the appropriate 184 | comment syntax for the file format. We also recommend that a 185 | file or class name and description of purpose be included on the 186 | same "printed page" as the copyright notice for easier 187 | identification within third-party archives. 188 | 189 | Copyright {yyyy} {name of copyright owner} 190 | 191 | Licensed under the Apache License, Version 2.0 (the "License"); 192 | you may not use this file except in compliance with the License. 193 | You may obtain a copy of the License at 194 | 195 | http://www.apache.org/licenses/LICENSE-2.0 196 | 197 | Unless required by applicable law or agreed to in writing, software 198 | distributed under the License is distributed on an "AS IS" BASIS, 199 | WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 200 | See the License for the specific language governing permissions and 201 | limitations under the License. 202 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | oo7-react 2 | ========= 3 | 4 | A small library to provide oo7 (Joint Asynchronous Mapping Expression System) 5 | `Bond`-based Reactive components for Ethereum and Parity. 6 | 7 | The reactive components provided are: 8 | - `AccountIcon` (an identicon image for a given account); 9 | - `AccountLabel` (a full Semantic UI label for a given account); 10 | - `InlineAccount` (a simple display component for an account designed to flow in text); 11 | - `SigningButton` (a button which completes a message-signing operation when clicked and displays the progress to the user); 12 | - `SigningProgressLabel` (a full Semantic UI label for displaying the progress of a signing a message); 13 | - `TransactButton` (a button which posts a transaction when clicked and displays the progress to the user); 14 | - `TransactionProgressLabel` (a full Semantic UI label for displaying the progress of a transaction); 15 | 16 | - `BButton` (a Semantic UI derived `Button` that accepts Bonds for certain props); 17 | - `InputBond` (a Semantic UI derived `Input` component that accepts a Bond for its output); 18 | - `AddressInputBond` (an `InputBond`-like component for addresses); 19 | - `HashBond` (an `InputBond`-like component for 32 byte hashes); 20 | - `URLBond` (an `InputBond`-like component for URLs). 21 | 22 | ## Installation 23 | 24 | ```sh 25 | npm install parity-reactive-ui --save 26 | ``` 27 | 28 | ## Usage 29 | 30 | ```javascript 31 | // Assume React is already required. 32 | var pru = require('parity-reactive-ui'), 33 | InlineAccount = pru.InlineAccount, 34 | oo7parity = require('oo7-parity'), 35 | setupBonds = oo7parity.setupBonds; 36 | 37 | // We assume parity has been polluted into the global namespace. 38 | parity.bonds = setupBonds(parity.api); 39 | 40 | class App extends React.Component { 41 | render() { 42 | return (
43 | Your current address is . 44 |
); 45 | } 46 | } 47 | ``` 48 | 49 | ## Hacking 50 | 51 | There are two hacking environment available in this repo: 52 | 53 |
54 | `npm run watch:dev` # works in the parity dapp environment, no hot reload. 55 | 56 | Before running the main command, this setup requires exposing the `public` directory as a local dapp: 57 | 58 | `ln -s $PWD/public /path/to/parity/dapps/pruit` 59 | 60 | `Restart parity` and head over to the PRUIT app. This environment is suitable to test any component that interact with the Parity DApp API 61 | 62 |
63 | 64 |
65 | `npm run dev` # works in localhost, has hot reload 66 | 67 | Go to `localhost:9999` 68 | 69 | This environment is suitable to quick test any parity-reactive-ui components that does not directly interact with the Parity dapp API. 70 | 71 |
72 | 73 | ## Tests 74 | 75 | ```sh 76 | npm test 77 | ``` 78 | 79 | ## Contributing 80 | 81 | In lieu of a formal styleguide, take care to maintain the existing coding style. 82 | Add unit tests for any new or changed functionality. Lint and test your code. 83 | 84 | ## Release History 85 | 86 | * 0.1.2 Fix issue with Balance. 87 | * 0.1.1 Initial release 88 | -------------------------------------------------------------------------------- /config/webpack.config.base.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | module: { 3 | loaders: [ 4 | { test: /\.jsx?$/, exclude: /node_modules/, 5 | loader: "babel-loader" 6 | }, 7 | { test: /\.css$/, use: [ { loader: 'style-loader' }, { loader: 'css-loader' } ] }, 8 | { test: /\.json$/, loader: 'json-loader' }, 9 | { test: /jquery/, loader: 'expose?$!expose?jQuery' }, 10 | { test: /\.(png|woff|woff2|eot|ttf|svg)(\?|$)/, loader: 'url-loader?limit=100000' } 11 | ] 12 | }, 13 | resolve: { 14 | extensions: ['.js', '.json', '.jsx'] 15 | } 16 | }; 17 | -------------------------------------------------------------------------------- /config/webpack.config.dev.js: -------------------------------------------------------------------------------- 1 | var base = require('./webpack.config.base'); 2 | var path = require('path'); 3 | 4 | module.exports = Object.assign(base, { 5 | entry: { 6 | app: path.join(__dirname, '..', '/test/manual/entry.jsx') 7 | }, 8 | devServer: { 9 | contentBase: path.join(__dirname, '..', 'public'), 10 | compress: true, 11 | port: 9999 12 | }, 13 | output: { 14 | path: path.resolve(__dirname, '..', 'public', 'dev'), 15 | filename: 'bundle.js', 16 | publicPath: '/dev', 17 | libraryTarget: 'umd' 18 | }, 19 | }); 20 | -------------------------------------------------------------------------------- /config/webpack.config.dist.js: -------------------------------------------------------------------------------- 1 | var base = require('./webpack.config.base'); 2 | var path = require('path'); 3 | 4 | module.exports = Object.assign(base,{ 5 | entry: { 6 | app: path.join(__dirname, '..','/src/index.jsx') 7 | }, 8 | output: { 9 | path: path.resolve(__dirname, '..', 'dist'), 10 | filename: 'bundle.js', 11 | publicPath: '/', 12 | libraryTarget: 'commonjs' 13 | }, 14 | externals: ['oo7', 'oo7-react', 'oo7-parity'] 15 | }); 16 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "parity-reactive-ui", 3 | "version": "0.4.20", 4 | "description": "The Parity Reactive Bond-based UI Library", 5 | "main": "dist/bundle.js", 6 | "files": [ 7 | "dist/*" 8 | ], 9 | "scripts": { 10 | "test": "npm run compile && mocha --compilers js:babel-core/register --reporter spec", 11 | "dev": "webpack-dev-server --config=config/webpack.config.dev.js", 12 | "watch:old": "webpack --watch --config=config/webpack.config.dist.js", 13 | "watch:dev": "webpack --watch --config=config/webpack.config.dev.js", 14 | "compile": "webpack --config=config/webpack.config.dist.js", 15 | "prepublishOnly": "../oo7/prepublish.sh", 16 | "prepare": "npm run compile", 17 | "postpublish": "../oo7/postpublish.sh", 18 | "watch": "watch 'npm run compile' src/ node_modules/oo7/lib/ node_modules/oo7-parity/src/ node_modules/oo7-react/lib/" 19 | }, 20 | "repository": { 21 | "type": "git", 22 | "url": "git+https://github.com/paritytech/parity-reactive-ui.git" 23 | }, 24 | "keywords": [ 25 | "Promise", 26 | "Parity", 27 | "Bond", 28 | "React", 29 | "Reactive" 30 | ], 31 | "author": "Parity Technologies (https://parity.io/)", 32 | "license": "Apache-2.0", 33 | "bugs": { 34 | "url": "https://github.com/paritytech/parity-reactive-ui/issues" 35 | }, 36 | "homepage": "https://github.com/paritytech/parity-reactive-ui#readme", 37 | "dependencies": { 38 | "bignumber.js": "^4.0.0", 39 | "blockies": "0.0.2", 40 | "oo7": "^0.5.8", 41 | "oo7-parity": "^0.6.13", 42 | "oo7-react": "^0.4.7", 43 | "prop-types": "^15.5.9", 44 | "react": "^15.5.4", 45 | "react-dom": "^15.4.2", 46 | "semantic-ui-css": "^2.2.10", 47 | "semantic-ui-react": "^0.68.3" 48 | }, 49 | "devDependencies": { 50 | "babel-cli": "^6.22.2", 51 | "babel-loader": "^7.0.0", 52 | "babel-preset-react": "^6.22.0", 53 | "chai": "^4.0.2", 54 | "css-loader": "^0.28.1", 55 | "file-loader": "^0.11.1", 56 | "mocha": "^3.2.0", 57 | "style-loader": "^0.18.2", 58 | "url-loader": "^0.5.8", 59 | "watch": "^1.0.2", 60 | "webpack": "^2.5.1", 61 | "webpack-dev-server": "^2.4.5", 62 | "webpack-stream": "^3.2.0" 63 | } 64 | } 65 | -------------------------------------------------------------------------------- /public/dev/.gitignore: -------------------------------------------------------------------------------- 1 | * 2 | !.gitignore 3 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Skeleton 6 | 7 | 8 | 14 | 15 | 16 |
17 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /public/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "id": "parity-reactive-ui-test", 3 | "name": "PRUIT", 4 | "description": "A skeleton dapp to test parity-reactive-ui", 5 | "version": "0.1", 6 | "author": "Parity Technologies Ltd", 7 | "iconUrl": "title.png" 8 | } 9 | -------------------------------------------------------------------------------- /public/title.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/paritytech/parity-reactive-ui/816dc8f349ed06364df23bc17e52bdbc9ff89390/public/title.png -------------------------------------------------------------------------------- /src/AccountIcon.jsx: -------------------------------------------------------------------------------- 1 | const blockies = require('blockies'); 2 | const React = require('react'); 3 | const {Image} = require('semantic-ui-react'); 4 | const {ReactiveComponent} = require('oo7-react'); 5 | 6 | function createIdentityImage (address, scale = 8) { 7 | return blockies({ 8 | seed: (address || '').toLowerCase(), 9 | size: 8, 10 | scale 11 | }).toDataURL(); 12 | } 13 | 14 | class AccountIcon extends ReactiveComponent { 15 | constructor() { super(['address', 'className', 'style']); } 16 | 17 | render() { 18 | if (typeof(this.state.address) == "string") { 19 | return (); 28 | } else { 29 | return ({this.props.undefContent}); 33 | } 34 | } 35 | }; 36 | AccountIcon.defaultProps = { 37 | style: {}, 38 | className: '_accountIcon', 39 | undefStyle: {}, 40 | undefClassName: '_accountIcon _undefined', 41 | undefContent: '', 42 | id: null 43 | } 44 | 45 | module.exports = { AccountIcon }; 46 | -------------------------------------------------------------------------------- /src/AccountLabel.jsx: -------------------------------------------------------------------------------- 1 | const React = require('react'); 2 | const {bonds, toChecksumAddress} = require('oo7-parity'); 3 | const {ReactiveComponent, Rimg} = require('oo7-react'); 4 | const {isNullData} = require('oo7-parity'); 5 | const {Label, Icon} = require('semantic-ui-react'); 6 | const {AccountIcon} = require('./AccountIcon'); 7 | 8 | class AccountLabel extends ReactiveComponent { 9 | constructor () { 10 | super(['address']); 11 | } 12 | render () { 13 | if (this.state.address === null) { 14 | return (); 28 | } else if (isNullData(this.state.address)) { 29 | return (); 42 | } else { 43 | let a = toChecksumAddress(this.state.address); 44 | return (); 50 | } 51 | } 52 | } 53 | 54 | class AccountLabelAux extends ReactiveComponent { 55 | constructor () { 56 | super(['names', 'badges']); 57 | } 58 | readyRender () { 59 | let badges = this.state.badges.map((b, i) => ( 60 | 70 | )); 71 | 72 | return ( 73 | 109 | ); 110 | } 111 | } 112 | 113 | module.exports = { AccountLabel }; 114 | -------------------------------------------------------------------------------- /src/AddressBond.jsx: -------------------------------------------------------------------------------- 1 | const React = require('react'); 2 | const {Bond} = require('oo7'); 3 | const {ReactiveComponent, Rimg} = require('oo7-react'); 4 | const {bonds, isNullData} = require('oo7-parity'); 5 | const {Label, Input} = require('semantic-ui-react'); 6 | const {AccountIcon} = require('./AccountIcon'); 7 | const {InputBond} = require('./InputBond'); 8 | 9 | class AddressBond extends InputBond { 10 | constructor () { 11 | super(); 12 | 13 | bonds.addressOf = n => Bond.mapAll([ 14 | bonds.registry.lookupAddress(n, 'A'), 15 | bonds.me 16 | ], (reg, me) => ({ 17 | registry: isNullData(reg) ? null : reg, 18 | internal: n == 'null' ? '0x0000000000000000000000000000000000000000' : n == 'me' ? me : null 19 | })); 20 | } 21 | 22 | makeIcon (p) { 23 | return p ? 'left' : this.state.ok 24 | ? ( 25 | ) 29 | : undefined; 30 | } 31 | 32 | render () { 33 | const labelStyle = { 34 | position: 'absolute', 35 | zIndex: this.props.labelZIndex || 10 36 | }; 37 | return ( 38 |
39 | {InputBond.prototype.render.call(this)} 40 |
41 | {this.state.ok 42 | ? '' 43 | : this.state.extra.noChecksum 44 | ? (
47 |
48 | ); 49 | } 50 | } 51 | AddressBond.defaultProps = { 52 | placeholder: '0xAddress, name or e-mail', 53 | validator: a => { 54 | let m = a.match(/^(0x)([a-fA-F0-9]+)$/); 55 | if (m) { 56 | if (m[2].length != 40) { 57 | return null; 58 | } 59 | let addr = '0x' + m[2]; 60 | if (parity.api.util.toChecksumAddress(addr) === addr) { 61 | return { external: addr, internal: a, corrected: addr }; 62 | } 63 | if (addr.toLowerCase() === addr) { 64 | return { external: addr, internal: a, corrected: addr, extra: { noChecksum: true } }; 65 | } 66 | return null; 67 | } 68 | else { 69 | return bonds.addressOf(a).map(a => { 70 | let n = a.registry || a.internal; 71 | return n ? { external: n, internal: a } : null; 72 | }); 73 | } 74 | }, 75 | defaultValue: '' 76 | }; 77 | 78 | module.exports = { AddressBond }; 79 | -------------------------------------------------------------------------------- /src/BalanceBond.jsx: -------------------------------------------------------------------------------- 1 | const React = require('react'); 2 | const {interpretRender, formatValueNoDenom, combineValue, defDenom, denominations} = require('oo7-parity'); 3 | const {Dropdown} = require('semantic-ui-react'); 4 | const {InputBond} = require('./InputBond'); 5 | 6 | class BalanceBond extends InputBond { 7 | getUnits () { 8 | return this.state.ok ? denominations[this.state.internal ? this.state.internal.denom : 6] : null; 9 | } 10 | 11 | setUnits (v) { 12 | let s = this.state.internal; 13 | let d = denominations.indexOf(v); 14 | s.denom = d; 15 | this.state.internal = s; 16 | this.handleEdit(this.state.display); 17 | } 18 | 19 | handleBlur () { 20 | let s = this.state; 21 | if (typeof(s.corrected) === 'string') { 22 | s.display = s.corrected; 23 | delete s.corrected; 24 | this.setState(s); 25 | } 26 | } 27 | 28 | makeAction (p) { 29 | return p ? 'right' : ( this.setUnits(v.value)} 31 | value={this.getUnits()} 32 | options={denominations 33 | .filter(x => x[0] == x[0].toLowerCase()) 34 | .map(d => ({key: d, value: d, text: d})) 35 | } 36 | />); 37 | } 38 | } 39 | BalanceBond.defaultProps = { 40 | placeholder: '0', 41 | defaultValue: '0', 42 | validator: (u, s) => { 43 | let q = u === '' ? { denom: 6, units: '0', decimals: '', origNum: '', origDenom: ''} : interpretRender(u, null); 44 | let d = q && q.denom !== null ? q.origNum : undefined; 45 | if (q) { 46 | defDenom(q, s.internal ? s.internal.denom : 6); 47 | } 48 | return q ? { 49 | internal: q, 50 | display: d, 51 | corrected: formatValueNoDenom(q), 52 | external: combineValue(q), 53 | ok: true 54 | } : null; 55 | } 56 | }; 57 | 58 | module.exports = { BalanceBond }; 59 | -------------------------------------------------------------------------------- /src/Block.jsx: -------------------------------------------------------------------------------- 1 | const React = require('react'); 2 | const { Bond } = require('oo7'); 3 | const { Rspan, ReactiveComponent, Hash} = require('oo7-react'); 4 | const { bonds, formatBlockNumber} = require('oo7-parity'); 5 | const { InlineAccount } = require('./'); 6 | const { Card, List, Icon } = require('semantic-ui-react'); 7 | 8 | // Reactive Block view 9 | // properties: author/miner[default], minerRegistry, difficulty, totalDifficulty , gasLimit, gasUsed, hash, parentHash, sh3Uncles, size, transactions, timestamp[default], blockNumber[default], extraData 10 | // not included: stateRoot, receiptsRoot (txns), step, transactionsRoot, uncles, logsBloom, sealFields, signature 11 | // planned to include: [nonce, blockReward, unclesReward] 12 | 13 | const digits = 6 14 | const formatDifficulty = d => d.toString(10).substring(0, digits - 1) + 'e^' + (d.toString(10).length - (digits - 1)) 15 | 16 | class Block extends ReactiveComponent { 17 | constructor() { 18 | super(['block']); 19 | } 20 | render() { 21 | if (this.state.block === null || this.state.block === undefined){ 22 | return ( 23 | 24 | 25 | 26 | 27 | block undefined 28 | 29 | 30 | 31 | ) 32 | } else { 33 | return ( 34 | 35 | 36 | 37 | 38 | {this.props.blockNumber ? 39 | 40 | BlockNumber 41 | 42 | 43 | {formatBlockNumber(this.state.block.number)} 44 | 45 | : "" } 46 | {this.props.timestamp ? 47 | 48 | TimeStamp 49 | 50 | 51 |
{this.state.block.timestamp.toString()}
52 | 53 | : "" } 54 | {this.props.transactions ? 55 | 56 | Transactions 57 | 58 | 59 | {this.state.block.transactions.length} txns 60 | 61 | : "" } 62 | {this.props.hash ? 63 | 64 | Hash 65 | 66 | 67 | 68 | 69 | : "" } 70 | {this.props.parentHash ? 71 | 72 | ParentHash 73 | 74 | 75 | 76 | 77 | : "" } 78 | {this.props.sha3Uncles ? 79 | 80 | Sha3Uncles 81 | 82 | 83 | 84 | 85 | : "" } 86 | {(this.props.author || this.props.miner) ? 87 | 88 | 89 | 90 | 91 | Mined by 92 | 93 | : "" } 94 | {this.props.minerRegistry ? 95 | 96 | {bonds.registry.canReverse(this.state.block.author).map(b => b? bonds.registry.reverse(this.state.block.author) : "NaN")} 97 | 98 | 99 | Miners Registry 100 | 101 | : "" } 102 | {this.props.difficulty ? 103 | 104 | Difficulty 105 | 106 | 107 | {formatDifficulty(this.state.block.difficulty)} 108 | 109 | : "" } 110 | {this.props.totalDifficulty ? 111 | 112 | Total Difficulty 113 | 114 | 115 | {formatDifficulty(this.state.block.totalDifficulty)} 116 | 117 | : "" } 118 | {this.props.size ? 119 | 120 | Size 121 | 122 | 123 | {this.state.block.size.toString(10)} 124 | 125 | : "" } 126 | {this.props.gasLimit ? 127 | 128 | Gas Limit 129 | 130 | 131 | {this.state.block.gasLimit.toString(10)} 132 | 133 | : "" } 134 | {this.props.gasUsed ? 135 | 136 | Gas Used 137 | 138 | 139 | {this.state.block.gasUsed.toString(10)} 140 | 141 | : "" } 142 | {/* TODO: BlockReward, UncleReward, Nonce */} 143 | {this.props.extraData ? 144 | 145 | Extra Data 146 | 147 | 148 | 149 | 150 | : "" } 151 | 152 | 153 | 154 | 155 | ); 156 | } 157 | } 158 | } 159 | 160 | Block.defaultProps = { 161 | author: true, 162 | blockNumber: true, 163 | timestamp: true, 164 | }; 165 | 166 | module.exports = { Block }; 167 | -------------------------------------------------------------------------------- /src/BondedForm.jsx: -------------------------------------------------------------------------------- 1 | const React = require('react'); 2 | const {Bond} = require('oo7'); 3 | const {ReactiveComponent} = require('oo7-react'); 4 | const {Button, Label, Statistic} = require('semantic-ui-react'); 5 | 6 | class BondedForm extends ReactiveComponent { 7 | constructor (object, bondableProps) { 8 | super(bondableProps); 9 | this.object = object; 10 | } 11 | render () { 12 | let p = {}; 13 | Object.keys(this.props) 14 | .filter(k => !Bond.instanceOf(this.props[k])) 15 | .forEach(k => p[k] = this.props[k]); 16 | Object.assign(p, this.state); 17 | return React.createElement(this.object, p); 18 | } 19 | } 20 | 21 | let BButton = () => new BondedForm(Button, ['label', 'content', 'disabled']); 22 | let BStatistic = () => new BondedForm(Statistic, ['label', 'value', 'color']); 23 | let BStatisticLabel = () => new BondedForm(Statistic.Label, ['children']); 24 | let BStatisticValue = () => new BondedForm(Statistic.Value, ['children']); 25 | let BLabel = () => new BondedForm(Label, ['content', 'detail']); 26 | let BLabelDetail = () => new BondedForm(Label.Detail, ['content']); 27 | 28 | module.exports = { BondedForm, BButton, BStatistic, BStatisticLabel, BStatisticValue, BLabel, BLabelDetail }; 29 | -------------------------------------------------------------------------------- /src/DropdownBond.jsx: -------------------------------------------------------------------------------- 1 | const React = require('react'); 2 | const {Dropdown} = require('semantic-ui-react'); 3 | const {Bond} = require('oo7'); 4 | const {ReactiveComponent} = require('oo7-react'); 5 | 6 | class DropdownBond extends ReactiveComponent { 7 | constructor () { 8 | super(['disabled', 'enabled']); 9 | } 10 | componentWillMount() { 11 | super.componentWillMount(); 12 | this.setState({options: this.props.options}); 13 | this.handleChange(null, {value: this.props.defaultValue || this.props.options[0].value}); 14 | } 15 | 16 | handleAddition (e, { value }) { 17 | this.setState({ 18 | options: [{ text: `${value} - Custom value`, value }, ...this.props.options], 19 | }) 20 | } 21 | 22 | handleChange (e, { value }) { 23 | this.setState({ currentValue: value }); 24 | if (Bond.instanceOf(this.props.bond)) { 25 | if (value === null) { 26 | this.props.bond.reset(); 27 | } else { 28 | this.props.bond.changed(value); 29 | } 30 | } 31 | } 32 | 33 | render () { 34 | const { currentValue } = this.state 35 | return ( 36 | Custom Key: } 40 | search={this.props.search} 41 | selection={this.props.selection} 42 | allowAdditions={this.props.allowAdditions} 43 | value={currentValue} 44 | onAddItem={this.handleAddition.bind(this)} 45 | onChange={this.handleChange.bind(this)} 46 | style={this.props.style} 47 | disabled={!!this.state.disabled || !this.state.enabled} 48 | /> 49 | ) 50 | } 51 | } 52 | DropdownBond.defaultProps = { 53 | placeholder: '', 54 | additionLabel: 'Custom', 55 | search: true, 56 | selection: true, 57 | allowAdditions: true, 58 | defaultValue: '', 59 | disabled: false, 60 | enabled: true, 61 | options: [{text: 'Unknown', value: ''}] 62 | } 63 | 64 | module.exports = { DropdownBond }; 65 | -------------------------------------------------------------------------------- /src/HashBond.jsx: -------------------------------------------------------------------------------- 1 | const {InputBond} = require('./InputBond'); 2 | 3 | class HashBond extends InputBond {} 4 | HashBond.defaultProps = { 5 | placeholder: '0x...', 6 | validator: v => { 7 | let m = v.match(/(0x)?([a-fA-F0-9]{64})/); 8 | return m ? { 9 | internal: '0x' + m[2] 10 | } : null; 11 | } 12 | }; 13 | 14 | module.exports = { HashBond }; 15 | -------------------------------------------------------------------------------- /src/InlineAccount.jsx: -------------------------------------------------------------------------------- 1 | const React = require('react'); 2 | const {bonds, isNullData, toChecksumAddress} = require('oo7-parity'); 3 | const {ReactiveComponent, Rimg} = require('oo7-react'); 4 | const {Icon} = require('semantic-ui-react'); 5 | const {AccountIcon} = require('./AccountIcon'); 6 | 7 | class InlineAccount extends ReactiveComponent { 8 | constructor () { 9 | super(['address']); 10 | } 11 | readyRender () { 12 | let a = toChecksumAddress(this.state.address); 13 | return (); 18 | } 19 | } 20 | InlineAccount.defaultProps = { 21 | badges: true 22 | }; 23 | 24 | class InlineAccountAux extends ReactiveComponent { 25 | constructor () { 26 | super(['names', 'badges']); 27 | } 28 | readyRender () { 29 | let badges = this.state.badges.map((b, i) => ( 30 | 31 | )); 32 | 33 | return ( 34 | 47 | {isNullData(this.props.address) 48 | ? ( Null) 49 | : ( 60 | {this.state.names.owned || this.state.names.registry || 61 | (0x{ 65 | this.props.address.substr(2, 8)}…{this.props.address.slice(-4) 66 | }) 67 | } 68 | {badges.length > 0 ? ( 69 | 70 | {badges} 71 | 72 | ) : ''} 73 | )} 74 | 75 | ); 76 | } 77 | } 78 | 79 | module.exports = { InlineAccount }; 80 | -------------------------------------------------------------------------------- /src/InlineBalance.jsx: -------------------------------------------------------------------------------- 1 | const React = require('react'); 2 | const {BigNumber} = require('bignumber.js'); 3 | const {ReactiveComponent} = require('oo7-react'); 4 | const {splitValue, denominations} = require('oo7-parity'); 5 | 6 | let usableDenoms = denominations.filter(x => x[0] === x[0].toLowerCase()); 7 | class InlineBalance extends ReactiveComponent { 8 | constructor () { 9 | super(['value']); 10 | this.state = { 11 | precise: null, 12 | denom: null 13 | }; 14 | } 15 | 16 | precise () { 17 | let s = this.state; 18 | return s.precise === null ? this.props.precise : s.precise; 19 | } 20 | 21 | togglePrecise () { 22 | let s = this.state; 23 | s.precise = !s.precise; 24 | this.setState(s); 25 | } 26 | 27 | denom () { 28 | let s = this.state; 29 | return s.denom === null ? usableDenoms.indexOf(this.props.units) : s.denom; 30 | } 31 | 32 | cycleDenom () { 33 | let denom = (this.denom() + 2) % (usableDenoms.length + 1) - 1; 34 | this.setState({denom}); 35 | } 36 | 37 | readyRender () { 38 | let v = new BigNumber(this.state.value || 0); 39 | let isNeg = v.lt(0); 40 | let s; 41 | let sd = this.denom(); 42 | if (sd === -1) { 43 | s = splitValue(v.mul(isNeg ? -1 : 1)); 44 | } else { 45 | let dd = denominations.indexOf(usableDenoms[sd]); 46 | s = { 47 | base: v.div(new BigNumber(1000).pow(dd)), 48 | denom: dd 49 | } 50 | } 51 | let same = true; 52 | let units = s.base; 53 | if (!this.precise()) { 54 | units = units.mul(1000).round().div(1000); 55 | same = units.eq(s.base); 56 | } 57 | units = units.toString(); 58 | let m = units.match(/(.*)(\.[0-9]+)$/); 59 | let decimals = ''; 60 | if (m) { 61 | units = m[1]; 62 | decimals = m[2]; 63 | } 64 | units = units.replace(/(\d)(?=(\d{3})+$)/g, "$1,"); 65 | 66 | let d = denominations[s.denom]; 67 | let c = '32, 32, 32'; 68 | let fore = `rgb(${c})`; 69 | let back = `rgba(${c}, 0.15)`; 70 | return ( 71 | 76 | this.props.inert ? null : this.togglePrecise()} 86 | > 87 | {isNeg ? '-' : this.props.forceSign ? '+' : ''} 88 | {units} 89 | { 90 | 91 | {decimals} 92 | 93 | } 94 | {same ? '' : '…'} 95 | 96 | this.props.inert ? null : this.cycleDenom()} 103 | > 104 | 114 | {d} 115 | 116 | 117 | 118 | ); 119 | } 120 | } 121 | 122 | module.exports = { InlineBalance }; 123 | -------------------------------------------------------------------------------- /src/InputBond.jsx: -------------------------------------------------------------------------------- 1 | const React = require('react'); 2 | const {Input} = require('semantic-ui-react'); 3 | const {Bond} = require('oo7'); 4 | const {ReactiveComponent} = require('oo7-react'); 5 | 6 | class InputBond extends ReactiveComponent { 7 | constructor (extraReactiveProps = []) { 8 | super(['defaultValue', ...extraReactiveProps]); 9 | this.state = { 10 | display: null, 11 | internal: null, 12 | external: null, 13 | ok: false, 14 | extra: {}, 15 | onlyDefault: true 16 | }; 17 | this.editLock = false; 18 | } 19 | 20 | componentDidMount () { 21 | if (this.props.bond && this.props.reversible) { 22 | this.tieKey = this.props.bond.tie(v => { 23 | this.handleEdit(v); 24 | }); 25 | } 26 | } 27 | 28 | componentWillUnmount () { 29 | if (this.props.bond && this.props.reversible && this.tieKey) { 30 | this.props.bond.untie(this.tieKey); 31 | } 32 | } 33 | 34 | handleEdit(v, onlyDefault = false) { 35 | // console.log('handleEdit', v, onlyDefault); 36 | if (this.editLock) 37 | return; 38 | 39 | this.resetDefaultValueUpdate(); 40 | this.latestEdit = Symbol(); 41 | 42 | let f = function (b) { 43 | // console.log('updating...', b); 44 | if (typeof(b) === 'string') { 45 | b = { display: b, external: b, internal: b }; 46 | } 47 | if (typeof(b) !== 'object') { 48 | throw { message: 'Invalid value returned from validity function. Must be object with internal and optionally external, display, blurred fields or null', b }; 49 | } 50 | // console.log('ok...', b); 51 | if (b === null) { 52 | this.setState({ok: false}); 53 | } else { 54 | this.setState(s => { 55 | let i = b && b.hasOwnProperty('internal') ? b.internal : s.internal; 56 | return { 57 | ok: true, 58 | internal: i, 59 | display: typeof(b.display) === 'string' ? b.display : s.display, 60 | corrected: b.corrected, 61 | extra: b.extra || {}, 62 | onlyDefault, 63 | external: b && b.hasOwnProperty('external') ? b.external : i 64 | }; 65 | }); 66 | } 67 | /// Horrible duck-typing, necessary since the specific Bond class instance here is different to the other libraries since it's 68 | /// pre-webpacked in a separate preprocessing step. 69 | if (Bond.instanceOf(this.props.bond)) { 70 | if (b === null) { 71 | this.props.bond.reset(); 72 | } else { 73 | this.editLock = true; 74 | this.props.bond.changed(b && b.hasOwnProperty('external') ? b.external : b && b.hasOwnProperty('internal') ? b.internal : this.state.internal); 75 | this.editLock = false; 76 | } 77 | } 78 | }.bind(this); 79 | 80 | this.setState({display: v, onlyDefault}); 81 | 82 | if (typeof(this.props.validator) !== 'function') { 83 | f(v); 84 | } else { 85 | let a = v !== undefined && this.props.validator(v, this.state); 86 | if (a instanceof Promise || Bond.instanceOf(a)) { 87 | let thisSymbol = this.latestEdit; 88 | a.then(r => { 89 | if (this.latestEdit === thisSymbol) 90 | f(r); 91 | }); 92 | } else { 93 | f(a); 94 | } 95 | } 96 | } 97 | 98 | handleBlur () { 99 | this.setState(s => typeof(s.corrected) === 'string' && typeof(s.display) === 'string' 100 | ? { display: s.corrected, corrected: undefined } 101 | : {} 102 | ); 103 | } 104 | 105 | resetDefaultValueUpdate () { 106 | if (this.lastDefaultValueUpdate) { 107 | // console.log('kill update'); 108 | window.clearTimeout(this.lastDefaultValueUpdate); 109 | delete this.lastDefaultValueUpdate; 110 | } 111 | } 112 | 113 | resetValueToDefault () { 114 | this.resetDefaultValueUpdate(); 115 | // console.log('schedule update'); 116 | this.lastDefaultValueUpdate = window.setTimeout(() => { this.handleEdit(this.state.defaultValue, true); }, 0); 117 | } 118 | 119 | render () { 120 | if (this.state.onlyDefault && typeof(this.state.defaultValue) === 'string' && this.state.display !== this.state.defaultValue) { 121 | // console.log('newDefault', this.state.defaultValue); 122 | this.resetValueToDefault(); 123 | } 124 | return ( this.handleEdit(v.value)} 141 | onBlur={() => this.handleBlur()} 142 | action={this.makeAction ? this.makeAction() : this.props.action} 143 | label={this.makeLabel ? this.makeLabel() : this.props.label} 144 | labelPosition={this.makeLabel ? this.makeLabel(true) : this.props.labelPosition} 145 | icon={this.makeIcon ? this.makeIcon() : this.props.icon} 146 | iconPosition={this.makeIcon ? this.makeIcon(true) : this.props.iconPosition} 147 | />); 148 | } 149 | } 150 | InputBond.defaultProps = { 151 | placeholder: '', 152 | defaultValue: '', 153 | reversible: false 154 | }; 155 | 156 | module.exports = { InputBond }; 157 | -------------------------------------------------------------------------------- /src/MultiInputBond.jsx: -------------------------------------------------------------------------------- 1 | const {ReactiveComponent} = require('oo7-react'); 2 | const {AddressBond} = require('./AddressBond'); 3 | const {HashBond} = require('./HashBond'); 4 | const {InputBond} = require('./InputBond'); 5 | 6 | class MultiInputBond extends ReactiveComponent { 7 | constructor () { 8 | super(['type', 'defaultValue', 'disabled', 'enabled']); 9 | } 10 | 11 | readyRender () { 12 | return this.state.type === 'address' ? () : this.state.type === 'hash' ? () : this.state.type === 'string' ? () : (); 31 | } 32 | } 33 | MultiInputBond.defaultProps = { 34 | defaultValue: '', 35 | disabled: false, 36 | enabled: true 37 | }; 38 | 39 | module.exports = { MultiInputBond }; 40 | -------------------------------------------------------------------------------- /src/NumberBond.jsx: -------------------------------------------------------------------------------- 1 | const {InputBond} = require('./InputBond'); 2 | 3 | class NumberBond extends InputBond { 4 | constructor () { 5 | super(['minimum', 'maximum']); 6 | } 7 | } 8 | 9 | NumberBond.defaultProps = { 10 | placeholder: '123...', 11 | validator: (v, s) => { 12 | let m = Number.parseInt(v); 13 | if (Number.isFinite(m) && m >= s.minimum && m <= s.maximum) { 14 | return { 15 | internal: v, 16 | external: m, 17 | corrected: '' + m 18 | }; 19 | } 20 | return null; 21 | }, 22 | minimum: 0, 23 | maximum: 1e99, 24 | defaultValue: '' 25 | }; 26 | 27 | module.exports = { NumberBond }; 28 | -------------------------------------------------------------------------------- /src/SigningButton.jsx: -------------------------------------------------------------------------------- 1 | const React = require('react'); 2 | const {ReactiveComponent} = require('oo7-react'); 3 | const {bonds} = require('oo7-parity'); 4 | const {Button} = require('semantic-ui-react'); 5 | const {SigningProgressLabel, styleStatus} = require('./SigningProgressLabel'); 6 | 7 | class SigningButton extends React.Component { 8 | constructor () { 9 | super(); 10 | this.state = { status: null }; 11 | this.handleClick = this.handleClick.bind(this); 12 | } 13 | handleClick () { 14 | let s = this.state; 15 | if (s.status) { 16 | s.status = null; 17 | } else { 18 | s.status = bonds.sign(this.props.message, this.props.from); 19 | s.status.done(v => this.props.onSigned(v)); 20 | } 21 | this.setState(s); 22 | } 23 | render () { 24 | return 38 | }// 39 | } 40 | SigningButton.defaultProps = { 41 | statusText: false, 42 | statusIcon: true, 43 | colorPolicy: 'button' 44 | }; 45 | 46 | class SigningButtonAux extends ReactiveComponent { 47 | constructor() { 48 | super(['status']); 49 | } 50 | render() { 51 | let clickable = !this.state.status || this.state.status.signed || this.state.status.failed; 52 | let status = this.state.status && styleStatus(this.state.status); 53 | let statusColor = status ? status.color : null; 54 | let labelColor = (this.props.colorPolicy === 'button' ? this.props.color : null) || statusColor || this.props.color; 55 | let buttonColor = (this.props.colorPolicy === 'status' ? statusColor : this.props.color) || this.props.color || statusColor; 56 | return (