diff --git a/src/components/dapp-staking/my-staking/components/NewsArea.vue b/src/components/dapp-staking/my-staking/components/NewsArea.vue index 9508299c4..02f118843 100644 --- a/src/components/dapp-staking/my-staking/components/NewsArea.vue +++ b/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 { diff --git a/src/hooks/dapps-staking/useDispatchGetDapps.ts b/src/hooks/dapps-staking/useDispatchGetDapps.ts index ed047fb4e..d7628db1d 100644 --- a/src/hooks/dapps-staking/useDispatchGetDapps.ts +++ b/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(() => 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 => { 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); } diff --git a/src/hooks/dapps-staking/useStake.ts b/src/hooks/dapps-staking/useStake.ts index 8eac0c037..9094a5a42 100644 --- a/src/hooks/dapps-staking/useStake.ts +++ b/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(() => route.fullPath.includes('stake')); - const addressTransferFrom = ref(currentAccount.value); + const addressTransferFrom = ref(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 } ); diff --git a/src/hooks/dapps-staking/useStakingList.ts b/src/hooks/dapps-staking/useStakingList.ts index 1280c172c..f26b0ca37 100644 --- a/src/hooks/dapps-staking/useStakingList.ts +++ b/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(() => store.getters['dapps/getAllDapps']); - const isH160 = computed(() => store.getters['general/isH160Formatted']); const nativeTokenImg = computed(() => getTokenImage({ isNativeToken: true, symbol: nativeTokenSymbol.value }) ); @@ -31,8 +29,8 @@ export function useStakingList() { const setStakingList = async (): Promise => { 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();