Skip to content

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

internal txs for address

parent 6781c5e1
Hide whitespace changes
Inline Side-by-side
Showing with 69 additions and 71 deletions
ui/address/AddressInternalTxs.tsx
View file @ ba2a3e2e
import { Show, Hide } from '@chakra-ui/react';
import { Box } from '@chakra-ui/react';
import { useRouter } from 'next/router';
import React from 'react';
......@@ -70,19 +70,19 @@ const AddressInternalTxs = ({ scrollRef, shouldRender = true, isQueryEnabled = t
const content = data?.items ? (
<>
<Show below="lg" ssr={ false }>
<Box hideFrom="lg">
<InternalTxsList data={ data.items } currentAddress={ hash } isLoading={ isPlaceholderData }/>
</Show>
<Hide below="lg" ssr={ false }>
</Box>
<Box hideBelow="lg">
<InternalTxsTable data={ data.items } currentAddress={ hash } isLoading={ isPlaceholderData }/>
</Hide>
</Box>
</>
) : null ;
const actionBar = (
<ActionBar mt={ -6 } justifyContent="left">
<AddressTxsFilter
defaultFilter={ filterValue }
initialValue={ filterValue }
onFilterChange={ handleFilterChange }
hasActiveFilter={ Boolean(filterValue) }
isLoading={ pagination.isLoading }
......@@ -100,12 +100,13 @@ const AddressInternalTxs = ({ scrollRef, shouldRender = true, isQueryEnabled = t
return (
<DataListDisplay
isError={ isError }
items={ data?.items }
itemsNum={ data?.items.length }
filterProps={{ emptyFilteredText: `Couldn${ apos }t find any transaction that matches your query.`, hasActiveFilters: Boolean(filterValue) }}
emptyText="There are no internal transactions for this address."
content={ content }
actionBar={ actionBar }
/>
>
{ content }
</DataListDisplay>
);
};
......
ui/internalTxs/InternalTxsListItem.tsx
View file @ ba2a3e2e
......@@ -6,9 +6,9 @@ import type { InternalTransaction } from 'types/api/internalTransaction';
import config from 'configs/app';
import { currencyUnits } from 'lib/units';
import { Badge } from 'toolkit/chakra/badge';
import { Skeleton } from 'toolkit/chakra/skeleton';
import AddressFromTo from 'ui/shared/address/AddressFromTo';
import Skeleton from 'ui/shared/chakra/Skeleton';
import Tag from 'ui/shared/chakra/Tag';
import BlockEntity from 'ui/shared/entities/block/BlockEntity';
import TxEntity from 'ui/shared/entities/tx/TxEntity';
import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
......@@ -38,7 +38,7 @@ const InternalTxsListItem = ({
return (
<ListItemMobile rowGap={ 3 }>
<Flex columnGap={ 2 }>
{ typeTitle && <Tag colorScheme="cyan" isLoading={ isLoading }>{ typeTitle }</Tag> }
{ typeTitle && <Badge colorPalette="cyan" loading={ isLoading }>{ typeTitle }</Badge> }
<TxStatus status={ success ? 'ok' : 'error' } errorText={ error } isLoading={ isLoading }/>
</Flex>
<Flex justifyContent="space-between" width="100%">
......@@ -56,14 +56,13 @@ const InternalTxsListItem = ({
fontSize="sm"
/>
</Flex>
<HStack spacing={ 1 }>
<Skeleton isLoaded={ !isLoading } fontSize="sm" fontWeight={ 500 }>Block</Skeleton>
<HStack gap={ 1 }>
<Skeleton loading={ isLoading } fontSize="sm" fontWeight={ 500 }>Block</Skeleton>
<BlockEntity
isLoading={ isLoading }
number={ blockNumber }
noIcon
fontSize="sm"
lineHeight={ 5 }
textStyle="sm"
/>
</HStack>
<AddressFromTo
......@@ -73,9 +72,9 @@ const InternalTxsListItem = ({
isLoading={ isLoading }
w="100%"
/>
<HStack spacing={ 3 }>
<Skeleton isLoaded={ !isLoading } fontSize="sm" fontWeight={ 500 }>Value { currencyUnits.ether }</Skeleton>
<Skeleton isLoaded={ !isLoading } fontSize="sm" color="text_secondary" minW={ 6 }>
<HStack gap={ 3 }>
<Skeleton loading={ isLoading } fontSize="sm" fontWeight={ 500 }>Value { currencyUnits.ether }</Skeleton>
<Skeleton loading={ isLoading } fontSize="sm" color="text_secondary" minW={ 6 }>
<span>{ BigNumber(value).div(BigNumber(10 ** config.chain.currency.decimals)).toFormat() }</span>
</Skeleton>
</HStack>
......
ui/internalTxs/InternalTxsTable.tsx
View file @ ba2a3e2e
import { Table, Tbody, Tr, Th } from '@chakra-ui/react';
import React from 'react';
import type { InternalTransaction } from 'types/api/internalTransaction';
import { AddressHighlightProvider } from 'lib/contexts/addressHighlight';
import { currencyUnits } from 'lib/units';
import { default as Thead } from 'ui/shared/TheadSticky';
import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
import InternalTxsTableItem from './InternalTxsTableItem';
......@@ -18,19 +17,19 @@ interface Props {
const InternalTxsTable = ({ data, currentAddress, isLoading }: Props) => {
return (
<AddressHighlightProvider>
<Table>
<Thead top={ 68 }>
<Tr>
<Th width="15%">Parent txn hash</Th>
<Th width="15%">Type</Th>
<Th width="10%">Block</Th>
<Th width="40%">From/To</Th>
<Th width="20%" isNumeric>
<TableRoot>
<TableHeaderSticky top={ 68 }>
<TableRow>
<TableColumnHeader width="15%">Parent txn hash</TableColumnHeader>
<TableColumnHeader width="15%">Type</TableColumnHeader>
<TableColumnHeader width="10%">Block</TableColumnHeader>
<TableColumnHeader width="40%">From/To</TableColumnHeader>
<TableColumnHeader width="20%" isNumeric>
Value { currencyUnits.ether }
</Th>
</Tr>
</Thead>
<Tbody>
</TableColumnHeader>
</TableRow>
</TableHeaderSticky>
<TableBody>
{ data.map((item, index) => (
<InternalTxsTableItem
key={ item.transaction_hash + '_' + index }
......@@ -39,8 +38,8 @@ const InternalTxsTable = ({ data, currentAddress, isLoading }: Props) => {
isLoading={ isLoading }
/>
)) }
</Tbody>
</Table>
</TableBody>
</TableRoot>
</AddressHighlightProvider>
);
......
ui/internalTxs/InternalTxsTableItem.tsx
View file @ ba2a3e2e
import { Tr, Td, Box, Flex } from '@chakra-ui/react';
import { Flex } from '@chakra-ui/react';
import BigNumber from 'bignumber.js';
import React from 'react';
import type { InternalTransaction } from 'types/api/internalTransaction';
import config from 'configs/app';
import { Badge } from 'toolkit/chakra/badge';
import { Skeleton } from 'toolkit/chakra/skeleton';
import { TableCell, TableRow } from 'toolkit/chakra/table';
import AddressFromTo from 'ui/shared/address/AddressFromTo';
import Skeleton from 'ui/shared/chakra/Skeleton';
import Tag from 'ui/shared/chakra/Tag';
import BlockEntity from 'ui/shared/entities/block/BlockEntity';
import TxEntity from 'ui/shared/entities/tx/TxEntity';
import TxStatus from 'ui/shared/statusTag/TxStatus';
......@@ -34,8 +35,8 @@ const InternalTxsTableItem = ({
const toData = to ? to : createdContract;
return (
<Tr alignItems="top">
<Td verticalAlign="middle">
<TableRow alignItems="top">
<TableCell verticalAlign="middle">
<Flex rowGap={ 3 } flexDir="column">
<TxEntity
hash={ txnHash }
......@@ -53,41 +54,38 @@ const InternalTxsTableItem = ({
fontSize="sm"
/>
</Flex>
</Td>
<Td verticalAlign="middle">
<Flex rowGap={ 2 } flexWrap="wrap">
</TableCell>
<TableCell verticalAlign="middle">
<Flex rowGap={ 3 } flexDir="column">
{ typeTitle && (
<Box w="126px" display="inline-block">
<Tag colorScheme="cyan" mr={ 5 } isLoading={ isLoading }>{ typeTitle }</Tag>
</Box>
<Badge colorPalette="cyan" loading={ isLoading }>{ typeTitle }</Badge>
) }
<TxStatus status={ success ? 'ok' : 'error' } errorText={ error } isLoading={ isLoading }/>
</Flex>
</Td>
<Td verticalAlign="middle">
</TableCell>
<TableCell verticalAlign="middle">
<BlockEntity
isLoading={ isLoading }
number={ blockNumber }
noIcon
fontSize="sm"
lineHeight={ 5 }
textStyle="sm"
fontWeight={ 500 }
/>
</Td>
<Td verticalAlign="middle">
</TableCell>
<TableCell verticalAlign="middle">
<AddressFromTo
from={ from }
to={ toData }
current={ currentAddress }
isLoading={ isLoading }
/>
</Td>
<Td isNumeric verticalAlign="middle">
<Skeleton isLoaded={ !isLoading } display="inline-block" minW={ 6 }>
</TableCell>
<TableCell isNumeric verticalAlign="middle">
<Skeleton loading={ isLoading } display="inline-block" minW={ 6 }>
{ BigNumber(value).div(BigNumber(10 ** config.chain.currency.decimals)).toFormat() }
</Skeleton>
</Td>
</Tr>
</TableCell>
</TableRow>
);
};
......
ui/pages/Address.tsx
View file @ ba2a3e2e
......@@ -201,12 +201,12 @@ const AddressPageContent = () => {
component: <AddressTokens shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
subTabs: TOKEN_TABS,
},
// {
// id: 'internal_txns',
// title: 'Internal txns',
// count: addressTabsCountersQuery.data?.internal_transactions_count,
// component: <AddressInternalTxs scrollRef={ tabsScrollRef } shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
// },
{
id: 'internal_txns',
title: 'Internal txns',
count: addressTabsCountersQuery.data?.internal_transactions_count,
component: <AddressInternalTxs scrollRef={ tabsScrollRef } shouldRender={ !isTabsLoading } isQueryEnabled={ areQueriesEnabled }/>,
},
addressTabsCountersQuery.data?.celo_election_rewards_count ? {
id: 'epoch_rewards',
title: 'Epoch rewards',
......
ui/pages/InternalTxs.tsx
View file @ ba2a3e2e
import { Hide, Show } from '@chakra-ui/react';
import { Box } from '@chakra-ui/react';
import React from 'react';
import useIsMobile from 'lib/hooks/useIsMobile';
......@@ -42,12 +42,12 @@ const InternalTxs = () => {
const content = data?.items ? (
<>
<Show below="lg" ssr={ false }>
<Box hideFrom="lg">
<InternalTxsList data={ data.items } isLoading={ isPlaceholderData }/>
</Show>
<Hide below="lg" ssr={ false }>
</Box>
<Box hideBelow="lg">
<InternalTxsTable data={ data.items } isLoading={ isPlaceholderData }/>
</Hide>
</Box>
</>
) : null;
......@@ -59,11 +59,12 @@ const InternalTxs = () => {
/>
<DataListDisplay
isError={ isError }
items={ data?.items }
itemsNum={ data?.items.length }
emptyText="There are no internal transactions."
content={ content }
actionBar={ actionBar }
/>
>
{ content }
</DataListDisplay>
</>
);
};
......
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