lux/explore
2
0
Fork 0
mirror of https://github.com/luxfi/explore.git synced 2026-09-24 00:28:18 +00:00
Code Issues Packages Projects Releases Wiki Activity

contract ABI filters

Browse Source
This commit is contained in:
tom
2025-02-14 12:44:00 +01:00
parent 2df3a861a2
commit b0fd5f2e5c
25 changed files with 874 additions and 733 deletions
Download Patch File Download Diff File Expand all files Collapse all files
eslint.config.mjs
+1 -1
View File
@@ -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
+2 -1
View File
@@ -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
+62 -1
View File
@@ -1,12 +1,15 @@
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
+1 -1
View File
@@ -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
+9
View File
@@ -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
+30
View File
@@ -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
+1 -3
View File
@@ -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
+1 -1
View File
@@ -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
+26 -17
View File
@@ -1,13 +1,13 @@
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
+6 -4
View File
@@ -1,10 +1,12 @@
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
+7 -9
View File
@@ -1,20 +1,18 @@
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">
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>
<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>
);
};
ui/address/contract/methods/ContractMethodsCustom.tsx
+9 -7
View File
@@ -1,4 +1,4 @@
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
+14 -10
View File
@@ -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
+2 -2
View File
@@ -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
+2 -2
View File
@@ -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
+15 -15
View File
@@ -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
+12 -14
View File
@@ -1,7 +1,4 @@
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 -7
View File
@@ -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
+21 -24
View File
@@ -1,26 +1,26 @@
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
+1
View File
@@ -50,6 +50,7 @@ const FormFieldText = <
<Textarea
{ ...field }
autoComplete="off"
flexGrow={ 1 }
{ ...inputProps as TextareaProps }
onBlur={ handleBlur }
/>
ui/shared/links/LinkNewTab.tsx
+14 -14
View File
@@ -1,6 +1,10 @@
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
+18 -16
View File
@@ -1,11 +1,13 @@
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
+18 -1
View File
@@ -1,6 +1,6 @@
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
+14 -2
View File
@@ -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>
);
};
yarn.lock
+581 -581
View File
File diff suppressed because it is too large Load Diff