[fix][655] fix event log (#3609)

* [fix][598] fix set token info

* feat: Decode event log

* [Feat][655] enhance event log

* Apply decode ui

* update: data decoded

* remove config.json change

* fix: enhance event log

* merged commit

* update: event log

* --amend

* fix: event log

* fix: event log

---------

Co-authored-by: tambui <tam2391@gmail.com>

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

@@ -23,15 +23,61 @@
             </ul>
         </div>
     </div>
-    <div *ngIf="!isAllowSwitchDecode" class="data flex-grow-1 font-space-mono">
+    <div *ngIf="!isAllowSwitchDecode" class="data flex-grow-1">
         <p class="mb-1 font-space-mono">{{value}}</p>
         <p class="mb-0 font-space-mono" [innerHTML]="decode | highlight_function"></p>
     </div>
-    <div *ngIf="isAllowSwitchDecode" class="data flex-grow-1 font-space-mono" [class]="isHighlight ? 'highlight' : ''">
-        <a *ngIf="isLink && type === 'Decode'" class="text--primary" routerLink="/address/{{ data }}">
+    <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 }}">
             {{data}}
         </a>
-        <span *ngIf="!isLink || type === 'Hex'">{{data}}</span>
+        <span class="font-space-mono" *ngIf="!isLink || type === 'Hex'">{{data}}</span>
+    </div>
+</div>
+<div class="decode-message">
+    <div *ngIf="isDataField" class="d-flex align-items-start highlight">
+        <div class="flex-grow-1 data-field-msg">
+            <div *ngIf="type === 'Hex'">
+                <p class="font-space-mono">{{ data }}</p>
+            </div>
+            <div *ngIf="type === 'Decode'">
+                <div class="data-item">
+                    <ng-container *ngFor="let item of data">
+                        <p class="item-name">{{item?.name}}</p>
+                        <a *ngIf="item?.isLink" class="text--primary font-space-mono" routerLink="/address/{{ item?.decode }}">
+                            {{item?.decode}}
+                        </a>
+                        <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 }}">
+                                        {{dataDecoded?.name}}
+                                    </a>
+                                    <p class="font-space-mono" *ngIf="!dataDecoded?.isLink" >{{dataDecoded?.name}}</p>
+                                </div>
+                            </div>
+                            <div *ngIf="item?.type !== 'tuple'">
+                                <p class="font-space-mono">{{item?.decode}}</p>
+                            </div>
+                        </div>
+                    </ng-container>
+                </div>
+            </div>
+        </div>
+        <div *ngIf="isAllowSwitchDecode" class="button-container">
+            <button
+                class="button-data body-04 button-dec"
+                [class.active]="type === 'Decode'"
+                (click)="onDecode('data')">
+                <span>Dec</span>
+            </button>
+            <button 
+                class="button-data body-04 button-hex"
+                [class.active]="type === 'Hex'"
+                (click)="onHex()">
+                <span>Hex</span>
+            </button>
+        </div>
     </div>
 </div>
 <div class="decode-message">

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

@@ -31,7 +31,6 @@ export class DecodeMessageComponent implements OnInit {
       this.data = this.decode;
       return;
     }
