Skip to content

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

Merge branch 'tom2drum/issue-1446' of github.com:blockscout/frontend into tom2drum/issue-1446

parents 745a9ef2 63b5efdc
Hide whitespace changes
Inline Side-by-side
Showing with 414 additions and 451 deletions
ui/address/AddressTxsFilter.tsx
View file @ 87f1a568
......@@ -38,8 +38,8 @@ const AddressTxsFilter = ({ onFilterChange, defaultFilter, isActive, isLoading }
<MenuList zIndex={ 2 }>
<MenuOptionGroup defaultValue={ defaultFilter || 'all' } title="Address" type="radio" onChange={ onFilterChange }>
<MenuItemOption value="all">All</MenuItemOption>
<MenuItemOption value="from">From</MenuItemOption>
<MenuItemOption value="to">To</MenuItemOption>
<MenuItemOption value="from">Outgoing transactions</MenuItemOption>
<MenuItemOption value="to">Incoming transactions</MenuItemOption>
</MenuOptionGroup>
</MenuList>
</Menu>
......
ui/address/internals/AddressIntTxsListItem.tsx
View file @ 87f1a568
import { Flex, Box, HStack, Skeleton } from '@chakra-ui/react';
import { Flex, HStack, Skeleton } from '@chakra-ui/react';
import BigNumber from 'bignumber.js';
import React from 'react';
......@@ -6,12 +6,10 @@ import type { InternalTransaction } from 'types/api/internalTransaction';
import config from 'configs/app';
import dayjs from 'lib/date/dayjs';
import AddressFromTo from 'ui/shared/address/AddressFromTo';
import Tag from 'ui/shared/chakra/Tag';
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import BlockEntity from 'ui/shared/entities/block/BlockEntity';
import TxEntity from 'ui/shared/entities/tx/TxEntity';
import IconSvg from 'ui/shared/IconSvg';
import InOutTag from 'ui/shared/InOutTag';
import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
import TxStatus from 'ui/shared/statusTag/TxStatus';
import { TX_INTERNALS_ITEMS } from 'ui/tx/internals/utils';
......@@ -35,9 +33,6 @@ const TxInternalsListItem = ({
const typeTitle = TX_INTERNALS_ITEMS.find(({ id }) => id === type)?.title;
const toData = to ? to : createdContract;
const isOut = Boolean(currentAddress && currentAddress === from.hash);
const isIn = Boolean(currentAddress && currentAddress === toData?.hash);
return (
<ListItemMobile rowGap={ 3 }>
<Flex columnGap={ 2 }>
......@@ -65,28 +60,13 @@ const TxInternalsListItem = ({
lineHeight={ 5 }
/>
</HStack>
<Box w="100%" display="flex" columnGap={ 3 }>
<AddressEntity
address={ from }
isLoading={ isLoading }
noLink={ isOut }
noCopy={ isOut }
width="calc((100% - 48px) / 2)"
/>
{ (isIn || isOut) ?
<InOutTag isIn={ isIn } isOut={ isOut } isLoading={ isLoading }/> :
<IconSvg name="arrows/east" boxSize={ 6 } color="gray.500" isLoading={ isLoading }/>
}
{ toData && (
<AddressEntity
address={ toData }
isLoading={ isLoading }
noLink={ isIn }
noCopy={ isIn }
width="calc((100% - 48px) / 2)"
/>
) }
</Box>
<AddressFromTo
from={ from }
to={ toData }
current={ currentAddress }
isLoading={ isLoading }
w="100%"
/>
<HStack spacing={ 3 }>
<Skeleton isLoaded={ !isLoading } fontSize="sm" fontWeight={ 500 }>Value { config.chain.currency.symbol }</Skeleton>
<Skeleton isLoaded={ !isLoading } fontSize="sm" color="text_secondary" minW={ 6 }>
......
ui/address/internals/AddressIntTxsTable.tsx
View file @ 87f1a568
......@@ -24,11 +24,9 @@ const AddressIntTxsTable = ({ data, currentAddress, isLoading }: Props) => {
<Th width="15%">Parent txn hash</Th>
<Th width="15%">Type</Th>
<Th width="10%">Block</Th>
<Th width="20%">From</Th>
<Th width="48px" px={ 0 }/>
<Th width="20%">To</Th>
<Th width="40%">From/To</Th>
<Th width="20%" isNumeric>
Value { config.chain.currency.symbol }
Value { config.chain.currency.symbol }
</Th>
</Tr>
</Thead>
......
ui/address/internals/AddressIntTxsTableItem.tsx
View file @ 87f1a568
......@@ -6,12 +6,10 @@ import type { InternalTransaction } from 'types/api/internalTransaction';
import config from 'configs/app';
import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
import AddressFromTo from 'ui/shared/address/AddressFromTo';
import Tag from 'ui/shared/chakra/Tag';
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import BlockEntity from 'ui/shared/entities/block/BlockEntity';
import TxEntity from 'ui/shared/entities/tx/TxEntity';
import IconSvg from 'ui/shared/IconSvg';
import InOutTag from 'ui/shared/InOutTag';
import TxStatus from 'ui/shared/statusTag/TxStatus';
import { TX_INTERNALS_ITEMS } from 'ui/tx/internals/utils';
......@@ -34,9 +32,6 @@ const AddressIntTxsTableItem = ({
const typeTitle = TX_INTERNALS_ITEMS.find(({ id }) => id === type)?.title;
const toData = to ? to : createdContract;
const isOut = Boolean(currentAddress && currentAddress === from.hash);
const isIn = Boolean(currentAddress && currentAddress === toData?.hash);
const timeAgo = useTimeAgoIncrement(timestamp, true);
return (
......@@ -77,33 +72,13 @@ const AddressIntTxsTableItem = ({
/>
</Td>
<Td verticalAlign="middle">
<AddressEntity
address={ from }
<AddressFromTo
from={ from }
to={ toData }
current={ currentAddress }
isLoading={ isLoading }
noLink={ isOut }
noCopy={ isOut }
w="min-content"
maxW="100%"
/>
</Td>
<Td px={ 0 } verticalAlign="middle">
{ (isIn || isOut) ?
<InOutTag isIn={ isIn } isOut={ isOut } isLoading={ isLoading } w="100%"/> :
<IconSvg name="arrows/east" boxSize={ 6 } color="gray.500" isLoading={ isLoading }/>
}
</Td>
<Td verticalAlign="middle">
{ toData && (
<AddressEntity
address={ toData }
isLoading={ isLoading }
noLink={ isIn }
noCopy={ isIn }
w="min-content"
maxW="100%"
/>
) }
</Td>
<Td isNumeric verticalAlign="middle">
<Skeleton isLoaded={ !isLoading } display="inline-block" minW={ 6 }>
{ BigNumber(value).div(BigNumber(10 ** config.chain.currency.decimals)).toFormat() }
......
ui/home/LatestTxsItem.tsx
View file @ 87f1a568
......@@ -13,9 +13,8 @@ import type { Transaction } from 'types/api/transaction';
import config from 'configs/app';
import getValueWithUnit from 'lib/getValueWithUnit';
import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import AddressFromTo from 'ui/shared/address/AddressFromTo';
import TxEntity from 'ui/shared/entities/tx/TxEntity';
import IconSvg from 'ui/shared/IconSvg';
import TxStatus from 'ui/shared/statusTag/TxStatus';
import TxFeeStability from 'ui/shared/tx/TxFeeStability';
import TxWatchListTags from 'ui/shared/tx/TxWatchListTags';
......@@ -35,7 +34,7 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
return (
<Grid
gridTemplateColumns={{
lg: columnNum === 2 ? '3fr minmax(auto, 160px)' : '3fr minmax(auto, 160px) 150px',
lg: columnNum === 2 ? '3fr minmax(auto, 180px)' : '3fr minmax(auto, 180px) 150px',
xl: columnNum === 2 ? '3fr minmax(auto, 250px)' : '3fr minmax(auto, 275px) 150px',
}}
gridGap={ 8 }
......@@ -80,36 +79,12 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
</Flex>
</Box>
</Flex>
<Flex alignItems="center" alignSelf="flex-start">
<IconSvg
name="arrows/east"
boxSize={ 6 }
color="gray.500"
transform="rotate(90deg)"
isLoading={ isLoading }
flexShrink={ 0 }
/>
<Flex ml={ 1 } maxW="calc(100% - 24px)" flexDir="column" rowGap="1px">
<AddressEntity
isLoading={ isLoading }
address={ tx.from }
fontSize="sm"
lineHeight={ 5 }
my="5px"
fontWeight="500"
/>
{ dataTo && (
<AddressEntity
isLoading={ isLoading }
address={ dataTo }
fontSize="sm"
lineHeight={ 5 }
my="5px"
fontWeight="500"
/>
) }
</Flex>
</Flex>
<AddressFromTo
from={ tx.from }
to={ dataTo }
isLoading={ isLoading }
mode="compact"
/>
<Flex flexDir="column">
{ !config.UI.views.tx.hiddenFields?.value && (
<Skeleton isLoaded={ !isLoading } my="3px">
......
ui/home/LatestTxsItemMobile.tsx
View file @ 87f1a568
......@@ -12,9 +12,8 @@ import type { Transaction } from 'types/api/transaction';
import config from 'configs/app';
import getValueWithUnit from 'lib/getValueWithUnit';
import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import AddressFromTo from 'ui/shared/address/AddressFromTo';
import TxEntity from 'ui/shared/entities/tx/TxEntity';
import IconSvg from 'ui/shared/IconSvg';
import TxStatus from 'ui/shared/statusTag/TxStatus';
import TxFeeStability from 'ui/shared/tx/TxFeeStability';
import TxWatchListTags from 'ui/shared/tx/TxWatchListTags';
......@@ -66,31 +65,14 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => {
</Skeleton>
) }
</Flex>
<Flex alignItems="center" mb={ 3 }>
<AddressEntity
isLoading={ isLoading }
address={ tx.from }
truncation="constant"
fontSize="sm"
fontWeight="500"
mr={ 2 }
/>
<IconSvg
name="arrows/east"
boxSize={ 6 }
color="gray.500"
isLoading={ isLoading }
/>
{ dataTo && (
<AddressEntity
isLoading={ isLoading }
address={ dataTo }
truncation="constant"
fontSize="sm"
fontWeight="500"
/>
) }
</Flex>
<AddressFromTo
from={ tx.from }
to={ dataTo }
isLoading={ isLoading }
fontSize="sm"
fontWeight="500"
mb={ 3 }
/>
{ !config.UI.views.tx.hiddenFields?.value && (
<Skeleton isLoaded={ !isLoading } mb={ 2 } fontSize="sm" w="fit-content">
<Text as="span">Value { config.chain.currency.symbol } </Text>
......
ui/shared/CopyToClipboard.tsx
View file @ 87f1a568
import { IconButton, Tooltip, useClipboard, chakra, useDisclosure, Skeleton } from '@chakra-ui/react';
import { IconButton, Tooltip, useClipboard, chakra, useDisclosure, Skeleton, useColorModeValue } from '@chakra-ui/react';
import React, { useEffect, useState } from 'react';
import IconSvg from 'ui/shared/IconSvg';
......@@ -14,6 +14,7 @@ const CopyToClipboard = ({ text, className, isLoading }: Props) => {
const [ copied, setCopied ] = useState(false);
// have to implement controlled tooltip because of the issue - https://github.com/chakra-ui/chakra-ui/issues/7107
const { isOpen, onOpen, onClose } = useDisclosure();
const iconColor = useColorModeValue('gray.400', 'gray.500');
useEffect(() => {
if (hasCopied) {
......@@ -34,7 +35,7 @@ const CopyToClipboard = ({ text, className, isLoading }: Props) => {
icon={ <IconSvg name="copy" boxSize={ 5 }/> }
w="20px"
h="20px"
color="gray.400"
color={ iconColor }
variant="simple"
display="inline-block"
flexShrink={ 0 }
......
ui/shared/IconSvg.tsx
View file @ 87f1a568
......@@ -12,9 +12,9 @@ interface Props extends HTMLChakraProps<'div'> {
isLoading?: boolean;
}
const IconSvg = ({ name, isLoading, ...props }: Props) => {
const IconSvg = ({ name, isLoading, ...props }: Props, ref: React.ForwardedRef<HTMLDivElement>) => {
return (
<Skeleton isLoaded={ !isLoading } display="inline-block" { ...props }>
<Skeleton isLoaded={ !isLoading } display="inline-block" { ...props } ref={ ref }>
<chakra.svg w="100%" h="100%">
<use href={ `${ href }#${ name }` }/>
</chakra.svg>
......@@ -22,4 +22,4 @@ const IconSvg = ({ name, isLoading, ...props }: Props) => {
);
};
export default IconSvg;
export default React.forwardRef(IconSvg);
ui/shared/InOutTag.tsx deleted 100644 → 0
View file @ 745a9ef2
import { chakra } from '@chakra-ui/react';
import React from 'react';
import Tag from 'ui/shared/chakra/Tag';
interface Props {
isIn: boolean;
isOut: boolean;
className?: string;
isLoading?: boolean;
}
const InOutTag = ({ isIn, isOut, className, isLoading }: Props) => {
if (!isIn && !isOut) {
return null;
}
const colorScheme = isOut ? 'orange' : 'green';
return (
<Tag
className={ className }
colorScheme={ colorScheme }
display="flex"
justifyContent="center"
isLoading={ isLoading }
>
{ isOut ? 'OUT' : 'IN' }
</Tag>
);
};
export default React.memo(chakra(InOutTag));
ui/shared/TokenTransfer/TokenTransferFilter.tsx
View file @ 87f1a568
......@@ -35,7 +35,7 @@ const TokenTransferFilter = ({
const isInitialLoading = useIsInitialLoading(isLoading);
return (
<PopoverFilter appliedFiltersNum={ appliedFiltersNum } contentProps={{ w: '200px' }} isLoading={ isInitialLoading }>
<PopoverFilter appliedFiltersNum={ appliedFiltersNum } contentProps={{ w: '220px' }} isLoading={ isInitialLoading }>
{ withAddressFilter && (
<>
<Text variant="secondary" fontWeight={ 600 }>Address</Text>
......@@ -49,8 +49,8 @@ const TokenTransferFilter = ({
>
<Stack spacing={ 4 }>
<Radio value="all"><Text fontSize="md">All</Text></Radio>
<Radio value="from"><Text fontSize="md">From</Text></Radio>
<Radio value="to"><Text fontSize="md">To</Text></Radio>
<Radio value="from"><Text fontSize="md">Outgoing transfers</Text></Radio>
<Radio value="to"><Text fontSize="md">Incoming transfers</Text></Radio>
</Stack>
</RadioGroup>
</>
......
ui/shared/TokenTransfer/TokenTransferListItem.tsx
View file @ 87f1a568
......@@ -5,13 +5,11 @@ import type { TokenTransfer } from 'types/api/tokenTransfer';
import getCurrencyValue from 'lib/getCurrencyValue';
import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
import AddressFromTo from 'ui/shared/address/AddressFromTo';
import Tag from 'ui/shared/chakra/Tag';
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import NftEntity from 'ui/shared/entities/nft/NftEntity';
import TokenEntity from 'ui/shared/entities/token/TokenEntity';
import TxEntity from 'ui/shared/entities/tx/TxEntity';
import IconSvg from 'ui/shared/IconSvg';
import InOutTag from 'ui/shared/InOutTag';
import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
import { getTokenTransferTypeText } from 'ui/shared/TokenTransfer/helpers';
import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo';
......@@ -45,7 +43,6 @@ const TokenTransferListItem = ({
decimals: total.decimals || '0',
}) : { usd: null, valueStr: null };
const addressWidth = `calc((100% - ${ baseAddress ? '50px - 24px' : '24px - 24px' }) / 2)`;
return (
<ListItemMobile rowGap={ 3 } isAnimated>
<Flex w="100%" justifyContent="space-between">
......@@ -80,36 +77,13 @@ const TokenTransferListItem = ({
) }
</Flex>
) }
<Flex w="100%" columnGap={ 3 }>
<AddressEntity
address={ from }
isLoading={ isLoading }
noLink={ baseAddress === from.hash }
noCopy={ baseAddress === from.hash }
flexShrink={ 0 }
width={ addressWidth }
/>
{ baseAddress ? (
<InOutTag
isIn={ baseAddress === to.hash }
isOut={ baseAddress === from.hash }
w="50px"
textAlign="center"
isLoading={ isLoading }
flexShrink={ 0 }
/>
) :
<IconSvg name="arrows/east" boxSize={ 6 } color="gray.500" isLoading={ isLoading } flexShrink={ 0 }/>
}
<AddressEntity
address={ to }
isLoading={ isLoading }
noLink={ baseAddress === to.hash }
noCopy={ baseAddress === to.hash }
flexShrink={ 0 }
width={ addressWidth }
/>
</Flex>
<AddressFromTo
from={ from }
to={ to }
current={ baseAddress }
isLoading={ isLoading }
w="100%"
/>
{ valueStr && (
<Flex columnGap={ 2 } w="100%">
<Skeleton isLoaded={ !isLoading } fontWeight={ 500 } flexShrink={ 0 }>Value</Skeleton>
......
ui/shared/TokenTransfer/TokenTransferTable.tsx
View file @ 87f1a568
......@@ -40,11 +40,9 @@ const TokenTransferTable = ({
{ showTxInfo && <Th width="44px"></Th> }
<Th width="185px">Token</Th>
<Th width="160px">Token ID</Th>
{ showTxInfo && <Th width="25%">Txn hash</Th> }
<Th width="25%">From</Th>
{ baseAddress && <Th width="50px" px={ 0 }/> }
<Th width="25%">To</Th>
<Th width="25%" isNumeric>Value</Th>
{ showTxInfo && <Th width="20%">Txn hash</Th> }
<Th width="50%">From/To</Th>
<Th width="30%" isNumeric>Value</Th>
</Tr>
</Thead>
<Tbody>
......
ui/shared/TokenTransfer/TokenTransferTableItem.tsx
View file @ 87f1a568
......@@ -5,12 +5,11 @@ import type { TokenTransfer } from 'types/api/tokenTransfer';
import getCurrencyValue from 'lib/getCurrencyValue';
import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
import AddressFromTo from 'ui/shared/address/AddressFromTo';
import Tag from 'ui/shared/chakra/Tag';
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import NftEntity from 'ui/shared/entities/nft/NftEntity';
import TokenEntity from 'ui/shared/entities/token/TokenEntity';
import TxEntity from 'ui/shared/entities/tx/TxEntity';
import InOutTag from 'ui/shared/InOutTag';
import { getTokenTransferTypeText } from 'ui/shared/TokenTransfer/helpers';
import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo';
......@@ -85,36 +84,13 @@ const TokenTransferTableItem = ({
</Td>
) }
<Td>
<AddressEntity
address={ from }
<AddressFromTo
from={ from }
to={ to }
current={ baseAddress }
isLoading={ isLoading }
my="5px"
noLink={ baseAddress === from.hash }
noCopy={ baseAddress === from.hash }
flexGrow={ 1 }
/>
</Td>
{ baseAddress && (
<Td px={ 0 }>
<Box mt="3px">
<InOutTag
isIn={ baseAddress === to.hash }
isOut={ baseAddress === from.hash }
w="50px"
textAlign="center"
isLoading={ isLoading }
/>
</Box>
</Td>
) }
<Td>
<AddressEntity
address={ to }
isLoading={ isLoading }
my="5px"
noLink={ baseAddress === to.hash }
noCopy={ baseAddress === to.hash }
flexGrow={ 1 }
mt={ 1 }
mode={{ lg: 'compact', xl: 'long' }}
/>
</Td>
<Td isNumeric verticalAlign="top">
......
ui/shared/address/AddressFromTo.pw.tsx 0 → 100644
View file @ 87f1a568
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import * as addressMock from 'mocks/address/address';
import TestApp from 'playwright/TestApp';
import * as configs from 'playwright/utils/configs';
import AddressFromTo from './AddressFromTo';
test.use({ viewport: configs.viewport.mobile });
test('outgoing txn', async({ mount }) => {
const component = await mount(
<TestApp>
<AddressFromTo
from={ addressMock.withoutName }
to={{ ...addressMock.withName, hash: '0xa8FCe579a11E551635b9c9CB915BEcd873C51254' }}
current={ addressMock.withoutName.hash }
/>
</TestApp>,
);
await expect(component).toHaveScreenshot();
});
test('incoming txn', async({ mount }) => {
const component = await mount(
<TestApp>
<AddressFromTo
from={{ ...addressMock.withName, hash: '0xa8FCe579a11E551635b9c9CB915BEcd873C51254' }}
to={ addressMock.withoutName }
current={ addressMock.withoutName.hash }
/>
</TestApp>,
);
await expect(component).toHaveScreenshot();
});
test('compact mode', async({ mount }) => {
const component = await mount(
<TestApp>
<AddressFromTo
from={ addressMock.withoutName }
to={{ ...addressMock.withName, hash: '0xa8FCe579a11E551635b9c9CB915BEcd873C51254' }}
mode="compact"
/>
</TestApp>,
);
await expect(component).toHaveScreenshot();
});
test('loading state', async({ mount }) => {
const component = await mount(
<TestApp>
<AddressFromTo
from={ addressMock.withoutName }
to={{ ...addressMock.withName, hash: '0xa8FCe579a11E551635b9c9CB915BEcd873C51254' }}
isLoading
/>
</TestApp>,
);
await expect(component).toHaveScreenshot();
});
ui/shared/address/AddressFromTo.tsx 0 → 100644
View file @ 87f1a568
import type { ThemeTypings } from '@chakra-ui/react';
import { Flex, chakra, useBreakpointValue } from '@chakra-ui/react';
import React from 'react';
import type { AddressParam } from 'types/api/addressParams';
import type { EntityProps } from 'ui/shared/entities/address/AddressEntity';
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import AddressEntityWithTokenFilter from 'ui/shared/entities/address/AddressEntityWithTokenFilter';
import AddressFromToIcon from './AddressFromToIcon';
import { getTxCourseType } from './utils';
type Mode = 'compact' | 'long';
interface Props {
from: AddressParam;
to: AddressParam | null;
current?: string;
mode?: Mode | Partial<Record<ThemeTypings['breakpoints'], Mode>>;
className?: string;
isLoading?: boolean;
tokenHash?: string;
truncation?: EntityProps['truncation'];
noIcon?: boolean;
}
const AddressFromTo = ({ from, to, current, mode: modeProp, className, isLoading, tokenHash = '', truncation, noIcon }: Props) => {
const mode = useBreakpointValue(
{
base: (typeof modeProp === 'object' ? modeProp.base : modeProp),
lg: (typeof modeProp === 'object' ? modeProp.lg : modeProp),
xl: (typeof modeProp === 'object' ? modeProp.xl : modeProp),
},
) ?? 'long';
const Entity = tokenHash ? AddressEntityWithTokenFilter : AddressEntity;
if (mode === 'compact') {
return (
<Flex className={ className } flexDir="column" rowGap={ 3 }>
<Flex alignItems="center" columnGap={ 2 }>
<AddressFromToIcon
isLoading={ isLoading }
type={ getTxCourseType(from.hash, to?.hash, current) }
transform="rotate(90deg)"
/>
<Entity
address={ from }
isLoading={ isLoading }
noLink={ current === from.hash }
noCopy={ current === from.hash }
noIcon={ noIcon }
tokenHash={ tokenHash }
truncation={ truncation }
maxW={ truncation === 'constant' ? undefined : 'calc(100% - 28px)' }
w="min-content"
/>
</Flex>
{ to ? (
<Entity
address={ to }
isLoading={ isLoading }
noLink={ current === to.hash }
noCopy={ current === to.hash }
noIcon={ noIcon }
tokenHash={ tokenHash }
truncation={ truncation }
maxW={ truncation === 'constant' ? undefined : 'calc(100% - 28px)' }
w="min-content"
ml="28px"
/>
) : <span>-</span> }
</Flex>
);
}
const isOutgoing = current === from.hash;
const iconSizeWithMargins = (5 + (isOutgoing ? 4 : 2) + 3) * 4;
return (
<Flex className={ className } alignItems="center">
<Entity
address={ from }
isLoading={ isLoading }
noLink={ isOutgoing }
noCopy={ isOutgoing }
noIcon={ noIcon }
tokenHash={ tokenHash }
truncation={ truncation }
maxW={ truncation === 'constant' ? undefined : `calc(50% - ${ iconSizeWithMargins / 2 }px)` }
mr={ isOutgoing ? 4 : 2 }
/>
<AddressFromToIcon
isLoading={ isLoading }
type={ getTxCourseType(from.hash, to?.hash, current) }
/>
{ to ? (
<Entity
address={ to }
isLoading={ isLoading }
noLink={ current === to.hash }
noCopy={ current === to.hash }
noIcon={ noIcon }
tokenHash={ tokenHash }
truncation={ truncation }
maxW={ truncation === 'constant' ? undefined : `calc(50% - ${ iconSizeWithMargins / 2 }px)` }
ml={ 3 }
/>
) : <span>-</span> }
</Flex>
);
};
export default chakra(AddressFromTo);
ui/shared/address/AddressFromToIcon.pw.tsx 0 → 100644
View file @ 87f1a568
import { Box } from '@chakra-ui/react';
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react';
import TestApp from 'playwright/TestApp';
import AddressFromToIcon from './AddressFromToIcon';
test.use({ viewport: { width: 36, height: 36 } });
[ 'in', 'out', 'self', 'unspecified' ].forEach((type) => {
test(`${ type } txn type +@dark-mode`, async({ mount }) => {
const component = await mount(
<TestApp>
<Box p={ 2 }>
<AddressFromToIcon type={ type }/>
</Box>
</TestApp>,
);
await expect(component).toHaveScreenshot();
});
});
ui/shared/address/AddressFromToIcon.tsx 0 → 100644
View file @ 87f1a568
import { Tooltip, chakra, useColorModeValue } from '@chakra-ui/react';
import React from 'react';
import IconSvg from 'ui/shared/IconSvg';
import type { TxCourseType } from './utils';
interface Props {
isLoading?: boolean;
type: TxCourseType;
className?: string;
}
const AddressFromToIcon = ({ isLoading, type, className }: Props) => {
const styles = {
'in': {
color: useColorModeValue('green.500', 'green.200'),
bgColor: useColorModeValue('green.50', 'green.800'),
},
out: {
color: useColorModeValue('yellow.600', 'yellow.500'),
bgColor: useColorModeValue('orange.50', 'yellow.900'),
},
self: {
color: useColorModeValue('blackAlpha.400', 'whiteAlpha.400'),
bgColor: useColorModeValue('blackAlpha.50', 'whiteAlpha.50'),
},
unspecified: {
color: useColorModeValue('gray.500', 'gray.300'),
bgColor: 'transparent',
},
};
const labels = {
'in': 'Incoming txn',
out: 'Outgoing txn',
self: 'Txn to the same address',
};
const icon = (
<IconSvg
name="arrows/east"
{ ...(styles[type]) }
className={ className }
isLoading={ isLoading }
boxSize={ 5 }
flexShrink={ 0 }
borderRadius="sm"
/>
);
if (type === 'unspecified') {
return icon;
}
return (
<Tooltip label={ labels[type] }>
{ icon }
</Tooltip>
);
};
export default React.memo(chakra(AddressFromToIcon));
ui/shared/address/utils.ts 0 → 100644
View file @ 87f1a568
export type TxCourseType = 'in' | 'out' | 'self' | 'unspecified';
export function getTxCourseType(from: string, to: string | undefined, current?: string): TxCourseType {
if (current === undefined) {
return 'unspecified';
}
if (to && from === to && from === current) {
return 'self';
}
if (from === current) {
return 'out';
}
if (to && to === current) {
return 'in';
}
return 'unspecified';
}
ui/shared/entities/address/AddressEntity.tsx
View file @ 87f1a568
......@@ -161,10 +161,13 @@ const AddressEntry = (props: EntityProps) => {
_before={ !props.isLoading && context?.highlightedAddress === props.address.hash ? {
content: `" "`,
position: 'absolute',
top: '-7px',
py: 1,
pl: 1,
pr: props.noCopy ? 2 : 0,
top: '-5px',
left: '-5px',
width: `calc(100% + ${ props.noCopy ? 10 : 5 }px)`,
height: 'calc(100% + 12px)',
width: `100%`,
height: '100%',
borderRadius: 'base',
borderColor: highlightedBorderColor,
borderWidth: '1px',
......
ui/token/TokenTransfer/TokenTransferListItem.tsx
View file @ 87f1a568
......@@ -5,11 +5,10 @@ import type { TokenTransfer } from 'types/api/tokenTransfer';
import getCurrencyValue from 'lib/getCurrencyValue';
import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
import AddressFromTo from 'ui/shared/address/AddressFromTo';
import Tag from 'ui/shared/chakra/Tag';
import AddressEntityWithTokenFilter from 'ui/shared/entities/address/AddressEntityWithTokenFilter';
import NftEntity from 'ui/shared/entities/nft/NftEntity';
import TxEntity from 'ui/shared/entities/tx/TxEntity';
import IconSvg from 'ui/shared/IconSvg';
import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
import TruncatedValue from 'ui/shared/TruncatedValue';
......@@ -53,23 +52,14 @@ const TokenTransferListItem = ({
) }
</Flex>
{ method && <Tag isLoading={ isLoading }>{ method }</Tag> }
<Flex w="100%" columnGap={ 3 }>
<AddressEntityWithTokenFilter
address={ from }
isLoading={ isLoading }
tokenHash={ token.address }
width="50%"
fontWeight="500"
/>
<IconSvg name="arrows/east" boxSize={ 6 } color="gray.500" flexShrink={ 0 } isLoading={ isLoading }/>
<AddressEntityWithTokenFilter
address={ to }
isLoading={ isLoading }
tokenHash={ token.address }
width="50%"
fontWeight="500"
/>
</Flex>
<AddressFromTo
from={ from }
to={ to }
isLoading={ isLoading }
tokenHash={ token.address }
w="100%"
fontWeight="500"
/>
{ valueStr && (token.type === 'ERC-20' || token.type === 'ERC-1155') && (
<Grid gap={ 2 } templateColumns={ `1fr auto auto${ usd ? ' auto' : '' }` }>
<Skeleton isLoaded={ !isLoading } flexShrink={ 0 } fontWeight={ 500 }>
......
ui/token/TokenTransfer/TokenTransferTable.tsx
View file @ 87f1a568
......@@ -26,17 +26,15 @@ const TokenTransferTable = ({ data, top, showSocketInfo, socketInfoAlert, socket
return (
<AddressHighlightProvider>
<Table variant="simple" size="sm" minW="950px">
<Table variant="simple" size="sm">
<Thead top={ top }>
<Tr>
<Th width={ tokenType === 'ERC-1155' ? '60%' : '80%' }>Txn hash</Th>
<Th width={ tokenType === 'ERC-1155' ? '50%' : '75%' }>Txn hash</Th>
<Th width="164px">Method</Th>
<Th width="160px">From</Th>
<Th width="36px" px={ 0 }/>
<Th width="218px" >To</Th>
{ (tokenType === 'ERC-721' || tokenType === 'ERC-1155') && <Th width="20%" isNumeric={ tokenType === 'ERC-721' }>Token ID</Th> }
<Th width={{ lg: '200px', xl: '420px' }}>From/To</Th>
{ (tokenType === 'ERC-721' || tokenType === 'ERC-1155') && <Th width="25%" isNumeric={ tokenType === 'ERC-721' }>Token ID</Th> }
{ (tokenType === 'ERC-20' || tokenType === 'ERC-1155') && (
<Th width="20%" isNumeric>
<Th width="25%" isNumeric>
<TruncatedValue value={ `Value ${ token?.symbol || '' }` } w="100%" verticalAlign="middle"/>
</Th>
) }
......
ui/token/TokenTransfer/TokenTransferTableItem.tsx
View file @ 87f1a568
......@@ -5,11 +5,10 @@ import type { TokenTransfer } from 'types/api/tokenTransfer';
import getCurrencyValue from 'lib/getCurrencyValue';
import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
import AddressFromTo from 'ui/shared/address/AddressFromTo';
import Tag from 'ui/shared/chakra/Tag';
import AddressEntityWithTokenFilter from 'ui/shared/entities/address/AddressEntityWithTokenFilter';
import NftEntity from 'ui/shared/entities/nft/NftEntity';
import TxEntity from 'ui/shared/entities/tx/TxEntity';
import IconSvg from 'ui/shared/IconSvg';
type Props = TokenTransfer & { tokenId?: string; isLoading?: boolean }
......@@ -60,26 +59,13 @@ const TokenTransferTableItem = ({
) : null }
</Td>
<Td>
<AddressEntityWithTokenFilter
address={ from }
<AddressFromTo
from={ from }
to={ to }
isLoading={ isLoading }
truncation="constant"
mt="5px"
mode={{ lg: 'compact', xl: 'long' }}
tokenHash={ token.address }
my="5px"
w="min-content"
/>
</Td>
<Td px={ 0 }>
<IconSvg name="arrows/east" boxSize={ 6 } color="gray.500" mt="3px" isLoading={ isLoading }/>
</Td>
<Td>
<AddressEntityWithTokenFilter
address={ to }
isLoading={ isLoading }
truncation="constant"
tokenHash={ token.address }
my="5px"
w="min-content"
/>
</Td>
{ (token.type === 'ERC-721' || token.type === 'ERC-1155') && (
......
ui/tx/details/TxDetailsTokenTransfer.tsx
View file @ 87f1a568
......@@ -4,9 +4,8 @@ import React from 'react';
import type { TokenTransfer as TTokenTransfer, Erc20TotalPayload, Erc721TotalPayload, Erc1155TotalPayload } from 'types/api/tokenTransfer';
import getCurrencyValue from 'lib/getCurrencyValue';
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import AddressFromTo from 'ui/shared/address/AddressFromTo';
import TokenEntity from 'ui/shared/entities/token/TokenEntity';
import IconSvg from 'ui/shared/IconSvg';
import NftTokenTransferSnippet from 'ui/tx/NftTokenTransferSnippet';
interface Props {
......@@ -75,11 +74,13 @@ const TxDetailsTokenTransfer = ({ data }: Props) => {
flexDir="row"
w="100%"
>
<Flex alignItems="center" fontWeight="500">
<AddressEntity address={ data.from } truncation="constant" noIcon maxW="150px"/>
<IconSvg name="arrows/east" boxSize={ 5 } mx={ 2 } color="gray.500"/>
<AddressEntity address={ data.to } truncation="constant" noIcon maxW="150px"/>
</Flex>
<AddressFromTo
from={ data.from }
to={ data.to }
truncation="constant"
noIcon
fontWeight="500"
/>
<Flex flexDir="column" rowGap={ 5 } w="100%" overflow="hidden" fontWeight={ 500 }>
{ content }
</Flex>
......
ui/tx/internals/TxInternalsListItem.tsx
View file @ 87f1a568
import { Flex, Box, HStack, Skeleton } from '@chakra-ui/react';
import { Flex, HStack, Skeleton } 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 AddressFromTo from 'ui/shared/address/AddressFromTo';
import Tag from 'ui/shared/chakra/Tag';
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import IconSvg from 'ui/shared/IconSvg';
import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
import TxStatus from 'ui/shared/statusTag/TxStatus';
import { TX_INTERNALS_ITEMS } from 'ui/tx/internals/utils';
......@@ -24,21 +23,13 @@ const TxInternalsListItem = ({ type, from, to, value, success, error, gas_limit:
{ typeTitle && <Tag colorScheme="cyan" isLoading={ isLoading }>{ typeTitle }</Tag> }
<TxStatus status={ success ? 'ok' : 'error' } errorText={ error } isLoading={ isLoading }/>
</Flex>
<Box w="100%" display="flex" columnGap={ 3 } fontWeight="500">
<AddressEntity
address={ from }
isLoading={ isLoading }
width="calc((100% - 48px) / 2)"
/>
<IconSvg name="arrows/east" boxSize={ 6 } color="gray.500" isLoading={ isLoading }/>
{ toData && (
<AddressEntity
address={ toData }
isLoading={ isLoading }
width="calc((100% - 48px) / 2)"
/>
) }
</Box>
<AddressFromTo
from={ from }
to={ toData }
isLoading={ isLoading }
w="100%"
fontWeight="500"
/>
<HStack spacing={ 3 }>
<Skeleton isLoaded={ !isLoading } fontSize="sm" fontWeight={ 500 }>Value { config.chain.currency.symbol }</Skeleton>
<Skeleton isLoaded={ !isLoading } fontSize="sm" color="text_secondary">
......
ui/tx/internals/TxInternalsTable.tsx
View file @ 87f1a568
......@@ -27,9 +27,7 @@ const TxInternalsTable = ({ data, sort, onSortToggle, top, isLoading }: Props) =
<Thead top={ top }>
<Tr>
<Th width="28%">Type</Th>
<Th width="20%">From</Th>
<Th width="24px" px={ 0 }/>
<Th width="20%">To</Th>
<Th width="40%">From/To</Th>
<Th width="16%" isNumeric>
<Link display="flex" alignItems="center" justifyContent="flex-end" onClick={ onSortToggle('value') } columnGap={ 1 }>
{ sort?.includes('value') && <IconSvg name="arrows/east" boxSize={ 4 } transform={ sortIconTransform }/> }
......
ui/tx/internals/TxInternalsTableItem.tsx
View file @ 87f1a568
......@@ -5,9 +5,8 @@ import React from 'react';
import type { InternalTransaction } from 'types/api/internalTransaction';
import config from 'configs/app';
import AddressFromTo from 'ui/shared/address/AddressFromTo';
import Tag from 'ui/shared/chakra/Tag';
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import IconSvg from 'ui/shared/IconSvg';
import TxStatus from 'ui/shared/statusTag/TxStatus';
import { TX_INTERNALS_ITEMS } from 'ui/tx/internals/utils';
......@@ -32,22 +31,12 @@ const TxInternalTableItem = ({ type, from, to, value, success, error, gas_limit:
</Flex>
</Td>
<Td verticalAlign="middle">
<AddressEntity
address={ from }
<AddressFromTo
from={ from }
to={ toData }
isLoading={ isLoading }
/>
</Td>
<Td px={ 0 } verticalAlign="middle">
<IconSvg name="arrows/east" boxSize={ 6 } color="gray.500" isLoading={ isLoading } display="block"/>
</Td>
<Td verticalAlign="middle">
{ toData && (
<AddressEntity
address={ toData }
isLoading={ isLoading }
/>
) }
</Td>
<Td isNumeric verticalAlign="middle">
<Skeleton isLoaded={ !isLoading } display="inline-block">
{ BigNumber(value).div(BigNumber(10 ** config.chain.currency.decimals)).toFormat() }
......
ui/txs/TxsListItem.tsx
View file @ 87f1a568
......@@ -11,11 +11,9 @@ import config from 'configs/app';
import getValueWithUnit from 'lib/getValueWithUnit';
import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
import { space } from 'lib/html-entities';
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import AddressFromTo from 'ui/shared/address/AddressFromTo';
import BlockEntity from 'ui/shared/entities/block/BlockEntity';
import TxEntity from 'ui/shared/entities/tx/TxEntity';
import IconSvg from 'ui/shared/IconSvg';
import InOutTag from 'ui/shared/InOutTag';
import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
import TxStatus from 'ui/shared/statusTag/TxStatus';
import TxFeeStability from 'ui/shared/tx/TxFeeStability';
......@@ -31,15 +29,9 @@ type Props = {
isLoading?: boolean;
}
const TAG_WIDTH = 48;
const ARROW_WIDTH = 24;
const TxsListItem = ({ tx, isLoading, showBlockInfo, currentAddress, enableTimeIncrement }: Props) => {
const dataTo = tx.to ? tx.to : tx.created_contract;
const isOut = Boolean(currentAddress && currentAddress === tx.from.hash);
const isIn = Boolean(currentAddress && currentAddress === tx.to?.hash);
const timeAgo = useTimeAgoIncrement(tx.timestamp, enableTimeIncrement);
return (
......@@ -89,37 +81,14 @@ const TxsListItem = ({ tx, isLoading, showBlockInfo, currentAddress, enableTimeI
/>
</Flex>
) }
<Flex alignItems="center" height={ 6 } mt={ 6 }>
<AddressEntity
address={ tx.from }
isLoading={ isLoading }
noLink={ isOut }
noCopy={ isOut }
w={ `calc((100% - ${ currentAddress ? TAG_WIDTH + 16 : ARROW_WIDTH + 8 }px)/2)` }
fontWeight="500"
/>
{ (isIn || isOut) ?
<InOutTag isIn={ isIn } isOut={ isOut } width="48px" mx={ 2 } isLoading={ isLoading }/> : (
<IconSvg
name="arrows/east"
boxSize={ 6 }
color="gray.500"
isLoading={ isLoading }
mx={ 2 }
flexShrink={ 0 }
/>
) }
{ dataTo ? (
<AddressEntity
address={ dataTo }
isLoading={ isLoading }
noLink={ isIn }
noCopy={ isIn }
w={ `calc((100% - ${ currentAddress ? TAG_WIDTH + 16 : ARROW_WIDTH + 8 }px)/2)` }
fontWeight="500"
/>
) : '-' }
</Flex>
<AddressFromTo
from={ tx.from }
to={ dataTo }
current={ currentAddress }
isLoading={ isLoading }
mt={ 6 }
fontWeight="500"
/>
{ !config.UI.views.tx.hiddenFields?.value && (
<Flex mt={ 2 } columnGap={ 2 }>
<Skeleton isLoaded={ !isLoading } display="inline-block" whiteSpace="pre">Value</Skeleton>
......
ui/txs/TxsTable.tsx
View file @ 87f1a568
import { Link, Table, Tbody, Tr, Th, Show, Hide } from '@chakra-ui/react';
import { Link, Table, Tbody, Tr, Th } from '@chakra-ui/react';
import { AnimatePresence } from 'framer-motion';
import React from 'react';
......@@ -49,14 +49,7 @@ const TxsTable = ({
<Th width="160px">Type</Th>
<Th width="20%">Method</Th>
{ showBlockInfo && <Th width="18%">Block</Th> }
<Th width={{ xl: '152px', base: '86px' }}>
<Show above="xl" ssr={ false }>From</Show>
<Hide above="xl" ssr={ false }>From / To</Hide>
</Th>
<Th width={{ xl: currentAddress ? '48px' : '36px', base: currentAddress ? '52px' : '28px' }}></Th>
<Th width={{ xl: '152px', base: '86px' }}>
<Show above="xl" ssr={ false }>To</Show>
</Th>
<Th width={{ base: '224px', xl: '360px' }}>From/To</Th>
{ !config.UI.views.tx.hiddenFields?.value && (
<Th width="20%" isNumeric>
<Link onClick={ sort('value') } display="flex" justifyContent="end">
......
ui/txs/TxsTableItem.tsx
View file @ 87f1a568
......@@ -2,11 +2,7 @@ import {
Tr,
Td,
VStack,
Show,
Hide,
Flex,
Skeleton,
Box,
} from '@chakra-ui/react';
import { motion } from 'framer-motion';
import React from 'react';
......@@ -15,13 +11,11 @@ import type { Transaction } from 'types/api/transaction';
import config from 'configs/app';
import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement';
import AddressFromTo from 'ui/shared/address/AddressFromTo';
import Tag from 'ui/shared/chakra/Tag';
import CurrencyValue from 'ui/shared/CurrencyValue';
import AddressEntity from 'ui/shared/entities/address/AddressEntity';
import BlockEntity from 'ui/shared/entities/block/BlockEntity';
import TxEntity from 'ui/shared/entities/tx/TxEntity';
import IconSvg from 'ui/shared/IconSvg';
import InOutTag from 'ui/shared/InOutTag';
import TxStatus from 'ui/shared/statusTag/TxStatus';
import TxFeeStability from 'ui/shared/tx/TxFeeStability';
import TxWatchListTags from 'ui/shared/tx/TxWatchListTags';
......@@ -39,39 +33,8 @@ type Props = {
const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement, isLoading }: Props) => {
const dataTo = tx.to ? tx.to : tx.created_contract;
const isOut = Boolean(currentAddress && currentAddress === tx.from.hash);
const isIn = Boolean(currentAddress && currentAddress === dataTo?.hash);
const timeAgo = useTimeAgoIncrement(tx.timestamp, enableTimeIncrement);
const addressFrom = (
<AddressEntity
address={ tx.from }
isLoading={ isLoading }
noCopy={ isOut }
noLink={ isOut }
truncation="constant"
w="min-content"
maxW="100%"
my="2px"
lineHeight="20px"
/>
);
const addressTo = dataTo ? (
<AddressEntity
address={ dataTo }
isLoading={ isLoading }
truncation="constant"
noCopy={ isIn }
noLink={ isIn }
w="min-content"
maxW="100%"
py="2px"
lineHeight="20px"
/>
) : '-';
return (
<Tr
as={ motion.tr }
......@@ -124,42 +87,16 @@ const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement,
) }
</Td>
) }
<Show above="xl" ssr={ false }>
<Td>
{ addressFrom }
</Td>
<Td px={ 0 }>
{ (isIn || isOut) ?
<InOutTag isIn={ isIn } isOut={ isOut } width="48px" mr={ 2 } isLoading={ isLoading }/> : (
<Box mx="6px">
<IconSvg name="arrows/east" boxSize={ 6 } color="gray.500" isLoading={ isLoading }/>
</Box>
) }
</Td>
<Td>
{ addressTo }
</Td>
</Show>
<Hide above="xl" ssr={ false }>
<Td colSpan={ 3 }>
<Flex alignItems="center">
{ (isIn || isOut) ?
<InOutTag isIn={ isIn } isOut={ isOut } width="48px" isLoading={ isLoading }/> : (
<IconSvg
name="arrows/east"
boxSize={ 6 }
color="gray.500"
transform="rotate(90deg)"
isLoading={ isLoading }
/>
) }
<VStack alignItems="start" ml={ 1 } w="calc(100% - 48px)" gap="11px">
{ addressFrom }
{ addressTo }
</VStack>
</Flex>
</Td>
</Hide>
<Td>
<AddressFromTo
from={ tx.from }
to={ dataTo }
current={ currentAddress }
isLoading={ isLoading }
mt="2px"
mode={{ lg: 'compact', xl: 'long' }}
/>
</Td>
{ !config.UI.views.tx.hiddenFields?.value && (
<Td isNumeric>
<CurrencyValue value={ tx.value } accuracy={ 8 } isLoading={ isLoading }/>
......
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