Contract verification: Improve the selection of a compiler version (#1257)

Fixes #1164

theme/components/FormLabel.ts

@@ -44,6 +44,18 @@ const variantFloating = defineStyle((props) => {
       fontSize: 'xs',
       lineHeight: '16px',
       borderTopRightRadius: 'none',
+      '& svg': {
+        width: '16px',
+        height: '16px',
+      },
+    },
+    '& svg': {
+      transitionProperty: 'width, height',
+      transitionDuration: 'normal',
+      transitionTimingFunction: 'ease',
+      width: '24px',
+      height: '24px',
+      mr: '2',
     },
   };
 });

ui/contractVerification/fields/ContractVerificationFieldCompiler.tsx

-import { chakra, Checkbox, Code } from '@chakra-ui/react';
+import { chakra, Checkbox, Code, Icon } from '@chakra-ui/react';
 import { useQueryClient } from '@tanstack/react-query';
 import React from 'react';
 import type { ControllerRenderProps } from 'react-hook-form';
@@ -7,6 +7,7 @@ import { useFormContext, Controller } from 'react-hook-form';
 import type { FormFields } from '../types';
 import type { SmartContractVerificationConfig } from 'types/api/contract';
 
+import iconSearch from 'icons/search.svg';
 import { getResourceKey } from 'lib/api/useApiQuery';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import FancySelect from 'ui/shared/FancySelect/FancySelect';
@@ -54,7 +55,8 @@ const ContractVerificationFieldCompiler = ({ isVyper }: Props) => {
         loadOptions={ loadOptions }
         defaultOptions
         size={ isMobile ? 'md' : 'lg' }
-        placeholder="Compiler"
+        placeholder="Compiler (enter version or use the dropdown)"
+        placeholderIcon={ <Icon as={ iconSearch }/> }
         isDisabled={ formState.isSubmitting }
         error={ error }
         isRequired

ui/shared/FancySelect/FancySelect.tsx

@@ -11,6 +11,7 @@ import InputPlaceholder from 'ui/shared/InputPlaceholder';
 
 interface CommonProps {
   error?: Merge<FieldError, FieldErrorsImpl<Option>> | undefined;
+  placeholderIcon?: React.ReactNode;
 }
 
 interface RegularSelectProps extends SelectProps<Option, boolean, GroupBase<Option>>, CommonProps {
@@ -59,6 +60,7 @@ const FancySelect = (props: Props, ref: React.LegacyRef<HTMLDivElement>) => {
       />
       <InputPlaceholder
         text={ typeof props.placeholder === 'string' ? props.placeholder : '' }
+        icon={ props.placeholderIcon }
         error={ props.error }
         isFancy
       />

ui/shared/InputPlaceholder.tsx

@@ -4,13 +4,14 @@ import type { FieldError } from 'react-hook-form';
 
 interface Props {
   text: string;
+  icon?: React.ReactNode;
   error?: Partial<FieldError>;
   className?: string;
   isFancy?: boolean;
   isInModal?: boolean;
 }
 
-const InputPlaceholder = ({ text, error, className, isFancy, isInModal }: Props) => {
+const InputPlaceholder = ({ text, icon, error, className, isFancy, isInModal }: Props) => {
   let errorMessage = error?.message;
 
   if (!errorMessage && error?.type === 'pattern') {
@@ -20,9 +21,11 @@ const InputPlaceholder = ({ text, error, className, isFancy, isInModal }: Props)
   return (
     <FormLabel
       className={ className }
+      alignItems="center"
       { ...(isFancy ? { 'data-fancy': true } : {}) }
       { ...(isInModal ? { 'data-in-modal': true } : {}) }
     >
+      { icon }
       <chakra.span>{ text }</chakra.span>
       { errorMessage && <chakra.span order={ 3 } whiteSpace="pre"> - { errorMessage }</chakra.span> }
     </FormLabel>