diff --git a/packages/react-kit/src/components/modal/components/common/detail/TokenGatedItem.tsx b/packages/react-kit/src/components/modal/components/common/detail/TokenGatedItem.tsx
index e443d8b91..aaebcb883 100644
--- a/packages/react-kit/src/components/modal/components/common/detail/TokenGatedItem.tsx
+++ b/packages/react-kit/src/components/modal/components/common/detail/TokenGatedItem.tsx
@@ -279,7 +279,7 @@ export const TokenGatedItem = ({
},
{ enabled: !!(erc1155Uri && erc1155Uri[0] && tokenIdForImage) }
);
- const { data: { Name: RobloxItemName = "" } = {} } = useRobloxGetItemDetails({
+ const { data: { name: robloxItemName = "" } = {} } = useRobloxGetItemDetails({
itemId: robloxGatedAssetId || "",
options: {
enabled: !!robloxGatedAssetId
@@ -445,7 +445,7 @@ export const TokenGatedItem = ({
width="auto"
>
- {RobloxItemName || erc1155Info} {rangeText}
+ {robloxItemName || erc1155Info} {rangeText}
diff --git a/packages/react-kit/src/hooks/roblox/useRobloxGetItemDetails.ts b/packages/react-kit/src/hooks/roblox/useRobloxGetItemDetails.ts
index af45f3736..c36f081c2 100644
--- a/packages/react-kit/src/hooks/roblox/useRobloxGetItemDetails.ts
+++ b/packages/react-kit/src/hooks/roblox/useRobloxGetItemDetails.ts
@@ -1,5 +1,6 @@
import { useQuery } from "react-query";
import * as yup from "yup";
+import { useRobloxConfigContext } from "./context/useRobloxConfigContext";
type UseRobloxGetItemDetailsProps = {
itemId: string;
@@ -9,41 +10,29 @@ type UseRobloxGetItemDetailsProps = {
};
const responseSchema = yup.object({
- Name: yup.string().required()
+ name: yup.string().required()
});
type PayloadResponse = yup.InferType;
export const useRobloxGetItemDetails = ({
itemId,
options
}: UseRobloxGetItemDetailsProps) => {
- const queryKey = ["roblox-item-details", itemId];
+ const { backendOrigin } = useRobloxConfigContext();
+ const queryKey = ["roblox-item-details", itemId, backendOrigin];
return useQuery(
queryKey,
async (): Promise => {
- // TODO:
- // const endpoint = CONFIG.roblox.getItemDetailsEndpoint2({ itemId });
- // const response = await fetch(endpoint);
- // if (!response.ok) {
- // console.error(
- // `Error while fetching ${endpoint}, status = ${response.status.toString()}`
- // );
- // const endpoint2 = CONFIG.roblox.getItemDetailsEndpoint({ itemId });
- // const response2 = await fetch(endpoint2);
- // if (!response2.ok) {
- // throw new Error(
- // `Error while fetching ${endpoint2}, status = ${response2.status.toString()}`
- // );
- // }
- // const jsonData = await response2.json();
- // const validatedData = await responseSchema.validate(jsonData);
- // return validatedData;
- // }
- // const jsonData = await response.json();
- // const validatedData = await responseSchema.validate(jsonData);
- // return validatedData;
- return {
- Name: "Name should be returned by the backend and not hardcoded"
- };
+ const response = await fetch(
+ `${backendOrigin}/asset-details?assetId=${itemId}`
+ );
+ if (!response.ok) {
+ const errorMessage = `Error while fetching /asset-details, status = ${response.status.toString()}`;
+ console.error(errorMessage);
+ throw new Error(errorMessage);
+ }
+ const jsonData = await response.json();
+ const validatedData = await responseSchema.validate(jsonData);
+ return validatedData;
},
options
);