display connected status

add enableEthereum button
This commit is contained in:
Barry Gitarts 2019-08-19 15:49:37 -04:00 committed by Barry G
parent 673239023e
commit 039054f052
2 changed files with 38 additions and 9 deletions

View File

@ -34,6 +34,11 @@ import CreateProject from './projects/CreateProject'
import CreateDelegate from './projects/CreateDelegate'
const drawerWidth = 240
const formatAccount = account => {
const start = account.slice(0,6)
const end = account.slice(-4)
return `${start}...${end}`
}
const styles = theme => ({
root: {
@ -56,11 +61,23 @@ const styles = theme => ({
appBarBg: {
backgroundColor: '#fff'
},
accountText: {
color: '#939BA1'
},
connect: {
color: '#4360DF',
fontSize: '15px',
marginLeft: 'auto',
marginRight: '3rem'
marginRight: '3rem',
cursor: 'pointer'
},
connected: {
color: '#44D058'
},
connectedText: {
display: 'flex',
flexDirection: 'column',
alignItems: 'flex-end'
},
menuButton: {
marginLeft: 12,
@ -131,7 +148,7 @@ class PersistentDrawerLeft extends React.Component {
};
render() {
const { classes, theme, loading } = this.props
const { classes, theme, loading, account, enableEthereum } = this.props
const { open } = this.state
return (
@ -162,7 +179,13 @@ class PersistentDrawerLeft extends React.Component {
<Typography className={classes.menuText} variant="h6" noWrap>
Liquid Funding
</Typography>
<Typography className={classes.connect}>Connect</Typography>
<Typography className={classNames(classes.connect, {[classes.connected]: !!account})} onClick={enableEthereum}>
{!!account && <div className={classes.connectedText}>
<div className={classes.accountText}>{formatAccount(account)}</div>
<div>Connected</div>
</div>}
{!account && <span>Connect</span>}
</Typography>
</Toolbar>
</AppBar>
<Drawer
@ -224,7 +247,9 @@ class PersistentDrawerLeft extends React.Component {
PersistentDrawerLeft.propTypes = {
classes: PropTypes.object.isRequired,
theme: PropTypes.object.isRequired,
loading: PropTypes.bool.isRequired
loading: PropTypes.bool.isRequired,
account: PropTypes.string,
enableEthereum: PropTypes.func.isRequired
};
export default withStyles(styles, { withTheme: true })(PersistentDrawerLeft)

View File

@ -34,6 +34,7 @@ class App extends React.Component {
getNetworkType().then(async network => {
this.setGraphClient(network)
})
this.getAndSetPrices()
EmbarkJS.onReady(async (err) => {
if (err) {
@ -46,8 +47,6 @@ class App extends React.Component {
if (environment === 'development') console.log('mock_time:', await LiquidPledging.mock_time.call())
const account = await web3.eth.getCoinbase()
console.log({account})
this.getAndSetPrices()
this.setState({ account })
//TODO add block based sync
const authorizedPayments = await getAuthorizedPayments()
@ -88,6 +87,12 @@ class App extends React.Component {
this.setState({ loading: false })
}
enableEthereum = async () => {
await EmbarkJS.enableEthereum()
const account = await web3.eth.getCoinbase()
this.setState({ account })
}
getAndSetPrices = async () => {
const prices = await getPrices()
this.setState({ prices })
@ -115,7 +120,7 @@ class App extends React.Component {
render() {
const { account, needsInit, lpAllowance: _lpAllowance, loading, authorizedPayments, snackbar, prices } = this.state
const { appendFundProfile, appendPledges, transferPledgeAmounts, openSnackBar, closeSnackBar, syncWithRemote, updateUsdPrice, client } = this
const { appendFundProfile, appendPledges, transferPledgeAmounts, openSnackBar, closeSnackBar, syncWithRemote, updateUsdPrice, client, enableEthereum } = this
const fundingContext = {
appendPledges,
appendFundProfile,
@ -131,13 +136,12 @@ class App extends React.Component {
prices,
updateUsdPrice
}
console.log({client, loading})
if (client) return (
<ApolloProvider client={client}>
<FundingContext.Provider value={fundingContext}>
<Router>
<MainCointainer loading={loading} />
<MainCointainer loading={loading} enableEthereum={enableEthereum} account={account} />
</Router>
{snackbar && <Snackbar
anchorOrigin={{