8334bd274f
* feat: transactions page * fix: remove unused txHash function * refactor: rewrite transactions sql queries * fix: use left instead of inner join on txs * fix: change expandable table logic * fix: add other coins * refactor: move log download function to component * refactor: use name values in RadioGroup * fix: assorted fixes * feat: virtualize expandable table * fix: clean up imports * fix: remove border radius * fix: move formatting out of CopyToClipboard And use CSS instead of JS to format. * fix: remove customer's last name formatting This was using lodash's string case functions, which produce unwanted results if, for instance, a user has a double-barrel last name.
68 lines
1.9 KiB
JavaScript
68 lines
1.9 KiB
JavaScript
import React, { useState, useEffect } from 'react'
|
|
import classnames from 'classnames'
|
|
import { CopyToClipboard as ReactCopyToClipboard } from 'react-copy-to-clipboard'
|
|
import { replace } from 'lodash/fp'
|
|
import { makeStyles } from '@material-ui/core/styles'
|
|
|
|
import { cpcStyles } from './Transactions.styles'
|
|
|
|
import Popover from '../../components/Popper'
|
|
import { ReactComponent as CopyIcon } from '../../styling/icons/action/copy/copy.svg'
|
|
import { comet } from '../../styling/variables'
|
|
|
|
const CopyToClipboard = ({ className, children, ...props }) => {
|
|
const [anchorEl, setAnchorEl] = useState(null)
|
|
|
|
useEffect(() => {
|
|
if (anchorEl) setTimeout(() => setAnchorEl(null), 3000)
|
|
}, [anchorEl])
|
|
|
|
const useStyles = makeStyles(cpcStyles)
|
|
|
|
const classes = useStyles()
|
|
|
|
const handleClick = event => {
|
|
setAnchorEl(anchorEl ? null : event.currentTarget)
|
|
}
|
|
|
|
const handleClose = () => {
|
|
setAnchorEl(null)
|
|
}
|
|
|
|
const open = Boolean(anchorEl)
|
|
const id = open ? 'simple-popper' : undefined
|
|
|
|
return (
|
|
<div className={classes.wrapper}>
|
|
{children && (
|
|
<>
|
|
<div className={classnames(classes.address, className)}>
|
|
{children}
|
|
</div>
|
|
<div className={classes.buttonWrapper}>
|
|
<ReactCopyToClipboard
|
|
text={replace(/\s/g, '')(children)}
|
|
>
|
|
<button aria-describedby={id} onClick={(event) => handleClick(event)}><CopyIcon /></button>
|
|
</ReactCopyToClipboard>
|
|
</div>
|
|
<Popover
|
|
id={id}
|
|
open={open}
|
|
anchorEl={anchorEl}
|
|
onClose={handleClose}
|
|
arrowSize={3}
|
|
bgColor={comet}
|
|
placement='top'
|
|
>
|
|
<div className={classes.popoverContent}>
|
|
<div>Copied to clipboard!</div>
|
|
</div>
|
|
</Popover>
|
|
</>
|
|
)}
|
|
</div>
|
|
)
|
|
}
|
|
|
|
export default CopyToClipboard
|