add search box and logo

README.md

@@ -14,7 +14,6 @@ Table of Content
 * [Rest API](#rest-api)
 * [How to use](#how-to-use)
 
-
 Parse bitcoin script
 --------------------
 
@@ -145,4 +144,4 @@ with the following resolver
 
 ```scala
 resolvers += Resolver.bintrayRepo("liuhongchao", "maven")
-```
+```

client/package.json

@@ -13,6 +13,7 @@
     "classnames": "^2.2.5",
     "flexboxgrid": "^6.3.1",
     "lodash": "^4.17.10",
+    "material-ui-search-bar": "^1.0.0-beta.13",
     "moment": "^2.22.2",
     "prop-types": "^15.6.0",
     "react": "^16.4.2",

client/src/index.css

@@ -75,6 +75,26 @@ a {
   transform-origin: 50% 50%;
 }
 
+.img-responsive.mobile {
+  display: none;
+}
+
+@media only screen and (max-device-width: 480px) {
+  .img-responsive.desktop {
+    display: none;
+  }
+  .img-responsive.mobile {
+    display: block;
+  }
+}
+
+.logo-image {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  margin-bottom: 10px;
+}
+
 .ScriptOpCodeList {
   margin: 0;
   border-radius: 2px;

client/src/modules/interpreter/InterpreterContainer.js

@@ -3,15 +3,20 @@ import {TextField, Button, Paper} from '@material-ui/core';
 import InterpreterComponent from "./InterpreterComponent";
 import URI from 'urijs';
 import {interpretTransactionInput} from '../../api';
+import desktopLogoImage from '../../assets/images/bitcoin-playground-desktop.png';
+import mobileLogoImage from '../../assets/images/bitcoin-playground-mobile.png';
 import Loading from '../Loading';
+import SearchBar from 'material-ui-search-bar'
+/*import InputAdornment from "@material-ui/core/InputAdornment/InputAdornment";
+import AccountCircle from '@material-ui/icons/AccountCircle';*/
 
 class InterpreterContainer extends React.Component {
   static propTypes = {};
 
   state = {
     interpretResult: undefined,
     inputIndex: 0,
-    transactionId: "85db1042f083a8fd6f96fd1a76dc7b8373df9f434979bdcf2432ecf9e0c212ac",
+    transactionId: "", // 85db1042f083a8fd6f96fd1a76dc7b8373df9f434979bdcf2432ecf9e0c212ac
     loading: false,
     executingScript: false
   };
@@ -99,9 +104,24 @@ class InterpreterContainer extends React.Component {
   render() {
     return (
       <div className="container">
-        <Paper className={'application-definition'}>
-          <h3>Bitcoin Script Interpreter</h3>
-          <form
+        <div className={'application-definition'}>
+
+
+          <img src={ mobileLogoImage } className={`logo-image img-responsive mobile`}/>
+          <img src={ desktopLogoImage } className={`logo-image img-responsive desktop`}/>
+          <SearchBar
+            value={this.state.transactionId}
+            placeholder="BTC transaction id"
+            onChange={(newValue) => this.handleSetTransactionId(newValue)}
+            disabled={ this.state.executingScript }
+            onRequestSearch={() => {
+              //event.preventDefault();
+              //event.stopPropagation();
+              this.interpretScriptWebsocket();
+            }}
+          />
+
+{/*          <form
             className="container"
             onSubmit={ (event) => {
               event.preventDefault();
@@ -117,10 +137,15 @@ class InterpreterContainer extends React.Component {
                 label="Transaction Id"
                 value={this.state.transactionId}
                 onChange={ (event) => {this.handleSetTransactionId(event.target.value)} }
-                InputLabelProps={{
-                  shrink: true,
-                }}
                 margin="normal"
+                variant="outlined"
+                InputProps={{
+                  startAdornment: (
+                    <InputAdornment position="start">
+                      <AccountCircle />
+                    </InputAdornment>
+                  ),
+                }}
               />
             </div>
             <div>
@@ -146,12 +171,12 @@ class InterpreterContainer extends React.Component {
 
               }
             </div>
-          </form>
+          </form>*/}
           {
             this.state.interpretResult ?
               <InterpreterComponent interpretResult={this.state.interpretResult} /> : null
           }
-        </Paper>
+        </div>
       </div>
     );
   }

client/yarn.lock

@@ -5347,6 +5347,14 @@ map-visit@^1.0.0:
   dependencies:
     object-visit "^1.0.0"
 
+material-ui-search-bar@^1.0.0-beta.13:
+  version "1.0.0-beta.13"
+  resolved "https://registry.yarnpkg.com/material-ui-search-bar/-/material-ui-search-bar-1.0.0-beta.13.tgz#08c246431666f91c3ca52df78987b86352783ee1"
+  integrity sha512-ETZiBvza26+0dyHamUO1Nmh5oRymdzmMM1Z6QH+wraQ6e+0GQdwuJjX4T0eL+nKYDBQB4UpSbFhkBs5ECN2QwA==
+  dependencies:
+    classnames "^2.2.5"
+    prop-types "^15.5.8"
+
 math-expression-evaluator@^1.2.14:
   version "1.2.17"
   resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz#de819fdbcd84dccd8fae59c6aeb79615b9d266ac"