Release euphoria 20240604

src/app/core/pipes/custom-pipe.module.ts

@@ -13,6 +13,7 @@ import { BalancePipe, FormatDigitPipe, GtPipe, GtePipe, LtPipe, LtePipe } from '
 import { ObjectKeysPipe } from './object-keys.pipe';
 import { CombineTxsMsgPipe, EllipsisPipe } from './string.pipe';
 import { NameTagTooltipPipe } from './tooltip.pipe';
+import { HighlightFunctionPipe } from './highlight-function.pipe';
 
 @NgModule({
   imports: [CommonModule],
@@ -40,6 +41,7 @@ import { NameTagTooltipPipe } from './tooltip.pipe';
     ObjectKeysPipe,
     CapacityPipe,
     EvmAddressPipe,
+    HighlightFunctionPipe,
   ],
   exports: [
     JsonPipe,
@@ -65,7 +67,9 @@ import { NameTagTooltipPipe } from './tooltip.pipe';
     ObjectKeysPipe,
     CapacityPipe,
     EvmAddressPipe,
+    HighlightFunctionPipe,
   ],
   providers: [],
 })
 export class CustomPipeModule {}
+

src/app/core/pipes/evm-address.pipe.ts

@@ -1,11 +1,14 @@
 import { Pipe, type PipeTransform } from '@angular/core';
 import { getEvmChecksumAddress } from '../utils/common/address-converter';
+import { EWalletType } from '../constants/wallet.constant';
 
 @Pipe({
-  name: 'appEvmAddress',
+  name: 'beautyAddress',
 })
 export class EvmAddressPipe implements PipeTransform {
   transform(value: string): string {
+    if (!value?.startsWith(EWalletType.EVM)) return value;
+
     return getEvmChecksumAddress(value);
   }
 }

src/app/core/pipes/highlight-function.pipe.ts

@@ -0,0 +1,26 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer } from '@angular/platform-browser';
+
+@Pipe({ name: 'highlight_function' })
+export class HighlightFunctionPipe implements PipeTransform {
+  constructor(private sanitizer: DomSanitizer) {}
+  transform(value: string) {
+    if (!value) return null;
+    let replacedValue = value;
+    const parametersPattern = /\(([^)]+)\)/;
+    const parametersMatch = value.match(parametersPattern);
+    const parameters = parametersMatch ? parametersMatch[1]?.split(',')?.map((param) => param?.trim()) : [];
+
+    parameters.map((item) => {
+      const [dataType, modifier, name] = item?.split(' ') || [];
+      const dataTypeHTML = dataType ? `<span style="color: var(--aura-green-3)">${dataType}</span>` : '';
+      const modifierHTML = modifier
+        ? `<span style="color: ${!name ? 'var(--aura-red-3)' : 'var(--aura-gray-3)'}">${modifier}</span>`
+        : '';
+      const nameHTML = name ? `<span style="color: var(--aura-red-3)">${name}</span>` : '';
+
+      replacedValue = replacedValue?.replace(item, `${dataTypeHTML} ${modifierHTML} ${nameHTML}`);
+    });
+    return this.sanitizer.bypassSecurityTrustHtml(replacedValue);
+  }
+}

src/app/core/services/wallet.service.ts

