Skip to content

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

block tx tab

parent 3bff0002
Hide whitespace changes
Inline Side-by-side
Showing with 195 additions and 151 deletions
eslint.config.mjs
View file @ 3cfd4d1a
......@@ -27,6 +27,7 @@ const RESTRICTED_MODULES = {
{ name: 'playwright/TestApp', message: 'Please use render() fixture from test() function of playwright/lib module' },
{ name: 'ui/shared/chakra/Skeleton', message: 'Please use Skeleton component from toolkit/chakra instead' },
{ name: 'ui/shared/Tabs/RoutedTabs', message: 'Please use RoutedTabs component from toolkit/components/RoutedTabs instead' },
{ name: 'ui/shared/chakra/Tag', message: 'Please use Tag component from toolkit/chakra instead' },
{
name: '@chakra-ui/react',
importNames: [
......
toolkit/chakra/badge.tsx
View file @ 3cfd4d1a
import type { BadgeProps as ChakraBadgeProps } from '@chakra-ui/react';
import { Badge as ChakraBadge } from '@chakra-ui/react';
import { chakra, Badge as ChakraBadge } from '@chakra-ui/react';
import React from 'react';
import type { IconName } from 'ui/shared/IconSvg';
import IconSvg from 'ui/shared/IconSvg';
import TruncatedTextTooltip from 'ui/shared/TruncatedTextTooltip';
import { Skeleton } from './skeleton';
export interface BadgeProps extends ChakraBadgeProps {
loading?: boolean;
iconStart?: IconName;
truncated?: boolean;
}
export const Badge = React.forwardRef<HTMLSpanElement, BadgeProps>(
function Badge(props, ref) {
const { loading, iconStart, children, asChild = true, ...rest } = props;
const { loading, iconStart, children, asChild = true, truncated = false, ...rest } = props;
const child = <chakra.span overflow="hidden" textOverflow="ellipsis">{ children }</chakra.span>;
const childrenElement = truncated ? (
<TruncatedTextTooltip label={ children }>
{ child }
</TruncatedTextTooltip>
) : child;
return (
<Skeleton loading={ loading } asChild={ asChild }>
<ChakraBadge ref={ ref } display="flex" alignItems="center" gap={ 1 } { ...rest }>
<ChakraBadge ref={ ref } display="inline-flex" alignItems="center" whiteSpace="nowrap" { ...rest }>
{ iconStart && <IconSvg name={ iconStart } boxSize="10px"/> }
{ children }
{ childrenElement }
</ChakraBadge>
</Skeleton>
);
......
toolkit/chakra/icon-button.tsx
View file @ 3cfd4d1a
......@@ -6,6 +6,7 @@ import { Skeleton } from './skeleton';
export interface IconButtonProps extends ButtonProps {}
// TODO @tom2drum variants for icon buttons: prev-next, top-bar, copy-to-clipboard
// TODO @tom2drum fix loading state for outlined variant
export const IconButton = React.forwardRef<HTMLDivElement, IconButtonProps>(
function IconButton(props, ref) {
......
toolkit/components/RoutedTabs/RoutedTabsSkeleton.tsx
View file @ 3cfd4d1a
......@@ -15,6 +15,7 @@ const SkeletonTabText = ({ size, title }: { size: TabsProps['size']; title: TabI
fontWeight={ 600 }
mx={ size === 'sm' ? 3 : 4 }
flexShrink={ 0 }
loading
>
{ typeof title === 'string' ? title : title() }
</Skeleton>
......
toolkit/theme/foundations/semanticTokens.ts
View file @ 3cfd4d1a
......@@ -333,6 +333,12 @@ const semanticTokens: ThemingConfig['semanticTokens'] = {
backTo: { value: '{colors.gray.400}' },
externalLink: { value: { _light: '{colors.gray.400}', _dark: '{colors.gray.400}' } },
},
address: {
highlighted: {
bg: { value: { _light: '{colors.blue.50}', _dark: '{colors.blue.900}' } },
border: { value: { _light: '{colors.blue.200}', _dark: '{colors.blue.600}' } },
},
},
global: {
body: {
bg: { value: { _light: '{colors.white}', _dark: '{colors.black}' } },
......
toolkit/theme/globalCss.ts
View file @ 3cfd4d1a
import type { SystemStyleObject } from '@chakra-ui/theme-tools';
import type { SystemConfig } from '@chakra-ui/react';
// TODO @tom2drum check address highlight feature
import addressEntity from './globals/address-entity';
import recaptcha from './globals/recaptcha';
import scrollbar from './globals/scrollbar';
const globalCss: Record<string, SystemStyleObject> = {
const globalCss: SystemConfig['globalCss'] = {
body: {
bg: 'global.body.bg',
color: 'global.body.fg',
'-webkit-tap-highlight-color': 'transparent',
WebkitTapHighlightColor: 'transparent',
fontVariantLigatures: 'no-contextual',
},
mark: {
......@@ -25,7 +24,7 @@ const globalCss: Record<string, SystemStyleObject> = {
},
...recaptcha,
...scrollbar,
// ...addressEntity(props),
...addressEntity,
};
export default globalCss;
toolkit/theme/globals/address-entity.ts
View file @ 3cfd4d1a
import { mode } from '@chakra-ui/theme-tools';
import type { StyleFunctionProps } from '@chakra-ui/theme-tools';
const styles = (props: StyleFunctionProps) => {
return {
'.address-entity': {
'&.address-entity_highlighted': {
_before: {
content: `" "`,
position: 'absolute',
py: 1,
pl: 1,
pr: 0,
top: '-5px',
left: '-5px',
width: `100%`,
height: '100%',
borderRadius: 'base',
borderColor: mode('blue.200', 'blue.600')(props),
borderWidth: '1px',
borderStyle: 'dashed',
bgColor: mode('blue.50', 'blue.900')(props),
zIndex: -1,
},
const styles = {
'.address-entity': {
'&.address-entity_highlighted': {
_before: {
content: `" "`,
position: 'absolute',
py: 1,
pl: 1,
pr: 0,
top: '-5px',
left: '-5px',
width: `calc(100% + 6px)`,
height: 'calc(100% + 10px)',
borderRadius: 'base',
borderColor: 'address.highlighted.border',
borderWidth: '1px',
borderStyle: 'dashed',
bgColor: 'address.highlighted.bg',
zIndex: -1,
},
},
'.address-entity_no-copy': {
'&.address-entity_highlighted': {
_before: {
pr: 2,
},
},
'.address-entity_no-copy': {
'&.address-entity_highlighted': {
_before: {
pr: 2,
},
},
};
},
};
export default styles;
toolkit/theme/recipes/badge.recipe.ts
View file @ 3cfd4d1a
......@@ -7,6 +7,8 @@ export const recipe = defineRecipe({
borderRadius: 'sm',
gap: '1',
fontWeight: '500',
width: 'fit-content',
maxWidth: '100%',
whiteSpace: 'nowrap',
userSelect: 'none',
_loading: {
......
ui/blocks/BlocksContent.tsx
View file @ 3cfd4d1a
......@@ -87,7 +87,7 @@ const BlocksContent = ({ type, query, enableSocket = true, top }: Props) => {
const content = query.data?.items ? (
<>
<Box display={{ base: 'block', lg: 'none' }}>
<Box hideFrom="lg">
{ query.pagination.page === 1 && enableSocket && (
<SocketNewItemsNotice.Mobile
url={ window.location.href }
......@@ -99,7 +99,7 @@ const BlocksContent = ({ type, query, enableSocket = true, top }: Props) => {
) }
<BlocksList data={ query.data.items } isLoading={ query.isPlaceholderData } page={ query.pagination.page }/>
</Box>
<Box display={{ base: 'none', lg: 'block' }}>
<Box hideBelow="lg">
<BlocksTable
data={ query.data.items }
top={ top || (query.pagination.isVisible ? TABS_HEIGHT : 0) }
......
ui/pages/Block.tsx
View file @ 3cfd4d1a
......@@ -68,16 +68,16 @@ const BlockPageContent = () => {
</>
),
},
// {
// id: 'txs',
// title: 'Transactions',
// component: (
// <>
// { blockTxsQuery.isDegradedData && <ServiceDegradationWarning isLoading={ blockTxsQuery.isPlaceholderData } mb={ 6 }/> }
// <TxsWithFrontendSorting query={ blockTxsQuery } showBlockInfo={ false } showSocketInfo={ false } top={ hasPagination ? TABS_HEIGHT : 0 }/>
// </>
// ),
// },
{
id: 'txs',
title: 'Transactions',
component: (
<>
{ blockTxsQuery.isDegradedData && <ServiceDegradationWarning isLoading={ blockTxsQuery.isPlaceholderData } mb={ 6 }/> }
<TxsWithFrontendSorting query={ blockTxsQuery } showBlockInfo={ false } showSocketInfo={ false } top={ hasPagination ? TABS_HEIGHT : 0 }/>
</>
),
},
// config.features.dataAvailability.isEnabled && blockQuery.data?.blob_transaction_count ?
// {
// id: 'blob_txs',
......
ui/shared/CurrencyValue.tsx
View file @ 3cfd4d1a
......@@ -18,7 +18,7 @@ interface Props {
const CurrencyValue = ({ value, currency = '', decimals, exchangeRate, className, accuracy, accuracyUsd, isLoading }: Props) => {
if (isLoading) {
return (
<Skeleton className={ className } display="inline-block">0.00 ($0.00)</Skeleton>
<Skeleton className={ className } loading display="inline-block">0.00 ($0.00)</Skeleton>
);
}
......
ui/shared/entities/address/AddressEntity.tsx
View file @ 3cfd4d1a
......@@ -172,6 +172,7 @@ const AddressEntry = (props: EntityProps) => {
onMouseLeave={ highlightContext?.onMouseLeave }
position="relative"
zIndex={ 0 }
fontWeight="medium"
>
<Icon { ...partsProps.icon }/>
{ props.noLink ? content : <Link { ...partsProps.link }>{ content }</Link> }
......
ui/shared/tx/TxFee.tsx
View file @ 3cfd4d1a
......@@ -35,7 +35,7 @@ const TxFee = ({ className, tx, accuracy, accuracyUsd, isLoading, withCurrency =
<Skeleton whiteSpace="pre-wrap" wordBreak="break-word" loading={ isLoading } display="flex" flexWrap="wrap" className={ className }>
<span>{ valueStr } </span>
<TokenEntity token={ token } noCopy onlySymbol w="auto" ml={ 1 }/>
{ usd && withUsd && <chakra.span color="text_secondary"> (${ usd })</chakra.span> }
{ usd && withUsd && <chakra.span color="text.secondary"> (${ usd })</chakra.span> }
</Skeleton>
);
}
......
ui/showcases/Badges.tsx
View file @ 3cfd4d1a
import { Box } from '@chakra-ui/react';
import React from 'react';
import { Badge } from 'toolkit/chakra/badge';
......@@ -53,6 +54,8 @@ const BadgesShowcase = () => {
<Badge colorPalette="purple" loading>Content</Badge>
</Sample>
</SamplesStack>
</Section>
<Section>
<SectionHeader>Size</SectionHeader>
<SamplesStack>
<Sample label="size: md">
......@@ -68,6 +71,18 @@ const BadgesShowcase = () => {
</Sample>
</SamplesStack>
</Section>
<Section>
<SectionHeader>Truncate</SectionHeader>
<SamplesStack>
<Sample label="truncated: true">
<Box maxW="150px">
<Badge truncated>
Very long content that should be truncated
</Badge>
</Box>
</Sample>
</SamplesStack>
</Section>
<Section>
<SectionHeader>Icon</SectionHeader>
<SamplesStack>
......
ui/showcases/Tabs.tsx
View file @ 3cfd4d1a
......@@ -3,6 +3,7 @@ import React from 'react';
import { TabsContent, TabsList, TabsRoot, TabsTrigger } from 'toolkit/chakra/tabs';
import AdaptiveTabs from 'toolkit/components/AdaptiveTabs/AdaptiveTabs';
import RoutedTabsSkeleton from 'toolkit/components/RoutedTabs/RoutedTabsSkeleton';
import { Section, Container, SectionHeader, SamplesStack, Sample, SectionSubHeader } from './parts';
......@@ -61,6 +62,13 @@ const TabsShowcase = () => {
/>
</Sample>
</SamplesStack>
<SectionSubHeader>Tabs skeleton</SectionSubHeader>
<SamplesStack>
<Sample>
<RoutedTabsSkeleton tabs={ tabs }/>
</Sample>
</SamplesStack>
</Section>
</Container>
);
......
ui/txs/TxTranslationType.tsx
View file @ 3cfd4d1a
......@@ -2,7 +2,7 @@ import React from 'react';
import type { TransactionType } from 'types/api/transaction';
import Tag from 'ui/shared/chakra/Tag';
import { Badge } from 'toolkit/chakra/badge';
import { camelCaseToSentence } from './noves/utils';
import TxType from './TxType';
......@@ -22,9 +22,9 @@ const TxTranslationType = ({ types, isLoading, translatationType }: Props) => {
}
return (
<Tag colorScheme="purple" isLoading={ isLoading }>
<Badge colorScheme="purple" loading={ isLoading }>
{ camelCaseToSentence(translatationType) }
</Tag>
</Badge>
);
};
......
ui/txs/TxsContent.tsx
View file @ 3cfd4d1a
import { Show, Hide } from '@chakra-ui/react';
import { Box } from '@chakra-ui/react';
import React from 'react';
import type { AddressFromToFilter } from 'types/api/address';
......@@ -69,7 +69,7 @@ const TxsContent = ({
const content = itemsWithTranslation ? (
<>
<Show below="lg" ssr={ false }>
<Box hideFrom="lg">
<TxsList
showBlockInfo={ showBlockInfo }
showSocketInfo={ showSocketInfo }
......@@ -80,8 +80,8 @@ const TxsContent = ({
currentAddress={ currentAddress }
items={ itemsWithTranslation }
/>
</Show>
<Hide below="lg" ssr={ false }>
</Box>
<Box hideBelow="lg">
<TxsTable
txs={ itemsWithTranslation }
sort={ onSortToggle }
......@@ -95,7 +95,7 @@ const TxsContent = ({
enableTimeIncrement={ enableTimeIncrement }
isLoading={ isPlaceholderData }
/>
</Hide>
</Box>
</>
) : null;
......@@ -121,11 +121,12 @@ const TxsContent = ({
return (
<DataListDisplay
isError={ isError }
items={ itemsWithTranslation }
itemsNum={ itemsWithTranslation?.length }
emptyText="There are no transactions."
content={ content }
actionBar={ actionBar }
/>
>
{ content }
</DataListDisplay>
);
};
......
ui/txs/TxsHeaderMobile.tsx
View file @ 3cfd4d1a
......@@ -29,13 +29,14 @@ const TxsHeaderMobile = ({ filterComponent, sorting, setSorting, paginationProps
<ActionBar className={ className }>
<HStack>
{ filterComponent }
<Sort
{ /* TODO @tom2drum fix sort select */ }
{ /* <Sort
name="transactions_sorting"
defaultValue={ sorting }
options={ SORT_OPTIONS }
onChange={ setSorting }
isLoading={ paginationProps.isLoading }
/>
/> */ }
{ /* api is not implemented */ }
{ /* <FilterInput
// eslint-disable-next-line react/jsx-no-bind
......
ui/txs/TxsList.tsx
View file @ 3cfd4d1a
......@@ -3,6 +3,7 @@ import React from 'react';
import type { Transaction } from 'types/api/transaction';
import useInitialList from 'lib/hooks/useInitialList';
import useLazyRenderedList from 'lib/hooks/useLazyRenderedList';
import * as SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice';
......@@ -21,6 +22,11 @@ interface Props {
const TxsList = (props: Props) => {
const { cutRef, renderedItemsNum } = useLazyRenderedList(props.items, !props.isLoading);
const initialList = useInitialList({
data: props.items ?? [],
idFn: (item) => item.hash,
enabled: !props.isLoading,
});
return (
<Box>
......@@ -40,6 +46,7 @@ const TxsList = (props: Props) => {
currentAddress={ props.currentAddress }
enableTimeIncrement={ props.enableTimeIncrement }
isLoading={ props.isLoading }
animation={ initialList.getAnimationProp(tx) }
/>
)) }
<Box ref={ cutRef } h={ 0 }/>
......
ui/txs/TxsListItem.tsx
View file @ 3cfd4d1a
......@@ -11,8 +11,8 @@ import config from 'configs/app';
import getValueWithUnit from 'lib/getValueWithUnit';
import { space } from 'lib/html-entities';
import { currencyUnits } from 'lib/units';
import { Skeleton } from 'toolkit/chakra/skeleton';
import AddressFromTo from 'ui/shared/address/AddressFromTo';
import Skeleton from 'ui/shared/chakra/Skeleton';
import BlockEntity from 'ui/shared/entities/block/BlockEntity';
import TxEntity from 'ui/shared/entities/tx/TxEntity';
import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
......@@ -31,13 +31,14 @@ type Props = {
currentAddress?: string;
enableTimeIncrement?: boolean;
isLoading?: boolean;
animation?: string;
};
const TxsListItem = ({ tx, isLoading, showBlockInfo, currentAddress, enableTimeIncrement }: Props) => {
const TxsListItem = ({ tx, isLoading, showBlockInfo, currentAddress, enableTimeIncrement, animation }: Props) => {
const dataTo = tx.to ? tx.to : tx.created_contract;
return (
<ListItemMobile display="block" width="100%" isAnimated key={ tx.hash }>
<ListItemMobile display="block" width="100%" animation={ animation } key={ tx.hash }>
<Flex justifyContent="space-between" mt={ 4 }>
<HStack flexWrap="wrap">
{ tx.translation ? (
......@@ -75,9 +76,9 @@ const TxsListItem = ({ tx, isLoading, showBlockInfo, currentAddress, enableTimeI
</Flex>
{ tx.method && (
<Flex mt={ 3 }>
<Skeleton isLoaded={ !isLoading } display="inline-block" whiteSpace="pre">Method </Skeleton>
<Skeleton loading={ isLoading } display="inline-block" whiteSpace="pre">Method </Skeleton>
<Skeleton
isLoaded={ !isLoading }
loading={ isLoading }
color="text_secondary"
overflow="hidden"
whiteSpace="nowrap"
......@@ -89,7 +90,7 @@ const TxsListItem = ({ tx, isLoading, showBlockInfo, currentAddress, enableTimeI
) }
{ showBlockInfo && tx.block_number !== null && (
<Flex mt={ 2 }>
<Skeleton isLoaded={ !isLoading } display="inline-block" whiteSpace="pre">Block </Skeleton>
<Skeleton loading={ isLoading } display="inline-block" whiteSpace="pre">Block </Skeleton>
<BlockEntity
isLoading={ isLoading }
number={ tx.block_number }
......@@ -107,11 +108,13 @@ const TxsListItem = ({ tx, isLoading, showBlockInfo, currentAddress, enableTimeI
/>
{ !config.UI.views.tx.hiddenFields?.value && (
<Flex mt={ 2 } columnGap={ 2 }>
<Skeleton isLoaded={ !isLoading } display="inline-block" whiteSpace="pre">Value</Skeleton>
<Skeleton isLoaded={ !isLoading } display="inline-block" variant="text_secondary" whiteSpace="pre">
{ getValueWithUnit(tx.value).toFormat() }
{ space }
{ currencyUnits.ether }
<Skeleton loading={ isLoading } display="inline-block" whiteSpace="pre">Value</Skeleton>
<Skeleton loading={ isLoading } display="inline-block" color="text.secondary" whiteSpace="pre">
<span>
{ getValueWithUnit(tx.value).toFormat() }
{ space }
{ currencyUnits.ether }
</span>
</Skeleton>
</Flex>
) }
......@@ -119,7 +122,7 @@ const TxsListItem = ({ tx, isLoading, showBlockInfo, currentAddress, enableTimeI
<Flex mt={ 2 } mb={ 3 } columnGap={ 2 }>
{ (tx.stability_fee !== undefined || tx.fee.value !== null) && (
<>
<Skeleton isLoaded={ !isLoading } display="inline-block" whiteSpace="pre">Fee</Skeleton>
<Skeleton loading={ isLoading } display="inline-block" whiteSpace="pre">Fee</Skeleton>
<TxFee tx={ tx } isLoading={ isLoading }/>
</>
) }
......
ui/txs/TxsTable.tsx
View file @ 3cfd4d1a
import { Link, Table, Tbody, Tr, Th } from '@chakra-ui/react';
import { AnimatePresence } from 'framer-motion';
import React from 'react';
import type { Transaction, TransactionsSortingField, TransactionsSortingValue } from 'types/api/transaction';
import config from 'configs/app';
import { AddressHighlightProvider } from 'lib/contexts/addressHighlight';
import useInitialList from 'lib/hooks/useInitialList';
import useLazyRenderedList from 'lib/hooks/useLazyRenderedList';
import { currencyUnits } from 'lib/units';
import { Link } from 'toolkit/chakra/link';
import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
import IconSvg from 'ui/shared/IconSvg';
import * as SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice';
import TheadSticky from 'ui/shared/TheadSticky';
import TxsTableItem from './TxsTableItem';
......@@ -42,6 +42,11 @@ const TxsTable = ({
isLoading,
}: Props) => {
const { cutRef, renderedItemsNum } = useLazyRenderedList(txs, !isLoading);
const initialList = useInitialList({
data: txs ?? [],
idFn: (item) => item.hash,
enabled: !isLoading,
});
const feeCurrency = config.UI.views.tx.hiddenFields?.fee_currency || config.chain.hasMultipleGasCurrencies ?
'' :
......@@ -49,44 +54,44 @@ const TxsTable = ({
return (
<AddressHighlightProvider>
<Table minWidth="950px">
<TheadSticky top={ top }>
<Tr>
<Th width="54px"></Th>
<Th width="180px">Txn hash</Th>
<Th width="160px">Type</Th>
<Th width="20%">Method</Th>
<TableRoot minWidth="950px">
<TableHeaderSticky top={ top }>
<TableRow>
<TableColumnHeader width="54px"></TableColumnHeader>
<TableColumnHeader width="180px">Txn hash</TableColumnHeader>
<TableColumnHeader width="160px">Type</TableColumnHeader>
<TableColumnHeader width="20%">Method</TableColumnHeader>
{ showBlockInfo && (
<Th width="18%">
<TableColumnHeader width="18%">
<Link onClick={ isLoading ? undefined : sort('block_number') } display="flex" alignItems="center">
{ sorting === 'block_number-asc' && <IconSvg boxSize={ 5 } name="arrows/east" transform="rotate(-90deg)"/> }
{ sorting === 'block_number-desc' && <IconSvg boxSize={ 5 } name="arrows/east" transform="rotate(90deg)"/> }
Block
</Link>
</Th>
</TableColumnHeader>
) }
<Th width="224px">From/To</Th>
<TableColumnHeader width="224px">From/To</TableColumnHeader>
{ !config.UI.views.tx.hiddenFields?.value && (
<Th width="20%" isNumeric>
<TableColumnHeader width="20%" isNumeric>
<Link onClick={ isLoading ? undefined : sort('value') } display="flex" alignItems="center" justifyContent="end">
{ sorting === 'value-asc' && <IconSvg boxSize={ 5 } name="arrows/east" transform="rotate(-90deg)"/> }
{ sorting === 'value-desc' && <IconSvg boxSize={ 5 } name="arrows/east" transform="rotate(90deg)"/> }
{ `Value ${ currencyUnits.ether }` }
</Link>
</Th>
</TableColumnHeader>
) }
{ !config.UI.views.tx.hiddenFields?.tx_fee && (
<Th width="20%" isNumeric pr={ 5 }>
<TableColumnHeader width="20%" isNumeric pr={ 5 }>
<Link onClick={ isLoading ? undefined : sort('fee') } display="flex" alignItems="center" justifyContent="end">
{ sorting === 'fee-asc' && <IconSvg boxSize={ 5 } name="arrows/east" transform="rotate(-90deg)"/> }
{ sorting === 'fee-desc' && <IconSvg boxSize={ 5 } name="arrows/east" transform="rotate(90deg)"/> }
{ `Fee${ feeCurrency }` }
</Link>
</Th>
</TableColumnHeader>
) }
</Tr>
</TheadSticky>
<Tbody>
</TableRow>
</TableHeaderSticky>
<TableBody>
{ showSocketInfo && (
<SocketNewItemsNotice.Desktop
url={ window.location.href }
......@@ -95,20 +100,19 @@ const TxsTable = ({
isLoading={ isLoading }
/>
) }
<AnimatePresence initial={ false }>
{ txs.slice(0, renderedItemsNum).map((item, index) => (
<TxsTableItem
key={ item.hash + (isLoading ? index : '') }
tx={ item }
showBlockInfo={ showBlockInfo }
currentAddress={ currentAddress }
enableTimeIncrement={ enableTimeIncrement }
isLoading={ isLoading }
/>
)) }
</AnimatePresence>
</Tbody>
</Table>
{ txs.slice(0, renderedItemsNum).map((item, index) => (
<TxsTableItem
key={ item.hash + (isLoading ? index : '') }
tx={ item }
showBlockInfo={ showBlockInfo }
currentAddress={ currentAddress }
enableTimeIncrement={ enableTimeIncrement }
isLoading={ isLoading }
animation={ initialList.getAnimationProp(item) }
/>
)) }
</TableBody>
</TableRoot>
<div ref={ cutRef }/>
</AddressHighlightProvider>
);
......
ui/txs/TxsTableItem.tsx
View file @ 3cfd4d1a
import {
Tr,
Td,
VStack,
} from '@chakra-ui/react';
import { motion } from 'framer-motion';
import { VStack } from '@chakra-ui/react';
import React from 'react';
import type { Transaction } from 'types/api/transaction';
import config from 'configs/app';
import { Badge } from 'toolkit/chakra/badge';
import { TableCell, TableRow } from 'toolkit/chakra/table';
import AddressFromTo from 'ui/shared/address/AddressFromTo';
import Tag from 'ui/shared/chakra/Tag';
import CurrencyValue from 'ui/shared/CurrencyValue';
import BlockEntity from 'ui/shared/entities/block/BlockEntity';
import TxEntity from 'ui/shared/entities/tx/TxEntity';
......@@ -29,29 +25,23 @@ type Props = {
currentAddress?: string;
enableTimeIncrement?: boolean;
isLoading?: boolean;
animation?: string;
};
const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement, isLoading }: Props) => {
const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement, isLoading, animation }: Props) => {
const dataTo = tx.to ? tx.to : tx.created_contract;
return (
<Tr
as={ motion.tr }
initial={{ opacity: 0, scale: 0.97 }}
animate={{ opacity: 1, scale: 1 }}
transitionDuration="normal"
transitionTimingFunction="linear"
key={ tx.hash }
>
<Td pl={ 4 }>
<TableRow key={ tx.hash } animation={ animation }>
<TableCell pl={ 4 }>
<TxAdditionalInfo tx={ tx } isLoading={ isLoading }/>
</Td>
<Td pr={ 4 }>
</TableCell>
<TableCell pr={ 4 }>
<VStack alignItems="start" lineHeight="24px">
<TxEntity
hash={ tx.hash }
isLoading={ isLoading }
fontWeight={ 700 }
fontWeight="bold"
noIcon
maxW="100%"
truncation="constant_long"
......@@ -60,12 +50,11 @@ const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement,
timestamp={ tx.timestamp }
enableIncrement={ enableTimeIncrement }
isLoading={ isLoading }
color="text_secondary"
fontWeight="400"
color="text.secondary"
/>
</VStack>
</Td>
<Td>
</TableCell>
<TableCell>
<VStack alignItems="start">
{ tx.translation ? (
<TxTranslationType
......@@ -79,16 +68,16 @@ const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement,
<TxStatus status={ tx.status } errorText={ tx.status === 'error' ? tx.result : undefined } isLoading={ isLoading }/>
<TxWatchListTags tx={ tx } isLoading={ isLoading }/>
</VStack>
</Td>
<Td whiteSpace="nowrap">
</TableCell>
<TableCell whiteSpace="nowrap">
{ tx.method && (
<Tag colorScheme={ tx.method === 'Multicall' ? 'teal' : 'gray' } isLoading={ isLoading } isTruncated>
{ tx.method }
</Tag>
<Badge colorScheme={ tx.method === 'Multicall' ? 'teal' : 'gray' } loading={ isLoading } truncated>
<span>{ tx.method }</span>
</Badge>
) }
</Td>
</TableCell>
{ showBlockInfo && (
<Td>
<TableCell>
{ tx.block_number && (
<BlockEntity
isLoading={ isLoading }
......@@ -99,9 +88,9 @@ const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement,
fontWeight={ 500 }
/>
) }
</Td>
</TableCell>
) }
<Td>
<TableCell>
<AddressFromTo
from={ tx.from }
to={ dataTo }
......@@ -110,14 +99,14 @@ const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement,
mt="2px"
mode="compact"
/>
</Td>
</TableCell>
{ !config.UI.views.tx.hiddenFields?.value && (
<Td isNumeric>
<TableCell isNumeric>
<CurrencyValue value={ tx.value } accuracy={ 8 } isLoading={ isLoading }/>
</Td>
</TableCell>
) }
{ !config.UI.views.tx.hiddenFields?.tx_fee && (
<Td isNumeric maxW="220px">
<TableCell isNumeric maxW="220px">
<TxFee
tx={ tx }
accuracy={ 8 }
......@@ -125,9 +114,9 @@ const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement,
withCurrency={ Boolean(tx.celo || tx.stability_fee) }
justifyContent="end"
/>
</Td>
</TableCell>
) }
</Tr>
</TableRow>
);
};
......
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