Chore: make notification center UI

Chore: fiatBalancesNotify refactor

Chore: removed now-unused code in some files

Feat: change column "detail" in database to use jsonb

Chore: add notification center background and button

Chore: notifications screen scaffolding

Fix: change position of notification UI

Feat: join backend and frontend

Feat: notification icons and machine names

Feat: add clear all button, stripe overlay on invalid notification

Fix: rework notification styles

Feat: use popper to render notifications

Feat: make notification center UI

Fix: fix css on notification center

Fix: fix invalidateNotification

Chore: apply PR requested changes

Fix: PR fixes

Fix: make toggleable body/root styles be handled by react

Chore: delete old notifier file

Fix: undo variable name changes for cryptobalance notifs

new-lamassu-admin/src/components/NotificationCenter/NotificationRow.js

@@ -0,0 +1,82 @@
+import Grid from '@material-ui/core/Grid'
+import { makeStyles } from '@material-ui/core/styles'
+import classnames from 'classnames'
+import prettyMs from 'pretty-ms'
+import React from 'react'
+
+import { Label1, Label2, TL2 } from 'src/components/typography'
+import { ReactComponent as Wrench } from 'src/styling/icons/action/wrench/zodiac.svg'
+import { ReactComponent as Transaction } from 'src/styling/icons/arrow/transaction.svg'
+import { ReactComponent as StripesSvg } from 'src/styling/icons/stripes.svg'
+import { ReactComponent as WarningIcon } from 'src/styling/icons/warning-icon/tomato.svg'
+
+import styles from './NotificationCenter.styles'
+const useStyles = makeStyles(styles)
+
+const types = {
+  highValueTransaction: { display: 'Transactions', icon: <Transaction /> },
+  fiatBalance: { display: 'Maintenance', icon: <Wrench /> },
+  cryptoBalance: { display: 'Maintenance', icon: <Wrench /> },
+  compliance: { display: 'Compliance', icon: <WarningIcon /> },
+  error: { display: 'Error', icon: <WarningIcon /> }
+}
+
+const NotificationRow = ({
+  id,
+  type,
+  detail,
+  message,
+  deviceName,
+  created,
+  read,
+  valid,
+  onClear
+}) => {
+  const classes = useStyles()
+
+  const buildType = () => {
+    return types[type].display
+  }
+
+  const buildAge = () => {
+    const createdDate = new Date(created)
+    const interval = +new Date() - createdDate
+    return prettyMs(interval, { compact: true, verbose: true })
+  }
+
+  return (
+    <Grid
+      container
+      className={classnames(
+        classes.notificationRow,
+        !read && valid ? classes.unread : ''
+      )}>
+      <Grid item xs={2} className={classes.notificationRowIcon}>
+        {types[type].icon}
+      </Grid>
+      <Grid item container xs={7} direction="row">
+        <Grid item xs={12}>
+          <Label2 className={classes.notificationTitle}>
+            {`${buildType()} ${deviceName ? '- ' + deviceName : ''}`}
+          </Label2>
+        </Grid>
+        <Grid item xs={12}>
+          <TL2 className={classes.notificationBody}>{message}</TL2>
+        </Grid>
+        <Grid item xs={12}>
+          <Label1 className={classes.notificationSubtitle}>
+            {buildAge(created)}
+          </Label1>
+        </Grid>
+      </Grid>
+      <Grid item xs={3} style={{ zIndex: 1 }}>
+        {!read && (
+          <div onClick={() => onClear(id)} className={classes.unreadIcon} />
+        )}
+      </Grid>
+      {!valid && <StripesSvg className={classes.stripes} />}
+    </Grid>
+  )
+}
+
+export default NotificationRow