mirror of
https://github.com/status-im/liquid-funding.git
synced 2025-01-12 12:34:39 +00:00
display connected status
add enableEthereum button
This commit is contained in:
parent
673239023e
commit
039054f052
@ -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)
|
||||
|
14
src/dapp.js
14
src/dapp.js
@ -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={{
|
||||
|
Loading…
x
Reference in New Issue
Block a user