166 lines
4.2 KiB
JavaScript
166 lines
4.2 KiB
JavaScript
import { toUnit } from '@lamassu/coins/lightUtils'
|
||
import BigNumber from 'bignumber.js'
|
||
import * as R from 'ramda'
|
||
import React from 'react'
|
||
import DataTable from '../../../components/tables/DataTable'
|
||
import { H3, H4, Label1, Label2, P } from '../../../components/typography'
|
||
import TxInIcon from '../../../styling/icons/direction/cash-in.svg?react'
|
||
import TxOutIcon from '../../../styling/icons/direction/cash-out.svg?react'
|
||
|
||
import { ifNotNull } from '../../../utils/nullCheck'
|
||
import { formatDate } from '../../../utils/timezones'
|
||
|
||
import CopyToClipboard from '../../../components/CopyToClipboard.jsx'
|
||
|
||
const TransactionsList = ({ customer, data, loading }) => {
|
||
const LastTxIcon = customer.lastTxClass === 'cashOut' ? TxOutIcon : TxInIcon
|
||
const hasData = !(R.isEmpty(data) || R.isNil(data))
|
||
const { lastUsedMachineName } = customer
|
||
|
||
const timezone = Intl.DateTimeFormat().resolvedOptions().timeZone
|
||
|
||
const summaryElements = [
|
||
{
|
||
header: 'Transactions',
|
||
size: 127,
|
||
value: ifNotNull(
|
||
customer.totalTxs,
|
||
`${Number.parseInt(customer.totalTxs)}`,
|
||
),
|
||
},
|
||
{
|
||
header: 'Transaction volume',
|
||
size: 167,
|
||
value: ifNotNull(
|
||
customer.totalSpent,
|
||
`${Number.parseFloat(customer.totalSpent)} ${customer.lastTxFiatCode}`,
|
||
),
|
||
},
|
||
{
|
||
header: 'Last active',
|
||
size: 142,
|
||
value:
|
||
!R.isNil(timezone) &&
|
||
((customer.lastActive &&
|
||
formatDate(customer.lastActive, timezone, 'yyyy-MM-dd')) ??
|
||
''),
|
||
},
|
||
{
|
||
header: 'Last transaction',
|
||
size: 198,
|
||
value: ifNotNull(
|
||
customer.lastTxFiat,
|
||
<>
|
||
<LastTxIcon className="mr-3" />
|
||
{`${Number.parseFloat(customer.lastTxFiat)}
|
||
${customer.lastTxFiatCode}`}
|
||
</>,
|
||
),
|
||
},
|
||
{
|
||
header: 'Last used machine',
|
||
size: 198,
|
||
value: ifNotNull(lastUsedMachineName, <>{lastUsedMachineName}</>),
|
||
},
|
||
]
|
||
|
||
const tableElements = [
|
||
{
|
||
width: 40,
|
||
view: it => (
|
||
<>
|
||
{it.txClass === 'cashOut' ? (
|
||
<TxOutIcon className="mr-3" />
|
||
) : (
|
||
<TxInIcon className="mr-3" />
|
||
)}
|
||
</>
|
||
),
|
||
},
|
||
{
|
||
header: 'Machine',
|
||
width: 160,
|
||
view: R.path(['machineName']),
|
||
},
|
||
{
|
||
header: 'Transaction ID',
|
||
width: 145,
|
||
view: it => (
|
||
<CopyToClipboard className="font-museo whitespace-nowrap overflow-hidden text-ellipsis">
|
||
{it.id}
|
||
</CopyToClipboard>
|
||
),
|
||
},
|
||
{
|
||
header: 'Cash',
|
||
width: 155,
|
||
textAlign: 'right',
|
||
view: it => (
|
||
<>
|
||
{`${Number.parseFloat(it.fiat)} `}
|
||
<Label2 inline>{it.fiatCode}</Label2>
|
||
</>
|
||
),
|
||
},
|
||
{
|
||
header: 'Crypto',
|
||
width: 145,
|
||
textAlign: 'right',
|
||
view: it => (
|
||
<>
|
||
{`${toUnit(new BigNumber(it.cryptoAtoms), it.cryptoCode).toFormat(
|
||
5,
|
||
)} `}
|
||
<Label2 inline>{it.cryptoCode}</Label2>
|
||
</>
|
||
),
|
||
},
|
||
{
|
||
header: 'Date',
|
||
width: 100,
|
||
view: it => formatDate(it.created, timezone, 'yyyy‑MM‑dd'),
|
||
},
|
||
{
|
||
header: 'Time (h:m:s)',
|
||
width: 130,
|
||
view: it => formatDate(it.created, timezone, 'HH:mm:ss'),
|
||
},
|
||
]
|
||
|
||
return (
|
||
<>
|
||
<H3>Transactions</H3>
|
||
<div className="flex flex-col">
|
||
<div className="flex mt-auto">
|
||
{summaryElements.map(({ size, header }, idx) => (
|
||
<Label1
|
||
noMargin
|
||
key={idx}
|
||
className="text-comet mb-1 mr-6"
|
||
style={{ width: size }}>
|
||
{header}
|
||
</Label1>
|
||
))}
|
||
</div>
|
||
<div className="flex">
|
||
{summaryElements.map(({ size, value }, idx) => (
|
||
<P noMargin key={idx} className="h-4 mr-6" style={{ width: size }}>
|
||
{value}
|
||
</P>
|
||
))}
|
||
</div>
|
||
</div>
|
||
<div className="flex mt-5">
|
||
{loading ? (
|
||
<H4>Loading</H4>
|
||
) : hasData ? (
|
||
<DataTable elements={tableElements} data={data} />
|
||
) : (
|
||
<H4>No transactions so far</H4>
|
||
)}
|
||
</div>
|
||
</>
|
||
)
|
||
}
|
||
|
||
export default TransactionsList
|