mirror of
https://github.com/kremalicious/blog.git
synced 2024-11-15 01:25:28 +01:00
Alerts refactor
This commit is contained in:
parent
0039f6b6e7
commit
fc38c6b889
GPG Key ID:
606EEEF3C479A91F
@ -1,52 +1,62 @@
|
||||
import React from 'react'
|
||||
import React, { Fragment } from 'react'
|
||||
import PropTypes from 'prop-types'
|
||||
import styles from './Alerts.module.scss'
|
||||
|
||||
const alertMessages = (networkName, transactionHash) => ({
|
||||
noAccount:
|
||||
'Web3 detected, but no account. Are you logged into your MetaMask account?',
|
||||
noCorrectNetwork: `Please connect to <strong>Main</strong> network. You are on <strong>${networkName}</strong> right now.`,
|
||||
noWeb3:
|
||||
'No Web3 detected. Install <a href="https://metamask.io">MetaMask</a>, <a href="https://brave.com">Brave</a>, or <a href="https://github.com/ethereum/mist">Mist</a>.',
|
||||
success: `You are awesome, thanks!<br />
|
||||
<a href="https://etherscan.io/tx/${transactionHash}">
|
||||
See your transaction on etherscan.io.
|
||||
</a>`
|
||||
})
|
||||
|
||||
const Alerts = ({
|
||||
accounts,
|
||||
networkId,
|
||||
hasCorrectNetwork,
|
||||
hasAccount,
|
||||
networkName,
|
||||
error,
|
||||
transactionHash
|
||||
transactionHash,
|
||||
web3Connected
|
||||
}) => {
|
||||
const isCorrectNetwork = networkId === '1'
|
||||
const hasAccount = accounts.length !== 0
|
||||
return !web3Connected ? (
|
||||
<small dangerouslySetInnerHTML={{ __html: alertMessages().noWeb3 }} />
|
||||
) : (
|
||||
<Fragment>
|
||||
<div className={styles.alert}>
|
||||
{!hasAccount && <div>{alertMessages().noaccount}</div>}
|
||||
{!hasCorrectNetwork && (
|
||||
<div
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: alertMessages(networkName).noCorrectNetwork
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{error && <div>{error.message}</div>}
|
||||
</div>
|
||||
|
||||
if (error || hasAccount || isCorrectNetwork)
|
||||
<div className={styles.alert}>
|
||||
{!hasAccount && (
|
||||
<div>
|
||||
Web3 detected, but no account. Are you logged into your MetaMask
|
||||
account?
|
||||
</div>
|
||||
{transactionHash && (
|
||||
<div
|
||||
className={styles.success}
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: alertMessages(transactionHash).success
|
||||
}}
|
||||
/>
|
||||
)}
|
||||
{!isCorrectNetwork && (
|
||||
<div>
|
||||
Please connect to <strong>Main</strong> network. You are on{' '}
|
||||
<strong>{networkName}</strong> right now.
|
||||
</div>
|
||||
)}
|
||||
{error && <div>{error.message}</div>}
|
||||
</div>
|
||||
|
||||
if (transactionHash)
|
||||
<div className={styles.success}>
|
||||
You are awesome, thanks!
|
||||
<br />
|
||||
<a href={`https://etherscan.io/tx/${transactionHash}`}>
|
||||
See your transaction on etherscan.io.
|
||||
</a>
|
||||
</div>
|
||||
|
||||
return null
|
||||
</Fragment>
|
||||
)
|
||||
}
|
||||
|
||||
Alerts.propTypes = {
|
||||
accounts: PropTypes.array,
|
||||
networkId: PropTypes.string,
|
||||
hasCorrectNetwork: PropTypes.bool,
|
||||
hasAccount: PropTypes.bool,
|
||||
networkName: PropTypes.string,
|
||||
error: PropTypes.object,
|
||||
transactionHash: PropTypes.string
|
||||
transactionHash: PropTypes.string,
|
||||
web3Connected: PropTypes.bool
|
||||
}
|
||||
|
||||
export default Alerts
|
||||
|
||||
@ -5,20 +5,20 @@ import styles from './InputGroup.module.scss'
|
||||
|
||||
export default class InputGroup extends PureComponent {
|
||||
static propTypes = {
|
||||
networkId: PropTypes.string,
|
||||
selectedAccount: PropTypes.string,
|
||||
hasCorrectNetwork: PropTypes.bool,
|
||||
hasAccount: PropTypes.bool,
|
||||
amount: PropTypes.number,
|
||||
onAmountChange: PropTypes.func,
|
||||
handleWeb3Button: PropTypes.func
|
||||
handleButton: PropTypes.func
|
||||
}
|
||||
|
||||
render() {
|
||||
const {
|
||||
networkId,
|
||||
selectedAccount,
|
||||
hasCorrectNetwork,
|
||||
hasAccount,
|
||||
amount,
|
||||
onAmountChange,
|
||||
handleWeb3Button
|
||||
handleButton
|
||||
} = this.props
|
||||
|
||||
return (
|
||||
@ -26,7 +26,7 @@ export default class InputGroup extends PureComponent {
|
||||
<div className={styles.input}>
|
||||
<Input
|
||||
type="number"
|
||||
disabled={!(networkId === '1') || !selectedAccount}
|
||||
disabled={!hasCorrectNetwork || !hasAccount}
|
||||
value={amount}
|
||||
onChange={onAmountChange}
|
||||
min="0"
|
||||
@ -38,8 +38,8 @@ export default class InputGroup extends PureComponent {
|
||||
</div>
|
||||
<button
|
||||
className="btn btn-primary"
|
||||
onClick={handleWeb3Button}
|
||||
disabled={!(networkId === '1') || !selectedAccount}
|
||||
onClick={handleButton}
|
||||
disabled={!hasCorrectNetwork || !hasAccount}
|
||||
>
|
||||
Make it rain
|
||||
</button>
|
||||
|
||||
@ -4,6 +4,7 @@ import Web3 from 'web3'
|
||||
import InputGroup from './InputGroup'
|
||||
import Alerts from './Alerts'
|
||||
import styles from './index.module.scss'
|
||||
import { getNetworkName } from './utils'
|
||||
|
||||
const ONE_SECOND = 1000
|
||||
const ONE_MINUTE = ONE_SECOND * 60
|
||||
@ -11,13 +12,11 @@ const ONE_MINUTE = ONE_SECOND * 60
|
||||
export default class Web3Donation extends PureComponent {
|
||||
state = {
|
||||
web3Connected: false,
|
||||
networkError: null,
|
||||
networkId: null,
|
||||
networkName: null,
|
||||
accounts: [],
|
||||
selectedAccount: null,
|
||||
amount: 0.01,
|
||||
receipt: null,
|
||||
transactionHash: null,
|
||||
loading: false,
|
||||
error: null
|
||||
@ -77,19 +76,7 @@ export default class Web3Donation extends PureComponent {
|
||||
resetAllTheThings() {
|
||||
clearInterval(this.interval)
|
||||
clearInterval(this.networkInterval)
|
||||
this.setState({
|
||||
web3Connected: false,
|
||||
networkError: null,
|
||||
networkId: null,
|
||||
networkName: null,
|
||||
accounts: [],
|
||||
selectedAccount: null,
|
||||
amount: 0.01,
|
||||
receipt: null,
|
||||
transactionHash: null,
|
||||
loading: false,
|
||||
error: null
|
||||
})
|
||||
this.setState({ web3Connected: false })
|
||||
}
|
||||
|
||||
initAccountsPoll() {
|
||||
@ -111,35 +98,16 @@ export default class Web3Donation extends PureComponent {
|
||||
web3.eth &&
|
||||
//web3.eth.net.getId((err, netId) => {
|
||||
web3.version.getNetwork((err, netId) => {
|
||||
if (err) this.setState({ networkError: err })
|
||||
if (err) this.setState({ error: err })
|
||||
|
||||
if (netId != this.state.networkId) {
|
||||
let networkName
|
||||
|
||||
switch (netId) {
|
||||
case '1':
|
||||
networkName = 'Main'
|
||||
break
|
||||
case '2':
|
||||
networkName = 'Morden'
|
||||
break
|
||||
case '3':
|
||||
networkName = 'Ropsten'
|
||||
break
|
||||
case '4':
|
||||
networkName = 'Rinkeby'
|
||||
break
|
||||
case '42':
|
||||
networkName = 'Kovan'
|
||||
break
|
||||
default:
|
||||
networkName = 'Private'
|
||||
}
|
||||
|
||||
this.setState({
|
||||
networkError: null,
|
||||
networkId: netId,
|
||||
networkName: networkName
|
||||
error: null,
|
||||
networkId: netId
|
||||
})
|
||||
|
||||
getNetworkName(netId).then(networkName => {
|
||||
this.setState({ networkName: networkName })
|
||||
})
|
||||
}
|
||||
})
|
||||
@ -151,18 +119,17 @@ export default class Web3Donation extends PureComponent {
|
||||
web3 &&
|
||||
web3.eth &&
|
||||
web3.eth.getAccounts((err, accounts) => {
|
||||
if (err) {
|
||||
this.setState({ accountsError: err })
|
||||
}
|
||||
if (err) this.setState({ error: err })
|
||||
|
||||
this.setState({
|
||||
error: null,
|
||||
accounts,
|
||||
selectedAccount: accounts[0]
|
||||
})
|
||||
})
|
||||
}
|
||||
|
||||
handleWeb3Button = () => {
|
||||
handleButton = () => {
|
||||
const { web3 } = this
|
||||
|
||||
this.setState({ loading: true })
|
||||
@ -199,6 +166,9 @@ export default class Web3Donation extends PureComponent {
|
||||
}
|
||||
|
||||
render() {
|
||||
const hasCorrectNetwork = this.state.networkId === '1'
|
||||
const hasAccount = this.state.accounts.length !== 0
|
||||
|
||||
return (
|
||||
<div className={styles.web3}>
|
||||
<header>
|
||||
@ -206,35 +176,30 @@ export default class Web3Donation extends PureComponent {
|
||||
<p>Send Ether with MetaMask, Brave, or Mist.</p>
|
||||
</header>
|
||||
|
||||
{this.state.web3Connected ? (
|
||||
{this.state.web3Connected && (
|
||||
<div className={styles.web3Row}>
|
||||
{this.state.loading ? (
|
||||
'Hang on...'
|
||||
) : (
|
||||
<InputGroup
|
||||
networkId={this.state.networkId}
|
||||
selectedAccount={this.state.selectedAccount}
|
||||
hasCorrectNetwork={hasCorrectNetwork}
|
||||
hasAccount={hasAccount}
|
||||
amount={this.state.amount}
|
||||
onAmountChange={this.onAmountChange}
|
||||
handleWeb3Button={this.handleWeb3Button}
|
||||
handleButton={this.handleButton}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Alerts
|
||||
accounts={this.state.accounts}
|
||||
networkId={this.state.networkId}
|
||||
networkName={this.state.networkName}
|
||||
error={this.state.error}
|
||||
transactionHash={this.state.transactionHash}
|
||||
/>
|
||||
</div>
|
||||
) : (
|
||||
<small>
|
||||
No Web3 detected. Install <a href="https://metamask.io">MetaMask</a>
|
||||
, <a href="https://brave.com">Brave</a>, or{' '}
|
||||
<a href="https://github.com/ethereum/mist">Mist</a>.
|
||||
</small>
|
||||
)}
|
||||
|
||||
<Alerts
|
||||
hasCorrectNetwork={hasCorrectNetwork}
|
||||
hasAccount={hasAccount}
|
||||
networkName={this.state.networkName}
|
||||
error={this.state.error}
|
||||
transactionHash={this.state.transactionHash}
|
||||
web3Connected={this.state.web3Connected}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
25
src/components/Web3Donation/utils.js
Normal file
25
src/components/Web3Donation/utils.js
Normal file
@ -0,0 +1,25 @@
|
||||
export const getNetworkName = async netId => {
|
||||
let networkName
|
||||
|
||||
switch (netId) {
|
||||
case '1':
|
||||
networkName = 'Main'
|
||||
break
|
||||
case '2':
|
||||
networkName = 'Morden'
|
||||
break
|
||||
case '3':
|
||||
networkName = 'Ropsten'
|
||||
break
|
||||
case '4':
|
||||
networkName = 'Rinkeby'
|
||||
break
|
||||
case '42':
|
||||
networkName = 'Kovan'
|
||||
break
|
||||
default:
|
||||
networkName = 'Private'
|
||||
}
|
||||
|
||||
return networkName
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user