Merge pull request #39 from XYOracleNetwork/master

0.2.9

Author: klivin

README.md

@@ -22,6 +22,8 @@
 </h3>
 <p align="center">Made with  ❤️  by [<b>XY - The Persistent Company</b>] (https://xy.company)</p>
 
+Check out Dapper at https://dapper.layerone.co to start playing with your smart contracts.  
+
 # Pt. I. - Let's Get Dapper
 
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@xyo-network/tool-dapper-react",
-  "version": "0.2.7",
+  "version": "0.2.9",
   "description": "An automated smart contract web viewer. Run on any ABI folder",
   "repository": {
     "type": "git",
@@ -25,13 +25,13 @@
     "eslint-config-standard-react": "^7.0.2",
     "file-selector": "^0.1.5",
     "glamor": "^2.20.40",
-    "glamorous": "^4.13.1",
+    "glamorous": "^5.0.0",
     "history": "^4.7.2",
-    "ipfs-http-client": "^27.0.0",
+    "ipfs-http-client": "^27.1.0",
     "json-loader": "^0.5.7",
     "portis": "^1.3.1",
     "react": "^16.6.1",
-    "react-cookie": "^3.0.4",
+    "react-cookie": "^3.0.8",
     "react-dom": "^16.6.1",
     "react-dropdown": "^1.6.2",
     "react-dropzone": "^7.0.1",
@@ -43,10 +43,10 @@
     "web3": "^1.0.0-beta.35"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "^4.0.4",
-    "@storybook/addon-links": "^4.0.4",
-    "@storybook/addons": "^4.0.4",
-    "@storybook/react": "^4.0.4",
+    "@storybook/addon-actions": "^4.0.12",
+    "@storybook/addon-links": "^4.0.12",
+    "@storybook/addons": "^4.0.12",
+    "@storybook/react": "^4.0.12",
     "babel-core": "^6.26.3",
     "babel-runtime": "^6.26.0",
     "eslint-config-airbnb": "^17.1.0",

src/atoms/ContractAddressDropdown.js

@@ -20,7 +20,6 @@ class ContractAddressDropdown extends Component {
   }
 
   _onSelect = selection => {
-    console.log(`Detected Selection`)
     let {contractObjects} = this.props
     // let contractObjects = this.props.fetchObjects()
     contractObjects.forEach(obj => {
@@ -36,27 +35,16 @@ class ContractAddressDropdown extends Component {
     return val.length > 20 ? `${val.substring(0, 20)}...` : val
   }
 
-  showSelectedDiv = () => {
-    if (this.props.selectedAddress) {
-      return (
-        <GreyTopped>
-          <Div>{this.props.selectedAddress}</Div>
-        </GreyTopped>
-      )
-    }
-    return null
-  }
-
-  connectProvider = async () => 
+  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 (
@@ -74,7 +62,7 @@ class ContractAddressDropdown extends Component {
       )
     }
     if (!contractObjects || contractObjects.length === 0) {
-      return <GreyTopped>Not deployed on {network}</GreyTopped>
+      return <GreyTopped>Not deployed on {network.name}</GreyTopped>
     }
     return (
       <Div>
@@ -94,7 +82,6 @@ class ContractAddressDropdown extends Component {
           }
           placeholder='Nothing Selected'
         />
-        {this.showSelectedDiv()}
       </Div>
     )
   }

src/atoms/CookieReader.js

@@ -1,8 +1,12 @@
 
 export const readSettings = cookies => {
-
+  if (!cookies.get(`portisNetwork`)) {
+    cookies.set(`portisNetwork`, `mainnet`, {
+      path: `/`,
+    })
+  }
   return {
-    portisNetwork: cookies.get(`portisNetwork`) || `development`,
+    portisNetwork: cookies.get(`portisNetwork`),
     currentSource: cookies.get(`currentSource`) || `ipfs`,
     local: cookies.get(`local`) || ``,
     remote: cookies.get(`remote`) || ``,

src/atoms/CurNetwork.js

@@ -1,22 +1,23 @@
 import React from "react"
 import { Div } from "glamorous"
 
-const WalletDiv = (account) => {
+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>
+  return (
+    <Div key='account' className='account-right'>
+      No Wallet Connected
+    </Div>
+  )
 }
 
 const CurNetwork = ({ account, network }) => {
   let returnDivs = []
-
   returnDivs.push(WalletDiv(account))
   if (network) {
     returnDivs.push(

src/atoms/DeploymentResult.js

@@ -0,0 +1,54 @@
+import React from "react"
+import { Div } from "glamorous"
+
+import ResultTable from "../atoms/ResultTable"
+import { HeaderStyle2 } from "../atoms/HeaderStyle"
+
+const DeploymentResult = ({ address, ipfs, name, notes }) => {
+  if (!name) {
+    return null
+  }
+  const header = {
+    name: `Deployed Contract`,
+    color: `6025AE`,
+    value: name,
+  }
+  const rows = [
+    {
+      name: `IPFS`,
+      url: `https://ipfs.xyo.network/ipfs/${ipfs}`,
+      value: ipfs,
+    },
+    {
+      name: `Address`,
+      value: address,
+    },
+  ]
+  if (notes) {
+    rows.push({
+      name: `Notes`,
+      value: notes,
+    })
+  }
+  return (
+    <Div
+      css={{
+        display: `flex`,
+        flexDirection: `row`,
+        justifyContent: `center`,
+      }}
+    >
+      <Div
+        css={{
+          display: `flex`,
+          flexDirection: `column`,
+          justifyContent: `center`,
+        }}
+      >
+        <HeaderStyle2>Successfully Deployed {name}</HeaderStyle2>
+        <ResultTable header={header} rows={rows} />
+      </Div>
+    </Div>
+  )
+}
+export default DeploymentResult

src/atoms/DetailsHeader.js src/atoms/HeaderStyle.jssrc/atoms/DetailsHeader.js renamed to src/atoms/HeaderStyle.js

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

src/atoms/ResultTable.js

@@ -1,28 +1,19 @@
-import React, { Component } from 'react'
-import glam, { Div } from 'glamorous'
-import './css/ResultTable.css'
-import Seperator from './Seperator'
-
-const ReceiptRow = glam.div({
-  display: 'flex',
-  flexDirection: 'row',
-  justifyContent: 'space-between',
-  height: 35,
-  color: '#4D4D5C',
-  fontFamily: 'PT Sans',
-  fontSize: 15,
-})
-const LeftColumn = glam.div({
-  textAlign: 'left',
-})
-const RightColumn = glam.div({
-  textAlign: 'right',
-})
+import React, { Component } from "react"
+import { Div } from "glamorous"
+import "./css/ResultTable.css"
+import Seperator from "./Seperator"
+import {Link} from 'react-router-dom'
+import {
+  TableStyle,
+  FlexSpacingRow,
+  LeftColumn,
+  RightColumn,
+} from "../atoms/SharedStyles"
 
 const HeaderRow = ({ header }) => {
   const { name, value, color } = header
   return (
-    <ReceiptRow
+    <FlexSpacingRow
       css={{
         color: color,
         fontSize: 18,
@@ -31,23 +22,31 @@ const HeaderRow = ({ header }) => {
     >
       <LeftColumn>{name}</LeftColumn>
       <RightColumn>{value}</RightColumn>
-    </ReceiptRow>
+    </FlexSpacingRow>
   )
 }
 
 export const RowDivs = ({ rows }) => {
   const rowDivs = []
-  rows.forEach(({ name, value }, index) => {
+  rows.forEach(({ name, value, linkTo, url }, index) => {
     let seperator = undefined
     if (index < rows.length - 1) {
       seperator = <Seperator />
     }
+    let rightColumn = value => {
+      if (linkTo) {
+        return <RightColumn>{<Link to={linkTo}>{value}</Link>}</RightColumn>
+      } else if (url) {
+        return <RightColumn>{<a href={url} target='blank'>{value}</a>}</RightColumn>
+      }
+      return <RightColumn>{value}</RightColumn>
+    }
     rowDivs.push(
       <Div key={name}>
-        <ReceiptRow>
+        <FlexSpacingRow>
           <LeftColumn>{name}</LeftColumn>
-          <RightColumn>{value}</RightColumn>
-        </ReceiptRow>
+          {rightColumn(value)}
+        </FlexSpacingRow>
         {seperator}
       </Div>,
     )
@@ -57,19 +56,13 @@ export const RowDivs = ({ rows }) => {
 }
 
 class ResultTable extends Component {
-  constructor({ header, rows }) {
-    super()
-    this.state = {
-      header,
-      rows,
-    }
-  }
   render() {
+    const { header, rows } = this.props
     return (
-      <Div className="result-table">
-        <HeaderRow header={this.state.header} />
-        <RowDivs rows={this.state.rows} />
-      </Div>
+      <TableStyle>
+        <HeaderRow header={header} />
+        <RowDivs rows={rows} />
+      </TableStyle>
     )
   }
 }

src/atoms/SharedStyles.js

@@ -0,0 +1,32 @@
+import glam from "glamorous"
+
+export const FlexSpacingRow = glam.div({
+  display: `flex`,
+  flexDirection: `row`,
+  justifyContent: `space-between`,
+  height: 35,
+  color: `#4D4D5C`,
+  fontFamily: `PT Sans`,
+  fontSize: 15,
+  width: 600
+})
+
+export const LeftColumn = glam.div({
+  textAlign: `left`,
+})
+
+export const RightColumn = glam.div({
+  textAlign: `right`,
+  lineBreak: `loose`,
+  wordWrap: `break-word`,
+})
+
+export const TableStyle = glam.div({
+  width: `90W%`,
+  minHeight: `20px`,
+  margin: 20,
+  padding: 20,
+  boxShadow: `0 4px 4px 0 rgba(99, 99, 99, 0.19)`,
+  backgroundColor: `white`,
+  borderRadius: 2,
+})