101 lines
3 KiB
JavaScript
101 lines
3 KiB
JavaScript
import { useQuery, gql } from '@apollo/client'
|
|
import BigNumber from 'bignumber.js'
|
|
import * as R from 'ramda'
|
|
import React from 'react'
|
|
import { Label2 } from '../../../components/typography'
|
|
import TxInIcon from '../../../styling/icons/direction/cash-in.svg?react'
|
|
import TxOutIcon from '../../../styling/icons/direction/cash-out.svg?react'
|
|
|
|
import { fromNamespace } from '../../../utils/config'
|
|
|
|
import classes from './Footer.module.css'
|
|
|
|
const GET_DATA = gql`
|
|
query getData {
|
|
cryptoRates
|
|
cryptoCurrencies {
|
|
code
|
|
display
|
|
}
|
|
config
|
|
accountsConfig {
|
|
code
|
|
display
|
|
}
|
|
}
|
|
`
|
|
|
|
BigNumber.config({ ROUNDING_MODE: BigNumber.ROUND_HALF_UP })
|
|
|
|
const Footer = () => {
|
|
const { data } = useQuery(GET_DATA)
|
|
|
|
const withCommissions = R.path(['cryptoRates', 'withCommissions'])(data) ?? {}
|
|
const config = R.path(['config'])(data) ?? {}
|
|
// const canExpand = R.keys(withCommissions).length > 4
|
|
|
|
const wallets = fromNamespace('wallets')(config)
|
|
const cryptoCurrencies = R.path(['cryptoCurrencies'])(data) ?? []
|
|
const accountsConfig = R.path(['accountsConfig'])(data) ?? []
|
|
const localeFiatCurrency = R.path(['locale_fiatCurrency'])(config) ?? ''
|
|
|
|
const renderFooterItem = key => {
|
|
const idx = R.findIndex(R.propEq(key, 'code'))(cryptoCurrencies)
|
|
const tickerCode = wallets[`${key}_ticker`]
|
|
const tickerIdx = R.findIndex(R.propEq(tickerCode, 'code'))(accountsConfig)
|
|
|
|
const tickerName = tickerIdx > -1 ? accountsConfig[tickerIdx].display : ''
|
|
|
|
const cashInNoCommission = parseFloat(
|
|
R.path(['cryptoRates', 'withoutCommissions', key, 'cashIn'])(data),
|
|
)
|
|
const cashOutNoCommission = parseFloat(
|
|
R.path(['cryptoRates', 'withoutCommissions', key, 'cashOut'])(data),
|
|
)
|
|
|
|
const avgOfAskBid = new BigNumber(
|
|
(cashInNoCommission + cashOutNoCommission) / 2,
|
|
).toFormat(2)
|
|
const cashIn = new BigNumber(
|
|
parseFloat(
|
|
R.path(['cryptoRates', 'withCommissions', key, 'cashIn'])(data),
|
|
),
|
|
).toFormat(2)
|
|
const cashOut = new BigNumber(
|
|
parseFloat(
|
|
R.path(['cryptoRates', 'withCommissions', key, 'cashOut'])(data),
|
|
),
|
|
).toFormat(2)
|
|
|
|
return (
|
|
<div className="flex flex-col w-1/4">
|
|
<Label2 className="text-comet mt-3 mb-2">
|
|
{cryptoCurrencies[idx].display}
|
|
</Label2>
|
|
<div className="flex gap-6">
|
|
<div className="flex items-center gap-1">
|
|
<TxInIcon />
|
|
<Label2 noMargin>{`${cashIn} ${localeFiatCurrency}`}</Label2>
|
|
</div>
|
|
<div className="flex items-center gap-1">
|
|
<TxOutIcon />
|
|
<Label2 noMargin>{`${cashOut} ${localeFiatCurrency}`}</Label2>
|
|
</div>
|
|
</div>
|
|
<Label2 className="text-comet mt-2">
|
|
{`${tickerName}: ${avgOfAskBid} ${localeFiatCurrency}`}
|
|
</Label2>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
return (
|
|
<div className={classes.footer1}>
|
|
<div className={classes.content1}>
|
|
{R.keys(withCommissions).map(key => renderFooterItem(key))}
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default Footer
|