diff --git a/README.md b/README.md
index 71a3596a..aaab3d3e 100644
--- a/README.md
+++ b/README.md
@@ -61,11 +61,12 @@ Lets visitors say thanks with Bitcoin or Ether. Uses [web3.js](https://github.co
As a fallback, QR codes are generated with [react-qr-svg](https://github.com/no23reason/react-qr-svg) from the addresses defined in [`config.js`](config.js).
-
+
If you want to know how this works, have a look at the respective components under
- [`src/components/Web3Donation/index.jsx`](src/components/Web3Donation/index.jsx)
+- [`src/components/Web3Donation/Account.jsx`](src/components/Web3Donation/Account.jsx)
- [`src/components/Web3Donation/InputGroup.jsx`](src/components/Web3Donation/InputGroup.jsx)
- [`src/components/Web3Donation/Conversion.jsx`](src/components/Web3Donation/Conversion.jsx)
- [`src/components/Web3Donation/Alerts.jsx`](src/components/Web3Donation/Alerts.jsx)
diff --git a/package.json b/package.json
index 3dd366d1..ffd140a7 100644
--- a/package.json
+++ b/package.json
@@ -63,6 +63,7 @@
"pigeon-maps": "^0.11.2",
"pigeon-marker": "^0.3.4",
"react": "^16.5.2",
+ "react-blockies": "^1.4.0",
"react-clipboard.js": "^2.0.1",
"react-dom": "^16.5.2",
"react-helmet": "^5.2.0",
diff --git a/src/components/Web3Donation/Account.jsx b/src/components/Web3Donation/Account.jsx
new file mode 100644
index 00000000..8f044448
--- /dev/null
+++ b/src/components/Web3Donation/Account.jsx
@@ -0,0 +1,17 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+import Blockies from 'react-blockies'
+import styles from './Account.module.scss'
+
+const Account = ({ account }) => (
+
+
+ {account}
+
+)
+
+Account.propTypes = {
+ account: PropTypes.string.isRequired
+}
+
+export default Account
diff --git a/src/components/Web3Donation/Account.module.scss b/src/components/Web3Donation/Account.module.scss
new file mode 100644
index 00000000..d06c7b35
--- /dev/null
+++ b/src/components/Web3Donation/Account.module.scss
@@ -0,0 +1,23 @@
+@import 'variables';
+
+.account {
+ font-size: $font-size-mini;
+ color: $brand-grey-light;
+ max-width: 8rem;
+ margin: auto;
+ margin-bottom: $spacer / 2;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ border: 1px solid $brand-grey-dimmed;
+ padding: $spacer / 10 $spacer / 2 $spacer / 6 $spacer / 2;
+ border-radius: $border-radius;
+}
+
+.identicon {
+ border-radius: 50%;
+ overflow: hidden;
+ display: inline-block;
+ vertical-align: middle;
+ margin-right: $spacer / 4;
+}
diff --git a/src/components/Web3Donation/Conversion.module.scss b/src/components/Web3Donation/Conversion.module.scss
index 9d3f8c2e..304732ad 100644
--- a/src/components/Web3Donation/Conversion.module.scss
+++ b/src/components/Web3Donation/Conversion.module.scss
@@ -4,12 +4,10 @@
font-size: $font-size-mini;
color: $brand-grey-light;
text-align: center;
+ margin-top: $spacer / 4;
@media (min-width: $screen-sm) {
- position: absolute;
- bottom: -($spacer / 1.5);
- right: 51%;
- text-align: right;
+ flex-basis: 100%;
}
span {
diff --git a/src/components/Web3Donation/InputGroup.module.scss b/src/components/Web3Donation/InputGroup.module.scss
index e273de90..8f74040d 100644
--- a/src/components/Web3Donation/InputGroup.module.scss
+++ b/src/components/Web3Donation/InputGroup.module.scss
@@ -2,13 +2,13 @@
@import 'mixins';
.inputGroup {
- max-width: 17rem;
+ max-width: 18rem;
margin: auto;
position: relative;
@media (min-width: $screen-sm) {
display: flex;
- max-width: 18rem;
+ flex-wrap: wrap;
}
button {
diff --git a/src/components/Web3Donation/index.jsx b/src/components/Web3Donation/index.jsx
index 24dd90c0..5f028336 100644
--- a/src/components/Web3Donation/index.jsx
+++ b/src/components/Web3Donation/index.jsx
@@ -1,6 +1,7 @@
import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import Web3 from 'web3'
+import Account from './Account'
import InputGroup from './InputGroup'
import Alerts from './Alerts'
import styles from './index.module.scss'
@@ -107,7 +108,7 @@ export default class Web3Donation extends PureComponent {
})
getNetworkName(netId).then(networkName => {
- this.setState({ networkName: networkName })
+ this.setState({ networkName })
})
}
})
@@ -166,8 +167,19 @@ export default class Web3Donation extends PureComponent {
}
render() {
- const hasCorrectNetwork = this.state.networkId === '1'
- const hasAccount = this.state.accounts.length !== 0
+ const {
+ networkId,
+ accounts,
+ selectedAccount,
+ web3Connected,
+ loading,
+ amount,
+ networkName,
+ error,
+ transactionHash
+ } = this.state
+ const hasCorrectNetwork = networkId === '1'
+ const hasAccount = accounts.length !== 0
return (
@@ -176,15 +188,17 @@ export default class Web3Donation extends PureComponent {
Send Ether with MetaMask, Brave, or Mist.
- {this.state.web3Connected && (
+ {selectedAccount &&
}
+
+ {web3Connected && (
- {this.state.loading ? (
+ {loading ? (
'Hang on...'
) : (
@@ -195,10 +209,10 @@ export default class Web3Donation extends PureComponent {
)
diff --git a/src/components/molecules/ModalThanks.module.scss b/src/components/molecules/ModalThanks.module.scss
index 0c10f1e1..a04f098c 100644
--- a/src/components/molecules/ModalThanks.module.scss
+++ b/src/components/molecules/ModalThanks.module.scss
@@ -18,7 +18,7 @@
header {
width: 100%;
text-align: center;
- margin-bottom: $spacer;
+ margin-bottom: $spacer / 2;
h4 {
font-size: $font-size-large;