Adding a button for creating new safe contracts

package-lock.json

@@ -4236,6 +4236,11 @@
         "repeat-string": "1.6.1"
       }
     },
+    "final-form": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/final-form/-/final-form-4.2.1.tgz",
+      "integrity": "sha512-78OnzB+hyoM4RqarToDb8Wrw81/+ziEtWRMyknwKLjLi5SAXrJ4hxOD22Gv4mv5/wVw5enI2VEz8UUqKx0or8w=="
+    },
     "finalhandler": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/finalhandler/-/finalhandler-0.4.1.tgz",
@@ -9547,6 +9552,11 @@
         }
       }
     },
+    "react-final-form": {
+      "version": "3.1.2",
+      "resolved": "https://registry.npmjs.org/react-final-form/-/react-final-form-3.1.2.tgz",
+      "integrity": "sha512-3roFPcAaF+AZbzPLBdD9kr/y1m+miyDq+VtnmgrYrs6gg+s6mK6vedKOehbvi67PyOPRpHQ9GhcPn4aaQjOviQ=="
+    },
     "read-only-stream": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/read-only-stream/-/read-only-stream-2.0.0.tgz",

package.json

@@ -50,8 +50,10 @@
   },
   "dependencies": {
     "dotenv": "^2.0.0",
+    "final-form": "^4.2.1",
     "react": "^15.4.2",
-    "react-dom": "^15.4.2"
+    "react-dom": "^15.4.2",
+    "react-final-form": "^3.1.2"
   },
   "scripts": {
     "start": "node scripts/start.js",

src/App.js

@@ -1,7 +1,9 @@
 import React, { Component } from 'react'
+import { Form, Field } from 'react-final-form'
+import Safe from '../gnosis-safe-contracts/build/contracts/GnosisSafe.json'
 import SimpleStorageContract from '../build/contracts/SimpleStorage.json'
 import getWeb3 from './utils/getWeb3'
-
+import contract from 'truffle-contract'
 import './css/oswald.css'
 import './css/open-sans.css'
 import './css/pure-min.css'
@@ -15,6 +17,8 @@ class App extends Component {
       storageValue: 0,
       web3: null
     }
+
+    this.safe = contract(Safe)
   }
 
   componentWillMount() {
@@ -28,13 +32,36 @@ class App extends Component {
       })
 
       // Instantiate contract once web3 provided.
-      this.instantiateContract()
+      //this.instantiateContract()
+      this.createSafe()
     })
     .catch(() => {
       console.log('Error finding web3.')
     })
   }
 
+  createSafe() {
+    this.safe.setProvider(this.state.web3.currentProvider)
+
+    /*let safeInstance
+
+    // Get accounts.
+    this.state.web3.eth.getAccounts((error, accounts) => {
+      safe.deployed().then((instance) => {
+        safeInstance = instance
+        debugger
+        // Stores a given value, 5 by default.
+        //return simpleStorageInstance.set(5, {from: accounts[0]})
+      })/*.then((result) => {
+        // Get the value from the contract to prove it worked.
+        return simpleStorageInstance.get.call(accounts[0])
+      }).then((result) => {
+        // Update state with the result.
+        return this.setState({ storageValue: result.c[0] })
+      })
+    })*/
+  }
+
   instantiateContract() {
     /*
      * SMART CONTRACT EXAMPLE
@@ -43,7 +70,7 @@ class App extends Component {
      * state management library, but for convenience I've placed them here.
      */
 
-    const contract = require('truffle-contract')
+    //const contract = require('truffle-contract')
     const simpleStorage = contract(SimpleStorageContract)
     simpleStorage.setProvider(this.state.web3.currentProvider)
 
@@ -67,14 +94,62 @@ class App extends Component {
     })
   }
 
+  sleep = ms => new Promise(resolve => setTimeout(resolve, ms))
+
+  onCallSafeContractSubmit = () => {
+
+    this.state.web3.eth.getAccounts((error, accounts) => {
+      debugger
+      this.safe.new([accounts[0]], 1, 0, 0, { from: accounts[0], gas: '5000000' })
+        .then( async (instance) => {
+          console.log("transactionHash -> " + instance.transactionHash)
+          console.log("adress -> " + instance.address)
+          this.state.web3.eth.getTransaction(instance.transactionHash, (err, result) => {
+            console.log(result);
+          })
+          console.log("")
+        });
+    })
+  }
+
+  onCreateBoxSubmit = async values => {
+    await this.sleep(300)
+    window.alert("Creating a new box " + JSON.stringify(values, 2, 0));
+  }
+
   render() {
     return (
       <div className="App">
         <nav className="navbar pure-menu pure-menu-horizontal">
             <a href="#" className="pure-menu-heading pure-menu-link">Truffle Box</a>
         </nav>
-
         <main className="container">
+          <Form
+            onSubmit={this.onCallSafeContractSubmit}
+            render={({ handleSubmit, pristine, invalid }) => (
+              <form onSubmit={handleSubmit}>
+                <h2>Create a new instance for testing purposes</h2>
+                <div>
+                  <button style={{ marginLeft: '10px', border: '1px solid #ccc' }} type="submit">
+                    Submit
+                  </button>
+                </div> 
+              </form>
+            )} />
+          <Form
+            onSubmit={this.onCreateBoxSubmit}
+            render={({ handleSubmit, pristine, invalid }) => (
+              <form onSubmit={handleSubmit}>
+                <h2>Create your instance of a Safe Box</h2>
+                <div>
+                  <label style={ { marginRight: '10px' }}>Owner Address</label>
+                  <Field name="owner" component="input" placeholder="Safe owner address" />
+                  <button style={{ marginLeft: '10px', border: '1px solid #ccc' }} type="submit" disabled={pristine || invalid}>
+                    Submit
+                  </button>
+                </div> 
+              </form>
+            )} />
           <div className="pure-g">
             <div className="pure-u-1-1">
               <h1>Good to Go!</h1>