fix: increased width of inputs so they doesn't cut off text

fix: reenabled the cash-out display component with 500 notes max bot and top

fix: fixed repeated import on new-admin config accounts

feat: reenabled the cash-out display component

new-lamassu-admin/src/components/inputs/cashbox/Cashbox.styles.js

@@ -18,7 +18,7 @@ const cashboxStyles = {
   cashbox: {
     borderColor: colorPicker,
     backgroundColor: colorPicker,
-    height: 34,
+    height: 118,
     width: 80,
     border: '2px solid',
     textAlign: 'end',

new-lamassu-admin/src/pages/Notifications/Notifications.js

@@ -36,6 +36,8 @@ const SAVE_CONFIG = gql`
   }
 `
 
+const FIELDS_WIDTH = 130
+
 const Notifications = ({ name: SCREEN_KEY }) => {
   const [section, setSection] = useState(null)
   const [error, setError] = useState(null)
@@ -97,19 +99,19 @@ const Notifications = ({ name: SCREEN_KEY }) => {
       </Section>
 
       <Section title="Transaction alerts" error={error && section === 'tx'}>
-        <TransactionAlerts section="tx" />
+        <TransactionAlerts section="tx" fieldWidth={FIELDS_WIDTH} />
       </Section>
 
       <Section title="Fiat balance alerts" error={error && section === 'fiat'}>
-        <FiatBalanceAlerts section="fiat" />
+        <FiatBalanceAlerts section="fiat" max={500} fieldWidth={50} />
         <FiatBalanceOverrides section="fiat" />
       </Section>
 
       <Section
         title="Crypto balance alerts"
         error={error && section === 'crypto'}>
-        <CryptoBalanceAlerts section="crypto" />
+        <CryptoBalanceAlerts section="crypto" fieldWidth={FIELDS_WIDTH} />
-        <CryptoBalanceOverrides section="crypto" />
+        <CryptoBalanceOverrides section="crypto" fieldWidth={FIELDS_WIDTH} />
       </Section>
     </NotificationsCtx.Provider>
   )

new-lamassu-admin/src/pages/Notifications/sections/CryptoBalanceAlerts.js

@@ -11,7 +11,7 @@ const HIGH_BALANCE_KEY = 'cryptoHighBalance'
 
 const useStyles = makeStyles(styles)
 
-const CryptoBalanceAlerts = ({ section }) => {
+const CryptoBalanceAlerts = ({ section, fieldWidth }) => {
   const classes = useStyles()
 
   const {
@@ -37,6 +37,7 @@ const CryptoBalanceAlerts = ({ section }) => {
         editing={isEditing(LOW_BALANCE_KEY)}
         disabled={isDisabled(LOW_BALANCE_KEY)}
         setEditing={it => setEditing(LOW_BALANCE_KEY, it)}
+        width={fieldWidth}
       />
 
       <div className={classes.vertSeparator} />
@@ -53,6 +54,7 @@ const CryptoBalanceAlerts = ({ section }) => {
         editing={isEditing(HIGH_BALANCE_KEY)}
         disabled={isDisabled(HIGH_BALANCE_KEY)}
         setEditing={it => setEditing(HIGH_BALANCE_KEY, it)}
+        width={fieldWidth}
       />
     </div>
   )

new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.js

@@ -5,6 +5,7 @@ import * as Yup from 'yup'
 
 import { TL2 } from 'src/components/typography'
 
+import { Cashbox } from '../../../components/inputs/cashbox/Cashbox'
 import NotificationsCtx from '../NotificationsContext'
 import Header from '../components/EditHeader'
 import EditableNumber from '../components/EditableNumber'
@@ -13,20 +14,13 @@ import styles from './FiatBalanceAlerts.styles.js'
 
 const useStyles = makeStyles(styles)
 
-const schema = Yup.object().shape({
-  fiatBalanceCassette1: Yup.number()
-    .integer()
-    .min(0)
-    .required(),
-  fiatBalanceCassette2: Yup.number()
-    .integer()
-    .min(0)
-    .required()
-})
-
 const NAME = 'fiatBalanceAlerts'
 
-const FiatBalance = ({ section }) => {
+const FiatBalance = ({
+  section,
+  max = Number.MAX_SAFE_INTEGER,
+  fieldWidth = 80
+}) => {
   const { isEditing, isDisabled, setEditing, data, save } = useContext(
     NotificationsCtx
   )
@@ -34,6 +28,27 @@ const FiatBalance = ({ section }) => {
 
   const editing = isEditing(NAME)
 
+  const schema = Yup.object().shape({
+    fiatBalanceCassette1: Yup.number()
+      .integer()
+      .min(0)
+      .max(max)
+      .required(),
+    fiatBalanceCassette2: Yup.number()
+      .integer()
+      .min(0)
+      .max(max)
+      .required()
+  })
+
+  const fiatBalanceCassette1Percent = data?.fiatBalanceCassette1
+    ? (100 * data?.fiatBalanceCassette1) / max
+    : 0
+
+  const fiatBalanceCassette2Percent = data?.fiatBalanceCassette2
+    ? (100 * data?.fiatBalanceCassette2) / max
+    : 0
+
   return (
     <Formik
       enableReinitialize
@@ -55,6 +70,9 @@ const FiatBalance = ({ section }) => {
         />
         <div className={classes.wrapper}>
           <div className={classes.first}>
+            <div className={classes.row}>
+              <Cashbox percent={fiatBalanceCassette1Percent} cashOut />
+              <div className={classes.col2}>
                 <TL2 className={classes.title}>Cassette 1 (Top)</TL2>
                 <EditableNumber
                   label="Alert me under"
@@ -62,9 +80,14 @@ const FiatBalance = ({ section }) => {
                   editing={editing}
                   displayValue={x => (x === '' ? '-' : x)}
                   decoration="notes"
+                  width={fieldWidth}
                 />
               </div>
-          <div>
+            </div>
+          </div>
+          <div className={classes.row}>
+            <Cashbox percent={fiatBalanceCassette2Percent} cashOut />
+            <div className={classes.col2}>
               <TL2 className={classes.title}>Cassette 2 (Bottom)</TL2>
               <EditableNumber
                 label="Alert me under"
@@ -72,9 +95,11 @@ const FiatBalance = ({ section }) => {
                 editing={editing}
                 displayValue={x => (x === '' ? '-' : x)}
                 decoration="notes"
+                width={fieldWidth}
               />
             </div>
           </div>
+        </div>
       </Form>
     </Formik>
   )

new-lamassu-admin/src/pages/Notifications/sections/FiatBalanceAlerts.styles.js

@@ -6,9 +6,20 @@ export default {
     marginBottom: 36
   },
   first: {
-    width: 200
+    width: 236
   },
   title: {
     marginTop: 0
+  },
+  row: {
+    width: 183,
+    display: 'grid',
+    gridTemplateColumns: 'repeat(2,1fr)',
+    gridTemplateRows: '1fr',
+    gridColumnGap: 18,
+    gridRowGap: 0
+  },
+  col2: {
+    width: 136
   }
 }

new-lamassu-admin/src/pages/Notifications/sections/TransactionAlerts.js

@@ -4,13 +4,14 @@ import SingleFieldEditableNumber from '../components/SingleFieldEditableNumber'
 
 const NAME = 'highValueTransaction'
 
-const TransactionAlerts = ({ section }) => {
+const TransactionAlerts = ({ section, fieldWidth }) => {
   return (
     <SingleFieldEditableNumber
       section={section}
       title="High value transaction"
       label="Alert me over"
       name={NAME}
+      width={fieldWidth}
     />
   )
 }