fix: getTokenBalance in InterlayXcmRepository.ts

src/components/assets/transfer/XcmBridge.vue

@@ -116,11 +116,7 @@
             <span class="text--dot">・</span>
             <span class="text--warning">{{ $t('assets.modals.xcmWarning.minBalIsRequired') }}</span>
           </div>
-          <div
-            v-click-away="setIsMobileDisplayTooltip"
-            class="icon--help"
-            @click="setIsMobileDisplayTooltip"
-          >
+          <div v-click-away="setIsMobileDisplayTooltip" @click="setIsMobileDisplayTooltip">
             <astar-icon-help size="20" />
             <q-tooltip
               v-model="isDisplayTooltip"

src/components/assets/transfer/styles/xcm-bridge.scss

@@ -126,11 +126,6 @@
   font-weight: 700;
 }
 
-.icon--help {
-  font-size: 20px;
-  margin-bottom: -6px;
-}
-
 .container--warning {
   display: flex;
   flex-direction: column;

src/hooks/xcm/useXcmBridge.ts

@@ -246,6 +246,13 @@ export function useXcmBridge(selectedToken: Ref<Asset>) {
       return;
     }
 
+    const isBlankDestAddressToEvm =
+      isWithdrawalEthChain.value && sendingAmount && !inputtedAddress.value;
+    if (isBlankDestAddressToEvm) {
+      errMsg.value = t('warning.blankDestAddress');
+      return;
+    }
+
     if (isDeposit.value) {
       if (!checkIsEnoughMinBal(sendingAmount)) {
         errMsg.value = t('warning.insufficientOriginChainBalance', {

src/i18n/en-US/index.ts

@@ -51,6 +51,7 @@ export default {
     insufficientBalance: 'Insufficient {token} balance',
     insufficientFee: 'Warning! Transaction might fail due to insufficient fee',
     inputtedInvalidDestAddress: 'Inputted invalid destination address',
+    blankDestAddress: 'Destination address is blank',
     inputtedInvalidAddress: 'Inputted invalid address',
     selectedInvalidNetworkInWallet: 'Selected invalid network in your wallet',
     insufficientBridgeAmount: 'Minimum transfer amount is {amount} {token}',

src/v2/repositories/implementations/xcm/InterlayXcmRepository.ts

@@ -4,7 +4,7 @@ import { XcmTokenInformation } from 'src/modules/xcm';
 import { container } from 'src/v2/common';
 import { ExtrinsicPayload, IApi, IApiFactory } from 'src/v2/integration';
 import { Asset } from 'src/v2/models';
-import { XcmChain } from 'src/v2/models/XcmModels';
+import { Chain, XcmChain } from 'src/v2/models/XcmModels';
 import { TokensAccounts } from 'src/v2/repositories/implementations/xcm/AcalaXcmRepository';
 import { Symbols } from 'src/v2/symbols';
 import { XcmRepository } from '../XcmRepository';
@@ -71,6 +71,12 @@ export class InterlayXcmRepository extends XcmRepository {
     token: Asset,
     isNativeToken: boolean
   ): Promise<string> {
+    // Memo: avoid getting a UI error when the `token` is `ASTR` while the `monitorDestChainBalance` function(watch) in useXcmBridge.ts
+    // Reproduce the UI error: assets page -> transfer ASTR -> XCM -> flip the chains -> To: Interlay
+    const interlayChains = [Chain.INTERLAY, Chain.KINTSUGI];
+    if (!interlayChains.includes(token.originChain as Chain)) {
+      return '0';
+    }
     const api = await this.apiFactory.get(chain.endpoint);
 
     try {
@@ -83,6 +89,7 @@ export class InterlayXcmRepository extends XcmRepository {
       return '0';
     }
   }
+
   public async getNativeBalance(address: string, chain: XcmChain): Promise<BN> {
     try {
       const api = await this.apiFactory.get(chain.endpoint);