From acbdd9e8120b8a9c24291bbef9722ee37a1123ab Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sun, 14 Oct 2018 20:28:35 +0200 Subject: [PATCH] show conversion to usd/eur --- README.md | 8 +++- src/components/Web3Donation/Alerts.jsx | 6 +-- src/components/Web3Donation/Conversion.jsx | 45 +++++++++++++++++++ .../Web3Donation/Conversion.module.scss | 18 ++++++++ src/components/Web3Donation/InputGroup.jsx | 12 ++--- src/components/Web3Donation/index.jsx | 4 +- src/components/Web3Donation/utils.js | 38 ++++++++++++++++ 7 files changed, 119 insertions(+), 12 deletions(-) create mode 100644 src/components/Web3Donation/Conversion.jsx create mode 100644 src/components/Web3Donation/Conversion.module.scss diff --git a/README.md b/README.md index 7b3b1d4b..71a3596a 100644 --- a/README.md +++ b/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): -screen shot 2018-10-09 at 23 59 39 +screen shot 2018-10-14 at 20 27 39 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). -screen shot 2018-10-13 at 18 40 56 +screen shot 2018-10-14 at 20 26 13 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 diff --git a/src/components/Web3Donation/Alerts.jsx b/src/components/Web3Donation/Alerts.jsx index edcb4308..24009f9e 100644 --- a/src/components/Web3Donation/Alerts.jsx +++ b/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) => ({ diff --git a/src/components/Web3Donation/Conversion.jsx b/src/components/Web3Donation/Conversion.jsx new file mode 100644 index 00000000..15ab522f --- /dev/null +++ b/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 ( +
+ + {this.state.dollar !== '0.00' && `= $ ${this.state.dollar}`} + + {this.state.euro !== '0.00' && `= € ${this.state.euro}`} +
+ ) + } +} diff --git a/src/components/Web3Donation/Conversion.module.scss b/src/components/Web3Donation/Conversion.module.scss new file mode 100644 index 00000000..9d3f8c2e --- /dev/null +++ b/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; + } +} diff --git a/src/components/Web3Donation/InputGroup.jsx b/src/components/Web3Donation/InputGroup.jsx index 397cba0c..e05923f5 100644 --- a/src/components/Web3Donation/InputGroup.jsx +++ b/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 + ) } diff --git a/src/components/Web3Donation/index.jsx b/src/components/Web3Donation/index.jsx index 347d7bc4..24dd90c0 100644 --- a/src/components/Web3Donation/index.jsx +++ b/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) // } // } diff --git a/src/components/Web3Donation/utils.js b/src/components/Web3Donation/utils.js index 92ccdd51..3e870dc1 100644 --- a/src/components/Web3Donation/utils.js +++ b/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) + } +}