fix: fetch dApps staking data after changing accounts (#955)

* fix: fetch staked dapps data for EVM wallets

* fix: clean up

* fix: position for page column

Author: impelcrypto

src/components/dapp-staking/my-staking/components/NewsArea.vue

@@ -267,7 +267,7 @@ export default defineComponent({
   color: $navy-1;
 
   @media (min-width: $md) {
-    bottom: 35px;
+    bottom: 48px;
   }
 }
 .colum--current-page {

src/hooks/dapps-staking/useDispatchGetDapps.ts

@@ -1,13 +1,12 @@
 import { useAccount, useNetworkInfo } from 'src/hooks';
 import { wait } from '@astar-network/astar-sdk-core';
 import { useStore } from 'src/store';
-import { computed, watchEffect } from 'vue';
+import { computed, watch } from 'vue';
 
 export function useDispatchGetDapps() {
   const store = useStore();
   const { currentNetworkName } = useNetworkInfo();
   const { currentAccount } = useAccount();
-  const isH160 = computed<boolean>(() => store.getters['general/isH160Formatted']);
   const dapps = computed(() => store.getters['dapps/getAllDapps']);
 
   // Memo: invoke this function whenever the users haven't connect to wallets
@@ -32,7 +31,7 @@ export function useDispatchGetDapps() {
 
   const getDapps = async (): Promise<void> => {
     const isConnectedWallet = currentNetworkName.value && currentAccount.value;
-    if (isConnectedWallet && dapps.value.length === 0) {
+    if (isConnectedWallet) {
       const address = !currentAccount.value ? '' : currentAccount.value;
       store.dispatch('dapps/getDapps', {
         network: currentNetworkName.value.toLowerCase(),
@@ -43,7 +42,5 @@ export function useDispatchGetDapps() {
     }
   };
 
-  watchEffect(async () => {
-    await getDapps();
-  });
+  watch([currentAccount, currentNetworkName], getDapps);
 }

src/hooks/dapps-staking/useStake.ts

@@ -15,10 +15,10 @@ import { useI18n } from 'vue-i18n';
 export function useStake() {
   const router = useRouter();
   const route = useRoute();
-  const { currentAccount } = useAccount();
+  const { currentAccount, senderSs58Account } = useAccount();
   const { stakingList } = useStakingList();
   const isStakePage = computed<boolean>(() => route.fullPath.includes('stake'));
-  const addressTransferFrom = ref<string>(currentAccount.value);
+  const addressTransferFrom = ref<string>(senderSs58Account.value);
   const { t } = useI18n();
   const store = useStore();
 
@@ -34,8 +34,8 @@ export function useStake() {
       const item = stakingListRef.find((it) => it.address === addressTransferFrom.value);
       if (!item) return defaultData;
 
-      const name = item.name === currentAccount.value ? 'Transferable Balance' : item.name;
-      const isNominationTransfer = item.address !== currentAccount.value;
+      const name = item.name === senderSs58Account.value ? 'Transferable Balance' : item.name;
+      const isNominationTransfer = item.address !== senderSs58Account.value;
       const formattedText = `${name} (${balanceFormatter(item.balance, ASTAR_DECIMALS)})`;
       return { text: formattedText, item, isNominationTransfer };
     } catch (error) {
@@ -97,9 +97,9 @@ export function useStake() {
   };
 
   watch(
-    [currentAccount],
+    [senderSs58Account],
     () => {
-      addressTransferFrom.value = currentAccount.value;
+      addressTransferFrom.value = senderSs58Account.value;
     },
     { immediate: true }
   );

src/hooks/dapps-staking/useStakingList.ts

@@ -1,20 +1,18 @@
-import { $web3 } from 'boot/api';
-import { DappCombinedInfo } from 'src/v2/models/DappsStaking';
 import { ethers } from 'ethers';
 import { useAccount, useBalance, useNetworkInfo } from 'src/hooks';
 import { StakingData } from 'src/modules/dapp-staking/index';
 import { getTokenImage } from 'src/modules/token';
 import { useStore } from 'src/store';
-import { computed, ref, watchEffect } from 'vue';
+import { DappCombinedInfo } from 'src/v2/models/DappsStaking';
+import { computed, ref, watch } from 'vue';
 
 export function useStakingList() {
-  const { currentAccount } = useAccount();
-  const { accountData } = useBalance(currentAccount);
+  const { senderSs58Account } = useAccount();
+  const { accountData } = useBalance(senderSs58Account);
   const { nativeTokenSymbol } = useNetworkInfo();
   const store = useStore();
   const isLoading = computed(() => store.getters['general/isLoading']);
   const dapps = computed<DappCombinedInfo[]>(() => store.getters['dapps/getAllDapps']);
-  const isH160 = computed(() => store.getters['general/isH160Formatted']);
   const nativeTokenImg = computed<string>(() =>
     getTokenImage({ isNativeToken: true, symbol: nativeTokenSymbol.value })
   );
@@ -31,8 +29,8 @@ export function useStakingList() {
   const setStakingList = async (): Promise<void> => {
     const dappsRef = dapps.value;
     const accountDataRef = accountData.value;
-    const currentAccountRef = currentAccount.value;
-    if (!accountDataRef || !currentAccountRef) return;
+    const senderSs58AccountRef = senderSs58Account.value;
+    if (!accountDataRef || !senderSs58AccountRef) return;
     try {
       const data = dappsRef.map((it) => {
         const accountStakingAmount = it.stakerInfo.accountStakingAmount;
@@ -48,12 +46,9 @@ export function useStakingList() {
         }
       });
 
-      const balance = isH160.value
-        ? await $web3.value!.eth.getBalance(currentAccount.value)
-        : accountDataRef.getUsableFeeBalance().toString();
-
+      const balance = accountDataRef.getUsableFeeBalance().toString();
       data.unshift({
-        address: currentAccountRef,
+        address: senderSs58AccountRef,
         name: 'Transferable Balance',
         balance,
         iconUrl: nativeTokenImg.value,
@@ -65,8 +60,8 @@ export function useStakingList() {
     }
   };
 
-  watchEffect(async () => {
-    if (isLoading.value || !dapps.value) {
+  watch([isLoading, senderSs58Account, accountData], async () => {
+    if (isLoading.value || !dapps.value || !senderSs58Account.value) {
       return;
     }
     await setStakingList();