partial: customer page css migration
This commit is contained in:
parent
926b7e6933
commit
d7b2e12f94
48 changed files with 524 additions and 2183 deletions
|
|
@ -1,7 +1,5 @@
|
|||
import { toUnit } from '@lamassu/coins/lightUtils'
|
||||
import { makeStyles } from '@mui/styles'
|
||||
import BigNumber from 'bignumber.js'
|
||||
import classnames from 'classnames'
|
||||
import * as R from 'ramda'
|
||||
import React from 'react'
|
||||
import DataTable from 'src/components/tables/DataTable'
|
||||
|
|
@ -13,21 +11,13 @@ import { ifNotNull } from 'src/utils/nullCheck'
|
|||
import { formatDate } from 'src/utils/timezones'
|
||||
|
||||
import CopyToClipboard from '../../Transactions/CopyToClipboard'
|
||||
import mainStyles from '../CustomersList.styles'
|
||||
|
||||
const useStyles = makeStyles(mainStyles)
|
||||
|
||||
const TransactionsList = ({ customer, data, loading }) => {
|
||||
const classes = useStyles()
|
||||
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 tableSpacingClasses = {
|
||||
[classes.titleAndButtonsContainer]: loading || (!loading && !hasData),
|
||||
[classes.txTableSpacing]: !loading && hasData
|
||||
}
|
||||
|
||||
const summaryElements = [
|
||||
{
|
||||
|
|
@ -61,7 +51,7 @@ const TransactionsList = ({ customer, data, loading }) => {
|
|||
value: ifNotNull(
|
||||
customer.lastTxFiat,
|
||||
<>
|
||||
<LastTxIcon className={classes.icon} />
|
||||
<LastTxIcon className="mr-3" />
|
||||
{`${Number.parseFloat(customer.lastTxFiat)}
|
||||
${customer.lastTxFiatCode}`}
|
||||
</>
|
||||
|
|
@ -80,9 +70,9 @@ const TransactionsList = ({ customer, data, loading }) => {
|
|||
view: it => (
|
||||
<>
|
||||
{it.txClass === 'cashOut' ? (
|
||||
<TxOutIcon className={classes.txClassIconLeft} />
|
||||
<TxOutIcon className="mr-3" />
|
||||
) : (
|
||||
<TxInIcon className={classes.txClassIconLeft} />
|
||||
<TxInIcon className="mr-3" />
|
||||
)}
|
||||
</>
|
||||
)
|
||||
|
|
@ -96,7 +86,9 @@ const TransactionsList = ({ customer, data, loading }) => {
|
|||
header: 'Transaction ID',
|
||||
width: 145,
|
||||
view: it => (
|
||||
<CopyToClipboard className={classes.txId}>{it.id}</CopyToClipboard>
|
||||
<CopyToClipboard className="font-museo whitespace-nowrap overflow-hidden text-ellipsis">
|
||||
{it.id}
|
||||
</CopyToClipboard>
|
||||
)
|
||||
},
|
||||
{
|
||||
|
|
@ -144,7 +136,7 @@ const TransactionsList = ({ customer, data, loading }) => {
|
|||
<Label1
|
||||
noMargin
|
||||
key={idx}
|
||||
className={classes.txSummaryLabel}
|
||||
className="text-comet mb-1 mr-6"
|
||||
style={{ width: size }}>
|
||||
{header}
|
||||
</Label1>
|
||||
|
|
@ -152,28 +144,21 @@ const TransactionsList = ({ customer, data, loading }) => {
|
|||
</div>
|
||||
<div className="flex">
|
||||
{summaryElements.map(({ size, value }, idx) => (
|
||||
<P
|
||||
noMargin
|
||||
key={idx}
|
||||
className={classes.txSummaryValue}
|
||||
style={{ width: size }}>
|
||||
<P noMargin key={idx} className="h-4 mr-6" style={{ width: size }}>
|
||||
{value}
|
||||
</P>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
<div className={classes.titleWrapper}>
|
||||
<div className={classnames(tableSpacingClasses)}>
|
||||
{loading ? (
|
||||
<H4>Loading</H4>
|
||||
) : hasData ? (
|
||||
''
|
||||
) : (
|
||||
<H4>No transactions so far</H4>
|
||||
)}
|
||||
</div>
|
||||
<div className="flex mt-5">
|
||||
{loading ? (
|
||||
<H4>Loading</H4>
|
||||
) : hasData ? (
|
||||
<DataTable elements={tableElements} data={data} />
|
||||
) : (
|
||||
<H4>No transactions so far</H4>
|
||||
)}
|
||||
</div>
|
||||
{hasData && <DataTable elements={tableElements} data={data} />}
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue