Release/main/20240611

src/app/core/constants/token.constant.ts

@@ -47,3 +47,5 @@ export enum ETokenNFTTypeBE {
   CW721 = 'CW721_TOKEN',
   ERC721 = 'ERC721_TOKEN',
 }
+
+export const TOKEN_EVM_BURNT = '0x0000000000000000000000000000000000000000';

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/highlight-function.pipe.ts

@@ -0,0 +1,31 @@
+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); font-family: inherit">${dataType}</span>`
+        : '';
+      const modifierHTML = modifier
+        ? `<span style="color: ${
+            !name ? 'var(--aura-red-3)' : 'var(--aura-gray-3)'
+          }; font-family: inherit">${modifier}</span>`
+        : '';
+      const nameHTML = name ? `<span style="color: var(--aura-red-3); font-family: inherit">${name}</span>` : '';
+
+      replacedValue = replacedValue?.replace(item, `${dataTypeHTML} ${modifierHTML} ${nameHTML}`);
+    });
+    return this.sanitizer.bypassSecurityTrustHtml(replacedValue);
+  }
+}
+

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

@@ -8,6 +8,7 @@ import { CW20_TRACKING } from '../constants/common.constant';
 import { LCD_COSMOS } from '../constants/url.constant';
 import { EnvironmentService } from '../data-services/environment.service';
 import { CommonService } from './common.service';
