Allow for send invoke calls from websites the user visits

src/app/Root.js

@@ -3,20 +3,25 @@ import PropTypes from 'prop-types'
 import { BrowserRouter } from 'react-router-dom'
 import { Provider } from 'react-redux'
 import App from './containers/App'
+import PopupWindow from './containers/PopupWindow'
 
 export default class Root extends Component {
   render () {
-    const { store } = this.props
+    const { store, isPopupWindow } = this.props
     return (
       <Provider store={store}>
         <BrowserRouter>
-          <App />
+          { isPopupWindow
+            ? <PopupWindow />
+            : <App />
+          }
         </BrowserRouter>
       </Provider>
     )
   }
 }
 
 Root.propTypes = {
-  store: PropTypes.object.isRequired
+  store: PropTypes.object.isRequired,
+  isPopupWindow: PropTypes.bool.isRequired
 }

src/app/components/ContentWrapper/ContentWrapper.scss

@@ -17,6 +17,11 @@
   flex-direction: column;
 }
 
+.infoText {
+  word-wrap: break-word;
+  width:100%;
+}
+
 .fancyBox {
   width: 83%;
   height: 90%;

src/app/components/Header/index.js

@@ -6,13 +6,17 @@ import style from './Header.css'
 
 export default class Header extends Component {
   render() {
+    const { noMenu } = this.props
+
     return (
       <div className={style.header}>
         <NetworkSwitcher />
         <div className={style.titleBar}>
-          <div className={style.menuNavWrapper}>
-            <MainNav />
-          </div>
+          { noMenu ||
+            <div className={style.menuNavWrapper}>
+              <MainNav />
+            </div>
+          }
           <div className={style.titleWrapper}>
             <span className={style.titleName}>NeoLink</span>
           </div>

src/app/containers/PopupWindow/index.js

@@ -0,0 +1,45 @@
+import React, { Component } from 'react'
+import SendInvokeReadonly from '../SendInvoke/SendInvokeReadonly'
+
+import Header from '../../components/Header'
+import ContentWrapper from '../../components/ContentWrapper'
+
+import style from '../App/App.css'
+
+export default class PopupWindow extends Component {
+  state = {
+    transaction: null,
+    success: false
+  }
+
+  componentDidMount () {
+    this.port = chrome.runtime.connect({name: "popup"})
+    this.port.onMessage.addListener((message) => {
+      if (message.operation === 'sendInvoke') {
+        this.setState({
+          transaction: message.txInfo
+        })
+      }
+    })
+  }
+
+  onSuccess = (response) => {
+    this.port.postMessage({ msg: 'sendInvokeResponse', status: 'success', txid: response.txid })
+  }
+
+  render () {
+    const { transaction } = this.state
+
+    return (
+      <div className={style.popup}>
+        <Header noMenu />
+        <ContentWrapper>
+          { !transaction
+            ? <div>Loading</div>
+            : <SendInvokeReadonly transaction={transaction} onSuccess={this.onSuccess} />
+          }
+        </ContentWrapper>
+      </div>
+    )
+  }
+}

src/app/containers/SendInvoke/SendInvoke.css

@@ -1,3 +1,13 @@
-.transactionId {
-  word-wrap: break-word;
-}
+.label {
+  width:100%;
+  font-weight: bold;
+}
+
+.successBox {
+  width: 200px;
+}
+
+.entryItem {
+  width: 80%;
+  padding-bottom: 10px;
+}

src/app/containers/SendInvoke/SendInvokeReadonly.js

@@ -0,0 +1,122 @@
+import React, { Component } from 'react'
+
+import { connect } from 'react-redux'
+
+import Button from 'preact-material-components/Button'
+import 'preact-material-components/Button/style.css'
+import 'preact-material-components/Theme/style.css'
+
+import { callInvoke } from '../../utils/neonWrappers';
+
+import style from './SendInvoke.css'
+import globalStyle from '../../components/ContentWrapper/ContentWrapper.css'
+
+@connect(
+  state => ({
+    network: state.network,
+    account: state.account
+  })
+)
+
+export default class SendInvokeReadonly extends Component {
+  state = {
+    loading: false,
+    errorMsg: '',
+    txid: ''
+  }
+
+  handleSubmit = (event) => {
+    event.preventDefault()
+    const {network, account, transaction, onSuccess } = this.props
+
+    this.setState({
+      loading: true,
+      errorMsg: '',
+      txid: ''
+    })
+
+    const config = {
+      scriptHash: transaction.scriptHash,
+      operation: transaction.operation,
+      arg1: transaction.args[0],
+      arg2: transaction.args[1],
+      amount: transaction.amount,
+      assetType: transaction.type
+    }
+
+    callInvoke(network, account, config)
+      .then((c) => {
+        if (c.response.result === true) {
+          this.setState({
+            loading: false,
+            txid: c.response.txid
+          })
+
+          if (onSuccess) {
+            onSuccess(c.response)
+          }
+        } else {
+          this.setState({
+            loading: false,
+            errorMsg: 'Invoke failed'
+          })
+        }
+      })
+      .catch((e) => {
+        console.log('e', e)
+        this.setState({
+          loading: false,
+          errorMsg: 'Invoke failed'
+        })
+      })
+  }
+
+  render() {
+    const { loading, txid, errorMsg } = this.state
+    const { transaction } = this.props
+
+    return (
+      <div>
+        <form onSubmit={this.handleSubmit} style="padding-top:35px;">
+          <div className={style.entryItem}>
+            <span className={style.label}>Script Hash:</span>
+            <span className={globalStyle.infoText}>{ transaction.scriptHash }</span>
+          </div>
+          <div className={style.entryItem}>
+            <span className={style.label}>Operation:</span>
+            <span className={globalStyle.infoText}>{ transaction.operation }</span>
+          </div>
+          <div className={style.entryItem}>
+            <span className={style.label}>Argument 1:</span>
+            <span className={globalStyle.infoText}>{ transaction.args[0] }</span>
+          </div>
+          <div className={style.entryItem}>
+            <span className={style.label}>Argument 2:</span>
+            <span className={globalStyle.infoText}>{ transaction.args[1] }</span>
+          </div>
+          <div className={style.entryItem}>
+            <span className={style.label}>Amount:</span>
+            <span className={globalStyle.infoText}>{ transaction.amount }</span>
+          </div>
+          <div className={style.entryItem}>
+            <span className={style.label}>Asset:</span>
+            <span className={globalStyle.infoText}>{ transaction.type }</span>
+          </div>
+          <Button raised ripple disabled={this.state.loading || this.state.success}>Invoke</Button>
+        </form>
+        { txid &&
+          <div className={style.successBox}>
+            <div>Success!</div>
+            <span className={globalStyle.infoText}>txid: { txid }</span>
+          </div>
+        }
+        { loading &&
+          <div>Loading...</div>
+        }
+        { errorMsg !== '' &&
+          <div>ERROR: {errorMsg}</div>
+        }
+      </div>
+    )
+  }
+}