diff --git a/package.json b/package.json
index 14542f31..db200d44 100644
--- a/package.json
+++ b/package.json
@@ -73,7 +73,7 @@
"react-time": "^4.3.0",
"react-transition-group": "^2.5.0",
"slugify": "^1.3.1",
- "web3": "^0.20.7"
+ "web3": "^1.0.0-beta.36"
},
"devDependencies": {
"@babel/node": "^7.0.0",
diff --git a/src/components/Web3Donation/Alerts.jsx b/src/components/Web3Donation/Alerts.jsx
index 24009f9e..da216a57 100644
--- a/src/components/Web3Donation/Alerts.jsx
+++ b/src/components/Web3Donation/Alerts.jsx
@@ -13,6 +13,8 @@ export default class Alerts extends PureComponent {
networkName: PropTypes.string,
error: PropTypes.object,
transactionHash: PropTypes.string,
+ confirmationNumber: PropTypes.number,
+ receipt: PropTypes.object,
web3Connected: PropTypes.bool.isRequired
}
@@ -22,10 +24,7 @@ export default class Alerts extends PureComponent {
noCorrectNetwork: `Please connect to Main network. You are on ${networkName} right now.`,
noWeb3:
'No Web3 detected. Install MetaMask, Brave, or Mist.',
- success: `You are awesome, thanks!
-
- See your transaction on etherscan.io.
- `
+ transaction: `See your transaction on etherscan.io.`
})
render() {
@@ -56,8 +55,7 @@ export default class Alerts extends PureComponent {
{transactionHash && (
)}
diff --git a/src/components/Web3Donation/index.jsx b/src/components/Web3Donation/index.jsx
index 63c1e484..445f3602 100644
--- a/src/components/Web3Donation/index.jsx
+++ b/src/components/Web3Donation/index.jsx
@@ -18,8 +18,10 @@ export default class Web3Donation extends PureComponent {
selectedAccount: null,
amount: '0.01',
transactionHash: null,
+ receipt: null,
loading: false,
- error: null
+ error: null,
+ message: 'Hang on...'
}
static propTypes = {
@@ -57,7 +59,6 @@ export default class Web3Donation extends PureComponent {
}
// Legacy dapp browsers...
else if (window.web3) {
- // this.web3 = new Web3(Web3.givenProvider || 'ws://localhost:8546')
this.web3 = new Web3(window.web3.currentProvider)
this.setState({ web3Connected: true })
@@ -99,11 +100,10 @@ export default class Web3Donation extends PureComponent {
web3 &&
web3.eth &&
- //web3.eth.net.getId((err, netId) => {
- web3.version.getNetwork((err, netId) => {
+ web3.eth.net.getId((err, netId) => {
if (err) this.setState({ error: err })
- if (netId != this.state.networkId) {
+ if (netId !== this.state.networkId) {
this.setState({
error: null,
networkId: netId
@@ -135,33 +135,27 @@ export default class Web3Donation extends PureComponent {
handleButton = () => {
const { web3 } = this
- this.setState({ loading: true })
+ this.setState({
+ loading: true,
+ message: 'Waiting for your confirmation...'
+ })
- // web3.eth
- // .sendTransaction({
- // from: this.state.selectedAccount,
- // to: this.props.address,
- // value: '10000000000000000'
- // })
- // .then(receipt => {
- // this.setState({ receipt, loading: false })
- // })
- // .catch(error => {
- // this.setState({ error, loading: false })
- // })
-
- web3.eth.sendTransaction(
- {
+ web3.eth
+ .sendTransaction({
from: this.state.selectedAccount,
to: this.props.address,
value: this.state.amount * 1e18 // ETH -> Wei
- },
- (error, transactionHash) => {
- if (error) this.setState({ error, loading: false })
- if (!transactionHash) this.setState({ loading: true })
- this.setState({ transactionHash, loading: false })
- }
- )
+ })
+ .once('transactionHash', transactionHash => {
+ this.setState({
+ transactionHash,
+ message: 'Waiting for network confirmation, hang on...'
+ })
+ })
+ .on('error', error => this.setState({ error, loading: false }))
+ .then(() => {
+ this.setState({ message: 'Confirmed. You are awesome, thanks!' })
+ })
}
onAmountChange = ({ target }) => {
@@ -178,10 +172,12 @@ export default class Web3Donation extends PureComponent {
amount,
networkName,
error,
- transactionHash
+ transactionHash,
+ confirmationNumber,
+ message
} = this.state
- const hasCorrectNetwork = networkId === '1'
+ const hasCorrectNetwork = networkId === 42
const hasAccount = accounts.length !== 0
return (
@@ -194,7 +190,7 @@ export default class Web3Donation extends PureComponent {
{web3Connected && (
{loading ? (
- 'Hang on...'
+ message
) : (
)
diff --git a/src/components/Web3Donation/index.module.scss b/src/components/Web3Donation/index.module.scss
index 5796a2e1..194c5c59 100644
--- a/src/components/Web3Donation/index.module.scss
+++ b/src/components/Web3Donation/index.module.scss
@@ -19,4 +19,7 @@
.web3Row {
min-height: 58px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
diff --git a/src/components/Web3Donation/utils.js b/src/components/Web3Donation/utils.js
index 3e870dc1..70430dec 100644
--- a/src/components/Web3Donation/utils.js
+++ b/src/components/Web3Donation/utils.js
@@ -2,19 +2,19 @@ export const getNetworkName = async netId => {
let networkName
switch (netId) {
- case '1':
+ case 1:
networkName = 'Main'
break
- case '2':
+ case 2:
networkName = 'Morden'
break
- case '3':
+ case 3:
networkName = 'Ropsten'
break
- case '4':
+ case 4:
networkName = 'Rinkeby'
break
- case '42':
+ case 42:
networkName = 'Kovan'
break
default: