GBBE-308 Add key in single Entity operation data on transaction view (#126)

Author: BartoszBuczkowski

ui/entityOps/OpExpandableDetails.tsx

@@ -9,15 +9,17 @@ import OperationSpecificData from 'ui/entityOp/OperationSpecificData';
 import { Container, ItemDivider, ItemLabel, ItemValue } from 'ui/shared/DetailedInfo/DetailedInfo';
 import DetailedInfoTimestamp from 'ui/shared/DetailedInfo/DetailedInfoTimestamp';
 import AddressEntity from 'ui/shared/entities/address/AddressEntity';
+import StorageEntity from 'ui/shared/entities/entity/StorageEntity';
 
 import EntityOpType from './EntityOpType';
 
 interface Props {
   txHash: string;
   opIndex: string;
+  withEntity?: boolean;
 }
 
-const OpExpandableDetails = ({ txHash, opIndex }: Props) => {
+const OpExpandableDetails = ({ txHash, opIndex, withEntity }: Props) => {
   const { data, isPlaceholderData: isLoading } = useApiQuery('golemBaseIndexer:operation', {
     pathParams: { tx_hash: txHash, op_index: opIndex },
     queryOptions: {
@@ -32,6 +34,19 @@ const OpExpandableDetails = ({ txHash, opIndex }: Props) => {
 
   return (
     <Container data-testid="operation-details">
+      { withEntity && (
+        <>
+          <ItemLabel hint="Entity operation type">Entity</ItemLabel>
+          <ItemValue>
+            <StorageEntity
+              entityKey={ data.entity_key }
+              isLoading={ isLoading }
+              truncation="dynamic"
+            />
+          </ItemValue>
+        </>
+      ) }
+
       <ItemLabel hint="Entity operation type">Type</ItemLabel>
       <ItemValue>
         <EntityOpType operation={ data.operation } isLoading={ isLoading }/>

ui/tx/details/TxInfo.pw.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 
+import * as entityOpsMock from 'mocks/operations/entityOps';
 import * as tokenInstanceMock from 'mocks/tokens/tokenInstance';
 import * as txMock from 'mocks/txs/tx';
 import { ENVS_MAP } from 'playwright/fixtures/mockEnvs';
@@ -167,3 +168,20 @@ test('with interop message out +@mobile', async({ page, render, mockEnvs, mockAs
     maskColor: pwConfig.maskColor,
   });
 });
+
+test('with sigle operation only +@mobile +@dark-mode', async({ page, render, mockApiResponse }) => {
+  await mockApiResponse('golemBaseIndexer:operation', entityOpsMock.createEntityHistoryEntry, {
+    pathParams: {
+      tx_hash: txMock.base.hash,
+      op_index: '0',
+    },
+  });
+  const component = await render(<TxInfo data={ txMock.base } isLoading={ false } isSingleOperation/>);
+
+  await page.getByText('View details').click();
+
+  await expect(component).toHaveScreenshot({
+    mask: [ page.locator(pwConfig.adsBannerSelector) ],
+    maskColor: pwConfig.maskColor,
+  });
+});

ui/tx/details/TxInfo.tsx

@@ -857,24 +857,25 @@ const TxInfo = ({ data, tacOperations, isLoading, socketStatus, isSingleOperatio
               </DetailedInfo.ItemValue>
             </>
           ) }
+        </>
+      ) }
 
-          { isSingleOperation && (
-            <>
-              <DetailedInfo.ItemDivider/>
+      { isSingleOperation && (
+        <>
+          <DetailedInfo.ItemDivider/>
 
-              <DetailedInfo.ItemLabel
-                hint="Since the transaction contains exactly one operation, we automatically show its full preview."
-                isLoading={ isLoading }
-              >
-                Entity operation
-              </DetailedInfo.ItemLabel>
-              <DetailedInfo.ItemValue>
-                <OpExpandableDetails txHash={ data.hash } opIndex="0"/>
-              </DetailedInfo.ItemValue>
-            </>
-          ) }
+          <DetailedInfo.ItemLabel
+            hint="Since the transaction contains exactly one operation, we automatically show its full preview."
+            isLoading={ isLoading }
+          >
+            Entity operation
+          </DetailedInfo.ItemLabel>
+          <DetailedInfo.ItemValue>
+            <OpExpandableDetails txHash={ data.hash } opIndex="0" withEntity/>
+          </DetailedInfo.ItemValue>
         </>
       ) }
+
       <TxInfoScrollFees data={ data } isLoading={ isLoading }/>
 
       <CollapsibleDetails loading={ isLoading } mt={ 6 } gridColumn={{ base: undefined, lg: '1 / 3' }} isExpanded={ isExpanded } onClick={ handleCutLinkClick }>