[Feat][655] Enhance event log (#3570)

* [fix][598] fix set token info

* feat: Decode event log

* [Feat][655] enhance event log

* Apply decode ui

* update: data decoded

* remove config.json change

* [Feat][655]  enhance event log - fix index

* [Feat][655]  enhance event log - update

---------

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

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) {

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>

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);

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') {

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>

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;

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

@@ -0,0 +1,32 @@
+<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' : ''">
+ <a *ngIf="isLink && type === 'Decode'" class="text--primary" routerLink="/address/{{ data }}">
+ {{data}}
+ </a>
+ <span *ngIf="!isLink || type === 'Hex'">{{data}}</span>
+ </div>
+</div>

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);
+ }
+}

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

@@ -0,0 +1,37 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { EnvironmentService } from 'src/app/core/data-services/environment.service';
+
+@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() 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.isMobile = this.environmentService.isMobile;
+ this.data = this.value;
+ }
+ onDecode() {
+ this.type = 'Decode';
+ this.data = this.decode;
+ }
+
+ onHex() {
+ this.type = 'Hex';
+ this.data = this.value;
+ }
+}

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

@@ -1,29 +1,18 @@
 <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"
  [linkRouter]="['/evm-contracts', transaction?.contractAddress?.toLowerCase()]"
  [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,10 @@
  <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"
- [arrTopicDecode]="arrTopicDecode"
- [index]="idx">
+ *ngFor="let topic of topicsDecoded; let i = index"
+ [eventLog]="eventLog[i]"
+ [topicsDecoded]="topic"
+ [index]="i">
  </app-evm-transaction-event-log>
  </div>
  </div>

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;