Web3 utility & share snippet

README.md

@@ -2,6 +2,7 @@
 
 [![Greenkeeper badge](https://badges.greenkeeper.io/0mkara/etheratom.svg)](https://greenkeeper.io/)
 [![Build Status](https://travis-ci.org/0mkara/etheratom.svg?branch=master)](https://travis-ci.org/0mkara/etheratom)
+[![telegram](https://png.icons8.com/color/24/000000/telegram-app.png)](https://t.me/etheratom)
 
 Etheratom is a package for hackable Atom editor. It uses web3js to interact with Ethereum node.
 

contracts/main.sol

@@ -0,0 +1,18 @@
+pragma solidity ^0.4.23;
+import '../contracts/mortal.sol';
+
+contract Main is Mortal {
+    mapping (bytes32 => string) public fiddle_data;
+    event NewFiddle(address indexed _user, bytes32 indexed _id);
+
+    // share some given input
+    function share(string _code) public {
+        bytes32 _id = keccak256(msg.sender, _code);
+        fiddle_data[_id] = _code;
+        emit NewFiddle(msg.sender, _id);
+    }
+    // get code for given bytes32 id
+    function get_fiddle(bytes32 _id) view public returns (string) {
+        return fiddle_data[_id];
+    }
+}

contracts/mortal.sol

@@ -0,0 +1,12 @@
+pragma solidity ^0.4.18;
+
+contract Mortal {
+    /* Define variable owner of the type address */
+    address owner;
+
+    /* This function is executed at initialization and sets the owner of the contract */
+    function mortal() public { owner = msg.sender; }
+
+    /* Function to recover the funds on the contract */
+    function kill() public { if (msg.sender == owner) selfdestruct(owner); }
+}

lib/components/FunctionABI/index.js

@@ -37,7 +37,8 @@ class FunctionABI extends React.Component {
         const contract = instances[contractName];
         try {
             const result = await this.helpers.call({ coinbase, password, contract, abiItem });
-            this.helpers.showOutput({ address: contract.options.address, data: result });
+            const block = await this.helpers.getBlock(result.blockNumber);
+            this.helpers.showOutput({ address: contract.options.address, data: result, block: block });
         } catch(e) {
             console.log(e);
             this.helpers.showPanelError(e);
@@ -54,7 +55,13 @@ class FunctionABI extends React.Component {
                 }
             }
             const result = await this.helpers.call({ coinbase, password, contract, abiItem: methodItem, params });
+            if(result.blockNumber) {
+                const block = await this.helpers.getBlock(result.blockNumber);
+                this.helpers.showOutput({ address: contract.options.address, data: result, block: block });
+                return;
+            }
             this.helpers.showOutput({ address: contract.options.address, data: result });
+            return;
         } catch (e) {
             console.log(e);
             this.helpers.showPanelError(e);

lib/components/ShareBox/index.js

@@ -0,0 +1,207 @@
+'use babel'
+// Copyright 2018 Etheratom Authors
+// This file is part of Etheratom.
+
+// Etheratom is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+
+// Etheratom is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+// GNU General Public License for more details.
+
+// You should have received a copy of the GNU General Public License
+// along with Etheratom.  If not, see <http://www.gnu.org/licenses/>.
+import React from 'react'
+import { connect } from 'react-redux'
+import { Collapse } from 'react-collapse'
+
+class ShareBox extends React.Component {
+    constructor(props) {
+        super(props);
+        this.helpers = props.helpers;
+        this.state = {
+            shared: false,
+            shareLink: null,
+            gas: 0,
+            gasLimit: 0,
+            snippet: null,
+            txHash: null,
+            code: null,
+            isOpened: false,
+            toggleBtnStyle: 'btn icon icon-unfold inline-block-tight',
+            togglePreviewTxt: 'Preview Snippet'
+        }
+        this._handleShare = this._handleShare.bind(this);
+        this._handleLoad = this._handleLoad.bind(this);
+        this._handleCopy = this._handleCopy.bind(this);
+        this._handleChange = this._handleChange.bind(this);
+        this._handleGasChange = this._handleGasChange.bind(this);
+        this._togglePreview = this._togglePreview.bind(this);
+        this.watchSyncEvents();
+    }
+    async watchSyncEvents() {
+        const that = this;
+        const { coinbase } = this.props;
+        that.helpers.snptEvents.NewFiddle({ filter: { _user: coinbase } })
+            .on('data', data => {
+                console.log(data);
+                const fiddleId = data.returnValues._id;
+                that.setState({ shared: true, shareLink: fiddleId });
+            })
+            .on('error', e => {
+                throw e;
+            })
+    }
+    async componentDidMount() {
+        const { coinbase } = this.props;
+        atom.workspace.observeActiveTextEditor(async (editor) => {
+            if(!editor || !editor.getBuffer()) {
+				return
+			}
+            const code = editor.getText();
+            const maxGas = await this.helpers.getGasLimit();
+            this.setState({ code, gasLimit: maxGas });
+            try {
+                const gasEstm = await this.helpers.getShareGasEstm(coinbase, code);
+                this.setState({ gas: gasEstm });
+            } catch(e) {
+                this.setState({ gas: 0 });
+                throw e;
+            }
+            return;
+        });
+    }
+    async _handleShare() {
+        const that = this;
+        const { coinbase, password } = this.props;
+        const { gas, code } = this.state;
+        this.setState({ txHash: null, shareLink: null, snippet: null });
+        that.helpers.shareCode(coinbase, password, code, gas)
+            .then(txHash => {
+                this.setState({ txHash: txHash });
+            })
+            .catch(e => {
+                throw e;
+            });
+    }
+    async _handleLoad() {
+        try {
+            const { shareLink } = this.state;
+            const { coinbase } = this.props;
+            const code = await this.helpers.getSnippet(coinbase, shareLink);
+            this.setState({ snippet: code });
+        } catch(e) {
+            throw e;
+        }
+    }
+    async _handleCopy() {
+        const { shareLink } = this.state;
+        atom.clipboard.write(shareLink);
+    }
+    async _handleChange(event) {
+        this.setState({ shared: false, shareLink: event.target.value });
+    }
+    async _handleGasChange(event) {
+        this.setState({ gas: event.target.value });
+    }
+    _togglePreview() {
+        const { isOpened } = this.state;
+        this.setState({ isOpened: !isOpened });
+        if(!isOpened) {
+            this.setState({
+                toggleBtnStyle: 'btn btn-success icon icon-fold inline-block-tight',
+                togglePreviewTxt: 'Hide Snippet'
+            });
+        } else {
+            this.setState({
+                toggleBtnStyle: 'btn icon icon-unfold inline-block-tight',
+                togglePreviewTxt: 'Preview Snippet'
+            });
+        }
+    }
+    render() {
+        const { shareLink, shared, gas, snippet, txHash, code, toggleBtnStyle, togglePreviewTxt, isOpened, gasLimit } = this.state;
+        return (
+            <div class="share-box">
+                <div class="row">
+                    <input
+                        type="text"
+                        name="shared link"
+                        class="input-text"
+                        placeholder="Fiddle link here"
+                        value={shareLink}
+                        onChange={this._handleChange}
+                    />
+                    {
+                        !shared &&
+                        <button class='btn btn-success inline-block-tight' onClick={this._handleLoad}>
+                            Load
+                        </button>
+                    }
+                    {
+                        shared &&
+                        <button class='btn btn-success inline-block-tight' onClick={this._handleCopy}>
+                            Copy
+                        </button>
+                    }
+                </div>
+                <div class="column">
+                    <div class="row">
+                        <input
+                            type="number"
+                            name="gas"
+                            class="input-text"
+                            placeholder="Gas supply"
+                            value={gas}
+                            onChange={this._handleGasChange}
+                        />
+                        <button class='btn btn-success inline-block-tight' onClick={this._handleShare}>
+                            Share
+                        </button>
+                    </div>
+                    <div class="row row-thin">
+                        <span class="padded">Adjust gas estimate.</span>
+                        <span class="padded text-error">Max: { gasLimit }</span>
+                        <button class={toggleBtnStyle} onClick={this._togglePreview}>
+                            {togglePreviewTxt}
+                        </button>
+                    </div>
+                    {
+                        txHash &&
+                        <div class="row">
+                            <span class="padded status-added">Transaction: { txHash }</span>
+                        </div>
+                    }
+                </div>
+                <Collapse isOpened={isOpened}>
+                    {
+                        code &&
+                        <div class="code">
+                            <pre>
+                                {code}
+                            </pre>
+                        </div>
+                    }
+                </Collapse>
+                {
+                    snippet &&
+                    <div class="block">
+                        <pre>
+                            {snippet}
+                        </pre>
+                    </div>
+                }
+            </div>
+        );
+    }
+}
+
+const mapStateToProps = ({ account }) => {
+    const { coinbase, password } = account;
+	return { coinbase, password };
+}
+
+export default connect(mapStateToProps, {})(ShareBox);

lib/components/TabView/index.js

@@ -21,6 +21,8 @@ import Contracts from '../Contracts'
 import TxAnalyzer from '../TxAnalyzer'
 import Events from '../Events'
 import NodeControl from '../NodeControl'
+import Web3Utilities from '../Web3Utilities'
+import ShareBox from '../ShareBox'
 
 class TabView extends React.Component {
     constructor(props) {
@@ -79,6 +81,12 @@ class TabView extends React.Component {
                                 }
                             </div>
                         </Tab>
+                        <Tab>
+                            <div class="btn">Web3 Utilities</div>
+                        </Tab>
+                        <Tab>
+                            <div class="btn">Share</div>
+                        </Tab>
                         <Tab>
                             <div class="btn">Node</div>
                         </Tab>
@@ -97,6 +105,12 @@ class TabView extends React.Component {
                 <TabPanel>
                     <Events store={this.props.store} helpers={this.helpers} />
                 </TabPanel>
+                <TabPanel>
+                    <Web3Utilities store={this.props.store} helpers={this.helpers} />
+                </TabPanel>
+                <TabPanel>
+                    <ShareBox store={this.props.store} helpers={this.helpers} />
+                </TabPanel>
                 <TabPanel>
                     <NodeControl store={this.props.store} helpers={this.helpers} />
                 </TabPanel>
@@ -106,6 +120,9 @@ class TabView extends React.Component {
                     <p>
                         <span>Etheratom news </span><a href="https://twitter.com/hashtag/Etheratom">#Etheratom</a>
                     </p>
+                    <p>
+                        <span>Etheratom telegram </span><a href="https://t.me/etheratom">t.me/etheratom</a>
+                    </p>
                     <p>
                         Contact: <a href="mailto:0mkar@protonmail.com" target="_top">0mkar@protonmail.com</a>
                     </p>

lib/components/TxAnalyzer/index.js

@@ -80,7 +80,13 @@ class TxAnalyzer extends React.Component {
                 <div class="flex-row">
                     <form class="flex-row" onSubmit={this._handleTxHashSubmit}>
                         <div class="inline-block">
-                            <input type="text" name="txhash" value={this.state.txHash} onChange={this._handleTxHashChange} placeholder="Transaction hash" class="input-search" />
+                            <input
+                                type="text"
+                                name="txhash"
+                                value={this.state.txHash}
+                                onChange={this._handleTxHashChange}
+                                placeholder="Transaction hash/Block hash/Block number"
+                                class="input-search" />
                         </div>
                         <div class="inline-block">
                             <input type="submit" value="Analyze" class="btn" />