feat: update BuyCredits loader to handle project slug and active address

Author: r41ph

web-marketplace/src/pages/BuyCredits/BuyCredits.loader.ts

@@ -13,47 +13,60 @@ import {
   PrivateAccount,
 } from 'lib/queries/react-query/registry-server/getAccounts/getAccountsQuery.types';
 import { getAccountByIdQuery } from 'lib/queries/react-query/registry-server/graphql/getAccountByIdQuery/getAccountByIdQuery';
+import { getProjectBySlugQuery } from 'lib/queries/react-query/registry-server/graphql/getProjectBySlugQuery/getProjectBySlugQuery';
 import { getFromCacheOrFetch } from 'lib/queries/react-query/utils/getFromCacheOrFetch';
 
+import { getIsOnChainId } from 'components/templates/ProjectDetails/ProjectDetails.utils';
+
 type LoaderType = {
   queryClient: QueryClient;
   apolloClientFactory: ApolloClientFactory;
+  address: string | undefined;
 };
 /**
  * Loader function for the Buy Credits page that checks if there are available
  * sell orders in a given project for a given account address
  */
 export const buyCreditsLoader =
-  ({ queryClient, apolloClientFactory }: LoaderType) =>
-  async ({ params: { projectId } }: { params: { projectId?: string } }) => {
+  ({ queryClient, apolloClientFactory, address }: LoaderType) =>
+  async ({
+    params: { projectId: projectIdParam },
+  }: {
+    params: { projectId?: string };
+  }) => {
+    const isOnChainId = getIsOnChainId(projectIdParam);
     const apolloClient =
       apolloClientFactory.getClient() as ApolloClient<NormalizedCacheObject>;
     const marketplaceClient = await getMarketplaceQueryClient();
     const atomStore = getDefaultStore();
     const selectedLanguage = atomStore.get(selectedLanguageAtom);
+    let currentActiveAddress = address;
 
-    const data = queryClient.getQueryData([GET_ACCOUNTS_QUERY_KEY]) as
-      | Accounts
-      | null
-      | undefined;
+    if (!currentActiveAddress) {
+      const data = (await getFromCacheOrFetch({
+        query: { queryKey: [GET_ACCOUNTS_QUERY_KEY] },
+        reactQueryClient: queryClient,
+      })) as Accounts | null | undefined;
 
-    const activeAccountId = data?.activeAccountId;
-    const privAuthenticatedAccounts = data?.authenticatedAccounts;
+      const activeAccountId = data?.activeAccountId;
+      const privAuthenticatedAccounts = data?.authenticatedAccounts;
 
-    const authenticatedAccountsResult = await getAuthenticatedAccounts({
-      privAuthenticatedAccounts,
-      client: apolloClient,
-      languageCode: selectedLanguage,
-      queryClient,
-    });
+      const authenticatedAccountsResult = await getAuthenticatedAccounts({
+        privAuthenticatedAccounts,
+        client: apolloClient,
+        languageCode: selectedLanguage,
+        queryClient,
+      });
 
-    const authenticatedAccounts = authenticatedAccountsResult.map(
-      result => result?.accountById,
-    );
+      const authenticatedAccounts = authenticatedAccountsResult.map(
+        result => result?.accountById,
+      );
 
-    const activeAccount = authenticatedAccounts.find(
-      account => account?.id === activeAccountId,
-    );
+      const activeAccount = authenticatedAccounts.find(
+        account => account?.id === activeAccountId,
+      );
+      currentActiveAddress = activeAccount?.addr ?? undefined;
+    }
 
     const sellOrdersQuery = getSellOrdersExtendedQuery({
       client: marketplaceClient,
@@ -66,9 +79,23 @@ export const buyCreditsLoader =
       reactQueryClient: queryClient,
     });
 
+    const projectBySlugQuery = getProjectBySlugQuery({
+      client: apolloClient,
+      enabled: !!projectIdParam && !isOnChainId,
+      slug: projectIdParam as string,
+      languageCode: selectedLanguage,
+    });
+
+    const projectBySlug = await getFromCacheOrFetch({
+      query: projectBySlugQuery,
+      reactQueryClient: queryClient,
+    });
+    const projectBySlugId = projectBySlug?.data?.projectBySlug?.onChainId;
+    const projectId = isOnChainId ? projectIdParam : projectBySlugId;
+
     const availableSellOrders = allSellOrders?.filter(
       (sellOrder: SellOrderInfo) =>
-        sellOrder.seller !== activeAccount?.addr &&
+        sellOrder.seller !== currentActiveAddress &&
         projectId &&
         sellOrder.batchDenom?.startsWith(projectId),
     );