show conversion to usd/eur

README.md

@@ -48,7 +48,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 +61,15 @@ 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="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">
 
 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/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

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,18 @@
+@import 'variables';
+
+.conversion {
+    font-size: $font-size-mini;
+    color: $brand-grey-light;
+    text-align: center;
+
+    @media (min-width: $screen-sm) {
+        position: absolute;
+        bottom: -($spacer / 1.5);
+        right: 51%;
+        text-align: right;
+    }
+
+    span {
+        margin-left: $spacer / 2;
+    }
+}

src/components/Web3Donation/InputGroup.jsx

@@ -1,15 +1,16 @@
 import React, { PureComponent } from 'react'
 import PropTypes from 'prop-types'
 import Input from '../atoms/Input'
+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
   }
 
   render() {
@@ -43,6 +44,7 @@ export default class InputGroup extends PureComponent {
         >
           Make it rain
         </button>
+        <Conversion amount={amount} />
       </div>
     )
   }

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)
   //   }
   // }
 

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