diff --git a/lib/contexts/addressHighlight.tsx b/lib/contexts/addressHighlight.tsx new file mode 100644 index 0000000000..f4bb79e8ff --- /dev/null +++ b/lib/contexts/addressHighlight.tsx @@ -0,0 +1,60 @@ +import React from 'react'; + +interface AddressHighlightProviderProps { + children: React.ReactNode; +} + +interface TAddressHighlightContext { + highlightedAddress: string | null; + onMouseEnter: (event: React.MouseEvent) => void; + onMouseLeave: (event: React.MouseEvent) => void; +} + +export const AddressHighlightContext = React.createContext(null); + +export function AddressHighlightProvider({ children }: AddressHighlightProviderProps) { + const [ highlightedAddress, setHighlightedAddress ] = React.useState(null); + const timeoutId = React.useRef(null); + + const onMouseEnter = React.useCallback((event: React.MouseEvent) => { + const hash = event.currentTarget.getAttribute('data-hash'); + if (hash) { + timeoutId.current = window.setTimeout(() => { + setHighlightedAddress(hash); + }, 100); + } + }, []); + + const onMouseLeave = React.useCallback(() => { + setHighlightedAddress(null); + typeof timeoutId.current === 'number' && window.clearTimeout(timeoutId.current); + }, []); + + const value = React.useMemo(() => { + return { + highlightedAddress, + onMouseEnter, + onMouseLeave, + }; + }, [ highlightedAddress, onMouseEnter, onMouseLeave ]); + + React.useEffect(() => { + return () => { + typeof timeoutId.current === 'number' && window.clearTimeout(timeoutId.current); + }; + }, []); + + return ( + + { children } + + ); +} + +export function useAddressHighlightContext() { + const context = React.useContext(AddressHighlightContext); + if (context === undefined) { + return null; + } + return context; +} diff --git a/ui/address/AddressTxsFilter.tsx b/ui/address/AddressTxsFilter.tsx index 1b8ead77ff..c566f1d91e 100644 --- a/ui/address/AddressTxsFilter.tsx +++ b/ui/address/AddressTxsFilter.tsx @@ -38,8 +38,8 @@ const AddressTxsFilter = ({ onFilterChange, defaultFilter, isActive, isLoading } All - From - To + Outgoing transactions + Incoming transactions diff --git a/ui/address/__screenshots__/AddressInternalTxs.pw.tsx_default_base-view-mobile-1.png b/ui/address/__screenshots__/AddressInternalTxs.pw.tsx_default_base-view-mobile-1.png index 2d36b1a5a8..b724db94a6 100644 Binary files a/ui/address/__screenshots__/AddressInternalTxs.pw.tsx_default_base-view-mobile-1.png and b/ui/address/__screenshots__/AddressInternalTxs.pw.tsx_default_base-view-mobile-1.png differ diff --git a/ui/address/__screenshots__/AddressInternalTxs.pw.tsx_mobile_base-view-mobile-1.png b/ui/address/__screenshots__/AddressInternalTxs.pw.tsx_mobile_base-view-mobile-1.png index 51fdeb8eb8..7eaf7bc55a 100644 Binary files a/ui/address/__screenshots__/AddressInternalTxs.pw.tsx_mobile_base-view-mobile-1.png and b/ui/address/__screenshots__/AddressInternalTxs.pw.tsx_mobile_base-view-mobile-1.png differ diff --git a/ui/address/__screenshots__/AddressTokenTransfers.pw.tsx_default_mobile-with-token-filter-and-no-pagination-1.png b/ui/address/__screenshots__/AddressTokenTransfers.pw.tsx_default_mobile-with-token-filter-and-no-pagination-1.png index 9f903f1748..b843f9ec00 100644 Binary files a/ui/address/__screenshots__/AddressTokenTransfers.pw.tsx_default_mobile-with-token-filter-and-no-pagination-1.png and b/ui/address/__screenshots__/AddressTokenTransfers.pw.tsx_default_mobile-with-token-filter-and-no-pagination-1.png differ diff --git a/ui/address/__screenshots__/AddressTokenTransfers.pw.tsx_default_mobile-with-token-filter-and-pagination-1.png b/ui/address/__screenshots__/AddressTokenTransfers.pw.tsx_default_mobile-with-token-filter-and-pagination-1.png index 960c9d224e..7a87a936aa 100644 Binary files a/ui/address/__screenshots__/AddressTokenTransfers.pw.tsx_default_mobile-with-token-filter-and-pagination-1.png and b/ui/address/__screenshots__/AddressTokenTransfers.pw.tsx_default_mobile-with-token-filter-and-pagination-1.png differ diff --git a/ui/address/__screenshots__/AddressTokenTransfers.pw.tsx_default_with-token-filter-and-no-pagination-1.png b/ui/address/__screenshots__/AddressTokenTransfers.pw.tsx_default_with-token-filter-and-no-pagination-1.png index 5d3e0e32a1..870534e4de 100644 Binary files a/ui/address/__screenshots__/AddressTokenTransfers.pw.tsx_default_with-token-filter-and-no-pagination-1.png and b/ui/address/__screenshots__/AddressTokenTransfers.pw.tsx_default_with-token-filter-and-no-pagination-1.png differ diff --git a/ui/address/__screenshots__/AddressTokenTransfers.pw.tsx_default_with-token-filter-and-pagination-1.png b/ui/address/__screenshots__/AddressTokenTransfers.pw.tsx_default_with-token-filter-and-pagination-1.png index 586d1feccc..95c6b55d44 100644 Binary files a/ui/address/__screenshots__/AddressTokenTransfers.pw.tsx_default_with-token-filter-and-pagination-1.png and b/ui/address/__screenshots__/AddressTokenTransfers.pw.tsx_default_with-token-filter-and-pagination-1.png differ diff --git a/ui/address/__screenshots__/AddressTxs.pw.tsx_default_base-view-mobile-1.png b/ui/address/__screenshots__/AddressTxs.pw.tsx_default_base-view-mobile-1.png index 7fa83d079d..d553ec739c 100644 Binary files a/ui/address/__screenshots__/AddressTxs.pw.tsx_default_base-view-mobile-1.png and b/ui/address/__screenshots__/AddressTxs.pw.tsx_default_base-view-mobile-1.png differ diff --git a/ui/address/__screenshots__/AddressTxs.pw.tsx_default_base-view-screen-xl-1.png b/ui/address/__screenshots__/AddressTxs.pw.tsx_default_base-view-screen-xl-1.png index 98c140ad02..fb292560fd 100644 Binary files a/ui/address/__screenshots__/AddressTxs.pw.tsx_default_base-view-screen-xl-1.png and b/ui/address/__screenshots__/AddressTxs.pw.tsx_default_base-view-screen-xl-1.png differ diff --git a/ui/address/__screenshots__/AddressTxs.pw.tsx_mobile_base-view-mobile-1.png b/ui/address/__screenshots__/AddressTxs.pw.tsx_mobile_base-view-mobile-1.png index e2ff29dcb6..c9288c55b3 100644 Binary files a/ui/address/__screenshots__/AddressTxs.pw.tsx_mobile_base-view-mobile-1.png and b/ui/address/__screenshots__/AddressTxs.pw.tsx_mobile_base-view-mobile-1.png differ diff --git a/ui/address/internals/AddressIntTxsListItem.tsx b/ui/address/internals/AddressIntTxsListItem.tsx index 463a7a053c..12494ff00a 100644 --- a/ui/address/internals/AddressIntTxsListItem.tsx +++ b/ui/address/internals/AddressIntTxsListItem.tsx @@ -1,4 +1,4 @@ -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 ( @@ -65,28 +60,13 @@ const TxInternalsListItem = ({ lineHeight={ 5 } /> - - - { (isIn || isOut) ? - : - - } - { toData && ( - - ) } - + Value { config.chain.currency.symbol } diff --git a/ui/address/internals/AddressIntTxsTable.tsx b/ui/address/internals/AddressIntTxsTable.tsx index e17bacb44f..85ad31ae17 100644 --- a/ui/address/internals/AddressIntTxsTable.tsx +++ b/ui/address/internals/AddressIntTxsTable.tsx @@ -4,6 +4,7 @@ import React from 'react'; import type { InternalTransaction } from 'types/api/internalTransaction'; import config from 'configs/app'; +import { AddressHighlightProvider } from 'lib/contexts/addressHighlight'; import { default as Thead } from 'ui/shared/TheadSticky'; import AddressIntTxsTableItem from './AddressIntTxsTableItem'; @@ -16,31 +17,32 @@ interface Props { const AddressIntTxsTable = ({ data, currentAddress, isLoading }: Props) => { return ( - - - - - - - - - - - - - { data.map((item, index) => ( - - )) } - -
Parent txn hashTypeBlockFrom - To - Value { config.chain.currency.symbol } -
+ + + + + + + + + + + + + { data.map((item, index) => ( + + )) } + +
Parent txn hashTypeBlockFrom/To + Value { config.chain.currency.symbol } +
+
+ ); }; diff --git a/ui/address/internals/AddressIntTxsTableItem.tsx b/ui/address/internals/AddressIntTxsTableItem.tsx index 443b7217fe..4e3301d2f2 100644 --- a/ui/address/internals/AddressIntTxsTableItem.tsx +++ b/ui/address/internals/AddressIntTxsTableItem.tsx @@ -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,29 +72,13 @@ const AddressIntTxsTableItem = ({ /> - - - { (isIn || isOut) ? - : - - } - - - { toData && ( - - ) } - { BigNumber(value).div(BigNumber(10 ** config.chain.currency.decimals)).toFormat() } diff --git a/ui/blocks/BlocksTable.tsx b/ui/blocks/BlocksTable.tsx index 594fc98777..59d71ad3d3 100644 --- a/ui/blocks/BlocksTable.tsx +++ b/ui/blocks/BlocksTable.tsx @@ -6,6 +6,7 @@ import React from 'react'; import type { Block } from 'types/api/block'; import config from 'configs/app'; +import { AddressHighlightProvider } from 'lib/contexts/addressHighlight'; import getNetworkValidatorTitle from 'lib/networks/getNetworkValidatorTitle'; import BlocksTableItem from 'ui/blocks/BlocksTableItem'; import * as SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice'; @@ -37,43 +38,45 @@ const BlocksTable = ({ data, isLoading, top, page, showSocketInfo, socketInfoNum (!isRollup && !config.UI.views.block.hiddenFields?.burnt_fees ? FEES_COL_WEIGHT : 0); return ( - - - - - - { !config.UI.views.block.hiddenFields?.miner && + +
BlockSize, bytes
+ + + + + { !config.UI.views.block.hiddenFields?.miner && } - - - { !isRollup && !config.UI.views.block.hiddenFields?.total_reward && + + + { !isRollup && !config.UI.views.block.hiddenFields?.total_reward && } - { !isRollup && !config.UI.views.block.hiddenFields?.burnt_fees && + { !isRollup && !config.UI.views.block.hiddenFields?.burnt_fees && } - - - - { showSocketInfo && ( - - ) } - - { data.map((item, index) => ( - + + + { showSocketInfo && ( + - )) } - - -
BlockSize, bytes{ capitalize(getNetworkValidatorTitle()) }TxnGas usedTxnGas usedReward { config.chain.currency.symbol }Burnt fees { config.chain.currency.symbol }
+ ) } + + { data.map((item, index) => ( + + )) } + + + + ); }; diff --git a/ui/home/LatestTxs.tsx b/ui/home/LatestTxs.tsx index d58f40c98b..37b4ea695a 100644 --- a/ui/home/LatestTxs.tsx +++ b/ui/home/LatestTxs.tsx @@ -4,6 +4,7 @@ import React from 'react'; import { route } from 'nextjs-routes'; import useApiQuery from 'lib/api/useApiQuery'; +import { AddressHighlightProvider } from 'lib/contexts/addressHighlight'; import useIsMobile from 'lib/hooks/useIsMobile'; import useNewTxsSocket from 'lib/hooks/useNewTxsSocket'; import { TX } from 'stubs/tx'; @@ -42,15 +43,17 @@ const LatestTransactions = () => { /> ))) } - - { data.slice(0, txsCount).map(((tx, index) => ( - - ))) } - + + + { data.slice(0, txsCount).map(((tx, index) => ( + + ))) } + + View all transactions diff --git a/ui/home/LatestTxsItem.tsx b/ui/home/LatestTxsItem.tsx index 6c3eaf5d54..497ad91289 100644 --- a/ui/home/LatestTxsItem.tsx +++ b/ui/home/LatestTxsItem.tsx @@ -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'; @@ -34,7 +33,10 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => { return ( { display={{ base: 'none', lg: 'grid' }} > - + - + { - - - - - { dataTo && ( - - ) } - - - + + { !config.UI.views.tx.hiddenFields?.value && ( - + { config.chain.currency.symbol } { getValueWithUnit(tx.value).dp(5).toFormat() } ) } { !config.UI.views.tx.hiddenFields?.tx_fee && ( - + Fee { tx.stability_fee ? ( @@ -121,7 +102,7 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => { ) } ) } - +
); }; diff --git a/ui/home/LatestTxsItemMobile.tsx b/ui/home/LatestTxsItemMobile.tsx index eb96ff62f5..e2a74deda4 100644 --- a/ui/home/LatestTxsItemMobile.tsx +++ b/ui/home/LatestTxsItemMobile.tsx @@ -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) => { ) } - - - - { dataTo && ( - - ) } - + { !config.UI.views.tx.hiddenFields?.value && ( Value { config.chain.currency.symbol } diff --git a/ui/home/__screenshots__/LatestTxs.pw.tsx_dark-color-mode_default-view-dark-mode-1.png b/ui/home/__screenshots__/LatestTxs.pw.tsx_dark-color-mode_default-view-dark-mode-1.png index f434028c0b..34bc045c5e 100644 Binary files a/ui/home/__screenshots__/LatestTxs.pw.tsx_dark-color-mode_default-view-dark-mode-1.png and b/ui/home/__screenshots__/LatestTxs.pw.tsx_dark-color-mode_default-view-dark-mode-1.png differ diff --git a/ui/home/__screenshots__/LatestTxs.pw.tsx_default_default-view-dark-mode-1.png b/ui/home/__screenshots__/LatestTxs.pw.tsx_default_default-view-dark-mode-1.png index c0afd4ef43..268424019d 100644 Binary files a/ui/home/__screenshots__/LatestTxs.pw.tsx_default_default-view-dark-mode-1.png and b/ui/home/__screenshots__/LatestTxs.pw.tsx_default_default-view-dark-mode-1.png differ diff --git a/ui/home/__screenshots__/LatestTxs.pw.tsx_default_mobile-default-view-1.png b/ui/home/__screenshots__/LatestTxs.pw.tsx_default_mobile-default-view-1.png index e83ebc22f1..eb01f0123c 100644 Binary files a/ui/home/__screenshots__/LatestTxs.pw.tsx_default_mobile-default-view-1.png and b/ui/home/__screenshots__/LatestTxs.pw.tsx_default_mobile-default-view-1.png differ diff --git a/ui/home/__screenshots__/LatestTxs.pw.tsx_default_socket-new-item-1.png b/ui/home/__screenshots__/LatestTxs.pw.tsx_default_socket-new-item-1.png index d20665434d..a3e9edc2c1 100644 Binary files a/ui/home/__screenshots__/LatestTxs.pw.tsx_default_socket-new-item-1.png and b/ui/home/__screenshots__/LatestTxs.pw.tsx_default_socket-new-item-1.png differ diff --git a/ui/pages/__screenshots__/Home.pw.tsx_dark-color-mode_default-view---default-dark-mode-1.png b/ui/pages/__screenshots__/Home.pw.tsx_dark-color-mode_default-view---default-dark-mode-1.png index f9ae337b71..a08389442a 100644 Binary files a/ui/pages/__screenshots__/Home.pw.tsx_dark-color-mode_default-view---default-dark-mode-1.png and b/ui/pages/__screenshots__/Home.pw.tsx_dark-color-mode_default-view---default-dark-mode-1.png differ diff --git a/ui/pages/__screenshots__/Home.pw.tsx_default_default-view-screen-xl-1.png b/ui/pages/__screenshots__/Home.pw.tsx_default_default-view-screen-xl-1.png index 5513a62a55..db9a61c2ed 100644 Binary files a/ui/pages/__screenshots__/Home.pw.tsx_default_default-view-screen-xl-1.png and b/ui/pages/__screenshots__/Home.pw.tsx_default_default-view-screen-xl-1.png differ diff --git a/ui/pages/__screenshots__/Home.pw.tsx_default_mobile-base-view-1.png b/ui/pages/__screenshots__/Home.pw.tsx_default_mobile-base-view-1.png index 6385a6d305..d5ad955957 100644 Binary files a/ui/pages/__screenshots__/Home.pw.tsx_default_mobile-base-view-1.png and b/ui/pages/__screenshots__/Home.pw.tsx_default_mobile-base-view-1.png differ diff --git a/ui/shared/CopyToClipboard.tsx b/ui/shared/CopyToClipboard.tsx index be20647990..4941909638 100644 --- a/ui/shared/CopyToClipboard.tsx +++ b/ui/shared/CopyToClipboard.tsx @@ -1,4 +1,4 @@ -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={ } w="20px" h="20px" - color="gray.400" + color={ iconColor } variant="simple" display="inline-block" flexShrink={ 0 } diff --git a/ui/shared/IconSvg.tsx b/ui/shared/IconSvg.tsx index fb30c5e8cd..3d5d6ef068 100644 --- a/ui/shared/IconSvg.tsx +++ b/ui/shared/IconSvg.tsx @@ -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) => { return ( - + @@ -22,4 +22,4 @@ const IconSvg = ({ name, isLoading, ...props }: Props) => { ); }; -export default IconSvg; +export default React.forwardRef(IconSvg); diff --git a/ui/shared/InOutTag.tsx b/ui/shared/InOutTag.tsx deleted file mode 100644 index bf7be50a85..0000000000 --- a/ui/shared/InOutTag.tsx +++ /dev/null @@ -1,33 +0,0 @@ -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 ( - - { isOut ? 'OUT' : 'IN' } - - ); -}; - -export default React.memo(chakra(InOutTag)); diff --git a/ui/shared/TokenTransfer/TokenTransferFilter.tsx b/ui/shared/TokenTransfer/TokenTransferFilter.tsx index 0a3265043f..cef403a741 100644 --- a/ui/shared/TokenTransfer/TokenTransferFilter.tsx +++ b/ui/shared/TokenTransfer/TokenTransferFilter.tsx @@ -35,7 +35,7 @@ const TokenTransferFilter = ({ const isInitialLoading = useIsInitialLoading(isLoading); return ( - + { withAddressFilter && ( <> Address @@ -49,8 +49,8 @@ const TokenTransferFilter = ({ > All - From - To + Outgoing transfers + Incoming transfers diff --git a/ui/shared/TokenTransfer/TokenTransferListItem.tsx b/ui/shared/TokenTransfer/TokenTransferListItem.tsx index 0d63e07b51..3ad382ea91 100644 --- a/ui/shared/TokenTransfer/TokenTransferListItem.tsx +++ b/ui/shared/TokenTransfer/TokenTransferListItem.tsx @@ -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 ( @@ -80,36 +77,13 @@ const TokenTransferListItem = ({ ) } ) } - - - { baseAddress ? ( - - ) : - - } - - + { valueStr && ( Value diff --git a/ui/shared/TokenTransfer/TokenTransferTable.tsx b/ui/shared/TokenTransfer/TokenTransferTable.tsx index e9fda5f46c..3e4ba261c0 100644 --- a/ui/shared/TokenTransfer/TokenTransferTable.tsx +++ b/ui/shared/TokenTransfer/TokenTransferTable.tsx @@ -3,6 +3,7 @@ import React from 'react'; import type { TokenTransfer } from 'types/api/tokenTransfer'; +import { AddressHighlightProvider } from 'lib/contexts/addressHighlight'; import * as SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice'; import { default as Thead } from 'ui/shared/TheadSticky'; import TokenTransferTableItem from 'ui/shared/TokenTransfer/TokenTransferTableItem'; @@ -32,41 +33,41 @@ const TokenTransferTable = ({ }: Props) => { return ( - - - - { showTxInfo && } - - - { showTxInfo && } - - { baseAddress && - - - - - { showSocketInfo && ( - - ) } - { data.map((item, index) => ( - - )) } - -
TokenToken IDTxn hashFrom } - ToValue
+ + + + + { showTxInfo && } + + + { showTxInfo && } + + + + + + { showSocketInfo && ( + + ) } + { data.map((item, index) => ( + + )) } + +
TokenToken IDTxn hashFrom/ToValue
+
); }; diff --git a/ui/shared/TokenTransfer/TokenTransferTableItem.tsx b/ui/shared/TokenTransfer/TokenTransferTableItem.tsx index aa057f1a95..4dcf7e0ce6 100644 --- a/ui/shared/TokenTransfer/TokenTransferTableItem.tsx +++ b/ui/shared/TokenTransfer/TokenTransferTableItem.tsx @@ -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 = ({ ) } - - - { baseAddress && ( - - - - - - ) } - - diff --git a/ui/shared/TokenTransfer/__screenshots__/TokenTransferList.pw.tsx_default_with-tx-info-1.png b/ui/shared/TokenTransfer/__screenshots__/TokenTransferList.pw.tsx_default_with-tx-info-1.png index a678e21e98..8273d458dd 100644 Binary files a/ui/shared/TokenTransfer/__screenshots__/TokenTransferList.pw.tsx_default_with-tx-info-1.png and b/ui/shared/TokenTransfer/__screenshots__/TokenTransferList.pw.tsx_default_with-tx-info-1.png differ diff --git a/ui/shared/TokenTransfer/__screenshots__/TokenTransferList.pw.tsx_default_without-tx-info-1.png b/ui/shared/TokenTransfer/__screenshots__/TokenTransferList.pw.tsx_default_without-tx-info-1.png index 5af3308e09..febb50852e 100644 Binary files a/ui/shared/TokenTransfer/__screenshots__/TokenTransferList.pw.tsx_default_without-tx-info-1.png and b/ui/shared/TokenTransfer/__screenshots__/TokenTransferList.pw.tsx_default_without-tx-info-1.png differ diff --git a/ui/shared/TokenTransfer/__screenshots__/TokenTransferTable.pw.tsx_default_with-tx-info-1.png b/ui/shared/TokenTransfer/__screenshots__/TokenTransferTable.pw.tsx_default_with-tx-info-1.png index 070d72be06..a49c5a5a51 100644 Binary files a/ui/shared/TokenTransfer/__screenshots__/TokenTransferTable.pw.tsx_default_with-tx-info-1.png and b/ui/shared/TokenTransfer/__screenshots__/TokenTransferTable.pw.tsx_default_with-tx-info-1.png differ diff --git a/ui/shared/TokenTransfer/__screenshots__/TokenTransferTable.pw.tsx_default_without-tx-info-1.png b/ui/shared/TokenTransfer/__screenshots__/TokenTransferTable.pw.tsx_default_without-tx-info-1.png index 9dc83bef17..5f28ff8195 100644 Binary files a/ui/shared/TokenTransfer/__screenshots__/TokenTransferTable.pw.tsx_default_without-tx-info-1.png and b/ui/shared/TokenTransfer/__screenshots__/TokenTransferTable.pw.tsx_default_without-tx-info-1.png differ diff --git a/ui/shared/address/AddressFromTo.pw.tsx b/ui/shared/address/AddressFromTo.pw.tsx new file mode 100644 index 0000000000..78124f3cd1 --- /dev/null +++ b/ui/shared/address/AddressFromTo.pw.tsx @@ -0,0 +1,62 @@ +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( + + + , + ); + await expect(component).toHaveScreenshot(); +}); + +test('incoming txn', async({ mount }) => { + const component = await mount( + + + , + ); + await expect(component).toHaveScreenshot(); +}); + +test('compact mode', async({ mount }) => { + const component = await mount( + + + , + ); + await expect(component).toHaveScreenshot(); +}); + +test('loading state', async({ mount }) => { + const component = await mount( + + + , + ); + await expect(component).toHaveScreenshot(); +}); diff --git a/ui/shared/address/AddressFromTo.tsx b/ui/shared/address/AddressFromTo.tsx new file mode 100644 index 0000000000..7f3df69d7f --- /dev/null +++ b/ui/shared/address/AddressFromTo.tsx @@ -0,0 +1,115 @@ +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>; + 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 ( + + + + + + { to ? ( + + ) : - } + + ); + } + + const isOutgoing = current === from.hash; + const iconSizeWithMargins = (5 + (isOutgoing ? 4 : 2) + 3) * 4; + + return ( + + + + { to ? ( + + ) : - } + + ); +}; + +export default chakra(AddressFromTo); diff --git a/ui/shared/address/AddressFromToIcon.pw.tsx b/ui/shared/address/AddressFromToIcon.pw.tsx new file mode 100644 index 0000000000..e65b55479e --- /dev/null +++ b/ui/shared/address/AddressFromToIcon.pw.tsx @@ -0,0 +1,22 @@ +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( + + + + + , + ); + await expect(component).toHaveScreenshot(); + }); +}); diff --git a/ui/shared/address/AddressFromToIcon.tsx b/ui/shared/address/AddressFromToIcon.tsx new file mode 100644 index 0000000000..de7059696f --- /dev/null +++ b/ui/shared/address/AddressFromToIcon.tsx @@ -0,0 +1,62 @@ +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 = ( + + ); + + if (type === 'unspecified') { + return icon; + } + + return ( + + { icon } + + ); +}; + +export default React.memo(chakra(AddressFromToIcon)); diff --git a/ui/shared/address/__screenshots__/AddressFromTo.pw.tsx_default_compact-mode-1.png b/ui/shared/address/__screenshots__/AddressFromTo.pw.tsx_default_compact-mode-1.png new file mode 100644 index 0000000000..073c5688d4 Binary files /dev/null and b/ui/shared/address/__screenshots__/AddressFromTo.pw.tsx_default_compact-mode-1.png differ diff --git a/ui/shared/address/__screenshots__/AddressFromTo.pw.tsx_default_incoming-txn-1.png b/ui/shared/address/__screenshots__/AddressFromTo.pw.tsx_default_incoming-txn-1.png new file mode 100644 index 0000000000..3c3e387f1b Binary files /dev/null and b/ui/shared/address/__screenshots__/AddressFromTo.pw.tsx_default_incoming-txn-1.png differ diff --git a/ui/shared/address/__screenshots__/AddressFromTo.pw.tsx_default_loading-state-1.png b/ui/shared/address/__screenshots__/AddressFromTo.pw.tsx_default_loading-state-1.png new file mode 100644 index 0000000000..5f560ebcbf Binary files /dev/null and b/ui/shared/address/__screenshots__/AddressFromTo.pw.tsx_default_loading-state-1.png differ diff --git a/ui/shared/address/__screenshots__/AddressFromTo.pw.tsx_default_outgoing-txn-1.png b/ui/shared/address/__screenshots__/AddressFromTo.pw.tsx_default_outgoing-txn-1.png new file mode 100644 index 0000000000..1e28068da6 Binary files /dev/null and b/ui/shared/address/__screenshots__/AddressFromTo.pw.tsx_default_outgoing-txn-1.png differ diff --git a/ui/shared/address/__screenshots__/AddressFromToIcon.pw.tsx_dark-color-mode_in-txn-type-dark-mode-1.png b/ui/shared/address/__screenshots__/AddressFromToIcon.pw.tsx_dark-color-mode_in-txn-type-dark-mode-1.png new file mode 100644 index 0000000000..68968da31c Binary files /dev/null and b/ui/shared/address/__screenshots__/AddressFromToIcon.pw.tsx_dark-color-mode_in-txn-type-dark-mode-1.png differ diff --git a/ui/shared/address/__screenshots__/AddressFromToIcon.pw.tsx_dark-color-mode_out-txn-type-dark-mode-1.png b/ui/shared/address/__screenshots__/AddressFromToIcon.pw.tsx_dark-color-mode_out-txn-type-dark-mode-1.png new file mode 100644 index 0000000000..b711beedce Binary files /dev/null and b/ui/shared/address/__screenshots__/AddressFromToIcon.pw.tsx_dark-color-mode_out-txn-type-dark-mode-1.png differ diff --git a/ui/shared/address/__screenshots__/AddressFromToIcon.pw.tsx_dark-color-mode_self-txn-type-dark-mode-1.png b/ui/shared/address/__screenshots__/AddressFromToIcon.pw.tsx_dark-color-mode_self-txn-type-dark-mode-1.png new file mode 100644 index 0000000000..c5936f647f Binary files /dev/null and b/ui/shared/address/__screenshots__/AddressFromToIcon.pw.tsx_dark-color-mode_self-txn-type-dark-mode-1.png differ diff --git a/ui/shared/address/__screenshots__/AddressFromToIcon.pw.tsx_dark-color-mode_unspecified-txn-type-dark-mode-1.png b/ui/shared/address/__screenshots__/AddressFromToIcon.pw.tsx_dark-color-mode_unspecified-txn-type-dark-mode-1.png new file mode 100644 index 0000000000..78bfd3a44c Binary files /dev/null and b/ui/shared/address/__screenshots__/AddressFromToIcon.pw.tsx_dark-color-mode_unspecified-txn-type-dark-mode-1.png differ diff --git a/ui/shared/address/__screenshots__/AddressFromToIcon.pw.tsx_default_in-txn-type-dark-mode-1.png b/ui/shared/address/__screenshots__/AddressFromToIcon.pw.tsx_default_in-txn-type-dark-mode-1.png new file mode 100644 index 0000000000..c5b874fc96 Binary files /dev/null and b/ui/shared/address/__screenshots__/AddressFromToIcon.pw.tsx_default_in-txn-type-dark-mode-1.png differ diff --git a/ui/shared/address/__screenshots__/AddressFromToIcon.pw.tsx_default_out-txn-type-dark-mode-1.png b/ui/shared/address/__screenshots__/AddressFromToIcon.pw.tsx_default_out-txn-type-dark-mode-1.png new file mode 100644 index 0000000000..a871127c88 Binary files /dev/null and b/ui/shared/address/__screenshots__/AddressFromToIcon.pw.tsx_default_out-txn-type-dark-mode-1.png differ diff --git a/ui/shared/address/__screenshots__/AddressFromToIcon.pw.tsx_default_self-txn-type-dark-mode-1.png b/ui/shared/address/__screenshots__/AddressFromToIcon.pw.tsx_default_self-txn-type-dark-mode-1.png new file mode 100644 index 0000000000..dcc281e8b5 Binary files /dev/null and b/ui/shared/address/__screenshots__/AddressFromToIcon.pw.tsx_default_self-txn-type-dark-mode-1.png differ diff --git a/ui/shared/address/__screenshots__/AddressFromToIcon.pw.tsx_default_unspecified-txn-type-dark-mode-1.png b/ui/shared/address/__screenshots__/AddressFromToIcon.pw.tsx_default_unspecified-txn-type-dark-mode-1.png new file mode 100644 index 0000000000..1498f7dec8 Binary files /dev/null and b/ui/shared/address/__screenshots__/AddressFromToIcon.pw.tsx_default_unspecified-txn-type-dark-mode-1.png differ diff --git a/ui/shared/address/utils.ts b/ui/shared/address/utils.ts new file mode 100644 index 0000000000..d1329736e0 --- /dev/null +++ b/ui/shared/address/utils.ts @@ -0,0 +1,21 @@ +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'; +} diff --git a/ui/shared/entities/address/AddressEntity.pw.tsx b/ui/shared/entities/address/AddressEntity.pw.tsx index e94038817b..91ffb6d093 100644 --- a/ui/shared/entities/address/AddressEntity.pw.tsx +++ b/ui/shared/entities/address/AddressEntity.pw.tsx @@ -1,6 +1,8 @@ +import { Box } from '@chakra-ui/react'; import { test, expect } from '@playwright/experimental-ct-react'; import React from 'react'; +import { AddressHighlightProvider } from 'lib/contexts/addressHighlight'; import * as addressMock from 'mocks/address/address'; import TestApp from 'playwright/TestApp'; @@ -140,9 +142,13 @@ test('customization', async({ mount }) => { test('hover', async({ page, mount }) => { const component = await mount( - + + + + + , ); diff --git a/ui/shared/entities/address/AddressEntity.tsx b/ui/shared/entities/address/AddressEntity.tsx index 4e64a683b5..94ff1ef7ea 100644 --- a/ui/shared/entities/address/AddressEntity.tsx +++ b/ui/shared/entities/address/AddressEntity.tsx @@ -1,5 +1,5 @@ import type { As } from '@chakra-ui/react'; -import { Box, Flex, Skeleton, Tooltip, chakra, VStack } from '@chakra-ui/react'; +import { Box, Flex, Skeleton, Tooltip, chakra, VStack, useColorModeValue } from '@chakra-ui/react'; import _omit from 'lodash/omit'; import React from 'react'; @@ -7,6 +7,7 @@ import type { AddressParam } from 'types/api/addressParams'; import { route } from 'nextjs-routes'; +import { useAddressHighlightContext } from 'lib/contexts/addressHighlight'; import * as EntityBase from 'ui/shared/entities/base/components'; import { getIconProps } from '../base/utils'; @@ -146,8 +147,35 @@ const AddressEntry = (props: EntityProps) => { const linkProps = _omit(props, [ 'className' ]); const partsProps = _omit(props, [ 'className', 'onClick' ]); + const context = useAddressHighlightContext(); + const highlightedBgColor = useColorModeValue('blue.50', 'blue.900'); + const highlightedBorderColor = useColorModeValue('blue.200', 'blue.600'); + return ( - + diff --git a/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_hover-1.png b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_hover-1.png index f33616575f..0d77e3eb86 100644 Binary files a/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_hover-1.png and b/ui/shared/entities/address/__screenshots__/AddressEntity.pw.tsx_default_hover-1.png differ diff --git a/ui/shared/entities/base/components.tsx b/ui/shared/entities/base/components.tsx index 1a9dcc7669..2beee12d0c 100644 --- a/ui/shared/entities/base/components.tsx +++ b/ui/shared/entities/base/components.tsx @@ -33,14 +33,17 @@ export interface EntityBaseProps { export interface ContainerBaseProps extends Pick { children: React.ReactNode; + onMouseEnter?: (event: React.MouseEvent) => void; + onMouseLeave?: (event: React.MouseEvent) => void; } -const Container = chakra(({ className, children }: ContainerBaseProps) => { +const Container = chakra(({ className, children, ...props }: ContainerBaseProps) => { return ( { children } diff --git a/ui/token/TokenInventory.tsx b/ui/token/TokenInventory.tsx index 50153b466c..eed0e3fe47 100644 --- a/ui/token/TokenInventory.tsx +++ b/ui/token/TokenInventory.tsx @@ -5,6 +5,7 @@ import React from 'react'; import type { TokenInfo } from 'types/api/token'; import type { ResourceError } from 'lib/api/resources'; +import { AddressHighlightProvider } from 'lib/contexts/addressHighlight'; import useIsMobile from 'lib/hooks/useIsMobile'; import ActionBar from 'ui/shared/ActionBar'; import DataListDisplay from 'ui/shared/DataListDisplay'; @@ -58,21 +59,23 @@ const TokenInventory = ({ inventoryQuery, tokenQuery, ownerFilter }: Props) => { const token = tokenQuery.data; const content = items && token ? ( - - { items.map((item, index) => ( - - )) } - + + + { items.map((item, index) => ( + + )) } + + ) : null; return ( diff --git a/ui/token/TokenTransfer/TokenTransferListItem.tsx b/ui/token/TokenTransfer/TokenTransferListItem.tsx index 95aa336465..63342e6d4f 100644 --- a/ui/token/TokenTransfer/TokenTransferListItem.tsx +++ b/ui/token/TokenTransfer/TokenTransferListItem.tsx @@ -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 = ({ ) }
{ method && { method } } - - - - - + { valueStr && (token.type === 'ERC-20' || token.type === 'ERC-1155') && ( diff --git a/ui/token/TokenTransfer/TokenTransferTable.tsx b/ui/token/TokenTransfer/TokenTransferTable.tsx index c48a1412e4..8ffd5e3912 100644 --- a/ui/token/TokenTransfer/TokenTransferTable.tsx +++ b/ui/token/TokenTransfer/TokenTransferTable.tsx @@ -4,6 +4,7 @@ import React from 'react'; import type { TokenInfo } from 'types/api/token'; import type { TokenTransfer } from 'types/api/tokenTransfer'; +import { AddressHighlightProvider } from 'lib/contexts/addressHighlight'; import * as SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice'; import { default as Thead } from 'ui/shared/TheadSticky'; import TruncatedValue from 'ui/shared/TruncatedValue'; @@ -24,42 +25,42 @@ const TokenTransferTable = ({ data, top, showSocketInfo, socketInfoAlert, socket const tokenType = data[0].token.type; return ( - - - - - - - - { (tokenType === 'ERC-721' || tokenType === 'ERC-1155') && } - { (tokenType === 'ERC-20' || tokenType === 'ERC-1155') && ( - + +
Txn hashMethodFrom - ToToken ID - -
+ + + + + + { (tokenType === 'ERC-721' || tokenType === 'ERC-1155') && } + { (tokenType === 'ERC-20' || tokenType === 'ERC-1155') && ( + + ) } + + + + { showSocketInfo && ( + ) } - - - - { showSocketInfo && ( - - ) } - { data.map((item, index) => ( - - )) } - -
Txn hashMethodFrom/ToToken ID + +
+ { data.map((item, index) => ( + + )) } + + + ); }; diff --git a/ui/token/TokenTransfer/TokenTransferTableItem.tsx b/ui/token/TokenTransfer/TokenTransferTableItem.tsx index 50129dbbcf..5fa807d1ac 100644 --- a/ui/token/TokenTransfer/TokenTransferTableItem.tsx +++ b/ui/token/TokenTransfer/TokenTransferTableItem.tsx @@ -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,24 +59,13 @@ const TokenTransferTableItem = ({ ) : null } - - - - - - - { (token.type === 'ERC-721' || token.type === 'ERC-1155') && ( diff --git a/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_default_erc1155-mobile-1.png b/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_default_erc1155-mobile-1.png index a65640db2b..2d55eec444 100644 Binary files a/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_default_erc1155-mobile-1.png and b/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_default_erc1155-mobile-1.png differ diff --git a/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_default_erc20-mobile-1.png b/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_default_erc20-mobile-1.png index cab94218e9..c8177ab64d 100644 Binary files a/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_default_erc20-mobile-1.png and b/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_default_erc20-mobile-1.png differ diff --git a/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_default_erc721-mobile-1.png b/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_default_erc721-mobile-1.png index 5027ffd14d..80ea9e8def 100644 Binary files a/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_default_erc721-mobile-1.png and b/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_default_erc721-mobile-1.png differ diff --git a/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_mobile_erc1155-mobile-1.png b/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_mobile_erc1155-mobile-1.png index 16fed052cf..34c6dfcab8 100644 Binary files a/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_mobile_erc1155-mobile-1.png and b/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_mobile_erc1155-mobile-1.png differ diff --git a/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_mobile_erc20-mobile-1.png b/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_mobile_erc20-mobile-1.png index ed8a59156a..cd30c50dbb 100644 Binary files a/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_mobile_erc20-mobile-1.png and b/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_mobile_erc20-mobile-1.png differ diff --git a/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_mobile_erc721-mobile-1.png b/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_mobile_erc721-mobile-1.png index 54ccd232ac..2b01786d75 100644 Binary files a/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_mobile_erc721-mobile-1.png and b/ui/token/TokenTransfer/__screenshots__/TokenTransfer.pw.tsx_mobile_erc721-mobile-1.png differ diff --git a/ui/tx/__screenshots__/TxDetails.pw.tsx_default_with-token-transfer-mobile-1.png b/ui/tx/__screenshots__/TxDetails.pw.tsx_default_with-token-transfer-mobile-1.png index e5aa9648eb..8dd4bdad58 100644 Binary files a/ui/tx/__screenshots__/TxDetails.pw.tsx_default_with-token-transfer-mobile-1.png and b/ui/tx/__screenshots__/TxDetails.pw.tsx_default_with-token-transfer-mobile-1.png differ diff --git a/ui/tx/__screenshots__/TxDetails.pw.tsx_mobile_with-token-transfer-mobile-1.png b/ui/tx/__screenshots__/TxDetails.pw.tsx_mobile_with-token-transfer-mobile-1.png index 8d756286ed..4cf23e31f8 100644 Binary files a/ui/tx/__screenshots__/TxDetails.pw.tsx_mobile_with-token-transfer-mobile-1.png and b/ui/tx/__screenshots__/TxDetails.pw.tsx_mobile_with-token-transfer-mobile-1.png differ diff --git a/ui/tx/__screenshots__/TxInternals.pw.tsx_default_base-view-mobile-1.png b/ui/tx/__screenshots__/TxInternals.pw.tsx_default_base-view-mobile-1.png index 55b8612904..6e0f3ec27a 100644 Binary files a/ui/tx/__screenshots__/TxInternals.pw.tsx_default_base-view-mobile-1.png and b/ui/tx/__screenshots__/TxInternals.pw.tsx_default_base-view-mobile-1.png differ diff --git a/ui/tx/__screenshots__/TxInternals.pw.tsx_mobile_base-view-mobile-1.png b/ui/tx/__screenshots__/TxInternals.pw.tsx_mobile_base-view-mobile-1.png index 80d7e53681..09af681115 100644 Binary files a/ui/tx/__screenshots__/TxInternals.pw.tsx_mobile_base-view-mobile-1.png and b/ui/tx/__screenshots__/TxInternals.pw.tsx_mobile_base-view-mobile-1.png differ diff --git a/ui/tx/details/TxDetailsTokenTransfer.tsx b/ui/tx/details/TxDetailsTokenTransfer.tsx index 6a1c71e342..c31db5852a 100644 --- a/ui/tx/details/TxDetailsTokenTransfer.tsx +++ b/ui/tx/details/TxDetailsTokenTransfer.tsx @@ -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%" > - - - - - + { content } diff --git a/ui/tx/internals/TxInternalsListItem.tsx b/ui/tx/internals/TxInternalsListItem.tsx index df6d73519f..c067fdcc40 100644 --- a/ui/tx/internals/TxInternalsListItem.tsx +++ b/ui/tx/internals/TxInternalsListItem.tsx @@ -1,13 +1,12 @@ -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 && { typeTitle } } - - - - { toData && ( - - ) } - + Value { config.chain.currency.symbol } diff --git a/ui/tx/internals/TxInternalsTable.tsx b/ui/tx/internals/TxInternalsTable.tsx index 65f4a3d6ac..f6f215c311 100644 --- a/ui/tx/internals/TxInternalsTable.tsx +++ b/ui/tx/internals/TxInternalsTable.tsx @@ -4,6 +4,7 @@ import React from 'react'; import type { InternalTransaction } from 'types/api/internalTransaction'; import config from 'configs/app'; +import { AddressHighlightProvider } from 'lib/contexts/addressHighlight'; import IconSvg from 'ui/shared/IconSvg'; import { default as Thead } from 'ui/shared/TheadSticky'; import TxInternalsTableItem from 'ui/tx/internals/TxInternalsTableItem'; @@ -21,33 +22,33 @@ const TxInternalsTable = ({ data, sort, onSortToggle, top, isLoading }: Props) = const sortIconTransform = sort?.includes('asc') ? 'rotate(-90deg)' : 'rotate(90deg)'; return ( - - - - - - - + + + + { data.map((item, index) => ( + + )) } + +
TypeFrom - To - - { sort?.includes('value') && } + + + + + + + - + - - - - { data.map((item, index) => ( - - )) } - -
TypeFrom/To + + { sort?.includes('value') && } Value { config.chain.currency.symbol } - - - - { sort?.includes('gas-limit') && } + + + + { sort?.includes('gas-limit') && } Gas limit { config.chain.currency.symbol } - -
+ +
+ ); }; diff --git a/ui/tx/internals/TxInternalsTableItem.tsx b/ui/tx/internals/TxInternalsTableItem.tsx index cfa1bca773..b344b81147 100644 --- a/ui/tx/internals/TxInternalsTableItem.tsx +++ b/ui/tx/internals/TxInternalsTableItem.tsx @@ -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: - - - - - - { toData && ( - - ) } - { BigNumber(value).div(BigNumber(10 ** config.chain.currency.decimals)).toFormat() } diff --git a/ui/tx/state/TxStateTable.tsx b/ui/tx/state/TxStateTable.tsx index 9740486c66..216648830c 100644 --- a/ui/tx/state/TxStateTable.tsx +++ b/ui/tx/state/TxStateTable.tsx @@ -8,6 +8,7 @@ import React from 'react'; import type { TxStateChange } from 'types/api/txStateChanges'; +import { AddressHighlightProvider } from 'lib/contexts/addressHighlight'; import { default as Thead } from 'ui/shared/TheadSticky'; import TxStateTableItem from 'ui/tx/state/TxStateTableItem'; @@ -19,21 +20,23 @@ interface Props { const TxStateTable = ({ data, isLoading, top }: Props) => { return ( - - - - - - - - - - - - - { data.map((item, index) => ) } - -
TypeAddressBeforeAfterChangeToken ID
+ + + + + + + + + + + + + + { data.map((item, index) => ) } + +
TypeAddressBeforeAfterChangeToken ID
+
); }; diff --git a/ui/tx/state/TxStateTableItem.tsx b/ui/tx/state/TxStateTableItem.tsx index 81c6ba5ca8..7c885a4f5e 100644 --- a/ui/tx/state/TxStateTableItem.tsx +++ b/ui/tx/state/TxStateTableItem.tsx @@ -27,7 +27,8 @@ const TxStateTableItem = ({ data, isLoading }: Props) => { address={ data.address } isLoading={ isLoading } truncation="constant" - py="7px" + my="7px" + w="min-content" /> { before } diff --git a/ui/txs/TxAdditionalInfo.tsx b/ui/txs/TxAdditionalInfo.tsx index 8450dc7546..356bdc8867 100644 --- a/ui/txs/TxAdditionalInfo.tsx +++ b/ui/txs/TxAdditionalInfo.tsx @@ -1,4 +1,5 @@ import { + chakra, Modal, ModalContent, ModalCloseButton, @@ -28,9 +29,10 @@ type Props = }) & { isMobile?: boolean; isLoading?: boolean; + className?: string; } -const TxAdditionalInfo = ({ hash, tx, isMobile, isLoading }: Props) => { +const TxAdditionalInfo = ({ hash, tx, isMobile, isLoading, className }: Props) => { const { isOpen, onOpen, onClose } = useDisclosure(); const content = hash !== undefined ? : ; @@ -38,7 +40,7 @@ const TxAdditionalInfo = ({ hash, tx, isMobile, isLoading }: Props) => { if (isMobile) { return ( <> - + @@ -53,7 +55,7 @@ const TxAdditionalInfo = ({ hash, tx, isMobile, isLoading }: Props) => { { ({ isOpen }) => ( <> - + @@ -66,4 +68,4 @@ const TxAdditionalInfo = ({ hash, tx, isMobile, isLoading }: Props) => { ); }; -export default React.memo(TxAdditionalInfo); +export default React.memo(chakra(TxAdditionalInfo)); diff --git a/ui/txs/TxsListItem.tsx b/ui/txs/TxsListItem.tsx index 84ac614f50..422869557d 100644 --- a/ui/txs/TxsListItem.tsx +++ b/ui/txs/TxsListItem.tsx @@ -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 /> ) } - - - { (isIn || isOut) ? - : ( - - ) } - { dataTo ? ( - - ) : '-' } - + { !config.UI.views.tx.hiddenFields?.value && ( Value diff --git a/ui/txs/TxsTable.pw.tsx b/ui/txs/TxsTable.pw.tsx index c2433456b5..7cd4d86eb6 100644 --- a/ui/txs/TxsTable.pw.tsx +++ b/ui/txs/TxsTable.pw.tsx @@ -17,6 +17,8 @@ test.describe('base view', () => { , ); + await component.getByText('kitty').first().hover(); + await expect(component).toHaveScreenshot(); }); @@ -31,6 +33,8 @@ test.describe('base view', () => { , ); + await component.getByText('kitty').first().hover(); + await expect(component).toHaveScreenshot(); }); }); diff --git a/ui/txs/TxsTable.tsx b/ui/txs/TxsTable.tsx index c1946320fd..23fa528bd4 100644 --- a/ui/txs/TxsTable.tsx +++ b/ui/txs/TxsTable.tsx @@ -1,10 +1,11 @@ -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'; import type { Transaction, TransactionsSortingField, TransactionsSortingValue } from 'types/api/transaction'; import config from 'configs/app'; +import { AddressHighlightProvider } from 'lib/contexts/addressHighlight'; import IconSvg from 'ui/shared/IconSvg'; import * as SocketNewItemsNotice from 'ui/shared/SocketNewItemsNotice'; import TheadSticky from 'ui/shared/TheadSticky'; @@ -39,65 +40,60 @@ const TxsTable = ({ isLoading, }: Props) => { return ( - - - - - - - - { showBlockInfo && } - - - - { !config.UI.views.tx.hiddenFields?.value && ( - - ) } - { !config.UI.views.tx.hiddenFields?.tx_fee && ( - - ) } - - - - { showSocketInfo && ( - - ) } - - { txs.map((item, index) => ( - +
Txn hashTypeMethodBlock - From - From / To - - To - - - { sorting === 'value-asc' && } - { sorting === 'value-desc' && } - { `Value ${ config.chain.currency.symbol }` } - - - - { sorting === 'fee-asc' && } - { sorting === 'fee-desc' && } - { `Fee${ config.UI.views.tx.hiddenFields?.fee_currency ? '' : ` ${ config.chain.currency.symbol }` }` } - -
+ + + + + + + { showBlockInfo && } + + { !config.UI.views.tx.hiddenFields?.value && ( + + ) } + { !config.UI.views.tx.hiddenFields?.tx_fee && ( + + ) } + + + + { showSocketInfo && ( + - )) } - - -
Txn hashTypeMethodBlockFrom/To + + { sorting === 'value-asc' && } + { sorting === 'value-desc' && } + { `Value ${ config.chain.currency.symbol }` } + + + + { sorting === 'fee-asc' && } + { sorting === 'fee-desc' && } + { `Fee${ config.UI.views.tx.hiddenFields?.fee_currency ? '' : ` ${ config.chain.currency.symbol }` }` } + +
+ ) } + + { txs.map((item, index) => ( + + )) } + + + + ); }; diff --git a/ui/txs/TxsTableItem.tsx b/ui/txs/TxsTableItem.tsx index eb95016674..fb94dcba1e 100644 --- a/ui/txs/TxsTableItem.tsx +++ b/ui/txs/TxsTableItem.tsx @@ -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,35 +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 = ( - - ); - - const addressTo = dataTo ? ( - - ) : '-'; - return ( ) } - - - { addressFrom } - - - { (isIn || isOut) ? - : ( - - - - ) } - - - { addressTo } - - - - - - { (isIn || isOut) ? - : ( - - ) } - - { addressFrom } - { addressTo } - - - - + + + { !config.UI.views.tx.hiddenFields?.value && ( diff --git a/ui/txs/__screenshots__/TxsListItem.pw.tsx_dark-color-mode_base-view-dark-mode-1.png b/ui/txs/__screenshots__/TxsListItem.pw.tsx_dark-color-mode_base-view-dark-mode-1.png index c4b277a457..407b23ea67 100644 Binary files a/ui/txs/__screenshots__/TxsListItem.pw.tsx_dark-color-mode_base-view-dark-mode-1.png and b/ui/txs/__screenshots__/TxsListItem.pw.tsx_dark-color-mode_base-view-dark-mode-1.png differ diff --git a/ui/txs/__screenshots__/TxsListItem.pw.tsx_default_base-view-dark-mode-1.png b/ui/txs/__screenshots__/TxsListItem.pw.tsx_default_base-view-dark-mode-1.png index 2dac9221c3..f05b6f2ebc 100644 Binary files a/ui/txs/__screenshots__/TxsListItem.pw.tsx_default_base-view-dark-mode-1.png and b/ui/txs/__screenshots__/TxsListItem.pw.tsx_default_base-view-dark-mode-1.png differ diff --git a/ui/txs/__screenshots__/TxsListItem.pw.tsx_default_with-base-address-1.png b/ui/txs/__screenshots__/TxsListItem.pw.tsx_default_with-base-address-1.png index 8557a1f28a..664af3b022 100644 Binary files a/ui/txs/__screenshots__/TxsListItem.pw.tsx_default_with-base-address-1.png and b/ui/txs/__screenshots__/TxsListItem.pw.tsx_default_with-base-address-1.png differ diff --git a/ui/txs/__screenshots__/TxsTable.pw.tsx_dark-color-mode_base-view-dark-mode-1.png b/ui/txs/__screenshots__/TxsTable.pw.tsx_dark-color-mode_base-view-dark-mode-1.png index 08323441ca..7c7587256b 100644 Binary files a/ui/txs/__screenshots__/TxsTable.pw.tsx_dark-color-mode_base-view-dark-mode-1.png and b/ui/txs/__screenshots__/TxsTable.pw.tsx_dark-color-mode_base-view-dark-mode-1.png differ diff --git a/ui/txs/__screenshots__/TxsTable.pw.tsx_default_base-view-dark-mode-1.png b/ui/txs/__screenshots__/TxsTable.pw.tsx_default_base-view-dark-mode-1.png index ec4fb6b415..97a42a009c 100644 Binary files a/ui/txs/__screenshots__/TxsTable.pw.tsx_default_base-view-dark-mode-1.png and b/ui/txs/__screenshots__/TxsTable.pw.tsx_default_base-view-dark-mode-1.png differ diff --git a/ui/txs/__screenshots__/TxsTable.pw.tsx_default_base-view-screen-xl-1.png b/ui/txs/__screenshots__/TxsTable.pw.tsx_default_base-view-screen-xl-1.png index 1cfcf7fc1c..59a897206e 100644 Binary files a/ui/txs/__screenshots__/TxsTable.pw.tsx_default_base-view-screen-xl-1.png and b/ui/txs/__screenshots__/TxsTable.pw.tsx_default_base-view-screen-xl-1.png differ