+import { TOKEN_EVM_BURNT } from '../constants/token.constant';
 
 @Injectable({ providedIn: 'root' })
 export class TokenService extends CommonService {
@@ -271,7 +272,7 @@ export class TokenService extends CommonService {
         erc721_token(
           limit: $limit
           offset: $offset
-          where: {erc721_contract: {evm_smart_contract: {address: {_eq: $contract_address}}}, token_id: {_eq: $tokenId}, owner: {_eq: $owner, _nilike: "0x000000000%"}}
+          where: {erc721_contract: {evm_smart_contract: {address: {_eq: $contract_address}}}, token_id: {_eq: $tokenId}, owner: {_eq: $owner, _neq: "${TOKEN_EVM_BURNT}"}}
           order_by: [{last_updated_height: desc}, {id: desc}]
         ) {
           id
@@ -282,7 +283,7 @@ export class TokenService extends CommonService {
           created_at
         }
         erc721_token_aggregate(
-          where: {erc721_contract: {evm_smart_contract: {address: {_eq: $contract_address}}}, token_id: {_eq: $tokenId}, owner: {_eq: $owner, _nilike: "0x000000000%"}}
+          where: {erc721_contract: {evm_smart_contract: {address: {_eq: $contract_address}}}, token_id: {_eq: $tokenId}, owner: {_eq: $owner, _neq: "${TOKEN_EVM_BURNT}"}}
         ) {
           aggregate {
             count
@@ -334,7 +335,7 @@ export class TokenService extends CommonService {
     query queryCountTotalTokenErc721($contract_address: String) {
       ${this.envDB} {
         erc721_token_aggregate(
-          where: {erc721_contract: {evm_smart_contract: {address: {_eq: $contract_address}}}, owner: {_nilike: "0x000000000%"}}
+          where: {erc721_contract: {evm_smart_contract: {address: {_eq: $contract_address}}}, owner: {_neq: "${TOKEN_EVM_BURNT}"}}
         ) {
           aggregate {
             count
@@ -423,15 +424,15 @@ export class TokenService extends CommonService {
         view_count_holder_erc721(
           limit: $limit
           offset: $offset
-          where: {erc721_contract_address: {_eq: $contract_address}, owner: {_nilike: "0x000000000%"}}
+          where: {erc721_contract_address: {_eq: $contract_address}, owner: {_neq: "${TOKEN_EVM_BURNT}"}}
           order_by: {count: desc}
         ) {
           count
           erc721_contract_address
           owner
         }
         view_count_holder_erc721_aggregate(
-          where: {erc721_contract_address: {_eq: $contract_address}, owner: {_nilike: "0x000000000%"}}
+          where: {erc721_contract_address: {_eq: $contract_address}, owner: {_neq: "${TOKEN_EVM_BURNT}"}}
         ) {
           aggregate {
             count
@@ -552,12 +553,11 @@ export class TokenService extends CommonService {
     txHash?: string;
   }): Observable<any> {
     let queryName = 'ERC721Transfer';
-    let queryActionNotIn = payload.isNFTDetail
-      ? ['']
-      : ['approval', 'instantiate', 'revoke', 'approve_all', 'revoke_all', ''];
+    const queryActionIn = ['transfer'];
+
     const operationsDoc = `query ${queryName}(
       $contractAddress: String = null
-      $actionNotIn: [String!] = null
+      $actionIn: [String!] = null
       $idLte: Int = null
       $idGte: Int = null
       $receiver: String = null
@@ -566,7 +566,7 @@ export class TokenService extends CommonService {
       $txHash: String = null) {
       ${this.envDB} {
         erc721_activity(
-          where: {_or: [{to: {_eq: $receiver}}, {from: {_eq: $sender}}], erc721_contract: {evm_smart_contract: {address: {_eq: $contractAddress}}}, erc721_token: {token_id: {_eq: $tokenId}}, id: {_lte: $idLte, _gte: $idGte}, action: {_nin: $actionNotIn}, tx_hash: {_eq: $txHash}}
+          where: {_or: [{to: {_eq: $receiver}}, {from: {_eq: $sender}}], erc721_contract: {evm_smart_contract: {address: {_eq: $contractAddress}}}, erc721_token: {token_id: {_eq: $tokenId}}, id: {_lte: $idLte, _gte: $idGte}, action: {_in: $actionIn}, tx_hash: {_eq: $txHash}}
           order_by: {id: desc}
         ) {
           id
@@ -604,7 +604,7 @@ export class TokenService extends CommonService {
         query: operationsDoc,
         variables: {
           contractAddress: payload.contractAddr?.toLowerCase(),
-          actionNotIn: queryActionNotIn,
+          actionIn: queryActionIn,
           sender: payload.sender?.toLowerCase(),
           receiver: payload.receiver?.toLowerCase(),
           tokenId: payload.tokenId,

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

@@ -27,7 +27,7 @@ import { getGasPriceByChain } from '../utils/cosmoskit/helpers/gas';
 import { ExtendsWalletClient } from '../utils/cosmoskit/wallets';
 import { wallets as leapMetamask } from '../utils/cosmoskit/wallets/leap-metamask-cosmos-snap';
 import { getSigner } from '../utils/ethers/ethers';
-import { addNetwork, checkNetwork } from '../utils/ethers/utils';
+import { addNetwork, checkNetwork, getMetamask } from '../utils/ethers/utils';
 import local from '../utils/storage/local';
 
 @Injectable({
@@ -146,7 +146,7 @@ export class WalletService implements OnDestroy {
     await this._walletManager.onMounted();
 
     this.accountChangeEvent();
-
+    this.evmChangeEvent();
     return 'SUCCESS';
   }
 
@@ -248,6 +248,17 @@ export class WalletService implements OnDestroy {
     });
   }
 
+  evmChangeEvent() {
+    const reconnect = () => {
+      const timeoutId = setTimeout(() => {
+        clearTimeout(timeoutId);
+        this.connectToChain();
+      }, 1000);
+    };
+    (window as any).ethereum?.on('accountsChanged', reconnect);
+    (window as any).ethereum?.on('chainChanged', reconnect);
+  }
+
   private async _getSigningCosmWasmClientAuto() {
     let _walletName = localStorage.getItem(STORAGE_KEY.CURRENT_WALLET);
     const chainWallet = this._walletManager.getMainWallet(_walletName);
@@ -340,7 +351,7 @@ export class WalletService implements OnDestroy {
   }
 
   getCosmosAccountOnly() {
-    return this.walletAccount; 
+    return this.walletAccount;
   }
 
   getEvmAccount() {
@@ -411,10 +422,9 @@ export class WalletService implements OnDestroy {
   }
 
   async connectEvmWallet() {
-    const network = await checkNetwork(this.env.evmChainInfo.chainId);
-
-    if (!network) {
-      await addNetwork(this.env.evmChainInfo);
+    const connected = await this.connectToChain();
+    if (!connected) {
+      return;
     }
 
     getSigner(this.env.etherJsonRpc).then((signer) => {
@@ -433,6 +443,32 @@ export class WalletService implements OnDestroy {
     });
   }
 
+  async connectToChain() {
+    const metamask = getMetamask();
+    const chainId = '0x' + this.env.evmChainInfo.chainId.toString(16);
+    try {
+      await metamask.request({
+        method: 'wallet_switchEthereumChain',
+        params: [{ chainId: chainId }],
+      });
+    } catch (switchError: any) {
+      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;
+      }
+    }
+
+    return true;
+  }
+
   parseAddress(address: string) {
     return transferAddress(this.env.chainInfo.bech32Config.bech32PrefixAccAddr, address);
   }

src/app/core/utils/ethers/utils.ts

@@ -31,9 +31,12 @@ export async function addNetwork(chain) {
       chain.explorers && chain.explorers.length > 0 && chain.explorers[0].url ? chain.explorers[0].url : chain.infoURL,
     ],
   };
-
-  return metamask.request({
-    method: 'wallet_addEthereumChain',
-    params: [params],
-  });
+  try {
+    await metamask.request({
+      method: 'wallet_addEthereumChain',
+      params: [params],
+    });
+  } catch (addError) {
+    console.error(addError);
+  }
 }

src/app/core/utils/ethers/validate.ts

@@ -4,8 +4,13 @@ export function validateAndParsingInput(type: JsonFragmentType, value: any) {
   switch (type.type) {
     case 'uint256':
     case 'bytes4':
-      return value;
+      return { value };
+    case 'bool':
+      if (value?.toLowerCase() !== 'true' && value?.toLowerCase() !== 'false') {
+        return { value, error: `"${value}" is an invalid parameter, please use true/false.` };
+      }
+      return { value: value?.toLowerCase() === 'true' ? true : false };
     default:
-      return value;
+      return { value };
   }
 }

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

@@ -5,11 +5,12 @@ import { EnvironmentService } from 'src/app/core/data-services/environment.servi
 import { READ_STATE_MUTABILITY } from 'src/app/core/models/evm-contract.model';
 import { getEthersProvider } from 'src/app/core/utils/ethers';
 import { validateAndParsingInput } from 'src/app/core/utils/ethers/validate';
+import { WalletService } from '../../../../../../core/services/wallet.service';
 
 type Error = {
   code?: string;
-  message?: string
-}
+  message?: string;
+};
 
 type JsonFragmentExtends = JsonFragment & {
   formGroup?: FormGroup;
@@ -38,6 +39,7 @@ export class EvmReadComponent implements OnChanges {
   constructor(
     private environmentService: EnvironmentService,
     private fb: FormBuilder,
+    private walletService: WalletService,
   ) {}
 
   ngOnChanges(changes: SimpleChanges): void {
@@ -112,7 +114,7 @@ export class EvmReadComponent implements OnChanges {
     }
   }
 
-  handleQueryContract(jsonFragment: JsonFragmentExtends) {
+  async handleQueryContract(jsonFragment: JsonFragmentExtends) {
     if (!jsonFragment) {
       return;
     }
@@ -132,6 +134,26 @@ export class EvmReadComponent implements OnChanges {
       return validateAndParsingInput(i, value); // TODO
     });
 
+    const errorParams = params.map((i) => i.error).filter((f) => f);
+    if (errorParams.length > 0) {
+      jsonFragment.isLoading = false;
+      jsonFragment.error = {
+        code: 'INVALID_ARGUMENT',
+        message: errorParams.join(' '),
+      };
+      return;
+    }
+
+    const connected = await this.walletService.connectToChain();
+    if (!connected) {
+      jsonFragment.isLoading = false;
+      jsonFragment.error = {
+        code: 'error',
+        message: `Please switch to ${this.environmentService.evmChainInfo.chain} chain.`,
+      };
+      return;
+    }
+
     const contract = this.createContract();
 
     if (!contract) {
@@ -141,7 +163,9 @@ export class EvmReadComponent implements OnChanges {
     jsonFragment.isLoading = true;
     jsonFragment.result = undefined;
     jsonFragment.error = undefined;
-    contract[name]?.(...params)
+    const paramsData = params.map((i) => i.value);
+
+    contract[name]?.(...paramsData)
       .then((res) => {
         jsonFragment.result = res;
         jsonFragment.isLoading = false;

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

@@ -152,7 +152,26 @@ export class EvmWriteComponent implements OnChanges {
       return validateAndParsingInput(i, value); // TODO
     });
 
+    const errorParams = params.map((i) => i.error).filter((f) => f);
+    if (errorParams.length > 0) {
+      jsonFragment.isLoading = false;
+      jsonFragment.error = {
+        code: 'INVALID_ARGUMENT',
+        message: errorParams.join(' '),
+      };
+      return;
+    }
+
     const fundAmount = formControls['fund']?.value || '0';
+
+    const connected = await this.walletService.connectToChain();
+
+    if (!connected) {
+      jsonFragment.isLoading = false;
+      jsonFragment.error = { code: 'error', message: `Please switch to ${this.env.evmChainInfo.chain} chain.` };
+      return;
+    }
+
     const contract = this.createContract();
 
     if (!contract) {
@@ -163,9 +182,10 @@ export class EvmWriteComponent implements OnChanges {
     jsonFragment.result = undefined;
     jsonFragment.error = undefined;
 
+    const paramsData = params.map((i) => i.value);
     const nameContract = `${name}(${paramsDes.join(',')})`;
-    const x = await contract[nameContract]?.estimateGas(...params).catch((e) => e);
-    contract[nameContract]?.(...params, {
+    const x = await contract[nameContract]?.estimateGas(...paramsData).catch((e) => e);
+    contract[nameContract]?.(...paramsData, {
       gasLimit: Number(x) || 250_000,
       gasPrice: 1_000_0000,
       value: parseEther(fundAmount),