Skip to content

F
frontend
Commit a6df70d4 authored by tom's avatar tom
Browse files
Options

amends

parent fb77fae0
Show whitespace changes
Inline Side-by-side
Showing with 85 additions and 278 deletions
toolkit/chakra/native-select.tsx deleted 100644 → 0
View file @ fb77fae0
'use client';
import { NativeSelect as Select } from '@chakra-ui/react';
import * as React from 'react';
interface NativeSelectRootProps extends Select.RootProps {
icon?: React.ReactNode;
}
export const NativeSelectRoot = React.forwardRef<
HTMLDivElement,
NativeSelectRootProps
>(function NativeSelect(props, ref) {
const { icon, children, ...rest } = props;
return (
<Select.Root ref={ ref } { ...rest }>
{ children }
<Select.Indicator>{ icon }</Select.Indicator>
</Select.Root>
);
});
interface NativeSelectItem {
value: string;
label: string;
disabled?: boolean;
}
interface NativeSelectField extends Select.FieldProps {
items?: Array<string | NativeSelectItem>;
}
export const NativeSelectField = React.forwardRef<
HTMLSelectElement,
NativeSelectField
>(function NativeSelectField(props, ref) {
const { items: itemsProp, children, ...rest } = props;
const items = React.useMemo(
() =>
itemsProp?.map((item) =>
typeof item === 'string' ? { label: item, value: item } : item,
),
[ itemsProp ],
);
return (
<Select.Field ref={ ref } { ...rest }>
{ children }
{ items?.map((item) => (
<option key={ item.value } value={ item.value } disabled={ item.disabled }>
{ item.label }
</option>
)) }
</Select.Field>
);
});
toolkit/chakra/select.tsx
View file @ a6df70d4
......@@ -140,7 +140,7 @@ export const SelectValueText = React.forwardRef<
const icon = (() => {
if (item.icon) {
return typeof item.icon === 'string' ? <IconSvg name={ item.icon } boxSize={ 5 } flexShrink={ 0 } mr={ 1 }/> : item.icon;
return typeof item.icon === 'string' ? <IconSvg name={ item.icon } boxSize={ 5 } flexShrink={ 0 }/> : item.icon;
}
return null;
......@@ -159,7 +159,7 @@ export const SelectValueText = React.forwardRef<
return (
<>
{ label }
<Flex display="inline-flex" alignItems="center" flexWrap="nowrap">
<Flex display="inline-flex" alignItems="center" flexWrap="nowrap" gap={ 1 }>
{ icon }
<span style={{
WebkitLineClamp: 1,
......
toolkit/theme/foundations/semanticTokens.ts
View file @ a6df70d4
......@@ -435,10 +435,8 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
error: { value: '{colors.red.500}' },
},
icon: {
// TODO @tom2drum revise this colors
backTo: { value: '{colors.gray.400}' },
externalLink: { value: { _light: '{colors.gray.400}', _dark: '{colors.gray.500}' } },
content: { value: { _light: '{colors.gray.500}', _dark: '{colors.gray.300}' } },
info: { value: { _light: '{colors.gray.400}', _dark: '{colors.gray.500}' } },
},
address: {
......
toolkit/theme/recipes/index.ts
View file @ a6df70d4
......@@ -12,7 +12,6 @@ import { recipe as input } from './input.recipe';
import { recipe as link } from './link.recipe';
import { recipe as list } from './list.recipe';
import { recipe as menu } from './menu.recipe';
import { recipe as nativeSelect } from './native-select.recipe';
import { recipe as pinInput } from './pin-input.recipe';
import { recipe as popover } from './popover.recipe';
import { recipe as progressCircle } from './progress-circle.recipe';
......@@ -53,7 +52,6 @@ export const slotRecipes = {
field,
list,
menu,
nativeSelect,
pinInput,
popover,
progressCircle,
......
toolkit/theme/recipes/native-select.recipe.ts deleted 100644 → 0
View file @ fb77fae0
import { defineSlotRecipe } from '@chakra-ui/react';
import { recipe as selectSlotRecipe } from './select.recipe';
// TODO @tom2drum check sizes for native select
export const recipe = defineSlotRecipe({
slots: [ 'root', 'field', 'indicator' ],
base: {
root: {
height: 'fit-content',
display: 'flex',
width: '100%',
position: 'relative',
},
field: {
width: '100%',
minWidth: '0',
outline: '0',
appearance: 'none',
borderRadius: 'base',
_disabled: {
layerStyle: 'disabled',
},
_invalid: {
borderColor: 'border.error',
},
focusVisibleRing: 'none',
lineHeight: 'normal',
'& > option, & > optgroup': {
bg: 'inherit',
},
fontWeight: '500',
},
indicator: {
position: 'absolute',
display: 'inline-flex',
alignItems: 'center',
justifyContent: 'center',
pointerEvents: 'none',
top: '50%',
transform: 'translateY(-50%)',
height: '100%',
color: 'inherit',
_disabled: {
opacity: '0.5',
},
_invalid: {
color: 'select.fg.error',
},
_icon: {
width: '1em',
height: '1em',
},
},
},
variants: {
variant: {
outline: {
field: selectSlotRecipe.variants?.variant.outline.trigger,
},
},
size: {
xs: {
field: {
textStyle: 'xs',
ps: '2',
pe: '6',
height: '6',
},
indicator: {
textStyle: 'sm',
insetEnd: '1.5',
},
},
sm: {
field: {
textStyle: 'sm',
ps: '2.5',
pe: '8',
height: '8',
},
indicator: {
textStyle: 'md',
insetEnd: '2',
},
},
md: {
field: {
textStyle: 'sm',
ps: '3',
pe: '8',
height: '10',
},
indicator: {
textStyle: 'lg',
insetEnd: '2',
},
},
lg: {
field: {
textStyle: 'md',
ps: '4',
pe: '8',
height: '11',
},
indicator: {
textStyle: 'xl',
insetEnd: '3',
},
},
xl: {
field: {
textStyle: 'md',
ps: '4.5',
pe: '10',
height: '12',
},
indicator: {
textStyle: 'xl',
insetEnd: '3',
},
},
},
},
defaultVariants: selectSlotRecipe.defaultVariants,
});
toolkit/theme/recipes/select.recipe.ts
View file @ a6df70d4
......@@ -130,8 +130,8 @@ export const recipe = defineSlotRecipe({
outline: {
trigger: {
borderWidth: '2px',
bg: 'input.bg',
color: 'select.trigger.outline.fg',
bgColor: 'transparent',
borderColor: 'input.border.filled',
_expanded: {
color: 'link.primary.hover',
......
ui/contractVerification/fields/ContractVerificationFieldCompiler.tsx
View file @ a6df70d4
......@@ -87,7 +87,7 @@ const ContractVerificationFieldCompiler = ({ isVyper, isStylus }: Props) => {
required
/>
{ isVyper || isStylus ? null : (
<chakra.div mt={{ base: 0, lg: 8 }}>
<chakra.div>
<span >The compiler version is specified in </span>
<Code color="text.secondary">pragma solidity X.X.X</Code>
<span>. Use the compiler version rather than the nightly build. If using the Solidity compiler, run </span>
......
ui/contractVerification/fields/ContractVerificationFieldMethod.tsx
View file @ a6df70d4
......@@ -9,10 +9,10 @@ import React from 'react';
import type { FormFields } from '../types';
import type { SmartContractVerificationMethod, SmartContractVerificationConfig } from 'types/client/contract';
import { nbsp } from 'lib/html-entities';
import { Link } from 'toolkit/chakra/link';
import { Tooltip } from 'toolkit/chakra/tooltip';
import FormFieldSelect from 'ui/shared/forms/fields/FormFieldSelect';
import IconSvg from 'ui/shared/IconSvg';
import Hint from 'ui/shared/Hint';
import { METHOD_LABELS } from '../utils';
......@@ -89,12 +89,14 @@ const ContractVerificationFieldMethod = ({ methods }: Props) => {
return (
<>
<Box mt={{ base: 10, lg: 6 }} gridColumn={{ lg: '1 / 3' }}>
<chakra.span fontWeight={ 500 } fontSize="lg" fontFamily="heading">
Currently, Blockscout supports { methods.length } contract verification methods
<chakra.span fontWeight={ 500 } fontSize="lg" fontFamily="heading" mr={ 1 }>
Currently, Blockscout supports { methods.length }{ nbsp }contract verification methods
</chakra.span>
<Tooltip content={ tooltipContent } interactive contentProps={{ textAlign: 'left', className: 'light' }}>
<IconSvg name="info" boxSize={ 5 } ml={ 1 } cursor="pointer" color="icon.info" _hover={{ color: 'link.primary.hover' }}/>
</Tooltip>
<Hint
label={ tooltipContent }
verticalAlign="text-bottom"
tooltipProps={{ interactive: true, contentProps: { textAlign: 'left', className: 'light' } }}
/>
</Box>
<FormFieldSelect<FormFields, 'method'>
name="method"
......
ui/nameDomain/details/NameDomainDetailsAlert.tsx
View file @ a6df70d4
......@@ -16,7 +16,7 @@ const NameDomainDetailsAlert = ({ data }: Props) => {
}
return (
<Alert status="info" colorScheme="gray" display="inline-block" whiteSpace="pre-wrap" mb={ 6 }>
<Alert status="info" display="inline-block" whiteSpace="pre-wrap" mb={ 6 }>
<span>The domain name is resolved offchain using </span>
{ data.stored_offchain && <Link external href="https://eips.ethereum.org/EIPS/eip-3668">EIP-3668: CCIP Read</Link> }
{ data.stored_offchain && data.resolved_with_wildcard && <span> & </span> }
......
ui/pages/Chakra.tsx
View file @ a6df70d4
......@@ -29,6 +29,7 @@ import RatingShowcase from 'ui/showcases/Rating';
import SelectShowcase from 'ui/showcases/Select';
import SkeletonShowcase from 'ui/showcases/Skeleton';
import SpinnerShowcase from 'ui/showcases/Spinner';
import SwitchShowcase from 'ui/showcases/Switch';
import TableShowcase from 'ui/showcases/Table';
import TabsShowcase from 'ui/showcases/Tabs';
import TagShowcase from 'ui/showcases/Tag';
......@@ -37,13 +38,9 @@ import ToastShowcase from 'ui/showcases/Toast';
import TooltipShowcase from 'ui/showcases/Tooltip';
// Drawer
// CloseButton
// IconButton
// EmptyState ?
// Rating
// Switch
// ToggleTip
// Popover
const tabs = [
{ label: 'Accordion', value: 'accordion', component: <AccordionsShowcase/> },
......@@ -70,6 +67,7 @@ const tabs = [
{ label: 'Select', value: 'select', component: <SelectShowcase/> },
{ label: 'Skeleton', value: 'skeleton', component: <SkeletonShowcase/> },
{ label: 'Spinner', value: 'spinner', component: <SpinnerShowcase/> },
{ label: 'Switch', value: 'switch', component: <SwitchShowcase/> },
{ label: 'Table', value: 'table', component: <TableShowcase/> },
{ label: 'Tabs', value: 'tabs', component: <TabsShowcase/> },
{ label: 'Tag', value: 'tag', component: <TagShowcase/> },
......
ui/publicTags/submit/fields/PublicTagsSubmitFieldTag.tsx
View file @ a6df70d4
......@@ -95,7 +95,7 @@ const PublicTagsSubmitFieldTag = ({ index, isDisabled, errors, onAddClick, onRem
alignItems="center"
columnGap={ 5 }
justifyContent={{ base: 'flex-end', lg: 'flex-start' }}
h={{ base: 'auto', lg: '80px' }}
h={{ base: 'auto', lg: '60px' }}
>
{ onAddClick && (
<IconButton
......@@ -123,7 +123,7 @@ const PublicTagsSubmitFieldTag = ({ index, isDisabled, errors, onAddClick, onRem
) }
</Flex>
{ !isMobile && (
<Flex flexDir="column" alignItems="flex-start" mt={ 10 } rowGap={ 2 }>
<Flex flexDir="column" alignItems="flex-start" mt={ 4 } rowGap={ 2 }>
<EntityTag data={{
name: field.name || 'Tag name',
tagType: field.type[0],
......
ui/publicTags/submit/fields/PublicTagsSubmitFieldTagType.tsx
View file @ a6df70d4
import { createListCollection } from '@chakra-ui/react';
import { capitalize } from 'es-toolkit';
import React from 'react';
// import { useFormContext } from 'react-hook-form';
import type { FormFields } from '../types';
import type { PublicTagType } from 'types/api/addressMetadata';
import FormFieldSelect from 'ui/shared/forms/fields/FormFieldSelect';
// import IconSvg from 'ui/shared/IconSvg';
interface Props {
index: number;
......@@ -15,51 +13,28 @@ interface Props {
}
const PublicTagsSubmitFieldTagType = ({ index, tagTypes }: Props) => {
// const { watch } = useFormContext<FormFields>();
const getItemIcon = React.useCallback((type: PublicTagType) => {
switch (type.type) {
case 'name':
return 'publictags_slim';
case 'protocol':
case 'generic':
return <span>#</span>;
default:
return null;
}
}, []);
const collection = React.useMemo(() => {
const items = tagTypes?.map((type) => ({
value: type.type,
label: capitalize(type.type),
icon: getItemIcon(type),
})) ?? [];
return createListCollection({ items });
}, [ tagTypes ]);
// const fieldValue = watch(`tags.${ index }.type`).value;
// TODO @tom2drum: add icon for selected value
// const selectComponents: SelectComponentsConfig<Option, boolean, GroupBase<Option>> = React.useMemo(() => {
// type SingleValueComponentProps = SingleValueProps<Option, boolean, GroupBase<Option>> & { children: React.ReactNode };
// const SingleValue = ({ children, ...props }: SingleValueComponentProps) => {
// switch (fieldValue) {
// case 'name': {
// return (
// <chakraComponents.SingleValue { ...props }>
// <Flex alignItems="center" columnGap={ 1 }>
// <IconSvg name="publictags_slim" boxSize={ 4 } flexShrink={ 0 } color="gray.400"/>
// { children }
// </Flex>
// </chakraComponents.SingleValue>
// );
// }
// case 'protocol':
// case 'generic': {
// return (
// <chakraComponents.SingleValue { ...props }>
// <chakra.span color="gray.400">#</chakra.span> { children }
// </chakraComponents.SingleValue>
// );
// }
// default: {
// return (<chakraComponents.SingleValue { ...props }>{ children }</chakraComponents.SingleValue>);
// }
// }
// };
// return { SingleValue };
// }, [ fieldValue ]);
}, [ tagTypes, getItemIcon ]);
return (
<FormFieldSelect<FormFields, `tags.${ number }.type`>
......
ui/rewards/login/steps/LoginStepContent.tsx
View file @ a6df70d4
......@@ -135,7 +135,6 @@ const LoginStepContent = ({ goNext, closeModal, openAuthModal }: Props) => {
<Flex w="full" alignItems="center" justifyContent="space-between">
I have a referral code
<Switch
colorScheme="blue"
size="md"
checked={ isRefCodeUsed }
onCheckedChange={ handleToggleChange }
......
ui/showcases/Select.tsx
View file @ a6df70d4
......@@ -3,7 +3,6 @@ import { noop } from 'es-toolkit';
import React from 'react';
import { Checkbox } from 'toolkit/chakra/checkbox';
import { NativeSelectField, NativeSelectRoot } from 'toolkit/chakra/native-select';
import { Select, SelectAsync } from 'toolkit/chakra/select';
import PopoverFilterRadio from 'ui/shared/filters/PopoverFilterRadio';
import Sort from 'ui/shared/sort/Sort';
......@@ -128,17 +127,6 @@ const SelectShowcase = () => {
<Section>
<SectionHeader>Examples</SectionHeader>
<SectionSubHeader>Native select</SectionSubHeader>
<SamplesStack>
<Sample>
<NativeSelectRoot>
<NativeSelectField>
<option value="1">Option 1</option>
<option value="2">Option 2</option>
</NativeSelectField>
</NativeSelectRoot>
</Sample>
</SamplesStack>
<SectionSubHeader>Sort</SectionSubHeader>
<SamplesStack>
......
ui/showcases/Switch.tsx 0 → 100644
View file @ a6df70d4
import React from 'react';
import { Switch } from 'toolkit/chakra/switch';
import { Section, Container, SectionHeader, SamplesStack, Sample } from './parts';
const SwitchShowcase = () => {
return (
<Container value="switch">
<Section>
<SectionHeader>Size</SectionHeader>
<SamplesStack>
<Sample label="size: sm">
<Switch size="sm">
Show duck
</Switch>
</Sample>
<Sample label="size: md">
<Switch size="md">
Show duck
</Switch>
</Sample>
</SamplesStack>
</Section>
</Container>
);
};
export default React.memo(SwitchShowcase);
ui/snippets/header/alerts/IndexingBlocksAlert.tsx
View file @ a6df70d4
......@@ -72,7 +72,7 @@ const IndexingBlocksAlert = () => {
}
return (
<Alert status="info" colorScheme="gray" py={ 3 } borderRadius="md">
<Alert status="info" py={ 3 } borderRadius="md">
{ `${ data.indexed_blocks_ratio && `${ Math.floor(Number(data.indexed_blocks_ratio) * 100) }% Blocks Indexed${ nbsp }${ ndash } ` }
We're indexing this chain right now. Some of the counts may be inaccurate.` }
</Alert>
......
ui/snippets/navigation/mobile/NavLinkGroup.tsx
View file @ a6df70d4
......@@ -33,7 +33,8 @@ const NavLinkGroup = ({ item, onClick, isExpanded }: Props) => {
w="100%"
px={ 2 }
aria-label={ `${ item.text } link group` }
bgColor={ item.isActive ? 'link.navigation.bg.selected' : 'link.navigation.bg' }
color={ item.isActive ? 'link.navigation.fg.selected' : 'link.navigation.fg' }
bgColor={ item.isActive ? 'link.navigation.bg.selected' : 'transparent' }
>
<Flex justifyContent="space-between" width="100%" alignItems="center" pr={ 1 }>
<HStack gap={ 0 } overflow="hidden">
......
ui/snippets/networkMenu/NetworkMenuContentMobile.tsx
View file @ a6df70d4
import { Box, VStack, Flex } from '@chakra-ui/react';
import { Box, VStack, Flex, createListCollection } from '@chakra-ui/react';
import { capitalize } from 'es-toolkit';
import React from 'react';
import type { NetworkGroup, FeaturedNetwork } from 'types/networks';
import { NativeSelectField, NativeSelectRoot } from 'toolkit/chakra/native-select';
import { Select } from 'toolkit/chakra/select';
import { Skeleton } from 'toolkit/chakra/skeleton';
import NetworkMenuLink from './NetworkMenuLink';
......@@ -24,10 +24,16 @@ const NetworkMenuContentMobile = ({ items, tabs }: Props) => {
}
}, [ items, selectedNetwork?.group, tabs ]);
const handleSelectChange = React.useCallback((event: React.ChangeEvent<HTMLSelectElement>) => {
setSelectedTab(event.currentTarget.value as NetworkGroup);
const handleSelectChange = React.useCallback(({ value }: { value: Array<string> }) => {
setSelectedTab(value[0] as NetworkGroup);
}, []);
const selectCollection = React.useMemo(() => {
return createListCollection({
items: tabs.map((tab) => ({ label: capitalize(tab), value: tab })),
});
}, [ tabs ]);
const content = !items || items.length === 0 ? (
<Flex mt={ 6 } flexDir="column" rowGap={ 2 }>
<Flex mx={ 3 } my={ 2 } alignItems="center">
......@@ -46,11 +52,13 @@ const NetworkMenuContentMobile = ({ items, tabs }: Props) => {
) : (
<>
{ tabs.length > 1 && (
<NativeSelectRoot size="sm" borderRadius="base" mb={ 3 }>
<NativeSelectField value={ selectedTab } onChange={ handleSelectChange }>
{ tabs.map((tab) => <option key={ tab } value={ tab }>{ capitalize(tab) }</option>) }
</NativeSelectField>
</NativeSelectRoot>
<Select
value={ [ selectedTab ] }
onValueChange={ handleSelectChange }
collection={ selectCollection }
placeholder="Select network type"
mb={ 3 }
/>
) }
<VStack as="ul" gap={ 2 } alignItems="stretch">
{ items
......
ui/snippets/searchBar/SearchBarInput.tsx
View file @ a6df70d4
......@@ -105,8 +105,7 @@ const SearchBarInput = (
<IconSvg
name="search"
boxSize={ 5 }
ml={{ base: 2, lg: isHomepage ? 4 : 2 }}
mr={ 2 }
mx={ 2 }
/>
);
......@@ -116,7 +115,7 @@ const SearchBarInput = (
{ !isMobile && (
<Center
boxSize="20px"
mr={{ base: 2, lg: isHomepage ? 4 : 2 }}
mr={ 2 }
borderRadius="sm"
borderWidth="1px"
borderColor="gray.500"
......@@ -156,7 +155,7 @@ const SearchBarInput = (
endElement={ endElement }
>
<Input
size={{ base: 'md', lg: isHomepage ? 'lg' : 'md' }}
size="md"
placeholder={ isMobile ? 'Search by address / ... ' : 'Search by address / txn hash / block / token... ' }
value={ value }
onChange={ handleChange }
......
ui/watchlist/WatchlistTable/WatchListItem.tsx
View file @ a6df70d4
......@@ -88,7 +88,6 @@ const WatchListItem = ({ item, isLoading, onEditClick, onDeleteClick, hasEmail }
<Text textStyle="sm" fontWeight={ 500 }>Email notification</Text>
<Skeleton loading={ isLoading } display="inline-block">
<Switch
colorScheme="blue"
size="md"
checked={ notificationEnabled }
onCheckedChange={ onSwitch }
......
ui/watchlist/WatchlistTable/WatchListTableItem.tsx
View file @ a6df70d4
......@@ -82,7 +82,6 @@ const WatchlistTableItem = ({ item, isLoading, onEditClick, onDeleteClick, hasEm
<TableCell>
<Skeleton loading={ isLoading } display="inline-block">
<Switch
colorScheme="blue"
size="md"
checked={ notificationEnabled }
onCheckedChange={ onSwitch }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment