@bosonprotocol/react-kit 0.30.0-alpha.3 → 0.30.0-alpha.4

package/dist/esm/hooks/contracts/erc721/useErc721TokenUris.js

@@ -0,0 +1,22 @@
+import { useQuery } from "react-query";
+export const useErc721TokenUris = (props, { enabled, coreSDK }) => {
+    return useQuery(["useErc721TokenUris", coreSDK.uuid, props], async () => {
+        const { pairsContractTokens } = props;
+        if (!pairsContractTokens) {
+            return;
+        }
+        return (await Promise.all(pairsContractTokens.map(async (pair) => pair && pair.contractAddress && pair.tokenIds
+            ? await Promise.allSettled(pair.tokenIds.map((tokenId) => tokenId && pair.contractAddress
+                ? coreSDK.erc721TokenUri({
+                    contractAddress: pair.contractAddress,
+                    tokenId
+                })
+                : null))
+            : null))).map((promiseSettled) => promiseSettled
+            ? promiseSettled.map((promiseSettled) => promiseSettled.status === "fulfilled"
+                ? promiseSettled.value
+                : null)
+            : null);
+    }, { enabled });
+};
+//# sourceMappingURL=useErc721TokenUris.js.map

package/dist/esm/hooks/contracts/erc721/useErc721TokenUris.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useErc721TokenUris.js","sourceRoot":"","sources":["../../../../../src/hooks/contracts/erc721/useErc721TokenUris.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,MAAM,CAAC,MAAM,kBAAkB,GAAG,CAChC,KAOC,EACD,EAAE,OAAO,EAAE,OAAO,EAAsD,EACxE,EAAE;IACF,OAAO,QAAQ,CACb,CAAC,oBAAoB,EAAE,OAAO,CAAC,IAAI,EAAE,KAAK,CAAC,EAC3C,KAAK,IAAI,EAAE;QACT,MAAM,EAAE,mBAAmB,EAAE,GAAG,KAAK,CAAC;QACtC,IAAI,CAAC,mBAAmB,EAAE;YACxB,OAAO;SACR;QAED,OAAO,CACL,MAAM,OAAO,CAAC,GAAG,CACf,mBAAmB,CAAC,GAAG,CAAC,KAAK,EAAE,IAAI,EAAE,EAAE,CACrC,IAAI,IAAI,IAAI,CAAC,eAAe,IAAI,IAAI,CAAC,QAAQ;YAC3C,CAAC,CAAC,MAAM,OAAO,CAAC,UAAU,CACtB,IAAI,CAAC,QAAQ,CAAC,GAAG,CAAC,CAAC,OAAO,EAAE,EAAE,CAC5B,OAAO,IAAI,IAAI,CAAC,eAAe;gBAC7B,CAAC,CAAC,OAAO,CAAC,cAAc,CAAC;oBACrB,eAAe,EAAE,IAAI,CAAC,eAAe;oBACrC,OAAO;iBACR,CAAC;gBACJ,CAAC,CAAC,IAAI,CACT,CACF;YACH,CAAC,CAAC,IAAI,CACT,CACF,CACF,CAAC,GAAG,CAAC,CAAC,cAAc,EAAE,EAAE,CACvB,cAAc;YACZ,CAAC,CAAC,cAAc,CAAC,GAAG,CAAC,CAAC,cAAc,EAAE,EAAE,CACpC,cAAc,CAAC,MAAM,KAAK,WAAW;gBACnC,CAAC,CAAC,cAAc,CAAC,KAAK;gBACtB,CAAC,CAAC,IAAI,CACT;YACH,CAAC,CAAC,IAAI,CACT,CAAC;IACJ,CAAC,EACD,EAAE,OAAO,EAAE,CACZ,CAAC;AACJ,CAAC,CAAC"}

package/dist/esm/hooks/contracts/useGetTokenUriImages.d.ts

@@ -0,0 +1,10 @@
+export declare const useGetTokenUriImages: (props: {
+    pairsTokenUrisIds: ({
+        tokenUris: (string | null | undefined)[] | undefined | null;
+        tokenIds: (string | null | undefined)[] | undefined | null;
+    } | null)[] | undefined;
+    ipfsGateway?: string;
+}, { enabled }: {
+    enabled: boolean;
+}) => import("react-query").UseQueryResult<string[][], unknown>;
+//# sourceMappingURL=useGetTokenUriImages.d.ts.map

package/dist/esm/hooks/contracts/useGetTokenUriImages.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGetTokenUriImages.d.ts","sourceRoot":"","sources":["../../../../src/hooks/contracts/useGetTokenUriImages.ts"],"names":[],"mappings":"AAcA,eAAO,MAAM,oBAAoB,UACxB;IACL,iBAAiB,EACb,CAAC;QACC,SAAS,EAAE,CAAC,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,GAAG,SAAS,GAAG,IAAI,CAAC;QAC5D,QAAQ,EAAE,CAAC,MAAM,GAAG,IAAI,GAAG,SAAS,CAAC,EAAE,GAAG,SAAS,GAAG,IAAI,CAAC;KAC5D,GAAG,IAAI,CAAC,EAAE,GACX,SAAS,CAAC;IAEd,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;aACuB,OAAO;+DAoGhC,CAAC"}

package/dist/esm/hooks/contracts/useGetTokenUriImages.js

@@ -0,0 +1,90 @@
+import { getImageUrl } from "../../lib/images/images";
+import { useQuery } from "react-query";
+const replaceUrlWithId = ({ tokenId, url }) => {
+    const urlWithIdReplaced = url.replace("{id}", tokenId);
+    return urlWithIdReplaced;
+};
+export const useGetTokenUriImages = (props, { enabled }) => {
+    const { pairsTokenUrisIds, ipfsGateway = "https://ipfs.io/ipfs" } = props;
+    return useQuery(["useGetTokenUriImages", props], async () => {
+        if (!pairsTokenUrisIds) {
+            return [];
+        }
+        try {
+            return await Promise.all(pairsTokenUrisIds.map(async (pair) => {
+                if (!pair) {
+                    return Promise.resolve([]);
+                }
+                const { tokenIds, tokenUris } = pair;
+                if (!tokenIds ||
+                    !tokenUris ||
+                    tokenUris.length !== tokenIds.length) {
+                    return Promise.resolve([]);
+                }
+                return await Promise.all(tokenUris.map(async (tokenUri, index) => {
+                    const tokenId = tokenIds[index];
+                    if (!tokenUri || !tokenId) {
+                        return "";
+                    }
+                    if (tokenUri.startsWith("data:application/json")) {
+                        const base64Data = tokenUri.substring(tokenUri.indexOf(",") + 1);
+                        const jsonValue = window.atob(base64Data);
+                        const parsedJson = JSON.parse(jsonValue);
+                        const image = parsedJson.image;
+                        const imageUrl = getImageUrl(image, ipfsGateway);
+                        const urlWithIdReplaced = replaceUrlWithId({
+                            url: imageUrl,
+                            tokenId
+                        });
+                        return urlWithIdReplaced;
+                    }
+                    if (tokenUri.startsWith("ipfs")) {
+                        const imageUrl = getImageUrl(tokenUri, ipfsGateway);
+                        const urlWithIdReplaced = replaceUrlWithId({
+                            url: imageUrl,
+                            tokenId
+                        });
+                        const fetchedMetadata = await fetch(urlWithIdReplaced);
+                        try {
+                            const jsonMetadata = await fetchedMetadata.json();
+                            const imageUrl = getImageUrl(jsonMetadata.image, ipfsGateway);
+                            return imageUrl;
+                        }
+                        catch (error) {
+                            console.debug(error);
+                        }
+                        return urlWithIdReplaced;
+                    }
+                    if (tokenUri.startsWith("http")) {
+                        const urlWithIdReplaced = replaceUrlWithId({
+                            url: tokenUri,
+                            tokenId
+                        });
+                        const fetchedMetadata = await fetch(urlWithIdReplaced);
+                        try {
+                            const jsonMetadata = await fetchedMetadata.json();
+                            const image = jsonMetadata.image;
+                            const imageUrl = getImageUrl(image, ipfsGateway);
+                            return imageUrl;
+                        }
+                        catch (error) {
+                            console.debug(error);
+                        }
+                        return urlWithIdReplaced;
+                    }
+                    if (tokenUri.startsWith("data:image")) {
+                        return tokenUri;
+                    }
+                    return "";
+                }));
+            }));
+        }
+        catch (err) {
+            console.error(err);
+            throw err;
+        }
+    }, {
+        enabled
+    });
+};
+//# sourceMappingURL=useGetTokenUriImages.js.map

package/dist/esm/hooks/contracts/useGetTokenUriImages.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"useGetTokenUriImages.js","sourceRoot":"","sources":["../../../../src/hooks/contracts/useGetTokenUriImages.ts"],"names":[],"mappings":"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"}

package/dist/esm/hooks/index.d.ts

@@ -8,13 +8,13 @@ export * from "./useHandleText";
 export * from "./useExchanges";
 export * from "./useMetaTx";
 export * from "../components/widgets/finance/useOffersBacked";
-export * from "./contracts/useGetTokenUriImage";
+export * from "./contracts/useGetTokenUriImages";
 export * from "./products/useProductByUuid";
 export * from "./bundles/useBundleByUuid";
-export * from "./contracts/erc721/useErc721TokenUri";
+export * from "./contracts/erc721/useErc721TokenUris";
 export * from "./contracts/erc721/useErc721Name";
 export * from "./contracts/erc721/useErc721OwnerOf";
 export * from "./contracts/erc1155/useErc1155Name";
-export * from "./contracts/erc1155/useErc1155Uri";
+export * from "./contracts/erc1155/useErc1155Uris";
 export * from "./uniswap/useIsWindowVisible";
 //# sourceMappingURL=index.d.ts.map

