From acbdd9e8120b8a9c24291bbef9722ee37a1123ab Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sun, 14 Oct 2018 20:28:35 +0200 Subject: [PATCH 1/4] 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) + } +} From 24d1b96bbbc951e50424d7aaaa8ed0a33ba06559 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sun, 14 Oct 2018 21:48:38 +0200 Subject: [PATCH 2/4] display account --- README.md | 3 +- package.json | 1 + src/components/Web3Donation/Account.jsx | 17 ++++++++++ .../Web3Donation/Account.module.scss | 23 +++++++++++++ .../Web3Donation/Conversion.module.scss | 6 ++-- .../Web3Donation/InputGroup.module.scss | 4 +-- src/components/Web3Donation/index.jsx | 34 +++++++++++++------ .../molecules/ModalThanks.module.scss | 2 +- 8 files changed, 72 insertions(+), 18 deletions(-) create mode 100644 src/components/Web3Donation/Account.jsx create mode 100644 src/components/Web3Donation/Account.module.scss 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; From 992f92f7cf53f840d43bdf27d39bc94b5733b711 Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sun, 14 Oct 2018 21:52:47 +0200 Subject: [PATCH 3/4] remove codacy --- README.md | 1 - 1 file changed, 1 deletion(-) diff --git a/README.md b/README.md index aaab3d3e..499219bd 100644 --- a/README.md +++ b/README.md @@ -10,7 +10,6 @@

-

From a9f6d18c46e380fd2d586e9a73cebe671e41d40f Mon Sep 17 00:00:00 2001 From: Matthias Kretschmann Date: Sun, 14 Oct 2018 22:04:54 +0200 Subject: [PATCH 4/4] style tweaks --- README.md | 2 +- src/components/Web3Donation/Account.module.scss | 8 ++------ src/components/Web3Donation/Conversion.module.scss | 5 ----- src/components/Web3Donation/InputGroup.jsx | 12 +++++++++--- src/components/Web3Donation/InputGroup.module.scss | 8 ++++++++ src/components/Web3Donation/index.jsx | 4 +--- src/components/molecules/ModalThanks.module.scss | 2 +- 7 files changed, 22 insertions(+), 19 deletions(-) diff --git a/README.md b/README.md index 499219bd..4966021d 100644 --- a/README.md +++ b/README.md @@ -60,7 +60,7 @@ 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 21 47 47 +screen shot 2018-10-14 at 22 03 57 If you want to know how this works, have a look at the respective components under diff --git a/src/components/Web3Donation/Account.module.scss b/src/components/Web3Donation/Account.module.scss index d06c7b35..d0ebeeb3 100644 --- a/src/components/Web3Donation/Account.module.scss +++ b/src/components/Web3Donation/Account.module.scss @@ -4,14 +4,9 @@ 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 { @@ -19,5 +14,6 @@ overflow: hidden; display: inline-block; vertical-align: middle; - margin-right: $spacer / 4; + margin-right: $spacer / 8; + margin-left: $spacer; } diff --git a/src/components/Web3Donation/Conversion.module.scss b/src/components/Web3Donation/Conversion.module.scss index 304732ad..3caec195 100644 --- a/src/components/Web3Donation/Conversion.module.scss +++ b/src/components/Web3Donation/Conversion.module.scss @@ -4,11 +4,6 @@ font-size: $font-size-mini; color: $brand-grey-light; text-align: center; - margin-top: $spacer / 4; - - @media (min-width: $screen-sm) { - flex-basis: 100%; - } span { margin-left: $spacer / 2; diff --git a/src/components/Web3Donation/InputGroup.jsx b/src/components/Web3Donation/InputGroup.jsx index e05923f5..0e2edf8a 100644 --- a/src/components/Web3Donation/InputGroup.jsx +++ b/src/components/Web3Donation/InputGroup.jsx @@ -1,6 +1,7 @@ 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' @@ -10,7 +11,8 @@ export default class InputGroup extends PureComponent { hasAccount: PropTypes.bool.isRequired, amount: PropTypes.string.isRequired, onAmountChange: PropTypes.func.isRequired, - handleButton: PropTypes.func.isRequired + handleButton: PropTypes.func.isRequired, + selectedAccount: PropTypes.string } render() { @@ -19,7 +21,8 @@ export default class InputGroup extends PureComponent { hasAccount, amount, onAmountChange, - handleButton + handleButton, + selectedAccount } = this.props return ( @@ -44,7 +47,10 @@ export default class InputGroup extends PureComponent { > Make it rain - +
+ + {selectedAccount && } +
) } diff --git a/src/components/Web3Donation/InputGroup.module.scss b/src/components/Web3Donation/InputGroup.module.scss index 8f74040d..27b0b23c 100644 --- a/src/components/Web3Donation/InputGroup.module.scss +++ b/src/components/Web3Donation/InputGroup.module.scss @@ -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; +} diff --git a/src/components/Web3Donation/index.jsx b/src/components/Web3Donation/index.jsx index 5f028336..e6e388f2 100644 --- a/src/components/Web3Donation/index.jsx +++ b/src/components/Web3Donation/index.jsx @@ -1,7 +1,6 @@ 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' @@ -188,8 +187,6 @@ export default class Web3Donation extends PureComponent {

Send Ether with MetaMask, Brave, or Mist.

- {selectedAccount && } - {web3Connected && (
{loading ? ( @@ -198,6 +195,7 @@ export default class Web3Donation extends PureComponent {