[featfix][547] fix Display and Search uppercase EVM address

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]="[

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(),
  );
  }
 

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'">

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"

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

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

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

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

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>
+</div>