contract ABI filters

eslint.config.mjs

@@ -32,7 +32,7 @@ const RESTRICTED_MODULES = {
     {
       name: '@chakra-ui/react',
       importNames: [
-        'Menu', 'useToast', 'useDisclosure', 'useClipboard', 'Tooltip', 'Skeleton', 'IconButton', 'Button', 'Link', 'Tag', 'Switch',
+        'Menu', 'useToast', 'useDisclosure', 'useClipboard', 'Tooltip', 'Skeleton', 'IconButton', 'Button', 'ButtonGroup', 'Link', 'Tag', 'Switch',
         'Image', 'Popover', 'PopoverTrigger', 'PopoverContent', 'PopoverBody', 'PopoverFooter',
         'DrawerRoot', 'DrawerBody', 'DrawerContent', 'DrawerOverlay', 'DrawerBackdrop', 'DrawerTrigger', 'Drawer',
         'Alert', 'AlertIcon', 'AlertTitle', 'AlertDescription',

package.json

@@ -8,6 +8,7 @@
     "npm": "10.9.0"
   },
   "scripts": {
+    "postinstall": "yarn chakra:typegen",
     "dev": "./tools/scripts/dev.sh",
     "dev:preset": "./tools/scripts/dev.preset.sh",
     "dev:preset:sync": "tsc -p ./tools/preset-sync/tsconfig.json && node ./tools/preset-sync/index.js",
@@ -44,7 +45,7 @@
     "@blockscout/bens-types": "1.4.1",
     "@blockscout/stats-types": "2.0.0",
     "@blockscout/visualizer-types": "0.2.0",
-    "@chakra-ui/react": "3.4.0",
+    "@chakra-ui/react": "3.8.0",
     "@cloudnouns/kit": "1.1.6",
     "@emotion/react": "11.14.0",
     "@growthbook/growthbook-react": "0.21.0",

toolkit/chakra/button.tsx

-import type { ButtonProps as ChakraButtonProps } from '@chakra-ui/react';
+import type { ButtonProps as ChakraButtonProps, ButtonGroupProps as ChakraButtonGroupProps } from '@chakra-ui/react';
 import {
   AbsoluteCenter,
   Button as ChakraButton,
+  ButtonGroup as ChakraButtonGroup,
   Span,
   Spinner,
 } from '@chakra-ui/react';
 import * as React from 'react';
 
+import { Skeleton } from './skeleton';
+
 interface ButtonLoadingProps {
   loading?: boolean;
   loadingText?: React.ReactNode;
@@ -61,3 +64,61 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     );
   },
 );
+
+export interface ButtonGroupProps extends ChakraButtonGroupProps {}
+
+export const ButtonGroup = React.forwardRef<HTMLDivElement, ButtonGroupProps>(
+  function ButtonGroup(props, ref) {
+    const { ...rest } = props;
+
+    return (
+      <ChakraButtonGroup ref={ ref } { ...rest }/>
+    );
+  },
+);
+
+export interface ButtonGroupRadioProps extends Omit<ChakraButtonGroupProps, 'children' | 'onChange'> {
+  children: Array<React.ReactElement<ButtonProps>>;
+  onChange?: (value: string) => void;
+  defaultValue?: string;
+  loading?: boolean;
+}
+
+export const ButtonGroupRadio = React.forwardRef<HTMLDivElement, ButtonGroupRadioProps>(
+  function ButtonGroupRadio(props, ref) {
+    const { children, onChange, variant = 'segmented', defaultValue, loading = false, ...rest } = props;
+
+    const firstChildValue = React.useMemo(() => {
+      const firstChild = Array.isArray(children) ? children[0] : undefined;
+      return typeof firstChild?.props.value === 'string' ? firstChild.props.value : undefined;
+    }, [ children ]);
+
+    const [ value, setValue ] = React.useState<string | undefined>(defaultValue ?? firstChildValue);
+
+    const handleItemClick = React.useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
+      const value = event.currentTarget.value;
+      setValue(value);
+      onChange?.(value);
+    }, [ onChange ]);
+
+    const clonedChildren = React.Children.map(children, (child: React.ReactElement<ButtonProps>) => {
+      return React.cloneElement(child, {
+        onClick: handleItemClick,
+        selected: value === child.props.value,
+        variant,
+      });
+    });
+
+    return (
+      <Skeleton loading={ loading }>
+        <ChakraButtonGroup
+          ref={ ref }
+          gap={ 0 }
+          { ...rest }
+        >
+          { clonedChildren }
+        </ChakraButtonGroup>
+      </Skeleton>
+    );
+  },
+);

toolkit/chakra/select.tsx

@@ -140,7 +140,7 @@ export const SelectRoot = React.forwardRef<
     <ChakraSelect.Root
       { ...props }
       ref={ ref }
