builders item bug fix

src/pages/Builders/pages/BuildersItem/index.vue

@@ -484,7 +484,7 @@ const route = useRoute()
 const { provider, buildersContract, buildersContractDetails, balances } =
   storeToRefs(useWeb3ProvidersStore())
 
-const { client: buildersApolloClient } = useSecondApolloClient()
+const { client: buildersApolloClient, clients } = useSecondApolloClient()
 
 const { t } = useI18n()
 
@@ -502,6 +502,14 @@ const { data: editPoolDeadline } = useLoad(undefined, async () =>
   buildersContract.value.providerBased.value.editPoolDeadline(),
 )
 
+const currentClient = computed(() => {
+  const client = Object.entries(clients.value).find(
+    item => item[0] === route.query.chain,
+  )?.[1]
+
+  return client || buildersApolloClient.value
+})
+
 const {
   data: buildersData,
   isLoaded,
@@ -516,7 +524,7 @@ const {
   { buildersProject: null, buildersProjectUserAccount: null },
   async () => {
     const [{ data: buildersProjectsResponse }] = await Promise.all([
-      buildersApolloClient.value.query<
+      currentClient.value.query<
         GetBuildersProjectQuery,
         GetBuildersProjectQueryVariables
       >({
@@ -528,20 +536,19 @@ const {
       }),
     ])
 
-    const { data: userAccountInProject } =
-      await buildersApolloClient.value.query<
-        GetUserAccountBuildersProjectQuery,
-        GetUserAccountBuildersProjectQueryVariables
-      >({
-        query: GetUserAccountBuildersProject,
-        fetchPolicy: 'network-only',
-        variables: {
-          address: provider.value.selectedAddress,
-          // eslint-disable-next-line
-          // @ts-ignore
-          project_id: buildersProjectsResponse.buildersProject?.id,
-        },
-      })
+    const { data: userAccountInProject } = await currentClient.value.query<
+      GetUserAccountBuildersProjectQuery,
+      GetUserAccountBuildersProjectQueryVariables
+    >({
+      query: GetUserAccountBuildersProject,
+      fetchPolicy: 'network-only',
+      variables: {
+        address: provider.value.selectedAddress,
+        // eslint-disable-next-line
+        // @ts-ignore
+        project_id: buildersProjectsResponse.buildersProject?.id,
+      },
+    })
 
     return {
       buildersProject: buildersProjectsResponse.buildersProject,
@@ -586,7 +593,7 @@ const withdrawalUnlockTime = computed(() => {
 
 const loadStakers = async (limit = DEFAULT_PAGE_LIMIT) => {
   try {
-    const { data } = await buildersApolloClient.value.query<
+    const { data } = await currentClient.value.query<
       GetBuildersProjectUsersQuery,
       GetBuildersProjectUsersQueryVariables
     >({
@@ -608,6 +615,7 @@ const loadStakers = async (limit = DEFAULT_PAGE_LIMIT) => {
 watch(
   [
     () => route.query.user,
+    () => route.query.chain,
     () => route.query.network,
     () => buildersData.value.buildersProject,
     stakersCurrentPage,

src/pages/Builders/pages/BuildersList/components/BuildersTable/components/BuildersTableItem.vue

@@ -25,10 +25,16 @@
           {{ builderProject.name }}
         </span>
 
-        <template v-if="chain">
+        <template v-if="builderProject.chain">
           <img
-            :src="$config.chainsMap[getEthereumChainsName(chain)].iconUrls?.[0]"
-            :alt="$config.chainsMap[getEthereumChainsName(chain)].chainName"
+            :src="
+              $config.chainsMap[getEthereumChainsName(builderProject.chain)]
+                .iconUrls?.[0]
+            "
+            :alt="
+              $config.chainsMap[getEthereumChainsName(builderProject.chain)]
+                .chainName
+            "
             class="ml-1 h-4 w-4"
           />
         </template>
@@ -71,6 +77,7 @@
         :to="{
           name: $routes.appBuildersItem,
           params: { id: builderProject.id },
+          query: { chain: builderProject.chain },
         }"
       ></RouterLink>
       <app-button
@@ -105,6 +112,7 @@
       :to="{
         name: $routes.appBuildersItem,
         params: { id: builderProject.id },
+        query: { chain: builderProject.chain },
       }"
     >
       <img
@@ -168,33 +176,27 @@
   <builders-stake-modal
     v-model:is-shown="isStakeModalShown"
     :builder-project="builderProject"
-    :chain="chain"
+    :chain="builderProject.chain"
     @staked="handleStaked"
   />
 </template>
 
 <script setup lang="ts">
 import { AppButton } from '@/common'
 import { formatBalance, humanizeTime } from '@/helpers'
-import { BuilderProjectFragment } from '@/types/graphql'
+import { BuilderProject } from '@/types'
 import { time } from '@distributedlab/tools'
 import BuildersStakeModal from '@/pages/Builders/components/BuildersStakeModal.vue'
 import { inject, ref } from 'vue'
 import { cn } from '@/theme/utils'
 import predefinedBuildersMeta from '@/assets/predefined-builders-meta.json'
 import { storeToRefs } from 'pinia'
 import { useWeb3ProvidersStore } from '@/store'
-import { EthereumChains, getEthereumChainsName } from '@config'
+import { getEthereumChainsName } from '@config'
 
-const props = withDefaults(
-  defineProps<{
-    builderProject: BuilderProjectFragment
-    chain?: EthereumChains
-  }>(),
-  {
-    chain: undefined,
-  },
-)
+const props = defineProps<{
+  builderProject: BuilderProject
+}>()
 
 const { provider } = storeToRefs(useWeb3ProvidersStore())
 

src/pages/Builders/pages/BuildersList/components/BuildersTable/index.vue

@@ -51,28 +51,24 @@
       v-for="el in buildersProjects"
       :key="el.id"
       :builder-project="el"
-      :chain="el.chain"
     />
   </div>
 </template>
 
 <script setup lang="ts">
 import BuildersTableItem from './components/BuildersTableItem.vue'
-import {
-  BuilderProjectFragment,
-  BuildersProject_OrderBy,
-} from '@/types/graphql'
+import { BuildersProject_OrderBy } from '@/types/graphql'
 import { cn } from '@/theme/utils'
 import SortingIconButton from './components/SortingIconButton.vue'
 import { AdditionalBuildersOrderBy } from '@/enums'
-import { EthereumChains } from '@config'
+import { BuilderProject } from '@/types'
 
 const orderByModel = defineModel<string>('orderByModel')
 const orderDirectionModel = defineModel<string>('orderDirectionModel')
 
 withDefaults(
   defineProps<{
-    buildersProjects: ({ chain?: EthereumChains } & BuilderProjectFragment)[]
+    buildersProjects: BuilderProject[]
   }>(),
   {},
 )

src/types/builders.types.ts

@@ -0,0 +1,4 @@
+import { EthereumChains } from '@config'
+import { BuilderProjectFragment } from '@/types/graphql'
+
+export type BuilderProject = { chain?: EthereumChains } & BuilderProjectFragment

src/types/index.ts

@@ -7,6 +7,7 @@ export * as InfoCardType from './info-card.types'
 export * as InfoDashboardType from './info-dashboard.types'
 export * as Mor20EcosystemType from './mor20-ecosystem.types'
 export * from './subnet.types'
+export * from './builders.types'
 export * from './referral.types'
 
 export * from './pool-data.types'