Commit c4686d4e authored by tom goriunov's avatar tom goriunov Committed by GitHub

Merge pull request #1881 from blockscout/tom2drum/issue-1863

Minor bug fixes
parents 1263ed5c e6a06778
...@@ -200,6 +200,8 @@ Settings for meta tags, OG tags and SEO ...@@ -200,6 +200,8 @@ Settings for meta tags, OG tags and SEO
| `total_reward` | Total block reward | | `total_reward` | Total block reward |
| `nonce` | Block nonce | | `nonce` | Block nonce |
| `miner` | Address of block's miner or validator | | `miner` | Address of block's miner or validator |
| `L1_status` | Short interpretation of the batch lifecycle (applicable for Rollup chains) |
| `batch` | Batch index (applicable for Rollup chains) |
   
...@@ -234,6 +236,8 @@ Settings for meta tags, OG tags and SEO ...@@ -234,6 +236,8 @@ Settings for meta tags, OG tags and SEO
| `tx_fee` | Total transaction fee | | `tx_fee` | Total transaction fee |
| `gas_fees` | Gas fees breakdown | | `gas_fees` | Gas fees breakdown |
| `burnt_fees` | Amount of native coin burnt for transaction | | `burnt_fees` | Amount of native coin burnt for transaction |
| `L1_status` | Short interpretation of the batch lifecycle (applicable for Rollup chains) |
| `batch` | Batch index (applicable for Rollup chains) |
##### Transaction additional fields list ##### Transaction additional fields list
| Id | Description | | Id | Description |
......
...@@ -5,6 +5,8 @@ export const BLOCK_FIELDS_IDS = [ ...@@ -5,6 +5,8 @@ export const BLOCK_FIELDS_IDS = [
'total_reward', 'total_reward',
'nonce', 'nonce',
'miner', 'miner',
'L1_status',
'batch',
] as const; ] as const;
export type BlockFieldId = ArrayElement<typeof BLOCK_FIELDS_IDS>; export type BlockFieldId = ArrayElement<typeof BLOCK_FIELDS_IDS>;
...@@ -7,6 +7,8 @@ export const TX_FIELDS_IDS = [ ...@@ -7,6 +7,8 @@ export const TX_FIELDS_IDS = [
'tx_fee', 'tx_fee',
'gas_fees', 'gas_fees',
'burnt_fees', 'burnt_fees',
'L1_status',
'batch',
] as const; ] as const;
export type TxFieldsId = ArrayElement<typeof TX_FIELDS_IDS>; export type TxFieldsId = ArrayElement<typeof TX_FIELDS_IDS>;
......
...@@ -220,8 +220,7 @@ const BlockDetails = ({ query }: Props) => { ...@@ -220,8 +220,7 @@ const BlockDetails = ({ query }: Props) => {
</DetailsInfoItem> </DetailsInfoItem>
) } ) }
{ rollupFeature.isEnabled && rollupFeature.type === 'zkSync' && data.zksync && ( { rollupFeature.isEnabled && rollupFeature.type === 'zkSync' && data.zksync && !config.UI.views.block.hiddenFields?.batch && (
<>
<DetailsInfoItem <DetailsInfoItem
title="Batch" title="Batch"
hint="Batch number" hint="Batch number"
...@@ -234,6 +233,8 @@ const BlockDetails = ({ query }: Props) => { ...@@ -234,6 +233,8 @@ const BlockDetails = ({ query }: Props) => {
/> />
) : <Skeleton isLoaded={ !isPlaceholderData }>Pending</Skeleton> } ) : <Skeleton isLoaded={ !isPlaceholderData }>Pending</Skeleton> }
</DetailsInfoItem> </DetailsInfoItem>
) }
{ rollupFeature.isEnabled && rollupFeature.type === 'zkSync' && data.zksync && !config.UI.views.block.hiddenFields?.L1_status && (
<DetailsInfoItem <DetailsInfoItem
title="Status" title="Status"
hint="Status is the short interpretation of the batch lifecycle" hint="Status is the short interpretation of the batch lifecycle"
...@@ -241,7 +242,6 @@ const BlockDetails = ({ query }: Props) => { ...@@ -241,7 +242,6 @@ const BlockDetails = ({ query }: Props) => {
> >
<VerificationSteps steps={ ZKSYNC_L2_TX_BATCH_STATUSES } currentStep={ data.zksync.status } isLoading={ isPlaceholderData }/> <VerificationSteps steps={ ZKSYNC_L2_TX_BATCH_STATUSES } currentStep={ data.zksync.status } isLoading={ isPlaceholderData }/>
</DetailsInfoItem> </DetailsInfoItem>
</>
) } ) }
{ !config.UI.views.block.hiddenFields?.miner && ( { !config.UI.views.block.hiddenFields?.miner && (
......
import { test, expect } from '@playwright/experimental-ct-react';
import React from 'react'; import React from 'react';
import * as statsMock from 'mocks/stats/index'; import * as statsMock from 'mocks/stats/index';
import contextWithEnvs from 'playwright/fixtures/contextWithEnvs'; import { test, expect } from 'playwright/lib';
import TestApp from 'playwright/TestApp';
import * as configs from 'playwright/utils/configs'; import * as configs from 'playwright/utils/configs';
import GasTrackerPriceSnippet from './GasTrackerPriceSnippet'; import GasTrackerPriceSnippet from './GasTrackerPriceSnippet';
...@@ -13,48 +11,57 @@ test.use({ viewport: configs.viewport.md }); ...@@ -13,48 +11,57 @@ test.use({ viewport: configs.viewport.md });
const data = statsMock.base.gas_prices.fast; const data = statsMock.base.gas_prices.fast;
const clip = { x: 0, y: 0, width: 334, height: 204 }; const clip = { x: 0, y: 0, width: 334, height: 204 };
test('with usd as primary unit +@dark-mode', async({ mount, page }) => { test('with usd as primary unit +@dark-mode', async({ render, page }) => {
await mount( await render(
<TestApp>
<GasTrackerPriceSnippet <GasTrackerPriceSnippet
data={ data } data={ data }
type="fast" type="fast"
isLoading={ false } isLoading={ false }
/> />,
</TestApp>,
); );
await expect(page).toHaveScreenshot({ clip }); await expect(page).toHaveScreenshot({ clip });
}); });
test('loading state', async({ mount, page }) => { test('loading state', async({ render, page }) => {
await mount( await render(
<TestApp>
<GasTrackerPriceSnippet <GasTrackerPriceSnippet
data={ data } data={ data }
type="fast" type="fast"
isLoading={ true } isLoading={ true }
/> />,
</TestApp>,
); );
await expect(page).toHaveScreenshot({ clip }); await expect(page).toHaveScreenshot({ clip });
}); });
const gweiUnitsTest = test.extend({ test('with gwei as primary unit +@dark-mode', async({ render, page, mockEnvs }) => {
context: contextWithEnvs([ await mockEnvs([
{ name: 'NEXT_PUBLIC_GAS_TRACKER_UNITS', value: '["gwei","usd"]' }, [ 'NEXT_PUBLIC_GAS_TRACKER_UNITS', '["gwei","usd"]' ],
// eslint-disable-next-line @typescript-eslint/no-explicit-any ]);
]) as any, await render(
<GasTrackerPriceSnippet
data={ data }
type="slow"
isLoading={ false }
/>,
);
await expect(page).toHaveScreenshot({ clip });
}); });
gweiUnitsTest('with gwei as primary unit +@dark-mode', async({ mount, page }) => { test('with zero values', async({ render, page }) => {
await mount( const data = {
<TestApp> fiat_price: '1.74',
price: 0.0,
time: 0,
base_fee: 0,
priority_fee: 0,
};
await render(
<GasTrackerPriceSnippet <GasTrackerPriceSnippet
data={ data } data={ data }
type="slow" type="slow"
isLoading={ false } isLoading={ false }
/> />,
</TestApp>,
); );
await expect(page).toHaveScreenshot({ clip }); await expect(page).toHaveScreenshot({ clip });
}); });
...@@ -50,14 +50,14 @@ const GasTrackerPriceSnippet = ({ data, type, isLoading }: Props) => { ...@@ -50,14 +50,14 @@ const GasTrackerPriceSnippet = ({ data, type, isLoading }: Props) => {
</Skeleton> </Skeleton>
</Flex> </Flex>
<Skeleton isLoaded={ !isLoading } fontSize="sm" color="text_secondary" mt={ 3 } w="fit-content"> <Skeleton isLoaded={ !isLoading } fontSize="sm" color="text_secondary" mt={ 3 } w="fit-content">
{ data.price && data.fiat_price && <GasPrice data={ data } prefix={ `${ asymp } ` } unitMode="secondary"/> } { data.price !== null && data.fiat_price !== null && <GasPrice data={ data } prefix={ `${ asymp } ` } unitMode="secondary"/> }
<span> per transaction</span> <span> per transaction</span>
{ typeof data.time === 'number' && data.time > 0 && <span> / { (data.time / SECOND).toLocaleString(undefined, { maximumFractionDigits: 1 }) }s</span> } { typeof data.time === 'number' && data.time > 0 && <span> / { (data.time / SECOND).toLocaleString(undefined, { maximumFractionDigits: 1 }) }s</span> }
</Skeleton> </Skeleton>
<Skeleton isLoaded={ !isLoading } fontSize="sm" color="text_secondary" mt={ 2 } w="fit-content" whiteSpace="pre"> <Skeleton isLoaded={ !isLoading } fontSize="sm" color="text_secondary" mt={ 2 } w="fit-content" whiteSpace="pre">
{ data.base_fee && <span>Base { data.base_fee.toLocaleString(undefined, { maximumFractionDigits: 0 }) }</span> } { typeof data.base_fee === 'number' && <span>Base { data.base_fee.toLocaleString(undefined, { maximumFractionDigits: 0 }) }</span> }
{ data.base_fee && data.priority_fee && <span> / </span> } { typeof data.base_fee === 'number' && typeof data.priority_fee === 'number' && <span> / </span> }
{ data.priority_fee && <span>Priority { data.priority_fee.toLocaleString(undefined, { maximumFractionDigits: 0 }) }</span> } { typeof data.priority_fee === 'number' && <span>Priority { data.priority_fee.toLocaleString(undefined, { maximumFractionDigits: 0 }) }</span> }
</Skeleton> </Skeleton>
</Box> </Box>
); );
......
...@@ -36,7 +36,8 @@ const GasTracker = () => { ...@@ -36,7 +36,8 @@ const GasTracker = () => {
rowGap={ 1 } rowGap={ 1 }
flexDir={{ base: 'column', lg: 'row' }} flexDir={{ base: 'column', lg: 'row' }}
> >
{ data?.network_utilization_percentage && <GasTrackerNetworkUtilization percentage={ data.network_utilization_percentage } isLoading={ isLoading }/> } { typeof data?.network_utilization_percentage === 'number' &&
<GasTrackerNetworkUtilization percentage={ data.network_utilization_percentage } isLoading={ isLoading }/> }
{ data?.gas_price_updated_at && ( { data?.gas_price_updated_at && (
<Skeleton isLoaded={ !isLoading } whiteSpace="pre" display="flex" alignItems="center"> <Skeleton isLoaded={ !isLoading } whiteSpace="pre" display="flex" alignItems="center">
<span>Last updated </span> <span>Last updated </span>
......
...@@ -11,10 +11,6 @@ import WalletMenuMobile from 'ui/snippets/walletMenu/WalletMenuMobile'; ...@@ -11,10 +11,6 @@ import WalletMenuMobile from 'ui/snippets/walletMenu/WalletMenuMobile';
import Burger from './Burger'; import Burger from './Burger';
const LOGO_IMAGE_PROPS = {
margin: '0 auto',
};
type Props = { type Props = {
hideSearchBar?: boolean; hideSearchBar?: boolean;
renderSearchBar?: () => React.ReactNode; renderSearchBar?: () => React.ReactNode;
...@@ -45,13 +41,12 @@ const HeaderMobile = ({ hideSearchBar, renderSearchBar }: Props) => { ...@@ -45,13 +41,12 @@ const HeaderMobile = ({ hideSearchBar, renderSearchBar }: Props) => {
bgColor={ bgColor } bgColor={ bgColor }
width="100%" width="100%"
alignItems="center" alignItems="center"
justifyContent="space-between"
transitionProperty="box-shadow" transitionProperty="box-shadow"
transitionDuration="slow" transitionDuration="slow"
boxShadow={ !inView && scrollDirection === 'down' ? 'md' : 'none' } boxShadow={ !inView && scrollDirection === 'down' ? 'md' : 'none' }
> >
<Burger/> <Burger/>
<NetworkLogo imageProps={ LOGO_IMAGE_PROPS }/> <NetworkLogo ml={ 2 } mr="auto"/>
<Flex columnGap={ 2 }> <Flex columnGap={ 2 }>
{ config.features.account.isEnabled ? <ProfileMenuMobile/> : <Box boxSize={ 10 }/> } { config.features.account.isEnabled ? <ProfileMenuMobile/> : <Box boxSize={ 10 }/> }
{ config.features.blockchainInteraction.isEnabled && <WalletMenuMobile/> } { config.features.blockchainInteraction.isEnabled && <WalletMenuMobile/> }
......
...@@ -20,16 +20,17 @@ type Props = { ...@@ -20,16 +20,17 @@ type Props = {
px?: string | number; px?: string | number;
className?: string; className?: string;
onClick?: () => void; onClick?: () => void;
disableActiveState?: boolean;
} }
const NavLink = ({ item, isCollapsed, px, className, onClick }: Props) => { const NavLink = ({ item, isCollapsed, px, className, onClick, disableActiveState }: Props) => {
const isMobile = useIsMobile(); const isMobile = useIsMobile();
const colors = useColors(); const colors = useColors();
const isExpanded = isCollapsed === false; const isExpanded = isCollapsed === false;
const isInternalLink = isInternalItem(item); const isInternalLink = isInternalItem(item);
const styleProps = useNavLinkStyleProps({ isCollapsed, isExpanded, isActive: isInternalLink && item.isActive }); const styleProps = useNavLinkStyleProps({ isCollapsed, isExpanded, isActive: isInternalLink && item.isActive && !disableActiveState });
const isXLScreen = useBreakpointValue({ base: false, xl: true }); const isXLScreen = useBreakpointValue({ base: false, xl: true });
const href = isInternalLink ? route(item.nextRoute) : item.url; const href = isInternalLink ? route(item.nextRoute) : item.url;
......
import type { StyleProps } from '@chakra-ui/react'; import { Box, Image, useColorModeValue, Skeleton, chakra } from '@chakra-ui/react';
import { Box, Image, useColorModeValue, Skeleton } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import { route } from 'nextjs-routes'; import { route } from 'nextjs-routes';
...@@ -10,10 +9,10 @@ import IconSvg from 'ui/shared/IconSvg'; ...@@ -10,10 +9,10 @@ import IconSvg from 'ui/shared/IconSvg';
interface Props { interface Props {
isCollapsed?: boolean; isCollapsed?: boolean;
onClick?: (event: React.SyntheticEvent) => void; onClick?: (event: React.SyntheticEvent) => void;
imageProps?: StyleProps; className?: string;
} }
const LogoFallback = ({ isCollapsed, isSmall, imageProps }: { isCollapsed?: boolean; isSmall?: boolean; imageProps?: StyleProps }) => { const LogoFallback = ({ isCollapsed, isSmall }: { isCollapsed?: boolean; isSmall?: boolean }) => {
const field = isSmall ? 'icon' : 'logo'; const field = isSmall ? 'icon' : 'logo';
const logoColor = useColorModeValue('blue.600', 'white'); const logoColor = useColorModeValue('blue.600', 'white');
...@@ -38,12 +37,11 @@ const LogoFallback = ({ isCollapsed, isSmall, imageProps }: { isCollapsed?: bool ...@@ -38,12 +37,11 @@ const LogoFallback = ({ isCollapsed, isSmall, imageProps }: { isCollapsed?: bool
height="100%" height="100%"
color={ logoColor } color={ logoColor }
display={ display } display={ display }
{ ...imageProps }
/> />
); );
}; };
const NetworkLogo = ({ isCollapsed, onClick, imageProps }: Props) => { const NetworkLogo = ({ isCollapsed, onClick, className }: Props) => {
const logoSrc = useColorModeValue(config.UI.sidebar.logo.default, config.UI.sidebar.logo.dark || config.UI.sidebar.logo.default); const logoSrc = useColorModeValue(config.UI.sidebar.logo.default, config.UI.sidebar.logo.dark || config.UI.sidebar.logo.default);
const iconSrc = useColorModeValue(config.UI.sidebar.icon.default, config.UI.sidebar.icon.dark || config.UI.sidebar.icon.default); const iconSrc = useColorModeValue(config.UI.sidebar.icon.default, config.UI.sidebar.icon.dark || config.UI.sidebar.icon.default);
...@@ -53,6 +51,7 @@ const NetworkLogo = ({ isCollapsed, onClick, imageProps }: Props) => { ...@@ -53,6 +51,7 @@ const NetworkLogo = ({ isCollapsed, onClick, imageProps }: Props) => {
return ( return (
<Box <Box
className={ className }
as="a" as="a"
href={ route({ pathname: '/' }) } href={ route({ pathname: '/' }) }
width={{ base: '120px', lg: isCollapsed === false ? '120px' : '30px', xl: isCollapsed ? '30px' : '120px' }} width={{ base: '120px', lg: isCollapsed === false ? '120px' : '30px', xl: isCollapsed ? '30px' : '120px' }}
...@@ -69,10 +68,9 @@ const NetworkLogo = ({ isCollapsed, onClick, imageProps }: Props) => { ...@@ -69,10 +68,9 @@ const NetworkLogo = ({ isCollapsed, onClick, imageProps }: Props) => {
h="100%" h="100%"
src={ logoSrc } src={ logoSrc }
alt={ `${ config.chain.name } network logo` } alt={ `${ config.chain.name } network logo` }
fallback={ <LogoFallback isCollapsed={ isCollapsed } imageProps={ imageProps }/> } fallback={ <LogoFallback isCollapsed={ isCollapsed }/> }
display={{ base: 'block', lg: isCollapsed === false ? 'block' : 'none', xl: isCollapsed ? 'none' : 'block' }} display={{ base: 'block', lg: isCollapsed === false ? 'block' : 'none', xl: isCollapsed ? 'none' : 'block' }}
style={ logoStyle } style={ logoStyle }
{ ...imageProps }
/> />
{ /* small logo */ } { /* small logo */ }
<Image <Image
...@@ -80,13 +78,12 @@ const NetworkLogo = ({ isCollapsed, onClick, imageProps }: Props) => { ...@@ -80,13 +78,12 @@ const NetworkLogo = ({ isCollapsed, onClick, imageProps }: Props) => {
h="100%" h="100%"
src={ iconSrc } src={ iconSrc }
alt={ `${ config.chain.name } network logo` } alt={ `${ config.chain.name } network logo` }
fallback={ <LogoFallback isCollapsed={ isCollapsed } imageProps={ imageProps } isSmall/> } fallback={ <LogoFallback isCollapsed={ isCollapsed } isSmall/> }
display={{ base: 'none', lg: isCollapsed === false ? 'none' : 'block', xl: isCollapsed ? 'block' : 'none' }} display={{ base: 'none', lg: isCollapsed === false ? 'none' : 'block', xl: isCollapsed ? 'block' : 'none' }}
style={ iconStyle } style={ iconStyle }
{ ...imageProps }
/> />
</Box> </Box>
); );
}; };
export default React.memo(NetworkLogo); export default React.memo(chakra(NetworkLogo));
...@@ -45,10 +45,12 @@ const NetworkMenuContentMobile = ({ items, tabs }: Props) => { ...@@ -45,10 +45,12 @@ const NetworkMenuContentMobile = ({ items, tabs }: Props) => {
</> </>
) : ( ) : (
<> <>
<Select size="xs" borderRadius="base" value={ selectedTab } onChange={ handleSelectChange } focusBorderColor="none"> { tabs.length > 1 && (
<Select size="xs" borderRadius="base" value={ selectedTab } onChange={ handleSelectChange } focusBorderColor="none" mb={ 6 }>
{ tabs.map((tab) => <option key={ tab } value={ tab }>{ capitalize(tab) }</option>) } { tabs.map((tab) => <option key={ tab } value={ tab }>{ capitalize(tab) }</option>) }
</Select> </Select>
<VStack as="ul" spacing={ 2 } alignItems="stretch" mt={ 6 }> ) }
<VStack as="ul" spacing={ 2 } alignItems="stretch">
{ items { items
.filter(({ group }) => group === selectedTab) .filter(({ group }) => group === selectedTab)
.map((network) => ( .map((network) => (
......
import { Box, Button, Text, VStack, useColorModeValue } from '@chakra-ui/react'; import { Box, Button, VStack, chakra } from '@chakra-ui/react';
import React from 'react'; import React from 'react';
import type { UserInfo } from 'types/api/account'; import type { UserInfo } from 'types/api/account';
...@@ -18,7 +18,6 @@ type Props = { ...@@ -18,7 +18,6 @@ type Props = {
const ProfileMenuContent = ({ data, onNavLinkClick }: Props) => { const ProfileMenuContent = ({ data, onNavLinkClick }: Props) => {
const { accountNavItems, profileItem } = useNavItems(); const { accountNavItems, profileItem } = useNavItems();
const primaryTextColor = useColorModeValue('blackAlpha.800', 'whiteAlpha.800');
const handleSingOutClick = React.useCallback(() => { const handleSingOutClick = React.useCallback(() => {
mixpanel.logEvent( mixpanel.logEvent(
...@@ -32,37 +31,28 @@ const ProfileMenuContent = ({ data, onNavLinkClick }: Props) => { ...@@ -32,37 +31,28 @@ const ProfileMenuContent = ({ data, onNavLinkClick }: Props) => {
return null; return null;
} }
const userName = data?.email || data?.nickname || data?.name;
return ( return (
<Box> <Box>
{ (data?.name || data?.nickname) && ( { userName && (
<Text <Box
fontSize="sm" fontSize="sm"
fontWeight={ 500 } fontWeight={ 500 }
color={ primaryTextColor }
{ ...getDefaultTransitionProps() }
>
Signed in as { data.name || data.nickname }
</Text>
) }
{ data?.email && (
<Text
fontSize="sm"
mb={ 1 } mb={ 1 }
fontWeight={ 500 }
color="gray.500"
{ ...getDefaultTransitionProps() }
> >
{ data.email } <span>Signed in as </span>
</Text> <chakra.span color="text_secondary">{ userName }</chakra.span>
</Box>
) } ) }
<NavLink item={ profileItem } isActive={ undefined } px="0px" isCollapsed={ false } onClick={ onNavLinkClick }/> <NavLink item={ profileItem } disableActiveState={ true } px="0px" isCollapsed={ false } onClick={ onNavLinkClick }/>
<Box as="nav" mt={ 2 } pt={ 2 } borderTopColor="divider" borderTopWidth="1px" { ...getDefaultTransitionProps() }> <Box as="nav" mt={ 2 } pt={ 2 } borderTopColor="divider" borderTopWidth="1px" { ...getDefaultTransitionProps() }>
<VStack as="ul" spacing="0" alignItems="flex-start" overflow="hidden"> <VStack as="ul" spacing="0" alignItems="flex-start" overflow="hidden">
{ accountNavItems.map((item) => ( { accountNavItems.map((item) => (
<NavLink <NavLink
key={ item.text } key={ item.text }
item={ item } item={ item }
isActive={ undefined } disableActiveState={ true }
isCollapsed={ false } isCollapsed={ false }
px="0px" px="0px"
onClick={ onNavLinkClick } onClick={ onNavLinkClick }
......
...@@ -97,7 +97,7 @@ const ProfileMenuDesktop = ({ isHomePage, className, fallbackIconSize }: Props) ...@@ -97,7 +97,7 @@ const ProfileMenuDesktop = ({ isHomePage, className, fallbackIconSize }: Props)
</Box> </Box>
</Tooltip> </Tooltip>
{ hasMenu && ( { hasMenu && (
<PopoverContent w="212px"> <PopoverContent maxW="400px" minW="220px" w="min-content">
<PopoverBody padding="24px 16px 16px 16px"> <PopoverBody padding="24px 16px 16px 16px">
<ProfileMenuContent data={ data }/> <ProfileMenuContent data={ data }/>
</PopoverBody> </PopoverBody>
......
...@@ -66,7 +66,7 @@ const ProfileMenuMobile = () => { ...@@ -66,7 +66,7 @@ const ProfileMenuMobile = () => {
autoFocus={ false } autoFocus={ false }
> >
<DrawerOverlay/> <DrawerOverlay/>
<DrawerContent maxWidth="260px"> <DrawerContent maxWidth="300px">
<DrawerBody p={ 6 }> <DrawerBody p={ 6 }>
<ProfileMenuContent data={ data } onNavLinkClick={ onClose }/> <ProfileMenuContent data={ data } onNavLinkClick={ onClose }/>
</DrawerBody> </DrawerBody>
......
...@@ -160,7 +160,8 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => { ...@@ -160,7 +160,8 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
</Tag> </Tag>
) } ) }
</DetailsInfoItem> </DetailsInfoItem>
{ rollupFeature.isEnabled && rollupFeature.type === 'optimistic' && data.op_withdrawals && data.op_withdrawals.length > 0 && ( { rollupFeature.isEnabled && rollupFeature.type === 'optimistic' && data.op_withdrawals && data.op_withdrawals.length > 0 &&
!config.UI.views.tx.hiddenFields?.L1_status && (
<DetailsInfoItem <DetailsInfoItem
title="Withdrawal status" title="Withdrawal status"
hint="Detailed status progress of the transaction" hint="Detailed status progress of the transaction"
...@@ -181,7 +182,7 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => { ...@@ -181,7 +182,7 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
</Flex> </Flex>
</DetailsInfoItem> </DetailsInfoItem>
) } ) }
{ data.zkevm_status && ( { data.zkevm_status && !config.UI.views.tx.hiddenFields?.L1_status && (
<DetailsInfoItem <DetailsInfoItem
title="Confirmation status" title="Confirmation status"
hint="Status of the transaction confirmation path to L1" hint="Status of the transaction confirmation path to L1"
...@@ -198,7 +199,7 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => { ...@@ -198,7 +199,7 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
<TxRevertReason { ...data.revert_reason }/> <TxRevertReason { ...data.revert_reason }/>
</DetailsInfoItem> </DetailsInfoItem>
) } ) }
{ data.zksync && ( { data.zksync && !config.UI.views.tx.hiddenFields?.L1_status && (
<DetailsInfoItem <DetailsInfoItem
title="L1 status" title="L1 status"
hint="Status is the short interpretation of the batch lifecycle" hint="Status is the short interpretation of the batch lifecycle"
...@@ -229,7 +230,7 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => { ...@@ -229,7 +230,7 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
</> </>
) } ) }
</DetailsInfoItem> </DetailsInfoItem>
{ data.zkevm_batch_number && ( { data.zkevm_batch_number && !config.UI.views.tx.hiddenFields?.batch && (
<DetailsInfoItem <DetailsInfoItem
title="Tx batch" title="Tx batch"
hint="Batch index for this transaction" hint="Batch index for this transaction"
...@@ -241,7 +242,7 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => { ...@@ -241,7 +242,7 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
/> />
</DetailsInfoItem> </DetailsInfoItem>
) } ) }
{ data.zksync && ( { data.zksync && !config.UI.views.tx.hiddenFields?.batch && (
<DetailsInfoItem <DetailsInfoItem
title="Batch" title="Batch"
hint="Batch number" hint="Batch number"
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment