Fix: make percentage chart work properly

Fix: code review

Fix: rework components according to PR requested changes

Fix: fix repeated code buildRatesNoCommission

Also renames id to deviceId in transactions quer

Fix: pr requested changes

Chore: move inline styles to classes

Chore: remove comment

Fix: bad equality !process.env.NODE_ENV === 'production'

new-lamassu-admin/src/components/CollapsibleCard.js

@@ -0,0 +1,44 @@
+import Grid from '@material-ui/core/Grid'
+import { makeStyles } from '@material-ui/core/styles'
+import PropTypes from 'prop-types'
+import React from 'react'
+
+import { white } from 'src/styling/variables'
+
+const cardState = Object.freeze({
+  DEFAULT: 'default',
+  SHRUNK: 'shrunk',
+  EXPANDED: 'expanded'
+})
+
+const styles = {
+  card: {
+    wordWrap: 'break-word',
+    boxShadow: '0 0 4px 0 rgba(0, 0, 0, 0.08)',
+    borderRadius: 12,
+    padding: 24,
+    backgroundColor: white
+  }
+}
+
+const useStyles = makeStyles(styles)
+
+const CollapsibleCard = ({ className, state, shrunkComponent, children }) => {
+  const classes = useStyles()
+  return (
+    <div className={className}>
+      <Grid item>
+        <div className={classes.card}>
+          {state === cardState.SHRUNK ? shrunkComponent : children}
+        </div>
+      </Grid>
+    </div>
+  )
+}
+
+CollapsibleCard.propTypes = {
+  shrunkComponent: PropTypes.node.isRequired
+}
+
+export default CollapsibleCard
+export { cardState }