refactor Select usage

toolkit/chakra/select.tsx

@@ -178,11 +178,12 @@ export interface SelectProps extends SelectRootProps {
   collection: ListCollection<CollectionItem>;
   placeholder: string;
   portalled?: boolean;
+  loading?: boolean;
 }
 
 // TODO @tom2drum refactor selects
 export const Select = React.forwardRef<HTMLDivElement, SelectProps>((props, ref) => {
-  const { collection, placeholder, portalled = true, ...rest } = props;
+  const { collection, placeholder, portalled = true, loading, ...rest } = props;
   return (
     <SelectRoot
       ref={ ref }
@@ -190,7 +191,7 @@ export const Select = React.forwardRef<HTMLDivElement, SelectProps>((props, ref)
       variant="outline"
       { ...rest }
     >
-      <SelectControl>
+      <SelectControl loading={ loading }>
         <SelectValueText placeholder={ placeholder }/>
       </SelectControl>
       <SelectContent portalled={ portalled }>

ui/address/contract/ContractSourceAddressSelector.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 import { route } from 'nextjs-routes';
 
-import { SelectContent, SelectControl, SelectItem, SelectRoot, SelectValueText } from 'toolkit/chakra/select';
+import { Select } from 'toolkit/chakra/select';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
@@ -59,23 +59,14 @@ const ContractSourceAddressSelector = ({ className, selectedItem, onItemSelect,
   return (
     <Flex columnGap={ 3 } rowGap={ 2 } alignItems="center" className={ className }>
       <chakra.span fontWeight={ 500 } fontSize="sm">{ label }</chakra.span>
-      <SelectRoot
+      <Select
         collection={ collection }
-        variant="outline"
+        placeholder="Select contract"
         defaultValue={ [ selectedItem.address ] }
         onValueChange={ handleItemSelect }
-      >
-        <SelectControl maxW={{ base: '180px', lg: 'none' }} loading={ isLoading }>
-          <SelectValueText placeholder="Select contract"/>
-        </SelectControl>
-        <SelectContent>
-          { collection.items.map((item) => (
-            <SelectItem item={ item } key={ item.value }>
-              { item.label }
-            </SelectItem>
-          )) }
-        </SelectContent>
-      </SelectRoot>
+        maxW={{ base: '180px', lg: 'none' }}
+        loading={ isLoading }
+      />
       <Flex columnGap={ 2 } alignItems="center">
         <CopyToClipboard text={ selectedItem.address } ml={ 0 }/>
         <LinkNewTab

ui/blob/BlobData.tsx

@@ -9,7 +9,7 @@ import hexToBase64 from 'lib/hexToBase64';
 import hexToBytes from 'lib/hexToBytes';
 import hexToUtf8 from 'lib/hexToUtf8';
 import { Button } from 'toolkit/chakra/button';
-import { SelectContent, SelectItem, SelectRoot, SelectControl, SelectValueText } from 'toolkit/chakra/select';
+import { Select } from 'toolkit/chakra/select';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import RawDataSnippet from 'ui/shared/RawDataSnippet';
@@ -115,23 +115,15 @@ const BlobData = ({ data, isLoading, hash }: Props) => {
         <Skeleton fontWeight={{ base: 700, lg: 500 }} loading={ isLoading }>
           Blob data
         </Skeleton>
-        <SelectRoot
+        <Select
           collection={ collection }
-          variant="outline"
-          value={ [ format ] }
+          placeholder="Select type"
+          defaultValue={ [ format ] }
           onValueChange={ handleFormatChange }
-        >
-          <SelectControl loading={ isLoading } ml={ 5 } w="100px">
-            <SelectValueText placeholder="Select framework"/>
-          </SelectControl>
-          <SelectContent>
-            { collection.items.map((item) => (
-              <SelectItem item={ item } key={ item.value }>
-                { item.label }
-              </SelectItem>
-            )) }
-          </SelectContent>
-        </SelectRoot>
+          ml={ 5 }
+          w="100px"
+          loading={ isLoading }
+        />
         <Skeleton ml="auto" mr={ 3 } loading={ isLoading }>
           <Button
             variant="outline"

ui/pages/Chart.tsx

@@ -17,7 +17,7 @@ import * as mixpanel from 'lib/mixpanel/index';
 import getQueryParamString from 'lib/router/getQueryParamString';
 import { Button } from 'toolkit/chakra/button';
 import { IconButton } from 'toolkit/chakra/icon-button';
-import { SelectContent, SelectControl, SelectItem, SelectRoot, SelectValueText } from 'toolkit/chakra/select';
+import { Select } from 'toolkit/chakra/select';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import isCustomAppError from 'ui/shared/AppError/isCustomAppError';
 import ChartIntervalSelect from 'ui/shared/chart/ChartIntervalSelect';
@@ -201,24 +201,14 @@ const Chart = () => {
               <Skeleton loading={ isInfoLoading }>
                 { isMobile ? 'Res.' : 'Resolution' }
               </Skeleton>
-              <SelectRoot
+              <Select
                 collection={ resolutionCollection }
-                variant="outline"
+                placeholder="Select resolution"
                 defaultValue={ [ defaultResolution ] }
                 onValueChange={ onResolutionChange }
                 w={{ base: 'fit-content', lg: '160px' }}
-              >
-                <SelectControl loading={ isInfoLoading }>
-                  <SelectValueText placeholder="Select resolution"/>
-                </SelectControl>
-                <SelectContent>
-                  { resolutionCollection.items.map((item) => (
-                    <SelectItem item={ item } key={ item.value }>
-                      { item.label }
-                    </SelectItem>
-                  )) }
-                </SelectContent>
-              </SelectRoot>
+                loading={ isInfoLoading }
+              />
             </Flex>
           ) }
           { (Boolean(zoomRange)) && (

ui/shared/RawInputData.tsx

@@ -2,7 +2,7 @@ import { createListCollection } from '@chakra-ui/react';
 import React from 'react';
 
 import hexToUtf8 from 'lib/hexToUtf8';
-import { SelectItem, SelectContent, SelectValueText, SelectRoot, SelectControl } from 'toolkit/chakra/select';
+import { Select } from 'toolkit/chakra/select';
 import RawDataSnippet from 'ui/shared/RawDataSnippet';
 
 const OPTIONS = [
@@ -33,26 +33,15 @@ const RawInputData = ({ hex, rightSlot: rightSlotProp, defaultDataType = 'Hex',
 
   const rightSlot = (
     <>
-      <SelectRoot
-        name="data-type"
+      <Select
         collection={ collection }
-        variant="outline"
+        placeholder="Select type"
         defaultValue={ [ defaultDataType ] }
         onValueChange={ handleValueChange }
         w="100px"
         mr="auto"
-      >
-        <SelectControl loading={ isLoading }>
-          <SelectValueText placeholder="Select type"/>
-        </SelectControl>
-        <SelectContent>
-          { collection.items.map((item) => (
-            <SelectItem item={ item } key={ item.value }>
-              { item.label }
-            </SelectItem>
-          )) }
-        </SelectContent>
-      </SelectRoot>
+        loading={ isLoading }
+      />
       { rightSlotProp }
     </>
   );

ui/shared/chart/ChartIntervalSelect.tsx

@@ -3,7 +3,7 @@ import React from 'react';
 
 import type { StatsInterval, StatsIntervalIds } from 'types/client/stats';
 
-import { SelectContent, SelectControl, SelectItem, SelectRoot, SelectValueText } from 'toolkit/chakra/select';
+import { Select } from 'toolkit/chakra/select';
 import { Skeleton } from 'toolkit/chakra/skeleton';
 import type { TagProps } from 'toolkit/chakra/tag';
 import TagGroupSelect from 'ui/shared/tagGroupSelect/TagGroupSelect';
@@ -12,7 +12,7 @@ import { STATS_INTERVALS } from 'ui/stats/constants';
 const intervalCollection = createListCollection({
   items: Object.keys(STATS_INTERVALS).map((id: string) => ({
     value: id,
-    label: STATS_INTERVALS[id as StatsIntervalIds].shortTitle,
+    label: STATS_INTERVALS[id as StatsIntervalIds].title,
   })),
 });
 
@@ -39,25 +39,15 @@ const ChartIntervalSelect = ({ interval, onIntervalChange, isLoading, selectTagS
       <Skeleton hideBelow="lg" borderRadius="base" loading={ isLoading }>
         <TagGroupSelect<StatsIntervalIds> items={ intervalListShort } onChange={ onIntervalChange } value={ interval } tagSize={ selectTagSize }/>
       </Skeleton>
-      <SelectRoot
+      <Select
         collection={ intervalCollection }
-        variant="outline"
+        placeholder="Select interval"
         defaultValue={ [ interval ] }
         onValueChange={ handleItemSelect }
         hideFrom="lg"
         w="100%"
-      >
-        <SelectControl loading={ isLoading }>
-          <SelectValueText placeholder="Select interval"/>
-        </SelectControl>
-        <SelectContent>
-          { intervalCollection.items.map((item) => (
-            <SelectItem item={ item } key={ item.value }>
-              { item.label }
-            </SelectItem>
-          )) }
-        </SelectContent>
-      </SelectRoot>
+        loading={ isLoading }
+      />
     </>
   );
 };

ui/stats/StatsFilters.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import type * as stats from '@blockscout/stats-types';
 import type { StatsIntervalIds } from 'types/client/stats';
 
-import { SelectContent, SelectControl, SelectItem, SelectRoot, SelectValueText } from 'toolkit/chakra/select';
+import { Select } from 'toolkit/chakra/select';
 import ChartIntervalSelect from 'ui/shared/chart/ChartIntervalSelect';
 import FilterInput from 'ui/shared/filters/FilterInput';
 
@@ -58,24 +58,14 @@ const StatsFilters = ({
         w={{ base: '100%', lg: 'auto' }}
         area="section"
       >
-        <SelectRoot
+        <Select
           collection={ collection }
-          variant="outline"
+          placeholder="Select section"
           defaultValue={ [ currentSection ] }
           onValueChange={ handleItemSelect }
           w={{ base: '100%', lg: '136px' }}
-        >
-          <SelectControl loading={ isLoading }>
-            <SelectValueText placeholder="Select section"/>
-          </SelectControl>
-          <SelectContent>
-            { collection.items.map((item) => (
-              <SelectItem item={ item } key={ item.value }>
-                { item.label }
-              </SelectItem>
-            )) }
-          </SelectContent>
-        </SelectRoot>
+          loading={ isLoading }
+        />
       </GridItem>
 
       <GridItem

ui/tokenInstance/TokenInstanceMetadata.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import type { TokenInstance } from 'types/api/token';
 
 import { Alert } from 'toolkit/chakra/alert';
-import { SelectContent, SelectControl, SelectItem, SelectRoot, SelectValueText } from 'toolkit/chakra/select';
+import { Select } from 'toolkit/chakra/select';
 import ContentLoader from 'ui/shared/ContentLoader';
 import CopyToClipboard from 'ui/shared/CopyToClipboard';
 import RawDataSnippet from 'ui/shared/RawDataSnippet';
@@ -56,24 +56,14 @@ const TokenInstanceMetadata = ({ data, isPlaceholderData }: Props) => {
       ) }
       <Flex alignItems="center" mb={ 6 }>
         <chakra.span fontWeight={ 500 }>Metadata</chakra.span>
-        <SelectRoot
+        <Select
           collection={ collection }
-          variant="outline"
+          placeholder="Select type"
+          defaultValue={ [ format ] }
           onValueChange={ handleValueChange }
-          value={ [ format ] }
           ml={ 5 }
-        >
-          <SelectControl w="100px">
-            <SelectValueText placeholder="Select format"/>
-          </SelectControl>
-          <SelectContent>
-            { collection.items.map((item) => (
-              <SelectItem item={ item } key={ item.value }>
-                { item.label }
-              </SelectItem>
-            )) }
-          </SelectContent>
-        </SelectRoot>
+          w="100px"
+        />
         { format === 'JSON' && <CopyToClipboard text={ JSON.stringify(data) } ml="auto"/> }
       </Flex>
       { content }