fix: improve HoverableTooltip behavior and UX

feat: add market currency selector for exchange 3rd party services

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

@@ -1,8 +1,13 @@
+import { Box } from '@material-ui/core'
 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'
 
 const Autocomplete = ({
@@ -95,6 +100,39 @@ const Autocomplete = ({
           />
         )
       }}
+      renderOption={props => {
+        if (!props.warning && !props.warningMessage)
+          return R.path([labelProp])(props)
+
+        const warningColors = {
+          clean: spring4,
+          partial: orangeYellow,
+          important: errorColor
+        }
+
+        const hoverableElement = (
+          <Box
+            width={18}
+            height={18}
+            borderRadius={6}
+            bgcolor={warningColors[props.warning]}
+          />
+        )
+
+        return (
+          <Box
+            width="100%"
+            display="flex"
+            flexDirection="row"
+            justifyContent="space-between"
+            alignItems="center">
+            <Box>{R.path([labelProp])(props)}</Box>
+            <HoverableTooltip parentElements={hoverableElement} width={250}>
+              <P>{props.warningMessage}</P>
+            </HoverableTooltip>
+          </Box>
+        )
+      }}
     />
   )
 }