[feat][619] Update new design incompatible address (#3576)

* resolved conflict * resolved conflict 2 * remove trash code * format code * update query and logic for warning address * update nested if else * resolved conflict * update: query cosmos and evm * update: new query account info * update: rename variable * update: new UI for warning address
aura-nw · Jul 1, 2024 · b54a330 · b54a330
1 parent 5ef6157
commit b54a330
Show file tree

Hide file tree

Showing 5 changed files with 18 additions and 35 deletions.
diff --git a/src/app/core/constants/account.constant.ts b/src/app/core/constants/account.constant.ts
@@ -32,4 +32,6 @@ export const TABS_TITLE_ACCOUNT = [
   { label: TabsAccount.NftTxs, value: TabsAccountLink.NftTxs },
 ];
 
-export const COSMOS_ACCOUNT_MESSAGE_TYPE = "/cosmos.auth.v1beta1.BaseAccount";
+export const COSMOS_ACCOUNT_MESSAGE_TYPE = "/cosmos.auth.v1beta1.BaseAccount";
+export const COSMOS_WARNING_MESSAGE = "An account created by a EVM wallet (such as Metamask, Rabby, etc.) cannot be used to sign Cosmos transactions."
+export const EVM_WARNING_MESSAGE = "An account created by a Cosmos wallet (such as Keplr, Leap,...) cannot be used to sign EVM transactions."
diff --git a/src/app/core/directives/copy-button.directive.ts b/src/app/core/directives/copy-button.directive.ts
@@ -11,7 +11,6 @@ export class CopyButtonDirective implements OnChanges {
   @Input() isDisableCopy: boolean = false;
   @Input() btnClass: string[];
   @Input() iconClass: string[];
-  @Input() tooltipText?: string;
   button;
   tooltip;
 
@@ -27,18 +26,6 @@ export class CopyButtonDirective implements OnChanges {
   ) {}
 
   ngOnChanges(changes: SimpleChanges): void {
-    if (this.tooltipText) {
-      this.button.addEventListener('mouseover', () => {
-        this.handleTooltipPosition();
-        this.tooltip?.classList?.add('show');
-        this.tooltip.innerHTML = this.tooltipText;
-      });
-      this.button.addEventListener('mouseleave', () => {
-        this.handleTooltipPosition();
-        this.tooltip?.classList?.remove('show');
-      });
-    }
-
     if (this.isDisableCopy || !this.copyBtn || this.copyBtn === NULL_ADDRESS || this.button) {
       return;
     }
@@ -61,6 +48,7 @@ export class CopyButtonDirective implements OnChanges {
     contain.appendChild(element);
     // tooltip
     this.tooltip = document.createElement('div');
+    this.tooltip.innerHTML = 'Copied!';
     this.tooltip.classList.add('tooltip-copy');
     if (!this.copyText) {
       const icon = document.createElement('i');
@@ -84,9 +72,9 @@ export class CopyButtonDirective implements OnChanges {
     this.button.addEventListener('click', () => {
       if (this.tooltip) {
         // set position
-        this.handleTooltipPosition();
+        this.tooltip.style.top = this.commonService.getOffSet(this.button).top - 8 + 'px';
+        this.tooltip.style.left = this.commonService.getOffSet(this.button).left + 'px';
       }
-      this.tooltip.innerHTML = 'Copied!';
       this.tooltip.classList.add('show');
       this.copyMessage();
       setTimeout(() => {
@@ -95,12 +83,6 @@ export class CopyButtonDirective implements OnChanges {
     });
   }
 
-  handleTooltipPosition = () => {
-    const { top, left } = this.commonService.getOffSet(this.button);
-    this.tooltip.style.top = top - 8 + 'px';
-    this.tooltip.style.left = left + 'px';
-  };
-
   copyMessage() {
     const content = this.copyBtn;
     const dummy = document.createElement('textarea');
@@ -110,5 +92,4 @@ export class CopyButtonDirective implements OnChanges {
     document.execCommand('copy');
     document.body.removeChild(dummy);
   }
-}
-
+}
diff --git a/src/app/pages/account/account-detail/account-detail.component.html b/src/app/pages/account/account-detail/account-detail.component.html
@@ -21,21 +21,21 @@
 
     <div class="d-lg-flex align-items-center mb-lg-2 mb-3 mt-3 body-01 body-mob">
       <div class="text--gray-4 title-address mb-1 mb-lg-0">Cosmos Address:</div>
-      <span [copyBtn]="accountAddress" [tooltipText]="tooltipCosmosText" class="break-word">
+      <span [copyBtn]="accountAddress" class="break-word">
         <span *ngIf="accountType !== 'evm'">{{ accountAddress }}</span>
-        <div *ngIf="accountType && accountType !== 'cosmos'" class="warning">
+        <div *ngIf="accountType && accountType !== 'cosmos'" class="warning" [appTooltip]="tooltipCosmosText">
           <img class="warning-icon" [src]="'assets/icons/icons-svg/color/warning.svg' | imageS3" alt="warning" />
-          <span>This Cosmos address is unable to interact with CosWasm address</span>
+          <span>{{ accountAddress }}</span>
         </div>
       </span>
     </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" [tooltipText]="tooltipEvmText" class="break-word">
+      <span [copyBtn]="accountEvmAddress" class="break-word">
         <span *ngIf="accountType !== 'cosmos'">{{ accountEvmAddress | beautyAddress }}</span>
-        <div *ngIf="accountType && accountType !== 'evm'" class="warning">
+        <div *ngIf="accountType && accountType !== 'evm'" class="warning" [appTooltip]="tooltipEvmText">
           <img class="warning-icon" [src]="'assets/icons/icons-svg/color/warning.svg' | imageS3" alt="warning" />
-          <span>This EVM address is unable to interact with the Aura EVM contract.</span>
+          <span>{{ accountEvmAddress | beautyAddress }}</span>
         </div>
       </span>
     </div>

diff --git a/src/app/pages/account/account-detail/account-detail.component.scss b/src/app/pages/account/account-detail/account-detail.component.scss
@@ -5,13 +5,13 @@ section.account-detail {
       padding: 8px;
       border-radius: 8px;
       display: flex;
-      align-items: center;
+      align-items: flex-end;
 
       span {
         font-size: 12px;
         line-height: 16px;
         color: #CCD0D5;
-        margin-left: 2px;
+        margin-left: 4px;
       }
     }
 

diff --git a/src/app/pages/account/account-detail/account-detail.component.ts b/src/app/pages/account/account-detail/account-detail.component.ts
@@ -16,7 +16,7 @@ import { WalletService } from 'src/app/core/services/wallet.service';
 import { transferAddress } from 'src/app/core/utils/common/address-converter';
 import local from 'src/app/core/utils/storage/local';
 import { EnvironmentService } from '../../../../app/core/data-services/environment.service';
-import { COSMOS_ACCOUNT_MESSAGE_TYPE, ACCOUNT_WALLET_COLOR } from '../../../core/constants/account.constant';
+import { COSMOS_ACCOUNT_MESSAGE_TYPE, ACCOUNT_WALLET_COLOR, COSMOS_WARNING_MESSAGE, EVM_WARNING_MESSAGE } from '../../../core/constants/account.constant';
 import { ACCOUNT_WALLET_COLOR_ENUM, ENameTag, WalletAcount } from '../../../core/constants/account.enum';
 import { DATE_TIME_WITH_MILLISECOND, STORAGE_KEYS } from '../../../core/constants/common.constant';
 import { AccountService } from '../../../core/services/account.service';
@@ -154,11 +154,11 @@ export class AccountDetailComponent implements OnInit, OnDestroy {
 
             if(!Object.keys(pubkey)?.length){
               this.accountType = 'evm';
-              this.tooltipCosmosText = accountAddress;
+              this.tooltipCosmosText = COSMOS_WARNING_MESSAGE;
               return;
             }else {
               this.accountType = 'cosmos';
-              this.tooltipEvmText = accountEvmAddress;
+              this.tooltipEvmText = EVM_WARNING_MESSAGE;
               return;
             }
           },