feat: transactions page (#342)

* 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.

new-lamassu-admin/src/pages/Transactions/CopyToClipboard.js

@@ -0,0 +1,68 @@
+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