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). -screen shot 2018-10-14 at 20 26 13 +screen shot 2018-10-14 at 21 47 47 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;