m/blowfish
1
0
Fork 0
mirror of https://github.com/kremalicious/blowfish.git synced 2024-12-28 23:57:52 +01:00
Code Releases Activity

more reusable balance component

Browse Source
This commit is contained in:
Matthias Kretschmann 2019-05-06 20:07:04 +02:00
parent 33053e11e2
commit 532e8ce7cb
Signed by: m
GPG Key ID: 606EEEF3C479A91F
3 changed files with 21 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
package.json
View File

@ -19,6 +19,7 @@
"license": "MIT", "license": "MIT",
"dependencies": { "dependencies": {
"@oceanprotocol/typographies": "^0.1.0", "@oceanprotocol/typographies": "^0.1.0",
"crypto-symbols": "^1.0.0",
"ms": "^2.1.1", "ms": "^2.1.1",
"react": "^16.8.6", "react": "^16.8.6",
"react-dom": "^16.8.6" "react-dom": "^16.8.6"

43
src/components/Balance.jsx
View File

@ -2,32 +2,27 @@ import React from 'react'
import PropTypes from 'prop-types' import PropTypes from 'prop-types'
import { Consumer } from '../store/createContext' import { Consumer } from '../store/createContext'
import { numberFormatter, fiatFormatter } from '../util/moneyFormatter' import { numberFormatter, fiatFormatter } from '../util/moneyFormatter'
import symbols from 'crypto-symbols'
const Balance = ({ balance }) => { const Balance = ({ balance }) => (
const { ocean, btc, eth, eur, usd } = balance <h1 className="number">
<Consumer>
{({ currency }) => {
const isFiat = currency === 'usd' || currency === 'eur'
const symbol =
currency === 'ocean' ? 'Ọ' : symbols[currency.toUpperCase()]
return ( return isFiat ? (
<h1 className="number"> fiatFormatter(currency.toUpperCase(), balance[currency])
<Consumer> ) : (
{({ currency }) => <>
currency === 'ocean' ? ( {symbol} {numberFormatter(balance[currency]) || 0}
<span className="balance">Ọ {numberFormatter(ocean) || 0}</span> </>
) : currency === 'btc' ? ( )
<span className="balance">₿ {numberFormatter(btc) || 0}</span> }}
) : currency === 'eth' ? ( </Consumer>
<span className="balance">Ξ {numberFormatter(eth) || 0}</span> </h1>
) : currency === 'eur' ? ( )
<span className="balance">{fiatFormatter('EUR', eur)}</span>
) : currency === 'usd' ? (
<span className="balance">{fiatFormatter('USD', usd)}</span>
) : (
<span className="balance">{numberFormatter(currency)}</span>
)
}
</Consumer>
</h1>
)
}
Balance.propTypes = { Balance.propTypes = {
balance: PropTypes.object.isRequired balance: PropTypes.object.isRequired

2
src/components/Total.jsx
View File

@ -37,7 +37,7 @@ const Total = () => (
return <Balance balance={balanceNew} /> return <Balance balance={balanceNew} />
}} }}
</Consumer> </Consumer>
<span className="label">Total balance</span> <span className="label">Total Balance</span>
</div> </div>
) )