Merge pull request #71 from kremalicious/feature/eth-conversion

show conversion to usd/eur

README.md

@@ -10,7 +10,6 @@
 <p align="center">
   <a href="https://travis-ci.com/kremalicious/blog"><img src="https://travis-ci.com/kremalicious/blog.svg?branch=master" /></a>
   <a href="https://codeclimate.com/github/kremalicious/blog/maintainability"><img src="https://api.codeclimate.com/v1/badges/4e86c791349cd12368cd/maintainability" /></a>
-  <a href="https://www.codacy.com/app/kremalicious/blog?utm_source=github.com&amp;utm_medium=referral&amp;utm_content=kremalicious/blog&amp;utm_campaign=Badge_Grade"><img src="https://api.codacy.com/project/badge/Grade/63a594f4e2324b22986068ef2400ed87"/></a>
   <a href="https://greenkeeper.io/"><img src="https://badges.greenkeeper.io/kremalicious/blog.svg" /></a>
 </p>
 
@@ -48,7 +47,7 @@ This way, EXIF data is only extracted at build time and can be simply queried wi
 
 In the end looks like this, including location display with [pigeon-maps](https://github.com/mariusandra/pigeon-maps):
 
-<img width="878" alt="screen shot 2018-10-09 at 23 59 39" src="https://user-images.githubusercontent.com/90316/46701262-6ed05680-cc1f-11e8-81c4-f4ea18b89bc0.png">
+<img width="1098" alt="screen shot 2018-10-14 at 20 27 39" src="https://user-images.githubusercontent.com/90316/46920507-9d6b7a00-cfef-11e8-84c8-a1997f471cae.png">
 
 If you want to know how this works, have a look at the respective component under
 
@@ -61,11 +60,16 @@ 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="1091" alt="screen shot 2018-10-13 at 18 40 56" src="https://user-images.githubusercontent.com/90316/46907751-907b5780-cf17-11e8-902d-6c520b388292.png" />
+<img width="1082" alt="screen shot 2018-10-14 at 22 03 57" src="https://user-images.githubusercontent.com/90316/46921544-1a512080-cffd-11e8-919f-d3e86dbd5cc5.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)
+- [`src/components/Web3Donation/utils.jsx`](src/components/Web3Donation/utils.jsx)
 - [`src/components/atoms/Qr.jsx`](src/components/atoms/Qr.jsx)
 
 ### 🕸 Related Posts

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,19 @@
+@import 'variables';
+
+.account {
+    font-size: $font-size-mini;
+    color: $brand-grey-light;
+    max-width: 8rem;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.identicon {
+    border-radius: 50%;
+    overflow: hidden;
+    display: inline-block;
+    vertical-align: middle;
+    margin-right: $spacer / 8;
+    margin-left: $spacer;
+}

src/components/Web3Donation/Alerts.jsx

@@ -8,12 +8,12 @@ const Message = ({ message, ...props }) => (
 
 export default class Alerts extends PureComponent {
   static propTypes = {
-    hasCorrectNetwork: PropTypes.bool,
-    hasAccount: PropTypes.bool,
+    hasCorrectNetwork: PropTypes.bool.isRequired,
+    hasAccount: PropTypes.bool.isRequired,
     networkName: PropTypes.string,
     error: PropTypes.object,
     transactionHash: PropTypes.string,
-    web3Connected: PropTypes.bool
+    web3Connected: PropTypes.bool.isRequired
   }
 
   alertMessages = (networkName, transactionHash) => ({

src/components/Web3Donation/Conversion.jsx

@@ -0,0 +1,45 @@
+import React, { PureComponent } from 'react'
+import PropTypes from 'prop-types'
+import { getFiat } from './utils'
+import styles from './Conversion.module.scss'
+
+export default class Conversion extends PureComponent {
+  static propTypes = {
+    amount: PropTypes.string.isRequired
+  }
+
+  state = {
+    euro: '0.00',
+    dollar: '0.00'
+  }
+
+  componentDidMount() {
+    this.getFiatResponse()
+  }
+
+  componentDidUpdate(prevProps) {
+    const { amount } = this.state
+    if (amount !== prevProps.amount) {
+      this.getFiatResponse()
+    }
+  }
+
+  async getFiatResponse() {
+    const { dollar, euro } = await getFiat(this.props.amount)
+    this.setState({
+      euro: euro,
+      dollar: dollar
+    })
+  }
+
+  render() {
+    return (
+      <div className={styles.conversion}>
+        <span>
+          {this.state.dollar !== '0.00' && `= $ ${this.state.dollar}`}
+        </span>
+        <span>{this.state.euro !== '0.00' && `= € ${this.state.euro}`}</span>
+      </div>
+    )
+  }
+}

src/components/Web3Donation/Conversion.module.scss

@@ -0,0 +1,11 @@
+@import 'variables';
+
+.conversion {
+    font-size: $font-size-mini;
+    color: $brand-grey-light;
+    text-align: center;
+
+    span {
+        margin-left: $spacer / 2;
+    }
+}

src/components/Web3Donation/InputGroup.jsx

@@ -1,15 +1,18 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import Input from '../atoms/Input'
+import Account from './Account'
+import Conversion from './Conversion'
 import styles from './InputGroup.module.scss'
 
 export default class InputGroup extends PureComponent {
   static propTypes = {
-    hasCorrectNetwork: PropTypes.bool,
-    hasAccount: PropTypes.bool,
-    amount: PropTypes.number,
-    onAmountChange: PropTypes.func,
-    handleButton: PropTypes.func
+    hasCorrectNetwork: PropTypes.bool.isRequired,
+    hasAccount: PropTypes.bool.isRequired,
+    amount: PropTypes.string.isRequired,
+    onAmountChange: PropTypes.func.isRequired,
+    handleButton: PropTypes.func.isRequired,
+    selectedAccount: PropTypes.string
   }
 
   render() {
@@ -18,7 +21,8 @@ export default class InputGroup extends PureComponent {
       hasAccount,
       amount,
       onAmountChange,
-      handleButton
+      handleButton,
+      selectedAccount
     } = this.props
 
     return (
@@ -43,6 +47,10 @@ export default class InputGroup extends PureComponent {
         >
           Make it rain
         </button>
+        <div className={styles.infoline}>
+          <Conversion amount={amount} />
+          {selectedAccount && <Account account={selectedAccount} />}
+        </div>
       </div>
     )
   }

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 {
@@ -72,3 +72,11 @@
     display: flex;
     align-items: center;
 }
+
+.infoline {
+    flex-basis: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    margin-top: $spacer / 4;
+}

src/components/Web3Donation/index.jsx

@@ -16,7 +16,7 @@ export default class Web3Donation extends PureComponent {
     networkName: null,
     accounts: [],
     selectedAccount: null,
-    amount: 0.01,
+    amount: '0.01',
     transactionHash: null,
     loading: false,
     error: null
@@ -44,7 +44,7 @@ export default class Web3Donation extends PureComponent {
   //     await ethereum.enable()
   //   } catch (error) {
   //     // User denied account access...
-  //     console.log(error)
+  //     Logger.error(error)
   //   }
   // }
 
@@ -107,7 +107,7 @@ export default class Web3Donation extends PureComponent {
           })
 
           getNetworkName(netId).then(networkName => {
-            this.setState({ networkName: networkName })
+            this.setState({ networkName })
           })
         }
       })
@@ -166,8 +166,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 +187,16 @@ export default class Web3Donation extends PureComponent {
           <p>Send Ether with MetaMask, Brave, or Mist.</p>
         </header>
 
-        {this.state.web3Connected && (
+        {web3Connected && (
           <div className={styles.web3Row}>
-            {this.state.loading ? (
+            {loading ? (
               'Hang on...'
             ) : (
               <InputGroup
                 hasCorrectNetwork={hasCorrectNetwork}
                 hasAccount={hasAccount}
-                amount={this.state.amount}
+                selectedAccount={selectedAccount}
+                amount={amount}
                 onAmountChange={this.onAmountChange}
                 handleButton={this.handleButton}
               />
@@ -195,10 +207,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/Web3Donation/utils.js

@@ -23,3 +23,41 @@ export const getNetworkName = async netId => {
 
   return networkName
 }
+
+export const getFiat = async amount => {
+  const url = 'https://api.coinmarketcap.com/v1/ticker/ethereum/?convert=EUR'
+
+  try {
+    const response = await fetch(url)
+    if (!response.ok) {
+      throw Error(response.statusText)
+    }
+    const data = await response.json()
+    const { price_usd, price_eur } = data[0]
+    const dollar = (amount * price_usd).toFixed(2)
+    const euro = (amount * price_eur).toFixed(2)
+
+    return { dollar, euro }
+  } catch (error) {
+    Logger.error(error)
+  }
+}
+
+export class Logger {
+  static dispatch(verb, ...args) {
+    // eslint-disable-next-line no-console
+    console[verb](...args)
+  }
+
+  static log(...args) {
+    Logger.dispatch('log', ...args)
+  }
+
+  static debug(...args) {
+    Logger.dispatch('debug', ...args)
+  }
+
+  static error(...args) {
+    Logger.dispatch('error', ...args)
+  }
+}