package/dist/esm/hooks/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,SAAS,CAAC;AACxB,cAAc,8BAA8B,CAAC;AAC7C,cAAc,uCAAuC,CAAC;AACtD,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,+CAA+C,CAAC;AAC9D,cAAc,iCAAiC,CAAC;AAChD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sCAAsC,CAAC;AACrD,cAAc,kCAAkC,CAAC;AACjD,cAAc,qCAAqC,CAAC;AACpD,cAAc,oCAAoC,CAAC;AACnD,cAAc,mCAAmC,CAAC;AAClD,cAAc,8BAA8B,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,SAAS,CAAC;AACxB,cAAc,8BAA8B,CAAC;AAC7C,cAAc,uCAAuC,CAAC;AACtD,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,+CAA+C,CAAC;AAC9D,cAAc,kCAAkC,CAAC;AACjD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uCAAuC,CAAC;AACtD,cAAc,kCAAkC,CAAC;AACjD,cAAc,qCAAqC,CAAC;AACpD,cAAc,oCAAoC,CAAC;AACnD,cAAc,oCAAoC,CAAC;AACnD,cAAc,8BAA8B,CAAC"}

package/dist/esm/hooks/index.js

@@ -8,13 +8,13 @@ export * from "./useHandleText";
 export * from "./useExchanges";
 export * from "./useMetaTx";
 export * from "../components/widgets/finance/useOffersBacked";
-export * from "./contracts/useGetTokenUriImage";
+export * from "./contracts/useGetTokenUriImages";
 export * from "./products/useProductByUuid";
 export * from "./bundles/useBundleByUuid";
-export * from "./contracts/erc721/useErc721TokenUri";
+export * from "./contracts/erc721/useErc721TokenUris";
 export * from "./contracts/erc721/useErc721Name";
 export * from "./contracts/erc721/useErc721OwnerOf";
 export * from "./contracts/erc1155/useErc1155Name";
-export * from "./contracts/erc1155/useErc1155Uri";
+export * from "./contracts/erc1155/useErc1155Uris";
 export * from "./uniswap/useIsWindowVisible";
 //# sourceMappingURL=index.js.map

package/dist/esm/hooks/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,SAAS,CAAC;AACxB,cAAc,8BAA8B,CAAC;AAC7C,cAAc,uCAAuC,CAAC;AACtD,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,+CAA+C,CAAC;AAC9D,cAAc,iCAAiC,CAAC;AAChD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,sCAAsC,CAAC;AACrD,cAAc,kCAAkC,CAAC;AACjD,cAAc,qCAAqC,CAAC;AACpD,cAAc,oCAAoC,CAAC;AACnD,cAAc,mCAAmC,CAAC;AAClD,cAAc,8BAA8B,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/hooks/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAClE,cAAc,SAAS,CAAC;AACxB,cAAc,8BAA8B,CAAC;AAC7C,cAAc,uCAAuC,CAAC;AACtD,cAAc,qBAAqB,CAAC;AACpC,cAAc,iBAAiB,CAAC;AAChC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,aAAa,CAAC;AAC5B,cAAc,+CAA+C,CAAC;AAC9D,cAAc,kCAAkC,CAAC;AACjD,cAAc,6BAA6B,CAAC;AAC5C,cAAc,2BAA2B,CAAC;AAC1C,cAAc,uCAAuC,CAAC;AACtD,cAAc,kCAAkC,CAAC;AACjD,cAAc,qCAAqC,CAAC;AACpD,cAAc,oCAAoC,CAAC;AACnD,cAAc,oCAAoC,CAAC;AACnD,cAAc,8BAA8B,CAAC"}

package/dist/esm/lib/ipfs/ipfs.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ipfs.d.ts","sourceRoot":"","sources":["../../../../src/lib/ipfs/ipfs.ts"],"names":[],"mappings":"AAGA,wBAAgB,iBAAiB,CAC/B,GAAG,EAAE,MAAM,EACX,IAAI,EAAE;IACJ,OAAO,EAAE,MAAM,CAAC;CACjB,GACA,MAAM,CAoBR"}
+{"version":3,"file":"ipfs.d.ts","sourceRoot":"","sources":["../../../../src/lib/ipfs/ipfs.ts"],"names":[],"mappings":"AAKA,wBAAgB,iBAAiB,CAC/B,GAAG,EAAE,MAAM,EACX,IAAI,EAAE;IACJ,OAAO,EAAE,MAAM,CAAC;CACjB,GACA,MAAM,CA4BR"}

package/dist/esm/lib/ipfs/ipfs.js

@@ -1,21 +1,26 @@
 import { CID } from "multiformats/cid";
 import { sanitizeUrl } from "../url/url";
