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

package/src/components/modal/components/common/detail/PhygitalProduct.tsx

@@ -1,21 +1,21 @@
 import { ArrowSquareUpRight } from "phosphor-react";
 import React, { ReactNode } from "react";
 import styled from "styled-components";
-import { useGetTokenUriImage } from "../../../../../hooks";
+import { useBundleItemsImages } from "../../../../../hooks/bundles/useBundleItemsImages";
 import { useErc1155Name } from "../../../../../hooks/contracts/erc1155/useErc1155Name";
 import { useErc721Name } from "../../../../../hooks/contracts/erc721/useErc721Name";
 import { useCoreSDKWithContext } from "../../../../../hooks/core-sdk/useCoreSdkWithContext";
+import { formatAddress } from "../../../../../lib/address/address";
 import { isNftItem, isProductV1Item } from "../../../../../lib/bundle/filter";
 import { getOfferDetails } from "../../../../../lib/offer/getOfferDetails";
+import { theme } from "../../../../../theme";
 import { Offer } from "../../../../../types/offer";
+import { Tooltip } from "../../../../tooltip/Tooltip";
 import { Grid } from "../../../../ui/Grid";
 import IpfsImage from "../../../../ui/IpfsImage";
 import ThemedButton from "../../../../ui/ThemedButton";
 import { Typography } from "../../../../ui/Typography";
 import Video from "../../../../ui/Video";
-import { theme } from "../../../../../theme";
-import { Tooltip } from "../../../../tooltip/Tooltip";
-import { formatAddress } from "../../../../../lib/address/address";
 const colors = theme.colors.light;
 const imageSize = "2.5rem";
 
@@ -52,27 +52,7 @@ export const PhygitalProduct: React.FC<PhygitalProductProps> = ({ offer }) => {
     },
     { enabled: !!contracts?.length, coreSDK }
   );
-  const { data: ercImages } = useGetTokenUriImage(
-    {
-      tokenIds: bundleItems?.map((bundleItem) => {
-        if (isNftItem(bundleItem)) {
-          return (
-            bundleItem.tokenIdRange?.min ??
-            bundleItem.tokenIdRange?.max ??
-            bundleItem.tokenId
-          );
-        }
-        return null;
-      }),
-      tokenUris: bundleItems?.map((bundleItem) => {
-        if (isNftItem(bundleItem)) {
-          return bundleItem.metadataUri;
-        }
-        return null;
-      })
-    },
-    { enabled: !!bundleItems?.length }
-  );
+  const { images } = useBundleItemsImages({ bundleItems, coreSDK });
   return (
     <Grid flexDirection="column" alignItems="flex-start" gap="1rem">
       <Typography>
@@ -118,7 +98,7 @@ export const PhygitalProduct: React.FC<PhygitalProductProps> = ({ offer }) => {
                   </Tooltip>
                 );
               }
-              imageSrc = ercImages?.[index] || bundleItem.image;
+              imageSrc = images?.[index];
               videoSrc = bundleItem.animationUrl;
               rangeText =
                 bundleItem.tokenIdRange?.min ||
@@ -158,13 +138,16 @@ export const PhygitalProduct: React.FC<PhygitalProductProps> = ({ offer }) => {
                   color: colors.darkGrey
                 }}
               >
