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 );