From ed05cd7274e2df9f6acd257f3e3da128586852da Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Oliveira?= Date: Thu, 1 Jul 2021 12:05:59 +0100 Subject: [PATCH 1/6] feat: add assets page to pazuz routes --- .../src/components/layout/Sidebar.js | 2 +- new-lamassu-admin/src/pages/Assets/Assets.js | 35 +++++++++++++++++++ .../src/pages/Assets/Assets.styles.js | 0 new-lamassu-admin/src/routing/pazuz.routes.js | 8 +++++ 4 files changed, 44 insertions(+), 1 deletion(-) create mode 100644 new-lamassu-admin/src/pages/Assets/Assets.js create mode 100644 new-lamassu-admin/src/pages/Assets/Assets.styles.js diff --git a/new-lamassu-admin/src/components/layout/Sidebar.js b/new-lamassu-admin/src/components/layout/Sidebar.js index 5320c478..820bb750 100644 --- a/new-lamassu-admin/src/components/layout/Sidebar.js +++ b/new-lamassu-admin/src/components/layout/Sidebar.js @@ -26,7 +26,7 @@ const Sidebar = ({
{loading &&

Loading...

} {!loading && - data.map((it, idx) => ( + data?.map((it, idx) => (
{ + const classes = useStyles() + + return ( + <> + +

{'future page'}

+
+ + + {/* */} + + + {/* */} + + +
+ + ) +} + +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..e69de29b 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 } ] }, From 7bbf253f5af0ac693bbf0b29f548af64aa9c3088 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Oliveira?= Date: Fri, 2 Jul 2021 01:24:17 +0100 Subject: [PATCH 2/6] feat: balance sheet screen --- new-lamassu-admin/src/pages/Assets/Assets.js | 200 +++++++++++++++++- .../src/pages/Assets/Assets.styles.js | 45 ++++ 2 files changed, 234 insertions(+), 11 deletions(-) diff --git a/new-lamassu-admin/src/pages/Assets/Assets.js b/new-lamassu-admin/src/pages/Assets/Assets.js index 0f908652..d29427c3 100644 --- a/new-lamassu-admin/src/pages/Assets/Assets.js +++ b/new-lamassu-admin/src/pages/Assets/Assets.js @@ -1,30 +1,208 @@ import Grid from '@material-ui/core/Grid' -import { makeStyles } from '@material-ui/core/styles' +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 moment from 'moment' -// import React from 'react' -// import { Tooltip } from 'src/components/Tooltip' import TitleSection from 'src/components/layout/TitleSection' -// import DataTable from 'src/components/tables/DataTable' -import { H4 } from 'src/components/typography' +import { H4, Label2, P, Info2 } from 'src/components/typography' import styles from './Assets.styles' const useStyles = makeStyles(styles) +const StyledCell = withStyles({ + root: { + borderBottom: '4px solid white', + padding: 0, + paddingLeft: 20, + paddingRight: 20 + } +})(TableCell) + +const HeaderCell = withStyles({ + root: { + borderBottom: '4px solid white', + padding: 0, + paddingLeft: 20, + paddingRight: 20, + 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 ( + + +

{asset.display}

+ + +

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

+ + + ) + } + return null + })} + + + {`Total ${R.toLower(title)}`} + + + {`${formatCurrency(totalAmount)} ${currency}`} + + + +
+ + + + ) +} + +const formatCurrency = amount => + amount.toLocaleString('en-US', { maximumFractionDigits: 2 }) + const Assets = () => { const classes = useStyles() + 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 filterByClass = x => + R.filter(it => R.path(['class'])(it) === x)(mockData) + return ( <> -

{'future page'}

- - {/* */} + + +
+ +
+
+ +
+ - - {/* */} + + +
+ +
+
diff --git a/new-lamassu-admin/src/pages/Assets/Assets.styles.js b/new-lamassu-admin/src/pages/Assets/Assets.styles.js index e69de29b..eea2e084 100644 --- a/new-lamassu-admin/src/pages/Assets/Assets.styles.js +++ 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 From a93f56cdc755f0dd809e8e1bc0e2ebc8cf242ba2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Oliveira?= Date: Fri, 2 Jul 2021 01:26:32 +0100 Subject: [PATCH 3/6] fix: undo fix from other PR --- new-lamassu-admin/src/components/layout/Sidebar.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/new-lamassu-admin/src/components/layout/Sidebar.js b/new-lamassu-admin/src/components/layout/Sidebar.js index 820bb750..5320c478 100644 --- a/new-lamassu-admin/src/components/layout/Sidebar.js +++ b/new-lamassu-admin/src/components/layout/Sidebar.js @@ -26,7 +26,7 @@ const Sidebar = ({
{loading &&

Loading...

} {!loading && - data?.map((it, idx) => ( + data.map((it, idx) => (
Date: Fri, 2 Jul 2021 01:30:55 +0100 Subject: [PATCH 4/6] refactor: rename table cell component --- new-lamassu-admin/src/pages/Assets/Assets.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/new-lamassu-admin/src/pages/Assets/Assets.js b/new-lamassu-admin/src/pages/Assets/Assets.js index d29427c3..dd160ea6 100644 --- a/new-lamassu-admin/src/pages/Assets/Assets.js +++ b/new-lamassu-admin/src/pages/Assets/Assets.js @@ -15,7 +15,7 @@ import { H4, Label2, P, Info2 } from 'src/components/typography' import styles from './Assets.styles' const useStyles = makeStyles(styles) -const StyledCell = withStyles({ +const Cell = withStyles({ root: { borderBottom: '4px solid white', padding: 0, @@ -67,27 +67,27 @@ const AssetsAmountTable = ({ title, data = [], numToRender }) => { if (idx < numToRender) { return ( - +

{asset.display}

- - + +

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

- + ) } return null })} - + {`Total ${R.toLower(title)}`} - - + + {`${formatCurrency(totalAmount)} ${currency}`} - + From 24a1ca84a62199c2e75bac4c07c935323c644b28 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Oliveira?= Date: Tue, 6 Jul 2021 15:22:15 +0100 Subject: [PATCH 5/6] refactor: reduce styling boilerplate --- new-lamassu-admin/src/pages/Assets/Assets.js | 47 +++++++++----------- 1 file changed, 22 insertions(+), 25 deletions(-) diff --git a/new-lamassu-admin/src/pages/Assets/Assets.js b/new-lamassu-admin/src/pages/Assets/Assets.js index dd160ea6..b7c5624c 100644 --- a/new-lamassu-admin/src/pages/Assets/Assets.js +++ b/new-lamassu-admin/src/pages/Assets/Assets.js @@ -15,21 +15,20 @@ import { H4, Label2, P, Info2 } from 'src/components/typography' import styles from './Assets.styles' const useStyles = makeStyles(styles) +const cellStyling = { + borderBottom: '4px solid white', + padding: 0, + paddingLeft: 20, + paddingRight: 20 +} + const Cell = withStyles({ - root: { - borderBottom: '4px solid white', - padding: 0, - paddingLeft: 20, - paddingRight: 20 - } + root: cellStyling })(TableCell) const HeaderCell = withStyles({ root: { - borderBottom: '4px solid white', - padding: 0, - paddingLeft: 20, - paddingRight: 20, + ...cellStyling, backgroundColor: 'white' } })(TableCell) @@ -64,22 +63,20 @@ const AssetsAmountTable = ({ title, data = [], numToRender }) => { {data?.map((asset, idx) => { - if (idx < numToRender) { - return ( - - -

{asset.display}

- - -

{`${selectAmountPrefix(asset)} + if (!(idx < numToRender)) return <> + return ( + + +

{asset.display}

+ + +

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

- - - ) - } - return null + asset.currency + }`}

+ + + ) })} From 4991a43dea155909aaed5838252e0e924965e2d4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Oliveira?= Date: Tue, 6 Jul 2021 16:02:43 +0100 Subject: [PATCH 6/6] refactor: moving mock data variables outside component --- new-lamassu-admin/src/pages/Assets/Assets.js | 128 +++++++++---------- 1 file changed, 64 insertions(+), 64 deletions(-) diff --git a/new-lamassu-admin/src/pages/Assets/Assets.js b/new-lamassu-admin/src/pages/Assets/Assets.js index b7c5624c..2948529e 100644 --- a/new-lamassu-admin/src/pages/Assets/Assets.js +++ b/new-lamassu-admin/src/pages/Assets/Assets.js @@ -15,6 +15,70 @@ 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, @@ -100,70 +164,6 @@ const formatCurrency = amount => const Assets = () => { const classes = useStyles() - 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 filterByClass = x => R.filter(it => R.path(['class'])(it) === x)(mockData)