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

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

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,
@@ -62,8 +63,8 @@ const Wrapper = ({
   }
   return <>{children}</>;
 };
-export const PhygitalLabel = () => {
-  return <ProductCardLabelWrapper>Phygital</ProductCardLabelWrapper>;
+export const PhygitalLabel = ({ ...rest }) => {
+  return <TopLeftRibbon {...rest} 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;