fixes

blockscout · Feb 21, 2025 · fee74c7 · fee74c7
1 parent 86dc3ff
commit fee74c7
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 62 deletions.
diff --git a/ui/interopMessages/InteropMessageAdditionalInfo.tsx b/ui/interopMessages/InteropMessageAdditionalInfo.tsx
@@ -20,40 +20,14 @@ import CopyToClipboard from 'ui/shared/CopyToClipboard';
 
 type Props = {
   payload: InteropMessage['payload'];
-  // isMobile?: boolean;
   isLoading?: boolean;
   className?: string;
 };
 
 const InteropMessageAdditionalInfo = ({ payload, isLoading, className }: Props) => {
-  // const InteropMessageAdditionalInfo = ({ payload, isMobile, isLoading, className }: Props) => {
-  // const { isOpen, onOpen, onClose } = useDisclosure();
-
-  // const content = (
-  //   <>
-  //     <Text>Message payload</Text>
-  //     <Text>
-  //       { payload }
-  //     </Text>
-  //   </>
-  // );
-
-  // if (isMobile) {
-  //   return (
-  //     <>
-  //       <AdditionalInfoButton onClick={ onOpen } isLoading={ isLoading } className={ className }/>
-  //       <Modal isOpen={ isOpen } onClose={ onClose } size="full">
-  //         <ModalContent paddingTop={ 4 }>
-  //           <ModalCloseButton/>
-  //           { content }
-  //         </ModalContent>
-  //       </Modal>
-  //     </>
-  //   );
-  // }
   return (
     <Popover placement="right-start" openDelay={ 300 } isLazy>
-      { ({ isOpen }) => (
+      { ({ isOpen, onClose }) => (
         <>
           <PopoverTrigger>
             <AdditionalInfoButton isOpen={ isOpen } isLoading={ isLoading } className={ className }/>
@@ -62,7 +36,7 @@ const InteropMessageAdditionalInfo = ({ payload, isLoading, className }: Props)
             <PopoverBody fontWeight={ 400 } fontSize="sm">
               <Flex alignItems="center" justifyContent="space-between" mb={ 3 }>
                 <Text color="text_secondary" fontWeight="600">Message payload</Text>
-                <CopyToClipboard text={ payload }/>
+                <CopyToClipboard text={ payload } onClick={ onClose }/>
               </Flex>
               <Text>
                 { payload }

diff --git a/ui/interopMessages/InteropMessagesTableItem.tsx b/ui/interopMessages/InteropMessagesTableItem.tsx
@@ -23,7 +23,7 @@ const InteropMessagesTableItem = ({ item, isLoading }: Props) => {
   return (
     <Tr>
       <Td>
-        <InteropMessageAdditionalInfo payload={ item.payload }/>
+        <InteropMessageAdditionalInfo payload={ item.payload } isLoading={ isLoading }/>
       </Td>
       <Td>
         <Skeleton isLoaded={ !isLoading } fontWeight="700">

diff --git a/ui/pages/Transaction.tsx b/ui/pages/Transaction.tsx
@@ -84,7 +84,7 @@ const TransactionPageContent = () => {
     [ { slug: data.transaction_tag, name: data.transaction_tag, tagType: 'private_tag' as const, ordinal: 1 } ] : [];
   if (rollupFeature.isEnabled && rollupFeature.interopEnabled && data?.op_interop) {
     if (data.op_interop.init_chain !== undefined) {
-      txTags.push({ slug: 'relayed_tx', name: 'Relayed tx', tagType: 'custom' as const, ordinal: 0 });
+      txTags.push({ slug: 'relay_tx', name: 'Relay tx', tagType: 'custom' as const, ordinal: 0 });
     }
     if (data.op_interop.relay_chain !== undefined) {
       txTags.push({ slug: 'init_tx', name: 'Source tx', tagType: 'custom' as const, ordinal: 0 });

diff --git a/ui/shared/entities/address/AddressEntityInterop.tsx b/ui/shared/entities/address/AddressEntityInterop.tsx
@@ -5,7 +5,6 @@ import type { ChainInfo } from 'types/api/interop';
 
 import { route } from 'nextjs-routes';
 
-import * as EntityBase from 'ui/shared/entities/base/components';
 import IconSvg from 'ui/shared/IconSvg';
 
 import { distributeEntityProps } from '../base/utils';
@@ -55,13 +54,9 @@ const AddressEntryInterop = (props: Props) => {
   return (
     <AddressEntity.Container>
       { props.chain && (
-        <Tooltip label={ `Contract on ${ props.chain.chain_name ? props.chain.chain_name : 'external chain' } (chain id ${ props.chain.chain_id })` }>
+        <Tooltip label={ `Address on ${ props.chain.chain_name ? props.chain.chain_name : 'external chain' } (chain id ${ props.chain.chain_id })` }>
           <Box position="relative">
-            <EntityBase.Icon
-              { ...props }
-              name="contracts/regular"
-              borderRadius={ 0 }
-            />
+            <AddressEntity.Icon { ...partsProps.icon }/>
             { props.chain.chain_logo ? (
               <Image
                 position="absolute"

diff --git a/ui/tx/details/TxDetailsInterop.tsx b/ui/tx/details/TxDetailsInterop.tsx
@@ -102,7 +102,7 @@ const TxDetailsInterop = ({ data, isLoading }: Props) => {
     </Grid>
   );
 
-  if (data.init_transaction_hash) {
+  if (data.init_chain !== undefined) {
     return (
       <>
         <DetailsInfoItem.Label
@@ -120,7 +120,7 @@ const TxDetailsInterop = ({ data, isLoading }: Props) => {
     );
   }
 
-  if (data.relay_transaction_hash) {
+  if (data.relay_chain !== undefined) {
     return (
       <>
         <DetailsInfoItem.Label

diff --git a/ui/tx/details/TxInfo.tsx b/ui/tx/details/TxInfo.tsx
@@ -504,6 +504,29 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
 
       { data.token_transfers && <TxDetailsTokenTransfers data={ data.token_transfers } txHash={ data.hash } isOverflow={ data.token_transfers_overflow }/> }
 
+      { hasInterop && data.op_interop?.target && (
+        <>
+          <DetailsInfoItem.Label
+            isLoading={ isLoading }
+            hint="The target address where this cross-chain transaction is executed"
+          >
+            Interop target
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value flexWrap="nowrap">
+            { data.op_interop?.relay_chain ? (
+              <AddressEntityInterop
+                chain={ data.op_interop.relay_chain }
+                address={{ hash: data.op_interop.target }}
+                isLoading={ isLoading }
+                truncation="dynamic"
+              />
+            ) : (
+              <AddressEntity address={{ hash: data.op_interop.target }} isLoading={ isLoading } truncation="dynamic"/>
+            ) }
+          </DetailsInfoItem.Value>
+        </>
+      ) }
+
       <DetailsInfoItemDivider/>
 
       { (data.arbitrum?.commitment_transaction.hash || data.arbitrum?.confirmation_transaction.hash) &&
@@ -576,29 +599,6 @@ const TxInfo = ({ data, isLoading, socketStatus }: Props) => {
 
       { (data.zkevm_batch_number || data.zkevm_verify_hash) && <DetailsInfoItemDivider/> }
 
-      { hasInterop && data.op_interop?.target && (
-        <>
-          <DetailsInfoItem.Label
-            isLoading={ isLoading }
-            hint="The target contract where this cross-chain transaction is executed"
-          >
-            Interop target
-          </DetailsInfoItem.Label>
-          <DetailsInfoItem.Value flexWrap="nowrap">
-            { data.op_interop?.relay_chain ? (
-              <AddressEntityInterop
-                chain={ data.op_interop.relay_chain }
-                address={{ hash: data.op_interop.target }}
-                isLoading={ isLoading }
-                truncation="dynamic"
-              />
-            ) : (
-              <AddressEntity address={{ hash: data.op_interop.target }} isLoading={ isLoading } truncation="dynamic"/>
-            ) }
-          </DetailsInfoItem.Value>
-        </>
-      ) }
-
       { !config.UI.views.tx.hiddenFields?.value && (
         <>
           <DetailsInfoItem.Label