m/blog
1
0
Fork 0
mirror of https://github.com/kremalicious/blog.git synced 2024-12-22 09:13:35 +01:00
Code

web3 detection improvements

Browse Source
This commit is contained in:
Matthias Kretschmann 2018-10-11 20:06:02 +02:00
parent 2e85f7e24b
commit 0ca1e977cd
Signed by: m
GPG Key ID: 606EEEF3C479A91F
2 changed files with 72 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/components/atoms/PostActions.jsx
View File

@ -35,6 +35,7 @@ export default class PostActions extends PureComponent {
> >
@kremalicious @kremalicious
</a> </a>
.
</p> </p>
</article> </article>
<article className={styles.action}> <article className={styles.action}>

148
src/components/atoms/Web3Donation.jsx
View File

@ -22,14 +22,16 @@ export default class Web3Donation extends PureComponent {
address: PropTypes.string address: PropTypes.string
} }
web3 = new Web3(Web3.givenProvider || 'ws://localhost:8546') web3 = null
interval = null interval = null
networkInterval = null networkInterval = null
componentDidMount() { componentDidMount() {
const { web3 } = this if (typeof window.web3 === 'undefined') {
// no web3
if (web3 && web3.eth) { this.setState({ web3Connected: false })
} else {
this.web3 = new Web3(Web3.givenProvider || 'ws://localhost:8546')
this.setState({ web3Connected: true }) this.setState({ web3Connected: true })
this.fetchAccounts() this.fetchAccounts()
@ -64,16 +66,14 @@ export default class Web3Donation extends PureComponent {
web3.eth && web3.eth &&
web3.eth.net.getId((err, netId) => { web3.eth.net.getId((err, netId) => {
if (err) { if (err) {
this.setState({ networkError: err })
}
if (netId != this.state.networkId) {
this.setState({ this.setState({
networkError: err networkError: null,
networkId: netId
}) })
} else {
if (netId != this.state.networkId) {
this.setState({
networkError: null,
networkId: netId
})
}
} }
}) })
} }
@ -85,15 +85,13 @@ export default class Web3Donation extends PureComponent {
web3.eth && web3.eth &&
web3.eth.getAccounts((err, accounts) => { web3.eth.getAccounts((err, accounts) => {
if (err) { if (err) {
this.setState({ this.setState({ accountsError: err })
accountsError: err
})
} else {
this.setState({
accounts,
selectedAccount: accounts[0]
})
} }
this.setState({
accounts,
selectedAccount: accounts[0]
})
}) })
} }
@ -117,64 +115,60 @@ export default class Web3Donation extends PureComponent {
} }
render() { render() {
if (this.state.web3Connected) { return (
return ( <div className={styles.web3}>
<div className={styles.web3}> <h4>web3</h4>
<h4>web3</h4> <p>Send a donation with MetaMask or Mist.</p>
<p>Send a donation with your MetaMask or Mist account.</p>
{this.state.web3Connected && ( {this.state.web3Connected ? (
<div> <div>
{this.state.loading ? ( {this.state.loading ? (
'Hang on...' 'Hang on...'
) : ( ) : (
<button <button
className="btn btn-primary" className="btn btn-primary"
onClick={this.handleWeb3Button} onClick={this.handleWeb3Button}
disabled={ disabled={
!(this.state.networkId === 1) || !this.state.selectedAccount !(this.state.networkId === 1) || !this.state.selectedAccount
} }
>
Make it rain 0.01 Ξ
</button>
)}
{this.state.accounts.length === 0 && (
<div className={styles.alert}>
Web3 detected, but no account. Are you logged into your MetaMask
account?
</div>
)}
{this.state.networkId !== 1 && (
<div className={styles.alert}>Please connect to Main network</div>
)}
{this.state.error && (
<div className={styles.alert}>{this.state.error.message}</div>
)}
{this.state.receipt.status && (
<div className={styles.success}>
You are awesome, thanks!
<br />
<a
href={`https://etherscan.io/tx/${
this.state.receipt.transactionHash
}`}
> >
Make it rain 0.01 Ξ See your transaction on etherscan.io.
</button> </a>
)} </div>
)}
{this.state.accounts.length === 0 && ( </div>
<div className={styles.alert}> ) : (
Web3 detected, but no account. Are you logged into your <div className={styles.alert}>No Web3 capable browser detected.</div>
MetaMask account? )}
</div> </div>
)} )
{this.state.networkId !== 1 && (
<div className={styles.alert}>
Please connect to Main network
</div>
)}
{this.state.error && (
<div className={styles.alert}>{this.state.error.message}</div>
)}
{this.state.receipt.status && (
<div className={styles.success}>
You are awesome, thanks!
<br />
<a
href={`https://etherscan.io/tx/${
this.state.receipt.transactionHash
}`}
>
See your transaction on etherscan.io.
</a>
</div>
)}
</div>
)}
</div>
)
} else {
return null
}
} }
} }