From 47cb54a06cd1cef19b5c756b88899cd5dba7a6df Mon Sep 17 00:00:00 2001
From: Son Huynh <hvson96@gmail.com>
Date: Tue, 11 Jun 2024 22:02:48 +0700
Subject: [PATCH] [featfix][547] fix Display and Search uppercase EVM address

---
 .../token-table/token-table.component.html    |  2 +-
 .../token-table/token-table.component.ts      |  8 ++-
 .../evm-contracts-detail.component.html       |  2 +-
 .../evm-token-content.component.html          | 11 +++--
 .../evm-token-content.component.ts            |  9 ++--
 src/app/pages/evm-token/evm-token.module.ts   |  3 +-
 .../non-fungible-tokens.component.html        |  2 +-
 .../non-fungible-tokens.component.ts          |  3 +-
 .../evm-message/evm-message.component.html    | 49 +++++++++++++------
 9 files changed, 61 insertions(+), 28 deletions(-)

diff --git a/src/app/pages/account/account-detail/token-table/token-table.component.html b/src/app/pages/account/account-detail/token-table/token-table.component.html
index 904025d0e..9f0cc4b97 100644
--- a/src/app/pages/account/account-detail/token-table/token-table.component.html
+++ b/src/app/pages/account/account-detail/token-table/token-table.component.html
@@ -133,7 +133,7 @@ <h3 class="mb-3 fw-700 text--gray-light-2 mb-lg-0">Fungible Tokens ({{ pageData?
                 <div class="d-flex flex-column">
                   <span class="text--gray-4 caption fw-normal">Contract</span>
                   <app-name-tag
-                    [value]="element.contract_address"
+                    [value]="element.contract_address | beautyAddress"
                     *ngIf="element.contract_address !== '-'"
                     [iconContract]="true"
                     [linkRouter]="[
diff --git a/src/app/pages/account/account-detail/token-table/token-table.component.ts b/src/app/pages/account/account-detail/token-table/token-table.component.ts
index 332661109..f61eb5a8b 100644
--- a/src/app/pages/account/account-detail/token-table/token-table.component.ts
+++ b/src/app/pages/account/account-detail/token-table/token-table.component.ts
@@ -121,11 +121,15 @@ export class TokenTableComponent implements OnChanges {
 
       if (this.textSearch && searchList) {
         searchList = searchList?.filter(
-          (item) => item.name?.toLowerCase().includes(txtSearch.toLowerCase()) || item.contract_address == txtSearch,
+          (item) =>
+            item.name?.toLowerCase().includes(txtSearch.toLowerCase()) ||
+            item.contract_address == txtSearch.toLowerCase(),
         );
       } else if (this.tokenFilter === '') {
         searchList = this.dataTable?.filter(
-          (item) => item.name?.toLowerCase().includes(txtSearch.toLowerCase()) || item.contract_address == txtSearch,
+          (item) =>
+            item.name?.toLowerCase().includes(txtSearch.toLowerCase()) ||
+            item.contract_address == txtSearch.toLowerCase(),
         );
       }
 
diff --git a/src/app/pages/evm-contracts/evm-contracts-detail/evm-contracts-detail.component.html b/src/app/pages/evm-contracts/evm-contracts-detail/evm-contracts-detail.component.html
index 52864468e..94b6b9c5e 100644
--- a/src/app/pages/evm-contracts/evm-contracts-detail/evm-contracts-detail.component.html
+++ b/src/app/pages/evm-contracts/evm-contracts-detail/evm-contracts-detail.component.html
@@ -9,7 +9,7 @@ <h1 class="mb-0 text--white" id="ttiopa123">EVM Contract</h1>
         }}</span>
       </div>
       <div class="d-flex align-items-center">
-        <div class="btn-mobile ml-4 ml-lg-2" [copyBtn]="contractAddress"></div>
+        <div class="btn-mobile ml-4 ml-lg-2" [copyBtn]="contractAddress | beautyAddress"></div>
         <div
           class="btn-mobile ml-4 ml-lg-2"
           [appTooltip]="isWatchList ? 'Remove this address from your watch list' : 'Add this address to my watch list'">
diff --git a/src/app/pages/evm-token/evm-token-content/evm-token-content.component.html b/src/app/pages/evm-token/evm-token-content/evm-token-content.component.html
index 3f935c5c3..69278589c 100644
--- a/src/app/pages/evm-token/evm-token-content/evm-token-content.component.html
+++ b/src/app/pages/evm-token/evm-token-content/evm-token-content.component.html
@@ -5,8 +5,11 @@
         <img [src]="'assets/images/icons/token-tx.png' | imageS3" class="mr-2" alt="" width="18px" height="18px" />
         FILTER BY TOKEN TXN HASH
       </p>
-      <a class="text--primary body-02 break-word" [copyBtn]="textSearch" [routerLink]="['/tx', textSearch]">
-        {{ textSearch }}
+      <a
+        class="text--primary body-02 break-word"
+        [copyBtn]="textSearch | beautyAddress"
+        [routerLink]="['/tx', textSearch]">
+        {{ textSearch | beautyAddress }}
       </a>
     </div>
     <div *ngIf="!isSearchTx && isSearchAddress" class="card main-tab py-3 py-lg-4 px-4">
@@ -24,8 +27,8 @@
           <div class="mt-2">
             <app-name-tag
               [iconContract]="textSearch | isContract"
-              [value]="textSearch"
-              [linkRouter]="[(textSearch | isContract) ? '/contracts' : '/address', textSearch]"
+              [value]="textSearch | beautyAddress"
+              [linkRouter]="[(textSearch | isContract) ? '/contracts' : '/address', textSearch | beautyAddress]"
               [fullText]="true"
               [widthAuto]="true"
               [maxCharacter]="30"
diff --git a/src/app/pages/evm-token/evm-token-content/evm-token-content.component.ts b/src/app/pages/evm-token/evm-token-content/evm-token-content.component.ts
index e10be35d9..e98a80a66 100644
--- a/src/app/pages/evm-token/evm-token-content/evm-token-content.component.ts
+++ b/src/app/pages/evm-token/evm-token-content/evm-token-content.component.ts
@@ -9,6 +9,7 @@ import { MAX_LENGTH_SEARCH_TOKEN, TOKEN_TAB } from 'src/app/core/constants/token
 import { EModeToken, TokenTab } from 'src/app/core/constants/token.enum';
 import { EWalletType } from 'src/app/core/constants/wallet.constant';
 import { EnvironmentService } from 'src/app/core/data-services/environment.service';
+import { EvmAddressPipe } from 'src/app/core/pipes/evm-address.pipe';
 import { NameTagService } from 'src/app/core/services/name-tag.service';
 import { TokenService } from 'src/app/core/services/token.service';
 import { transferAddress } from 'src/app/core/utils/common/address-converter';
@@ -63,7 +64,8 @@ export class EvmTokenContentComponent implements OnInit {
     private tokenService: TokenService,
     private nameTagService: NameTagService,
     private router: Router,
-  ) { }
+    private beautyAddress: EvmAddressPipe,
+  ) {}
 
   ngOnInit(): void {
     this.linkAddress = this.route.snapshot.paramMap.get('contractAddress');
@@ -130,11 +132,12 @@ export class EvmTokenContentComponent implements OnInit {
         this.chainInfo.bech32Config.bech32PrefixAccAddr,
         addressNameTag || this.searchTemp,
       );
-      this.searchTemp = accountEvmAddress || addressNameTag || this.textSearch;
+      const evmAddress = this.searchTemp || this.beautyAddress.transform(accountEvmAddress);
+      this.searchTemp = evmAddress || addressNameTag || this.textSearch;
 
       if (!queryParams && this.searchTemp?.length > 0) {
         this.redirectPage(`/token/${this.linkAddress}`, {
-          a: this.searchTemp,
+          a: this.beautyAddress.transform(this.searchTemp),
         });
       }
 
diff --git a/src/app/pages/evm-token/evm-token.module.ts b/src/app/pages/evm-token/evm-token.module.ts
index 5db8eaee4..19a1b7f90 100644
--- a/src/app/pages/evm-token/evm-token.module.ts
+++ b/src/app/pages/evm-token/evm-token.module.ts
@@ -33,6 +33,7 @@ import { EvmTokenDetailComponent } from './evm-token-detail/evm-token-detail.com
 import { EvmTokenOverviewComponent } from './evm-token-overview/evm-token-overview.component';
 import { EvmTokenRoutingModule } from './evm-token-routing.module';
 import { EvmTokenSummaryComponent } from './evm-token-summary/evm-token-summary.component';
+import { EvmAddressPipe } from 'src/app/core/pipes/evm-address.pipe';
 
 @NgModule({
   declarations: [
@@ -74,6 +75,6 @@ import { EvmTokenSummaryComponent } from './evm-token-summary/evm-token-summary.
     ClipboardModule,
     EvmContractsModule,
   ],
-  providers: [provideEnvironmentNgxMask(MASK_CONFIG)],
+  providers: [provideEnvironmentNgxMask(MASK_CONFIG), EvmAddressPipe],
 })
 export class EvmTokenModule {}
diff --git a/src/app/pages/tokens/non-fungible-tokens/non-fungible-tokens.component.html b/src/app/pages/tokens/non-fungible-tokens/non-fungible-tokens.component.html
index 2094eb911..f9ed9745b 100644
--- a/src/app/pages/tokens/non-fungible-tokens/non-fungible-tokens.component.html
+++ b/src/app/pages/tokens/non-fungible-tokens/non-fungible-tokens.component.html
@@ -116,7 +116,7 @@ <h1 class="mb-0 text--white">Non-Fungible Tokens (NFT)</h1>
                 <app-name-tag
                   [value]="
                     element.cw721_contract?.smart_contract?.address ||
-                    element.erc721_contract?.evm_smart_contract?.address
+                      element.erc721_contract?.evm_smart_contract?.address | beautyAddress
                   "
                   [iconContract]="
                     element.cw721_contract?.smart_contract?.address ||
diff --git a/src/app/pages/tokens/non-fungible-tokens/non-fungible-tokens.component.ts b/src/app/pages/tokens/non-fungible-tokens/non-fungible-tokens.component.ts
index 1ddfcc7a6..b48e85a42 100644
--- a/src/app/pages/tokens/non-fungible-tokens/non-fungible-tokens.component.ts
+++ b/src/app/pages/tokens/non-fungible-tokens/non-fungible-tokens.component.ts
@@ -13,6 +13,7 @@ import { NameTagService } from 'src/app/core/services/name-tag.service';
 import { TokenService } from 'src/app/core/services/token.service';
 import { PaginatorComponent } from 'src/app/shared/components/paginator/paginator.component';
 import { TableTemplate } from '../../../core/models/common.model';
+import { isEvmAddress } from 'src/app/core/utils/common/validation';
 
 @Component({
   selector: 'app-non-fungible-tokens',
@@ -78,7 +79,7 @@ export class NonFungibleTokensComponent implements OnInit {
       sort_order: this.sortOrder,
     };
 
-    let keySearch = this.textSearch;
+    let keySearch = isEvmAddress(this.textSearch) ? this.textSearch.toLowerCase() : this.textSearch;
 
     if (this.filterBy === 'ERC721') {
       const listAddress = this.nameTagService.findAddressListByNameTag(keySearch, this.filterBy === 'ERC721');
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 b471efd67..972b668e9 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
@@ -6,11 +6,14 @@
     <div class="col-auto 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"
+  <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">
-      <app-name-tag [value]="transaction?.contractAddress?.toLowerCase()" [fullText]="true"
+      <app-name-tag
+        [value]="transaction?.contractAddress | beautyAddress"
+        [fullText]="true"
         [linkRouter]="['/evm-contracts', transaction?.contractAddress?.toLowerCase()]"
         [iconContract]="true"></app-name-tag>
     </div>
@@ -22,19 +25,25 @@
     </div>
     <div class="col-12 col-lg-10">
       <div class="button-switch-stage box-input-data mt-lg-0 mb-2">
-        <button class="button body-04 {{ isCreateContract ? 'text--gray-7 pe-none' : '' }}"
-          (click)="changeType(inputDataType.RAW)" [class.active-gradient]="typeInput === inputDataType.RAW"
+        <button
+          class="button body-04 {{ isCreateContract ? 'text--gray-7 pe-none' : '' }}"
+          (click)="changeType(inputDataType.RAW)"
+          [class.active-gradient]="typeInput === inputDataType.RAW"
           [disabled]="isCreateContract">
           <span>{{ inputDataType.RAW }}</span>
         </button>
-        <button class="button body-04 {{
+        <button
+          class="button body-04 {{
             !isContractVerified || isCreateContract ? 'text--gray-7 pe-none' : ''
-          }} active-gradient" (click)="changeType(inputDataType.DECODED)"
+          }} active-gradient"
+          (click)="changeType(inputDataType.DECODED)"
           [class.active-gradient]="typeInput === inputDataType.DECODED"
           [disabled]="!isContractVerified || isCreateContract">
           <span>{{ inputDataType.DECODED }}</span>
         </button>
-        <button class="button body-04 active-gradient" (click)="changeType(inputDataType.ORIGINAL)"
+        <button
+          class="button body-04 active-gradient"
+          (click)="changeType(inputDataType.ORIGINAL)"
           [class.active-gradient]="typeInput === inputDataType.ORIGINAL">
           <span>{{ inputDataType.ORIGINAL }}</span>
         </button>
@@ -94,8 +103,11 @@
           </ng-container>
         </div>
 
-        <div class="log-data break-word font-space-mono" *ngIf="typeInput === inputDataType.ORIGINAL"
-          [appExpandable]="transaction?.inputData" [maxCharVisible]="500">
+        <div
+          class="log-data break-word font-space-mono"
+          *ngIf="typeInput === inputDataType.ORIGINAL"
+          [appExpandable]="transaction?.inputData"
+          [maxCharVisible]="500">
           {{ transaction?.inputData }}
         </div>
       </div>
@@ -105,11 +117,17 @@
   <div class="d-flex flex-wrap mb-3">
     <div class="col-12 mb-2 mb-lg-0 text--gray-4 body">
       <div class="button-switch-stage box-input-data mt-lg-0 mb-2">
-        <button type="button" (click)="isLog = true" class="button body-04 border-radius--sm"
+        <button
+          type="button"
+          (click)="isLog = true"
+          class="button body-04 border-radius--sm"
           [class.active-gradient]="isLog">
           <span>{{ 'Event log' }}</span>
         </button>
-        <button type="button" (click)="isLog = false" class="button body-04 border-radius--sm"
+        <button
+          type="button"
+          (click)="isLog = false"
+          class="button body-04 border-radius--sm"
           [class.active-gradient]="!isLog">
           <span>Internal Transactions</span>
         </button>
@@ -120,8 +138,11 @@
         <div *ngIf="eventLog?.length > 0; else noValue">
           <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">
+            <app-evm-transaction-event-log
+              *ngFor="let log of eventLog; index as idx"
+              [eventLog]="log"
+              [arrTopicDecode]="arrTopicDecode"
+              [index]="idx">
             </app-evm-transaction-event-log>
           </div>
         </div>
@@ -135,4 +156,4 @@
       </div>
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>