diff --git a/new-lamassu-admin/src/pages/Assets/Assets.js b/new-lamassu-admin/src/pages/Assets/Assets.js new file mode 100644 index 00000000..2948529e --- /dev/null +++ b/new-lamassu-admin/src/pages/Assets/Assets.js @@ -0,0 +1,210 @@ +import Grid from '@material-ui/core/Grid' +import Table from '@material-ui/core/Table' +import TableBody from '@material-ui/core/TableBody' +import TableCell from '@material-ui/core/TableCell' +import TableContainer from '@material-ui/core/TableContainer' +import TableHead from '@material-ui/core/TableHead' +import TableRow from '@material-ui/core/TableRow' +import { makeStyles, withStyles } from '@material-ui/core/styles' +import * as R from 'ramda' +import React from 'react' + +import TitleSection from 'src/components/layout/TitleSection' +import { H4, Label2, P, Info2 } from 'src/components/typography' + +import styles from './Assets.styles' +const useStyles = makeStyles(styles) + +const mockData = [ + { + id: 'fiatBalance', + display: 'Fiat balance', + amount: 10438, + currency: 'USD', + class: 'Available balance' + }, + { + id: 'hedgingReserve', + display: 'Hedging reserve', + amount: -1486, + currency: 'USD', + class: 'Available balance', + direction: 'out' + }, + { + id: 'hedgedWalletAssets', + display: 'Hedged wallet assets', + amount: 96446, + currency: 'USD', + class: 'Wallet assets', + direction: 'in' + }, + { + id: 'unhedgedWalletAssets', + display: 'Unhedged wallet assets', + amount: 3978, + currency: 'USD', + class: 'Wallet assets', + direction: 'in' + } +] + +const mockDataTotal = [ + { + id: 'fiatBalance', + display: 'Fiat balance', + amount: 10438, + currency: 'USD' + }, + { + id: 'hedgingReserve', + display: 'Hedging reserve', + amount: -1486, + currency: 'USD', + direction: 'out' + }, + { + id: 'hedgedWalletAssets', + display: 'Market value of hedged wallet assets', + amount: 94980, + currency: 'USD', + direction: 'in' + }, + { + id: 'unhedgedWalletAssets', + display: 'Unhedged wallet assets', + amount: 3978, + currency: 'USD', + direction: 'in' + } +] + +const cellStyling = { + borderBottom: '4px solid white', + padding: 0, + paddingLeft: 20, + paddingRight: 20 +} + +const Cell = withStyles({ + root: cellStyling +})(TableCell) + +const HeaderCell = withStyles({ + root: { + ...cellStyling, + backgroundColor: 'white' + } +})(TableCell) + +const AssetsAmountTable = ({ title, data = [], numToRender }) => { + const classes = useStyles() + + const totalAmount = R.compose(R.sum, R.map(R.path(['amount'])))(data) ?? 0 + const currency = data[0]?.currency ?? '' + const selectAmountPrefix = it => + it.direction === 'in' ? '+' : R.isNil(it.direction) ? '' : '-' + + return ( + <> + +

{title}

+ + + + + +
+ Asset +
+
+ +
+ Amount +
+
+
+
+ + {data?.map((asset, idx) => { + if (!(idx < numToRender)) return <> + return ( + + +

{asset.display}

+
+ +

{`${selectAmountPrefix(asset)} + ${formatCurrency(Math.abs(asset.amount))} ${ + asset.currency + }`}

+
+
+ ) + })} + + + {`Total ${R.toLower(title)}`} + + + {`${formatCurrency(totalAmount)} ${currency}`} + + +
+
+
+
+ + ) +} + +const formatCurrency = amount => + amount.toLocaleString('en-US', { maximumFractionDigits: 2 }) + +const Assets = () => { + const classes = useStyles() + + const filterByClass = x => + R.filter(it => R.path(['class'])(it) === x)(mockData) + + return ( + <> + +
+ + + +
+ +
+
+ +
+
+
+ + +
+ +
+
+
+
+
+ + ) +} + +export default Assets diff --git a/new-lamassu-admin/src/pages/Assets/Assets.styles.js b/new-lamassu-admin/src/pages/Assets/Assets.styles.js new file mode 100644 index 00000000..eea2e084 --- /dev/null +++ b/new-lamassu-admin/src/pages/Assets/Assets.styles.js @@ -0,0 +1,45 @@ +import { + white, + offColor, + backgroundColor, + subheaderColor +} from 'src/styling/variables' + +const styles = () => ({ + card: { + wordWrap: 'break-word', + boxShadow: '0 0 4px 0 rgba(0, 0, 0, 0.08)', + borderRadius: 12, + padding: 24, + backgroundColor: white + }, + h4: { + marginTop: 0 + }, + label: { + margin: 0, + color: offColor + }, + asset: { + float: 'left' + }, + amount: { + float: 'right' + }, + row: { + backgroundColor: backgroundColor, + borderBottom: 'none' + }, + totalRow: { + backgroundColor: subheaderColor, + borderBottom: 'none' + }, + leftSide: { + margin: [[0, 10, 20, 0]] + }, + rightSide: { + margin: [[0, 0, 0, 10]] + } +}) + +export default styles diff --git a/new-lamassu-admin/src/routing/pazuz.routes.js b/new-lamassu-admin/src/routing/pazuz.routes.js index 506b745d..092ee0c7 100644 --- a/new-lamassu-admin/src/routing/pazuz.routes.js +++ b/new-lamassu-admin/src/routing/pazuz.routes.js @@ -3,6 +3,7 @@ import { Redirect } from 'react-router-dom' import ATMWallet from 'src/pages/ATMWallet/ATMWallet' import Accounting from 'src/pages/Accounting/Accounting' +import Assets from 'src/pages/Assets/Assets' import Blacklist from 'src/pages/Blacklist' import Cashout from 'src/pages/Cashout' import Commissions from 'src/pages/Commissions' @@ -242,6 +243,13 @@ const getPazuzRoutes = () => [ route: '/accounting/wallets', allowedRoles: [ROLES.USER, ROLES.SUPERUSER], component: ATMWallet + }, + { + key: 'assetspage', + label: 'Assets', + route: '/accounting/assets', + allowedRoles: [ROLES.USER, ROLES.SUPERUSER], + component: Assets } ] },