display account

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).
 
-<img width="1171" alt="screen shot 2018-10-14 at 20 26 13" src="https://user-images.githubusercontent.com/90316/46920497-7319bc80-cfef-11e8-9e50-f0a15d50215d.png">
+<img width="1186" alt="screen shot 2018-10-14 at 21 47 47" src="https://user-images.githubusercontent.com/90316/46921378-d0673b00-cffa-11e8-9d55-e954e9a56433.png" />
 
 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)

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",

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 }) => (
+  <div className={styles.account} title={account}>
+    <Blockies seed={account} scale={2} size={8} className={styles.identicon} />
+    {account}
+  </div>
+)
+
+Account.propTypes = {
+  account: PropTypes.string.isRequired
+}
+
+export default Account

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;
+}

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 {

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 {

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 (
       <div className={styles.web3}>
@@ -176,15 +188,17 @@ export default class Web3Donation extends PureComponent {
           <p>Send Ether with MetaMask, Brave, or Mist.</p>
         </header>
 
-        {this.state.web3Connected && (
+        {selectedAccount && <Account account={selectedAccount} />}
+
+        {web3Connected && (
           <div className={styles.web3Row}>
-            {this.state.loading ? (
+            {loading ? (
               'Hang on...'
             ) : (
               <InputGroup
                 hasCorrectNetwork={hasCorrectNetwork}
                 hasAccount={hasAccount}
-                amount={this.state.amount}
+                amount={amount}
                 onAmountChange={this.onAmountChange}
                 handleButton={this.handleButton}
               />
@@ -195,10 +209,10 @@ export default class Web3Donation extends PureComponent {
         <Alerts
           hasCorrectNetwork={hasCorrectNetwork}
           hasAccount={hasAccount}
-          networkName={this.state.networkName}
-          error={this.state.error}
-          transactionHash={this.state.transactionHash}
-          web3Connected={this.state.web3Connected}
+          networkName={networkName}
+          error={error}
+          transactionHash={transactionHash}
+          web3Connected={web3Connected}
         />
       </div>
     )

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;