fix: ui and chromium compatibility

bin/lamassu-register

@@ -18,7 +18,7 @@ if (!name) {
 
 login.generateOTP(name).then(otp => {
   if (domain === 'localhost') {
-    console.log(`https://${domain}:3000/register?otp=${otp}`)
+    console.log(`https://${domain}:3001/register?otp=${otp}`)
   } else {
     console.log(`https://${domain}/register?otp=${otp}`)
   }

new-lamassu-admin/shell.nix

@@ -1,15 +0,0 @@
-with import (fetchTarball {
-  name = "nixpkgs-20.09";
-  url = https://github.com/NixOS/nixpkgs/archive/0b8799ecaaf0dc6b4c11583a3c96ca5b40fcfdfb.tar.gz;
-  sha256 = "11m4aig6cv0zi3gbq2xn9by29cfvnsxgzf9qsvz67qr0yq29ryyz";
-}) {};
-
-stdenv.mkDerivation {
-    name = "node";
-    buildInputs = [
-        nodejs-14_x
-    ];
-    shellHook = ''
-        export PATH="$PWD/node_modules/.bin/:$PATH"
-    '';
-}

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

@@ -128,6 +128,9 @@ const Popover = ({
     arrow: {
       enabled: true,
       element: arrowRef
+    },
+    computeStyle: {
+      gpuAcceleration: false
     }
   })
 

new-lamassu-admin/src/components/buttons/IconButton.js

@@ -8,7 +8,7 @@ const styles = {
   }),
   root: {
     '& svg': {
-      viewbox: null
+      flex: 1
     },
     '&:hover': {
       backgroundColor: 'inherit'

new-lamassu-admin/src/components/date-range-picker/Calendar.js

@@ -5,6 +5,7 @@ import React, { useState } from 'react'
 
 import typographyStyles from 'src/components/typography/styles'
 import { ReactComponent as Arrow } from 'src/styling/icons/arrow/month_change.svg'
+import { ReactComponent as RightArrow } from 'src/styling/icons/arrow/month_change_right.svg'
 import { primaryColor, zircon } from 'src/styling/variables'
 
 import Tile from './Tile'
@@ -17,6 +18,9 @@ const styles = {
     flexDirection: 'column',
     alignItems: 'center'
   },
+  button: {
+    outline: 'none'
+  },
   navbar: {
     extend: p,
     display: 'flex',
@@ -143,7 +147,9 @@ const Calendar = ({ minDate, maxDate, handleSelect, ...props }) => {
   return (
     <div className={classes.wrapper}>
       <div className={classes.navbar}>
-        <button onClick={() => handleNavPrev(currentDisplayedMonth)}>
+        <button
+          className={classes.button}
+          onClick={() => handleNavPrev(currentDisplayedMonth)}>
           <Arrow />
         </button>
         <span>
@@ -151,8 +157,10 @@ const Calendar = ({ minDate, maxDate, handleSelect, ...props }) => {
             'MMMM'
           )} ${currentDisplayedMonth.format('YYYY')}`}
         </span>
-        <button onClick={() => handleNavNext(currentDisplayedMonth)}>
+        <button
-          <Arrow transform="rotate(180)" />
+          className={classes.button}
+          onClick={() => handleNavNext(currentDisplayedMonth)}>
+          <RightArrow />
         </button>
       </div>
       <table className={classes.table}>

new-lamassu-admin/src/components/date-range-picker/Tile.js

@@ -22,6 +22,7 @@ const styles = {
     overflow: 'hidden'
   },
   button: {
+    outline: 'none',
     extend: label1,
     border: 'none',
     cursor: 'pointer',

new-lamassu-admin/src/components/editableTable/Row.js

@@ -88,13 +88,7 @@ const ActionCol = ({ disabled, editing }) => {
   )
 }
 
-const ECol = ({
+const ECol = ({ editing, focus, config, extraPaddingRight, extraPadding }) => {
-  editing,
-  focus,
-  config,
-  extraPaddingRight,
-  extraPaddingLeft
-}) => {
   const {
     name,
     bypassField,
@@ -134,7 +128,7 @@ const ECol = ({
     <Td
       className={{
         [classes.extraPaddingRight]: extraPaddingRight,
-        [classes.extraPaddingLeft]: extraPaddingLeft,
+        [classes.extraPadding]: extraPadding,
         [classes.withSuffix]: suffix
       }}
       width={width}
@@ -189,7 +183,7 @@ const ERow = ({ editing, disabled, lastOfGroup }) => {
   const innerElements = shouldStripe ? groupStriped(elements) : elements
   const [toSHeader] = R.partition(R.has('doubleHeader'))(elements)
 
-  const extraPaddingLeftIndex = toSHeader?.length
+  const extraPaddingIndex = toSHeader?.length
     ? R.indexOf(toSHeader[0], elements)
     : -1
 
@@ -219,7 +213,7 @@ const ERow = ({ editing, disabled, lastOfGroup }) => {
             editing={editing}
             focus={idx === elementToFocusIndex && editing}
             extraPaddingRight={extraPaddingRightIndex === idx}
-            extraPaddingLeft={extraPaddingLeftIndex === idx}
+            extraPadding={extraPaddingIndex === idx}
           />
         )
       })}

new-lamassu-admin/src/components/editableTable/Row.styles.js

@@ -7,11 +7,12 @@ export default {
   lastOfGroup: {
     marginBottom: 24
   },
-  extraPaddingLeft: {
+  extraPadding: {
-    paddingLeft: 35
+    paddingLeft: 35,
+    paddingRight: 30
   },
   extraPaddingRight: {
-    paddingRight: 45
+    paddingRight: 39
   },
   withSuffix: ({ textAlign }) => {
     const justifyContent = textAlign === 'right' ? 'end' : textAlign

new-lamassu-admin/src/components/inputs/formik/Autocomplete.js

@@ -10,10 +10,10 @@ const AutocompleteFormik = ({ options, onChange, ...props }) => {
   const { name, onBlur, value } = props.field
   const { touched, errors, setFieldValue, setFieldTouched } = props.form
   const error = !!(touched[name] && errors[name])
-  const { initialValues } = useFormikContext()
+  const { initialValues, values } = useFormikContext()
 
   const innerOptions =
-    R.type(options) === 'Function' ? options(initialValues) : options
+    R.type(options) === 'Function' ? options(initialValues, values) : options
 
   const innerOnBlur = event => {
     name && setFieldTouched(name, true)

new-lamassu-admin/src/components/tables/DataTable.styles.js

@@ -2,6 +2,7 @@ import { zircon } from 'src/styling/variables'
 
 export default {
   expandButton: {
+    outline: 'none',
     border: 'none',
     backgroundColor: 'transparent',
     cursor: 'pointer',

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

@@ -51,7 +51,12 @@ const Commissions = ({ name: SCREEN_KEY }) => {
   )
 
   const commission = config && !R.isEmpty(config) ? config : defaults
-  const commissionOverrides = commission.overrides ?? []
+  const commissionOverrides = commission?.overrides ?? []
+
+  const orderedCommissionsOverrides = R.sortWith([
+    R.ascend(it => (R.propEq('machine', 'ALL_MACHINES')(it) ? 0 : 1)),
+    R.ascend(R.prop('machine'))
+  ])(commissionOverrides)
 
   const save = it => {
     const config = toNamespace(SCREEN_KEY)(it.commissions[0])
@@ -96,8 +101,8 @@ const Commissions = ({ name: SCREEN_KEY }) => {
           initialValues={overridesDefaults}
           save={saveOverrides}
           validationSchema={OverridesSchema}
-          data={commissionOverrides}
+          data={orderedCommissionsOverrides}
-          elements={overrides(data, currency, commissionOverrides)}
+          elements={overrides(data, currency, orderedCommissionsOverrides)}
           setEditing={onEditingOverrides}
           forceDisable={isEditingDefault}
         />

new-lamassu-admin/src/pages/Commissions/helper.js

@@ -57,7 +57,7 @@ const getOverridesFields = (getData, currency, auxElements) => {
     return R.differenceWith(
       (x, y) => x.code === y && !it?.cryptoCurrencies.includes(x.code),
       cryptoData,
-      overridenMachineCoins[it?.machine]
+      overridenMachineCoins[it?.machine] ?? []
     )
   }
 
@@ -84,7 +84,7 @@ const getOverridesFields = (getData, currency, auxElements) => {
       view: displayCodeArray(cryptoData),
       input: Autocomplete,
       inputProps: {
-        options: it => suggestionFilter(it, cryptoData),
+        options: (...[, it]) => suggestionFilter(it, cryptoData),
         valueProp: 'code',
         getLabel: R.path(['code']),
         multiple: true

new-lamassu-admin/src/pages/Locales/helper.js

@@ -38,6 +38,12 @@ const allFields = (getData, enableCoin, auxElements = []) => {
   const currencyData = getData(['currencies'])
   const languageData = getData(['languages'])
   const cryptoData = getData(['cryptoCurrencies'])
+
+  const findSuggestion = it => {
+    const machine = R.find(R.propEq('deviceId', it.machine))(machineData)
+    return machine ? [machine] : []
+  }
+
   return [
     {
       name: 'machine',
@@ -47,9 +53,7 @@ const allFields = (getData, enableCoin, auxElements = []) => {
       input: Autocomplete,
       inputProps: {
         options: it =>
-          R.concat(it?.machine ? [it.machine] : [])(
+          R.concat(findSuggestion(it))(suggestionFilter(machineData)),
-            suggestionFilter(machineData)
-          ),
         valueProp: 'deviceId',
         getLabel: R.path(['name'])
       }

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

@@ -107,7 +107,7 @@ const Triggers = () => {
         marginBottom={2}
         className={classes.tableWidth}
         display="flex"
-        justifyContent="end">
+        justifyContent="flex-end">
         {!loading && !R.isEmpty(triggers) && (
           <Link color="primary" onClick={() => setWizard(true)}>
             + Add new trigger

new-lamassu-admin/src/styling/icons/arrow/month_change_right.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 59.1 (86144) - https://sketch.com -->
+    <desc>Created with Sketch.</desc>
+    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="pop-up/action/download-logs/date-range-copy-2" transform="translate(-20.000000, -187.000000)">
+            <g id="icon/sf-contain-b-copy-5" transform="translate(30.000000, 197.000000) rotate(270.000000) translate(-30.000000, -197.000000) translate(20.000000, 187.000000)">
+                <g id="icon/sf-small/wizzard" stroke-linecap="round" stroke-linejoin="round">
+                    <g transform="translate(6.666667, 6.000000)" id="Group">
+                        <g>
+                            <polyline id="Path-3" stroke="#1B2559" stroke-width="2" points="0 4.83333333 3.33333333 8.16666667 6.66666667 4.83333333"></polyline>
+                            <line x1="3.33333333" y1="0.25" x2="3.33333333" y2="6.5" id="Path-4" stroke="#1B2559" stroke-width="2"></line>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>