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 { scroller, Element } from 'react-scroll';
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;
id?: string;
onClick?: () => void;
isExpanded?: boolean;
text?: [string, string];
}
const ID = 'CutLink';
export const CollapsibleDetails = (props: CollapsibleDetailsProps) => {
const CUT_ID = 'CollapsibleDetails';
const CutLink = (props: Props) => {
const { children, id = ID, onClick, isExpanded: isExpandedProp = false, text: textProp, ...rest } = props;
const { children, id = CUT_ID, onClick, isExpanded: isExpandedProp = false, text: textProp, loading, ...rest } = props;
const [ isExpanded, setIsExpanded ] = React.useState(isExpandedProp);
const handleClick = React.useCallback(() => {
const handleClick = React.useCallback((event: React.MouseEvent<HTMLButtonElement>) => {
setIsExpanded((flag) => !flag);
scroller.scrollTo(id, {
duration: 500,
smooth: true,
});
onClick?.();
onClick?.(event);
}, [ id, onClick ]);
useUpdateEffect(() => {
......@@ -41,20 +42,58 @@ const CutLink = (props: Props) => {
return (
<>
<Link
<Button
variant="link"
textStyle="sm"
textDecorationLine="underline"
textDecorationStyle="dashed"
w="fit-content"
onClick={ handleClick }
asChild
loadingSkeleton={ loading }
{ ...rest }
>
<Element name={ id }>{ text }</Element>
</Link>
</Button>
{ 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';
import * as arbitrum from 'lib/rollups/arbitrum';
import getQueryParamString from 'lib/router/getQueryParamString';
import { currencyUnits } from 'lib/units';
import { CollapsibleDetails } from 'toolkit/chakra/collapsible';
import { Link } from 'toolkit/chakra/link';
import { Skeleton } from 'toolkit/chakra/skeleton';
import { Tooltip } from 'toolkit/chakra/tooltip';
import CutLinkDetails from 'toolkit/components/CutLink/CutLinkDetails';
import OptimisticL2TxnBatchDA from 'ui/shared/batch/OptimisticL2TxnBatchDA';
import BlockGasUsed from 'ui/shared/block/BlockGasUsed';
import CopyToClipboard from 'ui/shared/CopyToClipboard';
......@@ -539,7 +539,7 @@ const BlockDetails = ({ query }: Props) => {
) }
{ /* 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 }}/>
{ rollupFeature.isEnabled && rollupFeature.type === 'zkSync' && data.zksync &&
......@@ -738,7 +738,7 @@ const BlockDetails = ({ query }: Props) => {
) }
</>
) }
</CutLinkDetails>
</CollapsibleDetails>
</DetailedInfo.Container>
);
......
ui/pages/Chakra.tsx
View file @ 62d5b8e4
......@@ -11,10 +11,12 @@ import BadgeShowcase from 'ui/showcases/Badge';
import ButtonShowcase from 'ui/showcases/Button';
import CheckboxShowcase from 'ui/showcases/Checkbox';
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 FieldShowcase from 'ui/showcases/Field';
import InputShowcase from 'ui/showcases/Input';
import LinkShowcase from 'ui/showcases/Link';
import LoadersShowcase from 'ui/showcases/Loaders';
import MenuShowcase from 'ui/showcases/Menu';
import PaginationShowcase from 'ui/showcases/Pagination';
import PinInputShowcase from 'ui/showcases/PinInput';
......@@ -22,6 +24,8 @@ import PopoverShowcase from 'ui/showcases/Popover';
import ProgressCircleShowcase from 'ui/showcases/ProgressCircle';
import RadioShowcase from 'ui/showcases/Radio';
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 TabsShowcase from 'ui/showcases/Tabs';
import TagShowcase from 'ui/showcases/Tag';
......@@ -45,10 +49,12 @@ const tabs = [
{ label: 'Button', value: 'button', component: <ButtonShowcase/> },
{ label: 'Checkbox', value: 'checkbox', component: <CheckboxShowcase/> },
{ 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: 'Input', value: 'input', component: <InputShowcase/> },
{ label: 'Field', value: 'field', component: <FieldShowcase/> },
{ label: 'Link', value: 'link', component: <LinkShowcase/> },
{ label: 'Loaders', value: 'loaders', component: <LoadersShowcase/> },
{ label: 'Menu', value: 'menu', component: <MenuShowcase/> },
{ label: 'Pagination', value: 'pagination', component: <PaginationShowcase/> },
{ label: 'Progress Circle', value: 'progress-circle', component: <ProgressCircleShowcase/> },
......@@ -56,6 +62,8 @@ const tabs = [
{ label: 'Pin input', value: 'pin-input', component: <PinInputShowcase/> },
{ label: 'Popover', value: 'popover', component: <PopoverShowcase/> },
{ 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: 'Tabs', value: 'tabs', component: <TabsShowcase/> },
{ 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 = () => {
<Input type="text" placeholder="Name"/>
<Input type="text" placeholder="Name (disabled)" disabled/>
<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>
</SamplesStack>
</Section>
<Section>
<SectionHeader>Field</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>
<SectionHeader>Input group</SectionHeader>
<SamplesStack>
<Sample label="with end element">
<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 */
/* eslint-disable max-len */
import { Box, Text } from '@chakra-ui/react';
import { Box } from '@chakra-ui/react';
import React from 'react';
import * as addressMock from 'mocks/address/address';
......@@ -11,8 +9,6 @@ import * as ensMock from 'mocks/ens/domain';
import * as poolMock from 'mocks/pools/pool';
import * as txMock from 'mocks/txs/tx';
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 BlobEntity from 'ui/shared/entities/blob/BlobEntity';
import BlockEntity from 'ui/shared/entities/block/BlockEntity';
......@@ -23,7 +19,6 @@ import TokenEntity from 'ui/shared/entities/token/TokenEntity';
import TxEntity from 'ui/shared/entities/tx/TxEntity';
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 = {
address: '0xdAC17F958D2ee523a2206206994597C13D831ec7',
......@@ -96,29 +91,6 @@ const LinkShowcase = () => {
<Section>
<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>
<SamplesStack>
<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 React from 'react';
import { Skeleton } from 'toolkit/chakra/skeleton';
import ContentLoader from 'ui/shared/ContentLoader';
import { Section, Container, SectionHeader, SamplesStack, Sample, SectionSubHeader } from './parts';
const LoadersShowcase = () => {
const SpinnerShowcase = () => {
return (
<Container value="loaders">
<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>
<Container value="spinner">
<Section>
<SectionHeader>Spinner</SectionHeader>
<SectionSubHeader>Sizes</SectionSubHeader>
......@@ -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 CutLinkList from 'toolkit/components/CutLink/CutLinkList';
import { CollapsibleList } from 'toolkit/chakra/collapsible';
import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
......@@ -21,7 +21,7 @@ const TxAllowedPeekers = ({ items }: Props) => {
Allowed peekers
</DetailedInfo.ItemLabel>
<DetailedInfo.ItemValue>
<CutLinkList
<CollapsibleList
items={ items }
renderItem={ renderItem }
cutLength={ 2 }
......
ui/tx/details/TxInfo.tsx
View file @ 62d5b8e4
......@@ -25,10 +25,10 @@ import * as arbitrum from 'lib/rollups/arbitrum';
import getConfirmationDuration from 'lib/tx/getConfirmationDuration';
import { currencyUnits } from 'lib/units';
import { Badge } from 'toolkit/chakra/badge';
import { CollapsibleDetails } from 'toolkit/chakra/collapsible';
import { Link } from 'toolkit/chakra/link';
import { Skeleton } from 'toolkit/chakra/skeleton';
import { Tooltip } from 'toolkit/chakra/tooltip';
import CutLinkDetails from 'toolkit/components/CutLink/CutLinkDetails';
import CopyToClipboard from 'ui/shared/CopyToClipboard';
import CurrencyValue from 'ui/shared/CurrencyValue';
import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
......@@ -803,7 +803,7 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
) }
<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 }}/>
<TxDetailsWithdrawalStatusArbitrum data={ data }/>
......@@ -892,7 +892,7 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
) }
{ data.zksync && <ZkSyncL2TxnBatchHashesInfo data={ data.zksync } isLoading={ isLoading }/> }
</CutLinkDetails>
</CollapsibleDetails>
</DetailedInfo.Container>
);
};
......
ui/tx/state/TxStateTokenIdList.tsx
View file @ 62d5b8e4
import { Text } from '@chakra-ui/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';
interface Props {
......@@ -20,10 +20,10 @@ const TxStateTokenIdList = ({ items, tokenAddress, isLoading }: Props) => {
}, [ isLoading, tokenAddress ]);
return (
<CutLinkList
<CollapsibleList
items={ items }
renderItem={ renderItem }
linkProps={{
triggerProps={{
pb: { base: '5px', md: 0 },
}}
rowGap={ 2 }
......
ui/txnBatches/arbitrumL2/ArbitrumL2TxnBatchDetails.tsx
View file @ 62d5b8e4
......@@ -9,9 +9,9 @@ import { route } from 'nextjs-routes';
import type { ResourceError } from 'lib/api/resources';
import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
import { CollapsibleDetails } from 'toolkit/chakra/collapsible';
import { Link } from 'toolkit/chakra/link';
import { Skeleton } from 'toolkit/chakra/skeleton';
import CutLinkDetails from 'toolkit/components/CutLink/CutLinkDetails';
import isCustomAppError from 'ui/shared/AppError/isCustomAppError';
import ArbitrumL2TxnBatchDA from 'ui/shared/batch/ArbitrumL2TxnBatchDA';
import CopyToClipboard from 'ui/shared/CopyToClipboard';
......@@ -191,7 +191,7 @@ const ArbitrumL2TxnBatchDetails = ({ query }: Props) => {
</DetailedInfo.ItemValue>
{ (data.data_availability.batch_data_container === 'in_anytrust' || data.data_availability.batch_data_container === 'in_celestia') && (
<CutLinkDetails
<CollapsibleDetails
loading={ isPlaceholderData }
mt={ 6 }
gridColumn={{ base: undefined, lg: '1 / 3' }}
......@@ -205,7 +205,7 @@ const ArbitrumL2TxnBatchDetails = ({ query }: Props) => {
{ data.data_availability.batch_data_container === 'in_celestia' && (
<ArbitrumL2TxnBatchDetailsCelestiaDA data={ data.data_availability }/>
) }
</CutLinkDetails>
</CollapsibleDetails>
) }
</Grid>
);
......
ui/txnBatches/zkSyncL2/ZkSyncL2TxnBatchDetails.tsx
View file @ 62d5b8e4
......@@ -12,9 +12,9 @@ import type { ResourceError } from 'lib/api/resources';
import { WEI, WEI_IN_GWEI } from 'lib/consts';
import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
import { currencyUnits } from 'lib/units';
import { CollapsibleDetails } from 'toolkit/chakra/collapsible';
import { Link } from 'toolkit/chakra/link';
import { Skeleton } from 'toolkit/chakra/skeleton';
import CutLinkDetails from 'toolkit/components/CutLink/CutLinkDetails';
import isCustomAppError from 'ui/shared/AppError/isCustomAppError';
import CopyToClipboard from 'ui/shared/CopyToClipboard';
import DataFetchAlert from 'ui/shared/DataFetchAlert';
......@@ -125,7 +125,7 @@ const ZkSyncL2TxnBatchDetails = ({ query }: Props) => {
<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 }}/>
<DetailedInfo.ItemLabel
......@@ -160,7 +160,7 @@ const ZkSyncL2TxnBatchDetails = ({ query }: Props) => {
<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>
</DetailedInfo.ItemValue>
</CutLinkDetails>
</CollapsibleDetails>
</Grid>
);
};
......
ui/userOp/UserOpDetails.tsx
View file @ 62d5b8e4
......@@ -11,8 +11,8 @@ import { WEI, WEI_IN_GWEI } from 'lib/consts';
import throwOnResourceLoadError from 'lib/errors/throwOnResourceLoadError';
import { space } from 'lib/html-entities';
import { currencyUnits } from 'lib/units';
import { CollapsibleDetails } from 'toolkit/chakra/collapsible';
import { Skeleton } from 'toolkit/chakra/skeleton';
import CutLinkDetails from 'toolkit/components/CutLink/CutLinkDetails';
import isCustomAppError from 'ui/shared/AppError/isCustomAppError';
import CurrencyValue from 'ui/shared/CurrencyValue';
import DataFetchAlert from 'ui/shared/DataFetchAlert';
......@@ -217,7 +217,7 @@ const UserOpDetails = ({ query }: Props) => {
{ config.features.txInterpretation.isEnabled && <UserOpDetailsActions hash={ data.hash } isUserOpDataLoading={ isPlaceholderData }/> }
{ /* 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 }}/>
<DetailedInfo.ItemLabel
......@@ -376,7 +376,7 @@ const UserOpDetails = ({ query }: Props) => {
<UserOpCallData data={ data }/>
<UserOpDecodedCallData data={ data }/>
</CutLinkDetails>
</CollapsibleDetails>
</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