diff --git a/new-lamassu-admin/src/components/TableLabel.js b/new-lamassu-admin/src/components/TableLabel.js
new file mode 100644
index 00000000..9227b88c
--- /dev/null
+++ b/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 (
+
+ {color &&
}
+
{label}
+
+ )
+}
+
+export default TableLabel
diff --git a/new-lamassu-admin/src/components/fake-table/Table.js b/new-lamassu-admin/src/components/fake-table/Table.js
index 47f4291d..5f46cef4 100644
--- a/new-lamassu-admin/src/components/fake-table/Table.js
+++ b/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 (
<>
-
+
{children}
{error && {errorMessage}
}
diff --git a/new-lamassu-admin/src/components/typography/styles.js b/new-lamassu-admin/src/components/typography/styles.js
index 2c4ed79a..06a1eabe 100644
--- a/new-lamassu-admin/src/components/typography/styles.js
+++ b/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,
diff --git a/new-lamassu-admin/src/pages/Funding.js b/new-lamassu-admin/src/pages/Funding.js
index 13e76ffc..9e488062 100644
--- a/new-lamassu-admin/src/pages/Funding.js
+++ b/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 (
<>
- Funding
+
+
Funding
+ {/* */}
+
{
{data && data.length && (
Total Crypto Balance
-
+
{getConfirmedTotal(data)} {data[0].fiatCode}
(+{getPendingTotal(data)} pending)
)}
- {selected && (
+ {selected && !viewHistory && (
Balance ({selected.display})
@@ -125,6 +161,33 @@ const Funding = () => {
)}
+ {selected && viewHistory && (
+
+
+
+
+ | Amount Entered |
+ Balance After |
+ Cash Value |
+ Date |
+ Time (h:m:s) |
+ Performed By |
+
+
+ {fundingHistory.map((it, idx) => (
+
+ | {it.cryptoAmount} {selected.cryptoCode} |
+ {it.balance} {selected.cryptoCode} |
+ {it.fiatValue} {selected.fiatCode} |
+ {moment(it.date).format('YYYY-MM-DD')} |
+ {moment(it.date).format('hh:mm:ss')} |
+ add |
+
+ ))}
+
+
+
+ )}
>
)
diff --git a/new-lamassu-admin/src/pages/Funding.styles.js b/new-lamassu-admin/src/pages/Funding.styles.js
index 107d23de..a878f934 100644
--- a/new-lamassu-admin/src/pages/Funding.styles.js
+++ b/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
}
}