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

* feat: Decode event log * [Feat][655] enhance event log * Apply decode ui * update: data decoded * update: event log * merged commit * update: event log * --amend * [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> --------- Co-authored-by: tambui <tam2391@gmail.com>
aura-nw · Jul 10, 2024 · 8b8d78e · 8b8d78e
1 parent bba9695
commit 8b8d78e
Show file tree

Hide file tree

Showing 4 changed files with 168 additions and 51 deletions.
diff --git a/src/app/pages/transaction/evm-transaction/decode-message/decode-message.component.html b/src/app/pages/transaction/evm-transaction/decode-message/decode-message.component.html
@@ -23,15 +23,107 @@
  </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">
+ <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="font-space-mono item-name">{{item?.name}}</p>
+ <a *ngIf="item?.isLink" class="text--primary" routerLink="/address/{{ item?.decode }}">
+ {{item?.decode}}
+ </a>
+ <div *ngIf="!item?.isLink">
+ <div *ngIf="item?.type === 'tuple'" class="d-flex flex-wrap gap-2 align-items-center">
+ <div *ngFor="let dataDecoded of item?.decode">
+ <a *ngIf="dataDecoded?.isLink" class="text--primary" routerLink="/address/{{ dataDecoded?.name }}">
+ {{dataDecoded?.name}}
+ </a>
+ <p *ngIf="!dataDecoded?.isLink" class="font-space-mono" >{{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 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">

diff --git a/src/app/pages/transaction/evm-transaction/evm-message/evm-message.component.ts b/src/app/pages/transaction/evm-transaction/evm-message/evm-message.component.ts
@@ -136,68 +136,92 @@ 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];
+ }}
  }
+
  this.topicsDecoded[index] = decoded;
  } catch (e) {}
  this.arrTopicDecode[index] = arrTopicTemp;

diff --git a/...action/evm-transaction/evm-transaction-event-log/evm-transaction-event-log.component.html b/...action/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>

diff --git a/...nsaction/evm-transaction/evm-transaction-event-log/evm-transaction-event-log.component.ts b/...nsaction/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;
 }