fix after merge

toolkit/chakra/link.tsx

@@ -21,17 +21,16 @@ export const LinkExternalIcon = ({ color }: { color?: ChakraLinkProps['color'] }
   />
 );
 
-export interface LinkProps extends ChakraLinkProps {
+export interface LinkProps extends Pick<NextLinkProps, 'shallow' | 'prefetch' | 'scroll'>, ChakraLinkProps {
   loading?: boolean;
   external?: boolean;
-  scroll?: boolean;
   iconColor?: ChakraLinkProps['color'];
   noIcon?: boolean;
 }
 
 export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
   function Link(props, ref) {
-    const { external, loading, href, children, scroll = true, iconColor, noIcon, ...rest } = props;
+    const { external, loading, href, children, scroll = true, iconColor, noIcon, shallow, prefetch = false, ...rest } = props;
 
     if (external) {
       return (
@@ -54,7 +53,18 @@ export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
     return (
       <Skeleton loading={ loading } asChild>
         <ChakraLink asChild ref={ ref } { ...rest }>
-          { href ? <NextLink href={ href as NextLinkProps['href'] } scroll={ scroll }>{ children }</NextLink> : <span>{ children }</span> }
+          { href ? (
+            <NextLink
+              href={ href as NextLinkProps['href'] }
+              scroll={ scroll }
+              shallow={ shallow }
+              prefetch={ prefetch }
+            >
+              { children }
+            </NextLink>
+          ) :
+            <span>{ children }</span>
+          }
         </ChakraLink>
       </Skeleton>
     );

toolkit/theme/recipes/link.recipe.ts

@@ -70,6 +70,11 @@ export const recipe = defineRecipe({
           color: 'link.navigation.fg.active',
         },
       },
+      plain: {
+        _hover: {
+          textDecoration: 'none',
+        },
+      },
     },
   },
   defaultVariants: {

ui/pages/Transaction.tsx

 import { useRouter } from 'next/router';
 import React from 'react';
 
-import type { RoutedTab } from 'ui/shared/Tabs/types';
+import type { TabItemRegular } from 'toolkit/components/AdaptiveTabs/types';
 
 import config from 'configs/app';
 import { useAppContext } from 'lib/contexts/app';
@@ -10,11 +10,11 @@ import getQueryParamString from 'lib/router/getQueryParamString';
 import { publicClient } from 'lib/web3/client';
 import RoutedTabs from 'toolkit/components/RoutedTabs/RoutedTabs';
 import RoutedTabsSkeleton from 'toolkit/components/RoutedTabs/RoutedTabsSkeleton';
+import useActiveTabFromQuery from 'toolkit/components/RoutedTabs/useActiveTabFromQuery';
 import TextAd from 'ui/shared/ad/TextAd';
 import isCustomAppError from 'ui/shared/AppError/isCustomAppError';
 import EntityTags from 'ui/shared/EntityTags/EntityTags';
 import PageTitle from 'ui/shared/Page/PageTitle';
-import useTabIndexFromQuery from 'ui/shared/Tabs/useTabIndexFromQuery';
 import TxAssetFlows from 'ui/tx/TxAssetFlows';
 import TxAuthorizations from 'ui/tx/TxAuthorizations';
 import TxBlobs from 'ui/tx/TxBlobs';
@@ -42,7 +42,7 @@ const TransactionPageContent = () => {
 
   const showDegradedView = publicClient && ((isError && error.status !== 422) || isPlaceholderData) && errorUpdateCount > 0;
 
-  const tabs: Array<RoutedTab> = (() => {
+  const tabs: Array<TabItemRegular> = (() => {
     const detailsComponent = showDegradedView ?
       <TxDetailsDegraded hash={ hash } txQuery={ txQuery }/> :
       <TxDetails txQuery={ txQuery }/>;
@@ -76,7 +76,7 @@ const TransactionPageContent = () => {
     ].filter(Boolean);
   })();
 
-  const tabIndex = useTabIndexFromQuery(tabs);
+  const activeTab = useActiveTabFromQuery(tabs);
 
   const tags = (
     <EntityTags
@@ -105,7 +105,7 @@ const TransactionPageContent = () => {
       return (
         <>
           <RoutedTabsSkeleton tabs={ tabs } mt={ 6 }/>
-          { tabs[tabIndex]?.component }
+          { activeTab?.component }
         </>
       );
     }

ui/shared/NextLink.tsx

@@ -4,6 +4,7 @@ import type { ReactNode } from 'react';
 
 type LinkProps = NextLinkProps & { children?: ReactNode };
 
+// TODO @tom2drum remove this file in favor of toolkit/chakra/link
 const Link = ({ prefetch = false, children, ...rest }: LinkProps) => {
   return (
     <NextLink prefetch={ prefetch } { ...rest }>

ui/snippets/searchBar/SearchBar.tsx

@@ -126,11 +126,11 @@ const SearchBar = ({ isHomepage }: Props) => {
         open={ open && (searchTerm.trim().length > 0 || recentSearchKeywords.length > 0) }
         autoFocus={ false }
         onOpenChange={ handleOpenChange }
-        positioning={{ offset: isMobile && !isHomepage ? { mainAxis: 46, crossAxis: 12 } : { mainAxis: 8, crossAxis: 0 } }}
+        positioning={{ offset: isMobile && !isHomepage ? { mainAxis: 0, crossAxis: 12 } : { mainAxis: 8, crossAxis: 0 } }}
         lazyMount
         closeOnInteractOutside={ false }
       >
-        <PopoverTrigger asChild={ false } w="100%">
+        <PopoverTrigger asChild w="100%">
           <SearchBarInput
             ref={ inputRef }
             onChange={ handleSearchTermChange }

ui/snippets/searchBar/SearchBarInput.tsx

+import type { HTMLChakraProps } from '@chakra-ui/react';
 import { chakra, Center } from '@chakra-ui/react';
 import { throttle } from 'es-toolkit';
 import React from 'react';
@@ -9,7 +10,7 @@ import { Input } from 'toolkit/chakra/input';
 import { InputGroup } from 'toolkit/chakra/input-group';
 import ClearButton from 'ui/shared/ClearButton';
 import IconSvg from 'ui/shared/IconSvg';
-interface Props {
+interface Props extends Omit<HTMLChakraProps<'form'>, 'onChange'> {
   onChange: (value: string) => void;
   onSubmit: (event: FormEvent<HTMLFormElement>) => void;
   onBlur?: (event: FocusEvent<HTMLFormElement>) => void;
@@ -22,7 +23,7 @@ interface Props {
 }
 
 const SearchBarInput = (
-  { onChange, onSubmit, isHomepage, isSuggestOpen, onFocus, onBlur, onHide, onClear, value }: Props,
+  { onChange, onSubmit, isHomepage, isSuggestOpen, onFocus, onBlur, onHide, onClear, value, ...rest }: Props,
   ref: React.ForwardedRef<HTMLFormElement>,
 ) => {
   const innerRef = React.useRef<HTMLFormElement>(null);
@@ -151,6 +152,7 @@ const SearchBarInput = (
       transitionProperty="transform,box-shadow,background-color,color,border-color"
       transitionDuration="normal"
       transitionTimingFunction="ease"
+      { ...rest }
     >
       <InputGroup
         startElement={ startElement }

ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggest.tsx

-import { Box, Text, Tabs } from '@chakra-ui/react';
+import { Box, Text } from '@chakra-ui/react';
 import type { UseQueryResult } from '@tanstack/react-query';
 import { throttle } from 'es-toolkit';
 import React from 'react';
@@ -10,6 +10,7 @@ import type { ResourceError } from 'lib/api/resources';
 import { useSettingsContext } from 'lib/contexts/settings';
 import useIsMobile from 'lib/hooks/useIsMobile';
 import * as regexp from 'lib/regexp';
+import { TabsList, TabsRoot, TabsTrigger } from 'toolkit/chakra/tabs';
 import useMarketplaceApps from 'ui/marketplace/useMarketplaceApps';
 import TextAd from 'ui/shared/ad/TextAd';
 import ContentLoader from 'ui/shared/ContentLoader';
@@ -151,23 +152,23 @@ const SearchBarSuggest = ({ query, searchTerm, onItemClick, containerId }: Props
       <>
         { resultCategories.length > 1 && (
           <Box position="sticky" top="0" width="100%" background={{ _light: 'white', _dark: 'gray.900' }} py={ 5 } my={ -5 } ref={ tabsRef } zIndex={ 1 }>
-            <Tabs.Root
+            <TabsRoot
               variant="secondary"
               size="sm"
               value={ currentTab }
               onValueChange={ handleTabsValueChange }
             >
-              <Tabs.List columnGap={ 3 } rowGap={ 2 } flexWrap="wrap">
+              <TabsList columnGap={ 3 } rowGap={ 2 } flexWrap="wrap">
                 { resultCategories.map((cat) => (
-                  <Tabs.Trigger
+                  <TabsTrigger
                     key={ cat.id }
                     value={ cat.id }
                   >
                     { cat.title }
-                  </Tabs.Trigger>
+                  </TabsTrigger>
                 )) }
-              </Tabs.List>
-            </Tabs.Root>
+              </TabsList>
+            </TabsRoot>
           </Box>
         ) }
         { resultCategories.map((cat, index) => {

ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestAddress.tsx

-import { chakra, Box, Text, Flex, Tag, Grid } from '@chakra-ui/react';
+import { chakra, Box, Text, Flex, Grid } from '@chakra-ui/react';
 import React from 'react';
 
 import type { ItemsProps } from './types';
@@ -7,6 +7,7 @@ import type { SearchResultAddressOrContract, SearchResultMetadataTag } from 'typ
 import { toBech32Address } from 'lib/address/bech32';
 import dayjs from 'lib/date/dayjs';
 import highlightText from 'lib/highlightText';
+import { Tag } from 'toolkit/chakra/tag';
 import ContractCertifiedLabel from 'ui/shared/ContractCertifiedLabel';
 import * as AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import EntityTagIcon from 'ui/shared/EntityTags/EntityTagIcon';

ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestApp.tsx

@@ -4,14 +4,13 @@ import React from 'react';
 
 import type { MarketplaceAppOverview } from 'types/client/marketplace';
 
+import { route } from 'nextjs-routes';
+
 import highlightText from 'lib/highlightText';
 import { useColorModeValue } from 'toolkit/chakra/color-mode';
 import { Image } from 'toolkit/chakra/image';
 import IconSvg from 'ui/shared/IconSvg';
 
-// TODO @tom2drum: remove NextLink
-import NextLink from 'ui/shared/NextLink';
-
 import SearchBarSuggestItemLink from './SearchBarSuggestItemLink';
 interface Props {
   data: MarketplaceAppOverview;
@@ -98,33 +97,14 @@ const SearchBarSuggestApp = ({ data, isMobile, searchTerm, onClick }: Props) =>
     );
   })();
 
-  if (data.external) {
-    return (
-      <NextLink
-        href={{
-          pathname: '/apps',
-          query: {
-            selectedAppId: data.id,
-          },
-        }}
-        passHref
-        shallow={ router.pathname === '/apps' }
-        legacyBehavior
-      >
-        <SearchBarSuggestItemLink onClick={ onClick }>
-          { content }
-        </SearchBarSuggestItemLink>
-      </NextLink>
-
-    );
-  }
-
   return (
-    <NextLink href={{ pathname: '/apps/[id]', query: { id: data.id } }} passHref legacyBehavior>
-      <SearchBarSuggestItemLink onClick={ onClick }>
-        { content }
-      </SearchBarSuggestItemLink>
-    </NextLink>
+    <SearchBarSuggestItemLink
+      onClick={ onClick }
+      href={ data.external ? route({ pathname: '/apps', query: { selectedAppId: data.id } }) : route({ pathname: '/apps/[id]', query: { id: data.id } }) }
+      shallow={ data.external && router.pathname === '/apps' }
+    >
+      { content }
+    </SearchBarSuggestItemLink>
   );
 };
 

ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestItem.tsx

-import type { LinkProps as NextLinkProps } from 'next/link';
 import React from 'react';
 
 import type { SearchResultItem } from 'types/client/search';
@@ -6,8 +5,6 @@ import type { AddressFormat } from 'types/views/address';
 
 import { route } from 'nextjs-routes';
 
-import NextLink from 'ui/shared/NextLink';
-
 import SearchBarSuggestAddress from './SearchBarSuggestAddress';
 import SearchBarSuggestBlob from './SearchBarSuggestBlob';
 import SearchBarSuggestBlock from './SearchBarSuggestBlock';
@@ -115,11 +112,9 @@ const SearchBarSuggestItem = ({ data, isMobile, searchTerm, onClick, addressForm
   })();
 
   return (
-    <NextLink href={ url as NextLinkProps['href'] } passHref legacyBehavior>
-      <SearchBarSuggestItemLink onClick={ onClick }>
-        { content }
-      </SearchBarSuggestItemLink>
-    </NextLink>
+    <SearchBarSuggestItemLink onClick={ onClick } href={ url }>
+      { content }
+    </SearchBarSuggestItemLink>
   );
 };
 

ui/snippets/searchBar/SearchBarSuggest/SearchBarSuggestItemLink.tsx

-import { chakra } from '@chakra-ui/react';
 import React from 'react';
 
-type Props = {
-  onClick: (event: React.MouseEvent<HTMLAnchorElement>) => void;
-  href?: string;
-  target?: string;
-  children: React.ReactNode;
-};
+import type { LinkProps } from 'toolkit/chakra/link';
+import { Link } from 'toolkit/chakra/link';
 
-const SearchBarSuggestItemLink = React.forwardRef<HTMLAnchorElement, Props>(({ onClick, href, target, children }, ref) => {
+interface Props extends LinkProps {};
+
+const SearchBarSuggestItemLink = React.forwardRef<HTMLAnchorElement, Props>(({ children, ...rest }, ref) => {
   return (
-    <chakra.a
+    <Link
       ref={ ref }
       py={ 3 }
       px={ 1 }
       display="flex"
       flexDir="column"
+      alignItems="stretch"
+      variant="plain"
       rowGap={ 2 }
       borderColor="border.divider"
       borderBottomWidth="1px"
@@ -29,12 +28,10 @@ const SearchBarSuggestItemLink = React.forwardRef<HTMLAnchorElement, Props>(({ o
       _first={{
         mt: 2,
       }}
-      onClick={ onClick }
-      href={ href }
-      target={ target }
+      { ...rest }
     >
       { children }
-    </chakra.a>
+    </Link>
   );
 });
 

ui/tx/TxAuthorizations.tsx

-import { Show, Hide } from '@chakra-ui/react';
+import { Box } from '@chakra-ui/react';
 import React from 'react';
 
 import DataListDisplay from 'ui/shared/DataListDisplay';
@@ -21,22 +21,23 @@ const TxAuthorizations = ({ txQuery }: Props) => {
 
   const content = (
     <>
-      <Show below="lg" ssr={ false }>
+      <Box hideFrom="lg">
         <TxAuthorizationsList data={ txQuery.data?.authorization_list } isLoading={ txQuery.isPlaceholderData }/>
-      </Show>
-      <Hide below="lg" ssr={ false }>
+      </Box>
+      <Box hideBelow="lg">
         <TxAuthorizationsTable data={ txQuery.data?.authorization_list } isLoading={ txQuery.isPlaceholderData }/>
-      </Hide>
+      </Box>
     </>
   );
 
   return (
     <DataListDisplay
       isError={ txQuery.isError }
-      items={ txQuery.data?.authorization_list }
+      itemsNum={ txQuery.data?.authorization_list?.length }
       emptyText="There are no authorizations for this transaction."
-      content={ content }
-    />
+    >
+      { content }
+    </DataListDisplay>
   );
 };
 

ui/tx/authorizations/TxAuthorizationsListItem.tsx

@@ -4,7 +4,7 @@ import React from 'react';
 import type { TxAuthorization } from 'types/api/transaction';
 
 import config from 'configs/app';
-import Skeleton from 'ui/shared/chakra/Skeleton';
+import { Skeleton } from 'toolkit/chakra/skeleton';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import ListItemMobile from 'ui/shared/ListItemMobile/ListItemMobile';
 
@@ -15,21 +15,21 @@ interface Props extends TxAuthorization {
 const TxAuthorizationsListItem = ({ address, authority, chain_id: chainId, nonce, isLoading }: Props) => {
   return (
     <ListItemMobile rowGap={ 3 } fontSize="sm">
-      <HStack spacing={ 3 } w="100%">
-        <Skeleton isLoaded={ !isLoading } fontWeight={ 500 }>Address</Skeleton>
+      <HStack gap={ 3 } w="100%">
+        <Skeleton loading={ isLoading } fontWeight={ 500 }>Address</Skeleton>
         <AddressEntity address={{ hash: address }} isLoading={ isLoading } noIcon/>
       </HStack>
-      <HStack spacing={ 3 } w="100%">
-        <Skeleton isLoaded={ !isLoading } fontWeight={ 500 }>Authority</Skeleton>
+      <HStack gap={ 3 } w="100%">
+        <Skeleton loading={ isLoading } fontWeight={ 500 }>Authority</Skeleton>
         <AddressEntity address={{ hash: authority }} isLoading={ isLoading } noIcon/>
       </HStack>
-      <HStack spacing={ 3 }>
-        <Skeleton isLoaded={ !isLoading } fontWeight={ 500 }>Chain</Skeleton>
-        <Skeleton isLoaded={ !isLoading } color="text_secondary">{ chainId === Number(config.chain.id) ? 'this' : 'any' }</Skeleton>
+      <HStack gap={ 3 }>
+        <Skeleton loading={ isLoading } fontWeight={ 500 }>Chain</Skeleton>
+        <Skeleton loading={ isLoading } color="text_secondary">{ chainId === Number(config.chain.id) ? 'this' : 'any' }</Skeleton>
       </HStack>
-      <HStack spacing={ 3 }>
-        <Skeleton isLoaded={ !isLoading } fontWeight={ 500 }>Nonce</Skeleton>
-        <Skeleton isLoaded={ !isLoading } color="text_secondary">{ nonce }</Skeleton>
+      <HStack gap={ 3 }>
+        <Skeleton loading={ isLoading } fontWeight={ 500 }>Nonce</Skeleton>
+        <Skeleton loading={ isLoading } color="text_secondary">{ nonce }</Skeleton>
       </HStack>
     </ListItemMobile>
   );

ui/tx/authorizations/TxAuthorizationsTable.tsx

-import { Table, Tbody, Tr, Th } from '@chakra-ui/react';
 import React from 'react';
 
 import type { TxAuthorization } from 'types/api/transaction';
 
 import { AddressHighlightProvider } from 'lib/contexts/addressHighlight';
-import { default as Thead } from 'ui/shared/TheadSticky';
+import { TableBody, TableColumnHeader, TableHeaderSticky, TableRoot, TableRow } from 'toolkit/chakra/table';
 
 import TxAuthorizationsTableItem from './TxAuthorizationsTableItem';
 
@@ -16,21 +15,21 @@ interface Props {
 const TxAuthorizationsTable = ({ data, isLoading }: Props) => {
   return (
     <AddressHighlightProvider>
-      <Table>
-        <Thead>
-          <Tr>
-            <Th width="50%">Address</Th>
-            <Th width="50%">Authority</Th>
-            <Th width="120px">Chain</Th>
-            <Th width="120px" isNumeric>Nonce</Th>
-          </Tr>
-        </Thead>
-        <Tbody>
+      <TableRoot>
+        <TableHeaderSticky>
+          <TableRow>
+            <TableColumnHeader width="50%">Address</TableColumnHeader>
+            <TableColumnHeader width="50%">Authority</TableColumnHeader>
+            <TableColumnHeader width="120px">Chain</TableColumnHeader>
+            <TableColumnHeader width="120px" isNumeric>Nonce</TableColumnHeader>
+          </TableRow>
+        </TableHeaderSticky>
+        <TableBody>
           { data?.map((item, index) => (
             <TxAuthorizationsTableItem key={ item.nonce.toString() + (isLoading ? index : '') } { ...item } isLoading={ isLoading }/>
           )) }
-        </Tbody>
-      </Table>
+        </TableBody>
+      </TableRoot>
     </AddressHighlightProvider>
   );
 };

ui/tx/authorizations/TxAuthorizationsTableItem.tsx

-import { Tr, Td } from '@chakra-ui/react';
 import React from 'react';
 
 import type { TxAuthorization } from 'types/api/transaction';
 
 import config from 'configs/app';
-import Skeleton from 'ui/shared/chakra/Skeleton';
+import { Skeleton } from 'toolkit/chakra/skeleton';
+import { TableRow, TableCell } from 'toolkit/chakra/table';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 
 interface Props extends TxAuthorization {
@@ -13,24 +13,24 @@ interface Props extends TxAuthorization {
 
 const TxAuthorizationsItem = ({ address, authority, chain_id: chainId, nonce, isLoading }: Props) => {
   return (
-    <Tr alignItems="top">
-      <Td>
+    <TableRow alignItems="top">
+      <TableCell>
         <AddressEntity address={{ hash: address }} isLoading={ isLoading } noIcon/>
-      </Td>
-      <Td verticalAlign="middle">
+      </TableCell>
+      <TableCell verticalAlign="middle">
         <AddressEntity address={{ hash: authority }} isLoading={ isLoading } noIcon/>
-      </Td>
-      <Td verticalAlign="middle">
-        <Skeleton isLoaded={ !isLoading } display="inline-block">
+      </TableCell>
+      <TableCell verticalAlign="middle">
+        <Skeleton loading={ isLoading } display="inline-block">
           { chainId === Number(config.chain.id) ? 'this' : 'any' }
         </Skeleton>
-      </Td>
-      <Td isNumeric verticalAlign="middle">
-        <Skeleton isLoaded={ !isLoading } display="inline-block">
+      </TableCell>
+      <TableCell isNumeric verticalAlign="middle">
+        <Skeleton loading={ isLoading } display="inline-block">
           { nonce }
         </Skeleton>
-      </Td>
-    </Tr>
+      </TableCell>
+    </TableRow>
   );
 };
 

ui/tx/details/TxDetailsWithdrawalStatusArbitrum.tsx

@@ -5,9 +5,9 @@ import type { ArbitrumTransactionMessageStatus, Transaction } from 'types/api/tr
 
 import { route } from 'nextjs-routes';
 
-import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
+import { Link } from 'toolkit/chakra/link';
+import * as DetailedInfo from 'ui/shared/DetailedInfo/DetailedInfo';
 import TxEntityL1 from 'ui/shared/entities/tx/TxEntityL1';
-import LinkInternal from 'ui/shared/links/LinkInternal';
 import VerificationSteps from 'ui/shared/verificationSteps/VerificationSteps';
 
 const WITHDRAWAL_STATUS_STEPS: Array<ArbitrumTransactionMessageStatus> = [
@@ -41,11 +41,11 @@ const TxDetailsWithdrawalStatusArbitrum = ({ data }: Props) => {
 
           return {
             content: (
-              <LinkInternal
+              <Link
                 href={ route({ pathname: '/txn-withdrawals', query: { q: data.hash } }) }
               >
                 { step }
-              </LinkInternal>
+              </Link>
             ),
             label: step,
           };
@@ -64,35 +64,35 @@ const TxDetailsWithdrawalStatusArbitrum = ({ data }: Props) => {
   if (data.arbitrum.contains_message === 'outcoming') {
     return (
       <>
-        <DetailsInfoItem.Label
+        <DetailedInfo.ItemLabel
           hint="Detailed status progress of the transaction"
         >
           Withdrawal status
-        </DetailsInfoItem.Label>
-        <DetailsInfoItem.Value>
+        </DetailedInfo.ItemLabel>
+        <DetailedInfo.ItemValue>
           { data.arbitrum.message_related_info.message_status ? (
             <VerificationSteps
               steps={ steps as unknown as Array<ArbitrumTransactionMessageStatus> }
               currentStep={ data.arbitrum.message_related_info.message_status }
             />
-          ) : <Text variant="secondary">Could not determine</Text> }
-        </DetailsInfoItem.Value>
+          ) : <Text color="text.secondary">Could not determine</Text> }
+        </DetailedInfo.ItemValue>
       </>
     );
   }
   return (
     <>
-      <DetailsInfoItem.Label
+      <DetailedInfo.ItemLabel
         hint="The hash of the transaction that originated the message from the base layer"
       >
         Originating L1 txn hash
-      </DetailsInfoItem.Label>
-      <DetailsInfoItem.Value>
+      </DetailedInfo.ItemLabel>
+      <DetailedInfo.ItemValue>
         { data.arbitrum.message_related_info.associated_l1_transaction ?
           <TxEntityL1 hash={ data.arbitrum.message_related_info.associated_l1_transaction }/> :
-          <Text variant="secondary">Waiting for confirmation</Text>
+          <Text color="text.secondary">Waiting for confirmation</Text>
         }
-      </DetailsInfoItem.Value>
+      </DetailedInfo.ItemValue>
     </>
   );
 };

ui/tx/details/TxInfo.tsx

@@ -5,7 +5,6 @@ import {
   Spinner,
   Flex,
   chakra,
-  HStack,
 } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
@@ -90,6 +89,10 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
     },
   });
 
+  const handleCutLinkClick = React.useCallback(() => {
+    setIsExpanded((flag) => !flag);
+  }, []);
+
   const showAssociatedL1Tx = React.useCallback(() => {
     setIsExpanded(true);
   }, []);
@@ -803,28 +806,7 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
       <CutLinkDetails loading={ isLoading } mt={ 6 } gridColumn={{ base: undefined, lg: '1 / 3' }} isExpanded={ isExpanded } onClick={ handleCutLinkClick }>
         <GridItem colSpan={{ base: undefined, lg: 2 }} mt={{ base: 1, lg: 4 }}/>
 
-        { data.arbitrum?.contains_message && data.arbitrum?.message_related_info && (
-          <>
-            <DetailedInfo.ItemLabel
-              hint={ data.arbitrum.contains_message === 'incoming' ?
-                'The hash of the transaction that originated the message from the base layer' :
-                'The hash of the transaction that completed the message on the base layer'
-              }
-            >
-              { data.arbitrum.contains_message === 'incoming' ? 'Originating L1 txn hash' : 'Completion L1 txn hash' }
-            </DetailedInfo.ItemLabel>
-            <DetailedInfo.ItemValue>
-              { data.arbitrum.message_related_info.associated_l1_transaction ?
-                <TxEntityL1 hash={ data.arbitrum.message_related_info.associated_l1_transaction }/> : (
-                  <HStack gap={ 2 }>
-                    <Text color="text_secondary">{ data.arbitrum.message_related_info.message_status }</Text>
-                    <Hint label={ MESSAGE_DESCRIPTIONS[data.arbitrum.message_related_info.message_status] }/>
-                  </HStack>
-                )
-              }
-            </DetailedInfo.ItemValue>
-          </>
-        ) }
+        <TxDetailsWithdrawalStatusArbitrum data={ data }/>
 
         { (data.blob_gas_used || data.max_fee_per_blob_gas || data.blob_gas_price) && (
           <>
@@ -860,8 +842,6 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
               </>
             ) }
 
-            <TxDetailsWithdrawalStatusArbitrum data={ data }/>
-
             { (data.max_fee_per_blob_gas || data.blob_gas_price) && (
               <>
                 <DetailedInfo.ItemLabel