fix: accounting pazuz page
This commit is contained in:
parent
c402c9a204
commit
822efaeaea
5 changed files with 78 additions and 42 deletions
|
|
@ -1,6 +1,7 @@
|
||||||
import { useQuery } from '@apollo/react-hooks'
|
import { useQuery } from '@apollo/react-hooks'
|
||||||
import { Paper } from '@material-ui/core'
|
import { Paper } from '@material-ui/core'
|
||||||
import { makeStyles } from '@material-ui/core/styles'
|
import { makeStyles } from '@material-ui/core/styles'
|
||||||
|
import BigNumber from 'bignumber.js'
|
||||||
import classnames from 'classnames'
|
import classnames from 'classnames'
|
||||||
import gql from 'graphql-tag'
|
import gql from 'graphql-tag'
|
||||||
import * as R from 'ramda'
|
import * as R from 'ramda'
|
||||||
|
|
@ -15,7 +16,7 @@ import { ReactComponent as DashLogo } from 'src/styling/logos/icon-dash-colour.s
|
||||||
import { ReactComponent as EthereumLogo } from 'src/styling/logos/icon-ethereum-colour.svg'
|
import { ReactComponent as EthereumLogo } from 'src/styling/logos/icon-ethereum-colour.svg'
|
||||||
import { ReactComponent as LitecoinLogo } from 'src/styling/logos/icon-litecoin-colour.svg'
|
import { ReactComponent as LitecoinLogo } from 'src/styling/logos/icon-litecoin-colour.svg'
|
||||||
import { ReactComponent as ZCashLogo } from 'src/styling/logos/icon-zcash-colour.svg'
|
import { ReactComponent as ZCashLogo } from 'src/styling/logos/icon-zcash-colour.svg'
|
||||||
import { numberToFiatAmount } from 'src/utils/number'
|
import { numberToFiatAmount, numberToCryptoAmount } from 'src/utils/number'
|
||||||
|
|
||||||
import styles from './ATMWallet.styles'
|
import styles from './ATMWallet.styles'
|
||||||
|
|
||||||
|
|
@ -31,7 +32,7 @@ const GET_OPERATOR_BY_USERNAME = gql`
|
||||||
cryptoBalances
|
cryptoBalances
|
||||||
machines
|
machines
|
||||||
joined
|
joined
|
||||||
assetValue
|
assets
|
||||||
preferredFiatCurrency
|
preferredFiatCurrency
|
||||||
contactInfo {
|
contactInfo {
|
||||||
name
|
name
|
||||||
|
|
@ -57,9 +58,10 @@ const CHIPS_PER_ROW = 6
|
||||||
const Assets = ({ balance, wallets, currency }) => {
|
const Assets = ({ balance, wallets, currency }) => {
|
||||||
const classes = useStyles({ numberOfChips: CHIPS_PER_ROW })
|
const classes = useStyles({ numberOfChips: CHIPS_PER_ROW })
|
||||||
|
|
||||||
const walletFiatSum = () => {
|
const walletFiatSum = R.sum(R.map(it => it.fiatValue, wallets))
|
||||||
return R.sum(R.map(it => it.fiatValue, wallets))
|
const totalValue = BigNumber(balance)
|
||||||
}
|
.plus(walletFiatSum)
|
||||||
|
.toNumber()
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className={classes.totalAssetWrapper}>
|
<div className={classes.totalAssetWrapper}>
|
||||||
|
|
@ -79,7 +81,7 @@ const Assets = ({ balance, wallets, currency }) => {
|
||||||
<P className={classes.fieldHeader}>Total balance in wallets</P>
|
<P className={classes.fieldHeader}>Total balance in wallets</P>
|
||||||
<div className={classes.totalAssetWrapper}>
|
<div className={classes.totalAssetWrapper}>
|
||||||
<Info2 noMargin className={classes.fieldValue}>
|
<Info2 noMargin className={classes.fieldValue}>
|
||||||
{numberToFiatAmount(walletFiatSum())}
|
{numberToFiatAmount(walletFiatSum)}
|
||||||
</Info2>
|
</Info2>
|
||||||
<Info2 noMargin className={classes.fieldCurrency}>
|
<Info2 noMargin className={classes.fieldCurrency}>
|
||||||
{R.toUpper(currency)}
|
{R.toUpper(currency)}
|
||||||
|
|
@ -91,7 +93,7 @@ const Assets = ({ balance, wallets, currency }) => {
|
||||||
<P className={classes.fieldHeader}>Total assets</P>
|
<P className={classes.fieldHeader}>Total assets</P>
|
||||||
<div className={classes.totalAssetWrapper}>
|
<div className={classes.totalAssetWrapper}>
|
||||||
<Info2 noMargin className={classes.fieldValue}>
|
<Info2 noMargin className={classes.fieldValue}>
|
||||||
{numberToFiatAmount(balance)}
|
{numberToFiatAmount(totalValue)}
|
||||||
</Info2>
|
</Info2>
|
||||||
<Info2 noMargin className={classes.fieldCurrency}>
|
<Info2 noMargin className={classes.fieldCurrency}>
|
||||||
{R.toUpper(currency)}
|
{R.toUpper(currency)}
|
||||||
|
|
@ -142,11 +144,11 @@ const WalletInfoChip = ({ wallet, currency }) => {
|
||||||
<div className={classes.walletValueWrapper}>
|
<div className={classes.walletValueWrapper}>
|
||||||
<Label2 className={classes.fieldHeader}>{wallet.name} value</Label2>
|
<Label2 className={classes.fieldHeader}>{wallet.name} value</Label2>
|
||||||
<Label2 className={classes.walletValue}>
|
<Label2 className={classes.walletValue}>
|
||||||
{numberToFiatAmount(wallet.amount.toFixed(1))} {wallet.cryptoCode}
|
{numberToCryptoAmount(wallet.amount)} {wallet.cryptoCode}
|
||||||
</Label2>
|
</Label2>
|
||||||
<Label2 className={classes.fieldHeader}>Hedged value</Label2>
|
<Label2 className={classes.fieldHeader}>Hedged value</Label2>
|
||||||
<Label2 className={classes.walletValue}>
|
<Label2 className={classes.walletValue}>
|
||||||
{numberToFiatAmount(wallet.fiatValue)} {currency}
|
{numberToFiatAmount(wallet.hedgedFiatValue)} {currency}
|
||||||
</Label2>
|
</Label2>
|
||||||
</div>
|
</div>
|
||||||
</Paper>
|
</Paper>
|
||||||
|
|
@ -170,43 +172,61 @@ const ATMWallet = () => {
|
||||||
cryptoCode: 'BTC',
|
cryptoCode: 'BTC',
|
||||||
name: 'Bitcoin',
|
name: 'Bitcoin',
|
||||||
amount: operatorData?.cryptoBalances.xbt ?? 0,
|
amount: operatorData?.cryptoBalances.xbt ?? 0,
|
||||||
fiatValue: 0,
|
fiatValue: operatorData?.assets.values.cryptoBalancesInFiat.xbt ?? 0,
|
||||||
isHedged: true
|
hedgedFiatValue: operatorData?.assets.values.hedgedContracts.xbt ?? 0,
|
||||||
|
isHedged: BigNumber(operatorData?.assets.values.hedgedCrypto.xbt ?? 0).gt(
|
||||||
|
0
|
||||||
|
)
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
cryptoCode: 'ETH',
|
cryptoCode: 'ETH',
|
||||||
name: 'Ethereum',
|
name: 'Ethereum',
|
||||||
amount: operatorData?.cryptoBalances.eth ?? 0,
|
amount: operatorData?.cryptoBalances.eth ?? 0,
|
||||||
fiatValue: 0,
|
fiatValue: operatorData?.assets.values.cryptoBalancesInFiat.eth ?? 0,
|
||||||
isHedged: true
|
hedgedFiatValue: operatorData?.assets.values.hedgedContracts.eth ?? 0,
|
||||||
|
isHedged: BigNumber(operatorData?.assets.values.hedgedCrypto.eth ?? 0).gt(
|
||||||
|
0
|
||||||
|
)
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
cryptoCode: 'LTC',
|
cryptoCode: 'LTC',
|
||||||
name: 'Litecoin',
|
name: 'Litecoin',
|
||||||
amount: operatorData?.cryptoBalances.ltc ?? 0,
|
amount: operatorData?.cryptoBalances.ltc ?? 0,
|
||||||
fiatValue: 0,
|
fiatValue: operatorData?.assets.values.cryptoBalancesInFiat.ltc ?? 0,
|
||||||
isHedged: true
|
hedgedFiatValue: operatorData?.assets.values.hedgedContracts.ltc ?? 0,
|
||||||
|
isHedged: BigNumber(operatorData?.assets.values.hedgedCrypto.ltc ?? 0).gt(
|
||||||
|
0
|
||||||
|
)
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
cryptoCode: 'ZEC',
|
cryptoCode: 'ZEC',
|
||||||
name: 'Z-Cash',
|
name: 'Z-Cash',
|
||||||
amount: operatorData?.cryptoBalances.zec ?? 0,
|
amount: operatorData?.cryptoBalances.zec ?? 0,
|
||||||
fiatValue: 0,
|
fiatValue: operatorData?.assets.values.cryptoBalancesInFiat.zec ?? 0,
|
||||||
isHedged: false
|
hedgedFiatValue: operatorData?.assets.values.hedgedContracts.zec ?? 0,
|
||||||
|
isHedged: BigNumber(operatorData?.assets.values.hedgedCrypto.zec ?? 0).gt(
|
||||||
|
0
|
||||||
|
)
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
cryptoCode: 'BCH',
|
cryptoCode: 'BCH',
|
||||||
name: 'Bitcoin Cash',
|
name: 'Bitcoin Cash',
|
||||||
amount: operatorData?.cryptoBalances.bch ?? 0,
|
amount: operatorData?.cryptoBalances.bch ?? 0,
|
||||||
fiatValue: 0,
|
fiatValue: operatorData?.assets.values.cryptoBalancesInFiat.bch ?? 0,
|
||||||
isHedged: true
|
hedgedFiatValue: operatorData?.assets.values.hedgedContracts.bch ?? 0,
|
||||||
|
isHedged: BigNumber(operatorData?.assets.values.hedgedCrypto.bch ?? 0).gt(
|
||||||
|
0
|
||||||
|
)
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
cryptoCode: 'DASH',
|
cryptoCode: 'DASH',
|
||||||
name: 'Dash',
|
name: 'Dash',
|
||||||
amount: operatorData?.cryptoBalances.dash ?? 0,
|
amount: operatorData?.cryptoBalances.dash ?? 0,
|
||||||
fiatValue: 0,
|
fiatValue: operatorData?.assets.values.cryptoBalancesInFiat.dash ?? 0,
|
||||||
isHedged: false
|
hedgedFiatValue: operatorData?.assets.values.hedgedContracts.dash ?? 0,
|
||||||
|
isHedged: BigNumber(
|
||||||
|
operatorData?.assets.values.hedgedCrypto.dash ?? 0
|
||||||
|
).gt(0)
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|
@ -216,10 +236,10 @@ const ATMWallet = () => {
|
||||||
<TitleSection title="ATM Wallets" />
|
<TitleSection title="ATM Wallets" />
|
||||||
<Assets
|
<Assets
|
||||||
balance={
|
balance={
|
||||||
operatorData.fiatBalances[operatorData.preferredFiatCurrency]
|
operatorData?.fiatBalances[operatorData.preferredFiatCurrency] ?? 0
|
||||||
}
|
}
|
||||||
wallets={wallets}
|
wallets={wallets}
|
||||||
currency={operatorData.preferredFiatCurrency}
|
currency={operatorData?.preferredFiatCurrency ?? ''}
|
||||||
/>
|
/>
|
||||||
<H3 className={classes.walletChipTitle}>ATM Wallets</H3>
|
<H3 className={classes.walletChipTitle}>ATM Wallets</H3>
|
||||||
<div className={classes.walletChipList}>
|
<div className={classes.walletChipList}>
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
import { useQuery } from '@apollo/react-hooks'
|
import { useQuery } from '@apollo/react-hooks'
|
||||||
import { makeStyles } from '@material-ui/core/styles'
|
import { makeStyles } from '@material-ui/core/styles'
|
||||||
|
import BigNumber from 'bignumber.js'
|
||||||
import gql from 'graphql-tag'
|
import gql from 'graphql-tag'
|
||||||
import * as R from 'ramda'
|
import * as R from 'ramda'
|
||||||
import React, { useContext } from 'react'
|
import React, { useContext } from 'react'
|
||||||
|
|
@ -26,7 +27,7 @@ const GET_OPERATOR_BY_USERNAME = gql`
|
||||||
cryptoBalances
|
cryptoBalances
|
||||||
machines
|
machines
|
||||||
joined
|
joined
|
||||||
assetValue
|
assets
|
||||||
preferredFiatCurrency
|
preferredFiatCurrency
|
||||||
contactInfo {
|
contactInfo {
|
||||||
name
|
name
|
||||||
|
|
@ -169,23 +170,31 @@ const Accounting = () => {
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
|
|
||||||
|
const hedgingReserve = BigNumber(
|
||||||
|
R.reduce(
|
||||||
|
(acc, value) => acc.plus(value),
|
||||||
|
BigNumber(0),
|
||||||
|
R.values(operatorData?.assets.values.hedgedContracts) ?? []
|
||||||
|
) ?? 0
|
||||||
|
).toNumber()
|
||||||
|
|
||||||
|
console.log(opData)
|
||||||
|
|
||||||
return (
|
return (
|
||||||
!loading && (
|
!loading && (
|
||||||
<>
|
<>
|
||||||
<TitleSection title="Accounting" />
|
<TitleSection title="Accounting" />
|
||||||
<Assets
|
<Assets
|
||||||
balance={
|
balance={operatorData?.assets.total ?? 0}
|
||||||
operatorData.fiatBalances[operatorData.preferredFiatCurrency]
|
hedgingReserve={hedgingReserve}
|
||||||
}
|
currency={operatorData?.preferredFiatCurrency ?? ''}
|
||||||
hedgingReserve={operatorData.hedgingReserve ?? 0}
|
|
||||||
currency={operatorData.preferredFiatCurrency}
|
|
||||||
/>
|
/>
|
||||||
<H4 className={classes.tableTitle}>Fiat balance history</H4>
|
<H4 className={classes.tableTitle}>Fiat balance history</H4>
|
||||||
<DataTable
|
<DataTable
|
||||||
loading={loading}
|
loading={loading}
|
||||||
emptyText="No transactions so far"
|
emptyText="No transactions so far"
|
||||||
elements={elements}
|
elements={elements}
|
||||||
data={operatorData.fundings ?? []}
|
data={operatorData?.fundings ?? []}
|
||||||
rowSize="sm"
|
rowSize="sm"
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
|
|
|
||||||
|
|
@ -30,7 +30,7 @@ const GET_OPERATOR_BY_USERNAME = gql`
|
||||||
cryptoBalances
|
cryptoBalances
|
||||||
machines
|
machines
|
||||||
joined
|
joined
|
||||||
assetValue
|
assets
|
||||||
preferredFiatCurrency
|
preferredFiatCurrency
|
||||||
contactInfo {
|
contactInfo {
|
||||||
name
|
name
|
||||||
|
|
@ -147,8 +147,7 @@ const Assets = () => {
|
||||||
{
|
{
|
||||||
id: 'fiatBalance',
|
id: 'fiatBalance',
|
||||||
display: 'Fiat balance',
|
display: 'Fiat balance',
|
||||||
amount:
|
amount: operatorData?.assets.total ?? 0,
|
||||||
operatorData?.fiatBalances[operatorData?.preferredFiatCurrency] ?? 0,
|
|
||||||
currency: R.toUpper(operatorData?.preferredFiatCurrency ?? ''),
|
currency: R.toUpper(operatorData?.preferredFiatCurrency ?? ''),
|
||||||
class: 'Available balance'
|
class: 'Available balance'
|
||||||
},
|
},
|
||||||
|
|
@ -156,7 +155,7 @@ const Assets = () => {
|
||||||
id: 'hedgingReserve',
|
id: 'hedgingReserve',
|
||||||
display: 'Hedging reserve',
|
display: 'Hedging reserve',
|
||||||
amount:
|
amount:
|
||||||
operatorData?.fiatBalances[operatorData?.preferredFiatCurrency] ?? 0,
|
-R.sum(R.values(operatorData?.assets.values.hedgedContracts)) ?? 0,
|
||||||
currency: R.toUpper(operatorData?.preferredFiatCurrency ?? ''),
|
currency: R.toUpper(operatorData?.preferredFiatCurrency ?? ''),
|
||||||
class: 'Available balance',
|
class: 'Available balance',
|
||||||
direction: 'out'
|
direction: 'out'
|
||||||
|
|
@ -167,7 +166,7 @@ const Assets = () => {
|
||||||
{
|
{
|
||||||
id: 'hedgedWalletAssets',
|
id: 'hedgedWalletAssets',
|
||||||
display: 'Hedged wallet assets',
|
display: 'Hedged wallet assets',
|
||||||
amount: 0,
|
amount: R.sum(R.values(operatorData?.assets.values.hedgedContracts)) ?? 0,
|
||||||
currency: R.toUpper(operatorData?.preferredFiatCurrency ?? ''),
|
currency: R.toUpper(operatorData?.preferredFiatCurrency ?? ''),
|
||||||
class: 'Wallet assets',
|
class: 'Wallet assets',
|
||||||
direction: 'in'
|
direction: 'in'
|
||||||
|
|
@ -175,7 +174,7 @@ const Assets = () => {
|
||||||
{
|
{
|
||||||
id: 'unhedgedWalletAssets',
|
id: 'unhedgedWalletAssets',
|
||||||
display: 'Unhedged wallet assets',
|
display: 'Unhedged wallet assets',
|
||||||
amount: 0,
|
amount: R.sum(R.values(operatorData?.assets.values.unhedgedFiat)) ?? 0,
|
||||||
currency: R.toUpper(operatorData?.preferredFiatCurrency ?? ''),
|
currency: R.toUpper(operatorData?.preferredFiatCurrency ?? ''),
|
||||||
class: 'Wallet assets',
|
class: 'Wallet assets',
|
||||||
direction: 'in'
|
direction: 'in'
|
||||||
|
|
@ -193,21 +192,22 @@ const Assets = () => {
|
||||||
{
|
{
|
||||||
id: 'hedgingReserve',
|
id: 'hedgingReserve',
|
||||||
display: 'Hedging reserve',
|
display: 'Hedging reserve',
|
||||||
amount: 0,
|
amount:
|
||||||
|
-R.sum(R.values(operatorData?.assets.values.hedgedContracts)) ?? 0,
|
||||||
currency: R.toUpper(operatorData?.preferredFiatCurrency ?? ''),
|
currency: R.toUpper(operatorData?.preferredFiatCurrency ?? ''),
|
||||||
direction: 'out'
|
direction: 'out'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'hedgedWalletAssets',
|
id: 'hedgedWalletAssets',
|
||||||
display: 'Market value of hedged wallet assets',
|
display: 'Market value of hedged wallet assets',
|
||||||
amount: 0,
|
amount: R.sum(R.values(operatorData?.assets.values.hedgedContracts)) ?? 0,
|
||||||
currency: R.toUpper(operatorData?.preferredFiatCurrency ?? ''),
|
currency: R.toUpper(operatorData?.preferredFiatCurrency ?? ''),
|
||||||
direction: 'in'
|
direction: 'in'
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
id: 'unhedgedWalletAssets',
|
id: 'unhedgedWalletAssets',
|
||||||
display: 'Unhedged wallet assets',
|
display: 'Unhedged wallet assets',
|
||||||
amount: 0,
|
amount: R.sum(R.values(operatorData?.assets.values.unhedgedFiat)) ?? 0,
|
||||||
currency: R.toUpper(operatorData?.preferredFiatCurrency ?? ''),
|
currency: R.toUpper(operatorData?.preferredFiatCurrency ?? ''),
|
||||||
direction: 'in'
|
direction: 'in'
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -12,8 +12,7 @@ import AppContext from 'src/AppContext'
|
||||||
const URI =
|
const URI =
|
||||||
process.env.NODE_ENV === 'development' ? 'https://localhost:8070' : ''
|
process.env.NODE_ENV === 'development' ? 'https://localhost:8070' : ''
|
||||||
|
|
||||||
const ALT_URI =
|
const ALT_URI = 'http://localhost:4001'
|
||||||
process.env.NODE_ENV === 'development' ? 'http://localhost:4001' : ''
|
|
||||||
|
|
||||||
const uploadLink = createUploadLink({
|
const uploadLink = createUploadLink({
|
||||||
credentials: 'include',
|
credentials: 'include',
|
||||||
|
|
|
||||||
|
|
@ -10,4 +10,12 @@ const defaultToZero = value =>
|
||||||
const numberToFiatAmount = value =>
|
const numberToFiatAmount = value =>
|
||||||
value.toLocaleString('en-US', { maximumFractionDigits: 2 })
|
value.toLocaleString('en-US', { maximumFractionDigits: 2 })
|
||||||
|
|
||||||
export { defaultToZero, transformNumber, numberToFiatAmount }
|
const numberToCryptoAmount = value =>
|
||||||
|
value.toLocaleString('en-US', { maximumFractionDigits: 5 })
|
||||||
|
|
||||||
|
export {
|
||||||
|
defaultToZero,
|
||||||
|
transformNumber,
|
||||||
|
numberToFiatAmount,
|
||||||
|
numberToCryptoAmount
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue