Skip to content

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

showcase fixes

parent adb1a307
Show whitespace changes
Inline Side-by-side
Showing with 348 additions and 165 deletions
toolkit/components/CutLink/CutLinkDetails.tsx → toolkit/chakra/collapsible.tsx
View file @ 62d5b8e4
import { Flex, type FlexProps } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import { scroller, Element } from 'react-scroll'; import { scroller, Element } from 'react-scroll';
import useUpdateEffect from 'lib/hooks/useUpdateEffect'; import useUpdateEffect from 'lib/hooks/useUpdateEffect';
import type { LinkProps } from 'toolkit/chakra/link';
import { Link } from 'toolkit/chakra/link';
interface Props extends LinkProps { import type { ButtonProps } from './button';
import { Button } from './button';
interface CollapsibleDetailsProps extends ButtonProps {
children: React.ReactNode; children: React.ReactNode;
id?: string; id?: string;
onClick?: () => void;
isExpanded?: boolean; isExpanded?: boolean;
text?: [string, string]; text?: [string, string];
} }
const ID = 'CutLink'; export const CollapsibleDetails = (props: CollapsibleDetailsProps) => {
const CUT_ID = 'CollapsibleDetails';
const CutLink = (props: Props) => { const { children, id = CUT_ID, onClick, isExpanded: isExpandedProp = false, text: textProp, loading, ...rest } = props;
const { children, id = ID, onClick, isExpanded: isExpandedProp = false, text: textProp, ...rest } = props;
const [ isExpanded, setIsExpanded ] = React.useState(isExpandedProp); const [ isExpanded, setIsExpanded ] = React.useState(isExpandedProp);
const handleClick = React.useCallback(() => { const handleClick = React.useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
setIsExpanded((flag) => !flag); setIsExpanded((flag) => !flag);
scroller.scrollTo(id, { scroller.scrollTo(id, {
duration: 500, duration: 500,
smooth: true, smooth: true,
}); });
onClick?.(); onClick?.(event);
}, [ id, onClick ]); }, [ id, onClick ]);
useUpdateEffect(() => { useUpdateEffect(() => {
...@@ -41,20 +42,58 @@ const CutLink = (props: Props) => { ...@@ -41,20 +42,58 @@ const CutLink = (props: Props) => {
return ( return (
<> <>
<Link <Button
variant="link"
textStyle="sm" textStyle="sm"
textDecorationLine="underline" textDecorationLine="underline"
textDecorationStyle="dashed" textDecorationStyle="dashed"
w="fit-content" w="fit-content"
onClick={ handleClick } onClick={ handleClick }
asChild loadingSkeleton={ loading }
{ ...rest } { ...rest }
> >
<Element name={ id }>{ text }</Element> <Element name={ id }>{ text }</Element>
</Link> </Button>
{ isExpanded && children } { isExpanded && children }
</> </>
); );
}; };
export default React.memo(CutLink); interface CollapsibleListProps<T> extends FlexProps {
items: Array<T>;
renderItem: (item: T, index: number) => React.ReactNode;
triggerProps?: ButtonProps;
cutLength?: number;
}
export const CollapsibleList = <T,>(props: CollapsibleListProps<T>) => {
const CUT_LENGTH = 3;
const { items, renderItem, triggerProps, cutLength = CUT_LENGTH, ...rest } = props;
const [ isExpanded, setIsExpanded ] = React.useState(false);
const handleToggle = React.useCallback(() => {
setIsExpanded((flag) => !flag);
}, []);
return (
<Flex flexDir="column" w="100%" { ...rest }>
{ items.slice(0, isExpanded ? undefined : cutLength).map(renderItem) }
{ items.length > cutLength && (
<Button
variant="link"
textStyle="sm"
textDecorationLine="underline"
textDecorationStyle="dashed"
w="fit-content"
minW="auto"
onClick={ handleToggle }
{ ...triggerProps }
>
{ isExpanded ? 'Hide' : 'Show all' }
</Button>
) }
</Flex>
);
};
toolkit/components/CutLink/CutLinkList.tsx deleted 100644 → 0
View file @ adb1a307
import { Flex, type FlexProps } from '@chakra-ui/react';
import React from 'react';
import type { LinkProps } from 'toolkit/chakra/link';
import { Link } from 'toolkit/chakra/link';
interface Props<T> extends FlexProps {
items: Array<T>;
renderItem: (item: T, index: number) => React.ReactNode;
linkProps?: LinkProps;
cutLength?: number;
}
const CUT_LENGTH = 3;
const CutLinkList = <T,>(props: Props<T>) => {
const { items, renderItem, linkProps, cutLength = CUT_LENGTH, ...rest } = props;
const [ isExpanded, setIsExpanded ] = React.useState(false);
const handleToggle = React.useCallback(() => {
setIsExpanded((flag) => !flag);
}, []);
return (
<Flex flexDir="column" w="100%" { ...rest }>
{ items.slice(0, isExpanded ? undefined : cutLength).map(renderItem) }
{ items.length > cutLength && (
<Link
textStyle="sm"
textDecorationLine="underline"
textDecorationStyle="dashed"
w="fit-content"
onClick={ handleToggle }
{ ...linkProps }
>
{ isExpanded ? 'Hide' : 'Show all' }
</Link>
) }
</Flex>
);
};
export default React.memo(CutLinkList) as typeof CutLinkList;
ui/block/BlockDetails.tsx
View file @ 62d5b8e4
...@@ -17,10 +17,10 @@ import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle'; ...@@ -17,10 +17,10 @@ import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle';
import * as arbitrum from 'lib/rollups/arbitrum'; import * as arbitrum from 'lib/rollups/arbitrum';
import getQueryParamString from 'lib/router/getQueryParamString'; import getQueryParamString from 'lib/router/getQueryParamString';
import { currencyUnits } from 'lib/units'; import { currencyUnits } from 'lib/units';
import { CollapsibleDetails } from 'toolkit/chakra/collapsible';
import { Link } from 'toolkit/chakra/link'; import { Link } from 'toolkit/chakra/link';
import { Skeleton } from 'toolkit/chakra/skeleton'; import { Skeleton } from 'toolkit/chakra/skeleton';
import { Tooltip } from 'toolkit/chakra/tooltip'; import { Tooltip } from 'toolkit/chakra/tooltip';
import CutLinkDetails from 'toolkit/components/CutLink/CutLinkDetails';
import OptimisticL2TxnBatchDA from 'ui/shared/batch/OptimisticL2TxnBatchDA'; import OptimisticL2TxnBatchDA from 'ui/shared/batch/OptimisticL2TxnBatchDA';
import BlockGasUsed from 'ui/shared/block/BlockGasUsed'; import BlockGasUsed from 'ui/shared/block/BlockGasUsed';
import CopyToClipboard from 'ui/shared/CopyToClipboard'; import CopyToClipboard from 'ui/shared/CopyToClipboard';
...@@ -539,7 +539,7 @@ const BlockDetails = ({ query }: Props) => { ...@@ -539,7 +539,7 @@ const BlockDetails = ({ query }: Props) => {
) } ) }
{ /* ADDITIONAL INFO */ } { /* ADDITIONAL INFO */ }
<CutLinkDetails loading={ isPlaceholderData } mt={ 6 } gridColumn={{ base: undefined, lg: '1 / 3' }}> <CollapsibleDetails loading={ isPlaceholderData } mt={ 6 } gridColumn={{ base: undefined, lg: '1 / 3' }}>
<GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 1, lg: 4 }}/> <GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 1, lg: 4 }}/>
{ rollupFeature.isEnabled && rollupFeature.type === 'zkSync' && data.zksync && { rollupFeature.isEnabled && rollupFeature.type === 'zkSync' && data.zksync &&
...@@ -738,7 +738,7 @@ const BlockDetails = ({ query }: Props) => { ...@@ -738,7 +738,7 @@ const BlockDetails = ({ query }: Props) => {
) } ) }
</> </>
) } ) }
</CutLinkDetails> </CollapsibleDetails>
</DetailedInfo.Container> </DetailedInfo.Container>
); );
......
ui/pages/Chakra.tsx
View file @ 62d5b8e4
...@@ -11,10 +11,12 @@ import BadgeShowcase from 'ui/showcases/Badge'; ...@@ -11,10 +11,12 @@ import BadgeShowcase from 'ui/showcases/Badge';
import ButtonShowcase from 'ui/showcases/Button'; import ButtonShowcase from 'ui/showcases/Button';
import CheckboxShowcase from 'ui/showcases/Checkbox'; import CheckboxShowcase from 'ui/showcases/Checkbox';
import ClipboardShowcase from 'ui/showcases/Clipboard'; import ClipboardShowcase from 'ui/showcases/Clipboard';
import CollapsibleShowcase from 'ui/showcases/Collapsible';
import ContentLoaderShowcase from 'ui/showcases/ContentLoader';
import DialogShowcase from 'ui/showcases/Dialog'; import DialogShowcase from 'ui/showcases/Dialog';
import FieldShowcase from 'ui/showcases/Field';
import InputShowcase from 'ui/showcases/Input'; import InputShowcase from 'ui/showcases/Input';
import LinkShowcase from 'ui/showcases/Link'; import LinkShowcase from 'ui/showcases/Link';
import LoadersShowcase from 'ui/showcases/Loaders';
import MenuShowcase from 'ui/showcases/Menu'; import MenuShowcase from 'ui/showcases/Menu';
import PaginationShowcase from 'ui/showcases/Pagination'; import PaginationShowcase from 'ui/showcases/Pagination';
import PinInputShowcase from 'ui/showcases/PinInput'; import PinInputShowcase from 'ui/showcases/PinInput';
...@@ -22,6 +24,8 @@ import PopoverShowcase from 'ui/showcases/Popover'; ...@@ -22,6 +24,8 @@ import PopoverShowcase from 'ui/showcases/Popover';
import ProgressCircleShowcase from 'ui/showcases/ProgressCircle'; import ProgressCircleShowcase from 'ui/showcases/ProgressCircle';
import RadioShowcase from 'ui/showcases/Radio'; import RadioShowcase from 'ui/showcases/Radio';
import SelectShowcase from 'ui/showcases/Select'; import SelectShowcase from 'ui/showcases/Select';
import SkeletonShowcase from 'ui/showcases/Skeleton';
import SpinnerShowcase from 'ui/showcases/Spinner';
import TableShowcase from 'ui/showcases/Table'; import TableShowcase from 'ui/showcases/Table';
import TabsShowcase from 'ui/showcases/Tabs'; import TabsShowcase from 'ui/showcases/Tabs';
import TagShowcase from 'ui/showcases/Tag'; import TagShowcase from 'ui/showcases/Tag';
...@@ -45,10 +49,12 @@ const tabs = [ ...@@ -45,10 +49,12 @@ const tabs = [
{ label: 'Button', value: 'button', component: <ButtonShowcase/> }, { label: 'Button', value: 'button', component: <ButtonShowcase/> },
{ label: 'Checkbox', value: 'checkbox', component: <CheckboxShowcase/> }, { label: 'Checkbox', value: 'checkbox', component: <CheckboxShowcase/> },
{ label: 'Clipboard', value: 'clipboard', component: <ClipboardShowcase/> }, { label: 'Clipboard', value: 'clipboard', component: <ClipboardShowcase/> },
{ label: 'Collapsible', value: 'collapsible', component: <CollapsibleShowcase/> },
{ label: 'Content loader', value: 'content-loader', component: <ContentLoaderShowcase/> },
{ label: 'Dialog', value: 'dialog', component: <DialogShowcase/> }, { label: 'Dialog', value: 'dialog', component: <DialogShowcase/> },
{ label: 'Input', value: 'input', component: <InputShowcase/> }, { label: 'Input', value: 'input', component: <InputShowcase/> },
{ label: 'Field', value: 'field', component: <FieldShowcase/> },
{ label: 'Link', value: 'link', component: <LinkShowcase/> }, { label: 'Link', value: 'link', component: <LinkShowcase/> },
{ label: 'Loaders', value: 'loaders', component: <LoadersShowcase/> },
{ label: 'Menu', value: 'menu', component: <MenuShowcase/> }, { label: 'Menu', value: 'menu', component: <MenuShowcase/> },
{ label: 'Pagination', value: 'pagination', component: <PaginationShowcase/> }, { label: 'Pagination', value: 'pagination', component: <PaginationShowcase/> },
{ label: 'Progress Circle', value: 'progress-circle', component: <ProgressCircleShowcase/> }, { label: 'Progress Circle', value: 'progress-circle', component: <ProgressCircleShowcase/> },
...@@ -56,6 +62,8 @@ const tabs = [ ...@@ -56,6 +62,8 @@ const tabs = [
{ label: 'Pin input', value: 'pin-input', component: <PinInputShowcase/> }, { label: 'Pin input', value: 'pin-input', component: <PinInputShowcase/> },
{ label: 'Popover', value: 'popover', component: <PopoverShowcase/> }, { label: 'Popover', value: 'popover', component: <PopoverShowcase/> },
{ label: 'Select', value: 'select', component: <SelectShowcase/> }, { label: 'Select', value: 'select', component: <SelectShowcase/> },
{ label: 'Skeleton', value: 'skeleton', component: <SkeletonShowcase/> },
{ label: 'Spinner', value: 'spinner', component: <SpinnerShowcase/> },
{ label: 'Table', value: 'table', component: <TableShowcase/> }, { label: 'Table', value: 'table', component: <TableShowcase/> },
{ label: 'Tabs', value: 'tabs', component: <TabsShowcase/> }, { label: 'Tabs', value: 'tabs', component: <TabsShowcase/> },
{ label: 'Tag', value: 'tag', component: <TagShowcase/> }, { label: 'Tag', value: 'tag', component: <TagShowcase/> },
......
ui/showcases/Collapsible.tsx 0 → 100644
View file @ 62d5b8e4
/* eslint-disable react/jsx-no-bind */
/* eslint-disable max-len */
import { Box, Text } from '@chakra-ui/react';
import React from 'react';
import { CollapsibleDetails, CollapsibleList } from 'toolkit/chakra/collapsible';
import { Section, Container, SectionHeader, SamplesStack, Sample, SectionSubHeader } from './parts';
const TEXT = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
const CollapsibleShowcase = () => {
return (
<Container value="collapsible">
<Section>
<SectionHeader>Variant</SectionHeader>
<SamplesStack >
<Sample label="variant: default" flexDirection="column" alignItems="flex-start">
<CollapsibleDetails id="CutLink_1">
<Box maxW="500px">{ TEXT }</Box>
</CollapsibleDetails>
</Sample>
</SamplesStack>
</Section>
<Section>
<SectionHeader>Loading</SectionHeader>
<SamplesStack >
<Sample label="loading: true" flexDirection="column" alignItems="flex-start">
<CollapsibleDetails id="CutLink_2" loading>
<Box maxW="500px">{ TEXT }</Box>
</CollapsibleDetails>
</Sample>
</SamplesStack>
</Section>
<Section>
<SectionHeader>Examples</SectionHeader>
<SectionSubHeader>Cut link</SectionSubHeader>
<SamplesStack>
<Sample label="Show details" flexDirection="column" alignItems="flex-start">
<CollapsibleDetails id="CutLink_3">
<Box maxW="500px">{ TEXT }</Box>
</CollapsibleDetails>
</Sample>
<Sample label="Expand all list" flexDirection="row" alignItems="flex-start" flexWrap="nowrap">
<CollapsibleList
items={ [ 'foo', 'bar', 'baz', 'qux', 'quux', 'corge', 'grault', 'garply', 'waldo', 'fred', 'plugh', 'xyzzy', 'thud' ] }
renderItem={ (item) => <Text>{ item }</Text> }
/>
</Sample>
</SamplesStack>
</Section>
</Container>
);
};
export default React.memo(CollapsibleShowcase);
ui/showcases/ContentLoader.tsx 0 → 100644
View file @ 62d5b8e4
import React from 'react';
import ContentLoader from 'ui/shared/ContentLoader';
import { Section, Container, SectionHeader, SamplesStack, Sample } from './parts';
const ContentLoaderShowcase = () => {
return (
<Container value="content-loader">
<Section>
<SectionHeader>Variants</SectionHeader>
<SamplesStack >
<Sample label="default">
<ContentLoader/>
</Sample>
</SamplesStack>
</Section>
</Container>
);
};
export default React.memo(ContentLoaderShowcase);
ui/showcases/Field.tsx 0 → 100644
View file @ 62d5b8e4
import React from 'react';
import { Field } from 'toolkit/chakra/field';
import { Input } from 'toolkit/chakra/input';
import { Section, Container, SectionHeader, SamplesStack, Sample, SectionSubHeader } from './parts';
const FieldShowcase = () => {
return (
<Container value="field">
<Section>
<SectionHeader>Size</SectionHeader>
<SectionSubHeader>Default</SectionSubHeader>
<SamplesStack>
{ ([ 'sm', 'md', 'lg' ] as const).map((size) => (
<Sample label={ `size: ${ size }` } w="100%" key={ size } alignItems="flex-start">
<Field label="Email" required size={ size } helperText="Helper text" maxWidth="200px">
<Input size={ size }/>
</Field>
<Field label="Email (disabled)" required size={ size } maxWidth="200px">
<Input size={ size } disabled value="me@example.com"/>
</Field>
<Field label="Email (readOnly)" required size={ size } maxWidth="200px">
<Input size={ size } readOnly value="me@example.com"/>
</Field>
<Field label="Email (invalid)" required size={ size } errorText="Something went wrong" invalid maxWidth="200px">
<Input size={ size } value="duck"/>
</Field>
</Sample>
)) }
<Sample label="size: xl" w="100%" alignItems="flex-start">
<Field label="Email" required floating size="xl" helperText="Helper text" maxWidth="300px">
<Input size="xl"/>
</Field>
<Field label="Email (disabled)" required floating disabled size="xl" maxWidth="300px">
<Input size="xl" value="me@example.com"/>
</Field>
<Field label="Email (readOnly)" required floating readOnly size="xl" maxWidth="300px">
<Input size="xl" value="me@example.com"/>
</Field>
<Field label="Email (invalid)" required floating size="xl" errorText="Something went wrong" invalid maxWidth="300px">
<Input size="xl" value="duck"/>
</Field>
</Sample>
</SamplesStack>
<SectionSubHeader>On custom background</SectionSubHeader>
<SamplesStack>
<Sample label="no floating label" p={ 4 } bgColor={{ _light: 'blackAlpha.200', _dark: 'whiteAlpha.200' }} alignItems="flex-start">
<Field label="Email" required helperText="Helper text" maxWidth="200px">
<Input/>
</Field>
<Field label="Email (disabled)" required disabled maxWidth="200px">
<Input value="me@example.com"/>
</Field>
<Field label="Email (readOnly)" required readOnly maxWidth="200px">
<Input value="me@example.com"/>
</Field>
<Field label="Email (invalid)" required errorText="Something went wrong" invalid maxWidth="200px">
<Input value="duck"/>
</Field>
</Sample>
<Sample label="floating label" p={ 4 } bgColor={{ _light: 'blackAlpha.200', _dark: 'whiteAlpha.200' }} alignItems="flex-start">
<Field label="Email" required floating size="xl" helperText="Helper text" maxWidth="300px">
<Input size="xl"/>
</Field>
<Field label="Email (disabled)" required disabled floating size="xl" maxWidth="300px">
<Input size="xl" value="me@example.com"/>
</Field>
<Field label="Email (readOnly)" required readOnly floating size="xl" maxWidth="300px">
<Input size="xl" value="me@example.com"/>
</Field>
<Field label="Email (invalid)" required floating size="xl" errorText="Something went wrong" invalid maxWidth="300px">
<Input size="xl" value="duck"/>
</Field>
</Sample>
</SamplesStack>
</Section>
</Container>
);
};
export default React.memo(FieldShowcase);
ui/showcases/Input.tsx
View file @ 62d5b8e4
...@@ -36,81 +36,13 @@ const InputShowcase = () => { ...@@ -36,81 +36,13 @@ const InputShowcase = () => {
<Input type="text" placeholder="Name"/> <Input type="text" placeholder="Name"/>
<Input type="text" placeholder="Name (disabled)" disabled/> <Input type="text" placeholder="Name (disabled)" disabled/>
<Input type="text" placeholder="Name (readOnly)" readOnly/> <Input type="text" placeholder="Name (readOnly)" readOnly/>
<Input type="text" placeholder="Name (invalid)" data-invalid/> <Input type="text" placeholder="Name (invalid)" data-invalid value="duck"/>
</Sample> </Sample>
</SamplesStack> </SamplesStack>
</Section> </Section>
<Section> <Section>
<SectionHeader>Field</SectionHeader> <SectionHeader>Input group</SectionHeader>
<SectionSubHeader>Size</SectionSubHeader>
<SamplesStack>
{ ([ 'sm', 'md', 'lg' ] as const).map((size) => (
<Sample label={ `size: ${ size }` } w="100%" key={ size } alignItems="flex-start">
<Field label="Email" required size={ size } helperText="Helper text" maxWidth="200px">
<Input size={ size }/>
</Field>
<Field label="Email (disabled)" required size={ size } maxWidth="200px">
<Input size={ size } disabled value="me@example.com"/>
</Field>
<Field label="Email (readOnly)" required size={ size } maxWidth="200px">
<Input size={ size } readOnly value="me@example.com"/>
</Field>
<Field label="Email (invalid)" required size={ size } errorText="Something went wrong" invalid maxWidth="200px">
<Input size={ size } value="duck"/>
</Field>
</Sample>
)) }
<Sample label="size: xl" w="100%" alignItems="flex-start">
<Field label="Email" required floating size="xl" helperText="Helper text" maxWidth="300px">
<Input size="xl"/>
</Field>
<Field label="Email (disabled)" required floating disabled size="xl" maxWidth="300px">
<Input size="xl" value="me@example.com"/>
</Field>
<Field label="Email (readOnly)" required floating readOnly size="xl" maxWidth="300px">
<Input size="xl" value="me@example.com"/>
</Field>
<Field label="Email (invalid)" required floating size="xl" errorText="Something went wrong" invalid maxWidth="300px">
<Input size="xl" value="duck"/>
</Field>
</Sample>
</SamplesStack>
<SectionSubHeader>On custom background</SectionSubHeader>
<SamplesStack>
<Sample label="no floating label" p={ 4 } bgColor={{ _light: 'blackAlpha.200', _dark: 'whiteAlpha.200' }} alignItems="flex-start">
<Field label="Email" required helperText="Helper text" maxWidth="200px">
<Input/>
</Field>
<Field label="Email (disabled)" required disabled maxWidth="200px">
<Input value="me@example.com"/>
</Field>
<Field label="Email (readOnly)" required readOnly maxWidth="200px">
<Input value="me@example.com"/>
</Field>
<Field label="Email (invalid)" required errorText="Something went wrong" invalid maxWidth="200px">
<Input value="duck"/>
</Field>
</Sample>
<Sample label="floating label" p={ 4 } bgColor={{ _light: 'blackAlpha.200', _dark: 'whiteAlpha.200' }} alignItems="flex-start">
<Field label="Email" required floating size="xl" helperText="Helper text" maxWidth="300px">
<Input size="xl"/>
</Field>
<Field label="Email (disabled)" required disabled floating size="xl" maxWidth="300px">
<Input size="xl" value="me@example.com"/>
</Field>
<Field label="Email (readOnly)" required readOnly floating size="xl" maxWidth="300px">
<Input size="xl" value="me@example.com"/>
</Field>
<Field label="Email (invalid)" required floating size="xl" errorText="Something went wrong" invalid maxWidth="300px">
<Input size="xl" value="duck"/>
</Field>
</Sample>
</SamplesStack>
<SectionSubHeader>Input group</SectionSubHeader>
<SamplesStack> <SamplesStack>
<Sample label="with end element"> <Sample label="with end element">
<Field label="Referral code" required floating size="xl" w="300px" flexShrink={ 0 }> <Field label="Referral code" required floating size="xl" w="300px" flexShrink={ 0 }>
......
ui/showcases/Link.tsx
View file @ 62d5b8e4
/* eslint-disable react/jsx-no-bind */ import { Box } from '@chakra-ui/react';
/* eslint-disable max-len */
import { Box, Text } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import * as addressMock from 'mocks/address/address'; import * as addressMock from 'mocks/address/address';
...@@ -11,8 +9,6 @@ import * as ensMock from 'mocks/ens/domain'; ...@@ -11,8 +9,6 @@ import * as ensMock from 'mocks/ens/domain';
import * as poolMock from 'mocks/pools/pool'; import * as poolMock from 'mocks/pools/pool';
import * as txMock from 'mocks/txs/tx'; import * as txMock from 'mocks/txs/tx';
import { Link, LinkBox, LinkOverlay } from 'toolkit/chakra/link'; import { Link, LinkBox, LinkOverlay } from 'toolkit/chakra/link';
import CutLinkDetails from 'toolkit/components/CutLink/CutLinkDetails';
import CutLinkList from 'toolkit/components/CutLink/CutLinkList';
import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import BlobEntity from 'ui/shared/entities/blob/BlobEntity'; import BlobEntity from 'ui/shared/entities/blob/BlobEntity';
import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import BlockEntity from 'ui/shared/entities/block/BlockEntity';
...@@ -23,7 +19,6 @@ import TokenEntity from 'ui/shared/entities/token/TokenEntity'; ...@@ -23,7 +19,6 @@ import TokenEntity from 'ui/shared/entities/token/TokenEntity';
import TxEntity from 'ui/shared/entities/tx/TxEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity';
import { Section, Container, SectionHeader, SamplesStack, Sample, SectionSubHeader } from './parts'; import { Section, Container, SectionHeader, SamplesStack, Sample, SectionSubHeader } from './parts';
const TEXT = 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.';
const TOKEN = { const TOKEN = {
address: '0xdAC17F958D2ee523a2206206994597C13D831ec7', address: '0xdAC17F958D2ee523a2206206994597C13D831ec7',
...@@ -96,29 +91,6 @@ const LinkShowcase = () => { ...@@ -96,29 +91,6 @@ const LinkShowcase = () => {
<Section> <Section>
<SectionHeader>Examples</SectionHeader> <SectionHeader>Examples</SectionHeader>
<SectionSubHeader>Cut link</SectionSubHeader>
<SamplesStack>
<Sample label="Show details" flexDirection="column" alignItems="flex-start">
<CutLinkDetails id="CutLink_1">
<Box maxW="500px">{ TEXT }</Box>
</CutLinkDetails>
<CutLinkDetails id="CutLink_2" loading>
<Box maxW="500px">{ TEXT }</Box>
</CutLinkDetails>
</Sample>
<Sample label="Expand all list" flexDirection="row" alignItems="flex-start" flexWrap="nowrap">
<CutLinkList
items={ [ 'foo', 'bar', 'baz', 'qux', 'quux', 'corge', 'grault', 'garply', 'waldo', 'fred', 'plugh', 'xyzzy', 'thud' ] }
renderItem={ (item) => <Text>{ item }</Text> }
/>
<CutLinkList
items={ [ 'foo', 'bar', 'baz', 'qux', 'quux', 'corge', 'grault', 'garply', 'waldo', 'fred', 'plugh', 'xyzzy', 'thud' ] }
renderItem={ (item) => <Text>{ item }</Text> }
linkProps={{ loading: true }}
/>
</Sample>
</SamplesStack>
<SectionSubHeader>Address link</SectionSubHeader> <SectionSubHeader>Address link</SectionSubHeader>
<SamplesStack> <SamplesStack>
<Sample label="Without name" vertical> <Sample label="Without name" vertical>
......
ui/showcases/Skeleton.tsx 0 → 100644
View file @ 62d5b8e4
import React from 'react';
import { Skeleton } from 'toolkit/chakra/skeleton';
import { Section, Container, SectionHeader, SamplesStack, Sample } from './parts';
const SkeletonShowcase = () => {
return (
<Container value="skeleton">
<Section>
<SectionHeader>Variants</SectionHeader>
<SamplesStack >
<Sample label="default">
<Skeleton loading>
<span>Skeleton</span>
</Skeleton>
</Sample>
</SamplesStack>
</Section>
</Container>
);
};
export default React.memo(SkeletonShowcase);
ui/showcases/Loaders.tsx → ui/showcases/Spinner.tsx
View file @ 62d5b8e4
import { Spinner } from '@chakra-ui/react'; import { Spinner } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import { Skeleton } from 'toolkit/chakra/skeleton';
import ContentLoader from 'ui/shared/ContentLoader';
import { Section, Container, SectionHeader, SamplesStack, Sample, SectionSubHeader } from './parts'; import { Section, Container, SectionHeader, SamplesStack, Sample, SectionSubHeader } from './parts';
const LoadersShowcase = () => { const SpinnerShowcase = () => {
return ( return (
<Container value="loaders"> <Container value="spinner">
<Section>
<SectionHeader>Skeleton</SectionHeader>
<SamplesStack >
<Sample>
<Skeleton loading>
<span>Skeleton</span>
</Skeleton>
</Sample>
</SamplesStack>
</Section>
<Section>
<SectionHeader>Content loader</SectionHeader>
<SamplesStack >
<Sample>
<ContentLoader/>
</Sample>
</SamplesStack>
</Section>
<Section> <Section>
<SectionHeader>Spinner</SectionHeader> <SectionHeader>Spinner</SectionHeader>
<SectionSubHeader>Sizes</SectionSubHeader> <SectionSubHeader>Sizes</SectionSubHeader>
...@@ -45,4 +22,4 @@ const LoadersShowcase = () => { ...@@ -45,4 +22,4 @@ const LoadersShowcase = () => {
); );
}; };
export default React.memo(LoadersShowcase); export default React.memo(SpinnerShowcase);
ui/tx/TxAllowedPeekers.tsx
View file @ 62d5b8e4
import React from 'react'; import React from 'react';
import CutLinkList from 'toolkit/components/CutLink/CutLinkList'; import { CollapsibleList } from 'toolkit/chakra/collapsible';
import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import AddressEntity from 'ui/shared/entities/address/AddressEntity';
...@@ -21,7 +21,7 @@ const TxAllowedPeekers = ({ items }: Props) => { ...@@ -21,7 +21,7 @@ const TxAllowedPeekers = ({ items }: Props) => {
Allowed peekers Allowed peekers
</DetailedInfo.ItemLabel> </DetailedInfo.ItemLabel>
<DetailedInfo.ItemValue> <DetailedInfo.ItemValue>
<CutLinkList <CollapsibleList
items={ items } items={ items }
renderItem={ renderItem } renderItem={ renderItem }
cutLength={ 2 } cutLength={ 2 }
......
ui/tx/details/TxInfo.tsx
View file @ 62d5b8e4
...@@ -25,10 +25,10 @@ import * as arbitrum from 'lib/rollups/arbitrum'; ...@@ -25,10 +25,10 @@ import * as arbitrum from 'lib/rollups/arbitrum';
import getConfirmationDuration from 'lib/tx/getConfirmationDuration'; import getConfirmationDuration from 'lib/tx/getConfirmationDuration';
import { currencyUnits } from 'lib/units'; import { currencyUnits } from 'lib/units';
import { Badge } from 'toolkit/chakra/badge'; import { Badge } from 'toolkit/chakra/badge';
import { CollapsibleDetails } from 'toolkit/chakra/collapsible';
import { Link } from 'toolkit/chakra/link'; import { Link } from 'toolkit/chakra/link';
import { Skeleton } from 'toolkit/chakra/skeleton'; import { Skeleton } from 'toolkit/chakra/skeleton';
import { Tooltip } from 'toolkit/chakra/tooltip'; import { Tooltip } from 'toolkit/chakra/tooltip';
import CutLinkDetails from 'toolkit/components/CutLink/CutLinkDetails';
import CopyToClipboard from 'ui/shared/CopyToClipboard'; import CopyToClipboard from 'ui/shared/CopyToClipboard';
import CurrencyValue from 'ui/shared/CurrencyValue'; import CurrencyValue from 'ui/shared/CurrencyValue';
import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo'; import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
...@@ -803,7 +803,7 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => { ...@@ -803,7 +803,7 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
) } ) }
<TxInfoScrollFees data={ data } isLoading={ isLoading }/> <TxInfoScrollFees data={ data } isLoading={ isLoading }/>
<CutLinkDetails loading={ isLoading } mt={ 6 } gridColumn={{ base: undefined, lg: '1 / 3' }} isExpanded={ isExpanded } onClick={ handleCutLinkClick }> <CollapsibleDetails loading={ isLoading } mt={ 6 } gridColumn={{ base: undefined, lg: '1 / 3' }} isExpanded={ isExpanded } onClick={ handleCutLinkClick }>
<GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 1, lg: 4 }}/> <GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 1, lg: 4 }}/>
<TxDetailsWithdrawalStatusArbitrum data={ data }/> <TxDetailsWithdrawalStatusArbitrum data={ data }/>
...@@ -892,7 +892,7 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => { ...@@ -892,7 +892,7 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
) } ) }
{ data.zksync && <ZkSyncL2TxnBatchHashesInfo data={ data.zksync } isLoading={ isLoading }/> } { data.zksync && <ZkSyncL2TxnBatchHashesInfo data={ data.zksync } isLoading={ isLoading }/> }
</CutLinkDetails> </CollapsibleDetails>
</DetailedInfo.Container> </DetailedInfo.Container>
); );
}; };
......
ui/tx/state/TxStateTokenIdList.tsx
View file @ 62d5b8e4
import { Text } from '@chakra-ui/react'; import { Text } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import CutLinkList from 'toolkit/components/CutLink/CutLinkList'; import { CollapsibleList } from 'toolkit/chakra/collapsible';
import NftEntity from 'ui/shared/entities/nft/NftEntity'; import NftEntity from 'ui/shared/entities/nft/NftEntity';
interface Props { interface Props {
...@@ -20,10 +20,10 @@ const TxStateTokenIdList = ({ items, tokenAddress, isLoading }: Props) => { ...@@ -20,10 +20,10 @@ const TxStateTokenIdList = ({ items, tokenAddress, isLoading }: Props) => {
}, [ isLoading, tokenAddress ]); }, [ isLoading, tokenAddress ]);
return ( return (
<CutLinkList <CollapsibleList
items={ items } items={ items }
renderItem={ renderItem } renderItem={ renderItem }
linkProps={{ triggerProps={{
pb: { base: '5px', md: 0 }, pb: { base: '5px', md: 0 },
}} }}
rowGap={ 2 } rowGap={ 2 }
......
ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchDetails.tsx
View file @ 62d5b8e4
...@@ -9,9 +9,9 @@ import { route } from 'nextjs-routes'; ...@@ -9,9 +9,9 @@ import { route } from 'nextjs-routes';
import type { ResourceError } from 'lib/api/resources'; import type { ResourceError } from 'lib/api/resources';
import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError'; import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
import { CollapsibleDetails } from 'toolkit/chakra/collapsible';
import { Link } from 'toolkit/chakra/link'; import { Link } from 'toolkit/chakra/link';
import { Skeleton } from 'toolkit/chakra/skeleton'; import { Skeleton } from 'toolkit/chakra/skeleton';
import CutLinkDetails from 'toolkit/components/CutLink/CutLinkDetails';
import isCustomAppError from 'ui/shared/AppError/isCustomAppError'; import isCustomAppError from 'ui/shared/AppError/isCustomAppError';
import ArbitrumL2TxnBatchDA from 'ui/shared/batch/ArbitrumL2TxnBatchDA'; import ArbitrumL2TxnBatchDA from 'ui/shared/batch/ArbitrumL2TxnBatchDA';
import CopyToClipboard from 'ui/shared/CopyToClipboard'; import CopyToClipboard from 'ui/shared/CopyToClipboard';
...@@ -191,7 +191,7 @@ const ArbitrumL2TxnBatchDetails = ({ query }: Props) => { ...@@ -191,7 +191,7 @@ const ArbitrumL2TxnBatchDetails = ({ query }: Props) => {
</DetailedInfo.ItemValue> </DetailedInfo.ItemValue>
{ (data.data_availability.batch_data_container === 'in_anytrust' || data.data_availability.batch_data_container === 'in_celestia') && ( { (data.data_availability.batch_data_container === 'in_anytrust' || data.data_availability.batch_data_container === 'in_celestia') && (
<CutLinkDetails <CollapsibleDetails
loading={ isPlaceholderData } loading={ isPlaceholderData }
mt={ 6 } mt={ 6 }
gridColumn={{ base: undefined, lg: '1 / 3' }} gridColumn={{ base: undefined, lg: '1 / 3' }}
...@@ -205,7 +205,7 @@ const ArbitrumL2TxnBatchDetails = ({ query }: Props) => { ...@@ -205,7 +205,7 @@ const ArbitrumL2TxnBatchDetails = ({ query }: Props) => {
{ data.data_availability.batch_data_container === 'in_celestia' && ( { data.data_availability.batch_data_container === 'in_celestia' && (
<ArbitrumL2TxnBatchDetailsCelestiaDA data={ data.data_availability }/> <ArbitrumL2TxnBatchDetailsCelestiaDA data={ data.data_availability }/>
) } ) }
</CutLinkDetails> </CollapsibleDetails>
) } ) }
</Grid> </Grid>
); );
......
ui/txnBatches/zkSyncL2/ZkSyncL2TxnBatchDetails.tsx
View file @ 62d5b8e4
...@@ -12,9 +12,9 @@ import type { ResourceError } from 'lib/api/resources'; ...@@ -12,9 +12,9 @@ import type { ResourceError } from 'lib/api/resources';
import { WEI, WEI_IN_GWEI } from 'lib/consts'; import { WEI, WEI_IN_GWEI } from 'lib/consts';
import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError'; import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
import { currencyUnits } from 'lib/units'; import { currencyUnits } from 'lib/units';
import { CollapsibleDetails } from 'toolkit/chakra/collapsible';
import { Link } from 'toolkit/chakra/link'; import { Link } from 'toolkit/chakra/link';
import { Skeleton } from 'toolkit/chakra/skeleton'; import { Skeleton } from 'toolkit/chakra/skeleton';
import CutLinkDetails from 'toolkit/components/CutLink/CutLinkDetails';
import isCustomAppError from 'ui/shared/AppError/isCustomAppError'; import isCustomAppError from 'ui/shared/AppError/isCustomAppError';
import CopyToClipboard from 'ui/shared/CopyToClipboard'; import CopyToClipboard from 'ui/shared/CopyToClipboard';
import DataFetchAlert from 'ui/shared/DataFetchAlert'; import DataFetchAlert from 'ui/shared/DataFetchAlert';
...@@ -125,7 +125,7 @@ const ZkSyncL2TxnBatchDetails = ({ query }: Props) => { ...@@ -125,7 +125,7 @@ const ZkSyncL2TxnBatchDetails = ({ query }: Props) => {
<ZkSyncL2TxnBatchHashesInfo isLoading={ isPlaceholderData } data={ data }/> <ZkSyncL2TxnBatchHashesInfo isLoading={ isPlaceholderData } data={ data }/>
<CutLinkDetails loading={ isPlaceholderData } mt={ 6 } gridColumn={{ base: undefined, lg: '1 / 3' }}> <CollapsibleDetails loading={ isPlaceholderData } mt={ 6 } gridColumn={{ base: undefined, lg: '1 / 3' }}>
<GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 1, lg: 4 }}/> <GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 1, lg: 4 }}/>
<DetailedInfo.ItemLabel <DetailedInfo.ItemLabel
...@@ -160,7 +160,7 @@ const ZkSyncL2TxnBatchDetails = ({ query }: Props) => { ...@@ -160,7 +160,7 @@ const ZkSyncL2TxnBatchDetails = ({ query }: Props) => {
<Text mr={ 1 }>{ BigNumber(data.l2_fair_gas_price).dividedBy(WEI).toFixed() } { currencyUnits.ether }</Text> <Text mr={ 1 }>{ BigNumber(data.l2_fair_gas_price).dividedBy(WEI).toFixed() } { currencyUnits.ether }</Text>
<Text color="text.secondary">({ BigNumber(data.l2_fair_gas_price).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei })</Text> <Text color="text.secondary">({ BigNumber(data.l2_fair_gas_price).dividedBy(WEI_IN_GWEI).toFixed() } { currencyUnits.gwei })</Text>
</DetailedInfo.ItemValue> </DetailedInfo.ItemValue>
</CutLinkDetails> </CollapsibleDetails>
</Grid> </Grid>
); );
}; };
......
ui/userOp/UserOpDetails.tsx
View file @ 62d5b8e4
...@@ -11,8 +11,8 @@ import { WEI, WEI_IN_GWEI } from 'lib/consts'; ...@@ -11,8 +11,8 @@ import { WEI, WEI_IN_GWEI } from 'lib/consts';
import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError'; import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
import { space } from 'lib/html-entities'; import { space } from 'lib/html-entities';
import { currencyUnits } from 'lib/units'; import { currencyUnits } from 'lib/units';
import { CollapsibleDetails } from 'toolkit/chakra/collapsible';
import { Skeleton } from 'toolkit/chakra/skeleton'; import { Skeleton } from 'toolkit/chakra/skeleton';
import CutLinkDetails from 'toolkit/components/CutLink/CutLinkDetails';
import isCustomAppError from 'ui/shared/AppError/isCustomAppError'; import isCustomAppError from 'ui/shared/AppError/isCustomAppError';
import CurrencyValue from 'ui/shared/CurrencyValue'; import CurrencyValue from 'ui/shared/CurrencyValue';
import DataFetchAlert from 'ui/shared/DataFetchAlert'; import DataFetchAlert from 'ui/shared/DataFetchAlert';
...@@ -217,7 +217,7 @@ const UserOpDetails = ({ query }: Props) => { ...@@ -217,7 +217,7 @@ const UserOpDetails = ({ query }: Props) => {
{ config.features.txInterpretation.isEnabled && <UserOpDetailsActions hash={ data.hash } isUserOpDataLoading={ isPlaceholderData }/> } { config.features.txInterpretation.isEnabled && <UserOpDetailsActions hash={ data.hash } isUserOpDataLoading={ isPlaceholderData }/> }
{ /* ADDITIONAL INFO */ } { /* ADDITIONAL INFO */ }
<CutLinkDetails loading={ isPlaceholderData } mt={ 6 } gridColumn={{ base: undefined, lg: '1 / 3' }}> <CollapsibleDetails loading={ isPlaceholderData } mt={ 6 } gridColumn={{ base: undefined, lg: '1 / 3' }}>
<GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 1, lg: 4 }}/> <GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 1, lg: 4 }}/>
<DetailedInfo.ItemLabel <DetailedInfo.ItemLabel
...@@ -376,7 +376,7 @@ const UserOpDetails = ({ query }: Props) => { ...@@ -376,7 +376,7 @@ const UserOpDetails = ({ query }: Props) => {
<UserOpCallData data={ data }/> <UserOpCallData data={ data }/>
<UserOpDecodedCallData data={ data }/> <UserOpDecodedCallData data={ data }/>
</CutLinkDetails> </CollapsibleDetails>
</Grid> </Grid>
); );
}; };
......
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