STUD-347: updates marketplace tab to account for 100% token sales

apps/studio/src/api/constants.ts

@@ -11,6 +11,7 @@ export const recaptchaEndpointActionMap: Record<string, string> = {
   getEarnings: "get_earnings",
   getNewmUsdConversionRate: "get_newm_price",
   getSale: "get_sale",
+  getSaleCount: "get_sale_count",
   getSales: "get_sales",
   getStudioClientConfig: "studio_config",
   googleLogin: "login_google",

apps/studio/src/modules/sale/api.ts

@@ -1,4 +1,10 @@
-import { ApiSale, GetSalesParams, GetSalesResponse } from "@newm-web/types";
+import {
+  ApiSale,
+  GetSaleCountParams,
+  GetSaleCountResponse,
+  GetSalesParams,
+  GetSalesResponse,
+} from "@newm-web/types";
 import { transformApiSale } from "@newm-web/utils";
 import {
   EndSaleAmountRequest,
@@ -62,7 +68,44 @@ export const extendedApi = newmApi.injectEndpoints({
         url: "v1/marketplace/sales/end/transaction",
       }),
     }),
+    getSaleCount: build.query<GetSaleCountResponse, GetSaleCountParams | void>({
+      async onQueryStarted(body, { dispatch, queryFulfilled }) {
+        try {
+          await queryFulfilled;
+        } catch (error) {
+          dispatch(
+            setToastMessage({
+              message: "An error occurred while fetching number of songs",
+              severity: "error",
+            })
+          );
+        }
+      },
+
+      providesTags: [Tags.Sale],
 
+      query: ({
+        ids,
+        artistIds,
+        genres,
+        moods,
+        songIds,
+        saleStatuses,
+        ...rest
+      } = {}) => ({
+        method: "GET",
+        params: {
+          ...(ids ? { ids: ids.join(",") } : {}),
+          ...(artistIds ? { artistIds: artistIds.join(",") } : {}),
+          ...(genres ? { genres: genres.join(",") } : {}),
+          ...(moods ? { moods: moods.join(",") } : {}),
+          ...(songIds ? { songIds: songIds.join(",") } : {}),
+          ...(saleStatuses ? { saleStatuses: saleStatuses.join(",") } : {}),
+          ...rest,
+        },
+        url: "v1/marketplace/sales/count",
+      }),
+    }),
     getSales: build.query<GetSalesResponse, GetSalesParams | void>({
       async onQueryStarted(body, { dispatch, queryFulfilled }) {
         try {
@@ -158,6 +201,6 @@ export const extendedApi = newmApi.injectEndpoints({
   }),
 });
 
-export const { useGetSalesQuery } = extendedApi;
+export const { useGetSalesQuery, useGetSaleCountQuery } = extendedApi;
 
 export default extendedApi;

apps/studio/src/modules/sale/hooks.ts

@@ -0,0 +1,38 @@
+import { useEffect } from "react";
+import { useGetSaleCountQuery } from "./api";
+import { useGetUserWalletSongsThunk, useHasSongAccess } from "../song";
+
+/**
+ * Determines whether a user is the owner of a song. Checks
+ * whether a user has stream tokens for the song in their wallet,
+ * as well as whether they have access to the song and it's
+ * currently on sale. The second criteria is a fallback for when a
+ * user doesn't have any of the song's stream tokens in their wallet
+ * because a sale was created for all of them.
+ */
+export const useIsStreamTokenOwner = (songId: string) => {
+  const hasAccess = useHasSongAccess(songId);
+  const [
+    getUserWalletSongs,
+    { data: walletSongsResponse, isLoading: isWalletSongsLoading },
+  ] = useGetUserWalletSongsThunk();
+  const { data: countData, isLoading: isSaleCountLoading } =
+    useGetSaleCountQuery({
+      songIds: [songId],
+    });
+
+  useEffect(() => {
+    getUserWalletSongs({
+      ids: [songId],
+      limit: 1,
+    });
+  }, [getUserWalletSongs, songId]);
+
+  const isLoading = isWalletSongsLoading || isSaleCountLoading;
+  const hasTokens = walletSongsResponse?.data?.songs[0]?.song?.id === songId;
+
+  return {
+    isLoading,
+    isOwner: hasTokens || (hasAccess && !!countData?.count),
+  };
+};

apps/studio/src/modules/sale/index.ts

@@ -1,3 +1,4 @@
 export * from "./api";
+export * from "./hooks";
 export * from "./thunks";
 export * from "./types";

apps/studio/src/pages/home/library/MarketplaceTab/MarketplaceTab.tsx

@@ -1,29 +1,16 @@
-import { useEffect } from "react";
 import { useParams } from "react-router";
 import { Box } from "@mui/material";
-import { useConnectWallet } from "@newm.io/cardano-dapp-wallet-connector";
 import theme from "@newm-web/theme";
-import { ConnectWallet } from "./ConnectWallet";
 import { Sale } from "./Sale";
+import { ConnectWallet } from "./ConnectWallet";
 import { MarketplaceTabSkeleton } from "../../../../components";
 import { SongRouteParams } from "../types";
-import { useGetUserWalletSongsThunk } from "../../../../modules/song";
+import { useIsStreamTokenOwner } from "../../../../modules/sale";
 
 export const MarketplaceTab = () => {
   const { songId } = useParams<"songId">() as SongRouteParams;
-  const [getUserWalletSongs, { data: walletSongsResponse, isLoading }] =
-    useGetUserWalletSongsThunk();
-  const { wallet } = useConnectWallet();
-
-  const hasStreamTokens =
-    walletSongsResponse?.data?.songs[0]?.song?.id === songId;
 
-  useEffect(() => {
-    getUserWalletSongs({
-      ids: [songId],
-      limit: 1,
-    });
-  }, [getUserWalletSongs, songId, wallet]);
+  const { isOwner, isLoading } = useIsStreamTokenOwner(songId);
 
   if (isLoading) {
     return (
@@ -43,7 +30,7 @@ export const MarketplaceTab = () => {
     <Box
       maxWidth={ [theme.inputField.maxWidth, theme.inputField.maxWidth, "700px"] }
     >
-      { hasStreamTokens ? <Sale /> : <ConnectWallet /> }
+      { isOwner ? <Sale /> : <ConnectWallet /> }
     </Box>
   );
 };