From 6495fd16ccb93effc7bf8c9135834ce07e0a5715 Mon Sep 17 00:00:00 2001
From: Tran Trung Tien <trantrungtien9x@gmail.com>
Date: Tue, 25 Jun 2024 10:08:25 +0700
Subject: [PATCH 01/12] [fix][598] fix set token info

---
 .../evm-token-summary.component.html             | 16 +++++++++-------
 .../evm-token-summary.component.scss             |  2 ++
 .../token-content/token-content.component.ts     | 15 +++++++++++----
 .../token-summary/token-summary.component.html   | 16 +++++++++-------
 .../token-summary/token-summary.component.scss   |  7 +++++--
 5 files changed, 36 insertions(+), 20 deletions(-)

diff --git a/src/app/pages/evm-token/evm-token-summary/evm-token-summary.component.html b/src/app/pages/evm-token/evm-token-summary/evm-token-summary.component.html
index d0fd3faa1..c4605c886 100644
--- a/src/app/pages/evm-token/evm-token-summary/evm-token-summary.component.html
+++ b/src/app/pages/evm-token/evm-token-summary/evm-token-summary.component.html
@@ -55,21 +55,23 @@
         <div class="d-flex align-items-center py-2">
           <span class="first-col text--gray-5">Official Site:</span>
           <a *ngIf="tokenDetail?.officialSite" [href]="tokenDetail?.officialSite" target="_blank"
-            rel="noopener noreferrer" class="text--primary">{{tokenDetail?.officialSite}}</a>
+            rel="noopener noreferrer" class="text--primary text-truncate">{{tokenDetail?.officialSite}}</a>
         </div>
       </td>
     </tr>
     <tr>
       <td colspan="2">
-        <div class="d-flex align-items-center py-2">
+        <div class="d-flex align-items-start py-2">
           <div class="first-col text--gray-5">
             Social Profiles:
           </div>
-          <div class="socials" *ngIf="tokenDetail?.socialProfiles?.length">
-            <a *ngFor="let item of tokenDetail?.socialProfiles" [href]="item?.url" target="_blank"
-              rel="noopener noreferrer">
-              <img [src]="item?.icon" alt="social-media">
-            </a>
+          <div *ngIf="tokenDetail?.socialProfiles?.length">
+            <div class="socials">
+              <a *ngFor="let item of tokenDetail?.socialProfiles" [href]="item?.url" target="_blank"
+                rel="noopener noreferrer">
+                <img [src]="item?.icon" alt="social-media">
+              </a>
+            </div>
           </div>
         </div>
       </td>
