feat: balance sheet screen

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 (
+    <>
+      <Grid item className={classes.card} xs={12}>
+        <H4 className={classes.h4}>{title}</H4>
+        <TableContainer>
+          <Table>
+            <TableHead>
+              <TableRow>
+                <HeaderCell>
+                  <div className={classes.asset}>
+                    <Label2 className={classes.label}>Asset</Label2>
+                  </div>
+                </HeaderCell>
+                <HeaderCell>
+                  <div className={classes.amount}>
+                    <Label2 className={classes.label}>Amount</Label2>
+                  </div>
+                </HeaderCell>
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              {data?.map((asset, idx) => {
+                if (idx < numToRender) {
+                  return (
+                    <TableRow className={classes.row} key={idx}>
+                      <StyledCell align="left">
+                        <P>{asset.display}</P>
+                      </StyledCell>
+                      <StyledCell align="right">
+                        <P>{`${selectAmountPrefix(asset)}
+                         ${formatCurrency(Math.abs(asset.amount))} ${
+                          asset.currency
+                        }`}</P>
+                      </StyledCell>
+                    </TableRow>
+                  )
+                }
+                return null
+              })}
+              <TableRow className={classes.totalRow} key={data?.length + 1}>
+                <StyledCell align="left">
+                  <Info2>{`Total ${R.toLower(title)}`}</Info2>
+                </StyledCell>
+                <StyledCell align="right">
+                  <Info2>{`${formatCurrency(totalAmount)} ${currency}`}</Info2>
+                </StyledCell>
+              </TableRow>
+            </TableBody>
+          </Table>
+        </TableContainer>
+      </Grid>
+    </>
+  )
+}
+
+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 (
     <>
       <TitleSection title="Balance sheet" />
-      <H4>{'future page'}</H4>
       <div className={classes.root}>
         <Grid container>
-          <Grid container direction="column" item xs={6}>
-            {/* <LeftSide /> */}
+          <Grid container direction="column" item xs={5}>
+            <Grid item xs={12}>
+              <div className={classes.leftSide}>
+                <AssetsAmountTable
+                  title="Available balance"
+                  data={filterByClass('Available balance')}
+                  numToRender={mockData.length}
+                />
+              </div>
+              <div className={classes.leftSide}>
+                <AssetsAmountTable
+                  title="Wallet assets"
+                  data={filterByClass('Wallet assets')}
+                  numToRender={mockData.length}
+                />
+              </div>
+            </Grid>
           </Grid>
-          <Grid container direction="column" item xs={6}>
-            {/* <RightSide /> */}
+          <Grid container direction="column" item xs={7}>
+            <Grid item xs={12}>
+              <div className={classes.rightSide}>
+                <AssetsAmountTable
+                  title="Total assets"
+                  data={mockDataTotal}
+                  numToRender={mockDataTotal.length}
+                />
+              </div>
+            </Grid>
           </Grid>
         </Grid>
       </div>

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