[feat][704] remove request chain id while opening multiple tabs (#3678)

* feat: remove request chain id while opening multple tab * fix: signer empty when sign transaction (#3677) * update: disabled delegate for evm-account
aura-nw · Aug 20, 2024 · 5732ebe · 5732ebe
1 parent aeca0fd
commit 5732ebe
Show file tree

Hide file tree

Showing 9 changed files with 64 additions and 57 deletions.
diff --git a/src/app/core/services/wallet.service.ts b/src/app/core/services/wallet.service.ts
@@ -212,11 +212,10 @@ export class WalletService implements OnDestroy {
   }
 
   restoreEvmAccounts() {
-    let account = local.getItem(STORAGE_KEY.CURRENT_EVM_WALLET);
+    const account = local.getItem(STORAGE_KEY.CURRENT_EVM_WALLET);
+    if (!account) return;
 
-    if (account) {
-      this.connectEvmWallet().then().catch();
-    }
+    this.walletAccount = account;
   }
 
   restoreAccounts() {
@@ -249,17 +248,9 @@ export class WalletService implements OnDestroy {
   }
 
   evmChangeEvent() {
-    const reconnect = () => {
-      const timeoutId = setTimeout(() => {
-        clearTimeout(timeoutId);
-        this.connectToChain();
-      }, 1000);
-    };
-
     (window as any).ethereum?.on('accountsChanged', () => {
       this.connectEvmWallet(true).then().catch();
     });
-    (window as any).ethereum?.on('chainChanged', reconnect);
   }
 
   private async _getSigningCosmWasmClientAuto() {
@@ -357,11 +348,11 @@ export class WalletService implements OnDestroy {
     return this.walletAccount;
   }
 
-  getEvmAccount() {
-    const account = this.walletAccount;
+  async getEvmAccount() {
+    const signer = await this.getWalletSigner();
 
-    if (account?.evmAccount) {
-      return account;
+    if (signer) {
+      return signer;
     }
 
     const repo = this._walletManager.getWalletRepo(this._chain?.chain_name);
@@ -424,6 +415,10 @@ export class WalletService implements OnDestroy {
     );
   }
 
+  getWalletSigner() {
+    return getSigner(this.env.etherJsonRpc);
+  }
+
   async connectEvmWallet(changedWallet = false) {
     const connected = await this.connectToChain();
     if (!changedWallet && !connected) {

diff --git a/...cts/evm-contracts-detail/evm-contract-content/evm-contract/evm-read/evm-read.component.ts b/...cts/evm-contracts-detail/evm-contract-content/evm-contract/evm-read/evm-read.component.ts
@@ -140,16 +140,6 @@ export class EvmReadComponent implements OnChanges {
       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) {

diff --git a/...s/evm-contracts-detail/evm-contract-content/evm-contract/evm-write/evm-write.component.ts b/...s/evm-contracts-detail/evm-contract-content/evm-contract/evm-write/evm-write.component.ts
@@ -172,7 +172,7 @@ export class EvmWriteComponent implements OnChanges {
       return;
     }
 
-    const contract = this.createContract();
+    const contract = await this.createContract();
 
     if (!contract) {
       return;
@@ -201,15 +201,15 @@ export class EvmWriteComponent implements OnChanges {
       });
   }
 
-  createContract() {
+  async createContract() {
     try {
-      const account = this.walletService.getEvmAccount();
+      const accountSigner = await this.walletService.getEvmAccount();
 
-      if (!account?.evmAccount) {
+      if (!accountSigner) {
         return undefined;
       }
 
-      let contract = new Contract(this.contractAddress, this.abi, account.evmAccount);
+      let contract = new Contract(this.contractAddress, this.abi, accountSigner);
 
       if (contract) {
         this.contract = contract;

diff --git a/src/app/pages/proposal/proposal-vote/proposal-vote.component.ts b/src/app/pages/proposal/proposal-vote/proposal-vote.component.ts
@@ -1,9 +1,8 @@
 import { Component, Inject } from '@angular/core';
 import {
-  MatLegacyDialogRef as MatDialogRef,
   MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA,
+  MatLegacyDialogRef as MatDialogRef,
 } from '@angular/material/legacy-dialog';
-import { MsgVote } from 'cosmjs-types/cosmos/gov/v1beta1/tx';
 import { TIME_OUT_CALL_API } from 'src/app/core/constants/common.constant';
 import { TRANSACTION_TYPE_ENUM } from 'src/app/core/constants/transaction.enum';
 import { EnvironmentService } from 'src/app/core/data-services/environment.service';

diff --git a/src/app/pages/validators/staking-info/staking-info.component.html b/src/app/pages/validators/staking-info/staking-info.component.html
@@ -24,8 +24,9 @@ <h6 class="mb-0">
           <button
             class="button button-outline button--sm button-pill button-flat d-flex text--black"
             type="button"
-            [disabled]="isDisableClaim || isLoading"
-            (click)="viewDialog(true)">
+            (click)="viewDialog(true)"
+            [appTooltip]="isEvmAccount ? 'Using cosmos account. Please!': ''"
+            [disabled]="isEvmAccount || isDisableClaim || isLoading">
             <img
               [src]="'assets/icons/icons-svg/color/spinner.svg' | imageS3"
               alt=""
@@ -85,8 +86,9 @@ <h6 class="mb-0">
                       <div *ngSwitchCase="'action'" class="py-4">
                         <button
                           type="button"
+                          [appTooltip]="isEvmAccount ? 'Using cosmos account. Please!': ''"
                           class="button button--sm button-pill button-outline button-outline__in-card ml-auto"
-                          [disabled]="clicked"
+                          [disabled]="isEvmAccount || clicked"
                           (click)="clicked = true; viewDialog(false, modalManage, data['validator_address'])">
                           <span class="body-02 text--gray-1">Manage</span>
                         </button>
@@ -244,4 +246,4 @@ <h6 class="mb-0">
       </div>
     </div>
   </div>
-</ng-container>
+</ng-container>
diff --git a/src/app/pages/validators/staking-info/staking-info.component.ts b/src/app/pages/validators/staking-info/staking-info.component.ts
@@ -1,6 +1,7 @@
 import { Component, EventEmitter, Input, OnChanges, Output, SimpleChanges } from '@angular/core';
 import { MatLegacyTableDataSource as MatTableDataSource } from '@angular/material/legacy-table';
 import { TableTemplate } from 'src/app/core/models/common.model';
+import { WalletService } from 'src/app/core/services/wallet.service';
 
 @Component({
   selector: 'app-staking-info',
@@ -30,8 +31,15 @@ export class StakingInfoComponent implements OnChanges {
   displayedColumnsWallet: string[] = this.templatesWallet.map((dta) => dta.matColumnDef);
   clicked = false;
   isDisableClaim = true;
+  isEvmAccount = false;
 
-  constructor() {}
+  constructor(private walletService: WalletService) {
+    this.walletService.walletAccount$.subscribe({
+      next: (wallet) => {
+        this.isEvmAccount = !!wallet.evmAccount;
+      },
+    });
+  }
 
   ngOnChanges(changes: SimpleChanges): void {
     this.dataSourceWallet = new MatTableDataSource(this.dataUserDelegate?.delegations);

diff --git a/src/app/pages/validators/validators-detail/delegate-item/delegate-item.component.ts b/src/app/pages/validators/validators-detail/delegate-item/delegate-item.component.ts
@@ -164,7 +164,7 @@ export class DelegateItemComponent implements OnInit {
       this.modalReference.close('Close click');
     }
   }
-  async createContract(contractAddr, evmAccount) {
+  async createContract(contractAddr) {
     try {
       const connected = await this.walletService.connectToChain();
       if (!connected) {
@@ -173,7 +173,9 @@ export class DelegateItemComponent implements OnInit {
         this.toastr.error(`Please switch to ${this.environmentService.evmChainInfo.chain} chain.`);
         return null;
       }
-      let contract = new Contract(contractAddr, stakeAbi, evmAccount);
+
+      const signer = await this.walletService.getWalletSigner();
+      let contract = new Contract(contractAddr, stakeAbi, signer);
 
       if (contract) {
         this.contract = contract;
@@ -220,7 +222,7 @@ export class DelegateItemComponent implements OnInit {
             this.checkTxStatusOnchain({ error });
           });
       } else {
-        const contract = await this.createContract(this.stakeContractAddr, account.evmAccount);
+        const contract = await this.createContract(this.stakeContractAddr);
 
         if (!contract) {
           return;

diff --git a/src/app/pages/validators/validators.component.html b/src/app/pages/validators/validators.component.html
@@ -253,14 +253,16 @@ <h2 class="h3-mob mb-0 text--white">Validators</h2>
                           </div>
                         </div>
                         <div *ngSwitchCase="'action'">
-                          <button
-                            type="button"
-                            class="button button--sm button-pill button-outline button-outline__in-card ml-auto"
-                            [disabled]="clicked"
-                            *ngIf="!data['jailed']"
-                            (click)="viewPopupDetail(modalManage, data.operator_address, dialogMode.Delegate, true)">
-                            <span class="body-02 text--gray-1">Delegate</span>
-                          </button>
+                          <div *ngSwitchCase="'action'">
+                            <button
+                              type="button"
+                              [appTooltip]="isEvmAccount ? 'Using cosmos account. Please!': ''"
+                              class="button button--sm button-pill button-outline button-outline__in-card ml-auto"
+                              [disabled]="clicked || isEvmAccount" *ngIf="!data['jailed']"
+                              (click)="viewPopupDetail(modalManage, data.operator_address, dialogMode.Delegate, true)">
+                              <span class="body-02 text--gray-1">Delegate</span>
+                            </button>
+                          </div>
                         </div>
                         <div *ngSwitchDefault class="text-center">{{ data[template.matColumnDef] }}</div>
                       </ng-container>
@@ -656,4 +658,4 @@ <h5 class="mb-1 text--gray-1">
 
 <div *ngIf="loadingData" class="mt-20">
   <app-loading-sprint></app-loading-sprint>
-</div>
+</div>
diff --git a/src/app/pages/validators/validators.component.ts b/src/app/pages/validators/validators.component.ts
@@ -119,6 +119,7 @@ export class ValidatorsComponent implements OnInit, OnDestroy {
   coinMinimalDenom = this.chainInfo.currencies[0].coinMinimalDenom;
   stakeContractAddr = this.environmentService.evmChainInfo.stakeContract;
   claimContractAddr = this.environmentService.evmChainInfo.claimContract;
+  isEvmAccount = false;
 
   constructor(
     private validatorService: ValidatorService,
@@ -133,7 +134,13 @@ export class ValidatorsComponent implements OnInit, OnDestroy {
     private environmentService: EnvironmentService,
     private proposalService: ProposalService,
     private transactionService: TransactionService,
-  ) {}
+  ) {
+    this.walletService.walletAccount$.subscribe({
+      next: (wallet) => {
+        this.isEvmAccount = !!wallet.evmAccount;
+      },
+    });
+  }
 
   async ngOnInit() {
     this.getCountProposal();
@@ -168,17 +175,19 @@ export class ValidatorsComponent implements OnInit, OnDestroy {
     }
   }
 
-  async createContract(contractAddr, evmAccount) {
+  async createContract(contractAddr) {
     try {
       const connected = await this.walletService.connectToChain();
+
       if (!connected) {
         this.isLoading = false;
         this.isHandleStake = false;
         this.toastr.error(`Please switch to ${this.environmentService.evmChainInfo.chain} chain.`);
         return null;
       }
 
-      let contract = new Contract(contractAddr, stakeAbi, evmAccount);
+      const signer = await this.walletService.getWalletSigner();
+      let contract = new Contract(contractAddr, stakeAbi, signer);
 
       if (contract) {
         this.contract = contract;
@@ -555,7 +564,7 @@ export class ValidatorsComponent implements OnInit, OnDestroy {
             this.checkTxStatusOnchain({ error });
           });
       } else {
-        const contract = await this.createContract(this.stakeContractAddr, account.evmAccount);
+        const contract = await this.createContract(this.stakeContractAddr);
 
         if (!contract) {
           return;
@@ -621,7 +630,7 @@ export class ValidatorsComponent implements OnInit, OnDestroy {
               this.checkTxStatusOnchain({ error });
             });
         } else {
-          const contract = await this.createContract(this.claimContractAddr, account.evmAccount);
+          const contract = await this.createContract(this.claimContractAddr);
 
           if (!contract) {
             return;
@@ -678,7 +687,7 @@ export class ValidatorsComponent implements OnInit, OnDestroy {
             this.checkTxStatusOnchain({ error });
           });
       } else {
-        const contract = await this.createContract(this.stakeContractAddr, account.evmAccount);
+        const contract = await this.createContract(this.stakeContractAddr);
 
         if (!contract) {
           return;
@@ -744,7 +753,7 @@ export class ValidatorsComponent implements OnInit, OnDestroy {
             this.checkTxStatusOnchain({ error });
           });
       } else {
-        const contract = await this.createContract(this.stakeContractAddr, account.evmAccount);
+        const contract = await this.createContract(this.stakeContractAddr);
 
         if (!contract) {
           return;