diff --git a/src/app/pages/evm-token/evm-token-summary/evm-token-summary.component.scss b/src/app/pages/evm-token/evm-token-summary/evm-token-summary.component.scss
index 802fb23fc..2e922e11f 100644
--- a/src/app/pages/evm-token/evm-token-summary/evm-token-summary.component.scss
+++ b/src/app/pages/evm-token/evm-token-summary/evm-token-summary.component.scss
@@ -1,5 +1,7 @@
 .box-token-info {
   table.aura-basic-table {
+    table-layout: fixed;
+    
     tr,
     td {
       color: var(--aura-contract);
diff --git a/src/app/pages/token-cosmos/token-content/token-content.component.ts b/src/app/pages/token-cosmos/token-content/token-content.component.ts
index 38a72fa61..d01612fc6 100644
--- a/src/app/pages/token-cosmos/token-content/token-content.component.ts
+++ b/src/app/pages/token-cosmos/token-content/token-content.component.ts
@@ -26,9 +26,9 @@ export class TokenContentComponent implements OnInit {
   @Input() channelPath: any;
   @Output() hasMore = new EventEmitter<any>();
 
-  tabStaking = [TokenTab.Holders, TokenTab.Info];
-  tabIBC = [TokenTab.Transfers, TokenTab.Holders, TokenTab.Info];
-  tabToken = [TokenTab.Transfers, TokenTab.Holders, TokenTab.Contract, TokenTab.Info];
+  tabStaking = [TokenTab.Holders];
+  tabIBC = [TokenTab.Transfers, TokenTab.Holders];
+  tabToken = [TokenTab.Transfers, TokenTab.Holders, TokenTab.Contract];
   tabNFT = [TokenTab.Transfers, TokenTab.Holders, TokenTab.Inventory, TokenTab.Contract];
   TABS = [];
   paramQuery = '';
@@ -97,12 +97,19 @@ export class TokenContentComponent implements OnInit {
       key: tab.key,
     }));
     this.tabsBackup = this.TABS;
-
+    
     this.route.queryParams.subscribe((params) => {
       this.paramQuery = params?.a || '';
       this.searchTemp = this.paramQuery;
       this.handleSearch();
       this.searchTemp = this.nameTagService.findNameTagByAddress(this.searchTemp);
+
+      if(!this.paramQuery) {
+        this.TABS.push({
+          key: TokenTab.Info,
+          value: 'Info',
+        },)
+      }
     });
 
     if (local.getItem(STORAGE_KEYS.IS_VERIFY_TAB) == 'true') {
diff --git a/src/app/pages/token-cosmos/token-summary/token-summary.component.html b/src/app/pages/token-cosmos/token-summary/token-summary.component.html
index 06b9b35d2..90958aaac 100644
--- a/src/app/pages/token-cosmos/token-summary/token-summary.component.html
+++ b/src/app/pages/token-cosmos/token-summary/token-summary.component.html
@@ -110,21 +110,23 @@
         <div class="d-flex align-items-center py-2">
           <span class="first-col text--gray-5">Official Site:</span>
           <a *ngIf="tokenDetail?.officialSite" [href]="tokenDetail?.officialSite" target="_blank"
-            rel="noopener noreferrer" class="text--primary">{{tokenDetail?.officialSite}}</a>
+            rel="noopener noreferrer" class="text--primary text-truncate">{{tokenDetail?.officialSite}}</a>
         </div>
       </td>
     </tr>
     <tr>
       <td colspan="2">
-        <div class="d-flex align-items-center py-2">
+        <div class="d-flex align-items-start py-2">
           <div class="first-col text--gray-5">
             Social Profiles:
           </div>
-          <div class="socials" *ngIf="tokenDetail?.socialProfiles?.length">
-            <a *ngFor="let item of tokenDetail?.socialProfiles" [href]="item?.url" target="_blank"
-              rel="noopener noreferrer">
-              <img [src]="item?.icon" alt="social-media">
-            </a>
+          <div *ngIf="tokenDetail?.socialProfiles?.length">
+            <div class="socials">
+              <a *ngFor="let item of tokenDetail?.socialProfiles" [href]="item?.url" target="_blank"
+                rel="noopener noreferrer">
+                <img [src]="item?.icon" alt="social-media">
+              </a>
+            </div>
           </div>
         </div>
       </td>
diff --git a/src/app/pages/token-cosmos/token-summary/token-summary.component.scss b/src/app/pages/token-cosmos/token-summary/token-summary.component.scss
index 6fb698ab5..dcf7a2f48 100644
--- a/src/app/pages/token-cosmos/token-summary/token-summary.component.scss
+++ b/src/app/pages/token-cosmos/token-summary/token-summary.component.scss
@@ -1,5 +1,7 @@
 .box-token-info {
   table.aura-basic-table {
+    table-layout: fixed;
+    
     tr,
     td {
       color: var(--aura-contract);
@@ -11,9 +13,10 @@
   .socials {
     display: flex;
     align-items: center;
-    justify-content: center;
+    justify-content: start;
     column-gap: 20px;
-
+    row-gap: 5px;
+    flex-wrap: wrap;
     img {
       min-width: 16px;
       max-width: 16px;

From c4cd08f40c56e6d42a2620c5df241bbaff370e96 Mon Sep 17 00:00:00 2001
From: Tran Trung Tien <trantrungtien9x@gmail.com>
Date: Thu, 27 Jun 2024 09:23:31 +0700
Subject: [PATCH 02/12] feat: Decode event log

---
 .../decode-message.component.html             | 27 +++++++++
 .../decode-message.component.scss             | 56 +++++++++++++++++++
 .../decode-message.component.ts               | 31 ++++++++++
 .../evm-message/evm-message.component.html    | 22 ++------
 .../evm-message/evm-message.component.scss    |  1 -
 .../evm-message/evm-message.component.ts      | 39 ++++++++++---
 .../evm-transaction-event-log.component.html  | 33 ++++++-----
 .../evm-transaction-event-log.component.scss  |  8 ---
 .../evm-transaction-event-log.component.ts    |  4 +-
 .../pages/transaction/transaction.module.ts   |  2 +
 10 files changed, 172 insertions(+), 51 deletions(-)
 create mode 100644 src/app/pages/transaction/evm-transaction/decode-message/decode-message.component.html
 create mode 100644 src/app/pages/transaction/evm-transaction/decode-message/decode-message.component.scss
 create mode 100644 src/app/pages/transaction/evm-transaction/decode-message/decode-message.component.ts

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
new file mode 100644
index 000000000..6843976ae
--- /dev/null
+++ b/src/app/pages/transaction/evm-transaction/decode-message/decode-message.component.html
@@ -0,0 +1,27 @@
+<div class="decode-message d-flex justify-content-center align-items-start col-12 d-flex gap-2">
+    <p class="name">
+        {{index}} <span *ngIf="name">: {{name}}</span>
+    </p>
+    <div *ngIf="isAllowSwitchDecode" class="dropdown aura-dropdown mr-4 btn-item">
+        <button style="height: 26px; min-width: max-content;" 
+            class="button button--sm button--md-mob button-pill button-outline button-dropdown w-100" type="button"
+            data-bs-toggle="dropdown" aria-expanded="false">
+            <span>{{type}}</span>
+        </button>
+        <ul class="dropdown-menu aura-dropdown-menu">
+            <li (click)="onDecode()" class="dropdown-item cursor-pointer" [class.active]="type === 'Decode'">
+                <button type="button" class="button p-0">Decode</button>
+            </li>
+            <li (click)="onHex()" class="dropdown-item cursor-pointer" [class.active]="type === 'Hex'">
+                <button  type="button" class="button p-0">Hex</button>
+            </li>
+        </ul>
+    </div>
+    <div *ngIf="!isAllowSwitchDecode" class="data flex-grow-1 font-space-mono">
+        <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' : ''">
+        {{data}}
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/app/pages/transaction/evm-transaction/decode-message/decode-message.component.scss b/src/app/pages/transaction/evm-transaction/decode-message/decode-message.component.scss
new file mode 100644
index 000000000..066b2a80b
--- /dev/null
+++ b/src/app/pages/transaction/evm-transaction/decode-message/decode-message.component.scss
@@ -0,0 +1,56 @@
+.decode-message {
+    .data{
+        font-size: 14px;
+        line-height: 24px;
+    }
+
+    .name {
+        border-radius: 6px;
+        padding: 4px 10px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        color: #B4B8C0;
+        border: 1px solid var(--aura-gray-6);
+        background: var(--aura-gray-9);
+        font-weight: 600;
+        font-size: 12px;
+        white-space: nowrap;
+        margin: 0;
+    }
+    button.button {
+        background-color: #494C58;
+        padding-left: 6px;
+        padding-right: 25px;
+        font-size: 12px;
+        line-height: 16px;
+        bottom: 1px;
+        top: -1px;
+    }
+
+    .button.button-dropdown.button--sm:before,
+    .button.button-dropdown.button--sm:after {
+        right: 5px;        
+    }
+
+    .dropdown-menu.aura-dropdown-menu{
+        top: 0px;
+        margin-top: 0px;
+    }
+
+    .dropdown-item.cursor-pointer {
+        padding: 0 4px;
+        margin-top: 2px;
+        
+        button{
+            background-color: transparent;
+        }
+    }
+
+    .highlight {
+        max-width: 98%;
+        padding: 4px 8px;
+        border-radius: 4px;
+        background-color: var(--aura-gray-10);
+      }
+}
\ No newline at end of file
diff --git a/src/app/pages/transaction/evm-transaction/decode-message/decode-message.component.ts b/src/app/pages/transaction/evm-transaction/decode-message/decode-message.component.ts
new file mode 100644
index 000000000..aba71991f
--- /dev/null
+++ b/src/app/pages/transaction/evm-transaction/decode-message/decode-message.component.ts
@@ -0,0 +1,31 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-decode-message',
+  templateUrl: './decode-message.component.html',
+  styleUrls: ['./decode-message.component.scss'],
+})
+export class DecodeMessageComponent implements OnInit {
+  @Input() index: number | string;
+  @Input() name?: string;
+  @Input() isAllowSwitchDecode?: boolean;
+  @Input() value: string;
+  @Input() decode: string;
+  @Input() isHighlight?: boolean;
+  
+  data = '';
+  type: 'Decode' | 'Hex' = 'Hex';
+
+  ngOnInit(): void {
+    this.data = this.value
+  }
+  onDecode() {
+    this.type = 'Decode';
+    this.data = this.decode
+  }
+
+  onHex() {
+    this.type = 'Hex';
+    this.data = this.value
+  }
+}
diff --git a/src/app/pages/transaction/evm-transaction/evm-message/evm-message.component.html b/src/app/pages/transaction/evm-transaction/evm-message/evm-message.component.html
index 19e98e1b8..c3718ceba 100644
--- a/src/app/pages/transaction/evm-transaction/evm-message/evm-message.component.html
+++ b/src/app/pages/transaction/evm-transaction/evm-message/evm-message.component.html
@@ -1,16 +1,9 @@
 <div class="message-container text--white">
-  <div class="row mb-4 mb-lg-2 body justify-content-between justify-content-lg-start">
-    <div class="col-12 col-lg-2 mb-2 mb-lg-0 text--gray-4 body">
-      {{ 'Method' }}
-    </div>
-    <div class="col-12 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">
     <div class="col-auto col-lg-2 text--gray-4">Contract Address</div>
-    <div class="col-auto col-lg-10">
+    <div class="col-auto">
       <app-name-tag
         [value]="transaction?.contractAddress | beautyAddress"
         [fullText]="true"
@@ -18,12 +11,8 @@
         [iconContract]="true"></app-name-tag>
     </div>
   </div>
-
   <div class="d-flex flex-wrap mb-4" *ngIf="transaction?.inputData">
-    <div class="col-12 col-lg-2 mb-2 mb-lg-0 text--gray-4 body">
-      {{ 'Input Data' }}
-    </div>
-    <div class="col-12 col-lg-10">
+    <div class="col-12">
       <div class="button-switch-stage box-input-data mt-lg-0 mb-2">
         <button
           class="button body-04 {{ isCreateContract ? 'text--gray-7 pe-none' : '' }}"
@@ -139,10 +128,11 @@
           <div class="mb-6">Transaction Receipt Event Logs ({{ eventLog?.length }})</div>
           <div class="">
             <app-evm-transaction-event-log
-              *ngFor="let log of eventLog; index as idx"
-              [eventLog]="log"
+              *ngFor="let topic of topicsDecoded; let i = index"
+              [eventLog]="eventLog[i]"
               [arrTopicDecode]="arrTopicDecode"
-              [index]="idx">
+              [topicsDecoded]="topic"
+              [index]="i">
             </app-evm-transaction-event-log>
           </div>
         </div>
diff --git a/src/app/pages/transaction/evm-transaction/evm-message/evm-message.component.scss b/src/app/pages/transaction/evm-transaction/evm-message/evm-message.component.scss
index 5f275cbbb..8c6fa4239 100644
--- a/src/app/pages/transaction/evm-transaction/evm-message/evm-message.component.scss
+++ b/src/app/pages/transaction/evm-transaction/evm-message/evm-message.component.scss
@@ -16,7 +16,6 @@
     border-radius: 8px;
     padding: 12px;
     max-height: 558px;
-    overflow: auto;
     @media (min-width: 992px) {
       max-height: 330px;
       padding: 12px 16px;
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
index 06a11af9a..5bc0a1391 100644
--- 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
@@ -43,6 +43,7 @@ export class EvmMessageComponent {
   arrTopicDecode = [];
   interfaceCoder: Interface;
   contractAddressAbi = '';
+  topicsDecoded = [];
 
   constructor(
     private transactionService: TransactionService,
@@ -112,16 +113,40 @@ export class EvmMessageComponent {
     this.transaction.eventLog.forEach((element, index) => {
       let arrTopicTemp = element?.evm_signature_mapping_topic || [];
       try {
-        const arrTemp =
-          this.interfaceCoder
-            .decodeEventLog(element.topic0, `0x${this.transaction?.inputData}`, element.topics)
-            .toArray() || [];
-        arrTopicTemp = [...this.arrTopicDecode[index], ...arrTemp];
-      } catch (e) {}
+        const paramsDecode = this.interfaceCoder.parseLog({
+          topics: element.topics?.filter((f) => f),
+          data: `0x${this.transaction?.inputData}`,
+        });
+
+        let decoded = [
+          {
+            index: 0,
+            decode: arrTopicTemp?.[0],
+            value: element.topics[0],
+          },
+        ];
+        
+        if (paramsDecode?.fragment?.inputs?.length > 0) {
+          const param = paramsDecode?.fragment?.inputs.map((item, index) => {
+            return {
+              index: index + 1,
+              name: item.name,
+              type: item.type,
+              isAllowSwitchDecode: true,
+              value: element.topics[index + 1],
+              decode: paramsDecode.args[index]?.toString(),
+            };
+          });
+          decoded = [...decoded, ...param];
+        }
+        
+        this.topicsDecoded[index] = decoded;
+      } catch (e) {
+      }
 
       this.arrTopicDecode[index] = arrTopicTemp;
+      
     });
-    this.arrTopicDecode = [...this.arrTopicDecode]
   }
 
   getMethodName(methodId) {
diff --git a/src/app/pages/transaction/evm-transaction/evm-transaction-event-log/evm-transaction-event-log.component.html b/src/app/pages/transaction/evm-transaction/evm-transaction-event-log/evm-transaction-event-log.component.html
index 41c13d6eb..2c310b8f6 100644
--- a/src/app/pages/transaction/evm-transaction/evm-transaction-event-log/evm-transaction-event-log.component.html
+++ b/src/app/pages/transaction/evm-transaction/evm-transaction-event-log/evm-transaction-event-log.component.html
@@ -22,31 +22,30 @@
         Topics
       </div>
       <div class="col-12 col-lg-11 d-flex flex-column gap-2">
-        <ng-container *ngFor="let top of eventLog.topics; index as idx">
-          <div class="d-flex gap-2 item-topic" *ngIf="top">
-            <div class="event-number secondary flex-shrink-0 font-space-mono">{{ idx }}</div>
-            <div class="flex-grow-1 topic align-items-center">
-              <div
-                class="font-space-mono {{ arrTopicDecode[index]?.length > 0 && arrTopicDecode[index][idx] ? '' : 'mt-1' }}">
-                {{ top }}
-              </div>
-              <div class="mt-1 event-log-msg font-space-mono"
-                *ngIf="arrTopicDecode[index]?.length > 0 && arrTopicDecode[index][idx]"
-                [innerHTML]="arrTopicDecode[index][idx] | highlight_function">
-              </div>
-            </div>
-          </div>
+        <ng-container *ngFor="let topic of topicsDecoded; index as idx">
+          <app-decode-message
+          *ngIf="topic?.value"
+          [index]="topic?.index"
+          [name]="topic?.name"
+          [isAllowSwitchDecode]="topic?.isAllowSwitchDecode"
+          [value]="topic?.value"
+          [decode]="topic?.decode"
+          ></app-decode-message>
         </ng-container>
       </div>
     </div>
 
     <div class="d-flex flex-wrap mb-3" *ngIf="eventLog.data">
       <div class="col-12 col-lg-1 mb-2 mb-lg-0 text--gray-4 body">
-        {{ 'Data' }}
+        Data
       </div>
       <div class="col-12 col-lg-11">
-        <!-- <div class="mb-1">Value {{ eventLog.data }}</div> -->
-        <div class="highlight font-space-mono">{{ eventLog.data }}</div>
+        <app-decode-message
+        index="Value"
+        [value]="eventLog.data"
+        [isAllowSwitchDecode]="true"
+        [isHighlight]="true"
+        ></app-decode-message>
       </div>
     </div>
   </div>
diff --git a/src/app/pages/transaction/evm-transaction/evm-transaction-event-log/evm-transaction-event-log.component.scss b/src/app/pages/transaction/evm-transaction/evm-transaction-event-log/evm-transaction-event-log.component.scss
index b38275bf5..d1479a2d8 100644
--- a/src/app/pages/transaction/evm-transaction/evm-transaction-event-log/evm-transaction-event-log.component.scss
+++ b/src/app/pages/transaction/evm-transaction/evm-transaction-event-log/evm-transaction-event-log.component.scss
@@ -46,14 +46,6 @@
     max-width: calc(100% - 38px);
   }
 
-  .highlight {
-    width: max-content;
-    max-width: 98%;
-    padding: 4px 8px;
-    border-radius: 4px;
-    background-color: var(--aura-gray-10);
-  }
-
   .event-log-msg {
     color: var(--aura-gray-3);
   }
diff --git a/src/app/pages/transaction/evm-transaction/evm-transaction-event-log/evm-transaction-event-log.component.ts b/src/app/pages/transaction/evm-transaction/evm-transaction-event-log/evm-transaction-event-log.component.ts
index bad6e0a7a..ebc98e8ed 100644
--- a/src/app/pages/transaction/evm-transaction/evm-transaction-event-log/evm-transaction-event-log.component.ts
+++ b/src/app/pages/transaction/evm-transaction/evm-transaction-event-log/evm-transaction-event-log.component.ts
@@ -1,4 +1,4 @@
-import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core';
+import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit, SimpleChanges } from '@angular/core';
 
 @Component({
   selector: 'app-evm-transaction-event-log',
@@ -8,6 +8,7 @@ import { ChangeDetectionStrategy, Component, Input, OnInit } from '@angular/core
 })
 export class EvmTransactionEventLogComponent implements OnInit {
   @Input() arrTopicDecode;
+  @Input() topicsDecoded;
   @Input() eventLog: {
     id: number;
     contractName?: string;
@@ -26,4 +27,3 @@ export class EvmTransactionEventLogComponent implements OnInit {
     }
   }
 }
-
diff --git a/src/app/pages/transaction/transaction.module.ts b/src/app/pages/transaction/transaction.module.ts
index 2ace90e16..899e8e721 100644
--- a/src/app/pages/transaction/transaction.module.ts
+++ b/src/app/pages/transaction/transaction.module.ts
@@ -26,6 +26,7 @@ import { TransactionMessagesComponent } from './transaction-messages/transaction
 import { TransactionRoutingModule } from './transaction-routing.module';
 import { TransactionComponent } from './transaction.component';
 import { EvmInternalTransactionsComponent } from './evm-transaction/evm-internal-transactions/evm-internal-transactions.component';
+import { DecodeMessageComponent } from './evm-transaction/decode-message/decode-message.component';
 
 @NgModule({
   declarations: [
@@ -38,6 +39,7 @@ import { EvmInternalTransactionsComponent } from './evm-transaction/evm-internal
     EvmMessageComponent,
     EvmTransactionEventLogComponent,
     EvmInternalTransactionsComponent,
+    DecodeMessageComponent
   ],
   imports: [
     CommonModule,

From 3888c6c5e04f3822658ac8945a686c9970c77c26 Mon Sep 17 00:00:00 2001
From: tambui <tam2391@gmail.com>
Date: Thu, 27 Jun 2024 17:12:34 +0700
Subject: [PATCH 03/12] [Feat][655] enhance event log

---
 src/app/core/services/transaction.service.ts  |  28 +++++
 .../evm-message/evm-message.component.ts      | 109 +++++++++---------
 src/assets/config/config.json                 |  93 ++++++++-------
 3 files changed, 134 insertions(+), 96 deletions(-)

diff --git a/src/app/core/services/transaction.service.ts b/src/app/core/services/transaction.service.ts
index 93057c707..30433c56d 100644
--- a/src/app/core/services/transaction.service.ts
+++ b/src/app/core/services/transaction.service.ts
@@ -776,6 +776,34 @@ export class TransactionService extends CommonService {
       .pipe(map((res) => (res?.data ? res?.data[this.envDB] : null)));
   }
 
+  getListAbiContract(addressList: string[]) {
+    const operationsDoc = `
+    query getListAbiContract($address: [String] = null) {
+      ${this.envDB} {
+        evm_contract_verification(where: {contract_address: {_in: $address}, status: {_eq: "SUCCESS"}}, order_by: {id: desc}) {
+          contract_address
+          created_at
+          creator_tx_hash
+          id
+          status
+          updated_at
+          abi
+        }
+      }
+    }
+    `;
+
+    return this.http
+      .post<any>(this.graphUrl, {
+        query: operationsDoc,
+        variables: {
+          address: addressList,
+        },
+        operationName: 'getListAbiContract',
+      })
+      .pipe(map((res) => (res?.data ? res?.data[this.envDB] : null)));
+  }
+
   getListMappingName(methodId: any): Observable<any> {
     const operationsDoc = `
     query queryListNameMethod($limit: Int = 100, $methodId: [String!] = null) {
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
index 5bc0a1391..e63630014 100644
--- 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
@@ -41,9 +41,9 @@ export class EvmMessageComponent {
   isContractVerified = false;
   isCreateContract = false;
   arrTopicDecode = [];
-  interfaceCoder: Interface;
   contractAddressAbi = '';
   topicsDecoded = [];
+  abiContractData = [];
 
   constructor(
     private transactionService: TransactionService,
@@ -59,51 +59,45 @@ export class EvmMessageComponent {
       this.typeInput = this.inputDataType.ORIGINAL;
     }
     this.getMethodName(this.inputDataRaw['methodId']);
-    this.getProxyContractAbi(this.transaction?.to);
+    this.getAbiList();
   }
 
   changeType(data) {
     this.typeInput = data;
   }
 
-  getProxyContractAbi(address) {
-    this.contractAddressAbi = this.transaction?.to;
-    this.contractService.getProxyContractAbi(address).subscribe({
-      next: (res) => {
-        this.contractAddressAbi =
-          _.get(res, 'evm_smart_contract[0].evm_proxy_histories[0].implementation_contract') || this.contractAddressAbi;
-      },
-      complete: () => {
-        this.getDataDecoded();
-      },
-    });
-  }
+  getAbiList() {
+    let listContract = this.transaction.eventLog.map((i) => i.address?.toLowerCase());
+    listContract = _.uniq(listContract);
 
-  getDataDecoded() {
-    if (!this.contractAddressAbi) {
-      return;
-    }
-
-    this.transactionService.getAbiContract(this.contractAddressAbi?.toLowerCase()).subscribe((res) => {
-      if (res?.evm_contract_verification?.length > 0 && res.evm_contract_verification[0]?.abi) {
+    this.transactionService.getListAbiContract(listContract).subscribe((res) => {
+      if (res?.evm_contract_verification?.length > 0) {
         this.isContractVerified = true;
         this.isDecoded = true;
-        this.interfaceCoder = new Interface(res.evm_contract_verification[0].abi);
+        this.abiContractData = res?.evm_contract_verification.map((i) => ({
+          contractAddress: i.contract_address,
+          abi: i.abi,
+          interfaceCoder: new Interface(i.abi),
+        }));
 
-        const value = parseEther('1.0');
-        const rawData = this.interfaceCoder.parseTransaction({ data: '0x' + this.transaction?.inputData, value });
-        if (rawData?.fragment?.inputs?.length > 0) {
-          this.getListTopicDecode();
-          this.inputDataRaw['name'] =
-            this.interfaceCoder.getFunction(rawData?.fragment?.name)?.format() || rawData.name;
-          this.inputDataDecoded['name'] = rawData.name;
-          this.inputDataDecoded['params'] = rawData?.fragment?.inputs.map((item, index) => {
-            return {
-              name: item.name,
-              type: item.type,
-              value: rawData.args[index],
-            };
-          });
+        const abiInfo = this.abiContractData.find((f) => f.contractAddress === this.transaction?.to);
+        if (abiInfo.abi) {
+          const value = parseEther('1.0');
+          const rawData = abiInfo.interfaceCoder.parseTransaction({ data: '0x' + this.transaction?.inputData, value });
+          if (rawData?.fragment?.inputs?.length > 0) {
+            this.getListTopicDecode();
+
+            this.inputDataRaw['name'] =
+              abiInfo.interfaceCoder.getFunction(rawData?.fragment?.name)?.format() || rawData.name;
+            this.inputDataDecoded['name'] = rawData.name;
+            this.inputDataDecoded['params'] = rawData?.fragment?.inputs.map((item, index) => {
+              return {
+                name: item.name,
+                type: item.type,
+                value: rawData.args[index],
+              };
+            });
+          }
         }
       }
     });
@@ -113,11 +107,6 @@ export class EvmMessageComponent {
     this.transaction.eventLog.forEach((element, index) => {
       let arrTopicTemp = element?.evm_signature_mapping_topic || [];
       try {
-        const paramsDecode = this.interfaceCoder.parseLog({
-          topics: element.topics?.filter((f) => f),
-          data: `0x${this.transaction?.inputData}`,
-        });
-
         let decoded = [
           {
             index: 0,
@@ -125,28 +114,38 @@ export class EvmMessageComponent {
             value: element.topics[0],
           },
         ];
-        
-        if (paramsDecode?.fragment?.inputs?.length > 0) {
-          const param = paramsDecode?.fragment?.inputs.map((item, index) => {
-            return {
-              index: index + 1,
-              name: item.name,
-              type: item.type,
-              isAllowSwitchDecode: true,
-              value: element.topics[index + 1],
-              decode: paramsDecode.args[index]?.toString(),
-            };
+
+        const abiInfo = this.abiContractData.find((f) => f.contractAddress === element.address);
+        if (abiInfo.abi) {
+          console.log(`0x${element.data || this.transaction?.inputData}`, element.data, this.transaction?.inputData);
+          const paramsDecode = abiInfo.interfaceCoder.parseLog({
+            topics: element.topics?.filter((f) => f),
+            data: `0x${element.data || this.transaction?.inputData}`,
           });
-          decoded = [...decoded, ...param];
+
+          if (paramsDecode?.fragment?.inputs?.length > 0) {
+            const param = paramsDecode?.fragment?.inputs.map((item, idx) => {
+              return {
+                index: index + 1,
+                name: item.name,
+                type: item.type,
+                isAllowSwitchDecode: true,
+                value: element.topics[index + 1],
+                decode: paramsDecode.args[index]?.toString(),
+              };
+            });
+            console.log('param-', index, ': ', param);
+            decoded = [...decoded, ...param];
+          }
         }
-        
         this.topicsDecoded[index] = decoded;
       } catch (e) {
+        console.log(e);
       }
 
       this.arrTopicDecode[index] = arrTopicTemp;
-      
     });
+    this.arrTopicDecode = [...this.arrTopicDecode];
   }
 
   getMethodName(methodId) {
diff --git a/src/assets/config/config.json b/src/assets/config/config.json
index 5d916df3f..4d9def744 100644
--- a/src/assets/config/config.json
+++ b/src/assets/config/config.json
@@ -1,9 +1,9 @@
 {
   "environment": {
-    "name": "develop",
+    "name": "serenity",
     "label": {
-      "desktop": "Develop Testnet Network",
-      "mobile": "Develop Testnet"
+      "desktop": "Serenity Testnet (v0.8.0)",
+      "mobile": "Serenity Testnet"
     },
     "logo": "https://aura-explorer-assets.s3.ap-southeast-1.amazonaws.com/dev-assets/token/download.png",
     "notice": {
@@ -14,17 +14,21 @@
   },
   "chainConfig": {
     "stakingTime": "86400",
-    "excludedAddresses": ["aura1fl48vsnmsdzcv85q5d2q4z5ajdha8yu3wd7dmw"],
-    "blockTime": 5000,
-    "quotaSetPrivateName": 10,
-    "quotaSetWatchList": 10,
+    "excludedAddresses": [
+      "aura1fl48vsnmsdzcv85q5d2q4z5ajdha8yu3wd7dmw",
+      "aura1z9whsygd9hdquamn84vs76uy8ytatnw28aff3m",
+      "aura1752fawv92g2c9eegqedj5689gevgscsc0y7stk"
+    ],
+    "blockTime": 2000,
+    "quotaSetPrivateName": 20,
+    "quotaSetWatchList": 20,
     "quotaNotification": 100,
     "features": [],
     "chain_info": {
-      "chainId": "auradev_1235-3",
-      "chainName": "aura devnet",
-      "rpc": "https://rpc.dev.aura.network",
-      "rest": "https://lcd.dev.aura.network",
+      "chainId": "auradev_1236-2",
+      "chainName": "Aura serenity testnet",
+      "rpc": "https://rpc.serenity.aura.network",
+      "rest": "https://lcd.serenity.aura.network",
       "bip44": {
         "coinType": 118
       },
@@ -38,21 +42,21 @@
       },
       "currencies": [
         {
-          "coinDenom": "TAURA",
-          "coinMinimalDenom": "utaura",
+          "coinDenom": "AURA",
+          "coinMinimalDenom": "uaura",
           "coinDecimals": 6
         }
       ],
       "feeCurrencies": [
         {
-          "coinDenom": "TAURA",
-          "coinMinimalDenom": "utaura",
+          "coinDenom": "AURA",
+          "coinMinimalDenom": "uaura",
           "coinDecimals": 6
         }
       ],
       "stakeCurrency": {
-        "coinDenom": "TAURA",
-        "coinMinimalDenom": "utaura",
+        "coinDenom": "AURA",
+        "coinMinimalDenom": "uaura",
         "coinDecimals": 6
       },
       "coinType": 118,
@@ -61,27 +65,31 @@
         "average": 0.0025,
         "high": 0.004
       },
-      "features": ["ibc-transfer"],
-      "walletUrlForStaking": "https://explorer.dev.aura.network/validators",
+      "features": [
+        "ibc-transfer"
+      ],
+      "walletUrlForStaking": "https://serenity.aurascan.io/validators",
       "logo": "https://i.imgur.com/zi0mTYb.png",
-      "explorer": "https://explorer.dev.aura.network/",
+      "explorer": "https://serenity.aurascan.io/",
       "beta": "false"
     },
     "evmChainInfo": {
-      "name": "Aura EVM Devnet",
-      "chain": "Aura-Dev",
-      "rpc": "https://jsonrpc.dev.aura.network",
-      "faucets": [""],
+      "name": "Aura EVM Serenity",
+      "chain": "Aura-Serenity",
+      "rpc": "https://jsonrpc.serenity.aura.network",
+      "faucets": [
+        ""
+      ],
       "nativeCurrency": {
         "name": "test-Aura",
-        "symbol": "tAURA",
-        "denom": "atAURA",
+        "symbol": "AURA",
+        "denom": "aAURA",
         "decimals": 18
       },
       "infoURL": "https://aura.network",
-      "shortName": "aura-devnet",
-      "chainId": 1235,
-      "networkId": 1235,
+      "shortName": "aura-serenity",
+      "chainId": 1236,
+      "networkId": 1236,
       "slip44": 1,
       "icon": "",
       "stakeContract": "0x0000000000000000000000000000000000000800",
@@ -89,36 +97,37 @@
       "explorers": [
         {
           "name": "Aura Explorer (Aurascan)",
-          "url": "https://explorer.dev.aura.network",
+          "url": "https://serenity.aurascan.io",
           "standard": "none",
           "icon": ""
         }
       ]
     }
   },
-  "etherJsonRpc": "https://jsonrpc.dev.aura.network",
   "image": {
     "validator": "https://validator-logos.s3.ap-southeast-1.amazonaws.com",
-    "assets": "https://aura-explorer-assets.s3.ap-southeast-1.amazonaws.com/dev-assets/",
+    "assets": "https://aura-explorer-assets.s3.ap-southeast-1.amazonaws.com/serenity-assets/",
     "banner": [
       {
-        "src": "https://aura-explorer-assets.s3.ap-southeast-1.amazonaws.com/dev-assets/images/pages/banner_aurascan.png",
+        "src": "https://aura-explorer-assets.s3.ap-southeast-1.amazonaws.com/serenity-assets/images/pages/banner_aurascan-2.png",
         "url": "https://beta.seekhype.io/"
       },
       {
-        "src": "https://aura-explorer-assets.s3.ap-southeast-1.amazonaws.com/dev-assets/images/pages/banner_aurascan-2.png",
+        "src": "https://aura-explorer-assets.s3.ap-southeast-1.amazonaws.com/serenity-assets/images/pages/banner_aurascan-2.png",
         "url": "https://beta.seekhype.io/"
       }
     ]
   },
   "api": {
-    "backend": "https://explorer-api.dev.aura.network/api/v1",
-    "socket": "https://explorer-api.dev.aura.network",
+    "backend": "https://serenity-api.aurascan.io/api/v1",
+    "socket": "https://serenity-api.aurascan.io",
     "ipfsDomain": "https://ipfs.io/",
     "verifyContract": "https://indexer-v2.dev.aurascan.io/verify-contract/v1",
     "coingecko": {
       "url": "https://api.coingecko.com/api/v3",
-      "ids": ["aura-network"]
+      "ids": [
+        "aura-network"
+      ]
     },
     "google": {
       "url": "apps.googleusercontent.com",
@@ -129,7 +138,7 @@
       "url": "https://indexer-v2.dev.aurascan.io/api",
       "graphql": "/v2/graphql",
       "rest": "/v2",
-      "chain": "auratestnet"
+      "chain": "serenity"
     },
     "walletConnect": {
       "signClient": {
@@ -138,10 +147,12 @@
         "metadata": {
           "name": "Aurascan",
           "description": "Aura Network Explorer",
-          "url": "https://explorer.dev.aurascan.io/",
-          "icons": ["https://aura-explorer-assets.s3.ap-southeast-1.amazonaws.com/dev-assets/token/download.png"]
+          "url": "https://serenity.aurascan.io/",
+          "icons": [
+            "https://aura-explorer-assets.s3.ap-southeast-1.amazonaws.com/dev-assets/token/download.png"
+          ]
         }
       }
     }
   }
-}
+}
\ No newline at end of file

From 6fe8469c3896a6512f34d57d3e76c216dbc2d085 Mon Sep 17 00:00:00 2001
From: Tran Trung Tien <trantrungtien9x@gmail.com>
Date: Fri, 28 Jun 2024 14:48:28 +0700
Subject: [PATCH 04/12] Apply decode ui

---
 .../decode-message.component.html             | 43 +++++++++++--------
 .../decode-message.component.ts               | 14 ++++--
 .../evm-message/evm-message.component.ts      | 12 ++++--
 .../evm-transaction-event-log.component.html  | 24 +++++------
 .../evm-transaction-event-log.component.ts    |  8 +---
 5 files changed, 55 insertions(+), 46 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
index 6843976ae..e33e6fe1b 100644
--- 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
@@ -1,27 +1,32 @@
-<div class="decode-message d-flex justify-content-center align-items-start col-12 d-flex gap-2">
-    <p class="name">
-        {{index}} <span *ngIf="name">: {{name}}</span>
-    </p>
-    <div *ngIf="isAllowSwitchDecode" class="dropdown aura-dropdown mr-4 btn-item">
-        <button style="height: 26px; min-width: max-content;" 
-            class="button button--sm button--md-mob button-pill button-outline button-dropdown w-100" type="button"
-            data-bs-toggle="dropdown" aria-expanded="false">
-            <span>{{type}}</span>
-        </button>
-        <ul class="dropdown-menu aura-dropdown-menu">
-            <li (click)="onDecode()" class="dropdown-item cursor-pointer" [class.active]="type === 'Decode'">
-                <button type="button" class="button p-0">Decode</button>
-            </li>
-            <li (click)="onHex()" class="dropdown-item cursor-pointer" [class.active]="type === 'Hex'">
-                <button  type="button" class="button p-0">Hex</button>
-            </li>
-        </ul>
+<div class="decode-message d-flex justify-content-start align-items-start col-12 d-flex gap-2" [class]="!isMobile ? 'flex-nowrap' : 'flex-wrap'">
+    <div class="d-flex gap-2 justify-content-center align-items-start flex-nowrap">
+        <p class="name">
+            {{index}} <span *ngIf="name">: {{name}}</span>
+        </p>
+        <div *ngIf="isAllowSwitchDecode" class="dropdown aura-dropdown mr-4 btn-item">
+            <button style="height: 26px; min-width: max-content;"
+                class="button button--sm button--md-mob button-pill button-outline button-dropdown w-100" type="button"
+                data-bs-toggle="dropdown" aria-expanded="false">
+                <span>{{type}}</span>
+            </button>
+            <ul class="dropdown-menu aura-dropdown-menu">
+                <li (click)="onHex()" class="dropdown-item cursor-pointer" [class.active]="type === 'Hex'">
+                    <button type="button" class="button p-0">Hex</button>
+                </li>
+                <li (click)="onDecode()" class="dropdown-item cursor-pointer" [class.active]="type === 'Decode'">
+                    <button type="button" class="button p-0">Decode</button>
+                </li>
+            </ul>
+        </div>
     </div>
     <div *ngIf="!isAllowSwitchDecode" class="data flex-grow-1 font-space-mono">
         <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' : ''">
-        {{data}}
+        <a *ngIf="isLink && type === 'Decode'" class="text--primary" routerLink="/address/{{ data }}">
+            {{data}}
+        </a>
+        <span *ngIf="!isLink || type === 'Hex'">{{data}}</span>
     </div>
 </div>
\ No newline at end of file
diff --git a/src/app/pages/transaction/evm-transaction/decode-message/decode-message.component.ts b/src/app/pages/transaction/evm-transaction/decode-message/decode-message.component.ts
index aba71991f..667092b58 100644
--- a/src/app/pages/transaction/evm-transaction/decode-message/decode-message.component.ts
+++ b/src/app/pages/transaction/evm-transaction/decode-message/decode-message.component.ts
@@ -1,4 +1,5 @@
 import { Component, Input, OnInit } from '@angular/core';
+import { EnvironmentService } from 'src/app/core/data-services/environment.service';
 
 @Component({
   selector: 'app-decode-message',
@@ -7,25 +8,30 @@ import { Component, Input, OnInit } from '@angular/core';
 })
 export class DecodeMessageComponent implements OnInit {
   @Input() index: number | string;
+  @Input() isLink?: boolean;
   @Input() name?: string;
   @Input() isAllowSwitchDecode?: boolean;
   @Input() value: string;
   @Input() decode: string;
   @Input() isHighlight?: boolean;
-  
+
   data = '';
   type: 'Decode' | 'Hex' = 'Hex';
+  isMobile = false;
+
+  constructor(private environmentService: EnvironmentService) {}
 
   ngOnInit(): void {
-    this.data = this.value
+    this.isMobile = this.environmentService.isMobile;
+    this.data = this.value;
   }
   onDecode() {
     this.type = 'Decode';
-    this.data = this.decode
+    this.data = this.decode;
   }
 
   onHex() {
     this.type = 'Hex';
-    this.data = this.value
+    this.data = this.value;
   }
 }
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
index e63630014..cde766e8f 100644
--- 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
@@ -117,28 +117,32 @@ export class EvmMessageComponent {
 
         const abiInfo = this.abiContractData.find((f) => f.contractAddress === element.address);
         if (abiInfo.abi) {
-          console.log(`0x${element.data || this.transaction?.inputData}`, element.data, this.transaction?.inputData);
+          element.data = element?.data?.replace('\\x', '');
           const paramsDecode = abiInfo.interfaceCoder.parseLog({
             topics: element.topics?.filter((f) => f),
             data: `0x${element.data || this.transaction?.inputData}`,
           });
-
+          
           if (paramsDecode?.fragment?.inputs?.length > 0) {
             const param = paramsDecode?.fragment?.inputs.map((item, idx) => {
               return {
                 index: index + 1,
                 name: item.name,
                 type: item.type,
+                isLink: item.type === 'address' ? true : false,
                 isAllowSwitchDecode: true,
-                value: element.topics[index + 1],
-                decode: paramsDecode.args[index]?.toString(),
+                value: element.topics[idx + 1],
+                decode: paramsDecode.args[idx]?.toString(),
               };
             });
             console.log('param-', index, ': ', param);
             decoded = [...decoded, ...param];
           }
+          const dataDecoded = abiInfo?.interfaceCoder.decodeEventLog(paramsDecode?.name, `0x${element.data}`);
+          console.log("data decoded",dataDecoded, paramsDecode);
         }
         this.topicsDecoded[index] = decoded;
+
       } catch (e) {
         console.log(e);
       }
diff --git a/src/app/pages/transaction/evm-transaction/evm-transaction-event-log/evm-transaction-event-log.component.html b/src/app/pages/transaction/evm-transaction/evm-transaction-event-log/evm-transaction-event-log.component.html
index 2c310b8f6..05608ccd6 100644
--- a/src/app/pages/transaction/evm-transaction/evm-transaction-event-log/evm-transaction-event-log.component.html
+++ b/src/app/pages/transaction/evm-transaction/evm-transaction-event-log/evm-transaction-event-log.component.html
@@ -24,13 +24,13 @@
       <div class="col-12 col-lg-11 d-flex flex-column gap-2">
         <ng-container *ngFor="let topic of topicsDecoded; index as idx">
           <app-decode-message
-          *ngIf="topic?.value"
-          [index]="topic?.index"
-          [name]="topic?.name"
-          [isAllowSwitchDecode]="topic?.isAllowSwitchDecode"
-          [value]="topic?.value"
-          [decode]="topic?.decode"
-          ></app-decode-message>
+            *ngIf="topic?.value"
+            [index]="topic?.index"
+            [name]="topic?.name"
+            [isLink]="topic?.isLink"
+            [isAllowSwitchDecode]="topic?.isAllowSwitchDecode"
+            [value]="topic?.value"
+            [decode]="topic?.decode"></app-decode-message>
         </ng-container>
       </div>
     </div>
@@ -41,11 +41,11 @@
       </div>
       <div class="col-12 col-lg-11">
         <app-decode-message
-        index="Value"
-        [value]="eventLog.data"
-        [isAllowSwitchDecode]="true"
-        [isHighlight]="true"
-        ></app-decode-message>
+          index="Value" 
+          [value]="eventLog.data" 
+          decode="wait for minutes"
+          [isAllowSwitchDecode]="true"
+          [isHighlight]="true"></app-decode-message>
       </div>
     </div>
   </div>
diff --git a/src/app/pages/transaction/evm-transaction/evm-transaction-event-log/evm-transaction-event-log.component.ts b/src/app/pages/transaction/evm-transaction/evm-transaction-event-log/evm-transaction-event-log.component.ts
index ebc98e8ed..4f9934d32 100644
--- a/src/app/pages/transaction/evm-transaction/evm-transaction-event-log/evm-transaction-event-log.component.ts
+++ b/src/app/pages/transaction/evm-transaction/evm-transaction-event-log/evm-transaction-event-log.component.ts
@@ -6,7 +6,7 @@ import { ChangeDetectionStrategy, Component, Input, OnChanges, OnInit, SimpleCha
   styleUrls: ['./evm-transaction-event-log.component.scss'],
   changeDetection: ChangeDetectionStrategy.OnPush,
 })
-export class EvmTransactionEventLogComponent implements OnInit {
+export class EvmTransactionEventLogComponent {
   @Input() arrTopicDecode;
   @Input() topicsDecoded;
   @Input() eventLog: {
@@ -20,10 +20,4 @@ export class EvmTransactionEventLogComponent implements OnInit {
     data: string;
   };
   @Input() index;
-
-  ngOnInit(): void {
-    if (this.eventLog?.data) {
-      this.eventLog['data'] = this.eventLog?.data.replace('\\x', '');
-    }
-  }
 }

From 0b2d118101ae0f64bd22792878601045fe1bed28 Mon Sep 17 00:00:00 2001
From: Tran Trung Tien <trantrungtien9x@gmail.com>
Date: Fri, 28 Jun 2024 16:15:20 +0700
Subject: [PATCH 05/12] update: data decoded

---
 .../evm-transaction/evm-message/evm-message.component.ts   | 7 ++++---
 .../evm-transaction-event-log.component.html               | 2 +-
 .../evm-transaction-event-log.component.ts                 | 1 +
 3 files changed, 6 insertions(+), 4 deletions(-)

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
index cde766e8f..fff57cefa 100644
--- 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
@@ -24,6 +24,7 @@ export class EvmMessageComponent {
       data: string;
     }[];
     data: string;
+    dataDecoded?: string;
   }[];
 
   inputDataType = {
@@ -133,13 +134,13 @@ export class EvmMessageComponent {
                 isAllowSwitchDecode: true,
                 value: element.topics[idx + 1],
                 decode: paramsDecode.args[idx]?.toString(),
+                indexed: item.indexed,
               };
             });
-            console.log('param-', index, ': ', param);
+            const dataDecoded = param.filter(f=> !f.indexed).map(i=> i.decode).join(", ");
+            element.dataDecoded = dataDecoded;
             decoded = [...decoded, ...param];
           }
-          const dataDecoded = abiInfo?.interfaceCoder.decodeEventLog(paramsDecode?.name, `0x${element.data}`);
-          console.log("data decoded",dataDecoded, paramsDecode);
         }
         this.topicsDecoded[index] = decoded;
 
diff --git a/src/app/pages/transaction/evm-transaction/evm-transaction-event-log/evm-transaction-event-log.component.html b/src/app/pages/transaction/evm-transaction/evm-transaction-event-log/evm-transaction-event-log.component.html
index 05608ccd6..398a31ccf 100644
--- a/src/app/pages/transaction/evm-transaction/evm-transaction-event-log/evm-transaction-event-log.component.html
+++ b/src/app/pages/transaction/evm-transaction/evm-transaction-event-log/evm-transaction-event-log.component.html
@@ -43,7 +43,7 @@
         <app-decode-message
           index="Value" 
           [value]="eventLog.data" 
-          decode="wait for minutes"
+          [decode]="eventLog.dataDecoded"
           [isAllowSwitchDecode]="true"
           [isHighlight]="true"></app-decode-message>
       </div>
diff --git a/src/app/pages/transaction/evm-transaction/evm-transaction-event-log/evm-transaction-event-log.component.ts b/src/app/pages/transaction/evm-transaction/evm-transaction-event-log/evm-transaction-event-log.component.ts
index 4f9934d32..9f017394c 100644
--- a/src/app/pages/transaction/evm-transaction/evm-transaction-event-log/evm-transaction-event-log.component.ts
+++ b/src/app/pages/transaction/evm-transaction/evm-transaction-event-log/evm-transaction-event-log.component.ts
@@ -18,6 +18,7 @@ export class EvmTransactionEventLogComponent {
       data: string;
     }[];
     data: string;
+    dataDecoded?: string;
   };
   @Input() index;
 }

From 7872c4705204817ba89ef42ae493e4899931907c Mon Sep 17 00:00:00 2001
From: Tran Trung Tien <trantrungtien9x@gmail.com>
Date: Fri, 28 Jun 2024 16:22:53 +0700
Subject: [PATCH 06/12] remove config.json change

---
 src/assets/config/config.json | 91 +++++++++++++++--------------------
 1 file changed, 40 insertions(+), 51 deletions(-)

diff --git a/src/assets/config/config.json b/src/assets/config/config.json
index 4d9def744..cea5032ae 100644
--- a/src/assets/config/config.json
+++ b/src/assets/config/config.json
@@ -1,9 +1,9 @@
 {
   "environment": {
-    "name": "serenity",
+    "name": "develop",
     "label": {
-      "desktop": "Serenity Testnet (v0.8.0)",
-      "mobile": "Serenity Testnet"
+      "desktop": "Develop Testnet Network",
+      "mobile": "Develop Testnet"
     },
     "logo": "https://aura-explorer-assets.s3.ap-southeast-1.amazonaws.com/dev-assets/token/download.png",
     "notice": {
@@ -14,21 +14,17 @@
   },
   "chainConfig": {
     "stakingTime": "86400",
-    "excludedAddresses": [
-      "aura1fl48vsnmsdzcv85q5d2q4z5ajdha8yu3wd7dmw",
-      "aura1z9whsygd9hdquamn84vs76uy8ytatnw28aff3m",
-      "aura1752fawv92g2c9eegqedj5689gevgscsc0y7stk"
-    ],
-    "blockTime": 2000,
-    "quotaSetPrivateName": 20,
-    "quotaSetWatchList": 20,
+    "excludedAddresses": ["aura1fl48vsnmsdzcv85q5d2q4z5ajdha8yu3wd7dmw"],
+    "blockTime": 5000,
+    "quotaSetPrivateName": 10,
+    "quotaSetWatchList": 10,
     "quotaNotification": 100,
     "features": [],
     "chain_info": {
-      "chainId": "auradev_1236-2",
-      "chainName": "Aura serenity testnet",
-      "rpc": "https://rpc.serenity.aura.network",
-      "rest": "https://lcd.serenity.aura.network",
+      "chainId": "auradev_1235-3",
+      "chainName": "aura devnet",
+      "rpc": "https://rpc.dev.aura.network",
+      "rest": "https://lcd.dev.aura.network",
       "bip44": {
         "coinType": 118
       },
@@ -42,21 +38,21 @@
       },
       "currencies": [
         {
-          "coinDenom": "AURA",
-          "coinMinimalDenom": "uaura",
+          "coinDenom": "TAURA",
+          "coinMinimalDenom": "utaura",
           "coinDecimals": 6
         }
       ],
       "feeCurrencies": [
         {
-          "coinDenom": "AURA",
-          "coinMinimalDenom": "uaura",
+          "coinDenom": "TAURA",
+          "coinMinimalDenom": "utaura",
           "coinDecimals": 6
         }
       ],
       "stakeCurrency": {
-        "coinDenom": "AURA",
-        "coinMinimalDenom": "uaura",
+        "coinDenom": "TAURA",
+        "coinMinimalDenom": "utaura",
         "coinDecimals": 6
       },
       "coinType": 118,
@@ -65,31 +61,27 @@
         "average": 0.0025,
         "high": 0.004
       },
-      "features": [
-        "ibc-transfer"
-      ],
-      "walletUrlForStaking": "https://serenity.aurascan.io/validators",
+      "features": ["ibc-transfer"],
+      "walletUrlForStaking": "https://explorer.dev.aura.network/validators",
       "logo": "https://i.imgur.com/zi0mTYb.png",
-      "explorer": "https://serenity.aurascan.io/",
+      "explorer": "https://explorer.dev.aura.network/",
       "beta": "false"
     },
     "evmChainInfo": {
-      "name": "Aura EVM Serenity",
-      "chain": "Aura-Serenity",
-      "rpc": "https://jsonrpc.serenity.aura.network",
-      "faucets": [
-        ""
-      ],
+      "name": "Aura EVM Devnet",
+      "chain": "Aura-Dev",
+      "rpc": "https://jsonrpc.dev.aura.network",
+      "faucets": [""],
       "nativeCurrency": {
         "name": "test-Aura",
-        "symbol": "AURA",
-        "denom": "aAURA",
+        "symbol": "tAURA",
+        "denom": "atAURA",
         "decimals": 18
       },
       "infoURL": "https://aura.network",
-      "shortName": "aura-serenity",
-      "chainId": 1236,
-      "networkId": 1236,
+      "shortName": "aura-devnet",
+      "chainId": 1235,
+      "networkId": 1235,
       "slip44": 1,
       "icon": "",
       "stakeContract": "0x0000000000000000000000000000000000000800",
@@ -97,37 +89,36 @@
       "explorers": [
         {
           "name": "Aura Explorer (Aurascan)",
-          "url": "https://serenity.aurascan.io",
+          "url": "https://explorer.dev.aura.network",
           "standard": "none",
           "icon": ""
         }
       ]
     }
   },
+  "etherJsonRpc": "https://jsonrpc.dev.aura.network",
   "image": {
     "validator": "https://validator-logos.s3.ap-southeast-1.amazonaws.com",
-    "assets": "https://aura-explorer-assets.s3.ap-southeast-1.amazonaws.com/serenity-assets/",
+    "assets": "https://aura-explorer-assets.s3.ap-southeast-1.amazonaws.com/dev-assets/",
     "banner": [
       {
-        "src": "https://aura-explorer-assets.s3.ap-southeast-1.amazonaws.com/serenity-assets/images/pages/banner_aurascan-2.png",
+        "src": "https://aura-explorer-assets.s3.ap-southeast-1.amazonaws.com/dev-assets/images/pages/banner_aurascan.png",
         "url": "https://beta.seekhype.io/"
       },
       {
-        "src": "https://aura-explorer-assets.s3.ap-southeast-1.amazonaws.com/serenity-assets/images/pages/banner_aurascan-2.png",
+        "src": "https://aura-explorer-assets.s3.ap-southeast-1.amazonaws.com/dev-assets/images/pages/banner_aurascan-2.png",
         "url": "https://beta.seekhype.io/"
       }
     ]
   },
   "api": {
-    "backend": "https://serenity-api.aurascan.io/api/v1",
-    "socket": "https://serenity-api.aurascan.io",
+    "backend": "https://explorer-api.dev.aura.network/api/v1",
+    "socket": "https://explorer-api.dev.aura.network",
     "ipfsDomain": "https://ipfs.io/",
     "verifyContract": "https://indexer-v2.dev.aurascan.io/verify-contract/v1",
     "coingecko": {
       "url": "https://api.coingecko.com/api/v3",
-      "ids": [
-        "aura-network"
-      ]
+      "ids": ["aura-network"]
     },
     "google": {
       "url": "apps.googleusercontent.com",
@@ -138,7 +129,7 @@
       "url": "https://indexer-v2.dev.aurascan.io/api",
       "graphql": "/v2/graphql",
       "rest": "/v2",
-      "chain": "serenity"
+      "chain": "auratestnet"
     },
     "walletConnect": {
       "signClient": {
@@ -147,10 +138,8 @@
         "metadata": {
           "name": "Aurascan",
           "description": "Aura Network Explorer",
-          "url": "https://serenity.aurascan.io/",
-          "icons": [
-            "https://aura-explorer-assets.s3.ap-southeast-1.amazonaws.com/dev-assets/token/download.png"
-          ]
+          "url": "https://explorer.dev.aurascan.io/",
+          "icons": ["https://aura-explorer-assets.s3.ap-southeast-1.amazonaws.com/dev-assets/token/download.png"]
         }
       }
     }

From e7b823bb8a11b2218f3f1d031351ca1311f8de17 Mon Sep 17 00:00:00 2001
From: Tran Trung Tien <trantrungtien9x@gmail.com>
Date: Wed, 3 Jul 2024 13:59:28 +0700
Subject: [PATCH 07/12] fix: enhance event log

---
 .../decode-message.component.html             |  52 +++-
 .../decode-message.component.scss             |  53 ++++
 .../decode-message.component.ts               |  43 ++-
 .../evm-message/evm-message.component.html    |   2 +-
 .../evm-message/evm-message.component.scss    |   1 +
 .../evm-message/evm-message.component.ts      |  58 ++--
 .../evm-transaction-event-log.component.html  |   2 +-
 src/assets/config/config.json                 | 279 +++++++++---------
 8 files changed, 324 insertions(+), 166 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
index e33e6fe1b..c94b6675b 100644
--- 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
@@ -1,9 +1,10 @@
-<div class="decode-message d-flex justify-content-start align-items-start col-12 d-flex gap-2" [class]="!isMobile ? 'flex-nowrap' : 'flex-wrap'">
-    <div class="d-flex gap-2 justify-content-center align-items-start flex-nowrap">
+<div *ngIf="!isDataField" class="decode-message d-flex justify-content-start align-items-start col-12 d-flex gap-3"
+    [class]="!isMobile ? 'flex-nowrap' : 'flex-wrap'">
+    <div class="param-field d-flex gap-3 justify-content-center align-items-start flex-nowrap">
         <p class="name">
             {{index}} <span *ngIf="name">: {{name}}</span>
         </p>
-        <div *ngIf="isAllowSwitchDecode" class="dropdown aura-dropdown mr-4 btn-item">
+        <div *ngIf="isAllowSwitchDecode" class="dropdown aura-dropdown btn-item">
             <button style="height: 26px; min-width: max-content;"
                 class="button button--sm button--md-mob button-pill button-outline button-dropdown w-100" type="button"
                 data-bs-toggle="dropdown" aria-expanded="false">
@@ -29,4 +30,49 @@
         </a>
         <span *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 *ngFor="let item of data" class="data-item">
+                    <p class="font-space-mono">{{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>
+                </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>
\ No newline at end of file
diff --git a/src/app/pages/transaction/evm-transaction/decode-message/decode-message.component.scss b/src/app/pages/transaction/evm-transaction/decode-message/decode-message.component.scss
index 066b2a80b..794f04578 100644
--- a/src/app/pages/transaction/evm-transaction/decode-message/decode-message.component.scss
+++ b/src/app/pages/transaction/evm-transaction/decode-message/decode-message.component.scss
@@ -1,4 +1,5 @@
 .decode-message {
+    column-gap: 8px;
     .data{
         font-size: 14px;
         line-height: 24px;
@@ -47,10 +48,62 @@
         }
     }
 
+    .data-field-msg {
+        padding: 2px;
+        border-radius: 4px;
+
+        p {
+            font-size: 14px;
+            line-height: 18px;
+            font-weight: 400;
+            margin: 0;
+        }
+
+        .data-item {
+            display: grid;
+            column-gap: 20px;
+            grid-template-columns: minmax(100px, max-content) 1fr;
+        }
+    }
+
     .highlight {
         max-width: 98%;
         padding: 4px 8px;
         border-radius: 4px;
         background-color: var(--aura-gray-10);
       }
+    
+    .button-container {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        flex-wrap: nowrap;
+    }
+
+    .button-data {
+        width: 39px;
+        height: 24px;
+        gap: 10px;
+        padding: 2px;
+        background: #363843;
+        color: #9DA1AC;
+
+    }
+
+    .button-dec {
+        border-radius: 8px 0px 0px 8px;
+    }
+
+    .button-hex {
+        border-radius: 0px 8px 8px 0px;
+    }
+    
+    .active {
+        background-color: #000;
+        span {   
+            background: var(--aura-gradient-button);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+    }
 }
\ No newline at end of file
diff --git a/src/app/pages/transaction/evm-transaction/decode-message/decode-message.component.ts b/src/app/pages/transaction/evm-transaction/decode-message/decode-message.component.ts
index 667092b58..e69fc7dad 100644
--- a/src/app/pages/transaction/evm-transaction/decode-message/decode-message.component.ts
+++ b/src/app/pages/transaction/evm-transaction/decode-message/decode-message.component.ts
@@ -7,15 +7,16 @@ import { EnvironmentService } from 'src/app/core/data-services/environment.servi
   styleUrls: ['./decode-message.component.scss'],
 })
 export class DecodeMessageComponent implements OnInit {
-  @Input() index: number | string;
+  @Input() index?: number;
   @Input() isLink?: boolean;
   @Input() name?: string;
   @Input() isAllowSwitchDecode?: boolean;
   @Input() value: string;
   @Input() decode: string;
   @Input() isHighlight?: boolean;
+  @Input() isDataField?: boolean;
 
-  data = '';
+  data: string | any[] = '';
   type: 'Decode' | 'Hex' = 'Hex';
   isMobile = false;
 
@@ -25,9 +26,43 @@ export class DecodeMessageComponent implements OnInit {
     this.isMobile = this.environmentService.isMobile;
     this.data = this.value;
   }
-  onDecode() {
+  onDecode(field?: string) {
     this.type = 'Decode';
-    this.data = this.decode;
+    console.log(this.decode);
+    if(field !== 'data'){
+      this.data = this.decode;
+      return;
+    }
+
+    this.data = Array.isArray(this.decode) && this.decode?.map(item => {
+      if(item?.type !== 'tuple') {
+        return {
+          ...item,
+          isArray: false,
+        }
+      }
+      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
+        }
+      }
+    })
+    console.log(this.data);
+    
   }
 
   onHex() {
diff --git a/src/app/pages/transaction/evm-transaction/evm-message/evm-message.component.html b/src/app/pages/transaction/evm-transaction/evm-message/evm-message.component.html
index c3718ceba..cb956c6ca 100644
--- a/src/app/pages/transaction/evm-transaction/evm-message/evm-message.component.html
+++ b/src/app/pages/transaction/evm-transaction/evm-message/evm-message.component.html
@@ -118,7 +118,7 @@
           (click)="isLog = false"
           class="button body-04 border-radius--sm"
           [class.active-gradient]="!isLog">
-          <span>Internal Transactions</span>
+          <span>Internal Txns</span>
         </button>
       </div>
     </div>
diff --git a/src/app/pages/transaction/evm-transaction/evm-message/evm-message.component.scss b/src/app/pages/transaction/evm-transaction/evm-message/evm-message.component.scss
index 8c6fa4239..010461f97 100644
--- a/src/app/pages/transaction/evm-transaction/evm-message/evm-message.component.scss
+++ b/src/app/pages/transaction/evm-transaction/evm-message/evm-message.component.scss
@@ -16,6 +16,7 @@
     border-radius: 8px;
     padding: 12px;
     max-height: 558px;
+    overflow-y: auto;
     @media (min-width: 992px) {
       max-height: 330px;
       padding: 12px 16px;
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
index fff57cefa..7f0cde363 100644
--- 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
@@ -49,7 +49,6 @@ export class EvmMessageComponent {
   constructor(
     private transactionService: TransactionService,
     public env: EnvironmentService,
-    private contractService: ContractService,
   ) {}
 
   ngOnInit(): void {
@@ -106,16 +105,9 @@ export class EvmMessageComponent {
 
   getListTopicDecode() {
     this.transaction.eventLog.forEach((element, index) => {
+      
       let arrTopicTemp = element?.evm_signature_mapping_topic || [];
       try {
-        let decoded = [
-          {
-            index: 0,
-            decode: arrTopicTemp?.[0],
-            value: element.topics[0],
-          },
-        ];
-
         const abiInfo = this.abiContractData.find((f) => f.contractAddress === element.address);
         if (abiInfo.abi) {
           element.data = element?.data?.replace('\\x', '');
@@ -124,30 +116,50 @@ export class EvmMessageComponent {
             data: `0x${element.data || this.transaction?.inputData}`,
           });
           
-          if (paramsDecode?.fragment?.inputs?.length > 0) {
-            const param = paramsDecode?.fragment?.inputs.map((item, idx) => {
-              return {
-                index: index + 1,
+          const params = paramsDecode?.fragment?.inputs.map((i) => `${i.type} ${i.indexed ? 'indexed' : ''} ${i.name}`);
+          const decodeTopic0 = `> ${paramsDecode?.fragment?.name}(${params.join(', ')})`;
+
+          let 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;
+            
+            inputs?.forEach((item, idx) => {              
+              const param = {
                 name: item.name,
                 type: item.type,
                 isLink: item.type === 'address' ? true : false,
-                isAllowSwitchDecode: true,
-                value: element.topics[idx + 1],
                 decode: paramsDecode.args[idx]?.toString(),
-                indexed: item.indexed,
-              };
+              }
+              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);
+              }
             });
-            const dataDecoded = param.filter(f=> !f.indexed).map(i=> i.decode).join(", ");
-            element.dataDecoded = dataDecoded;
-            decoded = [...decoded, ...param];
+            
+            element.dataDecoded = data;
+            decoded = [...decoded, ...params];
           }
+          this.topicsDecoded[index] = decoded;
         }
-        this.topicsDecoded[index] = decoded;
-
       } catch (e) {
         console.log(e);
       }
-
       this.arrTopicDecode[index] = arrTopicTemp;
     });
     this.arrTopicDecode = [...this.arrTopicDecode];
diff --git a/src/app/pages/transaction/evm-transaction/evm-transaction-event-log/evm-transaction-event-log.component.html b/src/app/pages/transaction/evm-transaction/evm-transaction-event-log/evm-transaction-event-log.component.html
index 398a31ccf..20fd055fc 100644
--- a/src/app/pages/transaction/evm-transaction/evm-transaction-event-log/evm-transaction-event-log.component.html
+++ b/src/app/pages/transaction/evm-transaction/evm-transaction-event-log/evm-transaction-event-log.component.html
@@ -41,7 +41,7 @@
       </div>
       <div class="col-12 col-lg-11">
         <app-decode-message
-          index="Value" 
+          [isDataField]="true"
           [value]="eventLog.data" 
           [decode]="eventLog.dataDecoded"
           [isAllowSwitchDecode]="true"
diff --git a/src/assets/config/config.json b/src/assets/config/config.json
index cea5032ae..c8bc55046 100644
--- a/src/assets/config/config.json
+++ b/src/assets/config/config.json
@@ -1,147 +1,158 @@
 {
   "environment": {
-    "name": "develop",
-    "label": {
-      "desktop": "Develop Testnet Network",
-      "mobile": "Develop Testnet"
-    },
-    "logo": "https://aura-explorer-assets.s3.ap-southeast-1.amazonaws.com/dev-assets/token/download.png",
-    "notice": {
-      "content": null,
-      "url": null
-    },
-    "nativeName": "Aura"
-  },
-  "chainConfig": {
-    "stakingTime": "86400",
-    "excludedAddresses": ["aura1fl48vsnmsdzcv85q5d2q4z5ajdha8yu3wd7dmw"],
-    "blockTime": 5000,
-    "quotaSetPrivateName": 10,
-    "quotaSetWatchList": 10,
-    "quotaNotification": 100,
-    "features": [],
-    "chain_info": {
-      "chainId": "auradev_1235-3",
-      "chainName": "aura devnet",
-      "rpc": "https://rpc.dev.aura.network",
-      "rest": "https://lcd.dev.aura.network",
-      "bip44": {
-        "coinType": 118
+      "name": "serenity",
+      "label": {
+          "desktop": "Serenity Testnet (v0.8.0)",
+          "mobile": "Serenity Testnet"
       },
-      "bech32Config": {
-        "bech32PrefixAccAddr": "aura",
-        "bech32PrefixAccPub": "aurapub",
-        "bech32PrefixValAddr": "auravaloper",
-        "bech32PrefixValPub": "auravaloperpub",
-        "bech32PrefixConsAddr": "auravalcons",
-        "bech32PrefixConsPub": "auravalconspub"
+      "logo": "https://aura-explorer-assets.s3.ap-southeast-1.amazonaws.com/dev-assets/token/download.png",
+      "notice": {
+          "content": null,
+          "url": null
       },
-      "currencies": [
-        {
-          "coinDenom": "TAURA",
-          "coinMinimalDenom": "utaura",
-          "coinDecimals": 6
-        }
-      ],
-      "feeCurrencies": [
-        {
-          "coinDenom": "TAURA",
-          "coinMinimalDenom": "utaura",
-          "coinDecimals": 6
-        }
+      "nativeName": "Aura"
+  },
+  "chainConfig": {
+      "stakingTime": "86400",
+      "excludedAddresses": [
+          "aura1fl48vsnmsdzcv85q5d2q4z5ajdha8yu3wd7dmw",
+          "aura1z9whsygd9hdquamn84vs76uy8ytatnw28aff3m",
+          "aura1752fawv92g2c9eegqedj5689gevgscsc0y7stk"
       ],
-      "stakeCurrency": {
-        "coinDenom": "TAURA",
-        "coinMinimalDenom": "utaura",
-        "coinDecimals": 6
-      },
-      "coinType": 118,
-      "gasPriceStep": {
-        "low": 0.001,
-        "average": 0.0025,
-        "high": 0.004
+      "blockTime": 2000,
+      "quotaSetPrivateName": 20,
+      "quotaSetWatchList": 20,
+      "quotaNotification": 100,
+      "features": [],
+      "chain_info": {
+          "chainId": "auradev_1236-2",
+          "chainName": "Aura serenity testnet",
+          "rpc": "https://rpc.serenity.aura.network",
+          "rest": "https://lcd.serenity.aura.network",
+          "bip44": {
+              "coinType": 118
+          },
+          "bech32Config": {
+              "bech32PrefixAccAddr": "aura",
+              "bech32PrefixAccPub": "aurapub",
+              "bech32PrefixValAddr": "auravaloper",
+              "bech32PrefixValPub": "auravaloperpub",
+              "bech32PrefixConsAddr": "auravalcons",
+              "bech32PrefixConsPub": "auravalconspub"
+          },
+          "currencies": [
+              {
+                  "coinDenom": "AURA",
+                  "coinMinimalDenom": "uaura",
+                  "coinDecimals": 6
+              }
+          ],
+          "feeCurrencies": [
+              {
+                  "coinDenom": "AURA",
+                  "coinMinimalDenom": "uaura",
+                  "coinDecimals": 6
+              }
+          ],
+          "stakeCurrency": {
+              "coinDenom": "AURA",
+              "coinMinimalDenom": "uaura",
+              "coinDecimals": 6
+          },
+          "coinType": 118,
+          "gasPriceStep": {
+              "low": 0.001,
+              "average": 0.0025,
+              "high": 0.004
+          },
+          "features": [
+              "ibc-transfer"
+          ],
+          "walletUrlForStaking": "https://serenity.aurascan.io/validators",
+          "logo": "https://i.imgur.com/zi0mTYb.png",
+          "explorer": "https://serenity.aurascan.io/",
+          "beta": "false"
       },
-      "features": ["ibc-transfer"],
-      "walletUrlForStaking": "https://explorer.dev.aura.network/validators",
-      "logo": "https://i.imgur.com/zi0mTYb.png",
-      "explorer": "https://explorer.dev.aura.network/",
-      "beta": "false"
-    },
-    "evmChainInfo": {
-      "name": "Aura EVM Devnet",
-      "chain": "Aura-Dev",
-      "rpc": "https://jsonrpc.dev.aura.network",
-      "faucets": [""],
-      "nativeCurrency": {
-        "name": "test-Aura",
-        "symbol": "tAURA",
-        "denom": "atAURA",
-        "decimals": 18
-      },
-      "infoURL": "https://aura.network",
-      "shortName": "aura-devnet",
-      "chainId": 1235,
-      "networkId": 1235,
-      "slip44": 1,
-      "icon": "",
-      "stakeContract": "0x0000000000000000000000000000000000000800",
-      "claimContract": "0x0000000000000000000000000000000000000801",
-      "explorers": [
-        {
-          "name": "Aura Explorer (Aurascan)",
-          "url": "https://explorer.dev.aura.network",
-          "standard": "none",
-          "icon": ""
-        }
-      ]
-    }
+      "evmChainInfo": {
+          "name": "Aura EVM Serenity",
+          "chain": "Aura-Serenity",
+          "rpc": "https://jsonrpc.serenity.aura.network",
+          "faucets": [
+              ""
+          ],
+          "nativeCurrency": {
+              "name": "test-Aura",
+              "symbol": "AURA",
+              "denom": "aAURA",
+              "decimals": 18
+          },
+          "infoURL": "https://aura.network",
+          "shortName": "aura-serenity",
+          "chainId": 1236,
+          "networkId": 1236,
+          "slip44": 1,
+          "icon": "",
+          "stakeContract": "0x0000000000000000000000000000000000000800",
+          "claimContract": "0x0000000000000000000000000000000000000801",
+          "explorers": [
+              {
+                  "name": "Aura Explorer (Aurascan)",
+                  "url": "https://serenity.aurascan.io",
+                  "standard": "none",
+                  "icon": ""
+              }
+          ]
+      }
   },
-  "etherJsonRpc": "https://jsonrpc.dev.aura.network",
   "image": {
-    "validator": "https://validator-logos.s3.ap-southeast-1.amazonaws.com",
-    "assets": "https://aura-explorer-assets.s3.ap-southeast-1.amazonaws.com/dev-assets/",
-    "banner": [
-      {
-        "src": "https://aura-explorer-assets.s3.ap-southeast-1.amazonaws.com/dev-assets/images/pages/banner_aurascan.png",
-        "url": "https://beta.seekhype.io/"
-      },
-      {
-        "src": "https://aura-explorer-assets.s3.ap-southeast-1.amazonaws.com/dev-assets/images/pages/banner_aurascan-2.png",
-        "url": "https://beta.seekhype.io/"
-      }
-    ]
+      "validator": "https://validator-logos.s3.ap-southeast-1.amazonaws.com",
+      "assets": "https://aura-explorer-assets.s3.ap-southeast-1.amazonaws.com/serenity-assets/",
+      "banner": [
+          {
+              "src": "https://aura-explorer-assets.s3.ap-southeast-1.amazonaws.com/serenity-assets/images/pages/banner_aurascan-2.png",
+              "url": "https://beta.seekhype.io/"
+          },
+          {
+              "src": "https://aura-explorer-assets.s3.ap-southeast-1.amazonaws.com/serenity-assets/images/pages/banner_aurascan-2.png",
+              "url": "https://beta.seekhype.io/"
+          }
+      ]
   },
   "api": {
-    "backend": "https://explorer-api.dev.aura.network/api/v1",
-    "socket": "https://explorer-api.dev.aura.network",
-    "ipfsDomain": "https://ipfs.io/",
-    "verifyContract": "https://indexer-v2.dev.aurascan.io/verify-contract/v1",
-    "coingecko": {
-      "url": "https://api.coingecko.com/api/v3",
-      "ids": ["aura-network"]
-    },
-    "google": {
-      "url": "apps.googleusercontent.com",
-      "clientId": "3465782004-hp7u6vlitgs109rl0emrsf1oc7bjvu08",
-      "siteKeyCaptcha": "6Lf3_rYoAAAAAAERC5hKPYug-DSJ37t55O8O_1yc"
-    },
-    "horoscope": {
-      "url": "https://indexer-v2.dev.aurascan.io/api",
-      "graphql": "/v2/graphql",
-      "rest": "/v2",
-      "chain": "auratestnet"
-    },
-    "walletConnect": {
-      "signClient": {
-        "projectId": "ae69ca1df362a7183412731fb570a54b",
-        "relayUrl": "wss://relay.walletconnect.org",
-        "metadata": {
-          "name": "Aurascan",
-          "description": "Aura Network Explorer",
-          "url": "https://explorer.dev.aurascan.io/",
-          "icons": ["https://aura-explorer-assets.s3.ap-southeast-1.amazonaws.com/dev-assets/token/download.png"]
-        }
+      "backend": "https://serenity-api.aurascan.io/api/v1",
+      "socket": "https://serenity-api.aurascan.io",
+      "ipfsDomain": "https://ipfs.io/",
+      "verifyContract": "https://indexer-v2.dev.aurascan.io/verify-contract/v1",
+      "coingecko": {
+          "url": "https://api.coingecko.com/api/v3",
+          "ids": [
+              "aura-network"
+          ]
+      },
+      "google": {
+          "url": "apps.googleusercontent.com",
+          "clientId": "3465782004-hp7u6vlitgs109rl0emrsf1oc7bjvu08",
+          "siteKeyCaptcha": "6Lf3_rYoAAAAAAERC5hKPYug-DSJ37t55O8O_1yc"
+      },
+      "horoscope": {
+          "url": "https://indexer-v2.dev.aurascan.io/api",
+          "graphql": "/v2/graphql",
+          "rest": "/v2",
+          "chain": "serenity"
+      },
+      "walletConnect": {
+          "signClient": {
+              "projectId": "ae69ca1df362a7183412731fb570a54b",
+              "relayUrl": "wss://relay.walletconnect.org",
+              "metadata": {
+                  "name": "Aurascan",
+                  "description": "Aura Network Explorer",
+                  "url": "https://serenity.aurascan.io/",
+                  "icons": [
+                      "https://aura-explorer-assets.s3.ap-southeast-1.amazonaws.com/dev-assets/token/download.png"
+                  ]
+              }
+          }
       }
-    }
   }
 }
\ No newline at end of file

From 01d0d1b2005ed197b7b179696ca63d34ebcd3412 Mon Sep 17 00:00:00 2001
From: tambui <tam2391@gmail.com>
Date: Wed, 3 Jul 2024 13:53:08 +0700
Subject: [PATCH 08/12] merged commit

---
 src/app/core/services/contract.service.ts     | 27 +++++++++
 .../decode-message.component.html             |  2 +-
 .../decode-message.component.scss             |  6 ++
 .../evm-message/evm-message.component.ts      | 57 +++++++++++++++----
 4 files changed, 81 insertions(+), 11 deletions(-)

diff --git a/src/app/core/services/contract.service.ts b/src/app/core/services/contract.service.ts
index b94a58577..cdd5e35ca 100644
--- a/src/app/core/services/contract.service.ts
+++ b/src/app/core/services/contract.service.ts
@@ -700,6 +700,33 @@ export class ContractService extends CommonService {
       .pipe(map((res) => (res?.data ? res?.data[this.envDB] : null)));
   }
 
+  
+  getListProxyAbi(addressList: string[]) {
+    const query = `query ListProxyContractDetail($address: [String] = null) {
+      ${this.envDB} {
+        evm_smart_contract(where: {address: {_in: $address}}) {
+          address
+          evm_proxy_histories(order_by: {block_height: desc}, where: {implementation_contract: {_is_null: false}}) {
+            proxy_contract
+            implementation_contract
+            block_height
+          }
+        }
+      }
+    }
+    `;
+
+    return this.http
+      .post<any>(this.graphUrl, {
+        query: query,
+        variables: {
+          address: addressList,
+        },
+        operationName: 'ListProxyContractDetail',
+      })
+      .pipe(map((res) => (res?.data ? res?.data[this.envDB] : null)));
+  }
+
   queryTokenByContractAddress(address: string) {
     if (address.toLowerCase() == this.environmentService.coinMinimalDenom) {
       return of({
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
index c94b6675b..f40250d9b 100644
--- 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
@@ -40,7 +40,7 @@
             </div>
             <div *ngIf="type === 'Decode'">
                 <div *ngFor="let item of data" class="data-item">
-                    <p class="font-space-mono">{{item?.name}}</p>
+                    <p class="font-space-mono item-name">{{item?.name}}</p>
                     <a *ngIf="item?.isLink" class="text--primary" routerLink="/address/{{ item?.decode }}">
                         {{item?.decode}}
                     </a>
diff --git a/src/app/pages/transaction/evm-transaction/decode-message/decode-message.component.scss b/src/app/pages/transaction/evm-transaction/decode-message/decode-message.component.scss
index 794f04578..369f62fe5 100644
--- a/src/app/pages/transaction/evm-transaction/decode-message/decode-message.component.scss
+++ b/src/app/pages/transaction/evm-transaction/decode-message/decode-message.component.scss
@@ -63,6 +63,12 @@
             display: grid;
             column-gap: 20px;
             grid-template-columns: minmax(100px, max-content) 1fr;
+
+            .item-name {
+                color: #9DA1AC;
+                font-size: 12px;
+                line-height: 16px;
+            }
         }
     }
 
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
index 7f0cde363..f6023b96d 100644
--- 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
@@ -43,12 +43,14 @@ export class EvmMessageComponent {
   isCreateContract = false;
   arrTopicDecode = [];
   contractAddressAbi = '';
+  contractAddressAbiList = [];
   topicsDecoded = [];
   abiContractData = [];
 
   constructor(
     private transactionService: TransactionService,
     public env: EnvironmentService,
+    private contractService: ContractService
   ) {}
 
   ngOnInit(): void {
@@ -59,36 +61,63 @@ export class EvmMessageComponent {
       this.typeInput = this.inputDataType.ORIGINAL;
     }
     this.getMethodName(this.inputDataRaw['methodId']);
-    this.getAbiList();
+    this.getProxyContractAbi();
   }
 
   changeType(data) {
     this.typeInput = data;
   }
 
-  getAbiList() {
+  getProxyContractAbi() {
     let listContract = this.transaction.eventLog.map((i) => i.address?.toLowerCase());
+    listContract.push(this.transaction?.to?.toLowerCase());
     listContract = _.uniq(listContract);
+    this.contractService.getListProxyAbi(listContract).subscribe({
+      next: (res) => {
+        this.contractAddressAbiList = res?.evm_smart_contract?.map((item) => {
+          return {
+            implementation_contract: _.get(item, 'evm_proxy_histories[0].implementation_contract') || item?.address,
+            address: item?.address,
+          };
+        });
+      },
+      complete: () => {
+        this.getAbiList();
+      },
+    });
+  }
 
-    this.transactionService.getListAbiContract(listContract).subscribe((res) => {
+  getAbiList() {
+    if (this.contractAddressAbiList.length === 0) {
+      return;
+    }
+    const implementationContractList = this.contractAddressAbiList.map((i) => i.implementation_contract);
+    
+    this.transactionService.getListAbiContract(implementationContractList).subscribe((res) => {
+      
       if (res?.evm_contract_verification?.length > 0) {
         this.isContractVerified = true;
         this.isDecoded = true;
         this.abiContractData = res?.evm_contract_verification.map((i) => ({
-          contractAddress: i.contract_address,
+          contractAddress: this.contractAddressAbiList.find((f) => f.implementation_contract === i.contract_address)
+            ?.address,
+          implementationContractAddr: i.contract_address,
           abi: i.abi,
           interfaceCoder: new Interface(i.abi),
         }));
 
         const abiInfo = this.abiContractData.find((f) => f.contractAddress === this.transaction?.to);
+        
         if (abiInfo.abi) {
           const value = parseEther('1.0');
           const rawData = abiInfo.interfaceCoder.parseTransaction({ data: '0x' + this.transaction?.inputData, value });
+          debugger
           if (rawData?.fragment?.inputs?.length > 0) {
             this.getListTopicDecode();
 
             this.inputDataRaw['name'] =
               abiInfo.interfaceCoder.getFunction(rawData?.fragment?.name)?.format() || rawData.name;
+              
             this.inputDataDecoded['name'] = rawData.name;
             this.inputDataDecoded['params'] = rawData?.fragment?.inputs.map((item, index) => {
               return {
@@ -109,17 +138,27 @@ export class EvmMessageComponent {
       let arrTopicTemp = element?.evm_signature_mapping_topic || [];
       try {
         const abiInfo = this.abiContractData.find((f) => f.contractAddress === element.address);
-        if (abiInfo.abi) {
+        let decoded = [];
+        if (!abiInfo?.abi) {
+          let arrTopicTemp = element?.evm_signature_mapping_topic || [];
+          decoded = [
+            {
+              index: 0,
+              decode: arrTopicTemp[0],
+              value: element.topics[0],
+            },
+          ];
+        } 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(', ')})`;
 
-          let decoded = [
+          decoded = [
             {
               index: 0,
               decode: decodeTopic0,
@@ -157,9 +196,7 @@ export class EvmMessageComponent {
           }
           this.topicsDecoded[index] = decoded;
         }
-      } catch (e) {
-        console.log(e);
-      }
+      } catch (e) {}
       this.arrTopicDecode[index] = arrTopicTemp;
     });
     this.arrTopicDecode = [...this.arrTopicDecode];

From 08179929e455557955ca40889cbea35065ff3af6 Mon Sep 17 00:00:00 2001
From: Tran Trung Tien <trantrungtien9x@gmail.com>
Date: Thu, 4 Jul 2024 13:18:27 +0700
Subject: [PATCH 09/12] update: event log

---
 .../decode-message.component.html             | 119 +++++++++++-------
 .../decode-message.component.scss             |   1 +
 .../decode-message.component.ts               |   9 +-
 .../evm-message/evm-message.component.ts      |  37 +++---
 .../evm-transaction-event-log.component.scss  |   2 +
 .../evm-transaction-event-log.component.ts    |   1 +
 6 files changed, 100 insertions(+), 69 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
index f40250d9b..a63de8438 100644
--- 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
@@ -1,62 +1,89 @@
 <div *ngIf="!isDataField" class="decode-message d-flex justify-content-start align-items-start col-12 d-flex gap-3"
     [class]="!isMobile ? 'flex-nowrap' : 'flex-wrap'">
-    <div class="param-field d-flex gap-3 justify-content-center align-items-start flex-nowrap">
-        <p class="name">
-            {{index}} <span *ngIf="name">: {{name}}</span>
-        </p>
-        <div *ngIf="isAllowSwitchDecode" class="dropdown aura-dropdown btn-item">
-            <button style="height: 26px; min-width: max-content;"
-                class="button button--sm button--md-mob button-pill button-outline button-dropdown w-100" type="button"
-                data-bs-toggle="dropdown" aria-expanded="false">
-                <span>{{type}}</span>
-            </button>
-            <ul class="dropdown-menu aura-dropdown-menu">
-                <li (click)="onHex()" class="dropdown-item cursor-pointer" [class.active]="type === 'Hex'">
-                    <button type="button" class="button p-0">Hex</button>
-                </li>
-                <li (click)="onDecode()" class="dropdown-item cursor-pointer" [class.active]="type === 'Decode'">
-                    <button type="button" class="button p-0">Decode</button>
-                </li>
-            </ul>
+    <!-- <ng-container *ngIf="decodeData?.length === 0"> -->
+        <div class="param-field d-flex gap-3 justify-content-center align-items-start flex-nowrap">
+            <p *ngIf="index !== ''" class="name">
+                {{index}} <span *ngIf="name">: {{ name }}</span>
+            </p>
+            <div *ngIf="isAllowSwitchDecode" class="dropdown aura-dropdown btn-item">
+                <button 
+                    style="height: 26px; min-width: max-content;"
+                    class="button button--sm button--md-mob button-pill button-outline button-dropdown w-100"
+                    type="button"
+                    data-bs-toggle="dropdown"
+                    aria-expanded="false">
+                    <span>{{type}}</span>
+                </button>
+                <ul class="dropdown-menu aura-dropdown-menu">
+                    <li (click)="onHex()" class="dropdown-item cursor-pointer" [class.active]="type === 'Hex'">
+                        <button type="button" class="button p-0">Hex</button>
+                    </li>
+                    <li (click)="onDecode()" class="dropdown-item cursor-pointer" [class.active]="type === 'Decode'">
+                        <button type="button" class="button p-0">Decode</button>
+                    </li>
+                </ul>
+            </div>
         </div>
-    </div>
-    <div *ngIf="!isAllowSwitchDecode" class="data flex-grow-1 font-space-mono">
-        <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 }}">
-            {{data}}
-        </a>
-        <span *ngIf="!isLink || type === 'Hex'">{{data}}</span>
-    </div>
+        <div *ngIf="!isAllowSwitchDecode" class="data flex-grow-1 font-space-mono">
+            <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 }}">
+                {{data}}
+            </a>
+            <span *ngIf="!isLink || type === 'Hex'">{{data}}</span>
+        </div>
+    <!-- </ng-container> -->
+    <!-- <div *ngIf="decodeData.length > 0" class="data flex-grow-1 font-space-mono">
+        <ng-container>
+          <div
+            *ngIf="isAllowSwitchDecode"
+            class="data flex-grow-1 font-space-mono"
+            [class]="isHighlight ? 'highlight' : ''">
+            <ng-container *ngIf="type === 'Decode'">
+              <ng-container *ngFor="let element of decodeData">
+                <span>{{ element.name }} : </span>
+                <a *ngIf="element.isLink" class="text--primary" routerLink="/address/{{ element.decode }}">
+                  {{ element.decode }}
+                </a>
+                <span *ngIf="!element.isLink">{{ element.decode }}</span>
+              </ng-container>
+            </ng-container>
+    
+            <span *ngIf="type === 'Hex'">{{ data }}</span>
+          </div>
+        </ng-container>
+    </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>
+                <p class="font-space-mono">{{ data }}</p>
             </div>
             <div *ngIf="type === 'Decode'">
-                <div *ngFor="let item of data" class="data-item">
-                    <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 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>
-                        <div *ngIf="item?.type !== 'tuple'">
-                            <p class="font-space-mono" >{{item?.decode}}</p>
-                        </div>
-                    </div>
+                    </ng-container>
                 </div>
             </div>
         </div>
diff --git a/src/app/pages/transaction/evm-transaction/decode-message/decode-message.component.scss b/src/app/pages/transaction/evm-transaction/decode-message/decode-message.component.scss
index 369f62fe5..dfd8f222c 100644
--- a/src/app/pages/transaction/evm-transaction/decode-message/decode-message.component.scss
+++ b/src/app/pages/transaction/evm-transaction/decode-message/decode-message.component.scss
@@ -62,6 +62,7 @@
         .data-item {
             display: grid;
             column-gap: 20px;
+            row-gap: 6px;
             grid-template-columns: minmax(100px, max-content) 1fr;
 
             .item-name {
diff --git a/src/app/pages/transaction/evm-transaction/decode-message/decode-message.component.ts b/src/app/pages/transaction/evm-transaction/decode-message/decode-message.component.ts
index e69fc7dad..f3f73d026 100644
--- a/src/app/pages/transaction/evm-transaction/decode-message/decode-message.component.ts
+++ b/src/app/pages/transaction/evm-transaction/decode-message/decode-message.component.ts
@@ -1,13 +1,17 @@
 import { Component, Input, OnInit } from '@angular/core';
 import { EnvironmentService } from 'src/app/core/data-services/environment.service';
-
+interface IDecodeData {
+  name: string;
+  decode: string;
+  isLink: boolean;
+}
 @Component({
   selector: 'app-decode-message',
   templateUrl: './decode-message.component.html',
   styleUrls: ['./decode-message.component.scss'],
 })
 export class DecodeMessageComponent implements OnInit {
-  @Input() index?: number;
+  @Input() index?: string;
   @Input() isLink?: boolean;
   @Input() name?: string;
   @Input() isAllowSwitchDecode?: boolean;
@@ -28,7 +32,6 @@ export class DecodeMessageComponent implements OnInit {
   }
   onDecode(field?: string) {
     this.type = 'Decode';
-    console.log(this.decode);
     if(field !== 'data'){
       this.data = this.decode;
       return;
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
index f6023b96d..c57fe1446 100644
--- 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
@@ -72,7 +72,7 @@ export class EvmMessageComponent {
     let listContract = this.transaction.eventLog.map((i) => i.address?.toLowerCase());
     listContract.push(this.transaction?.to?.toLowerCase());
     listContract = _.uniq(listContract);
-    this.contractService.getListProxyAbi(listContract).subscribe({
+    this.contractService.getListProxyAbi(listContract?.filter(Boolean)).subscribe({
       next: (res) => {
         this.contractAddressAbiList = res?.evm_smart_contract?.map((item) => {
           return {
@@ -96,7 +96,6 @@ export class EvmMessageComponent {
     this.transactionService.getListAbiContract(implementationContractList).subscribe((res) => {
       
       if (res?.evm_contract_verification?.length > 0) {
-        this.isContractVerified = true;
         this.isDecoded = true;
         this.abiContractData = res?.evm_contract_verification.map((i) => ({
           contractAddress: this.contractAddressAbiList.find((f) => f.implementation_contract === i.contract_address)
@@ -108,17 +107,15 @@ export class EvmMessageComponent {
 
         const abiInfo = this.abiContractData.find((f) => f.contractAddress === this.transaction?.to);
         
-        if (abiInfo.abi) {
+        if (abiInfo) {
+          this.isContractVerified = true;
           const value = parseEther('1.0');
           const rawData = abiInfo.interfaceCoder.parseTransaction({ data: '0x' + this.transaction?.inputData, value });
-          debugger
+          this.inputDataRaw['name'] =
+          abiInfo.interfaceCoder.getFunction(rawData?.fragment?.name)?.format() || rawData.name;
+          this.inputDataDecoded['name'] = rawData.name;
+          
           if (rawData?.fragment?.inputs?.length > 0) {
-            this.getListTopicDecode();
-
-            this.inputDataRaw['name'] =
-              abiInfo.interfaceCoder.getFunction(rawData?.fragment?.name)?.format() || rawData.name;
-              
-            this.inputDataDecoded['name'] = rawData.name;
             this.inputDataDecoded['params'] = rawData?.fragment?.inputs.map((item, index) => {
               return {
                 name: item.name,
@@ -128,6 +125,7 @@ export class EvmMessageComponent {
             });
           }
         }
+        this.getListTopicDecode();
       }
     });
   }
@@ -140,14 +138,12 @@ export class EvmMessageComponent {
         const abiInfo = this.abiContractData.find((f) => f.contractAddress === element.address);
         let decoded = [];
         if (!abiInfo?.abi) {
-          let arrTopicTemp = element?.evm_signature_mapping_topic || [];
-          decoded = [
-            {
-              index: 0,
-              decode: arrTopicTemp[0],
-              value: element.topics[0],
-            },
-          ];
+          decoded = element.topics.map((i, tidx) => ({
+            index: tidx,
+            decode: '',
+            value: i,
+            isAllowSwitchDecode: false,
+          }));
         } else {
           element.data = element?.data?.replace('\\x', '');
           const paramsDecode = abiInfo.interfaceCoder.parseLog({
@@ -174,9 +170,10 @@ export class EvmMessageComponent {
             
             inputs?.forEach((item, idx) => {              
               const param = {
+                indexed: item?.indexed,
                 name: item.name,
                 type: item.type,
-                isLink: item.type === 'address' ? true : false,
+                isLink: item.type === 'address',
                 decode: paramsDecode.args[idx]?.toString(),
               }
               if(item?.indexed) {
@@ -194,8 +191,8 @@ export class EvmMessageComponent {
             element.dataDecoded = data;
             decoded = [...decoded, ...params];
           }
-          this.topicsDecoded[index] = decoded;
         }
+        this.topicsDecoded[index] = decoded;
       } catch (e) {}
       this.arrTopicDecode[index] = arrTopicTemp;
     });
diff --git a/src/app/pages/transaction/evm-transaction/evm-transaction-event-log/evm-transaction-event-log.component.scss b/src/app/pages/transaction/evm-transaction/evm-transaction-event-log/evm-transaction-event-log.component.scss
index d1479a2d8..75042e6d7 100644
--- a/src/app/pages/transaction/evm-transaction/evm-transaction-event-log/evm-transaction-event-log.component.scss
+++ b/src/app/pages/transaction/evm-transaction/evm-transaction-event-log/evm-transaction-event-log.component.scss
@@ -17,6 +17,7 @@
 
   .event-number {
     width: 44px;
+    min-width: max-content;
     max-width: 20%;
     height: 34px;
     border-radius: 8px;
@@ -28,6 +29,7 @@
     align-items: center;
     justify-content: center;
     gap: 8px;
+    white-space: nowrap;
 
     &.secondary {
       color: var(--while);
diff --git a/src/app/pages/transaction/evm-transaction/evm-transaction-event-log/evm-transaction-event-log.component.ts b/src/app/pages/transaction/evm-transaction/evm-transaction-event-log/evm-transaction-event-log.component.ts
index 9f017394c..d775f44a4 100644
--- a/src/app/pages/transaction/evm-transaction/evm-transaction-event-log/evm-transaction-event-log.component.ts
+++ b/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;
+    // decodeData?: any[]
   };
   @Input() index;
 }

From d33b56f2c158b25a4c3ee11a5517b36b87843d98 Mon Sep 17 00:00:00 2001
From: Tran Trung Tien <trantrungtien9x@gmail.com>
Date: Thu, 4 Jul 2024 14:13:19 +0700
Subject: [PATCH 10/12] --amend

---
 .../decode-message.component.html             | 87 +++++++------------
 .../evm-message/evm-message.component.html    |  4 +-
 .../evm-message/evm-message.component.scss    |  1 -
 3 files changed, 34 insertions(+), 58 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
index a63de8438..54f52d51d 100644
--- 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
@@ -1,62 +1,39 @@
 <div *ngIf="!isDataField" class="decode-message d-flex justify-content-start align-items-start col-12 d-flex gap-3"
     [class]="!isMobile ? 'flex-nowrap' : 'flex-wrap'">
-    <!-- <ng-container *ngIf="decodeData?.length === 0"> -->
-        <div class="param-field d-flex gap-3 justify-content-center align-items-start flex-nowrap">
-            <p *ngIf="index !== ''" class="name">
-                {{index}} <span *ngIf="name">: {{ name }}</span>
-            </p>
-            <div *ngIf="isAllowSwitchDecode" class="dropdown aura-dropdown btn-item">
-                <button 
-                    style="height: 26px; min-width: max-content;"
-                    class="button button--sm button--md-mob button-pill button-outline button-dropdown w-100"
-                    type="button"
-                    data-bs-toggle="dropdown"
-                    aria-expanded="false">
-                    <span>{{type}}</span>
-                </button>
-                <ul class="dropdown-menu aura-dropdown-menu">
-                    <li (click)="onHex()" class="dropdown-item cursor-pointer" [class.active]="type === 'Hex'">
-                        <button type="button" class="button p-0">Hex</button>
-                    </li>
-                    <li (click)="onDecode()" class="dropdown-item cursor-pointer" [class.active]="type === 'Decode'">
-                        <button type="button" class="button p-0">Decode</button>
-                    </li>
-                </ul>
-            </div>
-        </div>
-        <div *ngIf="!isAllowSwitchDecode" class="data flex-grow-1 font-space-mono">
-            <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 }}">
-                {{data}}
-            </a>
-            <span *ngIf="!isLink || type === 'Hex'">{{data}}</span>
+    <div class="param-field d-flex gap-3 justify-content-center align-items-start flex-nowrap">
+        <p *ngIf="index !== ''" class="name">
+            {{index}} <span *ngIf="name">: {{ name }}</span>
+        </p>
+        <div *ngIf="isAllowSwitchDecode" class="dropdown aura-dropdown btn-item">
+            <button 
+                style="height: 26px; min-width: max-content;"
+                class="button button--sm button--md-mob button-pill button-outline button-dropdown w-100"
+                type="button"
+                data-bs-toggle="dropdown"
+                aria-expanded="false">
+                <span>{{type}}</span>
+            </button>
+            <ul class="dropdown-menu aura-dropdown-menu">
+                <li (click)="onHex()" class="dropdown-item cursor-pointer" [class.active]="type === 'Hex'">
+                    <button type="button" class="button p-0">Hex</button>
+                </li>
+                <li (click)="onDecode()" class="dropdown-item cursor-pointer" [class.active]="type === 'Decode'">
+                    <button type="button" class="button p-0">Decode</button>
+                </li>
+            </ul>
         </div>
-    <!-- </ng-container> -->
-    <!-- <div *ngIf="decodeData.length > 0" class="data flex-grow-1 font-space-mono">
-        <ng-container>
-          <div
-            *ngIf="isAllowSwitchDecode"
-            class="data flex-grow-1 font-space-mono"
-            [class]="isHighlight ? 'highlight' : ''">
-            <ng-container *ngIf="type === 'Decode'">
-              <ng-container *ngFor="let element of decodeData">
-                <span>{{ element.name }} : </span>
-                <a *ngIf="element.isLink" class="text--primary" routerLink="/address/{{ element.decode }}">
-                  {{ element.decode }}
-                </a>
-                <span *ngIf="!element.isLink">{{ element.decode }}</span>
-              </ng-container>
-            </ng-container>
-    
-            <span *ngIf="type === 'Hex'">{{ data }}</span>
-          </div>
-        </ng-container>
-    </div> -->
+    </div>
+    <div *ngIf="!isAllowSwitchDecode" class="data flex-grow-1 font-space-mono">
+        <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 }}">
+            {{data}}
+        </a>
+        <span *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">
diff --git a/src/app/pages/transaction/evm-transaction/evm-message/evm-message.component.html b/src/app/pages/transaction/evm-transaction/evm-message/evm-message.component.html
index cb956c6ca..bb7dfa688 100644
--- a/src/app/pages/transaction/evm-transaction/evm-message/evm-message.component.html
+++ b/src/app/pages/transaction/evm-transaction/evm-message/evm-message.component.html
@@ -38,7 +38,7 @@
         </button>
       </div>
 
-      <div class="box-data log-content mb-3">
+      <div class="box-data log-content mb-3 overflow-auto">
         <div class="log-data body-02 break-word" *ngIf="typeInput === inputDataType.RAW">
           <div *ngIf="inputDataRaw['methodId']" class="font-space-mono">MethodId: {{ inputDataRaw['methodId'] }}</div>
           <p *ngIf="inputDataRaw['name']" class="font-space-mono">Method name: {{ inputDataRaw['name'] }}</p>
@@ -140,7 +140,7 @@
           <app-table-no-data></app-table-no-data>
         </ng-template>
       </div>
-      <div class="box-data box mt-2" *ngIf="!isLog">
+      <div class="box-data box mt-2 overflow-auto" *ngIf="!isLog">
         <app-evm-internal-transactions
           [dataTable]="transaction.evm_internal_transactions"></app-evm-internal-transactions>
       </div>
diff --git a/src/app/pages/transaction/evm-transaction/evm-message/evm-message.component.scss b/src/app/pages/transaction/evm-transaction/evm-message/evm-message.component.scss
index 010461f97..8c6fa4239 100644
--- a/src/app/pages/transaction/evm-transaction/evm-message/evm-message.component.scss
+++ b/src/app/pages/transaction/evm-transaction/evm-message/evm-message.component.scss
@@ -16,7 +16,6 @@
     border-radius: 8px;
     padding: 12px;
     max-height: 558px;
-    overflow-y: auto;
     @media (min-width: 992px) {
       max-height: 330px;
       padding: 12px 16px;

From 226d3bde03dddf8e58bd3a1581a74533c6447983 Mon Sep 17 00:00:00 2001
From: Tran Trung Tien <trantrungtien9x@gmail.com>
Date: Fri, 5 Jul 2024 10:21:17 +0700
Subject: [PATCH 11/12] fix: event log

---
 .../decode-message.component.html             |   2 +-
 .../decode-message.component.ts               |   5 +-
 .../evm-message/evm-message.component.ts      | 101 ++++++++++--------
 .../evm-transaction-event-log.component.html  |   2 +-
 .../evm-transaction-event-log.component.ts    |   1 +
 5 files changed, 60 insertions(+), 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
index 54f52d51d..5da9511ef 100644
--- 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
@@ -64,7 +64,7 @@
                 </div>
             </div>
         </div>
-        <div class="button-container">
+        <div *ngIf="isAllowSwitchDecode" class="button-container">
             <button
                 class="button-data body-04 button-dec"
                 [class.active]="type === 'Decode'"
diff --git a/src/app/pages/transaction/evm-transaction/decode-message/decode-message.component.ts b/src/app/pages/transaction/evm-transaction/decode-message/decode-message.component.ts
index f76249f0d..3ff9916ee 100644
--- a/src/app/pages/transaction/evm-transaction/decode-message/decode-message.component.ts
+++ b/src/app/pages/transaction/evm-transaction/decode-message/decode-message.component.ts
@@ -32,7 +32,8 @@ export class DecodeMessageComponent implements OnInit {
       this.data = this.decode;
       return;
     }
-
+    console.log(this.decode);
+    
     this.data = Array.isArray(this.decode) && this.decode?.map(item => {
       if(item?.type !== 'tuple') {
         return {
@@ -60,8 +61,6 @@ export class DecodeMessageComponent implements OnInit {
         }
       }
     })
-    console.log(this.data);
-    
   }
 
   onHex() {
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
index 6a0ed0463..5dc548bb8 100644
--- 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,6 +136,16 @@ export class EvmMessageComponent {
     });
   }
 
+  mappingTopics(element){
+    element['isAllowSwitchDecodeDataField'] = false;
+    return element?.topics?.map((i, tidx) => ({
+      index: tidx,
+      decode: '',
+      value: i,
+      isAllowSwitchDecode: false,
+    }));
+  }
+
   getListTopicDecode() {
     this.transaction.eventLog.forEach((element, index) => {
       
@@ -143,60 +153,59 @@ export class EvmMessageComponent {
       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((i) => `${i.type} ${i.indexed ? 'indexed' : ''} ${i.name}`);
+            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) => {              
+                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) {}
diff --git a/src/app/pages/transaction/evm-transaction/evm-transaction-event-log/evm-transaction-event-log.component.html b/src/app/pages/transaction/evm-transaction/evm-transaction-event-log/evm-transaction-event-log.component.html
index 20fd055fc..d7ec71deb 100644
--- a/src/app/pages/transaction/evm-transaction/evm-transaction-event-log/evm-transaction-event-log.component.html
+++ b/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>
diff --git a/src/app/pages/transaction/evm-transaction/evm-transaction-event-log/evm-transaction-event-log.component.ts b/src/app/pages/transaction/evm-transaction/evm-transaction-event-log/evm-transaction-event-log.component.ts
index 9f017394c..b5f08a53e 100644
--- a/src/app/pages/transaction/evm-transaction/evm-transaction-event-log/evm-transaction-event-log.component.ts
+++ b/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;
 }

From 372e36561af81dc2643b351b12665d9e542476bf Mon Sep 17 00:00:00 2001
From: Tran Trung Tien <trantrungtien9x@gmail.com>
Date: Fri, 5 Jul 2024 16:19:03 +0700
Subject: [PATCH 12/12] fix: event log

---
 .../decode-message.component.html             | 20 +++++++++----------
 .../evm-message/evm-message.component.ts      | 20 +++++++++++++++++--
 2 files changed, 28 insertions(+), 12 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
index 5da9511ef..f53436012 100644
--- 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,15 @@
             </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">
@@ -43,21 +43,21 @@
             <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 }}">
+                        <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">
+                        <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 *ngIf="dataDecoded?.isLink" class="text--primary" routerLink="/address/{{ dataDecoded?.name }}">
+                                    <a ngClass="font-space-mono" *ngIf="dataDecoded?.isLink" class="text--primary" routerLink="/address/{{ dataDecoded?.name }}">
                                         {{dataDecoded?.name}}
                                     </a>
-                                    <p *ngIf="!dataDecoded?.isLink" class="font-space-mono" >{{dataDecoded?.name}}</p>
+                                    <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>
+                                <p class="font-space-mono">{{item?.decode}}</p>
                             </div>
                         </div>
                     </ng-container>
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
index 5dc548bb8..7dbad3d4e 100644
--- 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
@@ -146,6 +146,14 @@ export class EvmMessageComponent {
     }));
   }
 
+  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) => {
       
@@ -166,7 +174,7 @@ export class EvmMessageComponent {
 
           if(!paramsDecode) decoded = this.mappingTopics(element)
           else {
-            const params = paramsDecode?.fragment?.inputs.map((i) => `${i.type} ${i.indexed ? 'indexed' : ''} ${i.name}`);
+            const params = paramsDecode?.fragment?.inputs.map(this.mappingFunctionName);
             const decodeTopic0 = `> ${paramsDecode?.fragment?.name}(${params.join(', ')})`;
   
             decoded = [
@@ -183,7 +191,13 @@ export class EvmMessageComponent {
               const data = [];
               let currentParamIndex = 0;
               
-              inputs?.forEach((item, idx) => {              
+              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,
@@ -207,6 +221,8 @@ export class EvmMessageComponent {
               decoded = [...decoded, ...params];
             }}
         }
+        console.log(decoded);
+        
         this.topicsDecoded[index] = decoded;
       } catch (e) {}
       this.arrTopicDecode[index] = arrTopicTemp;