-
     this.data = Array.isArray(this.decode) && this.decode?.map(item => {
       if(item?.type !== 'tuple') {
         return {

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

@@ -136,68 +136,93 @@ export class EvmMessageComponent {
     });
   }
 
+  mappingTopics(element){
+    element['isAllowSwitchDecodeDataField'] = false;
+    return element?.topics?.map((i, tidx) => ({
+      index: tidx,
+      decode: '',
+      value: i,
+      isAllowSwitchDecode: false,
+    }));
+  }
+
+  mappingFunctionName(item){
+    const {type, indexed, name} = item;
+    let param = type;
+    if (!indexed) param = `${type} ${name}`
+    else param = `${type} indexed ${name}`
+    return param;
+  }
+
   getListTopicDecode() {
     this.transaction.eventLog.forEach((element, index) => {
 
       let arrTopicTemp = element?.evm_signature_mapping_topic || [];
       try {
         const abiInfo = this.abiContractData.find((f) => f.contractAddress === element.address);
         let decoded = [];
+        element.data = element?.data?.replace('\\x', '');
+        element['isAllowSwitchDecodeDataField'] = true;
+
         if (!abiInfo?.abi) {
-          decoded = element.topics.map((i, tidx) => ({
-            index: tidx,
-            decode: '',
-            value: i,
-            isAllowSwitchDecode: false,
-          }));
+          decoded = this.mappingTopics(element)
         } else {
-          element.data = element?.data?.replace('\\x', '');
           const paramsDecode = abiInfo.interfaceCoder.parseLog({
             topics: element.topics?.filter((f) => f),
             data: `0x${element.data || this.transaction?.inputData}`,
           });
 
-          const params = paramsDecode?.fragment?.inputs.map((i) => `${i.type} ${i.indexed ? 'indexed' : ''} ${i.name}`);
-          const decodeTopic0 = `> ${paramsDecode?.fragment?.name}(${params.join(', ')})`;
-
-          decoded = [
-            {
-              index: 0,
-              decode: decodeTopic0,
-              value: element.topics[0],
-            },
-          ];
-
-          const inputs = paramsDecode?.fragment?.inputs
-          if (inputs?.length > 0) {
-            const params = [];
-            const data = [];
-            let currentParamIndex = 0;
+          if(!paramsDecode) decoded = this.mappingTopics(element)
+          else {
+            const params = paramsDecode?.fragment?.inputs.map(this.mappingFunctionName);
+            const decodeTopic0 = `> ${paramsDecode?.fragment?.name}(${params.join(', ')})`;
+
+            decoded = [
+              {
+                index: 0,
+                decode: decodeTopic0,
+                value: element.topics[0],
+              },
+            ];
 
-            inputs?.forEach((item, idx) => {              
-              const param = {
-                indexed: item?.indexed,
-                name: item.name,
-                type: item.type,
-                isLink: item.type === 'address',
-                decode: paramsDecode.args[idx]?.toString(),
-              }
-              if(item?.indexed) {
-                param["indexed"] = item.indexed;
-                param["index"] = idx + 1;
-                param["isAllowSwitchDecode"] = true;
-                param["value"] = element.topics[currentParamIndex + 1],
-                currentParamIndex += 1;
-                params.push(param);
-              }else {
-                data.push(param);
-              }
-            });
-
-            element.dataDecoded = data;
-            decoded = [...decoded, ...params];
-          }
+            const inputs = paramsDecode?.fragment?.inputs
+            if (inputs?.length > 0) {
+              const params = [];
+              const data = [];
+              let currentParamIndex = 0;
+
+              inputs?.forEach((item, idx) => {
+                if(item?.type === "tuple") {
+                  const tupleType = `(${item?.components?.map(this.mappingFunctionName)?.join(', ')}) ${item?.name}`;
+                  const replaceTuple = new RegExp(`\\b${item?.type} ${item?.name}\\b`, 'g');
+                  decoded[0].decode = decoded[0]?.decode?.replace(replaceTuple, tupleType);
+                } 
+
+                const param = {
+                  indexed: item?.indexed,
+                  name: item.name,
+                  type: item.type,
+                  isLink: item.type === 'address',
+                  decode: paramsDecode.args[idx]?.toString(),
+                }
+                if(item?.indexed) {
+                  param["indexed"] = item.indexed;
+                  param["index"] = currentParamIndex + 1;
+                  param["isAllowSwitchDecode"] = true;
+                  param["value"] = element.topics[currentParamIndex + 1],
+                  currentParamIndex += 1;
+                  params.push(param);
+                }else {
+                  data.push(param);
+                }
+              });
+
+              element.dataDecoded = data;
+              decoded = [...decoded, ...params];
+            }}
         }
+        console.log(decoded);
+
         this.topicsDecoded[index] = decoded;
       } catch (e) {}
       this.arrTopicDecode[index] = arrTopicTemp;

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

@@ -44,7 +44,7 @@
           [isDataField]="true"
           [value]="eventLog.data" 
           [decode]="eventLog.dataDecoded"
-          [isAllowSwitchDecode]="true"
+          [isAllowSwitchDecode]="eventLog.isAllowSwitchDecodeDataField"
           [isHighlight]="true"></app-decode-message>
       </div>
     </div>

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

@@ -19,6 +19,7 @@ export class EvmTransactionEventLogComponent {
     }[];
     data: string;
     dataDecoded?: string;
+    isAllowSwitchDecodeDataField ?:boolean
   };
   @Input() index;
 }