[Feat][619] Warning for incompatible between cosmos address and evm address

src/app/core/directives/copy-button.directive.ts

@@ -11,6 +11,7 @@ export class CopyButtonDirective implements OnChanges {
   @Input() isDisableCopy: boolean = false;
   @Input() btnClass: string[];
   @Input() iconClass: string[];
+  @Input() tooltipText?: string;
   button;
   tooltip;
 
@@ -26,6 +27,18 @@ 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;
     }
@@ -48,7 +61,6 @@ 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');
@@ -72,9 +84,9 @@ export class CopyButtonDirective implements OnChanges {
     this.button.addEventListener('click', () => {
       if (this.tooltip) {
         // set position
-        this.tooltip.style.top = this.commonService.getOffSet(this.button).top - 8 + 'px';
-        this.tooltip.style.left = this.commonService.getOffSet(this.button).left + 'px';
+        this.handleTooltipPosition();
       }
+      this.tooltip.innerHTML = 'Copied!';
       this.tooltip.classList.add('show');
       this.copyMessage();
       setTimeout(() => {
@@ -83,6 +95,12 @@ 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');
@@ -93,3 +111,4 @@ export class CopyButtonDirective implements OnChanges {
     document.body.removeChild(dummy);
   }
 }
+

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

@@ -136,6 +136,37 @@ export class UserService {
       .pipe(map((res) => (res?.data ? res?.data[this.envDB] : null)));
   }
 
+  getFirstTxFromAddress(payload) {
+    const operationsDoc = `
+    query QueryFirstTxFromAddress($address: String!) {
+       ${this.envDB} {
+        first_cosmos_tx: transaction(
+          where: {transaction_messages: {type: {_nregex: "(evm)"}, sender: { _eq: $address}}}
+          limit: 1
+          order_by: {timestamp: asc}
+        ) {
+          timestamp
+        }
+        first_evm_tx: transaction(
+          where: {transaction_messages: {type: {_regex: "(evm)"}, sender: { _eq: $address}}}
+          limit: 1
+          order_by: {timestamp: asc}
+        ) {
+          timestamp
+        }
+      }
+    }
+    `;
+
+    return this.http
+      .post<any>(this.graphUrl, {
+        query: operationsDoc,
+        variables: payload,
+        operationName: 'QueryFirstTxFromAddress',
+      })
+      .pipe(map((res) => (res?.data ? res?.data[this.envDB] : {})));
+  }
+
   getListEvmTxByAddress(payload) {
     const operationsDoc = `
     query QueryEvmTxOfAccount($startTime: timestamptz = null, $endTime: timestamptz = null, $limit: Int = null, $orderId: order_by = desc, $address: String! = null) {
@@ -518,3 +549,4 @@ export class UserService {
       .pipe(map((res) => (res?.data ? res?.data[this.envDB] : null)));
   }
 }
+

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

@@ -2,30 +2,38 @@
   <div class="mb-1 mb-md-6">
     <div class="d-flex d-block align-items-center">
       <span class="h2 fw-700 text--white mr-lg-5 mr-2">Account</span>
-      <a
-        [routerLink]="[
+      <a [routerLink]="[
           accountEvmAddress ? '/evm-contracts' : '/contracts',
           accountEvmAddress ? accountEvmAddress : accountAddress
-        ]"
-        *ngIf="isContractAddress"
-        [appTooltip]="'Go to Contract Details'"
+        ]" *ngIf="isContractAddress" [appTooltip]="'Go to Contract Details'"
         class="contract-label text--primary body-04 mr-5">
         Contract
       </a>
-      <i
-        class="ph ph-star body-01"
+      <i class="ph ph-star body-01"
         [appTooltip]="isWatchList ? 'Remove this address from your watch list' : 'Add this address to my watch list'"
-        (click)="handleWatchList()"
-        [ngClass]="isWatchList ? 'ph-star-fill text--yellow-2' : 'text--white'"></i>
+        (click)="handleWatchList()" [ngClass]="isWatchList ? 'ph-star-fill text--yellow-2' : 'text--white'"></i>
     </div>
 
     <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" class="break-word">{{ accountAddress }} </span>
+      <span [copyBtn]="accountAddress" [tooltipText]="tooltipCosmosText" class="break-word">
+        <span *ngIf="firstTransactionFrom !== 'evm'">{{ accountAddress }}</span>
+        <div *ngIf="firstTransactionFrom && firstTransactionFrom !== 'cosmos'" class="warning">
+          <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>
+        </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" class="break-word">{{ accountEvmAddress | beautyAddress }} </span>
+      <span [copyBtn]="accountEvmAddress" [tooltipText]="tooltipEvmText" class="break-word">
+        <span *ngIf="firstTransactionFrom !== 'cosmos'">{{ accountEvmAddress | beautyAddress }}</span>
+        <div *ngIf="firstTransactionFrom && firstTransactionFrom !== 'evm'" class="warning">
+          <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>
+        </div>
+      </span>
     </div>
   </div>
   <!-- Summary info -->
@@ -48,34 +56,21 @@ <h3 class="fw-bold fw-semibold-mob mb-2 text--white">Account Info</h3>
             <div>
               <div class="body mb-1 text--white">Total Value</div>
               <div class="h1 mb-0 fw-700 mb-0 text--white">
-                <span
-                  *ngIf="totalValue.lt(0.01)"
+                <span *ngIf="totalValue.lt(0.01)"
                   [appTooltip]="!totalValue.eq(0) ? (totalValue.toFixed() | mask: 'separator') : null">
-                  {{ totalValue.eq(0) ? '$0' : '< $0.01' }}
-                </span>
-                <span
-                  [appTooltip]="
+                  {{ totalValue.eq(0) ? '$0' : '< $0.01' }} </span>
+                    <span [appTooltip]="
                     totalValue.gte(0.01) && totalValue.lt(1000000) ? null : (totalValue.toFixed() | mask: 'separator.6')
-                  "
-                  [class.cursor-text]="totalValue.gte(0.01) && totalValue.lt(1000000)"
-                  *ngIf="!isNoData && totalValue.gte(0.01)">
-                  $<span [decimal]="0" [appBigNumber]="totalValue.toFixed() || 0"></span>
-                </span>
+                  " [class.cursor-text]="totalValue.gte(0.01) && totalValue.lt(1000000)"
+                      *ngIf="!isNoData && totalValue.gte(0.01)">
+                      $<span [decimal]="0" [appBigNumber]="totalValue.toFixed() || 0"></span>
+                    </span>
               </div>
-              <img
-                [src]="'assets/icons/icons-svg/color/spinner.svg' | imageS3"
-                alt=""
-                class="ml-10"
-                width="20"
-                height="20"
-                *ngIf="isNoData" />
+              <img [src]="'assets/icons/icons-svg/color/spinner.svg' | imageS3" alt="" class="ml-10" width="20"
+                height="20" *ngIf="isNoData" />
             </div>
             <div class="button button--md button-circle ml-1 d-lg-none">
-              <img
-                [src]="'assets/icons/icons-svg/white/qr-code.svg' | imageS3"
-                alt=""
-                width="36px"
-                height="36px"
+              <img [src]="'assets/icons/icons-svg/white/qr-code.svg' | imageS3" alt="" width="36px" height="36px"
                 (click)="viewQrAddress(modalManage)" />
             </div>
           </div>
@@ -85,11 +80,8 @@ <h3 class="fw-bold fw-semibold-mob mb-2 text--white">Account Info</h3>
     <div class="col-12 col-lg-9">
       <div class="card card-h-100">
         <div class="px-4 py-4 px-lg-6 py-lg-6">
-          <app-token-table
-            [address]="accountAddress"
-            (totalAssets)="totalAssets = $event"
-            (totalValue)="totalValueToken = $event"
-            *ngIf="!isNoData"></app-token-table>
+          <app-token-table [address]="accountAddress" (totalAssets)="totalAssets = $event"
+            (totalValue)="totalValueToken = $event" *ngIf="!isNoData"></app-token-table>
           <ng-container *ngTemplateOutlet="reloadTemplate"></ng-container>
         </div>
       </div>
@@ -100,11 +92,7 @@ <h3 class="fw-bold fw-semibold-mob mb-2 text--white">Account Info</h3>
     <ng-template #modalManage let-modal>
       <div class="box-address">
         <div class="text-end mb-4">
-          <img
-            [src]="'assets/images/icons/close-popup.png' | imageS3"
-            alt=""
-            width="14"
-            height="14"
+          <img [src]="'assets/images/icons/close-popup.png' | imageS3" alt="" width="14" height="14"
             (click)="closePopup()" />
         </div>
         <app-qr [address]="accountAddress || ''"></app-qr>
@@ -115,36 +103,23 @@ <h3 class="fw-bold fw-semibold-mob mb-2 text--white">Account Info</h3>
 
 <section class="account-detail text--white" *ngIf="{ value: breakpoint$ | async } as breakpoint">
   <!--SBT  -->
-  <div
-    class="card"
-    *ngIf="
+  <div class="card" *ngIf="
       (totalSBTPick > 0 || (accountAddress === connectedAddress && totalSBT > 0)) &&
       commonService.isValidAddress(accountAddress)
-    "
-    [appFeature]="EFeature.Cw4973">
+    " [appFeature]="EFeature.Cw4973">
     <div class="px-4 py-4 pt-xl-6 pb-xl-6 px-xl-0">
-      <app-soulbound-feature-tokens
-        [extend]="true"
-        (totalSBTPick)="totalSBTPick = $event"
-        [displayManage]="true"
-        [accountAddress]="accountAddress"
-        [reloadAPI]="false"
-        [isAccountDetail]="true"></app-soulbound-feature-tokens>
+      <app-soulbound-feature-tokens [extend]="true" (totalSBTPick)="totalSBTPick = $event" [displayManage]="true"
+        [accountAddress]="accountAddress" [reloadAPI]="false" [isAccountDetail]="true"></app-soulbound-feature-tokens>
     </div>
   </div>
 
   <!-- NFT -->
-  <app-nft-list
-    [address]="accountAddress"
-    (totalValueNft)="totalValueNft = $event"
+  <app-nft-list [address]="accountAddress" (totalValueNft)="totalValueNft = $event"
     [appFeature]="EFeature.Cw721"></app-nft-list>
 
   <!-- Staking-->
-  <app-account-stake
-    *ngIf="currentAccountDetail"
-    [chartOptions]="chartOptions"
-    [chartCustomOptions]="chartCustomOptions"
-    [currentAccountDetail]="currentAccountDetail"></app-account-stake>
+  <app-account-stake *ngIf="currentAccountDetail" [chartOptions]="chartOptions"
+    [chartCustomOptions]="chartCustomOptions" [currentAccountDetail]="currentAccountDetail"></app-account-stake>
 
   <!-- Transaction List-->
   <app-account-transaction [address]="currentUrlAddress"></app-account-transaction>
@@ -161,4 +136,4 @@ <h3 class="fw-bold fw-semibold-mob mb-2 text--white">Account Info</h3>
       </div>
     </div>
   </div>
-</ng-template>
+</ng-template>

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

@@ -1,4 +1,20 @@
 section.account-detail {
+  .warning {
+      border: 1px solid #ffa237;
+      background: #3d3730;
+      padding: 8px;
+      border-radius: 8px;
+      display: flex;
+      align-items: center;
+
+      span {
+        font-size: 12px;
+        line-height: 16px;
+        color: #CCD0D5;
+        margin-left: 2px;
+      }
+    }
+
   .qr-code {
     background-color: var(--aura-gray-9);
     border-top-left-radius: 12px;

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

@@ -5,10 +5,12 @@ import { MatSort } from '@angular/material/sort';
 import { ActivatedRoute, Router } from '@angular/router';
 import { NgbModal } from '@ng-bootstrap/ng-bootstrap';
 import BigNumber from 'bignumber.js';
+import { isBefore, isEqual } from 'date-fns';
 import { ChartComponent } from 'ng-apexcharts';
 import { Subject } from 'rxjs';
 import { takeUntil } from 'rxjs/operators';
 import { EFeature } from 'src/app/core/models/common.model';
+import { ContractService } from 'src/app/core/services/contract.service';
 import { SoulboundService } from 'src/app/core/services/soulbound.service';
 import { UserService } from 'src/app/core/services/user.service';
 import { WalletService } from 'src/app/core/services/wallet.service';
@@ -21,7 +23,6 @@ import { DATE_TIME_WITH_MILLISECOND, STORAGE_KEYS } from '../../../core/constant
 import { AccountService } from '../../../core/services/account.service';
 import { CommonService } from '../../../core/services/common.service';
 import { CHART_OPTION, ChartOptions, chartCustomOptions } from './chart-options';
-import { ContractService } from 'src/app/core/services/contract.service';
 
 @Component({
   selector: 'app-account-detail',
@@ -68,6 +69,9 @@ export class AccountDetailComponent implements OnInit, OnDestroy {
   EFeature = EFeature;
   ENameTag = ENameTag;
   accountEvmAddress = '';
+  firstTransactionFrom: 'cosmos' | 'evm' | '';
+  tooltipCosmosText: string;
+  tooltipEvmText: string;
   chainInfo = this.environmentService.chainInfo;
 
   constructor(
@@ -124,6 +128,50 @@ export class AccountDetailComponent implements OnInit, OnDestroy {
 
         this.getAccountDetail();
         this.checkWatchList();
+
+        const payload = {
+          address: accountAddress,
+        };
+        // 1: cả 2 đều k có ===> hiển thị như bt
+        // 2: cosmos không có => hiển thị warning cho cosmos
+        // 3: evm không có => hiển thị warning cho evm
+        // 4: cả 2 đều có và timestamp bằng nhau thì hiển thị như bt
+        // 5: cả 2 đều có check theo timestamp thằng nào mới hơn thì hiển thị warning cho thằng đó
+        this.userService.getFirstTxFromAddress(payload).subscribe({
+          next: (data: { first_cosmos_tx?: [{ timestamp: string }]; first_evm_tx?: [{ timestamp: string }] } = {}) => {
+            const { first_cosmos_tx, first_evm_tx } = data || {};
+            const firstCosmosTxTimestamp = first_cosmos_tx?.[0]?.timestamp;
+            const firstEvmTxTimestamp = first_evm_tx?.[0]?.timestamp;
+
+            const hasCosmosTx = firstCosmosTxTimestamp !== undefined;
+            const hasEvmTx = firstEvmTxTimestamp !== undefined;
+
+            if ((!hasCosmosTx && !hasEvmTx) || firstCosmosTxTimestamp === firstEvmTxTimestamp) return;
+
+            if (!hasCosmosTx) {
+              this.firstTransactionFrom = 'evm';
+              this.tooltipCosmosText = accountAddress;
+              return;
+            }
+
+            if (!hasEvmTx) {
+              this.firstTransactionFrom = 'cosmos';
+              this.tooltipEvmText = accountEvmAddress;
+              return;
+            }
+
+            const cosmosTimestamp = new Date(firstCosmosTxTimestamp);
+            const evmTimestamp = new Date(firstEvmTxTimestamp);
+
+            if (isBefore(cosmosTimestamp, evmTimestamp)) {
+              this.firstTransactionFrom = 'cosmos';
+              this.tooltipEvmText = accountEvmAddress;
+            } else {
+              this.firstTransactionFrom = 'evm';
+              this.tooltipCosmosText = accountAddress;
+            }
+          },
+        });
       }
     });
   }
@@ -289,3 +337,4 @@ export class AccountDetailComponent implements OnInit, OnDestroy {
     }
   }
 }
+

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

@@ -943,3 +943,4 @@ export class AccountTransactionTableComponent implements OnInit, OnDestroy {
     return this.smartContractList.filter((i) => i === addr).length > 0;
   }
 }
+