Merge pull request #33 from XYOracleNetwork/master

v0.2.7 release

Author: klivin

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xyo-network/tool-dapper-react",
-  "version": "0.2.5",
+  "version": "0.2.7",
   "description": "An automated smart contract web viewer. Run on any ABI folder",
   "repository": {
     "type": "git",
@@ -29,7 +29,7 @@
     "history": "^4.7.2",
     "ipfs-http-client": "^27.0.0",
     "json-loader": "^0.5.7",
-    "portis": "^1.2.12",
+    "portis": "^1.3.1",
     "react": "^16.6.1",
     "react-cookie": "^3.0.4",
     "react-dom": "^16.6.1",

src/atoms/ContractAddressDropdown.js

@@ -4,6 +4,8 @@ import { withRouter } from "react-router-dom"
 import Dropdown from "react-dropdown"
 import "react-dropdown/style.css"
 import "./css/SmartContractSelector.css"
+import ProgressButton, { STATE } from "react-progress-button"
+import { withCookies } from "react-cookie"
 
 const GreyTopped = glam.div({
   paddingTop: 10,
@@ -14,11 +16,13 @@ class ContractAddressDropdown extends Component {
   state = {
     selectedNotes: this.props.selectedNotes,
     selectedAddress: this.props.selectedAddress,
+    connectButtonState: STATE.NOTHING,
   }
 
   _onSelect = selection => {
     console.log(`Detected Selection`)
-    let contractObjects = this.props.fetchObjects()
+    let {contractObjects} = this.props
+    // let contractObjects = this.props.fetchObjects()
     contractObjects.forEach(obj => {
       if (obj.address === selection.value || obj.notes === selection.value) {
         this.props.onSelect({ notes: obj.notes, address: obj.address })
@@ -43,11 +47,34 @@ class ContractAddressDropdown extends Component {
     return null
   }
 
-  dropdownDiv = () => {
-    let contractObjects = this.props.fetchObjects()
+  connectProvider = async () => 
+    this.props.service
+      .loadWeb3(this.props.cookies)
+      .then(this.setState({ connectButtonState: STATE.SUCCESS }))
+  
 
+  dropdownDiv = () => {
+    // let contractObjects = this.props.fetchObjects()
+    let { contractObjects } = this.props
+    console.log(`RENDERING ADDRESS DROPDOWN WITH OBJ`, contractObjects)
+    let network = this.props.service.getCurrentNetwork()
+    if (!network) {
+      return (
+        <ProgressButton
+          style={{
+            width: 260,
+            marginTop: 10,
+            color: `white`,
+          }}
+          state={this.state.connectButtonState}
+          onClick={this.connectProvider}
+        >
+          Connect Wallet
+        </ProgressButton>
+      )
+    }
     if (!contractObjects || contractObjects.length === 0) {
-      return <GreyTopped>No Contracts Deployed</GreyTopped>
+      return <GreyTopped>Not deployed on {network}</GreyTopped>
     }
     return (
       <Div>
@@ -67,6 +94,7 @@ class ContractAddressDropdown extends Component {
           }
           placeholder='Nothing Selected'
         />
+        {this.showSelectedDiv()}
       </Div>
     )
   }
@@ -86,10 +114,9 @@ class ContractAddressDropdown extends Component {
         }}
       >
         {this.dropdownDiv()}
-        {this.showSelectedDiv()}
       </Div>
     )
   }
 }
 
-export default withRouter(ContractAddressDropdown)
+export default withCookies(withRouter(ContractAddressDropdown))

src/atoms/CookieReader.js

@@ -3,7 +3,7 @@ export const readSettings = cookies => {
 
   return {
     portisNetwork: cookies.get(`portisNetwork`) || `development`,
-    currentSource: cookies.get(`currentSource`) || `local`,
+    currentSource: cookies.get(`currentSource`) || `ipfs`,
     local: cookies.get(`local`) || ``,
     remote: cookies.get(`remote`) || ``,
     ipfs: cookies.get(`ipfs`) || ``,

src/atoms/CurNetwork.js

@@ -1,14 +1,23 @@
 import React from "react"
 import { Div } from "glamorous"
 
+const WalletDiv = (account) => {
+  if (account) {
+    return (
+      <Div key='account' className='account-right'>
+        Wallet: {account}
+      </Div>
+    )
+  }
+  return <Div key='account' className='account-right'>
+    No Wallet Connected
+  </Div>
+}
+
 const CurNetwork = ({ account, network }) => {
   let returnDivs = []
 
-  returnDivs.push(
-    <Div key='account' className='account-right'>
-      Wallet: {account ? account : `None Found`}
-    </Div>,
-  )
+  returnDivs.push(WalletDiv(account))
   if (network) {
     returnDivs.push(
       <Div key='network' className='network-right'>

src/atoms/DetailsHeader.js

@@ -1,10 +1,20 @@
-import glam from 'glamorous'
+import glam from "glamorous"
 
 export const DetailsHeader = glam.div({
-  display: 'flex',
-  flexDirection: 'column',
-  justifyContent: 'center',
+  display: `flex`,
+  flexDirection: `column`,
+  justifyContent: `center`,
   height: 78,
   paddingLeft: 24,
-  fontSize: '25px',
+  fontSize: `25px`,
+})
+
+export const DetailsHeader2 = glam.div({
+  display: `flex`,
+  flexDirection: `column`,
+  justifyContent: `center`,
+  height: 78,
+  paddingLeft: 24,
+  fontSize: 19,
+  marginLeft: 10,
 })

src/molecules/DeployToNetwork.js

@@ -0,0 +1,76 @@
+import React, { Component } from "react"
+import uploadIPFS from "../organisms/IPFSUploader"
+import ProgressButton, { STATE } from "react-progress-button"
+import { withCookies } from "react-cookie"
+import { Div } from "glamorous"
+
+class DroppedFileDiv extends Component {
+  state = {
+    uploadBtnState: STATE.NOTHING,
+  }
+
+  handleClick = async () => {
+    console.log(`Data submitted`)
+    this.setState({ uploadBtnState: STATE.LOADING })
+    let data = []
+    let { files } = this.props
+
+    let promises = []
+    files.forEach(file => {
+      const reader = new FileReader()
+      promises.push(
+        new Promise((resolve, reject) => {
+          reader.onload = () => {
+            const fileBuf = new Buffer(reader.result)
+            data.push({ path: file.name, content: fileBuf })
+            resolve(true)
+          }
+          reader.onabort = () => reject(`file reading was aborted`)
+
+          reader.onerror = () => reject(`file reading has failed`)
+
+          reader.readAsBinaryString(file)
+        }),
+      )
+    })
+
+    return Promise.all(promises)
+      .then(async () => {
+        return uploadIPFS(this.props.cookies, data)
+      })
+      .then(ipfsHash => {
+        return this.props.onSave(ipfsHash)
+      })
+      .then(() => {
+        console.log(`WTFFFF`)
+        this.setState({ uploadBtnState: STATE.SUCCESS })
+      })
+  }
+  
+  render() {
+    let { files } = this.props
+    if (files.length > 0) {
+      return (
+        <Div style={{ textAlign: `left` }}>
+          <h2>Dropped files and folders</h2>
+          <ul>
+            {files.map(f => (
+              <li key={f.name}>
+                {f.path} - {f.size} bytes
+              </li>
+            ))}
+          </ul>
+          <ProgressButton
+            state={this.state.uploadBtnState}
+            onClick={this.handleClick}
+          >
+            Upload Contracts
+          </ProgressButton>
+        </Div>
+      )
+    }
+    return null
+  }
+}
+
+export default withCookies(DroppedFileDiv)

src/molecules/DroppedFileDiv.js

@@ -0,0 +1,61 @@
+import React, { Component } from "react"
+import { SettingsInput, RowLayout, InputText } from "./SettingsComponenets"
+import { withCookies } from "react-cookie"
+import { ipfsConfigFromCookies } from "../organisms/IPFSUploader"
+
+class IPFSConfigDiv extends Component {
+  constructor(props) {
+    super(props)
+    this.state = ipfsConfigFromCookies(props.cookies)
+  }
+  handleChange = changeEvent => {
+    this.stateChange(changeEvent.target.name, changeEvent.target.value)
+  }
+  stateChange = (stateKey, stateValue) => {
+    console.log(`attempting State Change`, stateKey, stateValue)
+    this.props.cookies.set(stateKey, stateValue, {
+      path: `/`,
+    })
+    const newState = this.state
+    newState[stateKey] = stateValue
+
+    this.setState(newState)
+  }
+  render() {
+    return (
+      <RowLayout>
+        <InputText>Host</InputText>
+        <SettingsInput
+          type='text'
+          value={this.state.ipfshost}
+          name={`ipfshost`}
+          placeholder={`127.0.0.1`}
+          onChange={this.handleChange}
+          onSelect={this.handleSourceSelect}
+        />
+        <InputText>Port</InputText>
+
+        <SettingsInput
+          type='text'
+          value={this.state.ipfsport}
+          name={`ipfsport`}
+          placeholder={`5002`}
+          onChange={this.handleChange}
+          onSelect={this.handleSourceSelect}
+        />
+        <InputText>Protocol</InputText>
+
+        <SettingsInput
+          type='text'
+          value={this.state.ipfsprotocol}
+          name={`ipfsprotocol`}
+          placeholder={`https`}
+          onChange={this.handleChange}
+          onSelect={this.handleSourceSelect}
+        />
+      </RowLayout>
+    )
+  }
+}
+
+export default withCookies(IPFSConfigDiv)

src/molecules/IPFSConfigDiv.js

@@ -2,6 +2,7 @@ import React from "react"
 import glam, { Div, Img } from "glamorous"
 import CurNetwork from "../atoms/CurNetwork"
 import logo from "../assets/dapper-logo.svg"
+const version = require(`../../package.json`).version
 
 const HeaderDiv = glam.div({
   display: `flex`,
@@ -25,7 +26,7 @@ class PageHeader extends React.Component {
             target='_blank'
             rel='noopener noreferrer'
           >
-            View on Github
+            View on Github - {version}
           </a>
           <CurNetwork
             account={this.props.service.getCurrentUser()}
@@ -37,4 +38,4 @@ class PageHeader extends React.Component {
   }
 }
 
-export default PageHeader
+export default PageHeader

src/molecules/PageHeader.js

@@ -0,0 +1,35 @@
+import glam from "glamorous"
+
+export const SettingsInput = glam.input({
+  marginLeft: 10,
+  marginRight: 10,
+  paddingLeft: 12,
+  border: `1px solid #E0E0E0`,
+  borderRadius: `6px`,
+  backgroundColor: `#F6F6F6`,
+  height: 30,
+})
+
+export const RowLayout = glam.div({
+  display: `flex`,
+  flexDirection: `row`,
+  paddingRight: 20,
+  marginBottom: 40,
+  marginLeft: 40,
+})
+export const InputText = glam.div({
+  display: `inline`,
+  marginTop: `10`,
+  minWidth: `fit-content`,
+})
+export const CenterColumn = glam.div({
+  lineHeight: 1,
+  flex: 1,
+  maxWidth: 360,
+})
+export const SettingsLayout = glam.div({
+  color: `#4D4D5C`,
+  fontFamily: `PT Sans`,
+  flex: 1,
+  marginRight: 60,
+})