Merge pull request #1771 from RafaelTaranto/refactor/dev-tools-frontend

LAM-1251 Refactor/dev tools frontend

.tool-versions

@@ -0,0 +1 @@
+nodejs 14

lib/blacklist.js

@@ -1,5 +1,6 @@
 const _ = require('lodash/fp')
 
+const { addressDetector } = require('@lamassu/coins')
 const db = require('./db')
 const notifierQueries = require('./notifier/queries')
 
@@ -16,7 +17,18 @@ const deleteFromBlacklist = address => {
   return db.none(sql, [address])
 }
 
+const isValidAddress = address => {
+  try {
+    return !_.isEmpty(addressDetector.getSupportedCoinsForAddress(address).matches)
+  } catch {
+    return false
+  }
+}
+
 const insertIntoBlacklist = address => {
+  if (!isValidAddress(address)) {
+    return Promise.reject(new Error('Invalid address'))
+  }
   return db
     .none(
       'INSERT INTO blacklist (address) VALUES ($1);',

lib/new-admin/middlewares/context.js

@@ -20,7 +20,6 @@ const buildApolloContext = async ({ req, res }) => {
   req.session.user.role = user.role
 
   res.set('lamassu_role', user.role)
-  res.cookie('pazuz_operatoridentifier', base64.encode(user.username))
   res.set('Access-Control-Expose-Headers', 'lamassu_role')
 
   return { req, res }

new-lamassu-admin/.env

@@ -2,4 +2,3 @@ SKIP_PREFLIGHT_CHECK=true
 HTTPS=true
 REACT_APP_TYPE_CHECK_SANCTUARY=false
 PORT=3001
-REACT_APP_BUILD_TARGET=LAMASSU

new-lamassu-admin/.eslintrc.js

@@ -1,29 +0,0 @@
-module.exports = {
-  extends: ['react-app', 'prettier-standard', 'prettier/react'],
-  plugins: ['import'],
-  settings: {
-    'import/resolver': {
-      alias: [['src', './src']]
-    }
-  },
-  rules: {
-    'import/no-anonymous-default-export': [2, { allowObject: true }],
-    'import/order': [
-      'error',
-      {
-        groups: [
-          'builtin',
-          'external',
-          'internal',
-          'parent',
-          'sibling',
-          'index'
-        ],
-        alphabetize: {
-          order: 'asc'
-        },
-        'newlines-between': 'always'
-      }
-    ]
-  }
-}

new-lamassu-admin/.prettierrc

@@ -0,0 +1,8 @@
+{
+  "trailingComma": "none",
+  "tabWidth": 2,
+  "semi": false,
+  "singleQuote": true,
+  "arrowParens": "avoid",
+  "bracketSameLine": true
+}

new-lamassu-admin/.storybook/main.js

@@ -1,10 +0,0 @@
-module.exports = {
-  stories: ['../src/stories/index.js'],
-  addons: [
-    '@storybook/addon-actions',
-    '@storybook/addon-links',
-    '@storybook/addon-knobs',
-    '@storybook/addon-backgrounds',
-    '@storybook/preset-create-react-app'
-  ]
-}

new-lamassu-admin/.tool-versions

@@ -0,0 +1 @@
+nodejs 22

new-lamassu-admin/README.md

@@ -1,5 +1,3 @@
-This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
-
 ## Dev Environment
 
 ### formatting
@@ -10,16 +8,6 @@ The configuration for vscode is already on the repo, all you need to do is insta
 This project has a husky pre commit hook to format the staged changes using our styleguide.
 To take advantage of that make sure to run `git commit` from within this folder.
 
-### Sanctuary
-
-Sanctuary has a runtime typechecker that can make be quite slow, but its turned off by default.
-
-To turn it on add the following line to a `.env.local` file.
-
-```
-REACT_APP_TYPE_CHECK_SANCTUARY=true
-```
-
 ## Available Scripts
 
 In the project directory, you can run:
@@ -36,10 +24,6 @@ You will also see any lint errors in the console.
 
 Runs eslint --fix on the src folder
 
-### `npm storybook`
-
-Runs the storybook server
-
 ### `npm test`
 
 Launches the test runner in the interactive watch mode.<br>

new-lamassu-admin/eslint.config.js

@@ -0,0 +1,39 @@
+import globals from 'globals'
+import pluginJs from '@eslint/js'
+import pluginReact from 'eslint-plugin-react'
+import reactCompiler from 'eslint-plugin-react-compiler'
+import eslintConfigPrettier from 'eslint-config-prettier'
+
+/** @type {import('eslint').Linter.Config[]} */
+export default [
+  {
+    files: ['**/*.{js,mjs,cjs,jsx}'],
+    languageOptions: {
+      ...pluginReact.configs.flat.recommended.languageOptions,
+      globals: {
+        ...globals.browser,
+        process: 'readonly'
+      }
+    },
+    settings: {
+      react: {
+        version: '16'
+      }
+    },
+    plugins: {
+      'react-compiler': reactCompiler
+    }
+  },
+  pluginJs.configs.recommended,
+  pluginReact.configs.flat.recommended,
+  {
+    rules: {
+      'no-unused-vars': 'off',
+      'react/prop-types': 'off',
+      'react/display-name': 'off',
+      'react/no-unescaped-entities': 'off',
+      'react-compiler/react-compiler': 'warn'
+    }
+  },
+  eslintConfigPrettier
+]

new-lamassu-admin/index.html

@@ -0,0 +1,20 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="shortcut icon" href="/favicon.ico" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1, shrink-to-fit=no"
+    />
+    <meta name="robots" content="noindex"/>
+    <meta name="theme-color" content="#000000" />
+    <link rel="manifest" href="/manifest.json" />
+    <title>Lamassu Admin</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root" class="root"></div>
+    <script type="module" src="/src/index.jsx"></script>
+  </body>
+</html>

new-lamassu-admin/package.json

@@ -2,12 +2,13 @@
   "name": "lamassu-admin",
   "version": "0.2.1",
   "license": "../LICENSE",
+  "type": "module",
   "dependencies": {
     "@apollo/react-hooks": "^3.1.3",
-    "@lamassu/coins": "v1.4.0-beta.4",
+    "@lamassu/coins": "v1.5.3",
-    "@material-ui/core": "4.11.0",
+    "@material-ui/core": "4.12.4",
-    "@material-ui/icons": "4.9.1",
+    "@material-ui/icons": "4.11.2",
-    "@material-ui/lab": "^4.0.0-alpha.56",
+    "@material-ui/lab": "^4.0.0-alpha.61",
     "@simplewebauthn/browser": "^3.0.0",
     "@use-hooks/axios": "1.3.0",
     "apollo-cache-inmemory": "^1.6.6",
@@ -27,12 +28,11 @@
     "downshift": "3.3.4",
     "file-saver": "2.0.2",
     "formik": "2.2.0",
-    "google-libphonenumber": "^3.2.22",
     "graphql": "^14.5.8",
-    "graphql-tag": "^2.10.3",
+    "graphql-tag": "^2.12.6",
     "jss-plugin-extend": "^10.0.0",
     "jszip": "^3.6.0",
-    "libphonenumber-js": "^1.7.50",
+    "libphonenumber-js": "^1.11.15",
     "match-sorter": "^4.2.0",
     "pretty-ms": "^2.1.0",
     "qrcode.react": "0.9.3",
@@ -41,69 +41,34 @@
     "react-copy-to-clipboard": "^5.0.2",
     "react-dom": "^16.10.2",
     "react-dropzone": "^11.4.2",
-    "react-material-ui-carousel": "^2.2.7",
+    "react-material-ui-carousel": "^2.3.11",
     "react-number-format": "^4.4.1",
     "react-otp-input": "^2.3.0",
     "react-router-dom": "5.1.2",
     "react-use": "15.3.2",
     "react-virtualized": "^9.21.2",
-    "sanctuary": "^2.0.1",
     "ua-parser-js": "^1.0.2",
     "uuid": "^8.3.2",
-    "yup": "0.32.9"
+    "yup": "1.4.0"
   },
   "devDependencies": {
-    "@storybook/addon-actions": "6.0.26",
+    "@eslint/js": "^9.16.0",
-    "@storybook/addon-backgrounds": "6.0.26",
+    "@vitejs/plugin-react-swc": "^3.7.2",
-    "@storybook/addon-knobs": "6.0.26",
+    "esbuild-plugin-react-virtualized": "^1.0.4",
-    "@storybook/addon-links": "6.0.26",
+    "eslint": "^9.16.0",
-    "@storybook/addons": "6.0.26",
+    "eslint-config-prettier": "^9.1.0",
-    "@storybook/preset-create-react-app": "^3.1.4",
+    "eslint-plugin-react": "^7.37.2",
-    "@storybook/react": "6.0.26",
+    "eslint-plugin-react-compiler": "^19.0.0-beta-df7b47d-20241124",
-    "@welldone-software/why-did-you-render": "^3.3.9",
+    "globals": "^15.13.0",
-    "eslint": "^7.19.0",
+    "lint-staged": "^15.2.10",
-    "eslint-config-prettier": "^6.7.0",
+    "prettier": "3.4.1",
-    "eslint-config-prettier-standard": "^3.0.1",
+    "vite": "^6.0.1",
-    "eslint-config-standard": "^14.1.0",
+    "vite-plugin-svgr": "^4.3.0"
-    "eslint-import-resolver-alias": "^1.1.2",
-    "eslint-plugin-import": "^2.22.1",
-    "eslint-plugin-node": "^10.0.0",
-    "eslint-plugin-prettier": "^3.1.2",
-    "eslint-plugin-promise": "^4.2.1",
-    "eslint-plugin-react": "^7.20.3",
-    "eslint-plugin-standard": "^4.0.1",
-    "husky": "^3.1.0",
-    "lint-staged": "^9.5.0",
-    "patch-package": "^6.2.2",
-    "prettier": "1.19.1",
-    "prettier-config-standard": "^1.0.1",
-    "react-scripts": "4.0.0",
-    "serve": "^11.3.2",
-    "source-map-explorer": "^2.4.2"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged"
-    }
-  },
-  "lint-staged": {
-    "src/**/*.{js,jsx,ts,tsx,json,css,scss,md}": [
-      "eslint --fix",
-      "git add"
-    ]
   },
   "scripts": {
-    "start": "react-scripts start",
+    "start": "vite",
-    "fix": "eslint --fix --ext .js,.md,.json src/",
+    "build": "vite build",
-    "build": "react-scripts build",
+    "preview": "vite preview"
-    "analyze": "source-map-explorer 'build/static/js/*.js'",
-    "test": "react-scripts test",
-    "eject": "react-scripts eject",
-    "storybook": "start-storybook -p 9009 -s public",
-    "postinstall": "patch-package",
-    "build-storybook": "build-storybook -s public",
-    "lamassu": "REACT_APP_BUILD_TARGET=LAMASSU react-scripts start",
-    "pazuz": "REACT_APP_BUILD_TARGET=PAZUZ react-scripts start"
   },
   "browserslist": {
     "production": [
@@ -116,5 +81,9 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
+  },
+  "lint-staged": {
+    "*.{js,jsx,md,json}": "eslint --cache --fix",
+    "*.{js,jsx,css,md,json}": "prettier --write"
   }
 }

new-lamassu-admin/public/index.html

@@ -1,42 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8" />
-    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
-    <meta
-      name="viewport"
-      content="width=device-width, initial-scale=1, shrink-to-fit=no"
-    />
-    <meta name="robots" content="noindex"/>
-    <meta name="theme-color" content="#000000" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
-    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>Lamassu Admin</title>
-  </head>
-  <body>
-    <noscript>You need to enable JavaScript to run this app.</noscript>
-    <div id="root" class="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
-
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
-  </body>
-</html>

new-lamassu-admin/src/App.jsx

@@ -17,21 +17,16 @@ import {
   useHistory,
   BrowserRouter as Router
 } from 'react-router-dom'
-
-import AppContext from 'src/AppContext'
 import Header from 'src/components/layout/Header'
 import Sidebar from 'src/components/layout/Sidebar'
 import TitleSection from 'src/components/layout/TitleSection'
 import { tree, hasSidebar, Routes, getParent } from 'src/routing/routes'
+import ApolloProvider from 'src/utils/apollo'
+
+import AppContext from 'src/AppContext'
 import global from 'src/styling/global'
 import theme from 'src/styling/theme'
 import { backgroundColor, mainWidth } from 'src/styling/variables'
-import ApolloProvider from 'src/utils/apollo'
-
-if (process.env.NODE_ENV !== 'production') {
-  const whyDidYouRender = require('@welldone-software/why-did-you-render')
-  whyDidYouRender(React)
-}
 
 const jss = create({
   plugins: [extendJss(), ...jssPreset().plugins]
@@ -120,17 +115,11 @@ const Main = () => {
       )}
       <main className={classes.wrapper}>
         {sidebar && !is404 && wizardTested && (
-          <Slide
+          <Slide direction="left" in={true} mountOnEnter unmountOnExit>
-            direction="left"
-            in={true}
-            mountOnEnter
-            unmountOnExit
-            children={
             <div>
               <TitleSection title={parent.title}></TitleSection>
             </div>
-            }
+          </Slide>
-          />
         )}
 
         <Grid container className={classes.grid}>

new-lamassu-admin/src/components/Carousel.jsx

@@ -1,10 +1,8 @@
 import { makeStyles } from '@material-ui/core/styles'
 import React, { memo } from 'react'
 import ReactCarousel from 'react-material-ui-carousel'
-
+import LeftArrow from 'src/styling/icons/arrow/carousel-left-arrow.svg?react'
-import { ReactComponent as LeftArrow } from 'src/styling/icons/arrow/carousel-left-arrow.svg'
+import RightArrow from 'src/styling/icons/arrow/carousel-right-arrow.svg?react'
-import { ReactComponent as RightArrow } from 'src/styling/icons/arrow/carousel-right-arrow.svg'
-import { URI } from 'src/utils/apollo'
 
 const useStyles = makeStyles({
   imgWrapper: {
@@ -49,11 +47,11 @@ export const Carousel = memo(({ photosData, slidePhoto }) => {
         next={activeIndex => slidePhoto(activeIndex)}
         prev={activeIndex => slidePhoto(activeIndex)}>
         {photosData.map((item, i) => (
-          <div>
+          <div key={i}>
             <div className={classes.imgWrapper}>
               <img
                 className={classes.imgInner}
-                src={`${URI}/${item?.photoDir}/${item?.path}`}
+                src={`/${item?.photoDir}/${item?.path}`}
                 alt=""
               />
             </div>

new-lamassu-admin/src/components/ConfirmDialog.jsx

@@ -6,11 +6,11 @@ import {
   InputLabel
 } from '@material-ui/core'
 import React, { memo, useState } from 'react'
+import { H4, P } from 'src/components/typography'
+import CloseIcon from 'src/styling/icons/action/close/zodiac.svg?react'
 
 import { Button, IconButton } from 'src/components/buttons'
 import { TextInput } from 'src/components/inputs'
-import { H4, P } from 'src/components/typography'
-import { ReactComponent as CloseIcon } from 'src/styling/icons/action/close/zodiac.svg'
 import { spacer } from 'src/styling/variables'
 
 import ErrorMessage from './ErrorMessage'

new-lamassu-admin/src/components/DeleteDialog.jsx

@@ -5,10 +5,10 @@ import {
   makeStyles
 } from '@material-ui/core'
 import React from 'react'
+import { H4, P } from 'src/components/typography'
+import CloseIcon from 'src/styling/icons/action/close/zodiac.svg?react'
 
 import { Button, IconButton } from 'src/components/buttons'
-import { H4, P } from 'src/components/typography'
-import { ReactComponent as CloseIcon } from 'src/styling/icons/action/close/zodiac.svg'
 import { spacer } from 'src/styling/variables'
 
 import ErrorMessage from './ErrorMessage'

new-lamassu-admin/src/components/ErrorMessage.jsx

@@ -1,8 +1,8 @@
 import { makeStyles } from '@material-ui/core'
 import classnames from 'classnames'
 import React from 'react'
+import ErrorIcon from 'src/styling/icons/warning-icon/tomato.svg?react'
 
-import { ReactComponent as ErrorIcon } from 'src/styling/icons/warning-icon/tomato.svg'
 import { errorColor } from 'src/styling/variables'
 
 import { Info3 } from './typography'

new-lamassu-admin/src/components/ImagePopper.jsx

@@ -1,11 +1,11 @@
 import { makeStyles, ClickAwayListener } from '@material-ui/core'
 import classnames from 'classnames'
 import React, { memo, useState } from 'react'
-
 import Popper from 'src/components/Popper'
+import ZoomIconInverse from 'src/styling/icons/circle buttons/search/white.svg?react'
+import ZoomIcon from 'src/styling/icons/circle buttons/search/zodiac.svg?react'
+
 import { FeatureButton } from 'src/components/buttons'
-import { ReactComponent as ZoomIconInverse } from 'src/styling/icons/circle buttons/search/white.svg'
-import { ReactComponent as ZoomIcon } from 'src/styling/icons/circle buttons/search/zodiac.svg'
 
 import imagePopperStyles from './ImagePopper.styles'
 

new-lamassu-admin/src/components/InfoMessage.jsx

@@ -1,8 +1,7 @@
 import { Box, makeStyles } from '@material-ui/core'
 import React from 'react'
-
 import { Label1 } from 'src/components/typography'
-import { ReactComponent as WarningIcon } from 'src/styling/icons/warning-icon/comet.svg'
+import WarningIcon from 'src/styling/icons/warning-icon/comet.svg?react'
 
 const useStyles = makeStyles({
   message: ({ width }) => ({

new-lamassu-admin/src/components/InformativeDialog.jsx

@@ -1,9 +1,9 @@
 import { Dialog, DialogContent, makeStyles } from '@material-ui/core'
 import React, { memo } from 'react'
+import { H1 } from 'src/components/typography'
+import CloseIcon from 'src/styling/icons/action/close/zodiac.svg?react'
 
 import { IconButton } from 'src/components/buttons'
-import { H1 } from 'src/components/typography'
-import { ReactComponent as CloseIcon } from 'src/styling/icons/action/close/zodiac.svg'
 import { spacer } from 'src/styling/variables'
 
 const useStyles = makeStyles({

new-lamassu-admin/src/components/LogsDownloaderPopper.jsx

@@ -5,11 +5,11 @@ import { format, set } from 'date-fns/fp'
 import FileSaver from 'file-saver'
 import * as R from 'ramda'
 import React, { useState, useCallback } from 'react'
+import Arrow from 'src/styling/icons/arrow/download_logs.svg?react'
+import DownloadInverseIcon from 'src/styling/icons/button/download/white.svg?react'
+import Download from 'src/styling/icons/button/download/zodiac.svg?react'
 
 import { FeatureButton, Link } from 'src/components/buttons'
-import { ReactComponent as Arrow } from 'src/styling/icons/arrow/download_logs.svg'
-import { ReactComponent as DownloadInverseIcon } from 'src/styling/icons/button/download/white.svg'
-import { ReactComponent as Download } from 'src/styling/icons/button/download/zodiac.svg'
 import { primaryColor, offColor, zircon } from 'src/styling/variables'
 import { formatDate } from 'src/utils/timezones'
 

new-lamassu-admin/src/components/Modal.jsx

@@ -1,10 +1,10 @@
 import { makeStyles, Modal as MaterialModal, Paper } from '@material-ui/core'
 import classnames from 'classnames'
 import React from 'react'
+import { H1, H4 } from 'src/components/typography'
+import CloseIcon from 'src/styling/icons/action/close/zodiac.svg?react'
 
 import { IconButton } from 'src/components/buttons'
-import { H1, H4 } from 'src/components/typography'
-import { ReactComponent as CloseIcon } from 'src/styling/icons/action/close/zodiac.svg'
 
 const styles = {
   modal: {

new-lamassu-admin/src/components/NotificationCenter/NotificationCenter.jsx

@@ -3,13 +3,12 @@ import { makeStyles } from '@material-ui/core/styles'
 import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { useState, useEffect } from 'react'
-
 import ActionButton from 'src/components/buttons/ActionButton'
 import { H5 } from 'src/components/typography'
-import { ReactComponent as NotificationIconZodiac } from 'src/styling/icons/menu/notification-zodiac.svg'
+import NotificationIconZodiac from 'src/styling/icons/menu/notification-zodiac.svg?react'
-import { ReactComponent as ClearAllIconInverse } from 'src/styling/icons/stage/spring/empty.svg'
+import ClearAllIconInverse from 'src/styling/icons/stage/spring/empty.svg?react'
-import { ReactComponent as ClearAllIcon } from 'src/styling/icons/stage/zodiac/empty.svg'
+import ClearAllIcon from 'src/styling/icons/stage/zodiac/empty.svg?react'
-import { ReactComponent as ShowUnreadIcon } from 'src/styling/icons/stage/zodiac/full.svg'
+import ShowUnreadIcon from 'src/styling/icons/stage/zodiac/full.svg?react'
 
 import styles from './NotificationCenter.styles'
 import NotificationRow from './NotificationRow'

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

@@ -3,11 +3,10 @@ import classnames from 'classnames'
 import prettyMs from 'pretty-ms'
 import * as R from 'ramda'
 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 Wrench from 'src/styling/icons/action/wrench/zodiac.svg?react'
-import { ReactComponent as Transaction } from 'src/styling/icons/arrow/transaction.svg'
+import Transaction from 'src/styling/icons/arrow/transaction.svg?react'
-import { ReactComponent as WarningIcon } from 'src/styling/icons/warning-icon/tomato.svg'
+import WarningIcon from 'src/styling/icons/warning-icon/tomato.svg?react'
 
 import styles from './NotificationCenter.styles'
 const useStyles = makeStyles(styles)

new-lamassu-admin/src/components/SearchBox.jsx

@@ -4,9 +4,8 @@ import { makeStyles } from '@material-ui/core/styles'
 import MAutocomplete from '@material-ui/lab/Autocomplete'
 import classnames from 'classnames'
 import React, { memo, useState } from 'react'
-
 import { P } from 'src/components/typography'
-import { ReactComponent as SearchIcon } from 'src/styling/icons/circle buttons/search/zodiac.svg'
+import SearchIcon from 'src/styling/icons/circle buttons/search/zodiac.svg?react'
 
 import styles from './SearchBox.styles'
 

new-lamassu-admin/src/components/SearchFilter.jsx

@@ -1,12 +1,12 @@
 import { makeStyles } from '@material-ui/core'
 import React from 'react'
-
 import Chip from 'src/components/Chip'
-import { ActionButton } from 'src/components/buttons'
 import { P, Label3 } from 'src/components/typography'
-import { ReactComponent as CloseIcon } from 'src/styling/icons/action/close/zodiac.svg'
+import CloseIcon from 'src/styling/icons/action/close/zodiac.svg?react'
-import { ReactComponent as FilterIcon } from 'src/styling/icons/button/filter/white.svg'
+import FilterIcon from 'src/styling/icons/button/filter/white.svg?react'
-import { ReactComponent as ReverseFilterIcon } from 'src/styling/icons/button/filter/zodiac.svg'
+import ReverseFilterIcon from 'src/styling/icons/button/filter/zodiac.svg?react'
+
+import { ActionButton } from 'src/components/buttons'
 import { onlyFirstToUpper, singularOrPlural } from 'src/utils/string'
 
 import { chipStyles, styles } from './SearchFilter.styles'

new-lamassu-admin/src/components/Stage.jsx

@@ -2,13 +2,13 @@ import { makeStyles } from '@material-ui/core'
 import classnames from 'classnames'
 import * as R from 'ramda'
 import React, { memo } from 'react'
+import CompleteStageIconSpring from 'src/styling/icons/stage/spring/complete.svg?react'
+import CurrentStageIconSpring from 'src/styling/icons/stage/spring/current.svg?react'
+import EmptyStageIconSpring from 'src/styling/icons/stage/spring/empty.svg?react'
+import CompleteStageIconZodiac from 'src/styling/icons/stage/zodiac/complete.svg?react'
+import CurrentStageIconZodiac from 'src/styling/icons/stage/zodiac/current.svg?react'
+import EmptyStageIconZodiac from 'src/styling/icons/stage/zodiac/empty.svg?react'
 
-import { ReactComponent as CompleteStageIconSpring } from 'src/styling/icons/stage/spring/complete.svg'
-import { ReactComponent as CurrentStageIconSpring } from 'src/styling/icons/stage/spring/current.svg'
-import { ReactComponent as EmptyStageIconSpring } from 'src/styling/icons/stage/spring/empty.svg'
-import { ReactComponent as CompleteStageIconZodiac } from 'src/styling/icons/stage/zodiac/complete.svg'
-import { ReactComponent as CurrentStageIconZodiac } from 'src/styling/icons/stage/zodiac/current.svg'
-import { ReactComponent as EmptyStageIconZodiac } from 'src/styling/icons/stage/zodiac/empty.svg'
 import {
   primaryColor,
   secondaryColor,

new-lamassu-admin/src/components/Stepper.jsx

@@ -2,13 +2,13 @@ import { makeStyles } from '@material-ui/core'
 import classnames from 'classnames'
 import * as R from 'ramda'
 import React, { memo } from 'react'
+import CompleteStageIconSpring from 'src/styling/icons/stage/spring/complete.svg?react'
+import CurrentStageIconSpring from 'src/styling/icons/stage/spring/current.svg?react'
+import EmptyStageIconSpring from 'src/styling/icons/stage/spring/empty.svg?react'
+import CompleteStageIconZodiac from 'src/styling/icons/stage/zodiac/complete.svg?react'
+import CurrentStageIconZodiac from 'src/styling/icons/stage/zodiac/current.svg?react'
+import EmptyStageIconZodiac from 'src/styling/icons/stage/zodiac/empty.svg?react'
 
-import { ReactComponent as CompleteStageIconSpring } from 'src/styling/icons/stage/spring/complete.svg'
-import { ReactComponent as CurrentStageIconSpring } from 'src/styling/icons/stage/spring/current.svg'
-import { ReactComponent as EmptyStageIconSpring } from 'src/styling/icons/stage/spring/empty.svg'
-import { ReactComponent as CompleteStageIconZodiac } from 'src/styling/icons/stage/zodiac/complete.svg'
-import { ReactComponent as CurrentStageIconZodiac } from 'src/styling/icons/stage/zodiac/current.svg'
-import { ReactComponent as EmptyStageIconZodiac } from 'src/styling/icons/stage/zodiac/empty.svg'
 import {
   primaryColor,
   secondaryColor,

new-lamassu-admin/src/components/Tooltip.jsx

@@ -1,9 +1,8 @@
 import { makeStyles, ClickAwayListener } from '@material-ui/core'
 import * as R from 'ramda'
 import React, { useState, memo } from 'react'
-
 import Popper from 'src/components/Popper'
-import { ReactComponent as HelpIcon } from 'src/styling/icons/action/help/zodiac.svg'
+import HelpIcon from 'src/styling/icons/action/help/zodiac.svg?react'
 
 const useStyles = makeStyles({
   transparentButton: {
@@ -103,7 +102,7 @@ const HoverableTooltip = memo(({ parentElements, children, width }) => {
           <button
             type="button"
             onMouseEnter={handler.handleOpenHelpPopper}
-            onMouseLeave={handler.handleCloseHelpPopper}>
+            onMouseLeave={handler.handleCloseHelpPopper}
             className={handler.classes.transparentButton}>
             <HelpIcon />
           </button>

new-lamassu-admin/src/components/booleanPropertiesTable/BooleanPropertiesTable.jsx

@@ -3,17 +3,17 @@ import classnames from 'classnames'
 import { useFormikContext, Form, Formik, Field as FormikField } from 'formik'
 import * as R from 'ramda'
 import React, { useState, memo } from 'react'
+import PromptWhenDirty from 'src/components/PromptWhenDirty'
+import { H4 } from 'src/components/typography'
+import EditIconDisabled from 'src/styling/icons/action/edit/disabled.svg?react'
+import EditIcon from 'src/styling/icons/action/edit/enabled.svg?react'
+import FalseIcon from 'src/styling/icons/table/false.svg?react'
+import TrueIcon from 'src/styling/icons/table/true.svg?react'
 import * as Yup from 'yup'
 
-import PromptWhenDirty from 'src/components/PromptWhenDirty'
 import { Link, IconButton } from 'src/components/buttons'
 import { RadioGroup } from 'src/components/inputs/formik'
 import { Table, TableBody, TableRow, TableCell } from 'src/components/table'
-import { H4 } from 'src/components/typography'
-import { ReactComponent as EditIconDisabled } from 'src/styling/icons/action/edit/disabled.svg'
-import { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/enabled.svg'
-import { ReactComponent as FalseIcon } from 'src/styling/icons/table/false.svg'
-import { ReactComponent as TrueIcon } from 'src/styling/icons/table/true.svg'
 
 import { booleanPropertiesTableStyles } from './BooleanPropertiesTable.styles'
 

new-lamassu-admin/src/components/buttons/AddButton.jsx

@@ -1,9 +1,9 @@
 import { makeStyles } from '@material-ui/core/styles'
 import classnames from 'classnames'
 import React, { memo } from 'react'
+import AddIcon from 'src/styling/icons/button/add/zodiac.svg?react'
 
 import typographyStyles from 'src/components/typography/styles'
-import { ReactComponent as AddIcon } from 'src/styling/icons/button/add/zodiac.svg'
 import { zircon, zircon2, comet, fontColor, white } from 'src/styling/variables'
 
 const { p } = typographyStyles

new-lamassu-admin/src/components/buttons/DeleteButton.jsx

@@ -1,9 +1,9 @@
 import { makeStyles } from '@material-ui/core/styles'
 import classnames from 'classnames'
 import React, { memo } from 'react'
+import DeleteIcon from 'src/styling/icons/button/cancel/zodiac.svg?react'
 
 import typographyStyles from 'src/components/typography/styles'
-import { ReactComponent as DeleteIcon } from 'src/styling/icons/button/cancel/zodiac.svg'
 import { zircon, zircon2, comet, fontColor, white } from 'src/styling/variables'
 
 const { p } = typographyStyles

new-lamassu-admin/src/components/buttons/IDButton.jsx

@@ -2,8 +2,8 @@ import { ClickAwayListener } from '@material-ui/core'
 import { makeStyles } from '@material-ui/core/styles'
 import classnames from 'classnames'
 import React, { useState, memo } from 'react'
-
 import Popover from 'src/components/Popper'
+
 import typographyStyles from 'src/components/typography/styles'
 import {
   subheaderColor,

new-lamassu-admin/src/components/buttons/Link.styles.js

@@ -1,4 +1,4 @@
-import { fade } from '@material-ui/core/styles/colorManipulator'
+import { alpha } from '@material-ui/core/styles/colorManipulator'
 
 import typographyStyles from 'src/components/typography/styles'
 import {
@@ -11,10 +11,10 @@ import {
 const { h4 } = typographyStyles
 
 const color = color => ({
-  boxShadow: `inset 0 -4px 0 0 ${fade(color, 0.8)}`,
+  boxShadow: `inset 0 -4px 0 0 ${alpha(color, 0.8)}`,
   '&:hover': {
     boxShadow: 'none',
-    backgroundColor: fade(color, 0.8)
+    backgroundColor: alpha(color, 0.8)
   }
 })
 

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

@@ -1,59 +0,0 @@
-import { makeStyles } from '@material-ui/core/styles'
-import classnames from 'classnames'
-import React, { memo } from 'react'
-
-import baseButtonStyles from './BaseButton.styles'
-
-const { baseButton, primary } = baseButtonStyles
-
-const styles = {
-  button: {
-    extend: baseButton,
-    borderRadius: baseButton.height / 2,
-    outline: 0,
-    padding: '0 20px'
-  },
-  primary,
-  buttonIcon: {
-    marginTop: 4,
-    marginRight: 4,
-    '& svg': {
-      width: 20,
-      height: 20,
-      overflow: 'visible'
-    }
-  },
-  buttonIconActive: {} // required to extend primary
-}
-
-const useStyles = makeStyles(styles)
-
-const SimpleButton = memo(
-  ({ className, Icon, InverseIcon, children, color, size, ...props }) => {
-    const classes = useStyles()
-
-    return (
-      <button
-        className={classnames(classes.primary, classes.button, className)}
-        {...props}>
-        {Icon && (
-          <div className={classes.buttonIcon}>
-            <Icon />
-          </div>
-        )}
-        {InverseIcon && (
-          <div
-            className={classnames(
-              classes.buttonIcon,
-              classes.buttonIconActive
-            )}>
-            <InverseIcon />
-          </div>
-        )}
-        {children}
-      </button>
-    )
-  }
-)
-
-export default SimpleButton

new-lamassu-admin/src/components/buttons/SubpageButton.jsx

@@ -1,9 +1,8 @@
 import { makeStyles } from '@material-ui/core/styles'
 import classnames from 'classnames'
 import React, { memo, useState } from 'react'
-
 import { H4 } from 'src/components/typography'
-import { ReactComponent as CancelIconInverse } from 'src/styling/icons/button/cancel/white.svg'
+import CancelIconInverse from 'src/styling/icons/button/cancel/white.svg?react'
 
 import subpageButtonStyles from './SubpageButton.styles'
 

new-lamassu-admin/src/components/buttons/SupportLinkButton.jsx

@@ -1,9 +1,9 @@
 import { makeStyles } from '@material-ui/core'
 import React from 'react'
+import InverseLinkIcon from 'src/styling/icons/action/external link/white.svg?react'
+import LinkIcon from 'src/styling/icons/action/external link/zodiac.svg?react'
 
 import { ActionButton } from 'src/components/buttons'
-import { ReactComponent as InverseLinkIcon } from 'src/styling/icons/action/external link/white.svg'
-import { ReactComponent as LinkIcon } from 'src/styling/icons/action/external link/zodiac.svg'
 import { spacer, primaryColor } from 'src/styling/variables'
 
 const useStyles = makeStyles({

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

@@ -6,14 +6,12 @@ import FeatureButton from './FeatureButton'
 import IDButton from './IDButton'
 import IconButton from './IconButton'
 import Link from './Link'
-import SimpleButton from './SimpleButton'
 import SubpageButton from './SubpageButton'
 import SupportLinkButton from './SupportLinkButton'
 
 export {
   Button,
   Link,
-  SimpleButton,
   ActionButton,
   FeatureButton,
   IconButton,

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

@@ -15,10 +15,10 @@ import {
 } from 'date-fns/fp'
 import * as R from 'ramda'
 import React, { useState } from 'react'
+import Arrow from 'src/styling/icons/arrow/month_change.svg?react'
+import RightArrow from 'src/styling/icons/arrow/month_change_right.svg?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'

new-lamassu-admin/src/components/editableProperty/EditableProperty.jsx

@@ -1,11 +1,11 @@
 import { makeStyles } from '@material-ui/core/styles'
 import React, { useState, memo } from 'react'
+import { H4, P } from 'src/components/typography'
+import EditIconDisabled from 'src/styling/icons/action/edit/disabled.svg?react'
+import EditIcon from 'src/styling/icons/action/edit/enabled.svg?react'
 
 import { Link } from 'src/components/buttons'
 import { RadioGroup } from 'src/components/inputs'
-import { H4, P } from 'src/components/typography'
-import { ReactComponent as EditIconDisabled } from 'src/styling/icons/action/edit/disabled.svg'
-import { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/enabled.svg'
 
 import { editablePropertyStyles } from './EditableProperty.styles'
 

new-lamassu-admin/src/components/editableTable/Header.jsx

@@ -2,13 +2,13 @@ import { makeStyles } from '@material-ui/core'
 import classnames from 'classnames'
 import * as R from 'ramda'
 import React, { useContext } from 'react'
-
 import {
   Td,
   THead,
   TDoubleLevelHead,
   ThDoubleLevel
 } from 'src/components/fake-table/Table'
+
 import { sentenceCase } from 'src/utils/string'
 
 import TableCtx from './Context'

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

@@ -3,17 +3,17 @@ import classnames from 'classnames'
 import { Field, useFormikContext } from 'formik'
 import * as R from 'ramda'
 import React, { useContext, useState } from 'react'
-
 import { DeleteDialog } from 'src/components/DeleteDialog'
-import { Link, IconButton } from 'src/components/buttons'
 import { Td, Tr } from 'src/components/fake-table/Table'
-import { Switch } from 'src/components/inputs'
 import { Label2 } from 'src/components/typography'
-import { ReactComponent as DisabledDeleteIcon } from 'src/styling/icons/action/delete/disabled.svg'
+import DisabledDeleteIcon from 'src/styling/icons/action/delete/disabled.svg?react'
-import { ReactComponent as DeleteIcon } from 'src/styling/icons/action/delete/enabled.svg'
+import DeleteIcon from 'src/styling/icons/action/delete/enabled.svg?react'
-import { ReactComponent as DisabledEditIcon } from 'src/styling/icons/action/edit/disabled.svg'
+import DisabledEditIcon from 'src/styling/icons/action/edit/disabled.svg?react'
-import { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/enabled.svg'
+import EditIcon from 'src/styling/icons/action/edit/enabled.svg?react'
-import { ReactComponent as StripesSvg } from 'src/styling/icons/stripes.svg'
+import StripesSvg from 'src/styling/icons/stripes.svg?react'
+
+import { Link, IconButton } from 'src/components/buttons'
+import { Switch } from 'src/components/inputs'
 
 import TableCtx from './Context'
 import styles from './Row.styles'
@@ -165,8 +165,9 @@ const ECol = ({ editing, focus, config, extraPaddingRight, extraPadding }) => {
 
   return (
     <div className={classes.fields}>
-      {R.map(f => (
+      {fields.map((f, idx) => (
         <Td
+          key={idx}
           className={{
             [classes.extraPaddingRight]: extraPaddingRight,
             [classes.extraPadding]: extraPadding,
@@ -204,7 +205,7 @@ const ECol = ({ editing, focus, config, extraPaddingRight, extraPadding }) => {
           )}
           {isHidden(values) && <StripesSvg />}
         </Td>
-      ))(fields)}
+      ))}
     </div>
   )
 }

new-lamassu-admin/src/components/editableTable/Table.jsx

@@ -2,13 +2,13 @@ import { makeStyles } from '@material-ui/core'
 import { Form, Formik } from 'formik'
 import * as R from 'ramda'
 import React, { useState, useEffect } from 'react'
-import { v4 } from 'uuid'
-
 import PromptWhenDirty from 'src/components/PromptWhenDirty'
-import Link from 'src/components/buttons/Link.js'
+import Link from 'src/components/buttons/Link'
-import { AddButton } from 'src/components/buttons/index.js'
 import { TBody, Table } from 'src/components/fake-table/Table'
 import { Info2, TL1 } from 'src/components/typography'
+import { v4 } from 'uuid'
+
+import { AddButton } from 'src/components/buttons/index'
 
 import TableCtx from './Context'
 import Header from './Header'
@@ -75,7 +75,7 @@ const ETable = ({
 
     setSaving(true)
 
-    const it = validationSchema.cast(value)
+    const it = validationSchema.cast(value, { assert: 'ignore-optionality' })
     const index = R.findIndex(R.propEq('id', it.id))(data)
     const list = index !== -1 ? R.update(index, it, data) : R.prepend(it, data)
 

new-lamassu-admin/src/components/inputs/base/Autocomplete.jsx

@@ -3,9 +3,9 @@ import MAutocomplete from '@material-ui/lab/Autocomplete'
 import sort from 'match-sorter'
 import * as R from 'ramda'
 import React from 'react'
-
 import { HoverableTooltip } from 'src/components/Tooltip'
 import { P } from 'src/components/typography'
+
 import { errorColor, orangeYellow, spring4 } from 'src/styling/variables'
 
 import TextInput from './TextInput'

new-lamassu-admin/src/components/inputs/base/Checkbox.jsx

@@ -3,9 +3,9 @@ import { makeStyles } from '@material-ui/core/styles'
 import CheckBoxIcon from '@material-ui/icons/CheckBox'
 import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank'
 import React from 'react'
-
 import { Label2, Info3 } from 'src/components/typography'
-import { ReactComponent as WarningIcon } from 'src/styling/icons/warning-icon/comet.svg'
+import WarningIcon from 'src/styling/icons/warning-icon/comet.svg?react'
+
 import {
   fontSize2,
   fontSize3,

new-lamassu-admin/src/components/inputs/base/RadioGroup.jsx

@@ -6,8 +6,8 @@ import {
 } from '@material-ui/core'
 import classnames from 'classnames'
 import React from 'react'
-
 import { Label1 } from 'src/components/typography'
+
 import { offColor } from 'src/styling/variables'
 const styles = {
   label: {

new-lamassu-admin/src/components/inputs/base/Select.jsx

@@ -3,8 +3,7 @@ import classnames from 'classnames'
 import { useSelect } from 'downshift'
 import * as R from 'ramda'
 import React from 'react'
-
+import Arrowdown from 'src/styling/icons/action/arrow/regular.svg?react'
-import { ReactComponent as Arrowdown } from 'src/styling/icons/action/arrow/regular.svg'
 
 import styles from './Select.styles'
 

new-lamassu-admin/src/components/inputs/base/ToggleButtonGroup.jsx

@@ -2,8 +2,8 @@ import { makeStyles } from '@material-ui/core'
 import { ToggleButtonGroup as MUIToggleButtonGroup } from '@material-ui/lab'
 import ToggleButton from '@material-ui/lab/ToggleButton'
 import React from 'react'
-
 import { H4, P } from 'src/components/typography'
+
 import { backgroundColor, comet } from 'src/styling/variables'
 const styles = {
   noTextTransform: {

new-lamassu-admin/src/components/inputs/cashbox/Cashbox.jsx

@@ -1,9 +1,9 @@
 import { makeStyles } from '@material-ui/core/styles'
 import classnames from 'classnames'
 import React from 'react'
-
 import Chip from 'src/components/Chip'
 import { Info2, Label1, Label2 } from 'src/components/typography'
+
 import { numberToFiatAmount } from 'src/utils/number'
 
 import { cashboxStyles, gridStyles } from './Cashbox.styles'

new-lamassu-admin/src/components/inputs/formik/CashCassetteInput.jsx

@@ -1,7 +1,6 @@
 import { makeStyles } from '@material-ui/core'
 import classNames from 'classnames'
 import React, { memo, useState } from 'react'
-
 import { CashOut } from 'src/components/inputs/cashbox/Cashbox'
 
 import { NumberInput } from '../base'

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

@@ -1,43 +0,0 @@
-import { makeStyles } from '@material-ui/core'
-import React, { memo, useState } from 'react'
-
-import TextInputFormik from './TextInput'
-import { styles } from './TextInput.styles'
-
-const useStyles = makeStyles(styles)
-
-const mask = /(\+)(9[976]\d|8[987530]\d|6[987]\d|5[90]\d|42\d|3[875]\d|2[98654321]\d|9[8543210]|8[6421]|6[6543210]|5[87654321]|4[987654310]|3[9643210]|2[70]|7|1)(\d{1,3}){0,1}(\d{1,3}){0,1}(\d{1,3}){0,1}(\d{1,3}){0,1}(\d{1,2}){0,1}$/
-const maskValue = value =>
-  value ? value.replace(mask, '$1 $2 $3 $4 $5 $6') : ''
-
-const PhoneNumberInputFormik = memo(({ ...props }) => {
-  const { onChange, value } = props.field
-
-  const classes = useStyles()
-
-  // Regex adapted from http://phoneregex.com/
-
-  const [maskedValue, setMaskedValue] = useState(maskValue(value))
-
-  const handleChange = event => {
-    setMaskedValue(maskValue(event.target.value))
-
-    onChange(event)
-  }
-
-  return (
-    <>
-      <span className={classes.masked} aria-hidden="true">
-        {maskedValue}
-      </span>
-      <TextInputFormik
-        inputProps={{ maxLength: 17 }}
-        className={classes.maskedInput}
-        onChange={handleChange}
-        {...props}
-      />
-    </>
-  )
-})
-
-export { PhoneNumberInputFormik, mask, maskValue }

new-lamassu-admin/src/components/layout/Header.jsx

@@ -7,15 +7,15 @@ import gql from 'graphql-tag'
 import * as R from 'ramda'
 import React, { memo, useState, useEffect, useRef } from 'react'
 import { NavLink, useHistory } from 'react-router-dom'
-
-import NotificationCenter from 'src/components/NotificationCenter'
 import ActionButton from 'src/components/buttons/ActionButton'
 import { H4 } from 'src/components/typography'
+import AddIconReverse from 'src/styling/icons/button/add/white.svg?react'
+import AddIcon from 'src/styling/icons/button/add/zodiac.svg?react'
+import Logo from 'src/styling/icons/menu/logo.svg?react'
+import NotificationIcon from 'src/styling/icons/menu/notification.svg?react'
+
+import NotificationCenter from 'src/components/NotificationCenter'
 import AddMachine from 'src/pages/AddMachine'
-import { ReactComponent as AddIconReverse } from 'src/styling/icons/button/add/white.svg'
-import { ReactComponent as AddIcon } from 'src/styling/icons/button/add/zodiac.svg'
-import { ReactComponent as Logo } from 'src/styling/icons/menu/logo.svg'
-import { ReactComponent as NotificationIcon } from 'src/styling/icons/menu/notification.svg'
 
 import styles from './Header.styles'
 
@@ -141,7 +141,9 @@ const Header = memo(({ tree, user }) => {
                     className={classnames(classes.link, classes.whiteLink)}
                     activeClassName={classes.activeLink}>
                     <li className={classes.li}>
-                      <span className={classes.forceSize} forcesize={it.label}>
+                      <span
+                        className={classes.forceSize}
+                        data-forcesize={it.label}>
                         {it.label}
                       </span>
                     </li>

new-lamassu-admin/src/components/layout/Header.styles.js

@@ -90,7 +90,7 @@ const styles = {
     textAlign: 'center',
     '&:after': {
       display: 'block',
-      content: 'attr(forcesize)',
+      content: 'attr(data-forcesize)',
       fontWeight: 700,
       height: 0,
       overflow: 'hidden',

new-lamassu-admin/src/components/layout/Section.jsx

@@ -1,6 +1,5 @@
 import { makeStyles } from '@material-ui/core'
 import React from 'react'
-
 import ErrorMessage from 'src/components/ErrorMessage'
 import Subtitle from 'src/components/Subtitle'
 

new-lamassu-admin/src/components/layout/Sidebar.jsx

@@ -1,11 +1,10 @@
 import { makeStyles } from '@material-ui/core/styles'
 import classnames from 'classnames'
 import React from 'react'
-
 import { P } from 'src/components/typography'
-import { ReactComponent as CompleteStageIconZodiac } from 'src/styling/icons/stage/zodiac/complete.svg'
+import CompleteStageIconZodiac from 'src/styling/icons/stage/zodiac/complete.svg?react'
-import { ReactComponent as CurrentStageIconZodiac } from 'src/styling/icons/stage/zodiac/current.svg'
+import CurrentStageIconZodiac from 'src/styling/icons/stage/zodiac/current.svg?react'
-import { ReactComponent as EmptyStageIconZodiac } from 'src/styling/icons/stage/zodiac/empty.svg'
+import EmptyStageIconZodiac from 'src/styling/icons/stage/zodiac/empty.svg?react'
 
 import styles from './Sidebar.styles'
 
@@ -27,9 +26,11 @@ const Sidebar = ({
       {loading && <P>Loading...</P>}
       {!loading &&
         data?.map((it, idx) => (
-          <div className={classes.linkWrapper} onClick={() => onClick(it)}>
           <div
             key={idx}
+            className={classes.linkWrapper}
+            onClick={() => onClick(it)}>
+            <div
               className={classnames({
                 [classes.activeLink]: isSelected(it),
                 [classes.customRenderActiveLink]: itemRender && isSelected(it),

new-lamassu-admin/src/components/layout/TitleSection.jsx

@@ -2,12 +2,12 @@ import { makeStyles, Box } from '@material-ui/core'
 import classnames from 'classnames'
 import * as R from 'ramda'
 import React from 'react'
-
 import ErrorMessage from 'src/components/ErrorMessage'
 import Title from 'src/components/Title'
-import { SubpageButton } from 'src/components/buttons'
 import { Info1, Label1 } from 'src/components/typography'
 
+import { SubpageButton } from 'src/components/buttons'
+
 import styles from './TitleSection.styles'
 
 const useStyles = makeStyles(styles)

new-lamassu-admin/src/components/machineActions/DiagnosticsModal.jsx

@@ -4,11 +4,10 @@ import { subMinutes } from 'date-fns'
 import FileSaver from 'file-saver'
 import gql from 'graphql-tag'
 import React, { useState, useEffect } from 'react'
-
 import Modal from 'src/components/Modal'
-import { Button } from 'src/components/buttons'
 import { H3, P } from 'src/components/typography'
-import { URI } from 'src/utils/apollo'
+
+import { Button } from 'src/components/buttons'
 
 import { diagnosticsModal } from './MachineActions.styles'
 
@@ -92,7 +91,7 @@ const DiagnosticsModal = ({ onClose, deviceId, sendAction }) => {
     }
   }, [data, stopPolling, timeout, timestamp])
 
-  const path = `${URI}/operator-data/diagnostics/${deviceId}/`
+  const path = `/operator-data/diagnostics/${deviceId}/`
 
   function runDiagnostics() {
     startPolling(2000)

new-lamassu-admin/src/components/machineActions/MachineActions.jsx

@@ -2,18 +2,17 @@ import { useMutation, useLazyQuery } from '@apollo/react-hooks'
 import { makeStyles } from '@material-ui/core/styles'
 import gql from 'graphql-tag'
 import React, { memo, useState } from 'react'
-
 import { ConfirmDialog } from 'src/components/ConfirmDialog'
 import ActionButton from 'src/components/buttons/ActionButton'
 import { H3 } from 'src/components/typography'
-import { ReactComponent as EditReversedIcon } from 'src/styling/icons/button/edit/white.svg'
+import EditReversedIcon from 'src/styling/icons/button/edit/white.svg?react'
-import { ReactComponent as EditIcon } from 'src/styling/icons/button/edit/zodiac.svg'
+import EditIcon from 'src/styling/icons/button/edit/zodiac.svg?react'
-import { ReactComponent as RebootReversedIcon } from 'src/styling/icons/button/reboot/white.svg'
+import RebootReversedIcon from 'src/styling/icons/button/reboot/white.svg?react'
-import { ReactComponent as RebootIcon } from 'src/styling/icons/button/reboot/zodiac.svg'
+import RebootIcon from 'src/styling/icons/button/reboot/zodiac.svg?react'
-import { ReactComponent as ShutdownReversedIcon } from 'src/styling/icons/button/shut down/white.svg'
+import ShutdownReversedIcon from 'src/styling/icons/button/shut down/white.svg?react'
-import { ReactComponent as ShutdownIcon } from 'src/styling/icons/button/shut down/zodiac.svg'
+import ShutdownIcon from 'src/styling/icons/button/shut down/zodiac.svg?react'
-import { ReactComponent as UnpairReversedIcon } from 'src/styling/icons/button/unpair/white.svg'
+import UnpairReversedIcon from 'src/styling/icons/button/unpair/white.svg?react'
-import { ReactComponent as UnpairIcon } from 'src/styling/icons/button/unpair/zodiac.svg'
+import UnpairIcon from 'src/styling/icons/button/unpair/zodiac.svg?react'
 
 import DiagnosticsModal from './DiagnosticsModal'
 import { machineActionsStyles } from './MachineActions.styles'

new-lamassu-admin/src/components/single-row-table/SingleRowTable.jsx

@@ -1,8 +1,6 @@
 import { makeStyles } from '@material-ui/core'
 import classnames from 'classnames'
 import React from 'react'
-
-import { IconButton } from 'src/components/buttons'
 import {
   Table,
   THead,
@@ -11,7 +9,9 @@ import {
   Th,
   Tr
 } from 'src/components/fake-table/Table'
-import { ReactComponent as EditIcon } from 'src/styling/icons/action/edit/white.svg'
+import EditIcon from 'src/styling/icons/action/edit/white.svg?react'
+
+import { IconButton } from 'src/components/buttons'
 
 import styles from './SingleRowTable.styles'
 

new-lamassu-admin/src/components/table/EmptyTable.jsx

@@ -1,9 +1,8 @@
 import { makeStyles } from '@material-ui/core'
 import classNames from 'classnames'
 import React, { memo } from 'react'
-
 import { H4 } from 'src/components/typography'
-import { ReactComponent as EmptyTableIcon } from 'src/styling/icons/table/empty-table.svg'
+import EmptyTableIcon from 'src/styling/icons/table/empty-table.svg?react'
 
 const styles = {
   emptyTable: {