oceanprotocol/market
1
0
Fork 0
mirror of https://github.com/oceanprotocol/market.git synced 2024-11-15 09:44:53 +01:00
Code Releases Activity

refactor price conversion based on user preferences

Browse Source
This commit is contained in:
Matthias Kretschmann 2020-09-10 13:13:53 +02:00
parent df567a514c
commit 47e8de3bac
Signed by: m
GPG Key ID: 606EEEF3C479A91F
1 changed files with 14 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/atoms/Price/Conversion.tsx
View File

@ -4,10 +4,11 @@ import { fetchData, isBrowser } from '../../../utils'
import styles from './Conversion.module.css' import styles from './Conversion.module.css'
import classNames from 'classnames/bind' import classNames from 'classnames/bind'
import { formatCurrency } from '@coingecko/cryptoformat' import { formatCurrency } from '@coingecko/cryptoformat'
import { useUserPreferences } from '../../../providers/UserPreferences'
const cx = classNames.bind(styles) const cx = classNames.bind(styles)
const currencies = 'EUR' // comma-separated list const currencies = 'EUR,USD' // comma-separated list
const url = `https://api.coingecko.com/api/v3/simple/price?ids=ocean-protocol&vs_currencies=${currencies}&include_24hr_change=true` const url = `https://api.coingecko.com/api/v3/simple/price?ids=ocean-protocol&vs_currencies=${currencies}&include_24hr_change=true`
export default function Conversion({ export default function Conversion({
@ -19,23 +20,27 @@ export default function Conversion({
update?: boolean update?: boolean
className?: string className?: string
}): ReactElement { }): ReactElement {
const [priceEur, setPriceEur] = useState('0.00') const [priceFiat, setPriceFiat] = useState('0.00')
const { currency } = useUserPreferences()
const styleClasses = cx({ const styleClasses = cx({
conversion: true, conversion: true,
[className]: className [className]: className
}) })
const onSuccess = async (data: { 'ocean-protocol': { eur: number } }) => { const onSuccess = async (data: {
'ocean-protocol': { eur: number; usd: number }
}) => {
if (!data) return if (!data) return
if (!price || price === '' || price === '0') { if (!price || price === '' || price === '0') {
setPriceEur('0.00') setPriceFiat('0.00')
return return
} }
const { eur } = data['ocean-protocol'] const { eur, usd } = data['ocean-protocol']
const converted = eur * Number(price) const fiatValue = currency === 'EUR' ? eur : usd
setPriceEur(`${formatCurrency(converted, 'EUR', undefined, true)}`) const converted = fiatValue * Number(price)
setPriceFiat(`${formatCurrency(converted, currency, undefined, true)}`)
} }
useEffect(() => { useEffect(() => {
@ -46,7 +51,7 @@ export default function Conversion({
if (isBrowser && price !== '0') { if (isBrowser && price !== '0') {
getData() getData()
} }
}, [price]) }, [price, currency])
if (update) { if (update) {
// Fetch new prices periodically with swr // Fetch new prices periodically with swr
@ -61,7 +66,7 @@ export default function Conversion({
className={styleClasses} className={styleClasses}
title="Approximation based on current spot price on Coingecko" title="Approximation based on current spot price on Coingecko"
> >
≈ {priceEur} EUR ≈ {priceFiat} {currency}
</span> </span>
) )
} }