Merge pull request #1604 from blockscout/fe-1590

Interpretation UI update

ui/tx/TxSubHeading.pw.tsx

@@ -43,6 +43,21 @@ bsInterpretationTest('with interpretation +@mobile +@dark-mode', async({ mount,
   await expect(component).toHaveScreenshot();
 });
 
+bsInterpretationTest('with interpretation and view all link +@mobile', async({ mount, page }) => {
+  await page.route(TX_INTERPRETATION_API_URL, (route) => route.fulfill({
+    status: 200,
+    body: JSON.stringify({ data: { summaries: [ ...txInterpretation.data.summaries, ...txInterpretation.data.summaries ] } }),
+  }));
+
+  const component = await mount(
+    <TestApp>
+      <TxSubHeading hash={ hash } hasTag={ false }/>
+    </TestApp>,
+  );
+
+  await expect(component).toHaveScreenshot();
+});
+
 bsInterpretationTest('no interpretation', async({ mount, page }) => {
   await page.route(TX_INTERPRETATION_API_URL, (route) => route.fulfill({
     status: 200,

ui/tx/TxSubHeading.tsx

@@ -29,6 +29,9 @@ const TxSubHeading = ({ hash, hasTag }: Props) => {
   const hasInterpretation = hasInterpretationFeature &&
     (txInterpretationQuery.isPlaceholderData || Boolean(txInterpretationQuery.data?.data.summaries.length));
 
+  const hasViewAllInterpretationsLink =
+    !txInterpretationQuery.isPlaceholderData && txInterpretationQuery.data?.data.summaries && txInterpretationQuery.data?.data.summaries.length > 1;
+
   return (
     <Box display={{ base: 'block', lg: 'flex' }} alignItems="center" w="100%">
       { hasInterpretation && (
@@ -37,9 +40,10 @@ const TxSubHeading = ({ hash, hasTag }: Props) => {
             summary={ txInterpretationQuery.data?.data.summaries[0] }
             isLoading={ txInterpretationQuery.isPlaceholderData }
             fontSize="lg"
+            mr={ hasViewAllInterpretationsLink ? 3 : 0 }
           />
-          { !txInterpretationQuery.isPlaceholderData && txInterpretationQuery.data?.data.summaries && txInterpretationQuery.data?.data.summaries.length > 1 &&
-            <Link ml={ 3 } href={ `#${ TX_ACTIONS_BLOCK_ID }` }>all actions</Link> }
+          { hasViewAllInterpretationsLink &&
+            <Link href={ `#${ TX_ACTIONS_BLOCK_ID }` }>View all</Link> }
         </Flex>
       ) }
       { !hasInterpretation && <TxEntity hash={ hash } noLink noCopy={ false } fontWeight={ 500 } mr={{ base: 0, lg: 2 }} fontFamily="heading"/> }

ui/tx/interpretation/TxInterpretation.tsx

-import { Skeleton, chakra } from '@chakra-ui/react';
+import { Skeleton, Tooltip, chakra } from '@chakra-ui/react';
 import BigNumber from 'bignumber.js';
 import React from 'react';
 
@@ -127,7 +127,9 @@ const TxInterpretation = ({ summary, isLoading, className }: Props) => {
 
   return (
     <Skeleton isLoaded={ !isLoading } className={ className } fontWeight={ 500 } whiteSpace="pre-wrap" >
-      <IconSvg name="lightning" boxSize={ 5 } color="text_secondary" mr={ 2 } verticalAlign="text-top"/>
+      <Tooltip label="Transaction summary">
+        <IconSvg name="lightning" boxSize={ 5 } color="text_secondary" mr={ 2 } verticalAlign="text-top"/>
+      </Tooltip>
       { chunks.map((chunk, index) => {
         return (
           <chakra.span key={ chunk + index }>