Replace system selectors with Blockscout selectors style (#2451)

* migrate from native select to the custom one

* migrate popover radio filter to select component

* migrate stats menu to select

* migrate Sort component

* screenshot updates

ui/address/contract/ContractDetails.tsx

@@ -24,6 +24,7 @@ import ContractDetailsInfo from './info/ContractDetailsInfo';
 import useContractDetailsTabs from './useContractDetailsTabs';
 
 const TAB_LIST_PROPS = { flexWrap: 'wrap', rowGap: 2 };
+const LEFT_SLOT_PROPS = { w: { base: '100%', lg: 'auto' } };
 
 type Props = {
   addressHash: string;
@@ -117,6 +118,7 @@ const ContractDetails = ({ addressHash, channel, mainContractQuery }: Props) =>
           size="sm"
           leftSlot={ addressSelector }
           tabListProps={ TAB_LIST_PROPS }
+          leftSlotProps={ LEFT_SLOT_PROPS }
         />
       ) : (
         <>

ui/address/contract/ContractSourceAddressSelector.tsx

@@ -1,11 +1,12 @@
-import { chakra, Flex, Select, Skeleton } from '@chakra-ui/react';
+import { chakra, Flex, Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
 import { route } from 'nextjs-routes';
 
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import LinkNewTab from 'ui/shared/links/LinkNewTab';
+import Select from 'ui/shared/select/Select';
 
 export interface Item {
   address: string;
@@ -23,13 +24,17 @@ interface Props {
 
 const ContractSourceAddressSelector = ({ className, selectedItem, onItemSelect, items, isLoading, label }: Props) => {
 
-  const handleItemSelect = React.useCallback((event: React.ChangeEvent<HTMLSelectElement>) => {
-    const nextOption = items.find(({ address }) => address === event.target.value);
+  const handleItemSelect = React.useCallback((value: string) => {
+    const nextOption = items.find(({ address }) => address === value);
     if (nextOption) {
       onItemSelect(nextOption);
     }
   }, [ items, onItemSelect ]);
 
+  const options = React.useMemo(() => {
+    return items.map(({ address, name }) => ({ label: name || address, value: address }));
+  }, [ items ]);
+
   if (isLoading) {
     return <Skeleton h={ 6 } w={{ base: '300px', lg: '500px' }} className={ className }/>;
   }
@@ -53,19 +58,14 @@ const ContractSourceAddressSelector = ({ className, selectedItem, onItemSelect,
     <Flex columnGap={ 3 } rowGap={ 2 } alignItems="center" className={ className }>
       <chakra.span fontWeight={ 500 } fontSize="sm">{ label }</chakra.span>
       <Select
-        size="xs"
-        value={ selectedItem.address }
+        options={ options }
+        name="contract-source-address"
+        defaultValue={ options[0].value }
         onChange={ handleItemSelect }
-        w="auto"
+        isLoading={ isLoading }
+        maxW={{ base: '180px', lg: 'none' }}
         fontWeight={ 600 }
-        borderRadius="base"
-      >
-        { items.map((item) => (
-          <option key={ item.address } value={ item.address }>
-            { item.name }
-          </option>
-        )) }
-      </Select>
+      />
       <Flex columnGap={ 2 } alignItems="center">
         <CopyToClipboard text={ selectedItem.address } ml={ 0 }/>
         <LinkNewTab

ui/blob/BlobData.pw.tsx

@@ -12,7 +12,8 @@ test('text', async({ render }) => {
   const data = '0xE2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A280E2A3A4E2A1B6E2A0BFE2A0BFE2A0B7E2A3B6E2A384E2A080E2A080E2A080E2A080E2A0800AE2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A3B0E2A1BFE2A081E2A080E2A080E2A280E2A380E2A180E2A099E2A3B7E2A180E2A080E2A080E2A0800AE2A080E2A080E2A080E2A180E2A080E2A080E2A080E2A080E2A080E2A2A0E2A3BFE2A081E2A080E2A080E2A080E2A098E2A0BFE2A083E2A080E2A2B8E2A3BFE2A3BFE2A3BFE2A3BF0AE2A080E2A3A0E2A1BFE2A09BE2A2B7E2A3A6E2A180E2A080E2A080E2A088E2A3BFE2A184E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A3B8E2A3BFE2A3BFE2A3BFE2A09F0AE2A2B0E2A1BFE2A081E2A080E2A080E2A099E2A2BFE2A3A6E2A3A4E2A3A4E2A3BCE2A3BFE2A384E2A080E2A080E2A080E2A080E2A080E2A2B4E2A19FE2A09BE2A08BE2A081E2A0800AE2A3BFE2A087E2A080E2A080E2A080E2A080E2A080E2A089E2A089E2A089E2A089E2A089E2A081E2A080E2A080E2A080E2A080E2A080E2A088E2A3BFE2A180E2A080E2A080E2A0800AE2A3BFE2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A2B9E2A187E2A080E2A080E2A0800AE2A3BFE2A186E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A3BCE2A187E2A080E2A080E2A0800AE2A0B8E2A3B7E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A2A0E2A1BFE2A080E2A080E2A080E2A0800AE2A080E2A0B9E2A3B7E2A3A4E2A380E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A080E2A380E2A3B0E2A1BFE2A081E2A080E2A080E2A080E2A0800AE2A080E2A080E2A080E2A089E2A099E2A09BE2A0BFE2A0B6E2A3B6E2A3B6E2A3B6E2A3B6E2A3B6E2A0B6E2A0BFE2A09FE2A09BE2A089E2A080E2A080E2A080E2A080E2A080E2A080';
   const component = await render(<BlobData hash="0x01" data={ data }/>);
   await expect(component).toHaveScreenshot();
-  await component.locator('select').selectOption('UTF-8');
+  await component.getByRole('button', { name: 'Raw' }).click();
+  await component.getByText('UTF-8').click();
   await expect(component).toHaveScreenshot();
 });
 
@@ -21,7 +22,8 @@ test('image', async({ render }) => {
   const data = '0x89504E470D0A1A0A0000000D494844520000003C0000003C0403000000C8D2C4410000000467414D410000B18F0BFC6105000000017352474200AECE1CE900000027504C54454C69712B6CB02A6CB02B6CB02B6CB02B6CB02B6CB02B6CB02B6CB02B6CB02B6CB02B6CB02B6CB0F4205A540000000C74524E5300ED2F788CD91B99475C09B969CFA99D0000004F7A5458745261772070726F66696C65207479706520697074630000789CE3CA2C2849E6520003230B2E630B1323134B9314031320448034C3640323B35420CBD8D4C8C4CCC41CC407CB8048A04A2E0028950EE32A226D1F0000000970485973000084DF000084DF0195C81C33000000F24944415438CB636000018E983367CE482780D90CDA40F6991D0C4820152472A60ACCE6DA03629F4E40929E03961602B39964C09C0624691B24690E88F48461215D03160903B3D962C01C07842C2758C341A80643B0B40484C3646C6C5C78E6E016171723A8E215262EEE31670E161B1B7731304C05AB155EC08002C0D172E6F80206884DBB50651938CF4003FE0CBA4390E3C56064482F53525252C329CD562A2828283A0197340B22AAB0494332C311FCD2C747A547A58996C69998D8F12745B68DA0846C85331B2CEAE8E8681A81D91F8B348C4605D0527B02A4283FA88026CD05163EAAC0900ED21EC9800EC0C2110C002BBA9FE999B920330000000049454E44AE426082';
   const component = await render(<BlobData hash="0x01" data={ data }/>);
   await expect(component).toHaveScreenshot();
-  await component.locator('select').selectOption('Base64');
+  await component.getByRole('button', { name: 'Image' }).click();
+  await component.getByText('Base64').click();
   await expect(component).toHaveScreenshot();
 });
 

ui/blob/BlobData.tsx

@@ -1,4 +1,4 @@
-import { Flex, GridItem, Select, Skeleton, Button } from '@chakra-ui/react';
+import { Flex, GridItem, Skeleton, Button } from '@chakra-ui/react';
 import React from 'react';
 
 import * as blobUtils from 'lib/blob';
@@ -10,12 +10,18 @@ import hexToBytes from 'lib/hexToBytes';
 import hexToUtf8 from 'lib/hexToUtf8';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import RawDataSnippet from 'ui/shared/RawDataSnippet';
+import Select from 'ui/shared/select/Select';
 
 import BlobDataImage from './BlobDataImage';
 
-const FORMATS = [ 'Image', 'Raw', 'UTF-8', 'Base64' ] as const;
+const FORMATS = [
+  { label: 'Image', value: 'Image' as const },
+  { label: 'Raw', value: 'Raw' as const },
+  { label: 'UTF-8', value: 'UTF-8' as const },
+  { label: 'Base64', value: 'Base64' as const },
+];
 
-type Format = typeof FORMATS[number];
+type Format = typeof FORMATS[number]['value'];
 
 interface Props {
   data: string;
@@ -34,18 +40,14 @@ const BlobData = ({ data, isLoading, hash }: Props) => {
   }, [ data, isLoading ]);
 
   const isImage = guessedType?.mime?.startsWith('image/');
-  const formats = isImage ? FORMATS : FORMATS.filter((format) => format !== 'Image');
+  const formats = isImage ? FORMATS : FORMATS.filter((format) => format.value !== 'Image');
 
   React.useEffect(() => {
     if (isImage) {
       setFormat('Image');
     }
   }, [ isImage ]);
 
-  const handleSelectChange = React.useCallback((event: React.ChangeEvent<HTMLSelectElement>) => {
-    setFormat(event.target.value as Format);
-  }, []);
-
   const handleDownloadButtonClick = React.useCallback(() => {
     const fileBlob = (() => {
       switch (format) {
@@ -104,16 +106,13 @@ const BlobData = ({ data, isLoading, hash }: Props) => {
         </Skeleton>
         <Skeleton ml={ 5 } isLoaded={ !isLoading }>
           <Select
-            size="xs"
-            borderRadius="base"
-            value={ format }
-            onChange={ handleSelectChange }
-            w="auto"
-          >
-            { formats.map((format) => (
-              <option key={ format } value={ format }>{ format }</option>
-            )) }
-          </Select>
+            options={ formats }
+            name="format"
+            defaultValue={ format }
+            onChange={ setFormat }
+            isLoading={ isLoading }
+            w="95px"
+          />
         </Skeleton>
         <Skeleton ml="auto" mr={ 3 } isLoaded={ !isLoading }>
           <Button

ui/marketplace/utils.ts

@@ -1,20 +1,21 @@
 import type { NextRouter } from 'next/router';
 
+import type { SelectOption } from 'ui/shared/select/types';
+
 import config from 'configs/app';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import removeQueryParam from 'lib/router/removeQueryParam';
-import type { TOption } from 'ui/shared/sort/Option';
 
 const feature = config.features.marketplace;
 
 export type SortValue = 'rating_score' | 'rating_count' | 'security_score';
 
-export const SORT_OPTIONS: Array<TOption<SortValue>> = [
-  { title: 'Default', id: undefined },
-  (feature.isEnabled && feature.rating) && { title: 'Top rated', id: 'rating_score' },
-  (feature.isEnabled && feature.rating) && { title: 'Most rated', id: 'rating_count' },
-  (feature.isEnabled && feature.securityReportsUrl) && { title: 'Security score', id: 'security_score' },
-].filter(Boolean) as Array<TOption<SortValue>>;
+export const SORT_OPTIONS: Array<SelectOption<SortValue>> = [
+  { label: 'Default', value: undefined },
+  (feature.isEnabled && feature.rating) && { label: 'Top rated', value: 'rating_score' },
+  (feature.isEnabled && feature.rating) && { label: 'Most rated', value: 'rating_count' },
+  (feature.isEnabled && feature.securityReportsUrl) && { label: 'Security score', value: 'security_score' },
+].filter(Boolean) as Array<SelectOption<SortValue>>;
 
 export function getAppUrl(url: string | undefined, router: NextRouter) {
   if (!url) {

ui/nameDomains/utils.ts

@@ -1,15 +1,15 @@
 import type { EnsLookupSorting } from 'types/api/ens';
+import type { SelectOption } from 'ui/shared/select/types';
 
 import getNextSortValueShared from 'ui/shared/sort/getNextSortValue';
-import type { TOption } from 'ui/shared/sort/Option';
 
 export type SortField = EnsLookupSorting['sort'];
 export type Sort = `${ EnsLookupSorting['sort'] }-${ EnsLookupSorting['order'] }`;
 
-export const SORT_OPTIONS: Array<TOption<Sort>> = [
-  { title: 'Default', id: undefined },
-  { title: 'Registered on descending', id: 'registration_date-DESC' },
-  { title: 'Registered on ascending', id: 'registration_date-ASC' },
+export const SORT_OPTIONS: Array<SelectOption<Sort>> = [
+  { label: 'Default', value: undefined },
+  { label: 'Registered on descending', value: 'registration_date-DESC' },
+  { label: 'Registered on ascending', value: 'registration_date-ASC' },
 ];
 
 const SORT_SEQUENCE: Record<SortField, Array<Sort | undefined>> = {

ui/pages/Chart.tsx

@@ -18,13 +18,14 @@ import getQueryParamString from 'lib/router/getQueryParamString';
 import isCustomAppError from 'ui/shared/AppError/isCustomAppError';
 import ChartIntervalSelect from 'ui/shared/chart/ChartIntervalSelect';
 import ChartMenu from 'ui/shared/chart/ChartMenu';
-import ChartResolutionSelect from 'ui/shared/chart/ChartResolutionSelect';
 import ChartWidgetContent from 'ui/shared/chart/ChartWidgetContent';
 import useChartQuery from 'ui/shared/chart/useChartQuery';
 import useZoom from 'ui/shared/chart/useZoom';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import IconSvg from 'ui/shared/IconSvg';
 import PageTitle from 'ui/shared/Page/PageTitle';
+import Select from 'ui/shared/select/Select';
+import { STATS_RESOLUTIONS } from 'ui/stats/constants';
 
 const DEFAULT_RESOLUTION = Resolution.DAY;
 
@@ -68,8 +69,9 @@ const Chart = () => {
   const id = getQueryParamString(router.query.id);
   const intervalFromQuery = getIntervalFromQuery(router);
   const resolutionFromQuery = getResolutionFromQuery(router);
+  const defaultResolution = resolutionFromQuery || DEFAULT_RESOLUTION;
   const [ intervalState, setIntervalState ] = React.useState<StatsIntervalIds | undefined>(intervalFromQuery);
-  const [ resolution, setResolution ] = React.useState<Resolution>(resolutionFromQuery || DEFAULT_RESOLUTION);
+  const [ resolution, setResolution ] = React.useState<Resolution>(defaultResolution);
   const { zoomRange, handleZoom, handleZoomReset } = useZoom();
 
   const interval = intervalState || getIntervalByResolution(resolution);
@@ -163,6 +165,13 @@ const Chart = () => {
     </Button>
   );
 
+  const resolutionOptions = React.useMemo(() => {
+    const resolutions = lineQuery.data?.info?.resolutions || [];
+    return STATS_RESOLUTIONS
+      .filter((resolution) => resolutions.includes(resolution.id))
+      .map((resolution) => ({ value: resolution.id, label: resolution.title }));
+  }, [ lineQuery.data?.info?.resolutions ]);
+
   return (
     <>
       <PageTitle
@@ -174,7 +183,7 @@ const Chart = () => {
         withTextAd
       />
       <Flex alignItems="center" justifyContent="space-between">
-        <Flex alignItems="center" gap={{ base: 3, lg: 6 }} maxW="100%" overflow="hidden">
+        <Flex alignItems="center" gap={{ base: 3, lg: 6 }} maxW="100%">
           <Flex alignItems="center" gap={ 3 }>
             { !isMobile && <Text>Period</Text> }
             <ChartIntervalSelect interval={ interval } onIntervalChange={ onIntervalChange }/>
@@ -187,11 +196,13 @@ const Chart = () => {
               <Skeleton isLoaded={ !isInfoLoading }>
                 { isMobile ? 'Res.' : 'Resolution' }
               </Skeleton>
-              <ChartResolutionSelect
-                resolution={ resolution }
-                onResolutionChange={ onResolutionChange }
-                resolutions={ lineQuery.data?.info?.resolutions || [] }
+              <Select
+                options={ resolutionOptions }
+                defaultValue={ defaultResolution }
+                onChange={ onResolutionChange }
                 isLoading={ isInfoLoading }
+                w={{ base: 'fit-content', lg: '160px' }}
+                fontWeight={ 600 }
               />
             </Flex>
           ) }

ui/shared/RawInputData.tsx

@@ -1,11 +1,15 @@
-import { Select, Skeleton } from '@chakra-ui/react';
 import React from 'react';
 
 import hexToUtf8 from 'lib/hexToUtf8';
 import RawDataSnippet from 'ui/shared/RawDataSnippet';
+import Select from 'ui/shared/select/Select';
 
-export type DataType = 'Hex' | 'UTF-8';
-const OPTIONS: Array<DataType> = [ 'Hex', 'UTF-8' ];
+const OPTIONS = [
+  { label: 'Hex', value: 'Hex' as const },
+  { label: 'UTF-8', value: 'UTF-8' as const },
+];
+
+export type DataType = (typeof OPTIONS)[number]['value'];
 
 interface Props {
   hex: string;
@@ -18,17 +22,17 @@ interface Props {
 const RawInputData = ({ hex, rightSlot: rightSlotProp, defaultDataType = 'Hex', isLoading, minHeight }: Props) => {
   const [ selectedDataType, setSelectedDataType ] = React.useState<DataType>(defaultDataType);
 
-  const handleSelectChange = React.useCallback((event: React.ChangeEvent<HTMLSelectElement>) => {
-    setSelectedDataType(event.target.value as DataType);
-  }, []);
-
   const rightSlot = (
     <>
-      <Skeleton isLoaded={ !isLoading } borderRadius="base" w="auto" mr="auto">
-        <Select size="xs" borderRadius="base" value={ selectedDataType } onChange={ handleSelectChange }>
-          { OPTIONS.map((option) => <option key={ option } value={ option }>{ option }</option>) }
-        </Select>
-      </Skeleton>
+      <Select
+        options={ OPTIONS }
+        name="data-type"
+        defaultValue={ defaultDataType }
+        onChange={ setSelectedDataType }
+        isLoading={ isLoading }
+        w="90px"
+        mr="auto"
+      />
       { rightSlotProp }
     </>
   );