diff --git a/mocks/txs/tx.ts b/mocks/txs/tx.ts index a84c35fa2c..bae57c630e 100644 --- a/mocks/txs/tx.ts +++ b/mocks/txs/tx.ts @@ -391,3 +391,8 @@ export const withRecipientNameTag = { ...withRecipientEns, to: addressMock.withNameTag, }; + +export const withRecipientContract = { + ...withRecipientEns, + to: addressMock.contract, +}; diff --git a/types/api/addressParams.ts b/types/api/addressParams.ts index b7bc4393b8..069302e808 100644 --- a/types/api/addressParams.ts +++ b/types/api/addressParams.ts @@ -2,7 +2,7 @@ import type { AddressMetadataTagApi } from './addressMetadata'; export interface AddressImplementation { address: string; - name: string | null; + name?: string | null; } export interface AddressTag { diff --git a/ui/address/ensDomains/AddressEnsDomains.tsx b/ui/address/ensDomains/AddressEnsDomains.tsx index 554e3e274e..fe046db30a 100644 --- a/ui/address/ensDomains/AddressEnsDomains.tsx +++ b/ui/address/ensDomains/AddressEnsDomains.tsx @@ -42,7 +42,7 @@ const DomainsGrid = ({ data }: { data: Array }) => { rowGap={ 4 } mt={ 2 } > - { data.slice(0, 9).map((domain) => ) } + { data.slice(0, 9).map((domain) => ) } ); }; @@ -126,7 +126,7 @@ const AddressEnsDomains = ({ query, addressHash, mainDomainName }: Props) => { Primary* - + { mainDomain.expiry_date && (expires { dayjs(mainDomain.expiry_date).fromNow() }) } diff --git a/ui/nameDomains/NameDomainsListItem.tsx b/ui/nameDomains/NameDomainsListItem.tsx index 137e1caea9..63ba315ffa 100644 --- a/ui/nameDomains/NameDomainsListItem.tsx +++ b/ui/nameDomains/NameDomainsListItem.tsx @@ -25,7 +25,7 @@ const NameDomainsListItem = ({ Domain - + { resolvedAddress && ( diff --git a/ui/nameDomains/NameDomainsTableItem.tsx b/ui/nameDomains/NameDomainsTableItem.tsx index 35fa7b0a46..d9d1bc5479 100644 --- a/ui/nameDomains/NameDomainsTableItem.tsx +++ b/ui/nameDomains/NameDomainsTableItem.tsx @@ -24,7 +24,7 @@ const NameDomainsTableItem = ({ return ( - + { resolvedAddress && } diff --git a/ui/pages/Address.tsx b/ui/pages/Address.tsx index 6b79b34932..4914c79e1e 100644 --- a/ui/pages/Address.tsx +++ b/ui/pages/Address.tsx @@ -272,7 +272,11 @@ const AddressPageContent = () => { const titleContentAfter = ( ); @@ -302,7 +306,7 @@ const AddressPageContent = () => { { addressQuery.data?.ens_domain_name && ( { fontWeight={ 500 } noLink isSafeAddress={ isSafeAddress } - iconColor={ isSafeAddress ? safeIconColor : undefined } + icon={{ color: isSafeAddress ? safeIconColor : undefined }} mr={ 4 } /> { !isLoading && addressQuery.data?.is_contract && addressQuery.data.token && diff --git a/ui/pages/Block.tsx b/ui/pages/Block.tsx index 573f58e5d5..9adf80c9cd 100644 --- a/ui/pages/Block.tsx +++ b/ui/pages/Block.tsx @@ -167,7 +167,7 @@ const BlockPageContent = () => { })(); const titleSecondRow = ( <> - { !config.UI.views.block.hiddenFields?.miner && ( + { !config.UI.views.block.hiddenFields?.miner && blockQuery.data?.miner && ( { { `${ capitalize(getNetworkValidationActionText()) } by` } - + ) } diff --git a/ui/pages/CsvExport.tsx b/ui/pages/CsvExport.tsx index 6e69b7066f..c277401659 100644 --- a/ui/pages/CsvExport.tsx +++ b/ui/pages/CsvExport.tsx @@ -155,7 +155,7 @@ const CsvExport = () => { const limit = (configQuery.data?.limit || 10_000).toLocaleString(undefined, { maximumFractionDigits: 3, notation: 'compact' }); - if (exportTypeParam === 'holders') { + if (exportTypeParam === 'holders' && tokenQuery.data) { return ( Export { exportType.text } for token @@ -173,6 +173,10 @@ const CsvExport = () => { ); } + if (!addressQuery.data) { + return null; + } + return ( Export { exportType.text } for address diff --git a/ui/pages/NameDomain.tsx b/ui/pages/NameDomain.tsx index 3ad20789af..d1ca3a158e 100644 --- a/ui/pages/NameDomain.tsx +++ b/ui/pages/NameDomain.tsx @@ -57,7 +57,7 @@ const NameDomain = () => { flexWrap={{ base: 'wrap', lg: 'nowrap' }} > { beforeTitle={ ( ) } backLink={ backLink } diff --git a/ui/shared/Page/specs/LongNameAndManyTags.tsx b/ui/shared/Page/specs/LongNameAndManyTags.tsx index 454f1100c9..f83878eec2 100644 --- a/ui/shared/Page/specs/LongNameAndManyTags.tsx +++ b/ui/shared/Page/specs/LongNameAndManyTags.tsx @@ -52,7 +52,7 @@ const LongNameAndManyTags = () => { beforeTitle={ ( ) } contentAfter={ contentAfter } diff --git a/ui/shared/TokenTransferSnippet/TokenTransferSnippetNft.tsx b/ui/shared/TokenTransferSnippet/TokenTransferSnippetNft.tsx index be304f70db..7026f68a2d 100644 --- a/ui/shared/TokenTransferSnippet/TokenTransferSnippetNft.tsx +++ b/ui/shared/TokenTransferSnippet/TokenTransferSnippetNft.tsx @@ -29,7 +29,7 @@ const NftTokenTransferSnippet = ({ value, token, tokenId }: Props) => { hash={ token.address } id={ tokenId } fontWeight={ 600 } - iconSize="md" + icon={{ size: 'md' }} maxW={{ base: '100%', lg: '150px' }} w="auto" flexShrink={ 0 } diff --git a/ui/shared/entities/address/AddressEntity.pw.tsx b/ui/shared/entities/address/AddressEntity.pw.tsx index c75093ed2b..a06d3a6092 100644 --- a/ui/shared/entities/address/AddressEntity.pw.tsx +++ b/ui/shared/entities/address/AddressEntity.pw.tsx @@ -9,7 +9,7 @@ import { test, expect } from 'playwright/lib'; import AddressEntity from './AddressEntity'; -const iconSizes = [ 'md', 'lg' ]; +const iconSizes = [ 'md', 'lg' ] as const; test.use({ viewport: { width: 180, height: 140 } }); @@ -19,7 +19,7 @@ test.describe('icon size', () => { const component = await render( , ); @@ -69,7 +69,7 @@ test.describe('proxy contract', () => { test('without implementation name', async({ render, page }) => { const component = await render( , ); @@ -81,7 +81,7 @@ test.describe('proxy contract', () => { test('without any name', async({ render, page }) => { const component = await render( , ); diff --git a/ui/shared/entities/address/AddressEntity.tsx b/ui/shared/entities/address/AddressEntity.tsx index cfa4b50e07..514100ecf1 100644 --- a/ui/shared/entities/address/AddressEntity.tsx +++ b/ui/shared/entities/address/AddressEntity.tsx @@ -1,6 +1,5 @@ import type { As } from '@chakra-ui/react'; import { Box, Flex, Skeleton, Tooltip, chakra, VStack } from '@chakra-ui/react'; -import _omit from 'lodash/omit'; import React from 'react'; import type { AddressParam } from 'types/api/addressParams'; @@ -10,7 +9,7 @@ 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'; +import { distributeEntityProps, getIconProps } from '../base/utils'; import AddressEntityContentProxy from './AddressEntityContentProxy'; import AddressIdenticon from './AddressIdenticon'; @@ -29,10 +28,7 @@ const Link = chakra((props: LinkProps) => { ); }); -type IconProps = Omit & Pick & { - asProp?: As; - name?: EntityBase.IconBaseProps['name']; -}; +type IconProps = Pick & EntityBase.IconBaseProps; const Icon = (props: IconProps) => { if (props.noIcon) { @@ -40,8 +36,8 @@ const Icon = (props: IconProps) => { } const styles = { - ...getIconProps(props.iconSize), - marginRight: 2, + ...getIconProps(props.size), + marginRight: props.marginRight ?? 2, }; if (props.isLoading) { @@ -80,7 +76,7 @@ const Icon = (props: IconProps) => { return ( @@ -137,18 +133,18 @@ const Copy = (props: CopyProps) => { const Container = EntityBase.Container; +interface AddressProp extends Partial { + hash: string; +} + export interface EntityProps extends EntityBase.EntityBaseProps { - address: Pick; + address: AddressProp; isSafeAddress?: boolean; noHighlight?: boolean; } const AddressEntry = (props: EntityProps) => { - const linkProps = _omit(props, [ 'className' ]); - const partsProps = _omit(props, [ 'className', 'onClick' ]); - + const partsProps = distributeEntityProps(props); const context = useAddressHighlightContext(props.noHighlight); return ( @@ -162,16 +158,16 @@ const AddressEntry = (props: EntityProps) => { position="relative" zIndex={ 0 } > - - - + + + - + ); }; -export default React.memo(chakra(AddressEntry)); +export default React.memo(chakra(AddressEntry)); export { Container, diff --git a/ui/shared/entities/base/components.tsx b/ui/shared/entities/base/components.tsx index 67a96e33d5..a5be834d51 100644 --- a/ui/shared/entities/base/components.tsx +++ b/ui/shared/entities/base/components.tsx @@ -18,9 +18,7 @@ export type Truncation = 'constant' | 'constant_long' | 'dynamic' | 'tail' | 'no export interface EntityBaseProps { className?: string; href?: string; - iconName?: IconName; - iconSize?: IconSize; - iconColor?: IconProps['color']; + icon?: EntityIconProps; isExternal?: boolean; isLoading?: boolean; noCopy?: boolean; @@ -81,28 +79,30 @@ const Link = chakra(({ isLoading, children, isExternal, onClick, href, noLink }: ); }); -export interface IconBaseProps extends Pick { - name: IconName; - color?: IconProps['color']; - borderRadius?: IconProps['borderRadius']; +interface EntityIconProps extends Pick { + name?: IconName; + size?: IconSize; } -const Icon = ({ isLoading, iconSize, noIcon, name, color, borderRadius }: IconBaseProps) => { +export interface IconBaseProps extends Pick, EntityIconProps { +} + +const Icon = ({ isLoading, noIcon, size, name, color, borderRadius, marginRight, boxSize }: IconBaseProps) => { const defaultColor = useColorModeValue('gray.500', 'gray.400'); - if (noIcon) { + if (noIcon || !name) { return null; } - const styles = getIconProps(iconSize); + const styles = getIconProps(size); return ( (props: Props) { + const { className, onClick, icon, ...restProps } = props; + + return { + container: { className }, + icon: { ...restProps, ...icon }, + link: { ...restProps, onClick }, + content: restProps, + symbol: restProps, + copy: restProps, + }; +} diff --git a/ui/shared/entities/blob/BlobEntity.tsx b/ui/shared/entities/blob/BlobEntity.tsx index 13953eb86f..7ca61da9e9 100644 --- a/ui/shared/entities/blob/BlobEntity.tsx +++ b/ui/shared/entities/blob/BlobEntity.tsx @@ -1,11 +1,13 @@ +import type { As } from '@chakra-ui/react'; import { chakra } from '@chakra-ui/react'; -import _omit from 'lodash/omit'; import React from 'react'; import { route } from 'nextjs-routes'; import * as EntityBase from 'ui/shared/entities/base/components'; +import { distributeEntityProps } from '../base/utils'; + type LinkProps = EntityBase.LinkBaseProps & Pick; const Link = chakra((props: LinkProps) => { @@ -21,11 +23,7 @@ const Link = chakra((props: LinkProps) => { ); }); -type IconProps = Omit & { - name?: EntityBase.IconBaseProps['name']; -}; - -const Icon = (props: IconProps) => { +const Icon = (props: EntityBase.IconBaseProps) => { return ( { - const linkProps = _omit(props, [ 'className' ]); - const partsProps = _omit(props, [ 'className', 'onClick' ]); + const partsProps = distributeEntityProps(props); return ( - - - - + + + + - + ); }; -export default React.memo(chakra(BlobEntity)); +export default React.memo(chakra(BlobEntity)); export { Container, diff --git a/ui/shared/entities/blob/BlobEntityL1.tsx b/ui/shared/entities/blob/BlobEntityL1.tsx index ef1f3d2ae5..3282feeb4d 100644 --- a/ui/shared/entities/blob/BlobEntityL1.tsx +++ b/ui/shared/entities/blob/BlobEntityL1.tsx @@ -1,5 +1,4 @@ import { chakra } from '@chakra-ui/react'; -import _omit from 'lodash/omit'; import React from 'react'; import { route } from 'nextjs-routes'; @@ -11,25 +10,17 @@ import * as BlobEntity from './BlobEntity'; const rollupFeature = config.features.rollup; const BlobEntityL1 = (props: BlobEntity.EntityProps) => { - const partsProps = _omit(props, [ 'className', 'onClick' ]); - const linkProps = _omit(props, [ 'className' ]); - if (!rollupFeature.isEnabled) { return null; } + const defaultHref = rollupFeature.L1BaseUrl + route({ + pathname: '/blobs/[hash]', + query: { hash: props.hash }, + }); + return ( - - - - - - - + ); }; diff --git a/ui/shared/entities/block/BatchEntityL2.tsx b/ui/shared/entities/block/BatchEntityL2.tsx index a0572b3b7d..dd4032b731 100644 --- a/ui/shared/entities/block/BatchEntityL2.tsx +++ b/ui/shared/entities/block/BatchEntityL2.tsx @@ -1,5 +1,4 @@ import { chakra } from '@chakra-ui/react'; -import _omit from 'lodash/omit'; import React from 'react'; import { route } from 'nextjs-routes'; @@ -11,23 +10,18 @@ import * as BlockEntity from './BlockEntity'; const rollupFeature = config.features.rollup; const BatchEntityL2 = (props: BlockEntity.EntityProps) => { - const linkProps = _omit(props, [ 'className' ]); - const partsProps = _omit(props, [ 'className', 'onClick' ]); - if (!rollupFeature.isEnabled) { return null; } + const defaultHref = route({ pathname: '/batches/[number]', query: { number: props.number.toString() } }); + return ( - - - - - - + ); }; diff --git a/ui/shared/entities/block/BlockEntity.pw.tsx b/ui/shared/entities/block/BlockEntity.pw.tsx index 0c1b858024..138f42f87d 100644 --- a/ui/shared/entities/block/BlockEntity.pw.tsx +++ b/ui/shared/entities/block/BlockEntity.pw.tsx @@ -4,7 +4,7 @@ import { test, expect } from 'playwright/lib'; import BlockEntity from './BlockEntity'; -const iconSizes = [ 'md', 'lg' ]; +const iconSizes = [ 'md', 'lg' ] as const; test.use({ viewport: { width: 180, height: 30 } }); @@ -14,7 +14,7 @@ test.describe('icon sizes', () => { const component = await render( , ); diff --git a/ui/shared/entities/block/BlockEntity.tsx b/ui/shared/entities/block/BlockEntity.tsx index 60753d128c..c911390310 100644 --- a/ui/shared/entities/block/BlockEntity.tsx +++ b/ui/shared/entities/block/BlockEntity.tsx @@ -1,11 +1,13 @@ +import type { As } from '@chakra-ui/react'; import { chakra } from '@chakra-ui/react'; -import _omit from 'lodash/omit'; import React from 'react'; import { route } from 'nextjs-routes'; import * as EntityBase from 'ui/shared/entities/base/components'; +import { distributeEntityProps } from '../base/utils'; + type LinkProps = EntityBase.LinkBaseProps & Partial>; const Link = chakra((props: LinkProps) => { @@ -22,11 +24,7 @@ const Link = chakra((props: LinkProps) => { ); }); -type IconProps = Omit & { - name?: EntityBase.IconBaseProps['name']; -}; - -const Icon = (props: IconProps) => { +const Icon = (props: EntityBase.IconBaseProps) => { return ( { - const linkProps = _omit(props, [ 'className' ]); - const partsProps = _omit(props, [ 'className', 'onClick' ]); + const partsProps = distributeEntityProps(props); return ( - - - - + + + + ); }; -export default React.memo(chakra(BlockEntity)); +export default React.memo(chakra(BlockEntity)); export { Container, diff --git a/ui/shared/entities/block/BlockEntityL1.tsx b/ui/shared/entities/block/BlockEntityL1.tsx index a364685b29..93f4b6a301 100644 --- a/ui/shared/entities/block/BlockEntityL1.tsx +++ b/ui/shared/entities/block/BlockEntityL1.tsx @@ -1,5 +1,4 @@ import { chakra } from '@chakra-ui/react'; -import _omit from 'lodash/omit'; import React from 'react'; import { route } from 'nextjs-routes'; @@ -11,25 +10,16 @@ import * as BlockEntity from './BlockEntity'; const rollupFeature = config.features.rollup; const BlockEntityL1 = (props: BlockEntity.EntityProps) => { - const linkProps = _omit(props, [ 'className' ]); - const partsProps = _omit(props, [ 'className', 'onClick' ]); - if (!rollupFeature.isEnabled) { return null; } - return ( - - - - - - - ); + const defaultHref = rollupFeature.L1BaseUrl + route({ + pathname: '/block/[height_or_hash]', + query: { height_or_hash: props.hash ?? String(props.number) }, + }); + + return ; }; export default chakra(BlockEntityL1); diff --git a/ui/shared/entities/block/BlockEntityL2.tsx b/ui/shared/entities/block/BlockEntityL2.tsx index 1a0c3e06a8..c078495d0e 100644 --- a/ui/shared/entities/block/BlockEntityL2.tsx +++ b/ui/shared/entities/block/BlockEntityL2.tsx @@ -1,5 +1,4 @@ import { chakra } from '@chakra-ui/react'; -import _omit from 'lodash/omit'; import React from 'react'; import config from 'configs/app'; @@ -9,21 +8,11 @@ import * as BlockEntity from './BlockEntity'; const rollupFeature = config.features.rollup; const BlockEntityL2 = (props: BlockEntity.EntityProps) => { - const linkProps = _omit(props, [ 'className' ]); - const partsProps = _omit(props, [ 'className', 'onClick' ]); - if (!rollupFeature.isEnabled) { return null; } - return ( - - - - - - - ); + return ; }; export default chakra(BlockEntityL2); diff --git a/ui/shared/entities/ens/EnsEntity.pw.tsx b/ui/shared/entities/ens/EnsEntity.pw.tsx index bdc3ddffc6..42c445fe22 100644 --- a/ui/shared/entities/ens/EnsEntity.pw.tsx +++ b/ui/shared/entities/ens/EnsEntity.pw.tsx @@ -6,7 +6,7 @@ import { test, expect } from 'playwright/lib'; import EnsEntity from './EnsEntity'; const name = 'cat.eth'; -const iconSizes = [ 'md', 'lg' ]; +const iconSizes = [ 'md', 'lg' ] as const; test.use({ viewport: { width: 180, height: 30 } }); @@ -15,8 +15,8 @@ test.describe('icon size', () => { test(size, async({ render }) => { const component = await render( , ); @@ -28,7 +28,7 @@ test.describe('icon size', () => { test('loading', async({ render }) => { const component = await render( , ); @@ -39,7 +39,7 @@ test('loading', async({ render }) => { test('with long name', async({ render }) => { const component = await render( , ); @@ -51,7 +51,7 @@ test('with long name', async({ render }) => { test('customization', async({ render }) => { const component = await render( { const component = await render( , ); diff --git a/ui/shared/entities/ens/EnsEntity.tsx b/ui/shared/entities/ens/EnsEntity.tsx index f058eac915..8371f295d5 100644 --- a/ui/shared/entities/ens/EnsEntity.tsx +++ b/ui/shared/entities/ens/EnsEntity.tsx @@ -1,5 +1,5 @@ +import type { As } from '@chakra-ui/react'; import { Box, chakra, Flex, Image, PopoverBody, PopoverContent, PopoverTrigger, Portal, Skeleton, Text } from '@chakra-ui/react'; -import _omit from 'lodash/omit'; import React from 'react'; import type * as bens from '@blockscout/bens-types'; @@ -12,12 +12,12 @@ import IconSvg from 'ui/shared/IconSvg'; import LinkExternal from 'ui/shared/links/LinkExternal'; import TruncatedValue from 'ui/shared/TruncatedValue'; -import { getIconProps } from '../base/utils'; +import { distributeEntityProps, getIconProps } from '../base/utils'; -type LinkProps = EntityBase.LinkBaseProps & Pick; +type LinkProps = EntityBase.LinkBaseProps & Pick; const Link = chakra((props: LinkProps) => { - const defaultHref = route({ pathname: '/name-domains/[name]', query: { name: props.name } }); + const defaultHref = route({ pathname: '/name-domains/[name]', query: { name: props.domain } }); return ( { ); }); -type IconProps = Omit & Pick & { - iconName?: EntityBase.IconBaseProps['name']; -}; +type IconProps = Pick & EntityBase.IconBaseProps; const Icon = (props: IconProps) => { - const icon = ; + const icon = ; if (props.protocol) { - const styles = getIconProps(props.iconSize); + const styles = getIconProps(props.size); if (props.isLoading) { return ; @@ -98,24 +96,24 @@ const Icon = (props: IconProps) => { return icon; }; -type ContentProps = Omit & Pick; +type ContentProps = Omit & Pick; const Content = chakra((props: ContentProps) => { return ( ); }); -type CopyProps = Omit & Pick; +type CopyProps = Omit & Pick; const Copy = (props: CopyProps) => { return ( ); }; @@ -123,26 +121,25 @@ const Copy = (props: CopyProps) => { const Container = EntityBase.Container; export interface EntityProps extends EntityBase.EntityBaseProps { - name: string; + domain: string; protocol?: bens.ProtocolInfo | null; } const EnsEntity = (props: EntityProps) => { - const linkProps = _omit(props, [ 'className' ]); - const partsProps = _omit(props, [ 'className', 'onClick' ]); + const partsProps = distributeEntityProps(props); return ( - - - - + + + + - + ); }; -export default React.memo(chakra(EnsEntity)); +export default React.memo(chakra(EnsEntity)); export { Container, diff --git a/ui/shared/entities/nft/NftEntity.pw.tsx b/ui/shared/entities/nft/NftEntity.pw.tsx index 3b8437cdc3..9e055129d1 100644 --- a/ui/shared/entities/nft/NftEntity.pw.tsx +++ b/ui/shared/entities/nft/NftEntity.pw.tsx @@ -4,7 +4,7 @@ import { test, expect } from 'playwright/lib'; import NftEntity from './NftEntity'; -const iconSizes = [ 'md', 'lg' ]; +const iconSizes = [ 'md', 'lg' ] as const; const hash = '0xd789a607CEac2f0E14867de4EB15b15C9FFB5859'; test.use({ viewport: { width: 180, height: 30 } }); @@ -15,8 +15,8 @@ test.describe('icon sizes', () => { const component = await render( , ); @@ -29,7 +29,7 @@ test('loading', async({ render }) => { const component = await render( , ); @@ -41,7 +41,7 @@ test('long id', async({ render }) => { const component = await render( , ); @@ -52,7 +52,7 @@ test('customization', async({ render }) => { const component = await render( & { - name?: EntityBase.IconBaseProps['name']; -}; +const Container = EntityBase.Container; -const Icon = (props: IconProps) => { +const Icon = (props: EntityBase.IconBaseProps) => { if (props.noIcon) { return null; } @@ -21,7 +19,7 @@ const Icon = (props: IconProps) => { return ( ); @@ -59,20 +57,19 @@ export interface EntityProps extends EntityBase.EntityBaseProps { } const NftEntity = (props: EntityProps) => { - const linkProps = _omit(props, [ 'className' ]); - const partsProps = _omit(props, [ 'className', 'onClick' ]); + const partsProps = distributeEntityProps(props); return ( - - - - + + + + ); }; -export default React.memo(chakra(NftEntity)); +export default React.memo(chakra(NftEntity)); export { Container, diff --git a/ui/shared/entities/token/TokenEntity.pw.tsx b/ui/shared/entities/token/TokenEntity.pw.tsx index 4812927bb8..680eb917a1 100644 --- a/ui/shared/entities/token/TokenEntity.pw.tsx +++ b/ui/shared/entities/token/TokenEntity.pw.tsx @@ -6,7 +6,7 @@ import { test, expect } from 'playwright/lib'; import TokenEntity from './TokenEntity'; -const iconSizes = [ 'md', 'lg' ]; +const iconSizes = [ 'md', 'lg' ] as const; test.use({ viewport: { width: 300, height: 100 } }); @@ -16,7 +16,7 @@ test.describe('icon size', () => { const component = await render( , ); @@ -37,6 +37,7 @@ test('with logo, long name and symbol', async({ page, render }) => { await render( ; @@ -28,10 +27,7 @@ const Link = chakra((props: LinkProps) => { ); }); -type IconProps = Pick & { - marginRight?: ChakraProps['marginRight']; - boxSize?: ChakraProps['boxSize']; -}; +type IconProps = Pick & EntityBase.IconBaseProps; const Icon = (props: IconProps) => { if (props.noIcon) { @@ -40,7 +36,7 @@ const Icon = (props: IconProps) => { const styles = { marginRight: props.marginRight ?? 2, - boxSize: props.boxSize ?? getIconProps(props.iconSize).boxSize, + boxSize: props.boxSize ?? getIconProps(props.size).boxSize, borderRadius: 'base', flexShrink: 0, }; @@ -143,22 +139,21 @@ export interface EntityProps extends EntityBase.EntityBaseProps { } const TokenEntity = (props: EntityProps) => { - const linkProps = _omit(props, [ 'className' ]); - const partsProps = _omit(props, [ 'className', 'onClick' ]); + const partsProps = distributeEntityProps(props); return ( - - - - + + + + - - + + ); }; -export default React.memo(chakra(TokenEntity)); +export default React.memo(chakra(TokenEntity)); export { Container, diff --git a/ui/shared/entities/token/__screenshots__/TokenEntity.pw.tsx_default_icon-size-lg-1.png b/ui/shared/entities/token/__screenshots__/TokenEntity.pw.tsx_default_icon-size-lg-1.png index 6fd082b290..19f534970c 100644 Binary files a/ui/shared/entities/token/__screenshots__/TokenEntity.pw.tsx_default_icon-size-lg-1.png and b/ui/shared/entities/token/__screenshots__/TokenEntity.pw.tsx_default_icon-size-lg-1.png differ diff --git a/ui/shared/entities/token/__screenshots__/TokenEntity.pw.tsx_default_icon-size-md-1.png b/ui/shared/entities/token/__screenshots__/TokenEntity.pw.tsx_default_icon-size-md-1.png index e6b102f066..85500c1d02 100644 Binary files a/ui/shared/entities/token/__screenshots__/TokenEntity.pw.tsx_default_icon-size-md-1.png and b/ui/shared/entities/token/__screenshots__/TokenEntity.pw.tsx_default_icon-size-md-1.png differ diff --git a/ui/shared/entities/token/__screenshots__/TokenEntity.pw.tsx_default_with-logo-long-name-and-symbol-1.png b/ui/shared/entities/token/__screenshots__/TokenEntity.pw.tsx_default_with-logo-long-name-and-symbol-1.png index 5534d9df03..a92738d281 100644 Binary files a/ui/shared/entities/token/__screenshots__/TokenEntity.pw.tsx_default_with-logo-long-name-and-symbol-1.png and b/ui/shared/entities/token/__screenshots__/TokenEntity.pw.tsx_default_with-logo-long-name-and-symbol-1.png differ diff --git a/ui/shared/entities/token/__screenshots__/TokenEntity.pw.tsx_default_with-logo-long-name-and-symbol-2.png b/ui/shared/entities/token/__screenshots__/TokenEntity.pw.tsx_default_with-logo-long-name-and-symbol-2.png index 9d8d7e86d8..2c9714ddc1 100644 Binary files a/ui/shared/entities/token/__screenshots__/TokenEntity.pw.tsx_default_with-logo-long-name-and-symbol-2.png and b/ui/shared/entities/token/__screenshots__/TokenEntity.pw.tsx_default_with-logo-long-name-and-symbol-2.png differ diff --git a/ui/shared/entities/tx/TxEntity.pw.tsx b/ui/shared/entities/tx/TxEntity.pw.tsx index 10a32cefee..2dc5a9a9b6 100644 --- a/ui/shared/entities/tx/TxEntity.pw.tsx +++ b/ui/shared/entities/tx/TxEntity.pw.tsx @@ -5,7 +5,7 @@ import { test, expect } from 'playwright/lib'; import TxEntity from './TxEntity'; const hash = '0x376db52955d5bce114d0ccea2dcf22289b4eae1b86bcae5a59bb5fdbfef48899'; -const iconSizes = [ 'md', 'lg' ]; +const iconSizes = [ 'md', 'lg' ] as const; test.use({ viewport: { width: 180, height: 30 } }); @@ -15,7 +15,7 @@ test.describe('icon size', () => { const component = await render( , ); diff --git a/ui/shared/entities/tx/TxEntity.tsx b/ui/shared/entities/tx/TxEntity.tsx index 4a9b727cae..8cb00de261 100644 --- a/ui/shared/entities/tx/TxEntity.tsx +++ b/ui/shared/entities/tx/TxEntity.tsx @@ -1,11 +1,13 @@ +import type { As } from '@chakra-ui/react'; import { chakra } from '@chakra-ui/react'; -import _omit from 'lodash/omit'; import React from 'react'; import { route } from 'nextjs-routes'; import * as EntityBase from 'ui/shared/entities/base/components'; +import { distributeEntityProps } from '../base/utils'; + type LinkProps = EntityBase.LinkBaseProps & Pick; const Link = chakra((props: LinkProps) => { @@ -21,11 +23,7 @@ const Link = chakra((props: LinkProps) => { ); }); -type IconProps = Omit & { - name?: EntityBase.IconBaseProps['name']; -}; - -const Icon = (props: IconProps) => { +const Icon = (props: EntityBase.IconBaseProps) => { return ( { - const linkProps = _omit(props, [ 'className' ]); - const partsProps = _omit(props, [ 'className', 'onClick' ]); + const partsProps = distributeEntityProps(props); return ( - - - - + + + + - + ); }; -export default React.memo(chakra(TxEntity)); +export default React.memo(chakra(TxEntity)); export { Container, diff --git a/ui/shared/entities/tx/TxEntityL1.tsx b/ui/shared/entities/tx/TxEntityL1.tsx index 635116dd0a..cf8baf4dfb 100644 --- a/ui/shared/entities/tx/TxEntityL1.tsx +++ b/ui/shared/entities/tx/TxEntityL1.tsx @@ -1,5 +1,4 @@ import { chakra } from '@chakra-ui/react'; -import _omit from 'lodash/omit'; import React from 'react'; import { route } from 'nextjs-routes'; @@ -11,26 +10,16 @@ import * as TxEntity from './TxEntity'; const rollupFeature = config.features.rollup; const TxEntityL1 = (props: TxEntity.EntityProps) => { - const partsProps = _omit(props, [ 'className', 'onClick' ]); - const linkProps = _omit(props, [ 'className' ]); - if (!rollupFeature.isEnabled) { return null; } - return ( - - - - - - - - ); + const defaultHref = rollupFeature.L1BaseUrl + route({ + pathname: '/tx/[hash]', + query: { hash: props.hash }, + }); + + return ; }; export default chakra(TxEntityL1); diff --git a/ui/shared/entities/userOp/UserOpEntity.pw.tsx b/ui/shared/entities/userOp/UserOpEntity.pw.tsx index d1d3704381..d08ce6a3ba 100644 --- a/ui/shared/entities/userOp/UserOpEntity.pw.tsx +++ b/ui/shared/entities/userOp/UserOpEntity.pw.tsx @@ -5,7 +5,7 @@ import { test, expect } from 'playwright/lib'; import UserOpEntity from './UserOpEntity'; const hash = '0x376db52955d5bce114d0ccea2dcf22289b4eae1b86bcae5a59bb5fdbfef48899'; -const iconSizes = [ 'md', 'lg' ]; +const iconSizes = [ 'md', 'lg' ] as const; test.use({ viewport: { width: 180, height: 30 } }); @@ -15,7 +15,7 @@ test.describe('icon size', () => { const component = await render( , ); diff --git a/ui/shared/entities/userOp/UserOpEntity.tsx b/ui/shared/entities/userOp/UserOpEntity.tsx index c4a9022d31..718ce7988e 100644 --- a/ui/shared/entities/userOp/UserOpEntity.tsx +++ b/ui/shared/entities/userOp/UserOpEntity.tsx @@ -1,11 +1,13 @@ +import type { As } from '@chakra-ui/react'; import { chakra } from '@chakra-ui/react'; -import _omit from 'lodash/omit'; import React from 'react'; import { route } from 'nextjs-routes'; import * as EntityBase from 'ui/shared/entities/base/components'; +import { distributeEntityProps } from '../base/utils'; + type LinkProps = EntityBase.LinkBaseProps & Pick; const Link = chakra((props: LinkProps) => { @@ -21,11 +23,7 @@ const Link = chakra((props: LinkProps) => { ); }); -type IconProps = Omit & { - name?: EntityBase.IconBaseProps['name']; -}; - -const Icon = (props: IconProps) => { +const Icon = (props: EntityBase.IconBaseProps) => { return ( { - const linkProps = _omit(props, [ 'className' ]); - const partsProps = _omit(props, [ 'className', 'onClick' ]); + const partsProps = distributeEntityProps(props); return ( - - - - + + + + - + ); }; -export default React.memo(chakra(UserOpEntity)); +export default React.memo(chakra(UserOpEntity)); export { Container, diff --git a/ui/shared/logs/LogDecodedInputDataTable.tsx b/ui/shared/logs/LogDecodedInputDataTable.tsx index f712836a50..07505d8803 100644 --- a/ui/shared/logs/LogDecodedInputDataTable.tsx +++ b/ui/shared/logs/LogDecodedInputDataTable.tsx @@ -33,7 +33,7 @@ const Row = ({ name, type, indexed, value, isLoading }: ArrayElement ); diff --git a/ui/shared/logs/LogItem.tsx b/ui/shared/logs/LogItem.tsx index 65f0cc5c6d..f74fbf1300 100644 --- a/ui/shared/logs/LogItem.tsx +++ b/ui/shared/logs/LogItem.tsx @@ -53,7 +53,7 @@ const LogItem = ({ address, index, topics, data, decoded, type, tx_hash: txHash, ) } { hasTxInfo ? Transaction : Address } - { type === 'address' ? ( + { type === 'address' && txHash ? ( { case 'address': { return ( ); diff --git a/ui/shared/tx/interpretation/TxInterpretation.tsx b/ui/shared/tx/interpretation/TxInterpretation.tsx index 88302f4794..479bcee08b 100644 --- a/ui/shared/tx/interpretation/TxInterpretation.tsx +++ b/ui/shared/tx/interpretation/TxInterpretation.tsx @@ -56,6 +56,7 @@ const TxInterpretationElementByType = ( - + { chunks.map((chunk, index) => { return ( diff --git a/ui/snippets/walletMenu/WalletMenuContent.tsx b/ui/snippets/walletMenu/WalletMenuContent.tsx index f0a21c3d6a..68a551f840 100644 --- a/ui/snippets/walletMenu/WalletMenuContent.tsx +++ b/ui/snippets/walletMenu/WalletMenuContent.tsx @@ -68,28 +68,30 @@ const WalletMenuContent = ({ address, ensDomainName, disconnect, isAutoConnectDi > Your wallet is used to interact with apps and contracts in the explorer. - - - } - variant="simple" - h="20px" - w="20px" - ml={ 1 } - onClick={ handleOpenWeb3Modal } - isLoading={ isModalOpening } - /> - + { address && ( + + + } + variant="simple" + h="20px" + w="20px" + ml={ 1 } + onClick={ handleOpenWeb3Modal } + isLoading={ isModalOpening } + /> + + ) } diff --git a/ui/token/TokenPageTitle.tsx b/ui/token/TokenPageTitle.tsx index 94a0d15548..2cc648cb53 100644 --- a/ui/token/TokenPageTitle.tsx +++ b/ui/token/TokenPageTitle.tsx @@ -113,13 +113,15 @@ const TokenPageTitle = ({ tokenQuery, addressQuery, hash }: Props) => { const secondRow = ( - + { addressQuery.data && ( + + ) } { !isLoading && tokenQuery.data && } @@ -139,7 +141,7 @@ const TokenPageTitle = ({ tokenQuery, addressQuery, hash }: Props) => { ) : null } contentAfter={ contentAfter } diff --git a/ui/tokenInstance/TokenInstancePageTitle.tsx b/ui/tokenInstance/TokenInstancePageTitle.tsx index e50d44c9ae..e6a0266d06 100644 --- a/ui/tokenInstance/TokenInstancePageTitle.tsx +++ b/ui/tokenInstance/TokenInstancePageTitle.tsx @@ -89,18 +89,20 @@ const TokenInstancePageTitle = ({ isLoading, token, instance, hash }: Props) => const titleSecondRow = ( - + { token && ( + + ) } { !isLoading && } diff --git a/ui/tx/TxDetailsWrapped.tsx b/ui/tx/TxDetailsWrapped.tsx index 3c03673852..29bf0bf9c9 100644 --- a/ui/tx/TxDetailsWrapped.tsx +++ b/ui/tx/TxDetailsWrapped.tsx @@ -47,16 +47,20 @@ const TxDetailsWrapped = ({ data }: Props) => { - - { data.to?.is_contract ? 'Interacted with contract' : 'To' } - - - - - - + { data.to && ( + <> + + { data.to.is_contract ? 'Interacted with contract' : 'To' } + + + + + + + + ) } diff --git a/ui/tx/TxSubHeading.pw.tsx b/ui/tx/TxSubHeading.pw.tsx index 185af30071..dfbd612bb7 100644 --- a/ui/tx/TxSubHeading.pw.tsx +++ b/ui/tx/TxSubHeading.pw.tsx @@ -113,11 +113,12 @@ test.describe('blockscout provider', () => { test('no interpretation, has method called', async({ render, mockApiResponse }) => { // the action button should not render if there is no interpretation + const newTxQuery = { ...txQuery, data: txMock.withRecipientContract } as TxQuery; const metadataResponse = generateAddressMetadataResponse(protocolTagWithMeta); await mockApiResponse('address_metadata_info', metadataResponse, { queryParams: addressMetadataQueryParams }); - await mockApiResponse('tx_interpretation', { data: { summaries: [] } }, { pathParams: { hash } }); - const component = await render(); + + const component = await render(); await expect(component).toHaveScreenshot(); }); diff --git a/ui/tx/TxSubHeading.tsx b/ui/tx/TxSubHeading.tsx index bad11afe00..258ca63dc6 100644 --- a/ui/tx/TxSubHeading.tsx +++ b/ui/tx/TxSubHeading.tsx @@ -19,7 +19,7 @@ import { createNovesSummaryObject } from './assetFlows/utils/createNovesSummaryO import type { TxQuery } from './useTxQuery'; type Props = { - hash?: string; + hash: string; hasTag: boolean; txQuery: TxQuery; } diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_dark-color-mode_blockscout-provider-with-interpretation-and-action-button-mobile-dark-mode-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_dark-color-mode_blockscout-provider-with-interpretation-and-action-button-mobile-dark-mode-1.png index efe150dc41..1bc3a3dc37 100644 Binary files a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_dark-color-mode_blockscout-provider-with-interpretation-and-action-button-mobile-dark-mode-1.png and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_dark-color-mode_blockscout-provider-with-interpretation-and-action-button-mobile-dark-mode-1.png differ diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_dark-color-mode_blockscout-provider-with-interpretation-mobile-dark-mode-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_dark-color-mode_blockscout-provider-with-interpretation-mobile-dark-mode-1.png index d0fdb5abc6..4eada08c0e 100644 Binary files a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_dark-color-mode_blockscout-provider-with-interpretation-mobile-dark-mode-1.png and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_dark-color-mode_blockscout-provider-with-interpretation-mobile-dark-mode-1.png differ diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-no-interpretation-has-method-called-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-no-interpretation-has-method-called-1.png index 2e8eb06c8e..669b08f06f 100644 Binary files a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-no-interpretation-has-method-called-1.png and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-no-interpretation-has-method-called-1.png differ diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-action-button-mobile-dark-mode-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-action-button-mobile-dark-mode-1.png index 7e16a3ab45..ecc3ecb5cf 100644 Binary files a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-action-button-mobile-dark-mode-1.png and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-action-button-mobile-dark-mode-1.png differ diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-recipient-ENS-domain-mobile-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-recipient-ENS-domain-mobile-1.png index 43600deed4..5ef51ef2df 100644 Binary files a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-recipient-ENS-domain-mobile-1.png and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-recipient-ENS-domain-mobile-1.png differ diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-recipient-name-mobile-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-recipient-name-mobile-1.png index a3542c18bb..df660a7849 100644 Binary files a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-recipient-name-mobile-1.png and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-recipient-name-mobile-1.png differ diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-recipient-name-tag-mobile-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-recipient-name-tag-mobile-1.png index 8974f71138..f278c210f9 100644 Binary files a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-recipient-name-tag-mobile-1.png and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-recipient-name-tag-mobile-1.png differ diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-vi-ee08a-k-and-action-button-external-link-mobile-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-vi-ee08a-k-and-action-button-external-link-mobile-1.png index f3ff08dabb..e642508a5e 100644 Binary files a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-vi-ee08a-k-and-action-button-external-link-mobile-1.png and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-vi-ee08a-k-and-action-button-external-link-mobile-1.png differ diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-view-all-link-mobile-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-view-all-link-mobile-1.png index 6c9afa3175..18df21b392 100644 Binary files a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-view-all-link-mobile-1.png and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-and-view-all-link-mobile-1.png differ diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-mobile-dark-mode-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-mobile-dark-mode-1.png index 9f058ef1d3..a90b07bc07 100644 Binary files a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-mobile-dark-mode-1.png and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_default_blockscout-provider-with-interpretation-mobile-dark-mode-1.png differ diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-action-button-mobile-dark-mode-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-action-button-mobile-dark-mode-1.png index 38a8ace2b3..cb6d636824 100644 Binary files a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-action-button-mobile-dark-mode-1.png and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-action-button-mobile-dark-mode-1.png differ diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-recipient-ENS-domain-mobile-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-recipient-ENS-domain-mobile-1.png index e5860bfc55..870dd9b7ba 100644 Binary files a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-recipient-ENS-domain-mobile-1.png and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-recipient-ENS-domain-mobile-1.png differ diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-recipient-name-mobile-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-recipient-name-mobile-1.png index 70bed47263..679c35306e 100644 Binary files a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-recipient-name-mobile-1.png and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-recipient-name-mobile-1.png differ diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-recipient-name-tag-mobile-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-recipient-name-tag-mobile-1.png index 23bfd0e59f..0708cbbe49 100644 Binary files a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-recipient-name-tag-mobile-1.png and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-recipient-name-tag-mobile-1.png differ diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-vi-ee08a-k-and-action-button-external-link-mobile-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-vi-ee08a-k-and-action-button-external-link-mobile-1.png index 9b17b588f1..02de930e4c 100644 Binary files a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-vi-ee08a-k-and-action-button-external-link-mobile-1.png and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-vi-ee08a-k-and-action-button-external-link-mobile-1.png differ diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-view-all-link-mobile-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-view-all-link-mobile-1.png index bd069fab92..1a14a91254 100644 Binary files a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-view-all-link-mobile-1.png and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-and-view-all-link-mobile-1.png differ diff --git a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-mobile-dark-mode-1.png b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-mobile-dark-mode-1.png index 6d8efad2d8..450c1ab5f4 100644 Binary files a/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-mobile-dark-mode-1.png and b/ui/tx/__screenshots__/TxSubHeading.pw.tsx_mobile_blockscout-provider-with-interpretation-mobile-dark-mode-1.png differ diff --git a/ui/tx/assetFlows/components/NovesActionSnippet.tsx b/ui/tx/assetFlows/components/NovesActionSnippet.tsx index 44571bce40..daa05266c5 100644 --- a/ui/tx/assetFlows/components/NovesActionSnippet.tsx +++ b/ui/tx/assetFlows/components/NovesActionSnippet.tsx @@ -25,9 +25,11 @@ const NovesActionSnippet: FC = ({ item, isLoaded }) => { const symbol = action.nft?.symbol || action.token?.symbol; const token = { - name: name, - symbol: symbol?.toLowerCase() === name?.toLowerCase() ? undefined : symbol, - address: action.nft?.address || action.token?.address, + name: name || '', + symbol: (symbol?.toLowerCase() === name?.toLowerCase() ? undefined : symbol) || '', + address: action.nft?.address || action.token?.address || '', + icon_url: '', + type: action.nft ? 'ERC-721' as const : 'ERC-20' as const, }; return token; diff --git a/ui/tx/details/txDetailsActions/TxDetailsAction.tsx b/ui/tx/details/txDetailsActions/TxDetailsAction.tsx index 0c53d1570d..4189133a5a 100644 --- a/ui/tx/details/txDetailsActions/TxDetailsAction.tsx +++ b/ui/tx/details/txDetailsActions/TxDetailsAction.tsx @@ -41,14 +41,14 @@ const TxDetailsAction = ({ action }: Props) => { const token0 = { address: data.symbol0 === 'Ether' ? '' : data.address0, name: data.symbol0 === 'Ether' ? config.chain.currency.symbol || null : data.symbol0, - type: 'ERC-20', + type: 'ERC-20' as const, symbol: null, icon_url: null, }; const token1 = { address: data.symbol1 === 'Ether' ? '' : data.address1, name: data.symbol1 === 'Ether' ? config.chain.currency.symbol || null : data.symbol1, - type: 'ERC-20', + type: 'ERC-20' as const, symbol: null, icon_url: null, }; @@ -99,7 +99,7 @@ const TxDetailsAction = ({ action }: Props) => { const token = { address: data.address, name: data.name, - type: 'ERC-20', + type: 'ERC-20' as const, symbol: null, icon_url: null, }; @@ -133,7 +133,7 @@ const TxDetailsAction = ({ action }: Props) => { 1 of token ID - + ); }) diff --git a/ui/txs/TxsListItem.tsx b/ui/txs/TxsListItem.tsx index 9ebe309b75..a5786be434 100644 --- a/ui/txs/TxsListItem.tsx +++ b/ui/txs/TxsListItem.tsx @@ -54,7 +54,9 @@ const TxsListItem = ({ tx, isLoading, showBlockInfo, currentAddress, enableTimeI hash={ tx.hash } truncation="constant_long" fontWeight="700" - iconName={ tx.tx_types.includes('blob_transaction') ? 'blob' : undefined } + icon={{ + name: tx.tx_types.includes('blob_transaction') ? 'blob' : undefined, + }} /> { Block - + >; } diff --git a/ui/userOps/UserOpsListItem.tsx b/ui/userOps/UserOpsListItem.tsx index 40139b1de7..df9a97660a 100644 --- a/ui/userOps/UserOpsListItem.tsx +++ b/ui/userOps/UserOpsListItem.tsx @@ -74,7 +74,7 @@ const UserOpsListItem = ({ item, isLoading, showTx, showSender }: Props) => { Block { ) }