diff --git a/mocks/txs/tx.ts b/mocks/txs/tx.ts index 82a0653035..803eb0b9e0 100644 --- a/mocks/txs/tx.ts +++ b/mocks/txs/tx.ts @@ -68,8 +68,25 @@ export const base: Transaction = { has_error_in_internal_txs: false, }; +export const withWatchListNames: Transaction = { + ...base, + hash: '0x62d597ebcf3e8d60096dd0363bc2f0f5e2df27ba1dacd696c51aa7c9409f3194', + from: { + ...base.from, + watchlist_names: [ + { label: 'from #1', display_name: 'from utka' }, + { label: 'kitty', display_name: 'kitty kitty kitty cat where are you' }, + ], + }, + to: { + ...base.to, + watchlist_names: [ { label: 'to #1', display_name: 'to utka' } ], + } as Transaction['to'], +}; + export const withContractCreation: Transaction = { ...base, + hash: '0x62d597ebcf3e8d60096dd0363bc2f0f5e2df27ba1dacd696c51aa7c9409f3195', to: null, created_contract: { hash: '0xdda21946FF3FAa027104b15BE6970CA756439F5a', @@ -88,6 +105,7 @@ export const withContractCreation: Transaction = { export const withTokenTransfer: Transaction = { ...base, + hash: '0x62d597ebcf3e8d60096dd0363bc2f0f5e2df27ba1dacd696c51aa7c9409f3196', to: { hash: '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859', implementation_name: null, 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 a987d3de8f..53ad08794f 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 6297cffaec..f6e0c639a8 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 ce212ad1b2..f82bc87b3f 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/home/LatestTxs.pw.tsx b/ui/home/LatestTxs.pw.tsx index 13cea89dd9..6e16add22f 100644 --- a/ui/home/LatestTxs.pw.tsx +++ b/ui/home/LatestTxs.pw.tsx @@ -21,6 +21,7 @@ test.describe('mobile', () => { txMock.base, txMock.withContractCreation, txMock.withTokenTransfer, + txMock.withWatchListNames, ]), })); @@ -41,6 +42,7 @@ test('default view +@dark-mode', async({ mount, page }) => { txMock.base, txMock.withContractCreation, txMock.withTokenTransfer, + txMock.withWatchListNames, ]), })); diff --git a/ui/home/LatestTxsItem.tsx b/ui/home/LatestTxsItem.tsx index 6101e24e12..1c5010591f 100644 --- a/ui/home/LatestTxsItem.tsx +++ b/ui/home/LatestTxsItem.tsx @@ -17,6 +17,7 @@ import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement'; import Icon from 'ui/shared/chakra/Icon'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; +import TxWatchListTags from 'ui/shared/tx/TxWatchListTags'; import TxStatus from 'ui/shared/TxStatus'; import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo'; import TxType from 'ui/txs/TxType'; @@ -32,89 +33,92 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => { const columnNum = config.UI.views.tx.hiddenFields?.value && config.UI.views.tx.hiddenFields?.tx_fee ? 2 : 3; return ( - - - - - - - - - - - - { tx.timestamp && ( - - { timeAgo } - - ) } - - - - - + + + + + + + + + + { tx.timestamp && ( + + { timeAgo } + + ) } + + + + + + + - + { dataTo && ( - { 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 - { getValueWithUnit(tx.fee.value).dp(5).toFormat() } - ) } - + + { !config.UI.views.tx.hiddenFields?.value && ( + + { config.chain.currency.symbol } + { getValueWithUnit(tx.value).dp(5).toFormat() } + + ) } + { !config.UI.views.tx.hiddenFields?.tx_fee && ( + + Fee + { getValueWithUnit(tx.fee.value).dp(5).toFormat() } + + ) } + + ); }; diff --git a/ui/home/LatestTxsItemMobile.tsx b/ui/home/LatestTxsItemMobile.tsx index c8f11ddc89..0bb8424ac3 100644 --- a/ui/home/LatestTxsItemMobile.tsx +++ b/ui/home/LatestTxsItemMobile.tsx @@ -16,6 +16,7 @@ import useTimeAgoIncrement from 'lib/hooks/useTimeAgoIncrement'; import Icon from 'ui/shared/chakra/Icon'; import AddressEntity from 'ui/shared/entities/address/AddressEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; +import TxWatchListTags from 'ui/shared/tx/TxWatchListTags'; import TxStatus from 'ui/shared/TxStatus'; import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo'; import TxType from 'ui/txs/TxType'; @@ -39,9 +40,10 @@ const LatestTxsItem = ({ tx, isLoading }: Props) => { display={{ base: 'block', lg: 'none' }} > - + + diff --git a/ui/home/LatestWatchlistTxs.tsx b/ui/home/LatestWatchlistTxs.tsx index 933547cae2..f191b80d96 100644 --- a/ui/home/LatestWatchlistTxs.tsx +++ b/ui/home/LatestWatchlistTxs.tsx @@ -10,6 +10,7 @@ import { TX } from 'stubs/tx'; import LinkInternal from 'ui/shared/LinkInternal'; import LatestTxsItem from './LatestTxsItem'; +import LatestTxsItemMobile from './LatestTxsItemMobile'; const LatestWatchlistTxs = () => { useRedirectForInvalidAuthToken(); @@ -33,7 +34,16 @@ const LatestWatchlistTxs = () => { const txsUrl = route({ pathname: '/txs', query: { tab: 'watchlist' } }); return ( <> - + + { data.slice(0, txsCount).map(((tx, index) => ( + + ))) } + + { data.slice(0, txsCount).map(((tx, index) => ( { + const tags = [ + ...(tx.from?.watchlist_names || []), + ...(tx.to?.watchlist_names || []), + ].filter(Boolean); + + if (tags.length === 0) { + return null; + } + + return ( + + { tags.map((tag) => ( + + { tag.display_name } + + )) } + + ); +}; + +export default React.memo(TxWatchListTags); diff --git a/ui/tx/__screenshots__/TxDetails.pw.tsx_default_creating-contact-1.png b/ui/tx/__screenshots__/TxDetails.pw.tsx_default_creating-contact-1.png index 5e7dc81500..26a0a022d2 100644 Binary files a/ui/tx/__screenshots__/TxDetails.pw.tsx_default_creating-contact-1.png and b/ui/tx/__screenshots__/TxDetails.pw.tsx_default_creating-contact-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 8f0b167706..8f5723648c 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 37da55c605..ca000437b6 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/txs/TxsListItem.pw.tsx b/ui/txs/TxsListItem.pw.tsx index 17ac4f1bf1..945ce74011 100644 --- a/ui/txs/TxsListItem.pw.tsx +++ b/ui/txs/TxsListItem.pw.tsx @@ -11,7 +11,7 @@ test.use({ viewport: devices['iPhone 13 Pro'].viewport }); test('base view +@dark-mode', async({ mount }) => { const component = await mount( - + , ); @@ -21,7 +21,7 @@ test('base view +@dark-mode', async({ mount }) => { test('with base address', async({ mount }) => { const component = await mount( - + , ); diff --git a/ui/txs/TxsListItem.tsx b/ui/txs/TxsListItem.tsx index 76e5a233be..b938651ff3 100644 --- a/ui/txs/TxsListItem.tsx +++ b/ui/txs/TxsListItem.tsx @@ -18,6 +18,7 @@ import BlockEntity from 'ui/shared/entities/block/BlockEntity'; import TxEntity from 'ui/shared/entities/tx/TxEntity'; import InOutTag from 'ui/shared/InOutTag'; import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile'; +import TxWatchListTags from 'ui/shared/tx/TxWatchListTags'; import TxStatus from 'ui/shared/TxStatus'; import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo'; import TxType from 'ui/txs/TxType'; @@ -44,9 +45,10 @@ const TxsListItem = ({ tx, isLoading, showBlockInfo, currentAddress, enableTimeI return ( - + + diff --git a/ui/txs/TxsTable.pw.tsx b/ui/txs/TxsTable.pw.tsx index 7a08480a9c..c2433456b5 100644 --- a/ui/txs/TxsTable.pw.tsx +++ b/ui/txs/TxsTable.pw.tsx @@ -13,7 +13,7 @@ test.describe('base view', () => { const component = await mount( { /* eslint-disable-next-line react/jsx-no-bind */ } - () => {} } top={ 0 } showBlockInfo showSocketInfo={ false }/> + () => {} } top={ 0 } showBlockInfo showSocketInfo={ false }/> , ); @@ -27,7 +27,7 @@ test.describe('base view', () => { const component = await mount( { /* eslint-disable-next-line react/jsx-no-bind */ } - () => {} } top={ 0 } showBlockInfo showSocketInfo={ false }/> + () => {} } top={ 0 } showBlockInfo showSocketInfo={ false }/> , ); diff --git a/ui/txs/TxsTableItem.tsx b/ui/txs/TxsTableItem.tsx index 152e42eddf..327efca702 100644 --- a/ui/txs/TxsTableItem.tsx +++ b/ui/txs/TxsTableItem.tsx @@ -23,6 +23,7 @@ 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 InOutTag from 'ui/shared/InOutTag'; +import TxWatchListTags from 'ui/shared/tx/TxWatchListTags'; import TxStatus from 'ui/shared/TxStatus'; import TxAdditionalInfo from 'ui/txs/TxAdditionalInfo'; @@ -95,6 +96,7 @@ const TxsTableItem = ({ tx, showBlockInfo, currentAddress, enableTimeIncrement, + 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 fdf56270a1..42cc8978e5 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 e375796238..030176bdcc 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 0ad3dade19..ba21d65688 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 740c5b33c9..e030f3d54b 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 23db20d423..6e5dda4c31 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 cb7aaf6942..f4a76d6f03 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