Show decoded target address in User operations (#2520)

Author: isstuev

mocks/userOps/userOp.ts

@@ -66,6 +66,14 @@ export const userOpData: UserOp = {
   },
   call_data: '0xb61d27f600000000000000000000000059f6aa952df7f048fd076e33e0ea8bb552d5ffd8000000000000000000000000000000000000000000000000003f3d017500800000000000000000000000000000000000000000000000000000000000000000600000000000000000000000000000000000000000000000000000000000000000',
   execute_call_data: '0x3cf80e6c',
+  execute_target: {
+    ens_domain_name: null,
+    hash: '0xA0b86991c6218b36c1d19D4a2e9Eb0cE3606eB48',
+    implementations: null,
+    is_contract: true,
+    is_verified: true,
+    name: 'FiatTokenProxy',
+  },
   decoded_call_data: {
     method_call: 'execute(address dest, uint256 value, bytes func)',
     method_id: 'b61d27f6',

types/api/userOps.ts

@@ -49,6 +49,7 @@ export type UserOp = {
   call_data: string;
   decoded_call_data: DecodedInput | null;
   execute_call_data: string | null;
+  execute_target?: AddressParamBasic | null;
   decoded_execute_call_data: DecodedInput | null;
   user_logs_start_index: number;
   user_logs_count: number;

ui/pages/__screenshots__/UserOp.pw.tsx_default_base-view-1.png

@@ -19,6 +19,7 @@ import DataFetchAlert from 'ui/shared/DataFetchAlert';
 import * as DetailsInfoItem from 'ui/shared/DetailsInfoItem';
 import DetailsInfoItemDivider from 'ui/shared/DetailsInfoItemDivider';
 import DetailsTimestamp from 'ui/shared/DetailsTimestamp';
+import AddressEntity from 'ui/shared/entities/address/AddressEntity';
 import AddressStringOrParam from 'ui/shared/entities/address/AddressStringOrParam';
 import BlockEntity from 'ui/shared/entities/block/BlockEntity';
 import TxEntity from 'ui/shared/entities/tx/TxEntity';
@@ -91,6 +92,20 @@ const UserOpDetails = ({ query }: Props) => {
         <AddressStringOrParam address={ data.sender } isLoading={ isPlaceholderData }/>
       </DetailsInfoItem.Value>
 
+      { data.execute_target && (
+        <>
+          <DetailsInfoItem.Label
+            hint="Target smart contract called by the User operation"
+            isLoading={ isPlaceholderData }
+          >
+            Target
+          </DetailsInfoItem.Label>
+          <DetailsInfoItem.Value>
+            <AddressEntity address={ data.execute_target } isLoading={ isPlaceholderData }/>
+          </DetailsInfoItem.Value>
+        </>
+      ) }
+
       <DetailsInfoItem.Label
         hint="Current User operation state"
         isLoading={ isPlaceholderData }