fix: account unification modals

src/components/assets/Account.vue

@@ -43,7 +43,7 @@
               <span class="text--accent">{{ $n(totalBal) }} USD</span>
             </div>
             <div class="column__icons">
-              <div>
+              <div v-if="isAccountUnification">
                 <button
                   type="button"
                   class="icon--primary icon--account"
@@ -154,8 +154,13 @@ export default defineComponent({
     const isLockdropAccount = ref<boolean>(false);
     const isModalLockdropWarning = ref<boolean>(true);
     const { toggleEvmWalletSchema } = useConnectWallet();
-    const { currentAccount, currentAccountName, multisig, showAccountUnificationModal } =
-      useAccount();
+    const {
+      currentAccount,
+      currentAccountName,
+      multisig,
+      showAccountUnificationModal,
+      isAccountUnification,
+    } = useAccount();
     const { balance, isLoadingBalance } = useBalance(currentAccount);
     const { nativeTokenUsd } = usePrice();
     const { requestSignature } = useEvmAccount();
@@ -284,6 +289,7 @@ export default defineComponent({
       supportWalletObj,
       signatoryIconWallet,
       isModalLockdropWarning,
+      isAccountUnification,
       handleModalLockdropWarning,
       getShortenAddress,
       copyAddress,

src/components/header/modals/ModalConnectWallet.vue

@@ -204,15 +204,9 @@ export default defineComponent({
   },
   setup(props) {
     const store = useStore();
-    const { currentAccountName, disconnectAccount } = useAccount();
+    const { currentAccountName, disconnectAccount, isAccountUnification } = useAccount();
     const isClosing = ref<boolean>(false);
     const { currentNetworkIdx } = useNetworkInfo();
-    const isAccountUnification = computed<boolean>(() => {
-      return !!(
-        (currentNetworkIdx.value === endpointKey.SHIBUYA && currentAccountName) ||
-        currentNetworkIdx.value === endpointKey.LOCAL
-      );
-    });
 
     const closeModal = async (): Promise<void> => {
       isClosing.value = true;

src/hooks/useAccount.ts

@@ -3,13 +3,15 @@ import { LOCAL_STORAGE } from 'src/config/localStorage';
 import { SupportMultisig } from 'src/config/wallets';
 import { Multisig } from 'src/modules/multisig';
 import { useStore } from 'src/store';
-import { SubstrateAccount, UnifiedAccount } from 'src/store/general/state';
+import { SubstrateAccount } from 'src/store/general/state';
 import { container } from 'src/v2/common';
 import { IEventAggregator, UnifyAccountMessage } from 'src/v2/messaging';
 import { IdentityRepository } from 'src/v2/repositories/implementations/IdentityRepository';
 import { IAccountUnificationService } from 'src/v2/services';
 import { Symbols } from 'src/v2/symbols';
 import { computed, ref, watch } from 'vue';
+import { useNetworkInfo } from './useNetworkInfo';
+import { endpointKey } from 'src/config/chainEndpoints';
 
 export const ETHEREUM_EXTENSION = 'Ethereum Extension';
 
@@ -18,6 +20,7 @@ const DELAY = 100;
 
 export const useAccount = () => {
   const store = useStore();
+  const { currentNetworkIdx } = useNetworkInfo();
   const multisig = ref<Multisig>();
 
   const isH160Formatted = computed(() => store.getters['general/isH160Formatted']);
@@ -26,6 +29,13 @@ export const useAccount = () => {
   const currentAddress = computed(() => store.getters['general/selectedAddress']);
   const unifiedAccount = computed(() => store.getters['general/getUnifiedAccount']);
 
+  const isAccountUnification = computed<boolean>(() => {
+    return !!(
+      (currentNetworkIdx.value === endpointKey.SHIBUYA && currentAccountName) ||
+      currentNetworkIdx.value === endpointKey.LOCAL
+    );
+  });
+
   // Memo: converts EVM wallet address to SS58 for dApp staking queries
   const senderSs58Account = computed<string>(() => {
     if (isValidEvmAddress(currentAccount.value)) {
@@ -191,6 +201,7 @@ export const useAccount = () => {
     senderSs58Account,
     multisig,
     isMultisig,
+    isAccountUnification,
     disconnectAccount,
     getSS58Address,
     showAccountUnificationModal,

src/hooks/wallet/useAccountUnification.ts

@@ -5,6 +5,7 @@ import {
   getEvmGas,
   getIndividualClaimTxs,
   toSS58Address,
+  wait,
 } from '@astar-network/astar-sdk-core';
 import { SubmittableExtrinsic } from '@polkadot/api/types';
 import { ISubmittableResult } from '@polkadot/types/types';
@@ -53,7 +54,7 @@ export const useAccountUnification = () => {
   const isSendingXc20Tokens = ref<boolean>(false);
   const isLoadingDappStaking = ref<boolean>(false);
   const accountName = ref<string>('');
-  const isStaking = ref<boolean>(true);
+  const isStaking = ref<boolean>(false);
   const transferXc20CallData = ref<string>('');
   const transferXc20Tokens = ref<TransferXc20Token[]>([]);
 
@@ -158,6 +159,8 @@ export const useAccountUnification = () => {
             console.error(error);
             return null;
           } finally {
+            // Memo: give some time to sync in modals UI
+            await wait(500);
             isLoadingDappStaking.value = false;
           }
         })
@@ -328,7 +331,6 @@ export const useAccountUnification = () => {
     return unificationService.unifyAccounts(nativeAddress, evmAddress, accountName);
   };
 
-  watch([currentAccount], setWeb3);
   watch([web3], updateEvmProvider);
   watch([selectedEvmAddress, dapps, era], checkStakerInfo);
   watch([xcmAssets, web3], setTransferXc20CallData);

src/i18n/en-US/index.ts

@@ -206,7 +206,7 @@ export default {
       haveStakingBalance:
         'You have some Staking balance. Those staked token will not be merged to the unified account. Please unstake first.',
       unifiedAccountName: 'Unified Account Name',
-      accountIcon: 'Account icon (EVM NFT can only be selected after creating the account)',
+      accountIcon: 'Account icon (we are working on adding your own NFT as an account icon)',
       balanceTransferred: 'Your balance in the EVM account are going to be transferred.',
       readyToUnify:
         'Now xcTokens are sent and you are ready to unify both accounts! Please check below before confirm.',