-      positioning={{ sameWidth: false, ...props.positioning }}
+      positioning={{ sameWidth: false, ...props.positioning, offset: { mainAxis: 4, ...props.positioning?.offset } }}
     >
       { props.asChild ? (
         props.children

toolkit/theme/foundations/semanticTokens.ts

@@ -45,6 +45,15 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
           DEFAULT: { value: { _light: '{colors.gray.300}', _dark: '{colors.gray.600}' } },
         },
       },
+      segmented: {
+        fg: {
+          DEFAULT: { value: { _light: '{colors.blue.600}', _dark: '{colors.blue.300}' } },
+          selected: { value: { _light: '{colors.blue.700}', _dark: '{colors.gray.50}' } },
+        },
+        border: {
+          DEFAULT: { value: { _light: '{colors.blue.50}', _dark: '{colors.gray.800}' } },
+        },
+      },
       hero: {
         bg: {
           DEFAULT: {

toolkit/theme/recipes/button.recipe.ts

@@ -131,6 +131,36 @@ export const recipe = defineRecipe({
           },
         },
       },
+      segmented: {
+        bg: 'transparent',
+        color: 'button.segmented.fg',
+        borderColor: 'button.segmented.border',
+        borderWidth: '2px',
+        borderStyle: 'solid',
+        borderRadius: 'none',
+        _hover: {
+          color: 'link.primary.hover',
+        },
+        _selected: {
+          bg: 'button.segmented.border',
+          color: 'button.segmented.fg.selected',
+          _hover: {
+            bg: 'button.segmented.border',
+            color: 'button.segmented.fg.selected',
+          },
+        },
+        _notFirst: {
+          borderLeftWidth: '0',
+        },
+        _first: {
+          borderTopLeftRadius: 'base',
+          borderBottomLeftRadius: 'base',
+        },
+        _last: {
+          borderTopRightRadius: 'base',
+          borderBottomRightRadius: 'base',
+        },
+      },
       plain: {
         bg: 'transparent',
         color: 'inherit',

toolkit/theme/recipes/tabs.recipe.ts

@@ -29,12 +29,12 @@ export const recipe = defineSlotRecipe({
       },
     },
     trigger: {
+      fontWeight: '600',
       outline: '0',
       minW: 'var(--tabs-height)',
       height: 'var(--tabs-height)',
       display: 'flex',
       alignItems: 'center',
-      fontWeight: 'medium',
       position: 'relative',
       cursor: 'button',
       gap: '2',
@@ -130,7 +130,6 @@ export const recipe = defineSlotRecipe({
     variant: {
       solid: {
         trigger: {
-          fontWeight: '600',
           borderRadius: 'base',
           color: 'tabs.solid.fg',
           bg: 'transparent',
@@ -157,7 +156,6 @@ export const recipe = defineSlotRecipe({
           },
         },
         trigger: {
-          fontWeight: '500',
           color: 'tabs.secondary.fg',
           bg: 'transparent',
           borderWidth: '2px',

ui/address/AddressContract.tsx

@@ -20,7 +20,7 @@ const AddressContract = ({ tabs, isLoading, shouldRender }: Props) => {
   }
 
   return (
-    <RoutedTabs tabs={ tabs } variant="outline" colorScheme="gray" size="sm" listProps={ TAB_LIST_PROPS } isLoading={ isLoading }/>
+    <RoutedTabs tabs={ tabs } variant="secondary" size="sm" listProps={ TAB_LIST_PROPS } isLoading={ isLoading }/>
   );
 };
 

ui/address/contract/ContractSourceAddressSelector.tsx

-import { chakra, Flex } from '@chakra-ui/react';
+import { chakra, createListCollection, Flex } from '@chakra-ui/react';
 import React from 'react';
 
 import { route } from 'nextjs-routes';
 
-import Skeleton from 'ui/shared/chakra/Skeleton';
+import { SelectContent, SelectControl, SelectItem, SelectRoot, SelectValueText } from 'toolkit/chakra/select';
+import { Skeleton } from 'toolkit/chakra/skeleton';
 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;
@@ -25,19 +25,20 @@ interface Props {
 
 const ContractSourceAddressSelector = ({ className, selectedItem, onItemSelect, items, isLoading, label }: Props) => {
 
-  const handleItemSelect = React.useCallback((value: string) => {
-    const nextOption = items.find(({ address }) => address === value);
+  const handleItemSelect = React.useCallback(({ value }: { value: Array<string> }) => {
+    const nextOption = items.find(({ address }) => address === value[0]);
     if (nextOption) {
       onItemSelect(nextOption);
     }
   }, [ items, onItemSelect ]);
 
-  const options = React.useMemo(() => {
-    return items.map(({ address, name }) => ({ label: name || address, value: address }));
+  const collection = React.useMemo(() => {
+    const options = items.map(({ address, name }) => ({ label: name || address, value: address }));
+    return createListCollection({ items: options });
   }, [ items ]);
 
   if (isLoading) {
-    return <Skeleton h={ 6 } w={{ base: '300px', lg: '500px' }} className={ className }/>;
+    return <Skeleton loading h={ 6 } w={{ base: '300px', lg: '500px' }} className={ className }/>;
   }
 
   if (items.length === 0) {
@@ -58,15 +59,23 @@ const ContractSourceAddressSelector = ({ className, selectedItem, onItemSelect,
   return (
     <Flex columnGap={ 3 } rowGap={ 2 } alignItems="center" className={ className }>
       <chakra.span fontWeight={ 500 } fontSize="sm">{ label }</chakra.span>
-      <Select
-        options={ options }
-        name="contract-source-address"
-        defaultValue={ selectedItem.address }
-        onChange={ handleItemSelect }
-        isLoading={ isLoading }
-        maxW={{ base: '180px', lg: 'none' }}
-        fontWeight={ 600 }
-      />
+      <SelectRoot
+        collection={ collection }
+        variant="outline"
+        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>
       <Flex columnGap={ 2 } alignItems="center">
         <CopyToClipboard text={ selectedItem.address } ml={ 0 }/>
         <LinkNewTab

ui/address/contract/methods/ContractConnectWallet.tsx

-import { Alert, Button, Flex } from '@chakra-ui/react';
+import { Flex } from '@chakra-ui/react';
 import React from 'react';
 
 import config from 'configs/app';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import useWeb3Wallet from 'lib/web3/useWallet';
-import Skeleton from 'ui/shared/chakra/Skeleton';
+import { Alert } from 'toolkit/chakra/alert';
+import { Button } from 'toolkit/chakra/button';
+import { Skeleton } from 'toolkit/chakra/skeleton';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 
 interface Props {
@@ -25,7 +27,7 @@ const ContractConnectWallet = ({ isLoading }: Props) => {
             onClick={ web3Wallet.connect }
             size="sm"
             variant="outline"
-            isLoading={ web3Wallet.isOpen }
+            loading={ web3Wallet.isOpen }
             loadingText="Connect wallet"
           >
             Connect wallet
@@ -52,7 +54,7 @@ const ContractConnectWallet = ({ isLoading }: Props) => {
   })();
 
   return (
-    <Skeleton isLoaded={ !isLoading }>
+    <Skeleton loading={ isLoading }>
       <Alert status={ web3Wallet.address ? 'success' : 'warning' }>
         { content }
       </Alert>

ui/address/contract/methods/ContractCustomAbiAlert.tsx

-import { Alert } from '@chakra-ui/react';
 import React from 'react';
 
-import Skeleton from 'ui/shared/chakra/Skeleton';
+import { Alert } from 'toolkit/chakra/alert';
+
 interface Props {
   isLoading?: boolean;
 }
 
 const ContractCustomAbiAlert = ({ isLoading }: Props) => {
   return (
-    <Skeleton isLoaded={ !isLoading }>
-      <Alert status="warning">
+    <Alert status="warning" loading={ isLoading }>
       Note: Contract with custom ABI is only meant for debugging purpose and it is the user’s responsibility to ensure that the provided ABI
       matches the contract, otherwise errors may occur or results returned may be incorrect.
       Blockscout is not responsible for any losses that arise from the use of Read & Write contract.
     </Alert>
-    </Skeleton>
   );
 };
 

ui/address/contract/methods/ContractMethodsCustom.tsx

-import { Button, Flex, useDisclosure } from '@chakra-ui/react';
+import { Flex } from '@chakra-ui/react';
 import { useQueryClient } from '@tanstack/react-query';
 import { useRouter } from 'next/router';
 import React from 'react';
@@ -7,8 +7,10 @@ import type { SmartContract } from 'types/api/contract';
 
 import useApiQuery, { getResourceKey } from 'lib/api/useApiQuery';
 import getQueryParamString from 'lib/router/getQueryParamString';
+import { Button } from 'toolkit/chakra/button';
+import { Skeleton } from 'toolkit/chakra/skeleton';
+import { useDisclosure } from 'toolkit/hooks/useDisclosure';
 import CustomAbiModal from 'ui/customAbi/CustomAbiModal/CustomAbiModal';
-import Skeleton from 'ui/shared/chakra/Skeleton';
 import RawDataSnippet from 'ui/shared/RawDataSnippet';
 import AuthGuard from 'ui/snippets/auth/AuthGuard';
 import useIsAuth from 'ui/snippets/auth/useIsAuth';
@@ -58,7 +60,7 @@ const ContractMethodsCustom = ({ isLoading: isLoadingProp }: Props) => {
 
   const updateButton = React.useMemo(() => {
     return (
-      <Skeleton isLoaded={ !isLoading } ml="auto" mr="3" borderRadius="base">
+      <Skeleton loading={ isLoading } ml="auto" mr="3" borderRadius="base">
         <Button
           size="sm"
           variant="outline"
@@ -91,19 +93,19 @@ const ContractMethodsCustom = ({ isLoading: isLoadingProp }: Props) => {
             onChange={ filters.onChange }
             isLoading={ isLoading }
           />
-          <ContractMethodsContainer isLoading={ isLoading } isEmpty={ abi.length === 0 } type={ filters.methodType }>
+          { /* <ContractMethodsContainer isLoading={ isLoading } isEmpty={ abi.length === 0 } type={ filters.methodType }>
             <ContractAbi abi={ abi } tab={ tab } addressHash={ addressHash } visibleItems={ filters.visibleItems }/>
-          </ContractMethodsContainer>
+          </ContractMethodsContainer> */ }
         </>
       ) : (
         <>
-          <Skeleton isLoaded={ !isLoading }>
+          <Skeleton loading={ isLoading }>
             Add custom ABIs for this contract and access when logged into your account. Helpful for debugging,
             functional testing and contract interaction.
           </Skeleton>
           <AuthGuard onAuthSuccess={ modal.onOpen }>
             { ({ onClick }) => (
-              <Skeleton isLoaded={ !isLoading } w="fit-content">
+              <Skeleton loading={ isLoading } w="fit-content">
                 <Button
                   size="sm"
                   onClick={ onClick }

ui/address/contract/methods/ContractMethodsFilters.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 
 import type { MethodType } from './types';
 
+import { ButtonGroupRadio, Button } from 'toolkit/chakra/button';
 import FilterInput from 'ui/shared/filters/FilterInput';
-import RadioButtonGroup from 'ui/shared/radioButtonGroup/RadioButtonGroup';
 
 import type { MethodsFilters } from './useMethodsFilters';
 import { TYPE_FILTER_OPTIONS } from './utils';
@@ -18,8 +18,8 @@ interface Props {
 
 const ContractMethodsFilters = ({ defaultMethodType, defaultSearchTerm, onChange, isLoading }: Props) => {
 
-  const handleTypeChange = React.useCallback((value: MethodType) => {
-    onChange({ type: 'method_type', value });
+  const handleTypeChange = React.useCallback((value: string) => {
+    onChange({ type: 'method_type', value: value as MethodType });
   }, [ onChange ]);
 
   const handleSearchTermChange = React.useCallback((value: string) => {
@@ -28,21 +28,25 @@ const ContractMethodsFilters = ({ defaultMethodType, defaultSearchTerm, onChange
 
   return (
     <Flex columnGap={ 3 } rowGap={ 3 } flexDir={{ base: 'column', lg: 'row' }}>
-      <RadioButtonGroup<MethodType>
-        name="contract-methods-filter"
+      <ButtonGroupRadio
         defaultValue={ defaultMethodType }
-        options={ TYPE_FILTER_OPTIONS }
         onChange={ handleTypeChange }
         w={{ lg: 'fit-content' }}
-        isLoading={ isLoading }
-      />
+        loading={ isLoading }
+      >
+        { TYPE_FILTER_OPTIONS.map((option) => (
+          <Button key={ option.value } value={ option.value } size="sm" px={ 3 }>
+            { option.title }
+          </Button>
+        )) }
+      </ButtonGroupRadio>
       <FilterInput
         initialValue={ defaultSearchTerm }
         onChange={ handleSearchTermChange }
         placeholder="Search by method name"
         w={{ base: '100%', lg: '450px' }}
-        size="xs"
-        isLoading={ isLoading }
+        size="sm"
+        loading={ isLoading }
       />
     </Flex>
   );

ui/address/contract/methods/ContractMethodsProxy.tsx

@@ -58,7 +58,7 @@ const ContractMethodsProxy = ({ implementations, isLoading: isInitialLoading }:
           isLoading={ isInitialLoading }
         />
       </div>
-      <ContractMethodsContainer
+      { /* <ContractMethodsContainer
         key={ selectedItem.address }
         isLoading={ isInitialLoading || contractQuery.isPending }
         isEmpty={ abi.length === 0 }
@@ -72,7 +72,7 @@ const ContractMethodsProxy = ({ implementations, isLoading: isInitialLoading }:
           visibleItems={ filters.visibleItems }
           sourceAddress={ selectedItem.address }
         />
-      </ContractMethodsContainer>
+      </ContractMethodsContainer> */ }
     </Flex>
   );
 };

ui/address/contract/methods/ContractMethodsRegular.tsx

@@ -36,9 +36,9 @@ const ContractMethodsRegular = ({ abi, isLoading }: Props) => {
         onChange={ filters.onChange }
         isLoading={ isLoading }
       />
-      <ContractMethodsContainer isLoading={ isLoading } isEmpty={ formattedAbi.length === 0 } type={ filters.methodType }>
+      { /* <ContractMethodsContainer isLoading={ isLoading } isEmpty={ formattedAbi.length === 0 } type={ filters.methodType }>
         <ContractAbi abi={ formattedAbi } tab={ tab } addressHash={ addressHash } visibleItems={ filters.visibleItems }/>
-      </ContractMethodsContainer>
+      </ContractMethodsContainer> */ }
     </Flex>
   );
 };

ui/address/contract/useContractTabs.tsx

@@ -80,21 +80,21 @@ export default function useContractTabs(data: Address | undefined, isPlaceholder
           component: <ContractDetails mainContractQuery={ contractQuery } channel={ channel } addressHash={ data.hash }/>,
           subTabs: CONTRACT_DETAILS_TAB_IDS as unknown as Array<string>,
         },
-        // contractQuery.data?.abi && {
-        //   id: [ 'read_write_contract' as const, 'read_contract' as const, 'write_contract' as const ],
-        //   title: 'Read/Write contract',
-        //   component: <ContractMethodsRegular abi={ contractQuery.data.abi } isLoading={ contractQuery.isPlaceholderData }/>,
-        // },
-        // verifiedImplementations.length > 0 && {
-        //   id: [ 'read_write_proxy' as const, 'read_proxy' as const, 'write_proxy' as const ],
-        //   title: 'Read/Write proxy',
-        //   component: <ContractMethodsProxy implementations={ verifiedImplementations } isLoading={ contractQuery.isPlaceholderData }/>,
-        // },
-        // config.features.account.isEnabled && {
-        //   id: [ 'read_write_custom_methods' as const, 'read_custom_methods' as const, 'write_custom_methods' as const ],
-        //   title: 'Custom ABI',
-        //   component: <ContractMethodsCustom isLoading={ contractQuery.isPlaceholderData }/>,
-        // },
+        contractQuery.data?.abi && {
+          id: [ 'read_write_contract' as const, 'read_contract' as const, 'write_contract' as const ],
+          title: 'Read/Write contract',
+          component: <ContractMethodsRegular abi={ contractQuery.data.abi } isLoading={ contractQuery.isPlaceholderData }/>,
+        },
+        verifiedImplementations.length > 0 && {
+          id: [ 'read_write_proxy' as const, 'read_proxy' as const, 'write_proxy' as const ],
+          title: 'Read/Write proxy',
+          component: <ContractMethodsProxy implementations={ verifiedImplementations } isLoading={ contractQuery.isPlaceholderData }/>,
+        },
+        config.features.account.isEnabled && {
+          id: [ 'read_write_custom_methods' as const, 'read_custom_methods' as const, 'write_custom_methods' as const ],
+          title: 'Custom ABI',
+          component: <ContractMethodsCustom isLoading={ contractQuery.isPlaceholderData }/>,
+        },
         // hasMudTab && {
         //   id: 'mud_system' as const,
         //   title: 'MUD System',

ui/customAbi/CustomAbiModal/CustomAbiForm.tsx

-import {
-  Box,
-  Button,
-} from '@chakra-ui/react';
+import { Box } from '@chakra-ui/react';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import React, { useCallback } from 'react';
 import type { SubmitHandler } from 'react-hook-form';
@@ -13,6 +10,7 @@ import type { ResourceErrorAccount } from 'lib/api/resources';
 import { resourceKey } from 'lib/api/resources';
 import useApiFetch from 'lib/api/useApiFetch';
 import getErrorMessage from 'lib/getErrorMessage';
+import { Button } from 'toolkit/chakra/button';
 import FormFieldAddress from 'ui/shared/forms/fields/FormFieldAddress';
 import FormFieldText from 'ui/shared/forms/fields/FormFieldText';
 
@@ -23,7 +21,7 @@ export type FormData = CustomAbi | {
 
 type Props = {
   data: FormData;
-  onClose: () => void;
+  onOpenChange: ({ open }: { open: boolean }) => void;
   onSuccess?: () => Promise<void>;
   setAlertVisible: (isAlertVisible: boolean) => void;
 };
@@ -36,7 +34,7 @@ type Inputs = {
 
 const NAME_MAX_LENGTH = 255;
 
-const CustomAbiForm: React.FC<Props> = ({ data, onClose, onSuccess, setAlertVisible }) => {
+const CustomAbiForm: React.FC<Props> = ({ data, onOpenChange, onSuccess, setAlertVisible }) => {
   const formApi = useForm<Inputs>({
     defaultValues: {
       contract_address_hash: data?.contract_address_hash || '',
@@ -82,7 +80,7 @@ const CustomAbiForm: React.FC<Props> = ({ data, onClose, onSuccess, setAlertVisi
         return [ response, ...(prevData || []) ];
       });
       await onSuccess?.();
-      onClose();
+      onOpenChange({ open: false });
     },
     onError: (error: ResourceErrorAccount<CustomAbiErrors>) => {
       const errorMap = error.payload?.errors;
@@ -110,15 +108,15 @@ const CustomAbiForm: React.FC<Props> = ({ data, onClose, onSuccess, setAlertVisi
         <FormFieldAddress<Inputs>
           name="contract_address_hash"
           placeholder="Smart contract address (0x...)"
-          isRequired
+          required
           bgColor="dialog.bg"
-          isReadOnly={ Boolean(data && 'contract_address_hash' in data) }
+          readOnly={ Boolean(data && 'contract_address_hash' in data) }
           mb={ 5 }
         />
         <FormFieldText<Inputs>
           name="name"
           placeholder="Project name"
-          isRequired
+          required
           rules={{
             maxLength: NAME_MAX_LENGTH,
           }}
@@ -128,10 +126,10 @@ const CustomAbiForm: React.FC<Props> = ({ data, onClose, onSuccess, setAlertVisi
         <FormFieldText<Inputs>
           name="abi"
           placeholder="Custom ABI [{...}] (JSON format)"
-          isRequired
+          required
           asComponent="Textarea"
           bgColor="dialog.bg"
-          size="lg"
+          size="2xl"
           minH="300px"
           mb={ 8 }
         />
@@ -139,8 +137,8 @@ const CustomAbiForm: React.FC<Props> = ({ data, onClose, onSuccess, setAlertVisi
           <Button
             size="lg"
             type="submit"
-            isDisabled={ !formApi.formState.isDirty }
-            isLoading={ isPending }
+            disabled={ !formApi.formState.isDirty }
+            loading={ isPending }
           >
             { data && 'id' in data ? 'Save' : 'Create custom ABI' }
           </Button>

ui/customAbi/CustomAbiModal/CustomAbiModal.tsx

@@ -7,25 +7,25 @@ import FormModal from 'ui/shared/FormModal';
 import CustomAbiForm, { type FormData } from './CustomAbiForm';
 
 type Props = {
-  isOpen: boolean;
-  onClose: () => void;
+  open: boolean;
+  onOpenChange: ({ open }: { open: boolean }) => void;
   onSuccess?: () => Promise<void>;
   data: FormData;
 };
 
-const CustomAbiModal: React.FC<Props> = ({ isOpen, onClose, data, onSuccess }) => {
+const CustomAbiModal: React.FC<Props> = ({ open, onOpenChange, data, onSuccess }) => {
   const title = data && 'id' in data ? 'Edit custom ABI' : 'New custom ABI';
   const text = !(data && 'id' in data) ? 'Double check the ABI matches the contract to prevent errors or incorrect results.' : '';
 
   const [ isAlertVisible, setAlertVisible ] = useState(false);
 
   const renderForm = useCallback(() => {
-    return <CustomAbiForm data={ data } onClose={ onClose } onSuccess={ onSuccess } setAlertVisible={ setAlertVisible }/>;
-  }, [ data, onClose, onSuccess ]);
+    return <CustomAbiForm data={ data } onOpenChange={ onOpenChange } onSuccess={ onSuccess } setAlertVisible={ setAlertVisible }/>;
+  }, [ data, onOpenChange, onSuccess ]);
   return (
     <FormModal<CustomAbi>
-      isOpen={ isOpen }
-      onClose={ onClose }
+      open={ open }
+      onOpenChange={ onOpenChange }
       title={ title }
       text={ text }
       renderForm={ renderForm }

ui/shared/filters/FilterInput.tsx

-import { chakra, Input, InputGroup, InputLeftElement, InputRightElement, useColorModeValue } from '@chakra-ui/react';
 import type { ChangeEvent } from 'react';
 import React, { useCallback, useState } from 'react';
 
-import Skeleton from 'ui/shared/chakra/Skeleton';
+import { Input } from 'toolkit/chakra/input';
+import { InputGroup } from 'toolkit/chakra/input-group';
+import type { SkeletonProps } from 'toolkit/chakra/skeleton';
+import { Skeleton } from 'toolkit/chakra/skeleton';
 import ClearButton from 'ui/shared/ClearButton';
 import IconSvg from 'ui/shared/IconSvg';
 
-type Props = {
+interface Props extends Omit<SkeletonProps, 'onChange' | 'loading'> {
   onChange?: (searchTerm: string) => void;
-  className?: string;
-  size?: 'xs' | 'sm' | 'md' | 'lg';
+  loading?: boolean;
+  size?: 'sm' | 'md' | 'lg';
   placeholder: string;
   initialValue?: string;
-  isLoading?: boolean;
   type?: React.HTMLInputTypeAttribute;
   name?: string;
 };
 
-const FilterInput = ({ onChange, className, size = 'sm', placeholder, initialValue, isLoading, type, name }: Props) => {
+const FilterInput = ({ onChange, size = 'sm', placeholder, initialValue, type, name, loading = false, ...rest }: Props) => {
   const [ filterQuery, setFilterQuery ] = useState(initialValue || '');
   const inputRef = React.useRef<HTMLInputElement>(null);
-  const iconColor = useColorModeValue('blackAlpha.600', 'whiteAlpha.600');
 
   const handleFilterQueryChange = useCallback((event: ChangeEvent<HTMLInputElement>) => {
     const { value } = event.target;
@@ -35,22 +35,25 @@ const FilterInput = ({ onChange, className, size = 'sm', placeholder, initialVal
     inputRef?.current?.focus();
   }, [ onChange ]);
 
+  const startElement = <IconSvg name="search" color={{ _light: 'blackAlpha.600', _dark: 'whiteAlpha.600' }} boxSize={ 4 }/>;
+
+  const endElement = filterQuery ? <ClearButton onClick={ handleFilterQueryClear }/> : null;
+
   return (
     <Skeleton
-      isLoaded={ !isLoading }
-      className={ className }
       minW="250px"
       borderRadius="base"
+      loading={ loading }
+      { ...rest }
     >
       <InputGroup
-        size={ size }
+        startElement={ startElement }
+        startElementProps={{ px: 2 }}
+        startOffset="32px"
+        endElement={ endElement }
+        endElementProps={{ px: 0, w: '32px' }}
+        endOffset="32px"
       >
-        <InputLeftElement
-          pointerEvents="none"
-        >
-          <IconSvg name="search" color={ iconColor } boxSize={ 4 }/>
-        </InputLeftElement>
-
         <Input
           ref={ inputRef }
           size={ size }
@@ -63,15 +66,9 @@ const FilterInput = ({ onChange, className, size = 'sm', placeholder, initialVal
           type={ type }
           name={ name }
         />
-
-        { filterQuery ? (
-          <InputRightElement>
-            <ClearButton onClick={ handleFilterQueryClear }/>
-          </InputRightElement>
-        ) : null }
       </InputGroup>
     </Skeleton>
   );
 };
 
-export default chakra(FilterInput);
+export default FilterInput;

ui/shared/forms/fields/FormFieldText.tsx

@@ -50,6 +50,7 @@ const FormFieldText = <
     <Textarea
       { ...field }
       autoComplete="off"
+      flexGrow={ 1 }
       { ...inputProps as TextareaProps }
       onBlur={ handleBlur }
     />

ui/shared/links/LinkNewTab.tsx

-import { chakra, IconButton, Tooltip, useColorModeValue } from '@chakra-ui/react';
+import { chakra } from '@chakra-ui/react';
 import React from 'react';
 
+import { IconButton } from 'toolkit/chakra/icon-button';
+import { Link } from 'toolkit/chakra/link';
+import { Tooltip } from 'toolkit/chakra/tooltip';
+
 import IconSvg from '../IconSvg';
 
 interface Props {
@@ -10,25 +14,21 @@ interface Props {
 }
 
 const LinkNewTab = ({ className, label, href }: Props) => {
-  const iconColor = useColorModeValue('gray.400', 'gray.500');
 
   return (
-    <Tooltip label={ label }>
+    <Tooltip content={ label }>
       <IconButton
+        asChild
         aria-label={ label ?? 'Open link' }
-        icon={ <IconSvg name="open-link" boxSize={ 5 }/> }
-        w="20px"
-        h="20px"
-        color={ iconColor }
-        variant="simple"
-        display="inline-block"
-        flexShrink={ 0 }
-        as="a"
-        href={ href }
-        target="_blank"
+        color="link.secondary"
+        _hover={{ color: 'link.primary.hover' }}
         className={ className }
         borderRadius={ 0 }
-      />
+      >
+        <Link href={ href } target="_blank">
+          <IconSvg name="open-link" boxSize={ 5 }/>
+        </Link>
+      </IconButton>
     </Tooltip>
   );
 };

ui/shared/radioButtonGroup/RadioButtonGroup.tsx

-import { chakra, ButtonGroup, Button, Flex, useRadio, useRadioGroup } from '@chakra-ui/react';
+import { chakra, Flex, useRadioGroup } from '@chakra-ui/react';
 import type { ChakraProps, UseRadioProps } from '@chakra-ui/react';
 import React from 'react';
 
-import Skeleton from 'ui/shared/chakra/Skeleton';
+import { Button, ButtonGroup } from 'toolkit/chakra/button';
+import { Skeleton } from 'toolkit/chakra/skeleton';
 import type { IconName } from 'ui/shared/IconSvg';
 import IconSvg from 'ui/shared/IconSvg';
 
+// TODO @tom2drum remove this component
 type RadioItemProps = {
   title: string;
   icon?: IconName;
@@ -20,10 +22,10 @@ type RadioItemProps = {
 type RadioButtonProps = UseRadioProps & RadioItemProps;
 
 const RadioButton = (props: RadioButtonProps) => {
-  const { getInputProps, getRadioProps } = useRadio(props);
+  // const { getInputProps, getRadioProps } = useRadio(props);
 
-  const input = getInputProps();
-  const checkbox = getRadioProps();
+  // const input = getInputProps();
+  // const checkbox = getRadioProps();
 
   if (props.onlyIcon) {
     return (
@@ -33,9 +35,9 @@ const RadioButton = (props: RadioButtonProps) => {
         variant="radio_group"
         selected={ props.isChecked }
       >
-        <input { ...input }/>
+        { /* <input { ...input }/> */ }
         <Flex
-          { ...checkbox }
+          // { ...checkbox }
         >
           <IconSvg name={ props.icon } boxSize={ 5 }/>
         </Flex>
@@ -50,10 +52,10 @@ const RadioButton = (props: RadioButtonProps) => {
       variant="radio_group"
       selected={ props.isChecked }
     >
-      <input { ...input }/>
+      { /* <input { ...input }/> */ }
       <Flex
         alignItems="center"
-        { ...checkbox }
+        // { ...checkbox }
       >
         { props.title }
         { props.contentAfter }
@@ -63,7 +65,7 @@ const RadioButton = (props: RadioButtonProps) => {
 };
 
 type RadioButtonGroupProps<T extends string> = {
-  onChange: (value: T) => void;
+  onChange: ({ value }: { value: T }) => void;
   name: string;
   defaultValue: string;
   options: Array<{ value: T } & RadioItemProps>;
@@ -73,14 +75,14 @@ type RadioButtonGroupProps<T extends string> = {
 };
 
 const RadioButtonGroup = <T extends string>({ onChange, name, defaultValue, options, autoWidth = false, className, isLoading }: RadioButtonGroupProps<T>) => {
-  const { getRootProps, getRadioProps } = useRadioGroup({ name, defaultValue, onChange });
+  const { getRootProps } = useRadioGroup({ name, defaultValue, onValueChange: onChange });
 
-  const group = getRootProps();
+  const root = getRootProps();
 
   return (
-    <Skeleton isLoaded={ !isLoading }>
+    <Skeleton loading={ isLoading }>
       <ButtonGroup
-        { ...group }
+        { ...root }
         className={ className }
         isAttached
         size="sm"
@@ -88,8 +90,8 @@ const RadioButtonGroup = <T extends string>({ onChange, name, defaultValue, opti
         gridTemplateColumns={ `repeat(${ options.length }, ${ autoWidth ? 'auto' : '1fr' })` }
       >
         { options.map((option) => {
-          const props = getRadioProps({ value: option.value });
-          return <RadioButton { ...props } key={ option.value } { ...option }/>;
+          // const props = getRadioProps({ value: option.value });
+          return <RadioButton key={ option.value } { ...option }/>;
         }) }
       </ButtonGroup>
     </Skeleton>

ui/showcases/Button.tsx

 import React from 'react';
 
-import { Button } from 'toolkit/chakra/button';
+import { Button, ButtonGroupRadio } from 'toolkit/chakra/button';
 import { Checkbox } from 'toolkit/chakra/checkbox';
 import { IconButton } from 'toolkit/chakra/icon-button';
 import { Link } from 'toolkit/chakra/link';
@@ -216,7 +216,24 @@ const ButtonShowcase = () => {
             </Link>
           </Sample>
         </SamplesStack>
+
+        <SectionSubHeader>Button Group Radio</SectionSubHeader>
+        <SamplesStack>
+          <Sample>
+            <ButtonGroupRadio>
+              <Button value="option-1">Option 1</Button>
+              <Button value="option-2">Option 2</Button>
+              <Button value="option-3">Option 3</Button>
+            </ButtonGroupRadio>
+            <ButtonGroupRadio loading>
+              <Button value="option-1">Option 1</Button>
+              <Button value="option-2">Option 2</Button>
+              <Button value="option-3">Option 3</Button>
+            </ButtonGroupRadio>
+          </Sample>
+        </SamplesStack>
       </Section>
+
     </Container>
   );
 };

ui/showcases/Input.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { Field } from 'toolkit/chakra/field';
 import { Input } from 'toolkit/chakra/input';
 import { InputGroup } from 'toolkit/chakra/input-group';
+import FilterInput from 'ui/shared/filters/FilterInput';
 import IconSvg from 'ui/shared/IconSvg';
 
 import { Section, Container, SectionHeader, SamplesStack, Sample, SectionSubHeader } from './parts';
@@ -119,12 +120,23 @@ const InputShowcase = () => {
             </Field>
           </Sample>
           <Sample label="with start element">
-            <InputGroup startElement={ <IconSvg name="search" boxSize={ 5 }/> }>
-              <Input placeholder="Search"/>
+            <InputGroup startElement={ <IconSvg name="collection" boxSize={ 5 }/> }>
+              <Input placeholder="Type in something"/>
             </InputGroup>
           </Sample>
         </SamplesStack>
       </Section>
+
+      <Section>
+        <SectionHeader>Examples</SectionHeader>
+        <SectionSubHeader>Filter input</SectionSubHeader>
+        <SamplesStack>
+          <Sample>
+            <FilterInput placeholder="Search by method name"/>
+            <FilterInput placeholder="Search by method name" loading/>
+          </Sample>
+        </SamplesStack>
+      </Section>
     </Container>
   );
 };