From b0465076349dea8dcd7b0ea39b2a5a99a5a1be8b Mon Sep 17 00:00:00 2001
From: TranTrungTien <71311738+TranTrungTien@users.noreply.github.com>
Date: Mon, 15 Jul 2024 16:58:11 +0700
Subject: [PATCH] [update][655] decode tuple in data (#3633)

* fix event log

* update responsive for mobile

* update: decode tuple in data
---
 .../decode-message.component.html             | 49 ++++++++-----------
 .../decode-message.component.scss             |  2 +
 .../decode-message.component.ts               | 40 ++-------------
 .../evm-message/evm-message.component.ts      | 14 +++++-
 .../evm-transaction-event-log.component.html  |  4 +-
 5 files changed, 44 insertions(+), 65 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 501d3ffab..7186db043 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,20 +23,21 @@
             </ul>
         </div>
     </div>
-    <div *ngIf="!isAllowSwitchDecode" class="data flex-grow-1">
-        <p class="mb-1 font-space-mono">{{value}}</p>
+    <div *ngIf="!isAllowSwitchDecode" class="data flex-grow-1" style="margin: auto 0px;">
+        <p class="font-space-mono" [class]="decode ? 'mb-1' : 'mb-0'">{{value}}</p>
         <p class="mb-0 font-space-mono" [innerHTML]="decode | highlight_function"></p>
     </div>
-    <div *ngIf="isAllowSwitchDecode" class="data flex-grow-1" [class]="isEvmContract ? 'd-flex align-items-center' : ''">
+    <div *ngIf="isAllowSwitchDecode" style="margin: auto 0px;" class="data flex-grow-1" [class]="isEvmContract ? 'd-flex align-items-center' : ''">
         <img
           [src]="'assets/images/icons/token-contract.svg' | imageS3"
           width="16px"
           height="16px"
+          alt="contract"
+          style="margin-right: 2px;"
           *ngIf="isEvmContract" />
         <a
          *ngIf="isLink && type === 'Decode'"
           class="text--primary font-space-mono d-inline-block"
-          [class]="isEvmContract ? 'p-1' : ''"
           routerLink="/{{ isEvmContract ? 'evm-contracts' : 'address' }}/{{ data }}">
             {{data}}
         </a>
@@ -52,31 +53,23 @@
             <div *ngIf="type === 'Decode'">
                 <div class="data-item" [style]="isMobile ? 'grid-template-columns: minmax(40px, max-content) 1fr' : ''">
                     <ng-container *ngFor="let item of data">
-                        <p class="item-name">{{item?.name}}</p>
-                        <a *ngIf="item?.isLink" class="text--primary font-space-mono" routerLink="/address/{{ item?.decode }}">
-                            {{item?.decode}}
+                        <p class="item-name" style="margin: auto 0px;">{{item?.name}}</p>
+                        <a
+                          *ngIf="item?.isLink"
+                          class="text--primary font-space-mono"
+                          [class]="item?.isEvmContract ? 'd-flex align-items-center' : ''"
+                          routerLink="/{{ item?.isEvmContract ? 'evm-contracts' : 'address' }}/{{ item?.decode }}">
+                            <img
+                              [src]="'assets/images/icons/token-contract.svg' | imageS3"
+                              width="16px"
+                              height="16px"
+                              alt="contract"
+                              style="margin-right: 2px;"
+                              *ngIf="item?.isEvmContract" />
+                            <span>{{item?.decode}}</span>
                         </a>
-                        <div *ngIf="!item?.isLink" class="font-space-mono">
-                            <div *ngIf="item?.type === 'tuple'" class="d-flex flex-wrap gap-2 align-items-center">
-                                <div *ngFor="let dataDecoded of item?.decode" [class]="dataDecoded?.isEvmContract ? 'd-flex align-items-center' : ''">
-                                    <img
-                                      [src]="'assets/images/icons/token-contract.svg' | imageS3"
-                                      width="16px"
-                                      height="16px"
-                                      *ngIf="dataDecoded?.isEvmContract" />
-                                    <a
-                                      *ngIf="dataDecoded?.isLink"
-                                      class="text--primary font-space-mono d-inline-block"
-                                      [class]="dataDecoded?.isEvmContract ? 'p-1' : ''"
-                                      routerLink="/{{ dataDecoded?.isEvmContract ? 'evm-contracts' : 'address' }}/{{ dataDecoded?.name }}">
-                                        {{dataDecoded?.name}}
-                                    </a>
-                                    <p class="font-space-mono" *ngIf="!dataDecoded?.isLink" >{{dataDecoded?.name}}</p>
-                                </div>
-                            </div>
-                            <div *ngIf="item?.type !== 'tuple'">
-                                <p class="font-space-mono">{{item?.decode}}</p>
-                            </div>
+                        <div *ngIf="!item?.isLink">
+                            <p class="font-space-mono">{{item?.decode}}</p>
                         </div>
                     </ng-container>
                 </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 dfd8f222c..3022537ed 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
@@ -18,6 +18,8 @@
         font-size: 12px;
         white-space: nowrap;
         margin: 0;
+        min-width: 30px;
+        max-width: max-content;
     }
     button.button {
         background-color: #494C58;
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 6b991aa43..bb09b0ae3 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
@@ -46,12 +46,6 @@ export class DecodeMessageComponent implements OnInit {
     const addresses = [];
     for (const item of data) {
       if(item?.isLink) addresses.push(item?.decode);
-      else if(item?.type === 'tuple') {
-        item?.decode?.split(',')?.forEach((tupleItem) => {
-          if (tupleItem?.startsWith('0x')) {
-            addresses.push(tupleItem);
-          }})
-      } 
     }
     return _.uniq(addresses.filter(Boolean));
   }
@@ -72,36 +66,12 @@ export class DecodeMessageComponent implements OnInit {
         this.contractService.findEvmContractList(addresses).subscribe({
           next: (evmList) => {
             this.data = Array.isArray(this.decode) && this.decode?.map((item) => {
-              if (item?.type !== 'tuple') {
-                const isEvmContract = !!evmList?.evm_smart_contract?.find(contract => contract?.address === item?.decode?.toString()?.toLowerCase());
+              const isEvmContract = !!evmList?.evm_smart_contract?.find(contract => contract?.address === item?.decode?.toString()?.toLowerCase());
 
-                return {
-                  ...item,
-                  isEvmContract,
-                  isArray: false,
-                };
-              }
-              if (item?.type === 'tuple') {
-                const links = item?.decode?.split(',')?.map((tupleItem: string) => {
-                  if (tupleItem?.startsWith('0x')) {
-                  const isEvmContract = !!evmList?.evm_smart_contract?.find(contract => contract?.address === tupleItem?.toString()?.toLowerCase());
-                    return {
-                      isEvmContract,
-                      name: tupleItem,
-                      isLink: true,
-                    };
-                  }
-                  return {
-                    name: tupleItem,
-                    isLink: false,
-                  };
-                });
-                return {
-                  ...item,
-                  isArray: true,
-                  decode: links,
-                };
-              }
+              return {
+                ...item,
+                isEvmContract,
+              };
             });
             this.detectRef.detectChanges();
           },
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 69b367837..523dd2c8d 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
@@ -261,8 +261,20 @@ export class EvmMessageComponent {
                   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);
-                }
 
+                  item?.components?.forEach((tupleParam, tidx) => {
+                    const tupleDecode = {
+                      indexed: tupleParam?.indexed,
+                      name: tupleParam?.name,
+                      type: tupleParam?.type,
+                      isLink: tupleParam?.type === 'address',
+                      decode: paramsDecode.args[idx][tidx]?.toString(),
+                    }
+                    data.push(tupleDecode);
+                  });
+                  return;        
+                } 
+                
                 const param = {
                   indexed: item?.indexed,
                   name: item.name,
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 7d438f685..3f3a5f408 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
@@ -53,7 +53,9 @@
     </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</div>
+      <div class="col-12 col-lg-1 mb-2 mb-lg-0 text--gray-4 body">
+        <span style="line-height: 28px;">Data</span>
+      </div>
       <div class="col-12 col-lg-11">
         <div class="highlight font-space-mono" [featureFlag]="'EnhanceEventLog'" [flagEnabled]="false">
           {{ eventLog.data }}