mirror of
https://github.com/kremalicious/blog.git
synced 2024-06-30 21:52:05 +02:00
show conversion to usd/eur
This commit is contained in:
parent
c0bdc8cd72
commit
acbdd9e812
|
@ -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):
|
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
|
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).
|
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
|
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/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)
|
- [`src/components/atoms/Qr.jsx`](src/components/atoms/Qr.jsx)
|
||||||
|
|
||||||
### 🕸 Related Posts
|
### 🕸 Related Posts
|
||||||
|
|
|
@ -8,12 +8,12 @@ const Message = ({ message, ...props }) => (
|
||||||
|
|
||||||
export default class Alerts extends PureComponent {
|
export default class Alerts extends PureComponent {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
hasCorrectNetwork: PropTypes.bool,
|
hasCorrectNetwork: PropTypes.bool.isRequired,
|
||||||
hasAccount: PropTypes.bool,
|
hasAccount: PropTypes.bool.isRequired,
|
||||||
networkName: PropTypes.string,
|
networkName: PropTypes.string,
|
||||||
error: PropTypes.object,
|
error: PropTypes.object,
|
||||||
transactionHash: PropTypes.string,
|
transactionHash: PropTypes.string,
|
||||||
web3Connected: PropTypes.bool
|
web3Connected: PropTypes.bool.isRequired
|
||||||
}
|
}
|
||||||
|
|
||||||
alertMessages = (networkName, transactionHash) => ({
|
alertMessages = (networkName, transactionHash) => ({
|
||||||
|
|
45
src/components/Web3Donation/Conversion.jsx
Normal file
45
src/components/Web3Donation/Conversion.jsx
Normal file
|
@ -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>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
18
src/components/Web3Donation/Conversion.module.scss
Normal file
18
src/components/Web3Donation/Conversion.module.scss
Normal file
|
@ -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;
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,15 +1,16 @@
|
||||||
import React, { PureComponent } from 'react'
|
import React, { PureComponent } from 'react'
|
||||||
import PropTypes from 'prop-types'
|
import PropTypes from 'prop-types'
|
||||||
import Input from '../atoms/Input'
|
import Input from '../atoms/Input'
|
||||||
|
import Conversion from './Conversion'
|
||||||
import styles from './InputGroup.module.scss'
|
import styles from './InputGroup.module.scss'
|
||||||
|
|
||||||
export default class InputGroup extends PureComponent {
|
export default class InputGroup extends PureComponent {
|
||||||
static propTypes = {
|
static propTypes = {
|
||||||
hasCorrectNetwork: PropTypes.bool,
|
hasCorrectNetwork: PropTypes.bool.isRequired,
|
||||||
hasAccount: PropTypes.bool,
|
hasAccount: PropTypes.bool.isRequired,
|
||||||
amount: PropTypes.number,
|
amount: PropTypes.string.isRequired,
|
||||||
onAmountChange: PropTypes.func,
|
onAmountChange: PropTypes.func.isRequired,
|
||||||
handleButton: PropTypes.func
|
handleButton: PropTypes.func.isRequired
|
||||||
}
|
}
|
||||||
|
|
||||||
render() {
|
render() {
|
||||||
|
@ -43,6 +44,7 @@ export default class InputGroup extends PureComponent {
|
||||||
>
|
>
|
||||||
Make it rain
|
Make it rain
|
||||||
</button>
|
</button>
|
||||||
|
<Conversion amount={amount} />
|
||||||
</div>
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
|
@ -16,7 +16,7 @@ export default class Web3Donation extends PureComponent {
|
||||||
networkName: null,
|
networkName: null,
|
||||||
accounts: [],
|
accounts: [],
|
||||||
selectedAccount: null,
|
selectedAccount: null,
|
||||||
amount: 0.01,
|
amount: '0.01',
|
||||||
transactionHash: null,
|
transactionHash: null,
|
||||||
loading: false,
|
loading: false,
|
||||||
error: null
|
error: null
|
||||||
|
@ -44,7 +44,7 @@ export default class Web3Donation extends PureComponent {
|
||||||
// await ethereum.enable()
|
// await ethereum.enable()
|
||||||
// } catch (error) {
|
// } catch (error) {
|
||||||
// // User denied account access...
|
// // User denied account access...
|
||||||
// console.log(error)
|
// Logger.error(error)
|
||||||
// }
|
// }
|
||||||
// }
|
// }
|
||||||
|
|
||||||
|
|
|
@ -23,3 +23,41 @@ export const getNetworkName = async netId => {
|
||||||
|
|
||||||
return networkName
|
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)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
Loading…
Reference in New Issue
Block a user