From 609d4eb76288d517cbf2e8a71f0c16ccbe83a466 Mon Sep 17 00:00:00 2001 From: emizzle Date: Fri, 24 Aug 2018 12:19:08 +1000 Subject: [PATCH] Fix Tabler browser errors Fixed browser errors caused by tabler (bodyItems and headerItems complaints) as well as staticContext issues caused by using withRoute(NavLink) Also added a response to fiddler deployment. Added loading states to fiddler results, that shows the errors/warnings as having a loading state when compiling/deploying --- embark-ui/src/actions/index.js | 4 +- embark-ui/src/api/index.js | 2 +- embark-ui/src/components/Accounts.js | 41 ++++++++------- embark-ui/src/components/Blocks.js | 39 +++++++++----- embark-ui/src/components/Contract.js | 29 ++++++----- embark-ui/src/components/ContractLayout.js | 12 ++--- embark-ui/src/components/ContractLogger.js | 48 ++++++++++-------- embark-ui/src/components/ContractProfile.js | 56 ++++++++++++--------- embark-ui/src/components/Contracts.js | 40 +++++++++------ embark-ui/src/components/ExplorerLayout.js | 4 +- embark-ui/src/components/FiddleResults.js | 31 ++++++++++-- embark-ui/src/components/Layout.js | 14 +++--- embark-ui/src/components/ProcessesLayout.js | 4 +- embark-ui/src/components/Transactions.js | 48 ++++++++++-------- embark-ui/src/containers/FiddleContainer.js | 9 ++-- embark-ui/src/reducers/index.js | 1 + embark-ui/src/reducers/selectors.js | 8 ++- lib/modules/contracts_manager/index.js | 2 +- 18 files changed, 242 insertions(+), 150 deletions(-) diff --git a/embark-ui/src/actions/index.js b/embark-ui/src/actions/index.js index 9bab56fc1..327c10d83 100644 --- a/embark-ui/src/actions/index.js +++ b/embark-ui/src/actions/index.js @@ -178,7 +178,9 @@ export const fiddle = { export const FIDDLE_DEPLOY = createRequestTypes('FIDDLE_DEPLOY'); export const fiddleDeploy = { request: (compiledCode) => action(FIDDLE_DEPLOY[REQUEST], {compiledCode}), - success: () => action(FIDDLE_DEPLOY[SUCCESS]), + success: (response) => { + return action(FIDDLE_DEPLOY[SUCCESS], {fiddleDeploys: [response.contractNames]}); + }, failure: (error) => action(FIDDLE_DEPLOY[FAILURE], {error}) }; diff --git a/embark-ui/src/api/index.js b/embark-ui/src/api/index.js index 653fff8f9..319e4ffa0 100644 --- a/embark-ui/src/api/index.js +++ b/embark-ui/src/api/index.js @@ -129,5 +129,5 @@ export function postFiddle(payload) { } export function postFiddleDeploy(payload) { - return post('/contract/deploy', {compiledContract: payload.compiledCode.compilationResult}); + return post('/contract/deploy', {compiledContract: payload.compiledCode}); } diff --git a/embark-ui/src/components/Accounts.js b/embark-ui/src/components/Accounts.js index 34f64e37a..09b6810bb 100644 --- a/embark-ui/src/components/Accounts.js +++ b/embark-ui/src/components/Accounts.js @@ -16,23 +16,30 @@ const Accounts = ({accounts}) => ( { - return ([ - {content: {account.address}}, - {content: account.balance}, - {content: account.transactionCount}, - {content: account.index} - ]); - }) - } - /> + > + + + Address + Balance + TX count + Index + + + + { + accounts.map((account) => { + return ( + + {account.address} + {account.balance} + {account.transactionCount} + {account.index} + + ); + }) + } + +
diff --git a/embark-ui/src/components/Blocks.js b/embark-ui/src/components/Blocks.js index 92981ac89..3673e5eeb 100644 --- a/embark-ui/src/components/Blocks.js +++ b/embark-ui/src/components/Blocks.js @@ -15,19 +15,32 @@ const Blocks = ({blocks}) => ( { - return ([ - {content: {block.number}}, - {content: new Date(block.timestamp * 1000).toLocaleString()}, - {content: block.gasUsed}, - {content: block.transactions.length} - ]); - }) - } - /> + cards + verticalAlign="center" + className="text-nowrap"> + + + Number + Mined On + Gas Used + TX Count + + + + { + blocks.map((block) => { + return ( + + {block.number} + {new Date(block.timestamp * 1000).toLocaleString()} + {block.gasUsed} + {block.transactions.length} + + ); + }) + } + +
diff --git a/embark-ui/src/components/Contract.js b/embark-ui/src/components/Contract.js index 08555565f..a5e22d16f 100644 --- a/embark-ui/src/components/Contract.js +++ b/embark-ui/src/components/Contract.js @@ -15,19 +15,22 @@ const Contract = ({contract}) => ( + > + + + Name + Address + State + + + + + {(contract.name || contract.className)} + {(contract.address || contract.deployedAddress)} + {contract.deploy} + + +
diff --git a/embark-ui/src/components/ContractLayout.js b/embark-ui/src/components/ContractLayout.js index b99504712..930d609c0 100644 --- a/embark-ui/src/components/ContractLayout.js +++ b/embark-ui/src/components/ContractLayout.js @@ -24,7 +24,7 @@ const ContractLayout = ({match}) => ( className="d-flex align-items-center" to={`/embark/contracts/${match.params.contractName}/overview`} icon="corner-left-up" - RootComponent={withRouter(NavLink)} + RootComponent={NavLink} > Back to {match.params.contractName} @@ -32,7 +32,7 @@ const ContractLayout = ({match}) => ( className="d-flex align-items-center" to={`/embark/contracts/${match.params.contractName}/deployment`} icon="users" - RootComponent={withRouter(NavLink)} + RootComponent={NavLink} > Deployment / Utils @@ -40,7 +40,7 @@ const ContractLayout = ({match}) => ( className="d-flex align-items-center" to={`/embark/contracts/${match.params.contractName}/functions`} icon="book-open" - RootComponent={withRouter(NavLink)} + RootComponent={NavLink} > Functions @@ -48,7 +48,7 @@ const ContractLayout = ({match}) => ( className="d-flex align-items-center" to={`/embark/contracts/${match.params.contractName}/source`} icon="activity" - RootComponent={withRouter(NavLink)} + RootComponent={NavLink} > Source Code @@ -56,7 +56,7 @@ const ContractLayout = ({match}) => ( className="d-flex align-items-center" to={`/embark/contracts/${match.params.contractName}/profiler`} icon="server" - RootComponent={withRouter(NavLink)} + RootComponent={NavLink} > Profile @@ -64,7 +64,7 @@ const ContractLayout = ({match}) => ( className="d-flex align-items-center" to={`/embark/contracts/${match.params.contractName}/logger`} icon="chevrons-right" - RootComponent={withRouter(NavLink)} + RootComponent={NavLink} > Logger diff --git a/embark-ui/src/components/ContractLogger.js b/embark-ui/src/components/ContractLogger.js index 4f3548c92..586d8f900 100644 --- a/embark-ui/src/components/ContractLogger.js +++ b/embark-ui/src/components/ContractLogger.js @@ -11,26 +11,34 @@ const ContractLogger = ({contractName, contractLogs}) => ( { - return ([ - {content: `${log.name}.${log.functionName}(${log.paramString})`}, - {content: log.transactionHash}, - {content: log.gasUsed}, - {content: log.blockNumber}, - {content: log.status} - ]); - }) - } - /> + cards + verticalAlign="center" + className="text-nowrap"> + + + call + Transaction hash + Gas Used + Block number + Status + + + + { + contractLogs.map((log) => { + return ( + + {`${log.name}.${log.functionName}(${log.paramString})`} + {log.transactionHash} + {log.gasUsed} + {log.blockNumber} + {log.status} + + ); + }) + } + +
diff --git a/embark-ui/src/components/ContractProfile.js b/embark-ui/src/components/ContractProfile.js index 2b8399310..02a302fbf 100644 --- a/embark-ui/src/components/ContractProfile.js +++ b/embark-ui/src/components/ContractProfile.js @@ -12,30 +12,38 @@ const ContractProfile = ({contractProfile}) => ( - { - return ([ - {content: method.name}, - {content: (method.payable === true).toString()}, - {content: method.mutability}, - {content: `(${method.inputs.map((x) => x.type).join(',')})`}, - {content: `(${method.outputs.map((x) => x.type).join(',')})`}, - {content: method.gasEstimates} - ]); - }) - } - /> +
+ + + Function + Payable + Mutability + Inputs + Outputs + Gas Estimates + + + + { + contractProfile.methods.map((method) => { + return ( + + {method.name} + {(method.payable === true).toString()} + {method.mutability} + {`(${method.inputs.map((x) => x.type).join(',')})`} + {`(${method.outputs.map((x) => x.type).join(',')})`} + {method.gasEstimates} + + ); + }) + } + +
diff --git a/embark-ui/src/components/Contracts.js b/embark-ui/src/components/Contracts.js index a118774a2..1f9c384da 100644 --- a/embark-ui/src/components/Contracts.js +++ b/embark-ui/src/components/Contracts.js @@ -15,22 +15,30 @@ const Contracts = ({contracts}) => ( { - return ([ - {content: {contract.className}}, - {content: contract.address}, - {content: contract.deploy.toString()} - ]); - }) - } - /> + cards + verticalAlign="center" + className="text-nowrap"> + + + Name + Address + State + + + + { + contracts.map((contract) => { + return ( + + {contract.className} + {contract.address || 'Interface or not set to deploy'} + {contract.deploy ? 'Deployed' : 'Not deployed'} + + ); + }) + } + +
diff --git a/embark-ui/src/components/ExplorerLayout.js b/embark-ui/src/components/ExplorerLayout.js index d7b9780f4..a3df79d45 100644 --- a/embark-ui/src/components/ExplorerLayout.js +++ b/embark-ui/src/components/ExplorerLayout.js @@ -1,5 +1,5 @@ import React from 'react'; -import {NavLink, Route, Switch, withRouter} from 'react-router-dom'; +import {NavLink, Route, Switch} from 'react-router-dom'; import { Page, Grid, @@ -37,7 +37,7 @@ const ExplorerLayout = () => ( className={className} to={groupItem.to} icon={groupItem.icon} - RootComponent={withRouter(NavLink)} + RootComponent={NavLink} > {groupItem.value} diff --git a/embark-ui/src/components/FiddleResults.js b/embark-ui/src/components/FiddleResults.js index 3c3764303..f3c581743 100644 --- a/embark-ui/src/components/FiddleResults.js +++ b/embark-ui/src/components/FiddleResults.js @@ -1,8 +1,9 @@ /* eslint {jsx-a11y/anchor-has-content:"off"} */ import React, {Component} from 'react'; -import {Card, List, Badge, Icon, Dimmer} from 'tabler-react'; +import {Card, List, Badge, Icon, Dimmer, Button} from 'tabler-react'; import PropTypes from 'prop-types'; import classNames from 'classnames'; +import {NavLink} from 'react-router-dom'; class FiddleResults extends Component { @@ -56,7 +57,7 @@ class FiddleResults extends Component { } render() { - const {warnings, errors, fatal, isLoading} = this.props; + const {warnings, errors, fatal, isLoading, deployedContracts} = this.props; let renderings = []; if(fatal){ @@ -72,12 +73,35 @@ class FiddleResults extends Component { Failed to compile + {fatal} + ); } + else if (deployedContracts){ + renderings.push( + + + Contract(s) deployed! + + + + + + + + ); + } else{ if (errors.length) renderings.push( @@ -105,7 +129,8 @@ FiddleResults.propTypes = { errors: PropTypes.array, warnings: PropTypes.array, fatal: PropTypes.string, - isLoading: PropTypes.bool + isLoading: PropTypes.bool, + deployedContracts: PropTypes.array }; export default FiddleResults; diff --git a/embark-ui/src/components/Layout.js b/embark-ui/src/components/Layout.js index 01f21641f..e2619d973 100644 --- a/embark-ui/src/components/Layout.js +++ b/embark-ui/src/components/Layout.js @@ -1,17 +1,17 @@ import React from 'react'; -import {NavLink, withRouter} from "react-router-dom"; +import {NavLink} from "react-router-dom"; import {Site, Nav, Button, Container} from "tabler-react"; import PropTypes from 'prop-types'; import logo from '../images/logo.png'; const navBarItems = [ - {value: "Home", to: "/embark", icon: "home", LinkComponent: withRouter(NavLink)}, - {value: "Contracts", to: "/embark/contracts", icon: "box", LinkComponent: withRouter(NavLink)}, - {value: "Explorer", to: "/embark/explorer/accounts", icon: "activity", LinkComponent: withRouter(NavLink)}, - {value: "Processes", to: "/embark/processes", icon: "cpu", LinkComponent: withRouter(NavLink)}, - {value: "Fiddle", to: "/embark/fiddle", icon: "codepen", LinkComponent: withRouter(NavLink)}, - {value: "Documentation", to: "/embark/documentation", icon: "file-text", LinkComponent: withRouter(NavLink)} + {value: "Home", to: "/embark", icon: "home", LinkComponent: NavLink}, + {value: "Contracts", to: "/embark/contracts", icon: "box", LinkComponent: NavLink}, + {value: "Explorer", to: "/embark/explorer/accounts", icon: "activity", LinkComponent: NavLink}, + {value: "Processes", to: "/embark/processes", icon: "cpu", LinkComponent: NavLink}, + {value: "Fiddle", to: "/embark/fiddle", icon: "codepen", LinkComponent: NavLink}, + {value: "Documentation", to: "/embark/documentation", icon: "file-text", LinkComponent: NavLink} ]; const Layout = (props) => ( diff --git a/embark-ui/src/components/ProcessesLayout.js b/embark-ui/src/components/ProcessesLayout.js index 422a388ef..8036aad56 100644 --- a/embark-ui/src/components/ProcessesLayout.js +++ b/embark-ui/src/components/ProcessesLayout.js @@ -1,7 +1,7 @@ import PropTypes from "prop-types"; import React, {Component} from 'react'; import connect from "react-redux/es/connect/connect"; -import {NavLink, Route, Switch, withRouter, Redirect} from 'react-router-dom'; +import {NavLink, Route, Switch, Redirect} from 'react-router-dom'; import { Page, Grid, @@ -30,7 +30,7 @@ class ProcessesLayout extends Component { to={`${routePrefix}/${process.name}`} key={'process-' + process.name} active={index === 0 && this.props.match.isExact === true} - RootComponent={withRouter(NavLink)} + RootComponent={NavLink} > {process.name} ); diff --git a/embark-ui/src/components/Transactions.js b/embark-ui/src/components/Transactions.js index 9a295d807..9d0764157 100644 --- a/embark-ui/src/components/Transactions.js +++ b/embark-ui/src/components/Transactions.js @@ -15,26 +15,34 @@ const Transactions = ({transactions}) => ( { - return ([ - {content: {transaction.hash}}, - {content: transaction.blockNumber}, - {content: transaction.from}, - {content: transaction.to}, - {content: transaction.to ? "Contract Call" : "Contract Creation"} - ]); - }) - } - /> + cards + verticalAlign="center" + className="text-nowrap"> + + + Hash + Block Number + From + To + Type + + + + { + transactions.reduce((transaction) => { + return ( + + {transaction.hash} + {transaction.blockNumber} + {transaction.from} + {transaction.to} + {transaction.to ? "Contract Call" : "Contract Creation"} + + ); + }) + } + +
diff --git a/embark-ui/src/containers/FiddleContainer.js b/embark-ui/src/containers/FiddleContainer.js index 0c0ae3894..6e9ed8e51 100644 --- a/embark-ui/src/containers/FiddleContainer.js +++ b/embark-ui/src/containers/FiddleContainer.js @@ -8,7 +8,7 @@ import Fiddle from '../components/Fiddle'; import FiddleResults from '../components/FiddleResults'; import FiddleResultsSummary from '../components/FiddleResultsSummary'; import scrollToComponent from 'react-scroll-to-component'; -import {getFiddle} from "../reducers/selectors"; +import {getFiddle, getFiddleDeploy} from "../reducers/selectors"; import CompilerError from "../components/CompilerError"; class FiddleContainer extends Component { @@ -82,7 +82,7 @@ class FiddleContainer extends Component { } render() { - const {fiddle, loading, error} = this.props; + const {fiddle, loading, error, deployedContracts} = this.props; const {loadingMessage} = this.state; let renderings = []; let warnings = []; @@ -124,6 +124,7 @@ class FiddleContainer extends Component { warnings={warnings} fatal={error} isLoading={loading} + deployedContracts={deployedContracts} />); } @@ -138,9 +139,11 @@ class FiddleContainer extends Component { } function mapStateToProps(state) { const fiddle = getFiddle(state); + const deployedFiddle = getFiddleDeploy(state); return { fiddle: fiddle.data, - error: fiddle.error, + deployedContracts: deployedFiddle.data, + error: fiddle.error || deployedFiddle.error, loading: state.loading }; } diff --git a/embark-ui/src/reducers/index.js b/embark-ui/src/reducers/index.js index 048db2b73..6382dc936 100644 --- a/embark-ui/src/reducers/index.js +++ b/embark-ui/src/reducers/index.js @@ -21,6 +21,7 @@ const entitiesDefaultState = { messages: [], messageChannels: [], fiddles: [], + fiddleDeploys: [], versions: [], plugins: [], ensRecords: [] diff --git a/embark-ui/src/reducers/selectors.js b/embark-ui/src/reducers/selectors.js index 2e1001ecf..847f59ba9 100644 --- a/embark-ui/src/reducers/selectors.js +++ b/embark-ui/src/reducers/selectors.js @@ -1,5 +1,4 @@ import _ from 'lodash'; -import {REQUEST, FIDDLE, FIDDLE_DEPLOY} from '../actions/index.js'; export function getAccounts(state) { return state.entities.accounts; @@ -112,6 +111,13 @@ export function getFiddle(state) { }; } +export function getFiddleDeploy(state) { + return { + data: _.last(state.entities.fiddleDeploys), + error: _.last(state.errorEntities.fiddleDeploys) + }; +} + export function getEnsRecords(state) { return state.entities.ensRecords; } diff --git a/lib/modules/contracts_manager/index.js b/lib/modules/contracts_manager/index.js index 54e093f79..916c45e93 100644 --- a/lib/modules/contracts_manager/index.js +++ b/lib/modules/contracts_manager/index.js @@ -171,7 +171,7 @@ class ContractsManager { (req, res) => { self.compiledContracts = Object.assign(self.compiledContracts, req.body.compiledContract); self.build((err, _mgr) => { - const responseData = {errors: err, success: !err}; + const responseData = {errors: err, contractNames: Object.keys(req.body.compiledContract)}; this.logger.trace(`POST response /embark-api/contract/deploy:\n ${JSON.stringify(responseData)}`); res.send(responseData); }, false);