Dapps loading optimizations

src/components/dapp-staking/dapp/Dapp.vue

@@ -33,8 +33,11 @@ import { useDappRedirect, useDispatchGetDapps, useStakingList } from 'src/hooks'
 import { Path } from 'src/router';
 import { networkParam } from 'src/router/routes';
 import { useStore } from 'src/store';
+import { container } from 'src/v2/common';
 import { DappCombinedInfo } from 'src/v2/models';
-import { computed, defineComponent } from 'vue';
+import { IDappStakingService } from 'src/v2/services';
+import { Symbols } from 'src/v2/symbols';
+import { computed, defineComponent, watch } from 'vue';
 import { useRoute } from 'vue-router';
 
 export default defineComponent({
@@ -81,6 +84,33 @@ export default defineComponent({
       return null;
     });
 
+    // Fetch full dApp model from API. Initially, store contains dapp with props required for the main page.
+    const getDapp = async () => {
+      if (dapp.value?.dapp?.description) {
+        // Full dapp model is already loaded to the store. No need to fetch dapp from API.
+        return;
+      }
+      try {
+        store.commit('general/setLoading', true, { root: true });
+        const service = container.get<IDappStakingService>(Symbols.DappStakingService);
+        const loadedDapp = await service.getDapp(dappAddress.value, 'astar');
+        if (loadedDapp) {
+          store.commit('dapps/updateDapp', loadedDapp);
+        }
+      } finally {
+        store.commit('general/setLoading', false, { root: true });
+      }
+    };
+    watch(
+      [dapps],
+      () => {
+        if (dapps.value.length > 0) {
+          getDapp();
+        }
+      },
+      { immediate: true }
+    );
+
     return {
       Path,
       dapp,

src/hooks/dapps-staking/useDispatchGetDapps.ts

@@ -32,7 +32,7 @@ export function useDispatchGetDapps() {
 
   const getDapps = async (): Promise<void> => {
     const isConnectedWallet = currentNetworkName.value && currentAccount.value;
-    if (isConnectedWallet) {
+    if (isConnectedWallet && dapps.value.length === 0) {
       const address = !currentAccount.value ? '' : currentAccount.value;
       store.dispatch('dapps/getDapps', {
         network: currentNetworkName.value.toLowerCase(),

src/store/dapp-staking/actions.ts

@@ -95,7 +95,7 @@ const actions: ActionTree<State, StateInterface> = {
 
     try {
       // Fetch dapps
-      const dappsUrl = `${TOKEN_API_URL}/v1/${network.toLowerCase()}/dapps-staking/dapps`;
+      const dappsUrl = `${TOKEN_API_URL}/v1/${network.toLowerCase()}/dapps-staking/dappssimple`;
       const service = container.get<IDappStakingService>(Symbols.DappStakingService);
       const address = isValidEvmAddress(currentAccount)
         ? toSS58Address(currentAccount)

src/store/dapp-staking/mutations.ts

@@ -6,6 +6,7 @@ import { DappItem } from '@astar-network/astar-sdk-core';
 
 export interface ContractsMutations<S = State> {
   addDapp(state: S, payload: DappItem): void;
+  updateDapp(state: S, payload: DappItem): void;
   addDappCombinedInfos(state: S, payload: DappCombinedInfo[]): void;
   setMinimumStakingAmount(state: S, payload: string): void;
   setMaxNumberOfStakersPerContract(state: S, payload: number): void;
@@ -29,6 +30,15 @@ const mutation: MutationTree<State> & ContractsMutations = {
     state.dapps = [...state.dapps];
   },
 
+  updateDapp(state: State, payload: DappItem) {
+    let dappIndex = state.dappsCombinedInfo.findIndex(
+      (x) => x.dapp?.address.toLowerCase() === payload.address.toLocaleLowerCase()
+    );
+    if (dappIndex !== -1) {
+      state.dappsCombinedInfo[dappIndex].dapp = payload;
+    }
+  },
+
   setMinimumStakingAmount(state: State, payload: string) {
     state.minimumStakingAmount = payload;
   },