2019-09-08 21:47:57 +02:00
|
|
|
import React, { useContext } from 'react'
|
2019-05-06 00:10:28 +02:00
|
|
|
import PropTypes from 'prop-types'
|
2019-05-11 21:56:33 +02:00
|
|
|
import posed, { PoseGroup } from 'react-pose'
|
2019-05-20 20:53:32 +02:00
|
|
|
import { AppContext } from '../store/createContext'
|
2020-02-09 17:16:10 +01:00
|
|
|
import { cryptoFormatter } from '../../utils'
|
2019-05-11 21:56:33 +02:00
|
|
|
import { fadeIn } from './Animations'
|
2019-09-08 21:47:57 +02:00
|
|
|
import Label from './Label'
|
|
|
|
import styles from './Balance.module.css'
|
2019-05-11 21:56:33 +02:00
|
|
|
|
|
|
|
const Animation = posed.h1(fadeIn)
|
2019-05-06 00:10:28 +02:00
|
|
|
|
2019-09-09 01:16:17 +02:00
|
|
|
const Balance = ({ balance, label, labelOnClick, large }) => {
|
2019-09-08 21:47:57 +02:00
|
|
|
const { currency } = useContext(AppContext)
|
2019-05-09 23:28:58 +02:00
|
|
|
|
2019-09-08 21:47:57 +02:00
|
|
|
return (
|
|
|
|
<div className={styles.balance}>
|
2019-05-11 21:56:33 +02:00
|
|
|
<PoseGroup animateOnMount>
|
2019-09-08 21:47:57 +02:00
|
|
|
<Animation
|
|
|
|
key={currency}
|
|
|
|
className={large ? styles.numberLarge : styles.number}
|
|
|
|
>
|
2019-05-20 20:53:32 +02:00
|
|
|
{cryptoFormatter(balance[currency], currency)}
|
2019-05-11 21:56:33 +02:00
|
|
|
</Animation>
|
|
|
|
</PoseGroup>
|
2019-09-09 01:16:17 +02:00
|
|
|
{label && <Label labelOnClick={labelOnClick}>{label}</Label>}
|
2019-09-08 21:47:57 +02:00
|
|
|
</div>
|
|
|
|
)
|
2019-05-06 00:10:28 +02:00
|
|
|
}
|
2019-09-08 21:47:57 +02:00
|
|
|
|
|
|
|
Balance.propTypes = {
|
|
|
|
balance: PropTypes.object.isRequired,
|
|
|
|
label: PropTypes.string,
|
2019-09-09 01:16:17 +02:00
|
|
|
labelOnClick: PropTypes.func,
|
2019-09-08 21:47:57 +02:00
|
|
|
large: PropTypes.bool
|
|
|
|
}
|
|
|
|
|
|
|
|
export default Balance
|