[fix][655] add contract icon for log decode

src/app/core/helpers/global-error.ts

@@ -4,6 +4,8 @@ import { ErrorHandler, Injectable } from '@angular/core';
 export class GlobalErrorHandler implements ErrorHandler {
 
   handleError(error: any): void {
+    console.log(error);
+
    const chunkFailedMessage = /Loading chunk [\d]+ failed/;
 
     if (chunkFailedMessage.test(error?.message)) {

src/app/pages/transaction/evm-transaction/decode-message/decode-message.component.html

@@ -28,7 +28,16 @@
         <p class="mb-0 font-space-mono" [innerHTML]="decode | highlight_function"></p>
     </div>
     <div *ngIf="isAllowSwitchDecode" class="data flex-grow-1" [class]="isHighlight ? 'highlight' : ''">
-        <a *ngIf="isLink && type === 'Decode'" class="text--primary font-space-mono" routerLink="/address/{{ data }}">
+        <img
+          [src]="'assets/images/icons/token-contract.svg' | imageS3"
+          width="16px"
+          height="16px"
+          *ngIf="isEvmContract" />
+        <a
+         *ngIf="isLink && type === 'Decode'"
+          class="text--primary font-space-mono d-inline-block"
+          [class]="isEvmContract ? 'p-1' : ''"
+          routerLink="/{{ isEvmContract ? 'evm-contracts' : 'address' }}/{{ data }}">
             {{data}}
         </a>
         <span class="font-space-mono" *ngIf="!isLink || type === 'Hex'">{{data}}</span>
@@ -50,7 +59,16 @@
                         <div *ngIf="!item?.isLink" class="font-space-mono">
                             <div *ngIf="item?.type === 'tuple'" class="d-flex flex-wrap gap-2 align-items-center">
                                 <div *ngFor="let dataDecoded of item?.decode">
-                                    <a ngClass="font-space-mono" *ngIf="dataDecoded?.isLink" class="text--primary" routerLink="/address/{{ dataDecoded?.name }}">
+                                    <img
+                                      [src]="'assets/images/icons/token-contract.svg' | imageS3"
+                                      width="16px"
+                                      height="16px"
+                                      *ngIf="dataDecoded?.isEvmContract" />
+                                    <a
+                                      *ngIf="dataDecoded?.isLink"
+                                      class="text--primary font-space-mono d-inline-block"
+                                      [class]="dataDecoded?.isEvmContract ? 'p-1' : ''"
+                                      routerLink="/{{ dataDecoded?.isEvmContract ? 'evm-contracts' : 'address' }}/{{ dataDecoded?.name }}">
                                         {{dataDecoded?.name}}
                                     </a>
                                     <p class="font-space-mono" *ngIf="!dataDecoded?.isLink" >{{dataDecoded?.name}}</p>

src/app/pages/transaction/evm-transaction/decode-message/decode-message.component.ts

@@ -1,5 +1,8 @@
-import { Component, Input, OnInit } from '@angular/core';
+import { ChangeDetectorRef, Component, Input, OnInit } from '@angular/core';
 import { EnvironmentService } from 'src/app/core/data-services/environment.service';
+import { ContractService } from 'src/app/core/services/contract.service';
+import * as _ from 'lodash';
+
 @Component({
   selector: 'app-decode-message',
   templateUrl: './decode-message.component.html',
@@ -15,54 +18,101 @@ export class DecodeMessageComponent implements OnInit {
   @Input() isHighlight?: boolean;
   @Input() isDataField?: boolean;
 
-  data: string | any[] = '';
+  data: string | any = '';
   type: 'Decode' | 'Hex' = 'Hex';
   isMobile = false;
-
-  constructor(private environmentService: EnvironmentService) {}
+  isEvmContract = false;
+  constructor(
+    private environmentService: EnvironmentService,
+    private contractService: ContractService,
+    private detectRef: ChangeDetectorRef,
+  ) {}
 
   ngOnInit(): void {
     this.isMobile = this.environmentService.isMobile;
     this.data = this.value;
   }
+
+  checkEvmContract(address: string, cb: (isContract: boolean) => void) {
+    this.contractService.findEvmContract(address).subscribe({
+      next: (res) => {
+        if (res?.evm_smart_contract?.length > 0) cb(true);
+        else cb(false);
+      },
+    });
+  }
+
+  getAddress (data: any[]) {
+    const addresses = [];
+    for (const item of data) {
+      if(item?.isLink) addresses.push(item?.decode);
+      else if(item?.type === 'tuple') {
+        item?.decode?.split(',')?.forEach((tupleItem) => {
+          if (tupleItem?.startsWith('0x')) {
+            addresses.push(tupleItem);
+          }})
+      } 
+    }
+    return _.uniq(addresses.filter(Boolean));
+  }
+
   onDecode(field?: string) {
     this.type = 'Decode';
-    if(field !== 'data'){
+    if (field !== 'data') {
       this.data = this.decode;
+      this.checkEvmContract(this.decode, (isContract) => {
+        if (isContract) this.isEvmContract = true;
+        else this.isEvmContract = false;
+        this.detectRef.detectChanges();
+      });
       return;
-    }
+    } else {
+      if (Array.isArray(this.decode)) {
+        const addresses = this.getAddress(this.decode);       
+        this.contractService.findEvmContractList(addresses).subscribe({
+          next: (evmList) => {
+            this.data = Array.isArray(this.decode) && this.decode?.map((item) => {
+              if (item?.type !== 'tuple') {
+                const isEvmContract = !!evmList?.evm_smart_contract?.find(contract => contract?.address === item?.decode?.toString()?.toLowerCase());
 
-    this.data = Array.isArray(this.decode) && this.decode?.map(item => {
-      if(item?.type !== 'tuple') {
-        return {
-          ...item,
-          isArray: false,
-        }
+                return {
+                  ...item,
+                  isEvmContract,
+                  isArray: false,
+                };
+              }
+              if (item?.type === 'tuple') {
+                const links = item?.decode?.split(',')?.map((tupleItem: string) => {
+                  if (tupleItem?.startsWith('0x')) {
+                  const isEvmContract = !!evmList?.evm_smart_contract?.find(contract => contract?.address === tupleItem?.toString()?.toLowerCase());
+                    return {
+                      isEvmContract,
+                      name: tupleItem,
+                      isLink: true,
+                    };
+                  }
+                  return {
+                    name: tupleItem,
+                    isLink: false,
+                  };
+                });
+                return {
+                  ...item,
+                  isArray: true,
+                  decode: links,
+                };
+              }
+            });
+            this.detectRef.detectChanges();
+          },
+        })
       }
-      if(item?.type === 'tuple') {
-        const links = item?.decode?.split(',')?.map(item => {
-          if(item?.startsWith('0x')) {
-            return {
-              name: item,
-              isLink: true,
-            }
-          }
-          return {
-            name : item,
-            isLink : false
-          }
-        });
-        return {
-          ...item,
-          isArray: true,
-          decode: links
-        }
-      }
-    })
+    }
   }
 
   onHex() {
     this.type = 'Hex';
     this.data = this.value;
+    this.isEvmContract = false;
   }
 }

src/app/pages/transaction/evm-transaction/evm-message/evm-message.component.html

@@ -1,10 +1,4 @@
 <div class="message-container text--white">
-  <div *ngIf="isCreateContract" class="row mb-2 body justify-content-between justify-content-lg-start">
-    <div class="col-auto col-lg-2 text--gray-4">
-      {{ 'Method' }}
-    </div>
-    <div class="col-auto col-lg-10 text--gray-1">{{ method }}</div>
-  </div>
   <div
     class="row mb-3 body justify-content-between justify-content-lg-start align-items-center"
     *ngIf="transaction?.contractAddress > 0">
@@ -18,10 +12,7 @@
     </div>
   </div>
   <div class="d-flex flex-wrap mb-4" *ngIf="transaction?.inputData">
-    <div *ngIf="isCreateContract" class="col-12 col-lg-2 mb-2 mb-lg-0 text--gray-4 body">
-      {{ 'Input Data' }}
-    </div>
-    <div class="col-12 {{isCreateContract ? 'col-lg-10' : ''}}">
+    <div class="col-12">
       <div class="button-switch-stage box-input-data mt-lg-0 mb-2">
         <button
           *ngIf="isEvmContract"

src/app/pages/transaction/evm-transaction/evm-message/evm-message.component.ts

@@ -117,8 +117,9 @@ export class EvmMessageComponent {
           this.isContractVerified = true;
           const value = parseEther('1.0');
           const rawData = abiInfo.interfaceCoder.parseTransaction({ data: '0x' + this.transaction?.inputData, value });
+
           this.inputDataRaw['name'] =
-          abiInfo.interfaceCoder.getFunction(rawData?.fragment?.name)?.format() || rawData.name;
+          abiInfo.interfaceCoder.getFunction(rawData?.selector)?.format() || rawData.name;
           this.inputDataDecoded['name'] = rawData.name;
 
           if (rawData?.fragment?.inputs?.length > 0) {
@@ -131,8 +132,8 @@ export class EvmMessageComponent {
             });
           }
         }
-        this.getListTopicDecode();
       }
+      this.getListTopicDecode();
     });
   }
 

src/app/pages/transaction/evm-transaction/evm-transaction-event-log/evm-transaction-event-log.component.html

@@ -1,6 +1,5 @@
 <div class="event-log-container break-word" *ngIf="eventLog">
   <div class="event-number">{{ index + 1 }}</div>
-
   <div class="event-content w-100">
     <div class="d-flex flex-wrap mb-3">
       <div class="col-12 col-lg-1 mb-2 mb-lg-0 text--gray-4 body">
@@ -10,9 +9,9 @@
       <div class="col-12 col-lg-11 row">
         <div class="col-12">
           <div class="d-block d-lg-inline">
-            {{ eventLog.contractName }}
+            {{ eventLog?.contractName }}
           </div>
-          <span class="font-space-mono">{{ eventLog.address }}</span>
+          <span class="font-space-mono">{{ eventLog?.address }}</span>
         </div>
       </div>
     </div>