Feat: Funding history screen

new-lamassu-admin/src/components/TableLabel.js

@@ -0,0 +1,30 @@
+import React from 'react'
+import classnames from 'classnames'
+
+import { Label1 } from './typography'
+import { makeStyles } from '@material-ui/styles'
+
+const useStyles = makeStyles({
+  wrapper: {
+    display: 'flex',
+    alignItems: 'center'
+  },
+  colorIndicator: {
+    borderRadius: 3,
+    height: 12,
+    width: 12,
+    marginRight: 8
+  }
+})
+
+const TableLabel = ({ className, label, color, ...props }) => {
+  const classes = useStyles()
+  return (
+    <div className={classnames(classes.wrapper, className)} {...props}>
+      {color && <div className={classes.colorIndicator} style={{ backgroundColor: color }} />}
+      <Label1 {...props}>{label}</Label1>
+    </div>
+  )
+}
+
+export default TableLabel

new-lamassu-admin/src/components/fake-table/Table.js

@@ -106,7 +106,7 @@ const Td = ({ children, header, className, size = 100, textAlign }) => {
   )
 }
 
-const Tr = ({ error, errorMessage, children }) => {
+const Tr = ({ error, errorMessage, children, className }) => {
   const classes = useStyles()
   const cardClasses = { root: classes.cardContentRoot }
   const classNames = {
@@ -115,7 +115,7 @@ const Tr = ({ error, errorMessage, children }) => {
 
   return (
     <>
-      <Card className={classnames(classNames, classes.card)}>
+      <Card className={classnames(classNames, classes.card, className)}>
         <CardContent classes={cardClasses}>
           <div className={classes.mainContent}>{children}</div>
           {error && <div className={classes.errorContent}>{errorMessage}</div>}

new-lamassu-admin/src/components/typography/styles.js

@@ -104,12 +104,14 @@ export default {
   label1: {
     fontSize: fontSize5,
     fontFamily: fontSecondary,
-    fontWeight: 500
+    fontWeight: 500,
+    color: fontColor
   },
   label2: {
     fontSize: fontSize5,
     fontFamily: fontSecondary,
-    fontWeight: 700
+    fontWeight: 700,
+    color: fontColor
   },
   label3: {
     fontSize: fontSize4,

new-lamassu-admin/src/pages/Funding.js

@@ -1,18 +1,26 @@
 import React, { useState } from 'react'
-import classnames from 'classnames'
+import moment from 'moment'
 import QRCode from 'qrcode.react'
 import BigNumber from 'bignumber.js'
 import useAxios from '@use-hooks/axios'
 import { makeStyles } from '@material-ui/core/styles'
 
-import { H3, Info1, Info2, Info3, Mono, Label1, Label3, TL2 } from '../components/typography'
+import { Tr, Td, THead, TBody, Table } from '../components/fake-table/Table'
+import { H3, Info1, Info2, Info3, Mono, Label1, Label3 } from '../components/typography'
 import Title from '../components/Title'
+import TableLabel from '../components/TableLabel'
 import Sidebar from '../components/Sidebar'
 import { primaryColor } from '../styling/variables'
 
 import styles from './Funding.styles'
+import classnames from 'classnames'
 
 const useStyles = makeStyles(styles)
+const sizes = {
+  big: 165,
+  time: 140,
+  date: 130
+}
 
 const formatAddress = (address = '') => {
   return address.replace(/(.{4})/g, '$1 ')
@@ -39,7 +47,32 @@ const getPendingTotal = list => {
 const Funding = () => {
   const [data, setData] = useState(null)
   const [selected, setSelected] = useState(null)
+  const [viewHistory, setViewHistory] = useState(false)
   const classes = useStyles()
+  const fundingHistory = [
+    {
+      cryptoAmount: 2.00,
+      balance: 10.23,
+      fiatValue: 1000.00,
+      date: new Date(),
+      performedBy: null,
+      pending: true
+    },
+    {
+      cryptoAmount: 10.00,
+      balance: 12.23,
+      fiatValue: 12000.00,
+      date: new Date(),
+      performedBy: null
+    },
+    {
+      cryptoAmount: 5.00,
+      balance: 5.00,
+      fiatValue: 50000.00,
+      date: new Date(),
+      performedBy: null
+    }
+  ]
 
   const isSelected = it => {
     return selected && selected.cryptoCode === it.cryptoCode
@@ -70,7 +103,10 @@ const Funding = () => {
 
   return (
     <>
-      <Title>Funding</Title>
+      <div>
+        <Title>Funding</Title>
+        {/* <button onClick={it => setViewHistory(!viewHistory)}>hehe</button> */}
+      </div>
       <div className={classes.wrapper}>
         <Sidebar
           data={data}
@@ -82,14 +118,14 @@ const Funding = () => {
           {data && data.length && (
             <div className={classes.total}>
               <Label1 className={classes.totalTitle}>Total Crypto Balance</Label1>
-              <Info1 className={classes.noMargin}>
+              <Info1 noMargin>
                 {getConfirmedTotal(data)} {data[0].fiatCode}
               </Info1>
               <Label1 className={classes.totalPending}>(+{getPendingTotal(data)} pending)</Label1>
             </div>
           )}
         </Sidebar>
-        {selected && (
+        {selected && !viewHistory && (
           <div className={classes.main}>
             <div className={classes.firstSide}>
               <H3>Balance ({selected.display})</H3>
@@ -125,6 +161,33 @@ const Funding = () => {
             </div>
           </div>
         )}
+        {selected && viewHistory && (
+          <div>
+            <TableLabel className={classes.tableLabel} label='Pending' color='#cacaca' />
+            <Table className={classes.table}>
+              <THead>
+                <Td header size={sizes.big}>Amount Entered</Td>
+                <Td header size={sizes.big}>Balance After</Td>
+                <Td header size={sizes.big}>Cash Value</Td>
+                <Td header size={sizes.date}>Date</Td>
+                <Td header size={sizes.time}>Time (h:m:s)</Td>
+                <Td header size={sizes.big}>Performed By</Td>
+              </THead>
+              <TBody>
+                {fundingHistory.map((it, idx) => (
+                  <Tr key={idx} className={classnames({ [classes.pending]: it.pending })}>
+                    <Td size={sizes.big}>{it.cryptoAmount} {selected.cryptoCode}</Td>
+                    <Td size={sizes.big}>{it.balance} {selected.cryptoCode}</Td>
+                    <Td size={sizes.big}>{it.fiatValue} {selected.fiatCode}</Td>
+                    <Td size={sizes.date}>{moment(it.date).format('YYYY-MM-DD')}</Td>
+                    <Td size={sizes.time}>{moment(it.date).format('hh:mm:ss')}</Td>
+                    <Td size={sizes.big}>add</Td>
+                  </Tr>
+                ))}
+              </TBody>
+            </Table>
+          </div>
+        )}
       </div>
     </>
   )

new-lamassu-admin/src/pages/Funding.styles.js

@@ -1,4 +1,4 @@
-import { spacer, subheaderColor, placeholderColor, fontColor } from '../styling/variables'
+import { disabledColor2, spacer, subheaderColor, placeholderColor, fontColor } from '../styling/variables'
 
 import typographyStyles from '../components/typography/styles'
 
@@ -18,19 +18,16 @@ export default {
     margin: `0 ${spacer * 8}px 0 ${spacer * 6}px`
   },
   secondSide: {
-    marginTop: -49
+    marginTop: -29
   },
   coinTotal: {
     margin: `${spacer * 1.5}px 0`
   },
-  noMargin: {
-    margin: 0
-  },
   leftSpacer: {
     marginLeft: spacer
   },
   topSpacer: {
-    marginTop: `${spacer * 5}px`
+    marginTop: spacer * 5
   },
   addressWrapper: {
     display: 'flex',
@@ -58,11 +55,21 @@ export default {
     marginRight: 24
   },
   totalPending: {
-    color: fontColor,
     marginTop: 2
   },
   totalTitle: {
     color: placeholderColor,
     marginBottom: 2
+  },
+  table: {
+    marginTop: spacer,
+    marginLeft: spacer * 6
+  },
+  tableLabel: {
+    justifyContent: 'end',
+    marginTop: -38
+  },
+  pending: {
+    backgroundColor: disabledColor2
   }
 }