+const lensIpfs = "https://lens.infura-ipfs.io/ipfs/";
 export function getIpfsGatewayUrl(uri, opts) {
     if (!uri) {
         return uri;
     }
+    if (uri.startsWith(lensIpfs)) {
+        return uri;
+    }
     const { gateway } = opts;
-    const cidAndRest = uri.replaceAll("ipfs://", ""); // it may be ipfs://CID/123
     try {
-        const [cid] = cidAndRest.split("/", 1); // it may be CID/123
+        const url = new URL(uri.startsWith("ipfs://") ? uri.replace("ipfs://", "https://") : uri);
+        const hostIndex = uri.toLowerCase().indexOf(url.host.toLowerCase());
+        const cid = uri.substring(hostIndex, hostIndex + url.host.length); // we cannot use url.host because the browser changes it to lowercase so a lowercased CID would not be valid
         CID.parse(cid);
-        return `${gateway}/${cidAndRest}`.replace(/([^:]\/)\/+/g, "$1"); // remove double slash
+        return `${gateway}/${cid}${url.pathname === "/" ? "" : url.pathname}${url.search}`.replace(/([^:]\/)\/+/g, "$1"); // remove double slash
     }
     catch (error) {
         // If CID.parse throws, then it is either not a valid CID or just an URL
         const cidFromUrl = uri.split("/ipfs/")[1];
         if (cidFromUrl) {
-            return getIpfsGatewayUrl(cidFromUrl.split("?")[0], opts);
+            return getIpfsGatewayUrl(`ipfs://${cidFromUrl}`, opts);
         }
         return sanitizeUrl(uri);
     }

package/dist/esm/lib/ipfs/ipfs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ipfs.js","sourceRoot":"","sources":["../../../../src/lib/ipfs/ipfs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAEzC,MAAM,UAAU,iBAAiB,CAC/B,GAAW,EACX,IAEC;IAED,IAAI,CAAC,GAAG,EAAE;QACR,OAAO,GAAG,CAAC;KACZ;IACD,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;IACzB,MAAM,UAAU,GAAG,GAAG,CAAC,UAAU,CAAC,SAAS,EAAE,EAAE,CAAC,CAAC,CAAC,2BAA2B;IAE7E,IAAI;QACF,MAAM,CAAC,GAAG,CAAC,GAAG,UAAU,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,CAAC,CAAC,CAAC,oBAAoB;QAC5D,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QACf,OAAO,GAAG,OAAO,IAAI,UAAU,EAAE,CAAC,OAAO,CAAC,cAAc,EAAE,IAAI,CAAC,CAAC,CAAC,sBAAsB;KACxF;IAAC,OAAO,KAAK,EAAE;QACd,wEAAwE;QACxE,MAAM,UAAU,GAAG,GAAG,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;QAC1C,IAAI,UAAU,EAAE;YACd,OAAO,iBAAiB,CAAC,UAAU,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC,EAAE,IAAI,CAAC,CAAC;SAC1D;QAED,OAAO,WAAW,CAAC,GAAG,CAAC,CAAC;KACzB;AACH,CAAC"}
+{"version":3,"file":"ipfs.js","sourceRoot":"","sources":["../../../../src/lib/ipfs/ipfs.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;AAEzC,MAAM,QAAQ,GAAG,mCAAmC,CAAC;AAErD,MAAM,UAAU,iBAAiB,CAC/B,GAAW,EACX,IAEC;IAED,IAAI,CAAC,GAAG,EAAE;QACR,OAAO,GAAG,CAAC;KACZ;IACD,IAAI,GAAG,CAAC,UAAU,CAAC,QAAQ,CAAC,EAAE;QAC5B,OAAO,GAAG,CAAC;KACZ;IACD,MAAM,EAAE,OAAO,EAAE,GAAG,IAAI,CAAC;IACzB,IAAI;QACF,MAAM,GAAG,GAAG,IAAI,GAAG,CACjB,GAAG,CAAC,UAAU,CAAC,SAAS,CAAC,CAAC,CAAC,CAAC,GAAG,CAAC,OAAO,CAAC,SAAS,EAAE,UAAU,CAAC,CAAC,CAAC,CAAC,GAAG,CACrE,CAAC;QACF,MAAM,SAAS,GAAG,GAAG,CAAC,WAAW,EAAE,CAAC,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC,CAAC;QACpE,MAAM,GAAG,GAAG,GAAG,CAAC,SAAS,CAAC,SAAS,EAAE,SAAS,GAAG,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,4GAA4G;QAC/K,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC;QACf,OAAO,GAAG,OAAO,IAAI,GAAG,GAAG,GAAG,CAAC,QAAQ,KAAK,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG,CAAC,QAAQ,GAAG,GAAG,CAAC,MAAM,EAAE,CAAC,OAAO,CACxF,cAAc,EACd,IAAI,CACL,CAAC,CAAC,sBAAsB;KAC1B;IAAC,OAAO,KAAK,EAAE;QACd,wEAAwE;QACxE,MAAM,UAAU,GAAG,GAAG,CAAC,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;QAC1C,IAAI,UAAU,EAAE;YACd,OAAO,iBAAiB,CAAC,UAAU,UAAU,EAAE,EAAE,IAAI,CAAC,CAAC;SACxD;QAED,OAAO,WAAW,CAAC,GAAG,CAAC,CAAC;KACzB;AACH,CAAC"}

package/dist/esm/lib/offer/getOfferDetails.js.map

@@ -1 +1 @@
-{"version":3,"file":"getOfferDetails.js","sourceRoot":"","sources":["../../../../src/lib/offer/getOfferDetails.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAiE9D,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,KAA2C,EACzB,EAAE;IACpB,MAAM,2BAA2B,GAGjB,WAAW,CAAC,KAAK,CAAC;QAChC,CAAC,CAAE,KAAK,CAAC,QAAyB;QAClC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC;YACjB,CAAC,CAAE,KAAK,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,CAE9C;YAChB,CAAC,CAAC,SAAS,CAAC;IACd,MAAM,IAAI,GACR,2BAA2B,EAAE,OAAO,EAAE,KAAK;QAC3C,KAAK,CAAC,QAAQ,EAAE,IAAI;QACpB,UAAU,CAAC;IACb,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC;IAEvC,MAAM,YAAY,GAAG,oBAAoB,CAAC,KAAK,CAAC,CAAC;IACjD,MAAM,YAAY,GAAG;QACnB,kBAAkB,EAChB,2BAA2B,EAAE,QAAQ,EAAE,kBAAkB;QAC3D,aAAa,EACX,2BAA2B,EAAE,QAAQ,EAAE,sBAAsB,EAAE,GAAG,CAChE,CAAC,YAAiB,EAAE,EAAE,CAAC,CAAC;YACtB,IAAI,EAAE,YAAY,CAAC,KAAK;YACxB,KAAK,EAAE,YAAY,CAAC,YAAY;SACjC,CAAC,CACH,IAAI,EAAE;KACV,CAAC;IACF,MAAM,WAAW,GACf,2BAA2B,EAAE,OAAO,EAAE,WAAW;QACjD,KAAK,CAAC,QAAQ,EAAE,WAAW;QAC3B,EAAE,CAAC;IACL,MAAM,MAAM,GAAG,2BAA2B,EAAE,eAAe,IAAI,IAAI,CAAC;IACpE,MAAM,iBAAiB,GACrB,MAAM,EAAE,WAAW;QACnB,2BAA2B,EAAE,OAAO,CAAC,eAAe,EAAE,WAAW;QACjE,EAAE,CAAC;IACL,MAAM,MAAM,GACV,2BAA2B,EAAE,OAAO,EAAE,cAAc,EAAE,GAAG,CACvD,CAAC,EAAE,GAAG,EAAmB,EAAE,EAAE,CAAC,GAAG,CAClC,IAAI,EAAE,CAAC;IACV,MAAM,cAAc,GAClB,2BAA2B,EAAE,gBAAgB,EAAE,cAAc,EAAE,GAAG,CAChE,CAAC,EAAE,GAAG,EAAmB,EAAE,EAAE,CAAC,GAAG,CAClC,IAAI,EAAE,CAAC;IACV,MAAM,WAAW,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC;IACvE,MAAM,QAAQ,GAAG,WAAW;QAC1B,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,IAAI,EAA0C,EAAE,CAClE,SAAS,CAAC,IAAI,CAAC,CAChB;QACH,CAAC,CAAC,SAAS,CAAC;IACd,MAAM,SAAS,GAAG,QAAQ,IAAI,cAAc,EAAE,CAAC,CAAC,CAAC,IAAI,MAAM,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;IACvE,OAAO;QACL,OAAO,EAAE,KAAK;QACd,IAAI;QACJ,QAAQ;QACR,YAAY;QACZ,YAAY;QACZ,WAAW;QACX,MAAM;QACN,iBAAiB;QACjB,MAAM,EAAE,cAAc,EAAE,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM;QACxD,WAAW;QACX,QAAQ;QACR,SAAS;KACV,CAAC;AACJ,CAAC,CAAC"}
+{"version":3,"file":"getOfferDetails.js","sourceRoot":"","sources":["../../../../src/lib/offer/getOfferDetails.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,QAAQ,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AACjD,OAAO,EAAE,SAAS,EAAE,eAAe,EAAE,MAAM,kBAAkB,CAAC;AAiE9D,MAAM,CAAC,MAAM,eAAe,GAAG,CAC7B,KAA2C,EACzB,EAAE;IACpB,MAAM,2BAA2B,GAGjB,WAAW,CAAC,KAAK,CAAC;QAChC,CAAC,CAAE,KAAK,CAAC,QAAyB;QAClC,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC;YACf,CAAC,CAAE,KAAK,CAAC,QAAQ,EAAE,KAAK,EAAE,IAAI,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,eAAe,CAAC,IAAI,CAAC,CAE9C;YAChB,CAAC,CAAC,SAAS,CAAC;IAChB,MAAM,IAAI,GACR,2BAA2B,EAAE,OAAO,EAAE,KAAK;QAC3C,KAAK,CAAC,QAAQ,EAAE,IAAI;QACpB,UAAU,CAAC;IACb,MAAM,QAAQ,GAAG,KAAK,CAAC,QAAQ,EAAE,KAAK,CAAC;IAEvC,MAAM,YAAY,GAAG,oBAAoB,CAAC,KAAK,CAAC,CAAC;IACjD,MAAM,YAAY,GAAG;QACnB,kBAAkB,EAChB,2BAA2B,EAAE,QAAQ,EAAE,kBAAkB;QAC3D,aAAa,EACX,2BAA2B,EAAE,QAAQ,EAAE,sBAAsB,EAAE,GAAG,CAChE,CAAC,YAAiB,EAAE,EAAE,CAAC,CAAC;YACtB,IAAI,EAAE,YAAY,CAAC,KAAK;YACxB,KAAK,EAAE,YAAY,CAAC,YAAY;SACjC,CAAC,CACH,IAAI,EAAE;KACV,CAAC;IACF,MAAM,WAAW,GACf,2BAA2B,EAAE,OAAO,EAAE,WAAW;QACjD,KAAK,CAAC,QAAQ,EAAE,WAAW;QAC3B,EAAE,CAAC;IACL,MAAM,MAAM,GAAG,2BAA2B,EAAE,eAAe,IAAI,IAAI,CAAC;IACpE,MAAM,iBAAiB,GACrB,MAAM,EAAE,WAAW;QACnB,2BAA2B,EAAE,OAAO,CAAC,eAAe,EAAE,WAAW;QACjE,EAAE,CAAC;IACL,MAAM,MAAM,GACV,2BAA2B,EAAE,OAAO,EAAE,cAAc,EAAE,GAAG,CACvD,CAAC,EAAE,GAAG,EAAmB,EAAE,EAAE,CAAC,GAAG,CAClC,IAAI,EAAE,CAAC;IACV,MAAM,cAAc,GAClB,2BAA2B,EAAE,gBAAgB,EAAE,cAAc,EAAE,GAAG,CAChE,CAAC,EAAE,GAAG,EAAmB,EAAE,EAAE,CAAC,GAAG,CAClC,IAAI,EAAE,CAAC;IACV,MAAM,WAAW,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,CAAC,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,CAAC,CAAC,SAAS,CAAC;IACvE,MAAM,QAAQ,GAAG,WAAW;QAC1B,CAAC,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC,IAAI,EAA0C,EAAE,CAClE,SAAS,CAAC,IAAI,CAAC,CAChB;QACH,CAAC,CAAC,SAAS,CAAC;IACd,MAAM,SAAS,GAAG,QAAQ,IAAI,cAAc,EAAE,CAAC,CAAC,CAAC,IAAI,MAAM,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,CAAC;IACvE,OAAO;QACL,OAAO,EAAE,KAAK;QACd,IAAI;QACJ,QAAQ;QACR,YAAY;QACZ,YAAY;QACZ,WAAW;QACX,MAAM;QACN,iBAAiB;QACjB,MAAM,EAAE,cAAc,EAAE,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,MAAM;QACxD,WAAW;QACX,QAAQ;QACR,SAAS;KACV,CAAC;AACJ,CAAC,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bosonprotocol/react-kit",
   "description": "React toolkit with smart components and hooks for building on top of the Boson Protocol.",
-  "version": "0.30.0-alpha.3",
+  "version": "0.30.0-alpha.4",
   "main": "./dist/cjs/index.js",
   "module": "./dist/esm/index.js",
   "types": "./dist/cjs/index.d.ts",
@@ -15,8 +15,8 @@
   "license": "Apache-2.0",
   "dependencies": {
     "@bosonprotocol/chat-sdk": "^1.3.1-alpha.9",
-    "@bosonprotocol/core-sdk": "^1.40.2-alpha.0",
-    "@bosonprotocol/ethers-sdk": "^1.14.2-alpha.0",
+    "@bosonprotocol/core-sdk": "^1.40.2-alpha.1",
+    "@bosonprotocol/ethers-sdk": "^1.14.2-alpha.1",
     "@bosonprotocol/ipfs-storage": "^1.11.3",
     "@davatar/react": "1.11.1",
     "@ethersproject/units": "5.6.0",
@@ -170,5 +170,5 @@
   "overrides": {
     "typescript": "^5.1.6"
   },
-  "gitHead": "9e1e68033ed1d3b8cea2d5021cbdeb28abe8633c"
+  "gitHead": "2ad6e6a6a86fb44577f8ecdfe219431e5f30a931"
 }

package/src/components/modal/components/Commit/OfferVariantView.tsx

@@ -26,6 +26,7 @@ import { DetailContextProps } from "../common/detail/DetailViewProvider";
 import { OnClickBuyOrSwapHandler } from "../common/detail/types";
 import { UseGetOfferDetailDataProps } from "../common/detail/useGetOfferDetailData";
 import { BosonLogo } from "../common/BosonLogo";
+import { PhygitalLabel } from "../../../productCard/ProductCard";
 
 const colors = theme.colors.light;
 const ImageWrapper = styled.div`
@@ -36,6 +37,7 @@ const ImageWrapper = styled.div`
   ${breakpoint.s} {
     max-width: 35rem !important;
   }
+  overflow: hidden;
 `;
 
 const ImageAndSellerIdContainer = styled(Grid)`
@@ -173,6 +175,7 @@ export function OfferVariantView({
         >
           <ImageAndSellerIdContainer flexDirection="column" flex={1}>
             <ImageWrapper>
+              <PhygitalLabel />
               {mediaFiles.length && (
                 <DetailSlider
                   mediaFiles={mediaFiles}

package/src/components/modal/components/common/OfferFullDescription/DigitalProductData.tsx

@@ -3,7 +3,6 @@ import React from "react";
 import styled from "styled-components";
 import { getOfferDetails } from "../../../../../lib/offer/getOfferDetails";
 import { Offer } from "../../../../../types/offer";
-import { NftItemIcon } from "../../../../nftItem/NftItemIcon";
 import { DetailsSummary } from "../../../../ui/DetailsSummary";
 import { Grid } from "../../../../ui/Grid";
 import { Typography } from "../../../../ui/Typography";
@@ -15,6 +14,12 @@ import {
   digitalTypeMappingDisplay,
   ercTokenMapping
 } from "../../../../../lib/bundle/const";
+import { useBundleItemsImages } from "../../../../../hooks/bundles/useBundleItemsImages";
+import { useCoreSDKWithContext } from "../../../../../hooks/core-sdk/useCoreSdkWithContext";
+import { isNftItem } from "../../../../../lib/bundle/filter";
+import { isTruthy } from "../../../../../types/helpers";
+import Video from "../../../../ui/Video";
+import IpfsImage from "../../../../ui/IpfsImage";
 
 const StyledDetailsSummary = styled(DetailsSummary)`
   .icon-wrapper {
@@ -38,7 +43,12 @@ export const DigitalProductData: React.FC<DigitalProductDataProps> = ({
   offer,
   imagesToShow
 }) => {
-  const { nftItems } = getOfferDetails(offer);
+  const { bundleItems } = getOfferDetails(offer);
+  const { images } = useBundleItemsImages({
+    bundleItems,
+    coreSDK: useCoreSDKWithContext()
+  });
+
   return (
     <Grid
       flexDirection="column"
@@ -47,121 +57,155 @@ export const DigitalProductData: React.FC<DigitalProductDataProps> = ({
       justifyContent="space-between"
     >
       <Typography tag="h3">Digital product data</Typography>
-      {nftItems?.map((nftItem, index) => {
-        const nftMedia = [
-          ...(nftItem.image
-            ? [{ url: nftItem.image, type: "image" } as const]
-            : []),
-          ...(nftItem.animationUrl
-            ? [
-                {
-                  url: nftItem.animationUrl,
-                  type: "video"
-                } as const
-              ]
-            : [])
-        ];
-        const icon = <NftItemIcon nftItem={nftItem} />;
-        return (
-          <StyledDetailsSummary
-            key={nftItem.id}
-            icon={icon ? <MediaWrapper>{icon}</MediaWrapper> : null}
-            summaryText={nftItem.name || nftItem.contract || ""}
-            initiallyOpen={index === 0}
-          >
-            <DetailTable
-              align={false}
-              noBorder
-              data={[
-                ...(nftItem.contract
-                  ? [
-                      {
-                        name: "Contract address",
-                        value: (
-                          <Typography tag="p">{nftItem.contract}</Typography>
-                        )
-                      }
-                    ]
-                  : []),
-                ...(nftItem.description
-                  ? [
-                      {
-                        name: "Description",
-                        value: (
-                          <Typography tag="p">{nftItem.description}</Typography>
-                        )
-                      }
-                    ]
-                  : []),
-                ...(nftItem.attributes || []).map((attribute) => ({
-                  name: attribute.displayType || attribute.traitType,
-                  value: (
-                    <Typography tag="p">
-                      {digitalTypeMappingDisplay[
-                        attribute.value as keyof typeof digitalTypeMappingDisplay
+      {bundleItems
+        ?.map((bundleItem, index) => {
+          if (!isNftItem(bundleItem)) {
+            return null;
+          }
+          const nftItem = bundleItem;
+          const nftMedia = [
+            ...(nftItem.image
+              ? [{ url: nftItem.image, type: "image" } as const]
+              : []),
+            ...(nftItem.animationUrl
+              ? [
+                  {
+                    url: nftItem.animationUrl,
+                    type: "video"
+                  } as const
+                ]
+              : [])
+          ];
+          const imageSrc = images?.[index];
+          const videoSrc = bundleItem.animationUrl;
+          const icon = videoSrc ? (
+            <MediaWrapper>
+              <Video src={videoSrc} />
+            </MediaWrapper>
+          ) : imageSrc ? (
+            <MediaWrapper>
+              <IpfsImage
+                src={imageSrc}
+                overrides={{ ipfsGateway: "https://ipfs.io/ipfs" }}
+              />
+            </MediaWrapper>
+          ) : null;
+          return (
+            <StyledDetailsSummary
+              key={nftItem.id}
+              icon={icon ? <MediaWrapper>{icon}</MediaWrapper> : null}
+              summaryText={nftItem.name || nftItem.contract || ""}
+              initiallyOpen={index === 0}
+            >
+              <DetailTable
+                align={false}
+                noBorder
+                data={[
+                  ...(nftItem.contract
+                    ? [
+                        {
+                          name: "Contract address",
+                          value: (
+                            <Typography tag="p">{nftItem.contract}</Typography>
+                          )
+                        }
                       ]
-                        ? digitalTypeMappingDisplay[
-                            attribute.value as keyof typeof digitalTypeMappingDisplay
-                          ]
-                        : digitalNftTypeMapping[
-                              attribute.value as keyof typeof digitalNftTypeMapping
-                            ]
-                          ? digitalNftTypeMapping[
-                              attribute.value as keyof typeof digitalNftTypeMapping
-                            ]
-                          : attribute.value}
-                    </Typography>
-                  )
-                })),
-                ...(nftItem.tokenIdRange?.min && nftItem.tokenIdRange.max
-                  ? [
-                      {
-                        name: "Token IDs",
-                        value: (
-                          <Typography tag="p">
-                            {nftItem.tokenIdRange?.min}-
-                            {nftItem.tokenIdRange?.max}
-                          </Typography>
-                        )
-                      }
-                    ]
-                  : []),
-                ...(nftItem.terms || []).map((term) => ({
-                  name: term.displayKey || term.key,
-                  value: (
-                    <Typography tag="p">
-                      {buyerTransferInfoMapping[
-                        term.value as keyof typeof buyerTransferInfoMapping
+                    : []),
+                  ...(nftItem.description
+                    ? [
+                        {
+                          name: "Description",
+                          value: (
+                            <Typography tag="p">
+                              {nftItem.description}
+                            </Typography>
+                          )
+                        }
                       ]
-                        ? buyerTransferInfoMapping[
-                            term.value as keyof typeof buyerTransferInfoMapping
-                          ]
-                        : ercTokenMapping[
-                              term.value as keyof typeof ercTokenMapping
+                    : []),
+                  ...(nftItem.attributes || []).map((attribute) => ({
+                    name: attribute.displayType || attribute.traitType,
+                    value: (
+                      <Typography tag="p">
+                        {digitalTypeMappingDisplay[
+                          attribute.value as keyof typeof digitalTypeMappingDisplay
+                        ]
+                          ? digitalTypeMappingDisplay[
+                              attribute.value as keyof typeof digitalTypeMappingDisplay
                             ]
-                          ? ercTokenMapping[
-                              term.value as keyof typeof ercTokenMapping
+                          : digitalNftTypeMapping[
+                                attribute.value as keyof typeof digitalNftTypeMapping
+                              ]
+                            ? digitalNftTypeMapping[
+                                attribute.value as keyof typeof digitalNftTypeMapping
+                              ]
+                            : attribute.value}
+                      </Typography>
+                    )
+                  })),
+                  ...(nftItem.tokenIdRange?.min && nftItem.tokenIdRange.max
+                    ? [
+                        {
+                          name:
+                            nftItem.tokenIdRange?.min ===
+                            nftItem.tokenIdRange?.max
+                              ? "Token ID"
+                              : "Token IDs",
+                          value:
+                            nftItem.tokenIdRange?.min ===
+                            nftItem.tokenIdRange?.max ? (
+                              <Typography tag="p">
+                                {nftItem.tokenIdRange?.min}
+                              </Typography>
+                            ) : (
+                              <Typography tag="p">
+                                {nftItem.tokenIdRange?.min}-
+                                {nftItem.tokenIdRange?.max}
+                              </Typography>
+                            )
+                        }
+                      ]
+                    : []),
+                  ...(nftItem.terms || []).map((term) => ({
+                    name: term.displayKey || term.key,
+                    value: (
+                      <Typography tag="p">
+                        {buyerTransferInfoMapping[
+                          term.value as keyof typeof buyerTransferInfoMapping
+                        ]
+                          ? buyerTransferInfoMapping[
+                              term.value as keyof typeof buyerTransferInfoMapping
                             ]
-                          : term.value}
-                    </Typography>
-                  )
-                }))
-              ]}
-              inheritColor={false}
-            />
-            {!!nftMedia.length && (
-              <div style={{ width: "100%", padding: "0 2rem 1.5rem 2rem" }}>
-                <SlickSlider
-                  settings={{ ...initialSettings, slidesToShow: imagesToShow }}
-                  mediaFiles={nftMedia}
-                  alignLeft
-                  imageOptimizationOpts={{ height: 500 }}
-                />
-              </div>
-            )}
-          </StyledDetailsSummary>
-        );
-      })}
+                          : ercTokenMapping[
+                                term.value as keyof typeof ercTokenMapping
+                              ]
+                            ? ercTokenMapping[
+                                term.value as keyof typeof ercTokenMapping
+                              ]
+                            : term.value}
+                      </Typography>
+                    )
+                  }))
+                ]}
+                inheritColor={false}
+              />
+              {!!nftMedia.length && (
+                <div style={{ width: "100%", padding: "0 2rem 1.5rem 2rem" }}>
+                  <SlickSlider
+                    settings={{
+                      ...initialSettings,
+                      slidesToShow: imagesToShow
+                    }}
+                    mediaFiles={nftMedia}
+                    alignLeft
+                    imageOptimizationOpts={{ height: 500 }}
+                  />
+                </div>
+              )}
+            </StyledDetailsSummary>
+          );
+        })
+        .filter(isTruthy)}
     </Grid>
   );
 };