-                {imageSrc ? (
+                {videoSrc ? (
                   <MediaWrapper>
-                    <IpfsImage src={imageSrc} />
+                    <Video src={videoSrc} />
                   </MediaWrapper>
-                ) : videoSrc ? (
+                ) : imageSrc ? (
                   <MediaWrapper>
-                    <Video src={videoSrc} />
+                    <IpfsImage
+                      src={imageSrc}
+                      overrides={{ ipfsGateway: "https://ipfs.io/ipfs" }}
+                    />
                   </MediaWrapper>
                 ) : null}
                 <div>{quantity}x</div>

package/src/components/modal/components/common/detail/TokenGatedItem.tsx

@@ -10,12 +10,12 @@ import React, {
   useState
 } from "react";
 import styled from "styled-components";
-import { useErc1155Uri } from "../../../../../hooks/contracts/erc1155/useErc1155Uri";
+import { useErc1155Uris } from "../../../../../hooks/contracts/erc1155/useErc1155Uris";
 import { useErc20ExchangeTokenInfo } from "../../../../../hooks/contracts/erc20/useErc20ExchangeTokenInfo";
-import { useErc721TokenUri } from "../../../../../hooks/contracts/erc721/useErc721TokenUri";
+import { useErc721TokenUris } from "../../../../../hooks/contracts/erc721/useErc721TokenUris";
 import { useCoreSDKWithContext } from "../../../../../hooks/core-sdk/useCoreSdkWithContext";
 import { nativeOnChain } from "../../../../../lib/const/tokens";
-import { useGetTokenUriImage } from "../../../../../hooks/contracts/useGetTokenUriImage";
+import { useGetTokenUriImages } from "../../../../../hooks/contracts/useGetTokenUriImages";
 import { theme } from "../../../../../theme";
 import { Offer } from "../../../../../types/offer";
 import { useConfigContext } from "../../../../config/ConfigContext";
@@ -185,10 +185,15 @@ export const TokenGatedItem = ({
       coreSDK
     }
   );
-  const { data: erc721TokenUri } = useErc721TokenUri(
+  const pairsContractTokens = [
     {
       contractAddress: condition?.tokenAddress,
       tokenIds: [condition?.minTokenId]
+    }
+  ];
+  const { data: erc721TokenUri } = useErc721TokenUris(
+    {
+      pairsContractTokens
     },
     {
       enabled:
@@ -198,10 +203,9 @@ export const TokenGatedItem = ({
       coreSDK
     }
   );
-  const { data: erc1155Uri } = useErc1155Uri(
+  const { data: erc1155Uri } = useErc1155Uris(
     {
-      contractAddress: condition?.tokenAddress,
-      tokenIds: [condition?.minTokenId]
+      pairsContractTokens
     },
     {
       enabled:
@@ -230,17 +234,25 @@ export const TokenGatedItem = ({
   );
 
   const tokenIdForImage = condition?.minTokenId;
-  const { data: erc721Image } = useGetTokenUriImage(
+  const { data: erc721Image } = useGetTokenUriImages(
     {
-      tokenUris: erc721TokenUri,
-      tokenIds: [tokenIdForImage]
+      pairsTokenUrisIds: [
+        {
+          tokenUris: erc721TokenUri?.[0],
+          tokenIds: [tokenIdForImage]
+        }
+      ]
     },
     { enabled: !!(erc721TokenUri && erc721TokenUri[0] && tokenIdForImage) }
   );
-  const { data: erc1155Image } = useGetTokenUriImage(
+  const { data: erc1155Image } = useGetTokenUriImages(
     {
-      tokenUris: erc1155Uri,
-      tokenIds: [tokenIdForImage]
+      pairsTokenUrisIds: [
+        {
+          tokenUris: erc1155Uri?.[0],
+          tokenIds: [tokenIdForImage]
+        }
+      ]
     },
     { enabled: !!(erc1155Uri && erc1155Uri[0] && tokenIdForImage) }
   );
@@ -255,9 +267,9 @@ export const TokenGatedItem = ({
             currencies={[currency]}
           />
         ) : erc721Image ? (
-          <ErcImage src={erc721Image[0]} alt="erc721" />
+          <ErcImage src={erc721Image[0][0]} alt="erc721" />
         ) : erc1155Image ? (
-          <ErcImage src={erc1155Image[0]} alt="erc1155" />
+          <ErcImage src={erc1155Image[0][0]} alt="erc1155" />
         ) : null}
       </>
     );

package/src/components/productCard/ProductCard.styles.ts

@@ -13,6 +13,45 @@ export const ProductCardLabelWrapper = styled.div`
   z-index: 1;
 `;
 
+export const TopLeftRibbon = styled.div`
+  --d: 6px; /* folded part */
+  position: relative;
+  z-index: 1;
+  &:before {
+    content: attr(data-text);
+    font-size: var(--f);
+    font-weight: 600;
+    /* I : position & coloration */
+    position: absolute;
+    top: 0;
+    left: 0;
+    transform: translate(0%, 125%) rotate(-45deg);
+    transform-origin: bottom left;
+    padding: 5px 35px calc(var(--d) + 5px);
+    color: ${({ theme }) => theme?.colors?.light.white};
+    background: linear-gradient(rgba(0, 0, 0, 0.5) 0 0) bottom/100% var(--d)
+      no-repeat ${({ theme }) => theme?.colors?.light.secondary};
+    /* II : clipping */
+    clip-path: polygon(
+      0 0,
+      100% 0,
+      100% 100%,
+      calc(100% - var(--d)) calc(100% - var(--d)),
+      var(--d) calc(100% - var(--d)),
+      0 100%
+    );
+    /* III : masking */
+    -webkit-mask:
+      linear-gradient(135deg, transparent calc(50% - var(--d) * 0.707), #fff 0)
+        bottom left,
+      linear-gradient(-135deg, transparent calc(50% - var(--d) * 0.707), #fff 0)
+        bottom right;
+    -webkit-mask-size: 300vmax 300vmax;
+    -webkit-mask-composite: destination-in;
+    mask-composite: intersect;
+  }
+`;
+
 export const ProductCardCreator = styled.div`
   display: flex;
   flex-direction: column;
@@ -130,8 +169,10 @@ export const ProductCardWrapper = styled.div<{ $isHoverDisabled: boolean }>`
       ? css`
           transition: all 300ms ease-in-out;
           &:hover {
-            box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.05),
-              4px 4px 4px rgba(0, 0, 0, 0.05), 8px 8px 8px rgba(0, 0, 0, 0.05),
+            box-shadow:
+              0px 0px 0px rgba(0, 0, 0, 0.05),
+              4px 4px 4px rgba(0, 0, 0, 0.05),
+              8px 8px 8px rgba(0, 0, 0, 0.05),
               16px 16px 16px rgba(0, 0, 0, 0.05);
 
             [data-image-wrapper] {

package/src/components/productCard/ProductCard.tsx

@@ -11,6 +11,7 @@ import {
   ProductCardBottomContent,
   ProductCardCreator,
   ProductCardCreatorAvatar,
+  TopLeftRibbon,
   ProductCardCreatorName,
   ProductCardData,
   ProductCardImageWrapper,
@@ -63,7 +64,7 @@ const Wrapper = ({
   return <>{children}</>;
 };
 export const PhygitalLabel = () => {
-  return <ProductCardLabelWrapper>Phygital</ProductCardLabelWrapper>;
+  return <TopLeftRibbon data-text="Phygital" />;
 };
 export const ProductCard = (props: IProductCard) => {
   const {

package/src/components/ui/IpfsImage.tsx

@@ -1,5 +1,5 @@
 import { CameraSlash, Image as ImageIcon } from "phosphor-react";
-import React, { useState } from "react";
+import React, { useEffect, useState } from "react";
 import styled from "styled-components";
 
 import { buttonText } from "./styles";
@@ -82,6 +82,9 @@ interface IImage {
   withLoading?: boolean;
   optimizationOpts?: Partial<ImageOptimizationOpts>;
   onSetStatus?: (status: LoadingStatus) => void;
+  overrides?: {
+    ipfsGateway?: string;
+  };
 }
 const IpfsImage: React.FC<IImage & React.HTMLAttributes<HTMLDivElement>> = ({
   src,
@@ -92,6 +95,7 @@ const IpfsImage: React.FC<IImage & React.HTMLAttributes<HTMLDivElement>> = ({
   withLoading = true,
   optimizationOpts,
   onSetStatus,
+  overrides,
   ...rest
 }) => {
   const { ipfsGateway } = useIpfsContext();
@@ -103,10 +107,21 @@ const IpfsImage: React.FC<IImage & React.HTMLAttributes<HTMLDivElement>> = ({
     onSetStatus?.(innerStatus);
   };
   const [currentSrc, setCurrentSrc] = useState<string>(
-    getImageUrl(src, ipfsGateway, optimizationOpts)
+    getImageUrl(src, overrides?.ipfsGateway || ipfsGateway, optimizationOpts)
   );
   const [didOriginalSrcFail, setDidOriginalSrcFail] = useState<boolean>(false);
-
+  useEffect(() => {
+    if (src === currentSrc) {
+      return;
+    }
+    // reset all if src changes
+    setStatus(withLoading ? "loading" : "success");
+    setCurrentSrc(
+      getImageUrl(src, overrides?.ipfsGateway || ipfsGateway, optimizationOpts)
+    );
+    setDidOriginalSrcFail(false);
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [src]);
   const isError = status === "error";
   const isLoading = status === "loading";
   const isSuccess = status === "success";

package/src/components/widgets/commit/CommitWidget.tsx

@@ -8,7 +8,7 @@ import {
 } from "./CommitWidgetProviders";
 import GlobalStyle from "../../styles/GlobalStyle";
 import { CSSProperties } from "styled-components";
-import { useProvider } from "../../../hooks/connection/connection";
+
 type CommitProps = {
   buttonProps?: Omit<ButtonProps, "onClick">;
   trigger?: ComponentType<{ onClick: () => unknown }> | undefined;

package/src/hooks/bundles/useBundleItemsImages.ts

@@ -0,0 +1,71 @@
+import { CoreSDK, subgraph } from "@bosonprotocol/core-sdk";
+import { isNftItem } from "../../lib/bundle/filter";
+import { useErc721TokenUris } from "../contracts/erc721/useErc721TokenUris";
+import { useErc1155Uris } from "../contracts/erc1155/useErc1155Uris";
+import { useGetTokenUriImages } from "../contracts/useGetTokenUriImages";
+import { isTruthy } from "../../types/helpers";
+
+export const useBundleItemsImages = ({
+  bundleItems,
+  coreSDK
+}: {
+  bundleItems:
+    | Extract<
+        subgraph.OfferFieldsFragment["metadata"],
+        { __typename: "BundleMetadataEntity" }
+      >["items"]
+    | undefined;
+  coreSDK: CoreSDK;
+}) => {
+  const pairsContractTokens = bundleItems?.map((bundleItem) =>
+    isNftItem(bundleItem)
+      ? {
+          contractAddress: bundleItem.contract,
+          tokenIds: [
+            bundleItem.tokenId ||
+              bundleItem.tokenIdRange?.min ||
+              bundleItem.tokenIdRange?.max
+          ]
+        }
+      : null
+  );
+  const { data: erc721TokenUris } = useErc721TokenUris(
+    {
+      pairsContractTokens
+    },
+    {
+      enabled: !!pairsContractTokens?.length,
+      coreSDK
+    }
+  );
+  const { data: erc1155Uris } = useErc1155Uris(
+    {
+      pairsContractTokens
+    },
+    {
+      enabled: !!pairsContractTokens?.length,
+      coreSDK
+    }
+  );
+  const { data: ercImages } = useGetTokenUriImages(
+    {
+      pairsTokenUrisIds: pairsContractTokens?.map((pair, index) => {
+        return {
+          tokenIds: pair?.tokenIds,
+          tokenUris: erc721TokenUris?.[index]?.filter(isTruthy).length
+            ? erc721TokenUris?.[index]
+            : erc1155Uris?.[index]
+        };
+      })
+    },
+    { enabled: !!pairsContractTokens?.length }
+  );
+  const images = bundleItems?.map((bundleItem, index) => {
+    const img = ercImages?.[index][0] || ""; // image of first tokenId
+    if (isNftItem(bundleItem)) {
+      return img || bundleItem.image;
+    }
+    return img;
+  });
+  return { images };
+};

package/src/hooks/contracts/erc1155/useErc1155Uris.ts

@@ -0,0 +1,52 @@
+import { CoreSDK } from "@bosonprotocol/core-sdk";
+import { useQuery } from "react-query";
+
+export const useErc1155Uris = (
+  props: {
+    pairsContractTokens:
+      | ({
+          contractAddress: string | undefined | null;
+          tokenIds: (string | null | undefined)[] | undefined;
+        } | null)[]
+      | undefined;
+  },
+  { enabled, coreSDK }: { enabled: boolean | undefined; coreSDK: CoreSDK }
+) => {
+  return useQuery(
+    ["useErc1155Uris", 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.erc1155Uri({
+                          contractAddress: pair.contractAddress,
+                          tokenId
+                        })
+                      : null
+                  )
+                )
+              : null
+          )
+        )
+      ).map((promiseSettled) =>
+        promiseSettled
+          ? promiseSettled.map((promiseSettled) =>
+              promiseSettled.status === "fulfilled"
+                ? promiseSettled.value
+                : null
+            )
+          : null
+      );
+    },
+    { enabled }
+  );
+};

package/src/hooks/contracts/erc721/useErc721TokenUris.ts

@@ -0,0 +1,52 @@
+import { CoreSDK } from "@bosonprotocol/core-sdk";
+import { useQuery } from "react-query";
+
+export const useErc721TokenUris = (
+  props: {
+    pairsContractTokens:
+      | ({
+          contractAddress: string | undefined | null;
+          tokenIds: (string | null | undefined)[] | undefined;
+        } | null)[]
+      | undefined;
+  },
+  { enabled, coreSDK }: { enabled: boolean | undefined; coreSDK: 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 }
+  );
+};

package/src/hooks/contracts/useGetTokenUriImages.ts

@@ -0,0 +1,126 @@
+import { getImageUrl } from "../../lib/images/images";
+import { useQuery } from "react-query";
+
+const replaceUrlWithId = ({
+  tokenId,
+  url
+}: {
+  url: string;
+  tokenId: string;
+}) => {
+  const urlWithIdReplaced = url.replace("{id}", tokenId);
+  return urlWithIdReplaced;
+};
+
+export const useGetTokenUriImages = (
+  props: {
+    pairsTokenUrisIds:
+      | ({
+          tokenUris: (string | null | undefined)[] | undefined | null;
+          tokenIds: (string | null | undefined)[] | undefined | null;
+        } | null)[]
+      | undefined;
+
+    ipfsGateway?: string;
+  },
+  { enabled }: { enabled: boolean }
+) => {
+  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): Promise<string[]> => {
+            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): Promise<string> => {
+                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
+    }
+  );
+};

package/src/hooks/index.ts

@@ -8,12 +8,12 @@ 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";

package/src/lib/ipfs/ipfs.ts

@@ -1,6 +1,8 @@
 import { CID } from "multiformats/cid";
 import { sanitizeUrl } from "../url/url";
 
+const lensIpfs = "https://lens.infura-ipfs.io/ipfs/";
+
 export function getIpfsGatewayUrl(
   uri: string,
   opts: {
@@ -10,18 +12,26 @@ export function getIpfsGatewayUrl(
   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);