@@ -454,18 +454,22 @@ export class WalletService implements OnDestroy {
       const metamask = getMetamask();
       const chainId = '0x' + this.env.evmChainInfo.chainId.toString(16);
       try {
-        await metamask // Or window.ethereum if you don't support EIP-6963.
-          .request({
-            method: 'wallet_switchEthereumChain',
-            params: [{ chainId: chainId }],
-          });
+        await metamask.request({
+          method: 'wallet_switchEthereumChain',
+          params: [{ chainId: chainId }],
+        });
       } catch (switchError: any) {
-        if (switchError.code === 4902) {
-          // This error code indicates that the chain has not been added to MetaMask.
-          await addNetwork(this.env.evmChainInfo);
-        } else if (switchError.code === 4001) {
-          // This error code : "User rejected the request."
-          return false;
+        switch (switchError.code) {
+          case 4902:
+            // This error code indicates that the chain has not been added to MetaMask.
+            await addNetwork(this.env.evmChainInfo);
+            break;
+          case 4001:
+            // This error code : "User rejected the request."
+            return false;
+          case -32002:
+            // This error code : "Request of type 'wallet_switchEthereumChain' already pending"
+            return false;
         }
       }
     }

src/app/pages/account/account-detail/account-detail.component.html

@@ -25,7 +25,7 @@
     </div>
     <div class="d-lg-flex align-items-center mb-4 body-01 body-mob" *ngIf="accountEvmAddress">
       <div class="text--gray-4 title-address mb-1 mb-lg-0">EVM Address:</div>
-      <span [copyBtn]="accountEvmAddress" class="break-word">{{ accountEvmAddress }} </span>
+      <span [copyBtn]="accountEvmAddress" class="break-word">{{ accountEvmAddress | beautyAddress }} </span>
     </div>
   </div>
   <!-- Summary info -->

src/app/pages/account/account-detail/account-transaction-table/account-transaction-table.component.html

@@ -507,7 +507,7 @@
                           *ngIf="index < data.limit">
                           <div class="item-show d-flex justify-content-between align-items-center">
                             <app-name-tag
-                              [value]="item.fromAddress || currentAddress"
+                              [value]="item.fromAddress || currentAddress | beautyAddress"
                               [iconContract]="isEvmSmartContract(item.fromAddress || currentAddress)"
                               [linkRouter]="
                                 nonFungibleTokenType === nftType.ERC721
@@ -568,7 +568,7 @@
                           <div class="item-show d-flex align-items-center">
                             <div [style]="'min-width: 148px'">
                               <app-name-tag
-                                [value]="item.toAddress || currentAddress"
+                                [value]="item.toAddress || currentAddress | beautyAddress"
                                 [iconContract]="isEvmSmartContract(item.toAddress || currentAddress)"
                                 [linkRouter]="
                                   nonFungibleTokenType === nftType.ERC721
@@ -616,7 +616,7 @@
                       <ng-container *ngIf="modeQuery !== tabsData.FtsTxs">
                         <app-name-tag
                           *ngIf="data[template.matColumnDef]"
-                          [value]="data[template.matColumnDef]"
+                          [value]="data[template.matColumnDef] | beautyAddress"
                           [linkRouter]="[
                             (data[template.matColumnDef] | isContract) ? '/contracts' : '/address',
                             data[template.matColumnDef]
@@ -638,7 +638,7 @@
                             <div class="item-show d-flex align-items-center">
                               <div [style]="'min-width: 148px'">
                                 <app-name-tag
-                                  [value]="item.to || currentAddress"
+                                  [value]="item.to || currentAddress | beautyAddress"
                                   [linkRouter]="[
                                     (item.to || currentAddress | isContract) ? '/contracts' : '/address',
                                     item.to || currentAddress
@@ -678,7 +678,7 @@
                             *ngIf="index < data.limit">
                             <div class="item-show d-flex justify-content-between align-items-center">
                               <app-name-tag
-                                [value]="item.from || currentAddress"
+                                [value]="item.from || currentAddress | beautyAddress"
                                 [iconContract]="item.from || currentAddress | isContract"
                                 [linkRouter]="[
                                   (item.from || currentAddress | isContract) ? '/contracts' : '/address',
@@ -787,14 +787,14 @@
                                 [iconContract]="true"
                                 [linkRouter]="['/evm-contracts', item.contractAddress || currentAddress]"
                                 [isShorterText]="true"
-                                [value]="item.contractAddress"
+                                [value]="item.contractAddress | beautyAddress"
                                 [isEnableRouter]="!item.contractAddress?.startsWith('Null')"></app-name-tag>
                               <app-name-tag
                                 *ngIf="nonFungibleTokenType === nftType.CW721"
                                 [iconContract]="true"
                                 [linkRouter]="['/contracts', item.contractAddress || currentAddress]"
                                 [isShorterText]="true"
-                                [value]="item.contractAddress"
+                                [value]="item.contractAddress | beautyAddress"
                                 [isEnableRouter]="!item.contractAddress?.startsWith('Null')"></app-name-tag>
                             </div>
                           </div>

src/app/pages/evm-contracts/evm-contracts-detail/evm-contract-content/evm-contract-content.component.ts

@@ -167,6 +167,7 @@ export class EvmContractContentComponent implements OnInit, OnDestroy {
           next: (res) => {
             this.contractTransaction['data'] = res;
             this.contractTransaction['count'] = this.contractTransaction['data'].length || 0;
+            this.contractTransaction = {...this.contractTransaction};
           },
           error: (e) => {
             if (e.name === TIMEOUT_ERROR) {

src/app/pages/evm-contracts/evm-contracts-detail/evm-contract-content/evm-contract/evm-read/evm-read.component.ts

@@ -137,7 +137,10 @@ export class EvmReadComponent implements OnChanges {
     const connected = await this.walletService.connectToChain();
     if (!connected) {
       jsonFragment.isLoading = false;
-      jsonFragment.error = { code: '4001', message: 'User rejected the request.' };
+      jsonFragment.error = {
+        code: 'error',
+        message: `Please switch to ${this.environmentService.evmChainInfo.chain} chain.`,
+      };
       return;
     }
 

src/app/pages/evm-contracts/evm-contracts-detail/evm-contract-content/evm-contract/evm-write/evm-write.component.ts

@@ -155,9 +155,10 @@ export class EvmWriteComponent implements OnChanges {
     const fundAmount = formControls['fund']?.value || '0';
 
     const connected = await this.walletService.connectToChain();
+
     if (!connected) {
       jsonFragment.isLoading = false;
-      jsonFragment.error = { code: '4001', message: 'User rejected the request.' };
+      jsonFragment.error = { code: 'error', message: `Please switch to ${this.env.evmChainInfo.chain} chain.` };
       return;
     }
 

src/app/pages/evm-contracts/evm-contracts-detail/evm-contract-info/evm-contract-info.component.html

@@ -16,7 +16,7 @@ <h6 class="h4-mob mb-0 text--white fw-semibold">Information</h6>
       <div class="">
         <div class="text--gray-4 caption fw-normal mb-1">Public Name</div>
         <app-name-tag
-          [value]="contractDetail?.address"
+          [value]="contractDetail?.address | beautyAddress"
           [mode]="ENameTag.Public"
           [screen]="EScreen.Contract"
           [fullText]="true">
@@ -25,7 +25,10 @@ <h6 class="h4-mob mb-0 text--white fw-semibold">Information</h6>
 
       <div class="mt-3">
         <div class="text--gray-4 caption fw-normal mb-1">Private Name Tag</div>
-        <app-name-tag [value]="contractDetail?.address" [mode]="ENameTag.Private" [screen]="EScreen.Contract">
+        <app-name-tag
+          [value]="contractDetail?.address | beautyAddress"
+          [mode]="ENameTag.Private"
+          [screen]="EScreen.Contract">
         </app-name-tag>
       </div>
     </div>
@@ -54,7 +57,7 @@ <h6 class="h4-mob mb-0 text--white fw-semibold">More Info</h6>
         <div class="text--gray-light">
           <span class="mr-1 mr-lg-2" *ngIf="contractDetail?.creator">
             <app-name-tag
-              [value]="contractDetail?.creator"
+              [value]="contractDetail?.creator | beautyAddress"
               [widthAuto]="true"
               [linkRouter]="[
                 (contractDetail?.creator | isContract) ? '/contracts' : '/address',

src/app/pages/evm-contracts/evm-contracts-detail/evm-contracts-detail.component.html

@@ -4,7 +4,9 @@
     <div class="d-flex justify-content-between justify-content-lg-start mb-4 mb-lg-5 box-contract-info">
       <div class="d-lg-flex align-items-center">
         <h1 class="mb-0 text--white" id="ttiopa123">EVM Contract</h1>
-        <span class="text--gray-5 body-01 body-02-mob ml-sm-2 break-word mt-2 mt-lg-0">{{ contractAddress }}</span>
+        <span class="text--gray-5 body-01 body-02-mob ml-sm-2 break-word mt-2 mt-lg-0">{{
+          contractAddress | beautyAddress
+        }}</span>
       </div>
       <div class="d-flex align-items-center">
         <div class="btn-mobile ml-4 ml-lg-2" [copyBtn]="contractAddress"></div>

src/app/pages/evm-contracts/evm-contracts-list/evm-contracts-list.component.html

@@ -112,7 +112,7 @@ <h1 class="mb-4 mb-lg-6 text--white">EVM Contracts</h1>
                           *ngIf="data['contract_verification'] === ContractVerifyType.Verified" />
                       </div>
                       <app-name-tag
-                        [value]="data[template.matColumnDef]"
+                        [value]="data[template.matColumnDef] | beautyAddress"
                         [linkRouter]="[template.isUrl, data[template.matColumnDef]]"
                         [maxCharacter]="12"
                         [tooltipPosition]="'tooltip--right'"></app-name-tag>
@@ -140,7 +140,7 @@ <h1 class="mb-4 mb-lg-6 text--white">EVM Contracts</h1>
                     <ng-container *ngSwitchCase="'creator'">
                       <app-name-tag
                         *ngIf="data[template.matColumnDef]"
-                        [value]="data[template.matColumnDef]"
+                        [value]="data[template.matColumnDef] | beautyAddress"
                         [linkRouter]="[template.isUrl, data[template.matColumnDef]]"
                         [maxCharacter]="12"
                         [tooltipPosition]="'tooltip--right'"></app-name-tag>

src/app/pages/evm-token/evm-nft-detail/evm-nft-detail.component.html

@@ -164,7 +164,7 @@ <h2 class="mb-0 h5-mob text--white card__ntf-detail-item" id="popupCopy">Details
               <div class="label-detail text--gray-5">Owner:</div>
               <div class="d-flex align-items-center position-relative" *ngIf="nftDetail?.owner && !nftDetail?.burned">
                 <app-name-tag
-                  [value]="nftDetail?.owner"
+                  [value]="nftDetail?.owner | beautyAddress"
                   [fullText]="true"
                   [widthAuto]="true"
                   [linkRouter]="[
@@ -179,7 +179,7 @@ <h2 class="mb-0 h5-mob text--white card__ntf-detail-item" id="popupCopy">Details
               <div class="label-detail text--gray-5">Contract Address:</div>
               <div class="d-flex align-items-center position-relative">
                 <app-name-tag
-                  [value]="nftDetail?.contract_address"
+                  [value]="nftDetail?.contract_address | beautyAddress"
                   [linkRouter]="['/evm-contracts', nftDetail?.contract_address]"
                   [fullText]="true"
                   [widthAuto]="true"
@@ -192,7 +192,7 @@ <h2 class="mb-0 h5-mob text--white card__ntf-detail-item" id="popupCopy">Details
               <div class="d-flex align-items-center">
                 <app-name-tag
                   *ngIf="nftDetail?.creator"
-                  [value]="nftDetail?.creator"
+                  [value]="nftDetail?.creator | beautyAddress"
                   [fullText]="true"
                   [widthAuto]="true"
                   [linkRouter]="[
@@ -344,7 +344,7 @@ <h2 class="text--white mb-0">Item Activity</h2>
                       ">
                       <app-name-tag
                         *ngIf="data[template.matColumnDef]"
-                        [value]="data[template.matColumnDef]"
+                        [value]="data[template.matColumnDef] | beautyAddress"
                         [linkRouter]="[
                           isEvmSmartContract(data[template.matColumnDef]) ? '/evm-contracts' : '/address',
                           data[template.matColumnDef]
@@ -376,7 +376,7 @@ <h2 class="text--white mb-0">Item Activity</h2>
                         data.modeExecute !== modeExecuteTransaction.UnEquip &&
                         data[template.matColumnDef]
                       "
-                      [value]="data[template.matColumnDef]"
+                      [value]="data[template.matColumnDef] | beautyAddress"
                       [linkRouter]="[
                         isEvmSmartContract(data[template.matColumnDef]) ? '/evm-contracts' : '/address',
                         data[template.matColumnDef]

src/app/pages/evm-token/evm-token-content/evm-token-content-tab/evm-token-holders-tab/evm-token-holders-tab.component.html

@@ -40,7 +40,7 @@
                   <ng-container *ngSwitchCase="'owner'">
                     <app-name-tag
                       [iconContract]="isEvmSmartContract(data[template.matColumnDef])"
-                      [value]="data[template.matColumnDef]"
+                      [value]="data[template.matColumnDef] | beautyAddress"
                       [fullText]="true"
                       [fullTextMob]="true"
                       [tooltipPosition]="'tooltip--right'"

src/app/pages/evm-token/evm-token-content/evm-token-content-tab/evm-token-inventory-tab/evm-token-inventory-tab.component.html

@@ -54,7 +54,7 @@
                 <app-name-tag
                   *ngIf="!breakpoint.value.matches"
                   class="small-text text--primary hover-link"
-                  [value]="item.owner"
+                  [value]="item.owner | beautyAddress"
                   [linkRouter]="['/token', item.contract_address]"
                   [linkParams]="{ a: item.owner }">
                 </app-name-tag>

src/app/pages/evm-token/evm-token-content/evm-token-content-tab/evm-token-transfers-tab/evm-token-transfers-tab.component.html

@@ -107,7 +107,7 @@
                           ">
                           <app-name-tag
                             *ngIf="data.modeExecute !== modeExecuteTransaction.Mint && data[template.matColumnDef]"
-                            [value]="data[template.matColumnDef]"
+                            [value]="data[template.matColumnDef] | beautyAddress"
                             [linkRouter]="['/token', linkAddress]"
                             [linkParams]="{ a: data[template.matColumnDef] }"
                             [iconContract]="isEvmSmartContract(data[template.matColumnDef])"
@@ -138,7 +138,7 @@
                     <div [style.min-width]="'210px'">
                       <app-name-tag
                         *ngIf="data[template.matColumnDef]"
-                        [value]="data[template.matColumnDef]"
+                        [value]="data[template.matColumnDef] | beautyAddress"
                         [iconContract]="isEvmSmartContract(data[template.matColumnDef])"
                         [maxCharacter]="15"
                         [isEnableRouter]="!data[template.matColumnDef]?.startsWith('Null')"

src/app/pages/evm-token/evm-token-summary/evm-token-summary.component.html

@@ -33,7 +33,8 @@
           <div class="first-col text--gray-5">Contract:</div>
           <div class="break-word">
             <app-name-tag
-              [value]="tokenDetail?.contract_address || tokenDetail?.denom"
+              [value]="tokenDetail?.contract_address || tokenDetail?.denom | beautyAddress"
+              [iconContract]="tokenDetail?.contract_address"
               [linkRouter]="['/evm-contracts', tokenDetail?.contract_address]"
               [fullText]="true"></app-name-tag>
           </div>

src/app/pages/evm-transactions/evm-transactions.component.html

@@ -28,15 +28,15 @@
                       </div>
                       <ng-container *ngSwitchCase="'from'">
                         <app-name-tag
-                          [value]="data[template.matColumnDef]"
+                          [value]="data[template.matColumnDef] | beautyAddress"
                           *ngIf="data[template.matColumnDef]"
                           [iconContract]="data['fromIsEvmContract']">
                         </app-name-tag>
                         <span *ngIf="!data[template.matColumnDef]">-</span>
                       </ng-container>
                       <ng-container *ngSwitchCase="'to'">
                         <app-name-tag
-                          [value]="data[template.matColumnDef]"
+                          [value]="data[template.matColumnDef] | beautyAddress"
                           *ngIf="data[template.matColumnDef]"
                           [iconContract]="data['toIsEvmContract']">
                         </app-name-tag>
@@ -61,7 +61,7 @@
                           [appBigNumber]="data[template.matColumnDef]"
                           [decimal]="decimal"></span>
                         <a appLinkDenom> {{ denom }}</a>
-                        <a [appLinkDenom]="data['contractAddress'] | appEvmAddress"> {{ data['tokenSymbol'] }}</a>
+                        <a [appLinkDenom]="data['contractAddress'] | beautyAddress"> {{ data['tokenSymbol'] }}</a>
                       </div>
                       <div *ngSwitchCase="'hash'" class="text-center">
                         <a